/* Visual upgrade layer (loader, menu cards, depth, autumn). Loaded after the original style.css, which stays untouched. */
#mn-loader{position:fixed;inset:0;z-index:9999;background:#0c0b0a;display:flex;align-items:center;justify-content:center;transition:opacity .4s ease}
#mn-loader.out{opacity:0;pointer-events:none}
#mn-loader .mn-box{position:relative;width:170px;height:170px;display:flex;align-items:center;justify-content:center}
#mn-loader svg{position:absolute;inset:0;width:170px;height:170px;animation:mnSpin 1.6s linear infinite}
#mn-loader circle{fill:none;stroke:#c9a45c;stroke-width:1;stroke-dasharray:503;stroke-dashoffset:503;animation:mnDraw 1.1s ease-out forwards}
#mn-loader .mn-logo{position:relative;width:120px;overflow:hidden;opacity:0;transform:scale(.92);animation:mnIn .7s ease-out forwards}
#mn-loader .mn-logo img{width:120px;height:auto;display:block}
#mn-loader .mn-logo:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#e8cf9599 50%,transparent 70%);transform:translateX(-120%);animation:mnShine .9s .7s ease-in-out forwards;mix-blend-mode:screen}
@keyframes mnSpin{to{transform:rotate(360deg)}}@keyframes mnDraw{to{stroke-dashoffset:120}}@keyframes mnIn{to{opacity:1;transform:scale(1)}}@keyframes mnShine{to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){#mn-loader svg{display:none}#mn-loader .mn-logo{transform:none;animation:mnFade .4s forwards}#mn-loader .mn-logo:after{display:none}@keyframes mnFade{to{opacity:1}}}

/* Popular services: image-led cards */
.popular-grid{grid-auto-rows:1fr}
.popular .service-card{display:flex;flex-direction:column;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease;transform-style:preserve-3d;will-change:transform}
.popular .service-card .photo{height:auto;aspect-ratio:4/5}
.popular .service-card img{transition:transform 1.2s ease}
.popular .service-card img[src*="menu-candle"]{object-position:center 60%}
.popular .service-content{padding:16px 16px 14px;display:flex;flex-direction:column;flex:1}
.popular .service-content .badge{align-self:flex-start}
.popular .service-content .badge{margin-bottom:8px}
.popular .service-content h3{font-size:24px;min-height:0}
.popular .service-content p{margin:6px 0 10px;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.popular .price-line{padding-top:10px;margin-top:auto}
.popular .price-line strong{font-size:28px}
@media(hover:hover) and (min-width:1024px){.popular .service-card:hover{box-shadow:0 18px 40px #0008,0 0 0 1px #c9a45c88}.popular .service-card:hover img{transform:scale(1.06)}}
@media(min-width:640px) and (max-width:1023px){.popular-grid{grid-template-columns:repeat(2,1fr)}}

/* 3D buttons */
.btn{background:linear-gradient(180deg,#ecd6a0 0%,#d7b46e 45%,#b88f45 100%);box-shadow:inset 0 1px 0 #fff6dc,0 4px 12px #0006,0 1px 2px #0008;transition:transform .2s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff6dc,0 10px 24px #0007,0 0 22px #c9a45c55}
.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 #fff6dc,0 1px 3px #0008}
.btn.outline{background:transparent;box-shadow:inset 0 1px 0 #e8cf9533,0 3px 10px #0004}
.btn.outline:hover{box-shadow:inset 0 1px 0 #e8cf9555,0 8px 20px #0005,0 0 18px #c9a45c33}
.btn.outline:active{box-shadow:inset 0 1px 0 #e8cf9533,0 1px 3px #0005}
.salons .btn.outline{box-shadow:inset 0 1px 0 #fff8,0 3px 10px #2a241d22}
.salons .btn.outline:hover{box-shadow:inset 0 1px 0 #fff8,0 8px 20px #2a241d33,0 0 16px #c9a45c44}
.salons .arches .arch{transition:transform .35s ease}

/* Hero parallax + autumn leaves */
.hero{overflow:hidden}
.hero-slides{will-change:transform;top:-30px;bottom:auto;height:calc(100% + 60px)}
.hero-content{position:relative;z-index:1}
.mn-leaves{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mn-leaf{position:absolute;top:-40px;color:#c9a45c;animation:mnFall linear infinite}
.mn-leaf svg{width:100%;height:100%;animation:mnSway ease-in-out infinite alternate}
@keyframes mnFall{to{transform:translateY(760px)}}@keyframes mnSway{from{transform:rotate(-25deg) translateX(-12px)}to{transform:rotate(35deg) translateX(14px)}}
@media(max-width:767px){.mn-leaves{display:none}}
@media(prefers-reduced-motion:reduce){.mn-leaf,.mn-leaf svg{animation:none}}

/* Gallery salon groups: retain the full original photographs. */
.gallery-salons{padding-bottom:60px}
.gallery-salon-group+.gallery-salon-group{margin-top:52px}
.gallery-salon-heading{margin-bottom:24px}
.gallery-salon-heading h3{font-family:'Jost',sans-serif;font-size:13px;font-weight:500;color:var(--gold-light)}
.gallery-salon-heading p{font-size:14px;margin-top:8px}
.salon-masonry{columns:3;column-gap:22px}
.salon-masonry .gallery-item{display:block;width:100%;break-inside:avoid;margin:0 0 22px;border:1px solid var(--gold);background:var(--black-2);transition:transform .35s ease}
@media(hover:hover) and (pointer:fine){.salon-masonry .gallery-item:hover{transform:translateY(-4px)}}
.salon-masonry .photo,.salon-masonry .photo img{height:auto;aspect-ratio:auto}
.salon-masonry .photo img{object-fit:contain;transform:none}
@media(max-width:767px){.salon-masonry{columns:2;column-gap:14px}.salon-masonry .gallery-item{margin-bottom:14px}.gallery-salon-heading p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.salon-masonry .gallery-item{transition:none}.salon-masonry .gallery-item:hover{transform:none}}

/* Client-approved October updates. Original stylesheet remains unchanged. */
:root{--menu-header-height:98px;--menu-tab-border:color-mix(in srgb,var(--gold) 45%,transparent);--welcome-label-bg:color-mix(in srgb,var(--black-2) 94%,transparent);--control-shadow:0 4px 14px color-mix(in srgb,var(--black) 65%,transparent)}
.hero-copy-stack{display:grid;width:100%;max-width:930px}
.hero-copy{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity 1.2s ease;align-self:center}
.hero-copy.active{opacity:1;pointer-events:auto}
.hero-bottom{z-index:2}
.hero h1,.hero .hero-title{font-size:72px;line-height:1.03;letter-spacing:0;margin:0 0 27px;font-weight:500}
.hero .hero-title em{color:var(--gold-light);font-weight:500}
.hero-copy .hero-sub{max-width:480px;margin-top:0}
.hero-copy .eyebrow{letter-spacing:0}
.welcome-salons{display:grid;gap:26px;padding:0 22px 0 0}
.welcome-salons:after{display:none}
.welcome-salon{position:relative;border:1px solid var(--gold);margin-right:22px;padding-bottom:34px;background:var(--black-2)}
.welcome-salon:nth-child(2){margin:0 0 0 22px}
.welcome-main{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.welcome-exterior{position:absolute;right:-22px;bottom:44px;width:23%;height:60%;object-fit:cover;border:1px solid var(--gold);box-shadow:var(--control-shadow)}
.welcome-salon figcaption{position:absolute;left:0;bottom:0;width:100%;padding:7px 10px;color:var(--gold-light);background:var(--welcome-label-bg);font-size:10px;line-height:1.8}
.menu-tabs{position:sticky;top:var(--menu-header-height);z-index:29;background:var(--black);border-bottom:1px solid var(--menu-tab-border)}
.menu-tabs .chips{padding-block:12px;scrollbar-width:thin}
.menu-tabs a[aria-current]{background:var(--gold);color:var(--black)}
.menu-card{scroll-margin-top:calc(var(--menu-header-height) + 86px)}
.menu-price small{display:block;font-size:10px;margin-top:8px;line-height:1.6}
.menu-table{min-width:0}
.single-price .menu-labels,.single-price .menu-row{grid-template-columns:minmax(0,1fr) 96px}
.back-top{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:31;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--black);border:1px solid var(--gold-light);box-shadow:var(--control-shadow);transition:transform .2s}
.back-top[hidden]{display:none}
.back-top:hover{transform:translateY(-2px)}
.back-top:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px}
@media(min-width:1024px) and (max-width:1199px){.hero h1,.hero .hero-title{font-size:64px}}
@media(max-width:1023px){.hero h1,.hero .hero-title{font-size:56px}.back-top{right:84px;bottom:calc(18px + env(safe-area-inset-bottom))}.welcome-salons{padding-right:22px}.menu-price small{font-size:9px}}
@media(max-width:600px){.hero h1,.hero .hero-title{font-size:36px;line-height:1.08;margin-bottom:22px}.hero-copy .hero-sub{font-size:13px;max-width:290px;min-height:70px;margin-bottom:20px}.hero-copy .actions{gap:10px}.hero-copy .btn{letter-spacing:0;padding:13px 16px}.hero-copy .eyebrow{font-size:9px;margin-bottom:20px}.welcome-salons{gap:24px}.welcome-salon figcaption{font-size:10px}.menu-price small{font-size:9px;overflow-wrap:anywhere}.single-price .menu-labels,.single-price .menu-row{grid-template-columns:minmax(0,1fr) 64px}}
@media(prefers-reduced-motion:reduce){.hero-copy,.back-top{transition:none}}

/* Pedicure service photographs; other menu categories remain unchanged. */
#pedicure .pedicure-service{display:flex;align-items:flex-start;gap:16px;min-width:0}
#pedicure .pedicure-details{min-width:0;flex:1}
#pedicure .pedicure-photo{width:130px;height:130px;flex:0 0 130px;border:1px solid var(--gold);border-radius:50%;object-fit:cover}
#pedicure .text-only .pedicure-service{padding-left:146px}
#pedicure .pedicure-row{align-items:start}
@media(min-width:901px){#pedicure{grid-template-columns:160px minmax(0,1fr);gap:28px;padding:35px}}
@media(max-width:639px){
  #pedicure .has-photo .pedicure-service{display:contents}
  #pedicure .pedicure-photo{grid-column:1/-1;grid-row:1;width:100%;height:200px;max-height:200px;border-radius:8px;margin-bottom:9px}
  #pedicure .has-photo .pedicure-details{grid-column:1;grid-row:2}
  #pedicure .has-photo .menu-price{grid-row:2}
  #pedicure .text-only .pedicure-service{padding-left:0}
}

/* Facial photos match Pedicure presentation, with top-aligned face framing. */
#facial .pedicure-service{display:flex;align-items:flex-start;gap:16px;min-width:0}
#facial .pedicure-details{min-width:0;flex:1}
#facial .pedicure-photo{width:130px;height:130px;flex:0 0 130px;border:1px solid var(--gold);border-radius:50%;object-fit:cover}
#facial .text-only .pedicure-service{padding-left:146px}
#facial .pedicure-row{align-items:start}
@media(min-width:901px){#facial{grid-template-columns:160px minmax(0,1fr);gap:28px;padding:35px}}
@media(max-width:639px){
  #facial .has-photo .pedicure-service{display:contents}
  #facial .pedicure-photo{grid-column:1/-1;grid-row:1;width:100%;height:200px;max-height:200px;border-radius:8px;margin-bottom:9px}
  #facial .has-photo .pedicure-details{grid-column:1;grid-row:2}
  #facial .has-photo .menu-price{grid-row:2}
  #facial .text-only .pedicure-service{padding-left:0}
}

#facial .pedicure-photo{object-position:center top}
#facial .round-ornament img{object-position:center 35%}
