/* iNALA — Editorial Gold. One stylesheet for every page, so the whole site
   changes character from one file if a different direction is chosen. */
:root{--ink:#150B07;--cream:#F4EFE6;--bone:#FDFAF5;--gold:#B8965A;--gold-soft:#D9C39B;
--muted:#6F5C4D;--line:rgba(21,11,7,.14);--jade:#0E6B5C;
--display:'Cinzel',serif;--italic:'Cormorant Garamond',serif;--body:'Plus Jakarta Sans',system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
/* .btn sets display:inline-block, which beats the browser default for [hidden].
   Without this the booking flow shows a Back button on its first step. */
[hidden]{display:none!important}
a{color:inherit}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4.5vw,52px)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}.rv.d4{transition-delay:.36s}

/* draft ribbon — this is not her live site and must never be mistaken for it */
.draft{background:var(--ink);color:var(--gold-soft);text-align:center;padding:7px 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.draft a{color:var(--gold-soft)}

/* nav */
nav{position:sticky;top:0;z-index:60;background:rgba(253,250,245,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.mark{font-family:var(--display);letter-spacing:.34em;font-size:14px;text-decoration:none;
display:inline-flex;flex-direction:column;line-height:1;color:var(--ink)}
.mark i{font-style:normal;font-family:var(--sans);font-size:8px;letter-spacing:.46em;
color:var(--gold);margin-top:6px;text-indent:.46em}
nav ul{display:flex;gap:clamp(16px,2.4vw,32px);list-style:none;align-items:center}
nav a{text-decoration:none;font-size:13px;color:var(--muted);transition:color .3s}
nav a:hover,nav a.on{color:var(--ink)}
nav a.on{border-bottom:1px solid var(--gold);padding-bottom:3px}
.navbtn{background:var(--ink);color:var(--cream)!important;padding:11px 20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.burger{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--ink)}

/* type */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.eyebrow:before{content:"";width:40px;height:1px;background:var(--gold)}
.eyebrow.mid{justify-content:center}
h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,72px);line-height:1.02;letter-spacing:-.01em}
h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,4.2vw,48px);line-height:1.08}
h3{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.02em}
em{font-family:var(--italic);font-style:italic;color:var(--gold)}
.lede{font-family:var(--italic);font-size:clamp(17px,2vw,23px);line-height:1.6;color:var(--muted);max-width:54ch}
p{line-height:1.75}
section{padding:clamp(64px,9vw,128px) 0}

/* buttons */
.btn{display:inline-block;padding:15px 30px;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:background .3s,color .3s}
.btn.p{background:var(--ink);color:var(--cream)}
.btn.p:hover{background:var(--gold)}
.btn.s{border:1px solid var(--line);color:var(--ink)}
.btn.s:hover{background:var(--cream)}
.btn.l{background:var(--cream);color:var(--ink)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* page header for inner pages */
.phead{padding:clamp(48px,7vw,92px) 0 clamp(34px,5vw,58px);border-bottom:1px solid var(--line)}
.phead p{color:var(--muted);max-width:56ch;margin-top:16px;font-size:16px}

/* tiles / cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,24px)}
.card{border:1px solid var(--line);background:#fff;padding:28px 26px 30px}
.card p{font-size:14px;color:var(--muted);margin-top:8px}


/* ── Layout grids ──────────────────────────────────────────────────────────
   These live here, as classes, because an inline grid-template-columns cannot
   be reached by a media query. The first version of this site used inline
   grids and on a phone the photo strip was still twelve columns of 16px and
   the third Skin Club tier ran off the screen. */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.5vw,64px);align-items:center}
.g2.top{align-items:start}
.g2.end{align-items:end}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,26px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,18px)}
.gtiers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(36px,5vw,64px);
border-top:1px solid rgba(217,195,155,.28)}
.tier{padding:30px 26px 34px;border-bottom:1px solid rgba(217,195,155,.28);border-right:1px solid rgba(217,195,155,.28)}
.tier:last-child{border-right:0}
.tier h3{color:var(--cream)}
.tier-price{font-family:var(--display);font-size:34px;margin:12px 0 8px;color:var(--cream)}
.tier-price span{font-family:var(--body);font-size:12px;color:rgba(244,239,230,.55)}
.tier-inc{font-size:14px;color:rgba(244,239,230,.66)}

/* One stacked-scroll moment per page is enough. The tiers go back to a plain
   column on a phone, with the detail behind a dropdown so the card stays short
   and someone who wants the small print can open it. */
@media(max-width:860px){
  .gtiers{grid-template-columns:1fr}
  .tier{border-right:0;padding:26px 22px 30px}
  .tier h3{font-size:21px}
  .tier-price{font-size:38px}
}
.gfields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gside{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,48px);align-items:start}
.gphotos{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,24px)}
.gphotos figure{position:relative;overflow:hidden}
.gphotos figure:after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;
background:linear-gradient(180deg,transparent,rgba(21,11,7,.66))}
.gphotos img{width:100%;height:100%;object-fit:cover}
.gphotos figcaption{position:absolute;left:18px;bottom:14px;color:#fff;font-family:var(--display);font-size:15px;z-index:2}

@media(max-width:860px){
  .g2,.g3,.gside,.gfields{grid-template-columns:1fr}
  .gtiers{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .gphotos{grid-template-columns:1fr}
  .gphotos figure{grid-column:1/-1!important;margin-top:0!important;aspect-ratio:4/3!important;align-self:auto!important}
  .gside aside{position:static!important}
}

/* footer */
footer{background:var(--ink);color:rgba(244,239,230,.68);padding:clamp(46px,6vw,74px) 0 34px;margin-top:0}
footer h4{font-family:var(--display);color:var(--cream);font-size:13px;letter-spacing:.2em;margin-bottom:16px;font-weight:400}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,48px)}
footer a{color:rgba(244,239,230,.68);text-decoration:none;font-size:14px;display:block;padding:5px 0}
footer a:hover{color:var(--gold-soft)}
footer .fine{margin-top:36px;padding-top:22px;border-top:1px solid rgba(217,195,155,.2);display:flex;justify-content:space-between;
flex-wrap:wrap;gap:10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.4)}
footer p{font-size:14px;line-height:1.8}

@media(max-width:860px){
  .fgrid{grid-template-columns:1fr}
  .burger{display:block}
  /* A dropdown anchored to the bar itself, sized by its own contents. The
     first version used position:fixed with a top offset and never got a
     height, so the panel was see-through and the links sat unreadable on top
     of the hero photograph. */
  nav .wrap{position:relative}
  nav ul{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bone);border-top:1px solid var(--line);padding:6px clamp(20px,4.5vw,52px) 14px;
    box-shadow:0 22px 44px rgba(21,11,7,.16)}
  nav ul.open{display:flex}
  nav ul li{width:100%}
  nav a{display:block;padding:15px 0;font-size:16.5px;border-bottom:1px solid var(--line)}
  nav a.on{border-bottom:1px solid var(--gold);padding-bottom:15px}
  nav li:last-child a{border-bottom:0;margin-top:10px;text-align:center}
  .navbtn{padding:15px 20px}
}

/* Treatment rows. A price list with photographs sells; a text list does not.
   The thumbnail is the first thing on the row so the eye lands on the work
   before the number. */
.txrow{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:clamp(14px,2vw,24px);
align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.txthumb{display:block;aspect-ratio:1;overflow:hidden;background:var(--cream)}
.txthumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.txrow:hover .txthumb img{transform:scale(1.06)}
.txend{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.txprice{font-family:var(--display);font-size:21px;white-space:nowrap}
.txadd{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;cursor:pointer;
padding:8px 13px;font:12px var(--body);color:var(--ink);white-space:nowrap;transition:background .25s,border-color .25s}
.txadd:hover{background:var(--cream)}
.txadd i{font-style:normal;font-size:14px;line-height:1;color:var(--gold)}
.txadd.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.txadd.on i{color:var(--gold-soft)}

/* The bar that follows you down the treatments page. */
.txbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:space-between;
gap:16px;flex-wrap:wrap;background:var(--ink);color:var(--cream);padding:14px clamp(20px,4.5vw,52px);
box-shadow:0 -12px 34px rgba(21,11,7,.28)}
.txbar.on{display:flex}
.txbar b{font-family:var(--display);font-weight:400;font-size:16px}
.txbar span{color:rgba(244,239,230,.66);font-size:15px}
.txbar-acts{display:flex;gap:10px;align-items:center}
.txbar-acts button{background:none;border:0;color:rgba(244,239,230,.6);font:12px var(--body);cursor:pointer;
text-decoration:underline;padding:8px}
body.hasbar{padding-bottom:82px}
@media(max-width:620px){
  .txend{flex-direction:row;align-items:center;justify-content:space-between;grid-column:2;width:100%;margin-top:6px}
  .txbar{padding:12px 16px}.txbar b{font-size:15px}
}

@media(max-width:620px){
  .txrow{grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0}
  .txprice{grid-column:2;font-size:19px;margin-top:2px}
}

/* ── "What brings you in": stacked scroll on a phone ───────────────────────
   Each card sticks to the top of the viewport, so the next one slides over the
   one before it rather than pushing it away. Four screens, then the page
   carries on. On a wide screen the same markup is just a row. */
.stack{padding:clamp(64px,9vw,128px) 0 0}
.stack .wrap{margin-bottom:clamp(28px,4vw,46px)}
.stack-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,18px);
padding:0 clamp(20px,4.5vw,52px) clamp(64px,9vw,128px)}
.scard{position:relative;overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.scard-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,11,7,.10) 0%,rgba(21,11,7,.16) 30%,rgba(21,11,7,.58) 62%,rgba(21,11,7,.93) 100%)}
.scard-copy{position:relative;z-index:2;color:#fff;padding:22px 20px}
.scard-no{display:block;font-size:10px;letter-spacing:.28em;color:var(--gold-soft);margin-bottom:10px}
.scard-no i{font-style:normal;opacity:.55}
.scard h3{color:#fff;font-size:19px;margin-bottom:8px}
.scard .hook{font-family:var(--italic);font-size:17px;line-height:1.45;color:var(--gold-soft)}
.scard .body{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.8);margin-top:8px}
.scard .btn{display:none}

@media(max-width:860px){
  .stack-cards{display:block;padding:0;gap:0}
  .scard{position:sticky;top:0;height:100svh;aspect-ratio:auto;
    /* the card behind darkens and shrinks a touch as the next one covers it */
    transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s}
  .scard.behind{transform:scale(.94);filter:brightness(.62)}
  .scard img{object-position:center 32%}
  .scard-copy{padding:0 clamp(20px,5vw,32px) clamp(52px,10vh,86px)}
  .scard h3{font-size:clamp(26px,7vw,34px);line-height:1.1}
  .scard .hook{font-size:clamp(18px,4.6vw,22px);margin-top:6px}
  .scard .body{font-size:15px;margin-top:14px;max-width:34ch}
  .scard .btn{display:inline-block;margin-top:22px}
}

/* Home hero. goal-glow is a PORTRAIT photograph. Forcing it into a landscape
   hero with object-fit:cover zoomed so far in that it cropped the top of her
   head and filled the screen with one cheek. So on a wide screen the hero is
   split: words on the left, the picture given its own half at its own shape.
   A phone is portrait already, so there it goes full bleed. */
/* 100svh measured from the top of the PAGE, but the hero starts below the
   ribbon and the nav, so a full-height hero ran 130px past the bottom of a
   phone and cut both buttons off. --chrome is measured by the page script. */
.hero{position:relative;min-height:560px;height:calc(100svh - var(--chrome,0px));overflow:hidden;display:grid;
grid-template-columns:1fr 1fr;background:var(--ink)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:56% 26%;grid-column:2;align-self:stretch}
.hero-scrim{grid-column:2;grid-row:1;background:linear-gradient(90deg,rgba(21,11,7,.55) 0%,transparent 32%)}
.hero img{grid-row:1}
/* The motion clip sits in the photo's cell, under the scrim, and is invisible
   until it can actually play, so a failed or slow load leaves the still hero. */
.hero .hero-motion{grid-column:2;grid-row:1;align-self:stretch;width:100%;height:100%;
object-fit:cover;object-position:56% 26%;opacity:0;transition:opacity 1.1s ease}
.hero .hero-motion.on{opacity:1}
.hero-copy{grid-column:1;grid-row:1;position:relative;z-index:2;display:flex;flex-direction:column;
justify-content:center;padding-top:0;padding-bottom:0}
.hero-copy h1{max-width:14ch}
.hero-copy .lede{max-width:40ch}
@media(max-width:860px){
  .hero{display:block}
  /* Pulled back so more than a cheek is visible, and the parallax lift cut to
     4% so it does not zoom further on scroll. */
  .hero img{position:absolute;inset:0;height:104%;object-position:52% 10%}
  .hero .hero-motion{position:absolute;inset:0;height:104%;object-position:52% 10%}
  /* The words sit in the lower third, so that third has to be genuinely dark.
     The first version faded to .92 only at the very bottom and the headline
     landed on bright skin. */
  .hero-scrim{position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(21,11,7,.46) 0%,rgba(21,11,7,.06) 24%,rgba(21,11,7,.55) 52%,rgba(21,11,7,.93) 78%,rgba(21,11,7,.97) 100%)}
  .hero{min-height:520px}
  .hero-copy{position:relative;height:100%;justify-content:flex-end;padding-bottom:clamp(34px,6vh,64px)}
  .hero-copy h1,.hero-copy .lede{max-width:none}
  .hero-copy h1{font-size:clamp(30px,8.4vw,42px)}
  .hero-copy .lede{font-size:16px;line-height:1.55}
  .hero-copy .acts{margin-top:22px;gap:10px}
  .hero-copy .acts .btn{padding:13px 22px;font-size:11.5px}
}

/* "What else you get" — a real <details>, so it works with no javascript and
   stays open when someone taps it. */
.tier details{margin-top:14px}
.tier summary{list-style:none;cursor:pointer;font-size:13px;letter-spacing:.06em;color:var(--gold-soft);
padding:9px 0;display:inline-flex;align-items:center;gap:8px}
.tier summary::-webkit-details-marker{display:none}
.tier summary:after{content:"+";font-size:15px;line-height:1;transition:transform .3s}
.tier details[open] summary:after{transform:rotate(45deg)}
.tier details dl{margin-top:6px;display:grid;gap:14px;padding-top:12px;border-top:1px solid rgba(217,195,155,.2)}
.tier details dt{font-size:13px;color:var(--cream);letter-spacing:.02em}
.tier details dd{font-size:13.5px;line-height:1.7;color:rgba(244,239,230,.6);margin-top:4px}

/* Who with. The portraits are placeholders: a silhouette in a ring rather than
   a stock photo of a stranger, so nobody mistakes one for a real member of her
   team before she sends her own. Swapping them is one file each. */
.staffgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.staffcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
border:1px solid var(--line);background:#fff;padding:24px 18px 26px;cursor:pointer;
font-family:var(--body);transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.staffcard:hover{border-color:var(--gold-soft);transform:translateY(-3px)}
.staffcard.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.staffcard img{width:84px;height:84px;border-radius:50%;margin-bottom:8px}
.staffcard .sname{font-family:var(--display);font-size:17px}
.staffcard .srole{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.staffcard .sblurb{font-size:13px;line-height:1.6;color:var(--muted);margin-top:4px}
.staffnote{font-size:13px;color:var(--muted);margin-top:18px;border-left:2px solid var(--gold);padding-left:14px}
@media(max-width:760px){
  .staffgrid{grid-template-columns:1fr}
  /* A grid, not a flex row: the portrait takes the first column and the three
     lines stack in the second. As a flex row they became three narrow columns
     and every word wrapped. */
  .staffcard{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto auto auto;
    column-gap:16px;row-gap:2px;text-align:left;align-items:start;padding:16px 18px}
  .staffcard img{width:60px;height:60px;margin:0;grid-row:1/4;align-self:center}
  .staffcard .sname{grid-column:2;font-size:16px}
  .staffcard .srole{grid-column:2}
  .staffcard .sblurb{grid-column:2;margin-top:5px}
}

/* The prototype's five-column stepper lived here. It was an ID rule, so it beat
   the .bsteps class styles further down and forced the six-step rail into a grid
   that wrapped onto two lines. Removed 2026-09-05; .bsteps owns the rail now. */

/* ── Photo-backed page header (Join) ───────────────────────────────────────
   Desktop: the scrim runs left to right, so the copy sits on dark ground while
   the group stays visible on the right. On a phone there is no "right" — the
   crop puts the faces off-screen and a 90deg scrim just buries them. So it
   runs bottom-up instead, exactly like .hero-scrim already does: faces at the
   top, words on solid ground underneath. */
.phead-photo{position:relative;border:0;background:var(--ink);overflow:hidden}
.phead-photo>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;opacity:.42}
.phead-photo>.phead-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(21,11,7,.88),rgba(21,11,7,.55) 60%,rgba(21,11,7,.30))}
.phead-photo>.wrap{position:relative;color:var(--cream)}
@media(max-width:860px){
  .phead-photo{min-height:440px;display:flex;align-items:flex-end}
  .phead-photo>img{opacity:.7;object-position:center 20%}
  .phead-photo>.phead-scrim{background:linear-gradient(180deg,
    rgba(21,11,7,.28) 0%,rgba(21,11,7,.04) 20%,rgba(21,11,7,.74) 58%,rgba(21,11,7,.96) 100%)}
}

/* The concrete line — what the included treatment actually is. Phumelele asked
   what "one express add-on" meant and the card had no answer on it, so this
   sits on the face of every tier card, on both pages, above the dropdown.
   Two contexts: .tier is the dark band on the home page, .card is the light
   Skin Club page, and --ink/--text are the same value, so each gets its own
   colours rather than a shared token that disappears on one of them. */
.tier-what{font-size:13.5px;line-height:1.65;margin-top:12px;padding-top:13px}
.tier .tier-what{color:rgba(244,239,230,.72);border-top:1px solid rgba(217,195,155,.2)}
.tier .tier-what strong{color:var(--cream);font-weight:500}
.card .tier-what{color:var(--muted);border-top:1px solid rgba(21,11,7,.12)}
.card .tier-what strong{color:var(--ink);font-weight:600}

/* Same dropdown as the home page, on the light card. */
.tier-more{margin-top:14px}
.tier-more summary{list-style:none;cursor:pointer;font-size:13px;letter-spacing:.06em;
  color:var(--gold);text-transform:uppercase;display:flex;justify-content:space-between;
  align-items:center;padding:8px 0}
.tier-more summary::-webkit-details-marker{display:none}
.tier-more summary:after{content:"+";font-size:15px;line-height:1;transition:transform .3s}
.tier-more[open] summary:after{transform:rotate(45deg)}
.tier-more dl{margin-top:6px;display:grid;gap:14px;padding-top:12px;border-top:1px solid rgba(21,11,7,.10)}
.tier-more dt{font-size:13px;color:var(--ink);letter-spacing:.02em}
.tier-more dd{font-size:13.5px;line-height:1.7;color:var(--muted);margin-top:4px}

/* A hairline drawn inside each stacked card, phone only. Ibrahim, 25 Aug: the
   full-screen photo had nothing holding it, so it read as a background rather
   than a picture. A frame inset from the edge gives it one without shrinking
   the photograph, which an outer margin would.
   NOT on desktop: there the four cards sit in a row with real gaps between
   them, and a second line inside each one only crowds the copy. */
@media(max-width:860px){
  .scard:after{content:"";position:absolute;inset:15px;
    border:1px solid rgba(244,239,230,.5);z-index:1;pointer-events:none}
  .scard-copy{padding:0 32px 46px}
}


/* Treatment ribbon. Two identical sets slide by half the track, so the loop has
   no seam. It pauses on hover, and holds still for anyone who has asked for
   reduced motion rather than scrolling under them forever. */
.ribbon{background:var(--ink);overflow:hidden;padding:15px 0;
border-block:1px solid rgba(217,195,155,.16)}
.ribbon-track{display:flex;width:max-content;animation:ribbon-slide 54s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-set{display:flex;flex:none}
.ribbon-set span{display:flex;align-items:center;white-space:nowrap;
font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--gold-soft);opacity:.82;padding:0 clamp(20px,3vw,34px)}
.ribbon-set span::after{content:"";width:3px;height:3px;border-radius:50%;
background:var(--gold);opacity:.5;margin-left:clamp(20px,3vw,34px)}
@keyframes ribbon-slide{to{transform:translateX(-50%)}}
@media(max-width:860px){
  .ribbon{padding:12px 0}
  .ribbon-set span{font-size:9.5px;letter-spacing:.24em;padding:0 15px}
  .ribbon-set span::after{margin-left:15px}
  .ribbon-track{animation-duration:38s}
}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none}}


/* ---- 2026 pass: motion moved off the main thread ------------------------
   The reveals were an IntersectionObserver toggling a class, which does its
   work on the main thread and stutters on a cheap Android while the hero clip
   is decoding. Where the browser supports scroll-driven animation the same
   reveal is handed to the compositor instead, and the JS observer stands down.
   The stagger is done with range offsets, because animation-delay is a TIME
   offset and means nothing on a scroll timeline. */
/* Scroll-driven reveals were tried here and removed on purpose. A view()
   timeline is bound to scroll position, so scrolling back UP un-reveals the
   text again: 21 of 25 elements faded out on the way back to the top. The
   IntersectionObserver below reveals once and stops watching, which is the
   behaviour this page was designed around. Newer is not automatically better. */

/* Anyone who has asked their phone to stop moving things gets the whole page
   at rest and fully visible. This also catches the case where the animation
   never runs, so nothing can be left stuck at opacity 0. */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none;animation:none}
  .ribbon-track{animation:none}
}

/* Reading position. Fixed, so it is not part of the hero's chrome measurement. */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none;
transform:scaleX(0);transform-origin:0 50%;
background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .progress{animation:progress-grow linear both;animation-timeline:scroll(root block)}
    @keyframes progress-grow{to{transform:scaleX(1)}}
  }
}

/* Headlines break on sense rather than on whatever fits, and paragraphs stop
   leaving one word alone on the last line. */
h1,h2,h3,.hero-copy .lede{text-wrap:balance}
p{text-wrap:pretty}

/* Moving between her pages morphs instead of flashing white. The nav is named
   so it stays put across the navigation rather than cross-fading with the page. */
@view-transition{navigation:auto}
nav{view-transition-name:site-nav}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.4s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
}


/* ---- Proof -------------------------------------------------------------
   A layout family the page did not already use: one tall panel carrying the
   comparison, two supporting frames stacked beside it. */
.proof-grid{display:grid;grid-template-columns:1.02fr 1fr;grid-template-rows:auto auto;
gap:clamp(12px,1.6vw,20px);margin-top:clamp(30px,4vw,52px);align-items:start}
.proof-grid figure{margin:0;min-width:0}
/* height:auto matters here. The width/height attributes on the tags are there
   to reserve space and stop layout shift, but without this the attribute height
   wins over aspect-ratio and the crop never applies. */
.proof-grid img{width:100%;height:auto;display:block;object-fit:cover;background:var(--cream)}
.proof-ba{grid-row:1/3}
.proof-ba img{aspect-ratio:572/1024}
/* Portrait, anchored high. A landscape crop on a standing portrait cut her
   head off, which loses the only reason the photo is there. */
.proof-who img{aspect-ratio:4/5;object-position:50% 12%}
.proof-room img{aspect-ratio:3/2}
.proof-grid figcaption{font-family:var(--sans);font-size:11.5px;line-height:1.5;
color:var(--muted);margin-top:9px}
@media(max-width:860px){
  .proof-grid{grid-template-columns:1fr;grid-template-rows:none}
  .proof-ba{grid-row:auto}
  .proof-ba img{aspect-ratio:572/1024}
}

/* The sixth cell of the tier grid. It exists because five cards in a three
   column grid left a hole, and a hole that asks a question is better than a
   hole that says nothing. */
.tier-join{display:flex;flex-direction:column;justify-content:center}
.tier-join h3{margin-bottom:10px}
.tier-join .btn{align-self:flex-start;margin-top:16px;
border:1px solid rgba(217,195,155,.4);color:var(--gold-soft)}

/* ---- Booking bar (phones) ---------------------------------------------- */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;
padding:10px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom));
background:rgba(21,11,7,.94);border-top:1px solid rgba(217,195,155,.22);
transform:translateY(110%);transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.bookbar.up{transform:none}
.bookbar a{flex:1;text-align:center;text-decoration:none;font-family:var(--sans);
font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:14px 10px}
.bookbar-go{background:var(--cream);color:var(--ink)}
.bookbar-wa{border:1px solid rgba(217,195,155,.45);color:var(--gold-soft)}
@media(max-width:860px){.bookbar{display:flex}}
@media(prefers-reduced-motion:reduce){.bookbar{transition:none}}


/* ---- Skin Club band ----------------------------------------------------
   Sharp corners, like everything else on this site. The copy sits in the quiet
   left third of the photograph, and the scrim runs left to right on a desktop
   strip and bottom-up on a phone, which is where the words land in each case. */
.clubband{position:relative;margin:clamp(28px,4vw,46px) 0 0;overflow:hidden;
background:var(--ink);display:block}
.clubband img{width:100%;height:100%;display:block;object-fit:cover;
aspect-ratio:21/9;object-position:center 42%}
.clubband-scrim{position:absolute;inset:0;
background:linear-gradient(90deg,rgba(21,11,7,.92) 0%,rgba(21,11,7,.66) 38%,rgba(21,11,7,.12) 72%)}
.clubband figcaption{position:absolute;inset:0;display:flex;flex-direction:column;
justify-content:center;gap:12px;padding:clamp(22px,4vw,54px);max-width:46ch}
.clubband-t{font-family:var(--display);color:var(--cream);
font-size:clamp(23px,3.2vw,40px);line-height:1.12;text-wrap:balance}
.clubband-s{font-family:var(--sans);color:rgba(244,239,230,.78);
font-size:clamp(12.5px,1.15vw,15px);line-height:1.6;max-width:38ch}
@media(max-width:860px){
  .clubband img{aspect-ratio:4/5;object-position:center 34%}
  .clubband-scrim{background:linear-gradient(180deg,
    rgba(21,11,7,.30) 0%,rgba(21,11,7,.06) 26%,rgba(21,11,7,.72) 58%,rgba(21,11,7,.95) 100%)}
  .clubband figcaption{justify-content:flex-end;max-width:none}
}


/* ---- Skin Club rules ---------------------------------------------------
   Six rules were sitting in the four-across card grid, which left two empty
   cells and squeezed the columns so headings broke mid-phrase ("Collected /
   on the 25th"). Three rows of two fit exactly, and the boxes go: a faint
   transparent border around each rule was drawing a container that carried no
   hierarchy. A hairline and real space does the same grouping more quietly,
   which suits a section whose whole point is that there is nothing hidden. */
.rules{display:grid;grid-template-columns:repeat(2,1fr);
column-gap:clamp(34px,6vw,86px);margin-top:clamp(30px,4vw,50px)}
.rules .rule{padding:clamp(20px,2.3vw,28px) 0;border-top:1px solid rgba(21,11,7,.14)}
.rules dt{font-family:var(--display);font-size:clamp(16.5px,1.45vw,19.5px);
line-height:1.24;margin-bottom:10px;text-wrap:balance}
.rules dd{margin:0;font-family:var(--sans);font-size:14px;line-height:1.68;
color:var(--muted);max-width:46ch}
@media(max-width:860px){
  .rules{grid-template-columns:1fr;column-gap:0}
  .rules .rule{padding:18px 0 20px}
  .rules dd{font-size:14.5px}
}


/* ---- Nav over the hero -------------------------------------------------
   The white bar used to sit on top of the hero and cut the page in two before
   anyone had seen anything. The nav now floats over the footage with nothing
   behind it, and only takes a background once the hero has gone past. The
   menu, the wordmark and the join button all stay exactly where they were. */
:root{--navh:70px}
.hero{margin-top:calc(-1 * var(--navh))}
nav.over{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
/* A soft fade behind the floating nav. Without it the hero copy scrolls under
   the bar and both the wordmark and the sentence become unreadable for the
   moment they overlap. This keeps the blended look and guarantees legibility. */
nav.over::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(21,11,7,.62) 0%,rgba(21,11,7,.28) 55%,transparent 100%)}
nav{position:sticky;isolation:isolate}
nav.over .mark,nav.over .burger{color:var(--cream)}
nav.over .mark i{color:var(--gold-soft)}
nav.over a{color:rgba(244,239,230,.82)}
nav.over a:hover,nav.over a.on{color:#fff}
nav.over a.on{border-bottom-color:var(--gold-soft)}
nav.over .navbtn{background:transparent;color:var(--cream)!important;
box-shadow:inset 0 0 0 1px rgba(244,239,230,.5)}
nav.over .navbtn:hover{background:rgba(244,239,230,.12)}

/* THE OPEN BURGER MENU, ON THE HOME PAGE.
   The rules just above put every nav link in cream so they stay readable on top
   of the hero photograph. The mobile burger panel, though, is a solid bone card
   drawn UNDER the bar, so those same cream links landed on a cream background
   and the menu read as completely empty. Reported 2026-09-04.
   The panel wins the moment it is open: once there is a card behind the links,
   the over-the-hero colours no longer apply to them. */
@media(max-width:860px){
  nav.over ul.open a{color:var(--ink)}
  nav.over ul.open a:hover{color:var(--ink)}
  nav.over ul.open a.on{color:var(--ink);border-bottom-color:var(--gold)}
  nav.over ul.open .navbtn{background:var(--ink);color:var(--cream)!important;border-color:var(--ink)}
}
/* The words in the hero now start under a floating nav, so they need the
   clearance the bar used to provide. */
.hero-copy{padding-top:var(--navh)}
@media(max-width:860px){
  :root{--navh:64px}
  .hero-copy{padding-top:0}
}


/* ---- Proof bar ---------------------------------------------------------
   Big value, small label. The old version was small uppercase text on a dark
   band, which read as a disclaimer strip rather than as proof, and it cut the
   page in two right under the hero. Cream keeps the page continuous, and the
   value carries in Cinzel so it is legible in half a second. */
.proofbar{background:var(--cream);border-bottom:1px solid var(--line)}
.proofbar-in{display:grid;grid-template-columns:repeat(4,1fr)}
.pb{display:flex;flex-direction:column;gap:7px;
padding:clamp(26px,3.2vw,42px) clamp(14px,2.4vw,34px)}
.pb + .pb{border-left:1px solid var(--line)}
.pb:first-child{padding-left:0}
.pb:last-child{padding-right:0}
.pb-v{font-family:var(--display);font-size:clamp(26px,3vw,40px);
line-height:1;color:var(--ink);font-weight:400}
.pb-a{font-family:var(--italic);font-style:italic;color:var(--gold)}
.pb-l{font-family:var(--sans);font-size:clamp(10px,.82vw,11.5px);
letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.45}
@media(max-width:1080px){
  .proofbar-in{grid-template-columns:repeat(2,1fr)}
  .pb{padding:clamp(22px,4vw,30px) clamp(16px,3vw,26px)}
  .pb:nth-child(odd){padding-left:0}
  .pb:nth-child(even){padding-right:0}
  .pb:nth-child(3){border-left:0}
  .pb:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:520px){
  .pb-v{font-size:25px}
  .pb-l{font-size:9.5px;letter-spacing:.1em}
  .pb{padding:20px 12px}
}

/* Press quote. Her own words, from a piece anyone can go and read. */
.press{margin:clamp(20px,2.6vw,30px) 0 0;padding-left:clamp(16px,1.8vw,24px);
border-left:2px solid var(--gold)}
.press p{font-family:var(--italic);font-size:clamp(19px,2.1vw,26px);
line-height:1.35;color:var(--ink);margin:0}
.press cite{display:block;margin-top:11px;font-family:var(--sans);font-style:normal;
font-size:12px;letter-spacing:.04em;color:var(--muted)}
.press cite a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.press cite a:hover{color:var(--ink)}


/* ---- Skin Club banner head --------------------------------------------
   Her email banner, reproduced as a live composition: the photograph sits on
   the right, the section's own ink runs into it from the left, and the words
   land in the warm space beside her. Live text rather than baked type, so it
   reflows, stays selectable, and can be changed without opening Photoshop. */
.clubhead{position:relative;overflow:hidden;min-height:clamp(340px,38vw,470px);
display:grid;background:var(--ink)}
/* The photo runs wider than the copy needs so its left edge sits under the
   opaque part of the fade. At 62% the edge landed where the scrim had already
   thinned, and it showed as a hard vertical seam. */
.clubhead>img{position:absolute;inset:0 0 0 auto;height:100%;width:84%;
object-fit:cover;object-position:62% 22%}
.clubhead-fade{position:absolute;inset:0;background:
linear-gradient(90deg,var(--ink) 0%,var(--ink) 22%,rgba(21,11,7,.94) 34%,rgba(21,11,7,.55) 50%,rgba(21,11,7,.12) 66%,transparent 78%)}
.clubhead-copy{position:relative;z-index:2;align-self:center;
padding:clamp(30px,4vw,56px) clamp(24px,4vw,60px);max-width:46ch}
.clubhead-copy h2{color:var(--cream);margin-top:6px}
.clubhead-lede{margin-top:16px;color:rgba(244,239,230,.74);
font-family:var(--italic);font-size:clamp(16px,1.5vw,20px);line-height:1.5;max-width:40ch}
@media(max-width:860px){
  .clubhead{min-height:0}
  /* Stacked on a phone, so the photo dissolves into the ink below it rather
     than stopping at a hard horizontal line. */
  .clubhead>img{position:relative;width:100%;height:auto;aspect-ratio:4/3;
    object-position:58% 18%;
    -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 99%);
    mask-image:linear-gradient(180deg,#000 68%,transparent 99%)}
  .clubhead-fade{display:none}
  .clubhead-copy{padding:0 clamp(20px,5vw,28px) clamp(26px,5vw,34px);max-width:none;
    margin-top:-2px;background:var(--ink)}
  .clubhead-lede{max-width:none}
}


/* ---- Before / after reveal --------------------------------------------
   Both photographs are the same frame, so only the skin changes as the divider
   moves. The range input sits on top at full size and carries the interaction;
   everything visible is driven off --pos, which it sets. */
.ba{position:relative;overflow:hidden;background:var(--ink);
aspect-ratio:4/5;touch-action:pan-y;isolation:isolate}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 26%;display:block;user-select:none;-webkit-user-drag:none}
.ba-clip{position:absolute;inset:0;overflow:hidden;
clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
background:var(--gold);transform:translateX(-1px);pointer-events:none;z-index:3}
.ba-grip{position:absolute;top:50%;left:50%;translate:-50% -50%;
width:44px;height:44px;border-radius:50%;background:var(--gold);
box-shadow:0 2px 14px rgba(21,11,7,.45);
display:grid;place-items:center}
.ba-grip::before,.ba-grip::after{content:"";position:absolute;
border:solid var(--ink);border-width:0 0 2px 2px;width:7px;height:7px}
.ba-grip::before{rotate:45deg;translate:-9px 0}
.ba-grip::after{rotate:-135deg;translate:9px 0}
.ba-tag{position:absolute;bottom:14px;z-index:3;font-family:var(--sans);
font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
background:rgba(21,11,7,.62);padding:6px 11px;pointer-events:none}
.ba-tag-b{left:14px}
.ba-tag-a{right:14px}
/* The control itself is invisible but covers the whole frame, so a finger can
   grab it anywhere rather than having to find a 44px handle. */
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:4;
opacity:0;cursor:ew-resize;appearance:none;background:transparent}
.ba-range::-webkit-slider-thumb{appearance:none;width:64px;height:100%}
.ba-range::-moz-range-thumb{width:64px;height:100%;border:0;opacity:0}
.ba-range:focus-visible{opacity:1;outline:2px solid var(--gold);outline-offset:3px}

/* One slow nudge when it first comes into view, so people know it moves.
   It stops the moment anyone touches it, and never runs for anyone who has
   asked for reduced motion. */
@media(prefers-reduced-motion:no-preference){
  .ba.hint .ba-clip{animation:ba-nudge 2.6s cubic-bezier(.4,0,.2,1) 1}
  .ba.hint .ba-line{animation:ba-nudge-line 2.6s cubic-bezier(.4,0,.2,1) 1}
}
@keyframes ba-nudge{
  0%,100%{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
  35%{clip-path:inset(0 calc(100% - 76%) 0 0)}
  70%{clip-path:inset(0 calc(100% - 26%) 0 0)}
}
@keyframes ba-nudge-line{0%,100%{left:var(--pos)}35%{left:76%}70%{left:26%}}

/* ── Treatment detail pages ────────────────────────────────────────────────
   The four facts somebody actually wants before booking: price, how long,
   what holds it, whether they need a consultation first. A row on a desktop,
   a stack on a phone, because four columns of 70px is unreadable. */
.txfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0}
.txfacts>div{padding:22px 26px 24px;border-right:1px solid var(--line)}
.txfacts>div:last-child{border-right:0}
.txfacts dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.txfacts dd{margin:10px 0 0;font-size:15px;line-height:1.6}
@media(max-width:860px){
  .txfacts{grid-template-columns:1fr}
  .txfacts>div{border-right:0;border-bottom:1px solid var(--line);padding:18px 0 20px}
  .txfacts>div:last-child{border-bottom:0}
}

/* A neighbouring treatment is a whole clickable card, not a card with a link
   somewhere inside it that you have to aim at. */
.txcard{display:block;text-decoration:none;color:inherit;transition:border-color .3s,transform .3s}
.txcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.txcard .txprice{font-family:var(--display);font-size:19px;color:var(--gold)}

/* The facts sit directly under the treatment photograph. The default section
   padding put most of a screen of nothing between them. */
.txtop{padding-top:clamp(26px,3.5vw,44px)}

/* Price against member price. Two rows, because the comparison IS the argument
   and a paragraph makes you do the subtraction yourself. */
.txclub{margin:0;border-top:1px solid rgba(217,195,155,.28)}
.txclub>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;border-bottom:1px solid rgba(217,195,155,.28)}
.txclub dt{font-size:13.5px;color:rgba(244,239,230,.62);max-width:26ch}
.txclub dd{margin:0;font-family:var(--display);font-size:clamp(24px,3vw,34px);color:rgba(244,239,230,.75)}
.txclub dd.win{color:var(--gold)}

/* ═══════════════════ BOOKING PAGE ═══════════════════
   The booking engine (assets/book-engine.js) builds its own inner markup and
   names it with these classes. They are not free to rename: .cat .svc .nm
   .badge .pr .n-sel .day .slot .tt, plus the states .sel .today .blank .taken
   .free .enquire. Everything here dresses those in the site's own language.  */

.bookwrap{padding-top:clamp(30px,4vw,52px);padding-bottom:clamp(90px,12vw,150px)}

.bstep{border-top:1px solid var(--line);padding:clamp(28px,4vw,44px) 0}
.bstep:first-child{border-top:0;padding-top:0}
.bnum{display:flex;align-items:baseline;gap:16px;font-family:var(--display);font-weight:400;
font-size:clamp(21px,2.6vw,28px);letter-spacing:.01em;margin-bottom:8px}
.bnum i{font-style:normal;font-family:var(--body);font-size:11px;letter-spacing:.2em;color:var(--gold);
border:1px solid var(--gold);width:30px;height:30px;display:inline-flex;align-items:center;
justify-content:center;flex:0 0 auto;transform:translateY(-2px)}
.bhint{font-size:14px;color:var(--muted);max-width:62ch;margin-bottom:22px;line-height:1.6}
#svc-count{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* treatment picker */
.cat{border:1px solid var(--line);background:#fff;margin-bottom:9px}
.cat>summary{cursor:pointer;padding:16px 18px;font-size:13px;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink);list-style:none;display:flex;
justify-content:space-between;align-items:center;gap:12px}
.cat>summary::-webkit-details-marker{display:none}
.cat>summary:after{content:"+";font-size:17px;color:var(--gold);line-height:1}
.cat[open]>summary:after{content:"\2212"}
.cat[open]>summary{border-bottom:1px solid var(--line)}
.n-sel{font-size:11px;letter-spacing:.1em;color:var(--gold);text-transform:none}
.svc{display:flex;align-items:flex-start;gap:13px;padding:14px 18px;border-top:1px solid var(--line)}
.cat>summary+.svc{border-top:0}
.svc:hover{background:var(--bone)}
.svc input{margin-top:3px;accent-color:var(--gold);width:17px;height:17px;flex:0 0 auto}
.nm{flex:1;font-size:15px;line-height:1.45}
.nm small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.nm small a{color:var(--jade)}
.badge{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);padding:2px 7px;
vertical-align:1px}
.pr{font-size:15px;white-space:nowrap;padding-left:8px}
.pr.free{color:var(--muted);font-size:13px}
.svc.enquire .nm{color:var(--muted)}

/* calendar */
.mnav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.mbtn{background:none;border:1px solid var(--line);color:var(--ink);width:40px;height:40px;
cursor:pointer;font-size:15px;font-family:var(--body)}
.mbtn:hover{border-color:var(--gold);color:var(--gold)}
.mbtn:disabled{opacity:.3;cursor:default;border-color:var(--line);color:var(--ink)}
.mlabel{font-family:var(--display);font-size:18px;letter-spacing:.03em}
.wdays,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wdays span{text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);padding-bottom:8px}
.day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;
border:1px solid var(--line);background:#fff;cursor:pointer;font-family:var(--body);color:var(--ink)}
.day:hover:not(:disabled){border-color:var(--gold)}
.day.blank{border:0;background:none;cursor:default}
.day:disabled{color:rgba(21,11,7,.22);background:var(--bone);cursor:default;border-color:transparent}
.day.today{box-shadow:inset 0 0 0 1px var(--gold-soft)}
.day.sel{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* times */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.slot{padding:13px 8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:14px;
font-family:var(--body);color:var(--ink)}
.slot:hover:not(.taken){border-color:var(--gold)}
.slot.sel{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.slot.taken,.slot:disabled{color:rgba(21,11,7,.25);background:var(--bone);cursor:default;
text-decoration:line-through;border-color:transparent}
.slots-empty{grid-column:1/-1;font-size:14px;color:var(--muted);padding:16px 0}
.series{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:14px;max-width:62ch}
.tt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
grid-column:1/-1;padding-top:10px}

/* fields */
.bfields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bfield{margin-top:16px}
.bfields label,.bfield label{display:block;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.bfields input,.bfield input,.bfield select,.bfield textarea{width:100%;padding:13px 14px;
border:1px solid var(--line);font:15px var(--body);background:#fff;color:var(--ink);border-radius:0}
.bfield textarea{min-height:88px;resize:vertical}
.bfields input:focus,.bfield input:focus,.bfield select:focus,.bfield textarea:focus{
outline:0;border-color:var(--gold)}
.req{color:var(--gold)}
.bconsent{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding-top:20px;
border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--muted);cursor:pointer}
.bconsent input{margin-top:3px;accent-color:var(--gold);width:18px;height:18px;flex:0 0 auto}
.bmsg{display:none;margin-top:22px;padding:14px 16px;border:1px solid var(--line);font-size:14px}
.bmsg.err{border-color:#B4341F;color:#8A2E1E;background:#FBEAE7}

/* the sticky total */
/* Always visible. The engine only ever HIDES this bar, on the confirmation
   screen, by setting style.display none. Give it a display:none default and it
   never appears at all, and nobody can reach the Book now button. */
.totalbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;
align-items:center;justify-content:space-between;gap:16px;padding:13px clamp(16px,4vw,40px);
background:var(--ink);color:var(--cream);border-top:1px solid rgba(217,195,155,.3)}
.tl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.tv{font-family:var(--display);font-size:22px;margin-top:3px}
.totalbar button{background:var(--cream);color:var(--ink);border:0;padding:14px 26px;
font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.totalbar button:disabled{opacity:.45;cursor:default}

/* the confirmation */
.bdone{display:none;max-width:640px;margin:0 auto;text-align:center}
.bdone h2{margin-bottom:14px}
.bwhen{font-size:17px;margin-bottom:18px}
.blist{font-size:14.5px;color:var(--muted);line-height:1.9;margin-bottom:22px}
.bdone .series{margin:0 auto 22px;text-align:left}
.paybox{border:1px solid var(--gold-soft);background:#fff;padding:clamp(22px,4vw,32px);
text-align:left;margin-bottom:22px}
.paybox p{font-size:14px;color:var(--muted);line-height:1.65;margin-top:12px}
.pb-amount{font-family:var(--display);font-size:clamp(30px,5vw,42px);color:var(--ink)}
.pb-warn{color:var(--ink)!important}
.bfine{font-size:12.5px;color:var(--muted);margin-top:14px}
.bback{margin-top:30px;font-size:13px}
.bback a{color:var(--muted)}

@media(max-width:640px){
  .bfields{grid-template-columns:1fr}
  .bnum{gap:12px}
  .slots{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .totalbar button{padding:13px 18px}
}

/* ── booking wizard ───────────────────────────────────────────────────────────
   The draft's booking flow: a step rail, one pane at a time, categories as
   pictures, treatments as cards, and a running basket beside them. The engine's
   own classes (.cat .svc .nm .badge .pr .day .slot .n-sel) are untouched above. */

.pane{padding:0}
.bpane[hidden]{display:none}

/* step rail */
.bsteps{display:flex;flex-wrap:nowrap;gap:6px;list-style:none;margin:0 0 clamp(24px,4vw,36px);
padding:0 0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bsteps::-webkit-scrollbar{display:none}
.bsteps li{flex:1 1 0;min-width:92px;display:flex;align-items:baseline;gap:8px;padding:10px 12px;
border-top:2px solid var(--line);color:var(--muted);font-size:12.5px;white-space:nowrap}
.bsteps li i{font-style:normal;font-family:var(--body);font-size:10px;letter-spacing:.18em;
color:var(--gold);font-weight:600}
.bsteps li.on{border-top-color:var(--gold);color:var(--ink)}
.bsteps li.on span{font-weight:600}
.bsteps li.done{border-top-color:var(--gold-soft)}
.bsteps li.done i{color:var(--gold-soft)}

/* categories, as pictures */
.catchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
gap:10px;margin-bottom:24px}
.catchip{position:relative;display:block;padding:0;border:1px solid var(--line);background:#fff;
cursor:pointer;font-family:var(--body);overflow:hidden;text-align:left;
transition:border-color .18s,transform .18s}
.catchip:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.catchip.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.catchip img{display:block;width:100%;height:78px;object-fit:cover}
.catchip .cname{display:block;padding:10px 12px;font-size:12.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink);line-height:1.35}
.catchip.on .cname{color:var(--gold)}
.catchip .cpick{position:absolute;top:8px;right:8px;min-width:21px;height:21px;border-radius:50%;
background:var(--gold);color:#fff;font-size:11px;font-weight:600;display:flex;
align-items:center;justify-content:center;padding:0 5px}

/* treatments, as cards */
.tlist{display:grid;gap:9px}
.tcard{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;text-align:left;
width:100%;padding:15px 18px;border:1px solid var(--line);background:#fff;cursor:pointer;
font-family:var(--body);color:var(--ink);transition:border-color .16s,background .16s}
.tcard:hover{border-color:var(--gold-soft);background:var(--bone)}
.tcard.on{border-color:var(--gold);background:var(--cream)}
.tcard.enq{cursor:default;opacity:.92}
.tcard.enq:hover{border-color:var(--line);background:#fff}
.tcard .tname{font-size:15.5px;font-weight:500;line-height:1.45}
.tcard .tname small{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:2px}
.tcard .tname a{color:var(--gold)}
.tcard .tprice{font-family:var(--display);font-size:18px;white-space:nowrap}
.tcard .tick{font-style:normal;color:var(--gold)}
.tcard .badge{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.1em;
text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);padding:2px 6px}

/* who with */
.staffgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(10px,2vw,18px)}
.staffcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
padding:22px 18px;border:1px solid var(--line);background:#fff;cursor:pointer;
font-family:var(--body);color:var(--ink);transition:border-color .18s,transform .18s}
.staffcard:hover{border-color:var(--gold-soft);transform:translateY(-3px)}
.staffcard.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.staffcard img{width:84px;height:84px;border-radius:50%;margin-bottom:8px;background:var(--bone)}
.staffcard .sname{font-family:var(--display);font-size:17px}
.staffcard .srole{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.staffcard .sblurb{font-size:13px;line-height:1.6;color:var(--muted);margin-top:4px}
.staffnote{font-size:13px;color:var(--muted);margin-top:18px;border-left:2px solid var(--gold);
padding-left:14px;line-height:1.6}

/* a day the chosen person does not work */
.day.offday{opacity:.4}

/* the running basket */
.basket{border:1px solid var(--line);background:#fff;padding:24px;position:sticky;top:90px}
.basket h3{font-family:var(--display);font-size:17px;margin-bottom:14px;font-weight:400}
.bkt-empty{font-size:14px;color:var(--muted);line-height:1.6}
.bkt-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:4px 0}
.bkt-line b{font-weight:600}
#totals{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.bkt-hold b{font-family:var(--display);font-size:19px;font-weight:400}
.bkt-note{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.55}
.bkt-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.bkt-sum .tl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.bkt-sum .tv{font-family:var(--display);font-size:22px;font-weight:400}

/* back / continue */
.bnav{display:flex;gap:10px;margin-top:28px}
.bnav button{cursor:pointer;font-family:var(--body)}
.bnav button:disabled{opacity:.45;cursor:default}

@media(max-width:900px){
  .gside{grid-template-columns:minmax(0,1fr)}
  .basket{position:static;order:-1;margin-bottom:22px}
}
@media(max-width:760px){
  .catchips{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
  .catchip img{height:64px}
  .catchip .cname{padding:8px 10px;font-size:11.5px}
  .staffgrid{grid-template-columns:1fr}
  .staffcard{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto auto auto;
  gap:2px 14px;text-align:left;align-items:center;padding:16px}
  .staffcard img{width:60px;height:60px;margin:0;grid-row:1/4;align-self:center}
  .staffcard .sname{grid-column:2;font-size:16px}
  .staffcard .srole{grid-column:2}
  .staffcard .sblurb{grid-column:2;margin-top:4px}
  .bsteps li{padding:9px 8px;font-size:11.5px;min-width:84px}
  .tcard{padding:14px}
  .bnav{position:sticky;bottom:0;background:var(--bone);padding:12px 0;margin-top:20px;z-index:5}
}