:root{--sec:clamp(80px,9vw,140px)}
.section{padding-block:var(--sec)}

/* ═════════ HERO ═════════ */
/* --W is the width of the 1667x2000 poster; everything inside scales with it */
.wx-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;color:#fff;--W:max(100vw,151svh);--r:0px}
/* the hero is pinned: paint its scroll spacer black so no page background shows as a seam at the join */
.pin-spacer:has(>.wx-hero),.pin-spacer:has(>.wx-hero__pin){background:#000}
.wx-stage{position:absolute;left:50%;top:0;width:var(--W);height:calc(var(--W)*1.2);transform:translateX(-50%)}
.wx-l{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.wx-bg.wx-m1{z-index:1}
.wx-bg.wx-m2{z-index:2}
.wx-type{z-index:3}
.wx-fig.wx-m1{z-index:4}
.wx-fig.wx-m2{z-index:5}
/* model 02 opens like light spreading from the head */
.wx-m2{-webkit-mask-image:radial-gradient(circle at 48% 17%,#000 calc(var(--r) - 220px),transparent var(--r));mask-image:radial-gradient(circle at 48% 17%,#000 calc(var(--r) - 220px),transparent var(--r))}
.wx-fig.wx-m1{-webkit-mask-image:radial-gradient(circle at 48% 17%,transparent calc(var(--r) - 220px),#000 var(--r));mask-image:radial-gradient(circle at 48% 17%,transparent calc(var(--r) - 220px),#000 var(--r))}
.wx-type{position:absolute;left:0;right:0;top:12.65%;margin:0;display:grid;justify-items:center;line-height:1}
.wx-line1{display:block;font-weight:700;font-size:calc(var(--W)*.1262);letter-spacing:-.012em;line-height:1;white-space:nowrap}
.wx-line2{display:flex;justify-content:space-between;width:calc(var(--W)*.7175);margin-top:calc(var(--W)*.0215);font-weight:400;font-size:calc(var(--W)*.0468);letter-spacing:0;line-height:1;white-space:nowrap}
.wx-ch{display:inline-block;will-change:clip-path,opacity}
.wx-hero__fade{position:absolute;z-index:6;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:linear-gradient(to top,#000 0%,#000 18%,rgba(0,0,0,.72) 48%,rgba(0,0,0,0) 100%)}
html.js .wx-ch{opacity:0}
@media (prefers-reduced-motion:reduce){html.js .wx-ch{opacity:1}}

/* ═════════ CENTERED LIST (shared by Wax + Facials) ═════════ */
.fc-list{overflow:hidden}
.fc-list__head{display:grid;justify-items:center;text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.fc-list__head .eyebrow{margin-bottom:20px}
.fc-list__head .h2{margin-bottom:20px}
.fc-list__lede{max-width:46ch;margin:0 auto}
.fc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;justify-content:center}
/* Dark variant: used on the Wax page so it flows out of the black hero */
.fc-list--dark{background:#000;color:var(--ivory)}
.fc-list--dark .num,.fc-list--dark .num span{color:var(--gold)}
.fc-list--dark .fc-list__lede{color:rgba(244,242,238,.68)}

.deck__card{position:relative;height:clamp(460px,38vw,560px);border-radius:var(--radius-xl);overflow:hidden;background:var(--brown-oak);margin:0}
.fc-grid .deck__card{width:100%}
.deck__card picture,.deck__card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.deck__info{position:absolute;left:14px;right:14px;bottom:14px;display:grid;justify-items:start;gap:6px;padding:20px 22px 22px;border-radius:var(--radius-lg);color:var(--ivory);text-align:left}
.deck__meta{font-family:var(--font-label);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.deck__name{margin:0;font-weight:500;font-size:clamp(22px,1.7vw,28px);letter-spacing:-.02em;line-height:1.1}
.deck__desc{font-size:14.5px;line-height:1.45;color:rgba(244,242,238,.92);margin-bottom:10px}

/* ═════════ POP-UP ═════════ */
.wx-modal{padding:0;border:0;background:transparent;width:min(620px,calc(100% - 32px));max-height:min(760px,calc(100svh - 48px));overflow:visible;color:var(--black-night)}
.wx-modal::backdrop{background:rgba(21,19,17,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wx-modal__panel{display:flex;flex-direction:column;max-height:min(760px,calc(100svh - 48px));border-radius:var(--radius-xl);background:#fff;overflow:hidden;box-shadow:0 40px 100px rgba(21,19,17,.4)}
.wx-modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:clamp(24px,3vw,36px) clamp(24px,3vw,36px) 18px}
.wx-modal__head .eyebrow{color:var(--clay);margin-bottom:10px}
.wx-modal__title{margin:0;font-weight:500;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.02em;line-height:1.05}
.wx-modal__list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 clamp(24px,3vw,36px);border-top:1px solid rgba(21,19,17,.12)}
.wx-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(21,19,17,.12);transition:padding-left .45s var(--ease-out),color .3s}
.wx-row__name{display:block;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.01em;line-height:1.25}
.wx-row__note{display:block;margin-top:3px;font-size:14px;color:var(--text-soft)}
.wx-row__go{width:42px;height:42px;border-radius:50%;border:1px solid rgba(21,19,17,.22);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s,transform .45s var(--ease-out)}
.wx-row__go svg{width:13px;height:13px}
.wx-row:hover{padding-left:10px;color:var(--clay)}
.wx-row:hover .wx-row__go{background:var(--black-night);border-color:var(--black-night);color:var(--ivory);transform:rotate(45deg)}
.wx-row:active{opacity:.7}
.wx-row:focus-visible{outline:2px solid var(--clay);outline-offset:-2px}
.wx-modal__list li:last-child .wx-row{border-bottom:0}
.wx-modal__note{margin:0;padding:14px clamp(24px,3vw,36px) 18px;font-size:13px;color:var(--text-soft);border-top:1px solid rgba(21,19,17,.12)}

/* ═════════ RESPONSIVE ═════════ */
@media (max-width:1180px){
  .fc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deck__card{height:clamp(440px,58vw,560px)}
}
@media (max-width:767px){
  :root{--sec:72px}
  .wx-hero{--W:205vw}
  .wx-type{top:14%}
  .wx-line1{font-size:15.4vw}
  .wx-line2{width:92vw;margin-top:calc(var(--W)*.03);font-size:5vw}
  .fc-grid{grid-template-columns:1fr}
  .deck__card{height:min(480px,72svh)}
  .wx-modal{width:100%;max-width:none;margin:auto 0 0;max-height:86svh}
  .wx-modal__panel{max-height:86svh;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
}