/* =====================================================================
   BEAUTY ON ROSE  |  site-v2 design system (Catherine's brief, Sep 2026)
   Black creates the identity. Warm white creates the elegance.
   Photography creates the emotion. Deep red is the signature, not the
   decoration. Change any colour below and the whole site follows.
   ===================================================================== */
:root{
  --black:#090909; --char:#151515; --char2:#1d1b1a; --line:#34302d;
  --cream:#f3eee6; --cream-dim:#d4cdc4; --muted:#bdb5aa; --muted-dark:#8e867d;
  --red:#8f1728; --red-hover:#a81d31; --berry:#5c0f1c;
  --light:#eee9e1; --light-card:#f8f5f0; --light-line:#d7d0c7; --light-ink:#111; --light-muted:#5f5954;
  /* Buttons and feature cards. The colour themes at the end of this file override these. */
  --btn-bg:var(--red); --btn-fg:#fff; --btn-border:var(--red); --btn-hover-bg:var(--red-hover); --btn-hover-fg:#fff;
  --promo-bg:var(--red); --promo-fg:#fff; --promo-border:var(--red); --promo-muted:rgba(255,255,255,.85);
  --rose1:#72101f; --rose2:#9a1b2e; --rose3:#7c1224; --rose4:#5c0f1c;
  /* aliases so markup shared with site/ (treatment pages, terms) still resolves */
  --white:#f3eee6; --ink:#f3eee6; --silver-text:#bdb5aa; --silver-light:#34302d; --silver-dark:#8e867d; --graphite:#34302d;
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Jost",Arial,Helvetica,sans-serif;
  --gutter:clamp(18px,5vw,64px); --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.6}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.05;margin:0 0 18px;letter-spacing:.005em}
h1{font-size:clamp(2.8rem,7vw,5.6rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.5rem,2.4vw,2rem)}
h4{font-size:1.35rem;margin-bottom:8px}
p{margin:0 0 16px;max-width:64ch}
.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.wrap--narrow{width:min(880px,100% - 2*var(--gutter));margin-inline:auto}
.center{text-align:center}.center p{margin-inline:auto}
.eyebrow{display:block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.lede{font-size:1.12rem;color:var(--cream-dim);line-height:1.65}
.muted{color:var(--muted)}
.serif{font-family:var(--font-display)}
.italic{font-style:italic}
.redline{width:64px;height:3px;background:var(--red);margin:22px 0}
.rule{height:1px;background:var(--line);margin:40px 0}
.rule--short{width:64px;height:1px;background:var(--line);margin:28px 0}
.hidden{display:none!important}

/* ----- Buttons: red is the primary. Ghost on dark, black on light. ----- */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-border);padding:15px 26px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;font-weight:400;border-radius:2px;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:var(--btn-hover-bg);border-color:var(--btn-hover-bg);color:var(--btn-hover-fg)}
.btn .arrow::after{content:"\2192"}
.btn--ghost{background:transparent;border-color:#82796f;color:var(--cream)}
.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:var(--cream)}
.btn--ghost-white{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-white:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn--white{background:var(--cream);border-color:var(--cream);color:var(--black)}
.btn--white:hover{background:#fff;border-color:#fff}
.btn--black{background:var(--black);border-color:var(--black);color:var(--cream)}
.btn--black:hover{background:#000}
.btn--sm{padding:11px 18px;font-size:.66rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.textlink{color:var(--cream);text-decoration:none;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--red);padding-bottom:3px}
.textlink:hover{border-color:var(--cream)}

/* ----- Header ----- */
.header{position:sticky;top:0;z-index:50;background:rgba(9,9,9,.96);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;gap:22px;min-height:82px}
.logo{font-family:var(--font-display);font-weight:600;font-size:1.55rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--cream);margin-right:auto;white-space:nowrap}
.logo small{font-size:.62em;font-weight:400;letter-spacing:.02em;text-transform:lowercase;font-style:italic;margin:0 2px}
.nav{display:flex;gap:clamp(10px,1.2vw,18px);align-items:center}
.nav a{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-decoration:none;position:relative;padding:8px 0;white-space:nowrap}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--red);transition:right .35s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{right:0}
.nav .btn{padding:12px 20px;font-size:.66rem}
.cta{display:none;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.nav-toggle span{position:absolute;left:10px;right:10px;height:1px;background:var(--cream);transition:.3s}
.nav-toggle span:nth-child(1){top:15px}.nav-toggle span:nth-child(2){top:22px}.nav-toggle span:nth-child(3){top:29px}
@media (max-width:1080px){
  .nav{display:none}
  .cta{display:flex}
  .nav-toggle{display:block}
  /* Open menu: full-viewport black panel. (No backdrop-filter on the header, so fixed children position against the viewport.) */
  body.nav-open .nav{display:flex;flex-direction:column;position:fixed;inset:0;background:var(--black);z-index:60;justify-content:center;align-items:center;gap:20px;overflow-y:auto;padding:80px 0 40px}
  body.nav-open .nav a{font-family:var(--font-display);font-size:2rem;letter-spacing:.06em;text-transform:none}
  body.nav-open .nav .btn{font-family:var(--font-body);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;margin-top:14px}
  body.nav-open .nav-toggle{position:fixed;z-index:70;right:var(--gutter);top:19px}
  body.nav-open .nav-toggle span:nth-child(1){top:22px;transform:rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){top:22px;transform:rotate(-45deg)}
  body.nav-open{overflow:hidden}
}
@media (max-width:560px){.cta .btn{display:none}}

/* ----- Sections ----- */
.section{padding:clamp(64px,9vw,120px) 0}
.section--tight{padding:clamp(28px,4vw,48px) 0}
.section--char{background:var(--char)}
.section--char2{background:var(--char2)}
.section--light{background:var(--light);color:var(--light-ink)}
.section--light .eyebrow{color:#7b7168}
.section--light .lede,.section--light .muted{color:var(--light-muted)}
.section--light .textlink{color:var(--light-ink)}
.section--light .btn--ghost{border-color:#8e857b;color:var(--light-ink)}
.section--light .btn--ghost:hover{background:rgba(0,0,0,.05);border-color:var(--light-ink)}
.section--light .promo{background:var(--light-card);border-color:var(--light-line)}
.section--light .promo p,.section--light .promo ul{color:var(--light-muted)}
.section--light .rule,.section--light .rule--short{background:var(--light-line)}
.section--light .tlist,.section--light .tlist li,.section--light .faqs,.section--light .faq{border-color:var(--light-line)}
.section--light .tlist p,.section--light .faq p,.section--light .steps > div{color:var(--light-muted)}
.section--light .steps > div{border-color:var(--light-line)}
.section--light .steps > div::before,.section--light .tlist .price small{color:#8e857b}
.section--light .faq summary::after{border-color:var(--light-ink)}
.section--light .checks li::before{border-color:var(--red)}
.section--light .card{background:#111}
.section--light .img-frame::after{border-color:rgba(0,0,0,.18)}
.section--berry{background:linear-gradient(135deg,#1a0c0f,#3d0c17 60%,#5c0f1c)}

/* ----- Trust bar ----- */
.trust{border-block:1px solid var(--line);padding:18px 0;background:var(--black)}
.trust .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.trust span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--red);transform:rotate(45deg);margin-right:12px;vertical-align:middle}

/* ----- Hero: photo-led, full bleed ----- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,9,9,.25) 0%,rgba(9,9,9,.15) 40%,rgba(9,9,9,.92) 100%)}
.hero__content{width:100%;padding:clamp(120px,16vw,200px) 0 clamp(56px,7vw,96px)}
.hero .eyebrow{color:var(--cream-dim)}
.hero h1{margin-bottom:10px}
.hero h1 .sub{display:block;font-size:.42em;font-weight:300;letter-spacing:.08em;margin-top:12px;color:var(--cream-dim)}
.hero .lede{color:var(--cream-dim);max-width:620px;font-size:1.15rem}
.hero--page{min-height:min(70vh,680px)}
.hero--short{min-height:min(52vh,520px)}
.hero__meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim)}
.facts{display:flex;flex-wrap:wrap;gap:26px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:14px 0 26px}

/* ----- Grids and splits ----- */
.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split--reverse > :first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr !important}.split--reverse > :first-child{order:0}}

/* ----- Cards (photo gateways) ----- */
.card{position:relative;display:block;overflow:hidden;background:var(--char);color:var(--cream);aspect-ratio:4/5;text-decoration:none;border:1px solid var(--line)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter 1.4s var(--ease);filter:saturate(.8) brightness(.92)}
.card:hover img{transform:scale(1.04);filter:saturate(1) brightness(1)}
.card__body{position:absolute;inset:auto 0 0 0;padding:28px;padding-top:110px;background:linear-gradient(180deg,rgba(9,9,9,0) 0%,rgba(9,9,9,.55) 40%,rgba(9,9,9,.94) 100%)}
.card__body h3{margin:0 0 6px;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.card__body p{margin:0;font-size:.88rem;color:var(--cream-dim);max-width:36ch}
.card__body .eyebrow{margin-bottom:10px;color:var(--cream-dim)}
.card__body .go{display:inline-block;margin-top:14px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--red);padding-bottom:3px}
.card--wide{aspect-ratio:16/10}
.card--square{aspect-ratio:1}
.card--tall{aspect-ratio:3/4}
.card__index{position:absolute;top:22px;left:24px;font-family:var(--font-display);font-size:1.1rem;color:var(--muted);letter-spacing:.1em}

/* ----- Text cards / promos ----- */
.promo{border:1px solid var(--line);padding:34px;display:flex;flex-direction:column;gap:14px;background:var(--char)}
.promo h3,.promo h4{margin-bottom:4px}
.promo p{color:var(--cream-dim);margin:0;font-size:.95rem}
.promo ul{margin:0;padding-left:18px;font-size:.92rem;color:var(--cream-dim)}
.promo .price{font-family:var(--font-display);font-size:2.2rem;line-height:1;margin-top:6px}
.promo .price s{color:var(--muted-dark);font-size:1.2rem;margin-right:10px}
.promo .btn,.promo .textlink{align-self:flex-start;margin-top:auto}
.promo--red{background:var(--promo-bg);border-color:var(--promo-border);color:var(--promo-fg)}
.promo--red p,.promo--red ul,.promo--red .eyebrow{color:var(--promo-muted)}
.promo--red .btn{background:var(--promo-fg);border-color:var(--promo-fg);color:var(--promo-bg)}
.promo--red .btn:hover{background:var(--cream);border-color:var(--cream);color:var(--black)}

/* ----- Treatment lists ----- */
.tlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tlist li{display:grid;grid-template-columns:1fr auto;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tlist h4{margin:0 0 4px;font-size:1.3rem}
.tlist h4 a{text-decoration:none}
.tlist h4 a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}
.tlist p{margin:0;font-size:.9rem;color:var(--muted);max-width:60ch}
.tlist .price{font-family:var(--font-display);font-size:1.25rem;white-space:nowrap;text-align:right}
.tlist .price small{display:block;font-family:var(--font-body);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark)}
@media (max-width:560px){.tlist li{grid-template-columns:1fr}.tlist .price{text-align:left}}

/* ----- Steps, checks, quotes ----- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;counter-reset:step}
.steps > div{position:relative;padding:22px 0 0;border-top:1px solid var(--line);counter-increment:step;font-size:.9rem;color:var(--cream-dim);min-width:0}
.steps > div::before{content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-size:1.3rem;color:var(--red);display:block;margin-bottom:8px}
.steps b{display:block;font-weight:400;font-family:var(--font-display);font-size:1.25rem;margin-bottom:4px;color:inherit}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem}
.checks li::before{content:"";flex:none;margin-top:9px;width:7px;height:7px;border:1px solid var(--red);transform:rotate(45deg)}
.quote{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.35;font-style:italic;margin:0 0 18px}
.quote__by{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.img-frame{position:relative}
.img-frame::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.28);pointer-events:none}
.img-frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.img-frame--wide img{aspect-ratio:16/10}
.img-frame--square img{aspect-ratio:1}

/* ----- Concern pathway chips ----- */
.concerns{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.concern{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--line);text-decoration:none;font-size:.9rem;transition:border-color .3s var(--ease),background .3s var(--ease)}
.concern:hover{border-color:var(--red);background:var(--char)}
.concern .arrow::after{content:"\2192";color:var(--red)}
.section--light .concern{border-color:var(--light-line)}
.section--light .concern:hover{background:#fff}
@media (max-width:560px){.concerns{grid-template-columns:1fr}}

/* ----- Numbers strip ----- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.strip .num{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);line-height:1;color:var(--cream)}
.strip .lbl{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
@media (max-width:860px){.strip{grid-template-columns:repeat(2,1fr)}}

/* ----- Reviews ----- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{border:1px solid var(--line);padding:30px;background:var(--char)}
.review .stars{color:var(--red);letter-spacing:.2em;font-size:.85rem;margin-bottom:14px}
.review p{font-family:var(--font-display);font-size:1.2rem;line-height:1.4;color:var(--cream)}
.review .who{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.reviews{grid-template-columns:1fr}}

/* ----- Team ----- */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px;text-align:center}
.team img,.team__mono{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:12px;filter:saturate(.85)}
.team__mono{display:flex;align-items:center;justify-content:center;background:var(--char);border:1px solid var(--line);font-family:var(--font-display);font-size:2.4rem;color:var(--muted)}
.team b{display:block;font-weight:400;font-family:var(--font-display);font-size:1.25rem}
.team span{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ----- FAQ ----- */
.faqs{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--font-display);font-size:1.3rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1px solid var(--cream);border-bottom:1px solid var(--cream);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{margin:0 0 22px;color:var(--cream-dim);font-size:.95rem;max-width:70ch}

/* ----- Hours, map, legal ----- */
.hours-table{border-collapse:collapse;width:100%;max-width:360px}
.hours-table td{padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.hours-table td:last-child{text-align:right;color:var(--cream-dim)}
.map{aspect-ratio:16/7;border:1px solid var(--line);filter:grayscale(1) invert(.92) contrast(.9)}
.map iframe{width:100%;height:100%;border:0}
.legal h2{font-size:1.6rem;margin-top:40px}
.legal p,.legal li{color:var(--cream-dim);max-width:75ch}
.two-col-text{columns:2;column-gap:48px}
.two-col-text p{break-inside:avoid}
@media (max-width:760px){.two-col-text{columns:1}}

/* ----- Gift box motif ----- */
.giftbox{border:1px solid #4b3b3d;padding:46px;text-align:center;background:#0c0c0c}
.giftbox .ribbon{height:5px;background:var(--red);width:70%;margin:25px auto}

/* ----- Footer with restrained rose / berry signature ----- */
.footer{border-top:1px solid var(--line);padding:56px 0 0;background:var(--black)}
.footer .cols{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:30px;padding-bottom:40px}
.footer h5{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px;color:var(--cream)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer a{text-decoration:none;color:var(--muted);font-size:.9rem}
.footer a:hover{color:var(--cream)}
.footer p{color:var(--muted);font-size:.92rem}
.footer .social{display:flex;gap:10px;margin-top:14px}
.footer .social a{width:40px;height:40px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;letter-spacing:.1em}
.footer .apps{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.footer .apps a{border:1px solid var(--line);padding:8px 12px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.footer .fine{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.72rem;color:var(--muted-dark)}
.rose-footer{height:90px;background:
  radial-gradient(circle at 18% 120%,var(--rose1) 0 8%,transparent 9%),
  radial-gradient(circle at 28% 120%,var(--rose2) 0 10%,transparent 11%),
  radial-gradient(circle at 78% 120%,var(--rose3) 0 9%,transparent 10%),
  radial-gradient(circle at 88% 125%,var(--rose4) 0 7%,transparent 8%),
  linear-gradient(#090909,#13090b);opacity:.9}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer .cols{grid-template-columns:1fr}}

/* ----- Mobile sticky booking bar and concierge ----- */
.mobile-book{display:none}
@media (max-width:760px){
  .mobile-book{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:45;background:var(--black);border-top:1px solid var(--line)}
  .mobile-book a{padding:16px;text-align:center;text-decoration:none;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream)}
  .mobile-book a:last-child{background:var(--red);color:#fff}
  body{padding-bottom:54px}
}

/* ----- Reveal on scroll ----- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ----- Focus states (accessibility) ----- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* =====================================================================
   COLOUR THEMES (review only). js/theme.js sets data-theme on <html>.
   When Catherine picks one, copy that block's values into :root above,
   delete the other blocks, the .themer block in the footer and js/theme.js.
   Every solid button follows --btn-* (header, hero, cards, mobile bar);
   outline buttons stay outlines and take the accent on hover.
   ===================================================================== */
[data-theme="berry"]{
  --red:#5e1220; --red-hover:#7a1729; --berry:#3d0b15;
  --btn-bg:#5e1220; --btn-fg:#fff; --btn-border:#5e1220; --btn-hover-bg:var(--cream); --btn-hover-fg:var(--black);
  --promo-bg:var(--char2); --promo-fg:var(--cream); --promo-border:#5e1220; --promo-muted:var(--cream-dim);
  --rose1:#4a0d18; --rose2:#6a1424; --rose3:#52101c; --rose4:#3d0b15;
}
[data-theme="berry"] .section--berry{background:linear-gradient(135deg,#120608,#2a0810 60%,#3d0b15)}
[data-theme="berry"] .promo--red .btn{background:#5e1220;color:#fff;border-color:#5e1220}

[data-theme="champagne"]{
  --red:#c9a66b; --red-hover:#dcbc82; --berry:#5a4324;
  --btn-bg:#c9a66b; --btn-fg:var(--black); --btn-border:#c9a66b; --btn-hover-bg:var(--cream); --btn-hover-fg:var(--black);
  --promo-bg:var(--char2); --promo-fg:var(--cream); --promo-border:#c9a66b; --promo-muted:var(--cream-dim);
  --rose1:#8a6d3b; --rose2:#c9a66b; --rose3:#a3824a; --rose4:#5a4324;
}
[data-theme="champagne"] .section--berry{background:linear-gradient(135deg,#171207,#3a2c12 60%,#5a4324)}
[data-theme="champagne"] .promo--red .btn{background:#c9a66b;color:var(--black);border-color:#c9a66b}
[data-theme="champagne"] .review .stars{color:#c9a66b}

[data-theme="silver"]{
  --red:#b9b9b9; --red-hover:#d6d6d6; --berry:#2a2a2a;
  --btn-bg:#fff; --btn-fg:var(--black); --btn-border:#fff; --btn-hover-bg:#d6d6d6; --btn-hover-fg:var(--black);
  --promo-bg:#fff; --promo-fg:var(--black); --promo-border:#fff; --promo-muted:#4a4a4a;
  --rose1:#3a3a3a; --rose2:#5a5a5a; --rose3:#454545; --rose4:#2a2a2a;
  --cream:#f4f4f4; --cream-dim:#cfcfcf; --muted:#a8a8a8; --light:#ececec; --light-card:#f7f7f7; --light-line:#d4d4d4;
}
[data-theme="silver"] .section--berry{background:linear-gradient(135deg,#111,#2a2a2a 60%,#3a3a3a)}
[data-theme="silver"] .review .stars{color:#888}

/* solid button variants follow the theme too (header Book Now is a plain .btn; hero and cards use these) */
[data-theme] .btn--white,[data-theme] .btn--black{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-border)}
[data-theme] .btn--white:hover,[data-theme] .btn--black:hover{background:var(--btn-hover-bg);color:var(--btn-hover-fg);border-color:var(--btn-hover-bg)}
[data-theme="silver"] .section--light .btn--black,[data-theme="silver"] .section--light .btn{background:var(--black);color:#fff;border-color:var(--black)}
[data-theme="silver"] .section--light .btn--black:hover,[data-theme="silver"] .section--light .btn:hover{background:#3a3a3a;border-color:#3a3a3a}
/* outline buttons */
[data-theme] .btn--ghost{background:transparent;color:var(--cream);border-color:#82796f}
[data-theme] .btn--ghost:hover{background:var(--red);color:var(--btn-fg);border-color:var(--red)}
[data-theme] .btn--ghost-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
[data-theme] .btn--ghost-white:hover{background:var(--red);color:var(--btn-fg);border-color:var(--red)}
[data-theme] .section--light .btn--ghost{color:var(--light-ink);border-color:#8e857b}
/* everything else that carries the accent */
[data-theme] .mobile-book a:last-child{background:var(--red);color:var(--btn-fg)}

/* the switcher itself */
.themer{position:fixed;left:18px;bottom:18px;z-index:47;font-family:var(--font-body)}
.themer__btn{background:var(--char);color:var(--cream);border:1px solid var(--line);padding:12px 16px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:10px;border-radius:2px}
.themer__btn .swatch{width:12px;height:12px;border-radius:50%;background:var(--red);border:1px solid rgba(255,255,255,.4)}
.themer__panel{display:none;position:absolute;left:0;bottom:52px;background:var(--char);border:1px solid var(--line);padding:14px;width:240px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.themer.open .themer__panel{display:block}
.themer__panel p{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.themer__opt{display:flex;align-items:center;gap:12px;width:100%;background:none;border:1px solid transparent;color:var(--cream);padding:9px 10px;cursor:pointer;text-align:left;font-family:var(--font-body);font-size:.9rem;border-radius:2px}
.themer__opt:hover{border-color:var(--line)}
.themer__opt[aria-pressed="true"]{border-color:var(--cream)}
.themer__opt .swatch{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.35)}
.themer__opt small{display:block;color:var(--muted);font-size:.72rem}
@media (max-width:760px){.themer{bottom:66px;left:14px}}


/* ===== September 2026 visual/content polish ===== */
/* About / Our Story hero: light imagery needs dark copy */
.hero--about-light .hero__shade{background:linear-gradient(90deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.58) 48%,rgba(255,255,255,.12) 100%)}
.hero--about-light .hero__content,.hero--about-light .hero__content h1,.hero--about-light .hero__content .lede{color:#111}
.hero--about-light .hero__content .eyebrow{color:#5d101c}
.hero--about-light .btn--ghost-white{color:#111;border-color:rgba(17,17,17,.48)}
.hero--about-light .btn--ghost-white:hover{background:#111;color:#fff}

/* Beauty hero: preserve the hero size but show much more of the portrait video.
   The existing hero image remains behind it so desktop never has empty side bars. */
.hero__media .beauty-hero-video{width:auto!important;height:112%!important;left:50%!important;right:auto!important;top:-6%!important;bottom:auto!important;transform:translateX(-50%);object-fit:contain!important;object-position:center center!important}
@media (max-width:760px){
  .hero__media .beauty-hero-video{width:100%!important;height:100%!important;left:0!important;top:0!important;transform:none;object-fit:cover!important;object-position:center 24%!important}
}

/* Team cards + reusable profile popup */
.team-card{appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:center;padding:0;margin:0;width:100%}
button.team-card{cursor:pointer}
button.team-card:hover img,button.team-card:hover .team__mono{transform:scale(1.025);filter:saturate(.95)}
.team-card img,.team-card .team__mono{transition:transform .25s ease,filter .25s ease}
.team-card__hint{display:block!important;margin-top:7px!important;font-size:.58rem!important;letter-spacing:.12em!important;color:var(--red)!important}
.team-modal{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72)}
.team-modal.open{display:flex}
.team-modal__panel{position:relative;width:min(620px,100%);max-height:min(78vh,720px);overflow:auto;background:#f3f0e9;color:#171717;padding:44px 42px;box-shadow:0 28px 80px rgba(0,0,0,.35)}
.team-modal__panel h3{color:#171717;margin-bottom:6px}
.team-modal__panel .eyebrow{color:#721523}
.team-modal__role{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#777;margin-bottom:24px}
.team-modal__copy{font-size:1rem;line-height:1.72;color:#333}
.team-modal__close{position:absolute;top:14px;right:16px;border:0;background:transparent;font-size:1.8rem;line-height:1;cursor:pointer;color:#171717}
@media(max-width:620px){.team-modal__panel{padding:38px 24px}}

/* Careers imagery */
.career-path{padding:0!important;overflow:hidden}
.career-path__image{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:saturate(.9)}
.career-path__body{padding:24px 24px 28px}
.career-image-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.career-image-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:760px){.career-image-strip{grid-template-columns:1fr 1fr}.career-image-strip img:last-child{display:none}}

/* Instagram integration area — static fallback until the live feed provider is connected. */
.instagram-band{padding:64px 0;background:#0d0d0d;border-top:1px solid var(--line)}
.instagram-band__head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}
.instagram-band__head h2{margin:4px 0 0;font-size:clamp(2rem,4vw,3.4rem)}
.instagram-band__handle{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--cream-dim)}
.instagram-feed-slot{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.instagram-tile{display:block;position:relative;overflow:hidden;aspect-ratio:1;background:#181818}
.instagram-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease,opacity .35s ease;opacity:.9}
.instagram-tile:hover img{transform:scale(1.035);opacity:1}
.instagram-tile::after{content:'IG';position:absolute;right:10px;bottom:8px;font-size:.58rem;letter-spacing:.12em;color:white;background:rgba(0,0,0,.48);padding:4px 6px}
@media(max-width:900px){.instagram-feed-slot{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.instagram-band{padding:46px 0}.instagram-band__head{align-items:flex-start;flex-direction:column}.instagram-feed-slot{grid-template-columns:repeat(2,1fr)}}

/* ===== FINAL VISUAL / READABILITY SWEEP — SEP 2026 ===== */
/* Beauty hero: full-width, but pulled back a touch so Tash feels less dominant and more of the salon reads. */
.hero__media:has(.beauty-hero-video){background:#0c0c0c}
.hero__media .beauty-hero-video{
  width:100%!important;
  height:100%!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  transform:scale(.965)!important;
  transform-origin:center center!important;
  object-fit:cover!important;
  object-position:center 19%!important;
}
@media(max-width:760px){
  .hero__media .beauty-hero-video{transform:none!important;object-position:center 20%!important;}
}

/* About hero: make the date accents intentionally burgundy, not pale grey. */
.hero--about-light .hero__content .eyebrow,
.hero--about-light .hero__content h1 .sub{
  color:var(--red)!important;
  opacity:1!important;
}

/* Treatment information panels: stronger contrast on the light background. */
.section--light .eyebrow{
  color:#5c0f1c;
  font-weight:500;
}
.section--light .checks li,
.section--light .steps > div,
.section--light .steps b,
.section--light .lede,
.section--light .muted{
  color:#3f3935;
}
.section--light .checks li::before{border-color:#8f1728;}
.section--light .steps > div::before{color:#72101f;}

/* Green Lounge: exact selected salon image, gently darkened for a quieter spa mood. */
.green-lounge-img{filter:brightness(.68) saturate(.78) contrast(1.06)!important;}

/* ===== FINAL APPROVED SWEEP — 9 SEP 2026 ===== */
.section--gift-red{background:var(--red)!important}
/* Beauty portrait video: reduce its dominance and show more of the original frame without a second photo behind it. */
.hero:has(.beauty-hero-video){min-height:min(58vh,560px)!important;background:#0c0c0c}
.hero__media .beauty-hero-video{transform:scale(.90)!important;object-position:center 16%!important;background:#0c0c0c}
@media(max-width:760px){.hero:has(.beauty-hero-video){min-height:58vh!important}.hero__media .beauty-hero-video{transform:scale(.94)!important;object-position:center 16%!important}}
/* The temporary colour-review control has been retired. */
.themer{display:none!important}
.green-lounge-img{filter:brightness(.82) saturate(.88) contrast(1.04)!important}

/* Final About-page portrait treatment: match Catherine to the monochrome team style. */
.team img.team-photo--catherine{filter:grayscale(1) contrast(.98)!important;transform:scale(.90);background:#eee;object-position:center 35%}
button.team-card:hover img.team-photo--catherine{filter:grayscale(1) contrast(.98)!important;transform:scale(.93)}