/* ============================================================
   PRESTIGE GLOW SPA — DESIGN SYSTEM
   Luxury editorial: espresso black · warm ivory · rose-champagne · bronze gold
   Italiana (display) · Cormorant Garamond (accent serif) · Jost (sans)
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --ink: #0B0B0C;
  --ink-2: #111113;
  --ink-3: #18191C;
  --ink-soft: #202126;
  --ivory: #F5EFE6;
  --cream: #FBF7F0;
  --cream-2: #F1E9DC;
  --champagne: #EDD9A3;
  --gold: #C6A15B;
  --gold-2: #DFC07C;
  --taupe: #A79A82;
  --line: rgba(245, 239, 230, 0.14);
  --line-strong: rgba(245, 239, 230, 0.28);
  --line-dark: rgba(11, 11, 12, 0.14);

  --font-display: 'Italiana', 'Times New Roman', serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cine: cubic-bezier(0.83, 0, 0.17, 1);
  --nav-h: 84px;
  --ann-h: 0px;

  --gold-soft: rgba(198, 161, 91, 0.5);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ivory);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 3px; }
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--ivory); color: var(--ink);
  padding: 10px 18px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: top .3s;
}
.skip-link:focus { top: 16px; }

/* ---------- TYPE ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold); opacity: .7; }
.eyebrow.centered::after { content: ''; width: 34px; height: 1px; background: var(--gold); opacity: .7; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ivory);
}
.display .it {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  color: var(--champagne);
  letter-spacing: -0.01em;
}
.display.dark { color: var(--ink); }
.display.dark .it { color: var(--gold); }

.lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.75; font-weight: 300; color: rgba(245,239,230,.78); }
.lead.dark { color: rgba(11,11,12,.72); }
.small-meta { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--taupe); }

/* ---------- BUTTONS ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 19px 42px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--ivory);
  background: transparent;
  overflow: hidden;
  transition: color .5s var(--ease-out), border-color .5s;
  white-space: nowrap;
  will-change: transform;
}
.btn .btn-fill {
  position: absolute; inset: 0;
  background: var(--ivory);
  transform: translateY(101%);
  transition: transform .55s var(--ease-cine);
  z-index: 0;
}
.btn .btn-label, .btn .btn-arrow { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; }
.btn .btn-arrow { transition: transform .45s var(--ease-out); }
.btn:hover { color: var(--ink); border-color: var(--ivory); }
.btn:hover .btn-fill { transform: translateY(0); }
.btn:hover .btn-arrow { transform: translateX(6px); }
.btn[data-magnetic] { will-change: transform; }

.btn-gold { border-color: var(--gold); color: var(--champagne); }
.btn-gold .btn-fill { background: var(--gold-2); }
.btn-gold:hover { color: var(--ink); border-color: var(--gold-2); }

.btn-solid { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn-solid .btn-fill { background: var(--ink); }
.btn-solid:hover { color: var(--ivory); }

.btn-lg { padding: 22px 52px; font-size: 12px; }

.btn-ghost-dark { border-color: var(--line-dark); color: var(--ink); }
.btn-ghost-dark .btn-fill { background: var(--ink); }
.btn-ghost-dark:hover { color: var(--ivory); border-color: var(--ink); }

.btn-sm { padding: 13px 24px; font-size: 10px; letter-spacing: .22em; }

/* text link */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--champagne);
  padding-bottom: 6px;
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0.35); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink .arr { transition: transform .4s var(--ease-out); }
.tlink:hover .arr { transform: translateX(6px); }

/* ---------- GRAIN / OVERLAYS ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 400;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3%, -4%); }
  30% { transform: translate(2%, -2%); }
  50% { transform: translate(-2%, 3%); }
  70% { transform: translate(3%, 2%); }
  90% { transform: translate(-1%, 4%); }
}

/* ---------- CURSOR ---------- */
.cursor-dot, .cursor-ring, .cursor-label {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 500;
  border-radius: 50%;
}
.cursor-dot { width: 6px; height: 6px; background: var(--champagne); }
.cursor-ring {
  width: 40px; height: 40px;
  border: 1px solid rgba(215,197,161,.4);
  transition: width .3s var(--ease-out), height .3s var(--ease-out),
              border-color .3s, background-color .3s;
}
.cursor-ring.grow { width: 92px; height: 92px; border-color: rgba(215,197,161,.7); }
.cursor-label {
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(245,239,230,.92);
  opacity: 0;
  transition: opacity .3s;
}
.cursor-label.on { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring, .cursor-label { display: none; }
}

/* ---------- LOADER ---------- */
.loader {
  position: fixed; inset: 0; z-index: 600;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s var(--ease-cine), visibility .8s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-word {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 76px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivory);
  text-indent: 0.34em;
  animation: loader-in 1.2s var(--ease-out) both;
}
.loader-word em { font-family: var(--font-serif); font-style: italic; color: var(--champagne); }
@keyframes loader-in { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .34em; } }
.loader-line {
  margin: 28px auto 0;
  width: min(220px, 50vw); height: 1px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.loader-line i {
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  animation: loadbar 1.3s var(--ease-cine) forwards;
}
@keyframes loadbar { 0% { transform: scaleX(0); } 60% { transform: scaleX(.85); } 100% { transform: scaleX(1); } }
/* the full trading name — "Prestige" above the rule, "Glow Spa" under it,
   so the opening card and the nav lockup name the same business */
.loader-sub {
  margin-top: 18px; font-size: 13px; letter-spacing: .46em; text-indent: .46em;
  text-transform: uppercase; color: var(--champagne);
  opacity: 0; animation: fade-up .8s .5s both;
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
  position: fixed; top: var(--ann-h, 0px); left: 0; right: 0; z-index: 260;
  height: 2px;
  background: transparent;
  pointer-events: none;
  transform-origin: left;
  background-image: linear-gradient(90deg, var(--gold), var(--champagne));
  transform: scaleX(0);
}

/* ---------- ANNOUNCEMENT BAR ----------
   --ann-h is measured at runtime (the owner can type any length of text).
   The fixed nav and the page both start below it, so nothing can collide. */
.ann-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  background: var(--gold); color: var(--ink);
  text-align: center;
  padding: 9px clamp(16px, 4vw, 40px);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .ann-bar { font-size: 9px; letter-spacing: .1em; padding: 8px 14px; }
}

/* ---------- NAV ---------- */
.site-nav {
  position: fixed; top: var(--ann-h, 0px); left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 clamp(20px, 4vw, 56px);
  transition: background .5s, backdrop-filter .5s, box-shadow .5s, height .5s;
}
.site-nav.scrolled {
  background: rgba(11,11,12,.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  height: 70px;
}
.site-nav.solid {
  background: var(--ink);
}
.nav-brand {
  display: flex; flex-direction: column;
  line-height: 1;
  z-index: 3;
}
.nav-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
  z-index: 3;
}
.nav-brand b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
}
.nav-brand span {
  font-size: 8.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.nav-links {
  display: flex; align-items: center; gap: clamp(22px, 2.2vw, 38px);
  margin: 0 auto;
}
.nav-links a {
  position: relative;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245,239,230,.82);
  padding: 6px 0;
  transition: color .3s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold-2);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* one row, never wrap (a wrapped nav was splitting the phone number) */
.site-nav { flex-wrap: nowrap; }
.nav-phone { white-space: nowrap; }
.nav-links { white-space: nowrap; }

/* Brand and actions keep their full size; the link row is the only thing
   allowed to give way, and it is dropped by the measured test below.
   Without this the row would squeeze and its text would draw over the logo. */
.nav-brand, .nav-actions, .nav-links { flex: 0 0 auto; }

/* the phone number only earns its space when the bar can prove it fits */
@media (max-width: 1159px) {
  .nav-phone { display: none; }
}
.site-nav.nav-no-phone .nav-phone { display: none; }

/* Collapse the link row whenever the bar genuinely cannot fit it.
   A fixed breakpoint cannot decide this: the Spanish labels are longer than
   the English ones, so the same viewport fits one language and collides in
   the other (which is how the row ended up drawn across the logo in ES).
   app.js measures the real requirement and sets .nav-compact.
   The media query below is the no-JS floor. */
.site-nav.nav-compact .nav-links { display: none; }
.site-nav.nav-compact .menu-toggle { display: flex; }
.site-nav.nav-compact { justify-content: space-between; }

@media (max-width: 1039px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  .site-nav { justify-content: space-between; }
}

/* Last resort: on the narrowest phones (Spanish first) the Book button in the
   bar gives way to the sticky bar at the bottom of the page. */
.site-nav.nav-no-book .nav-actions .btn { display: none; }

/* expand/hide state: exactly one Waxing tab visible at any width */
.nav-actions { display: flex; align-items: center; gap: 22px; z-index: 3; }
.nav-phone { font-size: 11px; letter-spacing: .18em; color: rgba(245,239,230,.7); transition: color .3s; }
.nav-phone:hover { color: var(--gold-2); }

.menu-toggle {
  display: none;
  flex-direction: column; gap: 6px;
  padding: 10px; z-index: 3;
}
.menu-toggle span {
  width: 26px; height: 1px; background: var(--ivory);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 190;
  background: var(--ink);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease-cine), visibility .55s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 44px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory);
  padding: 10px 0;
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu a:hover { color: var(--champagne); }
.mobile-menu .mm-book {
  margin-top: 26px;
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s .2s var(--ease-out), transform .6s .2s var(--ease-out);
}
.mobile-menu.open .mm-book { opacity: 1; transform: none; }
.mobile-menu .mm-foot {
  position: absolute; bottom: 44px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--taupe); text-align: center; line-height: 2.2;
  opacity: 0; transition: opacity .6s .35s;
}
.mobile-menu.open .mm-foot { opacity: 1; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Reserve the fixed bar's height. The old bottom-anchored row layout let a
     short viewport push the hero content up under the nav, which drew the
     eyebrow straight through the logo. min-height (not height) lets the
     section grow, so the content is never clipped either. */
  padding-top: calc(var(--ann-h, 0px) + var(--nav-h) + 30px);
  background: var(--ink);
}
.hero-film { position: absolute; inset: 0; }
.hero-layer {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  will-change: transform, opacity;
}
.hero-layer.live { opacity: 1; }
.hero-layer.cur { z-index: 2; }
.hero-layer.prev { z-index: 1; }
.hero-video {
  position: absolute; left: -6%; top: -6%;
  width: 112%; height: 112%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.6s var(--ease-cine);
  background: var(--ink);
}
.hero-film.has-video .hero-video { opacity: 1; }
.hero-film.has-video .hero-layer { opacity: 0 !important; }
.hero-shade {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(to top, rgba(12,10,8,.92) 0%, rgba(12,10,8,.42) 26%, rgba(12,10,8,.05) 55%, rgba(12,10,8,.28) 100%),
    linear-gradient(to right, rgba(12,10,8,.5) 0%, rgba(12,10,8,0) 45%);
}
.hero-veil { position: absolute; inset: 0; z-index: 4; opacity: .5; mix-blend-mode: soft-light; }
.hero-frame {
  position: absolute; inset: 14px; z-index: 6;
  border: 1px solid rgba(245,239,230,.1);
  pointer-events: none;
}
.hero-light {
  position: absolute; z-index: 5; pointer-events: none;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,214,178,.16) 0%, transparent 60%);
  top: -20vw; right: -15vw;
  animation: drift 14s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-12vw, 8vh) scale(1.15); }
}

.hero-content {
  position: relative; z-index: 7;
  width: 100%;
  padding: 0 clamp(20px, 5vw, 72px) clamp(90px, 12vh, 130px);
}
.hero-eyebrow { opacity: 0; transform: translateY(16px); animation: fade-up 1s .15s var(--ease-out) both; animation-play-state: paused; }
body.ready .hero-eyebrow { animation-play-state: running; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 9.6vw, 152px);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ivory);
  margin: 26px 0 30px;
  overflow: hidden;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; transform: translateY(112%); animation: line-up 1.15s var(--ease-cine) both; animation-play-state: paused; }
body.ready .hero h1 .line > span { animation-play-state: running; }
.hero h1 .line:nth-child(2) > span { animation-delay: .18s; }
.hero h1 .it {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  color: var(--champagne);
  font-weight: 400;
}
@keyframes line-up { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-sub {
  max-width: 460px;
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgba(245,239,230,.75);
  font-weight: 300;
  line-height: 1.8;
  opacity: 0; animation: fade-up 1.1s .55s var(--ease-out) both;
  animation-play-state: paused;
}
body.ready .hero-sub { animation-play-state: running; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  margin-top: 40px;
  opacity: 0; animation: fade-up 1.1s .72s var(--ease-out) both;
  animation-play-state: paused;
}
body.ready .hero-actions { animation-play-state: running; }
.hero-rating {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,239,230,.6);
  opacity: 0; animation: fade-up 1.1s .85s var(--ease-out) both;
  animation-play-state: paused;
  margin-top: 34px;
}
body.ready .hero-rating { animation-play-state: running; }
.hero-rating b { color: var(--champagne); font-weight: 400; font-size: 14px; letter-spacing: .1em; }
.hero-rating .stars { color: var(--gold-2); letter-spacing: .2em; font-size: 13px; }
.hero-rating .stars .half, .rev-slide .stars .half { font-size: .72em; vertical-align: .35em; font-style: normal; }

.hero-scroll {
  position: absolute; z-index: 7;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 9px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(245,239,230,.55);
  opacity: 0; animation: fade-in 1.2s 1.15s both;
  animation-play-state: paused;
}
body.ready .hero-scroll { animation-play-state: running; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hero-scroll .tick { position: relative; width: 1px; height: 52px; background: var(--line-strong); overflow: hidden; }
.hero-scroll .tick::after {
  content: ''; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--gold-2);
  animation: tick 2.2s var(--ease-cine) infinite;
}
@keyframes tick { 0% { top: -50%; } 100% { top: 120%; } }

/* ---------- MARQUEE ---------- */
.marquee {
  position: relative;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 34px 0;
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 44s linear infinite;
  will-change: transform;
}
/* Two identical sets. Each set reserves a trailing gap (padding-right) so
   translateX(-50%) lands exactly on the start of the second set — the strip
   loops with no visible seam or jump at the wrap point. */
.marquee-set { display: flex; align-items: center; gap: clamp(56px, 6vw, 104px); padding-right: clamp(56px, 6vw, 104px); }
.marquee span {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245,239,230,.20);
  white-space: nowrap;
}
/* alternate words read brighter so the band has rhythm instead of repeating
   as one flat wall of the same thing */
.marquee span:nth-child(4n+1) { color: rgba(245,239,230,.42); }
.marquee em {
  font-style: normal;
  color: var(--gold);
  font-size: 17px;
  align-self: center;
  opacity: .75;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- SECTIONS ---------- */
.section { position: relative; padding: clamp(96px, 13vh, 170px) 0; scroll-margin-top: 70px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(48px, 7vh, 90px); }
.section-head .display { font-size: clamp(44px, 7.4vw, 118px); margin-top: 22px; }

.dark-sec { background: var(--ink); color: var(--ivory); }
.light-sec { background: var(--ivory); color: var(--ink); }
.light-sec .lead { color: rgba(11,11,12,.72); }

.container { width: min(1400px, 92vw); margin: 0 auto; }

/* ---------- INTRO (BEAUTY IS A RITUAL) ---------- */
.intro { background: var(--ink); }
.intro-inner { width: min(1500px, 94vw); margin: 0 auto; }
.intro-head {
  font-size: clamp(58px, 11vw, 190px);
  line-height: 1.0;
}
.intro-head .iw { display: block; overflow: hidden; }
.intro-head .iw > span { display: block; transform: translateY(108%); transition: transform 1.4s var(--ease-cine); }
.intro-head .iw.in > span { transform: none; }
.intro-body {
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: 60px;
  margin-top: clamp(40px, 6vh, 80px);
  align-items: end;
}
.intro-body .lead { color: rgba(245,239,230,.62); }
.intro-body .meta-col { display: flex; flex-direction: column; gap: 18px; }
.intro-body .meta-col .rule { width: 100%; height: 1px; background: var(--line); }

/* ---------- SERVICES (sticky editorial) ---------- */
.services { background: var(--ink-2); }
.services-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 110px);
}
.services-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
  padding: var(--nav-h) 0;
}
.services-sticky .display { font-size: clamp(46px, 6.6vw, 104px); }
.services-sticky .svc-count { margin-top: 44px; display: flex; align-items: baseline; gap: 16px; }
.services-sticky .svc-count b { font-family: var(--font-display); font-size: 30px; color: var(--gold-2); font-weight: 400; }
.services-list { display: flex; flex-direction: column; gap: clamp(28px, 4vh, 52px); }
.svc-item {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: clamp(16px, 2vw, 36px);
  padding: clamp(20px, 2.4vw, 34px) 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  opacity: 0; transform: translateY(60px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.svc-item.in { opacity: 1; transform: none; }
.svc-item:last-child { border-bottom: 1px solid var(--line); }
.svc-num { font-family: var(--font-display); font-size: 15px; color: var(--taupe); padding-top: 8px; letter-spacing: .2em; }
.svc-item .svc-media {
  position: relative;
  height: clamp(240px, 30vh, 340px);
  overflow: hidden;
}
.svc-item .svc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
  filter: saturate(.92);
}
.svc-item:hover .svc-media img { transform: scale(1.09); }
.svc-item .svc-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,10,8,.35), transparent 45%);
  transition: opacity .5s; opacity: .6;
}
.svc-body { padding: 22px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.svc-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ivory);
}
.svc-body p { font-size: 14.5px; color: rgba(245,239,230,.55); max-width: 460px; line-height: 1.75; }
.svc-meta { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.svc-price { font-family: var(--font-display); font-size: 19px; color: var(--champagne); letter-spacing: .06em; }
.svc-dur { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); }
.svc-book {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-2);
  transition: color .3s;
}
.svc-item:hover .svc-book { color: var(--ivory); }
.svc-item:hover .svc-book .arr { transform: translateX(5px); }
.svc-book .arr { transition: transform .4s; }

/* ---------- WAXING ROWS → BOOKING ---------- */
.wax-table li { cursor: pointer; transition: padding-left .3s, color .3s; }
.wax-table li:hover { padding-left: 8px; color: var(--ink); }
.wax-table li .wa-go {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); opacity: 0; transition: opacity .3s; white-space: nowrap;
}
.wax-table li:hover .wa-go { opacity: 1; }

/* ---------- SEPTEMBER PROMO ---------- */
.promo { background: var(--ivory); color: var(--ink); border-top: 1px solid var(--line-dark); }
.promo-wrap {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  gap: clamp(30px, 5vw, 80px); align-items: center;
}
.promo .eyebrow::before { background: var(--gold); }
.promo .display { font-size: clamp(38px, 5.6vw, 88px); margin-top: 20px; }
.promo-list { list-style: none; margin-top: 32px; }
.promo-list li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line-dark); }
.promo-list b { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2vw, 26px); text-transform: uppercase; letter-spacing: .05em; }
.promo-list span { font-size: 13px; color: rgba(11,11,12,.6); }
.promo-note { margin-top: 24px; font-size: 13px; line-height: 1.9; color: rgba(11,11,12,.66); max-width: 520px; }
.promo-note a { color: var(--gold); border-bottom: 1px solid currentColor; }
.promo-actions { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.promo-figure { margin: 0; box-shadow: 0 34px 70px rgba(11,11,12,.2); }
.promo-figure img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .promo-wrap { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { background: var(--ink); }
.faq-wrap { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.faq .display { font-size: clamp(38px, 5.4vw, 86px); }
.faq .display.dark { color: var(--ivory); }
.faq .lead.dark { color: rgba(245,239,230,.6); margin-top: 24px; }
.faq .lead a { color: var(--champagne); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .04em;
  color: rgba(245,239,230,.9); transition: color .3s;
}
.faq-q:hover { color: var(--champagne); }
.faq-q .fq-ico { flex: none; color: var(--gold-2); font-size: 18px; transition: transform .4s var(--ease-out); }
.faq-item.open .faq-q .fq-ico { transform: rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .5s var(--ease-out); }
.faq-a p { padding: 0 0 24px; font-size: 14.5px; line-height: 1.85; color: rgba(245,239,230,.6); max-width: 640px; }
.faq-item.open .faq-a { max-height: 420px; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }

/* ---------- LIGHT SECTIONS: THE SAME GOLD, DEEPENED ----------
   The bright gold that sings on near-black is only ~2.4:1 against paper, so
   the three ivory sections swap in a deeper gold. Same metal, readable here. */
.wax-section, .gallery, .about {
  --gold: #8A6A1C;        /* accents and display italics  — 4.7:1 on ivory */
  --gold-2: #7E5F14;      /* small caps and links         — 5.6:1 */
  --champagne: #A98A34;   /* large display accents        — 3.1:1 */
  --taupe: #7A7060;       /* muted meta text              — 5.4:1 */
}

/* ---------- WAXING (own section) ---------- */
.wax-section { background: var(--ivory); color: var(--ink); border-top: 1px solid var(--line-dark); }
.wax-section .eyebrow::before, .wax-section .eyebrow.centered::after { background: var(--gold); }
.wax-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 30px; margin-bottom: clamp(44px, 6vh, 80px);
}
.wax-head .display { font-size: clamp(44px, 7vw, 110px); margin-top: 22px; }
.wax-tables {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
}
.wax-table { border-top: 2px solid var(--ink); padding-top: 22px; }
.wax-table h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 18px;
}
.wax-table ul { list-style: none; }
.wax-table li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line-dark);
  font-size: 14px; color: rgba(11,11,12,.78);
}
.wax-table .wa-dots { flex: 1; border-bottom: 1px dotted rgba(11,11,12,.28); transform: translateY(-4px); }
.wax-table .wa-price { font-family: var(--font-display); font-size: 17px; color: var(--ink); letter-spacing: .04em; white-space: nowrap; }
.wax-foot {
  margin-top: clamp(44px, 6vh, 70px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px; justify-content: space-between;
}
@media (max-width: 860px) {
  .wax-tables { grid-template-columns: 1fr; }
}

/* ---------- CINEMATIC SEQUENCE ---------- */
.sequence {
  position: relative;
  background: var(--ink);
  height: 420vh;
}
.seq-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.seq-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.seq-img {
  position: absolute;
  width: 34vw; height: 60vh;
  background-size: cover; background-position: center;
  transform: scale(1);
  will-change: transform, width, height, opacity;
  filter: saturate(.9);
  box-shadow: 0 60px 120px rgba(0,0,0,.5);
}
.seq-img:nth-child(2) { width: 24vw; height: 44vh; left: 12vw; top: 18vh; }
.seq-img:nth-child(3) { width: 20vw; height: 36vh; right: 10vw; bottom: 14vh; }
.seq-title {
  position: relative; z-index: 5;
  text-align: center;
  font-size: clamp(44px, 8vw, 132px);
  opacity: 0;
  will-change: opacity;
}
.seq-title .it { color: var(--champagne); }
.seq-count {
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--taupe);
  display: flex; gap: 22px; z-index: 6;
}
.seq-count b { color: var(--gold-2); font-weight: 400; }

/* ---------- GALLERY ---------- */
.gallery { background: var(--ivory); color: var(--ink); }
.gallery .eyebrow::before, .gallery .eyebrow.centered::after { background: var(--gold); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  align-items: start;
}
.g-item {
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
  cursor: none;
}
.g-item .g-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease-out);
  will-change: transform;
}
.g-item:hover .g-img { transform: scale(1); }
.g-item .g-cap {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(245,239,230,.9);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s, transform .5s var(--ease-out);
}
.g-item:hover .g-cap { opacity: 1; transform: none; }
.g-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,10,8,.4), transparent 50%);
  opacity: 0; transition: opacity .6s;
}
.g-item:hover::after { opacity: 1; }
.g-mask { position: relative; overflow: hidden; opacity: 0; transform: translateY(60px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.g-mask.in { opacity: 1; transform: none; }
.g-1 { grid-column: span 5; aspect-ratio: 4/5; }
.g-2 { grid-column: span 4; aspect-ratio: 3/4; margin-top: 90px; }
.g-3 { grid-column: span 3; aspect-ratio: 3/4; margin-top: 30px; }
.g-4 { grid-column: span 4; aspect-ratio: 1/1; margin-top: -40px; }
.g-5 { grid-column: span 4; aspect-ratio: 4/5; margin-top: 60px; }
.g-6 { grid-column: span 4; aspect-ratio: 4/3; }
.g-7 { grid-column: span 3; aspect-ratio: 3/4; margin-top: 40px; }
.g-8 { grid-column: span 5; aspect-ratio: 16/10; margin-top: 80px; }

/* Instagram follow tile (gallery cell) */
.g-item.g-ig {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(20px, 2.4vw, 30px);
  text-decoration: none;
  color: var(--ivory);
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(198, 174, 130, 0.16), transparent 55%),
    linear-gradient(165deg, var(--ink-soft), var(--ink) 72%);
  border: 1px solid rgba(198, 174, 130, 0.28);
}
.g-ig-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.g-ig-glyph { color: var(--gold-2); margin-bottom: 14px; opacity: .95; }
.g-ig-h {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ivory);
  line-height: 1.05;
}
.g-ig-handle {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.g-ig-p {
  margin-top: 12px;
  max-width: 300px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(242, 237, 227, 0.66);
}
.g-ig-go {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: .8;
  transition: opacity .4s, transform .4s var(--ease-out);
}
.g-item.g-ig:hover .g-ig-go { opacity: 1; transform: translateX(6px); }
.g-item.g-ig:hover .g-ig-glyph { opacity: 1; }
.gallery-foot { margin-top: clamp(50px, 7vh, 90px); display: flex; justify-content: center; }

/* ---------- REVIEWS ---------- */
.reviews { background: var(--ink); }
.rev-pin { height: 340vh; }
.rev-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.rev-stage { position: relative; width: min(900px, 90vw); height: 46vh; }
.rev-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  opacity: 0; transform: translateY(40px) scale(.97);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
.rev-slide.live { opacity: 1; transform: none; }
.rev-slide .stars { color: var(--gold-2); font-size: 16px; letter-spacing: .35em; }
.rev-photo {
  width: 220px; max-width: 44vw;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  margin-bottom: 4px;
}
.rev-slide blockquote {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.35;
  color: var(--ivory);
  font-weight: 400;
}
.rev-slide blockquote .q { font-family: var(--font-serif); font-style: italic; color: var(--champagne); }
.rev-slide footer { font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--taupe); }
.rev-aggregate .agg-num { font-family: var(--font-display); font-size: clamp(90px, 14vw, 200px); line-height: .9; color: var(--ivory); }
.rev-aggregate .agg-num i { font-style: normal; font-size: .4em; color: var(--gold-2); vertical-align: top; margin-left: 8px; }
.rev-controls { position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; }
.rev-dot { width: 26px; height: 2px; background: var(--line-strong); transition: background .4s; padding: 0; }
.rev-dot.on { background: var(--gold-2); }
.rev-link { margin-top: 30px; }

/* ---------- ABOUT ---------- */
.about { background: var(--ivory); color: var(--ink); }
.about .eyebrow::before, .about .eyebrow.centered::after { background: var(--gold); }
.about-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.about-visual {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
}
.about-imgs { position: relative; width: 100%; height: 82vh; }
.about-imgs .a-img {
  position: absolute; overflow: hidden;
  box-shadow: 0 40px 80px rgba(11,11,12,.18);
}
.about-imgs .a-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transform: scale(1.04); transition: transform 1.6s var(--ease-out); }
.about-imgs:hover .a-img img { transform: scale(1); }
.a-img-1 { width: 62%; height: 78%; left: 0; top: 0; }
.a-img-2 { width: 46%; height: 52%; right: 0; bottom: 0; }
.a-img-3 { width: 34%; height: 38%; left: 8%; bottom: -6%; }
.about-copy .display { font-size: clamp(44px, 6vw, 96px); }
.about-copy > .lead { margin-top: 30px; color: rgba(11,11,12,.7); }
.ab-points { margin-top: clamp(44px, 6vh, 70px); }
.ab-point {
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  opacity: .4;
  transition: opacity .6s var(--ease-out);
}
.ab-point.on { opacity: 1; }
.ab-point:last-child { border-bottom: 1px solid var(--line-dark); }
.ab-point .ab-num { font-family: var(--font-display); color: var(--gold); font-size: 14px; letter-spacing: .2em; padding-top: 4px; }
.ab-point h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; letter-spacing: .03em; }
.ab-point p { font-size: 14.5px; color: rgba(11,11,12,.6); margin-top: 8px; max-width: 420px; }

/* ---------- LOCATION ---------- */
.location { background: var(--ink-2); }
.loc-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(40px, 5vw, 90px);
  align-items: stretch;
}
.loc-info { display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.loc-info .display { font-size: clamp(40px, 5vw, 80px); }
.loc-line { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line); }
.loc-line:last-of-type { border-bottom: 1px solid var(--line); }
.loc-line .l-ico { color: var(--gold); font-size: 13px; padding-top: 6px; width: 18px; text-align: center; }
.loc-line b { display: block; font-weight: 400; font-family: var(--font-display); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory); }
.loc-line span { font-size: 13.5px; color: rgba(245,239,230,.6); line-height: 1.8; }
.loc-line a { color: var(--champagne); }
.loc-map { position: relative; min-height: 420px; }
/* normal, full-colour Google Map — no grayscale/sepia wash */
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: none; }
.loc-map::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--line);
}
.loc-hours { margin-top: 34px; }
.loc-hours h4 { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 16px; }
.loc-hours .hr-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: rgba(245,239,230,.65); border-bottom: 1px dashed var(--line); max-width: 320px; }
.loc-hours .hr-row.today { color: var(--ivory); }
.loc-hours .hr-row.today b { color: var(--champagne); font-weight: 400; }

/* ---------- FINAL CTA ---------- */
.final {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 120px 20px;
  background: var(--ink);
}
.final-bg {
  position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.final-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,10,8,.85), rgba(12,10,8,.4) 60%, rgba(12,10,8,.7)); }
.final-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.final .display { font-size: clamp(44px, 8vw, 132px); }
.final-actions { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.final-phone { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(245,239,230,.6); }
.final-phone a { color: var(--champagne); }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); border-top: 1px solid var(--line); padding: clamp(60px, 9vh, 100px) 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.footer .f-brand b { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: .4em; text-transform: uppercase; color: var(--ivory); }
.footer .f-brand span { display: block; font-size: 9px; letter-spacing: .5em; text-transform: uppercase; color: var(--gold-2); margin-top: 8px; }
.footer .f-brand p { font-size: 13px; color: rgba(245,239,230,.5); margin-top: 22px; line-height: 1.9; max-width: 280px; }
.footer h5 { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 20px; font-weight: 400; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { font-size: 13px; color: rgba(245,239,230,.62); letter-spacing: .06em; transition: color .3s, padding-left .3s; }
.footer ul a:hover { color: var(--champagne); padding-left: 6px; }
.footer ul a small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.footer-base {
  margin-top: clamp(50px, 7vh, 80px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(245,239,230,.38);
}
.footer-base a { color: rgba(245,239,230,.38); transition: color .3s; }
.footer-base a:hover { color: var(--gold-2); }
/* Full cinematic motion is the default; this switches the stiller cut on. */
.motion-toggle {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(245,239,230,.38); text-decoration: underline; text-underline-offset: 5px;
  transition: color .3s;
}
.motion-toggle:hover { color: var(--gold-2); }

/* ---------- PAGE TRANSITION ---------- */
.page-veil {
  position: fixed; inset: 0; z-index: 700;
  background: var(--ink);
  transform: translateY(100%);
  pointer-events: none;
  transition: transform .7s var(--ease-cine);
}
.page-veil.active { transform: translateY(0); }
.page-veil::after {
  content: 'PRESTIGE'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: 60px; letter-spacing: .4em; text-indent: .4em;
  color: var(--ivory); opacity: .9;
}

/* ============================================================
   BOOKING PAGE
   ============================================================ */
.book-page { background: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
.book-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.book-nav .back { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(245,239,230,.6); display: inline-flex; align-items: center; gap: 10px; transition: color .3s; }
.book-nav .back:hover { color: var(--champagne); }
.book-nav .back .arr { transition: transform .4s; }
.book-nav .back:hover .arr { transform: translateX(-5px); }
.book-main { flex: 1; width: min(980px, 92vw); margin: 0 auto; padding: clamp(40px, 7vh, 80px) 0 clamp(90px, 12vh, 130px); }

.book-head { margin-bottom: clamp(34px, 5vh, 60px); }
.book-head .display { font-size: clamp(38px, 5.6vw, 80px); }
.book-head .lead { margin-top: 18px; color: rgba(245,239,230,.6); font-size: 15px; max-width: 560px; }

.book-progress { display: flex; gap: 0; margin-bottom: clamp(40px, 6vh, 70px); position: relative; }
.book-progress::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--line); }
.book-progress::after { content: ''; position: absolute; left: 0; top: 12px; height: 1px; background: var(--gold); width: var(--p, 0%); transition: width .5s var(--ease-out); }
.book-progress.four .bp:nth-child(4)::after { content: none; }
.bp { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1; }
.bp .bp-dot {
  width: 25px; height: 25px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; letter-spacing: .1em; color: rgba(245,239,230,.5);
  transition: all .4s var(--ease-out);
}
.bp.on .bp-dot { border-color: var(--gold); color: var(--champagne); background: rgba(169,143,95,.12); }
.bp.done .bp-dot { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.bp .bp-label { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); }
.bp.on .bp-label, .bp.done .bp-label { color: var(--ivory); }

.book-step { display: none; }
.book-step.active { display: block; animation: step-in .55s var(--ease-out) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.step-title { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 26px; display: flex; align-items: center; gap: 16px; }
.step-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* service picker */
.svc-pick { display: flex; flex-direction: column; }
.svc-opt {
  display: grid; grid-template-columns: 64px 1fr auto auto;
  align-items: center; gap: 22px;
  padding: 24px 8px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .4s, padding-left .4s;
  position: relative;
}
.svc-opt:last-child { border-bottom: 1px solid var(--line); }
.svc-opt:hover { background: rgba(245,239,230,.03); padding-left: 14px; }
/* The selected service must be unmistakable *without* relying on animation:
   with "Reduce Motion" on, a flash or pulse is invisible. */
.svc-opt.sel {
  background: rgba(169,143,95,.14);
  box-shadow: inset 3px 0 0 var(--gold);
  padding-left: 20px;
}
.svc-opt.sel .so-name { color: var(--champagne); }
.svc-opt.sel::after {
  content: 'Selected';
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-sans); font-size: 8.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-2);
}
@media (max-width: 860px) {
  .svc-opt.sel { padding-left: 14px; }
  .svc-opt.sel::after { display: none; }
}
.svc-opt .so-cat { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.svc-opt .so-name { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); color: var(--ivory); text-transform: uppercase; letter-spacing: .03em; font-weight: 400; }
.svc-opt .so-desc { font-size: 13px; color: rgba(245,239,230,.5); margin-top: 4px; }
.svc-opt .so-price { font-family: var(--font-display); font-size: 20px; color: var(--champagne); }
.svc-opt .so-dur { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); text-align: right; }
.svc-opt .so-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
}
.svc-opt.sel .so-radio { border-color: var(--gold); }
.svc-opt.sel .so-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }

/* calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cal-head .cal-mo { font-family: var(--font-display); font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); }
.cal-nav { display: flex; gap: 10px; }.cal-nav-btn { width: 38px; height: 38px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; color: rgba(245,239,230,.7); transition: all .3s; }
.cal-nav-btn:hover { border-color: var(--gold); color: var(--champagne); }
.cal-nav-btn:disabled { opacity: .3; pointer-events: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); text-align: center; padding: 10px 0; }
.cal-day {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border: 1px solid transparent;
  font-size: 14px; color: rgba(245,239,230,.75);
  font-weight: 300;
  transition: all .3s;
  position: relative;
}
.cal-day:hover:not(.off):not(.out) { border-color: var(--gold); color: var(--champagne); }
.cal-day.sel { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cal-day.today:not(.sel)::after { content: ''; position: absolute; bottom: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-2); }
.cal-day.off { color: rgba(245,239,230,.22); text-decoration: line-through; text-decoration-color: rgba(245,239,230,.15); cursor: not-allowed; }
.cal-day.out { opacity: .28; cursor: default; }
.cal-day.sat, .cal-day.sun { }
.cal-note { margin-top: 16px; font-size: 11px; letter-spacing: .14em; color: var(--taupe); display: flex; align-items: center; gap: 10px; }
.cal-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); display: inline-block; }

/* time slots */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.slot {
  padding: 14px 8px;
  border: 1px solid var(--line);
  font-size: 13px; letter-spacing: .1em;
  color: rgba(245,239,230,.8);
  text-align: center;
  transition: all .3s;
}
.slot:hover:not(.off) { border-color: var(--gold); color: var(--champagne); }
.slot.sel { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.slot.off { opacity: .25; pointer-events: none; text-decoration: line-through; }
.slots-empty { padding: 40px 0; text-align: center; color: var(--taupe); font-size: 13px; letter-spacing: .1em; }

/* form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); }
.field input, .field textarea, .field select {
  background: rgba(245,239,230,.04);
  border: 1px solid var(--line);
  padding: 15px 18px;
  font-size: 15px; font-weight: 300;
  color: var(--ivory);
  transition: border-color .3s, background .3s;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold);
  background: rgba(245,239,230,.06);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(245,239,230,.3); }
.field.err input { border-color: #b05353; }
.field .ferr { font-size: 11px; color: #cf8383; letter-spacing: .06em; display: none; }
.field.err .ferr { display: block; }
textarea { resize: vertical; min-height: 96px; }

/* review summary */
.rev-summary { border: 1px solid var(--line); }
.rs-row { display: flex; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rs-row:last-child { border-bottom: 0; }
.rs-row .k { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); padding-top: 3px; }
.rs-row .v { color: var(--ivory); text-align: right; line-height: 1.6; }
.rs-row .v b { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--champagne); }

.book-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; gap: 20px; flex-wrap: wrap; }
.book-actions .btn-back { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(245,239,230,.55); display: inline-flex; align-items: center; gap: 10px; transition: color .3s; }
.book-actions .btn-back:hover { color: var(--champagne); }

/* confirmation */
.confirm {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding: 40px 0;
}
.confirm .c-mark {
  width: 86px; height: 86px; border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--champagne); font-size: 30px;
  animation: pop .7s var(--ease-cine) both;
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm .display { font-size: clamp(40px, 6vw, 84px); }
.confirm .c-note { max-width: 460px; color: rgba(245,239,230,.6); font-size: 15px; }
.confirm .c-ref { font-family: var(--font-display); font-size: 22px; letter-spacing: .2em; color: var(--gold-2); }
.confirm .c-details { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.confirm .c-details .chip { border: 1px solid var(--line); padding: 12px 22px; font-size: 12px; letter-spacing: .14em; color: rgba(245,239,230,.75); }
.confirm .c-details .chip b { display: block; font-weight: 400; font-family: var(--font-display); font-size: 16px; color: var(--ivory); letter-spacing: .06em; margin-top: 4px; }
.confirm .c-actions { margin-top: 14px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* service menu grouping (booking wizard) */
.so-group {
  font-family: var(--font-sans); font-size: 9.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-2);
  margin: 30px 0 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.so-group:first-child { margin-top: 6px; }
/* the pre-selected service announces itself */
.svc-opt.flash { animation: svcFlash 1.5s ease-out 1; }
@keyframes svcFlash {
  0%, 40% { background: rgba(198,161,91,.22); }
  100% { background: transparent; }
}

/* waxing area picker (booking wizard) */
.wax-sub { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 26px; }
.wax-sub[hidden] { display: none; }
.wax-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.wax-area {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid var(--line); padding: 13px 18px;
  font-size: 13px; color: rgba(245,239,230,.8);
  text-align: left; transition: border-color .3s, background .3s, color .3s;
}
.wax-area:hover { border-color: var(--gold); color: var(--champagne); }
.wax-area.sel { background: rgba(198,161,91,.14); border-color: var(--gold); color: var(--ivory); }
.wax-area .wa-price { font-family: var(--font-display); font-size: 15px; color: var(--champagne); white-space: nowrap; }
.wax-area.sel .wa-price { color: var(--ivory); }

/* square note */
.square-note {
  margin-top: 30px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.square-note p { font-size: 12.5px; color: rgba(245,239,230,.5); max-width: 460px; }

/* mobile sticky book bar (on index) */
.book-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: rgba(11,11,12,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  align-items: center; justify-content: space-between; gap: 14px;
}
.book-bar .bb-phone { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(245,239,230,.55); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .services-wrap { grid-template-columns: 1fr; }
  .services-sticky { position: relative; height: auto; padding: 0 0 30px; }
  .about-wrap { grid-template-columns: 1fr; }
  .about-visual { position: relative; height: auto; }
  .about-imgs { height: 70vh; }
  .loc-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  .nav-phone { display: none; }
  /* brand already reads "Prestige Glow Spa" in the top bar — don't repeat it
     inside the hero on narrow screens (text collides under the fixed nav) */
  .hero-eyebrow { display: none; }
  /* clear the fixed book bar at the foot of the hero */
  .hero-content { padding-bottom: 150px; }
  .intro-body { grid-template-columns: 1fr; gap: 30px; }
  .g-1, .g-2, .g-3, .g-4, .g-5, .g-6, .g-7, .g-8 { grid-column: span 6; margin-top: 0; }
  .g-8 { grid-column: 1 / -1; }
  .hero-frame { inset: 8px; }
  .hero-scroll { display: none; }
  .seq-img { width: 60vw; height: 46vh; }
  .seq-img:nth-child(2) { width: 44vw; height: 34vh; left: 4vw; top: 12vh; }
  .seq-img:nth-child(3) { width: 38vw; height: 28vh; right: 2vw; bottom: 10vh; }
  .svc-opt { grid-template-columns: 1fr auto; }
  .svc-opt .so-desc { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  /* The bar repeats the hero's own call to action, so it stays out of the way
     until the hero is behind you (app.js toggles body.past-hero). Without this
     it covered the hero's buttons and rating on a short screen. */
  .book-bar {
    display: flex;
    opacity: 0; transform: translateY(100%); pointer-events: none;
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  }
  body.past-hero .book-bar { opacity: 1; transform: none; pointer-events: auto; }
  body { padding-bottom: 74px; }
  .book-page body, body.book-page { padding-bottom: 0; }
  .footer { margin-bottom: 0; }
}

@media (max-width: 420px) {
  /* Reclaim enough width in the top bar that the Waxing tab survives a 375px
     phone — without it the bar sheds its Waxing pill, which is the one thing
     that has to stay up there. */
  .site-nav { padding: 0 14px; }
  .nav-actions { gap: 9px; }
  .nav-brand b { font-size: 17.5px; letter-spacing: .14em; }
  .nav-brand span { letter-spacing: .26em; }
}

@media (max-width: 560px) {
  :root { --nav-h: 72px; }
  /* the closing headline is set in display type at a 44px floor, which is wider
     than a 320px screen can hold — step it down instead of clipping the edges */
  .final .display { font-size: clamp(34px, 11vw, 44px); }
  .g-1, .g-2, .g-3, .g-4, .g-5, .g-6, .g-7, .g-8 { grid-column: 1 / -1; aspect-ratio: 4/5; }
  .about-imgs { height: 58vh; }
  .final-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .rev-slide blockquote { font-size: 24px; }
}

/* The closing CTA sets a 12px label with wide tracking inside 52px of side
   padding — about 330px of button before the words even fit, which is wider
   than a 320px screen, so the whole block hung off both edges. */
@media (max-width: 420px) {
  .btn-lg { padding: 20px 26px; letter-spacing: .18em; }
  .final-inner, .final-actions, .final-phone { max-width: 100%; }
}

/* ---------- CALM MODE (opt-in, never automatic) ----------
   The full cinematic cut is the default for everyone. Visitors who want a
   stiller page switch it on themselves — with the toggle in the footer, or
   by opening any page with ?motion=calm. The class is set by a one-line
   script in <head>, so nothing flashes before this applies. */
html.calm *, html.calm *::before, html.calm *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.calm .grain { animation: none; }
html.calm .hero-layer { transform: none; }
html.calm .hero h1 .line > span { transform: none; }
/* The service band is decorative and slow, so it keeps drifting even in calm
   mode — freezing it mid-word reads as a broken page. */
html.calm .marquee { overflow: hidden; padding: 30px 0; }
html.calm .marquee-track {
  animation: marquee 90s linear infinite !important;
  transform: translateX(0);
  width: max-content;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
html.calm .marquee span { color: rgba(245,239,230,.34); }
html.calm .marquee span:nth-child(4n+1) { color: rgba(245,239,230,.5); }
html.calm .marquee em { color: var(--gold); }

/* ============================================================
   LANGUAGE SWITCH (EN ⇄ ES)
   ============================================================ */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
  background: rgba(245,239,230,.03);
}
.lang-switch button {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1;
  color: rgba(245,239,230,.62);
  border-radius: 999px;
  padding: 7px 12px;
  min-width: 40px;
  text-align: center;
  transition: color .3s, background .3s;
}
.lang-switch button:hover:not(.active) { color: var(--champagne); }
.lang-switch button.active {
  background: var(--ivory);
  color: var(--ink);
}
.nav-actions .lang-switch { margin-right: 2px; }

/* mobile-menu variant */
.mobile-menu .mm-lang { margin-top: 30px; border-color: var(--line-strong); }
.mobile-menu .mm-lang button {
  font-size: 11px;
  padding: 9px 18px;
  min-width: 110px;
  letter-spacing: .18em;
}
.mobile-menu .mm-foot a { color: var(--gold-2); transition: color .3s; }
.mobile-menu .mm-foot a:hover { color: var(--champagne); }

/* booking-page header variant */
.book-nav { position: relative; }
.book-nav .nav-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform: translate(-50%, -50%);
}
.book-nav .lang-switch { margin-left: auto; margin-right: 30px; }

/* The brand is centred over the bar, so it sits on top of the back link as soon
   as the row gets tight. The back link already names the salon; drop the
   centred copy rather than have the two overprint each other. */
@media (max-width: 620px) {
  .book-nav .nav-brand { display: none; }
}


@media (max-width: 560px) {
  .nav-actions { gap: 12px; }
  .book-nav .nav-phone { display: none; }
  .book-nav .lang-switch { margin-right: 0; }
  .nav-brand b { font-size: 19px; }
  .nav-brand span { font-size: 7.5px; }
}

/* ---------- GROWTH (newsletter + review ask) ----------
   Rendered by growth.js into the two slots in the footer. Everything is
   inert until the owner switches it on in Admin → Insights. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.footer-cta {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 5vw, 56px);
  align-items: center;
  padding-bottom: clamp(36px, 6vh, 60px); margin-bottom: clamp(36px, 6vh, 60px);
  border-bottom: 1px solid var(--line);
}
.footer-cta:empty { display: none; }

.nl h5 {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: 12px; font-weight: 400;
}
.nl > p { font-size: 13.5px; line-height: 1.75; color: rgba(245,239,230,.58); max-width: 46ch; }
.nl-form { display: flex; gap: 12px; margin-top: 20px; max-width: 520px; }
.nl-form input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  background: rgba(245,239,230,.03); border: 1px solid var(--line);
  color: var(--ivory); padding: 13px 16px; font: inherit; font-size: 14px;
  transition: border-color .3s;
}
.nl-form input[type="email"]::placeholder { color: rgba(245,239,230,.32); }
.nl-form input[type="email"]:focus { outline: none; border-color: var(--gold-2); }
.nl-form .btn { flex: 0 0 auto; }
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-msg { font-size: 11.5px; letter-spacing: .06em; margin-top: 12px; min-height: 15px; color: rgba(245,239,230,.5); }
.nl-msg.ok { color: var(--champagne); }
.nl-msg.err { color: #E0A28C; }

.review-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 26px; border-radius: 999px;
  border: 1px solid rgba(198,161,91,.5); background: rgba(198,161,91,.1);
  color: var(--champagne);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  transition: background .35s, color .35s, border-color .35s;
}
.review-cta:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.review-cta .rc-stars { color: var(--gold-2); letter-spacing: .12em; }
.review-cta:hover .rc-stars { color: var(--ink); }
.review-cta .rc-go { transition: transform .4s var(--ease-out); }
.review-cta:hover .rc-go { transform: translateX(4px); }

@media (max-width: 860px) {
  .footer-cta { grid-template-columns: 1fr; }
  .nl-form { flex-direction: column; }
  .nl-form .btn { width: 100%; }
  .review-cta { width: 100%; justify-content: center; }
}

/* ---------- CALM-MODE NOTE & BOOT ERROR ----------
   Shown only in reduced-motion mode (calm mode) and when a script fails to
   load. Both exist because "the site looks broken" and "the site is in calm
   mode" are indistinguishable from the outside — this closes that gap. */
.motion-note {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 9990; max-width: min(92vw, 560px);
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border-radius: 999px;
  background: rgba(11, 11, 12, .92); color: var(--ivory);
  border: 1px solid var(--line);
  font-family: 'Jost', sans-serif; font-size: 12.5px; font-weight: 300;
  letter-spacing: .04em; line-height: 1.45;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.motion-note-btn {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--gold); color: var(--ink);
  font-family: inherit; font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: background .25s, border-color .25s;
}
.motion-note-btn:hover { background: var(--gold-2); border-color: var(--gold-2); }
@media (max-width: 560px) {
  .motion-note { flex-direction: column; gap: 10px; border-radius: 18px; text-align: center; }
}

.boot-error {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
  z-index: 9991; max-width: min(92vw, 560px);
  padding: 12px 20px; border-radius: 12px;
  background: rgba(11, 11, 12, .94); color: #E0A28C;
  border: 1px solid rgba(224, 162, 140, .45);
  font-family: 'Jost', monospace; font-size: 12px; line-height: 1.5;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  word-break: break-word;
}

/* ============================================================
   PRESTIGE GLOW — NEW LAYER
   service tabs · skin feature · team · demo labels · provider
   picker · booking rail · schedule drawer
   ============================================================ */

/* ---------- SERVICES: tabs + provider line ---------- */
.services-wrap > * { min-width: 0; }   /* grid items: allow shrinking, no ES long-word spill */
.services-right { display: flex; flex-direction: column; gap: 26px; }
.svc-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-tab {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(245,239,230,.55); border: 1px solid var(--line);
  padding: 10px 18px; transition: all .3s;
}
.svc-tab:hover { color: var(--champagne); border-color: var(--gold); }
.svc-tab.on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.svc-provs {
  margin-top: 12px; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--taupe);
}
.svc-provs::before { content: 'with '; text-transform: none; letter-spacing: .05em; color: rgba(160,141,126,.7); }
[lang="es"] .svc-provs::before { content: 'con '; }
.svc-lead { margin-top: 20px; font-size: 14px; line-height: 1.8; color: rgba(245,239,230,.6); max-width: 360px; }
.starter-note {
  font-size: 9.5px; font-family: var(--font-sans); font-weight: 300;
  letter-spacing: .14em; color: var(--taupe); text-transform: uppercase;
  margin-left: 6px;
  white-space: normal;   /* must wrap — nowrap blows the grid out at 320px in ES */
}

/* ---------- SKIN FEATURE SECTION ---------- */
.skin-section { background: var(--ink-2); border-top: 1px solid var(--line); overflow: hidden; }
.skin-wrap {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(36px, 6vw, 96px); align-items: center;
}
.skin-figure { margin: 0; position: relative; }
.skin-img {
  overflow: hidden; box-shadow: 0 44px 90px rgba(0,0,0,.42);
  aspect-ratio: 4 / 5;
}
.skin-img img { width: 100%; height: 118%; object-fit: cover; }
.skin-copy .display { font-size: clamp(46px, 6.4vw, 104px); margin-top: 22px; }
.skin-copy .lead { margin-top: 22px; max-width: 460px; }
.skin-actions { margin-top: 36px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .skin-wrap { grid-template-columns: 1fr; }
  .skin-img { aspect-ratio: 4 / 3; }
  .skin-img img { height: 112%; }
}

/* ---------- INTRO WORDS (01/02/03) ---------- */
.intro-words {
  margin-top: clamp(48px, 7vh, 84px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  border-top: 1px solid var(--line-dark); padding-top: clamp(34px, 5vh, 56px);
}
.iw-item { display: flex; gap: 18px; align-items: flex-start; }
.iw-num {
  font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 38px);
  color: var(--gold); line-height: 1; padding-top: 4px;
}
.iw-item h3 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.9vw, 26px);
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.iw-item p { margin-top: 8px; font-size: 13.5px; line-height: 1.75; color: rgba(11,11,12,.62); }
@media (max-width: 860px) { .intro-words { grid-template-columns: 1fr; } }

/* ---------- TEAM ---------- */
.team-section { background: var(--ink); border-top: 1px solid var(--line); }
.team-section .display { font-size: clamp(40px, 5.8vw, 92px); }
.team-demo-note {
  margin-top: 18px; font-size: 11.5px; letter-spacing: .1em; line-height: 1.9;
  color: rgba(237,217,163,.62); border-left: 2px solid rgba(198,161,91,.4);
  padding-left: 14px; max-width: 640px;
}
.team-grid {
  margin-top: clamp(40px, 6vh, 68px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  border: 1px solid var(--line); background: rgba(245,239,230,.02);
  cursor: pointer; overflow: hidden; position: relative;
  transition: border-color .4s, background .4s, transform .5s var(--ease-out);
}
.team-card:hover { border-color: rgba(198,161,91,.55); background: rgba(245,239,230,.04); transform: translateY(-4px); }
.team-card:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 3px; }
.tc-media {
  position: relative; aspect-ratio: 5 / 4; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(198,161,91,.28), transparent 60%),
    linear-gradient(160deg, #1A1B1E, #0B0B0C 70%);
}
.tc-avatar {
  font-family: var(--font-display); font-size: clamp(64px, 6vw, 96px);
  color: rgba(237,217,163,.5); line-height: 1;
  transition: transform .8s var(--ease-out), color .8s;
}
.team-card:hover .tc-avatar { transform: scale(1.12); color: rgba(237,217,163,.85); }
/* The demo portraits come from six different shoots, so they are graded into
   one editorial set — desaturated warm greys that lift to full tone on hover. */
.tc-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) sepia(.24) contrast(1.06) brightness(.9);
  transform: scale(1.02);
  transition: filter 1s var(--ease-out), transform 1.4s var(--ease-out);
}
.team-card:hover .tc-img, .team-card:focus-visible .tc-img {
  filter: grayscale(.1) sepia(.06) contrast(1.02) brightness(1);
  transform: scale(1.07);
}
.tc-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(11,11,12,.82), rgba(11,11,12,.05) 58%);
}
.tc-demo {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink); background: var(--champagne); padding: 5px 10px;
}
.tc-body { padding: 24px 24px 26px; }
.tc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.tc-body h3 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px);
  text-transform: uppercase; letter-spacing: .05em; color: var(--ivory);
}
.tc-title { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); text-align: right; }
.tc-specs { margin-top: 10px; font-size: 12.5px; line-height: 1.75; color: rgba(245,239,230,.55); }
.tc-next {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.tc-nk { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); }
.tc-nv { font-family: var(--font-display); font-size: 17px; color: var(--champagne); letter-spacing: .04em; }
.tc-cta {
  display: inline-flex; margin-top: 16px; font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold-2);
  transition: color .3s;
}
.team-card:hover .tc-cta { color: var(--ivory); }
.tc-cta .arr { transition: transform .4s; margin-left: 8px; display: inline-block; }
.team-card:hover .tc-cta .arr { transform: translateX(6px); }

/* ---------- BOOKING PAGE: header extras ---------- */
.demo-badge {
  display: inline-block; margin-top: 26px;
  font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--champagne); border: 1px solid rgba(198,161,91,.5);
  padding: 9px 16px;
}
.demo-note { margin-top: 14px; font-size: 12px; line-height: 1.8; color: rgba(245,239,230,.45); max-width: 560px; }
.book-main.wide { width: min(1180px, 94vw); }

/* ---------- BOOKING GRID + RAIL ---------- */
.book-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(34px, 4.5vw, 70px); align-items: start;
}
.book-rail {
  border: 1px solid var(--line); background: rgba(245,239,230,.03);
  padding: 30px 28px; position: sticky; top: 34px;
}

/* Below this the two-column layout gets cramped, so the summary becomes the
   bottom drawer. Above it the rail stays beside the steps, which is the
   better reading experience on a laptop. */
@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-rail {
    /* top must reset — base .book-rail sets top:34px for the sticky desktop
       rail, and fixed + top + bottom stretches the drawer over the whole
       viewport as an invisible click shield. max-height keeps it a strip:
       the summary must never grow into a wall over the treatment list. */
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    border-top: 1px solid var(--line-strong);
    background: rgba(11,11,12,.97);
    padding: 12px clamp(16px, 4vw, 28px) calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 14px;
    max-height: 82px;
  }
  /* nothing selected yet → the strip is not shown at all, so the treatment
     list is never sitting behind a summary that has nothing to summarise */
  .book-rail.is-empty { display: none; }
  .book-rail { animation: railIn .42s var(--ease-out) both; }
  @keyframes railIn { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
  .book-rail .rail-head { display: none; }
  .book-rail .rail-body {
    flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 16px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .book-rail .rail-body::-webkit-scrollbar { display: none; }
  .book-rail .rail-empty {
    font-size: 11.5px; padding: 0; color: rgba(245,239,230,.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .book-rail .rail-row { border: 0; padding: 0; flex: none; gap: 10px; align-items: baseline; }
  .book-rail .rail-row .rk { display: none; }
  .book-rail .rail-row .rv { font-size: 12.5px; white-space: nowrap; color: var(--ivory); }
  .book-rail .rail-cta { flex: none; padding: 12px 22px; font-size: 9.5px; }
  .book-rail .rail-where { display: none; }
  /* content must clear the fixed summary drawer (82px + breathing room) */
  .book-page { padding-bottom: 0; }
  .book-main { padding-bottom: 118px; }
}

/* six steps do not fit a phone in words — the numbered dots carry the
   progress (and the aria-labels carry it for screen readers) */
@media (max-width: 560px) {
  .bp .bp-label { display: none; }
  .bp { gap: 7px; }
  .bp .bp-dot { width: 22px; height: 22px; font-size: 8px; }
}
.rail-head {
  font-family: var(--font-display); font-size: 24px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ivory); padding-bottom: 18px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.rail-head .it { font-family: var(--font-serif); font-style: italic; text-transform: none; color: var(--champagne); }
.rail-empty { padding: 22px 0 8px; font-size: 12.5px; line-height: 1.8; color: rgba(245,239,230,.45); }
.rail-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.rail-row .rk { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); padding-top: 3px; }
.rail-row .rv { font-size: 13.5px; color: var(--ivory); text-align: right; line-height: 1.55; }
.rail-cta { width: 100%; margin-top: 22px; }
.rail-cta[disabled] { opacity: .35; pointer-events: none; }
.rail-where { margin-top: 18px; font-size: 10.5px; letter-spacing: .12em; line-height: 2; color: rgba(245,239,230,.45); text-align: center; }
.rail-where a { color: var(--champagne); }

/* ---------- PROVIDER PICKER ---------- */
.prov-pick { display: flex; flex-direction: column; gap: 14px; }
.prov-empty { padding: 30px 0; color: var(--taupe); font-size: 13.5px; letter-spacing: .06em; }
.prov-card {
  border: 1px solid var(--line); padding: 22px 24px;
  cursor: pointer; position: relative;
  transition: border-color .35s, background .35s;
}
.prov-card:hover { border-color: rgba(198,161,91,.5); background: rgba(245,239,230,.02); }
.prov-card.sel {
  border-color: var(--gold); background: rgba(198,161,91,.1);
  box-shadow: inset 3px 0 0 var(--gold);
}
.prov-card.sel::after {
  content: 'Selected'; position: absolute; top: 12px; right: 14px;
  font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2);
}
.prov-card:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 3px; }
.prov-top { display: flex; align-items: center; gap: 18px; }
.prov-avatar {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 26px; color: var(--champagne);
  border: 1px solid rgba(198,161,91,.45);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(198,161,91,.3), transparent 65%),
    var(--ink-2);
}
.prov-id { flex: 1; min-width: 0; }
.prov-name {
  font-family: var(--font-display); font-size: 24px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ivory); display: flex; align-items: center; gap: 10px;
}
.prov-demo-tag {
  font-family: var(--font-sans); font-size: 8px; letter-spacing: .26em;
  color: var(--ink); background: var(--champagne); padding: 3px 8px; vertical-align: middle;
}
.prov-title { margin-top: 4px; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.prov-next { text-align: right; flex: none; }
.prov-next .pn-k { display: block; font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.prov-next .pn-v { display: block; margin-top: 5px; font-family: var(--font-display); font-size: 16px; color: var(--champagne); }
.prov-specs { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: rgba(245,239,230,.55); }
.prov-select { margin-top: 16px; }

/* schedule drawer under the chosen provider */
.prov-sched {
  margin-top: 22px; border: 1px solid var(--line);
  padding: 24px 26px; background: rgba(245,239,230,.02);
}
.prov-sched[hidden] { display: none; }
.sched-title { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 14px; }
.sched-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.sched-row:last-of-type { border-bottom: 0; }
.sched-row span { color: rgba(245,239,230,.6); letter-spacing: .06em; }
.sched-row b { font-weight: 400; color: var(--ivory); letter-spacing: .08em; }
.sched-row.off b { color: rgba(245,239,230,.3); }
.sched-notes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 2; color: var(--taupe); letter-spacing: .08em; }

/* ---------- CONFIRMATION CHIPS (already themed; spacing) ---------- */
.confirm .c-details .chip span { display: block; font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); }
.confirm .c-mark svg { width: 34px; height: 34px; stroke: var(--champagne); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.confirm .c-mark svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: drawCheck .9s .45s var(--ease-out) forwards; }
.confirm .c-mark svg circle { stroke: rgba(198,161,91,.5); }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* ---------- CALM MODE (new layer) ---------- */
html.calm .team-card, html.calm .prov-card, html.calm .svc-tab { transition: none; }
html.calm .team-card:hover { transform: none; }
html.calm .confirm .c-mark svg path { animation: none; stroke-dashoffset: 0; }