/* ═══════════════════════════════════════════════════════════
   Victoria's Nails & Spa
   Palette derived from the salon itself: the foliage wall,
   the warm neon script, the black leather pedicure chairs.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* forest — the wall */
  --forest-950:#08110C;
  --forest-900:#0B1811;
  --forest-850:#0F2117;
  --forest-800:#14291E;
  --forest-700:#1D3B2A;
  --forest-600:#2A5540;

  /* gold — the neon */
  --gold-300:#F3DDAF;
  --gold-400:#E4C182;
  --gold-500:#C9A25E;

  /* bone — warm paper */
  --bone-50:#F8F5EF;
  --bone-100:#F0EBE1;
  --bone-200:#E3DACA;
  --bone-300:#CFC3AE;

  --ink:#0A1410;

  /* roles */
  --accent:var(--gold-400);
  --ground:var(--forest-950);
  --paper:var(--bone-50);

  --on-dark:#EDEDE6;
  --on-dark-mute:#A8B3AB;
  --on-paper:#16221B;
  --on-paper-mute:#5C6A60;

  /* radius: cards & media = lg, inputs & chips = sm, buttons = pill */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-pill:999px;

  --shell:1240px;
  --gut:clamp(20px,5vw,64px);

  --f-disp:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --f-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0;
  background:var(--ground);
  color:var(--on-dark);
  font:400 17px/1.65 var(--f-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,iframe{max-width:100%; display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:400; line-height:1.02; letter-spacing:-.015em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto}

.skip{
  position:fixed; top:8px; left:8px; z-index:200;
  transform:translateY(-200%);
  background:var(--gold-400); color:var(--ink);
  padding:10px 18px; border-radius:var(--r-pill);
  font-weight:600; text-decoration:none;
}
.skip:focus-visible{transform:none}

:focus-visible{outline:2px solid var(--gold-400); outline-offset:3px; border-radius:3px}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--bh); padding:14px 26px;
  border:1px solid transparent; border-radius:var(--r-pill);
  font:500 15px/1 var(--f-text); letter-spacing:.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.btn--sm{--bh:42px; padding:11px 20px; font-size:14px}
.btn--lg{--bh:60px; padding:18px 34px; font-size:16px}

.btn--gold{background:var(--gold-400); color:#171008; box-shadow:0 1px 0 rgba(255,255,255,.28) inset}
.btn--gold:hover{background:var(--gold-300); transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(228,193,130,.6)}
.btn--gold:active{transform:translateY(0); background:var(--gold-500)}

.btn--ghost{border-color:rgba(237,237,230,.28); color:var(--on-dark); background:transparent}
.btn--ghost:hover{border-color:var(--gold-400); color:var(--gold-300); background:rgba(228,193,130,.07)}
.btn--ghost:active{background:rgba(228,193,130,.14)}

.sect--bone .btn--ghost{border-color:rgba(22,34,27,.25); color:var(--on-paper)}
.sect--bone .btn--ghost:hover{border-color:var(--forest-600); color:var(--forest-600); background:rgba(42,85,64,.06)}

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,17,12,.9);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(228,193,130,.16);
}
.nav__in{
  width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto;
  height:76px; display:flex; align-items:center; gap:28px;
}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; margin-right:auto}
.brand__name{font:500 25px/1 var(--f-disp); letter-spacing:-.01em; color:var(--bone-50)}
.brand__sub{
  font:500 11px/1 var(--f-text); letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-400); white-space:nowrap;
}
.nav__links{display:flex; gap:30px}
.nav__links a{
  font-size:14.5px; text-decoration:none; color:var(--on-dark-mute);
  position:relative; padding:6px 0;
  transition:color .22s 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:left center;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{color:var(--bone-50)}
.nav__links a:hover::after,
.nav__links a:focus-visible::after{transform:scaleX(1)}

.nav__act{display:flex; align-items:center; gap:14px}
.lang{display:flex; padding:2px; border:1px solid rgba(237,237,230,.22); border-radius:var(--r-pill)}
.lang__b{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--on-dark-mute); font:500 12px/1 var(--f-text); letter-spacing:.07em;
  padding:9px 12px; transition:background .2s, color .2s;
}
.lang__b:hover{color:var(--bone-50); background:rgba(237,237,230,.07)}
.lang__b.is-on{background:var(--gold-400); color:#171008; border-radius:var(--r-pill)}

.burger{display:none; appearance:none; background:transparent; border:0; cursor:pointer; padding:10px; margin-right:-10px}
.burger span{display:block; width:22px; height:1.5px; background:var(--bone-50); transition:transform .3s var(--ease), opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.mobmenu{
  position:fixed; inset:76px 0 auto; z-index:99;
  background:rgba(8,17,12,.98); backdrop-filter:blur(20px);
  padding:22px var(--gut) 34px;
  display:flex; flex-direction:column; gap:4px;
  border-bottom:1px solid rgba(228,193,130,.18);
}
.mobmenu[hidden]{display:none}
.mobmenu a{
  text-decoration:none; padding:13px 0; font-size:19px;
  border-bottom:1px solid rgba(237,237,230,.08);
}
.mobmenu .btn{margin-top:16px; border-bottom:0}
.mobmenu__tel{color:var(--gold-400); border-bottom:0 !important; text-align:center; margin-top:4px}

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative; padding-top:76px; overflow:hidden; background:var(--forest-950)}
.hero__glow{display:none}
.hero::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(228,193,130,.35),transparent);
}
.hero__in{
  position:relative; z-index:1;
  width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto;
  display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(28px,4.4vw,64px);
  align-items:center;
  padding:clamp(48px,7vw,84px) 0 clamp(56px,7vw,92px);
}
.hero__copy{min-width:0}

.strip{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:13.5px; color:var(--on-dark-mute);
  border:1px solid rgba(228,193,130,.24); border-radius:var(--r-pill);
  padding:8px 16px; margin-bottom:clamp(20px,3vw,30px);
  background:rgba(228,193,130,.05);
}
.strip__sep{color:rgba(228,193,130,.5)}
.strip__rate b{color:var(--bone-50); font-weight:600}
.strip .stars{color:var(--gold-400); letter-spacing:.04em; font-size:12px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--on-dark-mute); flex:none}
.dot.is-open{background:#5FD08A; box-shadow:0 0 0 3px rgba(95,208,138,.18)}
.dot.is-shut{background:#C97A6A; box-shadow:0 0 0 3px rgba(201,122,106,.16)}

.hero__h1{
  font-family:var(--f-disp);
  font-size:clamp(42px,5.4vw,72px);
  line-height:1.01; letter-spacing:-.025em; text-wrap:balance;
  color:var(--bone-50);
  margin-bottom:clamp(18px,2.4vw,26px);
}
.hero__h1 span{display:block}
.hero__h1 em{display:block; font-style:italic; color:var(--gold-400)}

.hero__lede{
  font-size:clamp(17px,1.5vw,20px); line-height:1.55;
  color:var(--on-dark-mute); max-width:30ch;
  margin-bottom:clamp(26px,3.4vw,38px);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}

.hero__fig{margin:0; position:relative}
.hero__fig img{
  width:100%; border-radius:var(--r-lg);
  aspect-ratio:3/4; object-fit:cover; object-position:center 42%;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(228,193,130,.16);
}
.hero__tag{
  position:absolute; left:16px; bottom:16px;
  background:#0A1410; backdrop-filter:blur(10px);
  border:1px solid rgba(228,193,130,.34); border-radius:var(--r-pill);
  padding:7px 15px; font-size:12.5px; letter-spacing:.03em; color:var(--gold-300);
}

/* marquee */
.marquee{
  position:relative; z-index:1;
  display:flex; gap:0; overflow:hidden;
  border-top:1px solid rgba(228,193,130,.14);
  padding:16px 0; background:rgba(228,193,130,.035);
}
.marquee__t{
  display:flex; align-items:center; gap:26px; flex:none;
  padding-right:26px; white-space:nowrap;
  animation:slide 42s linear infinite;
}
.marquee span{
  font-family:var(--f-disp); font-style:italic;
  font-size:clamp(17px,2vw,25px); color:rgba(237,237,230,.62);
}
.marquee i{color:var(--gold-500); font-style:normal; font-size:11px}
@keyframes slide{to{transform:translateX(-100%)}}

/* ── proof ─────────────────────────────────────────────── */
.proof{background:var(--forest-900); border-bottom:1px solid rgba(228,193,130,.1)}
.proof__in{
  width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px clamp(16px,3vw,40px);
  padding:clamp(28px,4vw,44px) 0;
}
.proof li{display:flex; flex-direction:column; gap:5px}
.proof b{
  font:400 clamp(26px,3.4vw,40px)/1 var(--f-disp);
  color:var(--gold-400); letter-spacing:-.02em;
}
.proof span{font-size:13.5px; color:var(--on-dark-mute); line-height:1.4}

/* ── sections ──────────────────────────────────────────── */
.sect{padding:clamp(72px,9vw,132px) 0}
.sect--bone{background:var(--paper); color:var(--on-paper)}
.sect--dark{background:var(--forest-950)}

.head{max-width:50ch; margin-bottom:clamp(36px,5vw,60px)}
.head h2{
  font-family:var(--f-disp);
  font-size:clamp(30px,4vw,50px); line-height:1.06; letter-spacing:-.022em;
  margin-bottom:16px; text-wrap:balance;
}
.head p{font-size:17px; line-height:1.65; color:var(--on-dark-mute)}
.sect--bone .head p{color:var(--on-paper-mute)}

.head--split{
  max-width:none; display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,56px); align-items:end;
}
.head--split > div{max-width:52ch}

/* ── gallery ───────────────────────────────────────────── */
.gal{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);
  align-items:center;
}
.gal__i{margin:0; position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--bone-200)}
.gal__i img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.gal__i--tall img{aspect-ratio:3/4.5}
.gal__i:hover img{transform:scale(1.045)}
.gal__i figcaption{
  position:absolute; left:12px; bottom:12px;
  background:rgba(8,17,12,.92); backdrop-filter:blur(8px);
  color:var(--bone-50); font-size:12.5px; letter-spacing:.02em;
  padding:6px 13px; border-radius:var(--r-pill);
  opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.gal__i:hover figcaption, .gal__i:focus-within figcaption{opacity:1; transform:none}

/* ── price menu ────────────────────────────────────────── */
.menu{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.6vw,56px);
}
.menu__g h3{
  font-family:var(--f-disp); font-size:clamp(22px,2.3vw,29px);
  color:var(--gold-400); letter-spacing:-.015em;
  padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid rgba(228,193,130,.26);
}
.menu__h2{margin-top:38px}

.pl li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px 14px; align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid rgba(237,237,230,.08);
}
.pl__n{font-size:15.5px; color:var(--on-dark); min-width:0}
.pl__d{font-size:12.5px; color:var(--on-dark-mute); letter-spacing:.02em; white-space:nowrap}
.pl__p{
  font:400 19px/1 var(--f-disp); color:var(--bone-50);
  min-width:56px; text-align:right; white-space:nowrap;
}
.pl__p--q{font-family:var(--f-text); font-size:12.5px; color:var(--on-dark-mute)}

.menu__note{
  margin-top:26px; padding:18px 20px;
  border:1px solid rgba(228,193,130,.22); border-radius:var(--r-md);
  background:rgba(228,193,130,.05);
  font-size:14.5px; line-height:1.6; color:var(--on-dark-mute);
}

/* ── the room ──────────────────────────────────────────── */
.room{position:relative; isolation:isolate; overflow:hidden}
.room__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:68% 52%; z-index:-2;
}
/* Left-weighted so the copy stays legible while the real foliage wall
   and its neon script keep breathing on the right. */
.room__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(96deg, rgba(8,17,12,.97) 0%, rgba(8,17,12,.95) 42%, rgba(8,17,12,.7) 72%, rgba(8,17,12,.5) 100%),
    linear-gradient(180deg, rgba(8,17,12,.6), rgba(8,17,12,.3) 42%, rgba(8,17,12,.75));
}
.room__in{
  padding:clamp(90px,13vw,190px) 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,64px); align-items:center;
}
.room__txt{min-width:0}
.neon{
  font-family:var(--f-disp); font-style:italic; font-weight:400;
  font-size:clamp(40px,7.2vw,92px); line-height:1.04; letter-spacing:-.02em;
  color:#FFF3DA;
  margin-bottom:26px;
}
.room__c{
  font-size:clamp(17px,1.55vw,20.5px); line-height:1.62;
  color:rgba(237,237,230,.9); max-width:46ch;
}
.room__detail{margin:0; flex:none}
.room__detail img{
  width:clamp(150px,17vw,230px); aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(228,193,130,.28);
}

/* ── reviews ───────────────────────────────────────────── */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px)}
.rev{
  margin:0; padding:clamp(24px,2.6vw,34px);
  background:#fff; border:1px solid var(--bone-200);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:16px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rev:hover{transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(10,20,16,.34)}
.rev__stars{color:var(--gold-500); letter-spacing:.12em; font-size:14px}
.rev p:not(.rev__stars){
  font-size:16px; line-height:1.68; color:var(--on-paper);
}
.rev cite{
  margin-top:auto; font-style:normal; font-size:14px; font-weight:600;
  color:var(--on-paper); display:flex; align-items:center; gap:9px;
}
.rev cite span{
  font-weight:400; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--on-paper-mute);
  padding-left:9px; border-left:1px solid var(--bone-300);
}
.revs__more{margin-top:30px}
.revs__more a{
  font-size:15px; color:var(--forest-600); font-weight:500;
  text-underline-offset:4px; text-decoration-thickness:1px;
}
.revs__more a:hover{color:var(--ink)}

/* ── visit ─────────────────────────────────────────────── */
.visit{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(30px,4.6vw,72px)}
.visit h2{
  font-family:var(--f-disp); font-size:clamp(32px,4.2vw,52px);
  letter-spacing:-.022em; margin-bottom:34px;
}
.ib{padding:22px 0; border-top:1px solid rgba(237,237,230,.1)}
.ib:first-of-type{border-top:0; padding-top:0}
.ib h3{
  font:500 11px/1 var(--f-text); letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:12px;
}
.ib p{font-size:17px; line-height:1.55}
.ib a{text-decoration:none; border-bottom:1px solid rgba(228,193,130,.36); transition:border-color .2s, color .2s}
.ib a:hover{color:var(--gold-300); border-bottom-color:var(--gold-300)}
.ib__m{margin-top:9px !important; font-size:14px !important; color:var(--on-dark-mute)}

.hrs{width:100%; border-collapse:collapse; margin-top:2px}
.hrs th,.hrs td{
  padding:8px 0; font-size:15px; font-weight:400; text-align:left;
  color:var(--on-dark-mute);
  border-bottom:1px solid rgba(237,237,230,.07);
}
.hrs td{text-align:right; font-variant-numeric:tabular-nums}
.hrs tr.is-today th,.hrs tr.is-today td{color:var(--gold-300); font-weight:500}

.visit__map{border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(228,193,130,.2); min-height:420px}
.visit__map iframe{width:100%; height:100%; min-height:420px; border:0; filter:grayscale(.35) contrast(1.05)}

/* ── book ──────────────────────────────────────────────── */
.book{
  background:var(--forest-900);
  border-top:1px solid rgba(228,193,130,.28);
  padding:clamp(72px,9vw,124px) 0;
}
.book__in{text-align:center}
.book h2{
  font-family:var(--f-disp); font-size:clamp(36px,5.6vw,72px);
  letter-spacing:-.024em; color:var(--bone-50); margin-bottom:16px;
}
.book p{font-size:17.5px; color:var(--on-dark-mute); margin-bottom:34px}
.book__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}

/* ── footer ────────────────────────────────────────────── */
.foot{background:var(--forest-950); border-top:1px solid rgba(237,237,230,.08); padding:clamp(40px,5vw,56px) 0 26px}
.foot__in{display:flex; flex-wrap:wrap; gap:22px 40px; justify-content:space-between; align-items:flex-start}
.brand--foot{display:flex; align-items:baseline; gap:8px; margin-bottom:8px}
.foot__a{font-size:14.5px; color:var(--on-dark-mute)}
.foot__nav{display:flex; flex-wrap:wrap; gap:10px 26px}
.foot__nav a{font-size:14.5px; color:var(--on-dark-mute); text-decoration:none; transition:color .2s}
.foot__nav a:hover{color:var(--gold-400)}
.foot__c{
  width:min(100% - var(--gut)*2, var(--shell)); margin:34px auto 0;
  padding-top:22px; border-top:1px solid rgba(237,237,230,.07);
  font-size:12.5px; color:rgba(168,179,171,.7);
}

/* ── sticky mobile CTA ─────────────────────────────────── */
.sticky{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:90;
  display:none; align-items:center; justify-content:center;
  min-height:54px; border-radius:var(--r-pill);
  background:var(--gold-400); color:#171008;
  font:600 15.5px/1 var(--f-text); text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.75);
  transform:translateY(140%); transition:transform .4s var(--ease);
}
.sticky.is-up{transform:none}
.sticky:active{background:var(--gold-500)}

/* ── reveal ────────────────────────────────────────────── */
.r{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.r.in{opacity:1; transform:none}

/* ═══ responsive ═══════════════════════════════════════ */
@media (max-width:1080px){
  .menu{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:1fr 1fr}
  .revs .rev:last-child{grid-column:1 / -1}
}
@media (max-width:960px){
  .nav__links{display:none}
  .burger{display:block}
  .nav__act .btn--sm{display:none}
  .hero__in{grid-template-columns:1fr; gap:36px}
  .hero__fig{order:-1; max-width:440px}
  .hero__lede{max-width:44ch}
  .visit{grid-template-columns:1fr}
  .visit__map{min-height:340px}
  .visit__map iframe{min-height:340px}
  .head--split{grid-template-columns:1fr; align-items:start}
  .room__in{grid-template-columns:1fr; justify-items:start}
  .sticky{display:flex}
  .foot{padding-bottom:88px}
}
@media (max-width:720px){
  .proof__in{grid-template-columns:1fr 1fr; gap:24px}
  .gal{grid-template-columns:1fr}
  .gal__i img,.gal__i--tall img{aspect-ratio:4/3}
  .menu{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .revs .rev:last-child{grid-column:auto}
  .foot__in{flex-direction:column}
}
@media (max-width:480px){
  html{scroll-padding-top:76px}
  .strip{font-size:12.5px; padding:7px 13px}
  .strip__sep{display:none}
  .brand__name{font-size:21px}
  .brand__sub{font-size:11px; letter-spacing:.11em}
  .nav__in{gap:12px}
  .hero__h1{font-size:clamp(38px,10.5vw,58px)}
  .book__cta .btn{width:100%}
  .pl li{grid-template-columns:minmax(0,1fr) auto}
  .pl__d{grid-column:1; grid-row:2; margin-top:-4px}
  .pl__p{grid-row:1 / span 2}
}

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