/* ═══════════════════════════════════════════════════════════
   THAI TOUCH MASSAGE & WELLNESS
   Brand: deep navy · antique gold · warm cream
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Brand */
  --navy-900:#061229;
  --navy-800:#0A1B3D;
  --navy-700:#0F2450;
  --navy-600:#17335F;

  --gold-500:#C9A227;   /* brand gold — for gold-on-NAVY only (7.02:1) */
  --gold-400:#D9B84C;
  --gold-300:#E8CE80;
  --gold-200:#F2E3B4;

  /* Brand gold on cream is only 2.32:1 and fails WCAG AA. This darker
     antique gold reads as the same colour and clears 4.5:1 on every cream
     tone (5.5 / 5.1 / 4.6). Use it for any gold TEXT on a light background. */
  --gold-ink:#7C630F;

  --cream-100:#FDFAF2;
  --cream-200:#F8F1E1;
  --cream-300:#EFE4CC;

  --ink:#1A1A18;
  --ink-soft:#4A4A44;
  --on-dark:#E9E4D8;
  --on-dark-soft:#AFA994;

  /* Type */
  --serif:'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:'Jost', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --wrap:1220px;
  --gutter:clamp(1.25rem, 5vw, 4rem);
  --section-y:clamp(5rem, 11vw, 9.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

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

section[id]{scroll-margin-top:6rem}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream-100);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Cormorant defaults to old-style figures, which turn "10" into "IO".
   Force lining figures anywhere a number must be read literally. */
.item__price,.feature__price,.pkg__big,.pkg__get,.philosophy__badge-num,
.hero__note,.visit__dl dd,.strip__list span,.footer__grid p,.footer__base p,
.reviews .h2,.rating-line__text{
  font-variant-numeric:lining-nums;
  font-feature-settings:'lnum' 1;
}

img{max-width:100%; display:block}
a{color:inherit}

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold-500); color:var(--navy-900);
  padding:.75rem 1.25rem; font-family:var(--sans); letter-spacing:.08em;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--navy-800); outline-offset:3px}
.hero :focus-visible,.strip :focus-visible,.medical :focus-visible,
.visit :focus-visible,.closing :focus-visible,.footer :focus-visible,
.pkg--hero :focus-visible,.nav :focus-visible{outline-color:var(--gold-300)}

/* ─────────── Typography primitives ─────────── */

.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.1rem,1.4rem + 3.1vw,3.9rem);
  line-height:1.08;
  letter-spacing:-.012em;
  margin:0 0 1.1rem;
  color:var(--navy-800);
}
.h2--light{color:var(--cream-100)}

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin:0 0 1.15rem;
}
.eyebrow--gold{color:var(--gold-300)}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  font-style:italic;
  font-weight:300;
  line-height:1.5;
  color:var(--navy-700);
  margin:0 0 1.6rem;
}
.lede--light{color:var(--gold-200)}

.section-head{max-width:46rem; margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.section-head--center{margin-inline:auto; text-align:center}
.section-head__note{color:var(--ink-soft); margin:0}

.rule{
  height:1px; width:100%;
  background:linear-gradient(90deg,var(--gold-500),rgba(201,162,39,0));
  margin:2.25rem 0 1.5rem;
}

.signature{
  font-family:var(--serif); font-style:italic;
  font-size:1.3rem; color:var(--gold-ink); margin:0;
}

/* Ornament (Thai-inspired gold divider) */
.ornament{display:flex; justify-content:center; margin:0 auto 2rem}
.ornament svg{
  width:132px; height:26px;
  fill:none; stroke:var(--gold-400); stroke-width:1.1;
}
.ornament svg circle{fill:var(--gold-400); stroke:none}

/* ─────────── Buttons ─────────── */

.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 2.1rem;
  font-family:var(--sans); font-size:.78rem; font-weight:400;
  letter-spacing:.19em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:0;
  cursor:pointer; position:relative; overflow:hidden;
  transition:color .45s var(--ease), background-color .45s var(--ease),
             border-color .45s var(--ease), transform .3s var(--ease);
}
.btn--lg{padding:1.15rem 2.7rem; font-size:.8rem}

.btn--gold{
  background:linear-gradient(135deg,var(--gold-500) 0%,var(--gold-300) 50%,var(--gold-500) 100%);
  background-size:200% 100%;
  color:var(--navy-900);
  border-color:var(--gold-500);
  background-position:0 0;
}
.btn--gold:hover{background-position:100% 0; transform:translateY(-2px)}

.btn--ghost{
  border-color:rgba(233,228,216,.42);
  color:var(--on-dark);
}
.btn--ghost:hover{
  border-color:var(--gold-400); color:var(--gold-300);
  background:rgba(201,162,39,.08); transform:translateY(-2px);
}

/* Secondary button for LIGHT sections. .btn--ghost is light-on-dark and
   becomes near-invisible on cream (its border sits at about 1.2:1). */
.btn--outline{
  border-color:rgba(10,27,61,.32);
  color:var(--navy-800);
}
.btn--outline:hover{
  border-color:var(--navy-800); background:rgba(10,27,61,.05);
  transform:translateY(-2px);
}

.link-gold{
  color:var(--gold-ink); text-decoration:none;
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  border-bottom:1px solid rgba(124,99,15,.45); padding-bottom:2px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.link-gold:hover{border-color:var(--gold-ink); color:var(--gold-ink)}

/* Gold-on-navy variant — the brand gold is fine at 7.02:1 here */
.link-gold--dark{color:var(--gold-300); border-bottom-color:rgba(232,206,128,.5)}
.link-gold--dark:hover{color:var(--gold-200); border-bottom-color:var(--gold-200)}

/* ═══════════════ NAV ═══════════════ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .5s var(--ease), box-shadow .5s var(--ease),
             backdrop-filter .5s var(--ease), padding .5s var(--ease);
  padding-block:clamp(.9rem,2vw,1.6rem);
}
.nav.is-stuck{
  background:rgba(6,18,41,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(201,162,39,.22);
  padding-block:.75rem;
}

.nav__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
}

.nav__brand{
  text-decoration:none; line-height:0; margin-right:auto;
  display:block; flex:0 0 auto;
}
.nav__brand img{
  width:clamp(122px, 13vw, 158px); height:auto;
  transition:opacity .35s var(--ease);
}
.nav__brand:hover img{opacity:.85}
.nav__brand-name{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.6rem; letter-spacing:.02em;
  background:linear-gradient(180deg,var(--gold-200),var(--gold-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav__brand-sub{
  display:block; font-size:.56rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--on-dark-soft); margin-top:.32rem;
}

.nav__links{display:flex; gap:clamp(1.1rem,2.3vw,2.3rem)}
.nav__links a{
  position:relative; text-decoration:none;
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--on-dark); padding-block:.4rem;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold-400); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--gold-300)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1); transform-origin:left}

.nav__cta{padding:.7rem 1.3rem; font-size:.7rem; letter-spacing:.13em}
.nav__cta svg{width:14px; height:14px; fill:currentColor}

.nav__burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0;
  background:none; border:1px solid rgba(233,228,216,.28); cursor:pointer;
}
.nav__burger span{
  display:block; width:20px; height:1px; margin-inline:auto;
  background:var(--on-dark); transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  .nav__cta span{display:none}
  .nav__cta{padding:.7rem .9rem}
}
@media (max-width:860px){
  .nav__burger{display:flex}
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0; padding:6.5rem var(--gutter) 3rem;
    flex-direction:column; gap:0; text-align:center;
    background:rgba(6,18,41,.985);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    transform:translateY(-100%);
    visibility:hidden;
    transition:transform .55s var(--ease), visibility 0s linear .55s;
    border-bottom:1px solid rgba(201,162,39,.25);
  }
  .nav__links.is-open{
    transform:translateY(0); visibility:visible;
    transition:transform .55s var(--ease), visibility 0s;
  }
  /* Burger and phone CTA must stay above the open panel */
  .nav__burger,.nav__cta{position:relative; z-index:2}
  .nav__links a{
    font-family:var(--serif); font-size:1.5rem; letter-spacing:.05em;
    text-transform:none; padding-block:.85rem;
    border-bottom:1px solid rgba(233,228,216,.09);
  }
  .nav__links a::after{display:none}
}

/* ═══════════════ HERO ═══════════════ */

.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:var(--navy-900);
  padding:8rem var(--gutter) 6rem;
}

.hero__media{position:absolute; inset:0}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  opacity:.62; transform:scale(1.06);
  animation:heroDrift 22s ease-out forwards;
}
@keyframes heroDrift{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero__media img{animation:none; transform:none}}

.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 65% at 50% 45%, rgba(6,18,41,.30) 0%, rgba(6,18,41,.82) 62%, var(--navy-900) 100%),
    linear-gradient(180deg, rgba(6,18,41,.82) 0%, rgba(6,18,41,.26) 34%, rgba(6,18,41,.92) 100%);
}

.hero__content{position:relative; z-index:2; max-width:52rem}

.hero__eyebrow{
  font-size:.68rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-300); margin:0 0 1.5rem;
}

.hero__h1{margin:0; font-weight:300}

/* Official logo, vector — the supplied SVG with its opaque background rect
   removed and cropped above the tagline (which is set as live text below).
   Being vector there is no resolution ceiling. */
.hero__logo{
  width:min(86vw, 34rem);
  height:auto; margin:0 auto;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
}
.hero__seo{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.hero__title{display:block; 
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.6rem,1.6rem + 9vw,8.5rem);
  line-height:.94; letter-spacing:-.02em; margin:0;
  background:linear-gradient(175deg,#FBF1CE 0%,var(--gold-300) 40%,var(--gold-500) 72%,#9C7B18 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__sub{
  display:block;
  font-family:var(--serif); font-size:clamp(1.05rem,.85rem + .8vw,1.6rem);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--on-dark); margin:.9rem 0 0; font-weight:300;
}

.hero__tagline{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  color:var(--gold-200); margin:2rem 0 0;
  position:relative; padding-top:2rem;
}
.hero__tagline::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent);
}

.hero__actions{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-top:2.75rem;
}

.hero__note{
  margin:2rem 0 0; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-dark-soft);
}

.hero__scroll{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  z-index:2; width:32px; height:60px; display:block;
}
.hero__scroll::before{
  content:''; position:absolute; left:50%; top:4px; margin-left:-.5px;
  width:1px; height:52px; background:rgba(201,162,39,.28);
}
.hero__scroll span{
  position:absolute; left:50%; top:4px; margin-left:-.5px;
  width:1px; height:52px; background:var(--gold-400);
  transform-origin:top; animation:scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%{transform:scaleY(0); opacity:0}
  35%{opacity:1}
  100%{transform:scaleY(1); opacity:0}
}
@media (prefers-reduced-motion:reduce){.hero__scroll span{animation:none; opacity:.6}}

/* ═══════════════ TRUST STRIP ═══════════════ */

.strip{background:var(--navy-800); border-block:1px solid rgba(201,162,39,.18)}
.strip__list{
  list-style:none; margin:0 auto; padding:clamp(2rem,4vw,3rem) var(--gutter);
  max-width:var(--wrap);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
}
.strip__list li{
  display:flex; flex-direction:column; gap:.35rem;
  text-align:center; padding-inline:1rem; position:relative;
}
.strip__list li + li::before{
  content:''; position:absolute; left:0; top:12%; bottom:12%; width:1px;
  background:rgba(201,162,39,.2);
}
.strip__list strong{
  font-family:var(--serif); font-weight:400; font-size:1.22rem;
  letter-spacing:.03em; color:var(--gold-300);
}
.strip__list span{font-size:.8rem; color:var(--on-dark-soft); line-height:1.5}

@media (max-width:820px){
  .strip__list{grid-template-columns:repeat(2,1fr); gap:2rem 1px}
  .strip__list li:nth-child(odd)::before{display:none}
}
@media (max-width:460px){
  .strip__list{grid-template-columns:1fr; gap:1.75rem}
  .strip__list li::before{display:none!important}
}

/* ═══════════════ PHILOSOPHY ═══════════════ */

.philosophy{
  background:var(--cream-100);
  padding-block:var(--section-y);
  position:relative;
}
.philosophy__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.philosophy__text p{color:var(--ink-soft); margin:0 0 1.15rem}

.philosophy__media{position:relative; isolation:isolate}
.philosophy__media img{
  position:relative; z-index:1;
  width:100%; aspect-ratio:4/5; object-fit:cover;
  box-shadow:0 30px 70px -30px rgba(6,18,41,.5);
}
/* Offset gold frame peeking out behind the image */
.philosophy__media::after{
  content:''; position:absolute; inset:1.25rem -1.25rem -1.25rem 1.25rem;
  border:1px solid var(--gold-400); z-index:0; pointer-events:none;
}

.philosophy__badge{
  position:absolute; z-index:2; left:-1.5rem; bottom:2.5rem;
  background:var(--navy-800); color:var(--gold-300);
  padding:1.5rem 1.35rem; text-align:center;
  border:1px solid rgba(201,162,39,.4);
  box-shadow:0 20px 45px -20px rgba(6,18,41,.6);
}
.philosophy__badge-num{
  display:block; font-family:var(--serif); font-size:2.9rem; line-height:1;
  color:var(--gold-300);
}
.philosophy__badge-label{
  display:block; margin-top:.5rem; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-soft);
  line-height:1.6;
}

@media (max-width:900px){
  .philosophy__grid{grid-template-columns:1fr}
  .philosophy__media{order:-1; max-width:32rem}
  .philosophy__media::after{inset:1rem -1rem -1rem 1rem}
  .philosophy__badge{left:auto; right:-1rem; bottom:1.5rem}
}

/* ═══════════════ SIGNATURE TRIO ═══════════════ */

.signature-section{
  background:var(--cream-200);
  padding-block:var(--section-y);
  border-block:1px solid var(--cream-300);
}

.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem)}

.feature{
  background:var(--cream-100);
  border:1px solid var(--cream-300);
  display:flex; flex-direction:column;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.feature:hover{
  transform:translateY(-8px);
  box-shadow:0 32px 60px -32px rgba(6,18,41,.42);
  border-color:var(--gold-400);
}
.feature__img{overflow:hidden; aspect-ratio:3/2}
.feature__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.feature:hover .feature__img img{transform:scale(1.07)}

.feature__body{padding:2rem 1.85rem 2.2rem; display:flex; flex-direction:column; flex:1}
.feature__body h3{
  font-family:var(--serif); font-weight:400;
  font-size:1.55rem; line-height:1.2; margin:0 0 .85rem;
  color:var(--navy-800);
}
.feature__body p{color:var(--ink-soft); font-size:.95rem; margin:0 0 1rem}

.feature__price{
  margin:auto 0 0!important; padding-top:1.2rem;
  border-top:1px solid var(--cream-300);
  font-family:var(--serif); font-size:1.12rem!important;
  color:var(--navy-700)!important; letter-spacing:.01em;
}
.feature__price span{font-family:var(--sans); font-size:.72rem; color:var(--ink-soft); letter-spacing:.1em}

@media (max-width:900px){.trio{grid-template-columns:1fr; max-width:34rem; margin-inline:auto}}

/* ═══════════════ MENU ═══════════════ */

.menu{background:var(--cream-100); padding-block:var(--section-y)}

.tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
}
.tab{
  background:none; border:1px solid var(--cream-300); cursor:pointer;
  padding:.65rem 1.4rem; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:all .4s var(--ease);
}
.tab:hover{border-color:var(--gold-400); color:var(--navy-800)}
.tab.is-active{background:var(--navy-800); border-color:var(--navy-800); color:var(--gold-300)}

/* Multi-column rather than grid: entries flow tightly instead of being
   stretched to the tallest item in their row. */
.menu__list{
  column-count:2;
  column-gap:clamp(2.5rem,5vw,4.5rem);
}

.item{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  padding:1.9rem 0;
  border-bottom:1px solid var(--cream-300);
  transition:opacity .4s var(--ease);
}
.item.is-hidden{display:none}

.item__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:.6rem;
}
.item__name{
  font-family:var(--serif); font-weight:500;
  font-size:1.32rem; line-height:1.25; margin:0;
  color:var(--navy-800);
}
.item__price{
  margin:0; white-space:nowrap;
  font-family:var(--serif); font-size:1.02rem;
  color:var(--gold-ink); letter-spacing:.02em;
}
.item__desc{margin:0; font-size:.94rem; color:var(--ink-soft)}
.item__meta{
  margin:.75rem 0 0; font-size:.85rem; line-height:1.65;
  color:var(--ink-soft);
  padding-left:1rem; border-left:2px solid var(--gold-300);
}
.item__meta em{font-style:normal; font-weight:500; color:var(--navy-700)}

.item--accent .item__name::after,
.item--pair .item__name::after{
  display:inline-block; vertical-align:middle;
  margin-left:.7rem; padding:.2rem .6rem;
  font-family:var(--sans); font-size:.55rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-ink); border:1px solid var(--gold-500);
}
.item--accent .item__name::after{content:'Enhancement'}
.item--pair .item__name::after{content:'For Two'}

/* The couples option is a genuine upsell — give it a little more presence. */
.item--pair{
  background:var(--cream-200); border:1px solid var(--gold-300);
  padding:1.9rem 1.6rem; margin-bottom:1.9rem;
}

.menu__foot{
  margin:2.75rem 0 0; text-align:center;
  font-size:.82rem; letter-spacing:.06em; color:var(--ink-soft); font-style:italic;
}

@media (max-width:880px){.menu__list{column-count:1}}

/* ═══════════════ MEDICAL ═══════════════ */

.medical{
  background:var(--navy-800);
  padding-block:var(--section-y);
  position:relative; overflow:hidden;
}
.medical::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 85% 50%, rgba(201,162,39,.09), transparent 70%);
}
.medical__grid{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
}
.medical__body{color:var(--on-dark-soft); margin:0 0 1.9rem}

.medical__list{
  list-style:none; padding:0; margin:0 0 2.4rem;
  display:grid; gap:.75rem;
}
.medical__list li{
  position:relative; padding-left:1.9rem;
  font-size:.95rem; color:var(--on-dark);
}
.medical__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:11px; height:1px; background:var(--gold-400);
}

.medical__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 38%;
  border:1px solid rgba(201,162,39,.35);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.7);
}

@media (max-width:900px){
  .medical__grid{grid-template-columns:1fr}
  .medical__media{max-width:30rem}
}

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

/* ═══════════════ REVIEWS ═══════════════ */

.reviews{background:var(--cream-100); padding-block:var(--section-y)}

.rating-line{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  flex-wrap:wrap; margin:1.1rem 0 0;
}
.stars{
  color:var(--gold-ink); font-size:1.15rem; letter-spacing:.22em;
  line-height:1;
}
.rating-line__text{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); font-variant-numeric:lining-nums;
}

.quotes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
}

.quote{
  margin:0; padding:2.4rem 1.9rem 1.9rem;
  background:var(--cream-200); border:1px solid var(--cream-300);
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .55s var(--ease), border-color .55s var(--ease),
             box-shadow .55s var(--ease);
}
.quote::before{
  content:'\201C'; position:absolute; top:.35rem; left:1.5rem;
  font-family:var(--serif); font-size:4.2rem; line-height:1;
  color:var(--gold-400); opacity:.5;
}
.quote:hover{
  transform:translateY(-6px); border-color:var(--gold-400);
  box-shadow:0 26px 50px -30px rgba(6,18,41,.38);
}

.quote blockquote{
  margin:0 0 1.4rem; flex:1;
  font-family:var(--serif); font-size:1.14rem; line-height:1.6;
  font-style:italic; font-weight:300; color:var(--navy-800);
}
.quote figcaption{
  padding-top:1.1rem; border-top:1px solid var(--cream-300);
  font-size:.86rem; font-weight:400; color:var(--navy-700);
}
.quote figcaption span{
  display:block; margin-top:.2rem;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:300;
}

.reviews__foot{margin:2.75rem 0 0; text-align:center}

@media (max-width:980px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .quotes{grid-template-columns:1fr; max-width:34rem; margin-inline:auto}
}

/* ═══════════════ PACKAGES ═══════════════ */

.packages{background:var(--cream-200); padding-block:var(--section-y)}

.pkg-grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(1.5rem,3vw,2.5rem); align-items:stretch;
}

.pkg{background:var(--cream-100); border:1px solid var(--cream-300)}

.pkg--hero{
  background:
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-900) 100%);
  border:1px solid rgba(201,162,39,.4);
  padding:clamp(2.25rem,4vw,3.4rem);
  text-align:center; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.pkg--hero::before{
  content:''; position:absolute; inset:.6rem;
  border:1px solid rgba(201,162,39,.22); pointer-events:none;
}
.pkg__label{
  margin:0 0 1.5rem; font-size:.66rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-300);
}
.pkg__offer{margin:0}
.pkg__big{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem); line-height:1.1;
  color:var(--cream-100);
}
.pkg__get{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,1.2rem + 2.4vw,2.9rem); line-height:1.15;
  margin-top:.3rem;
  background:linear-gradient(180deg,var(--gold-200),var(--gold-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pkg__sub{
  margin:1.1rem 0 0; font-family:var(--serif); font-style:italic;
  font-size:1.1rem; color:var(--gold-200);
}
.pkg__terms{
  list-style:none; padding:1.75rem 0 0; margin:1.75rem 0 2rem;
  border-top:1px solid rgba(201,162,39,.25);
  display:grid; gap:.55rem;
  font-size:.83rem; color:var(--on-dark-soft); text-align:left;
}
.pkg__terms li{position:relative; padding-left:1.4rem}
.pkg__terms li::before{
  content:''; position:absolute; left:.15rem; top:.72em;
  width:9px; height:1px; background:var(--gold-400); opacity:.85;
}

.pkg-side{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}

.pkg--card{display:grid; grid-template-columns:1fr; overflow:hidden}
.pkg__img{aspect-ratio:16/9; overflow:hidden}
.pkg__img img{width:100%; height:100%; object-fit:cover}
.pkg__card-body{padding:1.9rem}
.pkg__card-body h3{
  font-family:var(--serif); font-weight:400; font-size:1.7rem;
  margin:0 0 .7rem; color:var(--navy-800);
}
.pkg__card-body p{margin:0 0 1.3rem; font-size:.94rem; color:var(--ink-soft)}

.why{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--cream-300);
  border:1px solid var(--cream-300);
}
.why div{
  background:var(--cream-100); padding:1.5rem 1.35rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.why strong{
  font-family:var(--serif); font-weight:500; font-size:1.06rem;
  color:var(--navy-800); letter-spacing:.02em;
}
.why span{font-size:.82rem; color:var(--ink-soft); line-height:1.5}

@media (max-width:900px){
  .pkg-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .why{grid-template-columns:1fr}
}

/* ═══════════════ VISIT ═══════════════ */

.visit{background:var(--navy-900); padding-block:var(--section-y) 0}
.visit__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
  padding-bottom:clamp(3rem,6vw,5rem);
}

.visit__dl{margin:2rem 0 2.5rem; display:grid; gap:1.35rem}
.visit__dl > div{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  padding-bottom:1.35rem; border-bottom:1px solid rgba(233,228,216,.1);
}
.visit__dl dt{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-400); padding-top:.35em;
}
.visit__dl dd{margin:0; color:var(--on-dark); line-height:1.65}
.visit__dl dd a{text-decoration:none; transition:color .3s var(--ease)}
.visit__dl dd a:hover{color:var(--gold-300)}
.visit__dl .hours{
  display:flex; justify-content:space-between; gap:1.5rem;
  max-width:19rem; font-variant-numeric:lining-nums;
}
.visit__dl .hours span:first-child{color:var(--on-dark-soft)}

.visit__actions{display:flex; gap:1rem; flex-wrap:wrap}

.visit__policy{
  margin:1.75rem 0 0; max-width:30rem;
  font-size:.82rem; line-height:1.7; color:var(--on-dark-soft);
}

.visit__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 30%;
  border:1px solid rgba(201,162,39,.3);
}
.visit__caption{
  margin:.9rem 0 0; font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-soft); text-align:center;
}

.map{
  position:relative; height:clamp(280px,38vw,440px);
  border-top:1px solid rgba(201,162,39,.25);
  background:var(--navy-800);
}
/* Shown only if the iframe is blocked — the frame paints over it otherwise */
.map__fallback{
  position:absolute; inset:0; z-index:0;
  display:grid; place-content:center; gap:.6rem; text-align:center;
  padding:1.5rem; color:var(--on-dark);
}
.map iframe{position:relative; z-index:1}
.map iframe{
  display:block; width:100%; height:100%; border:0;
  filter:grayscale(.35) contrast(1.05);
}

@media (max-width:900px){
  .visit__grid{grid-template-columns:1fr}
  .visit__media{max-width:28rem}
}
@media (max-width:480px){
  .visit__dl > div{grid-template-columns:1fr; gap:.3rem}
}

/* ═══════════════ CLOSING ═══════════════ */

.closing{
  background:var(--navy-800); padding-block:var(--section-y);
  text-align:center;
  border-top:1px solid rgba(201,162,39,.2);
}
.closing__line{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.6rem); line-height:1.4;
  color:var(--cream-100); margin:0 0 2.5rem;
}

/* ═══════════════ FOOTER ═══════════════ */

.footer{background:var(--navy-900); color:var(--on-dark-soft); font-size:.88rem}
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3rem,6vw,4.5rem);
}
.footer__brand{
  font-family:var(--serif); font-size:2rem; margin:0; line-height:1;
  background:linear-gradient(180deg,var(--gold-200),var(--gold-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer__brand-sub{
  margin:.5rem 0 0; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--on-dark-soft);
}
.footer__tag{
  margin:1.2rem 0 0; font-family:var(--serif); font-style:italic;
  font-size:1rem; color:var(--gold-200); max-width:22rem;
}
.footer__h{
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-400); margin:0 0 1rem;
}
.footer__grid p{margin:0 0 .85rem; line-height:1.8}
.footer__grid a{text-decoration:none; transition:color .3s var(--ease)}
.footer__grid a:hover{color:var(--gold-300)}

.footer__base{
  padding-block:1.6rem 2.2rem;
  border-top:1px solid rgba(233,228,216,.1);
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  justify-content:space-between; align-items:baseline;
  font-size:.76rem;
}
.footer__base p{margin:0}
.footer__disclaimer{font-style:italic; max-width:46rem; opacity:.75}

@media (max-width:760px){
  .footer__grid{grid-template-columns:1fr; gap:2.5rem}
}

/* ═══════════════ STICKY BOOKING CTA ═══════════════ */

/* Sits below the nav (z-index 100) so the open mobile menu covers it. */
.bookbar{
  position:fixed; z-index:95;
  left:50%; bottom:1.5rem; transform:translateX(-50%);
  /* Clears the iPhone home indicator. */
  margin-bottom:env(safe-area-inset-bottom, 0);
}
.bookbar .btn{
  box-shadow:0 14px 34px -10px rgba(6,18,41,.55);
  white-space:nowrap;
}

/* Hiding is opt-in via .js, matching the .reveal pattern — if the script
   never runs, the button simply stays visible instead of vanishing. */
.js .bookbar{
  opacity:0; visibility:hidden;
  transform:translateX(-50%) translateY(160%);
  transition:transform .5s var(--ease), opacity .4s var(--ease),
             visibility .4s var(--ease);
}
.js .bookbar.is-visible{
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* Suppressed while the mobile menu is open — the menu panel is top-anchored
   and would otherwise leave the button floating over it. */
.menu-open .bookbar{opacity:0 !important; visibility:hidden !important}

@media (max-width:640px){
  /* Full-width tap target on phones, where this matters most. */
  .bookbar{left:1rem; right:1rem; bottom:1rem; transform:none}
  .bookbar .btn{width:100%}
  .js .bookbar{transform:translateY(160%)}
  .js .bookbar.is-visible{transform:translateY(0)}
  /* Stop the bar covering the last line of the footer. */
  .footer__base{padding-bottom:6rem}
}

/* ═══════════════ BACK TO TOP ═══════════════ */

.totop{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--navy-800); color:var(--gold-300);
  border:1px solid rgba(201,162,39,.4); text-decoration:none;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:all .45s var(--ease);
}
.totop.is-visible{opacity:1; visibility:visible; transform:translateY(0)}
.totop:hover{background:var(--gold-500); color:var(--navy-900)}

/* Must come AFTER the base .totop rule above — same specificity, so source
   order decides. On phones the sticky booking bar spans the full width, so
   the back-to-top button has to sit above it rather than on top of it. */
@media (max-width:640px){
  .totop{bottom:5.6rem}
}

/* ═══════════════ REVEAL ANIMATION ═══════════════ */

/* Hiding is opt-in via the .js class, which main.js sets on <html> before
   paint. If the script 404s, is blocked, or throws, the class is never added
   and every section stays visible instead of the page rendering blank. */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
.js .reveal.is-in{opacity:1; transform:none}

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

/* ═══════════════ BOOKING PAGE ═══════════════ */

/* The booking and thank-you pages have no hero behind the nav, so the bar
   needs its solid treatment from the first paint rather than on scroll. */
.nav.is-solid{
  background:rgba(6,18,41,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(201,162,39,.22);
}

.booking{
  background:var(--cream-100);
  /* Clears the fixed nav, which is taller on the stuck/solid state. */
  padding-block:clamp(8rem,14vw,11rem) var(--section-y);
}
.booking__head{max-width:46rem; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center}
.booking__head .h2{margin-top:.4rem}

/* The widget itself is Vagaro's markup — we only own the frame around it.
   min-height reserves space so the page does not jump when it loads. */
.booking__widget{
  min-height:640px;
  background:#fff;
  border:1px solid var(--cream-300);
  box-shadow:0 24px 60px -34px rgba(6,18,41,.35);
  padding:clamp(.5rem,1.5vw,1.25rem);
}
/* Vagaro's iframe defaults to an inline-element baseline gap and, on some
   widget configurations, a fixed pixel width that overflows small screens. */
.booking__widget iframe{
  display:block; width:100%; max-width:100%; border:0;
}
.booking__widget[data-state="failed"]{display:none}

.booking__pending,
.booking__fallback{
  max-width:38rem; margin-inline:auto; text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;
}
.booking__fallback{
  background:var(--cream-200); border:1px solid var(--cream-300);
  max-width:none; margin-block:0;
}
.booking__pending-h,
.booking__fallback-h{
  font-family:var(--serif); font-size:1.5rem; color:var(--ink);
  margin:0 0 .9rem;
}
.booking__pending p,
.booking__fallback p{color:var(--ink-soft); margin:0 0 1.6rem; line-height:1.75}
.booking__fallback-actions{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}

.booking__notes{
  list-style:none; margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  border-top:1px solid var(--cream-300); padding-top:clamp(2rem,4vw,3rem);
}
.booking__notes strong{
  display:block; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-ink); margin-bottom:.6rem;
}
.booking__notes span{color:var(--ink-soft); font-size:.9rem; line-height:1.7}
.booking__notes a{color:var(--gold-ink)}

/* ═══════════════ VAGARO WIDGET OVERRIDES ═══════════════ */

/* Vagaro's embed code is pasted verbatim in book.html and must not be edited —
   their loader is keyed to it. Presentation is corrected from here instead.

   Their loader replaces its own 250px wrapper at runtime and injects an
   iframe (~840x880 desktop, full-width mobile), so the width in their markup
   is not a constraint in practice. Verified: no horizontal overflow at
   430px or 1280px. */

/* Vagaro ships an Arial "Book Now" heading above the scheduler. The page
   already has "Book an Appointment" as its <h1>, so this is a duplicate
   heading in the wrong typeface. Hidden rather than deleted, so their
   markup stays untouched. */
#vagaroWidget #frameTitle{display:none !important}

/* Centre the injected iframe and stop it forcing the page wider than the
   viewport on small screens. */
#vagaroWidget iframe{
  display:block; margin-inline:auto; max-width:100%; border:0;
}

/* ═══════════════ THANK YOU PAGE ═══════════════ */

.thanks{
  background:var(--navy-900); color:var(--on-dark);
  min-height:100svh; display:grid; place-items:center;
  padding-block:var(--section-y);
}
.thanks__inner{max-width:44rem; text-align:center}
.thanks__lede{
  font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.4rem);
  color:var(--gold-200); line-height:1.7; margin:1.5rem 0 clamp(2.5rem,5vw,3.5rem);
}
.thanks__dl{
  margin:0 0 clamp(2.5rem,5vw,3.5rem); text-align:left;
  display:grid; gap:1.6rem;
  border-block:1px solid rgba(201,162,39,.22); padding-block:2.2rem;
}
.thanks__dl dt{
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:.5rem;
}
.thanks__dl dd{margin:0; line-height:1.75; color:var(--on-dark)}
.thanks__dl a{color:var(--gold-300)}
.thanks__actions{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}
.thanks__foot{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-soft);
}

/* ═══════════════ PRINT ═══════════════ */

@media print{
  .nav,.hero__scroll,.totop,.bookbar,.map,.tabs,.booking__widget{display:none}
  .thanks{background:#fff !important; color:#000 !important; min-height:auto}
  .thanks__lede,.thanks__dl dt,.thanks__dl dd,.thanks__foot{color:#000 !important}
  body{background:#fff; color:#000}
  .js .reveal{opacity:1; transform:none}

  /* Browsers default "background graphics" to OFF when printing, so the dark
     sections lose their navy fill while keeping their light text — which
     printed the address, hours and phone as white-on-white. Force every dark
     section back to black-on-white. */
  .strip,.medical,.visit,.closing,.footer,.pkg--hero,.hero{
    background:#fff !important; color:#000 !important;
  }
  .h2--light,.lede--light,.closing__line,.pkg__big,.pkg__get,
  .visit__dl dd,.visit__dl dt,.visit__dl .hours span,
  .visit__policy,.medical__list li,
  .medical__body,.strip__list strong,.strip__list span,
  .footer__grid p,.footer__base p,.footer__tag,.footer__h,
  .pkg__label,.pkg__sub,.pkg__terms,.eyebrow--gold,.hero__note{
    color:#000 !important;
  }
  /* background-clip:text renders as nothing once backgrounds are off */
  .hero__title,.footer__brand,.pkg__get,.nav__brand-name{
    background:none !important; color:#000 !important;
    -webkit-text-fill-color:#000 !important;
  }
  .hero{min-height:auto !important; padding:1rem 0 !important}
  .hero__media,.hero__veil{display:none}
  .menu__list{column-count:2}
  .item,.quote,.feature{break-inside:avoid}
}