/* ==========================================================
   JS AESTHETICS BEAUTY LOUNGE
   Shared stylesheet
   ========================================================== */

:root{
  --bone:#FDFBFA;
  --cream:#F8F1EC;
  --blush:#F0DFD6;
  --blush-2:#E4CBBD;
  --ink:#2E2521;
  --ink-2:#5F4E46;
  --ink-3:#8E7C72;
  --rose:#B4826A;
  --rose-lt:#D3AA91;
  --line:rgba(46,37,33,.13);
  --line-2:rgba(46,37,33,.07);

  --serif:"Bodoni Moda",'Didot','Times New Roman',serif;
  --sans:"Jost",'Helvetica Neue',Arial,sans-serif;

  --pad:clamp(1.15rem,5vw,4rem);
  --maxw:1180px;
  --hdr-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.96rem + .18vw,1.06rem);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.1}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--ink);color:#fff;padding:.7rem 1.2rem}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sec--cream{background:var(--cream)}
.sec--blush{background:var(--blush)}
.sec--tight{padding-block:clamp(2.5rem,6vw,4.5rem)}

.eyebrow{
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  font-weight:500;color:var(--rose);margin:0 0 1.2rem;
}
.dsp{font-family:var(--serif);font-weight:400;letter-spacing:-.012em}
.dsp em{font-style:italic;color:var(--rose)}
.h1{font-size:clamp(2.6rem,1.4rem + 5.2vw,4.6rem);line-height:1.02}
.h2{font-size:clamp(2rem,1.3rem + 3vw,3.3rem)}
.h3{font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem)}
.lede{font-size:clamp(1rem,.97rem + .3vw,1.14rem);color:var(--ink-2);max-width:60ch}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  padding:1.05rem 2.1rem;border:1px solid transparent;cursor:pointer;
  transition:background .35s,color .35s,border-color .35s;
}
.btn--rose{background:var(--rose);color:#fff}
.btn--rose:hover{background:var(--ink)}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:var(--rose)}
.btn--out{border-color:var(--ink);color:var(--ink)}
.btn--out:hover{background:var(--ink);color:var(--bone)}
.btn--lt{border-color:rgba(255,255,255,.6);color:#fff}
.btn--lt:hover{background:#fff;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.center .btn-row{justify-content:center}

/* ---------- image placeholders ----------
   Drop a real photo at the src path and it covers the label. */
.ph{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--blush) 0%,#F6E8E0 48%,var(--blush-2) 100%)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ph__label{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.55rem;text-align:center;padding:1rem;
}
.ph__label b{
  font-family:var(--serif);font-weight:400;font-size:clamp(1rem,.9rem + .5vw,1.35rem);
  color:var(--rose);letter-spacing:.01em;line-height:1.25;
}
.ph__label span{font-size:.53rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.ph__label::before{content:"◇";color:var(--rose-lt);font-size:.85rem}
.ph--1x1{aspect-ratio:1/1}
.ph--3x4{aspect-ratio:3/4}
.ph--4x3{aspect-ratio:4/3}
.ph--16x9{aspect-ratio:16/9}

/* ==========================================================
   HEADER
   ========================================================== */
.hdr{
  position:fixed;inset:0 0 auto;z-index:90;height:var(--hdr-h);
  display:flex;align-items:center;
  background:transparent;transition:background .35s,box-shadow .35s;
}
.hdr.is-solid{background:var(--bone);box-shadow:0 1px 0 var(--line)}
.hdr--light .mark__name,.hdr--light .burger span{color:#fff;background-color:#fff}
.hdr__in{
  width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.mark{text-decoration:none;line-height:1}
.mark__name{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:clamp(.92rem,.8rem + .35vw,1.15rem);
  letter-spacing:.26em;text-indent:.26em;color:var(--ink);transition:color .35s;
}
.mark__sub{
  display:block;margin-top:.28rem;font-size:.46rem;letter-spacing:.4em;
  text-indent:.4em;color:var(--rose);font-weight:400;transition:color .35s;
}
.hdr:not(.is-solid).on-dark .mark__name{color:#fff}
.hdr:not(.is-solid).on-dark .mark__sub{color:rgba(255,255,255,.75)}
.hdr:not(.is-solid).on-dark .burger span{background:#fff}

.hdr__right{display:flex;align-items:center;gap:1.6rem}
.hdr__link{
  display:none;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;position:relative;
}
.hdr__link::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s}
.hdr__link:hover::after{transform:scaleX(1);transform-origin:left}
@media(min-width:900px){.hdr__link{display:inline-block}}

.burger{background:none;border:0;padding:.7rem .35rem;margin-right:-.35rem;cursor:pointer;display:flex;flex-direction:column;gap:5px;min-height:44px;justify-content:center}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);transition:background .35s}

/* full-screen stacked menu */
.nav{
  position:fixed;inset:0;z-index:95;background:var(--bone);
  display:flex;flex-direction:column;padding:1rem var(--pad) 2rem;
  transform:translateY(-101%);visibility:hidden;
  transition:transform .55s cubic-bezier(.65,0,.2,1),visibility .55s;
  overflow-y:auto;
}
.nav.is-open{transform:none;visibility:visible}
.nav__top{height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between}
.nav__close{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink);padding:.3rem}
.nav__list{list-style:none;margin:1.5rem 0 0;padding:0;flex:1}
.nav__list li{border-bottom:1px solid var(--line-2)}
.nav__list li:first-child{border-top:1px solid var(--line-2)}
.nav__list a{
  display:block;padding:1.15rem .25rem;text-decoration:none;
  font-family:var(--serif);font-size:1.45rem;transition:color .3s,padding-left .3s;
}
.nav__list a:hover,.nav__list a[aria-current="page"]{color:var(--rose);padding-left:.6rem}
.nav__foot{margin-top:2rem;display:grid;gap:1rem}
.nav__meta{font-size:.78rem;color:var(--ink-3);line-height:1.8}
.nav__meta a{color:var(--rose);text-decoration:none}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;min-height:88svh;display:flex;align-items:flex-end;
  padding:calc(var(--hdr-h) + 3rem) 0 3.5rem;overflow:hidden;
}
.hero--short{min-height:62svh}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg .ph{position:absolute;inset:0;aspect-ratio:auto}
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(46,37,33,.42) 0%,rgba(46,37,33,.12) 38%,rgba(46,37,33,.66) 100%);
}
.hero__in{position:relative;z-index:4;width:100%;color:#fff}
.hero__eyebrow{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:1.1rem}
.hero h1{font-family:var(--serif);font-size:clamp(2.9rem,1.4rem + 7vw,5.6rem);line-height:.98;max-width:14ch}
.hero p.hero__sub{margin-top:1.4rem;max-width:34ch;color:rgba(255,255,255,.92);font-size:clamp(1rem,.95rem + .3vw,1.12rem)}
.hero .btn-row{margin-top:2.2rem}

/* trust strip */
.trust{background:var(--ink);color:var(--blush);overflow:hidden;padding:.95rem 0}
.trust__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.trust__set{display:flex;align-items:center}
.trust__set span{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  padding:0 1.4rem;white-space:nowrap;display:flex;align-items:center;gap:.5rem;
}
.trust__set span::after{content:"◇";color:var(--rose-lt);font-size:.55rem;margin-left:1.4rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================
   MARQUEE
   ========================================================== */
.mq{overflow:hidden;padding:.5rem 0;border-block:1px solid var(--line-2)}
.mq__track{display:flex;width:max-content;animation:slide 30s linear infinite}
.mq__track span{
  font-family:var(--serif);font-style:italic;color:var(--rose-lt);
  font-size:clamp(1.8rem,6vw,3.2rem);padding:0 1.2rem;white-space:nowrap;
}

/* ==========================================================
   TREATMENT RAIL (horizontal scroll, as in reference)
   ========================================================== */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,300px);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad) 1.4rem 0;
  margin-right:calc(var(--pad) * -1);
  scroll-padding-left:0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail__card{scroll-snap-align:start;text-decoration:none;display:flex;flex-direction:column}
.rail__card .ph{margin-bottom:1rem}
.rail__card h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:.5rem}
.rail__card p{font-size:.87rem;color:var(--ink-2);margin-bottom:.9rem}
.rail__more{margin-top:auto;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)}
.rail__more::after{content:" →"}
.rail-hint{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:.4rem}

/* ==========================================================
   SPLIT (text + image)
   ========================================================== */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-l{grid-template-columns:1.1fr .9fr}
  .split--flip .split__media{order:-1}
}

/* ==========================================================
   CONCERN TILES
   ========================================================== */
.tiles{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:600px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tiles--4{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;text-decoration:none;overflow:hidden;display:block}
.tile .ph::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(46,37,33,0) 30%,rgba(46,37,33,.35) 62%,rgba(46,37,33,.82) 100%)}
.tile__cap{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:1.5rem;color:#fff;text-shadow:0 1px 12px rgba(46,37,33,.5)}
.tile__cap h3{font-family:var(--serif);font-size:1.4rem;line-height:1.12}
.tile__cap span{display:inline-block;margin-top:.85rem;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.55)}

/* ==========================================================
   QUOTE
   ========================================================== */
.quote{text-align:center;max-width:62ch;margin-inline:auto}
.quote__mk{font-family:var(--serif);font-size:4rem;line-height:.6;color:var(--rose-lt);display:block;margin-bottom:1rem}
.quote__t{font-family:var(--serif);font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);line-height:1.5;color:var(--ink)}
.quote__w{margin-top:1.6rem;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose)}
.quote--empty .quote__t{font-family:var(--sans);font-style:italic;font-size:1rem;color:var(--ink-3)}

/* ==========================================================
   BADGES
   ========================================================== */
.badges{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:600px){.badges{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.badges{grid-template-columns:repeat(3,1fr)}}
.badge{background:var(--bone);padding:1.9rem 1.5rem;text-align:center}
.sec--cream .badge{background:var(--cream)}
.badge b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--rose);margin-bottom:.5rem}
.badge span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);line-height:1.7}

/* ==========================================================
   INSTAGRAM GRID
   ========================================================== */
.ig{display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr);margin-top:2.5rem}
@media(min-width:640px){.ig{grid-template-columns:repeat(4,1fr)}}

/* ==========================================================
   ACCORDION (price list)
   ========================================================== */
.acc{border-top:1px solid var(--line);max-width:820px;margin-inline:auto}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.3rem 2.5rem 1.3rem 0;
  font-family:var(--serif);font-size:clamp(1.1rem,1rem + .45vw,1.35rem);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"›";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  color:var(--rose);font-size:1.5rem;transition:transform .3s;
}
.acc details[open] summary::after{transform:translateY(-50%) rotate(90deg)}
.acc__body{padding:0 0 1.6rem}
.prow{display:flex;align-items:baseline;gap:.6rem;padding:.5rem 0;font-size:.94rem}
.prow__n{color:var(--ink-2)}
.prow__n small{display:block;font-size:.75rem;color:var(--ink-3)}
.prow__d{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:1.5rem}
.prow__p{font-variant-numeric:tabular-nums;color:var(--rose);white-space:nowrap;font-weight:400}
.prow__p.consult{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.psub{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin:1.4rem 0 .4rem}
.psub:first-child{margin-top:0}

/* ==========================================================
   FILTERS + GRID (treatments page)
   ========================================================== */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:clamp(2rem,4vw,3rem)}
.filter{
  background:none;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.7rem 1.1rem;cursor:pointer;transition:.3s;
}
.filter:hover{border-color:var(--rose)}
.filter[aria-pressed="true"]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.grid{display:grid;gap:1.6rem 1.2rem;grid-template-columns:1fr}
@media(min-width:600px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
.gcard{text-decoration:none;display:flex;flex-direction:column}
.gcard[hidden]{display:none}
.gcard .ph{margin-bottom:1rem}
.gcard h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:.45rem}
.gcard p{font-size:.86rem;color:var(--ink-2);margin-bottom:.9rem}
.gcard__more{margin-top:auto;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)}
.gcard__more::after{content:" →"}


/* ==========================================================
   GALLERY
   ========================================================== */
.gal{columns:1;column-gap:1rem}
@media(min-width:620px){.gal{columns:2}}
@media(min-width:1000px){.gal{columns:3;column-gap:1.2rem}}
.gal__item{break-inside:avoid;margin:0 0 1rem;display:block;background:var(--cream);border:1px solid var(--line)}
@media(min-width:1000px){.gal__item{margin-bottom:1.2rem}}
.gal__item img{width:100%;height:auto;display:block}
.gal__item figcaption{padding:.95rem 1.1rem 1.05rem}
.gal__item figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--ink)}
.gal__item figcaption span{display:block;margin-top:.3rem;font-size:.82rem;color:var(--ink-3);line-height:1.5}

/* ==========================================================
   CONTACT
   ========================================================== */
.dl{display:grid;gap:1.8rem}
.dl__k{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose);margin-bottom:.4rem}
.dl__v{font-family:var(--serif);font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.5}
.dl__v a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.dl__v a:hover{border-color:var(--rose)}
.hours{display:grid;gap:.35rem;max-width:340px}
.hours div{display:flex;justify-content:space-between;gap:1.5rem;font-size:.9rem;color:var(--ink-2);border-bottom:1px dotted var(--line);padding-bottom:.3rem}

/* ==========================================================
   FOOTER
   ========================================================== */
.ftr{background:var(--ink);color:rgba(240,223,214,.62);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;font-size:.8rem}
@media(max-width:600px){.ftr{padding-bottom:5.5rem}}
.ftr__grid{display:grid;gap:2.5rem}
@media(min-width:780px){.ftr__grid{grid-template-columns:1.3fr 1fr 1fr}}
.ftr__mark{font-family:var(--sans);font-weight:600;font-size:1.05rem;letter-spacing:.26em;color:var(--blush)}
.ftr__sub{font-size:.5rem;letter-spacing:.4em;color:var(--rose-lt);margin:.35rem 0 1.4rem}
.ftr h4{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose-lt);margin-bottom:1.1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ftr a{text-decoration:none;transition:color .3s}
.ftr a:hover{color:var(--blush)}
.ftr__hours{display:grid;gap:.3rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.9}
.ftr__legal{
  border-top:1px solid rgba(240,223,214,.16);margin-top:2.8rem;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;justify-content:space-between;font-size:.66rem;letter-spacing:.08em;
}
.ftr__apex{color:var(--rose-lt);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.ftr__apex:hover{border-color:var(--rose-lt)}
.seo-note{font-size:.68rem;line-height:1.8;color:rgba(240,223,214,.35);margin-top:2rem;max-width:85ch}

/* sticky message button (Jodie's preferred contact) */
.float{
  position:fixed;right:1rem;bottom:1rem;z-index:80;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.9rem 1.35rem;border-radius:999px;
  background:var(--rose);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(46,37,33,.28);
  transition:background .35s,transform .35s,box-shadow .35s;
}
.float svg{flex:none;display:block}
.float:hover{background:var(--ink);transform:translateY(-2px);box-shadow:0 14px 34px rgba(46,37,33,.32)}
.float:active{transform:translateY(0)}
@media(max-width:420px){
  .float{padding:.85rem 1.15rem;font-size:.62rem;letter-spacing:.14em}
}

/* reveal */
.rise{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}

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

/* qualifications / credential list */
.creds{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.creds li{font-size:.92rem;color:var(--ink-2);padding-left:1.7rem;position:relative;line-height:1.55}
.creds li::before{content:"\2713";position:absolute;left:0;top:.05rem;color:var(--rose);font-size:.85rem}