/* ================================================================ Salons & barbershops: the station (blush, noir, chrome, white) */
:root{
  --hd-bg:rgba(20,20,20,.97); --hd-mark:#f4c5cb; --hd-cta:#f4c5cb; --hd-cta-ink:#141414;
  --s-blush:#f4c5cb; --s-blush-l:#fbe3e6; --s-blush-d:#d99aa4; --s-noir:#141414; --s-noir2:#1f1e20; --s-chrome:#c9ccd1;
  --s-muted:#5d585a; --s-rose:#c9435d;
  --bod:'Bodoni Moda',Didot,'Bodoni 72','Bodoni MT','Times New Roman',serif;
}
.pg-sal{background:#fff;color:var(--s-noir)}
.pg-sal :focus-visible{outline:2px solid var(--s-noir);outline-offset:3px}
.sal-hero :focus-visible,.sal-calls :focus-visible,.sal-price .sal-head :focus-visible,.sal-close :focus-visible{outline-color:var(--s-blush)}
.pg-sal h2{margin:14px 0 0;font:600 clamp(36px,4.8vw,70px)/1.02 var(--bod);letter-spacing:-.014em;text-wrap:balance}
.pg-sal h2 em{font-style:italic;font-weight:500}
.sal-how h2 em,.sal-faq h2 em,.sal-book h2 em{padding:0 .04em;background:linear-gradient(transparent 57%,var(--s-blush) 57% 79%,transparent 79%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.sal-book h2 em{background-image:linear-gradient(transparent 57%,rgba(255,255,255,.9) 57% 79%,transparent 79%)}
.sal-calls h2 em,.sal-price h2 em,.sal-close h2 em{color:var(--s-blush)}
.pg-sal .lab{color:var(--s-muted)}
.pg-sal .lab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s-noir)}
.sal-calls .lab,.sal-price .lab{color:#aaa3a6}
.sal-calls .lab::before,.sal-price .lab::before{background:#fff4e2;box-shadow:0 0 0 2px #c9ccd1,0 0 12px 3px rgba(255,208,150,.55)}
.sal-head{max-width:760px}
.sal-head p{margin:16px 0 0;max-width:54ch;font-size:17px;line-height:1.6;color:var(--s-muted);text-wrap:pretty}
.sal-head-row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;flex-wrap:wrap}
.sal-head-row > div{max-width:720px}
.sal-head-c{margin:0 auto;text-align:center}
.sal-head-c p{margin-inline:auto}
.sal-btn-b{background:var(--s-blush);color:var(--s-noir)}
.sal-btn-b:hover{background:#f9dade}
.sal-btn-gl{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.sal-btn-gl:hover{box-shadow:inset 0 0 0 1px #fff}
.sal-btn-line{background:transparent;color:var(--s-noir);box-shadow:inset 0 0 0 1.5px var(--s-noir)}
.sal-btn-line:hover{background:var(--s-noir);color:#fff}

/* ---------------------------------------------------------------- hero: the station */
.sal-hero{--side:clamp(64px,11vw,170px);position:relative;overflow:hidden;color:#fff;display:grid;
  grid-template-columns:var(--gut) minmax(var(--side),1fr) minmax(0,960px) minmax(var(--side),1fr) var(--gut);
  grid-template-rows:auto auto;padding-top:clamp(18px,2.6vw,38px);
  background:
    radial-gradient(44% 58% at 50% 44%,rgba(255,194,138,.17),rgba(255,194,138,0) 72%),
    linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 26%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.034) 0 1px,rgba(255,255,255,0) 1px 30px,rgba(0,0,0,.3) 30px 32px),
    var(--s-noir)}
.sal-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the mirror: a blush frame with an elliptical arch; bulbs sit on the frame (container units keep them on the curve) */
.sal-mirror{--k:.3;--T:34px;--bd:22px;--n:4;--bb:30px;--R:calc(var(--k) * 100cqw);
  grid-column:3;grid-row:1;position:relative;z-index:1;min-width:0;container-type:inline-size}
.sal-frame{position:absolute;inset:0;border-radius:50cqw 50cqw 0 0 / var(--R) var(--R) 0 0;
  background:linear-gradient(165deg,#fde9ec 0%,#f7d0d6 28%,#f4c5cb 52%,#e0a5ae 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 2px 1px rgba(255,255,255,.7),inset 0 -5px 0 rgba(120,48,62,.16),
    0 44px 70px -34px rgba(0,0,0,.85),0 0 140px 20px rgba(255,190,140,.07)}
.sal-glass{position:absolute;inset:var(--T) var(--T) calc(var(--T) * 1.1);overflow:hidden;
  border-radius:calc(50cqw - var(--T)) calc(50cqw - var(--T)) 0 0 / calc(var(--R) - var(--T)) calc(var(--R) - var(--T)) 0 0;
  background:
    linear-gradient(114deg,rgba(255,255,255,0) 21%,rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 63%,rgba(255,255,255,.032) 67%,rgba(255,255,255,0) 72%),
    radial-gradient(80% 60% at 50% 104%,rgba(244,197,203,.12),rgba(244,197,203,0) 70%),
    linear-gradient(180deg,#252326 0%,#1b1a1c 55%,#171618 100%);
  box-shadow:inset 0 0 0 1.5px rgba(118,58,70,.6),inset 0 0 0 3px rgba(255,255,255,.1),inset 0 0 64px rgba(255,208,160,.11),inset 0 16px 40px rgba(0,0,0,.35)}
.sal-glass::after{content:"";position:absolute;inset:-10%;transform:translateX(-80%);
  background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.085) 50%,rgba(255,255,255,0) 58%);
  animation:sal-sheen 2.8s cubic-bezier(.45,0,.2,1) 1.6s both}
@keyframes sal-sheen{to{transform:translateX(80%)}}
.sal-bulbs{position:absolute;inset:0;z-index:2;pointer-events:none}
.sal-bulb{position:absolute;width:var(--bd);height:var(--bd);translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 40% 36%,#8c8176,#4a423c 72%);
  box-shadow:0 0 0 3px #d6d9dd,0 0 0 4px rgba(96,40,52,.35),0 4px 7px 2px rgba(80,20,34,.25)}
.sal-bulb::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#fffefa 0 20%,#fff4de 44%,#ffdcab 76%,#f4bb80 100%);
  box-shadow:0 0 7px 2px rgba(255,230,186,.8),0 0 20px 6px rgba(255,204,146,.34),0 0 50px 16px rgba(255,186,120,.13);
  animation:sal-lamp .6s ease-out calc(.3s + var(--o) * 80ms) both}
@keyframes sal-lamp{from{opacity:0}}
.sal-ba{left:calc(50cqw - (50cqw - var(--T) / 2) * var(--c));top:calc(var(--R) - (var(--R) - var(--T) / 2) * var(--s))}
.sal-bs{top:calc(var(--R) + (100% - var(--R) - var(--bb)) * var(--j) / var(--n));opacity:clamp(0,(var(--n) + .5 - var(--j)) * 99,1)}
.sal-bs.sal-l{left:calc(var(--T) / 2)}
.sal-bs.sal-r{left:calc(100cqw - var(--T) / 2)}
.sal-in{position:relative;z-index:3;text-align:center;
  padding:calc(var(--R) * .46 + 6px) calc(var(--T) + clamp(18px,4.6vw,72px)) calc(var(--T) * 1.1 + clamp(34px,4vw,56px))}
.sal-k{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:0;font:500 11.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#ddd3d5}
.sal-k span + span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:12px;border-radius:50%;background:var(--s-blush);vertical-align:.12em}
.sal-hero h1{margin:14px auto 0;font:800 clamp(38px,6.6vw,100px)/.95 var(--bod);letter-spacing:-.018em;color:#fff}
.sal-hero h1 > span{display:block;text-wrap:balance}
.sal-l1 > span{white-space:nowrap}
.sal-l2{margin-top:.04em;font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--s-blush)}
.sal-sub{margin:22px auto 0;max-width:50ch;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;color:#d8d1d3;text-wrap:pretty}
.sal-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.sal-hero .fine{color:var(--s-noir)}
.sal-hero .fine .hl{background:var(--s-blush)}
.sal-hero .fine .dot{background:var(--s-noir)}

/* the barber pole: blush, white and noir stripes that turn only while the hero is on screen */
.sal-pole{--pw:clamp(26px,3.2vw,48px);--ph:clamp(170px,21vw,300px);--sw:calc(var(--pw) * .25);--dy:calc(var(--sw) * 4 / .81915);
  grid-column:4;grid-row:1;justify-self:start;align-self:center;margin:9% 0 0 calc(var(--side) * .3);position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 22px 22px rgba(0,0,0,.55))}
.sal-pole i{display:block}
.sal-pole-cap{position:relative;width:calc(var(--pw) + 10px);height:calc(var(--pw) * .46);border-radius:50% 50% 4px 4px / 100% 100% 4px 4px;
  background:radial-gradient(120% 150% at 34% 18%,#fff 0,#e1e3e6 30%,#9da1a8 74%,#6d7178)}
.sal-pole-cap::before{content:"";position:absolute;left:50%;bottom:calc(100% - 3px);width:calc(var(--pw) * .36);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#cdd0d4 45%,#7b7f86)}
.sal-pole-glass{position:relative;width:var(--pw);height:var(--ph);overflow:hidden;background:#fff;box-shadow:0 0 26px 2px rgba(255,236,236,.16)}
.sal-pole-stripes{position:absolute;left:-60%;right:-60%;top:calc(var(--dy) * -1);bottom:0;
  background:repeating-linear-gradient(-35deg,var(--s-blush) 0 var(--sw),#fff var(--sw) calc(var(--sw) * 2),var(--s-noir) calc(var(--sw) * 2) calc(var(--sw) * 3),#fff calc(var(--sw) * 3) calc(var(--sw) * 4));
  animation:sal-spin 3.4s linear infinite paused;will-change:transform}
.sal-run .sal-pole-stripes{animation-play-state:running}
@keyframes sal-spin{to{transform:translateY(var(--dy))}}
.sal-pole-glass::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.52),rgba(0,0,0,.06) 18%,rgba(255,255,255,.62) 30%,rgba(255,255,255,0) 44%,rgba(0,0,0,0) 60%,rgba(0,0,0,.22) 80%,rgba(0,0,0,.6))}
.sal-pole-base{width:calc(var(--pw) + 10px);height:calc(var(--pw) * .5);border-radius:4px 4px 50% 50% / 4px 4px 100% 100%;
  background:radial-gradient(120% 150% at 34% 0%,#fff 0,#e1e3e6 30%,#9da1a8 74%,#6d7178)}

/* a product shelf balances the pole on wide screens */
.sal-shelf{grid-column:2;grid-row:1;justify-self:end;align-self:center;width:min(150px,calc(var(--side) * .8));margin:16% calc(var(--side) * .2) 0 0;position:relative;z-index:1;
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.5))}
.sal-shelf svg{display:block;width:100%;height:auto}

/* the vanity counter and what's on it */
.sal-counter{grid-column:1/-1;grid-row:2;position:relative;z-index:3;height:clamp(44px,5.4vw,78px);margin-top:-8px;
  background:
    radial-gradient(34% 140% at 50% 0,rgba(255,206,150,.24),rgba(255,206,150,0) 72%) 0 0/100% 16px no-repeat,
    linear-gradient(180deg,#302e31 0,#211f22 15px,#0d0d0e 16px,#080808 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.12)}
.sal-counter::after{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:linear-gradient(90deg,#7e828a,#e9ebee 22%,#a3a7ad 50%,#e2e4e7 76%,#7e828a)}
.sal-ig{grid-row:2;position:relative;z-index:4;align-self:start;display:flex;align-items:flex-end;gap:clamp(6px,1vw,14px);height:0;overflow:visible}
.sal-ig > svg{flex:none;display:block;height:auto;translate:0 3px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.sal-ig-l{grid-column:2;justify-self:end;margin-right:calc(var(--side) * -.36)}
.sal-ig-r{grid-column:4;justify-self:start;margin-left:calc(var(--side) * -.3)}
.sal-it-bowl{width:clamp(72px,8.4vw,122px)}
.sal-it-mist{width:clamp(24px,2.8vw,40px)}
.sal-it-jar{width:clamp(34px,4vw,58px)}
.sal-it-clip{width:clamp(62px,7.4vw,108px)}

/* ---------------------------------------------------------------- 01 how it works: four foils */
.sal-how{background:#fff;padding-block:clamp(64px,8.5vw,128px)}
.sal-foils{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,30px)}
.sal-foil{--fp:clamp(18px,1.8vw,24px);position:relative;padding:86px var(--fp) 28px;rotate:var(--r);translate:0 var(--y);border-radius:2px;
  background:
    linear-gradient(98deg,rgba(255,255,255,0) 0 28%,rgba(255,255,255,.75) 29%,rgba(255,255,255,0) 31.5% 100%),
    linear-gradient(174deg,rgba(0,0,0,0) 0 57%,rgba(0,0,0,.06) 58%,rgba(0,0,0,0) 61% 100%),
    linear-gradient(82deg,rgba(255,255,255,0) 0 71%,rgba(255,255,255,.55) 72%,rgba(255,255,255,0) 74.5% 100%),
    linear-gradient(8deg,rgba(0,0,0,0) 0 30%,rgba(0,0,0,.05) 31%,rgba(0,0,0,0) 34% 100%),
    linear-gradient(158deg,#f6f7f8 0%,#d8dbde 30%,#eff1f3 48%,#c5c9ce 76%,#e5e7ea 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 1px 2px rgba(20,20,20,.12),0 24px 36px -24px rgba(20,20,20,.5)}
.sal-flap{position:absolute;left:0;right:0;top:0;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--fp);
  background:
    linear-gradient(93deg,rgba(255,255,255,0) 0 60%,rgba(255,255,255,.6) 61%,rgba(255,255,255,0) 63.5% 100%),
    linear-gradient(172deg,#eceef0 0%,#c3c7cc 46%,#e0e3e6 70%,#b2b6bc 100%);
  box-shadow:0 8px 10px -7px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.1);
  transform:perspective(600px) rotateX(0deg);transform-origin:50% 0;backface-visibility:hidden}
.sal-flap b{font:italic 500 30px/1 var(--bod);color:var(--s-noir)}
.sal-flap svg{width:22px;height:22px;color:var(--s-noir)}
.sal-foil h3{margin:0;font:600 clamp(21px,1.85vw,25px)/1.14 var(--bod);letter-spacing:-.005em;text-wrap:balance}
.sal-foil p{margin:10px 0 0;font-size:15px;line-height:1.55;color:#3d393b}
.sal-foils.sal-pre .sal-foil{translate:0 calc(var(--y) + 26px)}
.sal-foils.sal-pre .sal-flap{transform:perspective(600px) rotateX(-120deg)}
.sal-foils.sal-go .sal-foil{opacity:1;translate:0 var(--y);transition:opacity .6s var(--ease) calc(var(--i) * 130ms),translate .8s var(--ease) calc(var(--i) * 130ms)}
.sal-foils.sal-go .sal-flap{transform:perspective(600px) rotateX(0deg);transition:transform .9s cubic-bezier(.3,1.3,.5,1) calc(.35s + var(--i) * 130ms)}
.sal-notes{list-style:none;margin:clamp(44px,5.4vw,68px) 0 0;padding:22px 0 0;border-top:1px solid #e7e1e2;display:flex;flex-wrap:wrap;gap:14px 40px}
.sal-notes li{display:flex;align-items:center;gap:12px;font:500 15px/1.4 var(--body)}
.sal-notes svg{width:30px;height:30px;padding:7px;flex:none;border-radius:50%;background:var(--s-blush);color:var(--s-noir)}

/* ---------------------------------------------------------------- 02 sample calls */
.sal-calls{background:var(--s-noir);color:#fff;padding-block:clamp(64px,8.5vw,128px)}
.sal-calls .sal-head p{color:#bdb5b8}
.sal-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--s-noir2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sal-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  color:#d2cbce;cursor:pointer;font:600 15px/1 var(--body);white-space:nowrap;transition:background-color .2s,color .2s}
.sal-tabs button svg{width:16px;height:16px;flex:none}
.sal-tabs button:hover{color:#fff}
.sal-tabs button[aria-selected="true"]{background:var(--s-blush);color:var(--s-noir)}
.sal-tn{font-weight:500}
.sal-panels{margin-top:clamp(34px,4.2vw,56px)}
.sal-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4.8vw,76px);align-items:start;border-radius:14px}
.sal-panel:focus-visible{outline-offset:10px}
.sal-script{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.sal-script li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:4px 22px;align-items:baseline}
.sal-who{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8f888b}
.sal-script .sal-ai .sal-who{color:var(--s-blush)}
.sal-script p{margin:0}
.sal-script .sal-cl p{font:italic 500 clamp(20px,1.85vw,25px)/1.32 var(--bod);color:#fff;text-wrap:pretty}
.sal-script .sal-ai p{padding-left:16px;border-left:2px solid rgba(244,197,203,.6);font-size:16.5px;line-height:1.6;color:#dcd5d8}
.sal-sum{position:relative;padding:clamp(22px,2.4vw,30px);border-radius:16px;background:#fff;color:var(--s-noir);box-shadow:0 34px 60px -34px rgba(0,0,0,.9)}
.sal-sum::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:16px 16px 0 0;background:var(--s-blush)}
.sal-sum header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding-bottom:14px;border-bottom:2px solid var(--s-noir)}
.sal-sum header b{font:600 27px/1 var(--bod)}
.sal-sum header span{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--s-muted)}
.sal-sum dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin:4px 0 0}
.sal-sum dl > div{padding:11px 0;border-bottom:1px solid #ece6e7}
.sal-sum .sal-wide{grid-column:1/-1}
.sal-sum dt{font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted)}
.sal-sum dd{margin:3px 0 0;font:500 16px/1.4 var(--body)}
.sal-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.sal-chips span{display:inline-flex;align-items:center;padding:8px 11px;border-radius:999px;background:var(--s-blush);font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sal-chips span + span{background:#f1edee}
.sal-fine{margin:clamp(30px,3.6vw,46px) 0 0;max-width:90ch;font:500 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8d8689}

/* ---------------------------------------------------------------- 03 the salon tablet */
.sal-book{background:var(--s-blush);padding-block:clamp(64px,8.5vw,128px)}
.sal-book .lab{color:#5b4e52}
.sal-book .sal-head-row > p{margin:0;max-width:44ch;font-size:17px;line-height:1.6;color:#4a3f43;text-wrap:pretty}
.sal-tablet{margin:clamp(36px,4.6vw,60px) auto 0;max-width:1100px}
.sal-bezel{position:relative;padding:clamp(12px,1.6vw,20px);border-radius:clamp(22px,2.6vw,36px);background:linear-gradient(145deg,#2c2b2e,#0e0e0f 58%);
  box-shadow:inset 0 0 0 1.5px #3b3a3e,inset 0 0 0 3px #0a0a0a,0 60px 90px -46px rgba(80,24,38,.7),0 20px 34px -20px rgba(0,0,0,.45)}
.sal-cam{position:absolute;left:50%;top:clamp(4px,.6vw,8px);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2e2e32;box-shadow:inset 0 0 0 1.5px #19191b}
.sal-screen{border-radius:clamp(10px,1.2vw,16px);overflow:hidden;background:#fcfbfb;color:var(--s-noir)}
.sal-app{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid #ece6e7;background:#fff}
.sal-app p{margin:0}
.sal-app-b{display:flex;align-items:baseline;gap:9px}
.sal-app-b b{font:600 18px/1 var(--bod)}
.sal-app-b span,.sal-app-d span{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.sal-app-b span{color:var(--s-muted)}
.sal-app-d{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--body)}
.sal-app-d span{padding:4px 7px;border-radius:999px;background:var(--s-noir);color:#fff}
.sal-chev{width:7px;height:7px;border:solid #736a6d;border-width:0 0 2px 2px;rotate:45deg}
.sal-chev.r{rotate:-135deg}
.sal-app-n{justify-self:end;padding:6px 10px;border-radius:999px;background:var(--s-blush);font:600 12.5px/1 var(--body)}
.sal-cal{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.4fr)}
.sal-day{--rail:52px;--rh:clamp(24px,2.3vw,30px);position:relative;display:grid;grid-template-columns:var(--rail) repeat(2,minmax(0,1fr));
  grid-template-rows:auto repeat(14,var(--rh));column-gap:8px;padding:14px 16px 20px 6px}
.sal-chair{grid-column:var(--c);grid-row:1;display:flex;align-items:center;gap:9px;padding:0 0 12px;min-width:0}
.sal-chair i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--s-noir);color:#fff;font:600 13px/1 var(--bod);font-style:normal}
.sal-chair p{display:grid;gap:3px;margin:0;min-width:0}
.sal-chair b{font:600 14px/1.1 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sal-chair span{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--s-muted)}
.sal-grid{grid-column:2/4;grid-row:2/-1;border-bottom:1px solid #e3dcde;
  background:repeating-linear-gradient(180deg,#e3dcde 0 1px,transparent 1px calc(var(--rh) * 2)),
    repeating-linear-gradient(180deg,transparent 0 var(--rh),#f2eeef var(--rh) calc(var(--rh) + 1px),transparent calc(var(--rh) + 1px) calc(var(--rh) * 2))}
.sal-tm{grid-column:1;grid-row:var(--r);align-self:start;translate:0 -50%;padding-right:4px;text-align:right;font:500 10px/1 var(--mono);color:#736a6d}
.sal-ap{grid-column:var(--c);grid-row:var(--r) / span var(--n);position:relative;z-index:1;margin:2px 0 1px;padding:4px 9px;border-radius:7px;min-width:0;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:0 6px;background:#f1edee;box-shadow:inset 3px 0 0 #bdb5b8;font:12px/1.4 var(--body)}
.sal-ap b{font-weight:600;white-space:nowrap}
.sal-ap span{color:#6d6568;white-space:nowrap}
.sal-ap.sal-brk{background:repeating-linear-gradient(-45deg,#f7f4f4 0 6px,#efeaeb 6px 12px);box-shadow:none;color:#766d70}
.sal-ap.sal-brk span{color:#766d70}
.sal-ap.sal-in-chair{background:var(--s-noir);color:#fff;box-shadow:inset 3px 0 0 var(--s-blush)}
.sal-ap.sal-in-chair span{color:#cfc7ca}
.sal-ap.sal-in-chair::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(var(--nt) * var(--rh) - 3px);height:2px;background:var(--s-rose)}
.sal-ap .sal-tag{position:absolute;left:9px;bottom:7px;padding:3px 6px;border-radius:4px;background:rgba(255,255,255,.12);color:#fff;font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.sal-ap.sal-new{background:var(--s-blush);box-shadow:inset 3px 0 0 var(--s-noir),0 6px 14px -8px rgba(120,40,56,.6);padding-right:44px}
.sal-fill{display:contents}
.sal-new em{position:absolute;right:6px;top:50%;translate:0 -50%;padding:4px 6px;border-radius:4px;background:var(--s-noir);color:#fff;font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.sal-open{display:none}
.sal-now{grid-column:1/4;grid-row:2;align-self:start;position:relative;z-index:0;height:2px;margin-top:calc(var(--t) * var(--rh) - 1px);margin-left:calc(var(--rail) - 2px);background:var(--s-rose);pointer-events:none}
.sal-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--s-rose)}
.sal-now span{position:absolute;right:calc(100% + 8px);top:50%;translate:0 -50%;padding:3px 4px;border-radius:4px;background:var(--s-rose);color:#fff;font:500 9.5px/1 var(--mono)}
.sal-inbox{display:flex;flex-direction:column;padding:16px 16px 18px;border-left:1px solid #ece6e7;background:#fff}
.sal-inbox-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;font:600 13.5px/1.3 var(--body)}
.sal-inbox-h b{display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--s-noir);color:#fff;font:600 12.5px/1 var(--body)}
.sal-inbox ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sal-nb{padding:12px 12px 12px 14px;border-radius:10px;background:#fcf4f5;box-shadow:inset 0 0 0 1px #f1d9dd,inset 3px 0 0 var(--s-blush)}
.sal-nb p{margin:0}
.sal-nb-t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sal-nb-t b{font:600 15px/1.2 var(--body)}
.sal-nb-t em{padding:4px 6px;border-radius:4px;background:var(--s-blush);font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.sal-nb-s{margin-top:5px!important;font-size:13px;line-height:1.4}
.sal-nb-s span{color:#7a7174}
.sal-nb-w{margin-top:7px!important;font:600 12.5px/1.3 var(--body)}
.sal-nb-p{margin-top:3px!important;font:500 11px/1.3 var(--mono);color:#7a7174}
.sal-inbox-x{display:flex;align-items:center;gap:8px;margin:14px 0 0!important;padding:10px 12px;border-radius:10px;background:#f6f3f4;font:500 12.5px/1.35 var(--body);color:#5d585a}
.sal-inbox-x svg{width:15px;height:15px;flex:none;color:var(--s-noir)}
.sal-inbox-f{margin:auto 0 0!important;padding-top:14px;font:500 9.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#736a6d}
.sal-tablet figcaption{margin-top:18px;text-align:center;font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b5d62}
/* the tablet fills as the calls book (only when it starts below the fold) */
.sal-tablet .sal-nb{transition:opacity .55s var(--ease),translate .55s var(--ease)}
.sal-tablet.sal-pre .sal-nb{translate:0 12px}
.sal-tablet.sal-pre .sal-new{background:transparent;box-shadow:inset 0 0 0 1.5px #cfc7ca;border:0;outline:1.5px dashed #b3aaad;outline-offset:-1.5px}
.sal-tablet.sal-pre .sal-new .sal-open{display:block;color:#736a6d}
.sal-tablet.sal-pre .sal-new .sal-fill{display:none}
.sal-tablet .sal-nb.sal-show{opacity:1;translate:0 0}
.sal-tablet.sal-pre .sal-new.sal-show{background:var(--s-blush);box-shadow:inset 3px 0 0 var(--s-noir),0 6px 14px -8px rgba(120,40,56,.6);outline:0;animation:sal-pop .5s var(--ease)}
.sal-tablet.sal-pre .sal-new.sal-show .sal-open{display:none}
.sal-tablet.sal-pre .sal-new.sal-show .sal-fill{display:contents}
@keyframes sal-pop{from{scale:.94}}

/* ---------------------------------------------------------------- 04 pricing: the wall price list */
.sal-price{position:relative;overflow:hidden;color:#fff;padding-block:clamp(64px,8.5vw,128px);
  background:
    radial-gradient(48% 46% at 50% 62%,rgba(255,194,138,.11),rgba(255,194,138,0) 72%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,rgba(255,255,255,0) 1px 30px,rgba(0,0,0,.28) 30px 32px),
    var(--s-noir)}
.sal-price .sal-head p{color:#bdb5b8}
.sal-board{--pad:18px;position:relative;max-width:820px;margin:clamp(38px,4.6vw,60px) auto 0;padding:clamp(34px,4.6vw,62px) clamp(22px,5.4vw,74px) clamp(30px,4vw,52px);
  border-radius:4px;color:var(--s-noir);background:linear-gradient(172deg,#f9dade 0%,#f4c5cb 46%,#eeb8bf 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(0,0,0,.4),0 64px 90px -50px rgba(0,0,0,.95)}
.sal-stud{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#e3e5e8 30%,#9ea2a8 80%);
  box-shadow:0 2px 3px rgba(0,0,0,.35),0 0 0 3px rgba(0,0,0,.06)}
.sal-stud:nth-of-type(1){left:16px;top:16px}
.sal-stud:nth-of-type(2){right:16px;top:16px}
.sal-stud:nth-of-type(3){left:16px;bottom:16px}
.sal-stud:nth-of-type(4){right:16px;bottom:16px}
.sal-board-h{text-align:center}
.sal-board-h p{margin:0}
.sal-board-k{display:flex;align-items:center;justify-content:center;gap:14px;font:500 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase}
.sal-board-k::before,.sal-board-k::after{content:"";width:34px;height:1.5px;background:currentColor}
.sal-board-t{margin-top:14px!important;font:italic 500 clamp(38px,4.8vw,62px)/1 var(--bod)}
.sal-board-s{margin-top:12px!important;font:600 11.5px/1 var(--body);letter-spacing:.3em;text-transform:uppercase}
.sal-menu{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:6px 0 0;border-top:2px solid var(--s-noir)}
.sal-menu li{display:flex;align-items:baseline;gap:12px;padding:clamp(10px,1.2vw,14px) 0;font:600 clamp(18px,2vw,25px)/1.2 var(--bod)}
.sal-menu li:first-child{font-size:clamp(21px,2.5vw,31px)}
.sal-menu li i,.sal-est i{flex:1 1 24px;min-width:24px;height:3px;background:radial-gradient(circle,var(--s-noir) 1.15px,transparent 1.6px) 0 50%/8px 3px repeat-x;opacity:.62}
.sal-menu li b{font-weight:800;white-space:nowrap;font-variant-numeric:lining-nums}
.sal-only{margin:10px 0 0;text-align:center;font:500 13.5px/1.5 var(--body);color:#4b3f43}
.sal-month{margin-top:clamp(24px,3vw,38px);padding-top:clamp(20px,2.6vw,30px);border-top:2px solid var(--s-noir)}
.sal-month-k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:italic 500 clamp(24px,2.5vw,31px)/1 var(--bod)}
.sal-month-k span{font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.sal-comb{position:relative;height:96px;margin-top:10px;border-radius:10px}
.sal-comb:has(input:focus-visible){outline:2px solid var(--s-noir);outline-offset:4px}
.sal-spine{position:absolute;left:0;right:0;top:22px;height:16px;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,#39383b,#0e0e0f);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.sal-teeth{position:absolute;left:var(--pad);right:var(--pad);top:37px;height:34px;
  background:repeating-linear-gradient(90deg,rgba(20,20,20,.26) 0 3px,transparent 3px 7.5px);
  -webkit-mask:linear-gradient(180deg,#000 70%,rgba(0,0,0,.35));mask:linear-gradient(180deg,#000 70%,rgba(0,0,0,.35))}
.sal-teeth.sal-cut{background:repeating-linear-gradient(90deg,var(--s-noir) 0 3px,transparent 3px 7.5px);clip-path:inset(0 calc((1 - var(--p,.2222)) * 100%) 0 0)}
.sal-clip{position:absolute;z-index:2;top:8px;left:calc(var(--pad) + var(--p,.2222) * (100% - var(--pad) * 2));width:16px;height:80px;translate:-50% 0;pointer-events:none;
  border-radius:8px 8px 6px 6px;background:linear-gradient(90deg,#8f939a,#f5f6f8 45%,#b4b8be);box-shadow:0 8px 12px -5px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.14)}
.sal-clip::before{content:"";position:absolute;left:-3px;right:-3px;top:-2px;height:26px;border-radius:10px 10px 4px 4px;background:linear-gradient(90deg,#000,#3a393c 45%,#0c0c0c)}
.sal-clip::after{content:"";position:absolute;left:50%;top:30px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--s-blush);box-shadow:0 0 0 2px #fff}
.sal-comb input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;background:transparent;cursor:grab;-webkit-appearance:none;appearance:none}
.sal-comb input:active{cursor:grabbing}
.sal-comb input:focus{outline:none}
.sal-comb input::-webkit-slider-runnable-track{height:96px;background:transparent;border:0}
.sal-comb input::-moz-range-track{height:96px;background:transparent;border:0}
.sal-comb input::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:96px;background:transparent;border:0}
.sal-comb input::-moz-range-thumb{width:36px;height:96px;background:transparent;border:0}
.sal-scale{position:relative;height:16px;margin:4px var(--pad) 0}
.sal-scale span{position:absolute;left:calc(var(--f) * 100%);translate:-50% 0;font:500 11px/1 var(--mono);letter-spacing:.04em}
.sal-est{display:flex;align-items:baseline;gap:12px;margin:24px 0 0;font:800 clamp(26px,3.4vw,42px)/1.1 var(--bod)}
.sal-est span{white-space:nowrap;font-variant-numeric:lining-nums}
.sal-est strong{font-weight:800;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.sal-est-n{margin:8px 0 0;text-align:right;font:500 13px/1.5 var(--body);color:#4b3f43}

/* ---------------------------------------------------------------- 05 FAQ */
.sal-faq{--fq-line:rgba(20,20,20,.14);--fq-muted:#5d585a;background:#fff;padding-block:clamp(64px,8.5vw,128px)}
.sal-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.sal-faq .sal-head{position:sticky;top:calc(var(--head) + 28px)}
.sal-faq summary i{margin-right:8px;border-radius:50%;box-shadow:0 0 0 8px var(--s-blush);color:var(--s-noir)}
.sal-faq summary:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------------------------------------------------------------- close + footer */
.sal-close{position:relative;overflow:hidden;color:#fff;text-align:center;padding:0 0 clamp(72px,9vw,130px);
  background:radial-gradient(60% 70% at 50% 0,rgba(255,194,138,.15),rgba(255,194,138,0) 70%),var(--s-noir)}
.sal-strip{display:flex;justify-content:center;padding-top:clamp(40px,5vw,64px)}
.sal-strip-in{display:flex;gap:clamp(16px,2.8vw,42px);padding:13px clamp(18px,2.4vw,30px);border-radius:999px;background:linear-gradient(180deg,#f9dade,#e4acb5);
  box-shadow:0 22px 40px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(120,48,62,.2)}
.sal-sb{position:relative;display:block;width:clamp(16px,1.8vw,24px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 36%,#8c8176,#4a423c 72%);box-shadow:0 0 0 3px #d6d9dd}
.sal-sb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fffefa 0 20%,#fff4de 44%,#ffdcab 76%,#f4bb80 100%);
  box-shadow:0 0 7px 2px rgba(255,230,186,.8),0 0 20px 6px rgba(255,204,146,.34),0 0 50px 16px rgba(255,186,120,.13)}
.sal-close.sal-pre .sal-sb::after{opacity:0}
.sal-close.sal-go .sal-sb::after{animation:sal-lamp .6s ease-out calc(var(--o) * 90ms) both}
.sal-close h2{margin:clamp(36px,4.6vw,58px) auto 0;font:800 clamp(46px,7.2vw,110px)/.95 var(--bod);letter-spacing:-.02em}
.sal-close h2 span,.sal-close h2 em{display:block}
.sal-close h2 em{margin-top:.04em;font-weight:500}
.sal-close-in > p{margin:24px auto 0;max-width:48ch;font-size:clamp(16.5px,1.4vw,19px);line-height:1.6;color:#d0c9cc}
.sal-close .sal-cta{margin-top:30px}
.sal-foot{background:#0b0b0c;color:#fff}
.sal-foot .grid3 i:not(.o){background:var(--s-blush)}
.sal-foot .grid3 i.o{box-shadow:inset 0 0 0 1.5px var(--s-blush)}
.sal-foot .p3-tag{font:italic 500 22px/1.2 var(--bod)}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1099px){
  .sal-shelf{display:none}
  .sal-foils{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(24px,3vw,34px)}
  .sal-mirror{--T:30px;--bd:20px}
}
@media (max-width:900px){
  .sal-panel,.sal-faq-grid{grid-template-columns:minmax(0,1fr)}
  .sal-faq .sal-head{position:static}
  .sal-cal{grid-template-columns:minmax(0,1fr)}
  .sal-inbox{border-left:0;border-top:1px solid #ece6e7}
  .sal-inbox ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sal-mirror{--T:28px;--bd:18px}
  .sal-bulb{box-shadow:0 0 0 2.5px #d6d9dd,0 0 0 3.5px rgba(96,40,52,.35),0 4px 7px 2px rgba(80,20,34,.25)}
}
@media (max-width:719px){
  .sal-hero{grid-template-columns:var(--gut) 0 minmax(0,1fr) 34px 8px}
  .sal-mirror{--k:.5;--T:20px;--bd:14px;--n:6;--bb:20px}
  .sal-ba{left:calc(50cqw - (50cqw - var(--T) / 2) * var(--cm));top:calc(var(--R) - (var(--R) - var(--T) / 2) * var(--sm))}
  .sal-ba.sal-odd{display:none}
  .sal-bulb{box-shadow:0 0 0 2px #d6d9dd,0 0 0 3px rgba(96,40,52,.35)}
  .sal-bulb::after{box-shadow:0 0 5px 1px rgba(255,230,186,.8),0 0 14px 4px rgba(255,204,146,.32),0 0 34px 10px rgba(255,186,120,.12)}
  .sal-in{padding:calc(var(--R) * .5 + 4px) calc(var(--T) + 12px) calc(var(--T) * 1.1 + 40px)}
  .sal-k{flex-direction:column;gap:2px;font-size:10.5px}
  .sal-k span + span::before{display:none}
  .sal-hero h1{margin-top:12px;font-size:clamp(33px,10vw,40px)}
  .sal-sub{margin-top:16px;font-size:15.5px}
  .sal-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  .sal-cta .btn{height:48px;padding:0 14px;font-size:15px}
  .sal-pole{--pw:17px;--ph:clamp(130px,36vw,170px);justify-self:center;align-self:center;margin:30% 0 0}
  .sal-pole-cap,.sal-pole-base{width:calc(var(--pw) + 6px)}
  .sal-ig-l{grid-column:3;justify-self:start;margin:0 0 0 28px}
  .sal-ig-r{grid-column:4 / 6;justify-self:start;margin:0 0 0 6px}
  .sal-ig .sal-it-mist,.sal-ig .sal-it-jar{display:none}
  .sal-l2{font-size:min(1em,calc((100vw - 122px) / 7.4))}
  .sal-it-bowl{width:58px}
  .sal-it-clip{width:54px}
  .sal-close .sal-sb:nth-child(-n+3),.sal-close .sal-sb:nth-child(n+11){display:none}
}
@media (max-width:600px){
  .sal-foils{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .sal-foil{translate:0 0}
  .sal-foils.sal-pre .sal-foil{translate:0 26px}
  .sal-foils.sal-go .sal-foil{translate:0 0}
  .sal-notes{gap:12px}
  .sal-tabs{display:flex;width:100%}
  .sal-tabs button{flex:1 1 0;min-width:0;padding:0 8px;font-size:14px;gap:6px}
  .sal-tn{display:none}
  .sal-script li{grid-template-columns:minmax(0,1fr)}
  .sal-sum dl{grid-template-columns:minmax(0,1fr)}
  .sal-app{grid-template-columns:1fr auto;padding:10px 12px}
  .sal-app-n{display:none}
  .sal-day{--rail:34px;column-gap:5px;padding:12px 8px 16px 2px}
  .sal-chair{gap:6px}
  .sal-chair i{width:24px;height:24px;font-size:12px}
  .sal-chair b{font-size:12.5px}
  .sal-app-b span{display:none}
  .sal-app-d{gap:7px}
  .sal-app-d b{white-space:nowrap}
  .sal-ap{padding:3px 6px;font-size:11px;flex-direction:column;flex-wrap:nowrap}
  .sal-ap span,.sal-ap b{overflow:hidden;text-overflow:ellipsis}
  .sal-ap.sal-s1{flex-direction:row;align-items:center;gap:0 4px}
  .sal-ap.sal-s1 span{min-width:0}
  .sal-ap.sal-new{padding-right:34px}
  .sal-new em{right:4px;padding:3px 4px;font-size:8px}
  .sal-now span{right:calc(100% + 3px);padding:2px 3px;font-size:8.5px}
  .sal-inbox ol{grid-template-columns:minmax(0,1fr)}
  .sal-board{padding-inline:18px}
  .sal-stud{width:14px;height:14px}
  .sal-stud:nth-of-type(1),.sal-stud:nth-of-type(3){left:10px}
  .sal-stud:nth-of-type(2),.sal-stud:nth-of-type(4){right:10px}
  .sal-stud:nth-of-type(1),.sal-stud:nth-of-type(2){top:10px}
  .sal-stud:nth-of-type(3),.sal-stud:nth-of-type(4){bottom:10px}
  .sal-menu li{gap:8px;font-size:17px}
  .sal-menu li:first-child{font-size:19px}
  .sal-est{gap:8px;font-size:26px}
}
@media (max-width:380px){
  .sal-in{padding-inline:calc(var(--T) + 8px)}
  .sal-l2{font-size:min(1em,calc((100vw - 114px) / 7.4))}
  .sal-cta .btn svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sal-bulb::after,.sal-sb::after{animation:none!important;opacity:1!important}
  .sal-glass::after{display:none}
  .sal-pole-stripes{animation:none}
}