/* ============================================================
   Osphere public website · v3
   Palette: deep forest green + ivory cream + champagne gold
   Restrained whitespace, soft contrast, editorial typography
   ============================================================ */

:root {
  --ink: #1f2a2a;
  --ink-soft: #3d4f4f;
  --primary: #25524e;        /* deep forest green */
  --primary-dark: #173432;
  --primary-deep: #0e2422;
  --cream: #f7f2e9;          /* ivory cream */
  --paper: #fdfbf6;          /* paper white */
  --ivory: #ffffff;
  --gold: #c9a874;           /* champagne gold */
  --gold-deep: #a3865a;
  --gold-soft: #e0c69b;
  --line: rgba(37, 82, 78, 0.15);
  --line-light: rgba(37, 82, 78, 0.08);
  --soft: rgba(31, 42, 42, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, "PingFang SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============ Typography ============ */
.italiana { font-family: 'Italiana', serif; letter-spacing: 0.18em; }
.cormorant { font-family: 'Cormorant Garamond', serif; }
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(34px, 4.5vw, 52px); }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font-size: clamp(22px, 2.6vw, 28px); }
.kicker { font-size: 10.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; margin-bottom: 18px; }
.serif-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; }
.em-gold { color: var(--gold-deep); font-style: italic; }

/* ============ Nav ============ */
/* Default (on dark hero): solid-ish dark gradient + cream/gold text */
.nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(10, 28, 26, 0.85) 0%, rgba(10, 28, 26, 0.35) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid rgba(201, 168, 116, 0.15);
}
/* Scrolled OR non-hero pages: cream backdrop + dark text */
.nav-wrap.scrolled, .nav-wrap.always-bg {
  background: rgba(247, 242, 233, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; }
.nav .brand { display: flex; flex-direction: column; line-height: 1; }
/* Default brand color = cream (visible on dark hero) */
.nav .brand .name {
  font-family: 'Italiana', serif;
  font-size: 26px;
  letter-spacing: 0.28em;
  color: var(--cream);
  transition: color 0.3s ease;
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
.nav .brand .sub {
  font-size: 9px;
  letter-spacing: 0.45em;
  color: var(--gold-soft);
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  transition: color 0.3s ease;
}
.nav-wrap.scrolled .brand .name, .nav-wrap.always-bg .brand .name { color: var(--primary); text-shadow: none; }
.nav-wrap.scrolled .brand .sub, .nav-wrap.always-bg .brand .sub { color: var(--gold-deep); }

.nav-links { display: flex; gap: 38px; align-items: center; }
.nav-links a {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--cream);
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.nav-links a:hover { color: var(--gold-soft); }
.nav-wrap.scrolled .nav-links a, .nav-wrap.always-bg .nav-links a {
  color: var(--ink);
  text-shadow: none;
}
.nav-wrap.scrolled .nav-links a:hover, .nav-wrap.always-bg .nav-links a:hover { color: var(--gold-deep); }

/* Book button: gold filled at top of hero, primary on scroll */
.nav-links a.book-btn {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--ink);
  padding: 11px 26px;
  letter-spacing: 0.22em;
  font-size: 10.5px;
  text-shadow: none;
}
.nav-links a.book-btn:hover { background: transparent; color: var(--gold); }
.nav-wrap.scrolled .nav-links a.book-btn, .nav-wrap.always-bg .nav-links a.book-btn {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--cream);
}
.nav-wrap.scrolled .nav-links a.book-btn:hover, .nav-wrap.always-bg .nav-links a.book-btn:hover {
  background: transparent;
  color: var(--primary);
}

.nav-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 22px; color: var(--cream); }
.nav-wrap.scrolled .nav-toggle, .nav-wrap.always-bg .nav-toggle { color: var(--ink); }

@media (max-width: 880px) {
  .nav { padding: 16px 22px; }
  .nav-links { display: none; position: fixed; top: 60px; left: 0; right: 0; background: var(--paper); padding: 28px; flex-direction: column; gap: 22px; border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
  .nav-links a { color: var(--ink); text-shadow: none; }
  .nav-toggle { display: block; }
  .nav-links a.book-btn { width: 100%; text-align: center; background: var(--primary); border-color: var(--primary); color: var(--cream); }
}

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  padding: 16px 38px;
  background: var(--primary);
  color: var(--cream);
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid var(--primary);
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: transparent; color: var(--primary); }
.btn-outline { background: transparent; color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--cream); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-gold:hover { background: transparent; color: var(--gold-deep); border-color: var(--gold-deep); }
.btn-on-dark { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-on-dark:hover { background: transparent; color: var(--gold); }

/* ============ Hero ============ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 100px 28px 60px;
  background: var(--primary-deep);
}

/* Hero video — flowing, ethereal motion (Pexels royalty-free) */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;                        /* darkened so text reads on top */
  filter: saturate(0.7) brightness(0.55) blur(1px);
  will-change: transform;
  animation: kenBurns 30s ease-in-out infinite alternate;
}
/* Layered background fallback — slow ken-burns motion */
.hero-bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  filter: blur(2px) saturate(0.7);
  animation: kenBurns 24s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-bg.layer-1 {
  background-image: url('https://images.unsplash.com/photo-1620912189835-3a2cba14d9b8?auto=format&fit=crop&w=2400&q=80');
}
.hero-bg.layer-2 {
  background-image: url('https://images.unsplash.com/photo-1599491209814-2c91d96bee5b?auto=format&fit=crop&w=2400&q=80');
  animation-delay: 12s;
  animation-direction: alternate-reverse;
  opacity: 0;
  animation-name: kenBurns, crossFade;
  animation-duration: 24s, 24s;
}
@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0,0); }
  100% { transform: scale(1.10) translate(-1.5%, -1%); }
}
@keyframes crossFade {
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 0.28; }
  100%      { opacity: 0; }
}

/* Strong overlay: keeps logo + text readable on any background */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    /* Top dark band for nav/logo */
    linear-gradient(180deg,
      rgba(10, 28, 26, 0.85) 0%,
      rgba(10, 28, 26, 0.55) 14%,
      rgba(10, 28, 26, 0.35) 30%,
      rgba(10, 28, 26, 0.35) 50%,
      rgba(10, 28, 26, 0.55) 75%,
      rgba(10, 28, 26, 0.85) 100%
    ),
    /* Centered vignette to anchor hero text */
    radial-gradient(ellipse 60% 45% at 50% 55%, rgba(10, 28, 26, 0.55) 0%, transparent 75%);
}

/* Floating gold orbs — subtle, decorative */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.22;
  animation: orbDrift 22s ease-in-out infinite alternate;
  z-index: 1;                       /* above overlay, below content */
  mix-blend-mode: screen;
}
.hero-orb.orb-1 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(201, 168, 116, 0.45), transparent 70%); top: 8%; left: -5%; }
.hero-orb.orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(224, 198, 155, 0.40), transparent 70%); bottom: 6%; right: -3%; animation-delay: -8s; }
.hero-orb.orb-3 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(201, 168, 116, 0.28), transparent 70%); top: 60%; left: 3%; animation-delay: -14s; }
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.1); }
  100% { transform: translate(-30px, 40px) scale(0.95); }
}

.hero-content {
  max-width: 880px;
  text-align: center;
  position: relative;
  z-index: 2;
  animation: heroFadeUp 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-divider {
  width: 0;
  height: 1px;
  background: var(--gold-soft);
  margin: 40px auto;
  animation: dividerExpand 1.8s ease-out 1.2s forwards;
}
@keyframes dividerExpand { to { width: 70px; } }

.hero .kicker { color: var(--gold-soft); }
.hero h1 { color: var(--cream); margin-bottom: 4px; font-weight: 300; text-shadow: 0 2px 30px rgba(0,0,0,0.2); }
.hero h1 .em { font-style: italic; color: var(--gold-soft); font-weight: 400; }
.hero .tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(18px, 2vw, 24px); color: rgba(247, 242, 233, 0.82); letter-spacing: 0.06em; margin-top: 8px; }
.hero-cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 56px; }
.hero-cta .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hero-cta .btn:hover { background: transparent; color: var(--gold); }
.hero-cta .btn-outline { background: transparent; color: var(--cream); border-color: var(--cream); }
.hero-cta .btn-outline:hover { background: var(--cream); color: var(--ink); }

/* Scroll indicator at bottom of hero */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gold-soft);
  z-index: 3;
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0;
  animation: heroFadeUp 1.6s ease-out 2s forwards;
}
.hero-scroll .scroll-line {
  width: 1px;
  height: 40px;
  background: var(--gold-soft);
  position: relative;
  overflow: hidden;
}
.hero-scroll .scroll-line::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: var(--cream);
  animation: scrollLineDrop 2.2s ease-in-out infinite;
}
@keyframes scrollLineDrop {
  0%   { transform: translateY(0); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(60px); opacity: 0; }
}

/* Scroll-triggered fade-up */
[data-fade] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-fade].visible { opacity: 1; transform: translateY(0); }
[data-fade][data-delay="1"] { transition-delay: 0.15s; }
[data-fade][data-delay="2"] { transition-delay: 0.30s; }
[data-fade][data-delay="3"] { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-orb, .hero-content, .hero-divider, .hero-scroll { animation: none !important; }
  .hero-divider { width: 70px; }
  .hero-content, .hero-scroll { opacity: 1; transform: none; }
}

/* ============ Image Pairs ============ */
.pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pair-grid img {
  width: 100%;
  height: 540px;
  object-fit: cover;
}
.pair-grid img:first-child { transform: translateY(-30px); }
.pair-grid img:last-child { transform: translateY(30px); }
@media (max-width: 880px) {
  .pair-grid { grid-template-columns: 1fr; }
  .pair-grid img { height: 380px; transform: none !important; }
}

.triple-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
.triple-grid img { width: 100%; height: 520px; object-fit: cover; }
.triple-grid .stack { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.triple-grid .stack img { height: 252px; }
@media (max-width: 880px) {
  .triple-grid { grid-template-columns: 1fr; }
  .triple-grid img { height: 320px !important; }
  .triple-grid .stack { display: contents; }
}

/* Full-width banner with text overlay */
.banner {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: kenBurns 28s ease-in-out infinite alternate;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 36, 34, 0.45) 0%, rgba(14, 36, 34, 0.65) 100%);
}
.banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  padding: 60px 28px;
  color: var(--cream);
}
.banner-content h2 { color: var(--cream); margin-bottom: 18px; }

/* ============ Section ============ */
.section { padding: 70px 28px; position: relative; }
.section.cream { background: var(--cream); }
.section.paper { background: var(--paper); }
.section.dark { background: var(--primary); color: var(--cream); }
.section.dark h1, .section.dark h2, .section.dark h3 { color: var(--cream); }
.section.dark .kicker { color: var(--gold-soft); }
.section.deep { background: var(--primary-deep); color: var(--cream); }
.section.deep h1, .section.deep h2, .section.deep h3 { color: var(--cream); }
.section.deep .kicker { color: var(--gold); }
.container { max-width: 1280px; margin: 0 auto; }
.container-narrow { max-width: 880px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 36px; }
.section-header .divider { width: 50px; height: 1px; background: var(--gold-deep); margin: 24px auto; }
.section.dark .section-header .divider, .section.deep .section-header .divider { background: var(--gold-soft); }
.section-header .lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(17px, 1.8vw, 22px); color: var(--soft); max-width: 580px; margin: 0 auto; }
.section.dark .section-header .lead, .section.deep .section-header .lead { color: rgba(247, 242, 233, 0.7); }

/* ============ Feature cards (3-col) ============ */
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
@media (max-width: 880px) { .three-col { grid-template-columns: 1fr; gap: 40px; } }
.feature { text-align: center; padding: 20px 0; }
.feature .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--gold-deep);
  margin-bottom: 18px;
  font-style: italic;
}
.feature h3 { margin-bottom: 16px; font-style: italic; font-weight: 400; color: var(--primary); }
.section.dark .feature h3, .section.deep .feature h3 { color: var(--cream); }
.feature p { color: var(--soft); font-size: 14.5px; line-height: 1.9; }
.section.dark .feature p, .section.deep .feature p { color: rgba(247, 242, 233, 0.7); }
.feature .icon-divider { width: 32px; height: 1px; background: var(--gold-deep); margin: 0 auto 20px; opacity: 0.7; }
.section.dark .feature .icon-divider, .section.deep .feature .icon-divider { background: var(--gold-soft); }

/* ============ Split (text + image) ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split img { width: 100%; height: 580px; object-fit: cover; }
.split.flip { direction: rtl; }
.split.flip > * { direction: ltr; }
.split .text-col h2 { margin-bottom: 24px; }
.split .text-col p { color: var(--soft); margin-bottom: 18px; font-size: 16px; line-height: 1.9; }
.section.dark .split .text-col p, .section.deep .split .text-col p { color: rgba(247, 242, 233, 0.75); }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split img { height: 380px; }
}

/* ============ Treatment grid ============ */
.trt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 880px) { .trt-grid { grid-template-columns: 1fr; } }
.trt-card {
  background: var(--paper);
  padding: 56px 36px;
  position: relative;
  text-align: center;
  transition: background 0.3s ease;
}
.trt-card:hover { background: var(--cream); }
.trt-card .label { color: var(--gold-deep); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 18px; }
.trt-card h3 { font-style: italic; font-weight: 400; color: var(--primary); margin-bottom: 14px; }
.trt-card p { color: var(--soft); font-size: 13.5px; line-height: 1.9; margin-bottom: 22px; min-height: 68px; }
.trt-card .price { color: var(--gold-deep); font-size: 12.5px; letter-spacing: 0.22em; }
.trt-card a.more { display: inline-block; margin-top: 18px; color: var(--primary); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.trt-card a.more:hover { color: var(--gold-deep); }

/* ============ Locations ============ */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
@media (max-width: 880px) { .loc-grid { grid-template-columns: 1fr; } }
.loc {
  text-align: center;
  position: relative;
  padding: 20px 0;
}
.loc::before {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background: var(--gold);
  margin: 0 auto 28px;
  opacity: 0.6;
}
.loc .label { color: var(--gold-soft); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 14px; }
.loc h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--cream); margin-bottom: 16px; font-weight: 300; }
.loc .addr { color: rgba(247, 242, 233, 0.7); font-size: 14.5px; line-height: 1.85; margin-bottom: 22px; }
.loc a { color: var(--gold-soft); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid transparent; transition: all 0.2s; padding-bottom: 2px; }
.loc a:hover { border-bottom-color: var(--gold-soft); }

/* ============ Membership ============ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; gap: 20px; } }
.tier {
  padding: 64px 32px;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--paper);
  position: relative;
  transition: all 0.3s ease;
}
.tier:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(31, 42, 42, 0.08); }
.tier.featured { background: var(--primary); color: var(--cream); border-color: var(--primary); }
.tier.featured h3, .tier.featured .deposit { color: var(--cream); }
.tier.featured .tier-name { color: var(--gold-soft); }
.tier.featured .deposit-label { color: rgba(247, 242, 233, 0.7); }
.tier.featured .benefits li { color: rgba(247, 242, 233, 0.85); border-bottom-color: rgba(224, 198, 155, 0.15); }
.tier .tier-name { font-family: 'Italiana', serif; font-size: 22px; letter-spacing: 0.3em; color: var(--gold-deep); margin-bottom: 24px; }
.tier .deposit { font-family: 'Cormorant Garamond', serif; font-size: 54px; color: var(--primary); margin-bottom: 4px; font-style: italic; font-weight: 300; }
.tier .deposit-label { font-size: 10px; letter-spacing: 0.32em; color: var(--soft); text-transform: uppercase; margin-bottom: 32px; }
.tier .benefits { list-style: none; padding: 0; }
.tier .benefits li { color: var(--soft); font-size: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line-light); }
.tier .benefits li:last-child { border-bottom: none; }

/* ============ Quote ============ */
.quote-block { text-align: center; max-width: 800px; margin: 0 auto; }
.quote-block .mark { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 70px; color: var(--gold-deep); line-height: 0.5; margin-bottom: 36px; opacity: 0.6; }
.quote-block p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.55; margin-bottom: 28px; font-weight: 300; }
.section.dark .quote-block .mark, .section.deep .quote-block .mark { color: var(--gold-soft); }

/* ============ Footer ============ */
.footer { background: var(--primary-deep); color: rgba(247, 242, 233, 0.7); padding: 90px 28px 40px; }
.footer-grid { max-width: 1280px; margin: 0 auto 60px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }
.footer h4 { color: var(--gold-soft); font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: 22px; font-weight: 500; }
.footer a { color: rgba(247, 242, 233, 0.7); font-size: 14px; display: block; padding: 6px 0; transition: color 0.2s; }
.footer a:hover { color: var(--gold-soft); }
.footer .brand-block .name { font-family: 'Italiana', serif; font-size: 26px; letter-spacing: 0.28em; color: var(--cream); margin-bottom: 6px; }
.footer .brand-block .sub { font-size: 9px; letter-spacing: 0.45em; color: var(--gold-soft); margin-bottom: 22px; }
.footer .brand-block p { color: rgba(247, 242, 233, 0.7); font-size: 14px; line-height: 1.85; font-style: italic; font-family: 'Cormorant Garamond', serif; }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding-top: 32px; border-top: 1px solid rgba(201, 168, 116, 0.15); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247, 242, 233, 0.5); }

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .section { padding: 80px 22px; }
}

/* ============ Service rows (for services page) ============ */
.svc-section { margin-bottom: 64px; }
.svc-section-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.svc-section-hdr h3 { color: var(--primary); font-style: italic; font-weight: 400; }
.svc-section-hdr .count { color: var(--soft); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; }
.svc-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px dashed var(--line-light); }
.svc-row:last-child { border-bottom: none; }
.svc-row .nm { color: var(--ink); font-size: 15px; }
.svc-row .meta { color: var(--soft); font-size: 12px; letter-spacing: 0.05em; margin-top: 2px; }
.svc-row .price { color: var(--gold-deep); font-size: 15px; white-space: nowrap; padding-left: 20px; }

.svc-categories { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 60px; }
.svc-cat-pill {
  padding: 10px 22px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.svc-cat-pill:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.svc-cat-pill.active { border-color: var(--primary); color: var(--cream); background: var(--primary); }

/* ============ Concern Grid (entry point — by goal) ============ */
.concern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .concern-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .concern-grid { grid-template-columns: 1fr; } }
.concern-card {
  display: block;
  padding: 36px 24px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.concern-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
}
.concern-card:hover::before { transform: scaleY(1); }
.concern-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.concern-card > * { position: relative; z-index: 1; transition: color 0.3s; }
.concern-card:hover > * { color: var(--cream) !important; }
.concern-card:hover .concern-arrow { color: var(--gold-soft) !important; }
.concern-card .concern-icon {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 36px;
  color: var(--gold-deep);
  margin-bottom: 14px;
  font-weight: 300;
}
.concern-card h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--primary);
  margin-bottom: 12px;
}
.concern-card p {
  color: var(--soft);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 18px;
  min-height: 44px;
}
.concern-card .concern-arrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ============ Step cards (How it works) ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 36px 30px;
  text-align: center;
  position: relative;
}
.step + .step::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 60%;
  background: var(--line);
  transform: translateY(-50%);
}
@media (max-width: 880px) {
  .step + .step::before { left: 50%; top: 0; width: 60%; height: 1px; transform: translateX(-50%); }
}
.step .step-num {
  font-family: 'Italiana', serif;
  font-size: 40px;
  color: var(--gold-deep);
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: 0.05em;
}
.step h3 {
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
  margin-bottom: 12px;
}
.step p { color: var(--soft); font-size: 14px; line-height: 1.85; }

/* ============ Stat row (trust numbers) ============ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 52px 28px;
  border-top: 1px solid rgba(201, 168, 116, 0.2);
  border-bottom: 1px solid rgba(201, 168, 116, 0.2);
  text-align: center;
}
@media (max-width: 880px) { .stat-row { grid-template-columns: 1fr 1fr; gap: 32px 16px; } }
.stat-row .stat .n {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(38px, 5vw, 56px);
  color: var(--gold-deep);
  line-height: 1;
  font-weight: 300;
}
.stat-row .stat .lbl {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 12px;
}
.section.deep .stat-row .stat .n, .section.dark .stat-row .stat .n { color: var(--gold-soft); }
.section.deep .stat-row .stat .lbl, .section.dark .stat-row .stat .lbl { color: rgba(247, 242, 233, 0.65); }

/* ============ Testimonials ============ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 880px) { .testimonials { grid-template-columns: 1fr; } }
.tm-card {
  padding: 40px 32px;
  border: 1px solid var(--line);
  background: var(--paper);
  position: relative;
}
.tm-card::before {
  content: '"';
  position: absolute;
  top: 12px; left: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 70px;
  color: var(--gold);
  opacity: 0.4;
  line-height: 1;
}
.tm-card .stars {
  color: var(--gold-deep);
  font-size: 13px;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.tm-card p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.tm-card .attr {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.tm-card .attr .name { color: var(--primary); display: block; margin-bottom: 4px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; letter-spacing: 0.02em; text-transform: none; }

/* ============ Sticky mobile CTA ============ */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--primary-deep);
  border-top: 1px solid rgba(201, 168, 116, 0.25);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
}
@media (max-width: 880px) { .sticky-cta { display: flex; } body { padding-bottom: 70px; } }
.sticky-cta .left {
  flex: 1;
  color: var(--cream);
  font-size: 12px;
  line-height: 1.4;
}
.sticky-cta .left .em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold-soft);
  font-size: 15px;
  display: block;
  margin-bottom: 2px;
}
.sticky-cta a {
  display: inline-block;
  padding: 12px 22px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--gold);
}
.sticky-cta a.alt {
  background: transparent;
  color: var(--cream);
  border-color: rgba(247, 242, 233, 0.4);
  padding: 12px 16px;
}

/* ============ Value Prop row (4 small icons + text) ============ */
.value-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 32px 0;
}
@media (max-width: 880px) { .value-row { grid-template-columns: 1fr 1fr; gap: 28px 18px; } }
.vp {
  text-align: center;
  padding: 0 8px;
}
.vp .vp-icon {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--gold-deep);
  margin-bottom: 10px;
  line-height: 1;
}
.vp .vp-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--primary);
  margin-bottom: 6px;
}
.vp .vp-desc {
  font-size: 12.5px;
  color: var(--soft);
  line-height: 1.65;
}
.section.dark .vp .vp-title, .section.deep .vp .vp-title { color: var(--cream); }
.section.dark .vp .vp-desc, .section.deep .vp .vp-desc { color: rgba(247, 242, 233, 0.7); }
.section.dark .vp .vp-icon, .section.deep .vp .vp-icon { color: var(--gold-soft); }

/* ============ Map embed wrapper ============ */
.map-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
}
.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.3) contrast(0.95);
}

/* ============ Location detail cards (richer) ============ */
.loc-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 880px) { .loc-detail-grid { grid-template-columns: 1fr; gap: 32px; } }
.loc-card {
  padding: 40px 0;
}
.loc-card .label { color: var(--gold-deep); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 12px; }
.loc-card h2 {
  font-style: italic;
  color: var(--primary);
  margin-bottom: 18px;
  font-weight: 300;
}
.loc-card .meta-block { margin-bottom: 24px; }
.loc-card .meta-block .lbl { display: block; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }
.loc-card .meta-block .val { color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.loc-card .meta-block .val a { color: var(--primary); border-bottom: 1px solid var(--line); }
.loc-card .meta-block .val a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.loc-card .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.loc-card .cta-row .btn { padding: 13px 26px; font-size: 11px; }

/* ============ First-visit checklist ============ */
.flow-list { max-width: 720px; margin: 0 auto; }
.flow-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px dashed var(--line);
  align-items: start;
}
.flow-item:last-child { border-bottom: none; }
.flow-item .num {
  font-family: 'Italiana', serif;
  font-size: 28px;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}
.flow-item h3 {
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
  margin-bottom: 8px;
  font-size: 22px;
}
.flow-item p { color: var(--soft); font-size: 15px; line-height: 1.85; }

/* ============ Inline CTA banner (used between sections) ============ */
.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 38px 44px;
  background: var(--primary);
  color: var(--cream);
  flex-wrap: wrap;
}
.inline-cta .left { flex: 1; min-width: 240px; }
.inline-cta .left .k { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 8px; }
.inline-cta .left h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--cream);
  font-weight: 300;
  line-height: 1.3;
}
.inline-cta .right .btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.inline-cta .right .btn:hover { background: transparent; color: var(--gold); }

/* ============ Compact pricing summary (services category top) ============ */
.svc-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 18px;
  background: rgba(201, 168, 116, 0.08);
  border-left: 3px solid var(--gold);
  margin: 20px 0 28px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
}
.svc-summary .from { color: var(--gold-deep); letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; }
.svc-summary .from b { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: var(--primary); margin-left: 4px; font-weight: 400; }
.svc-summary .dur { color: var(--soft); font-size: 12.5px; letter-spacing: 0.04em; }
.svc-summary .book { color: var(--primary); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.svc-summary .book:hover { color: var(--gold-deep); }

/* =====================================================
   Mega-menu (Services dropdown in nav) — added v11
   ===================================================== */
.nav-services-wrap { position: relative; }
.nav-services-trigger {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  cursor: pointer;
}
.nav-services-trigger::after {
  content: '▾'; font-size: 0.65em; opacity: 0.6; margin-left: 2px;
  transition: transform 0.2s;
}
.nav-services-wrap:hover .nav-services-trigger::after,
.nav-services-wrap:focus-within .nav-services-trigger::after { transform: rotate(180deg); opacity: 1; }

.mega-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  display: none;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 24px 56px rgba(37, 82, 78, 0.14);
  padding: 30px 36px;
  width: min(760px, 92vw);
  z-index: 200;
  grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin-top: 0;
}
.nav-services-wrap:hover .mega-menu,
.nav-services-wrap:focus-within .mega-menu { display: grid; }

/* Invisible bridge so cursor can travel from trigger to menu */
.nav-services-wrap::before {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
}

.mega-col h5 {
  font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 10px; font-weight: 600;
}
.mega-col a {
  display: block !important;
  padding: 7px 0 !important;
  font-size: 13.5px !important; color: var(--ink-soft) !important; text-decoration: none;
  border-bottom: 1px dashed var(--line-light);
  letter-spacing: normal !important; text-transform: none !important; font-weight: 400 !important;
  transition: color 0.15s, padding-left 0.15s;
}
.mega-col a:last-child { border-bottom: none; }
.mega-col a:hover { color: var(--gold-deep) !important; padding-left: 6px !important; }
.mega-col a .price-hint {
  display: block; color: var(--soft); font-size: 11px; font-style: italic;
  font-family: 'Cormorant Garamond', serif; margin-top: 2px;
}

/* Mobile: flatten mega-menu into open drawer (drawer has cream background) */
@media (max-width: 880px) {
  .nav-services-trigger::after { display: none; }
  .mega-menu {
    display: block !important; position: static !important; transform: none !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 6px 0 16px !important; width: auto !important; margin-top: 0;
    grid-template-columns: none !important;
  }
  .nav-services-wrap::before { display: none; }
  .mega-col { margin: 10px 0 14px; }
  .mega-col h5 {
    color: var(--gold-deep) !important;
    font-size: 10.5px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important;
    margin: 0 0 8px 12px !important; font-weight: 600 !important;
  }
  .mega-col a {
    color: var(--ink) !important;
    padding: 8px 12px 8px 22px !important;
    font-size: 14px !important; border-bottom: none !important;
    letter-spacing: normal !important; text-transform: none !important; font-weight: 400 !important;
  }
  .mega-col a:hover { color: var(--gold-deep) !important; padding-left: 28px !important; }
  .mega-col a .price-hint { display: none; }
}

/* ============================================================
   v14: loc-card label + row styling (was missing)
   ============================================================ */
.loc-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
  font-weight: 600;
}
.loc-card .row {
  padding: 4px 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.loc-card .row a {
  color: var(--primary);
  border-bottom: 1px solid var(--line);
  transition: color 0.15s, border-color 0.15s;
}
.loc-card .row a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}
.loc-card .row b {
  color: var(--ink);
  font-weight: 500;
}

/* loc-detail-grid: 3 cards in 2-col is awkward — force 3-col on wider screens */
@media (min-width: 881px) {
  .loc-detail-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
  }
}

/* ============================================================
   v15: Editorial typography refinement (Aman-inspired)
   ============================================================ */
h1 { font-weight: 200 !important; letter-spacing: 0.012em !important; line-height: 1.1 !important; }
h2 { font-weight: 250 !important; letter-spacing: 0.015em !important; line-height: 1.15 !important; }
h3 { font-weight: 300 !important; }

/* Wider letter-spacing on uppercase labels */
.kicker { letter-spacing: 0.46em !important; font-size: 10px !important; }

/* More generous section spacing */
.section { padding: 90px 28px !important; }
@media (max-width: 880px) { .section { padding: 56px 22px !important; } }
.section-header { margin-bottom: 48px !important; }

/* Editorial full-bleed image banner */
.editorial-banner {
  width: 100%;
  height: clamp(280px, 50vh, 520px);
  background-size: cover;
  background-position: center;
  position: relative;
}
.editorial-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,30,40,0.0) 0%, rgba(20,30,40,0.15) 100%);
  pointer-events: none;
}
.editorial-banner-text {
  position: absolute; bottom: 40px; left: 40px;
  color: var(--cream); max-width: 480px;
  z-index: 2;
}
.editorial-banner-text .kicker { color: var(--gold-soft) !important; margin-bottom: 8px; }
.editorial-banner-text p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 300; line-height: 1.35;
  text-shadow: 0 1px 18px rgba(0,0,0,0.45);
}
@media (max-width: 720px) { .editorial-banner-text { bottom: 22px; left: 22px; right: 22px; max-width: none; } }

/* Pull-quote block */
.pull-quote {
  max-width: 760px; margin: 60px auto;
  padding: 30px 40px;
  border-left: 1px solid var(--gold-deep);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--primary);
}
.pull-quote .by {
  display: block;
  margin-top: 18px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

/* Soften card borders to hairline (Aman feel) */
.preview-card { border: none !important; border-top: 1px solid var(--gold-deep) !important; padding-top: 28px !important; }
.preview-card:hover { transform: none !important; box-shadow: none !important; border-top-color: var(--primary) !important; }
.preview-card .lbl { color: var(--ink) !important; opacity: 0.55; }

/* Slimmer loc cards */
.loc-card { padding: 22px 0 !important; border-top: 1px solid var(--line-light); }
.info-card { border: none !important; border-top: 1px solid var(--gold-deep) !important; padding-top: 22px !important; }

/* Image-and-text split section */
.editorial-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.editorial-split .editorial-img {
  width: 100%; aspect-ratio: 4/5; background-size: cover; background-position: center;
}
.editorial-split .editorial-text { padding: 20px 0; }
.editorial-split.flip { grid-template-columns: 1fr 1.1fr; }
.editorial-split.flip .editorial-img { order: 2; }
@media (max-width: 880px) {
  .editorial-split, .editorial-split.flip { grid-template-columns: 1fr; gap: 30px; }
  .editorial-split .editorial-img, .editorial-split.flip .editorial-img { aspect-ratio: 4/3; order: 0; }
}

/* ============================================================
   v16: Unified image treatment + editorial composition variations
   Goal: make disparate Unsplash photos look like one cohesive
   photographic series, with magazine-spread layout rhythm.
   ============================================================ */

/* (1) Unified image filter — applied to all banners + content images.
   The combination of partial desaturation, slight warm sepia, lowered
   brightness and a soft vignette makes random stock look intentional. */
.editorial-banner,
.editorial-img,
.hero-bg,
.hero-video,
.banner-bg,
.preview-card img,
.pair-grid img,
.triple-grid img,
.split img,
.loc img {
  filter: grayscale(0.28) brightness(0.82) contrast(1.10) saturate(0.48) sepia(0.16);
  transition: filter 0.5s ease, transform 0.8s ease;
}

/* Banner overlay: deeper vignette + warm gold cast */
.editorial-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    /* warm gold tint to match the cream palette */
    linear-gradient(180deg, rgba(245,235,210,0.10) 0%, rgba(20,18,14,0.45) 80%, rgba(20,18,14,0.65) 100%),
    /* deeper center-to-edge vignette */
    radial-gradient(ellipse 130% 90% at center, transparent 25%, rgba(20,18,14,0.50) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Soft edge fade — image dissolves into the page background at top + bottom */
.editorial-banner {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.editorial-banner::after {
  background: linear-gradient(180deg, rgba(20,18,14,0.0) 50%, rgba(20,18,14,0.30) 100%) !important;
}
.editorial-banner-text { z-index: 3 !important; }

/* Slow scroll-into-view fade for banner images */
.editorial-banner { background-attachment: scroll; }
@media (min-width: 881px) {
  .editorial-banner { background-attachment: fixed; }
}

/* Hero video: deepen overlay so it feels cinematic, not corporate */
.hero-video { opacity: 0.28 !important; filter: brightness(0.45) saturate(0.55) contrast(1.1) sepia(0.12) !important; }

/* (2) Editorial composition variants */

/* Variant A: half-bleed image with floating text card overlap */
.editorial-half {
  position: relative;
  padding: 100px 0;
}
.editorial-half .img {
  width: 70%;
  height: clamp(380px, 60vh, 580px);
  background-size: cover;
  background-position: center;
  filter: brightness(0.88) contrast(1.06) saturate(0.62) sepia(0.08);
  position: relative;
}
.editorial-half .text-card {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 38%;
  background: var(--paper);
  padding: 44px 48px;
  border-top: 1px solid var(--gold-deep);
  box-shadow: 0 30px 70px rgba(20,18,14,0.10);
}
.editorial-half.flip .img { margin-left: auto; }
.editorial-half.flip .text-card { right: auto; left: 5%; }
.editorial-half .text-card .kicker { color: var(--gold-deep) !important; margin-bottom: 14px; }
.editorial-half .text-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 300;
  color: var(--primary);
  margin-bottom: 16px;
  line-height: 1.18;
}
.editorial-half .text-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
@media (max-width: 880px) {
  .editorial-half { padding: 50px 0; }
  .editorial-half .img { width: 100%; height: 320px; }
  .editorial-half .text-card { position: static; transform: none; width: 92%; margin: -40px auto 0; padding: 28px 24px; }
}

/* Variant B: triple-stack — three images at staggered heights */
.editorial-triple {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  padding: 40px 0;
}
.editorial-triple .col {
  background-size: cover;
  background-position: center;
  filter: brightness(0.88) contrast(1.06) saturate(0.62) sepia(0.08);
}
.editorial-triple .col:nth-child(1) { aspect-ratio: 3/4; margin-top: 60px; }
.editorial-triple .col:nth-child(2) { aspect-ratio: 4/5; }
.editorial-triple .col:nth-child(3) { aspect-ratio: 3/4; margin-top: 30px; }
@media (max-width: 880px) {
  .editorial-triple { grid-template-columns: 1fr 1fr; }
  .editorial-triple .col:nth-child(3) { display: none; }
  .editorial-triple .col { margin-top: 0 !important; aspect-ratio: 3/4; }
}

/* Variant C: image-overlap-text — image extends behind text */
.editorial-overlap {
  position: relative;
  padding: 80px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
.editorial-overlap .img {
  width: 110%;
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  filter: brightness(0.88) contrast(1.06) saturate(0.62) sepia(0.08);
  position: relative;
  z-index: 1;
}
.editorial-overlap .text {
  padding: 50px 0 50px 40px;
  position: relative;
  z-index: 2;
}
.editorial-overlap.flip { direction: rtl; }
.editorial-overlap.flip > * { direction: ltr; }
.editorial-overlap.flip .text { padding: 50px 40px 50px 0; }
@media (max-width: 880px) {
  .editorial-overlap, .editorial-overlap.flip { grid-template-columns: 1fr; padding: 30px 0; }
  .editorial-overlap .img, .editorial-overlap.flip .img { width: 100%; aspect-ratio: 4/3; }
  .editorial-overlap .text, .editorial-overlap.flip .text { padding: 24px 0; }
}

/* Gold accent line — used to separate editorial sections */
.editorial-rule { width: 32px; height: 1px; background: var(--gold-deep); margin: 24px 0; opacity: 0.6; }

/* Italic display caption — used under banners */
.editorial-caption {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--soft);
  letter-spacing: 0.04em;
  text-align: right;
  margin: 8px 22px 0 0;
}

/* ============================================================
   v20: Video-backed editorial banner (replaces background-image)
   Plays a looping abstract Pexels clip behind banner text.
   ============================================================ */
.editorial-banner.has-video { background-image: none !important; background-color: #0a0a0a; }
.editorial-banner.has-video > video.banner-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
  filter: brightness(0.78) contrast(1.05) saturate(0.55) sepia(0.12);
  animation: bannerKenBurns 24s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes bannerKenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}
.editorial-banner.has-video::before {
  /* Stronger gold + dark overlay so text reads regardless of video frame */
  background:
    linear-gradient(180deg, rgba(245,235,210,0.06) 0%, rgba(20,18,14,0.55) 70%, rgba(20,18,14,0.78) 100%),
    radial-gradient(ellipse 140% 100% at center, transparent 20%, rgba(20,18,14,0.55) 100%) !important;
  z-index: 1 !important;
}
.editorial-banner.has-video > .editorial-banner-text { z-index: 3 !important; }

/* ============================================================
   v21: Magazine-style hub page layout
   (asymmetric splits, roman numerals, floating quotes)
   ============================================================ */
.hub-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
.hub-split-flip { grid-template-columns: 2fr 1fr; }
.hub-side {
  border-top: 1px solid var(--gold-deep);
  padding-top: 18px;
  position: sticky; top: 100px;
}
.hub-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(48px, 5vw, 72px);
  color: var(--gold-deep);
  font-weight: 300;
  line-height: 0.9;
}
.hub-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 12px;
  opacity: 0.7;
}
.hub-prose {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.4vw, 18.5px);
  line-height: 1.85;
}
.hub-prose p + p { margin-top: 18px; }
.hub-prose .first-line::first-line {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--primary);
  font-size: 1.15em;
}

@media (max-width: 880px) {
  .hub-split, .hub-split-flip { grid-template-columns: 1fr; gap: 28px; }
  .hub-side { position: static; }
  .hub-num { font-size: 44px; }
  .hub-split-flip .hub-side { order: -1; }
}

/* Italic display list (Who it's for) */
.hub-italic-list {
  list-style: none; padding: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.55;
  color: var(--primary);
  max-width: 580px; margin: 0 auto;
}
.hub-italic-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
}
.hub-italic-list li:last-child { border-bottom: none; }
.hub-italic-list li::before {
  content: '— ';
  color: var(--gold-deep);
}

/* Section marker (pricing intro line) */
.hub-section-marker {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gold-deep);
  flex-wrap: wrap;
  gap: 12px;
}

/* Locations as italic serif lines */
.hub-locs-italic {
  list-style: none; padding: 0;
  max-width: 540px; margin: 0 auto;
}
.hub-locs-italic li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line-light);
}
.hub-locs-italic li:last-child { border-bottom: none; }
.hub-locs-italic li a {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--primary);
  transition: color 0.2s;
}
.hub-locs-italic li a:hover { color: var(--gold-deep); }
.hub-locs-italic .hub-loc-addr {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
}

/* Tweak hub-opening h1 to feel Aman-display */
.hub-opening h1 {
  font-weight: 200 !important;
  font-style: normal;
}
.hub-opening h1 em, .hub-opening h1 .em-gold {
  font-style: italic;
  color: var(--gold-deep);
}

/* FAQ inside hub-split: remove the boxy borders */
.hub-prose details.faq, .hub-prose .faq { border-color: var(--line-light) !important; }

/* ============================================================
   v22: Pure typography overrides (Aesop / Loewe direction)
   ============================================================ */
.hub-link {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 5px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, padding-left 0.2s;
}
.hub-link:hover { color: var(--primary); border-bottom-color: var(--primary); padding-left: 6px; }

/* Override the .has-video banner to suppress on inner pages where the user
   didn't actually want it. The pages now use pure-typography hero — leave
   .has-video class intact in code in case a banner is brought back later. */
.editorial-banner.has-video { display: none; }

/* ============================================================
   v23: Strict 6-component design system
   Every non-index page composes from these 6 blocks only.
   Same paper background, same spacing, same rules.
   ============================================================ */

/* Shared section frame */
.ds-section {
  padding: 80px 28px 100px;
  text-align: center;
  background: var(--paper);
}
.ds-section .ds-inner { max-width: 640px; margin: 0 auto; }
.ds-section .ds-inner-wide { max-width: 880px; margin: 0 auto; }
@media (max-width: 720px) { .ds-section { padding: 56px 22px 70px; } }

/* Universal divider between sections */
.ds-rule {
  width: 32px; height: 1px; background: var(--gold-deep);
  margin: 0 auto; opacity: 0.55;
}

/* [A] Hero */
.ds-hero { padding: 170px 28px 90px; text-align: center; background: var(--paper); }
.ds-hero .kicker { margin-bottom: 36px; }
.ds-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 200;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.08;
  color: var(--primary);
  letter-spacing: 0.005em;
  margin-bottom: 36px;
}
.ds-hero .ds-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.3vw, 26px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 600px;
  margin: 36px auto 44px;
}
.ds-hero .ds-tagline + .ds-link, .ds-hero .ds-rule + .ds-tagline { margin-top: 36px; }
@media (max-width: 720px) { .ds-hero { padding: 130px 22px 70px; } }

/* [B] Statement — big italic sentence centered */
.ds-statement {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--primary);
  line-height: 1.45;
  max-width: 640px;
  margin: 32px auto 0;
}
.ds-statement em, .ds-statement .gold { color: var(--gold-deep); font-style: italic; }

/* [C] Prose — body paragraphs */
.ds-prose {
  color: var(--ink-soft);
  font-size: clamp(16.5px, 1.4vw, 18px);
  line-height: 1.85;
  max-width: 620px;
  margin: 28px auto 0;
}
.ds-prose p + p { margin-top: 18px; }

/* [D] List variants */
.ds-list { list-style: none; padding: 0; max-width: 580px; margin: 36px auto 0; }

/* D1: italic display list (em-dash prefix) */
.ds-list-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.55;
  color: var(--primary);
  text-align: center;
}
.ds-list-italic li { padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.ds-list-italic li:last-child { border-bottom: none; }
.ds-list-italic li::before { content: '— '; color: var(--gold-deep); }

/* D2: numbered commitments (Roman I-V) */
.ds-list-commitments { max-width: 660px; }
.ds-list-commitments li {
  counter-increment: roman;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-light);
  display: flex; gap: 28px; align-items: baseline;
  text-align: left;
}
.ds-list-commitments li:last-child { border-bottom: none; }
.ds-list-commitments li::before {
  content: counter(roman, upper-roman);
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 28px; color: var(--gold-deep);
  flex-shrink: 0; min-width: 44px;
}
.ds-list-commitments h3 {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--primary); margin-bottom: 8px;
}
.ds-list-commitments p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; }

/* D3: city / studio lines (italic primary + small caps subtitle) */
.ds-list-cities li { padding: 22px 0; border-bottom: 1px solid var(--line-light); }
.ds-list-cities li:last-child { border-bottom: none; }
.ds-list-cities a {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; align-items: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--primary);
  transition: color 0.2s;
}
.ds-list-cities a:hover { color: var(--gold-deep); }
.ds-list-cities .sub {
  font-family: 'Inter', sans-serif; font-style: normal;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--soft);
}

/* [E] Pricing — keep existing svc-tbl, just wrap in standard ds-section */

/* [F] CTA */
.ds-cta { padding-top: 100px; padding-bottom: 140px; text-align: center; border-top: 1px solid var(--line-light); background: var(--paper); }
.ds-cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 200;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--primary);
  line-height: 1.18;
  margin-bottom: 24px;
}
.ds-cta .ds-cta-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; color: var(--ink-soft); font-size: 17px;
  margin-bottom: 44px; max-width: 460px; margin-left: auto; margin-right: auto;
}
.ds-cta .ds-tel { margin-top: 28px; font-size: 13px; color: var(--soft); }
.ds-cta .ds-tel a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }
.ds-cta .ds-related { margin-top: 56px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft); }

/* Standardize all link CTAs */
.ds-link {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 5px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, padding-left 0.2s;
}
.ds-link:hover { color: var(--primary); border-bottom-color: var(--primary); padding-left: 6px; }

/* D4 — Timeline list: italic time-label + description.
   Use for first-visit "the hour" and "before you come". */
.ds-list-timeline { max-width: 640px; }
.ds-list-timeline li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-light);
  align-items: baseline;
}
.ds-list-timeline li:last-child { border-bottom: none; }
.ds-list-timeline .ds-when {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-deep);
  font-size: 17px;
  letter-spacing: 0.01em;
}
.ds-list-timeline h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  color: var(--primary);
  margin: 0 0 8px;
  line-height: 1.3;
}
.ds-list-timeline p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.8;
  margin: 0;
}
@media (max-width: 640px) {
  .ds-list-timeline li { grid-template-columns: 1fr; gap: 8px; }
}

/* G — FAQ accordion */
.ds-faq { max-width: 640px; margin: 36px auto 0; }
.ds-faq details {
  border-top: 1px solid var(--line-light);
  padding: 22px 0;
}
.ds-faq details:last-of-type { border-bottom: 1px solid var(--line-light); }
.ds-faq summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after {
  content: '+';
  color: var(--gold-deep);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 22px;
  transition: transform 0.2s ease;
}
.ds-faq details[open] summary::after { content: '−'; }
.ds-faq details p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.8;
}
.ds-faq details p a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }

/* D5 — Location detail block: address + map placeholder + actions */
.ds-loc { max-width: 720px; margin: 0 auto; }
.ds-loc + .ds-loc { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--line-light); }
.ds-loc h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--primary);
  margin: 0 0 8px;
  line-height: 1.15;
}
.ds-loc .ds-loc-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold-deep);
  font-size: 17px;
  margin: 0 0 28px;
  letter-spacing: 0.04em;
}
.ds-loc dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px 28px;
  margin: 0 0 28px;
}
.ds-loc dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
  padding-top: 3px;
}
.ds-loc dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
}
.ds-loc dd a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }
.ds-loc .ds-loc-actions {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 8px;
}
@media (max-width: 640px) {
  .ds-loc dl { grid-template-columns: 1fr; gap: 4px 0; }
  .ds-loc dt { padding-top: 14px; }
}

/* H — Split block: text + portrait image side by side.
   Used on index for "Skin Wellness & Beauty" and "Medical Aesthetics". */
.ds-split { background: var(--paper); padding: 110px 28px; }
.ds-split .ds-split-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ds-split.reverse .ds-split-inner { direction: rtl; }
.ds-split.reverse .ds-split-inner > * { direction: ltr; }
.ds-split .ds-split-text { max-width: 460px; }
.ds-split .ds-split-text .kicker { margin-bottom: 24px; }
.ds-split .ds-split-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.1;
  color: var(--primary);
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
.ds-split .ds-split-text h2 em, .ds-split .ds-split-text h2 .gold {
  color: var(--gold-deep); font-style: italic;
}
.ds-split .ds-split-text .ds-rule { margin: 0 0 28px; }
.ds-split .ds-split-text p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 28px;
}
.ds-split .ds-split-text .ds-link { font-size: 11px; letter-spacing: 0.22em; }
.ds-split .ds-split-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream, #f5efe4);
}
.ds-split .ds-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.98);
}
@media (max-width: 880px) {
  .ds-split { padding: 70px 22px; }
  .ds-split .ds-split-inner { grid-template-columns: 1fr; gap: 44px; }
  .ds-split.reverse .ds-split-inner { direction: ltr; }
  .ds-split .ds-split-image { aspect-ratio: 4 / 5; max-width: 480px; margin: 0 auto; width: 100%; }
}

/* I — Editorial lead block: two-column, text only.
   LEFT: big italic pull-quote.  RIGHT: 3 stacked labeled paragraphs.
   Replaces the stack of separate What/Who/How sections on hub pages. */
.ds-editorial { background: var(--paper); padding: 100px 28px; }
.ds-editorial .ds-editorial-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.ds-editorial .ds-pull {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.18;
  color: var(--primary);
  margin: 0;
  letter-spacing: -0.005em;
  position: sticky;
  top: 110px;
}
.ds-editorial .ds-pull em, .ds-editorial .ds-pull .gold {
  color: var(--gold-deep); font-style: italic;
}
.ds-editorial .ds-pull::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold-deep);
  margin: 0 0 28px;
}
.ds-editorial .ds-editorial-body { max-width: 460px; }
.ds-editorial .ds-block + .ds-block { margin-top: 40px; }
.ds-editorial .ds-block .kicker {
  display: block;
  margin: 0 0 14px;
}
.ds-editorial .ds-block p,
.ds-editorial .ds-block ul {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.85;
  margin: 0;
}
.ds-editorial .ds-block ul {
  list-style: none;
  padding: 0;
}
.ds-editorial .ds-block ul li {
  padding: 5px 0 5px 18px;
  position: relative;
}
.ds-editorial .ds-block ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold-deep);
}
@media (max-width: 880px) {
  .ds-editorial { padding: 64px 22px; }
  .ds-editorial .ds-editorial-inner { grid-template-columns: 1fr; gap: 40px; }
  .ds-editorial .ds-pull { position: static; font-size: 30px; }
}

/* J — Pricing block: full-bleed cream background.
   Different bg = visual punctuation between content and pricing. */
.ds-pricing-block {
  background: var(--cream, #f5efe4);
  padding: 100px 28px;
}
.ds-pricing-block .ds-pricing-inner {
  max-width: 880px;
  margin: 0 auto;
}
.ds-pricing-block .ds-pricing-head { text-align: center; margin-bottom: 44px; }
.ds-pricing-block .ds-pricing-head .kicker { margin-bottom: 14px; }
.ds-pricing-block .ds-pricing-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(34px, 4vw, 48px);
  color: var(--primary);
  margin: 0 0 12px;
  line-height: 1.1;
}
.ds-pricing-block .ds-pricing-head p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--soft);
  font-size: 15px;
  margin: 0;
}
.ds-pricing-block .ds-pricing-head p a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
}
.ds-pricing-block .svc-tbl tr { border-bottom: 1px solid rgba(37, 82, 78, 0.12); }
.ds-pricing-block .svc-pkg-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--primary);
  font-size: 22px;
  margin: 56px 0 8px;
  text-align: center;
}
.ds-pricing-block .svc-pkg-note {
  text-align: center;
  color: var(--soft);
  font-size: 13px;
  margin: 0 0 22px;
}
.ds-pricing-block .svc-pkg-note a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
}
@media (max-width: 720px) { .ds-pricing-block { padding: 64px 22px; } }

/* K — Closing block: locations + CTA merged into one tight footer block.
   Replaces the old separate "Available at" + "CTA" sections. */
.ds-closing {
  background: var(--paper);
  padding: 100px 28px 130px;
  text-align: center;
  border-top: 1px solid var(--line-light);
}
.ds-closing .ds-closing-inner { max-width: 580px; margin: 0 auto; }
.ds-closing .ds-closing-locs {
  list-style: none;
  padding: 0;
  margin: 28px auto 56px;
  max-width: 460px;
  text-align: left;
}
.ds-closing .ds-closing-locs li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-light);
}
.ds-closing .ds-closing-locs li:last-child { border-bottom: none; }
.ds-closing .ds-closing-locs a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
}
.ds-closing .ds-closing-locs a:hover { color: var(--gold-deep); }
.ds-closing .ds-closing-locs .sub {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
}
.ds-closing .ds-closing-not-at {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold-deep);
  margin: -36px auto 56px;
  max-width: 460px;
  text-align: left;
}
.ds-closing h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(34px, 4.4vw, 52px);
  color: var(--primary);
  line-height: 1.12;
  margin: 0 0 18px;
}
.ds-closing .ds-closing-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 440px;
  margin: 0 auto 36px;
}
.ds-closing .ds-tel {
  font-size: 13px;
  color: var(--soft);
  margin-top: 24px;
}
.ds-closing .ds-tel a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
}
.ds-closing .ds-related {
  margin-top: 48px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
}
.ds-closing .ds-related a { color: var(--soft); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.ds-closing .ds-related a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
@media (max-width: 720px) { .ds-closing { padding: 64px 22px 90px; } }

/* ============================================================================
   LUX-PAGE v27 — Lava-discipline single column.
   Hero (eyebrow / italic H1 / lead / filled Book button) → flat sections with
   italic gold H2 → minimal price list → FAQ → locations → CTA → related.
   No Roman numerals, no quick pills, no chapter-break rules, no oversized
   serif prices. Lava's exact proportions.
   ============================================================================ */
.lux-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 110px 32px 72px;  /* top accounts for fixed nav (~76px) + ~30px breathing */
  background: var(--paper);
  color: var(--ink);
}
@media (max-width: 720px) { .lux-page { padding: 92px 22px 56px; } }

/* Filled Book button — single primary CTA, Lava-style */
.lux-btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--gold-deep);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold-deep);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.lux-btn:hover { background: var(--primary); border-color: var(--primary); }
.lux-btn-outline {
  display: inline-block;
  padding: 14px 32px;
  background: transparent;
  color: var(--gold-deep);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold-deep);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.lux-btn-outline:hover { background: var(--gold-deep); color: var(--cream); }

/* Hero — eyebrow / italic H1 / lead / single Book button. That's it. */
.lux-hero { margin-bottom: 36px; }
.lux-hero .eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 14px;
}
.lux-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05;
  color: var(--primary);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.lux-hero h1 em, .lux-hero h1 .gold { color: var(--gold-deep); font-style: italic; }
.lux-hero .lead {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.85;
  font-weight: 300;
  max-width: 680px;
  margin: 0 0 28px;
}
.lux-hero .lux-btn { margin-top: 4px; }

/* Sections — italic gold H2 only. No numerals, no chapter-break rules. */
.lux-section { margin: 0; }
.lux-section > h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 30px);
  line-height: 1.15;
  color: var(--gold-deep);
  margin: 36px 0 14px;
  letter-spacing: 0;
}
.lux-section > p, .lux-section > .lux-prose p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 16px;
  font-weight: 300;
  max-width: 720px;
}
.lux-section .lux-prose p:last-child { margin-bottom: 0; }

/* Overview block — combine What/Who/How into one compact 2-col spread.
   LEFT (prose):  "What it is" + "What to expect" with small eyebrow labels.
   RIGHT (aside): "Right for you if" — gold-edged sidebar list.
   One H2, one visual block. Replaces 3 stacked H2 sections. */
.lux-overview .overview-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 36px;
  margin-top: 14px;
  align-items: start;
}
.lux-overview .ov-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin: 0 0 8px;
}
.lux-overview .ov-prose .ov-label + .ov-label,
.lux-overview .ov-prose p + .ov-label { margin-top: 22px; }
.lux-overview .ov-prose p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 300;
  max-width: 540px;
}
.lux-overview .ov-side {
  background: rgba(201, 168, 116, 0.06);
  border: 1px solid var(--line-light);
  border-left: 2px solid var(--gold-deep);
  padding: 22px 22px 18px;
}
.lux-overview .ov-side .ov-label { margin-bottom: 12px; }
.lux-overview .ov-side ul { list-style: none; padding: 0; margin: 0; }
.lux-overview .ov-side li {
  padding: 8px 0 8px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 300;
  border-bottom: 1px dashed var(--line-light);
  position: relative;
}
.lux-overview .ov-side li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--gold-deep);
  font-weight: 700;
  top: 6px;
}
.lux-overview .ov-side li:last-child { border-bottom: none; }
@media (max-width: 760px) {
  .lux-overview .overview-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Who-for list — plain bullets, ink color (kept for non-hub pages) */
.lux-section .lux-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 680px;
}
.lux-section .lux-list li {
  padding: 9px 0 9px 22px;
  position: relative;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.lux-section .lux-list li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: var(--gold-deep);
  font-weight: 700;
}

/* Pricing — Lava style: name | desc | price. No per-row book button. */
.lux-menu .menu-note {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 4px;
  font-weight: 300;
}
.lux-menu .menu-note a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }
.lux-menu .price-list { margin: 18px 0 0; border-top: 1px solid var(--line); }
.lux-menu .price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  gap: 24px;
}
.lux-menu .price-row .info { flex: 1; min-width: 0; }
.lux-menu .price-row .name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}
.lux-menu .price-row .desc {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 300;
  margin-top: 4px;
  max-width: 560px;
}
.lux-menu .price-row .desc .dur {
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--soft);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.lux-menu .price-row .price {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--gold-deep);
  line-height: 1.3;
  white-space: nowrap;
  text-align: right;
}
.lux-menu .price-row .price .unit {
  display: block;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--soft);
  margin-top: 2px;
}
/* Tiny per-row Book link (small text, not a chip) — for ?service= pre-fill */
.lux-menu .price-row .book {
  display: none;  /* hidden by default — page-level Book button is the CTA */
}
.lux-menu .pkg-head { margin: 36px 0 12px; }
.lux-menu .pkg-head h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--gold-deep);
  margin: 0 0 4px;
}
.lux-menu .pkg-head .pkg-note { font-size: 13.5px; color: var(--ink-soft); margin: 0; font-weight: 300; }
.lux-menu .pkg-head .pkg-note a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }

/* FAQ — plain, Lava style. + sign right side. */
.lux-faq { margin: 18px 0 0; }
.lux-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.lux-faq summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  padding-right: 28px;
  position: relative;
  line-height: 1.4;
}
.lux-faq summary::-webkit-details-marker { display: none; }
.lux-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 22px;
  font-weight: 300;
  color: var(--gold-deep);
}
.lux-faq details[open] summary::after { content: '−'; }
.lux-faq details p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
  max-width: 720px;
}
.lux-faq details p a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }

/* Locations list — simple */
.lux-locs { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); }
.lux-locs li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.lux-locs a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
}
.lux-locs a:hover { color: var(--gold-deep); }
.lux-locs .addr {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: right;
}
.lux-locs .tel {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--gold-deep);
  margin-left: 14px;
  white-space: nowrap;
}
.lux-not-at {
  font-size: 14px;
  font-style: italic;
  color: var(--soft);
  margin: 12px 0 0;
  max-width: 580px;
  font-weight: 300;
}

/* Studio detail block (for location pages only) */
.lux-studio { margin: 18px 0 0; }
.lux-studio dl { display: grid; grid-template-columns: 120px 1fr; gap: 12px 24px; margin: 0; }
.lux-studio dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); padding-top: 3px; font-weight: 500; }
.lux-studio dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.7; font-weight: 300; }
.lux-studio dd a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }
.lux-studio .lux-studio-actions { margin-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; }
.lux-studio .lux-map { margin-top: 32px; }
.lux-studio .lux-map iframe { width: 100%; height: 320px; border: 1px solid var(--line); display: block; filter: saturate(0.7); }
@media (max-width: 640px) { .lux-studio dl { grid-template-columns: 1fr; gap: 4px 0; } .lux-studio dt { padding-top: 14px; } }

/* Closing — single Book button + small related grid */
.lux-closing { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.lux-closing p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 18px;
  font-weight: 300;
}
.lux-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.lux-related-grid > h3 {
  grid-column: 1 / -1;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 4px;
  font-weight: 500;
}
.lux-related-grid a {
  padding: 14px 16px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s;
}
.lux-related-grid a:hover { border-color: var(--gold-deep); }
.lux-related-grid a strong {
  display: block;
  color: var(--gold-deep);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  font-family: 'Inter', sans-serif;
}
.lux-related-grid a span { font-size: 12.5px; color: var(--ink-soft); font-weight: 300; }

/* Kicker label (used in every section) */
.ds-section .kicker { margin-bottom: 0; }

/* Suppress old class artifacts that fight the new system */
.hub-italic-list, .hub-locs-italic, .hub-link { /* keep working but ds- versions are canonical */ }

/* Strip alternate-colored sections — paper everywhere */
.section.cream, .section.dark, .section.deep {
  /* keep var defs for legacy code, but for v23 pages use ds-section */
}