/* =========================================================
   PORTLAND BODY CLINIC — homepage concept v2
   Restrained editorial direction. No gradients.
   ========================================================= */
:root{
  --navy:#26254D;
  --ivory:#F7F5F0;
  --white:#FFFFFF;
  --stone:#E7E3DC;
  --ink:#17171E;

  /* flat tints of the brand navy, used only for placeholder panels + hairlines */
  --navy-tint:#33325F;
  --line:rgba(38,37,77,.16);
  --line-light:rgba(247,245,240,.22);
  --body:rgba(38,37,77,.74);
  --body-light:rgba(247,245,240,.72);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gutter:clamp(22px,5vw,64px);
  --maxw:1240px;
  --sec:clamp(66px,9vw,132px);
  --ease:cubic-bezier(.22,.72,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--navy);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--navy);color:var(--ivory)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.dark :focus-visible{outline-color:var(--ivory)}

.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--sec);padding-bottom:var(--sec)}
.section--navy{background:var(--navy);color:var(--ivory)}
.section--stone{background:var(--stone)}
.section--white{background:var(--white)}

.skip{position:absolute;left:-9999px;background:var(--navy);color:var(--ivory);padding:12px 18px;z-index:200;font-size:13px}
.skip:focus{left:12px;top:12px}

/* ---------- type ---------- */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(38,37,77,.5);margin-bottom:20px;display:block;
}
.dark .eyebrow,.section--navy .eyebrow{color:rgba(247,245,240,.55)}
h1,h2,.h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.14;
}
h1{font-size:clamp(2rem,3.5vw,3.15rem)}
h2,.h2{font-size:clamp(1.7rem,2.7vw,2.4rem)}
h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.25;letter-spacing:-.01em}
.lead{font-size:clamp(15.5px,1.15vw,17px);line-height:1.75;color:var(--body);max-width:56ch}
.section--navy .lead,.dark .lead{color:var(--body-light)}
.mono{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1px solid var(--navy);background:var(--navy);color:var(--ivory);
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:transparent;color:var(--navy)}
.btn--ghost{background:transparent;color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:var(--ivory)}
.btn--light{background:var(--ivory);border-color:var(--ivory);color:var(--navy)}
.btn--light:hover{background:transparent;color:var(--ivory)}
.btn--ghost-light{background:transparent;border-color:var(--line-light);color:var(--ivory)}
.btn--ghost-light:hover{background:var(--ivory);border-color:var(--ivory);color:var(--navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------- image placeholders ---------- */
.img{position:relative;background:var(--stone);overflow:hidden}
.img::after{content:"";position:absolute;inset:10px;border:1px solid rgba(38,37,77,.14);pointer-events:none}
.img span{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:rgba(38,37,77,.42);padding:0 18px;line-height:1.7;
}
.img--navy{background:var(--navy-tint)}
.img--navy::after{border-color:rgba(247,245,240,.2)}
.img--navy span{color:rgba(247,245,240,.55)}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:sticky;top:0;z-index:70;background:var(--ivory);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s;
}
.header.stuck{border-bottom-color:var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:78px}
.logo{display:flex;flex-direction:column;line-height:1.06;text-decoration:none}
.logo b{font-size:14.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.logo i{font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(38,37,77,.6)}
.nav{display:flex;gap:clamp(18px,2.3vw,34px);align-items:center}
.nav a{font-size:13px;white-space:nowrap;text-decoration:none;color:rgba(38,37,77,.78);transition:color .3s;position:relative;padding:4px 0}
.nav a:hover{color:var(--navy)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header .btn{padding:13px 22px;font-size:11px}
.burger{display:none;padding:10px;margin-right:-10px;cursor:pointer}
.burger i{display:block;width:22px;height:1px;background:var(--navy)}
.burger i+i{margin-top:6px}
@media(max-width:1024px){
  .nav,.header .btn{display:none}
  .burger{display:block}
  .header__in{height:66px}
}

/* mobile menu */
.mmenu{
  position:fixed;inset:0;z-index:80;background:var(--ivory);display:flex;flex-direction:column;
  padding:0 var(--gutter) calc(28px + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.mmenu.open{opacity:1;visibility:visible;transform:none}
.mmenu__top{display:flex;align-items:center;justify-content:space-between;height:66px}
.mmenu__close{padding:10px;margin-right:-10px;cursor:pointer;font-size:22px;line-height:1}
.mmenu nav{margin-top:26px;border-top:1px solid var(--line)}
.mmenu nav a{
  display:flex;justify-content:space-between;align-items:center;
  padding:19px 0;border-bottom:1px solid var(--line);text-decoration:none;
  font-family:var(--serif);font-size:23px;letter-spacing:-.01em;
}
.mmenu nav a em{font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.45)}
.mmenu__foot{margin-top:auto;padding-top:34px;display:grid;gap:10px}
.mmenu__foot .btn{width:100%}
.mmenu__addr{margin-top:22px;font-size:13px;color:rgba(38,37,77,.6);line-height:1.6}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding-top:clamp(38px,5vw,62px);padding-bottom:clamp(48px,6vw,80px)}
.hero__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,5vw,74px);align-items:center}
.hero h1{margin-bottom:22px}
.hero h1 .price{display:block;color:rgba(38,37,77,.9)}
.hero h1 .price b{font-weight:400;font-style:italic}
.hero__note{
  display:inline-flex;align-items:center;gap:12px;margin-top:30px;
  font-size:12px;letter-spacing:.04em;color:rgba(38,37,77,.6);
}
.hero__note::before{content:"";width:26px;height:1px;background:var(--line)}
.hero__media{position:relative}
.hero__media .img{aspect-ratio:4/4.6}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero__media{order:-1}
  .hero__media .img{aspect-ratio:4/3.4}
  .hero .btn-row .btn{flex:1 1 100%}
}

/* =========================================================
   CREDIBILITY
   ========================================================= */
.cred{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cred ul{display:grid;grid-template-columns:repeat(4,1fr)}
.cred li{padding:30px 24px 30px 0;border-left:1px solid var(--line);padding-left:26px}
.cred li:first-child{border-left:0;padding-left:0}
.cred b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:-.01em}
.cred span{display:block;margin-top:5px;font-size:12px;letter-spacing:.03em;color:rgba(38,37,77,.58)}
@media(max-width:760px){
  .cred ul{grid-template-columns:1fr 1fr}
  .cred li{padding:22px 16px 22px 20px}
  .cred li:nth-child(3){border-left:0;padding-left:0}
  .cred li:nth-child(1),.cred li:nth-child(2){border-bottom:1px solid var(--line)}
}

/* =========================================================
   SECTION INTRO
   ========================================================= */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(38px,4.5vw,64px)}
.intro h2{max-width:14ch}
@media(max-width:860px){.intro{grid-template-columns:1fr;gap:18px;align-items:start}.intro h2{max-width:20ch}}

/* =========================================================
   FEATURED TREATMENTS (asymmetric editorial grid)
   ========================================================= */
.feat{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(38px,4.4vw,68px) clamp(20px,2.6vw,40px)}
.feat__item{display:flex;flex-direction:column;text-decoration:none;grid-column:1/-1}
@media(min-width:901px){
  .feat__item--1{grid-column:1/8}
  .feat__item--2{grid-column:8/13;margin-top:clamp(26px,4.5vw,72px)}
  .feat__item--3{grid-column:1/7}
  .feat__item--4{grid-column:7/13}
}
.feat__item--1 .img{aspect-ratio:16/10}
.feat__item--2 .img{aspect-ratio:4/4.9}
.feat__item--3 .img,.feat__item--4 .img{aspect-ratio:16/9}
.feat__n{display:block;margin:22px 0 12px;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;color:rgba(38,37,77,.4)}
.feat h3{font-size:clamp(1.2rem,1.6vw,1.4rem)}
.feat__item--1 h3,.feat__item--2 h3{font-size:clamp(1.4rem,2.1vw,1.85rem)}
.feat__sub{display:block;margin-top:7px;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.5)}
.feat p{margin-top:11px;font-size:14.5px;line-height:1.65;color:var(--body);max-width:44ch}
.feat__foot{display:flex;align-items:center;gap:20px;margin-top:auto;padding-top:18px}
.feat__price{font-family:var(--serif);font-size:1.15rem;letter-spacing:-.01em}
.feat__more{display:inline-flex;align-items:center;gap:9px;font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.feat__more i{width:16px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.feat__item:hover .feat__more i{width:28px}
.feat__item:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* =========================================================
   TREATMENT INDEX
   ========================================================= */
.tindex{margin-top:clamp(52px,6.5vw,96px);border-top:1px solid var(--line)}
.tindex__grid{display:grid;grid-template-columns:1fr}
.tcat{border-bottom:1px solid var(--line)}
.tcat summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(38,37,77,.55);
}
.tcat summary::-webkit-details-marker{display:none}
.tcat summary i{font-style:normal;font-size:17px;line-height:1;color:rgba(38,37,77,.4);
  transition:transform .35s var(--ease)}
.tcat[open] summary i{transform:rotate(45deg)}
.tcat ul{padding-bottom:14px}
.tcat a{display:block;padding:9px 0;font-size:14.5px;text-decoration:none;
  color:rgba(38,37,77,.85);transition:color .3s var(--ease),transform .3s var(--ease)}
.tcat a:hover{color:var(--navy);transform:translateX(5px)}
@media(min-width:760px){
  .tindex__grid{grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,44px)}
  .tcat{border-bottom:0;padding-top:30px}
  .tcat summary{cursor:default;padding:0 0 13px;border-bottom:1px solid var(--line)}
  .tcat summary i{display:none}
  .tcat ul{padding-top:6px}
}
@media(min-width:1080px){.tindex__grid{grid-template-columns:repeat(5,1fr)}}
.tindex__foot{display:flex;justify-content:flex-end;margin-top:clamp(30px,3.5vw,48px);
  padding-top:22px;border-top:1px solid var(--line)}
.tindex__foot a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.tindex__foot a i{width:20px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.tindex__foot a:hover i{width:34px}
@media(max-width:759px){.tindex__foot{justify-content:flex-start}}

/* =========================================================
   FEATURE SPLIT (fat freezing / butt lift)
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:center}
.split__media .img{aspect-ratio:4/4.4}
.split--flip .split__media{order:2}
.priceline{display:flex;align-items:baseline;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.section--navy .priceline{border-top-color:var(--line-light)}
.priceline b{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.5rem);font-weight:400;letter-spacing:-.02em;line-height:1}
.priceline span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(38,37,77,.55)}
.section--navy .priceline span{color:rgba(247,245,240,.6)}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px}
.facts li{font-size:12.5px;letter-spacing:.02em;color:var(--body)}
.section--navy .facts li{color:var(--body-light)}
.facts li::before{content:"—";margin-right:9px;opacity:.45}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:32px}
  .split--flip .split__media{order:-1}
  .split__media .img{aspect-ratio:4/3.4}
  .split .btn-row .btn{flex:1 1 100%}
}

/* =========================================================
   POST WEIGHT LOSS (band + pathways)
   ========================================================= */
.section--stone .img{background:#DBD6CB}
.pwl__band{margin-top:clamp(30px,3.6vw,52px)}
.pwl__band .img{aspect-ratio:21/8}
.paths{display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(36px,4.4vw,62px);border-top:1px solid var(--line)}
.path{padding:26px 22px 4px 26px;border-left:1px solid var(--line)}
.path:first-child{border-left:0;padding-left:0}
.path .n{display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;color:rgba(38,37,77,.4)}
.path h3{margin:12px 0 8px;font-size:clamp(1.05rem,1.4vw,1.2rem)}
.path p{font-size:13.5px;line-height:1.6;color:var(--body)}
.path ul{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.path a{display:block;padding:6px 0;font-size:13.5px;text-decoration:none;
  color:rgba(38,37,77,.85);transition:color .3s var(--ease),transform .3s var(--ease)}
.path a:hover{color:var(--navy);transform:translateX(4px)}
.pwl__foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(34px,4vw,54px)}
@media(max-width:900px){
  .pwl__band .img{aspect-ratio:16/10}
  .paths{grid-template-columns:1fr;border-top:0}
  .path{border-left:0;border-top:1px solid var(--line);padding:22px 0 6px}
  .pwl__foot .btn{flex:1 1 100%}
}

/* =========================================================
   SIGNATURE — FIND YOUR TREATMENT
   ========================================================= */
.finder{margin-top:clamp(34px,4vw,56px)}
.scale{position:relative;padding:0 0 6px}
.scale__track{position:relative;height:1px;background:var(--line);margin:0 6%}
.scale__fill{position:absolute;left:0;top:0;height:1px;background:var(--navy);width:0;transition:width .55s var(--ease)}
.scale__btns{display:grid;grid-template-columns:repeat(5,1fr);margin-top:-5px}
.scale__btn{position:relative;padding:22px 4px 0;text-align:center;cursor:pointer;display:block;width:100%}
.scale__dot{
  position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--ivory);
  border:1px solid rgba(38,37,77,.4);transition:background-color .4s var(--ease),border-color .4s,transform .4s var(--ease)
}
.scale__btn[aria-selected="true"] .scale__dot{background:var(--navy);border-color:var(--navy);transform:translateX(-50%) scale(1.25)}
.scale__label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.15em;line-height:1.45;text-transform:uppercase;color:rgba(38,37,77,.45);transition:color .4s}
.scale__btn:hover .scale__label{color:rgba(38,37,77,.75)}
.scale__btn[aria-selected="true"] .scale__label{color:var(--navy)}
.scale__hint{margin-top:16px;font-size:12px;color:rgba(38,37,77,.5);text-align:center}

.panel{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.5vw,64px);
  margin-top:clamp(34px,4vw,54px);padding-top:clamp(30px,3.5vw,46px);border-top:1px solid var(--line);align-items:start}
.pane{display:none}
.pane.on{display:grid;grid-template-columns:subgrid;grid-column:1/-1;animation:fadeUp .55s var(--ease) both}
@supports not (grid-template-columns:subgrid){
  .pane.on{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.5vw,64px);grid-column:1/-1}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane h3{font-size:clamp(1.4rem,2.1vw,1.9rem);margin-bottom:16px}
.pane p{color:var(--body);font-size:15.5px;line-height:1.75;max-width:50ch}
.pane__treatments{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:24px}
.pane__treatments a{display:block;border:1px solid var(--line);padding:9px 14px;
  font-size:12px;letter-spacing:.06em;text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s}
.pane__treatments a:hover{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.pane__groups{display:grid;gap:20px;margin-top:24px}
.pane__group b{display:block;margin-bottom:9px;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.45)}
.pane__group ul{display:flex;flex-wrap:wrap;gap:8px 10px}
.pane__areas{margin-top:24px;font-size:13px;color:rgba(38,37,77,.6);line-height:1.8}
.pane__areas b{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.45);margin-bottom:6px}
.pane__media .img{aspect-ratio:4/3.2}
@media(max-width:900px){
  .panel{grid-template-columns:1fr}
  .pane.on{grid-template-columns:1fr}
  .pane__media{order:-1}
  .scale__track{display:none}
  .scale__btns{
    display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(var(--gutter)*-1);padding:2px var(--gutter) 14px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .scale__btns::-webkit-scrollbar{display:none}
  .scale__btn{flex:0 0 auto;scroll-snap-align:center;padding:13px 20px;border:1px solid var(--line);width:auto}
  .scale__btn[aria-selected="true"]{background:var(--navy);border-color:var(--navy)}
  .scale__btn[aria-selected="true"] .scale__label{color:var(--ivory)}
  .scale__dot{display:none}
  .scale__hint{text-align:left}
}

/* =========================================================
   WHY PORTLAND
   ========================================================= */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,80px);border-top:1px solid var(--line-light)}
.why li{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:28px 0;border-bottom:1px solid var(--line-light)}
.why .n{font-size:11px;letter-spacing:.14em;color:rgba(247,245,240,.45);padding-top:5px}
.why h3{margin-bottom:7px}
.why p{font-size:14.5px;line-height:1.7;color:var(--body-light);max-width:40ch}
@media(max-width:820px){.why{grid-template-columns:1fr}}

/* =========================================================
   RESULTS
   ========================================================= */
.rfilter{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:clamp(24px,3vw,38px);
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.rfilter button{cursor:pointer;padding:4px 0;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.45);
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.rfilter button:hover{color:rgba(38,37,77,.75)}
.rfilter button[aria-pressed="true"]{color:var(--navy);border-bottom-color:var(--navy)}
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,30px)}
.result[hidden]{display:none}
.result{border:1px solid var(--line)}
.result__pair{display:grid;grid-template-columns:1fr 1fr}
.result__pair .img{aspect-ratio:1/1.15}
.result__pair .img+.img{border-left:1px solid var(--line)}
.result__meta{display:flex;justify-content:space-between;padding:14px 16px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(38,37,77,.45);border-top:1px solid var(--line)}
.disclaimer{margin-top:24px;font-size:12.5px;color:rgba(38,37,77,.55);max-width:70ch}
@media(max-width:700px){.results{grid-template-columns:1fr}}

/* =========================================================
   CLIENT STORIES
   ========================================================= */
.stories{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
.quote{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.45;font-style:italic;color:rgba(38,37,77,.42)}
.quote-slot{border-top:1px solid var(--line);padding-top:22px;margin-top:26px}
.quote-slot .mono{color:rgba(38,37,77,.4)}
.stories .img{aspect-ratio:4/3.6}
@media(max-width:860px){.stories{grid-template-columns:1fr}}

/* =========================================================
   BEGIN TODAY + CONTACT
   ========================================================= */
.begin{text-align:center}
.begin .lead{margin:0 auto}
.begin .btn-row{justify-content:center}
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:start}
.contact__list{margin-top:34px;border-top:1px solid var(--line)}
.contact__list li{border-bottom:1px solid var(--line);padding:20px 0}
.contact__list b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.45);margin-bottom:5px}
.contact__list a,.contact__list span{text-decoration:none;font-size:15.5px}
.contact__list a:hover{text-decoration:underline}
.map{position:relative;aspect-ratio:4/3.4;background:var(--stone);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;padding:26px}
.map p{font-size:12.5px;color:rgba(38,37,77,.6);max-width:34ch}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:860px){.contact{grid-template-columns:1fr}}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--navy);color:var(--ivory);padding-top:clamp(50px,6vw,84px);
  padding-bottom:calc(28px + env(safe-area-inset-bottom) + 60px)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,50px);
  padding-bottom:clamp(34px,4vw,54px);border-bottom:1px solid var(--line-light)}
.footer .logo b,.footer .logo i{color:var(--ivory)}
.footer .logo i{color:rgba(247,245,240,.6)}
.footer__blurb{margin-top:18px;font-size:14px;line-height:1.7;color:var(--body-light);max-width:32ch}
.footer h4{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,245,240,.5);margin:0 0 16px}
.footer li{margin-bottom:10px}
.footer li a,.footer address a,.footer address span{font-size:14px;text-decoration:none;color:rgba(247,245,240,.85)}
.footer li a:hover{color:var(--ivory);text-decoration:underline}
.footer address{font-style:normal;line-height:1.8;color:rgba(247,245,240,.85);font-size:14px}
.footer__social{display:flex;gap:16px;margin-top:18px}
.footer__social a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:rgba(247,245,240,.7)}
.footer__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:24px;
  font-size:12px;color:rgba(247,245,240,.55)}
.footer__bar nav{display:flex;gap:20px}
.footer__bar a{text-decoration:none}
@media(max-width:860px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .footer__brand{grid-column:1/-1}
}
@media(min-width:1025px){.footer{padding-bottom:clamp(28px,3vw,44px)}}

/* =========================================================
   STICKY ACTIONS (mobile)
   ========================================================= */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--ivory);border-top:1px solid var(--line);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.sticky.on{transform:none}
.sticky div{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sticky .btn{padding:14px 10px;font-size:11px}
@media(max-width:1024px){.sticky{display:block}}

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

/* =========================================================
   SITE-WIDE ADDITIONS — extends the approved homepage system.
   Nothing here overrides the approved tokens or type scale.
   ========================================================= */

/* ---------- mega menu ---------- */
.has-mega{position:relative}
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--ivory);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  z-index:69;
}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega__in{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,3.4vw,46px) var(--gutter);
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,2.4vw,36px)}
.mega h3{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(38,37,77,.45);margin-bottom:14px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.mega li{margin-bottom:2px}
.mega a{display:block;padding:6px 0;font-size:13.5px;text-decoration:none;
  color:rgba(38,37,77,.85);transition:color .25s,transform .25s var(--ease)}
.mega a:hover{color:var(--navy);transform:translateX(4px)}
.mega__foot{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-top:20px;margin-top:6px;border-top:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.mega__foot a{text-decoration:none;padding:0}
@media(max-width:1180px){.mega__in{grid-template-columns:repeat(3,1fr)}}

/* ---------- mobile treatment accordion in menu ---------- */
.mmenu details{border-bottom:1px solid var(--line)}
.mmenu details summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  padding:19px 0;cursor:pointer;font-family:var(--serif);font-size:23px;letter-spacing:-.01em}
.mmenu details summary::-webkit-details-marker{display:none}
.mmenu details summary i{font-style:normal;font-family:var(--sans);font-size:19px;
  color:rgba(38,37,77,.4);transition:transform .3s var(--ease)}
.mmenu details[open] summary i{transform:rotate(45deg)}
.mmenu details ul{padding:0 0 16px}
.mmenu details ul a{
  display:block;padding:10px 0;border:0;font-family:var(--sans);font-size:15px;
  color:rgba(38,37,77,.75)}

/* ---------- breadcrumbs ---------- */
.crumbs{padding-top:22px;font-size:11.5px;letter-spacing:.04em;color:rgba(38,37,77,.5)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs li{display:flex;align-items:center}
.dark .crumbs{color:rgba(247,245,240,.55)}

/* ---------- page hero (inner pages) ---------- */
.phero{padding-top:clamp(28px,3.4vw,44px);padding-bottom:clamp(48px,6vw,80px)}
.phero__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,5vw,74px);align-items:center}
.phero h1{margin-bottom:14px}
.phero__lede{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.3;
  color:rgba(38,37,77,.62);margin-bottom:22px;letter-spacing:-.015em}
.phero__media .img{aspect-ratio:4/4.4}
.phero__price{display:inline-flex;align-items:baseline;gap:12px;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--line)}
.phero__price b{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:400;letter-spacing:-.02em}
.phero__price span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.55)}
@media(max-width:900px){
  .phero__grid{grid-template-columns:1fr;gap:32px}
  .phero__media{order:-1}
  .phero__media .img{aspect-ratio:4/3.4}
  .phero .btn-row .btn{flex:1 1 100%}
}

/* ---------- prose ---------- */
.prose{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:start}
.prose h2{max-width:13ch}
.prose p{color:var(--body);margin-bottom:16px;max-width:62ch}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600;color:var(--navy)}
@media(max-width:860px){.prose{grid-template-columns:1fr;gap:18px}.prose h2{max-width:none}}

/* ---------- notice block ---------- */
.notice{border-left:2px solid var(--navy);padding:4px 0 4px 26px;margin-top:8px}
.notice p{color:var(--body);margin-bottom:14px}
.notice p:last-child{margin-bottom:0}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{padding:26px 22px 4px 26px;border-left:1px solid var(--line)}
.step:first-child{border-left:0;padding-left:0}
.step .n{display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;color:rgba(38,37,77,.4)}
.step h3{margin:12px 0 8px;font-size:clamp(1.05rem,1.4vw,1.2rem)}
.step p{font-size:13.5px;line-height:1.6;color:var(--body)}
.dark .steps{border-color:var(--line-light)}
.dark .step{border-color:var(--line-light)}
.dark .step p{color:var(--body-light)}
.dark .step .n{color:rgba(247,245,240,.45)}
@media(max-width:860px){
  .steps{grid-template-columns:1fr;border-top:0}
  .step{border-left:0;border-top:1px solid var(--line);padding:22px 0 6px}
}

/* ---------- area chips ---------- */
.areas{display:flex;flex-wrap:wrap;gap:9px}
.areas li a,.areas li span{display:block;border:1px solid var(--line);padding:12px 18px;
  font-size:13.5px;text-decoration:none;transition:background-color .3s var(--ease),color .3s,border-color .3s}
.areas li a:hover{background:var(--navy);border-color:var(--navy);color:var(--ivory)}

/* ---------- zone diagram (Kim K Curves) ---------- */
.zones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
.zones__list{border-top:1px solid var(--line)}
.zone{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.zone .n{font-size:10.5px;font-weight:600;letter-spacing:.18em;color:rgba(38,37,77,.4);padding-top:4px}
.zone h3{font-size:1.15rem;margin-bottom:5px}
.zone p{font-size:13.5px;color:var(--body)}
.zone.on h3,.zone:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.zones__fig{position:relative;aspect-ratio:4/4.6}
.zones__fig .img{position:absolute;inset:0}
.zones__fig .pin{position:absolute;width:34px;height:34px;border:1px solid var(--navy);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;
  font-weight:600;letter-spacing:.06em;background:var(--ivory);color:var(--navy);
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.zones__fig .pin.on{background:var(--navy);color:var(--ivory);transform:scale(1.12)}
@media(max-width:860px){.zones{grid-template-columns:1fr}.zones__fig{order:-1;aspect-ratio:4/3.6}}

/* ---------- pricing module ---------- */
.ptable{border-top:1px solid var(--line)}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:17px 0;border-bottom:1px solid var(--line)}
.prow span:first-child{font-size:15.5px}
.prow b{font-family:var(--serif);font-size:1.2rem;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.prow--hi span:first-child{font-weight:600}
.prow--hi b{font-size:1.45rem}
.dark .ptable,.dark .prow{border-color:var(--line-light)}
.phelp{margin-top:22px;font-size:13.5px;color:rgba(38,37,77,.6);max-width:60ch;line-height:1.7}
.dark .phelp{color:var(--body-light)}
.ask{font-family:var(--serif);font-size:1.15rem;color:rgba(38,37,77,.65)}

/* ---------- FAQ ---------- */
.faqs{border-top:1px solid var(--line);max-width:900px}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:flex-start;gap:24px;padding:22px 0;
  font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.35;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;font-family:var(--sans);font-size:19px;flex:none;
  color:rgba(38,37,77,.4);transition:transform .3s var(--ease);line-height:1.3}
.faq[open] summary i{transform:rotate(45deg)}
.faq p{padding:0 0 24px;color:var(--body);max-width:70ch;font-size:15.5px}

/* ---------- related ---------- */
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px)}
.rel{text-decoration:none;display:flex;flex-direction:column}
.rel .img{aspect-ratio:4/3;margin-bottom:15px}
.rel h3{font-size:1.1rem;margin-bottom:6px}
.rel span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(38,37,77,.45)}
.rel:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(max-width:860px){.related{grid-template-columns:1fr 1fr}}

/* ---------- treatments index page ---------- */
.tgroup{margin-top:clamp(44px,5vw,76px)}
.tgroup__head{display:flex;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.tgroup__head h2{font-size:clamp(1.4rem,2vw,1.8rem)}
.tgroup__head span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.4)}
.tlist{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,44px)}
.tcard{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.tcard h3{font-size:1.1rem}
.tcard p{font-size:13px;color:rgba(38,37,77,.6);margin-top:5px;grid-column:1/-1}
.tcard b{font-family:var(--serif);font-size:1.05rem;font-weight:400;white-space:nowrap}
.tcard:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(max-width:980px){.tlist{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.tlist{grid-template-columns:1fr}}

/* ---------- concerns hub ---------- */
.chub{border-top:1px solid var(--line)}
.citem{border-bottom:1px solid var(--line);padding:24px 0;
  display:grid;grid-template-columns:1fr 1.2fr auto;gap:clamp(16px,3vw,40px);align-items:baseline}
.citem h3{font-size:clamp(1.1rem,1.6vw,1.35rem)}
.citem p{font-size:14px;color:var(--body)}
.citem ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.citem ul a{font-size:12px;letter-spacing:.04em;text-decoration:none;border:1px solid var(--line);
  padding:8px 13px;transition:background-color .3s,color .3s,border-color .3s;white-space:nowrap}
.citem ul a:hover{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
@media(max-width:900px){
  .citem{grid-template-columns:1fr;gap:12px}
  .citem ul{justify-content:flex-start}
}

/* ---------- prices page ---------- */
.pgroup{border-bottom:1px solid var(--line)}
.pgroup summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:26px 0;
  font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.015em}
.pgroup summary::-webkit-details-marker{display:none}
.pgroup summary i{font-style:normal;font-family:var(--sans);font-size:21px;color:rgba(38,37,77,.4);
  transition:transform .3s var(--ease)}
.pgroup[open] summary i{transform:rotate(45deg)}
.pgroup__body{padding-bottom:26px}
.pline{display:grid;grid-template-columns:1.4fr 1fr auto;gap:16px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--line)}
.pline a.name{text-decoration:none;font-size:15.5px}
.pline a.name:hover{text-decoration:underline}
.pline .amt{font-family:var(--serif);font-size:1.15rem}
.pline .act{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;white-space:nowrap}
.pline .act:hover{border-bottom-color:var(--navy)}
@media(max-width:700px){
  .pline{grid-template-columns:1fr auto;gap:8px 16px}
  .pline .act{grid-column:1/-1;justify-self:start}
}

figure[hidden]{display:none}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(16px,2vw,26px)}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.55)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15.5px;color:var(--navy);background:var(--white);
  border:1px solid var(--line);padding:14px 15px;border-radius:0;
  transition:border-color .3s var(--ease)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none;
  box-shadow:0 0 0 1px var(--navy)}
.field .err{font-size:12.5px;color:#8A1F1F;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#8A1F1F}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;color:var(--body);line-height:1.6}
.consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--navy)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.form__msg{grid-column:1/-1;padding:18px 20px;border:1px solid var(--line);font-size:14.5px;display:none}
.form__msg.on{display:block}
.form__msg.ok{border-color:var(--navy)}
.form__msg.bad{border-color:#8A1F1F;color:#8A1F1F}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* ---------- contact detail list ---------- */
.cdetails{border-top:1px solid var(--line)}
.cdetails li{border-bottom:1px solid var(--line);padding:19px 0;display:grid;
  grid-template-columns:130px 1fr;gap:16px;align-items:baseline}
.cdetails b{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.45)}
.cdetails a,.cdetails span{font-size:15.5px;text-decoration:none}
.cdetails a:hover{text-decoration:underline}
@media(max-width:560px){.cdetails li{grid-template-columns:1fr;gap:5px}}

/* ---------- social icons ---------- */
.social{display:flex;gap:14px;margin-top:18px}
.social a{width:38px;height:38px;border:1px solid var(--line-light);display:flex;
  align-items:center;justify-content:center;transition:background-color .3s,border-color .3s}
.social a:hover{background:var(--ivory);border-color:var(--ivory)}
.social svg{width:16px;height:16px;fill:currentColor}
.social a:hover svg{fill:var(--navy)}
.social--dark a{border-color:var(--line)}
.social--dark a:hover{background:var(--navy)}
.social--dark a:hover svg{fill:var(--ivory)}

/* ---------- 404 ---------- */
.e404{min-height:64vh;display:flex;flex-direction:column;justify-content:center}
.e404 h1{margin-bottom:18px}

/* ---------- dev banner (staging only) ---------- */
.devbar{background:var(--ink);color:var(--ivory);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:9px 16px}
.devbar b{font-weight:600}

/* ---------- option comparison (male chest) ---------- */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.opt{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  padding:clamp(22px,2.4vw,30px);transition:border-color .4s var(--ease)}
.opt:hover{border-color:rgba(38,37,77,.45)}
.opt h3{font-size:1.2rem;margin-bottom:10px}
.opt b{font-family:var(--serif);font-size:clamp(1.7rem,2.4vw,2.1rem);font-weight:400;
  letter-spacing:-.02em;line-height:1;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.opt p{font-size:14px;line-height:1.6;color:var(--body);margin-bottom:20px}
.opt__more{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.opt__more i{width:16px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.opt:hover .opt__more i{width:28px}
@media(max-width:820px){.opts{grid-template-columns:1fr}}

/* ---------- packages (fat freezing) ---------- */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.pack{display:flex;flex-direction:column;background:var(--ivory);
  padding:clamp(24px,2.6vw,32px);border:1px solid var(--line)}
.pack__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pack__head h3{font-size:clamp(1.15rem,1.5vw,1.3rem)}
.pack__head b{font-family:var(--serif);font-size:clamp(1.6rem,2.2vw,2rem);font-weight:400;letter-spacing:-.02em}
.pack__apps{display:block;margin-top:8px;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(38,37,77,.45)}
.pack p{margin-top:16px;font-size:14px;line-height:1.6;color:var(--body)}
.pack__list{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pack__list li{font-size:13px;color:rgba(38,37,77,.65);padding:5px 0;padding-left:16px;position:relative}
.pack__list li::before{content:"—";position:absolute;left:0;opacity:.45}
.pack__cta{margin-top:auto;padding-top:22px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none}
.pack__cta:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.packs{grid-template-columns:1fr}}

/* ---------- prices: per-treatment sub-heading ---------- */
.psub{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:26px;padding-bottom:10px;border-bottom:1px solid var(--navy)}
.psub:first-child{margin-top:6px}
.psub a{font-family:var(--serif);font-size:1.2rem;letter-spacing:-.01em;text-decoration:none}
.psub a:hover{text-decoration:underline;text-underline-offset:4px}
.psub span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(38,37,77,.55);white-space:nowrap}
.pline .name{font-size:15px;color:rgba(38,37,77,.8)}
.pnote{margin:14px 0 4px;font-size:12.5px;line-height:1.65;color:rgba(38,37,77,.5);max-width:66ch}

/* ---------- anchor offset for the sticky header ---------- */
:target,[id]{scroll-margin-top:96px}
@media(max-width:1024px){:target,[id]{scroll-margin-top:84px}}

/* =========================================================
   HOMEPAGE FEATURED TREATMENTS — equal heading authority
   All four primary titles (360 Fat Freezing / Wonder Butt Lift /
   Post Weight Loss / Fat Dissolving) share one type treatment.
   Tiles 03 and 04 are raised to match 01 and 02 — nothing is reduced.
   Layout, composition and image ratios are unchanged.
   ========================================================= */
.feat h3,
.feat__item--1 h3,
.feat__item--2 h3{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.1vw,1.85rem);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.01em;
  text-wrap:balance;          /* controlled two-line break where it wraps */
}

/* ---------- price row sub-label (applicator counts) ---------- */
.prow span em,.pline .name em{
  display:block;margin-top:4px;font-style:normal;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(38,37,77,.45);
}
.dark .prow span em{color:rgba(247,245,240,.5)}

/* =========================================================
   FINANCE
   ========================================================= */
/* payment option selector */
.payopts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.payopt{display:flex;flex-direction:column;align-items:flex-start;gap:10px;cursor:pointer;
  text-align:left;padding:clamp(24px,2.6vw,32px);border:1px solid var(--line);
  transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.payopt:hover{border-color:rgba(38,37,77,.45)}
.payopt[aria-expanded="true"]{border-color:var(--navy);background:var(--ivory)}
.payopt__n{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:rgba(38,37,77,.4)}
.payopt__name{font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.2;letter-spacing:-.01em}
.payopt__brand{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.5)}
.paypanels{margin-top:clamp(20px,2.4vw,30px)}
.paypanel[hidden]{display:none}
.paypanel__in{border-top:1px solid var(--navy);padding-top:clamp(24px,3vw,36px);
  animation:fadeUp .45s var(--ease) both;max-width:820px}
.paypanel h3{font-size:clamp(1.15rem,1.6vw,1.4rem);margin-bottom:12px}
.paypanel p{color:var(--body);font-size:15.5px;max-width:62ch}
.paypanel .btn{margin-top:22px}
.payfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:26px;border-top:1px solid var(--line)}
.payfact{padding:18px 18px 0 20px;border-left:1px solid var(--line)}
.payfact:first-child{border-left:0;padding-left:0}
.payfact span{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.45)}
.payfact b{display:block;margin-top:7px;font-family:var(--serif);font-size:1.25rem;font-weight:400}
.reqs{margin-top:10px;padding-bottom:22px}
.reqs li{font-size:15px;color:var(--body);padding:7px 0 7px 18px;position:relative}
.reqs li::before{content:"—";position:absolute;left:0;opacity:.45}
@media(max-width:820px){
  .payopts{grid-template-columns:1fr}
  .payfacts{grid-template-columns:1fr 1fr}
  .payfact{padding:16px 14px 0 16px}
  .payfact:nth-child(3){border-left:0;padding-left:0}
  .payfact:nth-child(3),.payfact:nth-child(4){border-top:1px solid var(--line);margin-top:14px;padding-top:16px}
}

/* required disclosures — must stay prominent, never hidden */
.disclosure{margin-top:20px;padding:16px 18px;border:1px solid var(--line);
  background:var(--white);font-size:13px;line-height:1.6;color:var(--body);max-width:62ch}
.disclosure--missing{border-color:#8A1F1F;color:#8A1F1F;background:rgba(138,31,31,.04)}
.disclosure--missing b{display:block;margin-bottom:6px;font-weight:600;letter-spacing:.06em}
.disclosure code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* payment planner */
.calc{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,64px);align-items:start}
.calc__label{display:block;margin-bottom:10px;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(38,37,77,.5)}
.calc__amount{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--navy);padding-bottom:10px}
.calc__amount span{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1}
.calc__amount input{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;
  border:0;background:none;width:100%;padding:0;color:var(--navy);-moz-appearance:textfield}
.calc__amount input:focus{outline:none}
.calc__amount input::-webkit-outer-spin-button,.calc__amount input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.calc__range{width:100%;margin-top:26px;accent-color:var(--navy);height:2px}
.calc__scale{display:flex;justify-content:space-between;margin-top:8px;
  font-size:11px;color:rgba(38,37,77,.45)}
.calc__hint{margin:26px 0 20px;font-size:13px;color:rgba(38,37,77,.55)}
.calc select{width:100%;font:inherit;font-size:15px;padding:14px 15px;border:1px solid var(--line);
  background:var(--white);color:var(--navy);border-radius:0}
.calc__out{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px)}
.calcbox{border:1px solid var(--line);padding:clamp(20px,2.2vw,26px);background:var(--white)}
.calcbox--wide{grid-column:1/-1}
.calcbox__k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(38,37,77,.5)}
.calcbox b{display:block;margin-top:12px;font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.2rem);
  font-weight:400;letter-spacing:-.02em;line-height:1}
.calcbox__s{display:block;margin-top:8px;font-size:13px;color:rgba(38,37,77,.55)}
.calcbox__note{margin-top:14px;font-size:12px;line-height:1.6;color:rgba(38,37,77,.5)}
.calcsplit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.calcsplit span{display:block;font-size:11px;color:rgba(38,37,77,.5)}
.calcsplit b{margin-top:6px;font-size:clamp(1.3rem,2vw,1.7rem)}
.calcbox--off{opacity:.45}
@media(max-width:900px){
  .calc{grid-template-columns:1fr}
  .calc__out{grid-template-columns:1fr}
  .calcsplit{grid-template-columns:1fr;gap:12px}
  .calcsplit div{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid var(--line);padding-bottom:8px}
  .calcsplit b{margin-top:0}
}

/* homepage finance strip */
.finstrip{background:var(--navy);color:var(--ivory)}
.finstrip__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(26px,3vw,38px)}
.finstrip .eyebrow{color:rgba(247,245,240,.55);margin-bottom:10px}
.finstrip__brands{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.01em}
.finstrip__brands i{font-style:normal;opacity:.45;margin:0 6px}
.finstrip__sub{margin-top:6px;font-size:14px;color:var(--body-light)}
.finstrip__cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.finstrip__cta i{width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.finstrip__cta:hover i{width:38px}
@media(max-width:760px){
  .finstrip__in{flex-direction:column;align-items:flex-start;gap:16px}
  .finstrip__sub{display:none}
}

/* prices page callout */
.fincallout{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(30px,3.6vw,48px);padding:clamp(22px,2.6vw,30px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fincallout p{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.35rem);letter-spacing:-.01em}
.fincallout__cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.fincallout__cta i{width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.fincallout__cta:hover i{width:38px}

/* =========================================================
   HOMEPAGE HERO — photography + live HTML
   Bright clinical photograph, then the existing warm ivory
   with Portland navy typography. No overlay, scrim or gradient.
   ========================================================= */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.hero2{position:relative;background:var(--ivory);color:var(--navy)}
.hero2__media{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--stone)}
.hero2__img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}

.hero2__content{position:relative;z-index:1;display:block;min-height:0}
.hero2__inner{width:100%;max-width:var(--maxw);
  padding-top:clamp(34px,4.4vw,58px);padding-bottom:clamp(38px,5vw,64px)}
.hero2__eyebrow{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(38,37,77,.55);margin-bottom:clamp(16px,1.8vw,24px)}
.hero2__h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(2.1rem,3.5vw,3.15rem);max-width:12ch;color:var(--navy)}
.hero2__h1 span{display:block;color:var(--navy)}
.hero2__lede{margin-top:clamp(16px,1.8vw,22px);font-size:clamp(15.5px,1.2vw,17.5px);
  line-height:1.6;color:var(--body)}
.hero2__price{display:flex;align-items:baseline;gap:12px;margin-top:clamp(20px,2.4vw,30px);
  padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line);max-width:270px}
.hero2__price span{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(38,37,77,.5)}
.hero2__price b{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.1rem,3.2vw,2.9rem);color:var(--navy)}
.hero2__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,34px)}
.hero2__cred{margin-top:clamp(22px,2.4vw,30px);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(38,37,77,.45)}

@media(max-width:1024px){.hero2__media{aspect-ratio:16/9;}
  .hero2__img{object-position:52% 44%}}
@media(max-width:760px){
  .hero2__media{aspect-ratio:5/4}
  .hero2__img{object-position:55% 45%}
  /* below ~430px the headline would wrap to "360 Fat / Freezing"; this keeps
     it on one line without shrinking the type elsewhere */
  .hero2__h1{max-width:none;font-size:clamp(1.85rem,8.2vw,2.6rem)}
  .hero2__lede br{content:" ";display:inline}
  .hero2__price{max-width:none}
  .hero2__ctas .btn{flex:1 1 100%;justify-content:center}
  .hero2__cred{display:none}
}

/* =========================================================
   REAL PHOTOGRAPHS IN PLACEHOLDER FRAMES
   Same frame, same aspect, no layout change — just no
   placeholder chrome and no tint over the photograph.
   ========================================================= */
.img--photo{background:var(--stone)}
.img--photo::before,.img--photo::after{display:none}
.img__el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* consultation photograph: desktop keeps the wide editorial crop.
   Mobile tightens onto the client and the iPad rather than white wall. */
.img--consult .img__el{object-position:50% 46%}
@media(max-width:900px){
  .feat__item--1 .img--consult{aspect-ratio:5/4}
  .img--consult .img__el{object-position:55% 50%}
}

/* Wonder Butt Lift photograph: the frame crops ~18% vertically, so the
   position is biased downward to take that out of the white wall above
   the client rather than off the treatment equipment. */
.img--wonder .img__el{object-position:50% 90%}
@media(max-width:900px){
  /* mobile frame tightens to a square — removes more empty wall and bed while
     keeping both Wonder modules, the belt and the client fully in shot */
  .feat__item--2 .img--wonder{aspect-ratio:1/1}
  .img--wonder .img__el{object-position:50% 62%}
}

/* HIFU tile photograph: the 16:9 tile frame crops a portrait source heavily,
   so the position is pushed down to hold the handpiece, the gel and the
   stomach treatment area rather than the wall and the client's face. */
.img--hifu .img__el{object-position:50% 73%}
@media(max-width:900px){
  .img--hifu .img__el{object-position:50% 73%}
}

/* Fat dissolving photograph: portrait source in a 16:9 tile, positioned to
   hold the syringe, the needle and the treatment area rather than the bed. */
.img--dissolve .img__el{object-position:50% 35%}

/* Signature treatment photograph: landscape source in the portrait split
   frame, so the crop is pulled left to keep the applicator, the green
   indicator and both gloved hands in shot. */
.img--freezing .img__el{object-position:35% 50%}
@media(max-width:900px){
  .img--freezing .img__el{object-position:30% 50%}
}

/* Wonder Butt Lift section photograph: landscape source in the portrait
   split frame — the crop is pushed right so the Wonder module on the body
   stays whole rather than the empty wall on the left. */
.img--wbl .img__el{object-position:95% 50%}
@media(max-width:900px){
  .img--wbl .img__el{object-position:85% 50%}
}

/* =========================================================
   CONCERN FINDER — images removed
   The panel was a two-column grid (content + image). With the
   image gone it becomes a single column so nothing is left
   holding an empty half or a column gap.
   ========================================================= */
.panel{grid-template-columns:1fr;gap:0}
.pane.on{grid-template-columns:1fr;gap:0}
@supports (grid-template-columns:subgrid){
  .pane.on{grid-template-columns:1fr}
}
.pane__media{display:none}

/* Homepage Post Weight Loss: with the image band gone, the pathways no longer
   need their own top margin — the intro's margin-bottom alone now sets the
   transition. Scoped by id so the dedicated /post-weight-loss page is untouched. */
#post-weight-loss .paths{margin-top:0}

/* =========================================================
   GOOGLE REVIEWS CAROUSEL
   Text is the focus. No cards, shadows, gradients, brand
   colours or oversized quote marks — hairlines only.
   ========================================================= */
.rev__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(34px,4vw,56px)}
.rev__score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rev__stars{letter-spacing:.22em;font-size:13px;color:var(--navy)}
.rev__score b{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.01em}
.rev__count{font-size:12px;letter-spacing:.04em;color:rgba(38,37,77,.55)}

.rev{position:relative;border-top:1px solid var(--line)}
.rev__viewport{overflow:hidden}
.rev__track{display:flex;transition:transform .7s var(--ease);will-change:transform}
.rev__track li{flex:0 0 100%;padding:clamp(30px,3.4vw,44px) clamp(20px,2.4vw,34px)
  clamp(30px,3.4vw,44px) 0;border-right:1px solid var(--line)}
.rev__q{font-family:var(--serif);font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.6;
  letter-spacing:-.01em;color:var(--navy)}
.rev__stars--sm{display:block;margin-bottom:16px;letter-spacing:.22em;font-size:11px;color:var(--navy)}
.rev__meta{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.rev__name{display:block;font-size:14px;font-weight:600;letter-spacing:.01em}
.rev__src{display:block;margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(38,37,77,.45)}

.rev__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.rev__nav{display:flex;gap:10px}
.rev__btn{width:46px;height:46px;border:1px solid var(--line);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s}
.rev__btn svg{width:20px;height:10px}
.rev__btn:hover{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.rev__btn[disabled]{opacity:.3;pointer-events:none}
.rev__all{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.rev__all i{width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.rev__all:hover i{width:36px}
.rev__state{padding:clamp(26px,3vw,38px) 0;font-size:13px;color:rgba(38,37,77,.5)}
.rev__state[hidden]{display:none}
.rev.is-empty .rev__foot,.rev.is-empty .rev__viewport{display:none}

@media(min-width:760px){.rev__track li{flex-basis:50%}}
@media(min-width:1080px){.rev__track li{flex-basis:33.3333%}}
@media(prefers-reduced-motion:reduce){.rev__track{transition:none}}

/* Before & after: genuine client photography in the existing result frame.
   Label chips only — no filters, overlays or tonal adjustment. */
.img--result{background:var(--white)}
.ba{margin:0;display:flex;flex-direction:column}
.ba__lab{order:-1;text-align:center;padding:0 0 12px;
  font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--navy)}
/* thin divider between the two photographs, nothing over them */
.result__pair{align-items:start}
.result__pair .ba + .ba{border-left:1px solid var(--line);padding-left:clamp(10px,1.4vw,18px)}
.result__pair .ba + .ba .img{border-left:0}
.result__pair .ba:first-child{padding-right:clamp(10px,1.4vw,18px)}
/* nothing may overlay a real photograph */
.img--photo > span{display:none}

/* Before & after frame aspect is per-result, defaulting to the approved
   portrait. Landscape sources set --ba-aspect so they are not cropped down
   to a portrait window. */
.result__pair .img{aspect-ratio:var(--ba-aspect, 1/1.15)}

/* Result metadata: one deliberate two-column row.
   Equal usable width, matched type, both columns starting on the same line. */
.result__meta{
  display:grid;grid-template-columns:1fr 1fr;align-items:start;
  gap:6px clamp(14px,2vw,26px);
  padding:14px 16px;border-top:1px solid var(--line);
}
.result__meta span{
  font-size:10.5px;font-weight:600;line-height:1.55;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(38,37,77,.45);
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
.result__meta span:last-child{text-align:right}

/* Long CTA labels must wrap cleanly rather than breaking mid-word on narrow
   phones (e.g. "Explore post-weight-loss treatments" at 375px). */
.btn{text-align:center;overflow-wrap:break-word;word-break:normal;hyphens:none}
@media(max-width:430px){
  .btn{padding-left:20px;padding-right:20px;line-height:1.35}
}

/* =========================================================
   HOW IT WORKS — mechanism stages + treatment fact strip
   Typography and hairlines only. No cards, icons or fills.
   ========================================================= */
.stages{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stage{padding:26px 22px 4px 26px;border-left:1px solid var(--line)}
.stage:first-child{border-left:0;padding-left:0}
.stage__n{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:rgba(38,37,77,.4)}
.stage__k{display:block;margin-top:10px;font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy)}
.stage h3{margin:12px 0 8px;font-size:clamp(1.05rem,1.4vw,1.2rem)}
.stage p{font-size:13.5px;line-height:1.65;color:var(--body)}

.tfacts{display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--line)}
.tfact{padding:22px 20px 0 24px;border-left:1px solid var(--line)}
.tfact:first-child{border-left:0;padding-left:0}
.tfact b{display:block;font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.1;color:var(--navy)}
.tfact span{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(38,37,77,.45);line-height:1.5}

@media(max-width:900px){
  .stages{grid-template-columns:1fr 1fr}
  .stage{padding:22px 16px 4px 20px}
  .stage:nth-child(3){border-left:0;padding-left:0}
  .stage:nth-child(3),.stage:nth-child(4){border-top:1px solid var(--line);margin-top:18px;padding-top:22px}
  .tfacts{grid-template-columns:1fr 1fr}
  .tfact{padding:20px 14px 0 18px}
  .tfact:nth-child(3){border-left:0;padding-left:0}
  .tfact:nth-child(3),.tfact:nth-child(4){border-top:1px solid var(--line);margin-top:18px;padding-top:20px}
}
@media(max-width:560px){
  .stages{grid-template-columns:1fr;border-top:0}
  .stage,.stage:nth-child(3){border-left:0;padding:22px 0 6px;
    border-top:1px solid var(--line);margin-top:0}
  .stage:nth-child(4){margin-top:0}
}

/* 360 Fat Freezing page hero: the portrait frame crops width from a 5:4
   source, so the position is biased right and slightly up to hold the
   applicator, cup, membrane, gloved hand and navy uniform in shot. */
.img--ffhero .img__el{object-position:62% 45%}
@media(max-width:900px){
  /* mobile frame is wider, so it needs less bias — centring keeps the
     applicator central and the whole treatment area readable */
  .img--ffhero .img__el{object-position:50% 45%}
}

/* =========================================================
   MENU HIERARCHY — Aqualyx / Lemon Bottle sit under
   Fat Dissolving Injections. Indentation and tone only:
   no bullets, arrows, tree lines or accordions.
   ========================================================= */
.mega li.is-child a{
  padding-left:16px;
  font-size:13px;
  color:rgba(38,37,77,.68);
}
.mega li.is-child a:hover{color:var(--navy)}
/* the item after a child returns to the parent alignment */
.mega li.is-child + li:not(.is-child) a{margin-top:6px}

.mmenu details ul li.is-child a{
  padding-left:18px;
  font-size:14.5px;                 /* tap target unchanged */
  color:rgba(38,37,77,.68);
}
.mmenu details ul li.is-child + li:not(.is-child) a{margin-top:4px}

/* Fat Dissolving Injections page hero: the portrait frame crops width from a
   5:4 source, so the position is biased right and up to hold the marked
   treatment grids, the syringe at the skin and the gloved hands in shot. */
.img--fdhero .img__el{object-position:55% 35%}
@media(max-width:900px){
  /* wider mobile frame needs less bias; keeps the injection point central */
  .img--fdhero .img__el{object-position:55% 40%}
}

/* =========================================================
   FAT DISSOLVING — Lemon Bottle vs Aqualyx comparison
   Two columns, hairline separated. No tables, cards or badges.
   ========================================================= */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.cmp__col{padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,34px) clamp(26px,3vw,36px) 0}
.cmp__col + .cmp__col{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,44px)}
.cmp__col h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.cmp__sub{margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(38,37,77,.45)}
.cmp__row{padding:20px 0;border-top:1px solid var(--line);margin-top:18px}
.cmp__row:first-of-type{margin-top:26px}
.cmp__lab{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(38,37,77,.45)}
.cmp__big{display:block;margin-top:10px;font-family:var(--serif);font-weight:400;
  letter-spacing:-.02em;line-height:1.1;color:var(--navy);
  font-size:clamp(1.5rem,2.4vw,2rem)}
.cmp__row p{margin-top:9px;font-size:14px;line-height:1.65;color:var(--body)}
.cmp__cta{display:inline-flex;align-items:center;gap:11px;margin-top:26px;text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.cmp__cta i{width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.cmp__cta:hover i{width:36px}
@media(max-width:820px){
  .cmp{grid-template-columns:1fr}
  .cmp__col{padding:26px 0 30px}
  .cmp__col + .cmp__col{border-left:0;border-top:1px solid var(--navy);padding-left:0;padding-top:30px}
}

/* treatment timelines */
.tls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px)}
.tls h3{font-size:clamp(1.2rem,1.7vw,1.45rem);margin-bottom:20px}
.tl{border-top:1px solid var(--line)}
.tl__step{padding:16px 0 16px 22px;border-bottom:1px solid var(--line);position:relative}
.tl__step::before{content:"";position:absolute;left:0;top:24px;width:7px;height:1px;background:var(--navy)}
.tl__step b{display:block;font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--navy)}
.tl__step span{display:block;margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--body)}
.tl__note{margin-top:16px;font-size:12.5px;line-height:1.6;color:rgba(38,37,77,.5)}
@media(max-width:820px){.tls{grid-template-columns:1fr;gap:38px}}

/* grouped treatable areas */
.agroups{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,4vw,60px);align-items:start}
.agroup h3{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(38,37,77,.45);font-family:var(--sans);
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:18px}
@media(max-width:760px){.agroups{grid-template-columns:1fr;gap:32px}}

/* Aqualyx page hero: the portrait frame crops width from a 7:5 source, so the
   position is biased left and up to hold the syringe, needle, both gloved
   hands and the treatment site rather than the empty cabinetry on the right. */
.img--aqhero .img__el{object-position:38% 42%}
@media(max-width:900px){
  .img--aqhero .img__el{object-position:42% 42%}
}

/* Aqualyx page hero: the portrait frame crops width from a 1.4:1 source,
   so the position holds the syringe, needle and both gloved hands with the
   client's leg still in shot, trimming the empty white cabinetry instead. */
.img--aqhero .img__el{object-position:45% 45%}
@media(max-width:900px){
  .img--aqhero .img__el{object-position:42% 45%}
}

/* =========================================================
   RESULTS TIMELINE — horizontal on desktop, vertical on mobile.
   Deliberately distinct from the numbered treatment steps.
   ========================================================= */
.rtl{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.rtl__step{padding:26px 22px 4px 0;position:relative}
.rtl__step + .rtl__step{padding-left:26px;border-left:1px solid var(--line)}
.rtl__step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  border-radius:50%;background:var(--navy)}
.rtl__step + .rtl__step::before{left:26px}
.rtl__step b{display:block;font-family:var(--serif);font-weight:400;letter-spacing:-.02em;
  line-height:1.1;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--navy)}
.rtl__k{display:block;margin-top:9px;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(38,37,77,.45)}
.rtl__step p{margin-top:11px;font-size:13.5px;line-height:1.65;color:var(--body)}
@media(max-width:900px){
  .rtl{grid-template-columns:1fr;border-top:0}
  .rtl__step,.rtl__step + .rtl__step{padding:22px 0 22px 24px;border-left:1px solid var(--line)}
  .rtl__step::before,.rtl__step + .rtl__step::before{left:-4px;top:28px}
}

/* prose sections carry an eyebrow above the heading */
.prose .eyebrow{display:block;margin-bottom:14px}

/* At a glance: long values ("Individual to the area and goal") wrapped to
   three lines beside one-line neighbours in the 2x2 mobile grid. Scaling the
   figure with available width keeps the four cells visually even. */
@media(max-width:900px){
  .tfact b{font-size:clamp(1.05rem,4.2vw,1.35rem);text-wrap:balance}
}

/* Lemon Bottle page hero: 3:2 source in the portrait frame. Biased left and
   slightly down so the black-gloved hand and the syringe stay the focus, with
   the client still in shot for clinical context. */
.img--lbhero .img__el{object-position:30% 55%}
@media(max-width:900px){
  .img--lbhero .img__el{object-position:28% 55%}
}

/* Male Chest Reduction hero: 3:2 source in the portrait frame. Biased right
   and slightly up so the chest is the focal point, the head stays out of
   frame and the trim comes off the empty studio wall on the left. */
.img--mchero .img__el{object-position:85% 40%}
@media(max-width:900px){
  .img--mchero .img__el{object-position:78% 40%}
}

/* Wonder Butt Lift page hero: landscape source in the portrait page-hero
   frame, pushed right so the Wonder module on the body stays whole rather
   than the empty wall on the left. */
.img--wblhero .img__el{object-position:95% 50%}
@media(max-width:900px){
  .img--wblhero .img__el{object-position:85% 50%}
}

/* Wonder Butt Lift page hero: landscape source in the portrait page-hero
   frame, pushed right so the Wonder module on the body stays whole and the
   trim comes off the empty wall on the left. */
.img--wblhero .img__el{object-position:95% 50%}
@media(max-width:900px){
  .img--wblhero .img__el{object-position:85% 50%}
}

/* Kim K Curves page hero: landscape source in the portrait page-hero frame,
   positioned so the waist, hips and glute contour stay the focus. */
.img--kkhero .img__el{object-position:72% 55%}
@media(max-width:900px){
  .img--kkhero .img__el{object-position:66% 55%}
}

/* A results grid holding a single before/after pair: one column, capped so the
   card does not stretch across the full two-column width or leave a gap. */
.results--one{grid-template-columns:1fr;max-width:min(100%, 620px)}

/* Kim K Curves page hero: landscape source in the portrait page-hero frame,
   positioned so the waist, hip and glute contour stay the focus. */
.img--kkhero .img__el{object-position:62% 55%}
@media(max-width:900px){
  .img--kkhero .img__el{object-position:60% 52%}
}

/* Wonder Body page hero: landscape source in the portrait page-hero frame,
   positioned so the abdomen, waist and hips remain the focus. */
.img--wbhero .img__el{object-position:62% 50%}
@media(max-width:900px){
  .img--wbhero .img__el{object-position:58% 50%}
}

/* Wonder Smooth page hero: landscape source in the portrait page-hero frame,
   centred so the thighs, glutes and skin surface stay the focus. */
.img--wshero .img__el{object-position:50% 50%}

/* HIFU page hero: near-square source in the portrait page-hero frame, biased
   up so the handpiece and the treated side of the face stay in shot. */
.img--hfhero .img__el{object-position:50% 35%}
@media(max-width:900px){
  .img--hfhero .img__el{object-position:50% 30%}
}

/* DermaPro RF page hero: wide source in the portrait page-hero frame, pushed
   right so the illuminated microneedling tip stays the focus. */
.img--dphero .img__el{object-position:72% 50%}
@media(max-width:900px){
  .img--dphero .img__el{object-position:66% 50%}
}

/* Profhilo page hero: wide product shot in the portrait page-hero frame,
   centred so the carton branding and the syringe both stay in shot. */
.img--pfhero .img__el{object-position:50% 50%}
@media(max-width:900px){
  .img--pfhero .img__el{object-position:55% 50%}
}

/* Neofound Whitening page hero: wide source in the portrait page-hero frame,
   centred so the client's face and the syringe remain the focus. */
.img--nwhero .img__el{object-position:50% 45%}
@media(max-width:900px){
  .img--nwhero .img__el{object-position:52% 45%}
}

/* Lumi-PN Eyes page hero: wide product shot in the portrait page-hero frame,
   centred so the carton branding and syringe both stay readable. */
.img--lehero .img__el{object-position:50% 50%}

/* LUMI-PRO Lips page hero: wide product shot in the portrait page-hero frame,
   centred so the carton branding and syringe stay readable. */
.img--llhero .img__el{object-position:50% 50%}

/* Dermapen page hero: wide product shot in the portrait page-hero frame,
   biased left so the pen and its blue needle cartridge stay the focus. */
.img--dmhero .img__el{object-position:30% 55%}
@media(max-width:900px){
  .img--dmhero .img__el{object-position:35% 55%}
}

/* Dermalux LED page hero: wide treatment shot in the portrait page-hero frame,
   framed so the client under the illuminated Flex canopy stays the focus. */
.img--dlhero .img__el{object-position:50% 50%}
@media(max-width:900px){
  .img--dlhero .img__el{object-position:56% 50%}
}

/* Acne Scar Treatment page hero: square source in the portrait page-hero frame,
   framed so the scarred cheek and jawline stay clearly visible at both sizes. */
.img--ashero .img__el{object-position:50% 50%}
@media(max-width:900px){
  .img--ashero .img__el{object-position:50% 40%}
}

/* Stretch Mark Treatment page hero: landscape abdomen shot in the portrait
   page-hero frame, held left of centre so the marked area stays in view. */
.img--smhero .img__el{object-position:45% 50%}
@media(max-width:900px){
  .img--smhero .img__el{object-position:45% 50%}
}

/* Hydrofacial page hero: wide treatment shot in the portrait page-hero frame,
   held right of centre so the client and the handpiece stay the focus. */
.img--hyfhero .img__el{object-position:82% 50%}
@media(max-width:900px){
  .img--hyfhero .img__el{object-position:85% 50%}
}

/* Million Dollar Facial page hero: wide treatment-room shot in the portrait
   page-hero frame, held right so the client stays the focus on desktop while
   mobile keeps the product trolley in view. */
.img--mdfhero .img__el{object-position:90% 50%}
@media(max-width:900px){
  .img--mdfhero .img__el{object-position:75% 50%}
}

/* Chemical Peels page hero: very wide treatment shot in the portrait page-hero
   frame, held left so the client's face and the peel brush stay the focus. */
.img--cphero .img__el{object-position:25% 50%}
@media(max-width:900px){
  .img--cphero .img__el{object-position:25% 50%}
}

/* Prices: a treatment that is still offered but has no standalone page shows
   its name as plain text. Match the linked treatment names exactly, so the
   row reads identically apart from not being clickable. */
.psub .psub__name{font-family:var(--serif);font-size:1.2rem;font-weight:400;
  letter-spacing:-.01em;text-transform:none;color:var(--navy);white-space:normal}

/* Skin Analysis page hero: wide clinic shot in the portrait page-hero frame,
   held right so the client, the analysis system and its imaging screen all
   stay in view — the screen is what makes the technology legible at a glance. */
.img--sahero .img__el{object-position:90% 50%}
@media(max-width:900px){
  .img--sahero .img__el{object-position:75% 50%}
}

/* Related at Portland cards showing a before/after result: both photographs
   sit side by side inside the existing card frame, so neither side is cropped
   away. The frame keeps its 4/3 ratio, so card heights stay consistent and the
   grid is unchanged on desktop, tablet and mobile. Before/After captions are
   deliberately not repeated here — they belong to the ba_pair component on the
   treatment page itself. */
.img--ba{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;
  gap:2px;background:var(--line)}
.img--ba picture{position:relative;display:block;overflow:hidden;background:var(--stone)}

/* --- Before & after: pixel-exact alignment, site-wide ---------------------
   The two sides used to take their spacing from their own boxes: the left
   figure carried padding-right, the right carried padding-left PLUS a 1px
   divider border. With box-sizing:border-box and equal 1fr tracks that made
   the After image exactly 1px narrower than the Before image — and because
   .result__pair .img is sized by aspect-ratio, 1px narrower is also ~1px
   shorter. The bottom edges could therefore never line up, at any width.

   Spacing and the divider now belong to the grid rather than to the figures,
   so both sides resolve to identical widths and identical heights. The gap
   (2 x inset + 1px) and the divider position are unchanged, so this is a
   measurement fix, not a redesign. Applies to every Before & After pair on
   the site through the shared component. */
.result__pair{
  position:relative;
  column-gap:calc(2 * clamp(10px,1.4vw,18px) + 1px);
  align-items:stretch;
}
.result__pair .ba:first-child{padding-right:0}
.result__pair .ba + .ba{padding-left:0;border-left:0}
.result__pair::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  transform:translateX(-50%);background:var(--line);pointer-events:none;
}
/* Both figures fill the row, so the pair finishes level even if a label wraps. */
.result__pair .ba{height:100%}
.result__pair .ba .img{width:100%}

/* Post Weight Loss page hero: landscape abdominal shot in the portrait
   page-hero frame, held left of centre so the pinched loose skin and the
   hands stay in view at every width. */
.img--pwlhero .img__el{object-position:36% 50%}
@media(max-width:900px){
  .img--pwlhero .img__el{object-position:20% 50%}
}

/* Results page hero: landscape clinical shot in the portrait page-hero frame,
   held left of centre so the abdomen and the gloved hands stay the focal point
   rather than the practitioner's torso. The source is cropped only on the
   horizontal axis at both breakpoints, so no face can enter the frame. */
.img--reshero .img__el{object-position:20% 50%}
@media(max-width:900px){
  .img--reshero .img__el{object-position:20% 50%}
}

/* About page hero: tall exterior of 35 Park Place in the page-hero frame. The
   source is portrait (0.665), so both breakpoints crop on the vertical axis —
   held low so the facade, bay window and the 35 Park Place signage stay in
   view rather than filling the frame with sky and tree canopy. Mobile is the
   shallower frame and needs to sit lower still. */
.img--abhero .img__el{object-position:50% 60%}
@media(max-width:900px){
  .img--abhero .img__el{object-position:50% 68%}
}

/* --- Kim K Curves zone diagram -------------------------------------------
   Inline SVG replacing the old placeholder image. The numbered controls live
   in the margins either side of the silhouette; each bilateral zone keeps both
   of its shapes plus its tie line inside one .pin group, which is the class the
   zone-list script already toggles, so one number always drives both sides.
   The frame ratio matches the viewBox at every breakpoint so the figure fills
   the column on mobile instead of shrinking to fit a landscape box. */
.zones__fig{aspect-ratio:52/47}
@media(max-width:860px){.zones__fig{aspect-ratio:52/47}}
.zones__fig .zd{position:absolute;inset:0;width:100%;height:100%}

/* The base stylesheet still carries .zones__fig .pin rules written for the old
   absolutely-positioned HTML pins, including transform:scale(1.12) on the
   active state. Those selectors also match the SVG <g class="pin"> groups, and
   a transform on a group moves the circle, its leader line and its zone shapes
   together. Neutralised here so selection changes appearance only — the
   diagram never shifts, scales or reflows. */
.zones__fig .zd .pin,
.zones__fig .zd .pin.on{position:static;width:auto;height:auto;border:0;
  border-radius:0;background:none;transform:none;transition:none}

.zd__body{fill:var(--stone);stroke:rgba(38,37,77,.34);stroke-width:1.4}
.zd__contours path{fill:none;stroke:rgba(38,37,77,.26);stroke-width:1.3;stroke-linecap:round}
.zd__hatch{stroke:rgba(38,37,77,.32);stroke-width:1}

/* Resting state: every zone readable but quiet. Hatch as well as tint, so the
   highlight never depends on colour alone. */
.zd__zone{fill:url(#zdHatch);stroke:rgba(38,37,77,.34);stroke-width:1.2;
  opacity:.34;transition:opacity .35s var(--ease)}
.zd__tie{fill:none;stroke:rgba(38,37,77,.34);stroke-width:1;stroke-dasharray:3 4;
  opacity:.5;transition:opacity .35s var(--ease)}
.zd__lead{fill:none;stroke:rgba(38,37,77,.34);stroke-width:1.1;
  opacity:.55;transition:opacity .35s var(--ease)}
.zd__ring{fill:var(--ivory);stroke:var(--navy);stroke-width:1.4;transition:fill .35s var(--ease)}
.zd__num{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.05em;
  fill:var(--navy);transition:fill .35s var(--ease)}

/* Selected: both halves of a bilateral zone lift together with their tie. */
.zd .pin.on .zd__zone{opacity:1}
.zd .pin.on .zd__tie{opacity:1}
.zd .pin.on .zd__lead{opacity:1}
.zd .pin.on .zd__ring{fill:var(--navy)}
.zd .pin.on .zd__num{fill:var(--ivory)}

.zd .pin{cursor:pointer}
.zd .pin:focus{outline:none}
.zd .pin:focus-visible .zd__ring{stroke:var(--ink);stroke-dasharray:3 3}

@media(prefers-reduced-motion:reduce){
  .zd__zone,.zd__tie,.zd__lead,.zd__ring,.zd__num{transition:none}
}

/* --- Google reviews: live data additions ---------------------------------
   Extends the existing .rev component. Typography, spacing, colours and the
   carousel itself are unchanged; these rules only style the pieces that live
   Google data adds — avatar, attribution line, read-more and the fallback. */

/* Screen-reader-only rating text, so a star row is never announced as five
   meaningless glyphs. */
.rev__srt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.rev__card{display:flex;flex-direction:column}
.rev__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rev__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px;
  background:var(--stone)}
.rev__avatar--none{display:grid;place-items:center;font-family:var(--sans);
  font-size:14px;font-weight:600;color:var(--navy);background:var(--stone)}
.rev__who{display:flex;flex-direction:column;line-height:1.35}
.rev__when{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(38,37,77,.45)}
a.rev__name{color:inherit;text-decoration:none}
a.rev__name:hover{text-decoration:underline;text-underline-offset:3px}

.rev__more{margin:2px 0 16px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);text-decoration:underline;
  text-underline-offset:4px;align-self:flex-start}
.rev__more:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* Shown only when live data cannot be loaded. Never placeholder reviews. */
.rev__fallback{margin-top:6px}
.rev__fallback a{font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
  text-decoration:underline;text-underline-offset:5px}

.rev__attrib{margin-top:18px;max-width:64ch;font-size:12px;line-height:1.6;
  color:rgba(38,37,77,.5)}

@media(max-width:560px){
  .rev__avatar{width:34px;height:34px;flex-basis:34px}
}

/* --- Homepage hero: square source ----------------------------------------
   The hero photograph is square (1254x1254) while the frame is 21/9 on
   desktop, 16/9 on tablet and 5/4 on mobile, so the crop is vertical at every
   size. Held slightly below centre so the applicator and the practitioner's
   hands stay in frame — on desktop only 43% of the source height is visible,
   which is where the treatment itself sits. */
.hero2__img{object-position:50% 55%}
@media(max-width:1024px){.hero2__img{object-position:50% 55%}}
@media(max-width:760px){.hero2__img{object-position:50% 55%}}

/* Wonder Butt Lift moved into the 16/9 card slot when the featured treatments
   were reordered. Its photograph is portrait with the subject low in frame, so
   the crop is pulled down to keep the client and the applicator in view. The
   image file itself is unchanged. */
.feat__item--3 .img--wonder .img__el{object-position:50% 85%}