/* =========================================================
   Ayu Veda Spa — Saket, New Delhi
   Multi-page stylesheet: home / about / services / contact
   Palette: pine green · warm cream · copper
   ========================================================= */

:root{
  --ink:      #16211c;
  --ink-2:    #0e1613;
  --ink-3:    #24322b;
  --copper:   #d8ab5e;   /* logo gold — mid stop of the mark */
  --copper-d: #9d7431;   /* logo gold — shadow stop */
  --sage:     #8fa38f;
  --paper:    #faf8f4;
  --cream:    #f2ece1;
  --tint:     #f2eee6;
  --muted:    #6d7a72;
  --line:     rgba(22,33,28,.13);
  --line-lt:  rgba(242,236,225,.18);

  --display: "Marcellus", Georgia, "Times New Roman", serif;
  --body:    "Karla", Helvetica, Arial, sans-serif;

  --shell: 1240px;
  --pad: clamp(20px, 5vw, 60px);
  --sp: clamp(64px, 9vw, 128px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --r: 3px;
  --hdr-h: 96px;
}

html[lang="hi"]{
  --display: "Noto Sans Devanagari", Georgia, serif;
  --body:    "Noto Sans Devanagari", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--copper); color:#fff; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------------- Type ---------------- */
.h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.16;
  margin:.24em 0 .5em;
}
.lede{ max-width:56ch; color:var(--muted); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.tag,
.eyebrow{
  display:inline-block;
  position:relative;
  padding-left:26px;
  font-size:.67rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--copper);
}
.tag::before,
.eyebrow::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:16px; height:1px;
  background:currentColor;
}
html[lang="hi"] .tag,
html[lang="hi"] .eyebrow{ letter-spacing:.08em; font-size:.82rem; }

.head{ margin-bottom:clamp(32px,4.5vw,58px); }
.head--mid{ text-align:center; max-width:62ch; margin-inline:auto; }
.head--mid .tag{ padding-left:0; }
.head--mid .tag::before{ display:none; }
.head--mid .lede{ margin-inline:auto; }
.head--row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.head--row .h2{ margin-bottom:0; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:1.02em 2em;
  font-family:var(--body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .25s var(--ease);
}
html[lang="hi"] .btn{ letter-spacing:.04em; font-size:.85rem; font-weight:500; }
.btn:active{ transform:translateY(1px); }

.btn--solid{ background:var(--copper); color:#fff; border-color:var(--copper); }
.btn--solid:hover{ background:var(--ink); border-color:var(--ink); }

.btn--ghost{ background:transparent; color:var(--cream); border-color:rgba(242,236,225,.45); }
.btn--ghost:hover{ background:var(--cream); border-color:var(--cream); color:var(--ink); }

.btn--line{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--line:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

.btn--line-lite{ background:transparent; color:var(--cream); border-color:rgba(242,236,225,.4); }
.btn--line-lite:hover{ background:var(--cream); border-color:var(--cream); color:var(--ink); }

.btn--pill{
  border-radius:999px;
  padding:.7em 1.4em;
  font-size:.64rem;
  background:var(--copper);
  color:#fff;
  border-color:var(--copper);
}
.btn--pill:hover{ background:var(--ink); border-color:var(--ink); }
.btn--full{ width:100%; }

.arrow{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  margin-top:1.4em;
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--copper);
  border-bottom:1px solid rgba(194,118,74,.35);
  padding-bottom:.45em;
  transition:gap .3s var(--ease), color .3s var(--ease);
}
html[lang="hi"] .arrow{ letter-spacing:.04em; font-size:.85rem; font-weight:500; }
.arrow svg{ width:18px; height:18px; flex:none; }
.arrow:hover{ gap:1.1em; color:var(--ink); }

/* ---------------- Header ---------------- */
.hdr{
  position:fixed;
  left:0; right:0; top:0;
  z-index:100;
  height:var(--hdr-h);
  display:flex;
  align-items:center;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.hdr.is-stuck{
  height:76px;
  background:rgba(250,248,244,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
}
.hdr__in{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{ display:flex; align-items:center; gap:.7em; color:var(--cream); transition:color .4s var(--ease); }
.hdr.is-stuck .brand,
.hdr.is-open .brand{ color:var(--ink); }
.brand__mark{ width:32px; height:32px; flex:none; color:var(--copper); }
.brand__txt b{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:1.05rem;
  letter-spacing:.34em;
  line-height:1;
}
.brand__txt i{
  display:block;
  font-style:normal;
  font-size:.53rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.66;
  margin-top:.55em;
}
html[lang="hi"] .brand__txt i{ letter-spacing:.06em; font-size:.66rem; }

.nav{ display:flex; align-items:center; gap:clamp(18px,3vw,42px); }
.nav__list{
  display:flex; align-items:center;
  gap:clamp(16px,2.4vw,32px);
  list-style:none; margin:0; padding:0;
}
.nav__list a{
  position:relative;
  display:inline-block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cream);
  padding-block:.4em;
  transition:color .3s var(--ease);
}
html[lang="hi"] .nav__list a{ letter-spacing:.03em; font-size:.88rem; font-weight:500; }
.hdr.is-stuck .nav__list a{ color:var(--ink); }
.nav__list a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--copper);
  transition:width .35s var(--ease);
}
.nav__list a:hover::after,
.nav__list a.is-here::after{ width:100%; }
.nav__list a:hover,
.nav__list a.is-here{ color:var(--copper); }

.nav__meta{ display:flex; align-items:center; gap:16px; }
.lang{ display:flex; align-items:center; gap:7px; }
.lang__btn{
  background:none; border:0; cursor:pointer;
  font-size:.66rem; font-weight:600; letter-spacing:.1em;
  color:rgba(242,236,225,.62);
  padding:2px 0;
  transition:color .3s var(--ease);
}
.hdr.is-stuck .lang__btn{ color:rgba(22,33,28,.5); }
.lang__btn.is-active,
.lang__btn:hover{ color:var(--copper); }
.lang__sep{ width:1px; height:11px; background:currentColor; opacity:.3; color:var(--cream); }
.hdr.is-stuck .lang__sep{ color:var(--ink); }

.burger{
  display:none;
  width:42px; height:42px;
  background:none; border:0; cursor:pointer;
  padding:0;
  place-content:center;
  justify-items:end;
  gap:6px;
}
.burger span{
  display:block; height:1px;
  background:var(--cream);
  transition:transform .35s var(--ease), opacity .25s, width .35s var(--ease), background-color .4s;
}
.burger span:nth-child(1){ width:24px; }
.burger span:nth-child(2){ width:17px; }
.burger span:nth-child(3){ width:24px; }
.hdr.is-stuck .burger span,
.hdr.is-open .burger span{ background:var(--ink); }
.burger[aria-expanded="true"] span:nth-child(1){ width:24px; transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ width:24px; transform:translateY(-7px) rotate(-45deg); }

/* ---------------- Home hero ---------------- */
.hero{
  position:relative;
  min-height:min(100svh, 860px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:var(--cream);
  overflow:hidden;
  isolation:isolate;
  padding-top:calc(var(--hdr-h) + 40px);
}
.hero__img{
  position:absolute; inset:0;
  z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.hero__veil{
  position:absolute; inset:0;
  z-index:-1;
  background:
    linear-gradient(96deg, rgba(11,18,15,.92) 0%, rgba(11,18,15,.72) 44%, rgba(11,18,15,.40) 100%),
    linear-gradient(to top, rgba(11,18,15,.85) 0%, transparent 42%);
}
.hero__in{ padding-bottom:clamp(52px,7vw,88px); }
.hero__h{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem, 8vw, 5.6rem);
  line-height:1.02;
  margin:.3em 0 .34em;
  max-width:15ch;
}
.hero__h span{ display:block; }
.hero__h em{
  display:block;
  font-style:italic;
  color:var(--copper);
}
html[lang="hi"] .hero__h em{ font-style:normal; }
.hero__p{
  max-width:48ch;
  color:rgba(242,236,225,.78);
  font-size:1.02rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2.2em; }

.hero__bar{
  border-top:1px solid var(--line-lt);
  background:rgba(11,18,15,.5);
  backdrop-filter:blur(6px);
}
.hero__bar-in{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding-block:clamp(15px,2.2vw,24px);
}
.hero__bar-in span{ display:grid; gap:.12em; }
.hero__bar-in b{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.05rem,2.1vw,1.5rem);
  color:var(--copper);
}
.hero__bar-in i{
  font-style:normal;
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(242,236,225,.58);
}
html[lang="hi"] .hero__bar-in i{ letter-spacing:.03em; font-size:.8rem; }

/* ---------------- Inner page hero ---------------- */
.phero{
  position:relative;
  min-height:clamp(320px, 46vh, 460px);
  display:flex;
  align-items:flex-end;
  color:var(--cream);
  overflow:hidden;
  isolation:isolate;
  padding-top:var(--hdr-h);
}
.phero__img{
  position:absolute; inset:0;
  z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 40%;
}
.phero__veil{
  position:absolute; inset:0;
  z-index:-1;
  background:
    linear-gradient(96deg, rgba(11,18,15,.92) 0%, rgba(11,18,15,.74) 50%, rgba(11,18,15,.5) 100%),
    linear-gradient(to top, rgba(11,18,15,.8), transparent 55%);
}
.phero__in{ padding-block:clamp(38px,5vw,64px); }
.phero__h{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 5.4vw, 3.6rem);
  line-height:1.1;
  margin:.28em 0 .3em;
}
.phero__p{ max-width:52ch; color:rgba(242,236,225,.76); margin:0; }

/* ---------------- Sections ---------------- */
.sec{ padding-block:var(--sp); }
.sec--tint{ background:var(--tint); }
.sec--dark{ background:var(--ink); color:var(--cream); }
.sec--dark .lede{ color:rgba(242,236,225,.7); }

.split{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(34px,6vw,88px);
  align-items:center;
}
.split--flip{ grid-template-columns:1.08fr .92fr; }
.split--form{ grid-template-columns:.9fr 1.1fr; align-items:start; }
.split__txt p{ color:var(--muted); max-width:54ch; }
.sec--dark .split__txt p{ color:rgba(242,236,225,.72); }
.split__art{ position:relative; }

.frame{
  margin:0;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--cream);
}
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame--tall{ aspect-ratio:4/5; }
.frame--float{
  position:absolute;
  right:-9%;
  bottom:-10%;
  width:48%;
  aspect-ratio:3/4;
  border:7px solid var(--paper);
  box-shadow:0 20px 46px rgba(22,33,28,.16);
}
.sec--tint .frame--float{ border-color:var(--tint); }

/* ---------------- Grids ---------------- */
.grid{ display:grid; gap:clamp(16px,2.2vw,26px); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(22,33,28,.12); }
.card__pic{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink); }
.card__pic img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease);
}
.card:hover .card__pic img{ transform:scale(1.06); }
.card__time{
  position:absolute;
  left:12px; bottom:12px;
  background:rgba(11,18,15,.7);
  backdrop-filter:blur(4px);
  color:var(--cream);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.45em .85em;
  border-radius:999px;
}
html[lang="hi"] .card__time{ letter-spacing:.02em; font-size:.76rem; }
.card__body{ padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; flex:1; }
.card__ttl{
  font-family:var(--display);
  font-weight:400;
  font-size:1.32rem;
  margin:0 0 .4em;
}
.card__desc{ color:var(--muted); font-size:.93rem; margin:0 0 1.3em; }
.card__foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:1em;
  border-top:1px solid var(--line);
}
.card__price{ font-family:var(--display); font-size:1.24rem; }
.card__price small{
  display:block;
  font-family:var(--body);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
html[lang="hi"] .card__price small{ letter-spacing:.02em; font-size:.74rem; }

.tile{
  padding:clamp(22px,2.6vw,32px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.tile:hover{ border-color:var(--copper); transform:translateY(-3px); }
.tile__n{
  display:block;
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.2em;
  color:var(--copper);
  margin-bottom:1.2em;
}
.tile h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.24rem;
  margin:0 0 .45em;
}
.tile p{ margin:0; color:var(--muted); font-size:.93rem; }

.stats .stat{
  text-align:center;
  padding:clamp(20px,2.4vw,30px) 12px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
  display:grid;
  gap:.3em;
}
.stat b{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,4.4vw,2.9rem);
  line-height:1;
  color:var(--copper);
}
.stat span{
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
html[lang="hi"] .stat span{ letter-spacing:.02em; font-size:.8rem; }

/* ---------------- Steps ---------------- */
.steps{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,34px);
}
.step{
  position:relative;
  padding-top:32px;
  border-top:1px solid var(--line-lt);
}
.step::before{
  content:"";
  position:absolute;
  left:0; top:-4px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--copper);
}
.step__n{
  display:block;
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.22em;
  color:var(--copper);
  margin-bottom:.9em;
}
.step h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.22rem;
  margin:0 0 .45em;
}
.step p{ margin:0; color:rgba(242,236,225,.68); font-size:.93rem; }

/* ---------------- Ticks ---------------- */
.ticks{ list-style:none; margin:1.8em 0 0; padding:0; display:grid; gap:.65em; }
.ticks li{ position:relative; padding-left:1.8em; font-size:.95rem; }
.ticks li::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:9px; height:9px;
  border:1px solid var(--copper);
  border-radius:50%;
}

/* ---------------- Gallery ---------------- */
.gal{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.8vw,20px);
}
.gal__i{
  margin:0;
  overflow:hidden;
  border-radius:var(--r);
  aspect-ratio:3/4;
  background:var(--ink);
}
.gal__i--wide{ grid-column:span 2; aspect-ratio:auto; }
.gal__i img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.gal__i:hover img{ transform:scale(1.05); }

/* fact strip — used inside the therapy stage sections */
.fact{ flex:1 1 auto; min-width:118px; padding:.9em 1.2em .9em 0; }
.fact + .fact{ border-left:1px solid var(--line); padding-left:1.2em; }
.fact__k{
  display:block;
  font-size:.56rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4em;
}
html[lang="hi"] .fact__k{ letter-spacing:.02em; font-size:.76rem; }
.fact__v{ display:block; font-family:var(--display); font-size:1.28rem; line-height:1; }

/* ---------------- Tabs + menu ---------------- */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,3.4vw,42px); }
.tab{
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  padding:.68em 1.5em;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  transition:.3s var(--ease);
}
html[lang="hi"] .tab{ letter-spacing:.02em; font-size:.84rem; font-weight:500; }
.tab:hover{ color:var(--ink); border-color:var(--ink); }
.tab.is-active{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

.menu{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,5vw,68px); }
.menu__i{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:.35em .9em;
  padding:1.25em 0;
  border-bottom:1px solid var(--line);
  animation:fadeUp .4s var(--ease) both;
}
.menu__x{ font-family:var(--display); font-size:.72rem; letter-spacing:.14em; color:var(--copper); }
.menu__n{ font-family:var(--display); font-size:1.18rem; }
.menu__d{
  display:block;
  font-family:var(--body);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.4em;
}
html[lang="hi"] .menu__d{ letter-spacing:.02em; font-size:.76rem; }
.menu__p{ font-family:var(--display); font-size:1.18rem; white-space:nowrap; }
.menu__t{ grid-column:2/-1; margin:.35em 0 0; color:var(--muted); font-size:.9rem; max-width:46ch; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.note{
  margin-top:2.2em;
  font-size:.88rem;
  color:var(--muted);
  border-left:2px solid var(--copper);
  padding-left:1.1em;
  max-width:60ch;
}

/* ---------------- Contact cards ---------------- */
.ccard{
  padding:clamp(24px,2.8vw,34px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  display:flex;
  flex-direction:column;
}
.ccard__ico{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--copper);
  margin-bottom:1.3em;
}
.ccard__ico svg{ width:20px; height:20px; }
.ccard h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.24rem;
  margin:0 0 .6em;
}
.ccard p{ color:var(--muted); font-size:.95rem; }
.ccard a:not(.arrow){ border-bottom:1px solid rgba(194,118,74,.35); transition:color .3s; }
.ccard a:not(.arrow):hover{ color:var(--copper); }
.ccard .arrow{ margin-top:auto; padding-top:1.4em; align-self:flex-start; }

.hours{ list-style:none; margin:0; padding:0; display:grid; gap:.42em; }
.hours li{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:.93rem;
  color:var(--muted);
  padding-bottom:.42em;
  border-bottom:1px solid var(--line);
}
.hours li:last-child{ border-bottom:0; }
.hours li.is-today{ color:var(--ink); font-weight:600; }
.hours li.is-today b{ color:var(--copper); }
.hours b{ font-weight:500; }

/* ---------------- Forms ---------------- */
.panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(24px,3.2vw,40px);
}
.fld{ display:grid; gap:.45em; margin-bottom:1.1em; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1em; }
.fld label{
  font-size:.59rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
html[lang="hi"] .fld label{ letter-spacing:.02em; font-size:.8rem; font-weight:500; }
.fld input,
.fld select,
.fld textarea{
  font-family:var(--body);
  font-size:.95rem;
  font-weight:300;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:.7em 0;
  width:100%;
  transition:border-color .3s var(--ease);
  appearance:none;
}
.fld select{
  background-image:linear-gradient(45deg,transparent 50%,var(--copper) 50%),linear-gradient(135deg,var(--copper) 50%,transparent 50%);
  background-position:calc(100% - 11px) 1.3em, calc(100% - 6px) 1.3em;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:24px;
  cursor:pointer;
}
.fld textarea{ resize:vertical; }
.fld input::placeholder,
.fld textarea::placeholder{ color:rgba(109,122,114,.5); }
.fld input:focus,
.fld select:focus,
.fld textarea:focus{ outline:none; border-bottom-color:var(--copper); }
.fld input.is-bad,
.fld textarea.is-bad{ border-bottom-color:#b8503a; }

.total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:.3em 0 1.3em;
  padding-top:.9em;
  border-top:1px solid var(--line);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.total b{
  font-family:var(--display);
  font-size:1.45rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
}
html[lang="hi"] .total{ letter-spacing:.02em; font-size:.84rem; }
.note--form{ margin-top:1em; color:var(--copper); }

/* ---------------- CTA band ---------------- */
.band{ background:var(--ink); color:var(--cream); padding-block:clamp(48px,6vw,84px); }
.band__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.band .h2{ margin:0 0 .3em; }
.band p{ margin:0; color:rgba(242,236,225,.7); max-width:52ch; }
.band__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------------- Map ---------------- */
.mapwrap{ position:relative; }
.map{
  position:relative;
  height:clamp(220px,28vw,330px);
  background:linear-gradient(150deg,#1c2a23,#101a15);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.map__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(194,118,74,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,118,74,.12) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%, #000 28%, transparent 100%);
          mask-image:radial-gradient(72% 72% at 50% 50%, #000 28%, transparent 100%);
}
.map__road{ position:absolute; background:rgba(242,236,225,.1); }
.map__road--a{ left:0; right:0; top:52%; height:2px; transform:rotate(-6deg); }
.map__road--b{ top:0; bottom:0; left:38%; width:2px; transform:rotate(9deg); }
.map__pin{ position:relative; width:14px; height:14px; border-radius:50%; background:var(--copper); }
.map__pin span{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--copper);
  animation:ping 2.8s ease-out infinite;
}
@keyframes ping{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(6.5); opacity:0; } }
.map__cta{
  position:absolute;
  left:50%; bottom:26px;
  transform:translateX(-50%);
}

/* ---------------- Footer ---------------- */
.ftr{ background:var(--ink-2); color:rgba(242,236,225,.68); padding:clamp(48px,6vw,76px) 0 26px; }
.ftr__grid{
  display:grid;
  grid-template-columns:1.5fr .8fr 1.2fr 1fr;
  gap:clamp(24px,3vw,44px);
  padding-bottom:clamp(28px,4vw,46px);
  border-bottom:1px solid var(--line-lt);
}
.ftr__col{ display:grid; gap:.5em; align-content:start; }
.ftr__brand{
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.34em;
  color:var(--cream);
  margin-bottom:.4em;
}
.ftr__col p{ font-size:.9rem; opacity:.72; margin:0; }
.ftr__col h4{
  font-family:var(--body);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--copper);
  margin:0 0 .5em;
}
html[lang="hi"] .ftr__col h4{ letter-spacing:.03em; font-size:.8rem; font-weight:500; }
.ftr__col a{ font-size:.9rem; transition:color .3s; }
nav.ftr__col a{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
html[lang="hi"] nav.ftr__col a{ letter-spacing:.02em; font-size:.9rem; }
.ftr__col a:hover{ color:var(--copper); }
.ftr__legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  padding-top:20px;
  font-size:.72rem;
  opacity:.45;
}
.socials{ display:flex; gap:10px; margin-top:1em; }
.socials a{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--line-lt);
  border-radius:50%;
  color:var(--cream);
  transition:.3s var(--ease);
}
.socials svg{ width:17px; height:17px; }
.socials a:hover{ background:var(--copper); border-color:var(--copper); color:#fff; }

/* ---------------- Floating WhatsApp ---------------- */
.wa{
  position:fixed;
  right:20px; bottom:20px;
  z-index:90;
  width:52px; height:52px;
  border-radius:50%;
  background:#1f8f5f;
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa svg{ width:27px; height:27px; }
.wa:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 32px rgba(0,0,0,.3); }

/* ---------------- Reveal ---------------- */
.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .ftr__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:920px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .split,
  .split--flip,
  .split--form{ grid-template-columns:1fr; }
  .split--flip .split__art{ order:-1; }
  .split__art{ max-width:460px; }
  .frame--float{ right:-4%; width:44%; }
  .menu{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal__i--wide{ grid-column:span 2; aspect-ratio:16/10; }
}

@media (max-width:860px){
  .burger{ display:grid; }
  .nav{
    position:fixed;
    inset:0;
    z-index:1;
    flex-direction:column;
    justify-content:center;
    gap:34px;
    background:var(--paper);
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__list{ flex-direction:column; gap:20px; text-align:center; }
  .nav__list a,
  .hdr.is-stuck .nav__list a{ color:var(--ink); font-size:1.05rem; letter-spacing:.12em; }
  .nav__meta{ flex-direction:column; gap:20px; }
  .lang__btn,
  .hdr.is-stuck .lang__btn{ color:rgba(22,33,28,.55); font-size:.82rem; }
  .lang__sep{ color:var(--ink); }
  .hdr.is-open{ background:var(--paper); }
  .hero__bar-in{ grid-template-columns:repeat(2,1fr); gap:16px 12px; }
}

@media (max-width:620px){
  .grid--3,
  .grid--4,
  .steps,
  .frow,
  .gal{ grid-template-columns:1fr; }
  .gal__i--wide{ grid-column:span 1; }
  .ftr__grid{ grid-template-columns:1fr; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .band__in{ flex-direction:column; align-items:flex-start; }
  .band__cta{ width:100%; }
  .band__cta .btn{ flex:1; }
  .frame--float{ position:static; width:100%; margin-top:14px; border:0; box-shadow:none; aspect-ratio:16/10; }
  .split__art{ max-width:none; }
  .fact + .fact{ border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .head--row{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   Therapy stage (services page)
   One full-height section per therapy, a fixed rail to jump
   between them, and a progress line that fills as you scroll.
   ========================================================= */
.stage{ position:relative; }

.rsec{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  color:var(--cream);
  overflow:hidden;
  isolation:isolate;
  scroll-snap-align:center;
}
.rsec__img{
  position:absolute; inset:0;
  z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.04);
  transition:transform 1.6s var(--ease);
}
.rsec:hover .rsec__img{ transform:scale(1.08); }
.rsec__veil{
  position:absolute; inset:0;
  z-index:-1;
  background:
    linear-gradient(98deg, rgba(11,18,15,.94) 0%, rgba(11,18,15,.72) 46%, rgba(11,18,15,.42) 100%),
    linear-gradient(to top, rgba(11,18,15,.6), transparent 50%);
}

.rsec__in{
  padding-block:clamp(96px,12vw,140px);
  padding-right:clamp(60px,10vw,190px);   /* keep clear of the rail */
}
.rsec__n{
  display:block;
  font-family:var(--display);
  font-size:.88rem;
  letter-spacing:.28em;
  color:var(--copper);
  margin-bottom:1.3em;
}
.rsec__n i{ font-style:normal; opacity:.45; }
.rsec__ttl{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,5.6vw,4.2rem);
  line-height:1.05;
  margin:0 0 .32em;
  max-width:16ch;
}
.rsec__desc{
  max-width:48ch;
  color:rgba(242,236,225,.78);
  font-size:1.02rem;
  margin:0 0 2em;
}
.rsec__steps{
  list-style:none;
  margin:0 0 2.1em;
  padding:0;
  display:grid;
  gap:.6em;
  max-width:46ch;
}
.rsec__steps li{
  position:relative;
  padding-left:1.9em;
  font-size:.94rem;
  color:rgba(242,236,225,.86);
}
.rsec__steps li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:11px; height:1px;
  background:var(--copper);
}
.rsec__facts{
  display:flex;
  flex-wrap:wrap;
  border-block:1px solid var(--line-lt);
  margin-bottom:2.1em;
  max-width:44rem;
}
.rsec__facts .fact{ flex:1 1 auto; min-width:118px; }
.rsec__facts .fact__k{ color:rgba(242,236,225,.5); }
.rsec__facts .fact__v{ color:var(--cream); }
.rsec__facts .fact + .fact{ border-left:1px solid var(--line-lt); }
.rsec__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- side rail ---- */
.rail{
  position:fixed;
  right:clamp(14px,2.4vw,34px);
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:grid;
  justify-items:end;
  gap:16px;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.stage.is-live .rail{ opacity:1; visibility:visible; }

.rail__cap{
  font-size:.54rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(242,236,225,.42);
}
html[lang="hi"] .rail__cap{ letter-spacing:.05em; font-size:.72rem; }

.rail__list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:13px;
  justify-items:end;
}
.rail__item{
  display:flex;
  align-items:center;
  gap:11px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color:rgba(242,236,225,.45);
  transition:color .3s var(--ease);
}
.rail__item i{
  order:2;
  font-style:normal;
  font-family:var(--display);
  font-size:.74rem;
  letter-spacing:.16em;
}
.rail__item span{
  order:1;
  font-size:.63rem;
  letter-spacing:.13em;
  white-space:nowrap;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width .45s var(--ease), opacity .3s var(--ease);
}
html[lang="hi"] .rail__item span{ letter-spacing:.02em; font-size:.8rem; }
.rail__item:hover span,
.rail__item.is-on span{ max-width:240px; opacity:1; }
.rail__item:hover,
.rail__item.is-on{ color:var(--copper); }

.rail__bar{
  display:block;
  width:1px; height:74px;
  background:rgba(242,236,225,.2);
  position:relative;
  margin-right:6px;
}
.rail__bar i{
  position:absolute; inset:0;
  background:var(--copper);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .2s linear;
}

/* ---- compact dots, phones ---- */
.dots{
  position:fixed;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:none;
  gap:9px;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s, visibility .4s;
}
.stage.is-live .dots{ opacity:1; visibility:visible; }
.dot{
  width:7px; height:7px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(242,236,225,.45);
  background:transparent;
  cursor:pointer;
  transition:.3s var(--ease);
}
.dot.is-on{ background:var(--copper); border-color:var(--copper); transform:scale(1.35); }

@media (max-width:1100px){
  .rail__item span{ display:none; }
}

@media (max-width:920px){
  .rsec__in{ padding-right:clamp(46px,9vw,90px); }
}

@media (max-width:620px){
  .rail{ display:none; }
  .dots{ display:grid; }
  .rsec__in{ padding-right:30px; }
  .rsec__facts{ flex-direction:column; }
  .rsec__facts .fact + .fact{
    border-left:0;
    border-top:1px solid var(--line-lt);
    padding-left:0;
  }
  .rsec__cta{ flex-direction:column; align-items:stretch; }
}

/* =========================================================
   Home-page polish: flush stage, scroll cue, count-up
   ========================================================= */

/* a section whose stage bleeds the full viewport width */
.sec--flush{ padding-bottom:0; }
.stage__after{
  display:flex;
  justify-content:center;
  padding-block:clamp(40px,5vw,66px);
}

/* scroll cue under the hero */
.cue{
  position:absolute;
  right:clamp(20px,5vw,60px);
  bottom:122px;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:.85em;
  color:rgba(242,236,225,.55);
  font-size:.56rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  transition:color .3s var(--ease);
}
.cue:hover{ color:var(--copper); }
.cue__line{
  width:1px; height:54px;
  background:linear-gradient(to bottom, transparent, rgba(242,236,225,.7));
  transform-origin:top;
  animation:cuePulse 2.4s ease-in-out infinite;
}
@keyframes cuePulse{
  0%,100%{ opacity:.3; transform:scaleY(.55); }
  50%    { opacity:1;  transform:scaleY(1); }
}
html[lang="hi"] .cue{ letter-spacing:.06em; font-size:.74rem; }

/* count-up numbers should not reflow while they animate */
[data-count]{ font-variant-numeric:tabular-nums; }

/* the hero image is transformed by JS — keep it from jittering */
.hero__img{ will-change:transform; }

@media (max-width:860px){
  .cue{ display:none; }
}

/* =========================================================
   Homepage components: top bar, stat band, badges,
   dark tiles, review score
   ========================================================= */

:root{ --top-h: 38px; }

/* ---- thin contact bar above the header ---- */
.topbar{
  position:fixed;
  left:0; right:0; top:0;
  z-index:101;
  height:var(--top-h);
  display:flex;
  align-items:center;
  background:var(--ink-2);
  color:rgba(242,236,225,.66);
  font-size:.7rem;
  transition:transform .4s var(--ease);
}
.topbar.is-up{ transform:translateY(-100%); }
.topbar__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topbar__note{ letter-spacing:.04em; }
.topbar__links{ display:flex; align-items:center; gap:14px; }
.topbar__links a{ transition:color .3s; }
.topbar__links a:hover{ color:var(--copper); }
.topbar__links i{ width:1px; height:11px; background:currentColor; opacity:.3; }

/* the header sits under the top bar, then slides up to replace it */
.hdr{ top:var(--top-h); transition:background-color .4s var(--ease), box-shadow .4s var(--ease),
                                   height .4s var(--ease), top .4s var(--ease); }
.hdr.is-stuck{ top:0; }
.hero,
.phero{ padding-top:calc(var(--hdr-h) + var(--top-h) + 36px); }
.phero{ padding-top:calc(var(--hdr-h) + var(--top-h)); }

/* ---- stat band under the hero ---- */
.statband{
  background:var(--ink);
  color:var(--cream);
  padding-block:clamp(30px,4vw,48px);
}
.statband__in{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.4vw,28px);
}
.sb{
  display:grid;
  gap:.25em;
  text-align:center;
  padding-inline:8px;
  border-left:1px solid var(--line-lt);
}
.sb:first-child{ border-left:0; }
.sb b{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  line-height:1;
  color:var(--copper);
}
.sb span{
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(242,236,225,.6);
}
html[lang="hi"] .sb span{ letter-spacing:.02em; font-size:.8rem; }

/* ---- "10+ years" badge over the welcome image ---- */
.badge{
  position:absolute;
  left:-14px; bottom:26px;
  z-index:3;
  background:var(--copper);
  color:#fff;
  padding:16px 20px;
  border-radius:var(--r);
  display:grid;
  gap:.1em;
  text-align:center;
  box-shadow:0 16px 34px rgba(22,33,28,.22);
}
.badge b{
  font-family:var(--display);
  font-weight:400;
  font-size:1.9rem;
  line-height:1;
}
.badge i{
  font-style:normal;
  font-size:.55rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.5;
  opacity:.9;
}
html[lang="hi"] .badge i{ letter-spacing:.02em; font-size:.72rem; }

/* ---- POPULAR badge on a service card ---- */
.card__badge{
  position:absolute;
  left:12px; top:12px;
  z-index:2;
  background:var(--copper);
  color:#fff;
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.45em .85em;
  border-radius:999px;
}
html[lang="hi"] .card__badge{ letter-spacing:.03em; font-size:.72rem; font-weight:500; }

/* ---- tiles on a dark section ---- */
.tile--dark{
  background:rgba(242,236,225,.04);
  border-color:var(--line-lt);
}
.tile--dark:hover{ border-color:var(--copper); background:rgba(242,236,225,.06); }
.tile--dark h3{ color:var(--cream); }
.tile--dark p{ color:rgba(242,236,225,.66); }
.tile__ico{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--line-lt);
  border-radius:50%;
  color:var(--copper);
  margin-bottom:1.2em;
}
.tile__ico svg{ width:21px; height:21px; }

/* ---- steps on a light section ---- */
.steps--light .step{ border-top-color:var(--line); }
.steps--light .step p{ color:var(--muted); }

/* ---- review score ---- */
.revwrap{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.rev p{ color:var(--muted); max-width:50ch; margin-bottom:1.8em; }
.score{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(26px,3.4vw,40px);
  text-align:center;
  display:grid;
  gap:.6em;
  justify-items:center;
}
.score__word{
  font-family:var(--display);
  font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--ink);
}
.score__stars{ display:flex; gap:5px; color:var(--copper); }
.score__stars svg{ width:22px; height:22px; }
.score__meta{ font-size:.9rem; color:var(--muted); }
.score__meta b{
  font-family:var(--display);
  font-weight:400;
  font-size:1.25rem;
  color:var(--ink);
}

@media (max-width:920px){
  .revwrap{ grid-template-columns:1fr; }
  .statband__in{ grid-template-columns:repeat(2,1fr); gap:22px 14px; }
  .sb:nth-child(odd){ border-left:0; }
}

@media (max-width:700px){
  .topbar__note{ display:none; }
  .topbar__in{ justify-content:center; }
}

@media (max-width:620px){
  .statband__in{ grid-template-columns:repeat(2,1fr); }
  .badge{ left:auto; right:10px; bottom:auto; top:10px; padding:12px 15px; }
  .badge b{ font-size:1.5rem; }
}

/* =========================================================
   Real logo + dark header
   The logo artwork is gold on a solid black plate, so it is
   blended with `screen`: over any dark surface the black
   drops out and only the gold remains. That means the header
   stays dark in every state, which also reads more premium.
   ========================================================= */

.brand{ padding-block:4px; }
.brand__logo{
  height:clamp(46px,5.6vw,68px);
  width:auto;
  display:block;
  mix-blend-mode:screen;
  transition:height .4s var(--ease);
}
.hdr.is-stuck .brand__logo{ height:clamp(38px,4.4vw,52px); }

/* header keeps a dark plate at every scroll position */
.hdr.is-stuck{
  background:rgba(14,22,19,.95);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(242,236,225,.12);
}
.hdr.is-stuck .nav__list a{ color:var(--cream); }
.hdr.is-stuck .nav__list a:hover,
.hdr.is-stuck .nav__list a.is-here{ color:var(--copper); }
.hdr.is-stuck .lang__btn{ color:rgba(242,236,225,.62); }
.hdr.is-stuck .lang__btn.is-active,
.hdr.is-stuck .lang__btn:hover{ color:var(--copper); }
.hdr.is-stuck .lang__sep{ color:var(--cream); }
.hdr.is-stuck .burger span{ background:var(--cream); }

/* footer wordmark */
.ftr__logo{
  width:clamp(150px,16vw,196px);
  height:auto;
  mix-blend-mode:screen;
  margin-bottom:.5em;
}

/* the scroll cue sits at the very bottom now that the hero has no stat bar */
.cue{ bottom:30px; }

@media (max-width:860px){
  /* mobile menu panel goes dark too, so the gold logo still reads */
  .nav{ background:var(--ink); }
  .nav__list a,
  .hdr.is-stuck .nav__list a{ color:var(--cream); }
  .lang__btn,
  .hdr.is-stuck .lang__btn{ color:rgba(242,236,225,.62); }
  .lang__sep,
  .hdr.is-stuck .lang__sep{ color:var(--cream); }
  .hdr.is-open{ background:transparent; }
  .hdr.is-open .burger span,
  .hdr.is-stuck .burger span{ background:var(--cream); }
}

/* =========================================================
   Therapy stage — contrast fix + big section numerals
   The interior photos vary a lot in brightness (the wallpaper
   room is very light), so the image is normalised with a
   filter first and then covered by a solid-ish veil. That way
   the copy keeps its contrast on every single photo.
   ========================================================= */

.rsec__img{
  filter:saturate(.82) contrast(1.05) brightness(.52);
}

.rsec__veil{
  background:
    linear-gradient(100deg, rgba(11,18,15,.95) 0%, rgba(11,18,15,.86) 42%, rgba(11,18,15,.62) 100%),
    linear-gradient(to top, rgba(11,18,15,.75) 0%, rgba(11,18,15,.2) 55%),
    radial-gradient(120% 90% at 12% 50%, rgba(11,18,15,.55), transparent 70%);
}

/* the big ghosted numeral — the section's "01 / 02 / 03" */
.rsec__big{
  position:absolute;
  right:clamp(90px,12vw,230px);
  top:50%;
  transform:translateY(-50%);
  z-index:-1;
  font-family:var(--display);
  font-size:clamp(9rem,26vw,24rem);
  line-height:.8;
  color:rgba(242,236,225,.055);
  letter-spacing:-.02em;
  pointer-events:none;
  user-select:none;
}

/* label above the title: OUR SERVICES  01 / 03 */
.rsec__n{
  display:inline-flex;
  align-items:center;
  gap:.9em;
  font-family:var(--body);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--copper);
  margin-bottom:1.5em;
}
.rsec__n i{
  font-style:normal;
  font-family:var(--display);
  font-weight:400;
  font-size:.95rem;
  letter-spacing:.16em;
  color:rgba(242,236,225,.55);
  padding-left:.9em;
  border-left:1px solid rgba(242,236,225,.25);
}
html[lang="hi"] .rsec__n{ letter-spacing:.06em; font-size:.82rem; font-weight:500; }

/* copy sits above the numeral */
.rsec__in{ position:relative; z-index:1; }
.rsec__ttl,
.rsec__desc,
.rsec__steps li{ text-shadow:0 1px 22px rgba(11,18,15,.5); }

@media (max-width:920px){
  .rsec__big{ right:clamp(40px,8vw,90px); font-size:clamp(7rem,30vw,14rem); }
}

@media (max-width:620px){
  .rsec__big{
    right:auto; left:var(--pad);
    top:auto; bottom:22px;
    transform:none;
    font-size:7rem;
    color:rgba(242,236,225,.07);
  }
}

/* =========================================================
   Fixes: transparent SVG logo, calmer hero, about section
   ========================================================= */

/* ---- logo is now inline SVG: transparent, so no blending ---- */
.brand__logo{
  height:clamp(44px,5.2vw,62px);
  width:auto;
  display:block;
  mix-blend-mode:normal;          /* the black plate is gone */
  overflow:visible;
}
.hdr.is-stuck .brand__logo{ height:clamp(36px,4.2vw,50px); }

.ftr__logo{
  height:auto;
  width:clamp(190px,20vw,240px);
  mix-blend-mode:normal;
  margin-bottom:.6em;
}

/* ---- hero: the storefront photo carries its own signage and posters,
        so it is pushed back hard and the text side is darkened ---- */
.hero__img{
  filter:saturate(.75) contrast(.95) brightness(.45);
  object-position:center 55%;
}
.hero__veil{
  background:
    linear-gradient(100deg, rgba(11,18,15,.94) 0%, rgba(11,18,15,.84) 40%, rgba(11,18,15,.55) 100%),
    linear-gradient(to top, rgba(11,18,15,.8) 0%, rgba(11,18,15,.15) 55%),
    radial-gradient(130% 95% at 8% 55%, rgba(11,18,15,.6), transparent 68%);
}

/* ---- about section, same language as the therapy sections ---- */
.rsec--about .rsec__n{
  font-family:var(--body);
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--copper);
}
.rsec--about .rsec__big{
  font-size:clamp(7rem,18vw,17rem);
  right:clamp(70px,10vw,180px);
}
.rsec--about .rsec__ttl{ max-width:18ch; }
.rsec--about .rsec__facts .fact__v{ font-size:1.6rem; }

@media (max-width:620px){
  .rsec--about .rsec__big{ font-size:5.5rem; }
}

/* =========================================================
   Guest review cards
   ========================================================= */

.rcard{
  display:flex;
  flex-direction:column;
  gap:1em;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.rcard:hover{
  transform:translateY(-4px);
  border-color:var(--copper);
  box-shadow:0 18px 40px rgba(22,33,28,.10);
}

.rcard__stars{ display:flex; gap:3px; color:var(--copper); }
.rcard__stars svg{ width:17px; height:17px; }

.rcard__txt{
  margin:0;
  flex:1;
  font-size:1rem;
  line-height:1.65;
  color:var(--ink);
}
.rcard__txt::before{
  content:"\201C";
  font-family:var(--display);
  font-size:2.2rem;
  line-height:0;
  color:var(--copper);
  opacity:.4;
  margin-right:.12em;
  vertical-align:-.25em;
}

.rcard__by{
  display:flex;
  align-items:center;
  gap:.8em;
  padding-top:1em;
  border-top:1px solid var(--line);
}
.rcard__pic{
  width:38px; height:38px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:var(--copper);
  font-family:var(--display);
  font-size:1.05rem;
  line-height:1;
}
.rcard__who{ display:grid; gap:.1em; flex:1; min-width:0; }
.rcard__who b{
  font-weight:600;
  font-size:.92rem;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rcard__who i{
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--muted);
}
.rcard__g{ width:18px; height:18px; flex:none; }

/* aggregate panel sits beside the heading */
.head--row .score{
  flex:none;
  min-width:230px;
  padding:clamp(20px,2.4vw,28px);
}

.rev__foot{
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,34px);
  flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,44px);
}
.rev__foot .arrow{ margin-top:0; }

@media (max-width:920px){
  .head--row .score{ width:100%; }
}

/* =========================================================
   Gold theme — matched to the logo
   The logo gold (#d8ab5e) is bright, which is right on the
   dark sections but too light to read on cream. So anything
   sitting on a light surface uses the deeper stop instead.
   ========================================================= */

:root{
  --gold-hi:   #f0d489;   /* logo highlight */
  --gold-deep: #8a6529;   /* readable on cream / paper */
}

/* ---- accent on LIGHT surfaces: use the deeper gold ---- */
.sec:not(.sec--dark) .tag,
.sec:not(.sec--dark) .eyebrow,
.arrow,
.tile:not(.tile--dark) .tile__n,
.stat b,
.menu__x,
.steps--light .step__n,
.ccard__ico,
.rcard__stars,
.rcard__pic,
.score__stars,
.fld label:focus-within,
.note--form{ color:var(--gold-deep); }

.sec:not(.sec--dark) .tag::before,
.sec:not(.sec--dark) .eyebrow::before,
.steps--light .step::before,
.note{ background:var(--gold-deep); }
.note{ background:none; border-left-color:var(--gold-deep); }

.arrow{ border-bottom-color:rgba(138,101,41,.35); }
.arrow:hover{ color:var(--ink); }
.ticks li::before,
.ccard__ico{ border-color:rgba(138,101,41,.45); }
.rcard__txt::before{ color:var(--gold-deep); }
.ccard a:not(.arrow){ border-bottom-color:rgba(138,101,41,.4); }
.ccard a:not(.arrow):hover,
.info-block a:hover{ color:var(--gold-deep); }
.tile:not(.tile--dark):hover{ border-color:var(--gold-deep); }
.rcard:hover{ border-color:var(--gold-deep); }
.card__more{ color:var(--gold-deep); border-bottom-color:var(--gold-deep); }

/* ---- gold buttons need dark text, not white ---- */
.btn--solid,
.btn--pill{
  background:var(--copper);
  border-color:var(--copper);
  color:var(--ink);
}
.btn--solid:hover,
.btn--pill:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--copper);
}

/* ---- gold plates need dark text too ---- */
.card__badge,
.badge{ background:var(--copper); color:var(--ink); }
.badge i{ opacity:.75; }

/* ---- selection + focus ---- */
::selection{ background:var(--copper); color:var(--ink); }
.fld input:focus,
.fld select:focus,
.fld textarea:focus{ border-bottom-color:var(--gold-deep); }

/* ---- the dark surfaces keep the bright logo gold ---- */
.sec--dark .tag,
.rsec__n,
.sb b,
.step__n,
.ftr__col h4,
.rail__item.is-on,
.tile--dark .tile__ico{ color:var(--copper); }
.dot.is-on{ background:var(--copper); border-color:var(--copper); }

/* =========================================================
   Spa image strip — a slow, seamless marquee under the hero
   The photo set is rendered twice and the track slides by
   exactly half its width, so the loop never shows a seam.
   ========================================================= */

.strip{
  background:var(--ink);
  padding-block:clamp(14px,1.8vw,22px);
  overflow:hidden;
  position:relative;
}

/* soft fade at both ends so tiles slide in and out, not pop */
.strip::before,
.strip::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:clamp(40px,8vw,140px);
  z-index:2;
  pointer-events:none;
}
.strip::before{ left:0;  background:linear-gradient(to right, var(--ink), transparent); }
.strip::after { right:0; background:linear-gradient(to left,  var(--ink), transparent); }

.strip__track{
  display:flex;
  gap:clamp(10px,1.4vw,18px);
  width:max-content;
  animation:strip 46s linear infinite;
}
.strip:hover .strip__track{ animation-play-state:paused; }

@keyframes strip{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - clamp(5px,.7vw,9px))); }
}

.strip__i{
  margin:0;
  flex:none;
  width:clamp(160px,19vw,280px);
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--ink-2);
}
.strip__i img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.9) brightness(.86);
  transition:filter .5s var(--ease), transform .7s var(--ease);
}
.strip__i:hover img{ filter:none; transform:scale(1.05); }

@media (max-width:620px){
  .strip__i{ width:clamp(140px,44vw,190px); }
  .strip__track{ animation-duration:34s; }
}

/* no motion: turn the marquee into a normal swipeable row */
@media (prefers-reduced-motion:reduce){
  .strip{ overflow-x:auto; }
  .strip__track{ animation:none; }
}

/* =========================================================
   Lighter treatment — let the photographs actually show
   The veils were tuned so heavily that the images read as
   flat dark panels. Now the darkening is concentrated on the
   side the text sits on, and the rest of the photo is left
   close to its real brightness.
   ========================================================= */

/* ---- hero ---- */
.hero__img{
  filter:saturate(.95) contrast(1.02) brightness(.82);
  object-position:center 50%;
}
.hero__veil{
  background:
    linear-gradient(100deg,
      rgba(11,18,15,.86) 0%,
      rgba(11,18,15,.66) 30%,
      rgba(11,18,15,.30) 62%,
      rgba(11,18,15,.10) 100%),
    linear-gradient(to top, rgba(11,18,15,.55) 0%, transparent 45%);
}

/* ---- therapy + about sections ---- */
.rsec__img{
  filter:saturate(.95) contrast(1.02) brightness(.86);
}
.rsec__veil{
  background:
    linear-gradient(100deg,
      rgba(11,18,15,.88) 0%,
      rgba(11,18,15,.70) 32%,
      rgba(11,18,15,.34) 64%,
      rgba(11,18,15,.12) 100%),
    linear-gradient(to top, rgba(11,18,15,.45) 0%, transparent 42%);
}

/* the copy keeps its contrast from a soft shadow rather than a heavy veil */
.rsec__ttl,
.rsec__desc,
.rsec__steps li,
.hero__h,
.hero__p{ text-shadow:0 2px 18px rgba(11,18,15,.85), 0 1px 3px rgba(11,18,15,.6); }

/* the ghosted numeral needs a touch more presence on a brighter photo */
.rsec__big{ color:rgba(242,236,225,.09); }

/* ---- page heroes on the inner pages ---- */
.phero__img{ filter:saturate(.95) brightness(.8); }
.phero__veil{
  background:
    linear-gradient(100deg,
      rgba(11,18,15,.88) 0%,
      rgba(11,18,15,.68) 34%,
      rgba(11,18,15,.34) 70%,
      rgba(11,18,15,.14) 100%),
    linear-gradient(to top, rgba(11,18,15,.6), transparent 55%);
}
.phero__h,
.phero__p{ text-shadow:0 2px 18px rgba(11,18,15,.85); }

/* ---- image strip: tiles were dimmed, show them properly ---- */
.strip__i img{ filter:saturate(.98) brightness(.97); }
.strip__i:hover img{ filter:none; }

/* =========================================================
   Floating quick-contact stack — WhatsApp above, Call below
   ========================================================= */

.fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:90;
  display:grid;
  gap:12px;
  justify-items:end;
}

.fab__b{
  position:relative;
  width:54px; height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.fab__b svg{ width:27px; height:27px; }
.fab__b:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 15px 32px rgba(0,0,0,.32); }

.fab__b--wa{ background:#1f8f5f; }
.fab__b--wa:hover{ background:#1a7a51; }

.fab__b--call{ background:var(--copper); color:var(--ink); }
.fab__b--call:hover{ background:var(--gold-hi); }

/* label slides out on hover */
.fab__tip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  background:var(--ink);
  color:var(--cream);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.62em 1em;
  border-radius:var(--r);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
html[lang="hi"] .fab__tip{ letter-spacing:.03em; font-size:.78rem; font-weight:500; }
.fab__b:hover .fab__tip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* a soft pulse on the call button so it reads as the primary action */
.fab__b--call::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--copper);
  animation:fabPing 2.8s ease-out infinite;
  pointer-events:none;
}
@keyframes fabPing{
  0%   { transform:scale(1);    opacity:.75; }
  70%  { transform:scale(1.55); opacity:0; }
  100% { transform:scale(1.55); opacity:0; }
}

@media (max-width:620px){
  .fab{ right:14px; bottom:14px; gap:10px; }
  .fab__b{ width:50px; height:50px; }
  .fab__b svg{ width:25px; height:25px; }
  .fab__tip{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .fab__b--call::after{ animation:none; opacity:0; }
}

/* =========================================================
   Membership packages + duration tiers
   ========================================================= */

.mgrid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.6vw,20px);
  align-items:stretch;
}

.mcard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.45em;
  text-align:center;
  padding:clamp(22px,2.4vw,30px) clamp(14px,1.6vw,20px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.mcard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(22,33,28,.10); }

.mcard--hot{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--cream);
}
.mcard--hot .mcard__name{ color:var(--cream); }
.mcard--hot .mcard__hrs,
.mcard--hot .mcard__note{ color:rgba(242,236,225,.66); }
.mcard--hot .mcard__price{ color:var(--copper); }
.mcard--hot .btn--line{ color:var(--cream); border-color:var(--line-lt); }
.mcard--hot .btn--line:hover{ background:var(--copper); border-color:var(--copper); color:var(--ink); }

.mcard__badge{
  position:absolute;
  top:-10px; left:50%;
  transform:translateX(-50%);
  background:var(--copper);
  color:var(--ink);
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.4em .9em;
  border-radius:999px;
  white-space:nowrap;
}
html[lang="hi"] .mcard__badge{ letter-spacing:.03em; font-size:.7rem; font-weight:500; }

.mcard__name{
  font-family:var(--display);
  font-weight:400;
  font-size:1.3rem;
  margin:.2em 0 0;
}
.mcard__hrs{
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
html[lang="hi"] .mcard__hrs{ letter-spacing:.02em; font-size:.78rem; }
.mcard__price{
  font-family:var(--display);
  font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--gold-deep);
  line-height:1.1;
  margin:.15em 0 .2em;
}
.mcard__note{
  font-size:.85rem;
  color:var(--muted);
  margin:0 0 1.2em;
  flex:1;
}
.mcard .btn{ margin-top:auto; }

/* perks block under the packages */
.perks{
  margin-top:clamp(30px,3.6vw,48px);
  padding:clamp(24px,3vw,36px);
  background:var(--tint);
  border-radius:var(--r);
}
.perks h3{
  font-family:var(--body);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0;
}
html[lang="hi"] .perks h3{ letter-spacing:.03em; font-size:.82rem; font-weight:500; }
.perks .ticks{
  grid-template-columns:repeat(2,minmax(240px,1fr));
  display:grid;
  margin-top:1.2em;
}

/* the menu now lists several durations and prices per row */
.menu__p{ font-size:1.05rem; letter-spacing:.01em; }
.menu__d{ white-space:nowrap; }

@media (max-width:1080px){
  .mgrid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .mgrid{ grid-template-columns:repeat(2,1fr); }
  .perks .ticks{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .mgrid{ grid-template-columns:1fr; }
}

/* =========================================================
   "All treatments" view — every category on one screen
   ========================================================= */

.menu--all{
  display:block;          /* the two-column grid moves down to each set */
}

.menu__cat{
  font-family:var(--body);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 .2em;
  padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--line);
}
.menu__cat:first-child{ padding-top:0; border-top:0; }
html[lang="hi"] .menu__cat{ letter-spacing:.03em; font-size:.86rem; font-weight:500; }

.menu__set{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 clamp(28px,5vw,68px);
  margin-bottom:clamp(10px,1.4vw,18px);
}

/* several prices per row need a little more room */
.menu__i{ grid-template-columns:auto 1fr auto; }
.menu__p{ font-size:1.02rem; }

@media (max-width:920px){
  .menu__set{ grid-template-columns:1fr; }
}

/* =========================================================
   Menu cards on the home page — every duration and price
   listed on the card itself
   ========================================================= */

.card__tiers{
  list-style:none;
  margin:0 0 1.3em;
  padding:.9em 0 0;
  border-top:1px solid var(--line);
  display:grid;
  gap:.4em;
}
.card__tiers li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-size:.9rem;
}
.card__tiers span{
  color:var(--muted);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[lang="hi"] .card__tiers span{ letter-spacing:.02em; font-size:.84rem; }
.card__tiers b{
  font-family:var(--display);
  font-weight:400;
  font-size:1.1rem;
  color:var(--ink);
  white-space:nowrap;
}

/* dotted leader so the eye tracks from name to price */
.card__tiers li::before{
  content:"";
  flex:1;
  order:1;
  margin:0 .4em;
  border-bottom:1px dotted var(--line);
  transform:translateY(-.28em);
}
.card__tiers span{ order:0; }
.card__tiers b{ order:2; }

.card__cta{ margin-top:auto; align-self:flex-start; }

/* a 15-card grid reads better a little tighter */
#serviceGrid .card__pic{ aspect-ratio:16/10; }
#serviceGrid .card__desc{ margin-bottom:1em; }

@media (max-width:620px){
  #serviceGrid .card__pic{ aspect-ratio:16/9; }
}

/* =========================================================
   Rail with a long service list — keep it inside the viewport
   ========================================================= */
.rail__list{
  gap:9px;
  max-height:56vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:2px;
  scrollbar-width:none;
}
.rail__list::-webkit-scrollbar{ display:none; }
.rail__item i{ font-size:.68rem; }
.rail__item span{ font-size:.6rem; }

@media (max-height:720px){
  .rail__list{ max-height:48vh; gap:7px; }
  .rail__cap{ display:none; }
}