/* ==========================================================================
   ROUND FIVE — the inner pages, clickable
   Nothing in this file pins the page. Every section is a row of real buttons
   and one live panel; the keyboard and a swipe do what a click does.
   ========================================================================== */

/* ---- shared: the panels, the little navigator, the count -------------- */
.stp-nav{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.6vw,34px)}
.stp-btn{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease),transform .4s var(--ease)}
.stp-btn svg{width:18px;height:18px}
.stp-btn:hover{border-color:var(--gold);background:var(--ink);color:var(--cream)}
.stp-btn:active{transform:scale(.94)}
.stp-count{font-family:var(--caps);font-size:12.5px;letter-spacing:.22em;color:var(--gold-deep);
  font-variant-numeric:tabular-nums;min-width:5.5ch;text-align:center}
.on-ink .stp-btn,.g-ink .stp-btn{border-color:rgba(245,240,236,.28);color:var(--cream)}
.on-ink .stp-btn:hover,.g-ink .stp-btn:hover{background:var(--cream);color:var(--ink)}
[data-step-panel],[data-empty-panel],[data-depth-panel],[data-lips-panel],[data-min-panel]{
  animation:stpIn .55s var(--ease) both}
@keyframes stpIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0}

/* serif numerals sit on the line, never old-style: "Day 0" must not read "Day o" */
.md b,.lf-month b,.dc-big b,.ds-num b,.dp-read b,.ch-ring b,.tl-n span,.cx-count,.stp-count,.cr-list b,.cr-judge b{
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---- the drawing --------------------------------------------------------- */
.fx-svg{display:block;width:100%;height:auto;color:var(--gold)}
.fx-zone{fill:var(--gold);fill-opacity:.12;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 6;
  opacity:0;transition:opacity .5s var(--ease)}
.fx-zone.is-on{opacity:1;animation:fxPulse 2.4s ease-in-out infinite}
@keyframes fxPulse{0%,100%{fill-opacity:.1}50%{fill-opacity:.22}}
.fx-x{stroke:var(--gold-deep);stroke-width:2.2;opacity:0;transition:opacity .45s var(--ease)}
.fx-expr.is-on .fx-x{opacity:1;stroke-dasharray:90;stroke-dashoffset:90;animation:fxDraw 1s var(--ease) forwards}
@keyframes fxDraw{to{stroke-dashoffset:0}}
.fx-pt circle{fill:var(--cream);stroke:var(--gold);stroke-width:1.5;transition:fill .35s var(--ease),stroke .35s var(--ease),r .35s var(--ease)}
.fx-pt .fx-pt-c{fill:var(--gold);stroke:none}
.fx-pt text{font-family:var(--caps);font-size:15px;letter-spacing:.16em;fill:var(--gold-deep)}
.fx-pt.is-on circle:first-child{fill:var(--gold);stroke:var(--gold-deep)}
.fx-pt.is-on .fx-pt-c{fill:var(--cream)}
.fx-pt.is-on text{fill:var(--ink)}

/* ---- 1. the concerns ----------------------------------------------------- */
.cx-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,84px);align-items:start}
.cx-list h2{margin:12px 0 26px;font-size:clamp(28px,3vw,42px);max-width:16ch}
.cx-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cx-row{display:grid;grid-template-columns:36px minmax(0,1fr) 22px;align-items:center;gap:12px;
  padding:17px 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;
  cursor:pointer;min-height:58px;transition:padding-left .4s var(--ease),border-color .4s var(--ease)}
.cx-row:hover{padding-left:6px}
.cx-n{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--mute);font-variant-numeric:tabular-nums}
.cx-t{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.25;color:var(--ink);
  transition:color .35s var(--ease)}
.cx-a{color:var(--gold-deep);opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cx-a svg{width:18px;height:18px;display:block}
.cx-row[aria-pressed="true"]{border-bottom-color:var(--gold)}
.cx-row[aria-pressed="true"] .cx-n{color:var(--gold-deep)}
.cx-row[aria-pressed="true"] .cx-t{font-style:italic}
.cx-row[aria-pressed="true"] .cx-a{opacity:1;transform:none}
.cx-card{position:relative;background:var(--white);border:1px solid var(--line);
  padding:clamp(28px,3.4vw,52px);min-height:420px;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(46,36,24,.06);overflow:hidden}
.cx-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold-lite),var(--gold),var(--gold-lite))}
.cx-face{position:absolute;right:-6%;top:-4%;width:min(46%,300px);opacity:.55;pointer-events:none}
.cx-mark{position:absolute;right:6%;top:2%;font-family:var(--serif);font-size:clamp(120px,16vw,220px);
  line-height:1;color:var(--gold);opacity:.12;pointer-events:none;font-variant-numeric:tabular-nums}
.cx-panels{position:relative;flex:1;padding-right:30%}
.cx-panel{max-width:36ch}
.cx-k{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.cx-count{font-family:var(--caps);font-size:12.5px;letter-spacing:.22em;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.cx-dots{display:inline-flex;gap:5px}
.cx-dots i{width:16px;height:1px;background:var(--line)}
.cx-dots i.on{background:var(--gold)}
.cx-panel h3{font-family:var(--serif);font-size:clamp(28px,3.2vw,46px);line-height:1.06;margin:0 0 16px;color:var(--ink)}
.cx-b{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-soft);margin:0 0 22px}
.cx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:auto}
.cx-price{display:inline-flex;align-items:center;min-height:44px;font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.cx-price:hover{color:var(--ink)}
.cx-card .stp-nav{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
@media (max-width:900px){
  .cx-in{grid-template-columns:1fr;gap:26px}
  .cx-card{min-height:0;padding:clamp(22px,5vw,30px)}
  .cx-face{width:42%;right:-8%;top:0}
  .cx-panels{padding-right:0}
  .cx-panel{max-width:none}
  .cx-panel h3,.cx-b{padding-right:30%}
}

/* ---- 2. the chapters ----------------------------------------------------- */
.ch-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(34px,5vw,84px);align-items:start}
.ch-media{position:sticky;top:calc(var(--hdr-h,88px) + 24px)}
.ch-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.ch-frame::after{content:"";position:absolute;inset:14px;border:1px solid rgba(250,247,242,.55);pointer-events:none}
.ch-img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);will-change:opacity}
.ch-img.is-on{opacity:1}
.ch-photo{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);
  transition:transform 6s cubic-bezier(.2,.6,.2,1)}
.ch-img.is-on .ch-photo{transform:scale(1)}
.ch-ring{position:absolute;right:24px;bottom:24px;width:76px;height:76px;display:grid;place-items:center;
  color:var(--cream)}
.ch-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ch-ring circle{fill:rgba(32,27,22,.28);stroke:rgba(250,247,242,.45);stroke-width:1.5}
.ch-ring .ch-ring-fill{fill:none;stroke:var(--gold-lite);stroke-width:2;stroke-dasharray:289;
  stroke-dashoffset:calc(289 - 289 * var(--p,0));transition:stroke-dashoffset .8s var(--ease)}
.ch-ring b{position:relative;font-family:var(--serif);font-weight:400;font-size:24px;font-variant-numeric:tabular-nums}
.ch-body .eyebrow{margin-bottom:14px}
.ch-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-bottom:clamp(22px,2.6vw,34px)}
.ch-tab{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;gap:12px;
  padding:13px 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;
  min-height:48px;transition:padding-left .4s var(--ease)}
.ch-tab:hover{padding-left:6px}
.ch-tab-n{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--mute);font-variant-numeric:tabular-nums}
.ch-tab-t{font-family:var(--caps);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  transition:color .35s var(--ease)}
.ch-tab[aria-pressed="true"]{border-bottom-color:var(--gold)}
.ch-tab[aria-pressed="true"] .ch-tab-n,.ch-tab[aria-pressed="true"] .ch-tab-t{color:var(--ink)}
.ch-panel h3{font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);line-height:1.08;margin:0 0 18px;max-width:18ch}
.ch-panel p{margin:0 0 16px;max-width:60ch;color:var(--ink-soft);line-height:1.72}
.ch-lead{font-family:var(--serif);font-size:clamp(19px,1.9vw,25px);line-height:1.45;color:var(--ink)!important}
.ch-lead::first-letter{font-size:2.6em;line-height:.8;float:left;padding:8px 10px 0 0;color:var(--gold-deep)}
.ch-panel .prose-list{color:var(--ink-soft)}
@media (max-width:900px){
  .ch-in{grid-template-columns:1fr;gap:24px}
  .ch-media{position:static;max-width:520px}
  .ch-frame{aspect-ratio:5/4}
  .ch-tabs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border-top:0;gap:8px;padding-bottom:6px;
    scrollbar-width:none}
  .ch-tabs::-webkit-scrollbar{display:none}
  .ch-tab{grid-template-columns:auto;gap:6px;flex:none;padding:10px 16px;border:1px solid var(--line);
    border-radius:999px;min-height:44px;align-items:center}
  .ch-tab-t{display:none}
  .ch-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
  .ch-tab[aria-pressed="true"] .ch-tab-n{color:var(--cream)}
}

/* ---- 3. what happens, and when -------------------------------------------- */
.tl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.tl-head .sec-head{margin-bottom:0}
.tl-head .stp-nav{margin-top:0}
.tl-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin-top:clamp(30px,3.4vw,46px);padding-top:26px}
.tl-track--tight{margin-top:clamp(22px,2.6vw,32px)}
.tl-rail{position:absolute;left:6%;right:6%;top:32px;height:1px;background:var(--line)}
.tl-rail i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);
  transition:transform .6s var(--ease)}
.tl-mark{position:relative;background:transparent;border:0;padding:0 8px 4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:14px;min-height:56px}
.tl-dot{width:13px;height:13px;border-radius:50%;background:var(--ground,var(--cream));border:1px solid var(--line);
  position:relative;z-index:1;transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.tl-mark:hover .tl-dot{border-color:var(--gold)}
.tl-mark[aria-pressed="true"] .tl-dot{background:var(--gold);border-color:var(--gold);transform:scale(1.35)}
.tl-when{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  transition:color .35s var(--ease);text-align:center}
.tl-mark[aria-pressed="true"] .tl-when{color:var(--ink)}
.tl-panels{margin-top:clamp(26px,3vw,40px);min-height:11em;position:relative}
.tl-panel{max-width:58ch}
.tl-n{font-family:var(--caps);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 10px;font-variant-numeric:tabular-nums}
.tl-n span{color:var(--ink)}
.tl-panel h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);line-height:1.1;margin:0 0 12px}
.tl-panel p:last-child{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-soft)}
@media (max-width:640px){
  .tl-track{grid-auto-flow:row;grid-auto-columns:auto;gap:0;padding-top:0}
  .tl-rail{display:none}
  .tl-mark{flex-direction:row;justify-content:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);width:100%}
  .tl-when{text-align:left}
  .tl-panels{min-height:0}
}

/* the homepage weight section, now the same pattern */
.wt-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:center}
.wt-media{margin:0}
.wt-img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.wt-body h2{margin:12px 0 6px;font-size:clamp(28px,3vw,42px);max-width:16ch}
.wt-panel h3{font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);margin:0 0 10px}
.wt-panel p{max-width:52ch;margin:0 0 12px}
.wt-punch{font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-size:clamp(18px,1.7vw,22px)}
@media (max-width:900px){.wt-in{grid-template-columns:1fr;gap:26px}.wt-media{max-width:460px}}

/* ---- 4. the self-check ------------------------------------------------------ */
.sc-in{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(28px,3.2vw,44px);
  border:1px solid var(--line);background:var(--white)}
.sc-col{padding:clamp(24px,3vw,44px);min-width:0}
.sc-col+.sc-col{border-left:1px solid var(--line)}
.sc-k{margin:0 0 12px;font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.sc-col--n .sc-k{color:var(--mute)}
.sc-col h3{font-size:clamp(20px,1.9vw,25px);line-height:1.22;margin:0 0 18px;min-height:2.44em;
  display:flex;align-items:flex-end;max-width:22ch}
.sc-col ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.sc-col li{border-bottom:1px solid var(--line)}
.sc-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;width:100%;
  padding:14px 0;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink-soft);
  font:inherit;line-height:1.55;min-height:52px;transition:color .3s var(--ease)}
.sc-item:hover{color:var(--ink)}
.sc-box{width:20px;height:20px;border:1px solid var(--gold);border-radius:50%;margin-top:3px;position:relative;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.sc-box::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid var(--cream);
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);transition:transform .3s var(--ease)}
.sc-col--n .sc-box{border-color:var(--mute)}
.sc-item[aria-checked="true"]{color:var(--ink)}
.sc-item[aria-checked="true"] .sc-box{background:var(--gold);transform:scale(1.08)}
.sc-col--n .sc-item[aria-checked="true"] .sc-box{background:var(--mute);border-color:var(--mute)}
.sc-item[aria-checked="true"] .sc-box::after{transform:rotate(45deg) scale(1)}
.sc-t b{display:block;font-weight:500;color:var(--ink);font-family:var(--serif);font-size:18px;margin-bottom:2px}
.sc-t span{display:block;font-size:15px;color:var(--mute)}
.sc-verdict{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(24px,3vw,44px);align-items:center;
  margin-top:0;padding:clamp(22px,2.6vw,34px) clamp(24px,3vw,44px);background:var(--ink);color:var(--cream)}
.sc-meter{grid-column:1 / -1;height:2px;background:rgba(245,240,236,.18)}
.sc-meter i{display:block;height:100%;width:var(--w,0%);background:var(--gold-lite);transition:width .6s var(--ease)}
.sc-say{margin:0;font-family:var(--serif);font-size:clamp(19px,1.9vw,25px);line-height:1.4;max-width:46ch}
.sc-verdict .btn{justify-self:end}
@media (max-width:760px){
  .sc-in{grid-template-columns:1fr}
  .sc-col+.sc-col{border-left:0;border-top:1px solid var(--line)}
  .sc-col h3{min-height:0}
  .sc-verdict{grid-template-columns:1fr}
  .sc-verdict .btn{justify-self:start}
}

/* ---- 5. the signature modules -------------------------------------------- */
.md .sec-head{margin-bottom:clamp(26px,3vw,40px)}
.md .fp-n,.md .hh-row b,.md .fc-qt span{font-size:12.5px}

/* threads: the lift, month by month */
.lf-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4vw,64px);align-items:center}
.lf-chart{position:relative}
.lf-chart svg{width:100%;height:auto;aspect-ratio:600/240;display:block;overflow:visible}
.lf-grid line{stroke:var(--line);stroke-width:1}
.lf-thread{fill:none;stroke:var(--mute);stroke-width:2;stroke-dasharray:6 6}
.lf-coll{fill:none;stroke:var(--gold);stroke-width:2.5}
.lf-cursor{stroke:var(--ink);stroke-width:1;transform:translateX(calc(var(--m,0) * 600px / 18));transition:transform .35s var(--ease)}
.lf-legend{display:flex;gap:22px;margin-top:12px;font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.lf-legend span{display:inline-flex;align-items:center;gap:8px}
.lf-legend i{width:22px;height:0;border-top:2px dashed var(--mute)}
.lf-legend .lf-l2{border-top:2px solid var(--gold)}
.lf-month{display:flex;align-items:baseline;gap:14px;margin:0 0 10px}
.lf-month b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,56px);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.lf-month span{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.lf-say{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-soft);min-height:6.4em;margin:0 0 18px}
input[type=range].lx{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0;cursor:pointer}
.lf-range input,.em-range input,.dp-range input,.lp-range input,.mn-range input,.ba-range input{
  -webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;cursor:pointer}
.lf-range input::-webkit-slider-runnable-track,.em-range input::-webkit-slider-runnable-track,
.dp-range input::-webkit-slider-runnable-track,.lp-range input::-webkit-slider-runnable-track,
.mn-range input::-webkit-slider-runnable-track,.ba-range input::-webkit-slider-runnable-track{
  height:2px;background:linear-gradient(90deg,var(--gold) 0 var(--v,0%),var(--line) var(--v,0%) 100%)}
.lf-range input::-moz-range-track,.em-range input::-moz-range-track,.dp-range input::-moz-range-track,
.lp-range input::-moz-range-track,.mn-range input::-moz-range-track,.ba-range input::-moz-range-track{
  height:2px;background:var(--line)}
.lf-range input::-moz-range-progress,.em-range input::-moz-range-progress,.dp-range input::-moz-range-progress,
.lp-range input::-moz-range-progress,.mn-range input::-moz-range-progress,.ba-range input::-moz-range-progress{
  height:2px;background:var(--gold)}
.lf-range input::-webkit-slider-thumb,.em-range input::-webkit-slider-thumb,.dp-range input::-webkit-slider-thumb,
.lp-range input::-webkit-slider-thumb,.mn-range input::-webkit-slider-thumb,.ba-range input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--cream);
  border:1px solid var(--gold);box-shadow:0 4px 14px rgba(46,36,24,.18);margin-top:-12px;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.lf-range input::-moz-range-thumb,.em-range input::-moz-range-thumb,.dp-range input::-moz-range-thumb,
.lp-range input::-moz-range-thumb,.mn-range input::-moz-range-thumb,.ba-range input::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--cream);border:1px solid var(--gold);
  box-shadow:0 4px 14px rgba(46,36,24,.18)}
.lf-range input:active::-webkit-slider-thumb{transform:scale(1.15);background:var(--gold)}
.lf-range input:focus-visible,.em-range input:focus-visible,.dp-range input:focus-visible,
.lp-range input:focus-visible,.mn-range input:focus-visible,.ba-range input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.lf-ticks,.em-ticks,.dp-ticks,.lp-ticks{display:flex;justify-content:space-between;margin-top:4px;
  font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (max-width:900px){.lf-in{grid-template-columns:1fr;gap:26px}.lf-say{min-height:0}}

/* boosters: the five points */
.fp-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:center}
.fp-face{width:100%;max-width:400px;margin-inline:auto}
.fp-face .fx-svg{color:var(--gold)}
.fp-tabs{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);margin-bottom:clamp(20px,2.4vw,30px)}
.fp-tab{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:12px 0;
  border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;min-height:50px;
  font-family:var(--serif);font-size:clamp(17px,1.6vw,21px);color:var(--ink);transition:padding-left .4s var(--ease)}
.fp-tab:hover{padding-left:6px}
.fp-n{width:32px;height:32px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;
  font-family:var(--caps);font-size:13px;letter-spacing:0;color:var(--gold-deep);transition:background .3s var(--ease),color .3s var(--ease)}
.fp-tab[aria-pressed="true"]{border-bottom-color:var(--gold);font-style:italic}
.fp-tab[aria-pressed="true"] .fp-n{background:var(--gold);color:var(--cream)}
.fp-panel h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);margin:0 0 10px}
.fp-panel p{max-width:54ch;color:var(--ink-soft);line-height:1.65}
@media (max-width:900px){.fp-in{grid-template-columns:1fr;gap:12px}.fp-face{max-width:300px}}

/* lines: expressions */
.ex-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,70px);align-items:center}
.ex-face{width:100%;max-width:400px;margin-inline:auto}
.ex-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,30px)}
.ex-tab{padding:12px 20px;min-height:46px;border:1px solid var(--line);border-radius:999px;background:transparent;
  font-family:var(--caps);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.ex-tab:hover{border-color:var(--gold)}
.ex-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.ex-panel h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);margin:0 0 10px}
.ex-panel p{max-width:50ch;color:var(--ink-soft);line-height:1.65}
@media (max-width:900px){.ex-in{grid-template-columns:1fr}.ex-face{max-width:320px;order:-1}}

/* dermal filler: build a plan */
.pb-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,4vw,70px);align-items:center}
.pb-areas{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:clamp(20px,2.4vw,30px)}
.pb-area{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:6px 14px;
  padding:16px 18px;min-height:70px;background:var(--ground,var(--cream));border:0;text-align:left;cursor:pointer;
  font:inherit;color:var(--ink);transition:background .3s var(--ease)}
.pb-area:hover{background:var(--white)}
.pb-area .sc-box{margin-top:0}
.pb-area[aria-checked="true"]{background:var(--white)}
.pb-area[aria-checked="true"] .sc-box{background:var(--gold)}
.pb-area[aria-checked="true"] .sc-box::after{transform:rotate(45deg) scale(1)}
.pb-t{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px)}
.pb-p{grid-column:2;font-family:var(--caps);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}

.pb-face .ill{max-width:420px;margin-inline:auto}

.pb-sum{margin:0 0 18px;padding:0}
.pb-sum div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.pb-sum dt{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.pb-sum dd{margin:0;text-align:right;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);color:var(--ink)}
.pb-sum dd[data-plan-total]{font-size:clamp(24px,2.4vw,34px)}
.pb-note{font-size:15.5px;line-height:1.65;color:var(--mute);margin:0 0 20px;max-width:56ch}

@media (max-width:900px){.pb-in{grid-template-columns:1fr}.pb-face .ill{max-width:280px}}
@media (max-width:560px){.pb-areas{grid-template-columns:1fr}}

/* for men: her / him */
.hh-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:center}
.hh-stage{position:relative;width:100%;max-width:400px;margin-inline:auto;aspect-ratio:570/740}
.hh-face{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.hh-face.is-on{opacity:1}
.hh-tabs{display:inline-flex;max-width:100%;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:clamp(20px,2.4vw,30px)}
.hh-tab{flex:0 1 auto;min-width:0;white-space:nowrap;padding-inline:clamp(18px,6vw,26px)}
.hh-tab{padding:10px 26px;min-height:44px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--caps);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease)}
.hh-tab[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.hh-panel h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);margin:0 0 18px;max-width:22ch}
.hh-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 14px;padding:14px 0;border-top:1px solid var(--line)}
.hh-row b{grid-row:span 2;width:28px;height:28px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;
  font-family:var(--caps);font-weight:400;font-size:12px;color:var(--gold-deep)}
.hh-row span:first-of-type{font-family:var(--serif);font-size:19px;color:var(--ink)}
.hh-row span:last-of-type{font-size:15.5px;color:var(--mute);line-height:1.55}
@media (max-width:900px){.hh-in{grid-template-columns:1fr}.hh-stage{max-width:300px}}

/* after weight loss: what empties */
.em-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:center}
.em-face{width:100%;max-width:380px;margin-inline:auto}
.em-panels{margin-top:clamp(18px,2vw,26px);min-height:9em}
.em-panel h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);margin:0 0 10px}
.em-panel p:last-child{max-width:52ch;color:var(--ink-soft);line-height:1.65}
@media (max-width:900px){.em-in{grid-template-columns:1fr}.em-face{max-width:300px}.em-panels{min-height:0}}

/* prp: the tube */
.pr4-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,70px);align-items:center}
.pr4-stage{display:flex;flex-direction:column;align-items:center;gap:18px}
.tube{position:relative;width:110px;height:320px;border-radius:0 0 55px 55px;overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.35);box-shadow:inset 0 0 40px rgba(46,36,24,.06)}
.tube-glass{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(255,255,255,.45));
  z-index:3;pointer-events:none}
.tube-fill{position:absolute;left:0;right:0;bottom:0;transition:height 1.1s cubic-bezier(.2,.7,.2,1),opacity .6s var(--ease)}
.tube-red{height:0;background:linear-gradient(180deg,#8E3A36,#6D2723)}
.tube-buffy{height:0;bottom:var(--b,0);background:#E8DCCB}
.tube-gold{height:0;bottom:var(--g,0);background:linear-gradient(180deg,#E9CC8A,#D2A84E)}
.tube-cap{position:absolute;left:8px;right:8px;top:0;height:22px;background:var(--ink);z-index:4}
.tube-cap-label{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.md-prp[data-prp-state="1"] .tube{animation:tubeSpin .9s ease-in-out 2}
@keyframes tubeSpin{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.pr4-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:clamp(20px,2.4vw,30px)}
.pr4-tab{display:flex;flex-direction:column;gap:6px;padding:16px 14px;min-height:64px;border:0;background:transparent;
  border-bottom:2px solid transparent;text-align:left;cursor:pointer;font-family:var(--serif);font-size:18px;color:var(--mute);
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.pr4-tab+.pr4-tab{border-left:1px solid var(--line)}
.pr4-n{font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;color:var(--gold-deep)}
.pr4-tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.pr4-panel h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);margin:0 0 10px}
.pr4-panel p{max-width:54ch;color:var(--ink-soft);line-height:1.65}
@media (max-width:900px){.pr4-in{grid-template-columns:1fr}.tube{width:90px;height:240px}.pr4-tabs{grid-template-columns:1fr 1fr}
  .pr4-tab:nth-child(3){border-left:0}.pr4-tab:nth-child(n+3){border-top:1px solid var(--line)}}

/* peels: depth against downtime */
.dp-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,70px);align-items:center}
.dp-dial{position:relative;width:100%;max-width:300px;margin-inline:auto}
.dp-dial svg{width:100%;height:auto;display:block;transform:rotate(-90deg)}
.dp-track{fill:none;stroke:var(--line);stroke-width:2}
.dp-arc{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:528;stroke-dashoffset:calc(528 - 528 * var(--p,.12));
  transition:stroke-dashoffset .7s var(--ease);stroke-linecap:round}
.dp-layers rect{fill:var(--sand);transform:rotate(90deg);transform-origin:100px 100px;transition:fill .5s var(--ease)}
.md-depth[data-depth-level="0"] .dp-l1,.md-depth[data-depth-level="1"] .dp-l1,.md-depth[data-depth-level="2"] .dp-l1,
.md-depth[data-depth-level="1"] .dp-l2,.md-depth[data-depth-level="2"] .dp-l2,.md-depth[data-depth-level="2"] .dp-l3{fill:var(--gold)}

.dp-read b{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5vw,64px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.dp-read span{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.dp-panels{margin-top:clamp(18px,2vw,26px)}
.dp-panel h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);margin:0 0 12px}
.dp-panel p{max-width:60ch;color:var(--ink-soft);line-height:1.65;margin:0 0 10px}
.dp-panel b{font-family:var(--caps);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  display:block;margin-bottom:2px}
@media (max-width:900px){.dp-in{grid-template-columns:1fr}.dp-dial{max-width:220px}}

/* microneedling: a course on real dates */
.cr-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,4vw,70px);align-items:start}
.cr-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.cr-field{display:flex;flex-direction:column;gap:7px}
.cr-field span{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.cr-field input,.cr-field select{font-family:var(--body);font-size:16px;color:var(--ink);padding:13px 14px;min-height:50px;
  background:var(--white);border:1px solid var(--line);border-radius:0;appearance:none;-webkit-appearance:none}
.cr-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237A5A2C' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.cr-field input:focus,.cr-field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,131,79,.14)}
.cr-note{font-size:15px;color:var(--mute);margin:0}
.cr-side{padding:clamp(22px,2.6vw,36px);border:1px solid var(--line);background:var(--white)}
.cr-list{list-style:none;margin:0;padding:0;counter-reset:s}
.cr-list li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--line);animation:stpIn .5s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.cr-list li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--gold-deep)}
.cr-list b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink)}
.cr-list span{font-family:var(--caps);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.cr-judge{margin:18px 0 0;font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);color:var(--ink)}
.cr-judge b{font-weight:400;color:var(--gold-deep);font-style:italic}
@media (max-width:900px){.cr-in{grid-template-columns:1fr}}
@media (max-width:560px){.cr-controls{grid-template-columns:1fr}}

/* fat dissolving: fat or skin */
.fc-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4vw,70px);align-items:start}
.fc-q{padding:18px 0;border-top:1px solid var(--line)}
.fc-qt{margin:0 0 12px;font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);color:var(--ink)}
.fc-qt span{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--gold-deep);margin-right:10px}
.fc-opts{display:grid;border-top:1px solid var(--line)}
.fc-opt{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:14px;width:100%;
  padding:13px 0;min-height:50px;border:0;border-bottom:1px solid var(--line);background:transparent;
  text-align:left;cursor:pointer;font-family:var(--body);font-size:16.5px;color:var(--ink-soft);
  transition:padding-left .35s var(--ease),color .3s var(--ease),border-color .35s var(--ease)}
.fc-opt::before{content:"";width:16px;height:16px;border-radius:50%;border:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.fc-opt:hover{padding-left:6px;color:var(--ink)}
.fc-opt[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.fc-opt[aria-pressed="true"]::before{background:var(--gold);border-color:var(--gold);
  box-shadow:inset 0 0 0 3px var(--ground,var(--cream))}
.fc-side{position:sticky;top:calc(var(--hdr-h,88px) + 24px);padding:clamp(22px,2.6vw,36px);background:var(--white);border:1px solid var(--line);text-align:center}
.fc-face{width:min(220px,70%);margin:0 auto 10px}
.fc-k{margin:0 0 8px;font-family:var(--caps);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.fc-say{font-family:var(--serif);font-size:clamp(19px,1.9vw,25px);line-height:1.4;color:var(--ink);margin:0 0 20px;min-height:4.2em}
@media (max-width:900px){.fc-in{grid-template-columns:1fr}.fc-side{position:static}.fc-say{min-height:0}}

/* lips: the drawing */
.lp-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:center}
.lp-stage{text-align:center;color:var(--gold-deep)}
.lp-svg{width:min(100%,420px);height:auto;display:block;margin-inline:auto}
.lp-upper,.lp-lower,.lp-mid,.lp-fill{transition:d .7s var(--ease)}
.lp-fill{fill:var(--gold);opacity:.14}
.lp-read{margin:8px 0 0;font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.lp-panels{margin-top:clamp(18px,2vw,26px);min-height:8em}
.lp-panel h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);margin:0 0 10px}
.lp-panel p{max-width:52ch;color:var(--ink-soft);line-height:1.65}
@media (max-width:900px){.lp-in{grid-template-columns:1fr}.lp-panels{min-height:0}}

/* consultation: minute by minute */
.mn-line{position:relative;height:60px;margin-top:6px}
.mn-line::before{content:"";position:absolute;left:0;right:0;top:14px;height:1px;background:var(--line)}
.mn-fill{position:absolute;left:0;top:14px;height:1px;width:var(--w,0%);background:var(--gold);transition:width .4s var(--ease)}
.mn-mark{position:absolute;left:var(--x);top:0;transform:translateX(-50%);background:transparent;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px;min-height:44px}
.mn-mark i{width:11px;height:11px;border-radius:50%;background:var(--ground,var(--cream));border:1px solid var(--line);margin-top:9px;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.mn-mark span{font-family:var(--caps);font-size:12px;letter-spacing:.16em;color:var(--mute);font-variant-numeric:tabular-nums}
.mn-mark[aria-pressed="true"] i{background:var(--gold);border-color:var(--gold);transform:scale(1.4)}
.mn-mark[aria-pressed="true"] span{color:var(--ink)}
.mn-mark:first-child{transform:translateX(0);align-items:flex-start}
.mn-mark:last-child{transform:translateX(-100%);align-items:flex-end}
.mn-range{display:block;margin-top:-6px}
.mn-panels{margin-top:clamp(18px,2.4vw,32px);min-height:9em}
.mn-panel h3{font-family:var(--serif);font-size:clamp(26px,2.8vw,38px);margin:0 0 12px}
.mn-panel p:last-child{max-width:56ch;color:var(--ink-soft);line-height:1.65;font-size:clamp(17px,1.5vw,19px)}
@media (max-width:640px){.mn-line{display:none}.mn-panels{min-height:0}}

/* consultation: worth bringing */
.br-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:start}
.br-body .sec-head{margin-bottom:0}
.br-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.br-list li{border-bottom:1px solid var(--line)}
.br-list .sc-item{padding:16px 0}
.br-say{grid-column:2;margin:14px 0 0;font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
@media (max-width:900px){.br-in{grid-template-columns:1fr}.br-say{grid-column:1}}

/* aftercare: which day */
.dc-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,4vw,70px);align-items:start}
.dc-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dc-side{padding:clamp(22px,2.6vw,36px);background:var(--ink);color:var(--cream)}
.dc-big{display:flex;align-items:baseline;gap:14px;margin:0 0 8px}
.dc-big b{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4vw,58px);line-height:1;font-variant-numeric:tabular-nums}
.dc-big span{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lite)}
.dc-say{font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);line-height:1.4;margin:0 0 18px}
.dc-steps{list-style:none;margin:0;padding:0;border-top:1px solid rgba(245,240,236,.16)}
.dc-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid rgba(245,240,236,.16);
  color:rgba(245,240,236,.62);font-size:15px;line-height:1.55}
.dc-steps li b{font-family:var(--caps);font-weight:400;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lite);
  white-space:nowrap;padding-top:3px;min-width:9ch}
.dc-steps li.is-now{color:var(--cream)}
.dc-steps li.is-now b{color:var(--cream)}
.dc-steps li.is-past{opacity:.45}
.dc-urgent{margin:18px 0 0;font-size:14px;line-height:1.6;color:rgba(245,240,236,.7);padding-top:14px;border-top:1px solid rgba(245,240,236,.16)}
@media (max-width:900px){.dc-in{grid-template-columns:1fr}}
@media (max-width:560px){.dc-controls{grid-template-columns:1fr}}

/* faqs: the hub */
.fq-search{position:relative;display:block;margin-bottom:18px}
.fq-search svg{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--gold-deep);pointer-events:none}
.fq-search input{width:100%;font-family:var(--body);font-size:17px;color:var(--ink);padding:16px 18px 16px 52px;min-height:58px;
  background:var(--white);border:1px solid var(--line);border-radius:0;appearance:none;-webkit-appearance:none}
.fq-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,131,79,.14)}
.fq-chips{display:flex;flex-wrap:wrap;gap:8px}
.fq-chip{padding:10px 16px;min-height:42px;border:1px solid var(--line);border-radius:999px;background:transparent;
  font-family:var(--caps);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.fq-chip:hover{border-color:var(--gold)}
.fq-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.fq-count{margin:14px 0 0;font-family:var(--caps);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.fq-groups{margin-top:clamp(26px,3vw,40px)}
.fq-group{margin-bottom:clamp(26px,3vw,40px)}
.fq-h{font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 6px;padding-bottom:10px;
  border-bottom:1px solid var(--gold)}
.fq-src{margin:10px 0 0!important}
.fq-none{font-family:var(--serif);font-size:20px;color:var(--ink)}
.fq-item mark{background:rgba(168,131,79,.22);color:inherit;padding:0 2px}

/* contact: how far */
.ds-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4vw,70px);align-items:center}
.ds-towns{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px);
  border-top:1px solid var(--line);margin-top:clamp(20px,2.4vw,30px)}
.ds-town{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:14px 0;min-height:52px;border:0;border-bottom:1px solid var(--line);background:transparent;
  text-align:left;cursor:pointer;font-family:var(--serif);font-size:clamp(17px,1.6vw,21px);color:var(--ink);
  transition:padding-left .4s var(--ease),border-color .4s var(--ease)}
.ds-town::after{content:"";width:7px;height:7px;border-radius:50%;background:transparent;
  border:1px solid var(--line);transition:background .3s var(--ease),border-color .3s var(--ease)}
.ds-town:hover{padding-left:6px}
.ds-town[aria-pressed="true"]{border-bottom-color:var(--gold);font-style:italic}
.ds-town[aria-pressed="true"]::after{background:var(--gold);border-color:var(--gold)}
@media (max-width:560px){.ds-towns{grid-template-columns:1fr}}
.ds-side{text-align:center;padding:clamp(22px,2.6vw,36px);border:1px solid var(--line);background:var(--white)}
.ds-ring{position:relative;width:170px;margin:0 auto 12px}
.ds-ring svg{width:100%;height:auto;display:block;transform:rotate(-90deg)}
.ds-track{fill:none;stroke:var(--line);stroke-width:2}
.ds-arc{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:calc(327 - 327 * var(--p,0));
  transition:stroke-dashoffset .7s var(--ease)}
.ds-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}
.ds-num b{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ds-num span{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.ds-say{font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);color:var(--ink);margin:0 0 8px}
.ds-open{margin:0 0 18px;font-family:var(--caps);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.ds-open.is-closed{color:var(--mute)}
@media (max-width:900px){.ds-in{grid-template-columns:1fr}}

/* the clinic: gallery */
.gl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.gl-fig{margin:0;position:relative;overflow:hidden;background:var(--sand)}
.gl-fig .gl-img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;transform:scale(1.02);
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.gl-fig:hover .gl-img{transform:scale(1.06)}
.gl-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  background:linear-gradient(180deg,rgba(32,27,22,0),rgba(32,27,22,.62));color:var(--cream);
  font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:900px){.gl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gl-grid{grid-template-columns:1fr}}

/* before and after */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,34px)}
.ba-frame{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--sand);user-select:none}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-after,.ba-before{position:absolute;inset:0}
/* clip the before layer rather than resize it: a width on the wrapper also
   narrows the photograph inside it, and the two halves stop lining up */
.ba-before{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--cream);pointer-events:none}
.ba-handle i{position:absolute;left:50%;top:50%;width:36px;height:36px;border-radius:50%;background:var(--cream);transform:translate(-50%,-50%);
  box-shadow:0 4px 14px rgba(46,36,24,.25)}
.ba-lab{position:absolute;bottom:14px;padding:6px 10px;background:rgba(32,27,22,.6);color:var(--cream);
  font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.ba-lab--b{left:14px}.ba-lab--a{right:14px}
.ba-cap{margin:10px 0 0;font-size:15px;color:var(--mute)}
@media (max-width:760px){.ba-grid{grid-template-columns:1fr}}

/* reduced motion: nothing moves, everything still works */
@media (prefers-reduced-motion:reduce){
  [data-step-panel],[data-empty-panel],[data-depth-panel],[data-lips-panel],[data-min-panel],.cr-list li{animation:none}
  .fx-zone.is-on{animation:none}
  .ch-photo,.gl-fig .gl-img{transition:none;transform:none}
  .md-prp[data-prp-state="1"] .tube{animation:none}
}

/* the homepage index rows are links now: the arrow sits in the line */
.demo1 .ti-row{color:inherit;text-decoration:none}
.demo1 .ti-meta span:last-child{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.demo1 .ti-meta svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.demo1 .ti-row:hover .ti-meta svg{transform:translateX(5px)}

/* the clinic, as a short film */
.md-film{color:var(--cream)}
.fl-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,70px);align-items:center}
.md-film .eyebrow{color:var(--gold-lite)}
.md-film h2{color:var(--cream)}
.md-film .lede{color:rgba(245,240,236,.78);max-width:42ch}
.fl-actions{display:flex;align-items:center;gap:26px;margin-top:clamp(22px,2.6vw,32px);flex-wrap:wrap}
.fl-play{display:inline-flex;align-items:center;gap:14px;padding:12px 26px 12px 14px;min-height:56px;
  border:1px solid rgba(245,240,236,.32);border-radius:999px;background:transparent;color:var(--cream);cursor:pointer;
  font-family:var(--caps);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.fl-play:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.fl-ico{width:30px;height:30px;border-radius:50%;border:1px solid currentColor;position:relative;flex:none}
.fl-ico::before{content:"";position:absolute;left:11px;top:9px;border-style:solid;border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent currentColor}
.fl-play[aria-pressed="true"] .fl-ico::before{left:10px;top:9px;width:3px;height:12px;border:0;background:currentColor;
  box-shadow:6px 0 0 currentColor}
.md-film .link-u{color:var(--gold-lite)}
.fl-frame{position:relative;margin:0;overflow:hidden;background:#15110D}
.fl-video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.fl-edge{position:absolute;inset:14px;border:1px solid rgba(245,240,236,.28);pointer-events:none}
@media (max-width:900px){.fl-in{grid-template-columns:1fr}}

/* ==========================================================================
   ROUND SIX — the illustrations, and a different shape on every page
   ========================================================================== */

/* ---- the line-art illustration and its interactive overlay --------------- */
.ill{position:relative;display:block;width:100%}
.ill-art{display:block;width:100%;height:auto}
.ill-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ill-zone{fill:var(--gold);fill-opacity:0;stroke:var(--gold);stroke-width:.5;stroke-dasharray:1.6 2.2;
  opacity:0;transition:opacity .55s var(--ease),fill-opacity .55s var(--ease);vector-effect:non-scaling-stroke}
.ill-zone.is-on{opacity:1;fill-opacity:.16;animation:illPulse 3s ease-in-out infinite}
@keyframes illPulse{0%,100%{fill-opacity:.12}50%{fill-opacity:.24}}
.ill-mark path{fill:none;stroke:var(--gold-deep);stroke-width:1.1;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:0;transition:opacity .4s var(--ease)}
.ill-mark.is-on path{opacity:1;stroke-dasharray:40;stroke-dashoffset:40;animation:illDraw .9s var(--ease) forwards}
@keyframes illDraw{to{stroke-dashoffset:0}}
.ill-pt-halo{fill:var(--cream);stroke:var(--gold);stroke-width:.4;vector-effect:non-scaling-stroke;
  transition:fill .35s var(--ease),r .35s var(--ease)}
.ill-pt-dot{fill:var(--gold);transition:fill .35s var(--ease)}
.ill-pt text{font-family:var(--caps);font-size:4.4px;letter-spacing:.04em;fill:var(--gold-deep);
  transition:fill .35s var(--ease)}
.ill-pt.is-on .ill-pt-halo{fill:var(--gold)}
.ill-pt.is-on .ill-pt-dot{fill:var(--cream)}
.ill-pt.is-on text{fill:var(--cream)}
.g-ink .ill-pt-halo,.on-ink .ill-pt-halo{fill:var(--ink)}
.g-ink .ill-pt text,.on-ink .ill-pt text{fill:var(--gold-lite)}
.ill--glow .ill-art,.ill--plan .ill-art{filter:none}
@media (prefers-reduced-motion:reduce){.ill-zone.is-on,.ill-mark.is-on path{animation:none;stroke-dashoffset:0}}

/* the concern card's watermark face */
.cx-face .ill-art{opacity:.5}
.cx--flip .cx-in{direction:rtl}
.cx--flip .cx-in>*{direction:ltr}

/* ---- concerns: tiles ----------------------------------------------------- */
.cq-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:clamp(20px,2.4vw,32px)}
.cq-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:clamp(20px,2.4vw,30px);min-height:118px;background:var(--ground,var(--cream));border:0;
  text-align:left;cursor:pointer;transition:background .35s var(--ease)}
.cq-tile:hover{background:var(--white)}
.cq-n{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.cq-t{font-family:var(--serif);font-size:clamp(18px,1.7vw,23px);line-height:1.2;color:var(--ink)}
.cq-rule{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.cq-tile[aria-pressed="true"]{background:var(--white)}
.cq-tile[aria-pressed="true"] .cq-rule{transform:scaleX(1)}
.cq-tile[aria-pressed="true"] .cq-t{font-style:italic}
.cq-open{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);
  align-items:center;padding:clamp(24px,3vw,44px);border:1px solid var(--line);background:var(--white)}
.cq-face{max-width:260px;margin-inline:auto}
.cq-face .ill-art{opacity:.85}
.cq-panel h3{font-family:var(--serif);font-size:clamp(26px,3vw,40px);line-height:1.08;margin:0 0 14px}
.cq-panel p{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-soft);max-width:52ch;margin:0 0 20px}
.cq-open .stp-nav{grid-column:2;margin-top:0}
@media (max-width:900px){
  .cq-grid{grid-template-columns:repeat(2,1fr)}
  .cq-open{grid-template-columns:1fr;padding:22px}
  .cq-face{max-width:180px}
  .cq-open .stp-nav{grid-column:1}
}
@media (max-width:560px){.cq-grid{grid-template-columns:1fr}}

/* ---- concerns: a horizontal gallery pulled along by the vertical scroll ---
   The rail is not a native overflow scroller while it is driven: two scroll
   axes fighting each other is exactly what went wrong the first time. */
.cx--strip{padding-block:0;--cs-w:clamp(250px,25vw,340px)}
.cs-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,60px);
  align-items:end;padding-bottom:clamp(22px,3vh,38px)}
.cs-title h2{margin:12px 0 0;max-width:16ch}
.cs-meta{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.cs-face{width:clamp(78px,8vw,116px);flex:none;align-self:center}
.cs-face .ill{max-height:118px;overflow:hidden}
.cs-face .ill-art{opacity:.75}
.cs-meta .stp-nav{margin-top:0}
.cs-view{overflow:hidden;padding-inline:var(--gutter)}
/* the hairlines live on the cards, not on the track. A track with its own
   grey background shows a slab of grey anywhere a card is not, which is what
   a stale stylesheet turned into a blank panel half the section wide. */
.cs-track{display:flex;gap:0;background:transparent;border-block:1px solid var(--line);
  width:max-content;will-change:transform}
.cs-card + .cs-card{border-left:1px solid var(--line)}
.cs-card{flex:0 0 var(--cs-w);display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  padding:clamp(24px,2.8vw,38px);background:var(--ground,var(--cream));border:0;text-align:left;cursor:pointer;
  transition:background .45s var(--ease)}
.cs-card:hover{background:var(--white)}
.cs-n{font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;color:var(--gold-deep);
  font-variant-numeric:lining-nums tabular-nums}
.cs-t{font-family:var(--serif);font-size:clamp(21px,2vw,28px);line-height:1.14;color:var(--ink);
  transition:font-style .3s var(--ease)}
/* every card keeps its copy: a collapsed card in a moving rail reads as broken */
.cs-b{display:block;font-size:16px;line-height:1.62;color:var(--mute);flex:1;
  opacity:.72;transition:opacity .4s var(--ease)}
.cs-card[aria-pressed="true"] .cs-b{opacity:1;color:var(--ink-soft)}
.cs-go{color:var(--gold-deep);opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cs-go svg{width:19px;height:19px;display:block}
.cs-card[aria-pressed="true"]{background:var(--white)}
.cs-card[aria-pressed="true"] .cs-t{font-style:italic}
.cs-card[aria-pressed="true"] .cs-go{opacity:1;transform:none}
.cs-foot{padding-top:clamp(18px,2.4vh,30px)}
.cs-rail{display:block;position:relative;height:1px;background:var(--line)}
.cs-rail i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0);
  transition:transform .2s linear}
/* not driven (phones, tablets, reduced motion): a normal snapping rail */
.cx--strip:not(.is-driven) .cs-view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.cx--strip:not(.is-driven) .cs-view::-webkit-scrollbar{display:none}
.cx--strip:not(.is-driven) .cs-track{transform:none!important}
.cx--strip:not(.is-driven) .cs-card{scroll-snap-align:start}
.cx--strip:not(.is-driven){padding-block:var(--sec-y)}
.is-driven .cs-view{padding-inline:0;margin-inline:var(--gutter)}
/* the rail steps card by card, so a card is always whole at the reading edge;
   the card peeking in at the right fades rather than being sliced */
.is-driven .cs-track{transition:transform .62s cubic-bezier(.22,.61,.36,1)}
.is-driven .cs-view{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,rgba(0,0,0,.12) 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 84%,rgba(0,0,0,.12) 100%)}
.is-driven.is-railend .cs-view{-webkit-mask-image:none;mask-image:none}
@media (prefers-reduced-motion:reduce){.is-driven .cs-track{transition:none}}
@media (max-width:900px){
  .cs-top{grid-template-columns:1fr;align-items:start}
  .cs-meta{justify-content:space-between;width:100%}
  .cs-face{width:110px}
  .cs-card{flex:0 0 min(80vw,300px)}
}

/* ---- chapters: book ------------------------------------------------------ */
.bk-top{margin-bottom:clamp(22px,2.6vw,34px)}
.bk-rail{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);margin-top:12px}
.bk-tab{display:flex;align-items:baseline;gap:10px;padding:14px clamp(14px,2vw,26px) 14px 0;border:0;
  border-top:2px solid transparent;margin-top:-1px;background:transparent;cursor:pointer;min-height:50px}
.bk-n{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--mute);font-variant-numeric:tabular-nums}
.bk-t{font-family:var(--caps);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  transition:color .35s var(--ease)}
.bk-tab[aria-pressed="true"]{border-top-color:var(--gold)}
.bk-tab[aria-pressed="true"] .bk-n,.bk-tab[aria-pressed="true"] .bk-t{color:var(--ink)}
.bk-spread{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4vw,70px);align-items:start}
.bk-body .ch-panel h3{font-size:clamp(28px,3.2vw,44px)}
.bk-body .ch-panel p{max-width:54ch}
.bk-fig{margin:0}
.bk-fig .ch-frame{aspect-ratio:3/4}
@media (max-width:900px){.bk-spread{grid-template-columns:1fr}.bk-fig .ch-frame{aspect-ratio:4/3}
  .bk-t{display:none}.bk-tab{padding-right:18px}}

/* ---- chapters: plate ----------------------------------------------------- */
.pt-fig{margin:0 0 clamp(-60px,-4vw,-30px)}
.ch-frame--wide{aspect-ratio:16/7}
.pt-cap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;flex-wrap:wrap}
.pt-rail{display:flex;gap:8px}
.pt-tab{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;
  font-family:var(--caps);font-size:12.5px;letter-spacing:.06em;color:var(--mute);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.pt-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pt-plate{position:relative;margin-left:auto;width:min(760px,100%);padding:clamp(26px,3.4vw,50px);
  background:var(--white);border:1px solid var(--line);box-shadow:0 30px 80px rgba(46,36,24,.07)}
.pt-plate .ch-panel h3{font-size:clamp(26px,3vw,40px)}
@media (max-width:900px){.pt-fig{margin-bottom:18px}.ch-frame--wide{aspect-ratio:4/3}.pt-plate{width:100%}}

/* ---- timeline: spine ----------------------------------------------------- */
.sp-list{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;position:relative}
.sp-list::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:var(--line)}
.sp-step{position:relative;padding-left:clamp(38px,4vw,58px)}
.sp-btn{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;width:100%;padding:16px 0 10px;
  border:0;background:transparent;text-align:left;cursor:pointer;min-height:52px}
.sp-dot{position:absolute;left:5px;top:24px;width:13px;height:13px;border-radius:50%;
  background:var(--ground,var(--cream));border:1px solid var(--line);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.sp-btn[aria-pressed="true"] .sp-dot{background:var(--gold);border-color:var(--gold);transform:scale(1.35)}
.sp-when{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  min-width:11ch}
.sp-title{font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.2;color:var(--ink)}
.sp-btn[aria-pressed="true"] .sp-title{font-style:italic}
.sp-body{padding:0 0 22px;border-bottom:1px solid var(--line)}
.sp-body p{margin:0;max-width:60ch;color:var(--ink-soft);line-height:1.7}
.sp-step:last-child .sp-body{border-bottom:0}
@media (max-width:640px){.sp-when{min-width:0;width:100%}}

/* ---- timeline: cards ----------------------------------------------------- */
.tc-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(26px,3vw,40px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:6px}
.tc-row::-webkit-scrollbar{display:none}
.tc-step{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;
  padding:clamp(22px,2.4vw,32px);background:var(--white);border:1px solid var(--line);cursor:pointer;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.tc-step[aria-pressed="true"]{border-color:var(--gold);transform:translateY(-8px);
  box-shadow:0 26px 60px rgba(46,36,24,.12)}
.tc-n{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.tc-when{font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tc-title{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);line-height:1.2;color:var(--ink)}
.tc-body{font-size:15.5px;line-height:1.6;color:var(--mute)}
@media (max-width:900px){.tc-row{grid-auto-columns:minmax(220px,78%)}}

/* ---- self-check: the ledger and its balance ------------------------------ */
.lg-heads{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:clamp(24px,3vw,40px)}
.lg-heads span{font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);padding:0 0 10px}
.lg-heads span:last-child{color:var(--mute)}
.lg-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lg-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.lg-row .sc-item{background:var(--ground,var(--cream));padding:15px clamp(14px,1.8vw,22px)}
.lg-row .sc-item:hover{background:var(--white)}
.lg-n .sc-box{border-color:var(--mute)}
.lg-n .sc-item[aria-checked="true"] .sc-box,.sc-item.lg-n[aria-checked="true"] .sc-box{background:var(--mute);border-color:var(--mute)}
.lg-scale{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,2.6vw,36px);align-items:center;
  margin-top:clamp(22px,2.6vw,34px);padding:clamp(22px,2.6vw,34px);background:var(--ink);color:var(--cream)}
.lg-beam{position:relative;width:96px;height:56px}
.lg-pivot{position:absolute;left:50%;bottom:0;width:0;height:0;transform:translateX(-50%);
  border-style:solid;border-width:0 9px 16px 9px;border-color:transparent transparent var(--gold-lite) transparent}
.lg-bar{position:absolute;left:8px;right:8px;top:18px;height:2px;background:var(--gold-lite);
  transform:rotate(var(--tilt,0deg));transform-origin:50% 50%;transition:transform .7s cubic-bezier(.3,1.4,.4,1)}
.lg-bar::before,.lg-bar::after{content:"";position:absolute;top:-5px;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--gold-lite)}
.lg-bar::before{left:-6px}.lg-bar::after{right:-6px}
.lg-scale .sc-say{color:var(--cream)}
.lg-scale .btn{background:var(--cream);color:var(--ink);border-color:var(--cream)}
@media (max-width:760px){
  .lg-heads,.lg-row{grid-template-columns:1fr}
  .lg-heads span:last-child{display:none}
  .lg-row .sc-item.lg-n{border-top:1px dashed var(--line)}
  .lg-scale{grid-template-columns:1fr;text-align:left}
}

/* ---- the skin, in cross-section ------------------------------------------ */
.sk{display:block;width:100%;height:auto}
@media (max-width:900px){.sk-lab text{font-size:15px}}
.sk-epi{fill:var(--gold);fill-opacity:.10}
.sk-derm{fill:var(--gold);fill-opacity:.05}
.sk-sub{fill:var(--gold);fill-opacity:.03}
.sk-surface{fill:none;stroke:var(--gold);stroke-width:2}
.sk-band{stroke:var(--gold);stroke-width:1}
.sk-cell path{fill:none;stroke:var(--gold);stroke-width:1;opacity:.5}
.sk-fib path{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.55;stroke-linecap:round}
.sk-fat circle{fill:none;stroke:var(--gold);stroke-width:1;opacity:.35}
.sk-lab text{font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--gold-deep)}
.sk-fuzz path{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.6;stroke-linecap:round}
.sk-new path{fill:none;stroke:var(--gold-deep);stroke-width:1.6;stroke-linecap:round;opacity:0;
  stroke-dasharray:110;stroke-dashoffset:110;transition:opacity .6s var(--ease),stroke-dashoffset 1.1s var(--ease)}
.sk-chan path{fill:none;stroke:var(--gold-deep);stroke-width:1.4;stroke-linecap:round;opacity:0;
  stroke-dasharray:170;stroke-dashoffset:170;transition:opacity .4s var(--ease),stroke-dashoffset .8s var(--ease)}
.sk-thread{opacity:0;transition:opacity .6s var(--ease)}
.sk-thread-line{fill:none;stroke:var(--gold-deep);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:calc(600 - 600 * var(--tp,0));transition:stroke-dashoffset .8s var(--ease)}
.sk-barb path{fill:none;stroke:var(--gold-deep);stroke-width:1.6;stroke-linecap:round}
.sk-peel{fill:var(--ground,var(--cream));transition:height .7s var(--ease)}
.sk-dead,.sk-l1,.sk-l2,.sk-l3{transition:opacity .7s var(--ease)}

/* peels drive it by depth */
.sk--peel .sk-thread,.sk--peel .sk-chan{display:none}
.md-depth[data-depth-level="1"] .sk--peel .sk-dead,.md-depth[data-depth-level="2"] .sk--peel .sk-dead{opacity:0}
.md-depth[data-depth-level="1"] .sk--peel .sk-l1{opacity:0}
.md-depth[data-depth-level="2"] .sk--peel .sk-l1,.md-depth[data-depth-level="2"] .sk--peel .sk-l2{opacity:0}
.md-depth[data-depth-level="1"] .sk--peel .sk-new path{opacity:.7;stroke-dashoffset:0}
.md-depth[data-depth-level="2"] .sk--peel .sk-new path{opacity:1;stroke-dashoffset:0}
.dp-stage{position:relative;max-width:820px;margin-inline:auto;padding-top:clamp(54px,6vw,74px)}
.dp-read{position:absolute;right:0;top:0;left:auto;bottom:auto;display:block;margin:0;text-align:right}
.dp-read b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,54px);line-height:1;
  color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.dp-read span{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.dp-controls{max-width:820px;margin:clamp(14px,2vw,22px) auto 0}
.dp-panels{max-width:760px;margin:clamp(22px,3vw,38px) auto 0}
.dp-panel h3{font-family:var(--serif);font-size:clamp(26px,3vw,38px);margin:0 0 14px}
.dp-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 16px}
.dp-facts div{background:var(--ground,var(--cream));padding:16px 18px}
.dp-facts dt{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:5px}
.dp-facts dd{margin:0;font-family:var(--serif);font-size:18px;color:var(--ink)}
.dp-panel p{max-width:62ch;color:var(--ink-soft);line-height:1.7}
@media (max-width:640px){.dp-read{position:static;text-align:left;margin-bottom:8px}.dp-facts{grid-template-columns:1fr}}

/* microneedling drives it by blade and by week */
.sk--two .sk-thread{display:none}
.tw-switch{display:inline-flex;max-width:100%;border:1px solid var(--line);border-radius:999px;padding:4px;
  margin-bottom:clamp(18px,2.4vw,28px)}
.tw-tab{flex:0 1 auto;min-width:0;white-space:nowrap}
.tw-tab{padding:11px clamp(16px,5vw,26px);min-height:46px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--caps);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease)}
.tw-tab[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.tw-stage{position:relative;max-width:820px;margin-inline:auto;touch-action:pan-y;cursor:grab}
.tw-stage:active{cursor:grabbing}
.tw-hint{position:absolute;left:50%;top:0;transform:translateX(-50%);font-family:var(--caps);font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);pointer-events:none;
  animation:twHint 2.6s ease-in-out infinite;transition:opacity .4s var(--ease)}
@keyframes twHint{0%,100%{transform:translateX(-50%) translateX(-14px)}50%{transform:translateX(-50%) translateX(14px)}}
.tw-stage.is-done .tw-hint{opacity:0}
.tw-blade{position:absolute;top:8%;height:16%;width:3px;background:var(--gold-deep);opacity:0;
  left:var(--bx,0%);box-shadow:0 0 0 1px rgba(250,247,242,.6);transition:opacity .3s var(--ease)}
.tw-stage.is-dragging .tw-blade{opacity:1}
/* Microneedling: the channels open, then close again as the weeks pass, the
   collagen draws itself in underneath, and the skin above visibly levels.
   Before this the only thing that moved was the channels, and the weeks slider
   sat below the fold, so it read as nothing happening at all. */
.sk-flat{opacity:0;transition:opacity .9s var(--ease)}
.sk-flat-fill{fill:var(--gold);fill-opacity:.10;stroke:none}
.sk-flat-s{fill:none;stroke:var(--gold);stroke-width:2}
.sk-flat-l{fill:none;stroke:var(--gold);stroke-width:1;opacity:.5}
.md-two[data-tw="1"] .sk-chan path{
  opacity:calc(.9 - var(--wk,0) * .72);stroke-dashoffset:0;
  transition:opacity .7s var(--ease),stroke-dashoffset .8s var(--ease)}
.md-two[data-tw="1"] .sk-new path{opacity:calc(var(--wk,0) * .95);stroke-dashoffset:calc(110 - 110 * var(--wk,0))}
.md-two[data-tw="1"] .sk-flat{opacity:var(--wk,0)}
.md-two[data-tw="1"] .sk-epi,
.md-two[data-tw="1"] .sk-cell path{opacity:calc(1 - var(--wk,0) * .92);transition:opacity .9s var(--ease)}
.md-two[data-tw="1"] .sk-dead{opacity:calc(1 - var(--wk,0)) !important}
/* the weeks control is the whole point of this mode, so it reads as a control */
.md-two[data-tw="1"] .tw-weeks{padding:16px 18px;border:1px solid var(--line);background:var(--white)}
.tw-wk{display:block;margin-top:8px;font-family:var(--caps);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep)}
.tw-wk b{font-weight:500}
@media (prefers-reduced-motion:reduce){
  .sk-flat,.md-two[data-tw="1"] .sk-chan path,.md-two[data-tw="1"] .sk-epi,
  .md-two[data-tw="1"] .sk-cell path{transition:none}
}
.tw-foot{max-width:760px;margin:clamp(18px,2.4vw,30px) auto 0}
.tw-say{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--ink-soft);max-width:60ch;min-height:5em}
/* the site sets .tw-weeks to display:block, which beats the browser's own
   [hidden] rule — a hidden element must actually be hidden */
.tw-weeks{display:block;margin-top:14px}
.tw-weeks[hidden],.md [hidden]{display:none}
.tw-weeks input{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;cursor:pointer}
.tw-weeks input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--gold) 0 var(--v,0%),var(--line) var(--v,0%) 100%)}
.tw-weeks input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--cream);border:1px solid var(--gold);box-shadow:0 4px 14px rgba(46,36,24,.18);margin-top:-12px}
.tw-weeks input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--cream);border:1px solid var(--gold)}
.tw-wk{display:block;margin-top:2px;font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}
@media (max-width:640px){.tw-say{min-height:0}}

/* threads drive it by month */
.sk--thread .sk-chan{display:none}
.sk--thread .sk-thread{opacity:1}
.lf-stage{position:relative;max-width:820px;margin-inline:auto;padding-top:clamp(56px,6vw,76px)}
.lf-stage .sk-thread-line{opacity:var(--thread,1)}
.lf-stage .sk-barb path{opacity:var(--thread,1)}
.lf-stage .sk-new path{opacity:calc(var(--coll,0) * .95);stroke-dashoffset:calc(110 - 110 * var(--coll,0))}
.lf-month{position:absolute;left:0;top:0;right:auto;bottom:auto;margin:0;display:flex;align-items:baseline;gap:12px}
.lf-controls{max-width:820px;margin:clamp(12px,1.8vw,20px) auto 0}
.lf-read{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,56px);
  align-items:center;max-width:980px;margin:clamp(22px,3vw,38px) auto 0}
.lf-chart svg{width:100%;height:auto;aspect-ratio:600/150;display:block;overflow:visible}
.lf-say{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--ink-soft);margin:0;min-height:5.4em}
@media (max-width:900px){.lf-read{grid-template-columns:1fr}.lf-say{min-height:0}
  .lf-month{position:static;margin-bottom:8px}}

/* ---- the treatments finder ----------------------------------------------- */
.fd-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4vw,70px);align-items:start}
.fd-q{padding:18px 0;border-top:1px solid var(--line)}
.fd-qt{margin:0 0 12px;font-family:var(--serif);font-size:clamp(18px,1.7vw,23px);color:var(--ink)}
.fd-qt span{font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;color:var(--gold-deep);margin-right:10px}
.fd-opts{display:flex;flex-wrap:wrap;gap:8px}
.fd-opt{padding:11px 18px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;
  font-family:var(--caps);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.fd-opt:hover{border-color:var(--gold)}
.fd-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.fd-side{position:sticky;top:calc(var(--hdr-h,88px) + 24px);padding:clamp(24px,2.8vw,40px);
  background:var(--white);border:1px solid var(--line)}
.fd-k{margin:0 0 14px;font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.fd-out{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--line);min-height:9em}
.fd-out li{border-bottom:1px solid var(--line)}
.fd-out a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:14px 0;
  min-height:52px;color:var(--ink);transition:padding-left .4s var(--ease)}
.fd-out a:hover{padding-left:6px}
.fd-out b{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.7vw,22px)}
.fd-out span{font-family:var(--caps);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}
.fd-empty{padding:18px 0;color:var(--mute);font-size:16px;border-bottom:0}
.fd-note{font-size:15px;line-height:1.6;color:var(--mute);margin:0 0 20px}
@media (max-width:900px){.fd-in{grid-template-columns:1fr}.fd-side{position:static}}

/* ---- the prices basket --------------------------------------------------- */
.md-basket{color:var(--cream)}
.md-basket .eyebrow{color:var(--gold-lite)}
.md-basket h2{color:var(--cream)}
.md-basket .lede{color:rgba(245,240,236,.76)}
.bs-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4vw,70px);align-items:start}
.bs-rows{border-top:1px solid rgba(245,240,236,.18)}
.bs-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;
  padding:15px 0;border:0;border-bottom:1px solid rgba(245,240,236,.18);background:transparent;text-align:left;
  cursor:pointer;min-height:56px;color:rgba(245,240,236,.8);transition:color .3s var(--ease)}
.bs-row:hover{color:var(--cream)}
.bs-row .sc-box{border-color:var(--gold-lite);margin-top:0}
.bs-row[aria-checked="true"]{color:var(--cream)}
.bs-row[aria-checked="true"] .sc-box{background:var(--gold-lite);border-color:var(--gold-lite)}
.bs-row[aria-checked="true"] .sc-box::after{transform:rotate(45deg) scale(1);border-color:var(--ink)}
.bs-t{font-family:var(--serif);font-size:clamp(17px,1.6vw,21px)}
.bs-p{font-family:var(--caps);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lite);white-space:nowrap}
.bs-side{position:sticky;top:calc(var(--hdr-h,88px) + 24px);padding:clamp(24px,2.8vw,40px);
  border:1px solid rgba(245,240,236,.22)}
.bs-k{margin:0 0 6px;font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite)}
.bs-total{margin:0 0 16px}
.bs-total b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.6vw,62px);line-height:1;
  color:var(--cream);font-variant-numeric:lining-nums tabular-nums}
.bs-total span{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,240,236,.6)}
.bs-chosen{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid rgba(245,240,236,.18)}
.bs-chosen li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid rgba(245,240,236,.14);font-size:15.5px;color:rgba(245,240,236,.8)}
.bs-chosen li b{font-weight:400;font-family:var(--caps);font-size:12px;letter-spacing:.12em;color:var(--gold-lite);white-space:nowrap}
.bs-note{font-size:14.5px;line-height:1.65;color:rgba(245,240,236,.66);margin:0 0 20px}
.bs-side .btn{background:var(--cream);color:var(--ink);border-color:var(--cream)}
@media (max-width:900px){.bs-in{grid-template-columns:1fr}.bs-side{position:static}}

/* ---- the weight-management year ------------------------------------------ */
.yr-arc{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin-top:clamp(26px,3vw,42px);padding-top:28px}
.yr-line{position:absolute;left:8%;right:8%;top:34px;height:1px;background:var(--line)}
.yr-line i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);
  transition:transform .6s var(--ease)}
.yr-mark{position:relative;background:transparent;border:0;padding:0 6px 4px;cursor:pointer;min-height:56px;
  display:flex;flex-direction:column;align-items:center;gap:16px}
.yr-dot{width:13px;height:13px;border-radius:50%;background:var(--ground,var(--cream));border:1px solid var(--line);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.yr-mark[aria-pressed="true"] .yr-dot{background:var(--gold);border-color:var(--gold);transform:scale(1.4)}
.yr-when{font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  text-align:center;transition:color .35s var(--ease)}
.yr-mark[aria-pressed="true"] .yr-when{color:var(--ink)}
.yr-panels{margin-top:clamp(24px,3vw,40px);min-height:10em}
.yr-panel h3{font-family:var(--serif);font-size:clamp(26px,3vw,38px);margin:0 0 12px}
.yr-panel p:last-child{max-width:60ch;color:var(--ink-soft);line-height:1.7;font-size:clamp(17px,1.5vw,19px)}
@media (max-width:760px){
  .yr-arc{grid-auto-flow:row;padding-top:0}
  .yr-line{display:none}
  .yr-mark{flex-direction:row;justify-content:flex-start;gap:14px;width:100%;padding:14px 0;border-bottom:1px solid var(--line)}
  .yr-when{text-align:left}
  .yr-panels{min-height:0}
}

/* ---- the rebuilt lip drawing --------------------------------------------- */
.lp-stage{position:relative;max-width:560px;margin-inline:auto;text-align:center}
.lp-svg{width:100%;height:auto;display:block}

.lp-line path{fill:none;stroke:var(--gold-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:d .8s cubic-bezier(.3,.9,.3,1)}

.lp-fill{fill:var(--gold);opacity:.13;transition:d .8s cubic-bezier(.3,.9,.3,1)}
.lp-read{margin:6px 0 0;font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.lp-controls{max-width:560px;margin:clamp(14px,2vw,22px) auto 0}
.lp-ticks{display:flex;gap:8px;justify-content:center;margin-bottom:6px}
.lp-tick{padding:10px 18px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;
  font-family:var(--caps);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.lp-tick[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.lp-panels{max-width:640px;margin:clamp(20px,2.6vw,34px) auto 0;min-height:8em;text-align:left}
@media (max-width:640px){.lp-panels{min-height:0}}

/* ---- fat: the profile beside the questions ------------------------------- */
.fc-side{position:sticky;top:calc(var(--hdr-h,88px) + 24px);text-align:center;padding:0;background:none;border:0}
.fc-side .ill{max-width:340px;margin-inline:auto}
.fc-caption{margin:10px 0 0;font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.fc-verdict{margin-top:clamp(22px,2.6vw,34px);padding:clamp(22px,2.6vw,34px);background:var(--white);border:1px solid var(--line)}
@media (max-width:900px){.fc-side{position:static}.fc-side .ill{max-width:230px}}

/* ---- after weight loss: the profile and the scrubber --------------------- */
.em-scrub{margin:clamp(18px,2.4vw,28px) 0}
.em-marks{display:flex;gap:10px;margin-top:4px}
.em-mark{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:transparent;
  cursor:pointer;min-width:44px;min-height:44px}
.em-mark i{width:11px;height:11px;border-radius:50%;background:var(--ground,var(--cream));border:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.em-mark span{font-family:var(--caps);font-size:12px;letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums}
.em-mark[aria-pressed="true"] i{background:var(--gold);border-color:var(--gold);transform:scale(1.4)}
.em-mark[aria-pressed="true"] span{color:var(--ink)}
.em-face .ill{max-width:420px;margin-inline:auto}
@media (max-width:900px){.em-face .ill{max-width:300px}}
.fd-why{margin:0 0 12px;font-size:15px;color:var(--mute)}
.fd-out li a+.fd-why{margin-top:-8px}

/* the card and filmstrip shapes carry their copy inside the control, so the
   click has to do something: the unchosen ones show their title only */
.tc-body{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s var(--ease),opacity .4s var(--ease),margin .4s var(--ease);
  overflow:hidden;margin-top:0}
.tc-body>*{min-height:0}
.tc-step[aria-pressed="true"] .tc-body{grid-template-rows:1fr;opacity:1;margin-top:2px}
@supports not (grid-template-rows:0fr){
  .tc-body{display:block;max-height:0}
  .tc-step[aria-pressed="true"] .tc-body{max-height:24em}
}
.tc-step{align-content:start}
.tc-row{align-items:stretch}

/* ==========================================================================
   THE FOOTER — three columns and a rule
   The old one stacked a centred lockup, a four-column grid and a legal bar:
   three full-width bands, and the tallest thing on any page.
   ========================================================================== */
.foot{position:relative;overflow:hidden;padding-block:clamp(44px,5vw,72px) 0}
/* Both flanks are 1fr and the mark is the auto track between them, so the
   lockup lands on the footer's true centre line however long the lists are. */
.fx-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(26px,3.4vw,60px);align-items:start;padding-bottom:clamp(30px,3.4vw,46px)}
.fx-side{display:grid;gap:clamp(20px,2.6vw,44px)}
.fx-side--left{grid-template-columns:1fr}
/* eleven treatments in one column would tower over everything else */
.fx-side--left ul{columns:2;column-gap:clamp(18px,2.2vw,36px)}
.fx-side--left li{break-inside:avoid}
.fx-side--right{grid-template-columns:minmax(0,auto) minmax(0,auto);justify-content:end;
  justify-items:start}
.fx-col ul{list-style:none;margin:0;padding:0}
.fx-col li{margin:0}
.fx-h{margin:0 0 12px;font-family:var(--caps);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lite)}
.fx-col a{display:block;padding:4px 0;font-size:14.5px;line-height:1.45;color:rgba(245,240,236,.72);
  text-wrap:pretty;transition:color .3s var(--ease),transform .3s var(--ease)}
.fx-col a:hover{color:var(--cream);transform:translateX(3px)}
.fx-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  padding-inline:clamp(8px,2vw,30px);width:max-content;max-width:100%}
.fx-logo{width:clamp(138px,13vw,186px);height:auto;color:var(--cream)}
.fx-strap{margin:0;font-family:var(--caps);font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(245,240,236,.56)}
.fx-cta{margin-top:4px;white-space:nowrap}
.btn--line{background:transparent;border:1px solid rgba(245,240,236,.34);color:var(--cream);
  padding:13px 24px;min-height:48px}
.btn--line:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.fx-col--contact{min-width:max-content}
.fx-col--contact ul{margin-bottom:12px}
.fx-col--contact a{font-size:15.5px}
.fx-addr,.fx-hours{margin:0 0 10px;font-size:14px;line-height:1.6;color:rgba(245,240,236,.6)}
.fx-hours span{color:var(--gold-lite)}
.fx-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 26px;
  padding-block:16px;border-top:1px solid rgba(245,240,236,.16);
  font-size:13px;color:rgba(245,240,236,.5)}
.fx-legal{display:flex;gap:20px;flex-wrap:wrap}
.fx-legal a{color:rgba(245,240,236,.5);transition:color .3s var(--ease)}
.fx-legal a:hover{color:var(--cream)}
.fx-age{text-align:right}
.foot .fx-mark-old,.foot .foot-mark{display:none}
.foot::after{content:"";position:absolute;left:auto;top:auto;right:-4%;bottom:-18%;width:min(34%,380px);
  aspect-ratio:1;background:url(/assets/brand/luxe-monogram-cc.svg) no-repeat center/contain;opacity:.05;
  pointer-events:none;filter:brightness(0) invert(1)}
@media (max-width:1180px){
  .fx-in{gap:clamp(20px,2.4vw,36px)}
  .fx-logo{width:clamp(126px,12vw,158px)}
}
@media (max-width:1240px){
  /* the mark leads, and the three lists keep their four columns beneath it */
  .fx-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);row-gap:clamp(26px,3.4vw,40px)}
  .fx-brand{grid-column:1 / -1;order:-1;align-items:center;margin-inline:auto}
  .fx-side--right{grid-template-columns:minmax(0,auto) minmax(0,auto);justify-content:start;
    gap:clamp(20px,3vw,40px)}
}
@media (min-width:601px) and (max-width:900px){
  /* between a phone and a full tablet there is room for three columns of
     treatments and the two right-hand blocks side by side, but not for the
     two-across layout, which squeezes the email until it is clipped */
  .fx-in{grid-template-columns:1fr;row-gap:clamp(26px,3.4vw,38px)}
  .fx-side--left ul{columns:3;column-gap:clamp(18px,3vw,34px)}
  .fx-side--left li{break-inside:avoid}
  .fx-side--right{grid-template-columns:minmax(0,1fr) minmax(0,auto);
    justify-content:start;gap:clamp(24px,4vw,48px)}
  .fx-col--contact{grid-column:auto}
}
@media (max-width:600px){
  .fx-in{grid-template-columns:1fr}
  .fx-side--right{grid-template-columns:1fr;gap:26px;justify-content:stretch}
  .fx-col--contact{grid-column:1 / -1}
  .fx-side--left ul,.fx-col--explore ul{columns:2;column-gap:clamp(16px,3vw,34px)}
  .fx-side--left li,.fx-col--explore li{break-inside:avoid}
}
@media (max-width:520px){
  .fx-side--left ul,.fx-col--explore ul{column-gap:16px}
  .fx-side{gap:24px}
  .fx-in{row-gap:30px}
  .foot{padding-block:36px 0}
  .fx-brand{gap:12px}
  .fx-bottom{justify-content:flex-start}
  .fx-age{text-align:left;width:100%}
}
@media (pointer:coarse){.fx-col a,.fx-legal a{min-height:44px;display:flex;align-items:center}}


/* ---- the mark, larger, and larger again before you scroll ---------------- */
.demo1 .brand-mark{height:clamp(62px,6vw,96px)}
.demo1 .hdr.is-stuck .brand-mark{height:clamp(48px,4.2vw,66px)}
/* on the homepage it starts larger still and settles as the header sticks */
.is-home .demo1 .brand-mark{height:clamp(70px,7.6vw,118px)}
.is-home .demo1 .hdr.is-stuck .brand-mark{height:clamp(48px,4.2vw,66px)}
@media (max-width:1060px){
  .demo1 .brand-mark,.is-home .demo1 .brand-mark{height:clamp(52px,13vw,76px)}
  .demo1 .hdr.is-stuck .brand-mark,.is-home .demo1 .hdr.is-stuck .brand-mark{height:clamp(44px,10vw,58px)}
}

/* ---- the film, full width, on the homepage ------------------------------ */
.md-filmwide{padding:0}
/* The film is built from the clinic's own phone photographs, so there is only
   about 1200px of real detail in it. Run edge to edge on a wide screen it was
   being stretched half as far again and looked soft. Framed at 1180 it plays
   at its true size and reads sharp. */
.fw-frame{position:relative;margin-inline:auto;max-width:1180px;
  min-height:min(64svh,620px);display:flex;align-items:flex-end;overflow:hidden}
.md-filmwide{padding-block:clamp(38px,4.6vw,78px)}
.fw-cap{padding-inline:clamp(26px,3.4vw,52px)}
.fw-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fw-wash{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(20,16,12,.86) 0 34%, rgba(20,16,12,.52) 56%, rgba(20,16,12,.18) 78%),
  linear-gradient(0deg, rgba(20,16,12,.7) 0 12%, rgba(20,16,12,0) 46%)}
.fw-cap{position:relative;z-index:1;padding-block:clamp(44px,6vw,86px);max-width:var(--shell)}
.fw-cap h2{color:var(--cream);max-width:15ch;margin:10px 0 14px}
.fw-cap .eyebrow{color:var(--gold-lite)}
.fw-cap .lede{color:rgba(245,240,236,.8);max-width:44ch}
.fw-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,32px)}
.fw-cap .link-u{color:var(--gold-lite)}
@media (max-width:1240px){.fw-frame{max-width:none;margin-inline:var(--gutter)}}
@media (max-width:900px){.fw-frame{min-height:min(70svh,560px);margin-inline:0}
  .md-filmwide{padding-block:0}
  .fw-cap{padding-inline:var(--gutter)}
  .fw-wash{background:linear-gradient(0deg, rgba(20,16,12,.9) 0 34%, rgba(20,16,12,.25) 78%)}}

/* ---- the scroll-through sections ---------------------------------------
   A runway as tall as one screen per step with a sticky panel inside it.
   Only a couple of pages use this; a page full of them reads as a gimmick.
   Below 900px and under reduced motion the runway collapses to nothing and
   the numbered buttons do the work on their own. */
.tl--scroll,.md-prp--scroll{padding-block:0}
.rn-run{position:relative}
.rn-pin{position:relative}
.is-driven .rn-run{height:calc(var(--n) * 78svh + 22svh)}
.is-driven .rn-pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.rn-inner{width:100%}
.is-driven .rn-pin>.rn-inner{width:100%}
.is-driven .tl-head{margin-bottom:clamp(10px,2vh,22px)}
.is-driven .tl-track{margin-top:clamp(16px,3vh,32px)}
.is-driven .tl-panels{margin-top:clamp(18px,3vh,34px);min-height:0}
.is-driven .rv{opacity:1;transform:none}
.is-driven .stp-nav{display:none}
/* the numerals across the rail: the thing the client asked to have back */
.tl-num{display:none;font-family:var(--caps);font-size:12px;letter-spacing:.18em;color:var(--gold-deep);
  font-variant-numeric:lining-nums tabular-nums;transition:color .35s var(--ease)}
.tl--scroll .tl-num{display:block}
.tl--scroll .tl-mark[aria-pressed="true"] .tl-num{color:var(--ink)}
.tl--scroll .tl-mark{gap:10px}
.tl--scroll .tl-panel h3{font-size:clamp(28px,3.4vw,46px)}
.tl--scroll .tl-panel p:last-child{font-size:clamp(18px,1.6vw,21px);max-width:54ch}
/* a quiet cue that this one is scrolled through */
.is-driven .rn-pin::after{content:"Scroll";position:absolute;left:50%;bottom:clamp(18px,3vh,34px);
  transform:translateX(-50%);font-family:var(--caps);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mute);opacity:.6;animation:rnCue 2.6s ease-in-out infinite}
@keyframes rnCue{0%,100%{transform:translateX(-50%) translateY(0);opacity:.35}50%{transform:translateX(-50%) translateY(5px);opacity:.75}}
.md-prp--scroll.is-driven .pr4-in{align-items:center}
@media (max-width:900px){.tl--scroll,.md-prp--scroll{padding-block:var(--sec-y)}}
@media (prefers-reduced-motion:reduce){
  .is-driven .rn-run{height:auto}
  .is-driven .rn-pin{position:static;min-height:0}
  .is-driven .rn-pin::after{display:none}
}

/* ==========================================================================
   THE FINISHING LAYER
   ========================================================================== */

/* a hairline draws across before each heading arrives */
.rule-draw::before{transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.2,.75,.2,1)}
.rule-draw.is-drawn::before{transform:scaleX(1)}

/* photographs arrive behind a mask that lifts */
.wipe{position:relative}
.wipe::after{content:"";position:absolute;inset:0;background:var(--ground,var(--cream));z-index:2;
  transform-origin:right;transform:scaleX(1);pointer-events:none;
  transition:transform 1.05s cubic-bezier(.75,0,.16,1)}
.wipe.is-wiped::after{transform:scaleX(0)}
.g-ink .wipe::after,.on-ink .wipe::after{background:var(--ink)}
.band .wipe::after,.band-media.wipe::after{background:var(--cream)}

/* the line drawings drift a little under the pointer */
.ill{transition:transform .7s cubic-bezier(.2,.75,.2,1);will-change:transform}

/* a hairline of progress under the header */
.read-bar{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;
  background:linear-gradient(90deg,var(--gold-lite),var(--gold),var(--gold-deep));
  transform:scaleX(0);transform-origin:left;pointer-events:none}

/* the numerals on a fact strip settle rather than appear */
.ph-fact dd{font-variant-numeric:lining-nums tabular-nums}

@media (prefers-reduced-motion:reduce){
  .rule-draw::before{transform:none}
  .wipe::after{display:none}
  .ill{transition:none}
  .read-bar{display:none}
}

/* the scroll timeline uses the whole width: the copy on the left, the step's
   own numeral set large on the right */
.tl-body{display:block}
.tl-ghost{display:none}
.tl--scroll .tl-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,70px);
  align-items:center}
.tl--scroll .tl-ghost{display:flex;align-items:baseline;gap:14px;margin:0;color:var(--gold);opacity:.22}
.tl--scroll .tl-ghost span{font-family:var(--serif);font-size:clamp(90px,13vw,190px);line-height:.82;
  font-variant-numeric:lining-nums tabular-nums}
.tl--scroll .tl-ghost i{font-family:var(--caps);font-style:normal;font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);opacity:.8}
@media (max-width:900px){.tl--scroll .tl-body{grid-template-columns:1fr}.tl--scroll .tl-ghost{display:none}}

/* ==========================================================================
   LONG-FORM PAGES — a spine, not a single column of type
   ========================================================================== */
.rt-grid{display:grid;grid-template-columns:minmax(0,296px) minmax(0,1fr);
  gap:clamp(30px,5vw,88px);align-items:start}
.rt-spine{position:sticky;top:calc(var(--hdr-h,88px) + 28px);display:flex;flex-direction:column;gap:18px}
.rt-spine-h{margin:0;font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep)}
.rt-spine ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rt-spine li{border-bottom:1px solid var(--line)}
.rt-spine a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:baseline;
  padding:12px 0;min-height:48px;font-size:15px;line-height:1.4;color:var(--mute);
  transition:color .3s var(--ease),padding-left .3s var(--ease)}
.rt-spine a span{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;color:var(--gold-deep);
  font-variant-numeric:lining-nums tabular-nums}
.rt-spine a:hover{color:var(--ink);padding-left:4px}
.rt-spine a.is-here{color:var(--ink);font-style:italic}
/* the same button as everywhere else, on one line: the column is sized to
   hold it rather than the button being squeezed into the column */
/* exactly the site's standard ink button — `.rt-spine a` (0-1-1) outranks
   `.btn` (0-1-0), so the CTA has to restate it at the same weight */
.rt-spine a.rt-spine-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--tap-lg);padding:0 20px;margin-top:6px;white-space:nowrap;line-height:1;
  font-family:var(--caps);font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  font-style:normal;color:var(--cream);background:var(--ink);border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(198,168,124,.38)}
.rt-spine a.rt-spine-cta:hover{background:var(--gold-deep);color:var(--cream);padding-left:20px}
@media (max-width:980px){.rt-spine a.rt-spine-cta{align-self:start;padding:0 32px}
  .rt-spine a.rt-spine-cta:hover{padding-left:32px}}
.rt-in{max-width:64ch}
.rt-in h2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.6vw,22px);align-items:baseline;
  font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:clamp(44px,5vw,76px) 0 18px;max-width:none;
  scroll-margin-top:calc(var(--hdr-h,88px) + 24px)}
.rt-in h2:first-child{margin-top:0}
.rt-n{font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;color:var(--gold-deep);
  font-variant-numeric:lining-nums tabular-nums}
.rt-in h3{font-size:clamp(19px,1.9vw,25px);margin:clamp(28px,3vw,42px) 0 10px}
.rt-in p{margin:0 0 18px;line-height:1.78}
/* the opening paragraph of each chapter carries the weight */
.rt-in h2+p{font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);line-height:1.5;color:var(--ink)}
.rt-list{list-style:none;margin:0 0 20px;padding:0}
.rt-list li{position:relative;padding-left:24px;margin-bottom:10px;line-height:1.7;color:var(--ink-soft)}
.rt-list li::before{content:"";position:absolute;left:0;top:.82em;width:11px;height:1px;background:var(--gold)}
@media (max-width:980px){
  .rt-grid{grid-template-columns:1fr}
  .rt-spine{position:static;order:-1;padding-bottom:8px}
  .rt-spine ol{columns:2;column-gap:28px}
  .rt-spine li{break-inside:avoid}
  .rt-in{max-width:none}
}

/* ==========================================================================
   THE HERO, DRESSED
   ========================================================================== */
/* a slow sweep of light crosses the photograph as the page settles */
.pagehero-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,248,235,.42) 46%,transparent 62%);
  transform:translateX(-60%);animation:heroSweep 2.4s cubic-bezier(.5,0,.2,1) .35s both}
@keyframes heroSweep{to{transform:translateX(70%)}}
/* the fact strip draws its rules, then the facts arrive one at a time */
.ph-facts-in{position:relative}
.ph-fact{position:relative}
.ph-fact dt,.ph-fact dd{opacity:0;transform:translateY(10px);
  animation:factIn .7s cubic-bezier(.2,.75,.2,1) forwards;
  animation-delay:calc(.55s + var(--i,0) * .11s)}
.ph-fact dd{animation-delay:calc(.63s + var(--i,0) * .11s)}
@keyframes factIn{to{opacity:1;transform:none}}
/* a hairline settles under the eyebrow of every page hero */
.pagehero .eyebrow::before{transform-origin:left;animation:ruleIn 1s cubic-bezier(.2,.75,.2,1) .2s both}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* a gold hairline marks the join between two grounds */
.sec+.sec::before,.md+.md::before,.sec+.md::before,.md+.sec::before{content:"";position:absolute;
  left:50%;top:0;width:min(1100px,86%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(168,131,79,.3),transparent)}
.sec,.md{position:relative}

@media (prefers-reduced-motion:reduce){
  .pagehero-bg::before{display:none}
  .ph-fact dt,.ph-fact dd{opacity:1;transform:none;animation:none}
  .pagehero .eyebrow::before{animation:none;transform:none}
}

/* ==========================================================================
   THE LAST LAYER — the small expensive things
   ========================================================================== */

/* a soft light follows the pointer across every hero photograph */
.pagehero-bg,.hero-bg,.fw-frame{--mx:70%;--my:40%}
.pagehero-bg::after,.hero-bg::after{
  background-image:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255,246,228,.22), transparent 62%),
    var(--hero-wash, none)}
.pagehero-bg::after{background-image:
  radial-gradient(460px circle at var(--mx) var(--my), rgba(255,246,228,.20), transparent 62%),
  linear-gradient(90deg, var(--cream) 0 26%, rgba(250,247,242,.9) 44%,
    rgba(250,247,242,.14) 64%, rgba(250,247,242,0) 78%),
  linear-gradient(180deg, rgba(250,247,242,0) 58%, var(--cream) 100%)}

/* the finest possible film grain over the photography: it stops a flat
   gradient reading as a print-out */
.pagehero-bg::before,.band-media::before,.fw-frame::before{
  background-image:linear-gradient(105deg,transparent 30%,rgba(255,248,235,.42) 46%,transparent 62%),
    url(/assets/images/grain.png)}
.band-media::before,.fw-frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;animation:none;transform:none}

/* the menu underline draws from the middle out */
.demo1 .navlink{position:relative}
.demo1 .navlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;
  transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.demo1 .navlink:hover::after,.demo1 .navlink.is-here::after{transform:scaleX(1)}

/* every button gets a light that crosses it on hover */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,246,228,.34) 50%,transparent 66%);
  transform:translateX(-110%);transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.btn:hover::after{transform:translateX(110%)}

/* the ruled index rows draw a gold edge as they are hovered */
.demo1 .ti-row,.ix-card,.cx-row,.ch-tab,.fx-col a{position:relative}
.demo1 .ti-row::before,.ix-card::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.demo1 .ti-row:hover::before,.ix-card:hover::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .pagehero-bg::after,.hero-bg::after{background-image:
    linear-gradient(90deg, var(--cream) 0 26%, rgba(250,247,242,.9) 44%,
      rgba(250,247,242,.14) 64%, rgba(250,247,242,0) 78%),
    linear-gradient(180deg, rgba(250,247,242,0) 58%, var(--cream) 100%)}
  .btn::after,.demo1 .navlink::after,.demo1 .ti-row::before,.ix-card::before{transition:none}
}