/* ============================================================
   SophSkin Aesthetics
   Design system carried over from the original draft:
   warm cream ground, noir, tan accents, Playfair + Outfit.
   ============================================================ */

:root{
  --noir:#2E2621;
  --noir-2:#3B312A;
  --ground:#FDFBF8;
  --ground-2:#F5EFE8;
  --surface:#FFFFFF;
  --ink:#2E2621;
  --muted:#7D6F63;
  --line:#E8DFD4;
  --tan:#B8A593;
  --tan-hover:#A38F79;
  --tan-deep:#7A6650;
  --tan-soft:#EFE8DF;
  --sand:#9A8670;
  --sand-soft:#EDE4D8;
  --on-tan:#2E2621;
  --on-noir:#F7F1E9;
  --muted-noir:#B9A895;
  --shadow:0 2px 6px rgba(46,38,33,.05), 0 20px 48px -22px rgba(46,38,33,.28);
  --shadow-sm:0 1px 3px rgba(46,38,33,.06), 0 10px 24px -16px rgba(46,38,33,.24);
  --glow-a:rgba(184,165,147,.72);
  --glow-b:rgba(184,165,147,0);

  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Outfit","Helvetica Neue",Arial,sans-serif;

  --r:16px;
  --r-lg:26px;
  --pill:999px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --noir:#2A221C;
    --noir-2:#352B24;
    --ground:#171310;
    --ground-2:#201A16;
    --surface:#211B17;
    --ink:#F4EDE5;
    --muted:#A99886;
    --line:#332B24;
    --tan:#C9B8A6;
    --tan-hover:#B8A593;
    --tan-deep:#DCCDBD;
    --tan-soft:#2C241E;
    --sand:#B8A593;
    --sand-soft:#2A231C;
    --on-tan:#1A1512;
    --on-noir:#F7F1E9;
    --muted-noir:#B9A895;
    --shadow:0 2px 6px rgba(32,29,27,.4), 0 20px 48px -22px rgba(32,29,27,.8);
    --shadow-sm:0 1px 3px rgba(32,29,27,.35), 0 10px 24px -16px rgba(32,29,27,.7);
    --glow-a:rgba(201,184,166,.40);
    --glow-b:rgba(201,184,166,0);
  }
}
:root[data-theme="dark"]{
  --noir:#2A221C;
  --noir-2:#352B24;
  --ground:#171310;
  --ground-2:#201A16;
  --surface:#211B17;
  --ink:#F4EDE5;
  --muted:#A99886;
  --line:#332B24;
  --tan:#C9B8A6;
  --tan-hover:#B8A593;
  --tan-deep:#DCCDBD;
  --tan-soft:#2C241E;
  --sand:#B8A593;
  --sand-soft:#2A231C;
  --on-tan:#1A1512;
  --on-noir:#F7F1E9;
  --muted-noir:#B9A895;
  /* shadows are tinted with the ink, not pure black: on a cream canvas a
     neutral black shadow reads faintly blue-grey against the warm ground.
     The two transparent stops matter as much - a gradient fading to
     transparent BLACK greys out through its midpoint, where one fading to
     a transparent ink does not. */
  --shadow:0 2px 6px rgba(32,29,27,.4), 0 20px 48px -22px rgba(32,29,27,.8);
  --shadow-sm:0 1px 3px rgba(32,29,27,.35), 0 10px 24px -16px rgba(32,29,27,.7);
  --glow-a:rgba(201,184,166,.40);
  --glow-b:rgba(201,184,166,0);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

.wrap{max-width:1140px;margin:0 auto;padding-inline:24px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--noir);color:var(--on-noir);
  padding:12px 20px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0}

a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--tan-deep);outline-offset:3px}

/* ---------- bars ---------- */

.promo{
  background:var(--tan);color:var(--on-tan);
  font-size:13.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;
}
.promo .wrap{padding-block:11px}

/* ---------- nav ---------- */

header.nav{
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
header.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:16px;flex-wrap:wrap;
}
.brand{
  font-family:var(--display);font-weight:900;font-size:23px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;text-transform:lowercase;
}
.brand span{color:var(--tan-deep)}
.navlinks{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.navlinks a{
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.navlinks a:hover{color:var(--tan-deep)}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;font-family:var(--body);
  font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--tan);color:var(--on-tan);border:2px solid var(--tan);
  padding:14px 30px;text-decoration:none;border-radius:var(--pill);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:var(--tan-hover);border-color:var(--tan-hover)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn.onnoir{background:var(--tan);border-color:var(--tan);color:var(--on-tan)}
.btn.onnoir.ghost{background:transparent;color:var(--on-noir);border-color:var(--on-noir)}
.btn.onnoir.ghost:hover{background:var(--on-noir);color:var(--noir)}
.btn.sm{padding:10px 22px;font-size:12px}

/* ---------- type ---------- */

.eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan-deep);margin:0 0 16px;
}
.eyebrow.gold{color:var(--tan)}

h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(42px,6.6vw,76px);line-height:1.0;letter-spacing:-.025em;
  text-wrap:balance;margin:0 0 22px;
}
h1 em{font-style:italic;font-weight:700;color:var(--tan-deep)}

h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.4vw,50px);line-height:1.08;letter-spacing:-.02em;
  text-wrap:balance;margin:0 0 16px;
}
h2 em{font-style:italic;font-weight:700;color:var(--tan-deep)}

h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0 0 8px}

.lede{font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--muted);max-width:54ch;margin:0 0 30px}
p{max-width:65ch}

section{padding-block:clamp(60px,8vw,104px)}
.sectionhead{margin-bottom:46px;max-width:60ch}
.sectionhead.center{margin-inline:auto;text-align:center}
.sectionhead p{color:var(--muted);margin:0}
.sectionhead.center p{margin-inline:auto}

/* ---------- hero entrance ---------- */
/* One orchestrated moment: the copy rises, the portrait wipes up out of a
   blooming warm glow, and "confidence" turns gold last. */

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes wipeUp{
  from{opacity:0;clip-path:inset(100% 0 0 0);transform:scale(1.05)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:scale(1)}
}
@keyframes bloom{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes breathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes tint{to{color:var(--tan-deep)}}

.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .herocta,
.hero .trust{
  opacity:0;
  animation:rise .85s cubic-bezier(.22,.8,.3,1) forwards;
}
.hero .eyebrow{animation-delay:.05s}
.hero h1{animation-delay:.18s}
.hero .lede{animation-delay:.44s}
.hero .herocta{animation-delay:.58s}
.hero .trust{animation-delay:.72s}

/* the word carrying the promise arrives in gold, after the line has settled */
.hero h1 em{color:var(--ink);animation:tint .9s ease 1.05s forwards}

.heroshot{position:relative}
.heroshot .glow{
  /* the halo has to extend well past the photo, or the gradient dies
     behind it and nothing shows against the cream */
  position:absolute;inset:-26% -24%;z-index:0;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,var(--glow-a) 50%,var(--glow-b) 100%);
  filter:blur(30px);
  will-change:transform,opacity;
  animation:bloom 1.5s cubic-bezier(.22,.8,.3,1) .4s forwards,
            breathe 7s ease-in-out 2s infinite;
}
.heroshot .slot{
  position:relative;z-index:1;opacity:0;
  animation:wipeUp 1.15s cubic-bezier(.22,.8,.3,1) .28s forwards;
}

/* ---------- scroll reveals ---------- */
/* Scoped to .js (set by app.js) so the page is fully visible if the script
   never runs. Same rise + easing as the hero, so the page reads as one system. */

.js .rv{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.8,.3,1) var(--rv-d,0s),
             transform .7s cubic-bezier(.22,.8,.3,1) var(--rv-d,0s);
}
.js .rv.in{opacity:1;transform:none}

/* hover lift and reveal both use transform — let the card settle first */
.js .card.rv,.js .plan.rv{transition-property:opacity,transform}

/* ---------- photo slots ---------- */

.slot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(145deg,var(--tan-soft) 0%,var(--sand-soft) 100%);
  border:2px dashed var(--sand);
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;min-height:180px;
}
.slot span{
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tan-deep);max-width:24ch;line-height:1.6;
}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
/* once a real photo is in, the dashed placeholder chrome goes away */
.slot:has(img),.slot.filled{border-color:transparent;background:var(--sand-soft)}
.card .slot:has(img),.card .slot.filled{border-bottom-color:transparent}

.slot.tall{aspect-ratio:4/5;min-height:0}
.slot.wide{aspect-ratio:3/2;min-height:0}
.slot.sq{aspect-ratio:1/1;min-height:0}
.slot.r{border-radius:var(--r)}

/* ---------- hero ---------- */

/* clips the hero glow, which bleeds past the viewport on narrow screens */
.hero{padding-block:clamp(48px,6vw,84px) clamp(48px,6vw,80px);overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.herocta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.trust{display:flex;gap:28px;flex-wrap:wrap;align-items:center;padding-top:26px;border-top:1px solid var(--line)}
.trust div{display:flex;flex-direction:column;gap:2px}
.trust .big{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;color:var(--ink)}
.trust .cap{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- moving banner ---------- */

.marq{
  position:relative;
  overflow:hidden;
  background:var(--tan);color:var(--on-tan);
  border-block:1px solid transparent;
  padding-block:15px;
}
.marq.noir{background:var(--noir);color:var(--on-noir)}
.marq.soft{background:var(--sand-soft);color:var(--ink);border-color:var(--line)}

/* soften the ends so items slide in and out rather than popping */
.marq::before,.marq::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
}
.marq::before{left:0;background:linear-gradient(90deg,var(--tan),transparent)}
.marq::after{right:0;background:linear-gradient(270deg,var(--tan),transparent)}
.marq.noir::before{background:linear-gradient(90deg,var(--noir),transparent)}
.marq.noir::after{background:linear-gradient(270deg,var(--noir),transparent)}
.marq.soft::before{background:linear-gradient(90deg,var(--sand-soft),transparent)}
.marq.soft::after{background:linear-gradient(270deg,var(--sand-soft),transparent)}

.marq .track{
  display:flex;width:max-content;
  animation:marq var(--speed,42s) linear infinite;
}
.marq:hover .track,
.marq:focus-within .track{animation-play-state:paused}

.marq ul{
  display:flex;align-items:center;
  list-style:none;margin:0;padding:0;flex:none;
}
.marq li{
  display:flex;align-items:center;gap:26px;
  padding-right:26px;white-space:nowrap;
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
/* the diamond is the separator, so it belongs to the item, not the text */
.marq li::after{
  content:"";flex:none;
  width:6px;height:6px;
  background:currentColor;opacity:.45;
  transform:rotate(45deg);
}
.marq.noir li{color:var(--on-noir)}
.marq.noir li::after{background:var(--tan);opacity:1}
.marq.soft li{color:var(--tan-deep)}

@keyframes marq{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Reduced motion: stop the scroll and lay the claims out as a static, wrapped row. */
@media (prefers-reduced-motion:reduce){
  .marq{padding-block:18px}
  .marq::before,.marq::after{display:none}
  .marq .track{
    width:auto;max-width:1140px;margin-inline:auto;
    padding-inline:24px;animation:none;
  }
  .marq .track ul:last-child{display:none}
  /* flex:none in the base rule stops the list wrapping, so undo it here */
  .marq ul{flex:1 1 auto;flex-wrap:wrap;justify-content:center;gap:6px 0}
  .marq li{padding-right:22px;gap:22px}
  .marq li:last-child{padding-right:0}
  .marq li:last-child::after{display:none}
}

/* ---------- stat band ---------- */

.band{background:var(--noir);color:var(--on-noir)}
.band .wrap{padding-block:clamp(44px,6vw,64px)}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 0;text-align:center}
.stats > div{
  /* fixed shares so five items never wrap to a lonely 4+1 row */
  /* min-width:0 — without it the nowrap word sets the floor and forces a 4+1 wrap */
  flex:0 0 20%;max-width:20%;min-width:0;padding-inline:8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.stats .n{
  font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,30px);
  line-height:1;color:var(--tan);text-decoration:none;white-space:nowrap;
}
a.n:hover{color:var(--on-noir)}
.stats .st{color:var(--tan);font-size:13px;letter-spacing:3px;line-height:1;margin-top:-2px}
.stats .l{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-noir);max-width:20ch;line-height:1.5;
}

/* ---------- treatment cards ---------- */

.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .slot{border-radius:0;border:none;border-bottom:2px dashed var(--sand)}
.card .body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .top{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.card .name{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.2}
.card .price{font-family:var(--display);font-weight:700;font-size:20px;color:var(--tan-deep);flex:none;font-variant-numeric:tabular-nums}
.card .dur{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card .desc{margin:0;color:var(--muted);font-size:15.5px;max-width:none;flex:1}
.card .btn{align-self:flex-start;margin-top:6px}

.tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--sand-soft);color:var(--tan-deep);padding:5px 14px;border-radius:var(--pill);
  align-self:flex-start;
}

/* ---------- full price list ---------- */

.pricecols{columns:2;column-gap:24px}
.pricecard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:28px 30px 12px;
  break-inside:avoid;width:100%;margin-bottom:24px;
}
.pricecard h3{
  font-family:var(--body);font-weight:600;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tan-deep);
  margin:0 0 6px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.pricecard ul{list-style:none;margin:0;padding:0}
.pricecard li{border-bottom:1px solid var(--line)}
.pricecard li:last-child{border-bottom:none}

.pricecard summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:12px;padding-block:16px;
}
.pricecard summary::-webkit-details-marker{display:none}
.pricecard .nm{
  font-family:var(--display);font-weight:700;font-size:18px;line-height:1.3;
  flex:1 1 auto;transition:color .18s ease;
}
.pricecard summary:hover .nm,
.pricecard details[open] .nm{color:var(--tan-deep)}
.pricecard .meta{display:flex;align-items:baseline;gap:14px;flex:none}
.pricecard .dur{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pricecard .pr{
  font-family:var(--display);font-weight:700;font-size:19px;
  color:var(--tan-deep);font-variant-numeric:tabular-nums;
}
.pricecard details p{margin:0;padding:0 0 18px;color:var(--muted);font-size:15px;max-width:60ch}

.flag{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--tan-deep);background:var(--sand-soft);
  padding:3px 10px;border-radius:var(--pill);
  margin-left:8px;vertical-align:middle;white-space:nowrap;
}

.pricefoot{
  margin:26px auto 0;text-align:center;font-size:14.5px;color:var(--muted);
}
.pricefoot a{color:var(--tan-deep);font-weight:500}

/* ---------- protocol phases ---------- */

.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.phase{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px 30px;box-shadow:var(--shadow-sm);
}
.phase .num{
  font-family:var(--display);font-weight:800;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--tan-soft);color:var(--tan-deep);margin-bottom:16px;
}
.phase .weeks{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tan-deep);margin-bottom:6px}
.phase p{margin:0;color:var(--muted);font-size:15.5px}
.phase b{color:var(--ink);font-weight:600}
.phase.hot{background:var(--noir);border-color:var(--noir)}
.phase.hot h3{color:var(--on-noir)}
.phase.hot p{color:var(--muted-noir)}
.phase.hot b{color:var(--on-noir)}
.phase.hot .num{background:var(--tan);color:var(--on-tan)}
.phase.hot .weeks{color:var(--sand)}

.protonote{
  margin:28px auto 0;max-width:68ch;text-align:center;
  color:var(--muted);font-size:16px;font-style:italic;
}
.protocta{display:flex;justify-content:center;margin-top:28px}

/* ---------- acne programme cards ---------- */

.step-label{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tan-deep);
  /* matches the height the feature card's .tag occupies, so all three align */
  display:block;padding:5px 0;
}
.plan .amt small{font-family:var(--body);font-size:16px;font-weight:400;letter-spacing:.02em}
.progfine{
  margin:clamp(30px,4vw,44px) auto 0;max-width:76ch;text-align:center;
  font-size:15.5px;color:var(--muted);line-height:1.7;
}
.progfine b{color:var(--ink);font-weight:600}

/* ---------- results chart ---------- */

.chartcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
.charthead{padding:30px 32px 8px}
.charthead h3{margin:0 0 12px}
.charthead .key{display:flex;gap:24px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.charthead .key i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.chartscroll{overflow-x:auto;padding:10px 32px 0}
.chartscroll svg{display:block;min-width:600px;max-width:100%;height:auto}
.chartfoot{
  padding:22px 32px 28px;margin-top:10px;
  background:var(--ground-2);font-size:16px;color:var(--muted);max-width:none;
}
.chartfoot strong{color:var(--ink);font-weight:600}

/* ---------- packages ---------- */

.plans.three{grid-template-columns:repeat(3,1fr)}
/* reserve the tag chip's height on the cards that have no tag, so the
   three headings and prices sit on the same line */

.plan .amt{
  font-family:var(--display);font-weight:800;font-size:40px;line-height:1;
  color:var(--tan-deep);font-variant-numeric:tabular-nums;
}
.plan.feature .amt{color:var(--tan)}
.plan .per{font-size:13px;color:var(--muted);margin:0}
.plan.feature .per{color:var(--muted-noir)}
.plan ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:11px;flex:1}
.plan li{font-size:15.5px;color:var(--muted);display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.plan li::before{content:"\2713";color:var(--tan-deep);font-weight:700;flex:none}
.plan.feature li{color:var(--muted-noir)}
.plan.feature li::before{color:var(--tan)}
.plan .note{font-size:13px;color:var(--muted);margin:2px 0 0}
.plan.feature .note{color:var(--muted-noir)}

@media (max-width:980px){
  .plans.three{grid-template-columns:1fr}
}

/* ---------- reviews ---------- */

.ratingline{
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin-bottom:38px;
}
.ratingline .score{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--ink)}
.ratingline .stars{color:var(--tan-deep);font-size:19px;letter-spacing:3px;line-height:1}
.ratingline .of{font-size:14px;color:var(--muted)}
.ratingline a{color:var(--tan-deep);font-weight:500}

/* varying review lengths flow better in columns than in a fixed grid */
.reviews{columns:3;column-gap:22px}
.review{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:26px 26px 24px;margin-bottom:22px;
  break-inside:avoid;width:100%;
  display:flex;flex-direction:column;gap:12px;
}
.review .stars{color:var(--tan-deep);font-size:15px;letter-spacing:2px;line-height:1}
.review blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink);max-width:none}
.review footer{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.review .who{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.review .src{font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.shot{margin:0}
.shot figcaption{
  margin-top:12px;text-align:center;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.banote{margin:18px auto 0;text-align:center;font-size:14px;color:var(--muted)}
.socialrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- founder ---------- */

.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
.bio p{color:var(--muted);font-size:16.5px;margin:0 0 16px;max-width:60ch}
.bio p:last-of-type{margin-bottom:0}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.creds span{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--tan-soft);color:var(--tan-deep);padding:8px 18px;border-radius:var(--pill);
}

/* ---------- locations ---------- */

.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
.plan{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 30px 34px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;
}
.plan.feature{background:var(--noir);border-color:var(--noir);box-shadow:var(--shadow)}
.plan.feature h3{color:var(--on-noir)}
.plan.feature .sub,.plan.feature .addr{color:var(--muted-noir)}
.plan .addr{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
.plan .sub{font-size:15.5px;color:var(--muted);margin:0;flex:1}
.plan .btn{margin-top:8px;align-self:flex-start}

/* ---------- faq ---------- */

.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 32px;box-shadow:var(--shadow-sm)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{
  cursor:pointer;list-style:none;padding-block:24px;
  font-family:var(--display);font-weight:700;font-size:19px;
  display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:10px;height:10px;
  border-right:2px solid var(--tan-deep);border-bottom:2px solid var(--tan-deep);
  transform:rotate(45deg);margin-top:-5px;transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq details p{margin:0 0 26px;color:var(--muted);font-size:16px}
.faq .policy{
  list-style:none;margin:0 0 22px;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.faq .policy li{
  color:var(--muted);font-size:15.5px;line-height:1.6;
  padding-left:18px;border-left:2px solid var(--tan-soft);
}
.faq .policy b{color:var(--ink);font-weight:600}

/* ---------- cta ---------- */

.cta{background:var(--noir);color:var(--on-noir);text-align:center}
.cta .wrap{padding-block:clamp(60px,8vw,96px)}
.cta h2{color:var(--on-noir);margin-inline:auto}
.cta .lede{color:var(--muted-noir);margin-inline:auto;margin-bottom:32px}
.cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.infogrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,5vw,56px);
  margin-top:48px;padding-top:40px;
  border-top:1px solid rgba(247,241,233,.16);text-align:left;
}
.infogrid h4{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tan);margin:0 0 16px;
}
.infogrid .v{font-size:16px;color:var(--on-noir);line-height:1.7;margin:0 0 12px}
.infogrid a{color:var(--on-noir);text-decoration:none;border-bottom:1px solid var(--tan);overflow-wrap:anywhere}
.infogrid a:hover{border-color:var(--on-noir)}
.infogrid .tbd{color:var(--muted-noir);font-size:14.5px;font-style:italic}

.hours{display:flex;flex-direction:column;gap:8px;width:100%}
.hours div{display:flex;justify-content:space-between;gap:20px;font-size:15px;line-height:1.4}
.hours .d{color:var(--muted-noir)}
.hours .t{color:var(--on-noir);font-variant-numeric:tabular-nums;text-align:right}
.hours .off .t{color:var(--muted-noir);opacity:.65}

/* ---------- footer ---------- */

/* scoped to the page footer — `footer` alone also hit the <footer> in each review card */
/* ---------- footer ----------
   Editorial rather than a dark slab: a big wordmark, then bands separated by
   hairlines. Each band is its own row, which is what gives it the air. */
body > footer{
  background:var(--ground);color:var(--muted);font-size:14px;
  border-top:1px solid var(--line);
}
body > footer > *{
  max-width:1140px;margin:0 auto;padding-inline:24px;
  border-bottom:1px solid var(--line);
}
body > footer > *:last-child{border-bottom:0}

.footmark{
  display:block;text-align:center;text-decoration:none;
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(40px,8.5vw,82px);line-height:1;letter-spacing:-.015em;
  padding-block:clamp(34px,5vw,56px);
}
.footmark span{color:var(--tan)}

.footnav{
  display:flex;flex-direction:column;align-items:flex-end;gap:11px;
  padding-block:clamp(26px,3.4vw,38px);
}
.footnav a{
  color:var(--ink);text-decoration:none;
  font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:color .2s ease;
}
.footnav a:hover{color:var(--tan-deep)}

.footsocial{
  display:flex;justify-content:center;gap:22px;
  padding-block:22px;
}
.footsocial a{color:var(--ink);display:grid;place-items:center;transition:color .2s ease}
.footsocial a:hover{color:var(--tan-deep)}

.footlegal{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;
  text-align:center;padding-block:26px 34px;font-size:13.5px;
}
.footlegal a{color:var(--muted);text-decoration:none}
.footlegal a:hover{color:var(--tan-deep)}

@media (max-width:620px){
  .footnav{align-items:center;text-align:center}
  .footlegal{flex-direction:column}
}

/* ---------- responsive ---------- */

@media (max-width:1199px){
  /* 3 + 2, both rows centred */
  .stats > div{flex-basis:33.333%;max-width:33.333%}
}
@media (max-width:700px){
  /* 2 + 2 + 1 */
  .stats > div{flex-basis:50%;max-width:50%}
}

@media (max-width:980px){
  .hero .grid{grid-template-columns:1fr}
  .hero .heroshot{order:-1}
  .menu{grid-template-columns:repeat(2,1fr)}
  .phases{grid-template-columns:repeat(2,1fr)}
  .pricecols{columns:1}
  .plans{grid-template-columns:1fr}
  .reviews{columns:1}
  .ba{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr}
}

@media (max-width:620px){
  .menu{grid-template-columns:1fr}
  header.nav .wrap{gap:12px;padding-block:14px}
  .navlinks{gap:14px 18px;order:3;flex-basis:100%}
  .navlinks a{font-size:12px;letter-spacing:.08em}
  .phases{grid-template-columns:1fr}
  .trust{gap:22px}
  .pricecard{padding:24px 22px 8px}
  .pricecard summary{flex-wrap:wrap;gap:4px}
  .pricecard .meta{width:100%;justify-content:space-between}
}

@media (max-width:880px){
  .infogrid{grid-template-columns:1fr;gap:32px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  /* without these the hero would sit at its opacity:0 start state */
  .hero .eyebrow,.hero h1,.hero .lede,.hero .herocta,.hero .trust,.heroshot .slot{
    opacity:1;transform:none;clip-path:none;
  }
  .hero h1 em{color:var(--tan-deep)}
  .heroshot .glow{opacity:.85}
  .js .rv{opacity:1;transform:none;transition:none}
}

html{scroll-behavior:smooth}

/* ---- chart draw-in (fires when .chartcard gets .in from the scroll observer) ---- */
@keyframes cDraw{to{stroke-dashoffset:0}}
@keyframes cFade{to{opacity:1}}
@keyframes cPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes cWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.js .chartcard .c-line{stroke-dasharray:1;stroke-dashoffset:1}
.js .chartcard.in .c-line{animation:cDraw 1.9s cubic-bezier(.5,.05,.25,1) .18s forwards}

.js .chartcard .c-area{opacity:0}
.js .chartcard.in .c-area{animation:cFade 1.1s ease .55s forwards}

.js .chartcard .c-grid{opacity:0}
.js .chartcard.in .c-grid{animation:cWipe 1.1s cubic-bezier(.22,.8,.3,1) forwards,cFade .5s ease forwards}

.js .chartcard .c-purge,.js .chartcard .c-purgelabel{opacity:0}
.js .chartcard.in .c-purge{animation:cFade .7s ease .5s forwards}
.js .chartcard.in .c-purgelabel{animation:cFade .7s ease .75s forwards}

.js .chartcard .c-dots circle,.js .chartcard .c-now{
  opacity:0;transform-box:fill-box;transform-origin:center;
}
.js .chartcard.in .c-dots circle,.js .chartcard.in .c-now{
  animation:cPop .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* each dot pops as the drawing line reaches it */
.js .chartcard.in .c-dots circle:nth-child(1){animation-delay:.18s}
.js .chartcard.in .c-dots circle:nth-child(2){animation-delay:.5s}
.js .chartcard.in .c-dots circle:nth-child(3){animation-delay:.82s}
.js .chartcard.in .c-dots circle:nth-child(4){animation-delay:1.13s}
.js .chartcard.in .c-dots circle:nth-child(5){animation-delay:1.45s}
.js .chartcard.in .c-dots circle:nth-child(6){animation-delay:1.77s}
.js .chartcard.in .c-now{animation-delay:2.08s}

@media (prefers-reduced-motion:reduce){
  .js .chartcard .c-line{stroke-dasharray:none;stroke-dashoffset:0}
  .js .chartcard .c-area,.js .chartcard .c-grid,.js .chartcard .c-purge,
  .js .chartcard .c-purgelabel,.js .chartcard .c-dots circle,.js .chartcard .c-now{
    opacity:1;transform:none;clip-path:none;
  }
}

/* a package card that is deliberately empty, pending content */
.plan.empty{
  border-style:dashed;
  background:transparent;
}
.plan.empty h3,.plan.empty .amt{color:var(--muted)}
.plan.empty .step-label{opacity:.7}

/* ───────────────────────── welcome offer ───────────────────────── */
.welcome{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.welcome-back{
  position:absolute;inset:0;
  background:color-mix(in srgb,var(--noir) 46%,transparent);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s ease;
}
.welcome.in .welcome-back{opacity:1}

.welcome-card{
  position:relative;z-index:1;
  width:min(660px,100%);max-height:calc(100vh - 40px);overflow:auto;
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  background:var(--ground);border-radius:var(--r-lg);
  box-shadow:var(--shadow);border:1px solid var(--line);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .5s cubic-bezier(.22,.8,.3,1),transform .5s cubic-bezier(.22,.8,.3,1);
}
.welcome.in .welcome-card{opacity:1;transform:none}

.welcome-shot{position:relative;background:var(--tan-soft);overflow:hidden}
.welcome-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.welcome-body{padding:clamp(24px,3.4vw,34px)}
.welcome-body h2{
  font-family:var(--display);font-weight:700;line-height:1.12;
  font-size:clamp(26px,3.2vw,33px);margin:6px 0 12px;
}
.welcome-body h2 em{font-style:italic;color:var(--tan-deep)}
.welcome-body p{color:var(--muted);font-size:15.5px;line-height:1.62;margin:0 0 20px;max-width:40ch}

.welcome-cta{display:flex;flex-wrap:wrap;gap:10px}
.welcome-cta .btn{font-size:14.5px}
.welcome-cta button.btn{font:inherit;font-size:14.5px;cursor:pointer}

.welcome-x{
  position:absolute;top:12px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-size:21px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:color .2s ease,border-color .2s ease;
}
.welcome-x:hover{color:var(--ink);border-color:var(--tan)}

@media (max-width:620px){
  .welcome-card{grid-template-columns:1fr}
  .welcome-shot{height:150px}
  .welcome-cta .btn{width:100%;text-align:center;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .welcome-back,.welcome-card{opacity:1;transform:none;transition:none}
}

/* ============================================================
   AGENCY THEME
   Matched to the reference: true black on true white, a high-contrast
   didone for display, a neutral grotesque for everything else, and one
   handwritten line. Styling only — the markup and layout are untouched.
   Delete from this comment to the end of the file to revert.
   ============================================================ */

:root{
  /* black and white, nothing warm */
  --ink:#201D1B;
  --noir:#201D1B;
  --noir-2:#201D1B;
  --ground:#FFFFFF;
  --ground-2:#F4F4F2;
  --surface:#FFFFFF;
  --muted:#6B6B6B;
  --line:#E4E4E1;
  --on-tan:#201D1B;
  --on-noir:#FFFFFF;
  --muted-noir:#B0B0B0;
  --tan:#201D1B;
  --tan-deep:#6B6B6B;
  --tan-hover:#222222;
  --tan-soft:#F4F4F2;
  --sand:#D8D8D4;
  --sand-soft:#F4F4F2;
  --glow-a:rgba(32,29,27,0);
  --glow-b:rgba(32,29,27,0);

  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --script:"La Belle Aurore",cursive;

  --shadow:none;
  --shadow-sm:none;
  --r:0px;
  --r-lg:0px;
  --rule:1px solid var(--line);
  --rule-ink:1px solid var(--ink);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#FFFFFF;
    --ground:#201D1B;
    --ground-2:#0D0D0D;
    --surface:#0A0A0A;
    --muted:#9A9A9A;
    --line:#242424;
    --on-noir:#FFFFFF;
  }
}

body{font-family:var(--body);-webkit-font-smoothing:antialiased}

/* ---------- display type: didone, large, tight ---------- */
h1,h2,h3,.brand,.footmark,.card .name,.card .price,.plan .amt,
.pricecard .nm,.pricecard .pr,.ratingline .score,.charthead h3,.footmark{
  font-family:var(--display);
}
h1{font-size:clamp(46px,8.2vw,96px);line-height:.94;letter-spacing:-.03em;font-weight:600}
h2{font-size:clamp(32px,5.6vw,64px);line-height:1.0;letter-spacing:-.025em;font-weight:600}
h3{font-weight:600;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;font-weight:500;color:inherit}
.footmark{font-weight:500;letter-spacing:.02em}
.brand{font-weight:500;letter-spacing:.06em;text-transform:lowercase;font-size:19px}
.brand span{font-weight:500}

/* ---------- grotesque for everything else ---------- */
.eyebrow{
  font-family:var(--body);font-weight:500;font-size:11px;
  letter-spacing:.24em;color:var(--muted);
}
.lede,p,li,.card .desc,.plan li,.pricecard details p{font-family:var(--body)}
.lede{max-width:46ch;font-weight:300}
.navlinks a{font-family:var(--body);font-weight:400;font-size:12.5px;letter-spacing:.12em}
.btn{font-family:var(--body);font-weight:500;letter-spacing:.14em;font-size:11.5px}

/* ---------- the one handwritten line ---------- */
.promo{
  background:var(--ink);color:var(--on-noir);
  font-family:var(--script);text-transform:none;
  font-size:clamp(19px,2.6vw,26px);letter-spacing:.02em;font-weight:400;
}
.promo .wrap{padding-block:16px 12px}

/* ---------- black blocks ---------- */
header.nav{background:var(--ink);border-bottom:0;backdrop-filter:none}
header.nav .brand,header.nav .brand span{color:var(--on-noir)}
header.nav .navlinks a{color:var(--on-noir)}
header.nav .navlinks a:hover{opacity:.55;color:var(--on-noir)}
header.nav .btn{border-color:var(--on-noir);color:var(--on-noir);background:transparent}
header.nav .btn:hover{background:var(--on-noir);color:var(--ink)}

.band{background:var(--ink);color:var(--on-noir)}
.band .stats .n,.band .stats .n:hover,.band .stats .st{color:var(--on-noir)}
.band .stats .l{color:var(--muted-noir)}
.band .stats > div{border-left:1px solid rgba(255,255,255,.18)}
.band .stats > div:first-child{border-left:0}

.marq,.marq.noir,.marq.soft{background:var(--ink);color:var(--on-noir);border-block:0}
.marq li,.marq.noir li,.marq.soft li{color:var(--on-noir);font-family:var(--body)}
.marq li::after,.marq.noir li::after,.marq.soft li::after{background:#fff;opacity:.4}
.marq::before,.marq.noir::before,.marq.soft::before{background:linear-gradient(90deg,#201D1B,transparent)}
.marq::after,.marq.noir::after,.marq.soft::after{background:linear-gradient(270deg,#201D1B,transparent)}

.cta{background:var(--ink);color:var(--on-noir)}

/* ---------- surfaces: rules, never shadows ---------- */
.card,.plan,.pricecard,.chartcard,.review,.slot,.welcome-card{box-shadow:none !important}
.card:hover,.plan:hover{transform:none}
.card{border:var(--rule);border-radius:0;background:transparent}
.card:hover{border-color:var(--ink)}
.card .slot{border-bottom:var(--rule)}
.plan,.chartcard{border:var(--rule);border-radius:0;background:transparent}
.slot,.welcome-card,.welcome-shot img{border-radius:0}
.slot{border:0;background:var(--ground-2)}
.heroshot .glow{opacity:0 !important;animation:none !important}

section + section,section + .band,.band + section,.marq + section,
section + .marq,.band + .marq,.marq + .band{border-top:var(--rule)}

/* ---------- buttons ---------- */
.btn{
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  padding:15px 34px;border-radius:var(--pill);
}
.btn:hover{transform:none;background:var(--ink);color:#fff;border-color:var(--ink)}
.herocta .btn:first-child,.welcome-cta .btn:first-child{background:var(--ink);color:#fff}
.herocta .btn:first-child:hover,.welcome-cta .btn:first-child:hover{background:transparent;color:var(--ink)}
.btn.onnoir,.btn.onnoir.ghost{background:transparent;color:#fff;border-color:#fff}
.btn.onnoir:hover,.btn.onnoir.ghost:hover{background:#fff;color:#201D1B}

/* ---------- inverted feature card ---------- */
.plan.feature{background:var(--ink);border-color:var(--ink);color:#fff}
.plan.feature h3,.plan.feature .amt,.plan.feature .addr{color:#fff}
.plan.feature .per,.plan.feature li,.plan.feature .sub,.plan.feature .note{color:var(--muted-noir)}
.plan.feature li::before{color:#fff}
.plan.feature .tag{background:#fff;color:#201D1B}
.plan.empty{border:1px dashed var(--line);background:transparent}

/* ---------- lists on rules ---------- */
.pricecard{border:0;border-top:var(--rule-ink);border-radius:0;padding-top:20px;background:transparent}
.pricecard h3{font-family:var(--body);font-weight:600;letter-spacing:.22em}
.pricecard .nm,.pricecard .pr{color:var(--ink)}
.pricecard .flag{background:var(--ground-2);color:var(--muted)}
.review{border:0;border-top:var(--rule);border-radius:0;padding-top:22px;background:transparent}
.review .stars,.ratingline .stars,.ratingline .score{color:var(--ink)}
.chartcard{background:transparent}
.chartfoot{margin-top:0;border-top:var(--rule);background:transparent}
.creds span{border:1px solid var(--line);background:transparent;border-radius:0}

/* ---------- welcome ---------- */
.welcome{grid-template-columns:minmax(0,1fr)}
.welcome-card{margin-inline:auto;border:1px solid var(--ink);background:#fff}
.welcome-back{background:rgba(32,29,27,.66)}
.welcome-x{border-color:var(--line);border-radius:0}

/* ---------- footer: paper, as in the reference ---------- */
body > footer{background:var(--ground);border-top:var(--rule-ink)}
.footmark span{color:var(--muted)}
.footnav a{font-family:var(--body);font-weight:400;letter-spacing:.12em;font-size:13.5px}

/* the footer logotype matches the header: one weight, uppercase, tracked out
   the way the reference sets its wordmark */
.footmark{
  text-transform:lowercase;font-weight:500;
  letter-spacing:.08em;font-size:clamp(34px,7vw,68px);
}
.footmark span{color:inherit}

/* ============================================================
   TYPE PASS 2
   The logotype keeps Bodoni Moda — that is the piece that works.
   Headlines move to Instrument Serif: same editorial register, more
   contemporary, and it holds up far better at small sizes than a
   true didone. Interface and body move to Jost, a geometric
   grotesque with more character than Inter.
   ============================================================ */

:root{
  --logo:"Bodoni Moda",Didot,"Times New Roman",serif;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* the logotype, unchanged */
.brand,.footmark{font-family:var(--logo);font-weight:500}

/* headlines */
h1,h2,h3,.card .name,.plan .amt,.pricecard .nm,.charthead h3,
.ratingline .score,.card .price,.pricecard .pr{
  font-family:var(--display);
}
h1{font-weight:400;font-size:clamp(48px,8.6vw,104px);line-height:.96;letter-spacing:-.02em}
h2{font-weight:400;font-size:clamp(34px,5.8vw,68px);line-height:1.0;letter-spacing:-.018em}
h3{font-weight:400;letter-spacing:-.01em;font-size:24px}
h1 em,h2 em{font-style:italic;font-weight:400}
.card .name{font-weight:400;font-size:23px}
.card .price,.pricecard .pr,.plan .amt,.ratingline .score{font-weight:400}
.pricecard .nm{font-weight:400;font-size:18.5px}

/* interface and body */
body,.lede,p,li,.btn,.navlinks a,.eyebrow,.card .desc,.card .dur,
.pricecard .dur,.pricecard details p,.plan li,.plan .per,.footnav a,
.footlegal,.band .stats .l,.marq li{
  font-family:var(--body);
}
body{font-weight:400}
.lede{font-weight:300;letter-spacing:.005em}
.eyebrow{font-weight:500;letter-spacing:.22em}
.btn{font-weight:500;letter-spacing:.13em}
.navlinks a{font-weight:400;letter-spacing:.1em}
.band .stats .n{font-family:var(--display);font-weight:400}

/* ============================================================
   TYPE PASS 3
   The header bar is set entirely in the logotype face, and the strip
   above it matches the nav rather than standing apart in script — so
   the whole top of the page reads as one lockup.
   ============================================================ */

header.nav .navlinks a{
  font-family:var(--logo);
  font-weight:500;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
}
header.nav .btn{
  font-family:var(--logo);
  font-weight:500;letter-spacing:.14em;
}

.promo{
  font-family:var(--logo);
  font-weight:500;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
}
.promo .wrap{padding-block:12px}

/* ============================================================
   COLOUR PASS
   Pure black swapped for a deep espresso. It still reads as "black"
   at a glance and keeps the high-contrast editorial look, but it has
   a hue — which suits skin and warmth far better than #000, and is
   noticeably easier on the eye across large filled blocks.
   To try another, change --ink (and --noir to match).
   ============================================================ */

:root{
  --ink:#2B2320;        /* espresso */
  --noir:#2B2320;
  --noir-2:#3A302B;
  --ground:#FCFBF9;     /* a hair off pure white, so the contrast is softer */
  --ground-2:#F3F0EB;
  --surface:#FCFBF9;
  --muted:#756B64;
  --line:#E5DFD8;
  --on-noir:#FAF7F3;
  --muted-noir:#B3A79E;
  --tan:#2B2320;
  --tan-deep:#756B64;
  --rule:1px solid var(--line);
  --rule-ink:1px solid var(--ink);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F5F0EA;
    --ground:#1B1613;
    --ground-2:#241D19;
    --surface:#1F1916;
    --muted:#A2968C;
    --line:#332A25;
    --on-noir:#F5F0EA;
  }
}

/* the few places that hard-coded black or white rather than a token */
.btn:hover{background:var(--ink);color:var(--ground)}
.herocta .btn:first-child,.welcome-cta .btn:first-child{background:var(--ink);color:var(--ground)}
.btn.onnoir,.btn.onnoir.ghost{color:var(--on-noir);border-color:var(--on-noir)}
.btn.onnoir:hover,.btn.onnoir.ghost:hover{background:var(--on-noir);color:var(--ink)}
.plan.feature{color:var(--on-noir)}
.plan.feature h3,.plan.feature .amt,.plan.feature .addr,.plan.feature li::before{color:var(--on-noir)}
.plan.feature .tag{background:var(--on-noir);color:var(--ink)}
.band .stats > div{border-left:1px solid rgba(250,247,243,.18)}
.marq li::after,.marq.noir li::after,.marq.soft li::after{background:var(--on-noir);opacity:.42}
.marq::before,.marq.noir::before,.marq.soft::before{background:linear-gradient(90deg,var(--ink),transparent)}
.marq::after,.marq.noir::after,.marq.soft::after{background:linear-gradient(270deg,var(--ink),transparent)}
.welcome-card{background:var(--ground)}
.welcome-back{background:color-mix(in srgb,var(--ink) 64%,transparent)}

/* ---------- before / after slider ----------
   The "after" is the base layer; the "before" sits on top and is clipped
   to --pos. A real range input drives it, so it works with a keyboard and
   a screen reader, not just a mouse. Without JS the clip still renders at
   50%, so the comparison is visible either way. */

.compare{margin:0}
.compare-box{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;max-width:620px;margin-inline:auto;
  border:var(--rule);background:var(--ground-2);
  touch-action:pan-y;
}
.compare-box img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;
}
.compare-before{
  position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}

.compare-tag{
  position:absolute;bottom:14px;z-index:3;pointer-events:none;
  font-family:var(--body);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--pill);
  background:color-mix(in srgb,var(--ink) 72%,transparent);color:var(--on-noir);
}
.compare-tag.l{left:14px}
.compare-tag.r{right:14px}

.compare-handle{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:4;
  width:2px;margin-left:-1px;background:var(--on-noir);
  pointer-events:none;box-shadow:0 0 0 1px rgba(32,29,27,.18);
}
.compare-handle::after{
  content:"";position:absolute;top:50%;left:50%;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:var(--on-noir);box-shadow:0 2px 10px rgba(32,29,27,.22);
}
/* the two chevrons on the knob */
.compare-handle::before{
  content:"";position:absolute;top:50%;left:50%;z-index:1;
  width:16px;height:10px;margin:-5px 0 0 -8px;
  background:var(--ink);
  clip-path:polygon(0 50%,38% 0,38% 100%, 100% 50%,62% 0,62% 100%);
}

/* the control itself: full-size, invisible, and the thing that actually moves */
.compare-range{
  position:absolute;inset:0;z-index:5;
  width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:ew-resize;appearance:none;background:transparent;
  /* same contract as the box: the page may still scroll vertically off the
     photo, horizontal belongs to the drag handler in app.js */
  touch-action:pan-y;
}
.compare-range::-webkit-slider-thumb{appearance:none;width:56px;height:100%;cursor:ew-resize}
.compare-range::-moz-range-thumb{width:56px;height:100%;border:0;border-radius:0;cursor:ew-resize}
.compare-range:focus-visible{outline:none}
.compare-box:has(.compare-range:focus-visible){outline:2px solid var(--ink);outline-offset:3px}

.compare figcaption{
  margin-top:16px;text-align:center;
  font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

/* ---------- inline clips ----------
   preload="none" and a tap-to-play button: two autoplaying videos would
   pull several megabytes on every page load, most of it never watched. */
.clips{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;max-width:620px;margin:28px auto 0;
}
.clip{margin:0;position:relative}
.clip video{
  display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  background:var(--ground-2);border:var(--rule);
}
.clip-play{
  position:absolute;inset:0;z-index:2;
  border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;
}
.clip-play::after{
  content:"";width:54px;height:54px;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 74%,transparent);
  clip-path:none;
  box-shadow:0 2px 12px rgba(32,29,27,.25);
  background-image:linear-gradient(transparent,transparent);
}
.clip-play::before{
  content:"";position:absolute;z-index:1;
  width:0;height:0;margin-left:4px;
  border-left:16px solid var(--on-noir);
  border-block:10px solid transparent;
}
.clip.playing .clip-play::after,
.clip.playing .clip-play::before{opacity:0}
.clip-play:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.clip figcaption{
  margin-top:12px;text-align:center;
  font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:520px){
  .clips{gap:14px}
  .clip figcaption{letter-spacing:.12em;font-size:10px}
}

/* two comparisons side by side */
.compare-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;max-width:1000px;margin-inline:auto;align-items:start;
}
.compare-pair .compare-box{max-width:none}
@media (max-width:760px){
  .compare-pair{grid-template-columns:1fr;gap:34px;max-width:620px}
}

/* ============================================================
   BRAND STANDARDS v1.0
   SophSkin Website Brand Identity Guide. This block is the authority;
   everything above it is earlier exploration that it overrides.

     Signature Black  #201D1B   logo, headings, nav, buttons, footer
     Pure White       #FFFFFF   main canvas
     Soft Ivory       #F4F1EC   alternate sections, editorial panels
     Stone Gray       #D9D4CC   borders and dividers only, never small text

     Cormorant Garamond  display serif — H1/H2, service names, pull quotes
     Montserrat          functional sans — body, nav, labels, buttons, prices
   ============================================================ */

:root{
  --ink:#201D1B;
  --noir:#201D1B;
  --noir-2:#2A2624;
  --ground:#FFFFFF;
  --ground-2:#F4F1EC;
  --surface:#FFFFFF;
  --muted:#5F5B55;          /* passes contrast on white; Stone Gray would not */
  --line:#D9D4CC;
  --on-noir:#FFFFFF;
  --muted-noir:#C9C4BC;
  --tan:#201D1B;
  --tan-deep:#5F5B55;
  --on-tan:#FFFFFF;

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --logo:"Bodoni Moda",Didot,"Times New Roman",serif;

  /* 8 / 16 / 24 / 32 / 48 / 64 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;

  --r:2px; --r-lg:2px; --pill:3px;   /* "simple rectangular or lightly rounded" */
  --rule:1px solid var(--line);
  --rule-ink:1px solid var(--ink);
  --shadow:none; --shadow-sm:none;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#FFFFFF; --ground:#201D1B; --ground-2:#1A1A1A; --surface:#161616;
    --muted:#B5B0A8; --line:#2E2E2E; --on-noir:#FFFFFF;
  }
}

/* ---------- type scale from the guide ---------- */
h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.012em;
}
h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.008em;
}
h3,.card .name,.plan .amt,.pricecard .nm,.charthead h3,.ratingline .score,
.card .price,.pricecard .pr{font-family:var(--display);font-weight:600}
h3{font-size:24px;letter-spacing:-.005em}
h1 em,h2 em{font-style:italic;font-weight:500;color:inherit}
.brand,.footmark{font-family:var(--logo);font-weight:600}

body,p,li,.lede,.btn,.navlinks a,.eyebrow,.card .desc,.card .dur,.pricecard .dur,
.pricecard details p,.plan li,.plan .per,.footnav a,.footlegal,.band .stats .l,
.marq li,.compare figcaption,.clip figcaption,.review blockquote{
  font-family:var(--body);
}
body{font-size:16px;font-weight:400;line-height:1.65}
.lede{font-size:clamp(16px,1.3vw,18px);font-weight:400;line-height:1.7}
p,li{font-size:16px}
.card .desc,.pricecard details p,.plan li{font-size:15.5px}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--muted)}
.navlinks a,.btn,.card .dur,.pricecard .dur,.compare figcaption,.clip figcaption{
  font-size:12px;font-weight:500;letter-spacing:.12em;
}
.band .stats .n{font-family:var(--display);font-weight:600}
.promo{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.16em}
header.nav .navlinks a,header.nav .btn{font-family:var(--body);font-weight:500}

/* ---------- buttons: black primary, fine-bordered secondary ---------- */
.btn{
  border-radius:var(--pill);padding:15px 30px;
  background:var(--ink);color:#FFFFFF;border:1px solid var(--ink);
}
.btn:hover{background:#15120F;border-color:#15120F;color:#FFFFFF;transform:none}
.btn.ghost,.herocta .btn:nth-child(2){
  background:transparent;color:var(--ink);border:1px solid var(--ink);
}
.btn.ghost:hover{background:var(--ink);color:#FFFFFF}
.btn.onnoir,.btn.onnoir.ghost{background:transparent;color:#FFFFFF;border-color:#FFFFFF}
.btn.onnoir:hover,.btn.onnoir.ghost:hover{background:#FFFFFF;color:var(--ink)}
header.nav .btn{background:transparent;color:#FFFFFF;border-color:#FFFFFF}
header.nav .btn:hover{background:#FFFFFF;color:var(--ink)}

/* ---------- spacing scale ---------- */
section{padding-block:clamp(var(--s5),7vw,96px)}
.sectionhead{margin-bottom:var(--s5)}

/* ---------- Stone Gray is for lines, not type ---------- */
.card,.plan,.chartcard{border-color:var(--line)}
.compare-box,.clip video{border-color:var(--line)}

/* results disclaimer, wording from the brand guide */
.disclaimer{
  max-width:62ch;margin:var(--s5) auto 0;text-align:center;
  font-family:var(--body);font-size:12.5px;line-height:1.7;color:var(--muted);
}

/* wide tracking suits capitals; the lowercase wordmark wants it tighter */
.brand{letter-spacing:.01em}
.footmark{letter-spacing:.005em}

/* ============================================================
   STONE PANELS
   The black blocks become Stone Gray #D9D4CC. Type on them flips to
   ink, since white on stone is unreadable (about 1.5:1).
   Text and buttons stay black so the page still has hierarchy.
   ============================================================ */

:root{ --panel:#D9D4CC; --on-panel:#201D1B; }

header.nav{background:var(--panel)}
header.nav .brand,header.nav .brand span,header.nav .navlinks a{color:var(--on-panel)}
header.nav .navlinks a:hover{color:var(--on-panel);opacity:.6}
header.nav .btn{background:var(--on-panel);color:#FFFFFF;border-color:var(--on-panel)}
header.nav .btn:hover{background:transparent;color:var(--on-panel)}

.band{background:var(--panel);color:var(--on-panel)}
.band .stats .n,.band .stats .n:hover,.band .stats .st{color:var(--on-panel)}
.band .stats .l{color:#5F5B55}
.band .stats > div{border-left:1px solid rgba(32,29,27,.18)}
.band .stats > div:first-child{border-left:0}

.marq,.marq.noir,.marq.soft{background:var(--panel);color:var(--on-panel)}
.marq li,.marq.noir li,.marq.soft li{color:var(--on-panel)}
.marq li::after,.marq.noir li::after,.marq.soft li::after{background:var(--on-panel);opacity:.45}
.marq::before,.marq.noir::before,.marq.soft::before{background:linear-gradient(90deg,var(--panel),transparent)}
.marq::after,.marq.noir::after,.marq.soft::after{background:linear-gradient(270deg,var(--panel),transparent)}

.cta{background:var(--panel);color:var(--on-panel)}
.cta h2,.cta .lede,.cta .eyebrow,.cta .infogrid h4,.cta .infogrid .v,
.cta .hours .d,.cta .hours .t{color:var(--on-panel)}
.cta .lede,.cta .hours .t{color:#5F5B55}
.cta .infogrid a{color:var(--on-panel)}
.cta .btn.onnoir,.cta .btn.onnoir.ghost{background:var(--on-panel);color:#FFFFFF;border-color:var(--on-panel)}
.cta .btn.onnoir:hover,.cta .btn.onnoir.ghost:hover{background:transparent;color:var(--on-panel)}

/* The featured package is the ink card, not a grey one. It used to be
   --panel, a soft grey-tan, which sat about two steps from the white cards
   either side of it and read as the faded one of the three rather than the
   chosen one. Ink matches the header, the Book now button and the savings
   badges, so it is the page's own emphasis colour rather than a new hue. */
.plan.feature{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.plan.feature h3,.plan.feature .amt,.plan.feature .addr,.plan.feature li::before{color:#FFFFFF}
.plan.feature .per,.plan.feature li,.plan.feature .sub,.plan.feature .note{color:#C9C4BC}
.plan.feature .note b{color:#FFFFFF !important}
/* the badge flips here or it disappears into the card */
.plan.feature .savebadge{background:#FFFFFF}
.plan.feature .savebadge b{color:var(--ink)}
.plan.feature .savebadge i{
  color:color-mix(in srgb,var(--ink) 72%,transparent);
  border-left-color:color-mix(in srgb,var(--ink) 26%,transparent);
}
.plan.feature .btn.onnoir{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
.plan.feature .btn.onnoir:hover{background:transparent;color:#FFFFFF}

.compare-tag{background:color-mix(in srgb,var(--on-panel) 76%,transparent);color:#FFFFFF}

/* ============================================================
   HERO VIDEO BACKGROUND
   The hero photo is gone; the hero now sits on top of a muted,
   looping clip. Text keeps the brand's dark ink, so the scrim is
   an ivory wash that is opaque where the copy sits and clears off
   toward the right, where the clip is meant to be seen.
   ============================================================ */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero .grid{grid-template-columns:minmax(0,1fr);max-width:none}
.hero .grid > div{max-width:600px}

.herovideo{position:absolute;inset:0;z-index:0;background:var(--ground-2)}
.herovideo video{
  /* The clip is shot vertical, so in a wide box only a narrow band of it
     shows and only the vertical half of object-position does anything.
     To shift the frame sideways the element itself is made wider than the
     hero and pulled off centre: nudging `left` toward 0 slides the picture
     right while the right edge still covers. */
  position:absolute;top:0;left:-1%;width:104%;height:100%;
  object-fit:cover;object-position:50% 36%;
  display:block;pointer-events:none;
}
.herscrim{
  position:absolute;inset:0;
  background:linear-gradient(
    100deg,
    var(--ground) 0%,
    color-mix(in srgb,var(--ground) 94%,transparent) 34%,
    color-mix(in srgb,var(--ground) 62%,transparent) 54%,
    color-mix(in srgb,var(--ground) 14%,transparent) 76%,
    transparent 100%);
}

/* give the clip room to read as a backdrop */
/* A vertical clip in a wide box is cover-scaled by width, so the only way
   to see more of the frame is to give the box more height. */
.hero{min-height:clamp(600px,84vh,880px);display:flex;align-items:center}
.hero > .wrap{width:100%}

@media (max-width:860px){
  .herovideo video{object-position:58% 32%}
  .herscrim{
    background:linear-gradient(
      180deg,
      color-mix(in srgb,var(--ground) 88%,transparent) 0%,
      color-mix(in srgb,var(--ground) 93%,transparent) 46%,
      var(--ground) 100%);
  }
  .hero .grid > div{max-width:none}
}

/* a visitor who asked for less motion gets the still frame */
@media (prefers-reduced-motion:reduce){
  .herovideo video{display:none}
  .herovideo{background:var(--ground-2) url("images/hero-poster.jpg") center 30%/cover no-repeat}
}

/* ============================================================
   PARTIES & EVENTS
   One package, not three, so the grid collapses to a single
   column and the card is held to a readable measure instead of
   stretching the full width of the section.
   ============================================================ */
.plans.one{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
#events .ba{margin-bottom:var(--s6)}
#events .plan .amt{font-size:clamp(30px,3.4vw,42px)}

/* events gallery: the room shot leads at its own 3:2, the two verticals
   sit under it as a pair */
.eventshots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s6)}
.eventshots .shot{margin:0}
.eventshots .shot.lead{grid-column:1 / -1}
@media (max-width:860px){
  .eventshots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .eventshots{grid-template-columns:1fr}
}

/* ============================================================
   SIDE MENU
   The header carries the wordmark, Book Now and a Menu button at
   every width; the links themselves live in a drawer that slides
   in from the right. One menu for desktop and phone rather than
   a row of links that collapses into a cramped third line.
   ============================================================ */
header.nav .wrap{flex-wrap:nowrap}
.navright{display:flex;align-items:center;gap:14px}

.navtoggle{
  display:inline-flex;align-items:center;gap:10px;
  background:none;border:0;padding:6px 2px;cursor:pointer;color:inherit;
}
.navtoggle-label{
  font-family:var(--body);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-panel);
}
.navtoggle .bars{display:block;width:22px}
.navtoggle .bars i{
  display:block;height:1.5px;background:var(--on-panel);
  margin:4px 0;transition:transform .3s ease,opacity .2s ease;
}
.navtoggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.menuscrim{
  position:fixed;inset:0;z-index:50;
  background:rgba(32,29,27,.42);
  opacity:0;transition:opacity .35s ease;
}
.menuscrim.show{opacity:1}

.sidemenu{
  position:fixed;top:0;right:0;bottom:0;z-index:60;
  width:min(400px,88vw);
  background:var(--ground);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:var(--s4) var(--s5) var(--s5);
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.22,.8,.3,1);
  overflow-y:auto;
}
.sidemenu.open{transform:translateX(0)}

.sidemenu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5)}
.sidemenu-mark{
  font-family:var(--logo);font-weight:400;font-size:21px;
  text-transform:lowercase;letter-spacing:.005em;color:var(--ink);
}
.sidemenu-mark span{color:var(--tan-deep)}
.sidemenu-close{
  background:none;border:0;cursor:pointer;color:var(--ink);
  font-size:30px;line-height:1;padding:0 4px;
}

.sidemenu-list{list-style:none;margin:0;padding:0;flex:1}
.sidemenu-list li{border-bottom:1px solid var(--line)}
.sidemenu-list a{
  display:flex;align-items:baseline;gap:14px;
  padding:16px 0;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:400;font-size:clamp(23px,3vw,30px);
  line-height:1.15;transition:color .2s ease,padding-left .25s ease;
}
.sidemenu-list a:hover{color:var(--tan-deep);padding-left:8px}
.sidemenu-list .num{
  font-family:var(--body);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;color:var(--muted);
}

.sidemenu-foot{display:flex;flex-direction:column;gap:12px;margin-top:var(--s5)}
.sidemenu-foot .btn{align-self:flex-start}
.sidemenu-foot a:not(.btn){
  font-family:var(--body);font-size:13px;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;
}
.sidemenu-foot a:not(.btn):hover{color:var(--ink)}

body.menu-open{overflow:hidden}

@media (max-width:520px){
  .navtoggle-label{display:none}
  .navright{gap:12px}
}

@media (prefers-reduced-motion:reduce){
  .sidemenu,.menuscrim,.navtoggle .bars i,.sidemenu-list a{transition:none}
}

/* ============================================================
   HERO ON SMALL SCREENS
   Narrow, the clip stops being a backdrop: it becomes its own
   block above the copy, at its own ratio, with the text on plain
   ground underneath. Nothing is read over video.
   ============================================================ */
@media (max-width:860px){
  .hero{display:block;min-height:0;padding-block:0 clamp(40px,8vw,64px)}
  .herovideo{position:relative;inset:auto;width:100%;aspect-ratio:4/5;margin-bottom:clamp(28px,6vw,44px)}
  .herovideo video{position:absolute;top:0;left:0;width:100%;height:100%;object-position:50% 38%}
  .herscrim{display:none}
  .hero .grid > div{max-width:none}
}

/* ============================================================
   SIDE MENU ON THE LEFT
   The drawer comes in from the left instead of the right, so it
   opens under the wordmark rather than across from it.
   ============================================================ */
.sidemenu{
  right:auto;left:0;
  border-left:0;border-right:1px solid var(--line);
  transform:translateX(-100%);
}
.sidemenu.open{transform:translateX(0)}

/* ============================================================
   HERO ON SMALL SCREENS, TAKE TWO
   Back to a backdrop rather than a block of its own, but a much
   lighter wash than the desktop scrim so the clip actually reads
   through it. The copy still has a solid-enough field behind the
   first lines to stay legible.
   ============================================================ */
@media (max-width:860px){
  .hero{
    display:flex;align-items:center;
    min-height:clamp(560px,78vh,760px);
    padding-block:clamp(36px,8vw,56px);
  }
  .herovideo{position:absolute;inset:0;width:auto;aspect-ratio:auto;margin-bottom:0}
  .herovideo video{position:absolute;top:0;left:0;width:100%;height:100%;object-position:50% 34%}
  .herscrim{
    display:block;
    background:linear-gradient(
      180deg,
      color-mix(in srgb,var(--ground) 36%,transparent) 0%,
      color-mix(in srgb,var(--ground) 62%,transparent) 30%,
      color-mix(in srgb,var(--ground) 74%,transparent) 62%,
      color-mix(in srgb,var(--ground) 86%,transparent) 100%);
  }
  .hero .grid > div{max-width:none}
}

/* the Menu button sits on the same side the drawer comes from */
.navleft{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px)}
@media (max-width:520px){.navleft{gap:12px}}

/* a clip filling a photo slot, same framing rules as an <img> would get */
.slot .shotclip{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:2;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .slot .shotclip{display:none}
  .eventshots .shot:last-child .slot{
    background:var(--ground-2) url("images/event-3-poster.jpg") center/cover no-repeat;
  }
}

/* a bigger wordmark in the header, with the drawer's mark kept in step */
.brand{font-size:clamp(25px,2.5vw,31px)}
.sidemenu-mark{font-size:clamp(23px,2.2vw,27px)}

/* ============================================================
   CENTRED WORDMARK
   Three tracks, the outer two equal, so the mark sits on the
   page's centre line no matter how wide Book Now or Menu are.
   ============================================================ */
header.nav .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.navleft{justify-self:start}
.navend{justify-self:end}
.brand{justify-self:center;text-align:center;white-space:nowrap}

@media (max-width:520px){
  /* no room for three equal tracks once Book Now and the mark are both
     full size, so the mark goes back beside the menu button */
  header.nav .wrap{grid-template-columns:auto 1fr auto;gap:12px}
  .brand{justify-self:start}
}

/* the sliders and the stills now share one section, so the two groups
   need air between them */
#work .compare-pair{margin-bottom:var(--s6)}
/* The second studio sits on the stone card and takes ink. The main studio's
   card went ink when the feature treatment changed, so its address is white
   — scoping this to :not(.feature) is what keeps it from going ink-on-ink. */
#locations .plan:not(.feature) .addr{color:var(--ink)}
#locations .plan.feature .addr{color:#C9C4BC}

/* ── hero trust badges: one row on phones ──
   "Two studios" is the widest of the three, so the row is sized off it:
   no wrapping, a shrinking gap, and type that scales with the viewport. */
@media (max-width:620px){
  .hero .trust{flex-wrap:nowrap;gap:clamp(10px,3.4vw,18px);align-items:flex-start}
  .hero .trust div{min-width:0}
  .hero .trust .big{font-size:clamp(13px,3.9vw,19px);white-space:nowrap}
  .hero .trust .cap{font-size:clamp(8px,2.2vw,10.5px);letter-spacing:.06em}
}

/* ── compare sliders: four of them now, two per row ──
   The .ba three-up grid is gone; both acne before/afters are sliders built
   from halves split out of the original side-by-side composites. */
#work .compare-pair + .compare-pair{margin-top:var(--s5)}

/* Hide the tag on whichever side has been squeezed away. Below ~16% of the
   box the label no longer sits over its own photo, which is what made the
   two reads confusing. */
.compare-box[data-near="before"] .compare-tag.l,
.compare-box[data-near="after"]  .compare-tag.r{opacity:0}
.compare-tag{transition:opacity .18s ease}

/* ── filled social buttons with marks ── */
.socialrow .btn.social{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--on-noir);border-color:var(--ink);
}
.socialrow .btn.social:hover{
  background:color-mix(in srgb,var(--ink) 84%,#FFFFFF);
  border-color:color-mix(in srgb,var(--ink) 84%,#FFFFFF);
  color:var(--on-noir);
}
.socialrow .btn.social .ico{width:17px;height:17px;flex:none;display:block}

/* The social buttons read as white cards on the stone band, not ink slabs. */
.socialrow .btn.social{
  background:#FFFFFF;color:var(--ink);border-color:var(--line);
}
.socialrow .btn.social:hover{
  background:#FFFFFF;border-color:var(--ink);color:var(--ink);
}

/* ── Visit CTA and footer are one block ──
   Not two slabs with matching paint: the footer is restructured into two
   compact rows inside a single panel field, and the CTA above it is pulled
   in to match. The old layout spent four bordered strips and an 82px
   wordmark on what is really a nav row and a credit line. */
footer.joined{
  background:var(--panel);color:var(--on-panel);
  margin-top:0;border-top:0;
}
/* the per-row rules and padding from the standalone footer no longer apply */
body > footer.joined > *{
  max-width:none;margin:0;padding-inline:0;border-bottom:0;
}
.footwrap{
  max-width:1140px;margin-inline:auto;padding:0 24px clamp(12px,1.5vw,18px);
}

.footwrap .footnav{
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:center;align-items:center;
  gap:10px clamp(14px,2.2vw,26px);
  padding-block:clamp(10px,1.2vw,15px);
  border-bottom:1px solid color-mix(in srgb,var(--on-panel) 14%,transparent);
}
.footwrap .footnav a{color:var(--on-panel);font-size:11px;letter-spacing:.1em}

/* wordmark, marks and credit on one line */
.footbar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,2vw,24px);padding-top:clamp(11px,1.3vw,16px);
}
.footbar .footmark{
  display:block;padding:0;text-decoration:none;line-height:1;
  font-size:clamp(18px,1.9vw,23px);color:var(--on-panel);
}
.footbar .footmark span{color:var(--on-panel);opacity:.42}
.footbar .footlegal{
  margin:0;padding:0;justify-self:center;text-align:center;
  font-size:11.5px;color:color-mix(in srgb,var(--on-panel) 62%,transparent);
}
.footbar .footsocial{
  order:3;justify-self:end;padding:0;gap:16px;
}
.footbar .footsocial a{color:var(--on-panel)}
.footwrap a:hover{color:var(--tan-deep)}

@media (max-width:720px){
  .footbar{grid-template-columns:1fr;justify-items:center;gap:14px;text-align:center}
  .footbar .footsocial{justify-self:center}
}

/* the CTA tightens to match: it was 96px of padding top and bottom */
body:has(footer.joined) .cta .wrap{padding-block:clamp(38px,4.6vw,60px) clamp(24px,2.8vw,34px)}
body:has(footer.joined) .cta .lede{margin-bottom:24px}
body:has(footer.joined) .cta .infogrid{margin-top:clamp(30px,3.6vw,44px)}

/* ── the wordmark now heads the booking block, and the footer is one line ──
   The footer nav and the Studio column are gone: the address still lives in
   Where to find me, and navigation is the side menu's job. */
.cta .ctamark{
  display:block;text-align:center;text-decoration:none;line-height:1;
  padding:0;
  color:var(--on-panel);font-family:var(--logo);font-weight:600;
  font-size:clamp(30px,3.6vw,46px);letter-spacing:.01em;
  margin-bottom:clamp(14px,1.8vw,22px);
}
.cta .ctamark span{opacity:.42}
.cta .ctamark:hover{color:var(--tan-deep)}

/* two columns, centred, now that Studio is gone */
body:has(footer.joined) .cta .infogrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:760px;margin-inline:auto;
}

/* credit line left, marks right — no nav row above them */
.footwrap .footbar{
  grid-template-columns:1fr auto;padding-top:clamp(12px,1.4vw,16px);
  border-top:1px solid color-mix(in srgb,var(--on-panel) 14%,transparent);
}
.footbar .footlegal{justify-self:start;text-align:left}

@media (max-width:720px){
  body:has(footer.joined) .cta .infogrid{grid-template-columns:1fr}
  .footwrap .footbar{grid-template-columns:1fr}
  .footbar .footlegal{justify-self:center;text-align:center}
}

/* p{max-width:65ch} caps the CTA eyebrow at ~520px, and unlike .cta h2 and
   .cta .lede it never got margin-inline:auto — so it has always sat left of
   centre. Invisible until the wordmark landed dead-centre above it. */
.cta .eyebrow{margin-inline:auto}

/* ── the booking block was 804px tall; most of it was air ──
   The hours run in two columns instead of seven stacked rows, and every
   vertical gap in the block comes in. */
body:has(footer.joined) .cta .wrap{padding-block:clamp(28px,3.2vw,40px) clamp(18px,2vw,24px)}
body:has(footer.joined) .cta .ctamark{font-size:clamp(26px,3vw,38px);margin-bottom:clamp(8px,1vw,12px)}
body:has(footer.joined) .cta .eyebrow{margin-bottom:10px}
body:has(footer.joined) .cta h2{margin-bottom:10px}
body:has(footer.joined) .cta .lede{margin-bottom:18px}
body:has(footer.joined) .cta .infogrid{
  margin-top:clamp(20px,2.4vw,28px);padding-top:clamp(20px,2.4vw,26px);
}

/* Two columns made every row wrap — the info column is only ~354px wide, and
   "11:45 am – 1:45 pm" does not fit beside a day name in half of that. One
   column, tighter: smaller type, a smaller gap, and the two closed days on
   one row. */
body:has(footer.joined) .cta .hours{gap:5px}
body:has(footer.joined) .cta .hours div{font-size:14px;line-height:1.35}
body:has(footer.joined) .cta .infogrid h4{margin-bottom:12px}
body:has(footer.joined) .cta .infogrid .v{font-size:15px;line-height:1.6;margin-bottom:8px}

/* Hours hard left, Get in touch hard right: the 760px cap had them huddled
   in the middle with empty gutters either side, which read as a taller,
   heavier block than it is. */
body:has(footer.joined) .cta .infogrid{
  max-width:none;grid-template-columns:auto auto;justify-content:space-between;
  gap:clamp(28px,6vw,80px);
}
body:has(footer.joined) .cta .infogrid > div:last-child{text-align:right}
body:has(footer.joined) .cta .infogrid > div:last-child .v{margin-left:auto}
body:has(footer.joined) .cta .hours{min-width:min(330px,38vw)}
@media (max-width:720px){
  body:has(footer.joined) .cta .infogrid{grid-template-columns:1fr;justify-content:stretch}
  body:has(footer.joined) .cta .infogrid > div:last-child{text-align:left}
}

/* ── booking block as one row: hours | book | get in touch ──
   The three stacked bands became three columns, which is what finally takes
   the height out of this section rather than shaving padding off it. */
.cta .ctarow{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;gap:clamp(24px,4vw,64px);text-align:left;
}
.cta .ctamid{text-align:center;max-width:560px;margin-inline:auto}
.cta .infocol{padding-top:clamp(8px,1.6vw,22px)}
.cta .infocol.end{text-align:right}
.cta .infocol.end .v{margin-left:auto}

/* the grid's own border and spacing are no longer wanted */
body:has(footer.joined) .cta .ctarow .infocol{margin-top:0;padding-inline:0;border-top:0}
.cta .infocol h4{margin-bottom:12px}

/* the wordmark matches the header: same face, weight, size and single colour */
body:has(footer.joined) .cta .ctamark{
  font-family:var(--logo);font-weight:600;letter-spacing:.01em;
  font-size:clamp(25px,2.5vw,31px);text-transform:lowercase;
  color:var(--on-panel);margin-bottom:clamp(10px,1.2vw,14px);
}
.cta .ctamark span{color:inherit;opacity:1}

/* the marks sit under the two buttons now */
.cta .ctamid .footsocial{
  display:flex;justify-content:center;gap:20px;
  padding:clamp(16px,2vw,22px) 0 0;
}
.cta .ctamid .footsocial a{color:var(--on-panel)}
.cta .ctamid .footsocial a:hover{color:var(--tan-deep)}

/* which leaves the footer as one centred line */
.footwrap .footbar{grid-template-columns:1fr}
.footbar .footlegal{justify-self:center;text-align:center}

@media (max-width:880px){
  .cta .ctarow{grid-template-columns:1fr;gap:28px}
  .cta .ctamid{order:-1}
  .cta .infocol.end{text-align:left}
  .cta .infocol.end .v{margin-left:0}
}

/* ── .infocol inherits what .infogrid used to give these columns ──
   Renaming the wrapper orphaned every .infogrid descendant rule: the links
   lost their colour, underline and overflow-wrap, which is why the long
   email ran out of its column. Restated here rather than left to the dead
   .infogrid blocks above, which now match nothing. */
.cta .infocol h4{
  font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-panel);
}
.cta .infocol .v{font-size:15px;line-height:1.6;margin:0 0 8px;color:var(--on-panel)}
.cta .infocol a{
  color:var(--on-panel);text-decoration:none;
  border-bottom:1px solid var(--tan);overflow-wrap:anywhere;
}
.cta .infocol a:hover{border-color:var(--on-panel)}

/* The centre column was sized `auto`, i.e. max-content, so it grew past its
   track and overlapped both side columns. Explicit fractions instead. */
.cta .ctarow{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr)}

/* Final proportions: the email is the widest fixed thing in the row, so the
   right column gets more than its share and the gap comes down a little. */
.cta .ctarow{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.4fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,52px);
}
.cta .infocol a{overflow-wrap:break-word}
.cta .ctamid h2{font-size:clamp(26px,3.4vw,40px)}

/* The old min-width:min(330px,38vw) on .hours was sized for a half-width
   column; in the three-column row it overflows its track and runs under the
   heading. The rows size themselves now. */
body:has(footer.joined) .cta .hours{min-width:0}

/* Keep the two buttons on one line inside the narrower centre column. */
.cta .ctamid .row{gap:10px;flex-wrap:nowrap;justify-content:center}
.cta .ctamid .row .btn{padding-inline:clamp(14px,1.8vw,24px);white-space:nowrap;font-size:11px}
@media (max-width:880px){.cta .ctamid .row{flex-wrap:wrap}}

/* This has to come last: the proportion rules above are unconditional and
   were overriding the earlier stacking breakpoint, leaving three ~90px
   columns on a phone. */
@media (max-width:880px){
  .cta .ctarow{grid-template-columns:1fr;gap:30px;text-align:center}
  .cta .ctamid{order:-1}
  .cta .infocol,.cta .infocol.end{text-align:center}
  .cta .infocol.end .v{margin-inline:auto}
  .cta .hours{max-width:340px;margin-inline:auto}
}

/* The real padding was never on .wrap — the generic section rule puts 96px
   top and bottom on the <section> itself, which is why trimming .wrap kept
   not helping. Both are set here. */
body:has(footer.joined) .cta{padding-block:clamp(22px,2.4vw,38px)}
body:has(footer.joined) .cta .wrap{padding-block:0}

/* The row was still bound by .wrap's 1140px cap, so on a wide screen the
   three columns bunched in the middle with big empty margins. Let it use
   the width it has; the centre column keeps its own max-width so the
   heading and paragraph do not stretch. */
body:has(footer.joined) .cta .wrap{
  max-width:min(1800px,96vw);
  padding-inline:clamp(24px,3vw,56px);
}
body:has(footer.joined) .cta .ctarow{gap:clamp(20px,4vw,96px)}

/* The buttons are gone from the centre column; the marks follow the
   paragraph directly, so they no longer need the button row's spacing. */
.cta .ctamid .footsocial{padding-top:clamp(18px,2.2vw,26px)}

/* ── the wordmark closes the page at full size ──
   No longer matched to the header: this is the sign-off, so it scales with
   the viewport and the eyebrow sits centred beneath it. */
body:has(footer.joined) .cta .ctamark{
  font-size:clamp(38px,5.8vw,108px);
  letter-spacing:-.01em;line-height:.95;
  margin-bottom:clamp(10px,1.4vw,18px);
}
/* The centre column capped the mark at 560px. It is unbound now, but only
   to its own grid track: at 200px the wordmark was ~700px wide and spilled
   over the Hours and Get in touch columns either side. */
body:has(footer.joined) .cta .ctamid{max-width:100%}
body:has(footer.joined) .cta .ctamid h2,
body:has(footer.joined) .cta .ctamid .eyebrow{
  max-width:none;margin-inline:auto;text-align:center;
}

/* ── BUG FIX: the dismissed popup was still eating every click ──
   .welcome sets display:grid, which beats the browser's default
   [hidden]{display:none}. So once closed, the overlay kept sitting over the
   page at z-index 200 — invisible (card opacity 0) but fully hit-testable.
   Clicks on the FAQ summaries, and on anything else under it, went to the
   overlay instead. */
.welcome[hidden]{display:none}

/* ── savings badge on each package ──
   Sits on the price baseline rather than under it, so the number and the
   saving read as one line. Two tiers inside the pill: the dollar figure
   carries the weight, the percentage trails it in lighter type. */
.plan .priceline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.plan .priceline .amt{margin:0}
.plan .savebadge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--pill);
  border:1px solid transparent;
  background:var(--ink);
  font-family:var(--body);line-height:1;white-space:nowrap;
}
.plan .savebadge b{
  font-weight:600;font-size:12px;letter-spacing:.06em;
  color:var(--ground);font-variant-numeric:tabular-nums;
}
.plan .savebadge i{
  font-style:normal;font-weight:500;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--ground) 76%,transparent);
  padding-left:7px;
  border-left:1px solid color-mix(in srgb,var(--ground) 32%,transparent);
}
/* the feature card is a light tan panel, not a noir one — the old override
   painted the badge white there, which read as the weakest of the three on
   the card meant to stand out. It now matches its own "Most acne clients"
   tag and its two neighbours. */
@media (max-width:420px){.plan .savebadge i{display:none}}

/* ── the site stays light in OS dark mode ──
   Four earlier blocks redefine the palette under
   @media (prefers-color-scheme:dark). They are all scoped
   :root:not([data-theme="light"]), so the attribute on <html> disables
   them — but build-artifact.py strips <html>, so this block re-asserts the
   light values unconditionally for that case. Last rule wins. */
@media (prefers-color-scheme:dark){
  :root,:root:not([data-theme="light"]){
    --ink:#201D1B; --noir:#201D1B; --noir-2:#2A2624;
    --ground:#FFFFFF; --ground-2:#F4F1EC; --surface:#FFFFFF;
    --muted:#5F5B55; --line:#D9D4CC;
    --on-noir:#FFFFFF; --muted-noir:#C9C4BC;
    --tan:#201D1B; --tan-deep:#5F5B55; --on-tan:#FFFFFF;
    --panel:#D9D4CC; --on-panel:#201D1B;
  }
}
/* keeps form controls, scrollbars and the address bar light too */
:root{
  color-scheme:light;
  /* the last pure black in the document was the UA's initial colour on
     <html>. Nothing painted it, since body sets its own, but it is what
     form controls and anything that falls back to currentColor inherit. */
  color:var(--ink);
}

/* ── hero scrim back to black ──
   The scrim was painted in var(--ground), which the brand palette made
   #FFFFFF, so it bleached the left third of the clip. It is ink now, which
   means every piece of hero type has to flip light to stay readable. */
.herscrim{
  background:linear-gradient(100deg,
    rgba(32,29,27,.94) 0%,
    rgba(32,29,27,.88) 34%,
    rgba(32,29,27,.58) 54%,
    rgba(32,29,27,.16) 76%,
    rgba(32,29,27,0) 100%);
}
.hero h1,
.hero h1 em,
.hero .trust .big{color:#FFFFFF}
.hero .eyebrow,
.hero .lede,
.hero .trust .cap{color:rgba(255,255,255,.78)}
.hero .trust{border-top-color:rgba(255,255,255,.26)}

/* on ink, the filled button inverts and the ghost turns white */
.hero .herocta .btn{background:#FFFFFF;color:#201D1B;border-color:#FFFFFF}
.hero .herocta .btn:hover{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.86);color:#201D1B}
.hero .herocta .btn.ghost{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.62)}
.hero .herocta .btn.ghost:hover{background:#FFFFFF;color:#201D1B;border-color:#FFFFFF}

@media (max-width:860px){
  .herscrim{
    display:block;
    background:linear-gradient(180deg,
      rgba(32,29,27,.34) 0%,
      rgba(32,29,27,.56) 34%,
      rgba(32,29,27,.74) 66%,
      rgba(32,29,27,.88) 100%);
  }
}

/* a larger wordmark in the header */
.brand{font-size:clamp(30px,3.1vw,40px)}

/* the heart after "Meet Sophia" — the eyebrow carries .2em tracking, which
   would otherwise leave the glyph floating a full space away from the name */
.eyebrow-heart{margin-left:-.12em;letter-spacing:0;font-size:1.05em;vertical-align:baseline}

/* ── the four comparisons in one row ──
   They used to run as two rows of two. Side by side all four read as one
   body of work rather than two separate exhibits, and nothing below the
   fold has to be scrolled to before the range of results is visible.

   The pair grid was capped at 1000px for two columns; four need the
   section's full width. Below 1100px they fall back to two per row, and
   below 760px to one, both of which the old breakpoints already handled. */
.compare-pair.four{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);
  /* The row breaks out of .wrap. Four photos inside the text column left a
     third of a wide screen empty either side, and each frame only about
     250px — smaller than the thing being judged deserves. Centred off the
     viewport rather than the parent, so the parent's own width is
     irrelevant. */
  width:min(1800px,94vw);max-width:none;
  position:relative;left:50%;transform:translateX(-50%);
}
@media (max-width:1100px){
  .compare-pair.four{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:auto;max-width:1000px;left:auto;transform:none;
  }
}
@media (max-width:760px){
  .compare-pair.four{grid-template-columns:1fr;max-width:620px;gap:34px}
}
/* only where a quarter of the row is still narrow enough that the full-size
   knob would cover a third of the frame */
@media (min-width:1101px) and (max-width:1500px){
  .compare-pair.four .compare-handle::after{width:34px;height:34px;margin:-17px 0 0 -17px}
  .compare-pair.four .compare-handle::before{width:12px;height:8px;margin:-4px 0 0 -6px}
  .compare-pair.four .compare-tag{font-size:9px;padding:5px 9px;bottom:10px}
  .compare-pair.four .compare-tag.l{left:10px}
  .compare-pair.four .compare-tag.r{right:10px}
}

/* the link to Google now sits after the cards rather than in the rating
   line, so the line above the reviews is just the score */
/* the Google button now closes the reviews, and the Instagram button sits
   with Sophia's credentials instead of alone under the photographs */
.socialrow.reviewsfoot{margin-top:34px}
.socialrow.start{justify-content:flex-start;margin-top:22px}
@media (max-width:860px){.socialrow.start{justify-content:center}}

/* The Instagram button sits directly under the credential pills in Meet
   Sophia, which are unfilled with a stone rule. A white fill on the ivory
   field read as a different kind of control stacked on the same column, so
   it takes the pills' treatment and matches the Google button, which is
   also unfilled against its own section. */
.socialrow.start .btn.social{background:transparent}
.socialrow.start .btn.social:hover{background:transparent;border-color:var(--ink)}

/* ── the marks move under Get in touch ──
   They used to hang below the wordmark in the centre column. With the
   cancellation line gone, the right column ended short and the centre block
   ran a row deeper than either side; the marks belong with the contact
   details anyway, since that is the column that is already a list of ways
   to reach her. They take the column's right alignment, and flip to centre
   with the rest of it on narrow screens. */
.cta .infocol.end .footsocial{
  display:flex;justify-content:flex-end;gap:20px;
  padding:clamp(14px,1.6vw,18px) 0 0;
}
.cta .infocol.end .footsocial a{color:var(--on-panel)}
.cta .infocol.end .footsocial a:hover{color:var(--tan-deep)}
@media (max-width:880px){.cta .infocol.end .footsocial{justify-content:center}}

/* the centre column is now just the wordmark and its line, both centred
   on the page: the row's outer tracks are an equal 1fr either side. */
.cta .ctamid{text-align:center}
.cta .ctamid .ctamark{display:block}

/* The right column was given 1.15fr against the left's .95fr so the email
   would hold one line. That asymmetry pushed the wordmark ~25px left of the
   page centre. The cancellation line is gone, so the column carries less;
   matching the two sides centres the mark, and the email still fits. */
@media (min-width:881px){
  .cta .ctarow{grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr) minmax(0,1.05fr)}
}

/* .cta .infocol a gives every link in the column a tan underline, which is
   right for the phone and email and wrong for the three marks now sitting
   below them — they were each wearing a short rule under the glyph. */
.cta .infocol .footsocial a{border-bottom:0}

/* The row is align-items:start, so the wordmark hung from the top while the
   Hours list ran ~70px further down and the mark read as sitting high rather
   than in the middle of the footer. Only the centre column is re-aligned;
   the two side columns still start level with each other. */
@media (min-width:881px){
  .cta .ctamid{align-self:center}
}

/* The tan rule under the phone and email goes too. Hover keeps its colour
   shift, which is now the only affordance, so the links still answer to the
   cursor without carrying a line in the resting state. */
.cta .infocol a{border-bottom:0}
.cta .infocol a:hover{color:var(--tan-deep);border-color:transparent}

/* The heart is written into the credit text rather than wrapped in a span:
   .footlegal is a flex row with a 26px column gap, so any element in there
   becomes its own flex item and the heart sat 28px clear of the year. */

/* ============================================================
   PHONE PASS
   Six changes asked for on mobile only. Everything here is inside a
   media query; nothing below 881px touches the desktop layout.
   ============================================================ */

/* ── 1. the mark goes back to the centre of the header ──
   It was moved beside the menu button at 520px because three equal tracks
   did not fit: the mark is 30px type and Book Now is a full-size pill, and
   together they overran the row. Both come down a little here, which buys
   the symmetric tracks back and puts the mark on the page's centre line. */
@media (max-width:520px){
  header.nav .wrap{grid-template-columns:auto auto 1fr;gap:10px}
  .brand{justify-self:start;font-size:clamp(21px,6.2vw,26px)}
  header.nav .btn.sm{padding:9px 12px;font-size:9.5px;letter-spacing:.1em}
  .navtoggle-label{display:none}
}

/* ── 2. a shorter hero ──
   78vh put the trust badges below the fold on a phone and pushed the first
   treatment two full screens down. */
@media (max-width:860px){
  .hero{min-height:clamp(430px,58vh,560px);padding-block:clamp(28px,6vw,44px)}
}

/* ── 3. the two badges get their size back ──
   The nowrap sizing below was written when there were three badges and the
   row had to survive "Two studios" plus two others. There are two now, so
   the type can go back up without the row breaking. */
@media (max-width:620px){
  .hero .trust{gap:clamp(14px,4.5vw,24px);padding-top:20px}
  .hero .trust .big{font-size:clamp(17px,5.4vw,24px)}
  .hero .trust .cap{font-size:clamp(9.5px,2.9vw,12px);letter-spacing:.08em}
}

/* ── 4. treatment descriptions become a row you open ──
   The <details> ships open and JS closes it on phones, so this only has to
   dress the summary. The marker is replaced with a chevron built the same
   way as the FAQ's. */
@media (max-width:880px){
  #treatments .descbox{margin:0 0 4px}
  #treatments .descbox > summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 0;border-top:1px solid var(--line);
    font-family:var(--body);font-size:11px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  }
  #treatments .descbox > summary::-webkit-details-marker{display:none}
  #treatments .descbox > summary::after{
    content:"";width:8px;height:8px;flex:none;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
  }
  #treatments .descbox[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
  #treatments .descbox > .desc{padding-bottom:12px}
}
/* On desktop the wrapper is invisible: no summary, no rules, no spacing.
   It does have to take over the `flex:1` that .desc used to carry as a
   direct child of .body, or the Book buttons stop sharing a baseline
   across the row — the shortest description's card was 24px out. */
@media (min-width:881px){
  #treatments .descbox > summary{display:none}
  #treatments .descbox{flex:1}
}

/* ── 5. two reviews to a row ──
   The column rule already keeps a card whole; this only changes how many
   tracks it flows into. The type comes down a step so a 165px column is
   still a readable measure. */
@media (max-width:860px){
  /* A grid, not two CSS columns. Multicol fills column one top to bottom
     before starting column two, so the six cards read 1-2-3 down the left
     and 4-5-6 down the right — the last two ended up stacked rather than
     beside each other. A two-track grid lays them out in rows, so every
     pair sits level. */
  .reviews{columns:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .reviews .review{margin-bottom:0}
  .reviews .review blockquote{font-size:13.5px;line-height:1.55}
  .reviews .review .who{font-size:12.5px}
  .reviews .review .src{font-size:9.5px}
}

/* ── "confidence" in white, bold ──
   It was reading grey: .hero h1 em carries the `tint` keyframes with
   animation-fill-mode:forwards, and an animation's filled value beats a
   normal declaration, so the #FFFFFF set further up never applied. Dropping
   the animation here is what actually lets the colour through. */
.hero h1 em{animation:none;color:#FFFFFF;font-weight:700}

/* ── a chevron on every Full Menu row ──
   The rows have been openable all along with nothing to say so; the FAQ's
   marker, scaled down to sit against the duration and price. */
.pricecard summary::after{
  content:"";flex:none;width:8px;height:8px;align-self:center;
  margin-left:4px;
  border-right:1.8px solid var(--tan-deep);
  border-bottom:1.8px solid var(--tan-deep);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
.pricecard details[open] summary::after{transform:translateY(1px) rotate(-135deg)}

/* On phones the row wraps — .meta takes a full line of its own — so an
   inline chevron fell to a third line and cost ~20px on each of 25 rows.
   Pinned to the right edge instead, centred against both lines. */
@media (max-width:860px){
  .pricecard summary{position:relative;padding-right:20px}
  .pricecard summary::after{
    position:absolute;right:2px;top:50%;margin-left:0;
    transform:translateY(-70%) rotate(45deg);
  }
  .pricecard details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
}

/* ── the three credentials hold one row ──
   They were wrapping to two: at 12px with .1em tracking and 18px of pad
   either side the three pills ran past the column. Tightening the pad and
   the tracking is enough to fit them, and they stop wrapping outright so a
   narrow column scales the type down rather than breaking the row. */
.creds{flex-wrap:nowrap}
.creds span{
  padding:8px clamp(9px,1.2vw,15px);
  letter-spacing:clamp(.04em,.35vw,.1em);
  font-size:clamp(9.5px,.95vw,12px);
  white-space:nowrap;
}
/* Not on a phone. Three pills across 327px needs ~7px type to fit, which
   is past reading size, so there they wrap as they always did. */
@media (max-width:860px){
  .creds{flex-wrap:wrap;gap:8px;justify-content:center}
  .creds span{padding:7px 12px;font-size:clamp(9px,2.6vw,11px);letter-spacing:.05em}
}

/* ── phone band: the Google stamp trades places with Acne ──
   At 2-up the five cells run 2 + 2 + 1, and the odd one out was Acne. The
   rating is the stronger thing to leave sitting on its own row, so the two
   swap with flex order — DOM order is unchanged, which keeps the reading
   order for anything that ignores `order`.

   The dividers have to follow: they are drawn with border-left and skipped
   on :first-child, which is a DOM rule. Reordered, that painted a stray
   rule down the left edge of each new row. Here they are switched off and
   put back only on whichever cell lands second in its pair. */
@media (max-width:700px){
  .stats > div:nth-child(1){order:1}
  .stats > div:nth-child(2){order:2}
  .stats > div:nth-child(3){order:5}
  .stats > div:nth-child(4){order:4}
  .stats > div:nth-child(5){order:3}

  .band .stats > div{border-left-width:0}
  .band .stats > div:nth-child(2),
  .band .stats > div:nth-child(4){border-left-width:1px}
}

/* ── phone hero: left-aligned copy, vertically centred ──
   This replaces three earlier passes (bottom-aligned block, eyebrow pinned
   to the top, centred text). The whole stack — eyebrow, headline, both
   buttons, badges — shares one left edge and sits in the middle of the
   frame, with equal video above and below. */
@media (max-width:860px){
  .hero{align-items:center}
  .hero{padding-block:clamp(28px,6vw,44px)}
  .hero .eyebrow,
  .hero h1,
  .hero .lede{text-align:left}
  .hero .herocta{justify-content:flex-start}
}

/* ── band captions: two lines, not three ──
   "MAKEUP-READY SKIN" needed 165px against the 161px the cell allows, so
   it broke after the hyphen and the caption ran to three lines while its
   neighbours ran to two. The tracking comes down a step on phones, which
   buys the 8px, and the phrase is held together so the only break point
   left is the comma. */
/* The line breaks at the comma and nowhere else: a <br> in the markup
   puts it on two lines at every width, matching its four neighbours, and
   the nowrap keeps the browser from splitting "makeup-ready" at its
   hyphen. The caption also drops the shared 161px max-width, which was
   4px short of the phrase; its cell is wider than that at every size. */
.stats .l .nb{white-space:nowrap}
.stats > div:nth-child(2) .l{max-width:none}

/* On a phone the cell itself is only 164px, so the tracking comes down a
   step across the band to buy the last few pixels. */
@media (max-width:700px){
  .band .stats .l{letter-spacing:.1em}
}

/* The rating caption runs on one line. It needs ~185px against the 161px
   the captions share, which is the only reason it was breaking; every
   cell it sits in is wider than that, down to ~217px at the narrowest
   three-up width and the full row on a phone. */
.stats > div:nth-child(3) .l{max-width:none;white-space:nowrap}

/* On a phone that cell is a 164px half-track sitting alone on the last
   row, so a 175px line hung out either side of its own box. It takes the
   whole row there instead — nothing shares it. */
@media (max-width:700px){
  .stats > div:nth-child(3){flex-basis:100%;max-width:100%}
}

/* ── the review count drops under the stars ──
   The line is a centred, wrapping flex row; giving the count a full basis
   forces the wrap after the stars instead of leaving all three abreast.
   The row gap comes down so the two lines read as one block. */
.ratingline{row-gap:10px}
.ratingline .of{flex-basis:100%;text-align:center}

/* ── Instagram and TikTok hold one row in Meet Sophia ──
   They were wrapping on phones: 205px + 187px + the gap against 327px of
   column. The pair is kept on one line and the buttons are sized off the
   viewport so they shrink to fit rather than stacking. */
@media (max-width:860px){
  .socialrow.start{flex-wrap:nowrap;gap:clamp(8px,2.4vw,14px);justify-content:center}
  .socialrow.start .btn.social{
    padding:11px clamp(9px,2.6vw,18px);
    gap:clamp(6px,1.8vw,10px);
    font-size:clamp(8.5px,2.5vw,11px);
    letter-spacing:clamp(.04em,.6vw,.1em);
    white-space:nowrap;
  }
  .socialrow.start .btn.social .ico{width:clamp(13px,4vw,17px);height:clamp(13px,4vw,17px)}
}

/* The two review tracks were plain 1fr, whose floor is min-content: with
   26px of padding either side the cards could not shrink below ~145px and
   the right column ran 15px off a 320px screen. minmax(0,…) lets them
   shrink, and the padding comes in on the narrowest phones. */
@media (max-width:860px){
  .reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:400px){
  .reviews .review{padding:20px 14px 18px}
  .reviews{gap:12px}
}