/* ══════════════════════════════════════════════════════════════════════
   DERMALOGIC — shared site layer
   Header · mega menu · drawer · footer · section scaffolding · components.
   Every page loads this; index.html layers its hero/rail/chapters on top.

   Laws carried over from docs/design (TOKENS, TYPE-SCALE, DIRECTION):
   · one signal colour (eucalyptus); clay & brass never carry text on light
   · Playfair Display (display serif) floor 28px — anything smaller is DM Sans
   · motion is transform + opacity only, eases are the two named curves
   · prefers-reduced-motion switches motion OFF, not shorter
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── DERMALOGIC BRAND PALETTE ───────────────────────────────────────
     Terracotta #A85D3D · Charcoal Brown #4A4140 · Aqua #55BFC8
     Warm Cream #F5E9DD · Soft Ivory #FBF8F4 · Sand Beige #E8D4C3 · Pale Aqua #DCEEEF
     Text #242323 / #756A66 · White #FFFFFF
     Nothing outside this list; every value below is one of these. */
  --terracotta:#A85D3D;   /* the accent: CTAs, links, active states, accent type */
  --charcoal:#4A4140;     /* headings-weight ink, nav, footer ground, dark UI */
  --aqua:#55BFC8;         /* accent only — icons, focus rings, small marks */
  --sand:#E8D4C3;         /* separators, secondary surfaces, decorative grounds */
  --pale-aqua:#DCEEEF;    /* the lightest supporting tint */
  --white:#FFFFFF;        /* only where contrast on terracotta/charcoal needs it */
  --err:#9C4A34;          /* invalid states — the deep end of the terracotta family */

  --bg:#FBF8F4;                                                  /* Soft Ivory ground — the light one */
  --on:#4A4140; --on-2:#4A4140; --on-3:#756A66;                  /* primary · charcoal · secondary */
  --eucalyptus:var(--terracotta); --brass:var(--terracotta); --clay:var(--sand);  /* legacy names, brand values */
  --surface:var(--white); --surface-2:var(--sand); --line:var(--sand); --blush:#F5E9DD; --blush-line:var(--sand);
  /* dark ground — the footer, now Charcoal Brown */
  /* --dk-on-3 is Sand Beige dimmed against the charcoal rather than a new tone;
     .8 keeps the muted footer line at ~5:1, which a solid mid-tone would not */
  --dk:var(--charcoal); --dk-on:#FBF8F4; --dk-on-2:var(--sand); --dk-on-3:rgba(232,212,195,.8);
  --dk-euc:var(--aqua); --dk-brass:var(--sand); --dk-line:#756A66; --dk-surface:#242323;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --monof:"DM Sans",-apple-system,sans-serif;
  /* the two type tokens the whole site leans on:
     --micro = tracked uppercase labels · --small = body copy, nav, buttons */
  --micro:.875rem; --small:1.0625rem;
  --e-out:cubic-bezier(0.16,1,0.3,1);
  --e-soft:cubic-bezier(0.33,1,0.68,1);
  --gut:clamp(40px,5vw,96px);
  --hdr:76px;
  --sh-card:0 34px 70px -42px rgba(36,35,35,.42), 18px 18px 0 -17px rgba(168,93,61,.5);
}
@media(max-width:720px){:root{--gut:clamp(22px,6vw,40px);--hdr:64px}}

*{box-sizing:border-box}
html,body{margin:0;font-variant-numeric:lining-nums;background:var(--bg);color:var(--on);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
.mono{font-family:var(--monof);font-size:var(--micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html.lock,html.lock body{overflow:hidden}
:focus-visible{outline:2px solid var(--eucalyptus);outline-offset:3px}

.skip{position:fixed;left:16px;top:12px;z-index:200;background:var(--on);color:var(--white);padding:12px 16px;
  font-size:var(--small);text-decoration:none;border-radius:2px;transform:translateY(-160%);transition:transform .3s var(--e-out)}
.skip:focus{transform:none}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  font:500 var(--small)/1 var(--sans);color:var(--white);text-decoration:none;white-space:nowrap;
  padding:17px 27px;border:1px solid var(--eucalyptus);border-radius:2px;background:var(--eucalyptus);cursor:pointer;
  box-shadow:0 18px 34px -18px rgba(168,93,61,.55);transform:translate(var(--mx),var(--my));
  transition:background .3s var(--e-soft),border-color .3s var(--e-soft),color .3s var(--e-soft),box-shadow .3s var(--e-soft),transform .5s var(--e-out)}
.btn:hover{background:var(--on);border-color:var(--on);box-shadow:0 22px 40px -18px rgba(36,35,35,.5)}
.btn:focus-visible{outline:2px solid var(--aqua);outline-offset:4px}
/* a phone cannot hold a long label on one line at 16px — nowrap made the button
   wider than the screen and dragged its grid column out with it */
/* nowrap is right for a button standing in open space; inside a narrow card it
   clips the label instead. These two hold long labels in tight columns. */
.quote .btn,.callcard .btn,.ci a{white-space:normal;overflow-wrap:anywhere}
.quote .btn{text-align:center}
/* a booking button while its Stripe deposit page is being prepared (site.js §15a) */
.btn[aria-busy="true"],.cta-btn[aria-busy="true"]{opacity:.65;cursor:progress;pointer-events:none}
/* and on a phone no button label fits on one line at 16px */
@media(max-width:720px){.btn,.cta-btn{white-space:normal;text-align:center}}
.btn .ar{display:inline-block;transition:transform .4s var(--e-out)}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn.sm{padding:13px 20px;font-size:.9375rem;gap:10px}
.btn.ghost{background:transparent;color:var(--on);border-color:rgba(36,35,35,.28);box-shadow:none}
.btn.ghost:hover{background:var(--on);border-color:var(--on);color:var(--white)}
.btn.light{background:var(--dk-on);border-color:var(--dk-on);color:var(--dk);box-shadow:none}
.btn.light:hover{background:var(--dk-euc);border-color:var(--dk-euc)}
.btn.line-light{background:transparent;color:var(--dk-on);border-color:rgba(251,248,244,.3);box-shadow:none}
.btn.line-light:hover{background:var(--dk-on);color:var(--dk)}

/* text link with a travelling underline */
.tlink{display:inline-flex;align-items:center;gap:10px;font:500 var(--small)/1.2 var(--sans);color:var(--on);
  text-decoration:none;padding-bottom:6px;background:linear-gradient(var(--eucalyptus),var(--eucalyptus)) 0 100%/100% 1px no-repeat;
  transition:background-size .5s var(--e-out)}
.tlink:hover{background-size:0 1px;background-position:100% 100%}
.tlink .ar{transition:transform .4s var(--e-out)}
.tlink:hover .ar{transform:translateX(4px)}

/* ── leave veil ─────────────────────────────────────────────────────── */
.veil{position:fixed;inset:0;z-index:300;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .32s var(--e-soft)}
.veil.on{opacity:1;pointer-events:auto}

/* ══ HEADER ═══════════════════════════════════════════════════════════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--hdr);padding:0 var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  transition:transform .6s var(--e-out),opacity .6s var(--e-soft),background-color .45s var(--e-soft),box-shadow .45s var(--e-soft)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr.is-solid,.hdr.mega-open{background:rgba(251,248,244,.96);box-shadow:0 1px 0 var(--line)}
/* home: the opening frame is the wordmark alone — the bar arrives with the intro,
   exactly where the old top-left locator and top-right link used to fade in.
   Keyboard users get it immediately. */
.hdr.pre{opacity:0;pointer-events:none}
.hdr.pre:focus-within{opacity:1;pointer-events:auto}
/* …but not on a phone or tablet. There the opening frame was a wordmark on a
   blank screen with no menu until the visitor scrolled, which reads as a page
   that failed to load. The bar is shown from the first frame; it is still
   transparent here, and the logo is still held back until the hero is passed
   (.home:not(.past-hero) below), so the frame gains only the menu button. */
@media(max-width:980px){.hdr.pre{opacity:1;pointer-events:auto}}
.hdr-brand{position:relative;justify-self:start;text-decoration:none;color:var(--on);display:grid;align-items:center;height:44px}
.hdr-brand>*{grid-area:1/1;transition:opacity .45s var(--e-soft),transform .6s var(--e-out)}
.hdr-word{font-family:var(--serif);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.75rem;line-height:1;letter-spacing:-.02em}
.hdr-loc{opacity:0;color:var(--on);font-size:.875rem;pointer-events:none}
/* the supplied lockup (https://res.cloudinary.com/hpivcf9y/image/upload/v1791524078/dermalogic-logo.webp), when there is one. It sits in the
   same grid cell as .hdr-word and .hdr-loc — .hdr-brand>* puts all three at
   1/1 — so the three cross-fade against each other and the bar never reflows.
   Sized by HEIGHT with width:auto, so whatever aspect ratio the file has is
   the aspect ratio it keeps; nothing here assumes one.
   It ships hidden. site.js §16 adds .has-logo only after the image really
   decoded, so a missing or corrupt file leaves the type wordmark in place
   instead of a broken-image icon. See media/brand/README.md. */
.hdr-logo{height:50px;width:auto;display:block;opacity:0;pointer-events:none}
.hdr-brand.has-logo .hdr-logo{opacity:1}
.hdr-brand.has-logo .hdr-word{opacity:0}
/* home: the hero owns the wordmark, so the header shows the locator until the hero is behind us */
.home:not(.past-hero) .hdr-word{opacity:0;transform:translateY(8px)}
.home:not(.past-hero) .hdr-loc{opacity:1}
/* …and the logo replaces the wordmark, so it waits for the hero in exactly the
   same way. Listed after .has-logo above, and more specific, so it wins. */
.home:not(.past-hero) .hdr-brand.has-logo .hdr-logo{opacity:0;transform:translateY(8px)}

.hdr-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,2.4vw,38px)}
.hdr-link{position:relative;display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:10px 0;cursor:pointer;
  font:500 var(--small)/1 var(--sans);color:var(--on);text-decoration:none}
.hdr-link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--eucalyptus);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out)}
.hdr-link:hover::after,.hdr-link[aria-current="page"]::after,.hdr-link[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left}
.hdr-link svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .45s var(--e-out)}
.hdr-link[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr-act{justify-self:end;display:flex;align-items:center;gap:14px}
/* the number is a call-to-action, not a caption: terracotta on an outlined pill
   so it reads as the secondary action beside the filled Book button — same
   height and radius, one step down in weight. */
.hdr-tel{display:inline-flex;align-items:center;gap:9px;color:var(--terracotta);text-decoration:none;
  font-size:.875rem;font-weight:600;letter-spacing:.16em;padding:11px 16px;border:1px solid rgba(168,93,61,.42);
  border-radius:2px;white-space:nowrap;
  transition:color .3s var(--e-soft),background .3s var(--e-soft),border-color .3s var(--e-soft)}
.hdr-tel svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hdr-tel:hover{color:var(--white);background:var(--terracotta);border-color:var(--terracotta)}
.hdr-tel:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.hdr-burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;
  position:relative;padding:0}
.hdr-burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--on);transition:transform .5s var(--e-out)}
.hdr-burger span:first-child{top:17px}.hdr-burger span:last-child{top:25px}
.hdr-burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.hdr-burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:1180px){.hdr-tel{display:none}}
@media(max-width:980px){
  .hdr{grid-template-columns:1fr auto}
  .hdr-nav{display:none}
  .hdr-burger{display:block}
}
@media(max-width:520px){.hdr-act .btn{display:none}}

/* mega menu: drops under the bar; columns arrive in a short stagger */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);box-shadow:0 1px 0 var(--line),0 40px 60px -40px rgba(36,35,35,.28);
  padding:clamp(28px,4vh,44px) var(--gut) 0;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .35s var(--e-soft),transform .55s var(--e-out),visibility 0s linear .55s}
.hdr.mega-open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--e-soft),transform .55s var(--e-out)}
.mega-in{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,1.35fr);gap:clamp(18px,2.4vw,40px)}
.mega-col{opacity:0;transform:translateY(10px);transition:opacity .4s var(--e-soft),transform .6s var(--e-out)}
.hdr.mega-open .mega-col{opacity:1;transform:none;transition-delay:calc(var(--i)*45ms + 60ms)}
.mega-h{margin:0 0 16px;color:var(--eucalyptus);display:flex;align-items:center;gap:10px;font-size:.8125rem}
.mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
/* Six tracks: Skin, Injectables, Hair, Laser, then Concerns (two tracks). Concerns carries 15 entries: it takes two tracks and splits its list across them */
.mega-wide{grid-column:span 2}
.mega-wide ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2.4vw,40px)}
.mega-col a{font-size:1rem;color:var(--on-2);text-decoration:none;transition:color .25s var(--e-soft),transform .4s var(--e-out);display:inline-block}
.mega-col a:hover{color:var(--on);transform:translateX(3px)}
.mega-feat{position:relative;display:block;text-decoration:none;color:var(--dk-on);border-radius:3px;overflow:hidden;min-height:230px;
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--e-soft),transform .6s var(--e-out)}
.hdr.mega-open .mega-feat{opacity:1;transform:none;transition-delay:.28s}
.mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.mega-feat:hover img{transform:scale(1.05)}
.mega-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,65,64,0) 30%,rgba(74,65,64,.78))}
.mega-feat span{position:absolute;left:20px;right:20px;z-index:1}
.mega-feat .l{top:18px;color:var(--dk-on);font-size:.8125rem}
.mega-feat .t{bottom:44px;font-family:var(--serif);font-size:1.75rem;line-height:1.05;letter-spacing:-.015em}
.mega-feat .p{bottom:18px;font-size:.9375rem;color:var(--dk-on-2)}
.mega-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(24px,3.4vh,36px);padding:18px 0;border-top:1px solid var(--line)}
.mega-foot p{margin:0;color:var(--on-3);font-size:.9375rem}
.mega-scrim{position:fixed;inset:0;z-index:70;background:rgba(36,35,35,.18);opacity:0;pointer-events:none;transition:opacity .45s var(--e-soft)}
.mega-scrim.on{opacity:1}
@media(max-width:1500px){.mega-in{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1180px){.mega-in{grid-template-columns:repeat(4,minmax(0,1fr))}.mega-feat{display:none}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:75;background:var(--bg);padding:calc(var(--hdr) + 24px) var(--gut) 32px;
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .4s var(--e-soft),visibility 0s linear .4s}
.drawer.open{opacity:1;visibility:visible;transition:opacity .4s var(--e-soft)}
.drawer-nav{list-style:none;margin:0;padding:0}
.drawer-nav li{border-bottom:1px solid var(--line);overflow:hidden}
.drawer-nav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;text-decoration:none;color:var(--on);
  font-family:var(--serif);font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.1;letter-spacing:-.02em;
  transform:translateY(105%);transition:transform .7s var(--e-out)}
.drawer.open .drawer-nav a{transform:none;transition-delay:calc(var(--i)*55ms + 80ms)}
.drawer-nav a .n{font-family:var(--monof);font-size:.8125rem;letter-spacing:.2em;color:var(--on-3)}
.drawer-foot{display:grid;gap:14px;color:var(--on-2);font-size:var(--small)}
/* "Treatments" opens a list of every treatment page (built by site.js §4a) */
.drawer-nav .drawer-acc{display:flex;align-items:baseline;gap:16px;width:100%;padding:14px 0;margin:0;border:0;background:none;cursor:pointer;
  text-align:left;color:var(--on);font-family:var(--serif);font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.1;letter-spacing:-.02em;
  transform:translateY(105%);transition:transform .7s var(--e-out)}
.drawer.open .drawer-nav .drawer-acc{transform:none;transition-delay:calc(var(--i)*55ms + 80ms)}
.drawer-acc .n{font-family:var(--monof);font-size:.8125rem;letter-spacing:.2em;color:var(--on-3)}
.drawer-acc:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.drawer-acc .pm{position:relative;margin-left:auto;align-self:center;width:16px;height:16px;flex:none}
.drawer-acc .pm::before,.drawer-acc .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--on);transition:transform .35s var(--e-out)}
.drawer-acc .pm::after{transform:rotate(90deg)}
.drawer-acc[aria-expanded="true"] .pm::after{transform:rotate(0)}
.drawer-tx{padding:4px 0 22px;display:grid;gap:18px}
.drawer-tx[hidden]{display:none}
.drawer-tx-h{margin:0 0 6px;font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;color:var(--eucalyptus)}
.drawer-tx ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.drawer.open .drawer-nav .drawer-tx a,.drawer-nav .drawer-tx a{display:flex;align-items:center;min-height:44px;padding:6px 0;transform:none;transition:none;
  font-family:var(--sans);font-size:1rem;line-height:1.25;letter-spacing:0;color:var(--on-2)}
.drawer-nav .drawer-tx a[aria-current="page"]{color:var(--eucalyptus);font-weight:500}
.drawer-nav .drawer-tx a.drawer-tx-all{color:var(--eucalyptus);text-decoration:underline;text-underline-offset:4px;min-height:44px}
.drawer-foot a{color:var(--on);text-decoration:none}
.drawer-foot .btn{justify-self:start;color:var(--white)}

/* ══ SECTION SCAFFOLDING ══════════════════════════════════════════════ */
.sec{position:relative;z-index:8;background:var(--bg);padding:clamp(88px,14vh,176px) 0}
.sec.blush{background:var(--blush)}
.sec-head{padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
.k{color:var(--eucalyptus);margin:0 0 16px;display:flex;align-items:center;gap:12px}
.d2{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 88,"wght" 400;font-weight:400;
  font-size:clamp(2rem,4.3vw,3.7rem);line-height:1.02;letter-spacing:-.022em;color:var(--on);max-width:16ch;text-wrap:balance}
.d2 em,.d1 em,.d3 em{font-style:italic;color:var(--eucalyptus)}
.d3{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 48;font-weight:400;font-size:clamp(1.75rem,2.6vw,2.4rem);
  line-height:1.1;letter-spacing:-.015em;color:var(--on)}
.lede{margin:0;font-size:clamp(1rem,1.22vw,1.16rem);line-height:1.62;color:var(--on-2);max-width:44ch}
.sec-rule{height:1px;background:var(--line);margin:clamp(40px,6vh,68px) var(--gut) 0;transform-origin:left}
.blush .sec-rule{background:var(--blush-line)}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:22px;align-items:start}}

/* ── reveal system ────────────────────────────────────────────────────
   .rise    — block rises, un-blurs (same curve as index.html)
   [data-split] — heading words rise out of a mask, one by one
   .imgrev  — a bone sheet lifts off the image (transform, not clip-path)
   .draw    — hairline draws from the left                                */
.rise{opacity:0;transform:translateY(28px);filter:blur(3px);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out),filter .9s var(--e-out)}
.rise.in{opacity:1;transform:none;filter:none}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .07em .1em 0;margin:0 -.07em -.1em 0}
.swi{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--e-out);transition-delay:calc(var(--i)*48ms)}
.in .swi,.in.swi{transform:none}
.imgrev{position:relative;overflow:hidden}
.imgrev::after{content:"";position:absolute;inset:-1px;background:var(--bg);transform-origin:top;transition:transform 1.25s var(--e-out);z-index:2;pointer-events:none}
.blush .imgrev::after{background:var(--blush)}
.imgrev img{transform:scale(1.12);transition:transform 1.8s var(--e-out)}
.imgrev.in::after{transform:scaleY(0)}
.imgrev.in img{transform:none}
.draw{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e-out)}
.draw.in{transform:none}
/* page-load entrance for inner-page hero furniture — never the H1 (it is the LCP) */
.load{opacity:0;transform:translateY(14px);animation:loadIn .8s var(--e-out) forwards;animation-delay:var(--d,.18s)}
@keyframes loadIn{to{opacity:1;transform:none}}
/* parallax frame: the image is taller than its frame so drift never shows an edge */
.par{position:relative;overflow:hidden}
.par>img{display:block;width:100%;height:100%;object-fit:cover;margin-top:0%;will-change:transform}
/* …except it was not: at height:100% the drift (up to ~25px on a phone) opened
   a blank band at the frame's top or bottom edge — the treatment hero showed it
   plainly. Below 900 the image overscans the frame by 8% each way. The about
   hero carries its own overscan (.ahero-img>img) and is left to it. */
@media(max-width:900px){.par:not(.ahero-img)>img{position:absolute;left:0;top:-8%;height:116%}}

/* ── accordion (native <details>: find-in-page and no-JS both still work) */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:clamp(20px,2.6vh,28px) 0;font:500 clamp(1.02rem,1.25vw,1.16rem)/1.4 var(--sans);color:var(--on);transition:color .3s var(--e-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--eucalyptus)}
.faq .pm{position:relative;flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;transition:background .35s var(--e-soft),border-color .35s var(--e-soft)}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--on);transition:transform .5s var(--e-out),background .35s}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm{background:var(--eucalyptus);border-color:var(--eucalyptus)}
.faq details[open] .pm::before,.faq details[open] .pm::after{background:var(--bg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq .a{padding:0 clamp(0px,6vw,72px) clamp(22px,3vh,30px) 0;color:var(--on-2);font-size:1rem;line-height:1.7;max-width:64ch}
.faq .a p{margin:0 0 .8em}.faq .a p:last-child{margin:0}
.faq details[open] .a{animation:accIn .6s var(--e-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── marquee — decorative, duplicated for a seamless loop, stops on hover */
.marq{display:flex;overflow:hidden;user-select:none;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-t{display:flex;flex:none;align-items:center;gap:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);animation:marq 48s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq-t span{font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 72;font-size:clamp(1.9rem,4vw,3.6rem);line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
.marq-t i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--brass)}
@keyframes marq{to{transform:translateX(-100%)}}

/* ── cursor-follow preview for treatment lists (fine pointers only) ─── */
.hovimg{position:fixed;left:0;top:0;z-index:60;width:clamp(200px,17vw,280px);aspect-ratio:4/5;pointer-events:none;border-radius:3px;overflow:hidden;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.86);transition:opacity .35s var(--e-soft);box-shadow:0 40px 70px -30px rgba(36,35,35,.45)}
.hovimg.on{opacity:1}
.hovimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .45s var(--e-soft),transform .9s var(--e-out)}
.hovimg img.cur{opacity:1;transform:none}

/* ══ INNER-PAGE HERO ══════════════════════════════════════════════════ */
.phero{position:relative;padding:calc(var(--hdr) + clamp(56px,10vh,120px)) var(--gut) clamp(56px,9vh,104px);overflow:hidden;
  background:radial-gradient(110% 90% at 88% 0%,rgba(232,212,195,.16),rgba(232,212,195,0) 58%),
             radial-gradient(90% 80% at 0% 100%,rgba(168,93,61,.09),rgba(168,93,61,0) 55%),var(--bg)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 clamp(28px,4vh,44px);color:var(--on-3);font-size:.8125rem}
.crumbs a{color:var(--on-3);text-decoration:none;transition:color .25s}
.crumbs a:hover{color:var(--eucalyptus)}
.crumbs [aria-current]{color:var(--on)}
/* The eyebrow's brass rule is an inline flex sibling, so it pushed the kicker's
   TEXT 38px (26 rule + 12 gap) past the left edge the breadcrumb, the h1 and the
   lede all share — four stacked elements, four different starts, and the ragged
   edge is the first thing you see in a page hero this large. The rule earns its
   keep beside a section heading further down the page; here the flush column
   matters more, so it is dropped in .phero only. */
.phero .k{gap:0}
.phero .k::before{display:none}
.d1{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 96,"wght" 400;font-weight:400;
  font-size:clamp(2.9rem,7.4vw,7rem);line-height:.96;letter-spacing:-.03em;color:var(--on);max-width:14ch;text-wrap:balance}
/* The foot row used to float: a lede on the left, figures pinned hard right and
   dropped to their own baseline, and a wide empty field between them under a
   heading that only fills ~40% of the measure. A hairline across the full width
   closes the composition — the numbers now sit at the end of a line instead of
   in open space — and both columns start from it, so the row reads as one band.
   Same device as .sec-rule / .res-rule / .reels-rule elsewhere on the site. */
.phero-foot{margin-top:clamp(32px,5vh,56px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,5vw,80px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(24px,3.4vh,38px)}
.phero-foot .lede{font-size:clamp(1.05rem,1.35vw,1.26rem);max-width:46ch}
/* Top-aligned to the rule, the figures' cap-height sat a touch above the lede's
   first line; this drops them onto it. */
.phero-meta{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:flex-end;padding-top:4px}
.phero-meta div{display:flex;flex-direction:column;gap:6px}
.phero-meta b{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1;letter-spacing:-.02em;color:var(--on)}
.phero-meta span{color:var(--on-3);font-size:.8125rem}
@media(max-width:900px){.phero-foot{grid-template-columns:1fr}
  .phero-meta{justify-content:flex-start;padding-top:0}}

/* ══ END-OF-PAGE CTA ══════════════════════════════════════════════════ */
.endcta{position:relative;z-index:8;background:var(--blush);padding:clamp(88px,14vh,168px) 0 clamp(40px,6vh,64px);overflow:hidden;text-align:center}
.endcta-in{padding:0 var(--gut);display:flex;flex-direction:column;align-items:center}
.endcta .k{justify-content:center}
.endcta h2{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 96;font-weight:400;font-size:clamp(2.4rem,6vw,5.6rem);
  line-height:1;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.endcta h2 em{font-style:italic;color:var(--eucalyptus)}
.endcta p.lede{margin:24px auto 0;text-align:center}
.endcta-act{margin-top:clamp(30px,5vh,48px);display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.endcta .marq{margin-top:clamp(64px,10vh,110px);color:rgba(36,35,35,.2)}
/* phone section rhythm: the desktop 88-176px between sections left 100-150px
   of empty ground between every block on a phone */
@media(max-width:720px){
  .sec{padding:clamp(64px,10vh,80px) 0}
}
@media(max-width:600px){
  .sec{padding:52px 0}
  .endcta{padding-top:clamp(64px,10vh,80px)}
}

/* ══ FOOTER (dark ground) ═════════════════════════════════════════════ */
.ftr{position:relative;z-index:8;background:var(--dk);color:var(--dk-on-2);padding:clamp(72px,11vh,130px) 0 0;overflow:hidden}
.ftr a{color:var(--dk-on-2);text-decoration:none;transition:color .25s var(--e-soft)}
.ftr a:hover{color:var(--dk-on)}
.ftr-grid{padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,2fr)) minmax(0,3fr);gap:clamp(32px,4vw,64px)}
.ftr-lead{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 72;font-weight:400;font-size:clamp(1.9rem,3vw,2.8rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--dk-on);max-width:14ch}
.ftr-lead em{font-style:italic;color:var(--dk-euc)}
.ftr-brand p.s{margin:20px 0 28px;max-width:38ch;font-size:var(--small);line-height:1.65}
.ftr-brand .row{display:flex;flex-wrap:wrap;gap:12px}
.ftr-h{margin:0 0 18px;color:var(--dk-on-3);font-size:.8125rem;display:flex;align-items:center;gap:10px}
.ftr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--small)}
.ftr-col address{font-style:normal;font-size:var(--small);line-height:1.7;color:var(--dk-on)}
.ftr-col .c{display:grid;gap:8px;margin-top:16px;font-size:var(--small)}
.ftr-col .note{margin:16px 0 0;font-size:.9375rem;color:var(--dk-on-3);line-height:1.55}
.ftr-big{padding:0 calc(var(--gut) - .04em);margin-top:clamp(72px,12vh,140px);font-family:var(--serif);font-variation-settings:"opsz" 96;font-weight:400;
  font-size:clamp(4.4rem,19.2vw,22rem);line-height:.8;letter-spacing:-.045em;color:#242323;white-space:nowrap;user-select:none;display:flex}
.ftr-big b{display:inline-block;font-weight:inherit;transform:translateY(40%);opacity:0;transition:transform 1.2s var(--e-out),opacity 1s var(--e-soft);transition-delay:calc(var(--i)*55ms)}
.ftr-big.in b{transform:none;opacity:1}
/* 70px floor vs a 360px phone: the final "c" ran into the right edge with no
   gutter to match the left. Sized to the width alone on a phone. */
@media(max-width:560px){.ftr-big{font-size:17.2vw}}
/* the wordmark is shown whole: the bar below used to overlap its lower fifth */
.ftr-big{padding-bottom:.14em}
.ftr-base{position:relative;margin-top:0;padding:22px var(--gut) 26px;border-top:1px solid var(--dk-line);background:var(--dk);
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;font-size:.9375rem;color:var(--dk-on-3)}
.ftr-base nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.ftr-base a{color:var(--dk-on-3)}
.ftr-credit{text-decoration:underline;text-decoration-color:var(--dk-line);text-underline-offset:3px;transition:color .3s}
.ftr-credit:hover,.ftr-credit:focus-visible{color:var(--dk-on-2)}
.totop{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--dk-on-2);cursor:pointer;font:inherit;padding:0}
.totop i{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--dk-line);border-radius:50%;font-style:normal;transition:transform .5s var(--e-out),border-color .3s}
.totop:hover i{transform:translateY(-3px);border-color:var(--dk-on-3)}
.ftr :focus-visible{outline-color:var(--dk-euc)}
@media(max-width:1080px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1/-1}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}

/* ══ HOME — trust ledger ══════════════════════════════════════════════ */
.ts-row{margin:clamp(44px,7vh,76px) var(--gut) 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.ts{position:relative;padding:clamp(28px,4vh,40px) clamp(16px,2vw,32px) 0 0}
.ts+.ts{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--line)}
.ts-v{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 96;font-weight:400;font-size:clamp(3rem,6vw,5.6rem);line-height:.9;letter-spacing:-.03em;color:var(--on);font-variant-numeric:lining-nums}
.ts-v small{font-size:.5em;color:var(--eucalyptus);letter-spacing:0}
.ts-k{margin:18px 0 8px;color:var(--eucalyptus);font-size:.8125rem}
.ts-d{margin:0;color:var(--on-2);font-size:var(--small);line-height:1.55;max-width:26ch}
.pr-row{list-style:none;margin:clamp(56px,9vh,96px) var(--gut) 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.pr{position:relative;padding:clamp(24px,2.4vw,34px);background:var(--surface);border:1px solid #E8D4C3;border-radius:3px;
  transition:transform .7s var(--e-out),box-shadow .7s var(--e-out)}
.pr:hover{transform:translateY(-6px);box-shadow:0 30px 60px -36px rgba(36,35,35,.35)}
.pr svg{width:38px;height:38px;fill:none;stroke:var(--eucalyptus);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pr h3{margin:22px 0 10px;font:500 1.1rem/1.3 var(--sans);color:var(--on)}
.pr p{margin:0;color:var(--on-2);font-size:var(--small);line-height:1.6}
.pr .n{position:absolute;right:20px;top:20px;color:var(--on-3);font-size:.8125rem}
@media(max-width:980px){.ts-row{grid-template-columns:1fr 1fr}.ts:nth-child(3){border-left:0;padding-left:0}.ts:nth-child(n+3){border-top:1px solid var(--line);margin-top:28px}.pr-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pr-row{grid-template-columns:1fr}}

/* ══ HOME — treatment explorer ════════════════════════════════════════ */
.cx{padding:0 var(--gut);margin-top:clamp(40px,6vh,64px)}
.cx-tabs{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:clamp(26px,4vh,40px);border-bottom:1px solid var(--line)}
.cx-tab{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;
  font:500 1rem/1 var(--sans);color:var(--on-2);cursor:pointer;transition:background .35s var(--e-soft),color .35s var(--e-soft),border-color .35s var(--e-soft)}
.cx-tab .c{font-size:.8125rem;letter-spacing:.12em;color:var(--on-3);transition:color .35s}
.cx-tab:hover{border-color:rgba(168,93,61,.45);color:var(--on)}
.cx-tab[aria-selected="true"]{background:var(--on);border-color:var(--on);color:var(--white)}
.cx-tab[aria-selected="true"] .c{color:rgba(255,255,255,.6)}
.cx-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);margin-top:clamp(28px,4vh,44px)}
.cx-panel[hidden]{display:none}
.cx-intro{margin:0 0 clamp(16px,2.4vh,24px);color:var(--on-2);max-width:52ch}
.cx-list{list-style:none;margin:0;padding:0}
.cx-list li{opacity:0;transform:translateY(14px)}
.cx-panel.show .cx-list li{opacity:1;transform:none;transition:opacity .5s var(--e-soft),transform .8s var(--e-out);transition-delay:calc(var(--i)*55ms)}
.cx-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:6px 24px;align-items:baseline;
  padding:clamp(18px,2.4vh,24px) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--on)}
.cx-row .t{font-family:var(--serif);font-variation-settings:"opsz" 48;font-size:1.75rem;line-height:1.12;letter-spacing:-.015em;transition:transform .6s var(--e-out),color .3s}
.cx-row .d{grid-column:1;color:var(--on-2);font-size:var(--small)}
/* Price reads as a chip in the signal colour rather than muted body text —
   align-self:center because the row is baseline-aligned and a padded pill would
   otherwise sit low against the serif title. Inverts on hover to match .ar.
   Contrast: 6.28:1 at rest, 6.75:1 hovered. */
.cx-row .p{grid-column:2;grid-row:1;align-self:center;white-space:nowrap;
  color:var(--eucalyptus);font-size:.875rem;letter-spacing:.12em;
  padding:6px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  transition:background .35s var(--e-soft),border-color .35s,color .35s}
.cx-row:hover .p,.cx-row:focus-visible .p{background:var(--eucalyptus);border-color:var(--eucalyptus);color:var(--white)}
.cx-row .ar{grid-column:3;grid-row:1;justify-self:end;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:background .35s var(--e-soft),border-color .35s,transform .6s var(--e-out)}
.cx-row .ar svg{width:11px;height:11px;fill:none;stroke:var(--on);stroke-width:1.6;transition:stroke .3s}
.cx-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--eucalyptus);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out)}
.cx-row:hover .t{transform:translateX(10px);color:var(--eucalyptus)}
.cx-row:hover .ar{background:var(--eucalyptus);border-color:var(--eucalyptus);transform:rotate(-45deg)}
.cx-row:hover .ar svg{stroke:var(--white)}
.cx-row:hover::after,.cx-row:focus-visible::after{transform:none}
/* on a phone the pill and the arrow leave column 1 about 140px wide, which put
   the description on three-word lines. Let it run the full width instead —
   the row keeps its shape, the copy gets a readable measure. */
@media(max-width:720px){
  .cx-row{gap:8px 12px}
  .cx-row .d{grid-column:1/-1}
}
/* phones: the pill sat beside the title and squeezed it to ~100px, clipping
   "Injectable Treatmen…" and breaking "Laser / Facial". The title now has the
   whole row (arrow on the right), and the price drops to its own line under it. */
@media(max-width:560px){
  .cx-row{grid-template-columns:minmax(0,1fr) 28px}
  .cx-row .t{grid-column:1;grid-row:1;font-size:1.6rem}
  .cx-row .ar{grid-column:2;grid-row:1;align-self:start;margin-top:4px}
  .cx-row .p{grid-column:1;grid-row:2;justify-self:start;font-size:.8125rem;padding:5px 11px}
  .cx-row .d{grid-row:3}
}
.cx-foot{margin-top:clamp(24px,3.4vh,34px)}
/* Wider and shorter than the list beside it: 560 cap instead of 440, and a 5/4
   frame rather than stretching to the grid row, which previously ran the image
   down to 812px on the longest tab. The landscape ratio also suits the sources
   — the treatment photos are 800x700 apart from freckles.webp, so the old 4/5
   portrait frame was cropping their sides away.
   align-self:start stops the grid stretching it back to the row height. The cap
   keeps it off the 683px column width at 1920 and the 950px it reached at 2560. */
/* Sticky: the longest tabs (Concerns, 17 rows) run far past one screen, so the
   picture rides down beside the list instead of being left at the top. Its width
   is capped by the viewport height so the whole 5/6 frame and caption fit under
   the fixed header; the inline script swaps the picture to the row beside it. */
.cx-media{position:sticky;top:calc(var(--hdr) + 28px);margin:0;align-self:start;
  max-width:560px;margin-left:auto;width:min(100%,calc((100vh - var(--hdr) - 110px) * 5 / 6))}
.cx-frame{position:relative;aspect-ratio:5/6;border-radius:3px;overflow:hidden;background:var(--surface-2);box-shadow:var(--sh-card)}
.cx-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--e-soft),transform 1.4s var(--e-out)}
.cx-frame img.cur{opacity:1;transform:none}
.cx-media figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:var(--on-3);font-size:.8125rem}
.tag-consult{display:inline-block;padding:4px 8px;border:1px solid rgba(168,93,61,.35);border-radius:2px;color:var(--eucalyptus);font-size:.8125rem;letter-spacing:.14em}
@media(max-width:900px){
  .cx-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut)*-1);padding-left:var(--gut);padding-right:var(--gut)}
  .cx-tabs::-webkit-scrollbar{display:none}
  .cx-tab{flex:none}
  .cx-body{grid-template-columns:1fr}
  .cx-media{display:none}
}

/* ══ HOME — process: stacking cards ═══════════════════════════════════ */
.stack{padding:0 var(--gut);margin-top:clamp(44px,7vh,72px)}
.scard{position:sticky;top:calc(var(--hdr) + 20px + var(--i)*16px);margin-bottom:clamp(40px,7vh,72px)}
.scard:last-child{margin-bottom:0}
.scard-in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:min(74svh,600px);
  background:var(--surface);border:1px solid #E8D4C3;border-radius:4px;overflow:hidden;transform-origin:50% 0;
  box-shadow:0 40px 80px -50px rgba(36,35,35,.35)}
.scard-dim{position:absolute;inset:0;background:var(--on);opacity:0;pointer-events:none;z-index:3}
.scard-img{position:relative;margin:0;overflow:hidden;background:var(--surface-2)}
.scard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scard-img .n{position:absolute;left:24px;bottom:18px;z-index:1;font-family:var(--serif);font-variation-settings:"opsz" 96;font-size:clamp(4.4rem,9vw,8.4rem);
  line-height:.8;letter-spacing:-.04em;color:var(--bg);text-shadow:0 10px 40px rgba(36,35,35,.35)}
.scard-txt{padding:clamp(28px,4.4vw,72px);display:flex;flex-direction:column;justify-content:center}
.scard-txt .k{margin-bottom:20px}
.scard-txt h3{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 72;font-weight:400;font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.02;letter-spacing:-.022em}
.scard-txt h3 em{font-style:italic;color:var(--eucalyptus)}
.scard-txt>p{margin:22px 0 0;color:var(--on-2);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.65;max-width:44ch}
.scard-pts{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
/* block, not flex: as a flex row, a bullet holding a link split into separate
   flex items, so "Free to book" and ", with no obligation" sat 12px apart */
.scard-pts li{position:relative;padding-left:18px;color:var(--on-2);font-size:var(--small)}
.scard-pts li::before{content:"";position:absolute;left:0;top:calc(.8em - 3px);width:6px;height:6px;border-radius:50%;background:var(--brass)}
/* One column below 860, still stacking. A card here is ~680-730px tall — more
   than a phone shows once it sticks under the bar — so the stacking script in
   index.html caps each card's `top` at (viewport - card height): a tall card
   scrolls up until its FOOT is on screen, sticks there, and only then does the
   next card slide over it. Every bullet stays readable and the stack survives.
   This rule is the fallback before the script runs (and with JS off). */
@media(max-width:860px){
  .scard-in{grid-template-columns:1fr;min-height:0}
  .scard-img{aspect-ratio:16/10}
  .scard{top:calc(var(--hdr) + 10px + var(--i)*10px);margin-bottom:clamp(20px,4vw,32px)}
  .scard-txt{padding:clamp(24px,6vw,40px)}
  .scard-txt>p{margin-top:16px}
  .scard-pts{margin-top:22px;padding-top:18px}
}
/* Phones: no stacking at all. Even with the cap, a card is nearly a screen
   tall here, so the next one began covering it the moment it settled and
   the end of steps 03 and 04 could not be read. The five steps simply follow
   one another, as they do under reduced motion. The script in index.html
   checks for position:sticky and leaves these cards alone. */
@media(max-width:600px){
  .scard{position:static;margin-bottom:20px}
  .scard-in{transform:none!important}
  .scard-dim{display:none}
}

/* ══ HOME — clinic teaser ═════════════════════════════════════════════ */
.clinic-grid{padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,110px);align-items:center}
.clinic-img{margin:0}
.clinic-img .par{aspect-ratio:4/5;border-radius:3px;box-shadow:var(--sh-card)}
.clinic-img figcaption{margin-top:16px;color:var(--on-3);font-size:.8125rem}
.clinic-txt p.body{margin:26px 0 0;color:var(--on-2);font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.7;max-width:50ch}
.mini-stats{display:flex;gap:clamp(28px,4vw,56px);margin:34px 0 36px;padding-top:28px;border-top:1px solid var(--line)}
.mini-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;letter-spacing:-.02em}
.mini-stats span{display:block;margin-top:10px;color:var(--on-3);font-size:.8125rem}
.strip{padding:0 var(--gut);margin-top:clamp(56px,9vh,110px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);align-items:start}
.strip figure{margin:0}
.strip figure:nth-child(2){margin-top:clamp(40px,8vh,96px)}
.strip .par{aspect-ratio:4/3;border-radius:3px}
.strip figcaption{margin-top:14px;display:flex;gap:10px;color:var(--on-3);font-size:.8125rem}
.strip figcaption b{color:var(--eucalyptus);font-weight:400}
@media(max-width:900px){.clinic-grid{grid-template-columns:1fr}}
/* Below 900 the strip is a swipe row, the same idiom as the reels on the home
   page. As a 2-up grid the photos were ~165px thumbnails on a phone, the
   stagger read as a misalignment rather than a rhythm, and the treatment room
   was hidden outright. Now all three are shown, one large frame at a time with
   the next one peeking in. */
@media(max-width:900px){
  .strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .strip::-webkit-scrollbar{display:none}
  .strip figure{flex:0 0 min(80%,400px);scroll-snap-align:start}
  .strip figure:nth-child(2){margin-top:0}
  /* trailing gutter as margin: a flex scroller drops its end padding */
  .strip figure:last-child{margin-right:var(--gut)}
}

/* ══ HOME / PAGES — safety & FAQ block ════════════════════════════════ */
.faq-grid{padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,110px);align-items:start}
.faq-side{position:sticky;top:calc(var(--hdr) + 40px)}
.faq-side .lede{margin-top:22px}
.callcard{margin-top:clamp(32px,5vh,48px);padding:24px;border-radius:3px;background:var(--surface);border:1px solid #E8D4C3;display:flex;gap:16px;align-items:center}
.callcard .ic{flex:none;width:48px;height:48px;border-radius:50%;background:var(--eucalyptus);display:grid;place-items:center}
.callcard .ic svg{width:20px;height:20px;fill:none;stroke:var(--white);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.callcard p{margin:0;font-size:.9375rem;color:var(--on-3)}
.callcard a{font-weight:500;color:var(--on);text-decoration:none;font-size:1.02rem}
.callcard a:hover{color:var(--eucalyptus)}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-side{position:static}}

/* ══ TREATMENTS PAGE ══════════════════════════════════════════════════ */
/* opaque: at .96 the list scrolling underneath showed through as faint, doubled text.
   The bar lives inside .tbar-scope with its list, so it un-pins when the list ends
   instead of riding over the FAQ and closing sections below. */
.tbar{position:sticky;top:0;z-index:40;background:var(--bg);box-shadow:0 1px 0 var(--line);
  padding:14px var(--gut);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;transition:top .6s var(--e-out)}
.chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.chips::-webkit-scrollbar{display:none}
/* a chip row wider than its bar fades at the right edge, so it reads as
   scrollable ("Concerns" sat fully off-screen with no hint). Set by site.js. */
.chips.is-overflow:not(.at-end){padding-right:28px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:transparent;
  font:500 .9375rem/1 var(--sans);color:var(--on-2);cursor:pointer;text-decoration:none;transition:background .3s var(--e-soft),color .3s,border-color .3s}
.chip .c{font-family:var(--monof);font-size:.8125rem;letter-spacing:.1em;color:var(--on-3)}
.chip:hover{border-color:rgba(168,93,61,.45);color:var(--on)}
.chip[aria-pressed="true"],.chip.on{background:var(--on);border-color:var(--on);color:var(--white)}
.chip[aria-pressed="true"] .c,.chip.on .c{color:rgba(255,255,255,.6)}
.search{position:relative;flex:0 1 300px;min-width:200px}
.search input{width:100%;font:400 1rem/1.2 var(--sans);color:var(--on);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:11px 16px 11px 40px;transition:border-color .25s,box-shadow .25s}
.search input:focus{outline:none;border-color:var(--eucalyptus);box-shadow:0 0 0 3px rgba(168,93,61,.14)}
.search svg{position:absolute;left:15px;top:50%;width:15px;height:15px;margin-top:-7.5px;fill:none;stroke:var(--on-3);stroke-width:1.6}
.tcount{color:var(--on-3);font-size:.8125rem;white-space:nowrap}
.tcat{padding:clamp(72px,11vh,130px) var(--gut) 0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,96px);align-items:start;scroll-margin-top:calc(var(--hdr) + 80px)}
.tcat[hidden]{display:none}
.tcat-side{position:sticky;top:calc(var(--hdr) + 96px)}
.tcat-n{color:var(--on-3);font-size:.8125rem;margin:0 0 18px}
.tcat-side .d3{font-size:clamp(2rem,3.2vw,3rem)}
.tcat-side p.s{margin:18px 0 0;color:var(--on-2);font-size:var(--small);line-height:1.65;max-width:36ch}
.tcat-side figure{margin:28px 0 0;aspect-ratio:5/4;border-radius:3px;box-shadow:var(--sh-card)}
.tcat-side figure img{width:100%;height:100%;object-fit:cover;display:block}
.trows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.trows li[hidden]{display:none}
.trow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:baseline;padding:clamp(20px,2.8vh,28px) 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--on)}
.trow::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--eucalyptus);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out)}
.trow:hover::after,.trow:focus-visible::after{transform:none}
.trow .t{font-family:var(--serif);font-variation-settings:"opsz" 48;font-size:1.75rem;line-height:1.12;letter-spacing:-.015em;transition:transform .6s var(--e-out),color .3s}
.trow:hover .t{transform:translateX(10px);color:var(--eucalyptus)}
.trow .d{grid-column:1;color:var(--on-2);font-size:var(--small);max-width:58ch}
.trow .r{grid-column:2;grid-row:1/3;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.trow .p{color:var(--on);font-size:.875rem;letter-spacing:.12em;white-space:nowrap}
.trow .go{color:var(--on-3);font-size:.9375rem;display:inline-flex;gap:8px;align-items:center;transition:color .3s}
.trow .go i{font-style:normal;transition:transform .5s var(--e-out)}
.trow:hover .go{color:var(--eucalyptus)}
.trow:hover .go i{transform:translateX(4px)}
.trow mark{background:rgba(232,212,195,.28);color:inherit;border-radius:2px;padding:0 2px}
.tempty{padding:clamp(72px,12vh,140px) var(--gut) 0;text-align:center;color:var(--on-2)}
.tempty .d3{margin-bottom:14px}
@media(max-width:900px){.tcat{grid-template-columns:1fr}.tcat-side{position:static}.tcat-side figure{display:none}}
/* phones: a tighter bar, so the pinned strip takes less of a small screen */
@media(max-width:560px){.tbar{padding:10px var(--gut);gap:10px}.tbar .search input{padding-top:9px;padding-bottom:9px}}
@media(max-width:560px){.trow{grid-template-columns:1fr}.trow .r{grid-column:1;grid-row:auto;align-items:flex-start;flex-direction:row;gap:16px;text-align:left}.tbar .search{flex-basis:100%}}

/* ══ PRICING PAGE ═════════════════════════════════════════════════════ */
.how4{padding:0 var(--gut);margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.how4 .pr{background:var(--surface)}
.offer{margin:clamp(56px,9vh,96px) var(--gut) 0;padding:clamp(28px,3.6vw,48px);border-radius:4px;background:var(--dk);color:var(--dk-on-2);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center;overflow:hidden;position:relative}
.offer::before{content:"";position:absolute;right:-8%;top:-60%;width:46%;aspect-ratio:1;border-radius:50%;border:clamp(24px,3vw,46px) solid rgba(85,191,200,.08)}
.offer .big{font-family:var(--serif);font-variation-settings:"opsz" 96;font-size:clamp(3.6rem,7vw,6.4rem);line-height:.85;letter-spacing:-.04em;color:var(--dk-on)}
.offer .big small{font-size:.42em;color:var(--dk-euc);letter-spacing:0}
.offer h2{margin:0 0 8px;font:500 clamp(1.1rem,1.5vw,1.3rem)/1.35 var(--sans);color:var(--dk-on)}
.offer p{margin:0;font-size:var(--small);line-height:1.6;max-width:60ch}
.offer .fine{margin-top:10px;color:var(--dk-on-3);font-size:.9375rem}
@media(max-width:900px){.how4{grid-template-columns:1fr 1fr}.offer{grid-template-columns:1fr}}
@media(max-width:520px){.how4{grid-template-columns:1fr}}
.ptoggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.9375rem;color:var(--on-2);user-select:none;white-space:nowrap}
.ptoggle input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;margin:0;transition:background .3s var(--e-soft)}
.ptoggle input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .45s var(--e-out)}
.ptoggle input:checked{background:var(--eucalyptus)}
.ptoggle input:checked::after{transform:translateX(16px)}
.pgroup{padding:clamp(64px,10vh,112px) var(--gut) 0;scroll-margin-top:calc(var(--hdr) + 72px)}
.pgroup[hidden]{display:none}
/* Capped and centred, like .res-grid and .wmap-stage elsewhere. Unconstrained,
   the table grew to the full viewport: on a wide screen "HydraFacial" and "£163"
   ended up ~600px apart with nothing between them, and the course cards floated
   in the middle of an empty third of the page. The head is capped to the same
   measure so the helper text keeps landing on the table's right edge. */
.pg-head,.ptwrap{max-width:1320px;margin-inline:auto}
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,3vh,32px)}
.pg-head .n{color:var(--on-3);font-size:.8125rem;margin:0 0 14px}
.pg-head p.s{margin:0;color:var(--on-2);font-size:var(--small);max-width:46ch}
/* Fixed layout: the columns are a deliberate rhythm, not a by-product of how
   long "Mole, skin tag & wart removal" happens to be. Auto layout re-solved the
   widths per table, so the five price tables did not line up with each other. */
.ptable{width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--small)}
.ptable th:nth-child(1){width:34%}
.ptable th:nth-child(2){width:18%}
.ptable th:nth-child(3){width:48%}
.ptable caption{text-align:left}
/* Laser holds two tables — device treatments, then hair removal priced per area,
   which needs its own "Area" column header. Their captions come out of the
   accessibility layer and become visible sub-headings so the split is legible to
   everyone, not just a screen reader. Every other group keeps caption.vh. */
.pt-cap{color:var(--eucalyptus);padding:0 0 14px;font-size:.8125rem}
.ptwrap + .ptwrap{margin-top:clamp(36px,5vh,56px)}
.ptable th{text-align:left;font:400 .8125rem/1.3 var(--monof);letter-spacing:.2em;text-transform:uppercase;color:var(--on-3);padding:0 12px 14px 0;border-bottom:1px solid var(--on)}
.ptable td{padding:18px 12px 18px 0;border-bottom:1px solid var(--line);vertical-align:top}
/* The course cards carry 8px of their own padding, so at a shared 18px the card
   border started below the treatment name's cap height. Taking 8px off this cell
   puts the card's top edge on the same line as the text beside it. */
.ptable td:nth-child(3){padding-top:10px}
/* A row with no course option left a blank third of the row reading as an
   unfinished cell. An em rule says "nothing here" deliberately. */
.ptable td:empty::after{content:"\2014";color:var(--on-3);opacity:.45}
.ptable tbody tr{transition:background .3s var(--e-soft)}
.ptable tbody tr:hover{background:rgba(255,255,255,.6)}
.ptable tr[hidden]{display:none}
.ptable .nm{font-weight:500;color:var(--on)}
.ptable .nm small{display:block;margin-top:4px;font-weight:400;color:var(--on-3);font-size:.9375rem}
.ptable .num{font-family:var(--monof);font-size:.9375rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--on)}
.pk{display:flex;flex-wrap:wrap;gap:8px}
.pk span{display:inline-flex;flex-direction:column;gap:3px;padding:8px 12px;border:1px solid var(--line);border-radius:3px;background:var(--surface);min-width:118px}
.pk b{font:400 .8125rem/1.2 var(--monof);letter-spacing:.14em;text-transform:uppercase;color:var(--on-3)}
.pk em{font-style:normal;font-family:var(--monof);font-size:.9375rem;color:var(--on)}
.pk .per{display:none;font-family:var(--monof);font-size:.875rem;color:var(--eucalyptus)}
.per-on .pk .per{display:block}
.pk .sv{font-size:.875rem;color:var(--eucalyptus)}
.ptable .ask{color:var(--eucalyptus);font-size:.9375rem}
.ptwrap{overflow-x:auto}
@media(max-width:720px){
  .ptable thead{display:none}
  .ptable tr{display:grid;grid-template-columns:1fr auto;gap:10px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
  .ptable td{border:0;padding:0}
  /* Both of these override rules above that are MORE specific than `.ptable td`,
     so they have to be restated here — the later media query alone would lose.
     The row is a grid on phones: the cell's own padding and the em rule for an
     empty cell are desktop-table devices and would only add stray space. */
  .ptable td:nth-child(3){grid-column:1/-1;padding-top:0}
  .ptable td:empty{display:none}
}
.why{margin:clamp(64px,10vh,112px) var(--gut) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);
  padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--line)}
.why p{margin:0 0 1em;color:var(--on-2);line-height:1.7;max-width:62ch}
@media(max-width:900px){.why{grid-template-columns:1fr}}

/* ══ TREATMENT DETAIL TEMPLATE ════════════════════════════════════════ */
/* The figure track is 5fr of a full-width grid, so on a wide screen it solved to
   ~770px across and, at 4/5, ~960px tall — far taller than the crumb, kicker,
   heading, lede and buttons stacked beside it. align-items:end then dumped the
   whole difference as blank space ABOVE the text, which is what made the hero
   read as half-empty. Three changes, together: cap the figure so it is a picture
   rather than a wall, centre the row so any residual slack splits top and bottom
   instead of landing all in one place, and take the vertical padding down now
   that the section no longer needs to accommodate a 960px image. */
.thero{position:relative;padding:calc(var(--hdr) + clamp(28px,4.5vh,56px)) var(--gut) clamp(40px,6vh,72px);
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center;
  background:radial-gradient(110% 90% at 88% 0%,rgba(232,212,195,.16),rgba(232,212,195,0) 58%),var(--bg)}
.thero .d1{font-size:clamp(2.9rem,6.6vw,6.4rem);max-width:11ch}
.thero .lede{margin-top:clamp(22px,3vh,32px);font-size:clamp(1.05rem,1.35vw,1.26rem);max-width:44ch}
.thero-act{margin-top:clamp(28px,4vh,40px);display:flex;flex-wrap:wrap;gap:12px}
/* Capped, and pushed to the right of its own track so the gap between copy and
   image grows instead of the image doing so. ~460px wide at 4/5 is ~575px tall,
   which sits within a stride of the text column rather than towering over it. */
.thero-fig{position:relative;margin:0;width:100%;max-width:clamp(300px,31vw,460px);margin-left:auto}
.thero-fig .par{aspect-ratio:4/5;border-radius:3px;box-shadow:var(--sh-card)}
.badge{position:absolute;left:clamp(-40px,-3vw,-20px);bottom:clamp(24px,5vh,48px);z-index:3;background:var(--bg);border-radius:3px;padding:18px 22px;
  box-shadow:0 30px 60px -30px rgba(36,35,35,.4);display:flex;flex-direction:column;gap:6px}
.badge span{color:var(--on-3);font-size:.8125rem}
.badge b{font-family:var(--serif);font-weight:400;font-size:2.4rem;line-height:1;letter-spacing:-.02em}
.badge b small{font-family:var(--sans);font-size:.9375rem;color:var(--on-3);letter-spacing:0}
/* Badge variant listing sizes and prices (injectables hero: filler 0.5 ml / 1 ml). */
.badge-opts{margin:10px 0 0;min-width:180px}
.badge-opts div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:6px 0;border-top:1px solid var(--line)}
.badge-opts dt{font-size:var(--small);color:var(--on-2)}
.badge-opts dd{margin:0;font-family:var(--serif);font-size:1.6rem;line-height:1.1;color:var(--on)}
/* One column below 900: the cap and the right-push are desktop devices, and
   left in place they would strand a narrow image against the right margin. */
@media(max-width:900px){.thero{grid-template-columns:1fr;align-items:start}
  .thero-fig{max-width:none;margin-left:0}
  /* 5/4, not 4/5: full width, the portrait frame ran ~400px tall on a phone
     and cropped the sides off sources that are landscape (800x700) */
  .thero-fig .par{aspect-ratio:5/4}
  .badge{left:16px}}
/* phone: the two hero buttons wrapped to two ragged widths; each now takes
   the full row, so they read as a pair */
@media(max-width:560px){.thero-act .btn{flex:1 1 100%}
  /* the badge's 38px figure made "At consultation" a two-line block covering
     most of a phone-width photo; 28px is the serif floor */
  .badge{padding:12px 16px;bottom:16px}
  .badge b{font-size:1.75rem}}
.facts{margin:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:clamp(22px,3.4vh,32px) clamp(14px,2vw,28px)}
.fact+.fact{border-left:1px solid var(--line)}
.fact .l{margin:0 0 10px;color:var(--eucalyptus);font-size:.8125rem}
.fact p.v{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 48;font-size:1.75rem;line-height:1.1;letter-spacing:-.015em}
.fact p.s{margin:6px 0 0;color:var(--on-3);font-size:.9375rem}
@media(max-width:860px){.facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fact:nth-child(3){border-left:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}}
/* a small phone: "At consultation" at the 28px serif floor is wider than half
   of a 320px screen, and dragged the page sideways. One fact per row here. */
@media(max-width:400px){.facts{grid-template-columns:minmax(0,1fr)}
  .fact{padding-inline:0}.fact+.fact{border-left:0;border-top:1px solid var(--line)}}
/* three-fact bar (Consultation / Priced / Planned as): three across until a
   phone, where the two-up grid above would leave the third fact on its own */
.facts.f3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.facts.f3 .fact:nth-child(3){border-left:1px solid var(--line)}.facts.f3 .fact:nth-child(n+3){border-top:0}}
@media(max-width:600px){.facts.f3{grid-template-columns:minmax(0,1fr)}
  .facts.f3 .fact{padding-inline:0}.facts.f3 .fact+.fact{border-left:0;border-top:1px solid var(--line)}}
.hdr-shown .tbar{top:var(--hdr)}
.hdr-shown .subnav{top:var(--hdr)}
/* opaque: at .96 the headings scrolling underneath showed through */
.subnav{position:sticky;top:0;z-index:40;background:var(--bg);box-shadow:0 1px 0 var(--line);padding:0 var(--gut);transition:top .6s var(--e-out)}
.subnav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,3vw,40px);overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
/* on a phone the row is wider than the screen and the last link was simply cut
   ("Questi…") with nothing to say it scrolls. It fades out at the right edge
   instead, and the end padding lets the last link travel clear of the fade. */
@media(max-width:900px){
  .subnav ul{padding-right:48px;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 48px),transparent);
            mask:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  /* The row used to stop at the page gutter, so once it scrolled to follow the
     active section the first link was sliced at that line ("reatment"). It now
     runs to the screen edges and fades softly at BOTH ends; the gutter becomes
     inner padding, so unscrolled it sits exactly where it did. */
  .subnav{padding:0}
  /* the long right padding is scroll room: the row can always bring the
     active link to the left edge, even the last one, so no stub of the
     link before it is left showing (a spacer, since a scrolling flex row
     does not reliably count its own end padding) */
  .subnav ul::after{content:"";flex:none;width:var(--gut)}
  .subnav ul{position:relative;padding-left:var(--gut);padding-right:0;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 48px),transparent);
            mask:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  /* once scrolled, the strip left of the gutter is fully masked, so the link
     before the active one (it ends at least one gap further left) never
     shows as a stub like "ew" or "rview" */
  .subnav ul.is-scrolled{
    -webkit-mask:linear-gradient(90deg,transparent 4px,#000 56px,#000 calc(100% - 48px),transparent);
            mask:linear-gradient(90deg,transparent 4px,#000 56px,#000 calc(100% - 48px),transparent)}
  .subnav ul.is-scrolled.at-end{
    -webkit-mask:linear-gradient(90deg,transparent 4px,#000 56px);
            mask:linear-gradient(90deg,transparent 4px,#000 56px)}
}
.subnav a{position:relative;display:block;padding:18px 0;white-space:nowrap;text-decoration:none;color:var(--on-3);font-size:1rem;transition:color .3s}
.subnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--eucalyptus);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out)}
.subnav a:hover{color:var(--on)}
.subnav a.on{color:var(--on)}
.subnav a.on::after{transform:none}
.two{padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
.two .copy p{margin:0 0 1.1em;color:var(--on-2);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.72;max-width:60ch}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--on-2);font-size:var(--small);line-height:1.5}
.ticks li svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--eucalyptus);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.two{grid-template-columns:1fr}}
@media(max-width:560px){.ticks{grid-template-columns:1fr}}
/* horizontal process line, draws as it enters */
.steps{padding:0 var(--gut);margin-top:clamp(44px,7vh,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);position:relative}
.steps-line{position:absolute;left:var(--gut);right:var(--gut);top:23px;height:1px;background:var(--line)}
.steps-line i{position:absolute;inset:0;background:var(--eucalyptus)}
.step{position:relative}
.step .dot{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--bg);border:1px solid var(--eucalyptus);display:grid;place-items:center;
  font:400 .8125rem/1 var(--monof);letter-spacing:.1em;color:var(--eucalyptus);transition:background .5s var(--e-soft),color .5s}
.step.in .dot{background:var(--eucalyptus);color:var(--white);transition-delay:calc(var(--i)*180ms + .3s)}
.step h3{margin:24px 0 10px;font:500 1.1rem/1.3 var(--sans)}
.step p{margin:0;color:var(--on-2);font-size:var(--small);line-height:1.6}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:44px}.steps-line{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* scrollytelling: sticky figure, text steps light up as they cross the middle */
/* Capped and centred like the price tables. Unconstrained at 5fr/6fr the image
   solved to ~735px across — 920px tall at 4/5 — and the copy column to ~880px
   against a 46ch measure, leaving a dead strip down the right of every step. */
.scrolly{padding:0 var(--gut);max-width:1320px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:clamp(32px,4vw,72px);margin-top:clamp(32px,4.5vh,52px)}
.scrolly-fig{position:sticky;top:calc(var(--hdr) + 84px);margin:0;aspect-ratio:4/5;border-radius:3px;overflow:hidden;box-shadow:var(--sh-card)}
.scrolly-fig img{width:100%;height:100%;object-fit:cover;display:block}
.scrolly-n{position:absolute;left:24px;bottom:16px;display:flex;align-items:flex-end;gap:14px;color:var(--bg)}
.scrolly-n .big{font-family:var(--serif);font-size:clamp(4.4rem,8vw,7.6rem);line-height:.8;letter-spacing:-.04em;display:grid;overflow:hidden;height:.84em;text-shadow:0 10px 40px rgba(36,35,35,.35)}
.scrolly-n .big span{grid-area:1/1;transform:translateY(100%);transition:transform .8s var(--e-out)}
.scrolly-n .big span.on{transform:none}
.scrolly-n .big span.gone{transform:translateY(-100%)}
.scrolly-n .of{font-size:.8125rem;padding-bottom:10px}
/* Each step reserved 62svh of scroll for about 200px of text, so the three of
   them ran to ~166svh and most of what you saw was empty ground. The heights
   exist to give the sticky image something to stick against and the numeral
   time to roll, so they cannot go to zero — but a third of a viewport is ample
   for both, and the three now total ~92svh instead. Still taller than the
   capped figure (~610px), which is the condition the sticky effect needs. */
.sstep{min-height:34svh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .6s var(--e-soft)}
.sstep.on{opacity:1}
.sstep:first-child{min-height:28svh;justify-content:flex-start}
.sstep:last-child{min-height:30svh}
.sstep h3{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 72;font-weight:400;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.04;letter-spacing:-.02em}
.sstep p{margin:20px 0 0;color:var(--on-2);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7;max-width:46ch}
@media(max-width:900px){.scrolly{grid-template-columns:1fr}.scrolly-fig{position:relative;top:0;aspect-ratio:16/10}.sstep,.sstep:first-child,.sstep:last-child{min-height:0;padding:24px 0 0;opacity:1}
  /* the rolling numeral only means something beside a sticky image; stacked,
     it sat half-clipped on the photo's edge. Each step already says "Step 0N". */
  .scrolly-n{display:none}}
/* price cards */
.pcards{padding:0 var(--gut);margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pcard{position:relative;padding:clamp(26px,3vw,40px);border-radius:3px;background:var(--surface);border:1px solid #E8D4C3;display:flex;flex-direction:column;
  transition:transform .7s var(--e-out),box-shadow .7s var(--e-out)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -36px rgba(36,35,35,.35)}
.pcard.feat{background:var(--dk);border-color:var(--dk);color:var(--dk-on-2)}
.pcard .l{margin:0;color:var(--eucalyptus);font-size:.8125rem}
.pcard.feat .l{color:var(--dk-euc)}
.pcard .v{margin:20px 0 0;font-family:var(--serif);font-variation-settings:"opsz" 96;font-size:clamp(3rem,5vw,4.4rem);line-height:.9;letter-spacing:-.03em;color:var(--on)}
.pcard.feat .v{color:var(--dk-on)}
.pcard .per{margin:12px 0 0;font-size:var(--small);color:var(--on-3)}
.pcard.feat .per{color:var(--dk-on-3)}
/* Size options inside a price card (e.g. filler 0.5 ml / 1 ml): one row per size, price right-aligned. */
.pcard .popts{margin:22px 0 0;display:grid;gap:0}
.pcard .popts div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.pcard .popts dt{font-size:var(--small);color:var(--on-2)}
.pcard .popts dd{margin:0;font-family:var(--monof);font-size:.9375rem;font-variant-numeric:tabular-nums;color:var(--on)}
.pcard .popts + ul{margin-top:0}
.pcard ul{list-style:none;margin:26px 0 30px;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:var(--small);color:var(--on-2)}
.pcard.feat ul{border-color:var(--dk-line);color:var(--dk-on-2)}
.pcard .btn{margin-top:auto;align-self:flex-start}
.pcard .flag{position:absolute;right:20px;top:20px;padding:5px 9px;border-radius:2px;background:var(--dk-euc);color:var(--dk);font-size:.8125rem}
@media(max-width:900px){.pcards{grid-template-columns:1fr}}
.risk{padding:0 var(--gut);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vh,64px)}
.risk>div{padding:clamp(26px,3vw,40px);border-radius:3px;background:var(--surface);border:1px solid #E8D4C3}
.risk h3{margin:0 0 18px;font:500 1.1rem/1.3 var(--sans);display:flex;align-items:center;gap:12px}
.risk h3 i{width:10px;height:10px;border-radius:50%;background:var(--clay)}
.risk>div:first-child h3 i{background:var(--eucalyptus)}
.risk ul{margin:0;padding-left:18px;color:var(--on-2);font-size:var(--small);line-height:1.65;display:grid;gap:8px}
@media(max-width:860px){.risk{grid-template-columns:1fr}}
.related{padding:0 var(--gut);margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.rel{text-decoration:none;color:var(--on);display:block}
.rel .imgrev{aspect-ratio:4/3;border-radius:3px}
.rel .imgrev img{width:100%;height:100%;object-fit:cover;display:block}
.rel .imgrev.in img{transition:transform 1.2s var(--e-out)}
.rel:hover .imgrev.in img{transform:scale(1.05)}
.rel p.l{margin:18px 0 8px;color:var(--eucalyptus);font-size:.8125rem}
.rel h3{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.75rem;line-height:1.12;letter-spacing:-.015em}
.rel p.d{margin:8px 0 0;color:var(--on-2);font-size:var(--small)}
/* Below 860 a swipe row, like the clinic strip and the reels on the home page.
   The 2-up grid hid the third treatment on a tablet, and on a phone three
   full-width cards stacked ran ~1000px for what is a "see also". */
@media(max-width:860px){
  .related{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .related::-webkit-scrollbar{display:none}
  .related .rel{flex:0 0 min(78%,340px);scroll-snap-align:start}
  .related .rel:last-child{margin-right:var(--gut)}
}

/* ══ POWER PEELS — five sub-treatments ═══════════════════════════════════
   Compact and quiet: five small portrait cards in one row on desktop, 3 + 2
   (last two centred) on tablet, and a thumbnail list on phones. The details
   below are a tight hairline list; the consultation note is said once. */
.peel-grid{padding:0 var(--gut);margin-top:clamp(36px,5vh,56px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.6vw,28px)}
.peel-card{display:flex;flex-direction:column;text-decoration:none;color:var(--on);border-radius:3px}
.peel-img{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--surface-2)}
.peel-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--e-out)}
.peel-n{position:absolute;top:12px;left:14px;z-index:1;color:var(--white);font-size:.75rem;letter-spacing:.14em;text-shadow:0 1px 6px rgba(36,35,35,.35)}
.peel-card h3{margin:16px 0 0;font-family:var(--serif);font-variation-settings:"opsz" 36;font-weight:400;font-size:1.35rem;line-height:1.15;letter-spacing:-.01em;transition:color .25s}
.peel-for{margin:4px 0 0;color:var(--on-3);font-size:.875rem;line-height:1.45}
.peel-go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding-bottom:4px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--eucalyptus);
  background:linear-gradient(currentColor,currentColor) 0 100%/18px 1px no-repeat;transition:background-size .4s var(--e-out)}
.peel-go svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out)}
.peel-card:focus-visible{outline:2px solid var(--eucalyptus);outline-offset:5px}
@media(hover:hover){
  .peel-card:hover .peel-img img{transform:scale(1.04)}
  .peel-card:hover h3{color:var(--eucalyptus)}
  .peel-card:hover .peel-go{background-size:100% 1px}
  .peel-card:hover .peel-go svg{transform:translateY(2px)}
}
.peel-list{margin:clamp(32px,5vh,48px) var(--gut) 0;border-top:1px solid var(--line)}
.peel-row{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,7fr);gap:clamp(16px,2.4vw,40px);align-items:baseline;padding:clamp(22px,3.4vh,32px) 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 72px)}
.peel-row:focus{outline:none}
.peel-row:target .peel-rh h3,.peel-row:focus .peel-rh h3{color:var(--eucalyptus)}
.peel-rn{margin:0;color:var(--eucalyptus);font-size:.75rem;letter-spacing:.14em}
.peel-rn span{color:var(--on-3)}
.peel-rh h3{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 36;font-weight:400;font-size:clamp(1.35rem,1.7vw,1.6rem);line-height:1.15;letter-spacing:-.01em;transition:color .4s}
.peel-rh .peel-for{margin-top:4px}
.peel-rb p{margin:0;color:var(--on-2);max-width:60ch;font-size:var(--small);line-height:1.7}
.peel-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:14px!important}
.peel-top{color:var(--on-3);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:10px 0}
.peel-top:hover{color:var(--eucalyptus)}
@media(max-width:1100px){
  .peel-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .peel-card{grid-column:span 2}
  .peel-card:nth-child(4){grid-column:2/span 2}
  .peel-card:nth-child(5){grid-column:4/span 2}
}
@media(max-width:860px){
  .peel-row{grid-template-columns:40px minmax(0,1fr);gap:6px 16px}
  .peel-rb{grid-column:2;margin-top:6px}
}
/* phones: a thumbnail list — picture, name, one line, arrow */
@media(max-width:600px){
  .peel-grid{grid-template-columns:1fr;gap:0;border-top:1px solid var(--blush-line)}
  .peel-card,.peel-card:nth-child(4),.peel-card:nth-child(5){grid-column:auto;display:grid;grid-template-columns:76px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;
    padding:14px 0;border-bottom:1px solid var(--blush-line);border-radius:0;min-height:44px}
  .peel-img{grid-row:1/3;aspect-ratio:1;width:76px}
  .peel-n{display:none}
  .peel-card h3{margin:0;align-self:end;font-size:1.25rem}
  .peel-for{margin:2px 0 0;align-self:start;font-size:.8125rem}
  .peel-go{grid-column:3;grid-row:1/3;align-self:center;margin:0;padding:0;background:none}
  .peel-go .t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .peel-go svg{width:12px;height:12px}
}
.peel-facts{margin:16px 0 0;display:grid;gap:10px}
.peel-facts>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:baseline}
.peel-facts dt{color:var(--eucalyptus);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.peel-facts dd{margin:0;color:var(--on-2);font-size:var(--small);line-height:1.6;max-width:60ch}
.peel-trust{margin:clamp(40px,6vh,64px) var(--gut) 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.peel-trust h3{margin:0 0 8px;color:var(--on);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.peel-trust p{margin:0;color:var(--on-2);font-size:var(--small);line-height:1.6}
.peel-src{margin:clamp(28px,4vh,40px) var(--gut) 0}
.peel-src summary{cursor:pointer;color:var(--on-3);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 0;list-style-position:inside}
.peel-src ol{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--on-3);font-size:.8125rem}
.peel-src a{color:var(--on-2)}
@media(max-width:1100px){.peel-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.peel-trust{grid-template-columns:1fr}.peel-facts>div{grid-template-columns:1fr;gap:2px}}
@media(prefers-reduced-motion:reduce){.peel-img img,.peel-go,.peel-go svg{transition:none}}

/* verbatim review, set in context on the treatment it relates to */
.pulls{padding:0 var(--gut);margin-top:clamp(56px,9vh,96px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.pull{margin:0;padding:clamp(26px,3vw,40px);border-radius:3px;background:#FBF8F4;border:1px solid #E8D4C3;display:flex;flex-direction:column}
.pull .stars{margin:0;color:var(--brass);font-size:.875rem;letter-spacing:.22em;line-height:1}
.pull blockquote{margin:18px 0 0;font-family:var(--serif);font-variation-settings:"opsz" 30;font-size:1.12rem;line-height:1.55;letter-spacing:-.006em;color:var(--on)}
.pull blockquote p{margin:0}
.pull figcaption{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:6px}
.pull figcaption b{font-weight:500}
.pull figcaption span{color:var(--on-3);font-size:.8125rem}
@media(max-width:860px){.pulls{grid-template-columns:1fr}}

/* ── laser area picker ─────────────────────────────────────────────── */
.picker{padding:0 var(--gut);margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,4vw,72px);align-items:start}
.pk-group+.pk-group{margin-top:clamp(28px,4vh,40px)}
.pk-group h3{margin:0 0 14px;color:var(--on-3);font:400 .8125rem/1 var(--monof);letter-spacing:.2em;text-transform:uppercase}
.areas{display:flex;flex-wrap:wrap;gap:10px}
.area{display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font:500 1rem/1 var(--sans);color:var(--on);cursor:pointer;transition:background .3s var(--e-soft),border-color .3s,color .3s,transform .5s var(--e-out)}
.area .bx{width:18px;height:18px;border-radius:50%;border:1px solid rgba(168,93,61,.45);display:grid;place-items:center;transition:background .3s,border-color .3s}
.area .bx svg{width:10px;height:10px;fill:none;stroke:var(--white);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .25s,transform .45s var(--e-out)}
.area .ap{font:400 .875rem/1 var(--monof);letter-spacing:.06em;color:var(--on-3);transition:color .3s;padding:0;background:none;border:0}
.area:hover{border-color:rgba(168,93,61,.5)}
.area[aria-pressed="true"]{background:var(--eucalyptus);border-color:var(--eucalyptus);color:var(--white)}
.area[aria-pressed="true"] .bx{background:var(--white);border-color:var(--white)}
.area[aria-pressed="true"] .bx svg{stroke:var(--eucalyptus);opacity:1;transform:none}
.area[aria-pressed="true"] .ap{color:rgba(255,255,255,.75)}
.area:active{transform:scale(.97)}
.quote{position:sticky;top:calc(var(--hdr) + 90px);padding:clamp(24px,2.6vw,36px);border-radius:4px;background:var(--dk);color:var(--dk-on-2)}
.quote .l{margin:0 0 16px;color:var(--dk-on-3);font-size:.8125rem}
.quote .sel{margin:0;min-height:3.2em;color:var(--dk-on);font-size:var(--small);line-height:1.6}
.quote .sel.empty{color:var(--dk-on-3)}
.q-rows{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--dk-line)}
.q-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--dk-line);font-size:1rem}
.q-rows li span:first-child{color:var(--dk-on-2)}
.q-rows b{font-family:var(--monof);font-weight:400;color:var(--dk-on);font-variant-numeric:tabular-nums;font-size:1rem}
.q-rows small{display:block;text-align:right;color:var(--dk-euc);font-size:.875rem;margin-top:4px}
.q-rows li.lead b{font-family:var(--serif);font-size:2.4rem;letter-spacing:-.02em;line-height:1}
.q-rows .qv{display:inline-flex;align-items:baseline;gap:10px}
.quote s.was{color:var(--dk-on-3);font-family:var(--monof);font-size:1rem;margin:0}
.quote .note{margin:16px 0 22px;font-size:.9375rem;line-height:1.55;color:var(--dk-on-3)}
.quote .btn{width:100%}
.quote .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
@media(max-width:900px){.picker{grid-template-columns:1fr}.quote{position:relative;top:0}}

/* ══ ABOUT PAGE ═══════════════════════════════════════════════════════ */
.ahero-img{margin:clamp(40px,6vh,64px) var(--gut) 0;height:min(78svh,760px);border-radius:3px}
.ahero-img>img{height:124%;margin-top:-12%;object-position:50% 40%}
.tl{padding:0 var(--gut);margin-top:clamp(44px,7vh,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);position:relative}
.tl::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:6px;height:1px;background:var(--line)}
.tl>div{position:relative;padding-top:36px}
.tl>div::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1px solid var(--eucalyptus)}
.tl>div.now::before{background:var(--eucalyptus)}
.tl .when{margin:0 0 12px;color:var(--eucalyptus);font-size:.8125rem}
.tl h3{margin:0 0 10px;font:500 1.1rem/1.3 var(--sans)}
.tl p{margin:0;color:var(--on-2);font-size:var(--small);line-height:1.6}
@media(max-width:900px){.tl{grid-template-columns:1fr 1fr;row-gap:40px}.tl::before{display:none}}
@media(max-width:520px){.tl{grid-template-columns:1fr}}
.team{padding:0 var(--gut);margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.doc{padding:clamp(24px,2.6vw,34px);border-radius:3px;background:var(--surface);border:1px solid #E8D4C3}
.doc .ph{aspect-ratio:1;border-radius:3px;background:repeating-linear-gradient(135deg,#E8D4C3 0 12px,#F5E9DD 12px 24px);display:grid;place-items:center;margin-bottom:22px}
.doc .ph span{font-family:var(--serif);font-size:4rem;color:rgba(36,35,35,.2)}
.doc .nm{margin:0;font-family:var(--serif);font-size:1.75rem;line-height:1.1;letter-spacing:-.015em}
.doc .role{margin:8px 0 14px;color:var(--on-2);font-size:var(--small)}
.doc .reg{margin:0;font-size:.8125rem;color:var(--on-3)}
.doc .ph{overflow:hidden;aspect-ratio:4/5;display:block}
.doc .ph img{object-position:50% 20%}
.doc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.doc .role{margin-bottom:12px}
.doc-tags{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.doc-tags li{padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:.875rem;color:var(--on-2);background:var(--bg)}
.doc .bio{margin:0 0 18px;color:var(--on-2);font-size:var(--small);line-height:1.6}
.pending{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(24px,4vh,36px);padding:8px 14px;border-radius:999px;border:1px dashed rgba(232,212,195,.8);color:var(--on-2);font-size:.9375rem}
.pending i{width:7px;height:7px;border-radius:50%;background:var(--clay)}
@media(max-width:1100px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.team{grid-template-columns:1fr}}
/* clinic mosaic: three columns drift at different speeds */
.mosaic{padding:0 var(--gut);margin-top:clamp(44px,7vh,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);align-items:start;overflow:hidden}
.mosaic .col{display:grid;gap:clamp(14px,1.8vw,26px);will-change:transform}
.mosaic .col:nth-child(2){margin-top:clamp(60px,12vh,140px)}
.mosaic figure{margin:0;border-radius:3px;overflow:hidden;position:relative}
.mosaic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.mosaic figure:hover img{transform:scale(1.04)}
.mosaic figcaption{position:absolute;left:14px;bottom:12px;padding:6px 10px;border-radius:2px;background:rgba(74,65,64,.55);color:var(--dk-on);font-size:.8125rem}
.mosaic .tall{aspect-ratio:3/4}.mosaic .wide{aspect-ratio:4/3}
@media(max-width:720px){.mosaic{grid-template-columns:1fr 1fr}.mosaic .col:nth-child(3){display:none}}
.equip{padding:0 var(--gut);margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.equip>div{padding:clamp(24px,3.4vh,34px) clamp(14px,2vw,28px) 0 0}
.equip>div+div{padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--line)}
.equip .l{margin:0 0 12px;color:var(--eucalyptus);font-size:.8125rem}
.equip h3{margin:0 0 10px;font-family:var(--serif);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.75rem;line-height:1.1}
.equip p{margin:0;color:var(--on-2);font-size:var(--small);line-height:1.6;max-width:34ch}
/* Each device links to the treatment it performs — the About page's only route
   into the treatment pages, and crawlable anchor text on a page that otherwise
   links nowhere but the booking form. */
.equip h3 a{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(168,93,61,.35);
  transition:color .4s var(--e-soft),border-color .4s var(--e-soft)}
.equip h3 a:hover,.equip h3 a:focus-visible{color:var(--eucalyptus);border-color:var(--eucalyptus)}
.equip h3 a:focus-visible{outline:2px solid var(--eucalyptus);outline-offset:3px}
@media(max-width:860px){.equip{grid-template-columns:1fr}.equip>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:24px}}

/* ══ CONTACT PAGE ═════════════════════════════════════════════════════ */
.cinfo{margin:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ci{padding:clamp(24px,3.6vh,34px) clamp(14px,2vw,28px) clamp(24px,3.6vh,34px) 0}
.ci+.ci{padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--line)}
.ci .l{margin:0 0 12px;color:var(--eucalyptus);font-size:.8125rem}
.ci a,.ci address{display:block;font-style:normal;color:var(--on);text-decoration:none;font-size:1.06rem;line-height:1.5}
.ci a:hover{color:var(--eucalyptus)}
.ci p.s{margin:8px 0 0;color:var(--on-3);font-size:.9375rem;line-height:1.5}
@media(max-width:900px){.cinfo{grid-template-columns:1fr 1fr}.ci:nth-child(3){border-left:0;padding-left:0}.ci:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:520px){.cinfo{grid-template-columns:1fr}.ci+.ci{border-left:0;padding-left:0;border-top:1px solid var(--line)}}
.visit{padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,2.4vw,40px);margin-top:clamp(40px,6vh,64px)}
.map{position:relative;min-height:440px;border-radius:3px;overflow:hidden;background:#E8D4C3}
.map svg.streets{position:absolute;inset:0;width:100%;height:100%}
.map-pin{position:absolute;left:52%;top:46%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.map-pin i{width:18px;height:18px;border-radius:50%;background:var(--eucalyptus);box-shadow:0 0 0 6px rgba(168,93,61,.2)}
.map-pin i::after{content:"";position:absolute;left:50%;bottom:0;width:18px;height:18px;margin-left:-9px;border-radius:50%;border:1px solid var(--eucalyptus);animation:ping 2.4s var(--e-out) infinite}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.map-pin span{padding:6px 10px;background:var(--bg);border-radius:2px;font-size:.8125rem;box-shadow:0 10px 24px -12px rgba(36,35,35,.4)}
.map-ui{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:linear-gradient(0deg,rgba(251,248,244,.97) 60%,rgba(251,248,244,0))}
.map-ui p{margin:0;font-size:.9375rem;color:var(--on-3);max-width:40ch}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.door{margin:0;border-radius:3px;overflow:hidden;position:relative}
.door img{width:100%;height:100%;object-fit:cover;display:block}
.door figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px;color:var(--dk-on);background:linear-gradient(0deg,rgba(74,65,64,.8),rgba(74,65,64,0))}
.door figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.1;margin-top:6px}
@media(max-width:900px){.visit{grid-template-columns:1fr}.door{aspect-ratio:4/5}}
.getting{padding:0 var(--gut);margin-top:clamp(28px,4vh,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.getting>div{padding:22px 0;border-top:1px solid var(--line)}
.getting .l{margin:0 0 10px;color:var(--eucalyptus);font-size:.8125rem}
.getting p.s{margin:0;color:var(--on-2);font-size:var(--small);line-height:1.6}
@media(max-width:760px){.getting{grid-template-columns:1fr}}

/* shared form (contact page) — same language as index.html's .book form */
.form-card{background:rgba(232,212,195,.13);border-radius:3px;padding:clamp(26px,3.4vw,44px);box-shadow:0 34px 70px -46px rgba(36,35,35,.4),18px 18px 0 -17px rgba(168,93,61,.45)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
.fld{display:flex;flex-direction:column;gap:8px}
.fld.wide{grid-column:1/-1}
.fld label{font:400 .8125rem/1.3 var(--monof);letter-spacing:.2em;text-transform:uppercase;color:var(--on-2)}
.fld .req{color:var(--clay);padding-left:4px}
.fld .opt{text-transform:none;letter-spacing:0;font-family:var(--sans);color:var(--on-3);font-size:.875rem;padding-left:6px}
.fld input,.fld select,.fld textarea{width:100%;font:400 1rem/1.3 var(--sans);color:var(--on);background:var(--surface);border:1px solid transparent;border-radius:2px;padding:15px 16px;
  transition:border-color .24s var(--e-soft),box-shadow .24s var(--e-soft)}
.fld textarea{min-height:120px;resize:vertical}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233E5C52' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.fld input::placeholder,.fld textarea::placeholder{color:#756A66}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(168,93,61,.28)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--eucalyptus);box-shadow:0 0 0 3px rgba(168,93,61,.14)}
.checked .fld input:invalid,.checked .fld select:invalid,.checked .consent input:invalid{border-color:var(--err);box-shadow:0 0 0 3px rgba(156,74,52,.2)}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;margin-top:4px}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:19px;height:19px;margin:2px 0 0;border:1px solid rgba(168,93,61,.5);border-radius:2px;background:#FFF;cursor:pointer}
.consent input:checked{background:var(--eucalyptus) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.6' fill='none' stroke='%23F7F5F2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 10px no-repeat;border-color:var(--eucalyptus)}
.consent label{font-size:.9375rem;line-height:1.5;color:var(--on-2)}
.consent a{color:var(--eucalyptus)}
.fsubmit{grid-column:1/-1;margin-top:10px;width:100%;text-transform:uppercase;letter-spacing:.14em;font-size:.875rem;padding:20px 27px}
.ffine{grid-column:1/-1;margin:14px 0 0;font-size:.875rem;line-height:1.55;color:var(--on-3)}
.ferr{font-size:.9375rem;color:var(--err);margin:12px 0 0}
/* field note under a free-text input (data minimisation: what NOT to type) */
.fld .fhint{margin:0;font-size:.8125rem;line-height:1.45;color:var(--on-3)}
/* spam honeypot: off-screen and out of the tab order for people; bots that
   fill every field fill this one too, and site.js then sends nothing */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* while an enquiry is in flight the submit is disabled (one send at a time) */
form.busy [type="submit"]{opacity:.6;cursor:progress}
/* enquiry not sent (no endpoint): the success tick would say the opposite of the text */
.fdone.unsent .tick,.book-done.unsent .tick{display:none}
/* booking link inside the confirmation panel. Normally a second route in;
   when the browser blocked the auto-opened tab it is the only one, so .blocked
   gives it a nudge rather than letting it read as an afterthought. */
.fbook{margin:18px 0 0}
.fdone.blocked .fbook{margin-top:22px}
.fdone.blocked .fbook::before{content:"Your browser blocked the booking tab — open it here:";
  display:block;margin-bottom:10px;color:var(--on-2);font-size:var(--small)}
.fdone{display:none;text-align:center;padding:clamp(30px,5vw,56px) 10px}
.fdone.on{display:block;animation:loadIn .7s var(--e-out) both}
.fdone .tick{width:54px;height:54px;border-radius:50%;border:1px solid var(--eucalyptus);display:grid;place-items:center;margin:0 auto 22px}
.fdone .tick svg{width:22px;height:22px;stroke:var(--eucalyptus);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fdone h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.75rem}
.fdone p{margin:14px auto 0;max-width:38ch;font-size:1rem;color:var(--on-2)}
form.sent{display:none}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.bookwrap{padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.bookwrap ul.pts{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.bookwrap ul.pts li{display:flex;gap:12px;align-items:baseline;font-size:1rem;color:var(--on-2)}
.bookwrap ul.pts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none;transform:translateY(-2px)}
@media(max-width:980px){.bookwrap{grid-template-columns:1fr}}

/* ══ REDUCED MOTION — off, not shortened ══════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .rise,.imgrev img,.draw,.swi,.load,.cx-list li,.mega-col,.mega-feat,.drawer-nav a,.ftr-big b{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}
  .imgrev::after{display:none}
  .marq-t{animation:none}
  .map-pin i::after{animation:none;display:none}
  .hdr,.btn,.pr,.pcard,.cx-row .t,.trow .t{transition:none}
  .scrolly-n .big span{transition:none}
  .faq details[open] .a{animation:none}
}

/* ══ COOKIE CHOICE — analytics consent bar (built by site.js §18) ══════
   Bottom-left, clear of the quick-call button. Accept and Reject are the same
   size and weight (ICO: refusing must be as easy as accepting). */
.ck{position:fixed;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));z-index:80;
  width:min(440px,calc(100vw - 48px));padding:24px 24px 22px;background:var(--bg);color:var(--on);
  border:1px solid var(--line);border-radius:3px;
  box-shadow:0 30px 60px -28px rgba(36,35,35,.45),0 2px 8px rgba(36,35,35,.06);
  opacity:0;transform:translateY(16px);transition:opacity .4s var(--e-soft),transform .55s var(--e-out)}
.ck.on{opacity:1;transform:none}
.ck-t{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.25;letter-spacing:-.01em;color:var(--on)}
.ck-d{margin:10px 0 0;font-size:.9375rem;line-height:1.55;color:var(--on-3)}
.ck-d a{color:var(--terracotta);text-underline-offset:3px}
.ck-d a:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.ck-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.ck-b .btn{width:100%}
@media(max-width:600px){
  .ck{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;padding:14px 16px 14px}
  .ck-t{font-size:1.05rem}
  .ck-d{margin-top:6px;font-size:.8125rem;line-height:1.45}
  .ck-d .ck-long{display:none}
  .ck-b{margin-top:12px;gap:8px}.ck-b .btn{padding:11px 14px;min-height:44px}
  /* the bar spans the width here, so the call button steps aside until it is answered */
  .ck-open .qa{opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.ck{transition:none}}

/* ══ QUICK CONTACT — WhatsApp and Call in one frosted dock, fixed bottom-right (built by site.js §16) ══
   One quiet object rather than two loud discs: an ivory glass capsule in the site's
   own palette, hairline border, layered soft shadow. Call is the filled primary;
   WhatsApp sits on white with its own green mark so it is recognised at a glance. */
.qa{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:76;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:rgba(251,248,244,.78);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(168,93,61,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 48px -22px rgba(74,65,64,.45),0 6px 16px -8px rgba(74,65,64,.18);
  opacity:0;transform:translateY(16px) scale(.94);pointer-events:none;
  transition:opacity .45s var(--e-soft),transform .6s var(--e-out)}
.qa.on{opacity:1;transform:none;pointer-events:auto}
.lock .qa{opacity:0;pointer-events:none}
.qa-wa,.qa-call{position:relative;width:50px;height:50px;display:grid;place-items:center;border-radius:50%;text-decoration:none;
  transition:background .3s var(--e-soft),color .3s var(--e-soft),transform .45s var(--e-out),box-shadow .3s var(--e-soft)}
.qa-wa{background:var(--white);color:#1DA851;box-shadow:0 0 0 1px rgba(74,65,64,.08),0 4px 10px -6px rgba(74,65,64,.3)}
.qa-wa svg{width:24px;height:24px;fill:currentColor}
.qa-call{background:var(--terracotta);color:var(--white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px -8px rgba(168,93,61,.75)}
.qa-call svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--e-out)}
.qa-wa:hover{background:#1DA851;color:var(--white);transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(29,168,81,.8)}
.qa-call:hover{background:#8f4d31;transform:translateY(-1px)}
.qa-call:hover svg{transform:rotate(-12deg)}
.qa-wa:focus,.qa-call:focus{outline:none}
.qa-wa:focus-visible,.qa-call:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
/* the label, slid out to the left of the dock on hover/focus — pointer devices only */
.qa-tip{position:absolute;right:calc(100% + 18px);top:50%;transform:translate(6px,-50%);opacity:0;pointer-events:none;
  background:var(--on);color:var(--white);font:500 .8125rem/1 var(--sans);letter-spacing:.02em;white-space:nowrap;
  padding:9px 14px;border-radius:999px;box-shadow:0 12px 24px -12px rgba(36,35,35,.55);
  transition:opacity .3s var(--e-soft),transform .45s var(--e-out)}
@media(hover:hover){.qa-wa:hover .qa-tip,.qa-call:hover .qa-tip{opacity:1;transform:translate(0,-50%)}}
.qa-wa:focus-visible .qa-tip,.qa-call:focus-visible .qa-tip{opacity:1;transform:translate(0,-50%)}
@media(max-width:520px){
  .qa{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));padding:5px;gap:5px}
  .qa-wa,.qa-call{width:46px;height:46px}
  .qa-wa svg{width:22px;height:22px}.qa-call svg{width:20px;height:20px}
}
/* the dock floats over the page foot; give the last row room to scroll
   clear of it so the legal links are never stuck underneath
   (dock height + its bottom offset + 14px air) */
.ftr-base{padding-bottom:calc(114px + max(24px,env(safe-area-inset-bottom)) + 14px)}
@media(max-width:520px){.ftr-base{padding-bottom:calc(104px + max(14px,env(safe-area-inset-bottom)) + 14px)}}
@media(prefers-reduced-motion:reduce){.qa,.qa-wa,.qa-call,.qa-call svg{transition:none}.qa{transform:none}}
@media print{.qa{display:none}}

/* ══ TOUCH TARGETS (coarse pointers only) ═════════════════════════════
   Audited at 390x844 across the site: the footer's link columns were the
   worst cluster — 18px-tall inline anchors on a 10px gap, so two adjacent
   targets sat 28px centre to centre, well under the 44px a fingertip needs
   and under WCAG 2.5.8's 24px floor besides. The legal row (23px), the
   back-to-top control (34px) and a handful of buttons that landed at 41-42px
   were the same fault in smaller doses.

   Gated on (pointer:coarse), NOT on a width query: this is about the input
   device, not the screen. A desktop window dragged narrow keeps its mouse and
   keeps the typographic spacing the footer was designed with; a phone or a
   tablet gets the padding whatever its width. Padding and min-height only —
   nothing here changes a font size, a colour or a layout. */
@media (pointer:coarse){
  /* the link columns: padding does the work and the grid gap comes off, so the
     rhythm stays close to what it was while each row grows to a full target */
  .ftr-col ul{gap:0}
  .ftr-col ul a{display:block;padding:13px 0}
  .ftr-col .c a{display:inline-block;padding:9px 0}
  .ftr-base nav{gap:0 22px}
  .ftr-base nav a{display:inline-block;padding:11px 0}
  .totop{min-height:44px}
  /* the near misses — 41-42px is close enough that only the floor is needed */
  .btn,.btn.sm{min-height:44px}
}

/* ══ BEFORE & AFTER — drag to compare ══════════════════════════════════
   Shared by the home page (#results) and the #results section on every
   treatment page. Moved here from index.html unchanged. */
.ba{margin:0;display:flex;flex-direction:column}
.ba-stage{--p:50%;position:relative;aspect-ratio:5/6;overflow:hidden;border-radius:3px;
  background:rgba(232,212,195,.10);cursor:ew-resize;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  box-shadow:0 34px 70px -42px rgba(36,35,35,.42), 18px 18px 0 -17px rgba(168,93,61,.5)}
.ba-stage.is-drag{cursor:grabbing}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;pointer-events:none;-webkit-user-drag:none}
.ba-b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0);will-change:clip-path}

/* the cut: one unbroken hairline, edge to edge */
.ba-div{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;
  background:#FFF;box-shadow:0 0 12px -1px rgba(36,35,35,.55);pointer-events:none}
/* the grip: an outline the line passes through — no fill, no button */
.ba-handle{position:absolute;top:50%;left:var(--p);width:46px;height:68px;margin:-34px 0 0 -23px;
  display:flex;align-items:center;justify-content:center;gap:13px;padding:0;
  border:2px solid #FFF;border-radius:999px;background:transparent;
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  box-shadow:0 0 14px -2px rgba(36,35,35,.5);
  cursor:ew-resize;touch-action:none;transition:box-shadow .2s var(--e-soft)}
/* triangles drawn from borders, not glyphs — no font dependency, crisp at any size */
.ba-handle::before,.ba-handle::after{content:"";width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95))}
.ba-handle::before{border-right:8px solid var(--on)}
.ba-handle::after{border-left:8px solid var(--on)}
.ba-stage.is-drag .ba-handle{box-shadow:0 0 18px -2px rgba(36,35,35,.7)}
.ba-handle:focus-visible{outline:2px solid var(--aqua);outline-offset:4px}

.ba-tag{position:absolute;top:16px;padding:6px 10px;border-radius:2px;pointer-events:none;
  font-size:.8125rem;letter-spacing:.2em;color:var(--bg);background:rgba(36,35,35,.5);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  transition:opacity .18s var(--e-soft)}
.ba-tag.b{left:16px}.ba-tag.a{right:16px}
/* Marks a simulated (non-patient) pair — must stay visible whenever such a pair is shown. */
.ba-tag.ill{top:auto;bottom:16px;left:16px}

/* no flex:1 — nothing to distribute now the card is content-height */
.ba figcaption{padding-top:20px;display:flex;flex-direction:column}
/* three clear steps: title big, description medium, sessions small */
.ba .l{margin:0 0 10px;font-size:.875rem;letter-spacing:.18em;color:var(--eucalyptus)}
.ba h3{margin:0;font-family:"Playfair Display",Georgia,serif;
  font-variation-settings:"opsz" 40,"wght" 400;font-weight:400;
  font-size:1.7rem;line-height:1.2;letter-spacing:-.014em;color:var(--on);max-width:22ch}
/* Each protocol links to the page that explains it — crawlable anchor text, and
   somewhere to go for the visitor the photograph just convinced. Same restraint
   as the reel titles: the rule only draws on intent. */
.ba h3 a{color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--brass),var(--brass));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .5s var(--e-out),color .4s var(--e-soft)}
.ba h3 a:hover,.ba h3 a:focus-visible{color:var(--eucalyptus);background-size:100% 1px}
.ba h3 a:focus-visible{outline:2px solid var(--eucalyptus);outline-offset:3px;background-size:0 1px}
/* the middle step the three-tier caption was always written for */
.ba .d{margin:12px 0 0;font-size:1.02rem;line-height:1.55;color:var(--on-2);max-width:32ch}
/* sits directly under the title on a hairline instead of being pushed to the
   bottom of a stretched box, which left a dead gap on the shorter cards */
.ba .meta{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:.8125rem;letter-spacing:.14em;color:var(--on-3)}
.ba .meta i{font-style:normal;color:var(--brass);padding:0 7px}
/* four pairs, one row (2x2 on tablets, stacked on phones) — home #results and every treatment page.
   Capped at 1520px (3 cards at 400 + 2 gaps + side padding) so wide screens
   keep three across without the cards outgrowing the viewport. */
/* flex rather than grid so a short last row (7 pairs = 4 + 3) sits centred */
.res-grid{--cols:4;--gap:clamp(36px,4vw,64px);display:flex;flex-wrap:wrap;justify-content:center;
  max-width:1680px;margin-inline:auto;
  gap:var(--gap);padding:clamp(44px,6vh,72px) var(--gut) 0}
.res-grid .ba{align-self:start;flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
.res-grid .ba:nth-child(even){margin-top:0}
@media(max-width:1180px){.res-grid{--cols:2}}
@media(max-width:600px){.res-grid{--cols:1}}
@media(max-width:720px){.res-grid{--gap:44px}.ba h3{max-width:none}
  .res-grid .ba:nth-child(even){margin-top:0}}

/* ══ SIGNATURE TREATMENTS ═════════════════════════════════════════════
   The three services the clinic leads with — injectable treatments, fat
   reduction and laser skin resurfacing. One component, used on the home
   page, the treatments index and the pricing page, plus a matching panel
   in the mega menu and the drawer and a small .sig-tag wherever one of the
   three appears in a list. Everything else on the site stays as it was. */
.sig-grid{padding:0 var(--gut);margin-top:clamp(44px,6vh,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.sig-grid:first-child{margin-top:0}
.sig-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--on);
  background:var(--surface);border:1px solid #E8D4C3;border-radius:3px;overflow:hidden;
  transition:transform .7s var(--e-out),box-shadow .7s var(--e-out),border-color .4s var(--e-soft)}
.sig-card:hover{transform:translateY(-6px);border-color:rgba(168,93,61,.45);box-shadow:0 30px 60px -36px rgba(36,35,35,.35)}
.sig-card:focus-visible{outline:2px solid var(--eucalyptus);outline-offset:4px}
.sig-fig{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.sig-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.sig-card:hover .sig-fig img{transform:scale(1.05)}
.sig-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,35,35,.34),rgba(36,35,35,0) 42%);pointer-events:none}
.sig-n{position:absolute;left:20px;top:14px;z-index:1;font-family:var(--serif);font-variation-settings:"opsz" 96;
  font-size:2.4rem;line-height:1;letter-spacing:-.02em;color:#FFF}
.sig-body{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
.sig-body .l{margin:0 0 10px;color:var(--eucalyptus);font-size:.8125rem;letter-spacing:.18em}
.sig-body h3{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 48;font-weight:400;
  font-size:clamp(1.7rem,2.2vw,2.1rem);line-height:1.08;letter-spacing:-.018em}
.sig-body .d{margin:12px 0 0;color:var(--on-2);font-size:var(--small);line-height:1.6}
.sig-opts{list-style:none;margin:18px 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sig-opts li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.875rem;color:var(--on-2);background:var(--bg)}
.sig-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sig-body .sig-foot{margin-top:auto;border-top:1px solid var(--line)}
.sig-foot .p{color:var(--eucalyptus);font-size:.875rem;letter-spacing:.12em}
.sig-foot .ar{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:background .35s var(--e-soft),border-color .35s,transform .6s var(--e-out)}
.sig-foot .ar svg{width:12px;height:12px;fill:none;stroke:var(--on);stroke-width:1.6;transition:stroke .3s}
.sig-card:hover .sig-foot .ar{background:var(--eucalyptus);border-color:var(--eucalyptus);transform:rotate(-45deg)}
.sig-card:hover .sig-foot .ar svg{stroke:var(--white)}
.sig-more{padding:0 var(--gut);margin:clamp(28px,4vh,40px) 0 0;color:var(--on-3);font-size:var(--small)}
@media(max-width:980px){
  .sig-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .sig-grid::-webkit-scrollbar{display:none}
  .sig-card{flex:0 0 min(82%,380px);scroll-snap-align:start}
  .sig-card:last-child{margin-right:var(--gut)}
  .sig-card:hover{transform:none}
}

/* small marker beside a signature treatment in any list, row or hero */
.sig-tag{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;white-space:nowrap;
  padding:5px 10px;border-radius:999px;border:1px solid rgba(168,93,61,.38);background:var(--surface);
  font-family:var(--monof);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--eucalyptus);
  text-decoration:none;font-variation-settings:normal;line-height:1.2}
.sig-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
a.sig-tag:hover{border-color:var(--eucalyptus)}
.cx-row .t .sig-tag,.trow .t .sig-tag,td.nm .sig-tag{margin-left:10px;position:relative;top:-2px}
.thero .sig-tag{margin:0 0 18px;max-width:100%;white-space:normal}
/* the 50% offer: a small filled pill beside the treatment's name in lists and cards */
.off-tag{display:inline-flex;align-items:center;vertical-align:middle;white-space:nowrap;padding:4px 9px;border-radius:999px;
  background:var(--terracotta);color:var(--white);font-family:var(--monof);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.2;font-variation-settings:normal}
.cx-row .t .off-tag,.trow .t .off-tag{margin-left:8px;position:relative;top:-2px}

/* mega menu: the signature panel takes the slot the single featured card used */
.mega-sig{background:var(--dk);color:var(--dk-on-2);border-radius:3px;padding:20px 20px 12px;
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--e-soft),transform .6s var(--e-out)}
.hdr.mega-open .mega-sig{opacity:1;transform:none;transition-delay:.28s}
.mega-sig .mega-h{color:var(--dk-euc)}
.mega-sig .mega-h::before{background:var(--dk-brass)}
.mega-sig ul{list-style:none;margin:0;padding:0}
.mega-sig li+li{border-top:1px solid var(--dk-line)}
.mega-sig a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 14px;align-items:center;padding:10px 0;text-decoration:none;color:var(--dk-on)}
.mega-sig img{grid-row:span 2;width:52px;height:52px;border-radius:2px;object-fit:cover}
.mega-sig .t{font-family:var(--serif);font-size:1.2rem;line-height:1.1;letter-spacing:-.01em;transition:color .25s var(--e-soft)}
.mega-sig .s{font-size:.875rem;color:var(--dk-on-3)}
.mega-sig a:hover .t{color:var(--dk-euc)}
.mega-sig a:focus-visible{outline:2px solid var(--dk-euc);outline-offset:2px}
@media(max-width:1500px){
  .mega-sig{grid-column:1/-1}
  .mega-sig ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .mega-sig li+li{border-top:0}
}

/* drawer: the three, above the contact details */
.drawer-sig .mega-h{margin-bottom:10px}
.drawer-sig ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.drawer-sig a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 14px;align-items:center;min-height:48px;text-decoration:none;color:var(--on)}
.drawer-sig img{grid-row:span 2;width:48px;height:48px;border-radius:2px;object-fit:cover}
.drawer-sig .t{font-family:var(--serif);font-size:1.25rem;line-height:1.1}
.drawer-sig .s{font-size:.875rem;color:var(--on-3)}
@media (prefers-reduced-motion: reduce){.mega-sig{opacity:1;transform:none;transition:none}}

/* ══ ABOUT — what makes us different (dark comparison) ═══════════════ */
.diff{background:var(--dk);color:var(--dk-on-2)}
.diff .k{color:var(--dk-euc)}.diff .k::before{background:var(--dk-brass)}
.diff .d2{color:var(--dk-on)}.diff .d2 em{color:var(--dk-euc)}
.diff .lede{color:var(--dk-on-2)}
.diff-table{margin:clamp(44px,6vh,72px) var(--gut) 0;border-top:1px solid var(--dk-line)}
.diff-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,5fr);gap:clamp(16px,3vw,48px);
  padding:clamp(20px,3vh,30px) 0;border-bottom:1px solid var(--dk-line);align-items:baseline}
.diff-row p{margin:0}
.diff-l{color:var(--dk-on-3);font-size:.8125rem}
.diff-u{color:var(--dk-on-3);font-size:var(--small);line-height:1.6;text-decoration:line-through;text-decoration-color:rgba(232,212,195,.35)}
.diff-o{color:var(--dk-on);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;padding-left:18px;border-left:2px solid var(--dk-euc)}
.diff-o b{font-weight:500;color:var(--dk-euc)}
.diff-hd{padding:14px 0}
.diff-hd .diff-u,.diff-hd .diff-o{font-size:.8125rem;text-decoration:none;border-left:0;padding-left:0}
.diff-hd .diff-o{color:var(--dk-euc)}
.diff-act{margin:clamp(36px,5vh,56px) var(--gut) 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.diff-act p{margin:0;color:var(--dk-on-3);font-size:var(--small)}
.diff :focus-visible{outline-color:var(--dk-euc)}
@media(max-width:820px){
  .diff-row{grid-template-columns:1fr;gap:8px}
  .diff-hd{display:none}
  .diff-u::before{content:"Usually: ";text-decoration:none;display:inline}
}

/* footer: the doctor-led marker above the brand line */
.ftr-doc{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:7px 14px 7px 11px;border:1px solid var(--dk-line);border-radius:999px;
  color:var(--dk-euc);font-size:.8125rem;letter-spacing:.18em}
.ftr-doc svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ftr-lead{max-width:15ch}

/* ── privacy notice (privacy.html) ───────────────────────────────────────
   Long-form reading in the site's own tokens. Desktop: a sticky contents rail
   beside a full-width column; phone: the rail becomes a collapsible "On this page".
   Body 1.0625rem / 1.75 for reading; headings serif, section numbers mono.
   .ph marks a placeholder the clinic must replace — deliberately visible. */
.pv{padding:0 var(--gut) clamp(88px,14vh,160px)}

/* at a glance */
.pv-glance{margin:0 0 clamp(56px,9vh,104px)}
.pv-glance-h{margin:0 0 18px;color:var(--eucalyptus)}
.pv-glance-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pv-gl{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.2vw,30px);background:var(--surface);border:1px solid var(--line);border-radius:3px;
  /* keeps .rise's reveal (opacity/filter/transform) and adds the hover lift */
  transition:opacity .9s var(--e-out),filter .9s var(--e-out),transform .6s var(--e-out),border-color .35s var(--e-soft),box-shadow .35s var(--e-soft)}
.pv-gl:hover,.pv-gl:focus-within{border-color:rgba(168,93,61,.45);box-shadow:0 24px 50px -36px rgba(36,35,35,.45);transform:translateY(-2px)}
.pv-gl svg{width:28px;height:28px;fill:none;stroke:var(--eucalyptus);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.pv-gl .t{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.2;color:var(--on)}
.pv-gl .s{margin:0;font-size:.9375rem;line-height:1.6;color:var(--on-3);flex:1}
.pv-gl-a{align-self:flex-start;margin-top:6px;font-size:.9375rem;color:var(--eucalyptus);text-decoration:underline;text-decoration-color:rgba(168,93,61,.35);text-underline-offset:4px}
/* the whole card is the target; the link text stays the accessible name */
.pv-gl-a::after{content:"";position:absolute;inset:0;border-radius:3px}
.pv-gl-a:focus-visible{outline:none}
.pv-gl:has(.pv-gl-a:focus-visible){outline:2px solid var(--eucalyptus);outline-offset:3px}

/* rail + body */
.pv-grid{display:grid;grid-template-columns:minmax(200px,248px) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start}
.pv-toc{position:sticky;top:calc(var(--hdr) + 28px);max-height:calc(100vh - var(--hdr) - 56px);overflow:auto;padding-right:4px}
.pv-toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--on-3);padding:0 0 14px;border-bottom:1px solid var(--line);cursor:default}
.pv-toc summary::-webkit-details-marker{display:none}
.pv-toc summary svg{display:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e-out)}
.pv-toc-l{list-style:none;margin:10px 0 0;padding:0}
.pv-toc-l a{position:relative;display:flex;gap:12px;align-items:baseline;padding:8px 0 8px 16px;font-size:.9375rem;line-height:1.4;color:var(--on-3);text-decoration:none;transition:color .25s var(--e-soft)}
.pv-toc-l a::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--eucalyptus);transform:scaleY(0);transition:transform .35s var(--e-out)}
.pv-toc-l a:hover{color:var(--on)}
.pv-toc-l a[aria-current]{color:var(--on)}
.pv-toc-l a[aria-current]::before{transform:scaleY(1)}
.pv-toc-l .n{flex:none;width:2.2em;font-size:.75rem;color:var(--on-3)}
.pv-toc-l a[aria-current] .n{color:var(--eucalyptus)}

/* full width of the column beside the rail (client request) */
.pv-body{min-width:0}
.pv-sec{padding:clamp(40px,6vh,64px) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 16px)}
.pv-sec:first-child{border-top:0;padding-top:0}
.pv-sec:focus{outline:none}
.pv-h{display:flex;align-items:baseline;gap:16px;margin:0 0 20px}
.pv-n{flex:none;color:var(--eucalyptus);font-size:.8125rem}
.pv-h h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.65rem,2.6vw,2.25rem);line-height:1.15;letter-spacing:-.01em;color:var(--on);text-wrap:balance}
.pv-sec p,.pv-sec li,.pv-sec dd{font-size:1.0625rem;line-height:1.75;color:var(--on-2)}
.pv-sec p{margin:0 0 1em}
.pv-sec p:last-child{margin-bottom:0}
.pv-sec b{font-weight:600;color:var(--on)}
.pv-sec a{color:var(--eucalyptus);text-decoration:underline;text-decoration-color:rgba(168,93,61,.45);text-underline-offset:3px}
.pv-sec a:hover{text-decoration-color:currentColor}

/* lists */
.pv-list{list-style:none;margin:0 0 1.1em;padding:0}
.pv-list li{position:relative;padding-left:26px;margin:0 0 .6em}
.pv-list li::before{content:"";position:absolute;left:2px;top:.82em;width:12px;height:1.5px;background:var(--eucalyptus)}

/* contact facts: label over value, two columns */
.pv-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:24px 0;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.pv-facts>div{background:var(--surface);padding:18px 20px}
.pv-facts dt{margin:0 0 6px;font-size:.75rem;color:var(--on-3)}
.pv-facts dd{margin:0;font-size:1rem;line-height:1.5;color:var(--on)}
@media (min-width:1200px){.pv-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* key / value rows */
.pv-kv{margin:20px 0 24px;border-top:1px solid var(--line)}
.pv-kv>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 28px;padding:16px 0;border-bottom:1px solid var(--line)}
.pv-kv dt{font-size:.9375rem;line-height:1.55;color:var(--on-3)}
.pv-kv dd{margin:0;font-size:1rem;line-height:1.6}

/* callouts */
.pv-note{margin:22px 0;padding:18px 22px;background:var(--blush);border-left:2px solid var(--eucalyptus);border-radius:0 3px 3px 0}
.pv-status{display:flex;gap:12px;align-items:flex-start;margin:20px 0;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:3px;color:var(--on)!important}
.pv-status svg{flex:none;width:22px;height:22px;margin-top:3px;fill:none;stroke:var(--eucalyptus);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* small cards: website practices, rights */
.pv-cards,.pv-rights{list-style:none;margin:20px 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pv-cards li,.pv-rights li{margin:0;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:3px}
.pv-cards li.wide,.pv-rights li.wide{grid-column:1/-1}
.pv-cards .t{margin:0 0 6px;font-weight:600;font-size:1rem;color:var(--on)}
.pv-cards p:not(.t){font-size:.9375rem;line-height:1.65}
.pv-rights li{display:flex;flex-direction:column;gap:4px}
.pv-rights b{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.25;color:var(--on)}
.pv-rights span{font-size:.9375rem;line-height:1.6;color:var(--on-2)}

/* providers table → stacked cards on a phone (below) */
.pv-tbl{width:100%;border-collapse:collapse;margin:20px 0 24px;font-size:.9375rem}
.pv-tbl th,.pv-tbl td{text-align:left;vertical-align:top;padding:14px 18px 14px 0;border-bottom:1px solid var(--line);line-height:1.55;color:var(--on-2)}
.pv-tbl thead th{font:600 .75rem/1.3 var(--monof);letter-spacing:.14em;text-transform:uppercase;color:var(--on-3);border-bottom-color:var(--clay)}
.pv-tbl tbody th{font-weight:600;color:var(--on)}
/* "Cookie settings" inside the privacy text: a button (it opens the consent bar) styled as the surrounding links */
.pv-ck{padding:0;border:0;background:none;font:inherit;color:var(--terracotta);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pv-ck:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.pv-tbl code{font:inherit;font-weight:600}

/* ICO */
.pv-ico{margin:20px 0 0;padding:24px 26px;background:var(--blush);border-radius:3px}
.pv-ico p{margin:0 0 12px}
.pv-ico-c{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;margin:0!important}
.pv-ico-c>span{color:var(--on-3)}

.pv-meta{margin-top:20px!important;color:var(--on-3)!important;font-size:.8125rem!important}

/* closing call to action */
.pv-cta{margin-top:clamp(24px,4vh,40px);padding:clamp(28px,3.4vw,44px);background:var(--surface);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 34px 70px -52px rgba(36,35,35,.45),14px 14px 0 -13px rgba(168,93,61,.45)}
.pv-cta-h{margin:0 0 10px;font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.2;color:var(--on)}
.pv-cta-h em{color:var(--eucalyptus)}
.pv-cta p:not(.pv-cta-h){margin:0;color:var(--on-2);line-height:1.65}
.pv-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

.ph{background:rgba(168,93,61,.14);color:var(--on);padding:0 .25em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

@media (max-width:1100px){.pv-glance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .pv-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  /* the rail becomes an "On this page" disclosure in the flow. Not sticky: under
     the fixed header it would cover the very heading a contents link scrolls to. */
  .pv-toc{position:static;max-height:none;overflow:visible;padding:0}
  .pv-toc-d{background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:0 18px 40px -30px rgba(36,35,35,.45)}
  .pv-toc summary{cursor:pointer;min-height:48px;padding:0 18px;border-bottom:0;color:var(--on)}
  .pv-toc summary svg{display:block}
  .pv-toc-d[open] summary{border-bottom:1px solid var(--line)}
  .pv-toc-d[open] summary svg{transform:rotate(180deg)}
  .pv-toc-l{margin:0;padding:6px 18px 12px;max-height:min(60vh,520px);overflow:auto}
  .pv-toc-l a{min-height:44px;align-items:center;padding:6px 0 6px 14px}
}
@media (max-width:640px){
  .pv-glance-grid,.pv-facts,.pv-cards,.pv-rights{grid-template-columns:minmax(0,1fr)}
  .pv-kv>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .pv-h{flex-direction:column;gap:6px}
  /* table rows as cards: each cell labelled from its column */
  .pv-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pv-tbl,.pv-tbl tbody,.pv-tbl tr,.pv-tbl th,.pv-tbl td{display:block;width:100%}
  .pv-tbl tr{padding:16px 18px;margin:0 0 10px;background:var(--surface);border:1px solid var(--line);border-radius:3px}
  .pv-tbl th,.pv-tbl td{padding:4px 0;border:0}
  .pv-tbl tbody th{font-size:1rem;margin-bottom:6px}
  .pv-tbl td::before{content:attr(data-label);display:block;font:600 .6875rem/1.4 var(--monof);letter-spacing:.14em;text-transform:uppercase;color:var(--on-3)}
}
@media (prefers-reduced-motion:reduce){
  .pv-gl,.pv-gl:hover,.pv-gl:focus-within{transform:none;transition:none}
  .pv-toc-l a::before,.pv-toc summary svg{transition:none}
}

/* ══ PHONE FIXES (mobile audit, 5 Oct 2026) ════════════════════════════
   Small links and buttons met the 44px touch minimum only by luck. On touch
   screens the tap area grows with vertical padding that a matching negative
   margin cancels, so nothing moves on screen — only the target gets bigger. */
@media (pointer:coarse){
  .crumbs a,.callcard a,.ftr-credit,.pv-gl-a,.tlink,.pv-ck,.pv-ico-c a,a.sig-tag,.cx-foot a,.clinic-txt .tlink,figcaption h3.t a,.book-consent a{
    padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}
  .ci a{padding-top:9px;padding-bottom:9px;margin-top:-9px;margin-bottom:-9px}
  .chip,.cx-tab{min-height:44px}
  .ftr-base a{display:inline-block;padding-top:10px;padding-bottom:10px;margin-top:-10px;margin-bottom:-10px}
}
@media(max-width:560px){
  /* the treatment hero's "From £…" card sat on the photo and hid the lower
     part of the before & after; on a phone it sits under the photo instead */
  .thero-fig .badge{position:static;display:inline-flex;align-items:baseline;gap:10px;margin-top:14px;
    padding:10px 14px;box-shadow:none;border:1px solid var(--line)}
  .thero-fig .badge b{font-size:1.5rem}
  /* contact form submit: one line, not a cramped two-line block */
  .fsubmit{letter-spacing:.08em;padding:18px 16px;white-space:nowrap}
}
@media(max-width:380px){
  .fsubmit{white-space:normal;line-height:1.35}
  /* the signature card-offset line read as a stray half border down the side
     of a full-width form card; the soft shadow stays */
  .form-card{box-shadow:0 30px 60px -44px rgba(36,35,35,.4)}
}
@media(max-width:600px){
  /* storefront photo: keep the fascia (the "Dermalogic" sign) in frame */
  .clinic-img .par>img{object-position:50% 0}
}
/* menu open: the drawer scrolls under the header, so the bar is fully opaque there */
html.lock .hdr{background:var(--bg)}

/* contact map: scaled to a phone the street label was ~8px, and any size that
   reads either runs off the frame or under the pin card. It is decoration (the
   card names the clinic, the address sits above), so phones leave it out. */
@media(max-width:600px){#map svg text{display:none}}
.says-filter.is-overflow:not(.at-end){-webkit-mask:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
/* Struck-through original price beside an offer price (fat reduction, Oct 2026). */
s.was{color:var(--on-3);font-size:.62em;letter-spacing:0;margin-right:.3em;text-decoration-thickness:1px;white-space:nowrap}
.pk s.was{font-size:.85em}
td.num s.was{font-size:.82em}
.pcard.feat s.was{color:var(--dk-on-3)}
/* Prices in the treatment lists (home explorer, treatments page): set as type,
   not chips. A small mono label, then the price in the display serif. On offer,
   the basic price sits first, struck through in grey, and the offer price follows
   larger in terracotta — the usual was/now reading order, both legible
   (--on-3 5.0:1, terracotta 4.8:1 at this size). */
.p.pz{display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding:0;background:none;border:0;
  color:var(--on);letter-spacing:0;line-height:1;white-space:nowrap}
.pz-l{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-3)}
.pz-v{display:flex;align-items:baseline;gap:10px}
.pz-v b{font-family:var(--serif);font-weight:400;font-size:1.75rem;letter-spacing:-.01em;color:var(--terracotta)}
.pz-v s{font-family:var(--serif);font-size:1.125rem;color:var(--on-3);text-decoration-thickness:1.5px;text-decoration-color:var(--on-3)}
.pz-v i{font-style:normal;font-size:.8125rem;letter-spacing:.04em;color:var(--on-2)}
.pz-v em{font-family:var(--serif);font-size:1.125rem;color:var(--on-2)}
.cx-row:hover .p.pz,.cx-row:focus-visible .p.pz{background:none;border:0;color:var(--on)}
.cx-row:hover .pz-v b,.cx-row:focus-visible .pz-v b{color:#8f4d31}
.trow .go{white-space:nowrap}
@media(max-width:720px){
  .p.pz{flex-direction:row;align-items:baseline;gap:10px}
  .pz-v b{font-size:1.5rem}.pz-v s{font-size:1rem}
}