/* RS Aesthetics — shared styles
   Palette: teal #1F3A3D / darkest teal #172C2E / gold #D4A373 / stone #F7F6F3 / ink #212121 / muted #666
   Fonts: DM Sans (headings) / Inter (body) */

:root{
  --teal:#1F3A3D;
  --teal-dark:#172C2E;
  --gold:#D4A373;
  --stone:#F7F6F3;
  --white:#FFFFFF;
  --ink:#212121;
  --muted:#666666;
  --hairline:#E5E5E5;
  --nav-h:84px; /* fallback; main.js sets the real measured value */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
html.snap-scroll{ scroll-snap-type:y mandatory; }
body{
  margin:0;
  background:var(--teal-dark);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
a{ color:var(--teal); }
a:hover{ color:var(--gold); }
img{ max-width:100%; display:block; }
.container{ max-width:1320px; margin:0 auto; padding:0 48px; }
h1,h2,h3{ font-family:'DM Sans',sans-serif; font-weight:400; margin:0; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:200;
  background:var(--teal);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 48px; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 28px -18px rgba(23,44,46,0.5);
}
.nav.nav--plain{ background:var(--teal); border-bottom:1px solid rgba(255,255,255,0.1); box-shadow:0 8px 28px -18px rgba(23,44,46,0.5); }
.nav__logo{ font-family:'DM Sans',sans-serif; font-size:20px; letter-spacing:0.02em; color:var(--white); font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.nav__logo-mark{ width:104px; height:104px; object-fit:contain; border-radius:50%; margin:-28px 0; }
.nav__links{ display:flex; gap:32px; align-items:center; font-size:15px; flex-wrap:wrap; }
.nav__links a{ text-decoration:none; color:var(--white); }
.nav__links a.is-active{ color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:2px; }
.nav__cta{ padding:14px 26px; border-radius:999px; font-size:14px; text-decoration:none; white-space:nowrap; }
.nav__toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav__toggle span{ display:block; width:24px; height:2px; background:var(--white); margin:5px 0; }
.nav__social{ display:flex; gap:10px; align-items:center; }
.nav__social a{ width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.85); transition:background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.nav__social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--teal); transform:scale(1.35) rotate(-18deg) translateY(-3px); }
.nav__social a:active{ transform:scale(0.95) rotate(0deg); }
.nav__social a svg{ transition:transform 0.35s ease; }
.nav__social a:hover svg{ transform:scale(1.15); }

/* ---------- Buttons ---------- */
.btn{ display:inline-block; padding:16px 30px; border-radius:999px; font-size:15px; text-decoration:none; cursor:pointer; border:none; font-family:'Inter',sans-serif; white-space:nowrap; flex-shrink:0; }
.btn-fill-white{ background:var(--white); color:var(--teal); }
.btn-fill-white:hover{ color:var(--teal); background:#f0eee9; }
.btn-fill-dark{ background:var(--teal); color:var(--white); }
.btn-fill-dark:hover{ color:var(--white); background:#284d51; }
.btn-outline-dark{ background:transparent; color:var(--teal); border:1px solid var(--teal); }
.btn-outline-dark:hover{ color:var(--gold); border-color:var(--gold); }
.btn-fill-gold{ background:var(--gold); color:var(--teal); }
.btn-fill-gold:hover{ color:var(--teal); background:#e0b587; }
.link-underline{ text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---------- Book Consultation CTA — shared "glass" treatment across every
   instance of the button (nav pill, section CTAs, modal/form submit) so it
   reads as one consistent, standout call-to-action wherever it appears.
   Package-tier buttons (Book Silver/Gold/Platinum) intentionally keep their
   own colours and are NOT part of this convention. ---------- */
.btn-glass{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg, rgba(212,163,115,0.32) 0%, rgba(212,163,115,0.16) 100%);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1.5px solid rgba(212,163,115,0.8);
  color:var(--white);
  box-shadow:0 8px 24px -10px rgba(212,163,115,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  transition:background 0.25s ease, transform 0.15s ease;
  animation:btn-glass-glow 3.2s ease-in-out infinite;
}
.btn-glass:hover{
  background:linear-gradient(135deg, rgba(212,163,115,0.46) 0%, rgba(212,163,115,0.24) 100%);
  color:var(--white); transform:translateY(-1px);
}
@keyframes btn-glass-glow{
  0%, 100%{ box-shadow:0 8px 24px -10px rgba(212,163,115,0.5), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 rgba(212,163,115,0); }
  50%{ box-shadow:0 8px 28px -8px rgba(212,163,115,0.75), inset 0 1px 0 rgba(255,255,255,0.45), 0 0 18px rgba(212,163,115,0.55); }
}
.btn-glass::before{
  content:''; position:absolute; top:0; left:0; width:45%; height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
  transform:translateX(-220%) skewX(-20deg);
  animation:btn-glass-shine 20s ease-in-out infinite;
  pointer-events:none;
}
.nav__cta.btn-glass::before{ animation:btn-glass-shine 6s ease-in-out infinite; }
.btn-glass:disabled{ opacity:0.5; cursor:not-allowed; animation-play-state:paused; box-shadow:0 8px 24px -10px rgba(212,163,115,0.5), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-glass:disabled::before{ animation-play-state:paused; opacity:0; }
@keyframes btn-glass-shine{
  0%{ transform:translateX(-220%) skewX(-20deg); }
  7%{ transform:translateX(320%) skewX(-20deg); }
  100%{ transform:translateX(320%) skewX(-20deg); }
}
@media (prefers-reduced-motion:reduce){
  .btn-glass::before{ animation:none; display:none; }
  .btn-glass{ animation:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:calc(100vh - var(--nav-h)); display:flex; align-items:flex-start; padding:56px 48px 90px; overflow:hidden; scroll-snap-align:start; }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 65%; z-index:0; }
.hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(23,44,46,0.82) 0%, rgba(23,44,46,0.55) 45%, rgba(23,44,46,0.18) 80%); }
.hero__inner{ position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.hero__content{ max-width:720px; }
.eyebrow{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:20px; }
.hero h1{ font-size:clamp(48px,7vw,88px); line-height:1.02; letter-spacing:-0.04em; color:var(--white); margin:0 0 28px; }
.hero h1 .accent{ color:var(--gold); font-weight:500; }
.lhr-letter{ display:inline-block; transition:opacity 0.22s ease, transform 0.22s ease, color 0.15s ease, text-shadow 0.15s ease; }
.lhr-letter.lhr-hit{ color:var(--gold); text-shadow:0 0 14px rgba(212,163,115,0.95), 0 0 28px rgba(212,163,115,0.5); }
.lhr-letter.lhr-zap{ opacity:0; transform:scaleY(0.15) translateY(4px); }
.hero p{ font-size:18px; line-height:1.6; color:rgba(255,255,255,0.85); max-width:480px; margin:0; }

/* Floating trust strip */
.trust-float{ position:absolute; z-index:3; left:48px; right:48px; bottom:44px; perspective:900px; }
.trust-pill{ max-width:1320px; margin:0 auto; border-radius:999px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.05) 100%); backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%); border:1px solid rgba(255,255,255,0.28); box-shadow:0 26px 54px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -14px 26px -14px rgba(0,0,0,0.32); transform:rotateX(4deg); }
.trust-viewport{ position:relative; padding:22px 0; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); overflow:hidden; }
.trust-track{ display:flex; width:max-content; animation:trust-marquee 30s linear infinite; }
.trust-item{ display:flex; align-items:center; flex-shrink:0; }
.trust-item span.txt{ font-size:13px; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; padding:0 30px; font-weight:500; color:rgba(255,255,255,0.72); text-shadow:0 1px 2px rgba(0,0,0,0.35); opacity:0.78; transition:color 0.55s ease, letter-spacing 0.7s cubic-bezier(0.22,0.75,0.25,1), text-shadow 0.55s ease, opacity 0.55s ease; }
.trust-item span.dot{ width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex-shrink:0; transition:width 0.55s ease, height 0.55s ease, box-shadow 0.55s ease; }
.trust-item.is-active span.txt{ color:#F0D8B8; letter-spacing:0.14em; text-shadow:0 0 18px rgba(212,163,115,0.85); opacity:1; }
.trust-item.is-active span.dot{ width:7px; height:7px; box-shadow:0 0 14px rgba(212,163,115,0.95); }
@keyframes trust-marquee{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* ---------- At a glance ---------- */
.glance{ position:relative; padding:clamp(36px,6vh,70px) 48px; overflow:hidden; }
.glance--full{ min-height:100vh; display:flex; align-items:center; scroll-snap-align:start; }
.glance__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.glance__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(23,44,46,0.88) 0%, rgba(23,44,46,0.6) 55%, rgba(23,44,46,0.35) 100%); }
.glance__inner{ position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.glance__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:clamp(20px,4vh,44px); }
.glance__head h2{ font-size:clamp(28px,4vw,40px); color:var(--white); letter-spacing:-0.02em; }
.glance__counter{ font-size:14px; color:rgba(255,255,255,0.5); }
.glance__lede{ font-size:17px; line-height:1.6; color:rgba(255,255,255,0.75); max-width:640px; margin:-24px 0 clamp(16px,3vh,32px); }
.glance__row{ display:flex; gap:22px; flex-wrap:wrap; }
.glance-card{ position:relative; flex:1 1 0; min-width:150px; cursor:pointer; }
.glance-card__inner{ position:relative; min-height:150px; border-radius:20px; padding:26px 24px; display:flex; flex-direction:column; background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.1); }
.glance-card__num{ font-family:'DM Sans',sans-serif; font-size:13px; letter-spacing:0.16em; color:rgba(255,255,255,0.3); margin-bottom:auto; }
.glance-card__label{ font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.35; color:var(--white); }
.glance-card__value{ font-size:14px; line-height:1.5; color:rgba(255,255,255,0.7); margin-top:10px; }
.glance__dots{ display:flex; gap:8px; margin-top:34px; }
.glance__dots span{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,0.22); }

/* ---------- "At a glance" light variant (no background photo) — used for
   the homepage Treatments section; the FAQ page's version stays the
   original dark-photo treatment. ---------- */
.glance--light{ background:var(--stone); }
/* Section watermark convention: any large faint background text (this one,
   .pcos__watermark, .site-footer__watermark) must share this exact
   font-family/weight/size (DM Sans 500, clamp(80px,13vw,160px)) so they
   read as one consistent decorative treatment across the page — only the
   color/opacity should differ between light and dark section backgrounds. */
.glance__watermark{ position:absolute; top:20px; left:0; right:0; font-family:'DM Sans',sans-serif; font-weight:500; font-size:clamp(80px,13vw,160px); color:rgba(31,58,61,0.028); white-space:nowrap; line-height:1; z-index:0; padding-left:48px; padding-right:48px; overflow:hidden; text-overflow:clip; }
.glance--light .glance__inner{ position:relative; z-index:1; }
.glance--light .glance__head h2{ color:var(--teal); }
.glance--light .glance__counter{ color:var(--muted); }
.glance--light .glance__lede{ color:var(--muted); }
.glance--light .glance-card__label{ color:var(--teal); font-size:16px; }
.glance--light .glance-card__value{ color:var(--muted); max-height:none; opacity:1; }
.glance--light .glance__dots span{ background:rgba(31,58,61,0.15); }
.glance--light .glance__inner{ margin-top:-48px; }
.glance--light .glance__row{ display:grid; grid-template-columns:repeat(5, 1fr); gap:24px; }
.glance--light .glance-card{ min-width:0; }
.glance--light .glance-card__inner{ min-height:190px; padding:clamp(18px,3vh,32px) 24px; }
.glance--light .glance-card__num{ font-size:14px; }
.glance--light .glance-card__label{ font-size:18px; margin-bottom:2px; }
.glance--light .glance-card__value{ font-size:clamp(13px,1.7vh,15px); line-height:1.4; }

/* ---------- Treatments (split layout: title list left, copy + detail right) ---------- */
.glance__inner--split{ display:grid; grid-template-columns:0.9fr 1fr; gap:64px; align-items:start; }
.glance__list{ display:flex; flex-direction:column; gap:0; border-top:1px solid rgba(31,58,61,0.12); }
.glance__list .glance-card{ border-bottom:1px solid rgba(31,58,61,0.12); }
.glance-card__title{ width:100%; display:flex; align-items:center; gap:18px; background:none; border:none; padding:20px 4px; cursor:pointer; text-align:left; font-family:inherit; }
.glance-card__title .glance-card__num{ font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.14em; color:rgba(31,58,61,0.35); }
.glance-card__title .glance-card__label{ flex:1; font-family:'DM Sans',sans-serif; font-size:clamp(18px,2vw,22px); color:var(--teal); }
.glance-card__title .glance-card__chevron{ font-size:22px; line-height:1; color:var(--gold); transition:transform 0.25s ease; }
.glance-card.is-open .glance-card__title .glance-card__chevron{ transform:rotate(45deg); }
.glance-card.is-open .glance-card__title .glance-card__label{ color:var(--gold); }
.glance__list .glance-card__value{ display:none; }
.glance__text{ position:relative; margin-top:clamp(-40px,-4vw,-24px); }
.glance__text .eyebrow{ margin-bottom:12px; }
.glance__text .glance__lede{ margin-top:0; }
.glance__detail{ margin-top:clamp(16px,3vh,28px); min-height:clamp(160px,20vh,210px); }
.glance__detail .glance__hint{ font-size:14px; color:rgba(31,58,61,0.4); font-style:italic; }
.glance__detail-card{
  background:linear-gradient(160deg,rgba(23,44,46,0.7) 0%,rgba(23,44,46,0.7) 100%);
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(212,163,115,0.6); border-radius:18px; padding:24px 28px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,163,115,0.15), 0 0 40px -12px rgba(212,163,115,0.45);
  animation:glance-detail-in 0.3s ease;
}
@keyframes glance-detail-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.glance__detail-card .glance-card__num{ font-family:'DM Sans',sans-serif; font-size:13px; letter-spacing:0.16em; color:rgba(255,255,255,0.5); }
.glance__detail-card__label{ font-family:'DM Sans',sans-serif; font-size:20px; color:var(--white); margin:6px 0 10px; }
.glance__detail-card__value{ font-size:15px; line-height:1.55; color:rgba(255,255,255,0.7); }
.glance__treatment-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:0; transition:opacity 0.6s ease; }
.glance__treatment-bg.is-visible{ opacity:1; }
.glance__treatment-scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(23,44,46,0.92) 0%, rgba(23,44,46,0.78) 45%, rgba(23,44,46,0.4) 80%); opacity:0; transition:opacity 0.6s ease; pointer-events:none; }
.glance__treatment-scrim.is-visible{ opacity:1; }
.glance--light.has-treatment-bg .glance__list,
.glance--light.has-treatment-bg .glance__list .glance-card{ border-color:rgba(255,255,255,0.25); }
.glance--light.has-treatment-bg .glance-card__title .glance-card__num{ color:rgba(255,255,255,0.5); }
.glance--light.has-treatment-bg .glance-card__title .glance-card__label{ color:var(--white); }
.glance--light.has-treatment-bg .glance__text h2{ color:var(--white); }
.glance--light.has-treatment-bg .glance__lede{ color:rgba(255,255,255,0.85); }
.glance--light.has-treatment-bg .glance__hint{ color:rgba(255,255,255,0.6); }
.glance--light.has-treatment-bg .glance__watermark{ color:rgba(255,255,255,0.09); }
@media (max-width:900px){
  .glance__inner--split{ grid-template-columns:1fr; gap:32px; }
}

/* ---------- Results ---------- */
.results{ max-width:1320px; margin:0 auto; padding:100px 48px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; scroll-snap-align:start; }
.results h2{ font-size:clamp(32px,4vw,44px); color:var(--teal); margin:0 0 48px; }
.ba-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:40px; margin-bottom:40px; }
.ba-pair{ display:flex; flex-direction:column; gap:10px; }
.ba-pair__photos{ display:flex; gap:16px; }
.ba-pair__photos figure{ flex:1; min-width:0; margin:0; }
.ba-pair img{ width:100%; height:280px; object-fit:cover; border-radius:16px; margin-bottom:10px; background:var(--stone); }
.ba-pair figcaption{ text-align:center; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }

/* ---------- PCOS ---------- */
.pcos{ position:relative; background:var(--teal); padding:clamp(50px,8vh,100px) 48px; min-height:100vh; display:flex; align-items:center; overflow:hidden; scroll-snap-align:start; }
/* Matches .glance__watermark sizing convention — see note there. */
.pcos__watermark{ position:absolute; top:36px; left:0; right:0; font-family:'DM Sans',sans-serif; font-weight:500; font-size:clamp(80px,13vw,160px); letter-spacing:0.01em; color:rgba(255,255,255,0.05); white-space:nowrap; line-height:1; z-index:0; text-align:right; padding-right:48px; }
.split{ position:relative; z-index:1; max-width:1320px; margin:0 auto; display:flex; gap:64px; align-items:center; flex-wrap:wrap; width:100%; }
.split > div{ flex:1 1 420px; min-width:300px; }
.pcos h2{ font-size:clamp(30px,5vw,56px); color:var(--white); line-height:1.1; margin:0 0 clamp(12px,2.5vh,24px); }
.pcos p{ font-size:16px; line-height:1.5; color:rgba(255,255,255,0.75); max-width:460px; margin:0 0 clamp(16px,3vh,32px); }
.frame-offset{ position:relative; padding:14px; border:2px solid var(--gold); border-radius:26px; }
.frame-offset img{ display:block; width:100%; height:clamp(300px,46vh,440px); object-fit:cover; border-radius:18px; }
@media (min-width:900px){
  .frame-offset{ margin-left:-60px; }
}

/* ---------- Men's ---------- */
.mens{ position:relative; min-height:100vh; display:flex; align-items:center; padding:clamp(50px,8vh,100px) 48px; overflow:hidden; scroll-snap-align:start; }
.mens__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 80%; z-index:0; }
.mens__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(23,44,46,0.85) 0%, rgba(23,44,46,0.55) 50%, rgba(23,44,46,0.2) 85%); }
.mens__inner{ position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.mens__content{ max-width:520px; }
.mens h2{ font-size:clamp(32px,5vw,56px); color:var(--white); line-height:1.1; margin:0 0 clamp(10px,2vh,20px); }
.mens h2 .accent{ color:var(--gold); font-weight:500; }
.pcos h2 .accent{ color:var(--gold); font-weight:500; }
.mens__lede{ font-size:17px; line-height:1.5; color:rgba(255,255,255,0.8); margin:0 0 clamp(10px,2vh,18px); }
.mens__content p{ font-size:14px; line-height:1.5; color:rgba(255,255,255,0.7); margin:0 0 clamp(10px,2vh,18px); }
.mens__areas{ font-size:14px; letter-spacing:0.03em; color:rgba(255,255,255,0.9); margin:0 0 clamp(10px,2vh,18px); }

.price-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--hairline); }
.price-row span:first-child{ font-size:16px; color:var(--ink); }
.price-row span:last-child{ font-family:'DM Sans',sans-serif; font-size:18px; color:var(--teal); }

/* ---------- Men's modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:flex-end; padding:24px 64px;
  opacity:0; transition:opacity 0.35s ease;
}
.modal-overlay.is-open{ display:flex; opacity:1; }
.modal{
  background:linear-gradient(160deg,rgba(23,44,46,0.7) 0%,rgba(23,44,46,0.7) 100%);
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-radius:22px; max-width:480px; width:100%; max-height:85vh; overflow-y:auto; padding:44px; position:relative; text-align:left;
  border:1px solid rgba(212,163,115,0.6);
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,163,115,0.15), 0 0 70px -12px rgba(212,163,115,0.55);
  margin-right:9vw; margin-top:9vh;
  transform:translateY(18px) scale(0.97); opacity:0; transition:transform 0.35s cubic-bezier(0.2,0.7,0.3,1), opacity 0.35s ease;
}
.modal-overlay.is-open .modal{ transform:translateY(0) scale(1); opacity:1; }
#pcosOverlay{ justify-content:center; }
#pcosOverlay .modal{ margin:0; }
@media (min-width:900px){
  #pcosOverlay .modal{ max-width:720px; padding:56px 64px; }
}
@media (max-width:700px){
  .modal{ margin-right:0; margin-top:0; }
}
.modal__close{ position:absolute; top:24px; right:24px; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--white); font-size:18px; background:rgba(23,44,46,0.3); transition:border-color 0.25s ease, color 0.25s ease; }
.modal__close:hover{ border-color:var(--gold); color:var(--gold); }
.modal h3{ font-size:28px; color:var(--white); margin:0 0 8px; }
.modal > p{ font-size:14px; color:rgba(255,255,255,0.65); margin:0 0 28px; }
.modal .price-row{ border-bottom:1px solid rgba(255,255,255,0.15); }
.modal .price-row span:first-child{ color:rgba(255,255,255,0.85); }
.modal .price-row span:last-child{ color:var(--gold); }
.modal .btn{ display:block; text-align:center; margin-top:32px; }
.modal__note{ margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.15); }
.modal__note h4{ font-family:'DM Sans',sans-serif; font-weight:400; font-size:17px; color:var(--white); margin:0 0 12px; }
.modal__note p{ font-size:13.5px; line-height:1.65; color:rgba(255,255,255,0.65); margin:0 0 12px; }
.modal__note p:last-child{ margin-bottom:0; }
.modal__list{ margin:0 0 16px; padding-left:20px; }
.modal__list li{ font-size:13.5px; line-height:1.65; color:rgba(255,255,255,0.65); margin-bottom:8px; }
.modal__list li:last-child{ margin-bottom:0; }
body.modal-open{ overflow:hidden; }
@media (max-width:700px){
  .modal-overlay{ justify-content:center; padding:24px; }
}

.price-line{ display:flex; align-items:baseline; gap:8px; }
.price-line .amount{ font-family:'DM Sans',sans-serif; font-size:40px; color:var(--teal); }
.price-line .unit{ font-size:14px; color:var(--muted); }

/* ---------- About ---------- */
.about{ background:var(--stone); padding:clamp(36px,6vh,70px) 48px; min-height:100vh; display:flex; align-items:center; scroll-snap-align:start; }
.about .split .about-photo{ order:2; }
.about-photo{ position:relative; align-self:flex-start; }
.about-photo img{ display:block; width:100%; height:clamp(320px,48vh,460px); object-fit:cover; border-radius:22px; box-shadow:0 30px 60px -20px rgba(31,58,61,0.35), 0 10px 24px -10px rgba(31,58,61,0.25); }
.about h2{ font-size:clamp(28px,4vw,44px); color:var(--teal); line-height:1.15; margin:0 0 clamp(8px,1.6vh,18px); }
.about p{ font-size:14px; line-height:1.5; color:var(--muted); margin:0 0 clamp(6px,1.3vh,14px); }
.about p:last-child{ margin:0; }
.about p a{ color:var(--teal); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:2px; }
.about p a:hover{ color:var(--gold); }
.about__tagline{ color:var(--teal); font-weight:500; font-style:italic; }

/* ---------- FAQ (title-list-left / detail-panel-right, same interaction
   pattern as the homepage Treatments section, kept in the FAQ section's
   own dark teal styling) ---------- */
.faq{ position:relative; background:var(--teal-dark); padding:110px 48px; overflow:hidden; }
.faq__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.faq__scrim{ position:absolute; inset:0; z-index:0; background:linear-gradient(100deg, rgba(23,44,46,0.94) 0%, rgba(23,44,46,0.86) 45%, rgba(23,44,46,0.7) 100%); }
.faq__inner{ position:relative; z-index:1; max-width:1320px; margin:0 auto; }
.faq__badge{ display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,0.15); border-radius:999px; padding:9px 18px; margin-bottom:28px; }
.faq__badge .dot{ width:7px; height:7px; border-radius:999px; background:var(--gold); animation:faq-pulse 2.2s ease-out infinite; }
.faq__badge span.txt{ font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:rgba(255,255,255,0.65); }
@keyframes faq-pulse{ 0%{ box-shadow:0 0 0 0 rgba(212,163,115,0.5); } 100%{ box-shadow:0 0 0 8px rgba(212,163,115,0); } }
.faq h2{ font-size:clamp(32px,4vw,48px); color:var(--white); margin:0 0 16px; }
.faq__lede > p{ font-size:16px; line-height:1.6; color:rgba(255,255,255,0.6); margin:0 0 8px; max-width:480px; }
.faq__split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; margin-bottom:64px; }
.faq__lede{ position:sticky; top:calc(var(--nav-h, 90px) + 32px); align-self:start; }
.faq__cards{ display:flex; flex-direction:column; }
.faq-list{ display:flex; flex-direction:column; gap:0; margin-top:12px; border-top:1px solid rgba(255,255,255,0.15); max-height:56vh; overflow-y:auto; }
.faq-list-item{ border-bottom:1px solid rgba(255,255,255,0.15); }
.faq-list-item__title{ width:100%; display:flex; align-items:center; gap:18px; background:none; border:none; padding:16px 4px; cursor:pointer; text-align:left; font-family:inherit; }
.faq-list-item__label{ flex:1; font-family:'DM Sans',sans-serif; font-size:15px; color:rgba(255,255,255,0.85); }
.faq-list-item__chevron{ font-size:20px; line-height:1; color:var(--gold); transition:transform 0.25s ease; flex-shrink:0; }
.faq-list-item.is-open .faq-list-item__chevron{ transform:rotate(45deg); }
.faq-list-item.is-open .faq-list-item__label{ color:var(--gold); }
.faq-detail{
  background:linear-gradient(160deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.03) 100%);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(212,163,115,0.4); border-radius:18px; padding:34px 36px; min-height:220px;
}
.faq-detail__hint{ font-size:14px; color:rgba(255,255,255,0.5); font-style:italic; margin:0; }
.faq-detail h3{ font-family:'DM Sans',sans-serif; font-weight:400; font-size:22px; color:var(--white); margin:0 0 16px; }
.faq-detail p{ font-size:15px; line-height:1.7; color:rgba(255,255,255,0.75); margin:0; animation:glance-detail-in 0.3s ease; }
.faq-detail p + p{ margin-top:14px; }
.faq-detail ul{ margin:14px 0 0; padding-left:20px; animation:glance-detail-in 0.3s ease; }
.faq-detail li{ font-size:15px; line-height:1.65; color:rgba(255,255,255,0.75); margin-bottom:10px; }
.faq-detail li:last-child{ margin-bottom:0; }
.faq-detail li strong{ color:var(--white); }
.faq__unsuited{ border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:28px 32px; margin-bottom:24px; background:rgba(255,255,255,0.03); }
.faq__unsuited h3{ font-family:'DM Sans',sans-serif; font-weight:400; font-size:22px; color:var(--gold); margin:0 0 14px; }
.faq__unsuited p{ font-size:15px; line-height:1.7; color:rgba(255,255,255,0.65); margin:0 0 12px; }
.faq__unsuited p:last-child{ margin-bottom:0; }
.faq__inline-link{
  background:none; border:none; padding:0; margin:0; cursor:pointer; font-family:inherit; font-size:inherit; line-height:inherit;
  color:var(--gold); text-decoration:underline; text-underline-offset:2px;
}
.faq__inline-link:hover{ color:var(--white); }

/* ---------- Fitzpatrick scale popup (FAQ page) ---------- */
.fitzpatrick-overlay{
  position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 120% at 50% 20%, rgba(31,58,61,0.6) 0%, rgba(23,44,46,0.78) 100%);
  backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%);
  opacity:0; transition:opacity 0.35s ease;
}
.fitzpatrick-overlay.is-open{ display:flex; opacity:1; }
.fitzpatrick-modal{
  background:linear-gradient(160deg,rgba(23,44,46,0.92) 0%,rgba(23,44,46,0.94) 100%);
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-radius:22px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:44px; position:relative; text-align:left;
  border:1px solid rgba(212,163,115,0.6);
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,163,115,0.15), 0 0 70px -12px rgba(212,163,115,0.55);
  transform:translateY(18px) scale(0.97); opacity:0; transition:transform 0.35s cubic-bezier(0.2,0.7,0.3,1), opacity 0.35s ease;
}
.fitzpatrick-overlay.is-open .fitzpatrick-modal{ transform:translateY(0) scale(1); opacity:1; }
.fitzpatrick-modal__close{ position:absolute; top:24px; right:24px; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--white); font-size:18px; background:rgba(23,44,46,0.3); transition:border-color 0.25s ease, color 0.25s ease; }
.fitzpatrick-modal__close:hover{ border-color:var(--gold); color:var(--gold); }
.fitzpatrick-modal h3{ font-size:26px; color:var(--white); margin:6px 0 12px; }
.fitzpatrick-modal__photo{ display:none; }
.fitzpatrick-modal__photo:has(img){ display:block; border-radius:14px; overflow:hidden; margin:0 0 24px; }
.fitzpatrick-modal__photo img{ display:block; width:100%; }
.fitzpatrick-modal__list{ display:flex; flex-direction:column; gap:10px; }
.fitzpatrick-treated-group{
  display:flex; flex-direction:column; gap:0; border-radius:14px; overflow:hidden;
  border:2px solid var(--gold); box-shadow:0 0 0 3px rgba(212,163,115,0.18);
}
.fitzpatrick-treated-group .fitzpatrick-row + .fitzpatrick-row{ border-top:1px solid rgba(255,255,255,0.25); }
.fitzpatrick-row{ display:flex; align-items:stretch; border-radius:14px; overflow:hidden; }
.fitzpatrick-treated-group .fitzpatrick-row{ border-radius:0; }
.fitzpatrick-row__type{
  flex:0 0 84px; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:13px; letter-spacing:0.04em; padding:14px 8px;
}
.fitzpatrick-row__body{ flex:1; padding:14px 18px; }
.fitzpatrick-row__body h4{ font-family:'DM Sans',sans-serif; font-weight:500; font-size:15px; margin:0 0 3px; }
.fitzpatrick-row__body p{ font-size:12.5px; line-height:1.45; margin:0; opacity:0.85; }
/* Skin-tone gradient, pale to deep — matches the reference Fitzpatrick chart's own colour coding, independent of brand palette */
.fitzpatrick-row--1{ background:#F3DCD3; }
.fitzpatrick-row--2{ background:#E8C3A9; }
.fitzpatrick-row--3{ background:#C99A72; }
.fitzpatrick-row--4{ background:#A9764A; }
.fitzpatrick-row--5{ background:#6B3A24; }
.fitzpatrick-row--6{ background:#2E1810; }
.fitzpatrick-row--1 .fitzpatrick-row__type, .fitzpatrick-row--1 .fitzpatrick-row__body,
.fitzpatrick-row--2 .fitzpatrick-row__type, .fitzpatrick-row--2 .fitzpatrick-row__body,
.fitzpatrick-row--3 .fitzpatrick-row__type, .fitzpatrick-row--3 .fitzpatrick-row__body{ color:#2A1C14; }
.fitzpatrick-row--4 .fitzpatrick-row__type, .fitzpatrick-row--4 .fitzpatrick-row__body,
.fitzpatrick-row--5 .fitzpatrick-row__type, .fitzpatrick-row--5 .fitzpatrick-row__body,
.fitzpatrick-row--6 .fitzpatrick-row__type, .fitzpatrick-row--6 .fitzpatrick-row__body{ color:rgba(255,255,255,0.92); }
.fitzpatrick-row--1 .fitzpatrick-row__type{ border-right:1px solid rgba(42,28,20,0.12); }
.fitzpatrick-row--2 .fitzpatrick-row__type{ border-right:1px solid rgba(42,28,20,0.14); }
.fitzpatrick-row--3 .fitzpatrick-row__type{ border-right:1px solid rgba(42,28,20,0.16); }
.fitzpatrick-row--4 .fitzpatrick-row__type{ border-right:1px solid rgba(255,255,255,0.16); }
.fitzpatrick-row--5 .fitzpatrick-row__type{ border-right:1px solid rgba(255,255,255,0.14); }
.fitzpatrick-row--6 .fitzpatrick-row__type{ border-right:1px solid rgba(255,255,255,0.12); }
.fitzpatrick-modal__note{ font-size:14px; line-height:1.6; color:var(--gold); font-weight:500; margin:0 0 20px; }
@media (max-width:700px){
  .fitzpatrick-overlay{ padding:16px; }
  .fitzpatrick-modal{ padding:32px 24px; max-height:88vh; }
}
@media (max-width:900px){
  .faq__split{ grid-template-columns:1fr; gap:32px; }
  .faq__lede{ position:static; }
  .faq-list{ max-height:none; }
}

/* ---------- Reviews ---------- */
.reviews{ position:relative; background:var(--teal); padding:85px 48px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; scroll-snap-align:start; }
.reviews__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.reviews__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(23,44,46,0.85) 0%, rgba(23,44,46,0.55) 50%, rgba(23,44,46,0.2) 85%); }
.reviews__inner{ position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.reviews h2{ font-size:clamp(32px,4vw,48px); color:var(--white); margin:0 0 16px; }
.reviews > .reviews__inner > p{ font-size:16px; color:rgba(255,255,255,0.65); margin:0 0 40px; max-width:520px; }
.review-note{ font-size:13px; color:rgba(255,255,255,0.5); margin-top:28px; text-align:center; }
/* Overrides via ID: the generic ".reviews > .reviews__inner > p" rule above has higher
   specificity than the ".review-note" class alone and was pinning this to a 520px-wide,
   left-anchored box (max-width + zero side margins) — so the text inside centered, but
   the box itself never did. The ID selector wins over that class combinator. */
#reviewNote{ max-width:none; margin:28px auto 0; text-align:center; }

/* Review carousel — same card visual language as the "at a glance" cards on the FAQ
   page (rounded, gold-highlighted), shown strictly one at a time: only the active
   review is in the DOM's visible flow (display:none on the rest, not just faded/scaled),
   so nothing peeks in from behind. Every card is the same fixed size regardless of
   review length, so switching between reviews never jumps/reflows the page — a review
   longer than the fixed height scrolls internally rather than stretching the card.
   Cards are rendered from a small data array in index.html (or live from Google
   Reviews) so this scales to any review count. */
.reviews__body{ display:flex; gap:40px; align-items:flex-start; justify-content:center; }
.review-carousel{ flex:0 0 auto; width:720px; max-width:100%; }
.review-carousel__row{ position:relative; }
.review-carousel-card{ display:none; cursor:default; }
.review-carousel-card.is-active{ display:block; animation:review-card-in 0.4s ease; }
@keyframes review-card-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.review-carousel-card__inner{ height:300px; border-radius:20px; padding:30px 28px; display:flex; flex-direction:column; background:linear-gradient(160deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.05) 100%); border:1px solid rgba(212,163,115,0.6); box-shadow:0 26px 60px -18px rgba(0,0,0,0.5); }
.review-carousel-card__num{ font-family:'DM Sans',sans-serif; font-size:13px; letter-spacing:0.16em; color:var(--gold); margin-bottom:18px; flex-shrink:0; }
.review-carousel-card__stars{ color:var(--gold); font-size:15px; letter-spacing:0.08em; margin-bottom:16px; flex-shrink:0; }
.review-carousel-card__quote{ font-size:16px; line-height:1.55; color:rgba(255,255,255,0.85); font-style:italic; margin:0 0 20px; overflow-y:auto; padding-right:6px; }
.review-carousel-card__name{ font-size:13px; letter-spacing:0.04em; color:var(--gold); flex-shrink:0; }
.review-carousel__dots{ display:flex; gap:8px; margin-top:28px; justify-content:center; }
.review-carousel__dots span{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,0.22); cursor:pointer; transition:all 0.5s ease; }

/* Overall rating badge, sat beside the carousel — real aggregate rating/count from
   Google when configured (see google-reviews.js), otherwise a sensible fallback
   matching the single seeded review. Same glass-card language as the review cards. */
.review-summary{ flex:0 0 200px; height:300px; border-radius:20px; padding:30px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(160deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.05) 100%); border:1px solid rgba(212,163,115,0.6); box-shadow:0 26px 60px -18px rgba(0,0,0,0.5); }
.review-summary__rating{ font-family:'DM Sans',sans-serif; font-size:48px; color:var(--white); line-height:1; margin-bottom:12px; }
.review-summary__stars{ color:var(--gold); font-size:20px; letter-spacing:0.08em; margin-bottom:16px; }
.review-summary__count{ font-size:13px; color:rgba(255,255,255,0.6); line-height:1.5; }

/* Contact form (used inside the booking modal) */
.contact-form{ max-width:none; display:flex; flex-direction:column; gap:10px; }
.contact-form label{ font-size:12px; color:var(--teal); font-weight:500; margin-bottom:4px; display:block; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:10px 14px; border-radius:10px; border:1px solid var(--hairline);
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:var(--white);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color:var(--gold); }
.contact-form textarea{ resize:vertical; min-height:60px; }
/* Honeypot anti-spam field — off-screen (not display:none) so unsophisticated
   bots that skip hidden inputs still fill it in, but no human visitor ever
   sees or tabs into it. */
.hp-field{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }

/* ---------- Booking modal (Free Consultation & Patch Test) ---------- */
.booking-overlay{
  position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 120% at 50% 20%, rgba(31,58,61,0.6) 0%, rgba(23,44,46,0.78) 100%);
  backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%);
  opacity:0; transition:opacity 0.35s ease;
}
.booking-overlay.is-open{ display:flex; opacity:1; }
.booking-modal{
  background:var(--white); border-radius:22px; max-width:960px; width:100%; max-height:94vh; overflow-y:auto; position:relative;
  display:flex; flex-wrap:wrap;
  box-shadow:0 40px 90px -20px rgba(23,44,46,0.55), 0 0 0 1px rgba(212,163,115,0.4), 0 0 60px -10px rgba(212,163,115,0.35);
  transform:translateY(18px) scale(0.97); opacity:0; transition:transform 0.35s cubic-bezier(0.2,0.7,0.3,1), opacity 0.35s ease;
}
.booking-overlay.is-open .booking-modal{ transform:translateY(0) scale(1); opacity:1; }
.booking-modal__close{ position:absolute; top:24px; left:24px; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,0.5); background:rgba(23,44,46,0.35); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--white); font-size:18px; z-index:2; transition:border-color 0.25s ease; }
.booking-modal__close:hover{ border-color:var(--gold); }
.booking-modal__photo{ position:relative; flex:1 1 380px; min-width:280px; min-height:220px; background-size:cover; background-position:center; display:flex; align-items:flex-end; justify-content:center; padding:36px; border-radius:22px 0 0 22px; overflow:hidden; }
.booking-modal__photo::before{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(23,44,46,0.82) 0%, rgba(23,44,46,0.55) 45%, rgba(23,44,46,0.18) 80%); }
.booking-modal__photo-copy{ position:relative; z-index:1; text-align:center; }
.booking-modal__photo-copy h3{ font-family:'DM Sans',sans-serif; font-weight:400; font-size:clamp(22px,2.6vw,28px); color:var(--white); line-height:1.1; margin:0 0 12px; }
.booking-modal__photo-copy p{ font-size:13px; line-height:1.5; color:rgba(255,255,255,0.85); margin:0; }
.booking-modal__form{ flex:1 1 380px; min-width:280px; padding:32px 44px; }
.booking-modal__form .contact-form button[type="submit"]{ text-align:center; border:none; cursor:pointer; font-family:inherit; font-size:15px; padding:16px 28px; }
.booking-modal__form .contact-form button[type="submit"].btn-glass{
  background:rgba(23,44,46,0.35); border:1px solid rgba(23,44,46,0.15); color:var(--white);
  animation:none; box-shadow:none;
}
.booking-modal__form .contact-form button[type="submit"].btn-glass::before{ display:none; }
.booking-modal__form .contact-form button[type="submit"].btn-glass:hover{ background:rgba(23,44,46,0.48); color:var(--white); }
.booking-modal__form .contact-form button[type="submit"][disabled]{ cursor:not-allowed; }
.booking-modal__form .contact-form button[type="submit"].btn-glass:disabled{ opacity:0.6; box-shadow:none; }
.booking-modal__note{ font-size:12px; color:#999999; margin:4px 0 0; }
.booking-modal__form .form-success, .booking-modal__form .form-error{ display:none; border-radius:10px; padding:16px; font-size:14px; margin-top:4px; }
.booking-modal__form .form-success{ background:rgba(212,163,115,0.15); border:1px solid var(--gold); color:var(--teal); }
.booking-modal__form .form-error{ background:rgba(200,60,60,0.08); border:1px solid #c83c3c; color:#8f2b2b; }
.booking-modal__form .form-success.is-visible, .booking-modal__form .form-error.is-visible{ display:block; }
@media (max-width:700px){
  .booking-modal__photo{ border-radius:22px 22px 0 0; flex-basis:100%; min-height:160px; }
}

/* ---------- Footer ---------- */
.site-footer{ position:relative; background:var(--stone); padding:200px 48px 110px; overflow:hidden; scroll-snap-align:start; }
/* Matches .glance__watermark sizing convention — see note there. */
.site-footer__watermark{ position:absolute; top:36px; left:0; right:0; font-family:'DM Sans',sans-serif; font-weight:500; font-size:clamp(80px,13vw,160px); letter-spacing:0.01em; color:rgba(31,58,61,0.028); white-space:nowrap; line-height:1; z-index:0; padding-left:48px; }
.site-footer__inner, .site-footer__bottom{ position:relative; z-index:1; }
.site-footer__inner{ max-width:1320px; margin:0 auto 56px; }
.footer-row{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.footer-brand{ font-family:'DM Sans',sans-serif; font-size:19px; color:var(--teal); margin-bottom:24px; }
.footer-info .eyebrow{ font-size:11px; margin-bottom:8px; }
.footer-info p{ font-size:14px; line-height:1.6; color:var(--muted); max-width:320px; margin:0 0 24px; }
.footer-info a{ font-size:14px; color:var(--ink); text-decoration:none; display:block; margin-bottom:6px; }
.footer-info a:hover{ color:var(--gold); }
.footer-info .footer-note{ font-size:12px; color:rgba(33,33,33,0.45); margin-top:-16px; }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{ width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(31,58,61,0.2); color:var(--teal); transition:background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1); margin:0; }
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--teal); transform:scale(1.35) rotate(-18deg) translateY(-3px); }
.footer-social a:active{ transform:scale(0.95) rotate(0deg); }
.footer-social a svg{ transition:transform 0.35s ease; }
.footer-social a:hover svg{ transform:scale(1.15); }
.footer-map{ border-radius:16px; overflow:hidden; border:1px solid rgba(31,58,61,0.15); }
.footer-map iframe{ display:block; width:100%; height:100%; min-height:340px; }
.site-footer__bottom{ max-width:1320px; margin:0 auto; border-top:1px solid rgba(31,58,61,0.15); padding-top:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
@media (max-width:800px){
  .footer-row{ grid-template-columns:1fr; }
}
.site-footer__bottom p{ font-size:12px; color:rgba(33,33,33,0.55); max-width:600px; margin:0; }
.legal-links{ display:flex; gap:20px; flex-wrap:wrap; }
.legal-links a{ font-size:12px; color:var(--muted); text-decoration:none; }

/* ---------- Prices page: hero + packages ---------- */
.pkg-hero{ position:relative; padding:clamp(48px,10vh,110px) 48px; min-height:100vh; display:flex; align-items:flex-start; scroll-snap-align:start; }
.pkg-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.pkg-hero__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(23,44,46,0.92) 0%, rgba(23,44,46,0.78) 45%, rgba(23,44,46,0.5) 100%); }
.pkg-hero__clip{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.pkg-hero__blob1{ position:absolute; top:-160px; right:-120px; width:520px; height:520px; border-radius:999px; background:radial-gradient(circle,rgba(212,163,115,0.22) 0%,rgba(212,163,115,0) 70%); }
.pkg-hero__blob2{ position:absolute; bottom:-200px; left:-140px; width:520px; height:520px; border-radius:999px; background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0) 70%); }
.pkg-hero__inner{ position:relative; max-width:1320px; margin:0 auto; display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
.pkg-hero__lede{ max-width:520px; margin-bottom:0; position:sticky; top:calc(var(--nav-h, 90px) + 32px); align-self:start; }
.pkg-hero__lede p{ max-width:420px; }
.pkg-hero .kicker{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:18px; }
.pkg-hero h1{ font-size:clamp(34px,4.2vw,52px); line-height:1.05; letter-spacing:-0.03em; color:var(--white); margin:0 0 20px; }
.pkg-hero h1 .accent{ color:var(--gold); font-weight:500; }
.pkg-hero p{ font-size:18px; line-height:1.6; color:rgba(255,255,255,0.8); margin:0 0 16px; }
.pkg-hero__lede p:last-of-type{ margin-bottom:0; }
.pkg-hero p.pkg-hero__tagline{ font-family:'DM Sans',sans-serif; font-weight:500; color:var(--gold); font-size:17px; }
.pkg-grid{ display:grid; grid-template-columns:1fr; gap:28px; perspective:1400px; }

/* ---------- Packages list/detail split (same title-list-left,
   detail-panel-right pattern as the homepage Treatments section) ---------- */
.pkg-hero__cards{ display:flex; flex-direction:column; }
.pkg-list{ display:flex; flex-direction:column; gap:0; margin-top:8px; border-top:1px solid rgba(255,255,255,0.2); }
.pkg-list-item{ border-bottom:1px solid rgba(255,255,255,0.2); }
.pkg-list-item__title{ width:100%; display:flex; align-items:center; gap:18px; background:none; border:none; padding:20px 4px; cursor:pointer; text-align:left; font-family:inherit; }
.pkg-list-item__label{ flex:1; font-family:'DM Sans',sans-serif; font-size:clamp(18px,2vw,22px); color:var(--white); }
.pkg-list-item__price{ font-family:'DM Sans',sans-serif; font-size:16px; color:var(--gold); }
.pkg-list-item__chevron{ font-size:22px; line-height:1; color:var(--gold); transition:transform 0.25s ease; }
.pkg-list-item.is-open .pkg-list-item__chevron{ transform:rotate(45deg); }
.pkg-list-item.is-open .pkg-list-item__label{ color:var(--gold); }
.pkg-detail{ margin-top:clamp(16px,3vh,28px); min-height:300px; }
.pkg-detail .pkg-detail__hint{ font-size:14px; color:rgba(255,255,255,0.55); font-style:italic; }
.pkg-detail .pkg{ animation:glance-detail-in 0.3s ease; }

/* Light ("white style") variant of .pkg-hero — used where a section should
   sit on the site's light --stone background instead of the default dark
   teal glass treatment. */
.pkg-hero--light::before{ content:''; position:absolute; inset:0; z-index:-3; background:var(--stone); }
.pkg-hero--light .pkg-hero__scrim{ background:linear-gradient(100deg, rgba(247,246,243,0.9) 0%, rgba(247,246,243,0.7) 45%, rgba(247,246,243,0.4) 100%); }
.pkg-hero--light .kicker{ color:var(--gold); }
.pkg-hero--light h1{ color:var(--teal); }
.pkg-hero--light p{ color:var(--muted); }
.pkg-hero--light .faq-list{
  border-top-color:rgba(31,58,61,0.15);
  background:rgba(255,255,255,0.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:14px; padding:4px 16px;
}
.pkg-hero--light .faq-list-item{ border-bottom-color:rgba(31,58,61,0.15); }
.pkg-hero--light .faq-list-item__label{ color:var(--ink); }
.pkg-hero--light .faq-list-item.is-open .faq-list-item__label{ color:var(--gold); }
.pkg-hero--light .faq-detail{
  background:var(--white);
  border:1px solid rgba(212,163,115,0.4);
  box-shadow:0 20px 44px -18px rgba(0,0,0,0.12);
}
.pkg-hero--light .faq-detail__hint{ color:var(--muted); }
.pkg-hero--light .faq-detail h3{ color:var(--teal); }
.pkg-hero--light .faq-detail p{ color:var(--ink); }
.pkg-hero--light .faq-detail li{ color:var(--ink); }
.pkg-hero--light .faq-detail li strong{ color:var(--teal); }
@media (max-width:900px){
  .pkg-hero__inner{ grid-template-columns:1fr; gap:32px; }
  .pkg-hero__lede{ max-width:none; }
}
/* Base card now matches the Treatments detail-card "glass" treatment
   (see .glance__detail-card) — dark frosted glass with a gold border —
   for every tier. The tier accent colour (silver/gold/platinum) still
   shows through via the top band and the tick/price colour per tier. */
.pkg{
  position:relative; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,rgba(23,44,46,0.7) 0%,rgba(23,44,46,0.7) 100%);
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(212,163,115,0.6);
  box-shadow:0 20px 44px -18px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,163,115,0.15), 0 0 40px -12px rgba(212,163,115,0.45);
  transition:transform 0.5s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.5s ease;
}
.pkg:hover{ transform:translateY(-14px) rotateX(6deg) rotateY(-5deg) scale(1.025); box-shadow:0 44px 80px -20px rgba(0,0,0,0.55), 0 0 50px -10px rgba(212,163,115,0.55); }
#other .pkg:hover{ transform:none; box-shadow:0 20px 44px -18px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,163,115,0.15), 0 0 40px -12px rgba(212,163,115,0.45); }
.pkg__band{ height:6px; }
.pkg__body{ padding:22px 28px 26px; position:relative; }
.pkg__head{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; padding-right:44px; }
.pkg__tier{ font-family:'DM Sans',sans-serif; font-size:21px; letter-spacing:0.04em; margin-bottom:3px; color:var(--white); }
.pkg__sub{ font-size:12px; color:rgba(255,255,255,0.6); }
.pkg__badge{ display:inline-block; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--teal); background:var(--gold); border-radius:999px; padding:5px 12px; white-space:nowrap; margin-bottom:12px; }
.pkg .price-line{ text-align:right; flex-shrink:0; }
.pkg .price-line .amount{ font-size:28px; color:var(--gold); }
.pkg .price-line .unit{ font-size:12px; color:rgba(255,255,255,0.55); }
.pkg__divider{ height:1px; margin:0 0 16px; background:rgba(255,255,255,0.14); }
.pkg__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.pkg__chips .chip{ font-size:13px; line-height:1.4; color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:999px; padding:6px 13px; }
.pkg__chips .chip--free{ color:var(--gold); background:rgba(212,163,115,0.14); border-color:rgba(212,163,115,0.5); font-weight:500; }
.pkg__note{ font-size:12px; color:#E8C9A0; background:rgba(212,163,115,0.16); border-radius:10px; padding:10px 13px; margin-bottom:16px; }
.pkg__desc{ font-size:14px; line-height:1.55; color:rgba(255,255,255,0.75); margin:0 0 20px; }
/* Tier badge — metallic corner medal matching each package's colour. */
.pkg-tier-badge{
  position:absolute; top:16px; right:16px; z-index:2; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.6);
}
.pkg-tier-badge svg{ width:22px; height:22px; }
.pkg--bronze .pkg-tier-badge{ background:radial-gradient(circle at 32% 28%,#E8C4A0 0%,#C88958 45%,#8C5A34 100%); border:1.5px solid #E0AD82; color:#3A2410; }
.pkg--silver .pkg-tier-badge{ background:radial-gradient(circle at 32% 28%,#FFFFFF 0%,#D3DEDF 45%,#93A8AA 100%); border:1.5px solid #EAF1F1; color:#3E5556; }
.pkg--gold .pkg-tier-badge{ background:radial-gradient(circle at 32% 28%,#FFF4DE 0%,var(--gold) 50%,#B07E45 100%); border:1.5px solid #F6E1BC; color:#4A2F12; }
.pkg--platinum .pkg-tier-badge{ background:radial-gradient(circle at 32% 28%,#FFFFFF 0%,#E8C9A0 40%,var(--gold) 75%,#8A6236 100%); border:1.5px solid var(--gold); color:#3A2712; box-shadow:0 6px 16px -6px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.7), 0 0 14px -2px rgba(212,163,115,0.7); }
.pkg--bronze .pkg__band{ background:linear-gradient(90deg,#C88958 0%,rgba(212,163,115,0.35) 100%); }
.pkg--bronze .price-line .amount{ color:#D8A87C; }
.pkg--bronze .pkg__chips .chip{ border-color:rgba(200,137,88,0.4); }
.pkg--silver .pkg__band{ background:linear-gradient(90deg,#9BAFB1 0%,rgba(212,163,115,0.35) 100%); }
.pkg--silver .price-line .amount{ color:#C7D4D5; }
.pkg--silver .pkg__chips .chip{ border-color:rgba(155,175,177,0.4); }
.pkg--gold .pkg__band{ background:linear-gradient(90deg,var(--gold) 0%,rgba(212,163,115,0.35) 100%); }
.pkg--gold .pkg__chips .chip{ border-color:rgba(212,163,115,0.4); }
.pkg--platinum .pkg__band{ background:linear-gradient(90deg,var(--gold) 0%,#E8C9A0 50%,var(--gold) 100%); }
.pkg--platinum .pkg__chips .chip{ border-color:rgba(212,163,115,0.4); }
.pkg--platinum .pkg__body{ padding-top:60px; }
.pkg .btn{ display:block; text-align:center; padding:15px 24px; font-size:14px; }

/* Individual areas */
.individual{ position:relative; background:var(--stone); padding:clamp(24px,4vh,48px) 48px; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; scroll-snap-align:start; }
.individual__clip{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
/* Matches .glance__watermark sizing convention — see note there. */
.individual__watermark{ position:absolute; top:20px; left:0; right:0; font-family:'DM Sans',sans-serif; font-weight:500; font-size:clamp(80px,13vw,160px); color:rgba(31,58,61,0.028); white-space:nowrap; line-height:1; z-index:0; padding-left:48px; padding-right:48px; overflow:hidden; text-overflow:clip; }
.individual__inner{ position:relative; z-index:1; max-width:1320px; margin:0 auto; width:100%; display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
.individual__summary{ position:sticky; top:calc(var(--nav-h, 90px) + 32px); }
.individual__summary h2{ font-size:clamp(28px,4vw,40px); color:var(--teal); letter-spacing:-0.02em; margin:0 0 14px; }
.individual__summary > p{ font-size:15px; line-height:1.5; color:var(--muted); margin:0 0 24px; max-width:380px; }
.individual__list .eyebrow{ margin-bottom:10px; }
.individual__list > p{ font-size:15px; color:var(--muted); margin:0 0 32px; }
.individual__strapline{
  position:relative; z-index:1; width:100%; font-family:'DM Sans',sans-serif;
  font-size:clamp(22px,2.6vw,30px); color:var(--teal); letter-spacing:0.06em; text-align:center; margin:28px 0 0;
  transition:opacity 0.9s cubic-bezier(0.22,0.75,0.25,1), transform 0.9s cubic-bezier(0.22,0.75,0.25,1), letter-spacing 0.9s cubic-bezier(0.22,0.75,0.25,1);
}
.individual__strapline.is-visible{ letter-spacing:-0.02em; }
/* ---------- Individual Areas accordion (bright, list-row style — same
   convention as the Treatments/Packages title lists, no card boxes) ---------- */
.area-accordion{ display:flex; flex-direction:column; border-top:1px solid #E9E4DC; }
.area-region{ border-bottom:1px solid #E9E4DC; }
.area-region__title{ width:100%; display:flex; align-items:center; gap:16px; background:none; border:none; padding:13px 4px; cursor:pointer; text-align:left; font-family:inherit; }
.area-region__icon{ width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--teal); flex-shrink:0; }
.area-region__icon svg{ width:19px; height:19px; }
.area-region__label{ flex:1; font-family:'DM Sans',sans-serif; font-size:clamp(18px,2vw,21px); color:var(--teal); }
.area-region__chevron{ font-size:22px; line-height:1; color:var(--gold); transition:transform 0.25s ease; }
.area-region.is-open .area-region__chevron{ transform:rotate(45deg); }
.area-region.is-open .area-region__label{ color:#B07E45; }
.area-region__panel{ max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.area-region.is-open .area-region__panel{ max-height:600px; }
.area-group__chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 4px 16px; }
.area-chip{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7); border-radius:999px;
  box-shadow:0 6px 16px -10px rgba(31,58,61,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
  padding:9px 16px; cursor:pointer; font-family:inherit; text-align:left;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.area-chip:hover{ border-color:rgba(212,163,115,0.6); transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(212,163,115,0.35), inset 0 1px 0 rgba(255,255,255,0.6); }
.area-chip span:first-child{ font-size:14px; color:var(--ink); }
.area-chip span:last-child{ display:none; }
.area-chip.is-selected{ background:rgba(212,163,115,0.3); border-color:var(--gold); box-shadow:0 8px 20px -10px rgba(212,163,115,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
.area-chip.is-selected span:first-child{ color:var(--teal); font-weight:500; }
.area-chip.is-selected span:first-child::before{ content:'✓ '; font-weight:700; color:#B07E45; }

/* ---------- Selection summary panel ---------- */
/* Same glass treatment as .glance__detail-card / package cards. */
.selection-panel{
  background:linear-gradient(160deg,rgba(23,44,46,0.7) 0%,rgba(23,44,46,0.7) 100%);
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(212,163,115,0.6); border-radius:18px; padding:26px 28px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,163,115,0.15), 0 0 40px -12px rgba(212,163,115,0.45);
}
.selection-panel__hint{ font-size:14px; color:rgba(255,255,255,0.55); font-style:italic; margin:0; }
.selection-panel__items{ display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
.selection-panel__item{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.12); }
.selection-panel__item-name{ flex:1; font-size:14px; color:rgba(255,255,255,0.85); }
.selection-panel__item-price{ font-family:'DM Sans',sans-serif; font-size:15px; color:var(--gold); white-space:nowrap; text-align:right; }
.selection-panel__item-remove{ background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.4); font-size:16px; line-height:1; padding:0 0 0 6px; flex-shrink:0; }
.selection-panel__item-remove:hover{ color:#E8897A; }
.selection-panel__total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1.5px solid rgba(255,255,255,0.18); margin-bottom:18px; }
.selection-panel__total-label{ font-size:14px; color:rgba(255,255,255,0.6); }
.selection-panel__total-amount{ font-family:'DM Sans',sans-serif; font-size:26px; color:var(--gold); }
.selection-panel__nudge{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:#E8C9A0; background:rgba(212,163,115,0.16); border:1px solid rgba(212,163,115,0.4); border-radius:12px; padding:12px 14px; margin-bottom:16px; }
.selection-panel__nudge a{ color:var(--white); font-weight:500; text-decoration:underline; white-space:nowrap; }
.selection-panel .btn{ display:block; text-align:center; }

/* ---------- Individual Areas list header ("See Prices" button + full price list modal) ---------- */
.individual__list-head{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:16px; }
.individual__list-head .eyebrow{ margin-bottom:6px; }
.individual__list-head p{ margin:0; }
.individual__see-prices{ padding:13px 22px; font-size:14px; white-space:nowrap; flex-shrink:0; color:#212121; }
.individual__see-prices::before{ display:none; }
.individual__see-prices:hover{ color:#212121; }
@media (max-width:560px){
  .individual__list-head{ flex-direction:column; align-items:flex-start; }
}

/* Same right-docked glass treatment as the Men's Treatment popup (.modal-overlay/.modal). */
.full-prices-overlay{
  position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 120% at 50% 20%, rgba(31,58,61,0.6) 0%, rgba(23,44,46,0.78) 100%);
  backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%);
  opacity:0; transition:opacity 0.35s ease;
}
.full-prices-overlay.is-open{ display:flex; opacity:1; }
.full-prices-modal{
  background:linear-gradient(160deg,rgba(23,44,46,0.82) 0%,rgba(23,44,46,0.86) 100%), url('../img/background-price-list.jpg') center 22%/cover no-repeat;
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-radius:22px; max-width:1080px; width:100%; max-height:85vh; overflow-y:auto; padding:44px; position:relative; text-align:left;
  border:1px solid rgba(212,163,115,0.6);
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,163,115,0.15), 0 0 70px -12px rgba(212,163,115,0.55);
  transform:translateY(18px) scale(0.97); opacity:0; transition:transform 0.35s cubic-bezier(0.2,0.7,0.3,1), opacity 0.35s ease;
}
.full-prices-overlay.is-open .full-prices-modal{ transform:translateY(0) scale(1); opacity:1; }
.full-prices-modal__close{ position:absolute; top:24px; right:24px; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--white); font-size:18px; background:rgba(23,44,46,0.3); transition:border-color 0.25s ease, color 0.25s ease; }
.full-prices-modal__close:hover{ border-color:var(--gold); color:var(--gold); }
.full-prices-modal h3{ font-size:28px; color:var(--white); margin:6px 0 8px; }
.full-prices-modal > p{ font-size:14px; color:rgba(255,255,255,0.65); margin:0 0 28px; }
.full-prices-modal__grid{ display:grid; grid-template-columns:1fr; column-gap:36px; }
@media (min-width:701px) and (max-width:1000px){
  .full-prices-modal__grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1001px){
  .full-prices-modal__grid{ grid-template-columns:1fr 1fr 1fr; }
}
.price-table-group{ margin-bottom:26px; break-inside:avoid; }
.price-table-group h4{ font-family:'DM Sans',sans-serif; font-weight:500; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.price-table-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.15); }
.price-table-row span:first-child{ font-size:14px; color:rgba(255,255,255,0.85); }
.price-table-row span:last-child{ font-family:'DM Sans',sans-serif; font-size:15px; color:var(--gold); white-space:nowrap; }
body.modal-open{ overflow:hidden; }
@media (max-width:700px){
  .full-prices-overlay{ padding:16px; }
  .full-prices-modal{ padding:32px 24px; max-height:88vh; }
}
@media (max-width:900px){
  .individual__inner{ grid-template-columns:1fr; gap:32px; }
  .individual__summary{ position:static; }
}

/* Other services */
.other{ background:var(--teal); padding:90px 48px; scroll-snap-align:start; }
.other__inner{ max-width:1320px; margin:0 auto; }
.other h2{ font-size:clamp(32px,4vw,46px); color:var(--white); margin:0 0 48px; }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; perspective:1400px; }
.svc-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:20px; padding:34px; transition:transform 0.45s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.45s ease, border-color 0.45s ease; }
.svc-card:hover{ transform:translateY(-12px) rotateX(5deg) rotateY(-4deg); box-shadow:0 40px 70px -24px rgba(0,0,0,0.5); border-color:rgba(212,163,115,0.6); }
.svc-card h3{ font-size:23px; color:var(--white); margin:0 0 18px; }
.svc-price{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.svc-price .amount{ font-family:'DM Sans',sans-serif; font-size:36px; color:var(--gold); }
.svc-price .was{ font-size:15px; color:rgba(255,255,255,0.45); text-decoration:line-through; }
.svc-card p{ font-size:14px; line-height:1.6; color:rgba(255,255,255,0.65); margin:0; }

.closing-cta{ background:var(--stone); padding:80px 48px; text-align:center; scroll-snap-align:start; }
.closing-cta h2{ font-size:clamp(28px,3.5vw,40px); color:var(--teal); margin:0 0 16px; }
.closing-cta p{ font-size:16px; color:var(--muted); max-width:460px; margin:0 auto 32px; }
.closing-cta .btn-glass{ color:var(--teal); }
.closing-cta .btn-glass:hover{ color:var(--teal); }

/* ---------- Back to top ---------- */
.to-top{ position:fixed; right:32px; bottom:32px; z-index:300; width:52px; height:52px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--white); background:rgba(31,58,61,0.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(212,163,115,0.5); box-shadow:0 16px 34px -14px rgba(23,44,46,0.65); transition:opacity 0.45s ease, transform 0.45s cubic-bezier(0.2,0.7,0.3,1), background 0.35s ease; opacity:0; transform:translateY(16px); pointer-events:none; }
.to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.to-top:hover{ background:var(--gold); color:var(--teal); border-color:var(--gold); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 0.9s cubic-bezier(0.22,0.75,0.25,1), transform 0.9s cubic-bezier(0.22,0.75,0.25,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Section fade in/out (homepage) ---------- */
.fade-section{ transition:opacity 0.5s ease-out, transform 0.5s ease-out; will-change:opacity, transform; }

/* =====================================================================
   RESPONSIVE — everything above this line is the DESKTOP baseline.
   Mobile/tablet don't just inherit scaled-down desktop rules; each tier
   below is its own deliberate pass so mobile can be tuned independently
   (e.g. the hero trust ticker sits below the buttons and shrinks in
   place, rather than reusing the desktop floating-overlay treatment).
   ===================================================================== */

/* ---------- TABLET (≤900px): nav collapses to the mobile menu ---------- */
@media (max-width: 900px){
  .nav__links{ display:none; width:100%; order:3; flex-direction:column; align-items:flex-start; gap:16px; padding-top:16px; }
  .nav.is-open .nav__links{ display:flex; }
  .nav__toggle{ display:block; }
  .nav__social{ display:none; }
  .nav.is-open .nav__social{ display:flex; order:4; width:100%; padding-top:4px; }
  .glance__row{ flex-direction:column; }
  .glance--light .glance__row{ grid-template-columns:1fr; }
  .split{ flex-direction:column; }

  /* Equal-height sections are a desktop composition choice. Below the point where the
     nav collapses, headline text wraps onto more lines and can grow taller than a
     100vh container while it's vertically centered — clipping content (e.g. the hero's
     button row) off the bottom of the screen. Let sections size to their own content
     instead, so nothing gets cut off regardless of how much the text wraps. */
  .hero, .glance--full, .results, .pcos, .mens, .mens-pricing, .pricing-teaser, .about, .reviews{ min-height:auto; }

  /* Scroll-snap is a desktop-only composition choice — same reasoning as above:
     once sections size to their own (variable, often taller) content below this
     breakpoint, forced snapping would fight normal scrolling instead of helping it. */
  html.snap-scroll{ scroll-snap-type:none; }

  /* Mobile hero: trust ticker moves from a floating overlay pinned to the hero's
     bottom edge (desktop treatment) into normal flow directly below the buttons,
     and shrinks — see the size tiers below. An auto-height hero doesn't reserve
     space for absolutely-positioned children, so keeping it "floating" here would
     make it peek in half-cut at the screen edge instead of sitting cleanly. */
  .hero{ padding-top:56px; padding-bottom:56px; }
  .trust-float{ position:relative; left:auto; right:auto; bottom:auto; margin-top:32px; perspective:none; }
  .trust-viewport{ padding:16px 0; }
  .trust-item span.txt{ font-size:12px; padding:0 20px; }

  /* Rating badge moves below the carousel instead of beside it. */
  .reviews__body{ flex-direction:column; }
  .review-summary{ flex:0 0 auto; width:100%; max-width:300px; height:auto; padding:22px 24px; }
}

/* ---------- MOBILE (≤640px): compact spacing, smaller ticker ---------- */
@media (max-width: 640px){
  .container, .hero__inner, .results, .pricing-teaser, .individual, .other__inner, .glance__inner{ padding-left:24px; padding-right:24px; }
  .nav, .hero, .glance, .pcos, .mens, .about, .faq, .reviews, .site-footer, .pkg-hero, .individual, .other{ padding-left:24px; padding-right:24px; }
  .ba-pair__photos{ flex-direction:column; }
  .ba-pair img{ height:220px; }

  .trust-float{ margin-top:24px; }
  .trust-viewport{ padding:12px 0; }
  .trust-item span.txt{ font-size:10px; padding:0 14px; letter-spacing:0.04em; }
  .trust-item span.dot{ width:4px; height:4px; }
  .trust-item.is-active span.dot{ width:6px; height:6px; }
}

/* ---------- SMALL MOBILE (≤400px): tightest ticker size ---------- */
@media (max-width: 400px){
  .trust-viewport{ padding:10px 0; }
  .trust-item span.txt{ font-size:9px; padding:0 10px; }
  .btn{ padding:14px 22px; font-size:14px; }
  .hero__actions{ gap:16px; }
}

/* ---------- Legal pages (Privacy Policy, Terms, Cancellation Policy) ---------- */
.legal{ position:relative; background:var(--stone); padding:clamp(56px,10vh,100px) 48px 100px; overflow:hidden; }
.legal__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.35; z-index:0; }
.legal__scrim{ position:absolute; inset:0; background:var(--stone); opacity:0.55; z-index:0; }
.legal__inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.legal__inner h1{ font-size:clamp(32px,4vw,44px); color:var(--gold); margin-bottom:8px; }
.legal__updated{ font-size:13px; color:var(--muted); margin:0 0 40px; }
.legal__section{ margin-bottom:36px; }
.legal__section:last-child{ margin-bottom:0; }
.legal__section h2{ font-size:20px; color:var(--gold); margin:0 0 12px; }
.legal__section p{ font-size:15px; line-height:1.7; color:var(--ink); margin:0 0 14px; }
.legal__section p:last-child{ margin-bottom:0; }
.legal__section ul{ margin:0 0 14px; padding-left:20px; }
.legal__section li{ font-size:15px; line-height:1.7; color:var(--ink); margin-bottom:6px; }
.legal__section a{ color:var(--teal); text-decoration:underline; }
.legal__section a:hover{ color:var(--gold); }

/* Privacy Policy page only: dark footer to flow from the legal content above it */
.page-privacy .site-footer{ background:var(--teal-dark); }
.page-privacy .site-footer__watermark{ color:rgba(255,255,255,0.03); }
.page-privacy .footer-brand{ color:var(--white); }
.page-privacy .footer-info p{ color:rgba(255,255,255,0.65); }
.page-privacy .footer-info .footer-note{ color:rgba(255,255,255,0.4); }
.page-privacy .footer-social a{ border-color:rgba(255,255,255,0.3); color:rgba(255,255,255,0.85); }
.page-privacy .footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--teal); }
.page-privacy .footer-map{ border-color:rgba(255,255,255,0.15); }
.page-privacy .site-footer__bottom{ border-top-color:rgba(255,255,255,0.15); }
.page-privacy .site-footer__bottom p{ color:rgba(255,255,255,0.55); }
.page-privacy .legal-links a{ color:rgba(255,255,255,0.7); }
.page-privacy .legal-links a:hover{ color:var(--gold); }

/* ---------- Before & After: empty state + pair caption ---------- */
.ba-empty{ font-size:16px; color:var(--muted); text-align:center; grid-column:1 / -1; padding:40px 0; }
.ba-pair__caption{ text-align:center; font-size:14px; color:var(--muted); margin:0; }

/* ---------- Admin login (Before & After dashboard) ---------- */
.admin-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--teal-dark); padding:24px; }
.admin-login__card{ background:var(--white); border-radius:18px; padding:44px; max-width:360px; width:100%; box-shadow:0 30px 70px -20px rgba(0,0,0,0.4); }
.admin-login__card h1{ font-size:24px; color:var(--teal); margin:0 0 20px; }
.admin-login__error{ background:rgba(200,60,60,0.08); border:1px solid #c83c3c; color:#8f2b2b; border-radius:10px; padding:12px 14px; font-size:14px; margin:0 0 16px; }

/* ---------- Admin dashboard (Before & After) ---------- */
.admin-dash{ min-height:100vh; background:var(--stone); padding:48px; }
.admin-dash__inner{ max-width:900px; margin:0 auto; }
.admin-dash__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.admin-dash__head h1{ font-size:28px; color:var(--teal); margin:0; }
.admin-dash__view-live{ font-size:14px; color:var(--teal); text-decoration:underline; }
.admin-dash__add{ background:var(--white); border-radius:16px; padding:28px; margin-bottom:32px; }
.admin-dash__add h2{ font-size:18px; color:var(--teal); margin:0 0 16px; }
.admin-dash__list h2{ font-size:18px; color:var(--teal); margin:0 0 16px; }
.admin-pair{ display:flex; gap:20px; background:var(--white); border-radius:16px; padding:20px; margin-bottom:16px; flex-wrap:wrap; }
.admin-pair__photos{ display:flex; gap:8px; flex:0 0 220px; }
.admin-pair__photos img{ width:106px; height:106px; object-fit:cover; border-radius:10px; }
.admin-pair__body{ flex:1 1 320px; display:flex; flex-direction:column; gap:14px; }
.admin-pair__edit-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.admin-pair__edit-form label{ font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.admin-pair__edit-form input[type="text"]{ padding:8px 10px; border-radius:8px; border:1px solid var(--hairline); font-size:13px; }
.admin-pair__edit-form input[type="file"]{ font-size:12px; }
.admin-pair__actions{ display:flex; gap:8px; }
.admin-pair__actions button{ font-size:12px; padding:8px 12px; border-radius:8px; border:1px solid var(--hairline); background:var(--white); cursor:pointer; }
.admin-pair__actions button:disabled{ opacity:0.4; cursor:not-allowed; }
.admin-pair__delete{ color:#c83c3c; border-color:#c83c3c !important; }