/* ==========================================================================
   home.css — home page only (index.html)
   --------------------------------------------------------------------------
   Light theme (Myntra style): white base with light greys. Myntra pink is the
   accent and the booking-button colour; charcoal for secondary buttons.

   Performance:
     - One stylesheet. Web fonts: Playfair Display + Poppins, from Google Fonts.
     - Mobile-first; every image box declares its ratio, so CLS stays at zero.
     - Below-the-fold sections use content-visibility to skip off-screen
       rendering work on first load.
   The other pages keep css/theme.css — nothing here affects them.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Myntra-style palette: white + light greys, Myntra pink accent, charcoal text.
     (The old blush / lilac / mint names are kept so every rule still works.) */
  --white:    #FFFFFF;
  --soft:     #F5F5F6;   /* page wash */
  --blush-50: #FAFAFB;
  --blush-100:#F5F5F6;
  --blush-200:#EAEAEC;
  --blush-300:#D4D5D9;
  --rose-400: #FF7B9A;
  --rose-500: #FF3F6C;   /* Myntra pink */
  --rose-600: #D91E4F;   /* accent text, readable on white */
  --rose-700: #B3163F;
  --mint-50:  #FFFFFF;
  --mint-100: #F5F5F6;
  --mint-700: #282C3F;
  --lilac-50: #FFFFFF;
  --lilac-100:#F5F5F6;
  --peach-100:#F5F5F6;
  --sky-100:  #F5F5F6;

  --ink:      #282C3F;
  --ink-2:    #3E4152;
  --muted:    #696E79;
  --line:     #EAEAEC;
  --line-2:   #D4D5D9;

  /* Booking buttons: Myntra pink (no green) */
  --wa:       #FF3F6C;
  --wa-dark:  #E7335F;
  --wa-ink:   #FFFFFF;

  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Square corners everywhere (Myntra style) */
  --r-sm: 0;
  --r:    0;
  --r-lg: 0;
  --pill: 0;

  --shadow-sm: 0 1px 3px rgba(40, 44, 63, .08);
  --shadow-md: 0 2px 10px rgba(40, 44, 63, .10);
  --shadow-lg: 0 6px 22px rgba(40, 44, 63, .12);

  --section-y: clamp(3rem, 7vw, 5.5rem);
  --wrap: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .75rem;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 7.2vw, 3.9rem); line-height: 1.06; letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
h3 { font-size: 1.12rem; letter-spacing: -.005em; }

p { margin: 0 0 .75rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--rose-600); text-underline-offset: .18em; }
a:hover { color: var(--rose-700); }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2.5px solid var(--rose-600); outline-offset: 3px; border-radius: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ico { width: 16px; height: 16px; flex: none; fill: currentColor; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 300;
  padding: .75rem 1.25rem; border-radius: var(--pill);
  background: var(--ink); color: var(--white);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: .5rem; color: var(--white); }

#top-sentinel { height: 1px; margin-bottom: -1px; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .wrap { padding-inline: 28px; } }
.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); background: var(--white); }
.section--soft  { background: var(--soft); }
.section--blush { background: linear-gradient(180deg, var(--blush-50), var(--white)); }
.section--mint  { background: linear-gradient(180deg, var(--mint-50), var(--white)); }
.section--lilac { background: linear-gradient(180deg, var(--lilac-50), var(--white)); }

/* Skip rendering work for sections far below the fold. */
.section:nth-of-type(n+3) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

.section-head { max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head p { color: var(--muted); font-size: 1.02rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 .75rem; padding: .3rem .8rem;
  border-radius: var(--pill);
  background: var(--blush-100);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose-700);
}
.section--mint .eyebrow { background: var(--mint-100); color: var(--mint-700); }
.section--lilac .eyebrow { background: var(--lilac-100); color: var(--rose-600); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .7rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--pill);
  font-family: var(--font-sans); font-size: .9rem; font-weight: 650;
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn .ico { fill: currentColor; }

.btn--wa { background: var(--wa); color: var(--wa-ink); box-shadow: none; font-weight: 700; }
.btn--wa:hover { background: var(--wa-dark); color: var(--wa-ink); box-shadow: none; }

.btn--rose { background: var(--rose-500); color: var(--white); box-shadow: none; font-weight: 700; }
.btn--rose:hover { background: var(--rose-700); color: var(--white); }

/* Former white buttons (Call, View more…) are now solid charcoal */
.btn--outline { background: var(--ink); color: var(--white); border-color: var(--ink); font-weight: 700; }
.btn--outline:hover { background: #000; border-color: #000; color: var(--white); }

.btn--lg { min-height: 52px; padding: .85rem 1.6rem; font-size: .95rem; }
.btn--sm { min-height: 42px; padding: .55rem 1.1rem; font-size: .85rem; }
.btn--xs { min-height: 38px; padding: .45rem .9rem; font-size: .8rem; }
.btn--xs svg { width: 15px; height: 15px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 650; text-decoration: none;
}
.arrow::after { content: "→"; transition: transform .2s var(--ease); }
.arrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   5. TOP BAR + HEADER + DRAWER
   ========================================================================== */
.topbar { background: var(--blush-100); color: var(--ink-2); font-size: .8rem; }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem 1.5rem; padding-block: .5rem;
}
@media (min-width: 760px) { .topbar__inner { justify-content: space-between; } }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--rose-700); }
.topbar svg { width: 13px; height: 13px; fill: var(--rose-600); flex: none; }
.topbar__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; }
.topbar__hours { display: none; align-items: center; }
@media (min-width: 980px) { .topbar__hours { display: inline-flex; } }

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@supports (backdrop-filter: blur(10px)) { .header { backdrop-filter: blur(16px) saturate(160%); } }
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 2px 10px rgba(40, 44, 63, .08); }

.header__inner { display: flex; align-items: center; gap: 1rem; min-height: 66px; }
@media (min-width: 1000px) { .header__inner { min-height: 78px; gap: 1.5rem; } }

.brand { display: flex; margin-right: auto; color: var(--ink); text-decoration: none; }
.brand svg { width: 156px; height: auto; }
@media (min-width: 1000px) { .brand svg { width: 182px; } }

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .9rem; border: 0; background: none; border-radius: var(--pill);
  font-family: var(--font-sans); font-size: .9rem; font-weight: 550;
  color: var(--ink-2); text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover { background: var(--blush-100); color: var(--rose-700); }
.nav__link[aria-current="page"] { background: var(--blush-100); color: var(--rose-700); font-weight: 700; }

.chev {
  width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s var(--ease);
}
[aria-expanded="true"] > .chev { transform: rotate(-135deg) translateY(-2px); }

.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr));   /* 10 locations in two columns */
  min-width: 220px; padding: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu, .nav__menu.is-open {
  opacity: 1; visibility: visible; transform: none;
}
.nav__menu a {
  display: block; padding: .55rem .75rem; border-radius: var(--r-sm);
  font-size: .88rem; color: var(--ink); text-decoration: none;
}
.nav__menu a:hover { background: var(--blush-50); color: var(--rose-700); }

.header__cta { display: none; }
@media (min-width: 1000px) { .header__cta { display: inline-flex; } }

.nav-trigger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 12px;
  background: var(--blush-50); border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
.nav-trigger span { display: block; height: 1.6px; background: var(--ink); border-radius: 0; transition: transform .24s var(--ease), opacity .2s var(--ease); }
.nav-trigger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-trigger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
@media (min-width: 1000px) { .nav-trigger { display: none; } }

.drawer {
  position: fixed; inset: 0; z-index: 110;
  padding: 0 16px 6rem;
  background: var(--white);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s;
}
.drawer.is-open { transform: none; visibility: visible; }
@media (min-width: 1000px) { .drawer { display: none; } }

.drawer__top {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 66px; margin-bottom: .5rem;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.drawer__top .brand svg { width: 156px; }
.drawer__close {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  background: var(--blush-50); border: 1px solid var(--line); border-radius: 0;
  color: var(--ink); cursor: pointer;
}
.drawer__close svg { width: 18px; height: 18px; fill: currentColor; }

.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; padding: 1rem .25rem;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.25rem; color: var(--ink);
  text-align: left; text-decoration: none; cursor: pointer;
}
.drawer__link[aria-current="page"] { color: var(--rose-600); }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.drawer__sub > div { overflow: hidden; }
.drawer__link[aria-expanded="true"] + .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub ul { padding: .5rem 0 .5rem 1rem; }
.drawer__sub a { display: block; padding: .5rem 0; font-size: .95rem; color: var(--muted); text-decoration: none; }
.drawer__sub a:hover { color: var(--rose-600); }
.drawer__foot { margin-top: 1.5rem; display: grid; gap: .75rem; }
.drawer__foot p { font-size: .85rem; color: var(--muted); text-align: center; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
/* First screen: full-width video with the title on top */
.hero {
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  min-height: min(78svh, 760px);
  padding-block: clamp(3rem, 8vw, 5rem);
  background: var(--ink);
}
@media (min-width: 1000px) { .hero { min-height: min(82vh, 760px); } }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dark wash so the white title stays readable over any frame of the video */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 32, .35) 0%, rgba(20, 22, 32, .45) 55%, rgba(20, 22, 32, .65) 100%);
}
.hero__inner { position: relative; z-index: 1; }
/* Hero text: centred, white over the video */
.hero__copy { text-align: center; font-family: "Poppins", var(--font-sans); color: var(--white); }
.hero__copy h1 {
  font-family: "Playfair Display", var(--font-display); font-weight: 600; letter-spacing: -.01em;
  color: var(--white); text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero__copy .hero__trust { justify-content: center; }
.hero__copy .hero__sub { margin-inline: auto; }

/* Right after the video: photo with the floating cards, then the stats */
.hero-media {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(900px 500px at 100% 0%, var(--blush-100), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, var(--mint-50), transparent 65%),
    var(--white);
}
.hero-media__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
@media (min-width: 1000px) {
  .hero-media__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .hero-media .stats { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
}

.hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .25; pointer-events: none; }
.hero__blob--a { width: 340px; height: 340px; top: -120px; left: -120px; background: var(--lilac-100); }
.hero__blob--b { width: 280px; height: 280px; bottom: 60px; right: 30%; background: var(--peach-100); opacity: .45; }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1.1rem; padding: .45rem .95rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--pill); box-shadow: var(--shadow-sm);
  font-size: .8rem; font-weight: 650; color: var(--ink-2);
}
.dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: #03A685;
  box-shadow: 0 0 0 4px rgba(3, 166, 133, .18);
}

.hero h1 em {
  font-style: italic; color: var(--rose-400);
  padding-inline: .05em;
}
.hero__sub { max-width: 56ch; margin-bottom: 1.6rem; font-size: clamp(1rem, 2.2vw, 1.12rem); color: rgba(255, 255, 255, .92); font-weight: 500; }

.hero__trust { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; margin-top: 1.5rem; }
.hero__trust li { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 600; color: var(--white); }
.hero__trust svg { width: 18px; height: 18px; color: var(--rose-400); }

@media (max-width: 480px) {
  .hero .btn-row .btn { width: 100%; }
}

/* Visual: arch-topped photo with two floating glass cards */
.hero__visual { position: relative; max-width: 520px; width: 100%; margin-inline: auto; }
.hero__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3.4;
  border-radius: 0;
  background: var(--blush-100);
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
}
@media (min-width: 1000px) { .hero__frame { aspect-ratio: 4 / 3.6; border-radius: 0; } }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }

.float {
  position: absolute; display: flex; align-items: center; gap: .65rem;
  padding: .7rem 1rem;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  font-size: .78rem; line-height: 1.25; color: var(--ink-2);
}
@supports (backdrop-filter: blur(8px)) { .float { backdrop-filter: blur(10px); } }
.float strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.float__s { display: block; color: var(--muted); font-size: .74rem; }
.float__k { color: var(--rose-600); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; }
.float--price { flex-direction: column; align-items: flex-start; gap: .1rem; left: -6px; bottom: 18%; }
.float--open { right: -6px; top: 14%; }
.float__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 0; background: var(--mint-100); }
.float__ico svg { width: 20px; height: 20px; color: var(--mint-700); }
@media (min-width: 1000px) {
  .float--price { left: -36px; }
  .float--open { right: -28px; }
}

/* Stats row */
.stats {
  position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.stats li {
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.stats strong { display: block; font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 600; color: var(--ink); }
.stats span { font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   7. THERAPISTS
   --------------------------------------------------------------------------
   Product-grid layout: 2 cards per row on phones (no sideways scrolling),
   4 on tablets, 5 on desktop. Cards are compacted on narrow screens.
   ========================================================================== */
.team { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }   /* one card per row on phones */
@media (min-width: 600px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1000px) { .team { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; } }

.tcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blush-300); }

.tcard__pic { position: relative; aspect-ratio: 1; margin: 8px 8px 0; border-radius: 0; overflow: hidden; }
.tcard--c1 .tcard__pic { background: #F5F5F6; }
.tcard--c2 .tcard__pic { background: #F5F5F6; }
.tcard--c3 .tcard__pic { background: #F5F5F6; }
.tcard--c4 .tcard__pic { background: #F5F5F6; }
.tcard--c5 .tcard__pic { background: #F5F5F6; }
.tcard__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tcard:hover .tcard__pic img { transform: scale(1.04); }

.tcard__exp {
  position: absolute; top: 10px; left: 10px;
  padding: .25rem .6rem; border-radius: var(--pill);
  background: rgba(255, 255, 255, .92);
  font-size: .7rem; font-weight: 700; color: var(--ink-2);
  box-shadow: 0 2px 8px rgba(42, 30, 37, .08);
}

.tcard__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1rem 1.05rem; }
.tcard h3 { margin-bottom: .15rem; font-size: 1.2rem; }
.tcard__role { margin-bottom: .55rem; font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-600); }
.tcard__desc { margin-bottom: .75rem; font-size: .86rem; line-height: 1.55; color: var(--muted); }
.tcard__room {
  align-self: flex-start; margin-bottom: .9rem; padding: .2rem .6rem;
  border-radius: var(--pill); background: var(--soft); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 600; color: var(--ink-2);
}
.tcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: auto; padding-top: .85rem; border-top: 1px dashed var(--line-2);
}
.tcard__rate { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.tcard__rate span { display: block; font-family: var(--font-sans); font-size: .7rem; font-weight: 500; color: var(--muted); }

/* Phones: two-up cards are ~170px wide, so everything tightens and the
   price sits above a full-width Book button. */
@media (max-width: 759px) {
  .tcard { border-radius: var(--r); }
  .tcard__pic { margin: 6px 6px 0; border-radius: 0; }
  .tcard__exp { top: 7px; left: 7px; padding: .15rem .5rem; font-size: .64rem; }
  .tcard__body { padding: .7rem .7rem .75rem; }
  .tcard h3 { font-size: 1.05rem; }
  .tcard__role { margin-bottom: .4rem; font-size: .6rem; letter-spacing: .07em; line-height: 1.35; }
  .tcard__desc {
    margin-bottom: .55rem; font-size: .76rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .tcard__room { margin-bottom: .6rem; padding: .12rem .5rem; font-size: .66rem; }
  .tcard__foot { flex-direction: column; align-items: stretch; gap: .5rem; padding-top: .6rem; }
  .tcard__rate { display: flex; align-items: baseline; gap: .3rem; font-size: 1.05rem; }
  .tcard__rate span { display: inline; font-size: .68rem; }
  .tcard__foot .btn { width: 100%; min-height: 36px; font-size: .78rem; }
}
.team__more { text-align: center; margin-top: 1.5rem; }
.team__note { text-align: center; margin-top: .9rem; font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   8. CATEGORY TILES
   ========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(6, 1fr); } }

.tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 4.6; border-radius: var(--r);
  text-decoration: none; background: var(--blush-100);
  box-shadow: var(--shadow-sm);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile__label {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .55rem .75rem;
  background: rgba(255, 255, 255, .92); border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 700; color: var(--ink); line-height: 1.25;
}
.tile__label svg { width: 15px; height: 15px; color: var(--rose-600); flex: none; transition: transform .2s var(--ease); }
.tile:hover .tile__label svg { transform: translateX(3px); }

/* ==========================================================================
   9. TREATMENT CARDS
   --------------------------------------------------------------------------
   Phones: compact horizontal card (thumb + text) so nine treatments do not
   become a mile of scrolling. Wider: classic vertical cards.
   ========================================================================== */
.svcs { display: grid; gap: .9rem; }
@media (min-width: 680px) { .svcs { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } }
@media (min-width: 1000px) { .svcs { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }

.svc {
  display: grid; grid-template-columns: 104px 1fr; gap: .9rem;
  padding: .7rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.svc__media { border-radius: var(--r-sm); overflow: hidden; background: var(--blush-100); aspect-ratio: 1; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc:hover .svc__media img { transform: scale(1.05); }
.svc__body { display: flex; flex-direction: column; min-width: 0; }
.svc h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.svc__desc { font-size: .84rem; line-height: 1.5; color: var(--muted); margin-bottom: .6rem; }
.svc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .7rem; }
.svc__price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--rose-700); }
.svc__price small { font-family: var(--font-sans); font-size: .7rem; font-weight: 500; color: var(--muted); }
.svc__dur {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: var(--pill); background: var(--mint-50);
  font-size: .74rem; font-weight: 600; color: var(--mint-700);
}
.svc__dur svg { width: 13px; height: 13px; stroke-width: 2; }
.svc .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 679px) {
  .svc .btn { min-height: 38px; padding: .4rem .85rem; font-size: .78rem; }
}
@media (min-width: 680px) {
  .svc { grid-template-columns: 1fr; padding: 0; overflow: hidden; border-radius: var(--r-lg); gap: 0; }
  .svc__media { aspect-ratio: 16 / 10; border-radius: 0; }
  .svc__body { padding: 1.15rem 1.25rem 1.3rem; flex: 1; }
  .svc h3 { font-size: 1.15rem; }
  .svc__desc { font-size: .9rem; }
  .svc .btn { align-self: stretch; }
}

.center-cta { text-align: center; margin-top: 2rem; }
.center-cta .btn svg { width: 17px; height: 17px; }

/* ==========================================================================
   10. ABOUT SPLIT
   ========================================================================== */
.split { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.split__media { position: relative; }
.split__media img {
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
}
.split__badge {
  position: absolute; right: 14px; bottom: -18px; max-width: 220px;
  padding: .8rem 1rem; border-radius: var(--r);
  background: var(--white); box-shadow: var(--shadow-md);
  font-size: .8rem; color: var(--muted); line-height: 1.35;
}
.split__badge strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--mint-700); }
.split__copy p { color: var(--muted); }

.ticks { display: grid; gap: .7rem; margin: 1.25rem 0 1.5rem; }
.ticks li { display: flex; gap: .7rem; font-size: .94rem; color: var(--ink-2); }
.ticks svg {
  width: 24px; height: 24px; flex: none; padding: 4px; margin-top: 1px;
  border-radius: 0; background: var(--mint-100); color: var(--mint-700);
}

/* ==========================================================================
   11. FACILITIES
   ========================================================================== */
.features { display: grid; gap: .9rem; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }

.feature {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.feature:hover { border-color: var(--blush-300); box-shadow: var(--shadow-sm); }
.feature__icon {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 0;
  background: var(--blush-100); color: var(--rose-600);
}
.feature:nth-child(3n+2) .feature__icon { background: var(--mint-100); color: var(--mint-700); }
.feature:nth-child(3n) .feature__icon { background: var(--lilac-100); color: var(--rose-600); }
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; margin-bottom: .3rem; letter-spacing: 0; }
.feature p { font-size: .88rem; line-height: 1.55; color: var(--muted); }

/* ==========================================================================
   12. PRICING
   ========================================================================== */
.plans { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 1.6rem 1.4rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border: 2px solid var(--rose-400);
  background: linear-gradient(180deg, var(--blush-50), var(--white) 55%);
  box-shadow: var(--shadow-md);
}
@media (min-width: 860px) { .plan--featured { transform: translateY(-10px); } }
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: .25rem .8rem; border-radius: var(--pill);
  background: var(--rose-600); color: var(--white);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.plan__name { font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-600); margin-bottom: .35rem; }
.plan__price { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: var(--ink); line-height: 1.1; margin-bottom: 1rem; }
.plan__price small { font-family: var(--font-sans); font-size: .85rem; font-weight: 500; color: var(--muted); }
.plan ul { display: grid; gap: .55rem; margin-bottom: 1.4rem; }
.plan li { display: flex; gap: .55rem; font-size: .9rem; color: var(--ink-2); }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--mint-700); }
.plan .btn { margin-top: auto; }

.rates {
  margin-top: 1.75rem; overflow-x: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
}
.rates table { width: 100%; border-collapse: collapse; font-size: .9rem; }
@media (max-width: 479px) { .rates th, .rates td { padding: .8rem .7rem; } .rates table { font-size: .84rem; } }
.rates th, .rates td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.rates thead th { background: var(--soft); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 0; }
.rates tbody th { font-weight: 650; color: var(--ink); }
.rates tbody th span { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
.rates td:last-child { font-family: var(--font-display); font-weight: 600; color: var(--rose-700); white-space: nowrap; }

.pay-note { text-align: center; margin-top: 1rem; font-size: .84rem; color: var(--muted); }

/* ==========================================================================
   13. LOCATIONS
   ========================================================================== */
.locs { display: grid; gap: 1rem; }
@media (min-width: 640px) { .locs { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (min-width: 1100px) { .locs { grid-template-columns: repeat(4, 1fr); } }

.loc {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.loc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.loc__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blush-100); }
.loc__media img { width: 100%; height: 100%; object-fit: cover; }
.loc__tag {
  position: absolute; left: 10px; top: 10px;
  padding: .25rem .65rem; border-radius: var(--pill);
  background: rgba(255, 255, 255, .92); font-size: .72rem; font-weight: 700; color: var(--ink-2);
}
.loc__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.25rem; }
.loc h3 { font-size: 1.15rem; }
.loc h3 a { color: var(--ink); text-decoration: none; }
.loc h3 a:hover { color: var(--rose-600); }
.loc p { font-size: .88rem; color: var(--muted); margin-bottom: 1rem; }
.loc .arrow { margin-top: auto; }

/* ==========================================================================
   14. BOOKING STEPS
   ========================================================================== */
.steps { display: grid; gap: 1rem; counter-reset: none; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } }

.step {
  position: relative; padding: 1.4rem 1.25rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
}
.step__num {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: .9rem; border-radius: 0;
  background: linear-gradient(135deg, var(--blush-100), var(--lilac-100));
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--rose-700);
}
.step h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-bottom: .35rem; }
.step p { font-size: .88rem; color: var(--muted); }

/* ==========================================================================
   15. FAQ
   ========================================================================== */
.faq { display: grid; gap: .7rem; }
.faq__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq__item:hover { border-color: var(--blush-300); }
.faq__item.is-open { border-color: var(--rose-400); box-shadow: var(--shadow-sm); background: linear-gradient(180deg, var(--blush-50), var(--white) 60%); }

.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.05rem 1.2rem;
  background: none; border: 0;
  font-family: var(--font-sans); font-size: .96rem; font-weight: 650; line-height: 1.45;
  color: var(--ink); text-align: left; cursor: pointer;
}
.faq__q:hover { color: var(--rose-700); }

.plus {
  position: relative; flex: none; width: 26px; height: 26px; margin-top: -.1em;
  border-radius: 0; background: var(--blush-100); color: var(--rose-600);
}
.plus::before, .plus::after {
  content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1.8px; margin-top: -.9px;
  background: currentColor; border-radius: 0;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.plus::after { transform: rotate(90deg); }
[aria-expanded="true"] .plus::after { transform: rotate(0); opacity: 0; }

/* Answers stay in the DOM (crawlable, matches FAQPage schema). Open without
   JS; collapsed before first paint once html.js is set. */
.faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.2rem; font-size: .92rem; line-height: 1.7; color: var(--muted); }
.faq__a p:last-child { padding-bottom: 1.15rem; }
.js .faq__a { grid-template-rows: 0fr; }
.js .faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* ==========================================================================
   16. CTA + NAP + AREAS
   ========================================================================== */
.cta {
  display: grid; gap: 1.75rem;
  padding: clamp(1.5rem, 5vw, 3.25rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(500px 300px at 100% 0%, var(--lilac-100), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, var(--mint-100), transparent 70%),
    var(--blush-100);
  border: 1px solid var(--blush-200);
}
@media (min-width: 900px) { .cta { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 3rem; } }
.cta__copy p { color: var(--ink-2); max-width: 54ch; }
.cta .eyebrow { background: var(--white); }
.cta .btn-row { margin-top: 1.4rem; }
.cta__note { margin-top: 1rem; font-size: .8rem; color: var(--muted) !important; }

.nap { display: grid; gap: .75rem; }
.nap > div {
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, .85); border: 1px solid var(--line); border-radius: var(--r);
}
.nap h3 { font-family: var(--font-sans); font-size: .68rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.nap p, .nap a { font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; margin: 0; }
.nap a:hover { color: var(--rose-600); }

.areas { margin-top: clamp(2rem, 5vw, 3rem); text-align: center; }
.areas__title { font-family: var(--font-sans); font-size: .78rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.pills a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem;
  border-radius: var(--pill); background: var(--white); border: 1px solid var(--line-2);
  font-size: .86rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.pills a:hover { border-color: var(--rose-400); color: var(--rose-700); background: var(--blush-50); }

/* ==========================================================================
   16b. TREATMENT GUIDE, BANYA CYCLE, TRAVEL TIMES
   ========================================================================== */
.guides { display: grid; gap: .9rem; }
@media (min-width: 640px) { .guides { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } }
@media (min-width: 1000px) { .guides { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } }

.guide {
  display: flex; flex-direction: column;
  padding: 1.35rem 1.3rem 1.2rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.guide:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blush-300); }
.guide__k { font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-600); margin-bottom: .4rem; }
.guide h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.guide p { font-size: .88rem; color: var(--muted); margin-bottom: 1rem; }
.guide__pick {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding: .75rem .9rem;
  border-radius: var(--r-sm); background: var(--blush-50); border: 1px solid var(--blush-200);
  text-decoration: none; color: var(--ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.guide__pick:hover { background: var(--blush-100); border-color: var(--rose-400); color: var(--ink); }
.guide__pick span { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.guide__pick strong { display: block; font-size: .92rem; color: var(--ink); }
.guide__pick svg { width: 18px; height: 18px; flex: none; color: var(--rose-600); transition: transform .2s var(--ease); }
.guide__pick:hover svg { transform: translateX(3px); }
.guide:nth-child(3n+2) .guide__pick { background: var(--mint-50); border-color: var(--mint-100); }
.guide:nth-child(3n) .guide__pick { background: var(--lilac-50); border-color: var(--lilac-100); }

.cycle { position: relative; display: grid; gap: 1rem; }
@media (min-width: 640px) { .cycle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .cycle { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .cycle::before {          /* line joining the four numbers */
    content: ""; position: absolute; top: 28px; left: 12%; right: 12%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--blush-300) 0 8px, transparent 8px 14px);
  }
}
.cycle__step { position: relative; text-align: center; padding: 0 .5rem 1.25rem; }
.cycle__num {
  position: relative; display: inline-grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 1rem; border-radius: 0;
  background: var(--white); border: 2px solid var(--blush-300);
  box-shadow: 0 0 0 6px var(--white);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--rose-600);
}
.cycle__step:nth-child(2) .cycle__num { border-color: var(--line-2); color: var(--rose-600); }
.cycle__step:nth-child(3) .cycle__num { border-color: var(--line-2); color: var(--rose-600); }
.cycle__step:nth-child(4) .cycle__num { border-color: var(--line-2); color: var(--rose-600); }
.cycle__step h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.cycle__step p { max-width: 34ch; margin-inline: auto; font-size: .9rem; color: var(--muted); }

.travel {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 860px) { .travel { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.travel li {
  padding: .85rem 1rem; border-radius: var(--r);
  background: var(--soft); border: 1px dashed var(--blush-300);
}
.travel span { display: block; font-size: .76rem; color: var(--muted); }
.travel strong { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--ink); }

/* ==========================================================================
   17. FOOTER + FLOATING ACTIONS
   ========================================================================== */
/* Black footer. Headings switch to the serif display face; links and
   contact details are set larger than before so they read easily. */
.footer {
  position: relative;
  padding-block: clamp(3rem, 7vw, 4.75rem) 1.75rem;
  background:
    radial-gradient(600px 260px at 100% 0%, rgba(255, 63, 108, .08), transparent 70%),
    #0E0B0D;
  color: rgba(255, 255, 255, .70);
  font-size: 1rem; line-height: 1.6;
}
.footer::before {          /* thin rose line along the top edge */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--rose-500);
}
.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1.3fr 1.3fr; gap: 3rem; } }

.footer__brand svg { width: 190px; height: auto; color: var(--white); margin-bottom: 1rem; }
/* CSS beats the SVG presentation attribute, so the subline can be tinted here. */
.footer__brand svg text:last-of-type { fill: var(--rose-400); }
.footer__brand p {
  max-width: 38ch;
  font-family: var(--font-display); font-size: 1.08rem; font-style: italic; line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.footer h2 {
  position: relative;
  margin-bottom: 1.15rem; padding-bottom: .6rem;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--white);
}
.footer h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; border-radius: 0; background: var(--rose-400);
}

.footer ul { display: grid; gap: .6rem; }
/* Long link lists go two-up on phones so the footer is not a long column. */
.footer nav ul { grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
@media (min-width: 1000px) { .footer nav ul { grid-template-columns: 1fr; gap: .5rem; } }

.footer a {
  color: rgba(255, 255, 255, .74); text-decoration: none;
  font-size: .96rem; transition: color .2s var(--ease);
}
.footer a:hover { color: var(--rose-400); }

.footer__contact li { color: var(--white); font-size: .98rem; }
.footer__contact a { color: var(--white); font-weight: 600; }
.footer__contact .label {
  display: block; margin-bottom: .1rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose-400);
}

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  margin-top: 2.75rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem; color: rgba(255, 255, 255, .5);
}
.footer__bottom p { margin: 0; }
:where(.footer) :focus-visible { outline-color: var(--rose-400); }

/* Floating contact buttons — blue call above green WhatsApp, bottom right */
.float-cta {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 95;
  display: flex; flex-direction: column; gap: 12px;
}
.float-cta__btn {
  position: relative; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  color: #fff; text-decoration: none;
  transition: transform .22s var(--ease);
}
.float-cta__btn:hover { transform: scale(1.08); color: #fff; }
.float-cta__btn svg { width: 28px; height: 28px; fill: currentColor; }
.float-cta__btn--call svg { width: 24px; height: 24px; }
.float-cta__btn--wa   { background: #25D366; box-shadow: 0 6px 18px rgba(37, 211, 102, .45); }
.float-cta__btn--call { background: #1E6FE8; box-shadow: 0 6px 18px rgba(30, 111, 232, .4); }
/* Soft pulse ring so the buttons catch the eye */
.float-cta__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: inherit; animation: cta-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
.float-cta__btn--call::before { animation-delay: 1.2s; }
@keyframes cta-ping { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 600px) {
  .float-cta { right: 12px; gap: 10px; }
  .float-cta__btn { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .float-cta__btn::before { animation: none; opacity: 0; } }

/* Side tabs — vertical tabs pinned to the screen edges (Myntra style) */
.side-tab {
  position: fixed; top: 50%; z-index: 94;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1rem .6rem;
  color: var(--white); text-decoration: none; border-radius: 0;
  font-family: "Poppins", var(--font-sans); font-size: .85rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  translate: 0 -50%;
  transition: padding .2s var(--ease), background-color .2s var(--ease);
}
.side-tab:hover { color: var(--white); }
.side-tab__text { writing-mode: vertical-rl; transform: rotate(180deg); }
.side-tab__arrow { width: 0; height: 0; border-block: 6px solid transparent; }

.side-tab--left  { left: 0; }
.side-tab--left:hover  { padding-left: .8rem; }
.side-tab--left .side-tab__arrow  { border-left: 7px solid currentColor; }
.side-tab--right { right: 0; }
.side-tab--right:hover { padding-right: .8rem; }
.side-tab--right .side-tab__arrow { border-right: 7px solid currentColor; }

/* Couples offer: pink tab on the right */
.side-tab--offer { background: var(--rose-500); }
.side-tab--offer:hover { background: var(--rose-700); }

/* Floating gallery button: dark pill, bottom left */
.gallery-fab {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 95;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .4rem 1.15rem .4rem .4rem;
  border-radius: 999px;
  background: #1C1D22; color: #fff; text-decoration: none;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gallery-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .34); }
.gallery-fab__icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(212, 175, 106, .6); background: rgba(212, 175, 106, .12); color: #D4AF6A;
}
.gallery-fab__icon svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .gallery-fab { left: 12px; } }
@media print { .gallery-fab { display: none !important; } }

@media (max-width: 600px) {
  /* Smaller and lower on phones so the tabs stay clear of the banner text */
  .side-tab { top: 58%; padding: .6rem .3rem; font-size: .62rem; gap: .35rem; letter-spacing: .04em; }
}

/* Scroll to top button */
.to-top {
  position: fixed; right: 21px; bottom: calc(148px + env(safe-area-inset-bottom)); z-index: 95;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--blush-200); border-radius: 0;
  background: var(--white); color: var(--rose-600); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .25s var(--ease), translate .25s var(--ease), visibility .25s, background-color .2s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--rose-600); color: var(--white); }
.to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
@media (max-width: 600px) { .to-top { right: 15px; bottom: calc(136px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   18. SCROLL REVEAL (driven by js/theme.js)
   ========================================================================== */
/* Uses the individual `translate` property, not `transform`, so it never
   fights the cards' own hover lift (which uses transform). --i staggers
   items in a grid; the hover transitions keep a zero delay. */
.js [data-reveal] {
  opacity: 0; translate: 0 26px;
  transition:
    opacity .7s var(--ease) calc(var(--i, 0) * 90ms),
    translate .7s var(--ease) calc(var(--i, 0) * 90ms),
    transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; translate: none; }
.js .section-head[data-reveal] { translate: 0 18px; }

/* ==========================================================================
   18b. MOTION
   --------------------------------------------------------------------------
   CSS only — no script, no library. Everything animates transform /
   translate / scale / opacity, which the GPU composites without layout.
   The H1, the intro paragraph and the hero photo animate position only,
   never opacity, so they are painted at once and LCP is not delayed.
   All of it is switched off under prefers-reduced-motion (section 19).
   ========================================================================== */
@keyframes fadeUp   { from { opacity: 0; translate: 0 18px; } }
@keyframes rise     { from { translate: 0 22px; } }
@keyframes frameIn  { from { scale: .94; translate: 0 24px; } }
@keyframes popIn    { from { opacity: 0; scale: .8; } }
@keyframes bob      { 50% { translate: 0 -10px; } }
@keyframes kenburns { to { transform: scale(1.08) translate(-1.5%, -1%); } }
@keyframes drift    { to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes underline{ from { background-size: 0% 30%; } }
@keyframes ping     { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes marquee  { to { transform: translateX(-50%); } }
@keyframes shine    { 0% { translate: -130% 0; } 30%, 100% { translate: 130% 0; } }
@keyframes progress { to { scale: 1 1; } }

/* Hero entrance, staggered */
.hero__copy > .pill   { animation: fadeUp .7s var(--ease) .05s both; }
.hero h1              { animation: rise .9s var(--ease) .1s both; }
.hero__sub            { animation: rise .9s var(--ease) .2s both; }
.hero__copy .btn-row  { animation: fadeUp .7s var(--ease) .32s both; }
.hero__trust          { animation: fadeUp .7s var(--ease) .44s both; }
.hero__frame          { animation: frameIn 1.1s var(--ease) .08s both; }
.hero__frame img      { animation: kenburns 22s ease-in-out 1.2s infinite alternate; }
.stats li             { animation: fadeUp .7s var(--ease) both; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.stats li:nth-child(1) { animation-delay: .5s; }
.stats li:nth-child(2) { animation-delay: .6s; }
.stats li:nth-child(3) { animation-delay: .7s; }
.stats li:nth-child(4) { animation-delay: .8s; }
.stats li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Highlight under "Mahipalpur" draws in from the left */
.hero h1 em {
  background: linear-gradient(rgba(255, 63, 108, .3), rgba(255, 63, 108, .3)) no-repeat 0 88% / 100% 30%;
  animation: underline 1s var(--ease) .7s both;
}

/* Floating cards pop in, then bob gently (scale and translate are separate
   properties, so the two animations do not overwrite each other) */
.float--open  { animation: popIn .6s var(--ease) .75s both, bob 6s ease-in-out 1.4s infinite; }
.float--price { animation: popIn .6s var(--ease) .9s both,  bob 7s ease-in-out 1.6s infinite reverse; }

/* Soft colour blobs drift behind the hero */
.hero__blob--a { animation: drift 16s ease-in-out infinite alternate; }
.hero__blob--b { animation: drift 20s ease-in-out infinite alternate-reverse; }

/* "Open 24 hours" dot pulses like a live indicator */
.dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wa); animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}

/* Treatment ticker */
.ticker {
  overflow: hidden; padding-block: .95rem;
  background: var(--blush-100);
  border-block: 1px solid var(--blush-200);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; align-items: center; width: max-content; animation: marquee 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span {
  margin-right: 1.4rem; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-style: italic; color: var(--ink-2);
}
.ticker .ticker__dot { font-family: var(--font-sans); font-style: normal; font-size: .85rem; color: var(--rose-500); }

/* Light sweep across WhatsApp buttons on hover; the hero one also glints
   every few seconds to draw the eye to the main booking action */
.btn--wa { position: relative; overflow: hidden; isolation: isolate; }
.btn--wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  translate: -130% 0; transition: translate .7s var(--ease);
}
.btn--wa:hover::after { translate: 130% 0; }
.hero .btn--wa::after { animation: shine 4.5s ease-in-out 2s infinite; }

/* Card images ease in a touch more on hover */
.loc:hover .loc__media img { transform: scale(1.05); }
.loc__media img { transition: transform .5s var(--ease); }
.feature:hover .feature__icon { transform: rotate(-6deg) scale(1.06); }
.feature__icon { transition: transform .3s var(--ease); }
.step:hover .step__num, .cycle__step:hover .cycle__num { transform: scale(1.08); }
.step__num, .cycle__num { transition: transform .3s var(--ease); }

/* Reading-progress bar under the header — scroll-driven, no JavaScript.
   Browsers without scroll timelines simply do not show it. */
@supports (animation-timeline: scroll()) {
  .header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--rose-500);
    transform-origin: 0 50%; scale: 0 1;
    animation: progress linear both; animation-timeline: scroll(root);
  }
}

/* ==========================================================================
   19. PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; translate: none !important; }
  .ticker__track, .float, .hero__blob, .hero__frame img, .dot::after, .float-cta__btn::before, .hero .btn--wa::after, .header::after { animation: none !important; }
  .header::after { display: none; }
  .hero__video { display: none; }
  .hero__bg { background: url("../assets/spa/hero-banner-720.webp") center / cover no-repeat; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

@media print {
  .topbar, .header, .drawer, .float-cta, .hero__visual, .hero__blob, .hero__bg, .side-tab, .to-top { display: none !important; }
  body { padding: 0; }
  .faq__a { grid-template-rows: 1fr !important; }
  .section { content-visibility: visible; }
}

/* Prices and numbers in Poppins bold: Playfair Display draws old-style digits
   (uneven heights), and Myntra shows prices in a bold sans-serif */
.float strong,
.stats strong,
.tcard__rate,
.svc__price,
.plan__price,
.rates td:last-child,
.step__num,
.cycle__num { font-family: var(--font-sans); font-weight: 700; }