/* ============================================================
   SKIN9 STUDIO: DESIGN PREVIEW v3
   White-first. Matte charcoal (not glossy black) for dark bands.
   Ambient particle field FIXED: persists through the whole scroll.
   Header nav wired to the page system (no dead links).
   Legal pages included. Map is click-to-load (GDPR-safe).
   ============================================================ */
:root{
  /* ---- WHITE FOUNDATION ---------------------------------------------
     Back to the white-first direction with the gold dust particle field.
     The base white is WARM (#FBFAF8), not pure #FFFFFF: pure white reads
     clinical, warm white reads premium. Gold on light must be the deeper
     #8A6A18 because the bright #DAAF37 fails contrast on white. */
  --bg:#FBFAF8;                /* warm white: the page ground */
  --bg-2:#F4F2EE;              /* soft panel */
  --bg-3:#EAE7E1;              /* deeper panel */
  --ink:#0A0A0A;               /* near-black */
  --ink-70:rgba(10,10,10,.80); --ink-52:rgba(10,10,10,.64);
  --ink-34:rgba(10,10,10,.40); --ink-18:rgba(10,10,10,.16);
  --line:rgba(10,10,10,.11);   --line-2:rgba(10,10,10,.06);
  --card:#FFFFFF;
  --gold:#8A6A18;              /* contrast-safe gold on white */
  --gold-bright:#DAAF37;       /* only on dark bands */
  --gold-30:rgba(138,106,24,.30);
  --dark:#07070C;              /* near-black accent bands */
  --charcoal:#11100D;          /* band ground: slightly warm, never grey */
  --charcoal-2:#171612;        /* flat variant */
  --cream:#FFF3E3;
  --gold-12:rgba(138,106,24,.12);
  --shadow:0 30px 70px rgba(10,10,10,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* ---- CLOUD 9 BACKGROUND ---------------------------------------------
   A soft cloud field in near-ivory tones. The darkest tone in the image is
   still light (#DFD9D0), so it never lays a grey veil over text the way a
   blended noise overlay did. It reads as drifting cloud, not as texture. */
@media(max-width:820px){body{background-attachment:scroll}}
/* The header sits on its own solid ivory so navigation is always crisp,
   regardless of which part of the cloud is behind it. */
header.top{background:var(--bg);backdrop-filter:saturate(1.1) blur(2px)}
.awards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:6px}
@media(max-width:820px){.awards{grid-template-columns:1fr}}
.award{display:flex;flex-direction:column;gap:5px;padding:24px 24px 22px;
  border:1px solid var(--line);border-radius:3px;background:var(--card)}
.award b{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:18px;line-height:1.3}
.award span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-52)}
.wrap,.screen{position:relative;z-index:1}
/* soften the seam where a section meets the hero */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--bg);color:var(--ink);
  /* Plain warm white. The grain and cloud layers were built for the ivory
     version and read as dirt on white, so they are gone. Depth now comes
     from the gold dust particle field instead. */
  background-image:radial-gradient(1200px 520px at 50% -10%, #F3EFE6 0%, rgba(251,250,248,0) 62%);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease)}


/* ---------- preview chrome (not part of the site) ---------- */
.chrome{position:sticky;top:0;z-index:95;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;padding:9px 20px;background:#101010;
  border-bottom:1px solid rgba(255,255,255,.09);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.46)}
.chrome .lbl{color:var(--gold-bright);font-weight:600}
.chrome .sep{opacity:.3;margin:0 6px}
.chrome .acts{display:flex;gap:8px;align-items:center}
.chrome button{background:none;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);
  padding:6px 13px;border-radius:99px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;font-family:inherit;transition:all .3s var(--ease)}
.chrome button:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.chrome button.on{background:var(--gold-bright);color:#0A0A0A;font-weight:700;border-color:var(--gold-bright)}
.chrome .seg{display:flex;border:1px solid rgba(255,255,255,.16);border-radius:99px;overflow:hidden}
.chrome .seg button{border:0;border-radius:0}

/* ---------- preview page switcher ---------- */
.tabs{position:sticky;top:37px;z-index:94;display:flex;gap:24px;overflow-x:auto;padding:0 20px;
  background:#161616;border-bottom:1px solid rgba(255,255,255,.07);transition:background .5s var(--ease)}
.tabs button{background:none;border:0;padding:14px 0;font-family:inherit;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.42);cursor:pointer;
  white-space:nowrap;position:relative;transition:color .3s var(--ease)}
.tabs button:hover{color:rgba(255,255,255,.8)}
.tabs button.on{color:var(--gold-bright)}
.tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-bright)}

.screen{display:none;position:relative;z-index:2}
.screen.on{display:block}
.inner{max-width:1180px;margin:0 auto;padding:0 28px}
.bg-solid{background:var(--bg);position:relative;z-index:3}

/* ---------- site header (real nav: wired) ---------- */
header.top{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px clamp(18px,3vw,34px);border-bottom:1px solid var(--line);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:13px;cursor:pointer}
.brand .mark{width:54px;height:54px;display:block;object-fit:contain;
  transition:opacity .4s var(--ease)}
.brand:hover .mark{opacity:.78}
.brand .lockup{height:44px;width:auto;display:block}
nav.main{display:flex;gap:clamp(11px,1.5vw,20px);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;flex-wrap:nowrap}
nav.main a,nav.main button{background:none;border:0;padding:0;font-family:inherit;font-size:10.5px;letter-spacing:.1em;text-decoration:none;white-space:nowrap;
  text-transform:uppercase;color:var(--ink-70);cursor:pointer;position:relative;transition:color .3s var(--ease)}
nav.main a::after,nav.main button::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--gold);transition:right .4s var(--ease)}
nav.main a:hover,nav.main button:hover{color:var(--ink)}
nav.main a:hover::after,nav.main button:hover::after{right:0}
nav.main a.here,nav.main button.here{color:var(--ink)}
nav.main a.here::after,nav.main button.here::after{right:0}

.btn{display:inline-block;background:var(--gold);color:#fff;border:0;cursor:pointer;font-family:inherit;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:15px 30px;
  border-radius:2px;text-decoration:none;transition:transform .35s var(--ease),background .35s var(--ease)}
.btn:hover{transform:translateY(-2px);background:#7A5D14}
.btn:active{transform:translateY(0)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:none}
.btn.on-dark{background:var(--gold-bright);color:#0A0A0A}
.btn.on-dark:hover{background:#E6BC4A}
.btn.sm{padding:11px 22px;font-size:10px}

.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}.rv.d4{transition-delay:.36s}

/* ---------- hero: split: text + image ---------- */
.hero{position:relative;padding:54px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.hero h1{font-size:clamp(38px,5.7vw,72px);line-height:1.04;letter-spacing:-.028em;margin:0 0 24px;max-width:15ch;
  font-family:"Playfair Display",Georgia,serif;font-weight:400}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .sub{font-size:clamp(15px,1.6vw,18px);color:var(--ink);opacity:.82;max-width:46ch;line-height:1.68;margin:0 0 34px}
.hero .cta{display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.trust{margin-top:42px;display:flex;gap:26px;flex-wrap:wrap;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-52)}
.trust span{display:flex;align-items:center;gap:9px}
.trust i{width:4px;height:4px;border-radius:50%;background:var(--gold)}

section{padding:88px 0;position:relative;z-index:3;background:transparent}
@media(max-width:820px){section{padding:56px 0}section.tight{padding:40px 0}}
section.tight{padding:60px 0}
h2{font-size:clamp(28px,4vw,48px);line-height:1.1;letter-spacing:-.024em;margin:0 0 18px;max-width:20ch;
  font-family:"Playfair Display",Georgia,serif;font-weight:400}
h2 em{font-style:italic;color:var(--gold)}
h3.blk{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;
  margin:38px 0 12px;font-family:Manrope,sans-serif}
.lede{font-size:15.5px;color:var(--ink-70);max-width:62ch;line-height:1.78}
.hairline{height:1px;background:linear-gradient(90deg,var(--gold-30),transparent);margin:0 0 34px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
@media(max-width:860px){.split,.split.rev{grid-template-columns:1fr;gap:34px}}

.ph{position:relative;border-radius:3px;overflow:hidden;background:linear-gradient(150deg,var(--bg-2),var(--bg-3));
  display:grid;place-items:center;color:var(--ink-34);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;text-align:center;border:1px solid var(--line)}
.ph span{position:relative;z-index:2;padding:0 22px}
.ph.tall{aspect-ratio:4/5}.ph.sq{aspect-ratio:1}.ph.wide{aspect-ratio:16/7}
.photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:3px;
  background:var(--bg-2);border:1px solid var(--line)}
/* height:auto is load-bearing: an <img height="1200"> attribute is a presentational
   hint that becomes CSS height:1200px, which beats aspect-ratio. Without this the
   services triptych rendered ~1200px tall inside a 363px column. */
.photo.tall{aspect-ratio:2/3;height:min(var(--photo-h),72vh);width:auto;max-width:100%;
  margin:0 auto}   /* whole photo fits, centred, never taller than the cap */
.photo.sq{aspect-ratio:1}

.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:38px}
/* Grid items stretch to the row height by default, and a row containing <img>
   resolves that height from the image's intrinsic pixels: which overrode the
   aspect ratio and rendered the services triptych ~1200px tall in a 363px
   column. Start-aligning lets each photo keep its own 3:4 shape. */
.tgrid.photo-strip{align-items:start}
/* On phones the services triptych used to stack into three near-full-height
   images, which buried the rest of the page. Make it a compact sideways strip. */
@media(max-width:820px){
  .tgrid.photo-strip{display:flex;overflow-x:auto;gap:12px;margin-top:26px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-left:-20px;margin-right:-20px;padding:0 20px 6px;
    scroll-padding-left:20px;align-items:flex-start}
  /* Each photo keeps its own 3:4 shape on a phone. The old rule forced a 230px
     box and cropped a portrait photo into a landscape letterbox. */
  .tgrid.photo-strip img{flex:0 0 74%;max-width:74%;height:auto;
    scroll-snap-align:start;border-radius:3px}
  .tgrid.photo-strip::-webkit-scrollbar{height:3px}
  .tgrid.photo-strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
}
.tgrid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){
  .tgrid,.tgrid.three{grid-template-columns:1fr;gap:16px}
  .card{padding:24px 22px 22px}
  .card .quote{font-size:16px !important}
}
.card{position:relative;padding:30px 28px 26px;border:1px solid var(--line);border-radius:3px;
  background:var(--card);overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.card::before{content:"";position:absolute;left:0;top:0;height:1px;width:0;background:var(--gold);transition:width .55s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--gold-30);box-shadow:var(--shadow)}
.card:hover::before{width:100%}
.card h3{font-size:20px;font-weight:400;margin:0 0 9px;letter-spacing:-.012em;line-height:1.26;
  font-family:"Playfair Display",serif}
.card p{font-size:13.5px;color:var(--ink-70);margin:0 0 20px;line-height:1.68}
.card .foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-top:16px;border-top:1px solid var(--line)}
.card .dur{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-52)}
.card .pr{font-family:"Playfair Display",serif;font-size:21px;color:var(--gold)}
.card .cta{display:inline-block;margin-top:16px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-30);padding-bottom:3px;
  transition:border-color .3s var(--ease),letter-spacing .4s var(--ease)}
.card:hover .cta{border-color:var(--gold);letter-spacing:.21em}
.badge{display:inline-block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-30);border-radius:99px;padding:4px 10px;margin-bottom:16px}

.ptable{width:100%;border-collapse:collapse;margin-top:32px}
.ptable th{text-align:left;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-52);
  font-weight:600;padding:0 14px 14px 0;border-bottom:1px solid var(--line)}
.ptable td{padding:17px 14px 17px 0;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:baseline}
.ptable tr{transition:background .3s var(--ease)}
.ptable tbody tr:hover{background:var(--gold-12)}
.ptable td.nm{font-family:"Playfair Display",serif;font-size:16.5px}
.ptable td.dr{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-52);white-space:nowrap}
.ptable td.pr{text-align:right;font-family:"Playfair Display",serif;font-size:17.5px;color:var(--gold);white-space:nowrap}
.ptable tr.grp td{padding:26px 0 8px;border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.taxnote{font-size:12px;color:var(--ink-52);margin-top:14px;font-style:italic}

.policy{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:30px}
@media(max-width:860px){.policy{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.policy{grid-template-columns:1fr}}
.policy div{background:var(--bg);padding:24px 22px}
.policy b{display:block;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:8px}
.policy span{font-size:13.5px;color:var(--ink-70);line-height:1.6}

.quote{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(18px,2.2vw,25px);
  line-height:1.48;letter-spacing:-.012em;color:var(--ink);max-width:30ch}
.stars{color:var(--gold);letter-spacing:.26em;font-size:12px;margin-bottom:16px}
.who{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-52);margin-top:16px}

.acc{margin-top:30px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;padding:22px 44px 22px 0;font-family:"Playfair Display",serif;font-size:18px;
  position:relative;list-style:none;transition:color .3s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--gold)}
.acc summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--gold);
  font-size:20px;font-weight:300;transition:transform .4s var(--ease)}
/* Sarah's spec: a plus sign when closed, a minus sign when open.
   A content swap, not a rotation: a rotated + reads as an x, not a minus. */
.acc details[open] summary::after{content:"\2212";transform:translateY(-50%)}
/* ---------- treatment cards: everything about a treatment in one place ---------- */
.tcards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:6px 0 8px}
@media(max-width:900px){.tcards{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;padding:32px 30px 28px;border:1px solid var(--line);
  border-radius:3px;background:var(--card);box-shadow:var(--shadow)}
.tc-head{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.tc-head h3{font-family:"Playfair Display",Georgia,serif;font-weight:400;margin:0;
  font-size:clamp(21px,2.3vw,27px);line-height:1.2;letter-spacing:-.01em}
.tc-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tc-price{font-size:15px;letter-spacing:.06em;color:var(--gold);font-weight:500}
.tc-dur{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-52)}
.tc-desc{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-70)}
.tc-label{margin:20px 0 8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-34)}
.tc-benefits{margin:0;padding-left:17px;font-size:14px;line-height:1.7;color:var(--ink-70)}
.tc-benefits li{margin-bottom:5px}
.tc-book{margin-top:auto;align-self:flex-start;margin-top:26px}
/* ---------- add-ons: extras attached to a facial, not booked alone ---------- */
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:6px 0 8px;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--line)}
.addon{padding:22px 24px;background:var(--card)}
.addon-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.addon-head b{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:17px;color:var(--ink)}
.addon-price{font-size:13px;letter-spacing:.06em;color:var(--gold);font-weight:500;white-space:nowrap}
.addon p{margin:7px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-52)}
.addon-meta{margin:5px 0 12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.addon .tc-desc{margin:0}
.addon .tc-label{margin-top:18px}
.addon .tc-benefits{font-size:13px;line-height:1.65}
.addon .t-note{margin-top:14px;font-size:12.5px}
@media(max-width:700px){.addons{grid-template-columns:1fr}}
/* floating booking button: appears after the hero, stays while scrolling */
.book-fab{position:fixed;right:26px;bottom:26px;z-index:60;
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;border-radius:999px;
  background:var(--gold);color:#fff;text-decoration:none;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  box-shadow:0 10px 26px rgba(20,17,12,.20);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .25s var(--ease)}
.book-fab.show{opacity:1;visibility:visible;transform:none}
.book-fab:hover{background:#7A5D14}
@media(max-width:820px){
  .book-fab{right:16px;bottom:16px;left:16px;padding:16px 20px;font-size:12px}
  body{scroll-padding-bottom:80px}
}
@media print{.book-fab{display:none}}
/* hero animation band: full width, between the header and the headline */
/* The hero video band was removed on 2026-10-18: the only footage available is
   extreme close-up macro, and several seconds of the loop are a dark glove filling
   the frame. A proper opening reel waits for the marketing shoot day. */
/* before/after figure and page hero image: mobile-first sizing */
/* narrower than the container, so centre it rather than leaving a gap on the right */
.bf-figure{margin:0 auto 34px;max-width:760px;text-align:center}
.bf-figure img,.page-hero-img img{display:block;width:100%;height:auto;border-radius:3px}
.bf-figure figcaption{margin-top:12px;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-34)}
.page-hero-img{margin:26px auto 42px;max-width:860px}
@media(max-width:820px){
  .page-hero-img img{max-height:44vh;object-fit:cover;object-position:center}
  /* the services page before/after is a results pair: show it whole, never cropped */
}
/* results hero sits tight under the header */
.res-hero{padding-bottom:6px !important}
.res-head{position:relative}
.res-link{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-30);
  padding-bottom:2px;transition:border-color .3s var(--ease)}
.res-link:hover{border-color:var(--gold)}
/* results gallery: every case is a before|after pair so the two halves read
   as one comparison instead of a single image that has to be decoded. */
.res-group{margin-bottom:62px}
.res-kicker{margin:0 0 6px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.res-head{margin-bottom:22px}
.res-head h2{margin:0 0 4px;font-size:clamp(24px,3.2vw,36px)}
.res-sub{margin:0;font-size:14.5px;color:var(--ink-52)}
.res-grid{display:grid;gap:20px;margin-top:0;align-items:start}
.res-grid.cols-3{grid-template-columns:repeat(2,1fr)}
.res-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.res-grid.cols-1{grid-template-columns:1fr}
/* a single after-only photo needs one half, not a pair */
.res-case.single{grid-template-columns:1fr;width:100%;max-width:520px;justify-self:center}
/* the portrait pair is full-row and centred, so it keeps its own shape without
   stretching the two landscape pairs beside it */
.res-case.portrait{grid-column:1/-1;width:100%;max-width:520px;justify-self:center}
/* one case = two halves joined by a hairline, so it reads as a single unit */
.res-case{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.res-half{display:flex;flex-direction:column;background:var(--card)}
/* Natural proportions. These photos arrive in different shapes (one pair is
   portrait 450x900), so a fixed frame ratio is what was cropping and zooming
   them. width:100% + height:auto shows each photo whole; the two halves of a
   pair are always the same shape as each other, so before/after still lines up. */
.res-half img{display:block;width:100%;height:auto}
.res-half span{padding:9px 12px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-52);border-top:1px solid var(--line)}
.res-half:last-child span{color:var(--gold)}
/* the lone microchanneling case gets the full row, at its natural shape */
@media(max-width:820px){
  .res-grid.cols-3,.res-grid.cols-2{grid-template-columns:1fr}
  .res-group{margin-bottom:44px}
}

/* footer bottom bar: Skin9 mark + copyright on the left, GMP wordmark on the right,
   all on ONE line so the page ends once rather than stacking two credits. */
.fine{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.fine-left{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-34)}
.fine-mark{width:20px;height:20px;object-fit:contain;opacity:.42;flex:0 0 auto}
.fine-right{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-34)}
.fine-gmp{width:104px;height:auto;opacity:.62;flex:0 0 auto}
@media(max-width:640px){
  .fine{flex-direction:column;align-items:flex-start;gap:12px}
  .fine-gmp{width:92px}
}
/* the home treatment cards are links: keep the card look, kill the default
   link blue and underline. This block was lost once during a footer rewrite;
   without it the card headings render in the browser's default blue. */
a.card{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.card h3,a.card p,a.card .pr,a.card .dur,a.card .badge{color:inherit}
a.card:hover{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(10,10,10,.10)}
a.card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* anchor targets clear the top edge when jumped to */
#micro-face,#micro-body,#micro-hair,#facials{scroll-margin-top:28px}
.page-links{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 40px}
@media(max-width:820px){.page-links{grid-template-columns:1fr}}
.page-link{display:flex;flex-direction:column;gap:6px;padding:24px 26px;border:1px solid var(--line);
  border-radius:3px;background:var(--card);text-decoration:none;transition:border-color .3s var(--ease)}
.page-link:hover{border-color:var(--gold)}
.page-link b{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:20px;color:var(--ink)}
.page-link span{font-size:13px;color:var(--ink-52);line-height:1.6}
.page-link .pl-cta{margin-top:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:600;display:inline-flex;align-items:center;gap:6px;
  transition:gap .3s var(--ease)}
.page-link:hover .pl-cta{gap:11px}
.t-group{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(20px,2.4vw,27px);
  margin:44px 0 6px;letter-spacing:-.01em}
.t-group:first-of-type{margin-top:0}
.t-sum{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;margin-left:10px}
.q{display:block;font-size:11px;letter-spacing:.04em;color:var(--ink-52);text-transform:none;font-weight:300;margin-top:3px}
.t-price{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.t-note{font-size:13px;line-height:1.7;color:var(--ink-52);border-left:2px solid var(--gold-30);
  padding-left:14px;margin:16px 0 0}
.acc .body{padding:0 44px 24px 0;font-size:14.5px;color:var(--ink-70);line-height:1.78;max-width:74ch}

/* ---------- matte charcoal bands (no glow, no sheen) ---------- */
.band{padding:96px 0;text-align:center;background:var(--charcoal);color:#F2EFE9;
  border-top:1px solid rgba(0,0,0,.4);
  /* FULL BLEED. On several pages this band sits inside the max-width container
     because a nested <section> there leaves two containers unclosed. Without
     this it renders ~844px wide in a 1440px viewport instead of edge to edge. */
  position:relative;z-index:3;
  width:auto;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.band h2{margin:0 auto 16px;max-width:22ch;color:#F2EFE9}
.band p{color:rgba(242,239,233,.6);margin:0 0 30px}
.band.flat{background:var(--charcoal-2)}

/* ---------- map: click to load (GDPR-safe) ---------- */
.mapbox{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--bg-2);
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;padding:26px}
.mapbox .pin{width:34px;height:34px;border:1px solid var(--gold-30);border-radius:50%;display:grid;
  place-items:center;margin:0 auto 16px;color:var(--gold);font-size:15px}
.mapbox p{font-size:13px;color:var(--ink-70);margin:0 0 6px;max-width:34ch}
.mapbox .note{font-size:11px;color:var(--ink-34);margin:0 0 18px;max-width:38ch}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

footer{padding:60px clamp(18px,3vw,34px) 118px;font-size:13px;color:var(--ink-52);background:var(--bg);
  position:relative;z-index:3;border-top:1px solid var(--line)}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fcols{grid-template-columns:1fr;gap:26px}}
footer b{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px;font-weight:700}
footer a,footer button{color:var(--ink-70);text-decoration:none;transition:color .3s var(--ease);
  background:none;border:0;padding:0;font:inherit;cursor:pointer;display:block;text-align:left;line-height:2}
footer a:hover,footer button:hover{color:var(--gold)}
footer .fine{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px}

/* ---------- legal ---------- */
.legal{max-width:74ch}
.legal h4{margin:26px 0 8px;font-size:15px;letter-spacing:.02em;color:var(--ink)}
.legal h3{font-family:"Playfair Display",serif;font-size:21px;font-weight:400;margin:38px 0 12px}
.legal p,.legal li{font-size:14.5px;color:var(--ink-70);line-height:1.8}
.legal ul{padding-left:20px;margin:12px 0}
.draft{display:inline-block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8A3A18;border:1px solid rgba(138,58,24,.35);background:rgba(138,58,24,.07);
  border-radius:99px;padding:4px 11px;margin-bottom:18px}

/* gold dust: fixed behind everything, pointer-events off so it never blocks a click */
#dust{position:fixed;inset:0;z-index:0;pointer-events:none}
#dust canvas{display:block;width:100%!important;height:100%!important}
/* content sits above the field */
.wrap,section,footer,.band,.hero{position:relative;z-index:2}
@media(max-width:820px){#dust{opacity:.85}}
#consent{position:fixed;left:18px;right:18px;bottom:18px;z-index:200;max-width:560px;margin:0 auto;
  background:var(--bg);border:1px solid var(--line);border-radius:4px;box-shadow:0 20px 50px rgba(10,10,10,.18);
  padding:22px 24px;display:none;transform:translateY(16px);opacity:0;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
#consent.show{display:block}
#consent.in{opacity:1;transform:none}
#consent p{font-size:12.5px;color:var(--ink-70);margin:0 0 16px;line-height:1.65}
#consent p a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-30)}
#consent .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#consent button{font-family:inherit;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  padding:11px 20px;border-radius:2px;cursor:pointer;font-weight:700;border:1px solid var(--line);
  background:none;color:var(--ink);transition:all .3s var(--ease)}
#consent button.yes{background:var(--gold);color:#fff;border-color:var(--gold)}
#consent .tiny{font-size:10.5px;color:var(--ink-34);margin:12px 0 0}

.notes{margin-top:26px;padding:18px 22px;border-left:2px solid var(--gold);border-radius:0 3px 3px 0;
  background:var(--gold-12);font-size:12.5px;color:var(--ink-70);line-height:1.7;max-width:80ch;
  position:relative;z-index:4}
.notes b{display:block;color:var(--gold);font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:7px}
body.clean .notes{display:none}

/* ---------- mobile menu (desktop nav is hidden under 640px) ---------- */
.burger{display:none;background:none;border:1px solid var(--line);border-radius:2px;
  width:44px;height:40px;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:18px;height:1px;background:var(--ink);margin:0 auto;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);transition:transform .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mobmenu{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;
  flex-direction:column;justify-content:flex-start;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:104px 30px 30px;opacity:0;transition:opacity .35s var(--ease)}
body.menu-open .mobmenu{display:flex;opacity:1}
body.menu-open{overflow:hidden}
.mobmenu .mm-close{position:absolute;top:16px;right:18px;width:46px;height:46px;
  display:grid;place-items:center;padding:0;font-family:Manrope,sans-serif;
  font-size:30px;line-height:1;color:var(--ink);background:none;
  border:1px solid var(--line);border-radius:2px;cursor:pointer}
.mobmenu a,.mobmenu button{background:none;border:0;padding:0;font-family:"Playfair Display",Georgia,serif;text-decoration:none;
  font-size:clamp(23px,6.4vw,28px);color:var(--ink);text-align:left;cursor:pointer;
  line-height:1.75;letter-spacing:-.01em;flex:0 0 auto}
.mobmenu a:hover,.mobmenu button:hover{color:var(--gold)}
.mobmenu .mm-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-52);line-height:1.7;word-break:break-word}
.mobmenu .mm-foot a{font-family:Manrope,sans-serif;font-size:13px;line-height:1.7;
  color:var(--ink-70);text-decoration:none}
@media(max-width:640px){ .burger{display:grid} }

/* ---------- icons ---------- */
.ico{width:38px;height:38px;display:block;object-fit:contain;opacity:1}
.ico.sm{width:28px;height:28px}
.ico.lg{width:44px;height:44px}
.ico.inline{display:inline-block;vertical-align:-7px;margin-right:10px}
.trust .ico{width:30px;height:30px;opacity:1}
.trust span{gap:10px}
.policy .ico{margin-bottom:12px}
.card .ico{width:44px;height:44px;margin-bottom:16px;opacity:1}
.card:hover .ico{opacity:.82}
.contact-line{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px;font-size:15px;color:var(--ink-70)}
.contact-line .ico{width:25px;height:25px;margin-top:2px;flex-shrink:0}
.contact-line a{color:var(--ink);text-decoration:none}

/* ---------- contact form ---------- */
.form{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:26px 26px 22px}
.form h3{font-family:"Playfair Display",Georgia,serif;font-size:19px;font-weight:400;margin:0 0 5px}
.form .hint{font-size:12.5px;color:var(--ink-52);margin:0 0 20px;line-height:1.6}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-52);
  margin-bottom:6px;font-weight:600}
.fld .opt{text-transform:none;letter-spacing:0;color:var(--ink-34);font-weight:400}
.fld input,.fld textarea,.fld select{width:100%;font-family:inherit;font-size:14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:2px;background:var(--card);color:var(--ink);
  transition:border-color .3s var(--ease)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--gold)}
.fld textarea{min-height:98px;resize:vertical}
.req{color:var(--gold)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:540px){.two-col{grid-template-columns:1fr;gap:0}}
.form .btn{width:100%;padding:15px;margin-top:4px}
.formstatus{font-size:12.5px;line-height:1.6;margin:12px 0 0;min-height:1px;color:var(--gold);display:none}
.formstatus.show{display:block}
.formstatus.err{color:#9B2C1F}
.form .privacy{font-size:11.5px;color:var(--ink-34);margin:13px 0 0;line-height:1.65;text-align:center}

/* ---------- newsletter signup ---------- */
.signup{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:72px 0;position:relative;z-index:3}
.signup .row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
@media(max-width:820px){.signup .row{grid-template-columns:1fr;gap:26px}}
.signup h2{font-size:clamp(23px,3vw,35px);margin-bottom:12px}
.signup p{font-size:14.5px;color:var(--ink-70);line-height:1.75;margin:0}
.field{display:flex;gap:10px;flex-wrap:wrap}
.field input{flex:1 1 220px;font-family:inherit;font-size:14px;padding:14px 16px;border:1px solid var(--line);
  border-radius:2px;background:var(--card);color:var(--ink);transition:border-color .3s var(--ease)}
.field input:focus{outline:none;border-color:var(--gold)}
.field input::placeholder{color:var(--ink-34)}
.consent-line{font-size:11.5px;color:var(--ink-52);line-height:1.7;margin-top:13px;max-width:52ch}
.consent-line a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-30)}

@media(max-width:640px){
  :root{--photo-h:400px}
  .hero{padding:40px 0 44px}
  section{padding:58px 0}
  .inner{padding:0 20px}
  nav.main{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1 !important;transform:none !important}
}