/* ============================================================
   GEORGIE ROO'S SALON — Design System
   Palette: bone / ivory / espresso / mocha / brushed gold
   ============================================================ */
:root{
  --ivory:#FFFCF7;
  --bone:#F6F1E8;
  --sand:#EDE4D6;
  --linen:#E4D8C6;
  --espresso:#22190F;
  --coffee:#3A2C1E;
  --mocha:#6E5B47;
  --stone:#9A8A78;
  --gold:#B58A4E;
  --gold-lt:#D8B681;
  --gold-dp:#8A6836;
  --white:#fff;

  --ff-display:'Cormorant Garamond', 'Times New Roman', serif;
  --ff-body:'Jost', 'Helvetica Neue', Arial, sans-serif;

  --pad:clamp(1.25rem, 5vw, 5.5rem);
  --maxw:1280px;
  --sec:clamp(4.5rem, 11vw, 9.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-s:0 2px 10px rgba(34,25,15,.06);
  --shadow-m:0 18px 50px -22px rgba(34,25,15,.35);
  --shadow-l:0 40px 90px -40px rgba(34,25,15,.55);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--ivory);color:var(--coffee);
  font-family:var(--ff-body);font-weight:300;font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.75;letter-spacing:.006em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ivory)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--pad)}
section{position:relative;scroll-margin-top:90px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:300;line-height:1.06;margin:0;letter-spacing:-.012em;color:var(--espresso)}
.d1{font-size:clamp(3.1rem,12.5vw,8.6rem)}
.d2{font-size:clamp(2.35rem,6.4vw,4.9rem);line-height:1.04}
.d3{font-size:clamp(1.7rem,3.4vw,2.65rem);line-height:1.12}
.d4{font-size:clamp(1.28rem,2vw,1.6rem);line-height:1.2}
.it{font-style:italic;color:var(--gold-dp)}
.eyebrow{
  font-family:var(--ff-body);font-weight:400;font-size:.68rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold-dp);margin:0 0 1.35rem;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
}
.eyebrow::before{content:"";width:clamp(24px,4vw,52px);height:1px;background:var(--gold);flex:none;opacity:.75}
.eyebrow.ctr{justify-content:center}
.eyebrow.ctr::after{content:"";width:clamp(24px,4vw,52px);height:1px;background:var(--gold);flex:none;opacity:.75}
.lede{font-size:clamp(1.06rem,1.02rem + .35vw,1.3rem);line-height:1.72;color:var(--mocha);max-width:62ch;font-weight:300}
p{margin:0 0 1.15em}
.muted{color:var(--stone)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--linen)18%,var(--linen) 82%,transparent);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--espresso);--fg:var(--ivory);--bd:var(--espresso);
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.02rem 2.1rem;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
  border-radius:1px;
}
.btn span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .55s var(--ease);z-index:1}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--espresso);border-color:var(--gold)}
.btn--ghost{--bg:transparent;--fg:var(--espresso);--bd:rgba(34,25,15,.28)}
.btn--light{--bg:transparent;--fg:var(--ivory);--bd:rgba(255,252,247,.42)}
.btn--gold{--bg:var(--gold);--fg:var(--espresso);--bd:var(--gold)}
.btn--gold::after{background:var(--espresso)}
.btn--gold:hover,.btn--gold:focus-visible{color:var(--ivory);border-color:var(--espresso)}
.btn--sm{padding:.78rem 1.5rem;font-size:.63rem;letter-spacing:.22em}
.tlink{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);
  padding-bottom:.35rem;border-bottom:1px solid rgba(181,138,78,.4);transition:gap .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.tlink:hover{gap:1.05rem;border-color:var(--gold);color:var(--espresso)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}.rv-d6{transition-delay:.54s}
.imgmask{overflow:hidden;position:relative}
.imgmask img{transform:scale(1.14);transition:transform 1.6s var(--ease);will-change:transform}
.imgmask.in img{transform:scale(1)}

/* ---------- announcement + header ---------- */
.topbar{
  background:var(--espresso);color:rgba(255,252,247,.72);
  font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;text-align:center;
  padding:.7rem 1rem;position:relative;z-index:60;
}
.topbar a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(216,182,129,.35)}
.topbar .tb-long{display:none}
@media(min-width:720px){.topbar .tb-short{display:none}.topbar .tb-long{display:inline}}
.hdr{
  position:sticky;top:0;z-index:70;
  background:rgba(255,252,247,0);backdrop-filter:blur(0px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding-block:clamp(.9rem,1.9vw,1.5rem);transition:padding .5s var(--ease)}
.hdr.stuck{background:rgba(255,252,247,.93);backdrop-filter:blur(14px) saturate(1.2);border-color:var(--sand);box-shadow:0 1px 26px -12px rgba(34,25,15,.3)}
.hdr.stuck .hdr__in{padding-block:.72rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:none}
.brand__mark{width:40px;height:40px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--ff-display);font-size:1.32rem;letter-spacing:.02em;color:var(--espresso)}
.brand__sub{font-size:.5rem;letter-spacing:.4em;text-transform:uppercase;color:var(--stone);margin-top:.32rem}
.nav{display:none;align-items:center;gap:clamp(1rem,2.2vw,2.05rem)}
.nav a{
  text-decoration:none;font-size:.665rem;letter-spacing:.24em;text-transform:uppercase;color:var(--coffee);
  position:relative;padding-block:.4rem;transition:color .35s var(--ease);
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--gold-dp)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__cta{display:none}
.burger{
  width:46px;height:46px;display:grid;place-items:center;background:none;border:1px solid var(--linen);
  border-radius:50%;cursor:pointer;flex:none;transition:background .4s var(--ease),border-color .4s var(--ease)
}
.burger:hover{border-color:var(--gold)}
.burger i{display:block;width:17px;height:1px;background:var(--espresso);position:relative;transition:background .3s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1px;background:var(--espresso);transition:transform .45s var(--ease)}
.burger i::before{top:-5px}.burger i::after{top:5px}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{transform:translateY(5px) rotate(45deg)}
body.menu-open .burger i::after{transform:translateY(-5px) rotate(-45deg)}
@media(min-width:1080px){
  .nav{display:flex}.burger{display:none}.hdr__cta{display:inline-flex}
}

/* ---------- mobile drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:65;background:var(--espresso);color:var(--ivory);
  padding:calc(env(safe-area-inset-top) + 5.5rem) var(--pad) 2.5rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
  overflow-y:auto;
}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  text-decoration:none;font-family:var(--ff-display);font-size:clamp(1.9rem,8.5vw,2.9rem);font-weight:300;
  color:var(--ivory);padding:.42em 0;border-bottom:1px solid rgba(255,252,247,.1);
  display:flex;align-items:baseline;gap:.9rem;opacity:0;transform:translateY(16px);
}
body.menu-open .drawer nav a{animation:drawerIn .6s var(--ease) forwards}
body.menu-open .drawer nav a:nth-child(1){animation-delay:.1s}
body.menu-open .drawer nav a:nth-child(2){animation-delay:.16s}
body.menu-open .drawer nav a:nth-child(3){animation-delay:.22s}
body.menu-open .drawer nav a:nth-child(4){animation-delay:.28s}
body.menu-open .drawer nav a:nth-child(5){animation-delay:.34s}
body.menu-open .drawer nav a:nth-child(6){animation-delay:.4s}
body.menu-open .drawer nav a:nth-child(7){animation-delay:.46s}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer nav a i{font-style:normal;font-family:var(--ff-body);font-size:.6rem;letter-spacing:.28em;color:var(--gold-lt);opacity:.85}
.drawer__foot{display:grid;gap:1.4rem;font-size:.82rem;color:rgba(255,252,247,.66);letter-spacing:.04em}
.drawer__foot a{color:var(--gold-lt);text-decoration:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(90svh,880px);display:flex;align-items:flex-end;overflow:hidden;background:var(--espresso)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;animation:heroZoom 18s var(--ease) forwards}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(34,25,15,.62) 0%,rgba(34,25,15,.28) 32%,rgba(34,25,15,.55) 68%,rgba(34,25,15,.9) 100%);
}
.hero__grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.hero__in{position:relative;z-index:3;width:100%;padding-block:clamp(3rem,9vh,6rem) clamp(2.5rem,7vh,4.5rem)}
.hero h1{color:var(--ivory);max-width:15ch}
.hero h1 .it{color:var(--gold-lt)}
.hero .eyebrow{color:var(--gold-lt)}
.hero .eyebrow::before{background:var(--gold-lt)}
.hero__sub{color:rgba(255,252,247,.82);max-width:46ch;margin-top:1.6rem;font-size:clamp(1rem,.96rem + .3vw,1.16rem)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.3rem}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 2.3rem;margin-top:clamp(2.6rem,6vh,4rem);
  padding-top:1.7rem;border-top:1px solid rgba(255,252,247,.16);
  font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,252,247,.62);
}
.hero__meta b{font-weight:400;color:var(--gold-lt)}
.hero__scroll{position:absolute;right:var(--pad);bottom:2.2rem;z-index:4;display:none;writing-mode:vertical-rl;
  font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,252,247,.5);text-decoration:none;align-items:center;gap:1rem}
.hero__scroll::after{content:"";width:1px;height:56px;background:linear-gradient(var(--gold-lt),transparent);animation:scrollPulse 2.4s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media(min-width:900px){.hero__scroll{display:flex}}

/* ---------- marquee ---------- */
.marq{background:var(--espresso);color:var(--gold-lt);padding-block:1.15rem;overflow:hidden;border-block:1px solid rgba(216,182,129,.16)}
.marq__t{display:flex;gap:0;width:max-content;animation:marq 42s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq__t span{display:inline-flex;align-items:center;gap:2.6rem;padding-inline:1.3rem;font-family:var(--ff-display);font-size:clamp(1.05rem,2.2vw,1.5rem);font-style:italic;white-space:nowrap;letter-spacing:.01em}
.marq__t span::after{content:"✦";font-style:normal;font-size:.55em;color:var(--gold);opacity:.8}

/* ---------- generic section ---------- */
.sec{padding-block:var(--sec)}
.sec--bone{background:var(--bone)}
.sec--dark{background:var(--espresso);color:rgba(255,252,247,.76)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:var(--ivory)}
.sec--dark .lede{color:rgba(255,252,247,.72)}
.sec--dark .eyebrow{color:var(--gold-lt)}
.sec--dark .eyebrow::before,.sec--dark .eyebrow.ctr::after{background:var(--gold)}
.sec__head{max-width:70ch}
.sec__head.ctr{margin-inline:auto;text-align:center}
.sec__head.ctr .lede{margin-inline:auto}

/* ---------- about / split ---------- */
.split{display:grid;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr 1fr}.split--rev>*:first-child{order:2}}
.figframe{position:relative}
.figframe img{width:100%;aspect-ratio:4/5;object-fit:cover}
.figframe::before{content:"";position:absolute;inset:auto -14px -14px auto;width:64%;height:64%;border:1px solid var(--gold);opacity:.45;z-index:-1}
.figframe--tall img{aspect-ratio:3/4}
.badge{
  position:absolute;left:clamp(-22px,-1.2vw,-8px);bottom:clamp(18px,4vw,34px);
  background:var(--ivory);padding:1.1rem 1.4rem;box-shadow:var(--shadow-m);max-width:230px;
}
.badge b{display:block;font-family:var(--ff-display);font-size:2.4rem;line-height:1;color:var(--espresso)}
.badge span{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);display:block;margin-top:.45rem}
.pillars{display:grid;gap:1.6rem;margin-top:2.6rem}
@media(min-width:560px){.pillars{grid-template-columns:1fr 1fr}}
.pillar{border-top:1px solid var(--linen);padding-top:1.1rem}
.pillar h4{font-family:var(--ff-body);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.5rem;font-weight:400}
.pillar p{font-size:.95rem;color:var(--mocha);margin:0;line-height:1.65}

/* ---------- services ---------- */
.svc{display:grid;gap:clamp(1.1rem,2vw,1.6rem);margin-top:clamp(2.8rem,6vw,4.5rem)}
@media(min-width:680px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.svc{grid-template-columns:repeat(3,1fr)}}
.card{
  position:relative;background:var(--ivory);border:1px solid var(--sand);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease);
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-m);border-color:var(--linen)}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
.card:hover .card__img img{transform:scale(1.07)}
.card__b{padding:clamp(1.5rem,2.6vw,2.1rem);display:flex;flex-direction:column;flex:1;gap:.85rem}
.card__n{font-size:.6rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.card h3{font-size:clamp(1.45rem,2.2vw,1.78rem)}
.card p{margin:0;font-size:.94rem;color:var(--mocha);line-height:1.68}
.card ul{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.card li{
  font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mocha);
  border:1px solid var(--sand);padding:.36rem .66rem;border-radius:99px;background:var(--bone);
}
.card__f{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--sand);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card__price{font-family:var(--ff-display);font-style:italic;font-size:1.05rem;color:var(--espresso)}
.card__dur{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}

/* ---------- aesthetics band ---------- */
.band{position:relative;overflow:hidden;background:var(--espresso)}
.band__bg{position:absolute;inset:0}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.band__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(34,25,15,.94) 0%,rgba(34,25,15,.74) 48%,rgba(34,25,15,.42) 100%)}
.band__in{position:relative;z-index:2;padding-block:var(--sec)}
.band__grid{display:grid;gap:2.4rem}
@media(min-width:960px){.band__grid{grid-template-columns:1.1fr .9fr;gap:clamp(3rem,6vw,6rem);align-items:end}}
.tlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tlist li{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline;
  padding-block:1.05rem;border-bottom:1px solid rgba(255,252,247,.14);
}
.tlist li:first-child{border-top:1px solid rgba(255,252,247,.14)}
.tlist .n{font-size:.6rem;letter-spacing:.2em;color:var(--gold-lt);opacity:.75}
.tlist .t{font-family:var(--ff-display);font-size:clamp(1.15rem,2vw,1.42rem);color:var(--ivory)}
.tlist .t small{display:block;font-family:var(--ff-body);font-size:.78rem;letter-spacing:.03em;color:rgba(255,252,247,.55);margin-top:.2rem;line-height:1.55}
.tlist .p{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,252,247,.55);white-space:nowrap}

/* ---------- stylists ---------- */
.team{display:grid;gap:clamp(1.1rem,2vw,1.5rem);margin-top:clamp(2.8rem,6vw,4.2rem)}
@media(min-width:640px){.team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.team{grid-template-columns:repeat(4,1fr)}}
.sty{
  background:var(--ivory);border:1px solid var(--sand);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),background .55s var(--ease);
}
.sty__b{padding:clamp(1.35rem,2.2vw,1.75rem);display:flex;flex-direction:column;gap:.95rem;flex:1}
.sty__ph{position:relative;aspect-ratio:4/5;background:linear-gradient(150deg,var(--linen),var(--bone));display:grid;place-items:center;overflow:hidden}
.sty__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform 1.1s var(--ease)}
.sty:hover .sty__ph img{transform:scale(1.05)}
.sty__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,25,15,0) 55%,rgba(34,25,15,.28));pointer-events:none}
.sty::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.sty:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.sty:hover::before{transform:scaleX(1)}
.sty__mono{
  font-family:var(--ff-display);font-size:2.6rem;color:var(--gold-dp);letter-spacing:.06em;opacity:.65;
}
.sty h3{font-size:1.42rem;line-height:1.15}
.sty__role{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);margin-top:.4rem;display:block}
.sty__spec{font-size:.88rem;color:var(--mocha);line-height:1.65;margin:0;flex:1}
.sty__acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.3rem}
.chip{
  display:inline-flex;align-items:center;gap:.42rem;text-decoration:none;border:1px solid var(--sand);
  padding:.5rem .85rem;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coffee);
  border-radius:99px;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.chip:hover{background:var(--espresso);color:var(--ivory);border-color:var(--espresso)}
.chip--gold{border-color:rgba(181,138,78,.45);color:var(--gold-dp)}
.chip--gold:hover{background:var(--gold);color:var(--espresso);border-color:var(--gold)}
.chip svg{width:12px;height:12px;flex:none}

/* ---------- gallery ---------- */
.gal{display:grid;gap:clamp(.6rem,1.2vw,1rem);grid-template-columns:repeat(2,1fr);margin-top:clamp(2.6rem,5vw,4rem)}
@media(min-width:820px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal figure{margin:0;overflow:hidden;background:var(--sand);position:relative}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figure::after{content:"";position:absolute;inset:0;background:rgba(34,25,15,.16);opacity:0;transition:opacity .5s var(--ease)}
.gal figure:hover::after{opacity:1}
.gal figure{aspect-ratio:1}
.gal .g-a{aspect-ratio:3/4}.gal .g-b{aspect-ratio:1}.gal .g-c{aspect-ratio:4/5}

/* ---------- reviews ---------- */
.revs{display:grid;gap:clamp(1.1rem,2vw,1.6rem);margin-top:clamp(2.6rem,5vw,4rem)}
@media(min-width:760px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{border:1px solid var(--sand);background:var(--ivory);padding:clamp(1.6rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:1rem;position:relative}
.rev__q{font-family:var(--ff-display);font-size:3.4rem;line-height:.6;color:var(--gold);opacity:.35;height:1.1rem}
.rev p{font-family:var(--ff-display);font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.5;color:var(--coffee);font-style:italic;margin:0;flex:1}
.rev__by{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.stars{color:var(--gold);letter-spacing:.22em;font-size:.8rem}
.ph{
  display:inline-block;font-family:var(--ff-body);font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dp);border:1px dashed rgba(181,138,78,.55);padding:.24rem .5rem;border-radius:99px;font-style:normal;
}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--linen)}
.faq details{border-bottom:1px solid var(--linen)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--ff-display);font-size:clamp(1.15rem,2vw,1.42rem);color:var(--espresso);transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-dp)}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:50%;width:13px;height:13px;
  background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;
  transform:translateY(-50%);transition:transform .45s var(--ease)
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg);background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat}
.faq__a{padding:0 clamp(0rem,4vw,3rem) 1.7rem 0;color:var(--mocha);font-size:.98rem;max-width:72ch}
.faq__a p:last-child{margin-bottom:0}

/* ---------- visit ---------- */
.visit{display:grid;gap:clamp(2.4rem,5vw,4.5rem)}
@media(min-width:960px){.visit{grid-template-columns:.95fr 1.05fr;align-items:stretch}}
.map{position:relative;min-height:340px;border:1px solid var(--sand);overflow:hidden;background:var(--bone)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05) sepia(.22) brightness(1.02)}
.info{display:grid;gap:1.9rem;align-content:start}
.info__row{display:grid;grid-template-columns:auto 1fr;gap:1.05rem;align-items:start;border-bottom:1px solid var(--sand);padding-bottom:1.5rem}
.info__row:last-child{border-bottom:0}
.info__ic{width:38px;height:38px;border:1px solid var(--linen);border-radius:50%;display:grid;place-items:center;color:var(--gold-dp);flex:none}
.info__ic svg{width:15px;height:15px}
.info h4{font-family:var(--ff-body);font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;color:var(--stone);font-weight:400;margin-bottom:.5rem}
.info p,.info a{margin:0;font-size:1rem;color:var(--coffee);text-decoration:none;line-height:1.7}
.info a:hover{color:var(--gold-dp)}
.hours{list-style:none;margin:0;padding:0;font-size:.93rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding-block:.3rem;color:var(--mocha);border-bottom:1px dotted var(--sand)}
.hours li:last-child{border-bottom:0}
.hours b{font-weight:400;color:var(--coffee)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--espresso);text-align:center}
.cta__bg{position:absolute;inset:0}
.cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.cta__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(34,25,15,.55),rgba(34,25,15,.95))}
.cta__in{position:relative;z-index:2;padding-block:clamp(5rem,12vw,9rem);max-width:60ch;margin-inline:auto}
.cta h2{color:var(--ivory)}
.cta p{color:rgba(255,252,247,.72);margin-top:1.3rem}
.cta__acts{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2.4rem}

/* ---------- footer ---------- */
.ft{background:var(--espresso);color:rgba(255,252,247,.6);padding-block:clamp(3.5rem,8vw,5.5rem) 2rem;border-top:1px solid rgba(255,252,247,.1)}
.ft__grid{display:grid;gap:2.6rem}
@media(min-width:760px){.ft__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.5rem,3vw,3rem)}}
.ft h5{font-family:var(--ff-body);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 1.2rem;font-weight:400}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.ft a{text-decoration:none;color:rgba(255,252,247,.6);font-size:.9rem;transition:color .35s var(--ease)}
.ft a:hover{color:var(--gold-lt)}
.ft__brand .brand__name{color:var(--ivory)}
.ft__brand p{font-size:.92rem;margin-top:1.1rem;max-width:34ch;line-height:1.7}
.soc{display:flex;gap:.6rem;margin-top:1.4rem}
.soc a{width:38px;height:38px;border:1px solid rgba(255,252,247,.2);border-radius:50%;display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s var(--ease)}
.soc a:hover{background:var(--gold);border-color:var(--gold)}
.soc svg{width:15px;height:15px;fill:currentColor}
.soc a:hover svg{fill:var(--espresso)}
.ft__bot{margin-top:clamp(2.6rem,6vw,4rem);padding-top:1.7rem;border-top:1px solid rgba(255,252,247,.1);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;font-size:.72rem;letter-spacing:.06em;color:rgba(255,252,247,.42)}
.ft__bot nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.ft__bot a{font-size:.72rem}

/* ---------- sticky mobile book bar ---------- */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(34,25,15,.96);backdrop-filter:blur(10px);
  padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));display:flex;gap:.6rem;
  transform:translateY(115%);transition:transform .55s var(--ease);border-top:1px solid rgba(216,182,129,.2);
}
.bookbar.show{transform:none}
.bookbar a{flex:1;justify-content:center;padding:.85rem 1rem;font-size:.62rem}
@media(min-width:1080px){.bookbar{display:none}}
@media(max-width:1079px){.ft{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}}
.table-scroll{overflow-x:auto}

/* ============================================================
   INTERIOR PAGE COMPONENTS
   ============================================================ */

/* --- nav dropdown --- */
.nav__item{position:relative}
.nav__panel{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:270px;
  background:var(--ivory);border:1px solid var(--sand);box-shadow:var(--shadow-m);padding:.7rem;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;z-index:20;
}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,6px)}
.nav__panel a{display:block;padding:.62rem .8rem;letter-spacing:.16em;font-size:.63rem;border-bottom:0}
.nav__panel a::after{display:none}
.nav__panel a:hover{background:var(--bone);color:var(--espresso)}
.nav__item>a::before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav a.is-active{color:var(--gold-dp)}
.nav a.is-active::after{transform:scaleX(1)}

/* --- page hero (interior) --- */
.phero{position:relative;overflow:hidden;background:var(--espresso);isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:-1}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,25,15,.72),rgba(34,25,15,.55) 45%,rgba(34,25,15,.86))}
.phero__in{padding-block:clamp(3.5rem,10vw,7rem) clamp(3rem,8vw,5.5rem);max-width:56ch}
.phero h1{color:var(--ivory)}
.phero .eyebrow{color:var(--gold-lt)}
.phero .eyebrow::before{background:var(--gold-lt)}
.phero p{color:rgba(255,252,247,.78);margin-top:1.3rem;font-size:clamp(1rem,.96rem + .3vw,1.14rem);line-height:1.72}
.phero__acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* --- breadcrumbs --- */
.crumbs{padding-block:1rem;border-bottom:1px solid var(--sand);background:var(--ivory)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.crumbs a{color:var(--mocha);text-decoration:none}
.crumbs a:hover{color:var(--gold-dp)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--linen)}
.crumbs li{display:flex;align-items:center}

/* --- prose --- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:2.6rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.3rem,2.2vw,1.65rem);margin:2rem 0 .7rem}
.prose p{color:var(--mocha)}
.prose ul,.prose ol{color:var(--mocha);padding-left:1.15rem;margin:0 0 1.3em}
.prose li{margin-bottom:.5rem}
.prose strong{font-weight:500;color:var(--coffee)}
.prose a{color:var(--gold-dp)}
.pull{
  border-left:2px solid var(--gold);padding:.4rem 0 .4rem 1.5rem;margin:2.2rem 0;
  font-family:var(--ff-display);font-style:italic;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.45;color:var(--espresso)
}

/* --- layout with sidebar --- */
.withside{display:grid;gap:clamp(2.4rem,5vw,4rem)}
@media(min-width:1000px){.withside{grid-template-columns:1fr 330px;gap:clamp(3rem,5vw,5rem);align-items:start}}
.side{position:sticky;top:110px;display:grid;gap:1.2rem}
@media(max-width:999px){.side{position:static}}
.sidecard{border:1px solid var(--sand);background:var(--bone);padding:1.6rem}
.sidecard h4{font-family:var(--ff-body);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dp);font-weight:400;margin-bottom:1rem}
.sidecard ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sidecard a{font-size:.92rem;color:var(--coffee);text-decoration:none;display:flex;justify-content:space-between;gap:.8rem;padding-block:.25rem;border-bottom:1px dotted var(--linen)}
.sidecard a:hover{color:var(--gold-dp)}
.sidecard p{font-size:.9rem;color:var(--mocha);margin:0}

/* --- steps --- */
.steps{display:grid;gap:1.4rem;counter-reset:st;margin-top:2.4rem}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr);gap:1.8rem}}
@media(min-width:1100px){.steps.four{grid-template-columns:repeat(4,1fr)}}
.step{border-top:1px solid var(--linen);padding-top:1.2rem;counter-increment:st}
.step::before{content:"0" counter(st);font-size:.62rem;letter-spacing:.26em;color:var(--gold);display:block;margin-bottom:.7rem}
.step h4{font-size:clamp(1.15rem,1.8vw,1.35rem);margin-bottom:.5rem}
.step p{font-size:.93rem;color:var(--mocha);margin:0;line-height:1.65}

/* --- price / menu table --- */
.menu{border-top:1px solid var(--linen);margin-top:2rem}
.menu__row{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;padding-block:1.15rem;border-bottom:1px solid var(--linen);align-items:baseline}
.menu__row h4{font-family:var(--ff-display);font-size:clamp(1.1rem,1.8vw,1.3rem);font-weight:400}
.menu__row p{grid-column:1/-1;margin:.35rem 0 0;font-size:.9rem;color:var(--mocha);max-width:64ch}
.menu__row span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);white-space:nowrap}

/* --- stat row --- */
.stats{display:grid;gap:1.6rem;margin-top:2.6rem}
@media(min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:1px solid var(--linen);padding-top:1.1rem}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--espresso)}
.stat span{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);margin-top:.6rem}

/* --- stylist profile --- */
.profile{display:grid;gap:clamp(2.2rem,5vw,4rem)}
@media(min-width:900px){.profile{grid-template-columns:.85fr 1.15fr;align-items:start}}
.profile__ph{position:relative;background:linear-gradient(150deg,var(--linen),var(--bone));aspect-ratio:4/5;overflow:hidden}
.profile__ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.profile__ph::before{content:"";position:absolute;inset:auto -12px -12px auto;width:60%;height:60%;border:1px solid var(--gold);opacity:.5;z-index:2}
.taglist{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.taglist li{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);border:1px solid var(--sand);background:var(--bone);padding:.42rem .78rem;border-radius:99px}
.contactbox{border:1px solid var(--sand);background:var(--bone);padding:clamp(1.5rem,2.5vw,2rem);margin-top:2rem;display:grid;gap:1rem}
.contactbox h4{font-family:var(--ff-body);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dp);font-weight:400}
.contactbox .row{display:flex;flex-wrap:wrap;gap:.6rem}

/* --- pager --- */
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--linen);margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.6rem}
.pager a{text-decoration:none;font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mocha)}
.pager a:hover{color:var(--gold-dp)}
.pager b{display:block;font-family:var(--ff-display);font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--espresso);font-weight:400;margin-top:.35rem}

/* --- form --- */
.form{display:grid;gap:1.1rem;margin-top:2rem}
@media(min-width:640px){.form .two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}}
.field{display:grid;gap:.45rem}
.field label{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.98rem;color:var(--coffee);background:var(--ivory);
  border:1px solid var(--sand);padding:.85rem 1rem;border-radius:1px;width:100%;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none;background:var(--white)}
.field textarea{min-height:150px;resize:vertical}
.formnote{font-size:.78rem;color:var(--stone);margin:0}

/* --- misc --- */
.grid2{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid;gap:clamp(1.1rem,2vw,1.6rem)}
@media(min-width:700px){.grid3{grid-template-columns:repeat(3,1fr)}}
.mini{border:1px solid var(--sand);background:var(--ivory);padding:clamp(1.4rem,2.2vw,1.8rem);text-decoration:none;display:block;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.mini:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.mini h3{font-size:1.35rem;margin-bottom:.5rem}
.mini p{font-size:.92rem;color:var(--mocha);margin:0}
.mini span{display:inline-block;margin-top:1rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dp)}
.center{text-align:center}
.mt2{margin-top:2rem}.mt3{margin-top:3rem}

/* ============================================================
   MOBILE IMAGE PROPORTIONS
   Portrait crops are for two-up / desktop columns only.
   On a single-column phone layout they become far too tall,
   so everything shortens to landscape or square.
   ============================================================ */
@media(max-width:899px){
  .figframe img{aspect-ratio:3/2}
  .figframe--tall img{aspect-ratio:3/2}
  .figframe::before{inset:auto -10px -10px auto;width:52%;height:52%}
  .profile__ph{aspect-ratio:3/2}
  .profile__ph img{object-position:center 25%}
}
@media(max-width:639px){
  .sty__ph{aspect-ratio:3/2}
  .sty__ph img{object-position:center 22%}
  .card__img{aspect-ratio:16/10}
  .gal .g-a,.gal .g-b,.gal .g-c{aspect-ratio:1}
  .phero__bg img{object-position:center 45%}
  .hero{min-height:min(84svh,760px)}
}
@media(max-width:420px){
  .figframe img,.figframe--tall img{aspect-ratio:16/10}
  .badge{padding:.85rem 1.05rem;max-width:190px}
  .badge b{font-size:1.9rem}
}