/* ==============================================================
   WEareAesthetics
   Palette : porcelain / aubergine / plum / sage
   Type    : Poppins throughout
   ============================================================== */

:root{
  --porcelain:#F3F0F2;
  --shell:#E9E2E6;
  --line:#D9D0D6;
  --line-soft:#E4DCE1;
  --ink:#26202A;
  --ink-2:#4A424D;
  --mute:#877C86;
  --plum:#6E4F63;
  --plum-deep:#523A49;
  --plum-tint:#F0E8EE;
  --sage:#9FB6A2;
  --blush:#E3CCC8;
  --white:#FFFFFF;
  --free-bg:#E3F0E8;      /* "Free" prices read green */
  --free-ink:#2E6B4C;

  --display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --shell-w:1180px;
  --gut:clamp(1.25rem,4vw,3rem);
  --r:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   Dark theme.  Not an inversion — the greys carry the same warm
   aubergine cast as the light palette, the accent is lifted so it
   still reads against a dark ground, and the two sections that are
   already dark by design get their own treatment so they do not
   disappear into the page.
   --------------------------------------------------------------- */
:root{color-scheme:light}

[data-theme="dark"]{
  color-scheme:dark;

  --porcelain:#17131A;   /* page */
  --shell:#1F1A23;       /* tinted bands */
  --white:#221C27;       /* cards and panels */
  --line:#3A3240;
  --line-soft:#2B2431;

  --ink:#EFEAF1;         /* primary text */
  --ink-2:#C2B8C7;       /* body text */
  --mute:#8F8496;

  --plum:#CB9EBB;        /* accent, lifted for contrast on dark */
  --plum-deep:#4A3343;
  --plum-tint:#2C2232;   /* accent surface */
  --blush:#E3CCC8;
  --sage:#9FB6A2;
  --free-bg:#1E3227;
  --free-ink:#9BCCAE;
}

/* Sections that were already dark need to separate from a dark page */
[data-theme="dark"] .section-dark{background:#201A25;color:var(--ink)}
[data-theme="dark"] .foot{background:#120F15;color:var(--ink)}
[data-theme="dark"] .claire-copy p{color:var(--ink-2)}
[data-theme="dark"] .claire-facts,
[data-theme="dark"] .claire-facts li{border-color:var(--line)}
[data-theme="dark"] .claire-facts span{color:var(--mute)}
[data-theme="dark"] .foot-addr,
[data-theme="dark"] .foot-base p{color:var(--mute)}
[data-theme="dark"] .foot-links a,
[data-theme="dark"] .foot-contact a{color:var(--ink-2)}
[data-theme="dark"] .foot-links a:hover,
[data-theme="dark"] .foot-contact a:hover{color:var(--ink)}
[data-theme="dark"] .foot-base{border-top-color:var(--line)}
[data-theme="dark"] .btn-on-dark{border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .btn-on-dark:hover{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
[data-theme="dark"] .logo-stack .logo-type{color:var(--ink)}

[data-theme="dark"] .nav{background:rgba(23,19,26,.82)}

/* Decorative gradients get their own dark mixes */
[data-theme="dark"] .hero-figure{
  background:transparent;
}
[data-theme="dark"] .claire-portrait{
  background:linear-gradient(200deg,#5C4054,#33253040);
}
[data-theme="dark"] .cat-thumb-empty{
  background:linear-gradient(150deg,#3A2B36,#2A2231);color:var(--plum);
}

/* Inputs sit a shade above their card rather than below it */
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=date],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .search input,
[data-theme="dark"] .slot span{background:#2A2330}
[data-theme="dark"] .section-tint input,
[data-theme="dark"] .section-tint select,
[data-theme="dark"] .section-tint textarea{background:#2A2330}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus{background:#31283880}

/* A bright map is the one thing that really glares at night */
[data-theme="dark"] .map iframe{filter:invert(.91) hue-rotate(180deg) grayscale(.28) contrast(.92)}

[data-theme="dark"] .toast{box-shadow:0 12px 30px rgba(0,0,0,.5)}
[data-theme="dark"] .modal{box-shadow:0 30px 80px rgba(0,0,0,.55)}
[data-theme="dark"] .drawer{box-shadow:-20px 0 60px rgba(0,0,0,.5)}
[data-theme="dark"] .err{color:#E39A97}
[data-theme="dark"] .form-msg.bad{color:#E39A97}
[data-theme="dark"] .is-bad input,
[data-theme="dark"] .is-bad select,
[data-theme="dark"] .is-bad textarea{border-color:#E39A97}

*,*::before,*::after{box-sizing:border-box}

/* A class that sets display would otherwise beat the hidden attribute. */
[hidden]{display:none!important}

/* ---------------------------------------------------------------
   Reveal on scroll
   Gated behind .has-anim, which the head script only adds when JS
   is running and the visitor has not asked for reduced motion — so
   nothing can ever be left invisible.
   --------------------------------------------------------------- */
.has-anim [data-reveal]{
  opacity:0;
  transform:translateY(20px);
  filter:blur(7px);
  will-change:opacity,transform,filter;
}
.has-anim [data-reveal].is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease);
  transition-delay:var(--d,0ms);
}

html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}

html{overflow-x:clip}

body{
  margin:0;overflow-x:clip;
  background:var(--porcelain);
  transition:background-color .3s var(--ease),color .3s var(--ease);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--plum);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Inline icons take their colour and size from the text beside them. */
.ico{
  width:1.05em;height:1.05em;flex:0 0 auto;
  vertical-align:-.16em;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--porcelain);padding:.75rem 1.25rem;
}
.skip:focus{left:1rem;top:1rem}

.shell{
  width:100%;max-width:var(--shell-w);
  margin-inline:auto;padding-inline:var(--gut);
}

/* ---------------------------------------------------------------
   Logo — the mark is inlined as SVG so it takes page colour
   context, and the wordmark is live text in Sacramento (the
   typeface the logo was drawn in), self-hosted in assets/fonts.
   --------------------------------------------------------------- */
@font-face{
  font-family:"Sacramento";
  src:url("../fonts/Sacramento-Regular.woff2") format("woff2"),
      url("../fonts/Sacramento-Regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}

/* Stacked, the way the logo was drawn: the script WE monogram sits
   centred over the wordmark. Laid out horizontally it would read
   "WE WE are Aesthetics", since the mark is itself the two letters. */
.logo{
  display:inline-flex;flex-direction:column;align-items:center;gap:.18rem;
  text-decoration:none;line-height:1;
}
.logo-mark{height:24px;width:auto;flex:0 0 auto;display:block;overflow:visible}
.logo-a{fill:#87BEF4}
.logo-e{fill:#F3AFC4}
.logo-type{
  font-family:"Sacramento",cursive;
  font-size:1.15rem;line-height:1.15;letter-spacing:.005em;
  color:var(--ink);white-space:nowrap;
}

/* Larger lockup for the footer */
.logo-stack{gap:.3rem}
.logo-stack .logo-mark{height:42px}
.logo-stack .logo-type{font-size:1.75rem;color:var(--porcelain)}

/* ---------------------------------------------------------------
   Nav
   --------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(243,240,242,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line)}

/* how far down the page you are, drawn on the nav's bottom edge */
.nav::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;
  width:var(--progress,0%);background:var(--plum);
  transition:width .1s linear;
}
.nav-inner{
  display:flex;align-items:center;gap:1.5rem;
  min-height:74px;
}
.nav-links{
  display:flex;gap:1.6rem;margin-left:auto;margin-right:.35rem;
  font-size:.94rem;
}

.theme-toggle{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink);background:var(--white)}
.theme-toggle svg{width:18px;height:18px;grid-area:1/1}
.theme-toggle .ico-moon{display:none}
[data-theme="dark"] .theme-toggle .ico-sun{display:none}
[data-theme="dark"] .theme-toggle .ico-moon{display:block}

.nav-book-short{display:none}
.nav-links a{
  text-decoration:none;color:var(--ink-2);
  padding-block:.35rem;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--plum);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;border:1px solid transparent;border-radius:var(--r);
  padding:.85rem 1.5rem;font-size:.95rem;font-weight:500;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease);
}
.btn-solid{background:var(--ink);color:var(--porcelain);position:relative;overflow:hidden}
.btn-solid:hover{background:var(--plum)}
/* light sweeps across on hover */
.btn-solid::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.btn-solid:hover::after{animation:sheen .85s var(--ease)}
@keyframes sheen{to{left:130%}}
.btn-line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:var(--white)}
.btn-on-dark{border-color:rgba(243,240,242,.32);color:var(--porcelain)}
.btn-on-dark:hover{background:var(--porcelain);color:var(--ink);border-color:var(--porcelain)}
.btn-sm{padding:.6rem 1.1rem;font-size:.88rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:progress}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5rem);
}
/* Two soft lights drifting behind the headline. Decorative only —
   pointer-events off, and they sit behind everything via z-index. */
.hero::before,
.hero::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;
  pointer-events:none;opacity:.9;
  /* blur scales with the viewport so the glow stays soft at any size */
  filter:blur(clamp(46px,5.5vw,76px));
  /* own compositor layer: the blur is rasterised once, then only
     composited, instead of repainting the whole area every frame */
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
/* --edge is the left/right edge of the centred content column, so the
   lights stay anchored to the text instead of flying to the window
   edges as the page is zoomed out. */
.hero{--edge:calc(50% - min(50vw, (var(--shell-w) / 2)));}
.hero::before{
  width:clamp(300px,42vw,540px);aspect-ratio:1;
  top:-12%;
  left:calc(var(--edge) - 12%);
  background:radial-gradient(circle,#F0C9C4,#E8CFE0 42%,transparent 70%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.hero::after{
  width:clamp(260px,36vw,460px);
  aspect-ratio:1;
  bottom:-12%;
  right:calc(var(--edge) - 8%);
  background:radial-gradient(circle,#87BEF4,#87BEF4 46%,transparent 72%);
  animation:drift-b 31s ease-in-out infinite alternate;
  opacity:.3;
}
[data-theme="dark"] .hero::before{
  opacity:.5;background:radial-gradient(circle,#6E4F63,#3C2E46 45%,transparent 72%);
}
[data-theme="dark"] .hero::after{
  opacity:.22;
  background:radial-gradient(circle,#87BEF4,#87BEF4 46%,transparent 72%);
}

@keyframes drift-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(5%,7%,0) scale(1.1)}
}
@keyframes drift-b{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(-7%,-6%,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none}
}
.hero-grid{
  display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;
}
.hero-place{
  margin:0 0 .6rem;font-size:.88rem;color:var(--mute);
  letter-spacing:.04em;
}
.hero-title .line{display:block}
.hero-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.85rem,3.3vw,2.85rem);
  line-height:1.14;
  letter-spacing:-.028em;
  margin:0 0 1.25rem;
  max-width:18ch;
}
.hero-title em{color:var(--plum);font-style:italic}
.hero-lede{
  margin:0 0 2rem;max-width:40ch;color:var(--ink-2);
  font-size:.98rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.75rem}

.figures{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;margin:0;padding-top:1.75rem;
  border-top:1px solid var(--line);
}
.figure dt{
  font-size:.78rem;color:var(--mute);letter-spacing:.05em;
  margin-bottom:.45rem;
}
.figure dd{margin:0;display:flex;align-items:baseline;gap:.15rem}
.fig-num{
  font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.5rem);
  line-height:1;font-weight:500;letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums;
}
.fig-suffix{font-family:var(--display);font-size:1rem;color:var(--mute)}
.fig-note{margin:.4rem 0 0;font-size:.82rem;color:var(--mute)}

/* The gradient sits on the figure so the block still reads as
   intentional if the photograph has not been added yet. */
.hero-figure::after{
  content:"";position:absolute;inset:-18% -12% -12%;z-index:-1;
  background:transparent;
  opacity:.9;pointer-events:none;
}
.hero-figure{
  margin:0;position:relative;aspect-ratio:4/5;border-radius:8px;
  overflow:visible;
  background:transparent;
}
.hero-figure img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:2px;
}

/* ---------------------------------------------------------------
   Hero visual — the portrait, the glass points on the top right and
   the consultation card. The portrait is a cut-out PNG, so it sits in
   the flow at its own height rather than being cropped to a box.
   --------------------------------------------------------------- */
.hero-figure{
  aspect-ratio:auto;align-self:start;
  /* the portrait reads better large: it reaches up past the copy and
     spills a little into the gutter on both sides */
  margin-top:calc(-1 * clamp(1.5rem,4vw,3.5rem));
}
.hero-visual{
  position:relative;
  width:126%;margin-left:-18%;margin-right:-8%;
}
.hero-figure .hero-portrait{
  position:static;width:100%;height:auto;object-fit:contain;border-radius:0;display:block;
}

.hero-points{
  position:absolute;top:2%;right:0;z-index:2;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;
  max-width:min(74%,300px);
}
.hero-points li{
  display:flex;align-items:center;gap:.6rem;
  padding:.45rem .95rem .45rem .45rem;border-radius:100px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -20px rgba(38,32,42,.6);
  font-size:.82rem;font-weight:500;line-height:1.25;color:#2E2730;
}
/* a light stagger, like the reference */
.hero-points li:nth-child(2){margin-right:1.6rem}
.hero-points li:nth-child(3){margin-right:.7rem}
.hero-point-ico{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#ffffff;color:#7B2A44;
}
.hero-point-ico svg{width:22px;height:22px}

.hero-card{
  position:absolute;right:0;bottom:-3%;z-index:2;
  width:min(300px,72%);padding:1rem;border-radius:16px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 26px 50px -28px rgba(38, 32, 42, 0.26);
  color:#2E2730;
}
.hero-card-top{display:flex;align-items:center;gap:.7rem;padding-bottom:.85rem}
.hero-card-ico{
  flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(203,158,187,.3);color:#7B2A44;
}
.hero-card-ico svg{width:20px;height:20px}
.hero-card-title{margin:0;font-weight:500;font-size:1rem}
.hero-card-meta{margin:.1rem 0 0;font-size:.82rem;color:#6B6069}
.hero-card-btn.btn-solid{
  width:100%;justify-content:center;gap:.6rem;
  border-top:1px solid rgba(38,32,42,.12);border-radius:10px;
}
.hero-card-btn svg{transition:transform .2s var(--ease)}
.hero-card-btn:hover svg{transform:translateX(3px)}

@media (max-width:900px){
  .hero-points li{font-size:.75rem;padding:.4rem .8rem .4rem .4rem}
  .hero-point-ico{width:28px;height:28px}
  .hero-point-ico svg{width:20px;height:20px}
}
@media (max-width:560px){
  .hero-points{max-width:78%;gap:.4rem}
  .hero-card{width:min(250px,82%);padding:.8rem;bottom:0}
  .hero-card-ico{width:34px;height:34px}
  .hero-card-title{font-size:.92rem}
  .hero-card-meta{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-card-btn svg{transition:none}
}

/* ---------------------------------------------------------------
   Phone tab bar — only on small portrait screens, where the top nav
   is a long reach. Hidden everywhere else, print included.
   --------------------------------------------------------------- */
.tabbar{display:none}
@media (max-width:760px) and (orientation:portrait){
  .tabbar{
    position:fixed;left:.65rem;right:.65rem;bottom:.65rem;z-index:60;
    display:flex;justify-content:space-around;gap:.25rem;
    padding:.5rem .35rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    border-radius:22px;border:1px solid var(--line);
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 18px 40px -22px rgba(38,32,42,.55);
  }
  .tab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;
    padding:.25rem 0;border-radius:14px;
    font-size:.68rem;line-height:1.1;color:var(--mute);text-decoration:none;
  }
  .tab svg{width:22px;height:22px}
  .tab.is-on{color:var(--plum)}
  .tab:active{background:var(--shell)}
  /* room for the bar so it never covers the end of the page */
  body{padding-bottom:5.5rem}
}
[data-theme="dark"] .tabbar{background:rgba(35,28,38,.82)}
@media print{.tabbar{display:none}}

/* ---------------------------------------------------------------
   Ticker — the real treatment list, running past
   --------------------------------------------------------------- */
.ticker{
  overflow:hidden;border-block:1px solid var(--line);
  contain:paint;
  max-width:calc(var(--shell-w) + var(--gut) * 2);
  margin-inline:auto;
  background:var(--white);padding:.85rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{
  display:flex;width:max-content;
  animation:ticker 46s linear infinite;
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-run{
  display:flex;list-style:none;margin:0;padding:0;
}
.ticker-run li{
  display:flex;align-items:center;gap:1.4rem;
  padding-right:1.4rem;white-space:nowrap;
  font-size:.9rem;color:var(--ink-2);
}
.ticker-dot{color:var(--plum);font-size:.5rem}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------
   Intro strip
   --------------------------------------------------------------- */
.strip{
  border-block:1px solid var(--line);
  background:var(--shell);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.strip-grid{
  display:grid;gap:clamp(1.25rem,4vw,3.5rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
}
.strip-lead{
  margin:0;font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.6rem);
  line-height:1.4;letter-spacing:-.018em;font-weight:500;
}
.strip-body{margin:0;color:var(--ink-2);max-width:62ch}

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.section{padding-block:clamp(2.25rem,5vw,4.25rem)}
.section-tint{background:var(--shell);border-top:1px solid var(--line)}
.section-dark{background:var(--ink);color:var(--porcelain)}

.section-head{margin-bottom:clamp(1.1rem,2.2vw,1.6rem);max-width:56ch}
.eyebrow{margin:0 0 .3rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.section-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.75rem,3.5vw,2.6rem);line-height:1.18;
  letter-spacing:-.028em;margin:0 0 .4rem;
}
.section-sub{margin:0;color:var(--mute)}

/* ---------------------------------------------------------------
   Portfolio carousel
   Scroll-snap does the work, so it drags natively on touch and the
   buttons just nudge the scroll position. No layout maths, nothing
   to resync on resize.
   --------------------------------------------------------------- */
.carousel-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;max-width:none;
}
.carousel-nav-row{display:flex;gap:.5rem;flex:0 0 auto}
.carousel-nav{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:all .22s var(--ease);
}
.carousel-nav svg{width:18px;height:18px}
.carousel-nav:hover:not(:disabled){background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.carousel-nav:disabled{opacity:.32;cursor:default}

.carousel{
  margin-top:clamp(1rem,2vw,1.5rem);
  overflow:hidden;
}
.carousel-track{
  display:flex;gap:clamp(.85rem,2vw,1.35rem);
  list-style:none;margin:0;
  padding:.25rem var(--gut) 1.25rem;
  overflow-x:auto;overscroll-behavior-x:contain;overscroll-behavior-y:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gut);
  scrollbar-width:none;
  /* centres the track on wide screens without breaking the bleed */
  max-width:calc(var(--shell-w) + var(--gut) * 2);
  margin-inline:auto;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:2px solid var(--plum);outline-offset:-2px;border-radius:var(--r)}

.carousel-item{
  flex:0 0 clamp(240px,30%,360px);
  scroll-snap-align:start;
  transition:transform .35s var(--ease);
  display:flex; /* lets a card inside (e.g. .treat-card) stretch to the row's tallest item */
}
.carousel-item:hover{transform:translateY(-4px)}
.carousel-item figure{
  /* the figure is the flex child here, so it has to be told to fill the
     item — without this its width comes from the caption text, and every
     card ends up a different size */
  margin:0;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
}
.carousel-media{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
}
.carousel-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.carousel-item:hover .carousel-media img{transform:scale(1.045)}
.carousel-item figcaption{
  display:flex;flex-direction:column;gap:.15rem;
  margin-top:.7rem;font-size:.9rem;
}
.carousel-item figcaption strong{font-weight:500}
.carousel-item figcaption span{color:var(--mute);font-size:.85rem}

.carousel-dots{
  display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  margin-top:.25rem;
}
.carousel-dot{
  width:28px;height:4px;border:0;border-radius:100px;padding:0;
  background:var(--line);cursor:pointer;
  transition:background .25s var(--ease),width .25s var(--ease);
}
.carousel-dot:hover{background:var(--mute)}
.carousel-dot.is-on{background:var(--plum);width:44px}

@media (max-width:760px){
  .carousel-head{flex-direction:column;align-items:flex-start;gap:1rem}
  .carousel-item{flex-basis:78%}
}

/* ---------------------------------------------------------------
   Treatment cards — image-forward, used on the homepage's curated
   rows (inside a .carousel-item) and on the full treatments grid
   (inside .treat-grid). Same component, two containers.
   --------------------------------------------------------------- */
.treat-card{
  display:flex;flex-direction:column;width:100%;height:100%;text-align:left;padding:0;
  background:var(--white);border:1px solid var(--line-soft);border-radius:14px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.treat-card-book{cursor:pointer}
.treat-card:hover{
  transform:translateY(-4px);box-shadow:0 14px 32px rgba(38,32,42,.09);border-color:var(--line);
}
.treat-card-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--porcelain);
  display:block;
}
.treat-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.treat-card:hover .treat-card-media img{transform:scale(1.06)}
.treat-card-media-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Sacramento',cursive;font-size:2.6rem;color:var(--mute);
}
.treat-card-book{
  position:absolute;left:.7rem;right:.7rem;bottom:.7rem;z-index:2;
  padding:.6rem 1rem;border-radius:100px;border:0;
  background:var(--white);color:var(--ink);
  font-size:.86rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;text-align:center;
  opacity:0;transform:translateY(6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.treat-card:hover .treat-card-book,
.treat-card:focus-within .treat-card-book,
.treat-card-book:focus-visible{
  opacity:1;transform:translateY(0);
}
.treat-card-book:hover,
.treat-card-book:focus-visible{background:var(--plum);color:var(--porcelain)}
/* no hover on touch — keep the button visibly available instead of hidden forever */
@media (hover:none){
  .treat-card-book{opacity:1;transform:none;background:var(--plum);color:var(--porcelain)}
}
/* phone: the wide pill covered the photo — turn it into a small white
   round "+" button in the top-left corner of the image */
@media (max-width:600px){
  .treat-card-book,
  .treat-card-book:hover,
  .treat-card-book:focus-visible{
    left:.55rem;top:.55rem;right:auto;bottom:auto;
    width:34px;height:34px;padding:0;border-radius:50%;
    font-size:0;line-height:0;color:transparent;overflow:hidden;
    background:
      linear-gradient(#111,#111) center/14px 2px no-repeat,
      linear-gradient(#111,#111) center/2px 14px no-repeat,
      #fff;
    box-shadow:0 2px 8px rgba(0,0,0,.22);
  }
  .treat-card-book:active{transform:scale(.92)}
}
.treat-card-badge{
  position:absolute;top:.6rem;left:.6rem;
  background:var(--ink);color:var(--porcelain);
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:.25rem .55rem;border-radius:100px;
}
/* phone: keep the Free badge clear of the + button */
@media (max-width:600px){
  .treat-card-badge{left:auto;right:.55rem;top:.55rem}
}
.treat-card-body{
  display:flex;flex-direction:column;flex:1;gap:.3rem;
  padding:1rem 1.1rem 1.15rem;
}
.treat-card-cat{
  margin:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);
}
.treat-card-name{
  font-size:1.02rem;font-weight:500;line-height:1.3;
  transition:color .2s var(--ease);
}
.treat-card:hover .treat-card-name{color:var(--plum)}
.treat-card-sum{
  font-size:.86rem;color:var(--mute);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.treat-card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line-soft);
  flex-wrap:wrap;
}
.treat-card-price{
  font-weight:600;font-size:1rem;
}
.treat-card-price.is-free{
  background:var(--free-bg);color:var(--free-ink);
  padding:.15rem .55rem;border-radius:100px;font-size:.82rem;
}
.treat-card-meta .row-fact{font-size:.82rem;color:var(--mute);gap:.1rem}
/* the svg paths sit inset inside the 20x20 viewBox, which read as extra space
   next to the text; the negative margin pulls the text back in */
.treat-card-meta .row-fact .ico{width:1.35em;height:1.35em;margin-right:-.15em}

/* the homepage rows reuse the portfolio carousel's item width */
.carousel-track-cards .carousel-item{flex-basis:clamp(220px,26%,300px)}
@media (max-width:760px){
  .carousel-track-cards .carousel-item{flex-basis:70%}
}

/* the full treatments page: a plain responsive grid, no scrolling */
.treat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.1rem;margin-top:1.5rem;
}
.treat-card.is-hidden{display:none}

/* ---------------------------------------------------------------
   Newest treatments — a fixed four-card mosaic: one large card on
   the left, a wide one top-right, two small ones under it. Each card
   is its own image with the words laid over the bottom. Colours on
   the cards are fixed rather than themed: they always sit on a photo.
   --------------------------------------------------------------- */
.section-newest .section-head{margin-bottom:clamp(.9rem,1.6vw,1.2rem)}
.section-newest .section-title{margin-bottom:.1rem}
.nw-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));
  gap:.7rem;
  height:clamp(460px,42vw,560px);
}
.nw-cell{display:flex;min-width:0;min-height:0}
.nw-cell-1{grid-column:1;grid-row:1 / 3}
.nw-cell-2{grid-column:2 / 4;grid-row:1}
.nw-cell-3{grid-column:2;grid-row:2}
.nw-cell-4{grid-column:3;grid-row:2}

.nw-card{
  position:relative;flex:1;isolation:isolate;overflow:hidden;
  border-radius:18px;background:transparent;color:#fff;
  transition:box-shadow .35s var(--ease);
}
.nw-card:hover{box-shadow:0 26px 48px -22px rgba(38,32,42,.55)}
.nw-img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease);
}
.nw-card:hover .nw-img{transform:scale(1.05)}
.nw-img-empty{
  display:grid;place-items:center;
  font-family:'Sacramento',cursive;font-size:clamp(4rem,9vw,7rem);color:rgba(255,255,255,.3);
  background:radial-gradient(120% 90% at 30% 20%,#8A6A7E 0%,#523A49 45%,#241C25 100%);
}
/* keeps the words readable on any photo */
.nw-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(20,15,21,.84) 0%,rgba(20,15,21,.38) 40%,rgba(20,15,21,0) 66%);
}

.nw-chip{
position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .3rem .75rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #454545;
}
.nw-chip.is-free{background:rgba(227,240,232,.92);border-color:transparent;color:#2E6B4C}

.nw-body{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
  padding:clamp(.85rem,1.3vw,1.05rem);
}
.nw-name{
  margin:0;font-size:clamp(.98rem,1.25vw,1.1rem);font-weight:600;line-height:1.25;letter-spacing:-.01em;
}
.nw-cell-1 .nw-name{font-size:clamp(1.15rem,1.9vw,1.5rem)}
.nw-sum{
  margin:0;max-width:38ch;font-size:.86rem;line-height:1.4;color:rgba(255,255,255,.8);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nw-book{
  margin-top:.6rem;padding:.55rem 1.15rem;border:0;border-radius:100px;
  background:#fff;color:#26202A;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.nw-book:hover,.nw-book:focus-visible{background:#6E4F63;color:#fff}
.nw-book:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nw-book:active{transform:scale(.97)}

/* tablet: large and wide cards go full width, the two small share a row */
@media (max-width:980px){
  .nw-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;height:auto}
  .nw-cell-1,.nw-cell-2{grid-column:1 / -1;grid-row:auto}
  .nw-cell-3,.nw-cell-4{grid-column:auto;grid-row:auto}
  .nw-cell-1{aspect-ratio:16/11}
  .nw-cell-2{aspect-ratio:16/9}
  .nw-cell-3,.nw-cell-4{aspect-ratio:4/5}
}
@media (max-width:560px){
  .nw-cell-1{aspect-ratio:4/5}
  .nw-cell-2{aspect-ratio:4/3}
  .nw-cell-3,.nw-cell-4{aspect-ratio:3/4.4}
  .nw-cell-3 .nw-body,.nw-cell-4 .nw-body{padding:.9rem}
  .nw-cell-3 .nw-sum,.nw-cell-4 .nw-sum{display:none}
  .nw-cell-3 .nw-name,.nw-cell-4 .nw-name{font-size:.98rem}
  .nw-cell-3 .nw-chip,.nw-cell-4 .nw-chip{top:.7rem;left:.7rem;font-size:.7rem;padding:.25rem .6rem}
  .nw-cell-3 .nw-book,.nw-cell-4 .nw-book{padding:.45rem .9rem;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .nw-card,.nw-img,.nw-book{transition:none}
  .nw-card:hover,.nw-card:hover .nw-img{transform:none}
}

/* -------------------- Browse-all CTA banner --------------------
   Dark card, words on the left, the violet-lit face on the right.
   Colours are fixed (not themed) — the card matches the photo's own
   background (#110E16) so the image melts into it.
   --------------------------------------------------------------- */
.section-browse{padding-top:0}
.browse-cta{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(190px,18vw,240px);
  background:#110E16;border-radius:18px;color:#fff;
}
.browse-cta-img{
  position:absolute;top:0;right:0;z-index:-1;
  width:auto;height:100%;max-width:46%;object-fit:cover;object-position:70% center;
}
.browse-cta-copy{
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.25rem);
  width:min(100%,66%);
  padding:clamp(1.4rem,2.6vw,2rem) clamp(1.5rem,3.5vw,3rem);
}
.browse-cta-title{
  margin:0;flex:0 0 auto;max-width:16ch;
  font-size:clamp(1.2rem,2.1vw,1.7rem);font-weight:600;line-height:1.16;letter-spacing:-.02em;
}
.browse-cta-title span{display:block;color:#CB9EBB}
.browse-cta-aside{min-width:0}
.browse-cta-sub{
  margin:0 0 1rem;max-width:36ch;font-size:clamp(.88rem,1vw,.96rem);line-height:1.55;
  color:rgba(255,255,255,.78);
}
/* the site's solid button, flipped to white for the dark card */
.browse-cta-btn.btn-solid{background:#F3F0F2;color:#26202A;box-shadow:none;padding:.75rem 1.35rem}
.browse-cta-btn.btn-solid:hover{background:#6E4F63;color:#F3F0F2}
.browse-cta-btn svg{transition:transform .2s var(--ease)}
.browse-cta-btn:hover svg{transform:translateX(3px)}
.browse-cta-btn:focus-visible{outline:2px solid #F3F0F2;outline-offset:3px}

/* the words stack once the row gets tight */
@media (max-width:1000px){
  .browse-cta-copy{flex-direction:column;align-items:flex-start;gap:1rem;width:min(100%,70%)}
  .browse-cta-title{max-width:none}
}

/* narrow: the face sits on top, words underneath */
@media (max-width:760px){
  .browse-cta{flex-direction:column;align-items:stretch;min-height:0}
  .browse-cta-img{
    position:relative;z-index:0;width:100%;max-width:none;height:230px;object-position:75% 30%;
  }
  .browse-cta-copy{width:100%;padding-top:.25rem}
  .browse-cta-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .browse-cta-btn,.browse-cta-btn svg{transition:none}
}

/* ---------------------------------------------------------------
   Treatment filters
   --------------------------------------------------------------- */
.treat-controls{margin-bottom:1rem;max-width:420px}
.search{position:relative;display:block}
.search-ico{
  position:absolute;left:.9rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--mute);pointer-events:none;
}
.search input{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:.7rem 2.5rem .7rem 2.65rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.search input::-webkit-search-cancel-button{display:none}
.search input:hover{border-color:var(--mute)}
.search input:focus{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-tint);
}
.search-clear{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:0;border-radius:50%;background:var(--shell);
  color:var(--ink-2);font-size:1.05rem;line-height:1;cursor:pointer;
}
.search-clear:hover{background:var(--ink);color:var(--porcelain)}

.filters{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.chip{
  border:1px solid var(--line);background:transparent;border-radius:100px;
  padding:.45rem 1rem;font-size:.88rem;cursor:pointer;color:var(--ink-2);
  transition:all .22s var(--ease);
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--porcelain)}

/* ---------------------------------------------------------------
   Treatment menu
   --------------------------------------------------------------- */
.menu{display:grid;gap:clamp(2.25rem,4vw,3.25rem)}
.menu-group[hidden]{display:none}
.menu-group-head{
  display:flex;align-items:center;gap:1rem;
  padding-bottom:.9rem;margin-bottom:.25rem;
  border-bottom:1px solid var(--ink);
}
.menu-group-text{min-width:0}

/* Category image. Falls back to a tinted initial until one is uploaded. */
.cat-thumb{
  flex:0 0 auto;width:64px;height:64px;border-radius:8px;
  object-fit:cover;display:block;
}
.cat-thumb-empty{
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--blush),var(--plum-tint));
  color:var(--plum);font-size:1.6rem;font-weight:500;line-height:1;
}
.menu-group-head h3{
  font-family:var(--display);font-weight:600;font-size:1.2rem;
  margin:0;letter-spacing:-.012em;
}
.menu-group-head p{margin:0;color:var(--mute);font-size:.9rem}

.menu-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,3vw,3rem);
}
/* every row carries its own rule, since a grid has no "previous sibling" */
.menu-list li{border-bottom:1px solid var(--line-soft)}
.row-meta{padding-left:.75rem}

.row{
  display:flex;align-items:baseline;gap:.9rem;width:100%;height:100%;
  background:transparent;border:0;text-align:left;cursor:pointer;
  padding:1.1rem .75rem;margin-inline:-.75rem;
  width:calc(100% + 1.5rem);
  border-radius:var(--r);
  transition:background .2s var(--ease);
}
.row:hover{background:var(--white);box-shadow:0 8px 24px rgba(38,32,42,.06)}
.row-name{transition:color .2s var(--ease)}
.row:hover .row-name{color:var(--plum)}
.row-price{transition:transform .25s var(--ease)}
.row:hover .row-price{transform:scale(1.04)}
.row-main{flex:1 1 auto;min-width:0;display:block}
.row-name{
  display:block;font-size:1.06rem;font-weight:500;
}
.row-sum{
  display:block;color:var(--mute);font-size:.9rem;margin-top:.15rem;
  max-width:52ch;
}
/* The leader dots only read well across one wide column; in two
   columns they shrink to stubs, so the gap does the work instead. */
.row-dots{display:none}
.row-meta{flex:0 0 auto;text-align:right;display:block}
.row-price{
  display:inline-block;font-family:var(--display);font-size:1.05rem;font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:lining-nums;line-height:1;
  padding:.42rem .85rem;border-radius:30px;
  background:var(--plum-tint);color:var(--ink);
}
.row-price.is-free{background:var(--free-bg);color:var(--free-ink)}
.row-facts{
  display:flex;align-items:center;justify-content:flex-end;
  gap:.85rem;font-size:.92rem;color:var(--ink-2);margin-top:.5rem;
}
.row-fact{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.row-fact .ico{width:1.1em;height:1.1em;color:var(--mute)}
.row-note{color:var(--plum)}
.menu-empty{
  padding:2.5rem 0;color:var(--mute);border-top:1px solid var(--line-soft);
}
.menu-list li.is-hidden{display:none}

.menu-foot{
  margin:clamp(2rem,4vw,3rem) 0 0;padding-top:1.5rem;
  border-top:1px solid var(--line);
  color:var(--mute);font-size:.9rem;max-width:none;
}

/* ---------------------------------------------------------------
   Claire
   --------------------------------------------------------------- */
.claire-grid{
  display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch;   /* portrait matches the height of the text beside it */
}
.claire-portrait{
  margin:0;position:relative;height:100%;min-height:420px;border-radius:2px;
  overflow:hidden;
  background:linear-gradient(200deg,var(--plum),var(--plum-deep));
}
.claire-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.claire-eyebrow{margin:0 0 .5rem;font-size:.82rem;color:var(--blush);letter-spacing:.05em}
.claire-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.14;
  letter-spacing:-.028em;margin:0;
}
.claire-role{
  /* pulled up so it sits under the name as one block, not a separate line */
  margin:-.15rem 0 1.4rem;font-size:.95rem;line-height:1.3;color:var(--blush);
}
.claire-copy p{color:rgba(243,240,242,.76);max-width:56ch}
.claire-facts{
  list-style:none;margin:2rem 0;padding:0;display:grid;gap:.1rem;
  border-top:1px solid rgba(243,240,242,.16);
}
.claire-facts li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid rgba(243,240,242,.16);
  font-size:.95rem;
}
.claire-facts span{color:rgba(243,240,242,.55)}

/* ---------------------------------------------------------------
   Stars
   --------------------------------------------------------------- */
.stars{
  position:relative;display:inline-block;
  font-size:1rem;line-height:1;letter-spacing:.12em;
  color:var(--line);white-space:nowrap;
}
.stars-lg{font-size:1.35rem}
.stars i{font-style:normal}
.stars .stars-fill{
  position:absolute;left:0;top:0;overflow:hidden;
  color:var(--plum);white-space:nowrap;
}

/* ---------------------------------------------------------------
   Reviews
   --------------------------------------------------------------- */
.reviews-grid{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  align-items:start;
}
.rating-card{
  position:sticky;top:92px;
  background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:1.75rem;text-align:center;
}
.rating-big{
  font-family:var(--display);font-size:3.6rem;line-height:1;font-weight:500;
  letter-spacing:-.035em;margin:0 0 .6rem;font-variant-numeric:lining-nums;
}
.rating-count{margin:.75rem 0 1.25rem;font-size:.88rem;color:var(--mute)}

.reviews-wrap{min-width:0}
.reviews-list{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}
.reviews-more{margin:1.25rem 0 0}
.btn-gap{margin-top:.5rem}

.link-btn{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:.9rem;color:var(--plum);
  border-bottom:1px solid var(--line);
}
.link-btn:hover{border-color:var(--plum)}
.review{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:1.35rem;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.review:hover{
  transform:translateY(-3px);border-color:var(--plum);
  box-shadow:0 10px 28px rgba(38,32,42,.08);
}
.review.is-new{animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.review-head{
  display:flex;align-items:center;gap:.7rem;
  padding-bottom:.85rem;margin-bottom:.85rem;
  border-bottom:1px solid var(--line-soft);
}
.avatar{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--blush),var(--plum-tint));
  color:var(--plum-deep);
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
}
[data-theme="dark"] .avatar{
  background:linear-gradient(145deg,#4A3343,#2E2536);color:var(--blush);
}
.review-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.review-who strong{font-size:.93rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-when{font-size:.78rem;color:var(--mute)}
.review-head .stars{flex:0 0 auto;font-size:.82rem}

.review-body{margin:0;font-size:.95rem;color:var(--ink-2)}
.review-more{
  display:inline;margin-left:.3rem;padding:0;border:0;background:none;
  font:inherit;font-weight:600;font-size:.9rem;color:var(--plum);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.review-more:hover{color:var(--ink)}
.review-tag{
  margin:.85rem 0 0;font-size:.76rem;color:var(--plum);
  display:inline-block;padding:.18rem .6rem;border-radius:100px;background:var(--plum-tint);
}

/* ---------------------------------------------------------------
   Panels & forms
   --------------------------------------------------------------- */
.panel{
  background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:clamp(1.35rem,3vw,2rem);
}
.section-tint .panel{background:var(--porcelain)}
.panel + .panel{margin-top:1rem}
.panel-title{
  font-family:var(--display);font-weight:600;font-size:1.15rem;
  margin:0 0 .35rem;letter-spacing:-.012em;
}
.panel-sub{margin:0 0 1.5rem;color:var(--mute);font-size:.9rem}
#reviewForm{margin-top:clamp(2rem,4vw,3rem)}

.field-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.field{display:block;margin-bottom:1rem;border:0;padding:0;min-width:0}
.field > span,.field legend{
  display:block;font-size:.85rem;color:var(--ink-2);margin-bottom:.4rem;
}
.field small{color:var(--mute);font-size:.8em}

input[type=text],input[type=email],input[type=tel],input[type=date],
select,textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--ink);
  background:var(--porcelain);
  border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .85rem;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.section-tint input,.section-tint select,.section-tint textarea{background:var(--white)}
input:hover,select:hover,textarea:hover{border-color:var(--mute)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--plum);background:var(--white);
  box-shadow:0 0 0 3px var(--plum-tint);
}
textarea{resize:vertical;min-height:5rem}
select{appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23877C86' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center;
  padding-right:2.25rem;
}
.is-bad input,.is-bad select,.is-bad textarea{border-color:#B3524F}

.err{display:block;font-style:normal;font-size:.82rem;color:#B3524F;margin-top:.35rem;min-height:0}
.err:empty{display:none}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.form-foot-split{justify-content:space-between}
.form-msg{margin:.5rem 0 0;font-size:.9rem}
.form-msg.ok{color:var(--plum)}
.form-msg.bad{color:#B3524F}

/* star picker */
.rate-field{margin-bottom:1.25rem}
.rate{display:flex;align-items:center;gap:.3rem}
.rate-star{
  background:none;border:0;padding:.1rem;cursor:pointer;line-height:1;
  font-size:1.6rem;color:var(--line);
  transition:color .15s var(--ease),transform .15s var(--ease);
}
.rate-star::before{content:"\2605"}
.rate-star.is-on{color:var(--plum)}
.rate-star:hover{transform:scale(1.12)}
.rate-label{margin-left:.6rem;font-size:.85rem;color:var(--mute)}

/* ---------------------------------------------------------------
   Visit + map + hours
   --------------------------------------------------------------- */
.visit-grid{
  display:grid;gap:clamp(1.25rem,3vw,2rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:start;
}
.visit-aside address{font-style:normal;color:var(--ink-2);line-height:1.75}
.visit-links{display:flex;flex-direction:column;gap:.55rem;margin:1.1rem 0 0}
.visit-links a{
  display:inline-flex;align-items:center;gap:.55rem;width:fit-content;
  color:var(--plum);text-decoration:none;
}
.visit-links a span{border-bottom:1px solid var(--line);padding-bottom:1px}
.visit-links a:hover span{border-color:var(--plum)}

.hours{list-style:none;margin:0;padding:0;font-size:.92rem}
.hours li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid var(--line-soft);
}
.hours li:last-child{border-bottom:0}
.hours li.is-today{color:var(--plum);font-weight:500}

.map{
  position:relative;margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line);
  height:clamp(300px,42vw,460px);
  background:linear-gradient(150deg,var(--shell),var(--plum-tint));
  overflow:hidden;
}
.map iframe{
  display:block;width:100%;height:100%;border:0;
  filter:grayscale(.35) contrast(1.03);
  opacity:0;transition:opacity .5s var(--ease);
}
.map.is-ready iframe{opacity:1}

/* Holds the space and says what is happening, rather than a blank gap */
.map-loading{
  position:absolute;inset:0;display:grid;place-content:center;
  justify-items:center;gap:.9rem;
  opacity:1;transition:opacity .4s var(--ease);
  pointer-events:none;
}
.map.is-ready .map-loading{opacity:0}
.map-loading p{margin:0;font-size:.9rem;color:var(--mute);letter-spacing:.01em}
.map-spinner{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--plum);
  animation:map-spin .8s linear infinite;
}
@keyframes map-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .map-spinner{animation:map-pulse 1.4s ease-in-out infinite;border-top-color:var(--line)}
  @keyframes map-pulse{0%,100%{opacity:.35}50%{opacity:1}}
}

/* ---------------------------------------------------------------
   FAQs
   --------------------------------------------------------------- */
.faq-grid{
  display:grid;gap:clamp(1.75rem,4vw,4rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:start;
}
.faq-head{position:sticky;top:100px}
.faq-list{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;
  position:relative;font-size:1.03rem;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.55rem;
  width:11px;height:11px;
  border-right:1.5px solid var(--plum);border-bottom:1.5px solid var(--plum);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .25s var(--ease);
}
.faq[open] summary::after{transform:rotate(225deg)}
.faq summary:hover{color:var(--plum)}
.faq-body{padding:0 3rem 1.35rem 0}
.faq-body p{margin:0;color:var(--ink-2);max-width:64ch}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.foot{background:var(--ink);color:var(--porcelain);padding-top:clamp(2.5rem,5vw,4rem)}
.foot-grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:2.5rem;
}
.foot-addr{margin:1rem 0 0;color:rgba(243,240,242,.55);font-size:.9rem}
.foot-links,.foot-contact{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}
.foot-links a,.foot-contact a{
  color:rgba(243,240,242,.75);text-decoration:none;width:fit-content;
}
.foot-contact a{display:inline-flex;align-items:center;gap:.6rem}
.foot-contact .ico{color:var(--blush)}
.foot-links a:hover,.foot-contact a:hover{color:var(--porcelain)}
.foot-base{
  border-top:1px solid rgba(243,240,242,.14);padding-block:1.25rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 2rem;
}
.foot-base p{margin:0;font-size:.82rem;color:rgba(243,240,242,.45)}
.foot-base a{color: rgb(243, 175, 196);
  text-decoration: none;
  transition: color .2s var(--ease);
  font-weight: 500;}
.foot-base a:hover{color:#F3F0F2}
[data-theme="dark"] .foot-base a{color:var(--ink-2)}
[data-theme="dark"] .foot-base a:hover{color:var(--ink)}

/* ---------------------------------------------------------------
   Booking drawer
   --------------------------------------------------------------- */
.drawer-wrap{position:fixed;inset:0;z-index:100}
.drawer-wrap[hidden]{display:none}
.drawer-scrim{
  position:absolute;inset:0;background:rgba(38,32,42,.45);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease);
}
.drawer{
  position:absolute;top:0;right:0;height:100%;
  width:min(520px,100%);
  background:var(--porcelain);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s var(--ease);
  box-shadow:-20px 0 60px rgba(38,32,42,.18);
}
.drawer-wrap.is-open .drawer-scrim{opacity:1}
.drawer-wrap.is-open .drawer{transform:none}

.drawer-head{
  position:relative;padding:1.5rem clamp(1.25rem,4vw,2rem) 1.25rem;
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
.drawer-eyebrow{margin:0 0 .3rem;font-size:.8rem;color:var(--mute);letter-spacing:.05em}
.drawer-title{
  font-family:var(--display);font-weight:600;font-size:1.35rem;
  line-height:1.25;letter-spacing:-.02em;margin:0;padding-right:2.5rem;
}
.drawer-x{
  position:absolute;top:1.25rem;right:clamp(1rem,4vw,1.5rem);
  width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
  background:transparent;font-size:1.35rem;line-height:1;cursor:pointer;
  color:var(--ink-2);transition:all .2s var(--ease);
}
.drawer-x:hover{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}

.drawer-body{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.25rem,4vw,2rem);
  /* still scrolls, just without a visible bar */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.drawer-body::-webkit-scrollbar{width:0;height:0;display:none}
.step[hidden]{display:none}

.detail{margin-top:.25rem}
.detail-figure{
  margin:0 0 1.35rem;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/10;
}
/* Same box as before; the whole photo is fitted inside it (no cropping). */
.detail-figure img{max-width:100%;width:fit-content; height:100%;object-fit:contain;display:block;border-radius:10px}
.detail-price{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1.1rem 1.25rem;background:var(--plum-tint);
  border-radius:14px;margin-bottom:1.5rem;
}
.detail-price.is-free{background:var(--free-bg)}
.detail-price.is-free .detail-price-num{color:var(--free-ink)}
.detail-price.is-free .detail-duration,
.detail-price.is-free .detail-price-note{color:var(--free-ink)}
.detail-price-num{
  margin:0;font-family:var(--display);font-size:1.8rem;line-height:1;font-weight:500;
  letter-spacing:-.03em;font-variant-numeric:lining-nums;
}
.detail-price-note{margin:.35rem 0 0;font-size:.82rem;color:var(--plum)}
.detail-price-note:empty{display:none}
.detail-duration{
  margin:0;font-size:.88rem;color:var(--plum);
  display:flex;align-items:center;gap:.35rem;white-space:nowrap;
}
.detail-prose p{margin:0 0 .85rem;color:var(--ink-2);font-size:.98rem}
.detail-prose p:last-child{margin-bottom:0}
#dDesc{margin-bottom:1.1rem}
#dDesc:empty{margin-bottom:0}
.detail-prose h4{
  font-family:var(--display);font-weight:600;font-size:1rem;
  margin:1.5rem 0 .4rem;
}

.detail-reviews{
  margin:0 0 1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
}
.detail-reviews-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:.9rem;
}
.detail-reviews-head h4{margin:0;font-family:var(--display);font-weight:600;font-size:1rem}
.detail-reviews-acts{
  display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;margin-top:.9rem;
}
.detail-reviews-empty{
  margin:0 0 .25rem;font-size:.9rem;color:var(--mute);
}
.detail-reviews-score{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--mute)}
.mini-review{
  padding:.8rem 0;border-bottom:1px solid var(--line-soft);font-size:.92rem;
}
.mini-review:first-child{padding-top:0}
.mini-review p{margin:.4rem 0 .3rem;color:var(--ink-2)}
.mini-review .mini-by{color:var(--mute);font-size:.82rem}

.book-summary{
  padding:.95rem 1.15rem;background:var(--plum-tint);border-radius:var(--r);
  margin-bottom:1.5rem;font-size:.93rem;
}
.book-summary strong{display:block;font-size:1.02rem;margin-bottom:.2rem}
.book-summary span{color:var(--plum)}

/* Comments button in the treatment drawer */
.comments-btn{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;margin:0 0 1.5rem;padding:.85rem 1.1rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;text-align:left;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.comments-btn:hover{border-color:var(--plum);background:var(--plum-tint)}
.comments-btn-main{display:inline-flex;align-items:center;gap:.55rem;font-size:.95rem}
.comments-btn-main .ico{width:1.05em;height:1.05em;color:var(--plum)}
.comments-count{
  display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;
  padding:0 .4rem;border-radius:100px;
  background:var(--ink);color:var(--porcelain);
  font-size:.78rem;font-weight:500;line-height:1;
}
.comments-btn-score{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;color:var(--mute);
}

/* ---------------------------------------------------------------
   Calendar
   --------------------------------------------------------------- */
.cal{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);padding:.9rem .9rem .3rem;
}
.section-tint .cal{background:var(--porcelain)}

.cal-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.9rem;
}
.cal-month{
  margin:0;font-size:1rem;font-weight:500;letter-spacing:-.01em;
  text-align:center;flex:1 1 auto;
}
.cal-nav{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;
  transition:all .18s var(--ease);
}
.cal-nav svg{width:16px;height:16px}
.cal-nav:hover:not(:disabled){background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.cal-nav:disabled{opacity:.3;cursor:default}

.cal-dow,.cal-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;
}
.cal-dow{margin-bottom:.4rem}
.cal-dow span{
  text-align:center;font-size:.68rem;letter-spacing:.06em;
  color:var(--mute);text-transform:uppercase;
}

.cal-day{
  aspect-ratio:1;border:1px solid transparent;border-radius:var(--r);
  background:transparent;color:var(--ink);cursor:pointer;
  font-size:.9rem;line-height:1;display:grid;place-items:center;
  position:relative;transition:all .15s var(--ease);
}
.cal-day:hover:not(:disabled){background:var(--plum-tint);border-color:var(--plum)}
.cal-day:disabled{color:var(--line);cursor:default}
.cal-day.is-blank{visibility:hidden}

/* today gets a dot, the selected day gets the full treatment */
.cal-day.is-today::after{
  content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--plum);
}
.cal-day.is-on,
.cal-day.is-on:hover{
  background:var(--ink);border-color:var(--ink);color:var(--porcelain);font-weight:500;
}
.cal-day.is-on::after{background:var(--porcelain)}

.cal-picked{
  margin:.75rem 0 0;padding:.6rem 0 .55rem;font-size:.82rem;color:var(--mute);
  border-top:1px solid var(--line-soft);text-align:center;
}
.cal-picked.is-set{color:var(--plum)}

.slot.is-off{display:none}
.slots-empty{
  grid-column:1/-1;margin:0;font-size:.85rem;color:var(--mute);
  padding:.5rem 0;
}

.slots{
  display:grid;gap:.4rem;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
}
.slot input{position:absolute;opacity:0;width:0;height:0}
.slot span{
  display:block;text-align:center;font-size:.88rem;
  padding:.5rem .25rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);cursor:pointer;transition:all .18s var(--ease);
}
.slot span:hover{border-color:var(--ink)}
.slot input:checked + span{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.slot input:focus-visible + span{outline:2px solid var(--plum);outline-offset:2px}

.book-note{
  font-size:.85rem;color:var(--mute);margin:0 0 1.25rem;
  padding-top:1rem;border-top:1px solid var(--line);
}

.step-done{text-align:center;padding-top:2rem}
.step-done h3{
  font-family:var(--display);font-weight:600;font-size:1.5rem;
  letter-spacing:-.02em;margin:1.25rem 0 .6rem;
}
.step-done p{margin:0 0 .6rem;color:var(--ink-2)}
.done-sub{font-size:.9rem;color:var(--mute)!important;margin-bottom:1.75rem!important}
.done-mark{
  width:58px;height:58px;margin:0 auto;border-radius:50%;
  background:var(--plum);position:relative;
}
.done-mark::after{
  content:"";position:absolute;left:20px;top:16px;
  width:14px;height:26px;
  border-right:2.5px solid var(--porcelain);border-bottom:2.5px solid var(--porcelain);
  transform:rotate(42deg);
}

/* ---------------------------------------------------------------
   Reviews popup
   --------------------------------------------------------------- */
.modal-wrap{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem}
.modal-wrap[hidden]{display:none}
.modal-scrim{
  position:absolute;inset:0;background:rgba(38,32,42,.5);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .28s var(--ease);
}
.modal{
  position:relative;width:min(680px,100%);max-height:min(760px,92vh);
  background:var(--porcelain);border-radius:var(--r);
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(38,32,42,.28);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.modal-wrap.is-open .modal-scrim{opacity:1}
.modal-wrap.is-open .modal{opacity:1;transform:none}

.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.5rem clamp(1.25rem,4vw,1.9rem) 1.1rem;
  border-bottom:1px solid var(--line);
}
.modal-title{
  font-family:var(--display);font-weight:600;font-size:1.35rem;
  letter-spacing:-.02em;margin:0;
}
.modal-sub{margin:.25rem 0 0;font-size:.85rem;color:var(--mute)}
.modal-head .drawer-x{position:static;flex:0 0 auto}

.modal-filter{
  padding:1rem clamp(1.25rem,4vw,1.9rem);
  border-bottom:1px solid var(--line);background:var(--shell);
}
.modal-filter .field{margin:0}

.modal-body{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:.5rem clamp(1.25rem,4vw,1.9rem);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.modal-body::-webkit-scrollbar{width:0;height:0;display:none}
.modal-review{padding:1.25rem 0;border-bottom:1px solid var(--line-soft)}
.modal-review:last-child{border-bottom:0}
.modal-review p{margin:0;color:var(--ink-2);font-size:.97rem}
.modal-review .review-head{margin-bottom:.75rem;padding-bottom:.75rem}

.modal-foot{padding:1rem clamp(1.25rem,4vw,1.9rem) 1.4rem}
.modal-empty{padding:2.5rem 0;text-align:center;color:var(--mute)}
.modal-loading{padding:2rem 0;text-align:center;color:var(--mute);font-size:.9rem}

/* ---------------------------------------------------------------
   Portfolio slideshow
   --------------------------------------------------------------- */
.lightbox{position:fixed;inset:0;z-index:140;display:grid;place-items:center}
.lightbox[hidden]{display:none}
.lightbox-scrim{
  position:absolute;inset:0;background:rgba(14,11,16,.92);
  backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease);
}
.lightbox-inner{
  position:relative;display:grid;place-items:center;
  width:min(1180px,100%);height:100%;padding:clamp(3.5rem,7vh,5rem) clamp(1rem,5vw,4.5rem);
  opacity:0;transform:scale(.975);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.lightbox.is-open .lightbox-scrim{opacity:1}
.lightbox.is-open .lightbox-inner{opacity:1;transform:none}

.lightbox-figure{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;
  max-height:100%;min-height:0;
}
.lightbox-figure img{
  max-width:100%;max-height:70vh;width:auto;height:auto;
  object-fit:contain;border-radius:10px;
  background:rgba(243,240,242,.05);
  animation:lb-in .45s var(--ease);
}
@keyframes lb-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lightbox-figure figcaption{
  text-align:center;color:rgba(243,240,242,.82);display:flex;
  flex-direction:column;gap:.2rem;
}
.lightbox-figure figcaption strong{font-size:1.05rem;font-weight:500}
.lightbox-figure figcaption span{font-size:.9rem;color:rgba(243,240,242,.55)}

.lightbox-x,
.lightbox-nav,
.lightbox-play{
  position:absolute;border-radius:100px;cursor:pointer;
  background:rgba(243,240,242,.1);color:#F3F0F2;
  border:1px solid rgba(243,240,242,.22);
  display:grid;place-items:center;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.lightbox-x:hover,
.lightbox-nav:hover:not(:disabled),
.lightbox-play:hover{background:rgba(243,240,242,.92);color:#17131A;border-color:transparent}

.lightbox-x{top:1.1rem;right:1.1rem;width:44px;height:44px;font-size:1.5rem;line-height:1}
.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px}
.lightbox-nav svg{width:20px;height:20px}
.lightbox-nav:hover:not(:disabled){transform:translateY(-50%) scale(1.06)}
.lightbox-nav.is-prev{left:clamp(.5rem,2vw,1.5rem)}
.lightbox-nav.is-next{right:clamp(.5rem,2vw,1.5rem)}
.lightbox-nav:disabled{opacity:.25;cursor:default}

.lightbox-bar{
  position:absolute;left:0;right:0;bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;gap:1.25rem;
}
.lightbox-play{
  position:static;height:38px;padding:0 1rem;gap:.5rem;
  grid-auto-flow:column;font:inherit;font-size:.85rem;
}
.lightbox-play svg{width:13px;height:13px}
.lightbox-play .ico-pause{display:none}
.lightbox.is-playing .lightbox-play .ico-play{display:none}
.lightbox.is-playing .lightbox-play .ico-pause{display:block}
.lightbox-count{margin:0;font-size:.85rem;color:rgba(243,240,242,.6);font-variant-numeric:tabular-nums}

.lightbox-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(243,240,242,.12);opacity:0;transition:opacity .25s var(--ease);
}
.lightbox.is-playing .lightbox-progress{opacity:1}
.lightbox-progress span{
  display:block;height:100%;width:0;background:var(--blush);
}
.lightbox.is-playing .lightbox-progress span{animation:lb-bar var(--lb-dur,4.5s) linear}
@keyframes lb-bar{from{width:0}to{width:100%}}

.carousel-media{
  display:block;width:100%;padding:0;border:0;cursor:zoom-in;
  font:inherit;color:inherit;
}
.carousel-zoom{
  position:absolute;right:.7rem;bottom:.7rem;
  width:34px;height:34px;border-radius:50%;
  background:rgba(23,19,26,.55);color:#F3F0F2;
  display:grid;place-items:center;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  backdrop-filter:blur(4px);
}
.carousel-zoom svg{width:17px;height:17px}
.carousel-item:hover .carousel-zoom,
.carousel-media:focus-visible .carousel-zoom{opacity:1;transform:none}

@media (max-width:760px){
  .lightbox-nav{width:42px;height:42px}
  .lightbox-figure img{max-height:60vh}
  .carousel-zoom{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .lightbox-figure img{animation:none}
  .lightbox.is-playing .lightbox-progress span{animation:none;width:100%}
}

/* ---------------------------------------------------------------
   Toast
   --------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:1.5rem;z-index:200;
  transform:translate(-50%,calc(100% + 3rem));
  background:var(--ink);color:var(--porcelain);
  padding:.85rem 1.4rem;border-radius:100px;font-size:.92rem;
  box-shadow:0 12px 30px rgba(38,32,42,.25);
  transition:transform .38s var(--ease);
  max-width:calc(100vw - 2rem);text-align:center;
}
.toast.is-on{transform:translate(-50%,0)}

body.is-locked{overflow:hidden}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width:900px){
  .menu-list{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1000px){
  .hero-grid,.strip-grid,.claire-grid,.visit-grid,.faq-grid{grid-template-columns:1fr}
  .hero-title,.hero-lede{max-width:none}
  .hero-figure{margin-top:0}
  .hero-visual{width:100%;margin-inline:0}
  .claire-portrait{height:auto;min-height:0;aspect-ratio:4/3}
  .faq-head{position:static}
  .reviews-grid{grid-template-columns:1fr}
  .rating-card{position:static;display:grid;justify-items:center}
}

@media (max-width:760px){
  .nav-links{display:none}
  .logo-mark{height:20px}
  .logo-type{font-size:1rem}
  .nav-inner{gap:.5rem}
  .nav-inner .theme-toggle{margin-left:auto;width:34px;height:34px}
  .nav-inner .btn{margin-left:0}
  .nav-book-long{display:none}
  .nav-book-short{display:inline}
  .nav-inner{justify-content:space-between}
  .nav-inner .btn{margin-left:auto}
  .figures{grid-template-columns:1fr 1fr}
  .figures .figure:last-child{display:none}

  .cat-thumb{width:52px;height:52px}
  .row-facts{justify-content:flex-start;gap:.85rem}
  .modal{max-height:94vh}
  .row{flex-wrap:wrap;gap:.35rem}
  .row-main{flex:1 1 100%}
  .row-meta{
    flex:1 1 100%;text-align:left;display:flex;align-items:baseline;gap:.65rem;
    margin-top:.35rem;
  }
  .row-price{font-size:1.2rem}
  .row-time{margin-top:0}

  .drawer{width:100%}
  .form-foot-split{flex-direction:column-reverse;align-items:stretch}
  .form-foot-split .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  .btn-solid::after{display:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* ---------------------------------------------------------------
   Standalone pages (About, Terms, Privacy)
   --------------------------------------------------------------- */
.page{display:block}
.page-hero{
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--shell),var(--porcelain));
}
.page-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.12;
  letter-spacing:-.03em;margin:0 0 .6rem;
}
.page-lede{margin:0;color:var(--ink-2);max-width:56ch;font-size:1.02rem}

.prose{max-width:70ch}
.prose h2{
  font-family:var(--display);font-weight:600;font-size:1.3rem;
  letter-spacing:-.02em;margin:2.5rem 0 .6rem;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-weight:600;font-size:1.02rem;margin:1.9rem 0 .4rem;color:var(--ink);
}
.prose p{margin:0 0 1rem;color:var(--ink-2)}
.prose a{color:var(--plum)}

.notice{
  padding:1rem 1.15rem;border-radius:var(--r);margin-bottom:2rem;
  background:var(--plum-tint);border:1px solid var(--line);
  font-size:.92rem;color:var(--ink-2);
}
.notice strong{color:var(--ink)}

/* the About page reuses the dark band, but it needs its own spacing */
.page .claire-copy p:last-of-type{margin-bottom:0}


/* ---------------------------------------------------------------
   Finishing touches
   --------------------------------------------------------------- */

/* Reading progress, hairline thin so it reads as chrome not decoration */
.scroll-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--plum),var(--blush));
  transition:width .12s linear;
}

/* Cards lift very slightly — enough to feel responsive, not enough to bounce */
.review,.panel,.rating-card{
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.review:hover{
  transform:translateY(-3px);
  border-color:var(--mute);
  box-shadow:0 12px 28px rgba(38,32,42,.07);
}
[data-theme="dark"] .review:hover{box-shadow:0 12px 28px rgba(0,0,0,.35)}

.btn-solid{box-shadow:0 1px 2px rgba(38,32,42,.12)}
.btn-solid:hover{box-shadow:0 6px 18px rgba(110,79,99,.28)}

/* The treatment rows get a quiet left marker on hover */
.row{position:relative}
.row::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;
  background:var(--plum);border-radius:2px;
  transform:scaleY(0);transform-origin:center;
  transition:transform .25s var(--ease);
}
.row:hover::before{transform:scaleY(1)}

.menu-group-head{align-items:center}
.cat-thumb{transition:transform .35s var(--ease)}
.menu-group:hover .cat-thumb{transform:scale(1.04)}

/* Section titles sit closer to their eyebrow */
.section-head .eyebrow + .section-title{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .review:hover,.menu-group:hover .cat-thumb{transform:none}
  .scroll-progress{transition:none}
}

/* ---------------------------------------------------------------
   Before / after comparison
   Both images are full size and stacked; the top one is clipped to
   the split, so the two always stay in register while dragging.
   --------------------------------------------------------------- */
.compare{
  --split:50%;
  position:absolute;inset:0;overflow:hidden;
  cursor:ns-resize;user-select:none;touch-action:pan-x;
  border-radius:8px;
}
.compare img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;pointer-events:none;
}
/* Full-size layer clipped with clip-path, so the before image keeps its
   own framing instead of being squeezed into a shrinking box. The inset
   is on the bottom now, so the split runs across rather than down. */
.compare-before-wrap{
  position:absolute;inset:0;
  clip-path:inset(0 0 calc(100% - var(--split)) 0);
  will-change:clip-path;
}
.compare{contain:paint}

.compare-tag{
  position:absolute;z-index:3;
  padding:.28rem .7rem;border-radius:100px;
  background:rgba(23,19,26,.62);color:#fff;
  font-size:.74rem;letter-spacing:.04em;
  backdrop-filter:blur(6px);pointer-events:none;
}
.compare-tag.is-before{left:.85rem;top:.85rem}
.compare-tag.is-after{left:.85rem;top:auto;bottom:.85rem}

.compare-handle{
  position:absolute;left:0;right:0;top:var(--split);z-index:4;
  height:2px;margin-top:-1px;background:var(--white);
  box-shadow:0 0 0 1px rgba(23,19,26,.18);
}
/* centred on the line itself, not inside a 2px grid box */
.compare-grip{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.compare-grip{
  width:30px;height:30px;border-radius:50%;
  background:var(--white);color:var(--ink);
  display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(23,19,26,.26);
  transition:background-color .2s var(--ease);
}
.compare-grip svg{width:15px;height:15px;transform:rotate(90deg)}
/* size stays put on hover — only the fill shifts, and only slightly */
.compare:hover .compare-grip{background:var(--shell)}
.compare.is-dragging .compare-grip{background:var(--line)}
.compare-handle:focus-visible .compare-grip{outline:2px solid var(--plum);outline-offset:3px}

/* the range input is the accessible control, kept off screen */
.compare-range{
  position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .compare-grip{transition:none}
}


/* Social links, shown as a row of round buttons */
.socials{display:flex;gap:.5rem;margin-top:1rem}
.socials a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-2);text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
/* One hover that reads on any background: solid plum, white glyph */
.socials a:hover,
.socials a:focus-visible{
  background:var(--plum);border-color:var(--plum);color:#fff;
}
.socials .ico{width:18px;height:18px;vertical-align:0;display:block}
.foot .socials a{border-color:rgba(243,240,242,.28);color:rgba(243,240,242,.8)}
.foot .socials a:hover{background:var(--blush);border-color:var(--blush);color:#26202A}

[data-theme="dark"] .compare-handle{box-shadow:0 0 0 1px rgba(0,0,0,.45)}
[data-theme="dark"] .compare-grip{box-shadow:0 3px 10px rgba(0,0,0,.5)}

/* .foot-contact .ico pins footer icons to blush; the social buttons set
   their own colour on hover, so let them inherit it instead. */
.foot .socials a .ico{color:inherit}


/* ---------------------------------------------------------------
   Phone layout corrections
   --------------------------------------------------------------- */
@media (max-width:760px){
  /* Only the toggle takes the free space, so it and the button sit
     together on the right instead of splitting the gap between them. */
  .nav-inner .theme-toggle{margin-left:auto}
  .nav-inner .nav-book{margin-left:0}

  /* The photograph moves above the copy on a phone, so the lights have
     to move down with it — otherwise they glow behind the image and
     the headline sits on flat background. */
  /* On a phone there is no centred column to hug, so they go back to
     hugging the screen — bigger and softer, so they read as light
     rather than as shapes. */
  .hero{--edge:0px}
  .hero::before{
    width:clamp(340px,96vw,520px);
    top:auto;bottom:26%;left:-30%;
    filter:blur(clamp(60px,15vw,88px));
    opacity:.8;
  }
  .hero::after{
    width:clamp(300px,86vw,460px);
    bottom:0;right:-28%;
    filter:blur(clamp(60px,15vw,88px));
    opacity:.34;
  }
}

@media (max-width:480px){
  .hero::before{bottom:30%;left:-36%;width:clamp(320px,108vw,480px)}
  .hero::after{bottom:-4%;right:-34%;width:clamp(280px,96vw,420px)}
}


/* ---------------------------------------------------------------
   Custom dropdown
   --------------------------------------------------------------- */
.cselect{position:relative;display:block}
.cselect-native{
  position:absolute!important;width:1px;height:1px;
  opacity:0;pointer-events:none;clip:rect(0 0 0 0);
}
.cselect-btn{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;font:inherit;font-size:.97rem;text-align:left;cursor:pointer;
  color:var(--ink);background:var(--porcelain);
  border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .85rem;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.section-tint .cselect-btn{background:var(--white)}
[data-theme="dark"] .cselect-btn{background:#2A2330}
.cselect-btn:hover{border-color:var(--mute)}
.cselect.is-open .cselect-btn,
.cselect-btn:focus-visible{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-tint);
}
.cselect.is-placeholder .cselect-label{color:var(--mute)}
.cselect-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cselect-caret{flex:0 0 auto;display:grid;place-items:center;color:var(--mute)}
.cselect-caret svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.cselect.is-open .cselect-caret svg{transform:rotate(180deg)}

.cselect-panel{
  position:absolute;z-index:30;top:calc(100% + .35rem);left:0;right:0;
  max-height:min(280px,50vh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:.3rem;
  box-shadow:0 16px 36px rgba(38,32,42,.16);
}
[data-theme="dark"] .cselect-panel{box-shadow:0 16px 36px rgba(0,0,0,.5)}
.cselect-group{
  margin:.5rem 0 .2rem;padding:0 .6rem;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
}
.cselect-option{
  display:block;width:100%;text-align:left;font:inherit;font-size:.93rem;
  padding:.55rem .6rem .55rem 1.35rem;
  border:0;border-radius:3px;background:none;color:var(--ink);
  cursor:pointer;
}
.cselect-option:hover:not([disabled]),
.cselect-option:focus-visible{background:var(--plum-tint);outline:none}
.cselect-option.is-on{background:var(--ink);color:var(--porcelain)}
.cselect-option[disabled]{color:var(--mute);cursor:default}

/* on a phone the panel becomes a sheet rather than a cramped popover */
@media (max-width:600px){
  .cselect-panel{
    position:fixed;top:auto;bottom:0;left:0;right:0;
    max-height:62vh;border-radius:12px 12px 0 0;
    padding:.6rem .6rem 1.2rem;
    box-shadow:0 -12px 40px rgba(38,32,42,.28);
  }
  .cselect-option{padding:.8rem .7rem .8rem 1.4rem;font-size:1rem}
}

/* ---------------------------------------------------------------
   Treatment gallery
   --------------------------------------------------------------- */
.gallery{margin:0 0 1.35rem}
.gallery .detail-figure{margin:0;place-content: center;   align-items: center;   display: flex;}
.gallery-thumbs{
  display:flex;gap:.5rem;margin-top:.5rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;padding-bottom:.15rem;
}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumb{
  flex:0 0 auto;width:62px;height:62px;padding:0;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--shell);cursor:pointer;
  opacity:.62;
  transition:opacity .2s var(--ease),border-color .2s var(--ease);
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb:hover{opacity:.85}
.gallery-thumb.is-on{opacity:1;border-color:var(--plum);box-shadow:0 0 0 1px var(--plum)}
.gallery-thumb:focus-visible{outline:2px solid var(--plum);outline-offset:2px}

@media (max-width:600px){
  .gallery-thumb{width:54px;height:54px}
}


/* ---------------------------------------------------------------
   Book button on a portfolio image
   Nested inside .carousel-media so it rises in on hover of the image.
   Its click is stopped from bubbling to the slideshow opener.
   --------------------------------------------------------------- */
.carousel-media{cursor:pointer}
.carousel-book{
  position:absolute;bottom:15px;left:15px;z-index:3;
  background:#1c1c1c;border:none;padding:.5rem;border-radius:10px;color:#e9e7e9;
  font:inherit;font-size:.85rem;line-height:1;cursor:pointer;
  opacity:0;pointer-events:none;
  transform:translateY(calc(100% + 15px));
  transition:opacity .28s var(--ease),transform .28s var(--ease),background .2s var(--ease);
}
.carousel-media:hover .carousel-book,
.carousel-media:focus-within .carousel-book{
  opacity:1;pointer-events:auto;transform:translateY(0);
}
.carousel-book:hover{background:#000}
.carousel-book:focus-visible{
  opacity:1;pointer-events:auto;transform:translateY(0);
  outline:2px solid var(--plum);outline-offset:2px;
}
.carousel-media:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

@media (hover:none){
  .carousel-book{opacity:1;pointer-events:auto;transform:translateY(0)}
}


/* ---------------------------------------------------------------
   Hero slider — a fanned deck
   The live slide sits on top; the next two peek out behind it,
   tilted left and right. With fewer than three slides, plain ghost
   cards fill the empty spots so the deck always reads the same.
   Horizontal drag or a tap on a back card moves the deck on.
   --------------------------------------------------------------- */
.hero-slider{
  position:absolute;inset:0;overflow:visible;
  --fan-x:11%;--fan-r:3deg;--fan-s:.91;
}
.hero-track{position:absolute;inset:0;z-index:1}
.hero-slide,
.hero-ghost{
  position:absolute;inset:0;border-radius:8px;overflow:hidden;
  transition:transform .8s var(--ease),opacity .6s var(--ease),filter .6s var(--ease),box-shadow .6s var(--ease);
}
.hero-slide{
  opacity:0;visibility:hidden;z-index:0;
  transform:scale(.84);
  background:var(--shell);
  transition:transform .8s var(--ease),opacity .6s var(--ease),filter .6s var(--ease),
             box-shadow .6s var(--ease),visibility .6s;
}
.hero-slide.is-on{
  opacity:1;visibility:visible;z-index:3;transform:none;
}
.hero-slide.is-next,
.hero-slide.is-after{
  opacity:1;visibility:visible;cursor:pointer;
  filter:saturate(55.00000000000001%) brightness(94%) opacity(0.35);
}
.hero-slide.is-next{
  z-index:2;
  transform:translateX(var(--fan-x)) rotate(var(--fan-r)) scale(var(--fan-s));
}
.hero-slide.is-after{
  z-index:1;
  transform:translateX(calc(var(--fan-x) * -1)) rotate(calc(var(--fan-r) * -1)) scale(var(--fan-s));
}
.hero-slide.is-next:hover,
.hero-slide.is-after:hover{filter:saturate(.8) brightness(1)}
/* back cards are for tapping, not for dragging their compare */
.hero-slide:not(.is-on) .compare,
.hero-slide:not(.is-on) .hero-slide-caption{pointer-events:none}
.hero-slide:not(.is-on) .compare-tag,
.hero-slide:not(.is-on) .compare-handle,
.hero-slide:not(.is-on) .hero-slide-caption{opacity:0}

.hero-ghost{
  z-index:0;pointer-events:none;
  background:transparent;
}
.hero-ghost.is-r{transform:translateX(var(--fan-x)) rotate(var(--fan-r)) scale(var(--fan-s))}
.hero-ghost.is-l{transform:translateX(calc(var(--fan-x) * -1)) rotate(calc(var(--fan-r) * -1)) scale(var(--fan-s))}
[data-theme="dark"] .hero-ghost{background:transparent}

.hero-slide-img{width:100%;height:100%;object-fit:cover;display:block}

/* a drag in progress should not animate */
.hero-slider.is-dragging .hero-slide{transition:none}
.hero-slider.is-dragging{cursor:grabbing}

.hero-slide-caption{
  position:absolute;left:.85rem;bottom:.85rem;z-index:4;
  padding:.3rem .7rem;border-radius:100px;
  background:rgba(23,19,26,.62);color:#fff;font-size:.76rem;
  backdrop-filter:blur(6px);
  transition:opacity .3s var(--ease);
}
/* a compare slide has tags top-left and bottom-left, so the caption
   takes the top-right corner */
.hero-slide .compare ~ .hero-slide-caption{
  left:auto;right:.85rem;bottom:auto;top:.85rem;
}

/* the compare inside a slide fills it */
.hero-slide .compare{position:absolute;inset:0}
.compare-tag,.compare-handle{transition:opacity .3s var(--ease)}

/* narrower screens: a tighter fan so it stays inside the gutter */
@media (max-width:1000px){
  .hero-slider{--fan-x:5%;--fan-r:2deg;--fan-s:.93}
}
@media (max-width:560px){
  .hero-slider{--fan-x:3.5%;--fan-r:1.6deg;--fan-s:.94}
}

@media (prefers-reduced-motion:reduce){
  .hero-slide,.hero-ghost{transition:opacity .01ms}
}


/* ---------------------------------------------------------------
   Treatments page
   A price-menu layout: an index of areas up top, a sticky search
   and filter bar, then each area as a numbered chapter.
   --------------------------------------------------------------- */
.tx-hero{border-bottom:0}
.tx-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:end;
}
.tx-hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}

.tx-index{
  background:var(--white);border:1px solid var(--line-soft);border-radius:14px;
  padding:1.1rem 1.25rem .6rem;
  box-shadow:0 14px 34px rgba(38,32,42,.06);
}
.tx-index-title{
  margin:0 0 .35rem;font-family:'Sacramento',cursive;font-size:1.7rem;line-height:1.1;
  color:var(--plum);
}
.tx-index-list{list-style:none;margin:0;padding:0}
.tx-index-list li + li{border-top:1px solid var(--line-soft)}
.tx-index-list a{
  display:flex;align-items:baseline;gap:.85rem;
  padding:.62rem 0;text-decoration:none;color:var(--ink);
  transition:color .2s var(--ease),padding .25s var(--ease);
}
.tx-index-num{
  font-size:.74rem;color:var(--mute);font-variant-numeric:tabular-nums;min-width:1.4rem;
}
.tx-index-name{flex:1;min-width:0;font-size:.95rem}
.tx-index-count{
  font-size:.74rem;color:var(--mute);font-variant-numeric:tabular-nums;
  background:var(--porcelain);border-radius:100px;padding:.1rem .5rem;
}
.tx-index-list a:hover{color:var(--plum);padding-left:.3rem}
.tx-index-list a:hover .tx-index-count{background:var(--plum-tint);color:var(--plum)}
.tx-index-list a:focus-visible{outline:2px solid var(--plum);outline-offset:2px;border-radius:4px}

/* search + filters live in a sticky left sidebar */
.tx-layout{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(1.5rem,2.5vw,2.5rem);align-items:start;
}
.tx-main{min-width:0}
.tx-side{
  position:sticky;top:calc(74px + 1.25rem);
  max-height:calc(100vh - 74px - 2.5rem);overflow-y:auto;scrollbar-width:thin;
  background:var(--white);border:1px solid var(--line-soft);border-radius:14px;
  padding:1.1rem;
}
.tx-side-title{
  margin:0 0 .6rem;font-family:'Sacramento',cursive;font-size:1.7rem;line-height:1.1;
  color:var(--plum);
}
.page-treatments .treat-controls{margin:0 0 .9rem;max-width:none}
.page-treatments .search input{padding-block:.6rem;font-size:.9rem}
.page-treatments .filters{
  display:flex;flex-direction:column;gap:.3rem;margin:0;
}
.page-treatments .chip{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;text-align:left;border-color:transparent;background:transparent;
  border-radius:10px;padding:.55rem .75rem;
}
.page-treatments .chip:hover{background:var(--porcelain);border-color:transparent}
.page-treatments .chip.is-on{background:var(--ink);border-color:var(--ink)}
.chip-count{
  flex:0 0 auto;
  font-size:.72rem;font-variant-numeric:tabular-nums;
  min-width:1.35rem;padding:.05rem .4rem;border-radius:100px;
  background:var(--porcelain);color:var(--mute);text-align:center;
}
.chip.is-on .chip-count{background:rgba(255,255,255,.16);color:inherit}
[data-theme="dark"] .chip.is-on .chip-count{background:rgba(0,0,0,.14)}

/* the menu itself */
.tx-body{padding-top:clamp(2rem,4vw,3rem)}
.page-treatments .menu{gap:clamp(3rem,6vw,4.5rem)}
.page-treatments .menu-group{scroll-margin-top:100px}
.page-treatments .menu-group-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:1.1rem;padding-bottom:1.1rem;margin-bottom:0;
  border-bottom:1px solid var(--line);
}
.page-treatments .cat-thumb{width:76px;height:76px;border-radius:12px}
.tx-group-num{
  display:block;font-family:'Sacramento',cursive;font-size:1.5rem;line-height:1;
  color:var(--plum);margin-bottom:.1rem;
}
.page-treatments .menu-group-head h2{
  font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.65rem);
  letter-spacing:-.02em;line-height:1.2;margin:0 0 .2rem;
}
.page-treatments .menu-group-head p{margin:0;color:var(--mute);font-size:.92rem;max-width:60ch}
.tx-group-count{
  align-self:end;font-size:.8rem;color:var(--mute);white-space:nowrap;
  border:1px solid var(--line);border-radius:100px;padding:.25rem .7rem;
}
.page-treatments .treat-grid{
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1.1rem;margin-top:1.5rem;
}

.page-treatments .menu-empty:not([hidden]){
  display:block;text-align:center;border:1px dashed var(--line);border-radius:14px;
  padding:clamp(2rem,5vw,3rem) 1.5rem;margin-top:1rem;
}
.page-treatments .menu-empty p{margin:0}
.tx-empty-title{
  font-family:'Sacramento',cursive;font-size:2rem;color:var(--plum);line-height:1.2;
  margin-bottom:.4rem !important;
}

.tx-consult{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:clamp(3rem,6vw,4.5rem);
  padding:clamp(1.5rem,4vw,2.4rem);border-radius:18px;
  background:linear-gradient(135deg,var(--plum-tint),var(--shell));
  border:1px solid var(--line-soft);
}
.tx-consult-copy{max-width:62ch}
.tx-consult-script{
  margin:0 0 .3rem;font-family:'Sacramento',cursive;font-size:2.1rem;line-height:1.1;color:var(--plum);
}
.page-treatments .menu-foot{margin:0;padding:0;border:0;color:var(--ink-2);font-size:.92rem}
.tx-consult .btn{flex:0 0 auto}

@media (max-width:1000px){
  .tx-hero-grid{grid-template-columns:1fr;align-items:start}
  .tx-index-list{columns:2;column-gap:1.5rem}
  .tx-index-list li{break-inside:avoid}
  .tx-index-list li + li{border-top:0}
  .tx-index-list li{border-bottom:1px solid var(--line-soft)}
  .tx-index-list li:last-child{border-bottom:0}
}
/* small screens: the sidebar folds into a sticky bar above the menu */
@media (max-width:900px){
  .tx-layout{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .tx-side{min-width:0}
  .tx-side{
    top:74px;z-index:50;max-height:none;overflow:visible;
    margin-inline:calc(var(--gut) * -1);border-radius:0;border-width:1px 0;
    padding:.65rem var(--gut);
    background:rgba(243,240,242,.9);
    backdrop-filter:saturate(1.4) blur(14px);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
  }
  [data-theme="dark"] .tx-side{background:rgba(23,19,26,.9)}
  .tx-side-title{display:none}
  .page-treatments .treat-controls{margin-bottom:.55rem}
  .page-treatments .filters{
    flex-direction:row;flex-wrap:nowrap;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
            mask-image:linear-gradient(90deg,#000 90%,transparent);
  }
  .page-treatments .filters::-webkit-scrollbar{display:none}
  .page-treatments .chip{
    flex:0 0 auto;width:auto;white-space:nowrap;justify-content:flex-start;
    border-radius:100px;border-color:var(--line);background:var(--white);padding:.45rem .9rem;
  }
  .page-treatments .menu-group{scroll-margin-top:190px}
}
@media (max-width:760px){
  .page-treatments .menu-group-head{grid-template-columns:auto minmax(0,1fr)}
  .page-treatments .cat-thumb{width:58px;height:58px}
  .tx-group-count{grid-column:1 / -1;justify-self:start}
  .page-treatments .treat-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
  .tx-consult .btn{width:100%}
}
@media (max-width:560px){
  .tx-index-list{columns:1}
  .tx-hero-actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .tx-index-list a{transition:none}
}


/* ---------------------------------------------------------------
   Before & after strip
   A dark band. In landscape the drum alone fills nearly the whole
   screen under the sticky nav, with the front card's details and a
   few notes below it. The cards sit on the outside of a slowly turning
   cylinder: the front one is full size and the rest turn away and
   shrink towards the edges. app.js places every card from one
   rotation value, so the loop has no end and no seam. Each card
   splits left/right — only the handle moves the divider, so a
   sideways drag anywhere else turns the cylinder and a vertical
   swipe still scrolls the page.
   --------------------------------------------------------------- */
@property --ba-split{syntax:"<percentage>";inherits:true;initial-value:50%}

.ba{
  --ba-bg:#26202A;
  --ba-text:#F3F0F2;
  --ba-mute:rgba(243,240,242,.62);
  --ba-line:rgba(243,240,242,.24);
  background:var(--ba-bg);color:var(--ba-text);
  display:flex;flex-direction:column;
  padding-block:clamp(2.5rem,6vh,4.5rem);
  gap:clamp(1.25rem,3vh,2.25rem);
  overflow:hidden;
}
[data-theme="dark"] .ba{--ba-bg:#201A25}

.ba-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem 2.5rem;flex-wrap:wrap;flex:0 0 auto;
}
.ba .ba-title{margin:0}
.ba .section-title{color:var(--ba-text);text-wrap:balance}
.ba-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

.ba .btn-solid{background:var(--ba-text);color:#26202A}
.ba .btn-solid:hover{background:var(--blush)}
.ba .carousel-nav{background:transparent;border-color:var(--ba-line);color:var(--ba-text)}
.ba .carousel-nav:hover{background:var(--ba-text);border-color:var(--ba-text);color:#26202A}
.ba-toggle .ico-play{display:none}
.ba-toggle[aria-pressed="true"] .ico-play{display:block}
.ba-toggle[aria-pressed="true"] .ico-pause{display:none}
.ba-toggle svg{width:16px;height:16px}

/* the stage sizes the drum */
.ba-stage{
  position:relative;flex:0 0 auto;
  height:clamp(520px,calc(100svh - 170px),980px);
}

/* the rail — a 3D stage; perspective is set by app.js from its width */
.ba-rail{
  position:absolute;inset:0;z-index:1;
  container-type:size;
  overflow:hidden;
  perspective:1400px;perspective-origin:50% 50%;
  touch-action:pan-y;
  cursor:grab;
  /* the outer cards fade out completely before they reach the edges */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 3%,#000 24%,#000 76%,transparent 97%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 3%,#000 24%,#000 76%,transparent 97%,transparent 100%);
}
.ba-rail.is-grabbing{cursor:grabbing}
.ba-rail.is-grabbing .ba-compare{pointer-events:none}
.ba-rail:focus-visible{outline:2px solid var(--blush);outline-offset:-2px}

.ba-track{
  position:relative;height:100%;
  list-style:none;margin:0;padding:0;
  transform-style:preserve-3d;
  /* The track is a flat box at the front of the 3D scene, and every card
     that has turned away sits behind it — so it must not take pointer
     hits, or the divider on any off-centre card cannot be grabbed. */
  pointer-events:none;
}
.ba-card{pointer-events:auto}
.ba-card{
  /* Each pair has its own shape (width / height, set inline from the
     admin panel). A card is as tall as the stage allows, but no card is
     ever wider than --ba-max-w — the same cap for every shape, so a
     landscape or square photo stays in proportion with the rest. */
  --ba-ar:.6667;
  --ba-max-w:min(420px, 80cqw);
  --ba-w:min(calc(98cqh * var(--ba-ar)), var(--ba-max-w));
  position:absolute;left:50%;top:50%;
  width:var(--ba-w);height:calc(var(--ba-w) / var(--ba-ar));
  /* centred with a margin, not a translate, so the card's own centre —
     its transform origin — sits on the cylinder's axis */
  margin-left:calc(var(--ba-w) / -2);
  margin-top:calc(var(--ba-w) / var(--ba-ar) / -2);
  /* The transparent padding and outline keep the card's outer pixels
     empty, so the GPU smooths the turned edges instead of drawing them
     as a hard stair-step. No will-change: that would freeze the card as
     a bitmap at one size and blur or jag it once it is turned. */
  padding:2px;
  outline:1px solid transparent;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:flat;
}
.ba-card.is-away{visibility:hidden}

/* cards darken as they turn away, which sells the depth. A real element on
   its own layer (added by app.js): changing its opacity never re-paints the
   photos underneath it. */
.ba-shade{
  position:absolute;inset:0;z-index:1;
  background:#17131A;opacity:0;
  pointer-events:none;will-change:opacity;
}

/* one card */
.ba-compare{
  --ba-split:50%;
  position:relative;width:100%;height:100%;
  overflow:hidden;
  background:#3A3240;
  user-select:none;-webkit-user-select:none;
  contain:paint;
}
.ba-compare.is-easing{transition:--ba-split .5s var(--ease)}
.ba-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;pointer-events:none;
  -webkit-user-drag:none;
}
.ba-before{
  position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--ba-split)) 0 0);
}

.ba-tag{
  position:absolute;top:.8rem;z-index:3;
  padding:.3rem .75rem;border:0;border-radius:100px;
  background:rgba(23,19,26,.58);color:#fff;
  font:inherit;font-size:.74rem;letter-spacing:.03em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;
  transition:opacity .3s var(--ease),background-color .2s var(--ease);
}
.ba-tag:hover{background:rgba(23,19,26,.8)}
.ba-tag:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ba-tag.is-before{left:.8rem}
.ba-tag.is-after{right:.8rem}
/* a tag sitting over the other photo would be lying */
.ba-compare.is-after-full .ba-tag.is-before,
.ba-compare.is-before-full .ba-tag.is-after{opacity:.35}

/* the handle: a wide, invisible hit area around a 2px line — wide enough
   to catch on a card that is turned away */
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--ba-split);z-index:4;
  width:72px;margin-left:-36px;
  cursor:ew-resize;touch-action:none;outline:0;
}
.ba-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;
  width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 0 1px rgba(23,19,26,.16);
}
.ba-grip{
  position:absolute;top:50%;left:50%;
  width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:#fff;color:#26202A;
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(23,19,26,.32);
  transition:transform .2s var(--ease),translate .3s var(--ease);
}
/* at either end the line sits on the card edge; keep the grip whole */
.ba-compare.is-before-full .ba-grip{translate:-21px 0}
.ba-compare.is-after-full  .ba-grip{translate:21px 0}
.ba-grip svg{width:18px;height:18px}
.ba-handle:hover .ba-grip,
.ba-compare.is-dragging .ba-grip{transform:scale(1.08)}
.ba-handle:focus-visible .ba-grip{outline:2px solid var(--blush);outline-offset:3px}

/* the card at the front, spelled out under the drum */
.ba-info{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem 2.5rem;flex-wrap:wrap;
}
.ba-now{display:flex;align-items:center;gap:1.1rem 1.6rem;flex-wrap:wrap;min-width:0}
.ba-count{
  margin:0;display:flex;align-items:baseline;gap:.4rem;
  font-variant-numeric:tabular-nums;line-height:1;
}
.ba-count-now{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:300;letter-spacing:-.04em}
.ba-count-of{font-size:.9rem;color:var(--ba-mute)}
.ba-now-text{
  min-width:0;max-width:40ch;
  padding-left:1.6rem;border-left:1px solid var(--ba-line);
  transition:opacity .25s var(--ease);
}
.ba-now-text.is-swap{opacity:0}
.ba-now-title{margin:0;font-size:1.05rem;font-weight:500}
.ba-now-caption{margin:.15rem 0 0;font-size:.9rem;color:var(--ba-mute)}
.ba-now-title:empty,.ba-now-caption:empty{display:none}
.ba .ba-now-book{border-color:var(--ba-line);color:var(--ba-text);padding:.7rem 1.2rem;font-size:.88rem}
.ba .ba-now-book:hover{background:var(--ba-text);border-color:var(--ba-text);color:#26202A}

/* one tick per result; the front one stretches */
.ba-ticks{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.ba-tick{
  width:26px;height:28px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
  transition:width .35s var(--ease);
}
.ba-tick::before{
  content:"";display:block;width:100%;height:2px;border-radius:2px;
  background:var(--ba-line);transition:background-color .25s var(--ease);
}
.ba-tick:hover::before{background:var(--ba-mute)}
.ba-tick.is-on{width:48px}
.ba-tick.is-on::before{background:var(--blush)}
.ba-tick:focus-visible{outline:2px solid var(--blush);outline-offset:2px;border-radius:2px}

/* a few plain facts about the photos */
.ba-notes{
  list-style:none;margin-block:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2rem;
}
.ba-notes li{
  display:flex;align-items:flex-start;gap:.7rem;
  padding-top:1.1rem;border-top:1px solid var(--ba-line);
  font-size:.86rem;line-height:1.5;color:var(--ba-mute);
}
.ba-notes .ico{width:20px;height:20px;flex:0 0 auto;color:var(--blush);margin-top:.05rem}

/* Portrait: stop fitting the screen, size cards by width instead */
@media (orientation:portrait){
  .ba{
    height:auto;min-height:0;
    padding-block:clamp(2.25rem,6vw,3.5rem);
    gap:1.4rem;
  }
  .ba-head{align-items:stretch;flex-direction:column}
  .ba-actions{justify-content:space-between}
  .ba-stage{height:min(112vw,620px)}
  /* the front card nearly fills a phone, so fade only the slivers beside it */
  .ba-rail{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  }
  .ba-info{flex-direction:column;align-items:flex-start}
  .ba-notes{grid-template-columns:1fr;gap:0}
  .ba-notes li{padding-block:.9rem}
}
@media (orientation:portrait) and (max-width:480px){
  .ba-actions .btn{flex:1 1 auto}
  .ba-grip{width:44px;height:44px;margin:-22px 0 0 -22px}
}

/* Short landscape (phones on their side): too little height to fit it all */
@media (orientation:landscape) and (max-height:560px){
  .ba-stage{height:min(78vh,420px)}
}

/* ---- Phones & tablets: lighter effects so swiping stays smooth ----
   backdrop-filter on a card that is turning in 3D, and a mask on the whole
   3D stage, are the two most expensive things on a phone GPU. The look is
   kept: solid tags, and the side fade drawn as two plain gradients. */
@media (max-width:900px), (pointer:coarse){
  .ba-tag{
    background:rgba(23,19,26,.74);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .ba-rail{-webkit-mask-image:none;mask-image:none}
  .ba-stage::before,
  .ba-stage::after{
    content:"";position:absolute;top:0;bottom:0;width:13%;z-index:2;
    pointer-events:none;
  }
  .ba-stage::before{left:0;background:linear-gradient(90deg,var(--ba-bg),transparent)}
  .ba-stage::after{right:0;background:linear-gradient(270deg,var(--ba-bg),transparent)}
}

@media (prefers-reduced-motion:reduce){
  .ba-compare.is-easing{transition:none}
  .ba-grip,.ba-tag,.ba-tick,.ba-now-text{transition:none}
}