@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/f-marcellus.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/f-montserrat.woff2) format('woff2')}
:root{
  --ink:#0F0E0C; --ink-2:#191714; --ink-3:#25221D; --ink-line:#3A352D;
  --paper:#FBF8F3; --bone:#F3EDE3; --stone:#E8DFD1; --line:#DCD2C2;
  --gold:#B8996B; --gold-soft:#D9C5A0; --gold-ink:#7A613F;
  --text:#2A2622; --muted:#6A6257; --on-dark:#EFE8DC; --on-dark-2:#B9B0A2;
  --serif:'Marcellus','Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,5vw,72px); --max:1280px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --z-nav:50; --z-mbar:60;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--bone);color:var(--ink);padding:10px 16px;z-index:100;border-radius:2px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(72px,9.5vw,136px) 0}
.dk{background:var(--ink);color:var(--on-dark)}
.bn{background:var(--bone)}
.k{font:600 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:22px}
.dk .k{color:var(--gold-soft)}
.h2{font-size:clamp(34px,4.6vw,62px);line-height:1.06}
.lead{font-size:clamp(17px,1.35vw,19px);color:var(--muted);max-width:56ch}
.dk .lead{color:var(--on-dark-2)}
.head{display:grid;gap:22px;margin-bottom:clamp(40px,5vw,72px)}
@media (min-width:900px){.head.split{grid-template-columns:1.1fr .9fr;align-items:end;gap:60px}}

/* buttons: flat, 2px radius */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:2px;font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn .ar{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn.ink{background:var(--ink);color:var(--bone)}
.btn.ink:hover{background:var(--ink-3)}
.btn.bone{background:var(--bone);color:var(--ink)}
.btn.bone:hover{background:#fff}
.btn.line{border-color:currentColor;background:transparent}
.btn.line:hover{background:rgba(184,153,107,.16)}
.btn.sm{min-height:42px;padding:0 18px;font-size:11.5px}
.lk{background:none;border:none;padding:0;cursor:pointer;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.lk:hover{color:#fff}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);color:#fff;transition:background .4s,box-shadow .4s}
.hdr.solid{background:rgba(15,14,12,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--ink-line)}
.hdr-in{display:flex;align-items:center;gap:28px;height:76px;padding:0 var(--gut);max-width:1480px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand svg{width:46px;height:46px;flex-shrink:0}
.brand b{display:block;font:400 19px/1 var(--serif);letter-spacing:.2em}
.brand small{display:block;font:500 9.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-top:7px}
.nav{display:flex;gap:30px}
.nav a{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:8px 0;position:relative;opacity:.9}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-soft);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after{transform:scaleX(1)}
.hdr-tel{font:500 13px/1 var(--sans);letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.burger{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:2px;background:none;cursor:pointer;place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:1.5px;background:#fff;content:"";position:relative}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
@media (max-width:1180px){.nav,.hdr-tel{display:none}.burger{display:grid}}
@media (max-width:560px){.hdr .btn{display:none}.hdr-in{height:66px}.brand svg{width:40px;height:40px}}
.drawer{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--on-dark);padding:22px var(--gut) 40px;display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s;overflow-y:auto}
.drawer.open{visibility:visible;opacity:1;transition:opacity .35s}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.drawer-x{width:46px;height:46px;border:1px solid var(--ink-line);border-radius:2px;background:none;color:#fff;font-size:22px;cursor:pointer}
.drawer nav a{display:block;font:400 34px/1.1 var(--serif);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--ink-line)}
.drawer .btn{margin-top:28px}
.drawer p{margin-top:22px;color:var(--on-dark-2);font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;max-height:1040px;background:var(--ink);color:#fff;overflow:hidden}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(15,14,12,.62) 0,rgba(15,14,12,0) 20%),
  linear-gradient(0deg,rgba(15,14,12,.94) 0,rgba(15,14,12,.74) 30%,rgba(15,14,12,0) 70%),
  radial-gradient(120% 90% at 0% 100%,rgba(15,14,12,.72) 0,rgba(15,14,12,0) 58%)}
.hero-in{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(34px,6.5vh,76px);max-width:1480px;margin:0 auto}
.hero h1{display:flex;flex-direction:column;gap:20px}
.hero .h1-k{font:600 12px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
.hero .h1-d{font:400 clamp(46px,7.6vw,118px)/.98 var(--serif);letter-spacing:-.015em}
.hero-p{max-width:52ch;margin-top:24px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:rgba(255,255,255,.9)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.gchip{display:inline-flex;align-items:center;gap:10px;margin-left:8px;font:500 13.5px/1.2 var(--sans);text-decoration:none;color:#fff;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.4)}
.gchip:hover{border-color:#fff}
.gchip .st{color:var(--gold-soft);letter-spacing:.14em;font-size:13px}
.hero-ctl{position:absolute;z-index:3;right:var(--gut);bottom:136px;display:flex;align-items:center;gap:14px;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.hero-pause{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(15,14,12,.3);cursor:pointer;display:grid;place-items:center}
.hero-pause svg{width:14px;height:14px;fill:#fff}
.hero-pause .pl{display:none}.hero-pause[aria-pressed="true"] .pl{display:block}.hero-pause[aria-pressed="true"] .pa{display:none}
@media (max-width:1100px){.hero-ctl span{display:none}.hero-ctl{bottom:auto;top:92px;right:var(--gut)}}
@media (max-width:760px){
  .hero{height:auto;min-height:100svh;max-height:none;display:flex;flex-direction:column;justify-content:flex-end}
  .hero-in{position:relative;padding-top:max(230px,38svh);padding-bottom:28px}
  .hero-p{margin-top:16px}.hero-cta{margin-top:22px}.hero h1{gap:14px}
  .hero-v{object-position:50% 18%}
  .hero::after{background:linear-gradient(180deg,rgba(15,14,12,.6) 0,rgba(15,14,12,0) 16%),linear-gradient(0deg,rgba(15,14,12,1) 0,rgba(15,14,12,.92) 34%,rgba(15,14,12,0) 66%)}
  .hero-cta .btn{flex:1 1 100%}
  .gchip{margin:6px 0 0}
}

/* ---------- facts strip ---------- */
.facts{background:var(--bone);border-bottom:1px solid var(--line)}
.facts ul{display:grid;grid-template-columns:repeat(4,1fr)}
.facts li{padding:30px 0 28px;padding-left:clamp(16px,2.4vw,36px);border-left:1px solid var(--line)}
.facts li:first-child{border-left:none;padding-left:0}
.facts b{display:block;font:400 clamp(30px,3.3vw,46px)/1 var(--serif);color:var(--ink)}
.facts span{display:block;margin-top:10px;font:500 11.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts a{text-decoration:none}
@media (max-width:760px){.facts ul{grid-template-columns:1fr 1fr}.facts li{padding:22px 0 20px 18px}.facts li:nth-child(odd){border-left:none;padding-left:0}.facts li:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- treatments index ---------- */
.tx{display:grid;gap:56px}
@media (min-width:980px){.tx{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(48px,6vw,96px);align-items:start}}
.tl a{display:grid;grid-template-columns:auto 1fr auto;column-gap:clamp(16px,2.4vw,34px);align-items:baseline;padding:30px 0;border-top:1px solid var(--line);text-decoration:none;position:relative}
.tl li:last-child a{border-bottom:1px solid var(--line)}
.tl .n{font:500 12px/1 var(--sans);letter-spacing:.14em;color:var(--gold-ink)}
.tl h3{font-size:clamp(26px,3vw,40px);line-height:1.1;transition:color .3s}
.tl p{grid-column:2;margin-top:10px;color:var(--muted);font-size:16px;max-width:50ch}
.tl .f{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.tl a::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.tl a:hover::after,.tl a:focus-visible::after,.tl a.on::after{transform:scaleX(1)}
.tl a:hover h3,.tl a.on h3{color:var(--gold-ink)}
.tl .th{display:none}
.ts{position:sticky;top:104px;aspect-ratio:4/5;max-height:calc(100vh - 140px);margin-left:auto;width:100%;background:var(--stone);overflow:hidden}
.ts img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.ts img.on{opacity:1;transform:none}
.ts figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--on-dark);font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:12px 16px}
@media (max-width:979px){
  .ts{display:none}
  .tl a{grid-template-columns:84px 1fr;column-gap:18px;align-items:start;padding:22px 0}
  .tl .th{display:block;grid-row:1 / span 3;width:84px;height:105px;object-fit:cover}
  .tl .n{display:none}
  .tl h3,.tl p,.tl .f{grid-column:2}
  .tl p{font-size:15px;margin-top:6px}
  .tl .f{margin-top:12px;color:var(--gold-ink)}
}

/* ---------- reels ---------- */
.reels{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,18px)}
.reel{position:relative}
.reel video,.reel img{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--stone)}
.reel figcaption{margin-top:12px;font:600 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.reel figcaption span{color:var(--gold-ink);margin-right:8px}
@media (max-width:1000px){
  .reels{grid-auto-flow:column;grid-auto-columns:min(58vw,260px);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 14px;scrollbar-width:thin}
  .reel{scroll-snap-align:start}
}

/* ---------- prices ---------- */
.px{display:grid;gap:36px}
@media (min-width:980px){.px{grid-template-columns:300px minmax(0,1fr);gap:clamp(48px,7vw,110px);align-items:start}}
.ptabs{display:flex;flex-direction:column;position:sticky;top:104px}
.ptabs button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;background:none;border:none;border-top:1px solid var(--ink-line);padding:18px 2px;cursor:pointer;font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);transition:color .3s,padding .4s var(--ease)}
.ptabs button:last-child{border-bottom:1px solid var(--ink-line)}
.ptabs button small{font:500 11px/1 var(--sans);letter-spacing:.1em;color:var(--ink-line)}
.ptabs button:hover{color:#fff}
.ptabs button[aria-selected="true"]{color:var(--gold-soft);padding-left:14px}
.ptabs button[aria-selected="true"] small{color:var(--gold)}
@media (max-width:979px){
  .ptabs{position:static;flex-direction:row;overflow-x:auto;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);gap:8px;scrollbar-width:none}
  .ptabs::-webkit-scrollbar{display:none}
  .ptabs button{flex:0 0 auto;border:1px solid var(--ink-line)!important;border-radius:2px;padding:13px 16px;font-size:12px;white-space:nowrap}
  .ptabs button small{display:none}
  .ptabs button[aria-selected="true"]{padding-left:16px;border-color:var(--gold)!important}
}
.pp h3{font-size:clamp(28px,3vw,40px);color:#fff;margin-bottom:8px}
.pp-note{color:var(--on-dark-2);font-size:15.5px;max-width:60ch;margin-bottom:8px}
.pl{margin-top:22px}
.pr{padding:20px 0;border-top:1px solid var(--ink-line)}
.pr:last-child{border-bottom:1px solid var(--ink-line)}
.pr-row{display:flex;align-items:baseline;gap:14px}
.pr-n{font:500 clamp(16px,1.4vw,19px)/1.3 var(--sans);color:#fff}
.pr-d{flex:1;border-bottom:1px dotted #5A5346;transform:translateY(-4px);min-width:20px}
.pr-p{font:400 clamp(20px,1.9vw,26px)/1 var(--serif);color:var(--gold-soft);white-space:nowrap}
.pr-p.ask{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.pr-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:10px;font-size:14px;color:var(--on-dark-2)}
.pr-m .lk{margin-left:auto}
.pr details{flex-basis:auto}
.pr summary{cursor:pointer;list-style:none;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);display:inline-flex;align-items:center;gap:8px}
.pr summary::-webkit-details-marker{display:none}
.pr summary::before{content:"+";font:400 16px/1 var(--sans);color:var(--gold-soft)}
.pr details[open] summary::before{content:"–"}
.pr details ol{flex-basis:100%;margin-top:14px;counter-reset:s;display:grid;gap:8px;max-width:62ch}
.pr details li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;font-size:14.5px;color:var(--on-dark)}
.pr details li::before{content:counter(s,decimal-leading-zero);font:500 11px/1.9 var(--sans);color:var(--gold)}
.pr details[open]{flex-basis:100%;order:3}
.src{margin-top:26px;font-size:13px;color:var(--on-dark-2)}

/* ---------- laser plan ---------- */
.lp{display:grid;gap:34px}
@media (min-width:980px){.lp{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,5vw,80px);align-items:start}}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:2px;margin-bottom:26px}
.seg button{background:none;border:none;cursor:pointer;padding:13px 24px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.area{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 18px;border:1px solid var(--line);border-radius:2px;background:#fff;cursor:pointer;text-align:left;font:500 15.5px/1.2 var(--sans);transition:border-color .25s,background .25s,color .25s}
.area span{font:400 19px/1 var(--serif);color:var(--gold-ink)}
.area:hover{border-color:var(--ink)}
.area[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.area[aria-pressed="true"] span{color:var(--gold-soft)}
.area[disabled]{opacity:.5;cursor:default;border-style:dashed}
.area[disabled] span{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.sum{background:var(--ink);color:var(--on-dark);padding:clamp(26px,3vw,40px);position:sticky;top:104px}
.sum h3{font-size:28px;color:#fff;margin-bottom:18px}
.sum-list{min-height:44px;color:var(--on-dark-2);font-size:15px;line-height:1.6;margin-bottom:22px}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-top:1px solid var(--ink-line);font-size:15px}
.sum-row b{font:400 30px/1 var(--serif);color:#fff}
.sum-rec{padding:18px 0 4px;border-top:1px solid var(--ink-line);font-size:15.5px;line-height:1.6;color:var(--on-dark)}
.sum-rec b{color:var(--gold-soft);font-weight:600}
.sum .btn{width:100%;margin-top:20px}
.sum small{display:block;margin-top:14px;font-size:12.5px;color:var(--on-dark-2);line-height:1.55}

/* ---------- Jiman ---------- */
.jm{display:grid;gap:44px}
@media (min-width:980px){.jm{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(48px,6vw,96px);align-items:center}}
.jm-ph{position:relative}
.jm-ph .a{width:100%;aspect-ratio:3/2;object-fit:cover}
.jm-ph figcaption{margin-top:14px;font:500 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.jm p{margin-top:20px;max-width:54ch}
.jm-st{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(20px,3vw,44px);margin-top:36px;padding-top:28px;border-top:1px solid var(--line);justify-content:start}
.jm-st b{display:block;font:400 clamp(30px,3vw,42px)/1 var(--serif);color:var(--ink)}
.jm-st span{display:block;margin-top:8px;font:500 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);max-width:16ch}
.shelf{display:grid;gap:28px;margin-top:clamp(64px,7vw,104px);padding-top:36px;border-top:1px solid var(--line);align-items:center}
@media (min-width:860px){.shelf{grid-template-columns:200px 1fr 200px;gap:44px}}
.shelf img{width:200px;aspect-ratio:1;object-fit:cover}
@media (max-width:859px){.shelf img:last-child{display:none}}
.shelf ul{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:14px}
.shelf li{font:400 clamp(20px,2vw,27px)/1.2 var(--serif);color:var(--ink)}

/* ---------- reviews ---------- */
.rvx{display:grid;gap:44px}
@media (min-width:980px){.rvx{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(48px,6vw,96px);align-items:start}}
.score{position:sticky;top:104px}
.score .big{font:400 clamp(96px,11vw,168px)/.86 var(--serif);color:var(--ink);letter-spacing:-.03em}
.score .st{color:var(--gold);letter-spacing:.2em;font-size:19px;margin:18px 0 10px}
.score p{color:var(--muted);font-size:15.5px;max-width:30ch}
.score .btn{margin-top:24px}
.score ul{margin-top:28px;border-top:1px solid var(--line)}
.score li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.score li b{color:var(--ink);font-weight:600}
@media (max-width:979px){.score{position:static}}
.qs{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:700px){.qs{grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.4vw,56px)}}
.q{padding:30px 0;border-top:1px solid var(--line)}
.q blockquote{font:400 clamp(20px,1.9vw,25px)/1.36 var(--serif);color:var(--ink)}
.q figcaption{margin-top:18px;font:500 11.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.q figcaption b{color:var(--ink);font-weight:600}

/* ---------- book ---------- */
.bk{display:grid;gap:44px}
@media (min-width:980px){.bk{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,6vw,96px);align-items:start}}
.bk-ph{margin-top:36px;width:min(100%,380px);aspect-ratio:4/5;object-fit:cover}
.steps{margin-top:30px;display:grid;gap:0;counter-reset:st}
.steps li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;padding:18px 0;border-top:1px solid var(--ink-line);font-size:15.5px;color:var(--on-dark)}
.steps li::before{content:counter(st,decimal-leading-zero);font:500 12px/2 var(--sans);letter-spacing:.1em;color:var(--gold)}
.steps b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
.form{background:var(--bone);color:var(--text);padding:clamp(24px,3.4vw,48px)}
.form h3{font-size:30px;color:var(--ink);margin-bottom:6px}
.form form > p:not(.form-note){color:var(--muted);font-size:15px;margin-bottom:26px}
.fg{display:grid;gap:16px}
@media (min-width:620px){.fg.two{grid-template-columns:1fr 1fr}}
.fg + .fg{margin-top:16px}
.f label{display:block;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:2px;padding:15px 14px;font:400 16px/1.3 var(--sans);color:var(--ink);appearance:none;-webkit-appearance:none}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F0E0C' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink)}
.f.bad input,.f.bad select{border-color:#A3402E}
.f .err{display:none;margin-top:7px;font-size:13px;color:#A3402E}
.f.bad .err{display:block}
.form .btn{width:100%;margin-top:22px}
.form-note{margin-top:14px;font-size:13px;color:var(--muted)}
.done{display:none;border:1px solid var(--gold);padding:22px;background:#fff}
.done h4{font:400 24px/1.2 var(--serif);color:var(--ink);margin:0 0 8px}
.done p{font-size:15px;color:var(--text)}
.done .pv{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted)}
.form.sent form{display:none}.form.sent .done{display:block}

/* ---------- visit + faq ---------- */
.vx{display:grid;gap:56px}
@media (min-width:980px){.vx{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,6vw,96px);align-items:start}}
.vi-ph{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;margin-bottom:30px}
.vi address{font:400 clamp(24px,2.4vw,32px)/1.25 var(--serif);font-style:normal;color:var(--ink)}
.vi-l{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hrs{margin-top:32px;border-top:1px solid var(--line)}
.hrs li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.hrs li.today{color:var(--ink);font-weight:600}
.opn{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.opn::before{content:"";width:8px;height:8px;border-radius:50%;background:#B0A698}
.opn.is::before{background:#4E8F5E}
.vi-s{display:flex;gap:22px;margin-top:26px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.vi-s a{text-underline-offset:5px;text-decoration-thickness:1px}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font:400 clamp(20px,2vw,26px)/1.25 var(--serif);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--gold-ink);flex-shrink:0;transition:transform .35s var(--ease)}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 0 26px;color:var(--muted);max-width:62ch}
.faq-ask{margin-top:28px}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--on-dark-2);padding:clamp(56px,7vw,96px) 0 150px;font-size:15px}
@media (min-width:761px){.ftr{padding-bottom:56px}}
.ftr-g{display:grid;gap:40px}
@media (min-width:900px){.ftr-g{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.ftr .mark{width:92px;height:92px;margin-bottom:18px}
.ftr .wm{font:400 22px/1 var(--serif);letter-spacing:.2em;color:#fff}
.ftr .wm small{display:block;font:500 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-top:9px}
.ftr h4{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 16px}
.ftr li{margin-bottom:9px}
.ftr a{text-decoration:none}.ftr a:hover{color:#fff}
.ftr-b{margin-top:52px;padding-top:24px;border-top:1px solid var(--ink-line);display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;font-size:12.5px;color:#8C8477}

/* ---------- mobile bar ---------- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1.5fr;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mbar);background:var(--ink);border-top:1px solid var(--ink-line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;transform:translateY(110%);transition:transform .45s var(--ease)}
  .mbar.show{transform:none}
  .mbar .btn{min-height:48px;padding:0 10px;font-size:11px;letter-spacing:.09em;white-space:nowrap}
  .mbar .btn.line{color:var(--on-dark)}
}

/* ---------- additions for the multi-page build (design tokens come from site.css) ---------- */

/* page header on every inner page */
.ph{background:var(--ink);color:var(--on-dark);padding:calc(76px + clamp(34px,5.5vw,76px)) 0 clamp(48px,6vw,88px)}
@media (max-width:560px){.ph{padding-top:calc(66px + 30px)}}
.ph-in{display:grid;gap:38px;align-items:center}
@media (min-width:900px){.ph-in.has-img{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px)}}
.crumbs{font:500 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:22px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0}
.crumbs li+li::before{content:"/";margin:0 10px;opacity:.5}
.crumbs a{text-decoration:none}.crumbs a:hover{color:#fff}
.ph .k{color:var(--gold-soft);margin-bottom:18px}
.ph h1{font-size:clamp(36px,5.4vw,74px);line-height:1.04;color:#fff}
.ph .lead{margin-top:22px;color:rgba(255,255,255,.88);max-width:60ch}
.ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ph-img{aspect-ratio:4/5;max-height:640px;overflow:hidden;background:var(--ink-2)}
.ph-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.ph-img{aspect-ratio:4/3;max-height:380px}}
.facts-row{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:34px;padding-top:24px;border-top:1px solid var(--ink-line)}
.facts-row div{min-width:0}
.facts-row dt{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px}
.facts-row dd{margin:0;font:400 clamp(17px,1.6vw,21px)/1.3 var(--serif);color:#fff}

/* prose */
.prose{max-width:68ch}
.fq{max-width:820px}
.prose p+p{margin-top:18px}
.prose a{color:var(--gold-ink);text-underline-offset:4px}
.sub-h{font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin-bottom:20px}
.sec .lead+.ol,.sec .lead+.stp,.sec .lead+.cmp{margin-top:34px}

/* option list (light) */
.ol{border-top:1px solid var(--line);margin-top:34px}
.ol li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.ol h3{font-size:clamp(22px,2.3vw,30px);line-height:1.15}
.ol h3 a{text-decoration:none}.ol h3 a:hover{color:var(--gold-ink)}
.ol .t{font:600 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);white-space:nowrap;text-align:right}
.ol .t b{display:block;font:400 clamp(20px,2vw,26px)/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:6px}
.ol p{grid-column:1;color:var(--muted);font-size:16px;max-width:58ch}
.ol .more{grid-column:1/-1;margin-top:6px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.ol .more a{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);text-underline-offset:5px}
.ol .more .ex{font-size:14px;color:var(--muted)}
.ol details summary{cursor:pointer;list-style:none;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.ol details summary::-webkit-details-marker{display:none}
.ol details summary::before{content:"+";font:400 16px/1 var(--sans);color:var(--gold-ink)}
.ol details[open] summary::before{content:"–"}
.ol details{flex-basis:100%}
.ol details ul{margin-top:14px;display:grid;gap:8px;max-width:62ch}
.ol details li{display:block;padding:0;border:none;font-size:15px;color:var(--text)}

/* numbered steps (light) */
.stp{counter-reset:s;margin-top:30px;max-width:720px;border-top:1px solid var(--line)}
.stp li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}
.stp li::before{content:counter(s,decimal-leading-zero);font:500 12px/2 var(--sans);letter-spacing:.1em;color:var(--gold-ink)}
.after{margin-top:26px;max-width:62ch;color:var(--muted)}

/* comparison */
.cmp-w{margin-top:34px;overflow-x:auto}
.cmp{width:100%;min-width:620px;border-collapse:collapse;font-size:15.5px}
.cmp th,.cmp td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);border-bottom:1px solid var(--ink)}
.cmp tbody th{font:600 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:20%}

/* reviews on inner pages */
.qs.one{grid-template-columns:1fr}
.rv-more{margin-top:30px}

/* related treatments */
.rel{display:grid;gap:18px;margin-top:34px}
@media (min-width:760px){.rel{grid-template-columns:repeat(3,1fr);gap:24px}}
.rel a{display:block;text-decoration:none}
.rel img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--stone)}
.rel b{display:block;margin-top:14px;font:400 clamp(22px,2.2vw,28px)/1.15 var(--serif)}
.rel span{display:block;margin-top:6px;font-size:15px;color:var(--muted)}
.rel a:hover b{color:var(--gold-ink)}

/* reels with only a few clips */
.reels.few{grid-template-columns:repeat(auto-fill,minmax(180px,230px));justify-content:start}
@media (max-width:1000px){.reels.few{grid-template-columns:none}}

/* call-to-action band */
.cta{background:var(--ink);color:var(--on-dark);padding:clamp(56px,7vw,100px) 0}
.cta-in{display:grid;gap:26px;align-items:center}
@media (min-width:900px){.cta-in{grid-template-columns:minmax(0,1fr) auto;gap:60px}}
.cta h2{font-size:clamp(30px,4vw,52px);line-height:1.08;color:#fff}
.cta p{margin-top:14px;color:var(--on-dark-2);max-width:56ch}
.cta .ph-cta{margin-top:0}

/* hours + address block used on contact and in every footer-adjacent visit section */
.addr{font:400 clamp(24px,2.4vw,32px)/1.25 var(--serif);font-style:normal;color:var(--ink)}
.two{display:grid;gap:44px}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,96px)}}

/* areas table (laser) */
.areas-t{display:grid;gap:34px;margin-top:34px}
@media (min-width:760px){.areas-t{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px)}}
.areas-t h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px}
.areas-t li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:16.5px}
.areas-t li:last-child{border-bottom:1px solid var(--line)}
.areas-t li span{color:var(--gold-ink);font:600 12px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* price list on /services, light panels */
.pp .pr-m{color:var(--on-dark-2)}
.held{font-size:14.5px;color:var(--on-dark-2);max-width:62ch;margin-top:26px}

/* form: preview note and honest states */
.form .pv{margin-top:14px;font-size:13px;color:var(--muted)}
.f .opt{text-transform:none;letter-spacing:0;font-weight:400}

/* gallery */
.gal{display:grid;gap:16px;margin-top:40px}
@media (min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--stone)}
.gal figcaption{margin-top:10px;font:500 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* legal text */
.legal h2{font-size:clamp(24px,2.6vw,32px);margin:38px 0 12px}
.legal p,.legal li{max-width:68ch}
.legal ul{list-style:disc;padding-left:22px;margin-top:10px}
.legal li+li{margin-top:6px}
.draft{border:1px dashed var(--gold);padding:14px 18px;margin-bottom:30px;font-size:14.5px;color:var(--muted);max-width:68ch}

/* dark call-to-action band carries the address and hours */
.cta .addr{color:#fff}
.cta .hrs{border-top-color:var(--ink-line)}
.cta .hrs li{color:var(--on-dark-2);border-bottom-color:var(--ink-line)}
.cta .hrs li.today{color:#fff}
.cta .opn{color:var(--on-dark)}
.cta .vi-l{margin-top:20px}
.ftr .fh{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 16px}
.ftr{border-top:1px solid var(--ink-line)}
.ftr-b a{text-decoration:underline;text-underline-offset:3px}
.ph .opn{color:var(--on-dark)}
.sec.tight{padding:clamp(48px,6vw,84px) 0}

/* gallery: eight clips, four across on desktop; phones keep the horizontal scroller from site.css */
.reels.many{grid-template-columns:repeat(4,1fr);row-gap:30px}
@media (max-width:1000px){.reels.many{grid-template-columns:none}}
.reel figcaption small{display:block;margin-top:5px;font:500 10.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:none;color:var(--muted)}

/* ============================================================================
   Theme "2026": a warm, light, editorial restyle layered over site.css + pages.css.
   Her brand stays: the gold J mark, espresso-black, one champagne gold accent.
   What changes: a light page instead of black bands, an editorial serif in
   sentence case, a clean sans, pill buttons, rounded photos, soft surfaces.
   Switch off by setting THEME = "classic" in content/settings.py (the previous
   look is also archived in _archive/theme-v1-black-gold-2026-10-11/).
   ============================================================================ */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/f-instrument-serif.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/f-instrument-serif-italic.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/f-geist.woff2) format('woff2')}

:root{
  --ink:#1C1714; --ink-2:#26201C; --ink-3:#332B25; --ink-line:#4A4038;
  --paper:#FAF6F0; --bone:#F2EAE0; --stone:#E9DED1; --line:#E3D8CA;
  --blush:#EBD9CC; --blush-2:#E2CBBB;
  --gold:#B08D57; --gold-soft:#DCC7A2; --gold-ink:#7D5F33;
  --text:#2B2420; --muted:#6B6157; --on-dark:#F3EBE0; --on-dark-2:#C6BAAC;
  --serif:'Instrument Serif','Cormorant Garamond',Georgia,serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-btn:999px; --r-img:22px; --r-card:28px; --r-sm:14px;
  --gut:clamp(18px,4.6vw,64px);
}
html{scroll-padding-top:96px}
body{font:400 16.5px/1.65 var(--sans);letter-spacing:-.003em}
h1,h2,h3{letter-spacing:-.018em;font-weight:400}
h1 em,h2 em,.h1-d em{font-style:italic;font-family:var(--serif)}
::selection{background:var(--blush-2);color:var(--ink)}
.wrap{max-width:1320px}

/* ---------- labels: sentence case with a small gold dot, not shouted caps ---------- */
.k{font:500 14.5px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--gold-ink);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.dk .k{color:var(--gold-soft)}
.h2{font-size:clamp(40px,5.4vw,78px);line-height:1}
.sub-h{font-size:clamp(34px,4.2vw,56px);line-height:1.02;margin-bottom:18px}
.lead{font-size:clamp(17px,1.3vw,19px);line-height:1.6}
.sec{padding:clamp(64px,8.5vw,128px) 0}

/* ---------- buttons: pills, sentence case ---------- */
.btn{min-height:54px;padding:0 28px;border-radius:var(--r-btn);font:500 15.5px/1 var(--sans);letter-spacing:0;text-transform:none;transition:background .3s,color .3s,border-color .3s,transform .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.sm{min-height:44px;padding:0 20px;font-size:14.5px}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ink:hover{background:var(--ink-3)}
.btn.bone{background:var(--paper);color:var(--ink)}
.btn.line{border:1px solid currentColor}
.btn.line:hover{background:rgba(176,141,87,.14)}
.lk{font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none;text-underline-offset:5px}

/* ---------- header: floats, turns into a light glass pill on scroll ---------- */
.hdr{inset:10px 10px auto 10px;transition:none}
.hdr-in{height:68px;padding:0 10px 0 22px;max-width:1340px;border-radius:999px;border:1px solid transparent;transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.hdr.solid{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.hdr.solid .hdr-in,.light-top .hdr .hdr-in{background:rgba(250,246,240,.88);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-color:rgba(28,23,20,.08);color:var(--ink);box-shadow:0 10px 30px -18px rgba(60,40,20,.35)}
.brand b{font:400 23px/1 var(--serif);letter-spacing:.02em;text-transform:none}
.brand small{font:500 10.5px/1 var(--sans);letter-spacing:.14em;margin-top:5px;color:var(--gold-soft)}
.hdr.solid .brand small,.light-top .hdr .brand small{color:var(--gold-ink)}
.brand svg{width:42px;height:42px}
.nav{gap:26px}
.nav a{font:500 14.5px/1 var(--sans);letter-spacing:0;text-transform:none;opacity:.92}
.nav a::after{background:currentColor;bottom:2px}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-tel{font:500 14.5px/1 var(--sans);letter-spacing:0}
.hdr .btn.line{border-color:transparent;background:var(--paper);color:var(--ink)}
.hdr.solid .btn.line,.light-top .hdr .btn.line{background:var(--ink);color:var(--paper)}
.hdr .btn.line:hover{background:var(--gold-soft);color:var(--ink)}
.burger{border-radius:50%;border-color:currentColor;width:46px;height:46px;opacity:.9}
.burger span,.burger span::before,.burger span::after{background:currentColor}
@media (max-width:560px){.hdr{inset:8px 8px auto 8px}.hdr-in{height:60px;padding:0 8px 0 16px}}
.drawer{background:var(--paper);color:var(--ink)}
.drawer nav a{font:400 38px/1.05 var(--serif);border-bottom:1px solid var(--line);padding:14px 0}
.drawer-x{border-radius:50%;border-color:var(--line);color:var(--ink)}
.drawer p{color:var(--muted)}
.drawer .btn.bone{background:var(--ink);color:var(--paper)}
.drawer .brand small{color:var(--gold-ink)}

/* ---------- home hero: light, a three-line headline beside her own footage in an arch ---------- */
.hero.h26{margin:10px;border-radius:var(--r-card);background:var(--bone);color:var(--text);height:auto;min-height:0;max-height:none;overflow:hidden;display:block;
  padding:calc(78px + clamp(26px,3.6vw,52px)) 0 clamp(34px,4.6vw,64px)}
.hero.h26::after{content:none}
.h26-in{max-width:1320px;margin:0 auto;padding:0 clamp(18px,4vw,56px);display:grid;gap:clamp(30px,4vw,56px);align-items:center}
.h26 h1{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.hero.h26 .h1-k{font:500 14.5px/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--gold-ink);display:inline-flex;align-self:flex-start;align-items:center;gap:10px;
  background:var(--paper);padding:9px 16px 9px 13px;border-radius:20px;max-width:100%}
.hero.h26 .h1-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.hero.h26 .h1-d{font:400 clamp(64px,9.6vw,148px)/.86 var(--serif);letter-spacing:-.032em;color:var(--ink)}
.hero.h26 .h1-d span{display:block}
.hero.h26 .h1-d em{font-style:italic;padding-right:.04em}
.h26 .hero-p{color:var(--muted);max-width:44ch;margin-top:clamp(20px,2.2vw,30px);font-size:clamp(16.5px,1.3vw,19px);line-height:1.6}
.h26 .hero-cta{margin-top:clamp(22px,2.4vw,32px)}
.h26 .btn.bone{background:var(--ink);color:var(--paper)}
.h26 .btn.bone:hover{background:var(--ink-3)}
.h26 .hero-cta .btn.line{border-color:rgba(28,23,20,.3);color:var(--ink)}
.h26-m{position:relative;width:min(100%,470px);justify-self:center}
.h26-v{position:relative;aspect-ratio:4/5;border-radius:999px 999px var(--r-card) var(--r-card);overflow:hidden;background:var(--stone);isolation:isolate}
.h26-v .hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.h26 .hero-ctl{position:absolute;z-index:3;right:16px;bottom:16px;top:auto}
.h26 .hero-pause{background:rgba(28,23,20,.45);border-color:rgba(255,255,255,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.h26 .gchip{position:absolute;z-index:4;left:-22px;bottom:54px;margin:0;border:0;background:var(--paper);color:var(--ink);padding:13px 18px;border-radius:999px;
  font:500 14px/1.2 var(--sans);box-shadow:0 14px 34px -18px rgba(60,40,20,.5)}
.h26 .gchip:hover{background:#fff}
.h26 .gchip .st{color:var(--gold);letter-spacing:.12em}
.h26-c{font:400 13px/1.4 var(--sans);color:var(--muted);text-align:right;margin-top:12px}
@media (min-width:900px){
  .h26-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .h26-m{justify-self:end}
}
@media (max-width:899px){
  .hero.h26{padding-top:calc(68px + 22px)}
  .h26 .hero-cta .btn{flex:0 1 auto}
  .h26-m{width:100%;max-width:520px}
  .h26 .gchip{left:14px;bottom:16px;padding:12px 15px;font-size:13px;gap:8px}
  .h26 .gchip .st{font-size:12px;letter-spacing:.06em}
}
@media (max-width:560px){.h26 .hero-cta .btn{flex:1 1 100%}}

/* ---------- treatment ticker under the hero ---------- */
.tick{overflow:hidden;padding:26px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tick-t{display:flex;gap:0;width:max-content;animation:tick 46s linear infinite}
.tick:hover .tick-t{animation-play-state:paused}
.tick ul{display:flex;align-items:center;flex:none}
.tick li{display:flex;align-items:center;font:400 clamp(26px,3.2vw,44px)/1 var(--serif);white-space:nowrap}
.tick li a{text-decoration:none;padding:6px 0;color:var(--ink)}
.tick li a:hover{color:var(--gold-ink)}
.tick li:nth-child(even) a{font-style:italic}
.tick li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);margin:0 clamp(20px,2.6vw,40px);flex:none}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick-t{animation:none;flex-wrap:wrap;width:auto}.tick ul+ul{display:none}.tick ul{flex-wrap:wrap;row-gap:10px;padding:0 var(--gut)}.tick{-webkit-mask-image:none;mask-image:none}}

/* ---------- facts: four soft tiles ---------- */
.facts{background:none;border:0;padding:22px 0 0}
.facts ul{gap:12px}
.facts li,.facts li:first-child{background:var(--bone);border:0;border-radius:var(--r-img);padding:26px 26px 24px}
.facts b{font-size:clamp(34px,3.6vw,52px);letter-spacing:-.02em}
.facts span{font:400 14.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;margin-top:8px}
@media (max-width:760px){.facts li,.facts li:nth-child(odd),.facts li:nth-child(n+3){padding:20px 18px;border:0}}

/* ---------- treatments index ---------- */
.tl a{padding:28px 0;border-top:1px solid var(--line)}
.tl .n{font:500 13px/1 var(--sans);letter-spacing:0;color:var(--gold-ink)}
.tl h3{font-size:clamp(32px,3.8vw,54px);line-height:1}
.tl p{font-size:16px}
.tl .f{font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;background:var(--bone);color:var(--ink);padding:9px 14px;border-radius:999px;align-self:center}
.tl a:hover .f,.tl a.on .f{background:var(--blush)}
.ts{border-radius:var(--r-card)}
.ts figcaption{left:14px;bottom:14px;background:rgba(250,246,240,.92);color:var(--ink);border-radius:999px;font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;padding:10px 16px}
@media (max-width:979px){.tl .th{border-radius:14px}.tl .f{display:inline-block;margin-top:12px;color:var(--ink);align-self:start;justify-self:start}}

/* ---------- reels and photos: rounded ---------- */
.reel video,.reel img{border-radius:var(--r-img)}
.reel figcaption{font:500 14.5px/1.3 var(--sans);letter-spacing:0;text-transform:none}
.reel figcaption span{font-weight:400}
.reel figcaption small{font:400 12.5px/1.3 var(--sans);letter-spacing:0}
.jm-ph .a,.shelf img,.gal img,.rel img,.bk-ph,.vi-ph,.ph-img{border-radius:var(--r-card)}
.jm-ph figcaption,.gal figcaption{font:400 13.5px/1.4 var(--sans);letter-spacing:0;text-transform:none}
.jm-st b{font-size:clamp(36px,3.6vw,52px)}
.jm-st span{font:400 13.5px/1.4 var(--sans);letter-spacing:0;text-transform:none}
.shelf li{font-size:clamp(24px,2.4vw,34px)}
.rel a{transition:transform .5s var(--ease)}
.rel a:hover{transform:translateY(-4px)}
.rel b{font-size:clamp(26px,2.6vw,34px)}

/* ---------- reviews ---------- */
.score .big{font-size:clamp(110px,13vw,200px);line-height:.8}
.score .st{letter-spacing:.14em}
.score li{font-size:15px}
.q{padding:30px 0}
.q blockquote{font-size:clamp(24px,2.3vw,32px);line-height:1.18}
.q figcaption{font:400 13.5px/1.5 var(--sans);letter-spacing:0;text-transform:none}
.q figcaption b{font-weight:500}

/* ---------- inner page header: light, not a black band ---------- */
.ph{background:var(--bone);color:var(--text);margin:10px;border-radius:var(--r-card);padding:calc(78px + clamp(34px,5vw,72px)) 0 clamp(44px,5.5vw,80px)}
.ph .wrap{padding:0 clamp(18px,4vw,56px)}
.ph h1{color:var(--ink);font-size:clamp(46px,6.6vw,98px);line-height:.94;letter-spacing:-.022em}
.ph .lead{color:var(--muted);margin-top:24px}
.ph .k{color:var(--gold-ink)}
.crumbs{font:400 13.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:26px}
.crumbs a:hover{color:var(--ink)}
.ph .btn.bone{background:var(--ink);color:var(--paper)}
.ph .btn.bone:hover{background:var(--ink-3)}
.ph .btn.line{border-color:rgba(28,23,20,.3);color:var(--ink)}
.ph-img{background:var(--stone)}
.facts-row{border-top:1px solid var(--line);gap:18px 40px}
.facts-row dt{font:500 12.5px/1 var(--sans);letter-spacing:.04em;text-transform:none;color:var(--gold-ink);margin-bottom:8px}
.facts-row dd{color:var(--ink);font-size:clamp(20px,1.9vw,26px);line-height:1.15}
.ph .opn{color:var(--ink)}
@media (max-width:560px){.ph{padding-top:calc(68px + 26px)}}
.ph+.sec.bn{background:none}

/* ---------- text blocks: heading on the left, words on the right ---------- */
.sec:not(.bn):not(.dk)+.sec:not(.bn):not(.dk){padding-top:0}
.sec:not(.bn):not(.dk)+.sec:not(.bn):not(.dk) .prose{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,72px)}
@media (min-width:900px){
  .wrap>.prose:not(.legal){max-width:none;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  .wrap>.prose:not(.legal) .sub-h{grid-column:1;grid-row:1 / span 12;margin:0}
  .wrap>.prose:not(.legal) p{grid-column:2;font-size:18px;line-height:1.65;max-width:60ch}
  .fq{max-width:none;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  .fq-h{position:sticky;top:110px}
  .fq-h .sub-h,.fq-h .h2{margin:0!important}
  .wrap:has(>.reels.few){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  .wrap:has(>.reels.few)>.sub-h{margin:0}
  .wrap:has(>.reels.few)>.reels.few{margin-top:0!important}
}

/* ---------- lists, steps, comparison ---------- */
.ol h3{font-size:clamp(28px,2.8vw,38px);line-height:1.05}
.ol .t{font:500 13.5px/1.2 var(--sans);letter-spacing:0;text-transform:none;background:var(--bone);color:var(--ink);padding:9px 14px;border-radius:999px;text-align:center}
.bn .ol .t{background:var(--paper)}
.ol .t b{font-size:clamp(22px,2vw,28px);margin-bottom:4px}
.ol .more a{font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none}
.ol details summary{font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none}
.stp{border-top:0;display:grid;gap:10px}
.stp li{background:var(--paper);border:0;border-radius:var(--r-sm);padding:16px 20px;grid-template-columns:44px 1fr;align-items:center}
.bn .stp li{background:var(--paper)}
.stp li::before{font:400 22px/1 var(--serif);letter-spacing:0;color:var(--gold-ink)}
.cmp-w{border-radius:var(--r-img);border:1px solid var(--line);background:var(--paper)}
.cmp th,.cmp td{border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font:500 13.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);border-bottom:1px solid var(--line);background:var(--bone)}
.cmp tbody th{font:500 13.5px/1.5 var(--sans);letter-spacing:0;text-transform:none}
.areas-t h3{font-size:clamp(28px,2.8vw,38px)}
.areas-t li span{font:500 13.5px/1.6 var(--sans);letter-spacing:0;text-transform:none}

/* ---------- questions ---------- */
.qa summary{font-size:clamp(23px,2.2vw,30px);line-height:1.15;padding:22px 0}
.qa summary::after{content:"+";width:38px;height:38px;border-radius:50%;background:var(--bone);display:grid;place-items:center;font:300 22px/1 var(--sans);color:var(--ink)}
.bn .qa summary::after{background:var(--paper)}
.qa .a{font-size:16.5px}

/* ---------- dark blocks become rounded espresso panels, not full-width bands ---------- */
.sec.dk{background:none;padding:clamp(20px,3vw,40px) 10px}
.sec.dk>.wrap{background:var(--ink);border-radius:var(--r-card);max-width:none;padding:clamp(44px,6vw,96px) clamp(20px,5vw,72px)}
.ptabs button{font:500 14.5px/1.2 var(--sans);letter-spacing:0;text-transform:none}
.ptabs button small{font:400 12.5px/1 var(--sans);letter-spacing:0}
.pp h3{font-size:clamp(32px,3.4vw,46px)}
.pr-n{font:400 clamp(17px,1.4vw,19px)/1.3 var(--sans)}
.pr-p{font-size:clamp(19px,1.7vw,24px)}
.pr summary{font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none}
@media (max-width:979px){.ptabs button{border-radius:999px!important;padding:12px 18px}}
.steps li::before{font:400 20px/1.4 var(--serif);letter-spacing:0}
.form{border-radius:var(--r-card);background:var(--paper)}
.form h3{font-size:36px}
.f label{font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--text)}
.f input,.f select,.f textarea{border-radius:var(--r-sm);border-color:var(--line);padding:16px 16px}
.f select{padding-right:40px}
.done{border-radius:var(--r-sm)}
@media (max-width:899px){.bk-ph{display:none}}   /* phones reach the request form sooner */

/* ---------- call to action: a soft blush card with the address ---------- */
.cta{background:none;color:var(--text);padding:0 10px clamp(10px,1.4vw,18px)}
.cta>.wrap{background:var(--blush);border-radius:var(--r-card);max-width:none;padding:clamp(44px,6vw,96px) clamp(20px,5vw,72px)}
.cta h2{color:var(--ink);font-size:clamp(40px,5.2vw,76px);line-height:.98}
.cta p{color:#5E534A}
.cta p a{color:var(--ink)}
.cta .ph-cta{margin-top:28px}
.cta .btn.bone{background:var(--ink);color:var(--paper)}
.cta .btn.line{border-color:rgba(28,23,20,.35);color:var(--ink)}
.cta .addr{color:var(--ink);font-size:clamp(26px,2.6vw,36px);line-height:1.1}
.cta .hrs{border-top-color:rgba(28,23,20,.16)}
.cta .hrs li{color:#5E534A;border-bottom-color:rgba(28,23,20,.16)}
.cta .hrs li.today{color:var(--ink)}
.cta .opn{color:var(--ink)}
.opn{font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none}
.addr{font-size:clamp(28px,2.8vw,40px);line-height:1.08}
.hrs li{font-size:15.5px}
.vi-s{font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none}

/* ---------- footer: espresso, with her name set large ---------- */
.ftr{border-top:0;margin:0 10px 10px;border-radius:var(--r-card);padding:clamp(52px,6vw,88px) 0 0;overflow:hidden}
.ftr .fh{font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--gold-soft)}
.ftr .wm{font:400 30px/1 var(--serif);letter-spacing:.01em}
.ftr .wm small{font:500 10.5px/1 var(--sans);letter-spacing:.14em}
.ftr-b{border-top:1px solid var(--ink-line);font-size:13px;color:#A99C8E;margin-top:44px;padding:22px 0}
.ftr-wm{font:400 clamp(92px,21vw,330px)/1 var(--serif);letter-spacing:-.04em;color:var(--ink-3);text-align:center;white-space:nowrap;margin:0;padding:0 0 .12em;user-select:none}
.ftr-wm em{font-style:italic;color:#3D332C}
@media (max-width:760px){.ftr{padding-bottom:0}.ftr-b{padding-bottom:96px}}

/* ---------- phone bar: a floating pill ---------- */
@media (max-width:760px){
  .mbar{left:10px;right:10px;bottom:10px;border-radius:999px;border:1px solid var(--ink-line);padding:7px;background:rgba(28,23,20,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .mbar .btn{min-height:46px;font-size:14.5px;letter-spacing:0}
  .mbar .btn.line{border-color:transparent;color:var(--on-dark)}
  .mbar .btn.bone{background:var(--paper)}
}

/* ---------- small things ---------- */
.prose{font-size:17px}
.after{font-size:16.5px}
.draft{border-radius:var(--r-sm)}
.held{font-size:15px}
.legal h2{font-size:clamp(28px,2.8vw,38px)}
.skip{border-radius:999px}
img{-webkit-user-drag:none}

/* ============================================================================
   Theme 2026, third pass ("v3"): loaded after theme-2026.css.
   Brief from Iryna: "you can do design much better, look at cool beauty sites in 2026".
   What was taken from the references (Rhode, The Things We Do, Monastery, Peachy, Skin Pharm, Ject):
     one confident signature colour used in whole blocks, a fashion serif at magazine scale,
     image-led bento cards, video inside the headline, a wall that mixes reviews with her clips.
   Her brand stays: the gold J mark and a near-black ink. Skins swap the surface colours only
   (SKIN in content/settings.py: "rose" | "butter" | "sage").
   ============================================================================ */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/f-bodoni.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/f-bodoni-i.woff2) format('woff2')}

:root{
  /* skin: rose (default) */
  --paper:#FDF7F4; --bone:#F7E8E2; --blush:#F0D3CB; --tint:#E6B9AE; --stone:#EAD2CA; --line:#EAD7D0;
  --ink:#1C1113; --ink-2:#291A1D; --ink-3:#3A272B; --ink-line:#4C363A;
  --pop:#6B1D2A; --pop-2:#82283A; --on-pop:#FCEEE8; --on-pop-2:#E9C4BC;
  --gold:#B08A4F; --gold-soft:#E4CB9D; --gold-ink:#7B5A2A;
  --text:#2A1B1E; --muted:#705C5F; --on-dark:#F7EAE4; --on-dark-2:#CFB9B4;
  --serif:'Bodoni Moda','Instrument Serif',Georgia,serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --r-btn:999px; --r-sm:16px; --r-img:26px; --r-card:36px; --r-in:30px;
  --sh-soft:0 30px 60px -40px rgba(60,20,25,.35);
}
html{background:var(--paper)}
body{font:400 16.5px/1.65 var(--sans);color:var(--text);background:var(--paper)}
/* a little paper grain, fixed so it never repaints on scroll */
body.t26::before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--pop);color:var(--on-pop)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.022em}
h1 em,h2 em,h3 em,.h1-d em{font-family:var(--serif);font-style:italic;font-weight:400}
.h2{font-size:clamp(38px,4.9vw,76px);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.sub-h{font-size:clamp(34px,4.3vw,62px);line-height:1;letter-spacing:-.028em;text-wrap:balance}
.lead{font-size:clamp(17px,1.3vw,19.5px);line-height:1.6;color:var(--muted)}
.sec{padding:clamp(72px,9.5vw,150px) 0}
.k{display:inline-flex;align-items:center;gap:9px;font:500 11px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--ink);
  padding:9px 14px 9px 12px;border-radius:999px;background:rgba(28,17,19,.045);box-shadow:inset 0 0 0 1px rgba(28,17,19,.07);margin-bottom:22px}
.k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.dk .k,.pop .k{color:var(--on-pop);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.head.split{align-items:end}

/* ---------- reveal: heavier, with a touch of blur ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),filter 1s var(--ease) var(--d,0s)}
  .rv.in{opacity:1;transform:none;filter:none}
}

/* ---------- buttons: pills with a nested arrow ---------- */
.btn{min-height:56px;padding:0 28px;border-radius:999px;font:500 15.5px/1 var(--sans);letter-spacing:-.005em;text-transform:none;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.btn:hover{transform:none}
.btn:active{transform:scale(.975)}
.btn .ar{box-sizing:content-box;width:14px;height:14px;padding:10px;margin:0 -18px 0 6px;border-radius:50%;background:rgba(255,255,255,.14);stroke-width:1.7;transition:transform .6s var(--ease),background .5s var(--ease)}
.btn:hover .ar{transform:translateX(3px) rotate(-45deg);background:var(--gold);color:var(--ink)}
.btn.line .ar,.btn.bone .ar{background:rgba(28,17,19,.08)}
.btn.sm{min-height:44px;padding:0 20px;font-size:14.5px}
.btn.ink,.btn.bone{background:var(--ink);color:var(--paper)}
.btn.ink:hover,.btn.bone:hover{background:var(--pop)}
.btn.line{border:1px solid rgba(28,17,19,.22);color:var(--ink);background:none}
.btn.line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lk{font:500 14.5px/1 var(--sans)}

/* ---------- header: a floating island ---------- */
.hdr{inset:14px 14px auto 14px}
.hdr-in{height:66px;max-width:1290px;padding:0 9px 0 22px;border-radius:999px;gap:22px;
  background:rgba(253,247,244,.82);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(28,17,19,.07);color:var(--ink);box-shadow:0 18px 40px -28px rgba(60,20,25,.45)}
.hdr.solid .hdr-in,.light-top .hdr .hdr-in{background:rgba(253,247,244,.9);border-color:rgba(28,17,19,.08);box-shadow:0 18px 40px -26px rgba(60,20,25,.5)}
.brand b{font:500 21px/1 var(--serif);letter-spacing:.01em}
.brand small{font:500 9.5px/1 var(--sans);letter-spacing:.2em;color:var(--gold-ink)}
.hdr.solid .brand small,.light-top .hdr .brand small{color:var(--gold-ink)}
.brand svg{width:40px;height:40px}
.nav{gap:4px;margin:0 auto}
.nav a{font:500 14px/1 var(--sans);padding:11px 14px;border-radius:999px;opacity:1;transition:background .5s var(--ease),color .5s var(--ease)}
.nav a::after{display:none}
.nav a:hover{background:rgba(28,17,19,.06)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.hdr-tel{font:500 14px/1 var(--sans)}
.hdr .btn.line,.hdr.solid .btn.line,.light-top .hdr .btn.line{background:var(--ink);color:var(--paper);border-color:transparent;min-height:48px;padding:0 8px 0 20px;gap:12px}
.hdr .btn.line::after{content:"";width:32px;height:32px;border-radius:50%;flex:none;transition:transform .6s var(--ease),background .5s var(--ease);
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1113' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat}
.hdr .btn.line:hover{background:var(--pop);color:var(--on-pop)}
.hdr .btn.line:hover::after{transform:rotate(-45deg)}
@media (max-width:1340px){.hdr-tel{display:none}}
.burger{width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);opacity:1}
.burger span,.burger span::before,.burger span::after{background:currentColor;width:16px}
.burger span::before{top:-5px}.burger span::after{top:5px}
@media (max-width:560px){.hdr{inset:10px 10px auto 10px}.hdr-in{height:60px;padding:0 7px 0 16px}.brand svg{width:36px;height:36px}}

/* ---------- menu: a full overlay, links rise one after another ---------- */
.drawer{background:var(--pop);color:var(--on-pop);padding:20px clamp(18px,5vw,56px) 36px;transition:opacity .6s var(--ease),visibility 0s .6s}
.drawer.open{transition:opacity .6s var(--ease)}
.drawer .brand small{color:var(--gold-soft)}
.drawer-x{border-radius:50%;border:0;background:rgba(255,255,255,.12);color:var(--on-pop)}
.drawer-top{margin-bottom:18px}
.drawer .btn{margin-top:22px}
.drawer p{margin-top:16px}
.drawer nav{margin-top:6px}
.drawer nav a{font:400 clamp(26px,7vw,44px)/1.02 var(--serif);letter-spacing:-.025em;border-bottom:1px solid rgba(255,255,255,.14);padding:9px 0;color:var(--on-pop);
  opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.drawer nav a:nth-child(even){font-style:italic}
.drawer.open nav a{opacity:1;transform:none}
.drawer.open nav a:nth-child(1){transition-delay:.08s}.drawer.open nav a:nth-child(2){transition-delay:.12s}.drawer.open nav a:nth-child(3){transition-delay:.16s}
.drawer.open nav a:nth-child(4){transition-delay:.2s}.drawer.open nav a:nth-child(5){transition-delay:.24s}.drawer.open nav a:nth-child(6){transition-delay:.28s}
.drawer.open nav a:nth-child(7){transition-delay:.32s}.drawer.open nav a:nth-child(8){transition-delay:.36s}.drawer.open nav a:nth-child(9){transition-delay:.4s}
.drawer.open nav a:nth-child(10){transition-delay:.44s}
.drawer .btn.bone{background:var(--on-pop);color:var(--ink)}
.drawer p{color:var(--on-pop-2)}
@media (prefers-reduced-motion:reduce){.drawer nav a{opacity:1;transform:none;transition:none}}

/* ---------- home hero: one idea per screen. Two layouts (settings.HERO), both made of her own vertical clips ---------- */
.hero.hv4{margin:0;border-radius:0;height:auto;min-height:0;max-height:none;overflow:hidden;display:block;color:var(--text);
  padding:calc(96px + clamp(18px,2.4vw,36px)) 0 clamp(26px,3.2vw,48px);
  background:
    radial-gradient(52% 46% at 88% 4%,var(--tint) 0,rgba(255,255,255,0) 72%),
    radial-gradient(46% 52% at 2% 62%,var(--blush) 0,rgba(255,255,255,0) 70%),
    radial-gradient(40% 40% at 60% 100%,var(--bone) 0,rgba(255,255,255,0) 70%),
    var(--paper)}
.hero.hv4::after{content:none}
.hv4-in{max-width:1440px;margin:0 auto;padding:0 clamp(18px,3.4vw,52px)}
.hv4 h1{display:block;margin:0}
.hero.hv4 .h1-k{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0 0 clamp(18px,2vw,28px);font:italic 400 19px/1.2 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink);
  background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(28,17,19,.07);padding:10px 17px 10px 13px;border-radius:22px}
.hero.hv4 .h1-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.hero.hv4 .h1-d{display:block;font:400 clamp(46px,7.3vw,122px)/.9 var(--serif);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.hero.hv4 .h1-s{display:block;margin-top:clamp(12px,1.3vw,20px);font:400 clamp(23px,2.7vw,42px)/1.06 var(--serif);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.hv4 .w{display:inline-block;padding-bottom:.06em}
.hv4 .amp{font-style:italic;color:var(--pop);padding-right:.04em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hv4 .w em{font-style:italic;color:var(--pop);padding-right:.05em}
.hv4 .hero-p{color:var(--text);max-width:64ch;margin:clamp(14px,1.5vw,20px) 0 0;font-size:clamp(16.5px,1.3vw,19.5px);line-height:1.55}
.hv4 .hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,1.8vw,26px);align-items:center}
.hv4 .hero-cta .btn.line{color:var(--ink);border-color:rgba(28,17,19,.22)}
.hv4 .hero-cta .btn.line:hover{color:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  .hv4 .w{animation:hv-rise 1.15s var(--ease) both;animation-delay:calc(.08s * var(--i,0))}
  .hv4 .h1-k,.hv4 .h1-s,.hv4 .hero-p,.hv4 .hero-cta,.hv4 .h-stats{animation:hv-fade 1.2s var(--ease) both;animation-delay:calc(.08s * var(--i,0))}
  .hv4 .sc{animation:hv-card 1.3s var(--ease) both;animation-delay:calc(.07s * var(--i,0))}
}
@keyframes hv-rise{from{opacity:0;transform:translateY(.42em)}to{opacity:1;transform:none}}
@keyframes hv-fade{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes hv-card{from{opacity:0;transform:translateY(60px) scale(.97)}to{opacity:1;transform:none}}

/* a clip card: glass tray, film inside */
.sc{position:relative;margin:0;padding:7px;border-radius:calc(var(--r-in) + 7px);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(28,17,19,.06),var(--sh-soft)}
.sc video,.hv4 .sc video.hero-v{display:block;position:static;inset:auto;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-in);background:var(--stone)}
.sc-cap{position:absolute;z-index:3;left:20px;bottom:20px;font:500 13px/1 var(--sans);color:var(--ink);background:rgba(253,247,244,.94);padding:10px 15px;border-radius:999px}
.hv4 .hero-ctl{position:absolute;z-index:3;right:20px;bottom:20px;top:auto}
.hv4 .hero-ctl span{display:none}
.hv4 .hero-pause{width:44px;height:44px;border:0;background:rgba(253,247,244,.94)}
.hv4 .hero-pause svg{fill:var(--ink)}
/* the stamp: her Google rating, turning slowly */
.stamp{position:absolute;z-index:4;right:-34px;top:-34px;width:clamp(112px,10vw,150px);aspect-ratio:1;border-radius:50%;
  background:var(--ink);color:var(--on-dark);display:grid;place-items:center;text-decoration:none;box-shadow:0 22px 40px -22px rgba(28,17,19,.7);transition:background .6s var(--ease),transform .6s var(--ease)}
.stamp:hover{background:var(--pop);transform:scale(1.04)}
.stamp svg{position:absolute;inset:6%;width:88%;height:88%;animation:spin 26s linear infinite}
.stamp text{font:500 11.2px var(--sans);letter-spacing:.2em;text-transform:uppercase;fill:currentColor}
.stamp b{font:400 clamp(32px,3vw,46px)/1 var(--serif);letter-spacing:-.03em;color:var(--gold-soft)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stamp svg{animation:none}}
.h-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(26px,3vw,44px) 0 0;padding:0;list-style:none;border-top:1px solid rgba(28,17,19,.12);text-align:left}
.h-stats li{padding:20px 22px 4px 0;display:flex;align-items:baseline;gap:14px}
.h-stats li+li{padding-left:22px;border-left:1px solid rgba(28,17,19,.12)}
.h-stats b{font:400 clamp(30px,3.1vw,48px)/1 var(--serif);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.h-stats span{font:400 14px/1.35 var(--sans);color:var(--muted)}
.h-stats a{text-decoration:none;display:flex;align-items:baseline;gap:14px}

/* layout A, "stories": centred headline, her clips in a stepped row */
.hv4.st .hv4-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hv4.st h1{align-items:center}
.hv4.st .hero-cta{justify-content:center}
.hv4.st .h-stats{width:100%}
.strip{display:grid;grid-template-columns:1fr 1.14fr 1.34fr 1.14fr 1fr;gap:clamp(10px,1.3vw,20px);align-items:start;width:100%;max-width:1260px;margin-top:clamp(28px,3vw,46px)}
.strip .s1,.strip .s5{margin-top:clamp(64px,7.6vw,118px)}
.strip .s2,.strip .s4{margin-top:clamp(30px,3.6vw,56px)}
@media (min-width:1000px){.hv4.st .w{display:block}}

/* layout B, "split": headline left, one tall clip right, a second tucked beside it */
.sp-g{display:grid;gap:clamp(34px,5vw,84px);align-items:center}
.hv4.sp .h1-d{font-size:clamp(46px,6.6vw,112px);line-height:.92}
.hv4.sp .w{display:inline}
.hv4.sp .w:last-child{display:block}
.sp-m{position:relative;width:min(100%,500px);justify-self:center}
.hv4 .sp-m .main video.hero-v{aspect-ratio:4/5;object-position:50% 20%}
.sp-m .sub{position:absolute;left:-24%;bottom:9%;width:40%;z-index:2}
.sp-m .sub video{aspect-ratio:3/4}
@media (min-width:1000px){.sp-g{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}.sp-m{justify-self:end;margin-right:26px}}

@media (max-width:999px){
  .hero.hv4{padding-top:calc(74px + 28px)}
  .hero.hv4 .h1-d,.hv4.sp .h1-d{font-size:clamp(42px,12.6vw,100px);line-height:.94}
  .hv4 .w,.hv4.sp .w{display:inline}
  .hv4 .w:last-child,.hv4.sp .w:last-child{display:block}
  /* stories on a phone: her portrait first, the other clips one swipe away */
  .strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:28px calc(clamp(18px,3.4vw,52px) * -1) 0;padding:0 clamp(18px,3.4vw,52px) 6px;width:auto;max-width:none;align-self:stretch}
  .strip::-webkit-scrollbar{display:none}
  .strip .sc{flex:0 0 min(66vw,340px);scroll-snap-align:center;margin-top:0!important}
  .strip .main{order:-1}
  .stamp{right:10px;top:10px;width:86px}
  .stamp text{font-size:12.5px}
  .sp-m{margin:0 auto}
  .sp-m .sub{display:none}
  .h-stats{grid-template-columns:1fr 1fr}
  .h-stats li{flex-direction:column;gap:6px;padding:18px 14px 14px 0}
  .h-stats li+li{padding-left:16px}
  .h-stats li:nth-child(3){border-left:0;padding-left:0}
  .h-stats li:nth-child(n+3){border-top:1px solid rgba(28,17,19,.12)}
}
@media (max-width:560px){.hv4 .hero-cta .btn{flex:1 1 100%}.hv4.sp .hero-cta .btn{flex:1 1 100%}}

/* ---------- ticker ---------- */
.tick{padding:clamp(22px,2.6vw,38px) 0 0}
.tick li{font:400 clamp(30px,4vw,58px)/1 var(--serif);letter-spacing:-.03em}
.tick li a{color:var(--ink)}
.tick li a:hover{color:var(--pop)}
.tick li::after{width:auto;height:auto;border-radius:0;background:none;content:"\2726";font:400 .42em/1 var(--sans);color:var(--gold);margin:0 clamp(22px,2.8vw,44px)}

/* ---------- bento: seven treatments ---------- */
.bento{display:grid;gap:14px;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(210px,19.5vw,290px);list-style:none;margin:0;padding:0}
.bc{padding:7px;border-radius:calc(var(--r-in) + 7px);background:rgba(28,17,19,.04);box-shadow:inset 0 0 0 1px rgba(28,17,19,.05)}
.bc a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;border-radius:var(--r-in);overflow:hidden;text-decoration:none;isolation:isolate;
  padding:clamp(18px,1.7vw,26px);color:#fff;background:var(--ink)}
.bc img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.bc a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(28,17,19,.86) 0,rgba(28,17,19,.34) 38%,rgba(28,17,19,0) 62%)}
.bc a:hover img{transform:scale(1.06)}
.bc h3{font:400 clamp(28px,2.7vw,44px)/.98 var(--serif);letter-spacing:-.03em;color:inherit;text-wrap:balance}
.bc p{font:400 14.5px/1.5 var(--sans);margin-top:10px;max-width:40ch;opacity:.86}
.bc-t{position:absolute;left:clamp(14px,1.3vw,20px);top:clamp(14px,1.3vw,20px);font:500 12.5px/1 var(--sans);color:var(--ink);background:rgba(253,247,244,.94);padding:9px 13px;border-radius:999px}
.bc-go{position:absolute;right:clamp(14px,1.3vw,20px);top:clamp(14px,1.3vw,20px);width:42px;height:42px;border-radius:50%;background:rgba(253,247,244,.94);color:var(--ink);display:grid;place-items:center;
  transition:background .6s var(--ease),transform .6s var(--ease),color .6s var(--ease)}
.bc-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.bc a:hover .bc-go{background:var(--gold);transform:rotate(-45deg)}
.bc-n{font:500 12px/1 var(--sans);letter-spacing:.14em;opacity:.75;margin-bottom:10px}
/* tone cards: colour, no photo */
.bc.tone a{justify-content:flex-end}
.bc.tone a::before{content:none}
.bc.t-pop a{background:var(--pop);color:var(--on-pop)}
.bc.t-blush a{background:var(--blush);color:var(--ink)}
.bc.tone .bc-t{background:rgba(255,255,255,.16);color:inherit}
.bc.t-blush .bc-t{background:rgba(255,255,255,.6)}
.bc.tone h3{font-size:clamp(30px,2.9vw,44px)}
.bc.tone h3 em{font-style:italic}
.b1{grid-column:span 5;grid-row:span 2}.b1 h3{font-size:clamp(44px,5.4vw,88px)}
.b2{grid-column:span 3;grid-row:span 2}
.b3,.b4{grid-column:span 4}
.b5,.b6,.b7{grid-column:span 4}
@media (max-width:999px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
  .bc{padding:5px;border-radius:27px}.bc a{border-radius:22px;min-height:236px;padding:16px}
  .b1{grid-column:1 / -1}.b1 a{min-height:420px}
  .b2,.b3,.b4,.b5,.b6,.b7{grid-column:span 1;grid-row:auto}
  .b2 .bc-go,.b3 .bc-go,.b4 .bc-go,.b5 .bc-go,.b6 .bc-go,.b7 .bc-go{display:none}
  .bc p{display:none}.b1 p{display:block}
  .bc h3,.bc.tone h3{font-size:clamp(25px,6.6vw,38px)}.b1 h3{font-size:clamp(46px,13vw,72px)}
  .bc-go{width:36px;height:36px}.bc-t{font-size:12px;padding:8px 11px}
}

/* ---------- the colour block: her clips ---------- */
.sec.pop{padding:clamp(8px,1vw,14px) 14px}
.sec.pop>.wrap{max-width:none;background:var(--pop);color:var(--on-pop);border-radius:calc(var(--r-card) + 8px);padding:clamp(52px,7vw,116px) clamp(20px,5vw,84px);
  background-image:radial-gradient(60% 70% at 100% 0%,var(--pop-2) 0,rgba(0,0,0,0) 70%)}
.sec.pop .h2{color:var(--on-pop)}
.sec.pop .h2 em{color:var(--gold-soft)}
.sec.pop .lead{color:var(--on-pop-2)}
.sec.pop .reel figcaption{color:var(--on-pop)}
.sec.pop .reel figcaption span,.sec.pop .reel figcaption small{color:var(--on-pop-2)}
.sec.pop .reel video,.sec.pop .reel img{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
@media (min-width:1001px){.sec.pop .reels{grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}}
.sec.pop+.sec:not(.bn):not(.dk),.tick+.sec{padding-top:clamp(72px,9.5vw,150px)}
@media (max-width:760px){.sec.pop{padding:8px}.sec.pop>.wrap{border-radius:30px}.sec.pop .reels{margin:0 -20px;padding:0 20px 14px}}

/* ---------- Jiman: portrait in an arch, a second photo tucked under it ---------- */
.jm3{display:grid;gap:clamp(40px,6vw,110px);align-items:center}
@media (min-width:980px){.jm3{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}}
.jm3-ph{position:relative;padding-bottom:clamp(40px,5vw,84px);padding-right:clamp(30px,6vw,90px)}
.jm3-ph .a{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px var(--r-card) var(--r-card);background:var(--ink)}
.jm3-ph .b{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);box-shadow:0 0 0 7px var(--paper),var(--sh-soft)}
.jm3-ph figcaption{position:absolute;left:0;bottom:6px;font:400 13px/1.4 var(--sans);color:var(--muted);max-width:46%}
.jm3 blockquote{font:italic 400 clamp(26px,2.8vw,42px)/1.14 var(--serif);letter-spacing:-.025em;color:var(--ink);margin:26px 0 8px;text-wrap:balance}
.jm3 cite{display:block;font:400 13.5px/1.4 var(--sans);font-style:normal;color:var(--muted);margin-bottom:26px}
.jm3 p{max-width:52ch}
.jm3 p+p{margin-top:14px}

/* ---------- the wall: reviews, her clips and her room, mixed ---------- */
.wall-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(34px,4vw,60px)}
.wall-h .h2 em{color:var(--pop)}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.wc{display:flex;flex-direction:column;gap:14px}
@media (max-width:1000px){.wall{display:block;columns:2;column-gap:12px}.wc{display:contents}.wt{margin:0 0 12px}}
.wt{break-inside:avoid;margin:0;border-radius:var(--r-img);overflow:hidden;position:relative;background:var(--bone)}
.wt blockquote{font:400 clamp(21px,1.7vw,26px)/1.2 var(--serif);letter-spacing:-.02em;color:inherit;margin:0}
.wt-q{padding:26px 24px 22px;color:var(--ink)}
.wt-q figcaption{margin-top:20px;font:400 13px/1.45 var(--sans);color:inherit;opacity:.72}
.wt-q figcaption b{font-weight:500;opacity:1}
.wt-q .st{display:block;color:var(--gold);letter-spacing:.14em;font-size:13px;margin-bottom:14px}
.wt.c-paper{background:#fff}
.wt.c-blush{background:var(--blush)}
.wt.c-ink{background:var(--ink);color:var(--on-dark)}
.wt.c-ink .st{color:var(--gold-soft)}
.wt.c-pop{background:var(--pop);color:var(--on-pop)}
.wt.big blockquote{font-size:clamp(26px,2.3vw,36px);line-height:1.1;font-style:italic}
.wt-v video,.wt-p img{display:block;width:100%;object-fit:cover;background:var(--stone)}
.wt-v video{aspect-ratio:9/15}
.wt-p img{aspect-ratio:4/5}
.wt-v figcaption,.wt-p figcaption{position:absolute;left:12px;bottom:12px;font:500 12.5px/1 var(--sans);color:var(--ink);background:rgba(253,247,244,.94);padding:9px 13px;border-radius:999px}
.wt-s{padding:28px 24px 24px}
.wt-s .n{font:400 clamp(92px,9vw,140px)/.8 var(--serif);letter-spacing:-.05em;color:var(--gold-soft)}
.wt-s .st{display:block;letter-spacing:.16em;color:var(--gold-soft);margin:14px 0 14px}
.wt-s p{font:400 15px/1.5 var(--sans);opacity:.9}
.wt-s ul{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.18)}
.wt-s li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.18);font:400 14px/1.3 var(--sans)}
.wt-s small{display:block;margin-top:14px;font:400 12px/1.45 var(--sans);opacity:.7}
@media (max-width:620px){.wall{column-gap:10px}.wt{margin-bottom:10px;border-radius:20px}.wt-q{padding:18px 16px 16px}.wt blockquote{font-size:18px}.wt.big blockquote{font-size:21px}
  .wt-s{padding:20px 16px}.wt-s .n{font-size:76px}.wt-s li{font-size:12.5px}.wt-q figcaption{font-size:12px;margin-top:14px}}

/* ---------- questions ---------- */
.qa summary{font:400 clamp(23px,2.2vw,31px)/1.12 var(--serif);letter-spacing:-.02em;padding:24px 0}
.qa summary::after{background:var(--ink);color:var(--paper);transition:transform .6s var(--ease),background .5s var(--ease)}
.bn .qa summary::after{background:var(--ink)}
.qa[open] summary::after{background:var(--pop)}

/* ---------- call to action ---------- */
.cta{padding:0 14px 14px}
.cta>.wrap{border-radius:calc(var(--r-card) + 8px);padding:clamp(52px,7vw,116px) clamp(20px,5vw,84px);
  background:radial-gradient(56% 70% at 0% 0%,var(--tint) 0,rgba(255,255,255,0) 70%),radial-gradient(50% 60% at 100% 100%,var(--blush) 0,rgba(255,255,255,0) 70%),var(--bone)}
.cta h2{font-size:clamp(46px,6.4vw,104px);line-height:.92;letter-spacing:-.04em}
.cta .ph-cta{margin-top:30px}
.cta .btn.bone{background:var(--ink);color:var(--paper)}
.cta .btn.bone:hover{background:var(--pop)}
.cta .addr{font:400 clamp(23px,2.1vw,31px)/1.1 var(--serif);letter-spacing:-.02em}
.cta h2+p{margin-top:22px}
.cta p{color:var(--muted)}
@media (max-width:760px){.cta{padding:0 8px 8px}.cta>.wrap{border-radius:30px}}

/* ---------- footer ---------- */
.ftr{margin:0 14px 14px;border-radius:calc(var(--r-card) + 8px);background:var(--ink)}
.ftr-wm{font:400 clamp(92px,22vw,360px)/1 var(--serif);letter-spacing:-.06em;color:var(--ink-3)}
.ftr-wm em{color:var(--ink-line)}
@media (max-width:760px){.ftr{margin:0 8px 8px;border-radius:30px}}

/* ---------- inner pages ---------- */
.ph{margin:0;border-radius:0;padding:calc(96px + clamp(30px,4.6vw,70px)) 0 clamp(46px,5.6vw,86px);
  background:radial-gradient(48% 60% at 92% 0%,var(--tint) 0,rgba(255,255,255,0) 72%),radial-gradient(44% 56% at 0% 90%,var(--blush) 0,rgba(255,255,255,0) 70%),var(--paper)}
.ph .wrap{padding:0 var(--gut)}
.ph h1{font-size:clamp(46px,7vw,112px);line-height:.9;letter-spacing:-.04em;text-wrap:balance}
.ph h1 em{color:var(--pop)}
.ph .lead{color:var(--text)}
.ph .btn.bone{background:var(--ink);color:var(--paper)}
.ph .btn.bone:hover{background:var(--pop)}
.ph-img{border-radius:999px 999px var(--r-card) var(--r-card);box-shadow:0 0 0 8px rgba(255,255,255,.5),var(--sh-soft)}
.facts-row{border-top:1px solid rgba(28,17,19,.12)}
.facts-row dt{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.facts-row dd{font:400 clamp(21px,2vw,28px)/1.1 var(--serif);letter-spacing:-.02em}
.crumbs{font-size:13px}
.ph+.sec.bn{background:none}
.sec.bn{background:var(--bone)}
.ol h3{font:400 clamp(27px,2.7vw,38px)/1.02 var(--serif);letter-spacing:-.025em}
.ol .t{background:var(--blush)}
.bn .ol .t{background:#fff}
.stp li{background:#fff;border-radius:var(--r-sm)}
.stp li::before{font:italic 400 24px/1 var(--serif);color:var(--pop)}
.rel img{border-radius:var(--r-img)}
.rel b{font:400 clamp(26px,2.5vw,34px)/1.04 var(--serif);letter-spacing:-.025em}
.q blockquote{font:400 clamp(24px,2.3vw,33px)/1.14 var(--serif);letter-spacing:-.02em}
.score .big{font:400 clamp(110px,13vw,210px)/.78 var(--serif);letter-spacing:-.05em;color:var(--pop)}
.cmp-w{border-radius:var(--r-img);background:#fff}
.cmp thead th{background:var(--bone)}
.areas-t h3{font:italic 400 clamp(30px,3vw,42px)/1 var(--serif)}
.form{border-radius:var(--r-card);background:#fff}
.sec.dk>.wrap{background:var(--pop);background-image:radial-gradient(60% 70% at 100% 0%,var(--pop-2) 0,rgba(0,0,0,0) 70%);border-radius:calc(var(--r-card) + 8px)}
.sec.dk{padding:clamp(8px,1vw,14px) 14px}
.gal img{border-radius:var(--r-img)}
.legal h2{font:400 clamp(28px,2.8vw,38px)/1.05 var(--serif)}
.legal.prose{max-width:760px;margin:0 auto}
.two .prose .sub-h{margin-bottom:20px}
.two .prose p{max-width:54ch}
.two .prose p+p{margin-top:14px}

/* ---------- phone bar ---------- */
@media (max-width:760px){
  .mbar{background:rgba(28,17,19,.94);border-color:rgba(255,255,255,.1)}
  .mbar .btn{min-height:48px;padding:0 14px}
  .mbar .btn.bone{background:var(--paper);color:var(--ink)}
  .mbar .btn.line{color:var(--on-dark);border-color:transparent}
  .mbar .btn.line:hover{background:rgba(255,255,255,.1);color:var(--on-dark)}
}

/* ============================================================================
   Third pass, part two (2026-10-12 evening): Iryna asked "can the design be better?"
   1. one warm grade over her photos and clips  2. treatment pages as cards, not lists
   ============================================================================ */

/* ---------- 1. the grade: her footage is full of bright blue gloves and teal towels; this pulls them toward the palette ---------- */
:root{--grade:saturate(.8) sepia(.16) contrast(1.05) brightness(1.02)}
.sc video,.bc img,.wt-v video,.wt-p img,.reel video,.reel img,.ph-img img,.jm3-ph img,.jm-ph img,.gal img,.rel img,.shelf img,.bk-ph,.bk-ph.rv.in,.ts img,.tl .th{filter:var(--grade)}

/* ---------- 2a. header facts: small glass tiles ---------- */
.facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;border-top:0;padding-top:0;margin-top:30px}
.facts-row div{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(28,17,19,.06);border-radius:18px;padding:15px 18px 16px}
.facts-row dd{font-size:clamp(19px,1.6vw,23px)}

/* ---------- 2b. the menu: a card for each treatment ---------- */
.ol{border-top:0;display:grid;gap:14px;margin-top:38px}
@media (min-width:800px){
  .ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ol:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .ol:has(>li:only-child){grid-template-columns:minmax(0,1fr)}
}
.ol>li{background:var(--bone);border:0;border-radius:var(--r-img);padding:26px 26px 22px;gap:8px 16px;align-content:start;
  transition:transform .7s var(--ease),box-shadow .7s var(--ease),background .7s var(--ease)}
.sec.bn .ol>li{background:#fff}
.ol>li:hover{transform:translateY(-3px);box-shadow:var(--sh-soft)}
.ol h3{font:400 clamp(26px,2.3vw,34px)/1.04 var(--serif);letter-spacing:-.025em}
.ol h3 a:hover{color:var(--pop)}
.ol p{font-size:15.5px;line-height:1.5}
.ol .t,.bn .ol .t{background:#fff;color:var(--ink)}
.sec.bn .ol .t{background:var(--bone)}
.ol .more{margin-top:14px;gap:8px 10px}
.ol .more>a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;
  font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;transition:background .5s var(--ease)}
.ol .more>a:hover{background:var(--pop)}
.ol .more .ex{font-size:13.5px}
.ol details summary{min-height:38px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(28,17,19,.16);font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none}
.ol details{flex-basis:auto}
.ol details[open]{flex-basis:100%}

/* ---------- 2c. the steps: numbered cards in a row ---------- */
.stp{max-width:none;border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:34px}
@media (min-width:900px){.stp{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stp li,.bn .stp li{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:150px;background:#fff;border:0;border-radius:var(--r-img);
  padding:20px 20px 18px;font-size:16px;line-height:1.4}
.stp li::before{font:italic 400 44px/1 var(--serif);letter-spacing:-.03em;color:var(--pop)}
.after{max-width:70ch;margin-top:22px}

/* ---------- 2d. reviews on treatment pages: the same cards as the home wall ---------- */
.qs{gap:14px;margin-top:34px}
.qs .q{background:#fff;border:0;border-radius:var(--r-img);padding:28px 26px 24px}
.qs .q::before{content:"\2605\2605\2605\2605\2605";display:block;color:var(--gold);letter-spacing:.14em;font-size:13px;margin-bottom:14px}
.qs .q blockquote{font:400 clamp(22px,2vw,29px)/1.16 var(--serif);letter-spacing:-.02em;color:inherit}
.qs .q figcaption{margin-top:20px;font:400 13px/1.45 var(--sans);letter-spacing:0;text-transform:none;color:inherit;opacity:.72}
.qs .q figcaption b{color:inherit;font-weight:500}
.qs .q:nth-child(4n+2){background:var(--ink);color:var(--on-dark)}
.qs .q:nth-child(4n+2)::before{color:var(--gold-soft)}
.qs .q:nth-child(4n+2) blockquote{font-style:italic}
.qs .q:nth-child(4n+3){background:var(--blush)}
.rv-more{margin-top:26px}

/* ---------- 2e. other treatments: photo cards ---------- */
.rel{gap:14px}
.rel a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/3.4;padding:22px;border-radius:var(--r-in);overflow:hidden;isolation:isolate;color:#fff;background:var(--ink)}
.rel a:hover{transform:none}
.rel img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;aspect-ratio:auto;border-radius:0;transition:transform 1.4s var(--ease)}
.rel a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(28,17,19,.86) 0,rgba(28,17,19,.32) 42%,rgba(28,17,19,0) 66%)}
.rel a:hover img{transform:scale(1.06)}
.rel b{margin:0;color:#fff;font:400 clamp(28px,2.6vw,38px)/1 var(--serif);letter-spacing:-.03em}
.rel span{margin-top:8px;color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.4}
.rel a:hover b{color:#fff}
@media (max-width:760px){.rel a{aspect-ratio:4/2.6}}

/* ============================================================================
   Movement and the "block" first screen (2026-10-12). Loaded after theme-v3.css, before the look (skin).
   Iryna: "not modern enough, more wow effects needed"; reference chosen: The Things We Do.
   Everything here animates transform, opacity or clip-path only, and stops under prefers-reduced-motion.
   ============================================================================ */

/* defaults for the block tokens, for looks that do not set them (the "clay" look does: src/skin-clay.css) */
:root{--pop-ink:#fff;--pop-veil:rgba(255,255,255,.14);--pop-line:rgba(255,255,255,.3);--pb:#fff;--pb-ink:var(--ink);--pb-h:var(--ink);--pb-h-ink:#fff;--acc:var(--pop)}

/* ---------- pages cross-fade into each other (browsers that support it; others just load) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s cubic-bezier(.32,.72,0,1) both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.32,.72,0,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
.hdr{view-transition-name:hdr}

/* ---------- a thin line at the top that fills as you read down the page ---------- */
.prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------- first screen, "block": her colour on one half, her face on the other ---------- */
.hero.hv5{margin:0;border-radius:0;height:auto;min-height:0;max-height:none;overflow:visible;display:grid;background:var(--pop);color:var(--on-pop);position:relative}
.hero.hv5::after{content:none}
.hv5-t{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:clamp(34px,5vw,64px) clamp(20px,5vw,84px) clamp(40px,5.4vw,76px)}
.hv5-m{position:relative;min-height:58svh;background:var(--ink)}
.hv5-f{position:absolute;inset:0;overflow:hidden}
.hv5-f .hero-v{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:50% 22%;filter:var(--grade);will-change:transform}
.hv5 h1{display:block;margin:0}
.hero.hv5 .h1-k{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(18px,2vw,28px);font:italic 400 20px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--on-pop);
  background:var(--pop-veil);box-shadow:inset 0 0 0 1px var(--pop-line);padding:9px 17px 10px 13px;border-radius:22px}
.hero.hv5 .h1-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pop-ink);flex:none}
.hero.hv5 .h1-d{display:block;font:400 clamp(50px,6.5vw,118px)/.9 var(--serif);letter-spacing:-.035em;color:var(--pop-ink);text-wrap:balance}
.hv5 .w{display:inline-block;padding-bottom:.06em}
.hv5 .w em{font-style:italic}
.hero.hv5 .h1-s{display:block;margin-top:clamp(14px,1.5vw,22px);font:400 clamp(23px,2.4vw,38px)/1.08 var(--serif);letter-spacing:-.02em;color:var(--pop-ink)}
.hv5 .amp{font-style:italic}
.hv5 .hero-p{color:var(--on-pop-2);max-width:46ch;margin:clamp(14px,1.5vw,20px) 0 0;font-size:clamp(16.5px,1.25vw,19px);line-height:1.55}
.hv5 .hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2vw,28px);align-items:center}
.hv5 .btn.bone{background:var(--pb);color:var(--pb-ink)}
.hv5 .btn.bone:hover{background:var(--pb-h);color:var(--pb-h-ink)}
.hv5 .btn.bone .ar{background:color-mix(in srgb,currentColor 14%,transparent)}
.hv5 .hero-cta .btn.line{border-color:color-mix(in srgb,var(--on-pop) 55%,transparent);color:var(--on-pop);background:none}
.hv5 .hero-cta .btn.line:hover{background:var(--on-pop);color:var(--pop);border-color:var(--on-pop)}
.hv5 .sc-cap{left:auto;right:74px;bottom:20px}
.hv5 .hero-ctl{position:absolute;z-index:3;right:20px;bottom:20px;top:auto}
.hv5 .hero-ctl span{display:none}
.hv5 .hero-pause{width:44px;height:44px;border:0;background:rgba(255,255,255,.94)}
.hv5 .hero-pause svg{fill:var(--ink)}
.hv5 .stamp{left:auto;right:18px;top:auto;bottom:-52px;width:112px;z-index:5}
@media (min-width:1000px){
  .hero.hv5{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);min-height:min(100svh,1000px)}
  .hv5-t{padding-top:calc(96px + 5vh)}
  .hv5-m{min-height:0}
  .hv5 .stamp{right:auto;left:calc(clamp(116px,10vw,150px) * -.5);bottom:clamp(44px,8vh,96px);width:clamp(116px,10vw,150px)}
}
@media (max-width:999px){
  .hv5-m{order:-1}
  .hv5 .hero-ctl{left:16px;right:auto;bottom:16px}
  .hv5 .sc-cap{left:70px;right:auto;bottom:16px}
  .hv5-t{padding-top:clamp(64px,12vw,84px)}
  .hero.hv5 .h1-d{font-size:clamp(46px,12.6vw,104px);line-height:.92}
}
@media (max-width:560px){.hv5 .hero-cta .btn{flex:1 1 100%}}
@media (prefers-reduced-motion:no-preference){
  .hv5-f .hero-v{animation:hv5-film 1.9s cubic-bezier(.32,.72,0,1) both}
  .hv5-t{animation:hv5-block 1.1s cubic-bezier(.32,.72,0,1) both}
  .hv5 .w{animation:hv-rise 1.15s var(--ease) both;animation-delay:calc(.25s + .09s * var(--i,0))}
  .hv5 .h1-k,.hv5 .h1-s,.hv5 .hero-p,.hv5 .hero-cta{animation:hv-fade 1.2s var(--ease) both;animation-delay:calc(.25s + .09s * var(--i,0))}
  .hv5 .stamp{animation:hv5-pop 1s cubic-bezier(.34,1.56,.64,1) 1.1s both}
}
@keyframes hv5-film{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes hv5-block{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hv5-pop{from{opacity:0;transform:scale(.4) rotate(-40deg)}to{opacity:1;transform:none}}
.hv5-stats .h-stats{margin-top:0;border-top:0}
.hv5-stats{border-bottom:1px solid var(--line)}
.hv5-stats .h-stats li{padding-top:26px;padding-bottom:24px}

/* ---------- the statement: words light up as you scroll through them ---------- */
.sec.stmt{padding:clamp(80px,11vw,170px) 0}
.fill{font:400 clamp(30px,4.5vw,72px)/1.06 var(--serif);letter-spacing:-.025em;color:var(--ink);max-width:22em;margin:0;text-wrap:balance}
.fill span{transition:opacity .55s var(--ease)}
.fill.dim span{opacity:.16}          /* the script adds .dim; without the script every word simply shows */
.fill.dim span.on{opacity:1}
.stmt .k{margin-bottom:26px}
@media (prefers-reduced-motion:reduce){.fill.dim span{opacity:1}}

/* ---------- cards lean toward the pointer; a small "View" follows it ---------- */
@media (hover:hover) and (pointer:fine){
  .bento{perspective:1400px}
  .bc{transition:transform .5s var(--ease);transform-style:preserve-3d;will-change:transform}
  .bc.tilting{transition:transform .08s linear}
}
.cur{position:fixed;left:0;top:0;z-index:80;pointer-events:none;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);font:500 13.5px/1 var(--sans);opacity:0;transform:translate3d(-200px,-200px,0) scale(.3);transition:opacity .35s var(--ease),scale .35s var(--ease)}
.cur.on{opacity:1}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ---------- pictures open like a curtain when they arrive ---------- */
@media (prefers-reduced-motion:no-preference){
  /* The Meet Jiman photo used to START fully clipped and wait for the scroll observer. A fully clipped box never counts as "in view"
     (the observer measures what is visible), so it stayed hidden and its lazy pictures never loaded. Now it is only faded like every
     other .rv block, and the curtain plays as an animation AFTER the observer has added .in. */
  .jm3-ph.rv.in{animation:ph-open 1.5s var(--ease) both}
  .ph-img{animation:ph-open 1.5s var(--ease) .2s both;clip-path:none}
  .wt.rv,.bc.rv{transform:translateY(46px) scale(.96)}
  .wt.rv.in,.bc.rv.in{transform:none}
}
@keyframes ph-open{from{clip-path:inset(100% 0 0 0);transform:translateY(30px)}to{clip-path:inset(0 0 0 0);transform:none}}

/* ---------- numbers count up (set by the script); tabular so they do not jiggle ---------- */
[data-count]{font-variant-numeric:tabular-nums}

/* Look "clay" (2026-10-12; its colour made switchable 2026-10-13). Iryna picked The Things We Do as the reference:
   white page, one colour used in whole blocks, a light serif with an underlined italic accent word, big faces.
   The colour itself is a palette: src/palettes.css, chosen by PALETTE in content/settings.py. The values below are the
   first attempt (terracotta), which Iryna turned down twice; they stay only as the fallback when no palette is set.
   Every colour that sits in or beside a block goes through these tokens, so a pale block with dark type works as well
   as a deep block with white type:
     --pop / --pop-2            the block, and its second tone
     --pop-ink                  headings on the block
     --on-pop / --on-pop-2      reading text and quieter text on the block (4.5:1 against --pop)
     --pop-veil / --pop-line    soft fills and hairlines on the block
     --acc / --acc-ink          the accent on the white page, for large type / for small type (--acc-ink is 4.5:1 on white)
     --btn, --btn-ink, --btn-h, --btn-h-ink    main button on the white page, and its hover
     --pb, --pb-ink, --pb-h, --pb-h-ink        main button on the block, and its hover
     --dk                       the dark panel behind the price menu and the request form (always dark, light type) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/f-cormorant.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(/assets/f-cormorant-i.woff2) format('woff2')}
:root{
  --paper:#FFFFFF; --bone:#FBF1EC; --blush:#F6DDD3; --tint:#EFC4B4; --stone:#F1DCD2; --line:#F0DDD4;
  --ink:#2A1A16; --ink-2:#36231D; --ink-3:#4A322A; --ink-line:#5C4238;
  --pop:#BF5138; --pop-2:#D2684D; --pop-ink:#FFFFFF; --on-pop:#FFF6F1; --on-pop-2:#FBDACD;
  --pop-veil:color-mix(in srgb,var(--on-pop) 13%,transparent); --pop-line:color-mix(in srgb,var(--on-pop) 28%,transparent);
  --acc:var(--pop); --acc-ink:var(--pop);
  --btn:var(--pop); --btn-ink:#FFFFFF; --btn-h:var(--ink); --btn-h-ink:#FFFFFF;
  --pb:#FFFFFF; --pb-ink:var(--ink); --pb-h:var(--ink); --pb-h-ink:#FFFFFF;
  --dk:var(--pop);
  /* blocks as soft gradients: three patches of colour over --pop; :root[data-flat] puts the single colour back */
  --g1:var(--pop-2); --g2:var(--pop); --g3:var(--pop-2);
  --pop-g:radial-gradient(90% 80% at 0% 0%,var(--g1) 0,transparent 60%),radial-gradient(80% 90% at 100% 30%,var(--g2) 0,transparent 58%),radial-gradient(90% 70% at 40% 110%,var(--g3) 0,transparent 62%),var(--pop);
  --wash:radial-gradient(56% 70% at 96% 0%,var(--tint) 0,transparent 72%),radial-gradient(48% 60% at 0% 100%,var(--blush) 0,transparent 70%),var(--bone);
  --text:#3A2620; --muted:#7A635B; --on-dark:#FBEFE9; --on-dark-2:#D9BFB5;
  --serif:'Cormorant Garamond','Instrument Serif',Georgia,serif;
  --grade:saturate(.84) sepia(.15) contrast(1.04) brightness(1.02);
}
:root[data-flat]{--pop-g:var(--pop);--wash:var(--bone)}
body.t26::before{content:none}
/* Cormorant's default figures are old-style (its 1 reads as a capital I); use the lining set everywhere */
/* (!important because every `font:` shorthand on the site resets this property) */
body.t26,body.t26 *{font-variant-numeric:lining-nums !important}
body.t26 [data-count]{font-variant-numeric:lining-nums tabular-nums !important}
/* Cormorant is a light, small-bodied face: set it a step larger and a touch heavier than its default */
h1,h2,h3,.h1-d,.h1-s,.tick li,.bc h3,.ol h3,.rel b,.wt blockquote,.q blockquote,.qa summary,.addr,.facts-row dd,.h-stats b,.stamp b,.wt-s .n,.score .big,
.ftr-wm,.drawer nav a,.jm3 blockquote,.stp li::before,.areas-t h3,.form h3,.fill,.shelf li,.pp h3,.legal h2{font-variation-settings:'wght' 420;letter-spacing:-.018em}
.h2{font-size:clamp(42px,5.1vw,80px);line-height:.96;color:var(--acc)}
.sub-h{font-size:clamp(40px,4.8vw,70px);line-height:.98;color:var(--acc)}
h1 em,h2 em,h3 em,.h1-d em,.hv5 .w em,.wall-h .h2 em{font-style:italic;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.11em;color:inherit}
.sec.pop .h2,.sec.pop .h2 em{color:var(--pop-ink)}
.sec.dk .h2,.sec.dk .sub-h{color:#fff}
.lead{font-size:clamp(17px,1.3vw,19.5px)}
.k{background:color-mix(in srgb,var(--acc-ink) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc-ink) 20%,transparent);color:var(--acc-ink)}
.k::before{background:var(--acc-ink)}
.pop .k{color:var(--on-pop);background:var(--pop-veil);box-shadow:inset 0 0 0 1px var(--pop-line)}
.pop .k::before{background:var(--on-pop)}
.dk .k{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.dk .k::before{background:#fff}
::selection{background:var(--pop);color:var(--pop-ink)}

/* buttons */
.btn.ink,.btn.bone{background:var(--btn);color:var(--btn-ink)}
.btn.ink:hover,.btn.bone:hover{background:var(--btn-h);color:var(--btn-h-ink)}
.btn .ar,.btn.line .ar,.btn.bone .ar{background:color-mix(in srgb,currentColor 16%,transparent)}
.btn:hover .ar{background:var(--paper);color:var(--ink)}
.btn.line{border-color:color-mix(in srgb,var(--acc-ink) 42%,transparent);color:var(--acc-ink)}
.btn.line:hover{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.hdr-in,.hdr.solid .hdr-in,.light-top .hdr .hdr-in{background:rgba(255,255,255,.86)}
.hdr .btn.line,.hdr.solid .btn.line,.light-top .hdr .btn.line{background:var(--btn);color:var(--btn-ink)}
.hdr .btn.line::after{background-color:#fff}
.hdr .btn.line:hover{background:var(--btn-h);color:var(--btn-h-ink)}
.nav a[aria-current="page"]{background:var(--btn);color:var(--btn-ink)}
.burger{background:var(--btn);color:var(--btn-ink)}
.brand small,.hdr.solid .brand small,.light-top .hdr .brand small{color:var(--acc-ink)}
.ol .more>a{background:var(--btn);color:var(--btn-ink)}
.ol .more>a:hover{background:var(--btn-h);color:var(--btn-h-ink)}
.ol h3 a:hover{color:var(--acc-ink)}
.qa summary::after,.bn .qa summary::after{background:var(--btn);color:var(--btn-ink)}
.qa[open] summary::after{background:var(--ink);color:var(--paper)}
.stamp{background:var(--ink)}
.stamp:hover{background:#fff;color:var(--ink)}
.stamp:hover b{color:var(--acc-ink)}
.ph .btn.bone{background:var(--btn);color:var(--btn-ink)}
.ph .btn.bone:hover{background:var(--btn-h);color:var(--btn-h-ink)}
.stp li::before,.score .big,.ph h1 em{color:var(--acc)}
/* the shade under the words on a photo card follows the palette's own near-black (it was a wine tint) */
.bc a::before{background:linear-gradient(0deg,color-mix(in srgb,var(--ink) 88%,transparent) 0,color-mix(in srgb,var(--ink) 34%,transparent) 38%,transparent 62%)}
.rel a::before{background:linear-gradient(0deg,color-mix(in srgb,var(--ink) 88%,transparent) 0,color-mix(in srgb,var(--ink) 32%,transparent) 42%,transparent 66%)}
.bc.tone a::before{content:none}
.prog{background:var(--acc)}

/* blocks are soft gradients that drift slowly (Iryna, 2026-10-13); the patch layer is larger than its block so its
   edges never show, and it only ever moves by transform */
.hv5-t,.sec.pop>.wrap,.cta>.wrap{position:relative;overflow:hidden;isolation:isolate}
.hv5-t::before,.sec.pop>.wrap::before,.cta>.wrap::before{content:"";position:absolute;inset:-30%;z-index:-1;background:var(--pop-g);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hv5-t::before,.sec.pop>.wrap::before,.cta>.wrap::before{animation:aura 18s ease-in-out infinite alternate}
  .sec.pop>.wrap::before{animation-duration:24s;animation-direction:alternate-reverse}
  .cta>.wrap::before{animation-duration:21s}
}
@keyframes aura{from{transform:translate3d(-5%,4%,0) rotate(-7deg) scale(1)}to{transform:translate3d(6%,-5%,0) rotate(9deg) scale(1.14)}}
.wt.c-pop,.bc.t-pop a{background:var(--pop-g)}

/* the menu overlay sits on the block colour */
.drawer{background:var(--pop-g);color:var(--on-pop)}
.drawer nav a{color:var(--pop-ink);border-bottom-color:var(--pop-line)}
.drawer p,.drawer .brand small{color:var(--on-pop-2)}
.drawer-x{background:var(--pop-veil);color:var(--on-pop)}
.drawer .btn.bone{background:var(--pb);color:var(--pb-ink)}

/* the strip of treatment names: filled, then outlined */
.tick li{font-size:clamp(34px,4.6vw,70px)}
.tick li a{color:var(--acc)}
.tick li:nth-child(even) a{color:transparent;-webkit-text-stroke:1px var(--acc);font-style:italic}
.tick li a:hover{color:var(--ink);-webkit-text-stroke:0}
.tick li::after{color:var(--acc)}

/* first screen sizes for this face */
.hero.hv5 .h1-d{font-size:clamp(56px,7.5vw,136px);line-height:.86;letter-spacing:-.03em}
.hero.hv5 .h1-s{font-size:clamp(25px,2.7vw,44px)}
.hero.hv4 .h1-d{font-size:clamp(52px,8.4vw,142px);line-height:.88}
.hero.hv4,.ph{background:var(--wash)}
.ph h1{font-size:clamp(52px,7.6vw,124px);line-height:.88;color:var(--ink)}
.bc h3{font-size:clamp(32px,3.1vw,50px)}
.b1 h3{font-size:clamp(52px,6vw,100px)}
.bc.tone h3{font-size:clamp(34px,3.2vw,50px)}
.bc.t-pop a{color:var(--on-pop)}
.bc.t-pop h3{color:var(--pop-ink)}
.bc.t-pop .bc-t{background:var(--pop-veil)}
.fill{font-size:clamp(34px,5vw,82px);line-height:1;color:var(--acc)}
.wt blockquote{font-size:clamp(24px,1.95vw,30px);line-height:1.12}
.wt.big blockquote{font-size:clamp(29px,2.6vw,40px)}
.qs .q blockquote{font-size:clamp(25px,2.3vw,33px)}
.qa summary{font-size:clamp(26px,2.5vw,35px)}
.ol h3{font-size:clamp(29px,2.6vw,38px)}
.rel b{font-size:clamp(32px,3vw,44px)}
.jm3 blockquote{font-size:clamp(30px,3.2vw,48px);color:var(--acc)}
.facts-row dd{font-size:clamp(21px,1.8vw,26px)}
.h-stats b{font-size:clamp(36px,3.6vw,56px);color:var(--acc)}
.stp li::before{font-size:50px}
.addr,.cta .addr{font-size:clamp(26px,2.4vw,36px)}

/* the block with her clips, and the tile with her rating */
.sec.pop>.wrap,.sec.dk>.wrap{background-image:none}
.sec.dk>.wrap{background-color:var(--dk)}
.sec.pop .reel video,.sec.pop .reel img{box-shadow:0 0 0 1px var(--pop-line)}
.wt.c-pop{color:var(--on-pop)}
.wt.c-pop .n,.wt.c-pop .st{color:var(--pop-ink)}
.wt.c-pop ul,.wt.c-pop li{border-color:var(--pop-line)}

/* the closing block: the same colour as the opening one */
.cta>.wrap{background:var(--pop);color:var(--on-pop)}
.cta h2{color:var(--pop-ink);font-size:clamp(52px,7vw,116px);line-height:.88}
.cta p{color:var(--on-pop-2)}
.cta p a,.cta .addr,.cta .opn,.cta .hrs li.today{color:var(--on-pop)}
.cta .btn.bone{background:var(--pb);color:var(--pb-ink)}
.cta .btn.bone:hover{background:var(--pb-h);color:var(--pb-h-ink)}
.cta .btn.line{border-color:color-mix(in srgb,var(--on-pop) 55%,transparent);color:var(--on-pop)}
.cta .btn.line:hover{background:var(--on-pop);color:var(--pop);border-color:var(--on-pop)}
.cta .hrs{border-top-color:var(--pop-line)}
.cta .hrs li{color:var(--on-pop-2);border-bottom-color:var(--pop-line)}
.sec.bn{background:var(--bone)}
.ftr-wm{color:var(--ink-3)}
.ftr-wm em{color:var(--pop)}
.drawer nav a{font-size:clamp(30px,8vw,50px)}

/* ---------- top menu with every treatment (2026-10-13: "on top there should be more services than currently") ----------
   Facials, Laser hair removal, Green Peel and Brows & lashes each open a panel that lists every page under them.
   The phone number leaves the bar to make room (it stays in the first screen, the closing block, the footer and the
   phone bar), and the bar turns into the menu button a little earlier. */
.hdr-tel{display:none}
.hdr-in{max-width:1400px}
/* 2026-10-13, Iryna: "put treatments on top of the page like it was before". The treatments stay in the bar on laptops too: from 1181 to 1340 px the bar
   keeps them (About and Contact move into the menu button), and from 800 to 1180 px they sit in a second pill just under the bar. Below 800 px (phones, small
   tablets) only the menu button is left, as before. */
@media (max-width:799px){.nav{display:none}.burger{display:grid}}
@media (min-width:1181px) and (max-width:1340px){
  .burger{display:grid}
  .nav>a:nth-last-child(-n+2){display:none}
  .hdr-in{gap:10px}
  .nav>a,.nv-b.nv-bt{padding:10px 8px;font-size:13.5px}
  .nv>a{padding:10px 2px 10px 8px;font-size:13.5px}
  .nv-b{margin-right:3px}
}
@media (min-width:800px) and (max-width:1180px){
  .hdr-in{position:relative}
  .burger{display:grid}
  .nav{display:flex;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:999px;white-space:nowrap;
    background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(28,23,20,.08);box-shadow:0 10px 30px -18px rgba(60,40,20,.35)}
  .nav>a:nth-last-child(-n+2){display:none}
  .nav>a,.nv-b.nv-bt{padding:9px 8px;font-size:13px}
  .nv>a{padding:9px 2px 9px 8px;font-size:13px}
  .nv-b{margin-right:3px}
  .ph{padding-top:calc(150px + clamp(20px,3vw,40px))}
  .hero .hv5-t{padding-top:calc(150px + 4vh)}
}
@media (min-width:1341px) and (max-width:1459px){.hdr .btn.line::after{display:none}.hdr .btn.line,.hdr.solid .btn.line,.light-top .hdr .btn.line{padding:0 20px}}
.nav{gap:1px;align-items:center}
.nav>a{padding:11px 11px}
.nv-b.nv-bt{width:auto;height:auto;margin:0;padding:11px 11px;display:flex;align-items:center;gap:7px;font:500 14px/1 var(--sans);white-space:nowrap}
.nv:has(>.nv-bt[data-in]){background:rgba(28,17,19,.07)}
.nv{position:relative;display:flex;align-items:center;border-radius:999px;transition:background .5s var(--ease)}
.nv>a{padding:11px 3px 11px 11px}
.nv>a:hover{background:none}
.nv:hover,.nv.open{background:rgba(28,17,19,.06)}
.nav a[data-in],.nv:has(>a[data-in]){background:rgba(28,17,19,.07)}
.nv:has(>a[aria-current="page"]){background:var(--btn);color:var(--btn-ink)}
.nv>a[aria-current="page"]{background:none}
.nv-b{width:22px;height:36px;margin-right:5px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer;color:inherit;border-radius:999px}
.nv-b svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.nv:hover .nv-b svg,.nv.open .nv-b svg{transform:rotate(180deg)}
.nv-m{position:absolute;left:50%;top:100%;padding-top:22px;transform:translate(-50%,10px);opacity:0;visibility:hidden;z-index:5;
  transition:opacity .25s var(--ease) .3s,transform .5s var(--ease) .3s,visibility 0s .55s}   /* closing waits 0.3 s, and stays catchable until then, so a wobbly mouse path does not lose the menu */
.nv:hover>.nv-m,.nv:focus-within>.nv-m,.nv.open>.nv-m{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .3s var(--ease),transform .5s var(--ease)}
.nv-p{min-width:300px;padding:10px;border-radius:26px;background:rgba(255,255,255,.98);color:var(--ink);
  box-shadow:0 34px 64px -30px rgba(40,20,10,.5),0 0 0 1px rgba(28,17,19,.06)}
.nv-cs{display:flex;gap:8px}
.nv-c{flex:1 0 auto;min-width:270px}
.nv-c p{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:12px 14px 6px}
.nv-c ul{list-style:none;margin:0;padding:0}
.nav .nv-c a{display:flex;justify-content:space-between;align-items:baseline;gap:28px;white-space:nowrap;font:500 14.5px/1.2 var(--sans);padding:11px 14px;border-radius:14px;color:var(--ink);background:none}
.nav .nv-c a span{font-weight:400;font-size:13px;color:var(--muted)}
.nav .nv-c a:hover,.nav .nv-c a[aria-current="page"]{background:var(--bone);color:var(--ink)}
.nav a.nv-all{display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding:13px 14px;border-radius:16px;background:var(--bone);font:500 14px/1 var(--sans);color:var(--ink)}
.nav a.nv-all:hover{background:var(--btn);color:var(--btn-ink)}
.nv-all .ar{width:14px;height:14px;padding:0;margin:0;background:none;box-sizing:border-box;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.nv-m,.nv-b svg{transition:none}}

/* the phone menu: the same groups, each opening to its pages */
.drawer nav a:nth-child(even){font-style:normal}
.drawer nav summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font:400 clamp(30px,8vw,50px)/1.02 var(--serif);
  font-variation-settings:'wght' 420;letter-spacing:-.025em;padding:9px 0;border-bottom:1px solid var(--pop-line);color:var(--pop-ink)}
.drawer nav summary::-webkit-details-marker{display:none}
.drawer nav summary::after{content:"+";font:300 30px/1 var(--sans);transition:transform .45s var(--ease)}
.drawer nav details[open] summary::after{transform:rotate(45deg)}
.drawer nav .dg-l{padding:8px 0 14px;border-bottom:1px solid var(--pop-line)}
.drawer nav .dg-l a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:500 17px/1.25 var(--sans);font-variation-settings:normal;letter-spacing:0;padding:11px 2px;border-bottom:0;
  color:var(--on-pop);opacity:1;transform:none;transition:none}
.drawer nav .dg-l a span{font-weight:400;font-size:15px;color:var(--on-pop-2);white-space:nowrap}
.drawer nav .dg-l p{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-pop-2);margin:16px 2px 4px}
@media (prefers-reduced-motion:no-preference){
  .drawer nav details{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .drawer.open nav details{opacity:1;transform:none;transition-delay:calc(.08s + .04s * var(--n,0))}
}

/* "by Jiman" in the logo, right under the name and easy to read (Jiman's own request; Iryna, 2026-10-13: "more visible") */
.brand span{display:flex;flex-direction:column;justify-content:center}
.brand b{font-size:21px;line-height:1}
/* heavier and larger than it first was: the page's own italic is finer than the stand-in font the browser shows for a moment, so at 17px it shrank on arrival */
/* 2026-10-14, Anthony: order is name, "SKINCARE & SPA" (small caps line), then "by Jiman" (larger italic) underneath */
.brand .by{display:block;margin-top:4px;font:italic 700 20px/1 var(--serif);font-variation-settings:'wght' 700;letter-spacing:0;color:var(--ink)}
.brand small{margin-top:4px;font-size:9px;letter-spacing:.2em}
.drawer .brand .by{color:var(--on-pop)}
@media (max-width:560px){.brand b{font-size:19px}.brand .by{font-size:18px;margin-top:3px}.brand small{font-size:8px;margin-top:3px}}

/* nothing in the bar wraps onto a second line; between 1181 and 1340 px the Book button loses its arrow to make room */
.nav>a,.nv>a,.nv-b.nv-bt,.hdr .btn.line,.brand b,.brand small,.brand .by{white-space:nowrap}
@media (min-width:1181px) and (max-width:1340px){.hdr .btn.line::after{display:none}.hdr .btn.line,.hdr.solid .btn.line,.light-top .hdr .btn.line{padding:0 18px}}

/* ---------- the cleaner top bar (Anthony, 2026-10-14; `.hdr.bar2`, PREVIEW only until settings.TOPBAR_V2_LIVE) ----------
   Five links (Treatments, Laser, Prices, About, Contact) centred; a solid bar that slims on scroll to the mark and the name; "open now" and the phone
   beside Book; one wide panel per group, centred on the bar. Second pass the same day ("a bit too plain"): the links in the logo's own spaced small
   capitals, gold details (hover line, divider, Book arrow, hairline edge), a warm cream bar, and a picture card in each panel. */
.hdr-cta{display:none}
.hdr.bar2 .hdr-in,.hdr.bar2.solid .hdr-in,.light-top .hdr.bar2 .hdr-in{background:#fbf6ef;background:color-mix(in srgb,var(--bone) 55%,#fff);
  border:1px solid rgba(176,138,79,.38);border-color:color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:0 16px 36px -26px rgba(60,30,20,.45);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.bar2 .hdr-in{position:relative;height:74px;transition:height .35s var(--ease),box-shadow .4s}
.hdr.bar2.solid .hdr-in{height:58px}
.hdr.bar2 .brand{margin-right:0}
.hdr.bar2 .brand svg{transition:width .35s var(--ease),height .35s var(--ease)}
.hdr.bar2.solid .brand svg{width:34px;height:34px}
.hdr.bar2 .brand small,.hdr.bar2 .brand .by{max-height:24px;overflow:hidden;transition:opacity .25s,max-height .35s var(--ease),margin .35s var(--ease)}
.hdr.bar2.solid .brand small,.hdr.bar2.solid .brand .by{opacity:0}
.hdr.bar2.solid .brand small{max-height:0;margin-top:0}
/* the logo across instead of stacked (Anthony, 2026-10-14: "we don't have to squish it so much anymore"): J BEAUTY over SKINCARE & SPA, and
   "by Jiman" to their right after a thin gold line; the bar can then be a little slimmer. Scrolled, only the mark and J BEAUTY stay. */
.hdr.bar2 .hdr-in{height:68px}
.hdr.bar2 .brand span{display:grid;grid-template-columns:auto auto;grid-template-areas:"name by" "sub by";align-items:center;column-gap:0}
.hdr.bar2 .brand b{grid-area:name;align-self:end}
.hdr.bar2 .brand small{grid-area:sub;align-self:start;margin-top:5px}
.hdr.bar2 .brand .by{grid-area:by;align-self:center;margin:0 0 0 16px;padding:4px 0 4px 16px;border-left:1px solid rgba(176,138,79,.55);font-size:22px;
  max-height:none;max-width:140px;transition:opacity .25s,max-width .35s var(--ease),margin .35s var(--ease),padding .35s var(--ease)}
.hdr.bar2.solid .brand .by{max-width:0;margin-left:0;padding-left:0;border-left-color:transparent}
@media (max-width:560px){.hdr.bar2 .brand .by{font-size:18px;margin-left:11px;padding-left:11px}.hdr.bar2 .brand small{margin-top:4px}}

/* links: the logo's spaced small capitals */
.hdr.bar2 .nav{margin:0 auto;gap:6px}
.hdr.bar2 .nav>a,.hdr.bar2 .nv>a,.hdr.bar2 .nv-b.nv-bt{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hdr.bar2 .nv-b svg{width:9px;height:9px;opacity:.5}
.hdr.bar2 .nv:hover,.hdr.bar2 .nv.open,.hdr.bar2 .nv:has(>a[aria-current="page"]),.hdr.bar2 .nav a[data-in],.hdr.bar2 .nv:has(>a[data-in]){background:none;color:inherit}
/* a gold line that grows from the middle on hover and stays under the page you are on */
.hdr.bar2 .nav>a,.hdr.bar2 .nv>a{position:relative}
.hdr.bar2 .nav>a::after,.hdr.bar2 .nv>a::after{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:1.5px;background:var(--gold);transition:left .35s var(--ease),right .35s var(--ease)}
.hdr.bar2 .nav>a:hover::after,.hdr.bar2 .nav>a[aria-current="page"]::after,.hdr.bar2 .nav>a[data-in]::after{left:11px;right:11px}
.hdr.bar2 .nv:hover>a::after,.hdr.bar2 .nv.open>a::after,.hdr.bar2 .nv>a[aria-current="page"]::after,.hdr.bar2 .nv>a[data-in]::after{left:11px;right:3px}
/* one wide panel per group, centred on the bar rather than on the link */
.hdr.bar2 .nv{position:static}
/* the panel hangs below the bar, so there is a gap between the link and it: while the group is hovered or open, an invisible strip under the link and arrow fills that gap so the pointer never leaves the group on its way down */
.hdr.bar2 .nv-b{position:relative}
.hdr.bar2 .nv:hover>a::before,.hdr.bar2 .nv.open>a::before,.hdr.bar2 .nv:hover>.nv-b::before,.hdr.bar2 .nv.open>.nv-b::before{content:"";position:absolute;left:-44px;right:-44px;top:100%;height:44px}
.hdr.bar2 .nv-m{left:50%;width:min(1080px,calc(100vw - 48px))}
.hdr.bar2 .nv-p{min-width:0;background:#fffdfa;box-shadow:0 34px 64px -30px rgba(40,20,10,.5),0 0 0 1px rgba(176,138,79,.25)}
.hdr.bar2 .nv-cs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 10px}
.hdr.bar2 .nv-c{min-width:0}
.hdr.bar2 .nav .nv-c a{flex-direction:column;align-items:flex-start;gap:3px;padding:9px 12px;white-space:normal}
.hdr.bar2 .nav .nv-c a span{white-space:nowrap;font-size:12.5px}   /* time and price on a quiet line under the name */
.hdr.bar2 .nv-c p{color:var(--gold-ink)}
.hdr.bar2 .nav .nv-c p a{display:inline;padding:0;border-radius:0;background:none;font:inherit;letter-spacing:inherit;color:inherit}
.hdr.bar2 .nav .nv-c p a:hover{background:none;text-decoration:underline;text-underline-offset:3px}
/* the picture card in each panel */
.hdr.bar2 .nav a.nv-f{display:flex;flex-direction:column;align-self:start;margin:8px 4px 4px;padding:0;border-radius:18px;overflow:hidden;background:var(--bone);color:var(--ink);white-space:normal}
.hdr.bar2 .nv-f img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.hdr.bar2 .nav a.nv-f:hover img{transform:scale(1.04)}
.hdr.bar2 .nv-f span{display:block;padding:12px 14px 14px}
.hdr.bar2 .nv-f small{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:7px}
.hdr.bar2 .nv-f b{display:block;font:400 21px/1.1 var(--serif);color:var(--ink)}
.hdr.bar2 .nv-f em{display:block;font:400 13px/1.35 var(--sans);font-style:normal;color:var(--muted);margin-top:6px}
/* open now + phone beside Book, after a thin gold divider */
.hdr.bar2 .hdr-cta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;white-space:nowrap;padding-left:20px;border-left:1px solid rgba(176,138,79,.45)}
.hdr-open{display:flex;align-items:center;gap:6px;font:500 11.5px/1 var(--sans);color:var(--muted)}
.hdr-open i{width:7px;height:7px;border-radius:50%;background:#b9b0a6;flex:0 0 auto}
.hdr-open.is i{background:#3f9d62;box-shadow:0 0 0 3px rgba(63,157,98,.16)}
.hdr-ph{font:500 15px/1 var(--sans);color:var(--ink);text-decoration:none}
.hdr-ph:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.hdr.bar2.solid .hdr-open{display:none}
/* Book: the gold arrow circle back */
.hdr.bar2 .btn.line::after{background-color:var(--gold)}
/* five links leave room for it at every width the bar shows (the older rules hid it from 1181 to 1459 px to fit eight) */
@media (min-width:1181px){.hdr.bar2 .btn.line::after{display:block}.hdr.bar2 .btn.line,.hdr.bar2.solid .btn.line,.light-top .hdr.bar2 .btn.line{padding:0 8px 0 20px}}
/* five links fit where eight did not: keep About and Contact in the bar, and no menu button, from 1181 px up */
@media (min-width:1181px) and (max-width:1340px){.hdr.bar2 .nav>a:nth-last-child(-n+2){display:block}.hdr.bar2 .burger{display:none}.hdr.bar2 .nav>a,.hdr.bar2 .nv>a{letter-spacing:.12em}}
@media (min-width:800px) and (max-width:1180px){.hdr.bar2 .nav>a:nth-last-child(-n+2){display:block}.hdr.bar2 .hdr-cta{display:none}.hdr.bar2 .nv-f{display:none}}
@media (max-width:799px){.hdr.bar2 .hdr-cta{display:none}}
/* where the links are not in the bar's row (phones; the second pill from 800 to 1180 px), the logo pushes the menu button to the right edge itself */
@media (max-width:1180px){.hdr.bar2 .brand{margin-right:auto}}
@media (max-width:560px){.hdr.bar2 .hdr-in{height:60px}.hdr.bar2.solid .hdr-in{height:54px}}
@media (prefers-reduced-motion:reduce){.hdr.bar2 .hdr-in,.hdr.bar2 .brand svg,.hdr.bar2 .brand small,.hdr.bar2 .brand .by,.hdr.bar2 .nav>a::after,.hdr.bar2 .nv>a::after,.hdr.bar2 .nv-f img{transition:none}}

/* ---------- touch-up pass (Anthony, 2026-10-14; `.polish`, PREVIEW only until settings.POLISH_LIVE) ----------
   The "how long each takes" chart used the left 900 px of the page and left the rest empty: two columns across the full width now.
   The short "Your first facial here" block floated in white space: it sits on a cream panel, heading left, words right. */
.polish .bm-l.sib{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px)}
@media (max-width:760px){.polish .bm-l.sib{grid-template-columns:1fr}}
.polish #first-visit .prose{max-width:none;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(28px,5vw,72px);align-items:start;
  background:var(--bone);border-radius:28px;border-top:0;padding:clamp(28px,4vw,56px)}
.polish #first-visit .prose h2{grid-row:1 / span 8;margin:0}
.polish #first-visit .prose p{grid-column:2;margin-top:0}
.polish #first-visit .prose p+p{margin-top:12px}
@media (max-width:760px){.polish #first-visit .prose{grid-template-columns:1fr}.polish #first-visit .prose h2{grid-row:auto;margin-bottom:16px}.polish #first-visit .prose p{grid-column:1}}

/* ---------- phone review fixes (Anthony, 2026-10-14; `.mfix`, PREVIEW only until settings.MFIX_LIVE) ---------- */
/* the chat button stays out of the open menu */
.mfix:has(.drawer.open) #hb-chat-widget{display:none}
/* on the booking page it covered time slots and prices on a phone: the "Ask Bella" link in the lead-in replaces it there */
/* (the element is switched back on, by site.js, the moment someone taps a link that opens the chat: its panel lives inside it) */
@media (max-width:700px){html:not(.chat-on) .mfix:has(#bkw) #hb-chat-widget{display:none}}
/* the booking card was nearly two screens down: the card walks through the same four steps itself, so the list goes on phones */
@media (max-width:700px){.mfix .bk .steps{display:none}}
/* thumb-sized links in the price menu (they were 32 px tall) */
@media (max-width:700px){.mfix .pr-m .lk,.mfix .pr summary{padding:15px 0}}
/* the picker row (brows, facials): room after the last chip, so it does not sit flush against the screen edge */
@media (max-width:899px){.mfix .fsel-l::after{content:"";flex:0 0 12px}}
/* 320 px phones: "by Jiman" was cut to "by Jim", and the hero caption hid behind the rating badge */
@media (max-width:340px){
  .mfix .hdr.bar2 .brand{gap:8px}
  .mfix .hdr.bar2 .brand svg{width:30px;height:30px}
  .mfix .hdr.bar2 .brand .by{font-size:16px;margin-left:9px;padding-left:9px}
  .mfix .sc-cap{display:none}
}

:root[data-pal="sand"]{
  --bone:#F8F4EE;--blush:#EFE7DB;--tint:#E0D2BF;--stone:#EAE1D4;--line:#ECE4D8;
  --ink:#231C16;--ink-2:#2E261E;--ink-3:#40362C;--ink-line:#54483C;--text:#30281F;--muted:#70665A;--on-dark:#F7F1E8;--on-dark-2:#CFC2B0;
  --pop:#E3D6C4;--pop-2:#D6C6B0;--g1:#F6ECDD;--g2:#E9C4AE;--g3:#D9BCB0;--pop-ink:#231C16;--on-pop:#2B231B;--on-pop-2:#4E4236;
  --acc:#231C16;--acc-ink:#6E553B;--btn:#231C16;--btn-ink:#FFFFFF;--btn-h:#6E553B;--btn-h-ink:#FFFFFF;
  --pb:#231C16;--pb-ink:#FFFFFF;--pb-h:#FFFFFF;--pb-h-ink:#231C16;--dk:#231C16;
  --grade:saturate(.8) sepia(.14) contrast(1.04) brightness(1.02)}
/* ============================================================================
   Animated sections (2026-10-13). Iryna asked for "some cool animation" on: the laser areas and times, the microneedling
   steps, the Green Peel strengths, the types of facial and what happens in a facial.
   Four pieces, all driven by the last module in src/site.js:
     .bmap   laser body map: two figures, a dot per area, her times as bars
     .sts    steps that play one after another, a picture or one of her clips per step
     .gps    Green Peel strength selector
     .fsel   facial selector: eight facials, a time ring, the steps as chips
   Rules kept: every one is a real list or set of articles first, so without the script (or under reduced motion) the
   content simply reads; anything that plays by itself either ends inside five seconds or has a pause button.
   Loaded last, so it can use the palette tokens.
   ============================================================================ */

/* a switch with a sliding thumb (body map: 2 options, Green Peel: 3) */
.bmap-tabs,.gps-tabs{position:relative;display:inline-grid;padding:5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:22px}
.bmap-tabs{grid-template-columns:repeat(2,1fr)}
.gps-tabs{grid-template-columns:repeat(3,1fr)}
.bmap-tabs::before,.gps-tabs::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:var(--btn);transition:transform .7s var(--ease)}
.bmap-tabs::before{width:calc((100% - 10px) / 2)}
.gps-tabs::before{width:calc((100% - 10px) / 3);transform:translateX(calc(100% * var(--i,0)))}
.bmap[data-on="m"] .bmap-tabs::before{transform:translateX(100%)}
.bmap-tabs button,.gps-tabs button{position:relative;z-index:1;border:0;background:none;font:500 15.5px/1 var(--sans);color:var(--ink);padding:14px clamp(18px,2.4vw,30px);border-radius:999px;cursor:pointer;transition:color .5s var(--ease);white-space:nowrap}
.bmap-tabs button[aria-selected="true"],.gps-tabs button[aria-selected="true"]{color:var(--btn-ink)}
html:not(.js) .bmap-tabs,html:not(.js) .gps-tabs{display:none}

/* ---------- 1. laser body map ---------- */
.bmap{margin-top:34px}
.bmap-g{display:grid;gap:clamp(18px,3vw,52px);align-items:start}
@media (min-width:900px){.bmap-g{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}
.bmap-fig{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(120deg,#F4E6D4 0,#F1D6BF 100%)}
.bmap-im{position:relative}
.bmap-im[hidden],.bmap-p[hidden]{display:none}
.bmap-im img{display:block;width:100%;height:auto}
.bmap-fig figcaption{position:absolute;left:16px;bottom:13px;font:400 12px/1.3 var(--sans);color:#6B5645}
.bm-dot{position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--ink);cursor:pointer;transition:transform .5s var(--ease),background .4s var(--ease)}
.bm-dot::before{content:"";position:absolute;inset:-12px;border-radius:50%}                       /* a larger target for a finger */
.bm-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;transform:scale(.4)}
.bm-dot.on{transform:scale(1.6);background:var(--ink);z-index:2}
.bm-tip{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translate(-50%,6px) scale(.625);transform-origin:50% 100%;white-space:nowrap;font:500 13px/1 var(--sans);
  color:#fff;background:var(--ink);padding:9px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.bm-dot.on .bm-tip{opacity:1;transform:translate(-50%,0) scale(.625)}
@media (prefers-reduced-motion:no-preference){.bm-dot.on::after{animation:bm-ping 1.6s var(--ease) infinite}}
@keyframes bm-ping{0%{opacity:.75;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
.bmap-p h3{font:400 clamp(27px,2.5vw,36px)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)}
.bmap-p+.bmap-p{margin-top:34px}
.bm-l{list-style:none;margin:0;padding:0}
.bm-l li{display:grid;grid-template-columns:minmax(0,8.6em) minmax(0,1fr) 5.2em;align-items:center;gap:16px;padding:14px 16px;border-radius:18px;cursor:pointer;transition:background .45s var(--ease)}
.bm-l li.on{background:#fff}
@media (hover:hover){.bm-l li:hover{background:#fff}}
.bm-n{font:500 16.5px/1.2 var(--sans);color:var(--ink)}
.bm-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.bm-bar i{display:block;height:100%;border-radius:99px;background:var(--acc-ink);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--ease) calc(.07s * var(--i,0))}
.bmap.go .bm-bar i,html:not(.js) .bm-bar i{transform:scaleX(var(--v))}
.bm-t{font:400 14px/1 var(--sans);color:var(--muted);white-space:nowrap;text-align:right}
.bm-t b{font:500 21px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.bm-note{margin:18px 16px 0;font-size:14.5px;color:var(--muted);max-width:44ch}
html:not(.js) .bm-note{display:none}
@media (max-width:899px){
  .bmap-g{display:block}
  .bmap-fig{position:sticky;top:78px;z-index:2;margin-bottom:16px;box-shadow:0 18px 30px -24px rgba(40,20,10,.5)}
  .bmap-im{width:min(100%,calc(44svh * .746));margin:0 auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
  .bm-l li{grid-template-columns:minmax(0,7.4em) minmax(0,1fr) 4.6em;gap:12px;padding:13px 12px}
  .bm-n{font-size:15.5px}.bm-t b{font-size:19px}
  html:not(.js) .bmap-fig{position:static}
}

/* ---------- 2. steps that play one after another ---------- */
.sts{display:grid;gap:clamp(18px,3vw,56px);margin-top:34px;align-items:center}
@media (min-width:900px){.sts{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}}
.sts-v{position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--stone);isolation:isolate}
.sts-ss,.sts-s{position:absolute;inset:0}
.sts-s{opacity:0;transform:scale(1.09);transition:opacity .9s var(--ease),transform 1.8s var(--ease)}
.sts-s.on{opacity:1;transform:none}
.sts-s img,.sts-s video{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-card)}
.sts-s video,.sts-s img.ph{filter:var(--grade)}
.sts-num{position:absolute;z-index:2;left:16px;bottom:16px;font:500 13px/1 var(--sans);letter-spacing:.06em;color:var(--ink);background:rgba(255,255,255,.94);padding:11px 15px;border-radius:999px;font-variant-numeric:tabular-nums}
.sts-pp{position:absolute;z-index:3;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer;padding:0}
.sts-pp svg{width:18px;height:18px;fill:var(--ink)}
.sts-pp .i-play,.sts.paused .sts-pp .i-pause{display:none}
.sts.paused .sts-pp .i-play{display:block}
html:not(.js) .sts-pp,html:not(.js) .sts-num{display:none}
.sts-l{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sts-l button{position:relative;width:100%;display:grid;grid-template-columns:2.1em minmax(0,1fr);align-items:baseline;gap:8px;text-align:left;border:0;background:none;padding:17px 20px 19px;border-radius:20px;
  cursor:pointer;color:var(--ink);opacity:.4;transition:opacity .6s var(--ease),background .6s var(--ease),transform .6s var(--ease)}
.sts-l .n{font:italic 400 21px/1 var(--serif);color:var(--acc-ink)}
.sts-l .t{font:400 clamp(21px,2.1vw,31px)/1.14 var(--serif);font-variation-settings:'wght' 420;letter-spacing:-.02em}
.sts-l button::after{content:"";position:absolute;left:20px;right:20px;bottom:8px;height:2px;border-radius:2px;background:var(--acc-ink);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.sts-l li.on button{opacity:1;background:#fff;transform:translateX(8px)}
.sts-l li.past button{opacity:.62}
.sts-l li.on button::after{opacity:1}
.sts.run .sts-l li.on button::after{animation:sts-fill var(--dur,3.6s) linear forwards}
@keyframes sts-fill{to{transform:scaleX(1)}}
@media (hover:hover){.sts-l button:hover{opacity:.85}}
html:not(.js) .sts-l button{opacity:1;cursor:default}
@media (max-width:899px){
  .sts-v{aspect-ratio:5/4}
  .sts-l button{padding:13px 14px 15px;grid-template-columns:1.9em minmax(0,1fr)}
  .sts-l li.on button{transform:none}
  .sts-l button::after{left:14px;right:14px;bottom:6px}
}

/* ---------- 3. Green Peel strength selector ---------- */
.gps{margin-top:34px}
.gps-tabs{background:var(--bone);box-shadow:none}
.gps-g{display:grid;gap:14px}
@media (min-width:900px){.gps-g{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:stretch}}
.gps-ps{display:grid;gap:14px}
.gp-p{position:relative;background:var(--pop-g);color:var(--on-pop);border-radius:var(--r-card);padding:clamp(26px,3.6vw,56px);display:flex;flex-direction:column;align-items:flex-start}
.gp-k{font:500 11px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;margin:0 0 14px;color:var(--on-pop-2)}
.gp-p h3{font:400 clamp(54px,7vw,116px)/.86 var(--serif);font-variation-settings:'wght' 420;letter-spacing:-.035em;color:var(--pop-ink);margin:0}
.gp-m{position:absolute;right:clamp(24px,3.4vw,52px);top:clamp(26px,3.6vw,56px);display:flex;align-items:flex-end;gap:7px;height:54px}
.gp-m i{width:13px;border-radius:7px;background:color-mix(in srgb,var(--on-pop) 16%,transparent);transform-origin:50% 100%}
.gp-m i:nth-child(1){height:40%}.gp-m i:nth-child(2){height:70%}.gp-m i:nth-child(3){height:100%}
.gp-m i.f{background:var(--pop-ink)}
.gp-p dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px;margin:clamp(22px,2.6vw,36px) 0 0;width:100%;border-top:1px solid var(--pop-line);padding-top:clamp(18px,2vw,26px)}
.gp-p dt{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-pop-2);margin-bottom:8px}
.gp-p dd{margin:0;font:400 clamp(20px,1.8vw,26px)/1.12 var(--serif);font-variation-settings:'wght' 420;letter-spacing:-.015em;color:var(--on-pop)}
.gp-b{margin:18px 0 0;max-width:46ch;color:var(--on-pop-2)}
.gp-p .btn{margin-top:clamp(22px,2.4vw,32px);background:var(--pb);color:var(--pb-ink)}
.gp-p .btn:hover{background:var(--pb-h);color:var(--pb-h-ink)}
.gp-v{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;min-height:300px;background:var(--stone)}
.gp-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--grade);border-radius:inherit}
.gp-v figcaption{position:absolute;left:14px;bottom:14px;font:500 12.5px/1 var(--sans);color:var(--ink);background:rgba(255,255,255,.94);padding:9px 13px;border-radius:999px}
.gps.live .gps-ps{gap:0}
.gps.live .gp-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(22px);transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s .6s}
.gps.live .gp-p.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .08s,transform .9s var(--ease) .08s}
@media (prefers-reduced-motion:no-preference){
  .gps.live .gp-p.on .gp-m i.f{animation:gp-rise .8s var(--ease) both}
  .gps.live .gp-p.on .gp-m i.f:nth-child(2){animation-delay:.12s}
  .gps.live .gp-p.on .gp-m i.f:nth-child(3){animation-delay:.24s}
  .gps.live .gp-p.on h3{animation:gp-in .9s var(--ease) both}
}
@keyframes gp-rise{from{transform:scaleY(.12)}to{transform:none}}
@keyframes gp-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (max-width:899px){.gp-v{min-height:0;aspect-ratio:5/4}.gps-tabs{display:grid;width:100%}.gps-tabs button{padding:14px 6px}.gp-p dl{grid-template-columns:1fr 1fr;gap:14px 16px}}

/* ---------- 4. facial selector ---------- */
.fsel{margin-top:34px;display:grid;gap:14px}
@media (min-width:900px){.fsel{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);align-items:start}}
.fsel-l{position:relative;list-style:none;margin:0;padding:8px;border-radius:var(--r-card);background:var(--bone);display:grid;gap:2px}
.fsel-l::before{content:"";position:absolute;left:8px;right:8px;top:0;height:var(--h,0px);transform:translateY(var(--y,8px));border-radius:24px;background:#fff;box-shadow:0 14px 28px -22px rgba(40,20,10,.5);
  transition:transform .6s var(--ease),height .6s var(--ease)}
.fsel-l button{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:10px;align-items:baseline;text-align:left;border:0;background:none;border-radius:24px;
  padding:17px 20px;cursor:pointer;color:var(--ink)}
.fsel-l .n{font:500 12px/1 var(--sans);letter-spacing:.12em;color:var(--muted)}
.fsel-l .t{font:400 clamp(21px,1.9vw,27px)/1.1 var(--serif);font-variation-settings:'wght' 420;letter-spacing:-.02em}
.fsel-l .m{font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap}
html:not(.js) .fsel-l{display:none}
.fsel-ps{display:grid;gap:14px}
.fs-p{position:relative;background:var(--pop-g);color:var(--on-pop);border-radius:var(--r-card);padding:clamp(26px,3.6vw,56px);min-height:100%;display:flex;flex-direction:column;align-items:flex-start}
.fs-ring{position:absolute;right:clamp(22px,3vw,46px);top:clamp(22px,3vw,46px);width:clamp(96px,9.4vw,138px);aspect-ratio:1;display:grid;place-items:center;text-align:center}
.fs-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.fs-ring circle{fill:none;stroke-width:4.5}
.fs-ring .bg{stroke:color-mix(in srgb,var(--on-pop) 14%,transparent)}
.fs-ring .fg{stroke:var(--pop-ink);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:calc(339.3px * (1 - var(--v)))}
.fs-ring b{display:block;font:400 clamp(30px,3vw,44px)/.9 var(--serif);font-variation-settings:'wght' 420;color:var(--pop-ink);font-variant-numeric:tabular-nums}
.fs-ring span{display:block;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-pop-2);margin-top:5px}
.fs-k{font:500 11px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;margin:0 0 14px;color:var(--on-pop-2)}
.fs-p h3{font:400 clamp(40px,4.7vw,78px)/.92 var(--serif);font-variation-settings:'wght' 420;letter-spacing:-.03em;color:var(--pop-ink);margin:0;max-width:calc(100% - clamp(110px,11vw,160px));text-wrap:balance}
.fs-p h3 a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.1em}
.fs-b{margin:18px 0 0;max-width:44ch;font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.55;color:var(--on-pop)}
.fs-tm{margin:10px 0 0;font:500 14px/1.3 var(--sans);color:var(--on-pop-2)}
.fs-st{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:clamp(20px,2.2vw,30px) 0 0;counter-reset:fs}
.fs-st li{counter-increment:fs;font:500 13.5px/1.2 var(--sans);color:var(--on-pop);background:var(--pop-veil);box-shadow:inset 0 0 0 1px var(--pop-line);padding:9px 13px 9px 10px;border-radius:999px}
.fs-st li::before{content:counter(fs);display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;margin-right:7px;font-size:11px;background:var(--pop-ink);color:var(--pop)}
.fs-p .more{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:clamp(24px,2.6vw,36px)}
.fs-p .more .btn.bone{background:var(--pb);color:var(--pb-ink)}
.fs-p .more .btn.bone:hover{background:var(--pb-h);color:var(--pb-h-ink)}
.fs-p .more .btn.line{border-color:color-mix(in srgb,var(--on-pop) 50%,transparent);color:var(--on-pop)}
.fs-p .more .btn.line:hover{background:var(--on-pop);color:var(--pop);border-color:var(--on-pop)}
.fsel.live .fsel-ps{gap:0}
.fsel.live .fs-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s .5s}
.fsel.live .fs-p.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .06s,transform .8s var(--ease) .06s}
@media (prefers-reduced-motion:no-preference){
  .fsel.live .fs-p .fg{stroke-dashoffset:339.3px;transition:stroke-dashoffset 0s .5s}
  .fsel.live .fs-p.on .fg{stroke-dashoffset:calc(339.3px * (1 - var(--v)));transition:stroke-dashoffset 1.2s var(--ease) .12s}
  .fsel.live .fs-p .fs-st li{opacity:0;transform:translateY(10px)}
  .fsel.live .fs-p.on .fs-st li{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(.2s + .045s * var(--k,0)),transform .6s var(--ease) calc(.2s + .045s * var(--k,0))}
}
@media (max-width:899px){
  .fsel-l{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;border-radius:999px;padding:6px;margin:0 calc(var(--gut,18px) * -1);border-radius:0;background:none}
  .fsel-l::-webkit-scrollbar{display:none}
  .fsel-l::before{display:none}
  .fsel-l li{flex:none;scroll-snap-align:start}
  .fsel-l li:first-child{margin-left:var(--gut,18px)}.fsel-l li:last-child{margin-right:var(--gut,18px)}
  .fsel-l button{display:block;padding:13px 17px;border-radius:999px;background:var(--bone);white-space:nowrap}
  .fsel-l .n,.fsel-l .m{display:none}
  .fsel-l .t{font:500 15px/1 var(--sans);letter-spacing:0}
  .fsel-l button[aria-selected="true"]{background:var(--btn);color:var(--btn-ink)}
  .fs-p h3{max-width:calc(100% - 104px)}
}

/* ---------- additions: a link per laser area, time bars for sibling treatments ---------- */
.bm-l li{grid-template-columns:minmax(0,8.6em) minmax(0,1fr) 5.2em 34px}
.bm-go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease)}
.bm-go .ar{width:15px;height:15px;padding:0;margin:0;background:none;box-sizing:border-box;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform:none}
a.bm-go:hover{background:var(--btn);color:var(--btn-ink);transform:rotate(-45deg)}
span.bm-go{background:none}
.bm-l li.here{background:#fff}
.bm-l li.here .bm-n{font-weight:600}
.sib{margin-top:30px;max-width:900px}
.sib li{cursor:default;grid-template-columns:minmax(0,13.5em) minmax(0,1fr) 5.6em}
.sib a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.sib a:hover{color:var(--acc-ink)}
.sib.go .bm-bar i,html:not(.js) .sib .bm-bar i{transform:scaleX(var(--v))}
.gp-p .more{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.4vw,32px)}
.gp-p .more .btn{margin-top:0}
.gp-p .more .btn.line{background:none;border-color:color-mix(in srgb,var(--on-pop) 50%,transparent);color:var(--on-pop)}
.gp-p .more .btn.line:hover{background:var(--on-pop);color:var(--pop);border-color:var(--on-pop)}
.fs-ring>div{position:relative}
@media (max-width:899px){
  .bm-l li{grid-template-columns:minmax(0,7.2em) minmax(0,1fr) 4.4em 32px;gap:10px}
  .bm-go{width:32px;height:32px}
  .sib li{grid-template-columns:minmax(0,9.6em) minmax(0,1fr) 4.6em}
}

/* ---------- generated pictures beside a page title: a slow drift, a soft pass of light, and the caption "Illustration" ---------- */
.ph-img.ph-ai{position:relative}
.ph-ai figcaption{position:absolute;left:14px;bottom:14px;z-index:2;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.9);font:500 12px/1 var(--sans);color:var(--ink)}
.ph-ai::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,244,222,.55) 50%,transparent 65%);background-size:260% 100%;background-position:120% 0}
@media (prefers-reduced-motion:no-preference){
  .ph-ai img{animation:ai-drift 16s ease-in-out infinite alternate;transform-origin:55% 45%}
  .ph-ai::after{animation:ai-sheen 7s ease-in-out 1.2s infinite}
}
@keyframes ai-drift{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.2%,-1%)}}
@keyframes ai-sheen{0%{opacity:0;background-position:120% 0}15%{opacity:1}55%{opacity:1}70%,100%{opacity:0;background-position:-40% 0}}

/* ---------- laser packages (2026-10-13): three cards, each with the ceramic figure and a mark on every area it covers ---------- */
.pks{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pks.sm{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:26px}
.pk{display:flex;flex-direction:column;border-radius:var(--r-card);background:#fff;overflow:hidden;box-shadow:0 24px 44px -34px rgba(40,20,10,.45),0 0 0 1px rgba(28,17,19,.06)}
.pk.here{box-shadow:0 0 0 2px var(--ink)}
/* a package as a mosaic of its areas: one ceramic picture per area, named. Head to toe is the whole figure. */
.pk-mos{display:grid;gap:3px;aspect-ratio:1/1;background:#fff;overflow:hidden}
.pk-mos span{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;background:#F1DEC9}
.pk-mos img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pk:hover .pk-mos img{transform:scale(1.05)}
.pk-mos b{position:absolute;left:10px;bottom:10px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink);font:500 12.5px/1 var(--sans)}
.pk-mos.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.pk-mos.n5{grid-template-columns:repeat(6,1fr);grid-template-rows:1.15fr 1fr}
.pk-mos.n5 span{grid-column:span 2}
.pk-mos.n5 span:nth-child(-n+2){grid-column:span 3}
.pk-mos.n1{grid-template-columns:1fr}
.pk-mos.n1 img{object-position:50% 18%}
@media (prefers-reduced-motion:no-preference){.rv.in .pk-mos span{animation:pk-tile .9s var(--ease) both;animation-delay:calc(.12s + var(--i,0) * .09s)}}
@keyframes pk-tile{0%{opacity:0;transform:scale(1.06)}100%{opacity:1;transform:none}}
.pk-b{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.pk-k{margin:0 0 8px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pk-b h3,.pk-b h2{margin:0 0 12px;font:400 clamp(26px,2.2vw,32px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.pk-in{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font:400 15px/1.4 var(--sans);color:var(--text)}
.pk-in li a,.pk-in li{display:inline-block}
.pk-in li a{padding:6px 12px;border-radius:999px;background:var(--bone);color:var(--ink);text-decoration:none;font:500 13.5px/1.2 var(--sans)}
.pk-in li a:hover{background:var(--ink);color:#fff}
.pk-b dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:auto 0 18px;padding-top:14px;border-top:1px solid rgba(28,17,19,.1)}
.pk-b dt{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pk-b dd{margin:0;font:400 16px/1.25 var(--serif);color:var(--ink)}
.pk-b .more{display:flex;flex-wrap:wrap;gap:8px}
.pk-b .more .btn{min-height:46px;padding:0 18px;font-size:14px}
.pk-b .more .btn.line{color:var(--ink);border-color:rgba(28,17,19,.22)}
.pk-cap{margin:16px 0 0;font:400 12.5px/1.4 var(--sans);color:var(--muted)}
.pk-one{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center;margin-top:30px}
.pk-one .pk-in{margin:14px 0 18px}
@media (max-width:980px){.pks{grid-template-columns:1fr;max-width:520px}.pk-one{grid-template-columns:1fr}.pk-one .pk-fig{max-width:420px}}

/* a generated, real-life style step picture: tagged so nobody takes it for her client */
.sts-tag{position:absolute;left:16px;bottom:64px;z-index:2;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.86);color:#3B2F26;font:500 11.5px/1 var(--sans);letter-spacing:.02em}
.sts-s img.gen{object-position:50% 42%}

/* the facial selector: each treatment's own picture inside its time ring (2026-10-13) */
.fs-ring.has-im{width:clamp(150px,16vw,210px)}
.fs-ring.has-im img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:50%;object-fit:cover;object-position:50% 38%;transform:scale(1.12);transition:transform 1.6s var(--ease)}
.fs-p.on .fs-ring.has-im img{transform:none}
.fs-ring.has-im svg{z-index:1}
.fs-ring.has-im circle{stroke-width:3}
.fs-ring.has-im>div{position:absolute;z-index:2;left:-4px;bottom:8px;display:flex;align-items:baseline;gap:5px;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:0 12px 24px -14px rgba(40,20,10,.5)}
.fs-ring.has-im b{font-size:22px;line-height:1;color:var(--ink)}
.fs-ring.has-im span{margin:0;color:var(--muted)}
/* the words keep clear of the picture: a narrower column beside it, a smaller headline, and a smaller one still for a long single word ("Microdermabrasion") */
.fs-p.has-v>:not(.fs-ring):not(.more),.fs-p.has-v h3{max-width:calc(100% - clamp(170px,18vw,238px))}
.fs-p h3{overflow-wrap:anywhere}
.fs-p.has-v h3{font-size:clamp(34px,3.6vw,58px)}
.fs-p.long h3{font-size:clamp(28px,2.9vw,44px)}
@media (max-width:899px){
  .fs-ring.has-im{position:relative;right:auto;top:auto;width:min(46vw,190px);margin:0 0 20px}
  .fs-p.has-v>:not(.fs-ring):not(.more),.fs-p.has-v h3{max-width:none}
}

/* a package page: the figure with a named marker on each area, a chip per area, and the chosen area's own picture and words */
.pkx{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(20px,3.4vw,52px);align-items:start;margin-top:30px;--mk:#B0683F}
.pk-fig{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-card);background:linear-gradient(120deg,#F4E6D4 0,#F1D6BF 100%)}
.pkx .pk-fig{position:sticky;top:104px}
.pk-im{position:absolute;left:0;top:0;width:100%}
.pk-im img{display:block;width:100%;height:auto}
/* the marker: a white bead in a soft frosted halo, its name on a hairline beside it; the chosen one turns warm bronze */
.pk-m{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;cursor:pointer;z-index:1;
  box-shadow:0 0 0 5px rgba(255,255,255,.42),0 5px 12px -2px rgba(70,40,22,.5);transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.pk-m::before{content:"";position:absolute;inset:-14px;border-radius:50%}
.pk-m::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(255,255,255,.9);opacity:0}
.pk-m b{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);
  font:500 12.5px/1 var(--sans);box-shadow:0 8px 18px -10px rgba(70,40,22,.55);transition:background .5s var(--ease),color .5s var(--ease)}
.pk-m.r b{left:calc(100% + 26px)}
.pk-m.l b{right:calc(100% + 26px)}
.pk-m b::before{content:"";position:absolute;top:50%;width:18px;height:1px;background:rgba(255,255,255,.95)}
.pk-m.r b::before{right:100%}
.pk-m.l b::before{left:100%}
.pk-m.on{background:var(--mk);transform:scale(1.2);z-index:2;box-shadow:0 0 0 3px #fff,0 0 0 10px rgba(176,104,63,.26),0 6px 14px -2px rgba(70,40,22,.55)}
.pk-m.on b{background:var(--ink);color:#fff;transform:translateY(-50%) scale(.834)}
.pk-m.r.on b{transform-origin:0 50%}
.pk-m.l.on b{transform-origin:100% 50%}
@media (prefers-reduced-motion:no-preference){
  .pkx.in .pk-m{animation:pk-drop .8s var(--ease) backwards;animation-delay:calc(.25s + var(--i) * .1s)}
  .pk-m.on::after{animation:bm-ping 1.8s var(--ease) infinite}
}
@keyframes pk-drop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
.pkx-tabs{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pkx-tabs button{padding:11px 17px;border:1px solid rgba(28,17,19,.2);border-radius:999px;background:#fff;color:var(--ink);font:500 14.5px/1.1 var(--sans);cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease)}
.pkx-tabs button:hover{background:var(--bone)}
.pkx-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pkx-ps{display:grid;gap:14px}
.pkx-p{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:clamp(16px,2.2vw,30px);align-items:center;padding:16px;border-radius:var(--r-card);background:#fff;box-shadow:0 24px 44px -34px rgba(40,20,10,.45),0 0 0 1px rgba(28,17,19,.06)}
.pkx-p[hidden]{display:none}
.pkx-p>img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--r-card) - 10px)}
.pkx-p h3{margin:0 0 10px;font:400 clamp(28px,2.6vw,38px)/1.04 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.pkx-p p{margin:0 0 14px;color:var(--text);font-size:16px;line-height:1.55}
.pkx-p dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px;padding-top:12px;border-top:1px solid rgba(28,17,19,.1)}
.pkx-p dt{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pkx-p dd{margin:0;font:400 16px/1.25 var(--serif);color:var(--ink)}
.pkx-p .lk{font:500 14.5px/1.3 var(--sans);color:var(--ink);text-underline-offset:3px}
.pkx-p .lk .ar{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pkx-n{margin:12px 2px 0;font:400 12.5px/1.4 var(--sans);color:var(--muted)}
html:not(.js) .pkx-tabs,html:not(.js) .pkx-n{display:none}
@media (max-width:980px){.pkx{grid-template-columns:1fr}.pkx .pk-fig{position:relative;top:auto;width:100%;max-width:380px;margin:0 auto}}
@media (max-width:560px){.pkx-p{grid-template-columns:1fr}.pkx-p>img{aspect-ratio:5/4}}

/* the body map's markers, redrawn (2026-10-13 evening): a white bead in a soft halo; the chosen one warm bronze, not black */
.bmap{--mk:#B0683F}
.bm-dot{width:14px;height:14px;margin:-7px 0 0 -7px;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.42),0 5px 12px -2px rgba(70,40,22,.5)}
.bm-dot::after{inset:-6px;border:1px solid rgba(255,255,255,.95)}
.bm-dot.on{transform:scale(1.25);background:var(--mk);box-shadow:0 0 0 3px #fff,0 0 0 10px rgba(176,104,63,.26),0 6px 14px -2px rgba(70,40,22,.55)}

/* an area page: "on its own" beside the packages that include it */
.pk.solo{background:var(--bone);box-shadow:0 0 0 1px rgba(28,17,19,.08)}
.pk.solo .pk-b{justify-content:flex-start}
.pk.solo .pk-in{display:block;margin-bottom:auto}

/* the men's figure (front and back): the name shows only on the chosen marker */
.pk-fig.men .pk-m b{opacity:0;pointer-events:none}
.pk-fig.men .pk-m.on b{opacity:1}
.pk-more{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* Women / Men: one switch for the package cards and for each package page */
.pkxs{margin-top:30px}
.pkx-sw{display:inline-flex;gap:4px;padding:5px;margin:0 0 22px;border-radius:999px;background:var(--bone);box-shadow:inset 0 0 0 1px rgba(28,17,19,.06)}
.pkx-sw button{min-width:104px;padding:12px 22px;border:0;border-radius:999px;background:none;color:var(--ink);font:500 15px/1 var(--sans);cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease)}
.pkx-sw button[aria-selected="true"]{background:var(--ink);color:#fff}
.pkxs-g[hidden]{display:none}
.pkxs .pks,.pkxs .pkx{margin-top:0}
.pkxs-h{margin:26px 0 14px;font:400 26px/1.1 var(--serif);color:var(--ink)}
html.js .pkxs-h,html:not(.js) .pkx-sw{display:none}
.pkxs .pk-more{margin-top:26px}
.pk-in li span{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--bone);color:var(--ink);font:500 13.5px/1.2 var(--sans)}
.pk-mos.n1.men img{object-position:22% 18%;transform:scale(1.5);transform-origin:26% 30%}
.pk:hover .pk-mos.n1.men img{transform:scale(1.55)}
@media (prefers-reduced-motion:no-preference){.pkxs-g:not([hidden]) .pk-mos span{animation:pk-tile .8s var(--ease) both;animation-delay:calc(.05s + var(--i,0) * .08s)}}

/* "six to eight sessions": right under the chosen area, where the eye is when moving from one area to the next */
.pkx-s{margin:14px 0 0;padding:14px 18px;border-radius:18px;background:var(--bone);color:var(--ink);font:400 clamp(17px,1.5vw,20px)/1.35 var(--serif)}

/* 2026-10-14: the laser area cards on /laser-hair-removal/women and /men (one card per area; each card is an anchor that the old area
   addresses forward to, so it must clear the fixed header when the page opens on it) */
.pks.las{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pk.la{scroll-margin-top:110px}
.pk.la>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bone)}
.pk.la .pk-b h3{font-size:clamp(24px,2vw,28px)}
.pk.la:target{box-shadow:0 0 0 2px var(--ink)}

/* Online booking widget (/book) and the Bella chat placeholder. 2026-10-13. Loaded after anim.css; uses the palette tokens. */
.bk>*,.bkw,.bkw-p{min-width:0}
.bkw{position:relative;max-width:100%;background:#fff;color:var(--ink);border-radius:var(--r-card);padding:clamp(22px,3vw,44px);box-shadow:0 40px 80px -50px rgba(40,20,10,.55)}
.bkw-steps{list-style:none;margin:0 0 clamp(20px,2.4vw,30px);padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative}
.bkw-steps li{position:relative;padding-top:14px;font:500 12.5px/1.2 var(--sans);color:var(--muted);transition:color .5s var(--ease)}
.bkw-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.bkw-steps li::after{content:"";position:absolute;left:0;top:0;height:3px;border-radius:3px;background:var(--acc-ink);width:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.bkw-steps li.on,.bkw-steps li.past{color:var(--ink)}
.bkw-steps li.on::after,.bkw-steps li.past::after{transform:scaleX(1)}
.bkw-steps li.past::after{opacity:.55}
.bkw-h{font:400 clamp(30px,3.1vw,44px)/1.02 var(--serif);font-variation-settings:'wght' 420;letter-spacing:-.025em;margin:0 0 16px;color:var(--ink);outline:none}
.bkw-p{min-height:300px}
.bkw-demo{margin:0 0 16px;padding:11px 14px;border-radius:14px;background:var(--bone);font-size:13.5px;color:var(--ink)}
.bkw-note{margin:0 0 18px;padding:13px 15px;border-radius:14px;background:var(--bone);font-size:14.5px;line-height:1.5;color:var(--text)}
.bkw-msg{margin:0 0 16px;padding:13px 15px;border-radius:14px;background:#FBEDE6;color:#7A2E1D;font-size:14.5px;line-height:1.5}
.bkw-msg a{color:inherit;text-decoration:underline}

/* the treatment */
.bkw-cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(clamp(22px,3vw,44px) * -1) 14px;padding:2px clamp(22px,3vw,44px) 4px}
.bkw-cats::-webkit-scrollbar{display:none}
.bkw-cat{flex:none;border:0;border-radius:999px;background:var(--bone);color:var(--ink);font:500 14px/1 var(--sans);padding:12px 17px;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease)}
.bkw-cat[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
@media (hover:hover){.bkw-cat[aria-pressed="false"]:hover{background:var(--blush)}}
.bkw-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bkw-it{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 34px;align-items:center;gap:14px;text-align:left;border:0;background:none;border-radius:18px;padding:15px 12px 15px 16px;cursor:pointer;color:var(--ink);
  transition:background .45s var(--ease)}
.bkw-it .n{font:400 clamp(21px,1.9vw,26px)/1.1 var(--serif);font-variation-settings:'wght' 420;letter-spacing:-.02em}
.bkw-it .m{font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap}
.bkw-it .go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease)}
.bkw-it .ar{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin:0;padding:0;background:none}
@media (hover:hover){.bkw-it:hover{background:var(--bone)}.bkw-it:hover .go{background:var(--btn);color:var(--btn-ink);transform:rotate(-45deg)}}
.bkw-it:focus-visible,.bkw-cat:focus-visible,.bkw-day:focus-visible,.bkw-time:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}
.bkw-more{margin:18px 4px 0;font-size:14.5px;color:var(--muted)}
.bkw-more a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.bkw-more.hl{padding:12px 14px;border-radius:14px;background:var(--bone);color:var(--ink)}

/* the chosen treatment, above times and details */
.bkw-sum{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:18px;background:var(--bone)}
.bkw-sum b{display:block;font:400 clamp(21px,1.9vw,26px)/1.1 var(--serif);font-variation-settings:'wght' 420;letter-spacing:-.02em}
.bkw-sum span{font-size:13.5px;color:var(--muted)}
.bkw-chg{flex:none;border:0;background:none;padding:8px 4px;font:500 13.5px/1 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}

/* a day, then a time */
.bkw-days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(clamp(22px,3vw,44px) * -1) 16px;padding:2px clamp(22px,3vw,44px) 6px}
.bkw-days::-webkit-scrollbar{display:none}
.bkw-day{flex:none;scroll-snap-align:start;min-width:72px;display:grid;gap:4px;justify-items:center;border:0;border-radius:18px;background:var(--bone);color:var(--ink);padding:12px 12px 13px;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease),transform .5s var(--ease)}
.bkw-day span{font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bkw-day b{font:400 22px/1 var(--serif);font-variation-settings:'wght' 420;white-space:nowrap}
.bkw-day[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
@media (hover:hover){.bkw-day[aria-pressed="false"]:hover{background:var(--blush)}}
.bkw-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.bkw-time{border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent);color:var(--ink);font:500 15px/1 var(--sans);padding:14px 10px;cursor:pointer;font-variant-numeric:lining-nums tabular-nums;
  transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),transform .5s var(--ease)}
@media (hover:hover){.bkw-time:hover{background:var(--btn);color:var(--btn-ink);box-shadow:none}}
.bkw-time:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){.bkw-time{animation:bkw-in .6s var(--ease) both;animation-delay:calc(.025s * min(var(--k,0),14))}}
@keyframes bkw-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bkw-load{display:flex;align-items:center;gap:12px;padding:26px 4px;color:var(--muted);font-size:15px}
.bkw-load .sp{width:20px;height:20px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--ink) 14%,transparent);border-top-color:var(--acc-ink);animation:bkw-sp 1s linear infinite}
@keyframes bkw-sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bkw-load .sp{animation:none}}

/* the details */
.bkw-f{display:grid;gap:14px}
.bkw-f .f label{display:block;font:500 13.5px/1.2 var(--sans);margin-bottom:7px;color:var(--ink)}
.bkw-f .opt{font-weight:400;color:var(--muted)}
.bkw-f input,.bkw-f textarea{width:100%;border:0;border-radius:16px;background:var(--bone);padding:15px 16px;font:400 16px/1.3 var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.bkw-f textarea{resize:vertical;min-height:84px}
.bkw-f input:focus,.bkw-f textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--acc-ink)}
.bkw-f .err{display:none;margin:6px 2px 0;font-size:13.5px;color:#A3402E}
.bkw-f .f.bad .err{display:block}
.bkw-f .f.bad input{box-shadow:inset 0 0 0 2px #A3402E;background:#fff}
.bkw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bkw-fine{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.bkw-fine a{color:inherit;text-decoration:underline}
.bkw-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.bkw .btn.ink{background:var(--btn);color:var(--btn-ink)}
.bkw .btn.ink:hover{background:var(--btn-h);color:var(--btn-h-ink)}
.bkw .btn.ink:disabled{opacity:.6;cursor:wait}
.bkw .btn.bone{background:var(--btn);color:var(--btn-ink)}
.bkw .btn.line{border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);color:var(--ink);background:none}
.bkw .btn.line:hover{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}

/* done */
.bkw-ok{text-align:center;padding:10px 0 4px}
.bkw-ok .ck{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:var(--bone)}
.bkw-ok .ck svg{width:34px;height:34px;fill:none;stroke:var(--acc-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.bkw-ok .ck{animation:bkw-pop .8s var(--ease) both}.bkw-ok .ck svg{animation:bkw-draw .9s var(--ease) .25s both}}
@keyframes bkw-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes bkw-draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
.bkw-ok .bkw-h{margin-bottom:10px}
.bkw-when{margin:0 0 14px;font-size:17px;line-height:1.5}
.bkw-ok p{max-width:44ch;margin-left:auto;margin-right:auto}
.bkw-ok .bkw-act{justify-content:center;margin-top:18px}
noscript .bkw-msg{margin:0}

/* the request form below the booking card */
#request{scroll-margin-top:96px}
.rqs .form{max-width:760px;margin:30px auto 0}

/* Bella's chat bubble: an inert stand-in in previews (protocol hard rule 6: previews carry no live chat), the real widget on a live build */
.hbc-ph{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hbc-b{display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 14px/1 var(--sans);text-align:left;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5);cursor:pointer;opacity:.94}
.hbc-b img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#fff}
.hbc-b small{display:block;font:400 11px/1.2 var(--sans);opacity:.75;margin-top:3px}
/* the scripted example (preview only) */
.hbc-p{width:min(344px,calc(100vw - 28px));max-height:min(520px,calc(100dvh - 250px));display:flex;flex-direction:column;border-radius:20px;background:#fff;color:var(--ink);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.4);overflow:hidden;font:400 14px/1.45 var(--sans)}
.hbc-p[hidden]{display:none}
.hbc-p header{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;background:var(--ink);color:#fff}
.hbc-p header img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.hbc-p header div{flex:1;min-width:0}
.hbc-p header b{display:block;font:600 14px/1.2 var(--sans)}
.hbc-p header small{display:block;font:400 11.5px/1.3 var(--sans);opacity:.8;margin-top:2px}
.hbc-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:400 20px/1 var(--sans);cursor:pointer}
.hbc-m{flex:1;min-height:120px;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px}
.hbc-m p{margin:0;max-width:86%;padding:9px 12px;border-radius:16px;background:rgba(35,28,22,.07)}
.hbc-m p.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.hbc-m p.bot{align-self:flex-start;border-bottom-left-radius:5px}
.hbc-m p a{display:inline-block;margin-top:6px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px}
.hbc-m .dots{display:inline-flex;gap:4px;padding:13px 14px}
.hbc-m .dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:hbcd 1s ease-in-out infinite}
.hbc-m .dots i:nth-child(2){animation-delay:.15s}.hbc-m .dots i:nth-child(3){animation-delay:.3s}
@keyframes hbcd{0%,100%{opacity:.25}50%{opacity:.8}}
.hbc-c{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px 10px}
.hbc-c button{padding:8px 12px;border:1px solid rgba(35,28,22,.28);border-radius:999px;background:#fff;color:var(--ink);font:500 13px/1.2 var(--sans);cursor:pointer;text-align:left}
.hbc-c button:hover,.hbc-c button:focus-visible{background:var(--ink);color:#fff}
.hbc-f{margin:0;padding:9px 14px 12px;border-top:1px solid rgba(35,28,22,.1);font:400 11.5px/1.4 var(--sans);opacity:.7}
@media (prefers-reduced-motion:reduce){.hbc-m .dots i{animation:none;opacity:.5}}
@media (max-width:760px){.hbc-ph{right:14px;bottom:88px}.hbc-b{padding-right:6px}.hbc-b span{display:none}}
@media print{.hbc-ph{display:none}}

@media (max-width:560px){
  .bkw{padding:20px 18px 24px;border-radius:28px}
  .bkw-cats,.bkw-days{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .bkw-steps li{font-size:11.5px}
  .bkw-it{grid-template-columns:minmax(0,1fr) auto;padding:14px 10px 14px 12px}
  .bkw-it .go{display:none}
  .bkw-times{grid-template-columns:repeat(3,1fr)}
}

/* opened from a treatment's own Book button: straight to the times, without the "how it works" list */
html.bk-direct .bk .steps{display:none}

/* "About <treatment>": general information on a treatment page (content/guides.py, blk_guide in build.py). 2026-10-13.
   Plain cards, two across on a laptop and one on a phone; a small line under them says whose words they are. */
.gd{display:grid;gap:14px;margin-top:30px}
@media (min-width:900px){.gd{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gd-i{background:#fff;border-radius:var(--r-card);padding:clamp(22px,2.4vw,32px);box-shadow:0 0 0 1px rgba(28,17,19,.06)}
.gd-i h3{margin:0 0 12px;font:400 clamp(23px,2vw,29px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.gd-i p{margin:0;font-size:16.5px;line-height:1.6;color:var(--text)}
.gd-i p+p{margin-top:10px}
.gd-i a{color:inherit;text-underline-offset:.2em}
.gd-n{margin:18px 2px 0;max-width:72ch;font:400 13.5px/1.5 var(--sans);color:var(--muted)}

/* a product in pictures: part + part = what they make (the Collagen Velvet Glow Facial page). Three cards with the signs between them on a laptop;
   on a phone each card lies flat, picture left, words right, with the sign centred between cards. */
.mix{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:clamp(8px,1.4vw,20px);align-items:center}
.mix-i{background:#fff;border-radius:var(--r-card);padding:12px 12px 20px;text-align:center;box-shadow:0 24px 44px -34px rgba(40,20,10,.45),0 0 0 1px rgba(28,17,19,.06)}
.mix-i img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:calc(var(--r-card) - 10px);margin-bottom:16px}
.mix-i b{display:block;font:400 clamp(21px,1.9vw,27px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.mix-i span{display:block;margin-top:8px;padding:0 8px;font-size:15px;line-height:1.5;color:var(--text)}
.mix-o{font:300 clamp(30px,3vw,46px)/1 var(--serif);color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .mix.rv>li{opacity:0;transform:translateY(18px)}
  .mix.rv.in>li{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(.14s * var(--i,0)),transform .8s var(--ease) calc(.14s * var(--i,0))}
}
@media (max-width:700px){
  .mix{grid-template-columns:1fr;gap:6px}
  .mix-o{justify-self:center;font-size:30px;line-height:.8}
  .mix-i{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:center;text-align:left;padding:12px 16px 12px 12px}
  .mix-i img{grid-row:1/3;margin:0}
  .mix-i b{align-self:end}
  .mix-i span{align-self:start;margin-top:4px;padding:0}
}

/* figures a maker reports for its product: three tiles in the page's colour, each number counting up as it comes into view */
.figs{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.figs li{background:var(--pop-g);color:var(--on-pop);border-radius:var(--r-card);padding:clamp(22px,2.6vw,38px)}
.figs-v{margin:0;font:400 clamp(44px,5vw,80px)/.9 var(--serif);letter-spacing:-.03em;color:var(--pop-ink);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.figs-v i{font-style:normal;font-size:.5em;margin-left:.05em}
.figs li span{display:block;margin-top:14px;font:500 15.5px/1.35 var(--sans);color:var(--on-pop)}
@media (prefers-reduced-motion:no-preference){
  .figs.rv>li{opacity:0;transform:translateY(18px)}
  .figs.rv.in>li{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(.12s * var(--i,0)),transform .8s var(--ease) calc(.12s * var(--i,0))}
}
@media (max-width:700px){
  .figs{grid-template-columns:1fr;gap:10px}
  .figs li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;column-gap:18px;padding:20px 22px}
  .figs-v{font-size:44px}
  .figs li span{margin:0}
}

/* Phone and small-screen pass (2026-10-13 evening). Loaded LAST, after book.css, so a rule here wins over the same selector in an earlier file.
   Why a file of its own: the look is layered (site > pages > theme-2026 > theme-v3 > wow > skin-clay > anim > book), and several phone rules
   in the early layers were being undone by later rules that have no media query (the review quotes' size, the names on the treatment tiles).
   Checked at 320, 360, 375, 390 and 430 px wide. Iryna, 2026-10-13: "some of the sections are not optimized for mobile". */

/* ---------- 1. treatment tiles (home, /services) ----------
   Two columns that are allowed to shrink, and a name that fits its tile. "Microneedling" at 32 px made the whole page 16 px wider than a
   375 px phone, so every page edge and the top bar sat off-screen. */
@media (max-width:999px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc,.bc a{min-width:0}
  .bc h3,.bc.tone h3{font-size:clamp(19px,6.3vw,38px);line-height:1.02;overflow-wrap:anywhere}
  .b1 h3{font-size:clamp(44px,13vw,72px)}
}
@media (max-width:480px){.b2 a,.b3 a,.b4 a,.b5 a,.b6 a,.b7 a{padding:14px 12px}}

/* a page title with one long word: "Microdermabrasion" at 52 px is 348 px wide, wider than the text column of a 375 px phone (and of every
   narrower one), which made that whole page wider than the screen. Under 480 px the title scales with the screen; a word still breaks
   rather than push the page wider. */
@media (max-width:480px){.ph h1{font-size:min(52px,13vw);overflow-wrap:break-word}}

/* ---------- 2. the reviews wall on the home page ----------
   On a phone a quote spans the full width (it was squeezed into a 170 px column at 24 to 29 px type, two or three words a line);
   her two clips sit side by side and the photo runs wide. */
@media (max-width:620px){
  .wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;columns:auto}
  .wall .wt{margin:0}
  .wall .wt-q,.wall .wt-s,.wall .wt-p{grid-column:1/-1}
  .wall .wt-p img{aspect-ratio:16/10}
  .wall .wt blockquote{font-size:21px;line-height:1.22}
  .wall .wt.big blockquote{font-size:24px;line-height:1.16}
  .wall .wt-q{padding:22px 20px 20px}
  .wall .wt-s{padding:24px 20px 22px}
  .wall .wt-s li{font-size:14px}
}

/* ---------- 3. rows that scroll sideways ----------
   The first card keeps the page's side margin: scroll snapping was pulling it flush against the screen edge. One clip on its own sits in
   the middle, a little larger, instead of small at the left with nothing beside it. */
@media (max-width:1000px){
  .reels{scroll-padding-inline:var(--gut)}
  .reels.few:has(>.reel:only-child){grid-auto-columns:min(74vw,320px);justify-content:center}
}
/* The four clips under "See a facial before you book it" (home). Iryna, 2026-10-13 late: "fix see a facial before you book it section on
   mobile view". They were a row to swipe inside the rounded card: the second clip was cut in half at the card's edge, a scrollbar sat under
   the row, and the last two stayed blank until swiped to. Now nothing scrolls sideways: all four are on screen, two by two on a phone and
   four in a row on a small tablet. */
@media (max-width:1000px){
  .sec.pop .reels{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .sec.pop .reel{min-width:0;scroll-snap-align:none}
}
@media (max-width:560px){
  .sec.pop .reels{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
  .sec.pop .reel figcaption{margin-top:10px;font-size:14px}
  .sec.pop .reel figcaption span{display:block;margin:0 0 2px;font-size:12px}
}
@media (max-width:899px){.fsel-l{padding:6px 0;scroll-padding-inline:var(--gut,18px)}}

/* ---------- 4. the booking card ----------
   Iryna, 2026-10-13: "those bubbles, they go way too close to the end of the square. They have to be more space there." The day bubbles
   and the kinds of treatment no longer run out to the card's edge: they keep the card's own padding on both sides. On a touch screen the
   days still swipe, and fade out before the padding (book.js sets --fl / --fr while there is more to the left or right). With a mouse
   there is nothing to swipe with, so the days are laid out six to a row, all visible. The kinds of treatment wrap (five of the eight were
   hidden off the right edge). */
.bkw-cats{flex-wrap:wrap;overflow:visible;margin:0 0 14px;padding:0}
.bkw-days{margin:0 0 16px;padding:2px 0 6px;scroll-snap-type:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
@media (hover:hover) and (pointer:fine){
  .bkw-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;-webkit-mask-image:none;mask-image:none}
  .bkw-day{min-width:0;padding:11px 4px 12px}
  .bkw-day b{font-size:20px}
}
@media (max-width:560px){
  .bkw-cats,.bkw-days{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .bkw-cat{padding:11px 14px;font-size:13.5px}
  .bkw-time{white-space:nowrap;padding:14px 4px;font-size:14.5px}
}
@media (max-width:560px) and (hover:hover) and (pointer:fine){.bkw-days{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 5. Green Peel strength card ----------
   The three cards share one height so the page does not jump while they change. The buttons sit at the bottom of the card (as on the
   facial selector), and on a phone Classic drops the sentence that repeats its "Included" line, so the shorter two are not half empty. */
.gp-p .more{margin-top:auto;padding-top:clamp(22px,2.4vw,32px)}
@media (max-width:899px){.gp-p .gp-b{display:none}}

/* ---------- 6. comparison tables ----------
   On a phone: one card per row of the table, each option on its own line with its name. The table was 620 px wide inside a 340 px box,
   so the last column was cut mid-word and the one after it could not be seen at all. */
@media (max-width:700px){
  .cmp-w{overflow:visible;border:0;background:none;border-radius:0}
  .cmp{display:block;min-width:0}
  .cmp thead{display:none}
  .cmp tbody{display:grid;gap:10px}
  .cmp tr{display:block;padding:16px 18px 4px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
  .cmp tbody th{display:block;width:auto;padding:0 0 12px;border:0;font:500 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .cmp td{display:grid;grid-template-columns:minmax(0,8.2em) minmax(0,1fr);gap:12px;padding:11px 0;border:0;border-top:1px solid var(--line)}
  .cmp td::before{content:attr(data-h);font:500 13.5px/1.5 var(--sans);color:var(--ink)}
  .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
}

/* ---------- 7. smaller things ---------- */
/* a treatment in a list (.ol): its sentence runs the full width under the name and the time, not in a narrow column beside the time */
@media (max-width:700px){.ol p{grid-column:1/-1;max-width:none}}
/* fact tiles under a page title. With the price there are four on most treatment pages: two by two at every width (three in a row left the fourth
   alone on a line of its own on a laptop). On a phone an odd last tile fills the row. */
.facts-row:has(>div:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.facts-row>div:last-child:nth-child(odd){grid-column:1/-1}}
/* easier to read and to tap */
@media (max-width:560px){.brand small{font-size:9px;letter-spacing:.18em}}
@media (max-width:899px){
  .pk-in li a,.pk-in li span{padding:9px 13px}
  .bm-l:not(.sib) li{grid-template-columns:minmax(0,7.2em) minmax(0,1fr) 4.4em 40px}
  .bm-go{width:40px;height:40px}
  .pkx-p .lk{display:inline-block;padding:10px 0}
}
/* /services, the full menu: every kind of treatment is on screen (five of eight were off the right edge); the two links of a row line up
   whether or not it has "What is included", and are easier to tap */
@media (max-width:979px){.ptabs{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
/* with prices on, a row's time sits beside its price on a phone (it was a fourth item on the links line and pushed "Book this" onto a line of its own) */
.pr-row .pr-t{display:none}
@media (max-width:760px){
  .pr-row{gap:10px}
  .pr-row .pr-t{display:inline;flex:none;font:400 13.5px/1.3 var(--sans);color:var(--on-dark-2);white-space:nowrap}
  .pr-m .pr-tm{display:none}
}
@media (max-width:760px){
  .pr-m{gap:2px 14px}
  .pr-m .lk,.pr summary{padding:9px 0;font-size:13.5px}
  .pr summary{gap:6px}
  .pr-m .lk{margin-left:0}
  .pr-m .lk:last-child{margin-left:auto}
}