/* ============================================
   Glamsoul Beauty – Stylesheet
   ============================================ */

:root {
  /* Warm off-white ground — cleaner and less yellow than before */
  --color-bg: #fbf9f5;
  --color-bg-alt: #f2ece2;      /* champagne */
  --color-bg-blush: #f7f1e8;
  /* Near-black and charcoal, per brand direction */
  --color-ink: #14110e;
  --color-charcoal: #201c18;
  --color-ink-soft: #4a423a;
  --color-muted: #8b8177;
  --color-line: #e4dccf;
  --color-line-soft: #efe9de;
  /* Glamsoul gold — refined, less brassy */
  --color-gold: #c2a35f;
  --color-gold-dark: #8f7233;
  --color-gold-light: #e0cb9e;
  --color-white: #ffffff;

  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-script: "Cormorant Garamond", cursive;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 2px 12px rgba(20, 17, 14, 0.05);
  --shadow-md: 0 18px 46px rgba(20, 17, 14, 0.09);
  --shadow-lg: 0 32px 80px rgba(20, 17, 14, 0.14);
  --shadow-warm: 0 28px 72px rgba(143, 114, 51, 0.13);

  --radius: 2px;
  --container: 1240px;
  --gutter: 24px;
  --nav-h: 90px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.24  0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.55;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: multiply;
}

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

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-gold); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--color-gold-dark); }

h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 400; }
h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 400; }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.15rem; }

p { color: var(--color-ink-soft); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-gold);
}
.eyebrow--plain::before, .eyebrow--plain::after { display: none; }

/* Decorative ornament divider (pure CSS, no glyphs) */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px auto 26px;
}
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  width: 70px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.ornament::after { background: linear-gradient(90deg, var(--color-gold), transparent); }
.ornament em {
  width: 8px; height: 8px;
  background: var(--color-gold);
  transform: rotate(45deg);
  display: inline-block;
  position: relative;
  border: 1px solid var(--color-gold);
}
.ornament em::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--color-bg);
}
.ornament--dark em::before { background: var(--color-ink); }
.ornament--sm::before, .ornament--sm::after { width: 34px; }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 34px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--color-ink);
  border-radius: 100px;
  background: transparent;
  color: var(--color-ink);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "→";
  transition: transform .3s ease;
  font-size: 1.1em;
}
.btn:hover { background: var(--color-ink); color: var(--color-white); }
.btn:hover::after { transform: translateX(4px); }

.btn--gold {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  border-color: var(--color-gold-dark);
  color: #fff;
  box-shadow: 0 6px 20px rgba(140, 108, 62, 0.28);
}
.btn--gold:hover {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold-dark));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(140, 108, 62, 0.38);
}

.btn--ghost { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--color-ink); }
/* Ghost button for the dark bands. Used on 66 pages but never defined, so it
   fell back to .btn's near-black text on a near-black background. */
.btn--ghost-dark { border-color: rgba(233,211,162,0.5); color: var(--color-gold-light); }
.btn--ghost-dark:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-ink);
}

.btn--sm { padding: 10px 20px; font-size: 0.75rem; }

/* ============================================
   Top bar + Nav
   ============================================ */
.topbar {
  background: var(--color-ink);
  color: #ded1bd;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.topbar a { color: #efe6da; }
.topbar a:hover { color: var(--color-gold); }
.topbar__contact span { margin-right: 18px; }
.topbar__hours span + span {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(222, 209, 189, 0.28);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 245, 238, 0.90);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--color-line-soft);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  letter-spacing: 0.01em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 13px;
  /* Pull left off the container edge and keep clear air before the menu */
  margin-left: -10px;
  margin-right: 10px;
  flex: 0 0 auto;
}
/* The approved Glamsoul lotus mark */
.brand__mark {
  display: block;
  width: auto;
  height: 44px;
  flex: 0 0 auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.brand__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}
.brand__name { font-weight: 400; }
.brand__name em { font-style: italic; color: var(--color-gold-dark); font-weight: 400; }
.brand__tag {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 0.54rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-muted);
  white-space: nowrap;
}
/* Hairline rule leading into the tagline, for a proper lockup feel */
.brand__tag::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 1px;
  margin-right: 7px;
  vertical-align: 0.3em;
  background: var(--color-gold);
}
/* The footer brand sits in a normal text column — keep it flush */
.footer .brand { margin-left: 0; margin-right: 0; }
.footer .brand__tag { color: #a99e91; }

/* Five top-level items now, so the bar has room to breathe again */
@media (max-width: 1100px) {
  .nav__menu { gap: 26px; }
  .brand__tag { letter-spacing: 0.2em; }
}
@media (max-width: 940px) {
  .nav__menu { gap: 20px; }
  .nav__menu > li > a { font-size: 0.8rem; letter-spacing: 0.11em; }
}

@media (max-width: 900px) {
  .brand { font-size: 1.5rem; gap: 10px; }
  .brand__mark { height: 36px; }
  .brand__tag { font-size: 0.5rem; letter-spacing: 0.2em; }
  .brand__tag::before { width: 11px; margin-right: 6px; }
}
@media (max-width: 400px) {
  .brand { font-size: 1.28rem; }
  .brand__tag { letter-spacing: 0.14em; }
}

.nav__menu {
  display: flex;
  list-style: none;
  gap: 12px;
  align-items: center;
}
.nav__menu > li > a {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 0;
  position: relative;
}
.nav__menu > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-gold);
  transition: right .3s ease;
}
.nav__menu > li > a:hover::after,
.nav__menu > li.active > a::after { right: 0; }

/* ============================================
   Treatments mega menu
   ============================================ */
.has-dropdown { position: relative; }


/* Invisible bridge across the gap, so moving the cursor from the nav item
   into the panel doesn't drop the hover and close the menu mid-reach.
   It lives on the panel (not the nav item) because on desktop the nav item is
   position:static so the panel can anchor to the header instead — see .mega. */
@media (min-width: 1151px) {
  /* Anchoring the panel to the nav item centred a 1160px panel on an item
     sitting far right, pushing it past the viewport and creating a horizontal
     scrollbar between ~1100-1300px. Static items let .mega resolve against
     .nav (sticky, so a containing block) and centre on the page instead. */
  .has-dropdown { position: static; }
  .mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -26px;
    height: 26px;
  }
}

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: -20px;
  background: #fff;
  min-width: 240px;
  padding: 14px 0;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-line);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* Short delay on close so a slightly off-line cursor path is forgiven */
  transition: opacity .2s ease .18s, visibility .2s ease .18s, transform .2s ease .18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.dropdown li a {
  display: block;
  padding: 11px 26px;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.dropdown li a:hover { background: var(--color-bg-alt); color: var(--color-gold-dark); }
/* Divider before the two cross-cutting links */
.dropdown__sep {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-line-soft);
}

.nav__cta { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; margin-left: clamp(16px, 2vw, 32px); }
/* the menu was growing into the CTA and squeezing "Book Now" onto two lines */
.nav__cta .btn { white-space: nowrap; }
.nav__book { display: none; }

.nav__toggle {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 6px; right: 6px;
  height: 2px;
  background: var(--color-ink);
  transition: all .25s ease;
}
.nav__toggle span:nth-child(1) { top: 11px; }
.nav__toggle span:nth-child(2) { top: 17px; }
.nav__toggle span:nth-child(3) { top: 23px; }
.nav.open .nav__toggle span:nth-child(1) { transform: rotate(45deg); top: 17px; }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: rotate(-45deg); top: 17px; }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h) - 40px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(10,8,6,0.88) 0%,
      rgba(10,8,6,0.72) 38%,
      rgba(10,8,6,0.40) 70%,
      rgba(10,8,6,0.22) 100%),
    url("../images/pexels-6187418.webp") center 38%/cover no-repeat;
  transform: scale(1.02);
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 110px 0;
  max-width: 780px;
  color: #fff;
}
.hero__inner .eyebrow {
  color: #f2d7a6;
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  letter-spacing: 0.24em;
  font-weight: 700;
}
.hero__inner .eyebrow::before, .hero__inner .eyebrow::after {
  background: var(--color-gold);
  width: 44px;
  height: 2px;
}
.hero h1 { color: #fff; margin-bottom: 26px; line-height: 1.05; letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; color: #f4dcab; }
/* keyword line inside the H1 — reads as a subtitle, not a second headline */
.hero__h1sub {
  display: block;
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.hero p {
  color: rgba(255,255,255,0.92);
  font-size: 1.18rem;
  max-width: 560px;
  margin-bottom: 40px;
  font-weight: 300;
  line-height: 1.7;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

.hero__meta {
  position: absolute;
  bottom: 60px;
  right: 40px;
  z-index: 2;
  background: rgba(255,255,255,0.95);
  padding: 24px 30px;
  border: 1px solid rgba(184, 153, 104, 0.3);
  max-width: 280px;
  box-shadow: var(--shadow-warm);
  text-align: center;
  backdrop-filter: blur(10px);
}
.hero__meta::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  margin: 0 auto 12px;
}
.hero__meta strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.65rem;
  color: var(--color-gold-dark);
  margin: 6px 0;
  letter-spacing: 4px;
}
.hero__meta small {
  color: var(--color-muted);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
}

/* ============================================
   Section utilities
   ============================================ */
.section { padding: 120px 0; position: relative; }
.section--alt { background: var(--color-bg-alt); }
.section--blush { background: var(--color-bg-blush); }
.section--dark { background: var(--color-ink); color: #efe6da; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.75); }

.section__head { text-align: center; max-width: 760px; margin: 0 auto 70px; }
.section__head p { margin-top: 18px; font-size: 1.05rem; line-height: 1.75; }
/* links inside intro copy inherit `color: inherit` globally, which makes them
   indistinguishable from body text — mark them properly */
.section__head p a,
.prose p a {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.section__head p a:hover,
.prose p a:hover { color: var(--color-ink); }
.section__head h2 { line-height: 1.1; }

/* ============================================
   Featured / cards grid
   ============================================ */
.grid { display: grid; gap: 30px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--color-line-soft);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-warm); border-color: var(--color-gold-light); }
.card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
  background-color: var(--color-bg-alt);
  transition: transform .8s ease;
}
.card:hover .card__img { transform: scale(1.05); }
.card__body { padding: 30px 26px 28px; }
.card__body h3 { font-size: 1.5rem; margin-bottom: 10px; letter-spacing: -0.005em; }
.card__body p { font-size: 0.95rem; margin-bottom: 20px; line-height: 1.65; }
.card__link {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-gold-dark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.card__link::after { content: "→"; transition: transform .25s ease; }
.card__link:hover { border-color: var(--color-gold); }
.card__link:hover::after { transform: translateX(5px); }

/* Category card variant */
.cat-card {
  position: relative;
  height: 440px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 36px;
  background-size: cover;
  background-position: center;
  transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}
.cat-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 20%, rgba(20,15,10,0.8) 100%);
  transition: background .4s ease;
  z-index: 1;
}
.cat-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,0.25);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96);
  transition: all .4s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-warm); }
.cat-card:hover::before { background: linear-gradient(180deg, rgba(0,0,0,0.15) 10%, rgba(20,15,10,0.85) 100%); }
.cat-card:hover::after { opacity: 1; transform: scale(1); }
.cat-card__body { position: relative; z-index: 3; }
.cat-card h3 { color: #fff; font-size: 2.1rem; margin-bottom: 8px; letter-spacing: -0.01em; font-weight: 400; }
.cat-card__count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-gold-light);
  letter-spacing: 0.06em;
  text-transform: none;
}
.cat-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: border-color .3s ease;
}
.cat-card__link::after { content: "→"; transition: transform .25s ease; }
.cat-card:hover .cat-card__link { border-color: var(--color-gold-light); }
.cat-card:hover .cat-card__link::after { transform: translateX(4px); }

/* ============================================
   Process / How we work
   ============================================ */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; position: relative; }
.process__step { text-align: center; padding: 0 10px; position: relative; }
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 42px; right: -25px;
  width: 50px; height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  display: none;
}
@media (min-width: 1025px) {
  .process__step:not(:last-child)::after { display: block; }
}
.process__num {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, var(--color-bg-alt));
  color: var(--color-gold-dark);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 26px;
  border: 1px solid var(--color-gold-light);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.8), 0 8px 24px rgba(140, 108, 62, 0.12);
  position: relative;
}
.process__num::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
}
.process__step h3 { margin-bottom: 12px; font-size: 1.5rem; }

/* ============================================
   About split
   ============================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.split__img {
  /* real client photos are square or landscape; forcing them into a 4:5 frame
     with background-size:cover cropped the edges off before/after shots.
     Pages pass their own ratio via --img-ar so nothing is cut. */
  aspect-ratio: var(--img-ar, 4/5);
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  position: relative;
  box-shadow: var(--shadow-warm);
}
.split__img::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
/* The decorative inset rule is fine over an atmospheric stock shot, but on a
   real before/after it draws a line straight across the comparison. Pages that
   set their own --img-ar are showing client photography, so drop it there. */
.split__img[style*="--img-ar"]::after { content: none; }
.split__img::before { content: none; }
.split__body h2 { margin-bottom: 20px; }
.split__body p { margin-bottom: 16px; }
.split__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}
.split__stats strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--color-gold-dark);
}
.split__stats small { color: var(--color-muted); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ============================================
   Testimonials
   ============================================ */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.testimonial {
  background: #fff;
  padding: 44px 36px 36px;
  border: 1px solid var(--color-line-soft);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: all .4s ease;
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-warm); }
.testimonial::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--color-gold-light);
  position: absolute;
  top: -8px; left: 22px;
  line-height: 1;
  font-weight: 700;
}
.testimonial__stars { color: #c99a3f; margin-bottom: 18px; letter-spacing: 4px; font-size: 1.05rem; }
.testimonial p { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--color-ink); margin-bottom: 22px; line-height: 1.55; font-weight: 400; }
.testimonial__author { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-gold-dark); font-weight: 600; }
.testimonial__author::before { content: "— "; }

/* ============================================
   Booking CTA banner
   ============================================ */
.cta-banner {
  position: relative;
  padding: 140px 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(20,15,10,0.78), rgba(20,15,10,0.85)),
    url("../images/pexels-7446656.webp") center/cover;
}
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(184, 153, 104, 0.35);
  pointer-events: none;
}
.cta-banner__inner { position: relative; z-index: 2; }
.cta-banner h2 {
  color: #fff;
  max-width: 780px;
  margin: 0 auto 24px;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.1;
}
.cta-banner h2 em { color: #e6c99a; }
.cta-banner p { color: rgba(255,255,255,0.85); max-width: 620px; margin: 0 auto 40px; font-size: 1.1rem; line-height: 1.7; font-weight: 300; }
.cta-banner .eyebrow::before, .cta-banner .eyebrow::after { background: var(--color-gold-light); }

/* ============================================
   Page header (interior pages)
   ============================================ */
.page-header {
  background: linear-gradient(180deg, var(--color-bg-blush), var(--color-bg-alt));
  padding: 110px 0 90px;
  text-align: center;
  border-bottom: 1px solid var(--color-line-soft);
  position: relative;
}
.page-header::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--color-gold);
}
/* Banner labels carry the gold accent — give them enough weight to read as a
   heading rather than a caption. */
.page-header .eyebrow {
  margin-bottom: 20px;
  font-size: clamp(0.84rem, 1.5vw, 0.98rem);
  letter-spacing: 0.26em;
  font-weight: 700;
  color: var(--color-gold-dark);
}
.page-header .eyebrow::before,
.page-header .eyebrow::after { width: 44px; height: 2px; }
.page-header h1 {
  /* the vw factor and cap climb faster than the floor, so the heading gains
     presence on desktop without forcing extra lines on a phone */
  font-size: clamp(2.35rem, 5.6vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-top: 6px;
}
/* the standfirst steps back so the heading leads */
.page-header p {
  margin-top: 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.breadcrumbs { font-size: 0.72rem; letter-spacing: 0.24em; color: var(--color-muted); text-transform: uppercase; margin-bottom: 22px; font-weight: 600; }
.breadcrumbs a:hover { color: var(--color-gold-dark); }

.pricelist-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  margin-top: 34px;
}
@media (max-width: 560px) {
  .pricelist-cta { flex-direction: column; }
  .pricelist-cta .btn { width: 100%; justify-content: center; }
}

/* ---- consent: manage-preferences panel ---- */
.cookiebar__main { display: contents; }
.ck-manage {
  background: transparent;
  border: 1px solid rgba(255,255,255,.42);
  color: #f2ece2;
}
.ck-manage:hover { border-color: var(--color-gold); color: var(--color-gold-light); }
.cookiebar__prefs {
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(233,211,162,.22);
}
.cookiebar__prefs[hidden] { display: none; }
.ck-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(233,211,162,.12);
}
.ck-cat:last-of-type { border-bottom: 0; }
.ck-cat strong { display: block; color: #fff; font-size: .88rem; font-weight: 600; margin-bottom: 3px; }
.ck-cat span { display: block; font-size: .8rem; line-height: 1.6; color: #b8ac9d; }
.ck-switch { flex: 0 0 auto; position: relative; width: 46px; height: 26px; cursor: pointer; }
.ck-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck-switch span {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  transition: background .25s ease;
}
.ck-switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .25s ease;
}
.ck-switch input:checked + span { background: var(--color-gold); }
.ck-switch input:checked + span::after { transform: translateX(20px); }
.ck-switch input:focus-visible + span { outline: 2px solid var(--color-gold-light); outline-offset: 2px; }
.ck-switch.is-locked { cursor: not-allowed; opacity: .6; }
.ck-switch.is-locked input { cursor: not-allowed; }
.cookiebar__actions--prefs { margin-top: 14px; justify-content: flex-end; }
.ck-save { background: var(--color-gold); border: 1px solid var(--color-gold); color: var(--color-ink); }
.ck-save:hover { background: var(--color-gold-light); }
/* footer control that reopens the banner */
.footer-link-btn {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.footer-link-btn:hover { color: var(--color-gold); }

/* ============================================
   Treatment fact strip / price table / outcomes
   ============================================ */
.factstrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--color-line);
  background: var(--color-white);
  max-width: 1100px;
  margin: 0 auto;
}
.factstrip__item { padding: 24px 14px; text-align: center; border-right: 1px solid var(--color-line-soft); }
.factstrip__item:last-child { border-right: 0; }
.factstrip__val {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.3;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.factstrip__key {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (max-width: 900px) { .factstrip { grid-template-columns: repeat(3, 1fr); } .factstrip__item:nth-child(3n) { border-right: 0; } }
@media (max-width: 520px) { .factstrip { grid-template-columns: repeat(2, 1fr); } .factstrip__item:nth-child(3n) { border-right: 1px solid var(--color-line-soft); } .factstrip__item:nth-child(2n) { border-right: 0; } }

.ptable { max-width: 860px; margin: 0 auto; border: 1px solid var(--color-line); }
.ptable__head, .ptable__row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding: 15px 24px; align-items: center; }
.ptable__head {
  background: var(--color-espresso);
  color: var(--color-gold-light);
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ptable__head span:last-child, .ptable__row span:last-child { text-align: right; }
.ptable__row { background: var(--color-white); border-top: 1px solid var(--color-line-soft); }
.ptable__name { font-family: var(--font-serif); font-size: 1.08rem; color: var(--color-ink); }
.ptable__price { font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-gold-dark); }
.ptable__note { max-width: 860px; margin: 14px auto 0; font-size: 0.82rem; color: var(--color-muted); }
.ptable__note a { color: var(--color-gold-dark); text-decoration: underline; }

/* needs the extra class to beat .opt-row's two-column default, which is
   declared later in the file */
.opt-row.opt-row--3 { grid-template-columns: 1.1fr 1fr 1fr; }
@media (max-width: 700px) { .opt-row.opt-row--3 { grid-template-columns: 1fr; gap: 4px; } }

.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; }
.outcome { padding: 26px 24px; background: var(--color-white); border: 1px solid var(--color-line-soft); border-top: 2px solid var(--color-gold); }
.outcome h3 { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 500; margin-bottom: 10px; }
.outcome p { font-size: 0.92rem; line-height: 1.7; color: var(--color-ink-soft); margin: 0; }
@media (max-width: 900px) { .outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .outcomes { grid-template-columns: 1fr; } }

/* ============================================
   Product / option comparison table
   ============================================ */
.opt-table { max-width: 820px; margin: 0 auto; border: 1px solid var(--color-line); background: var(--color-white); }
.opt-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-line-soft);
  align-items: baseline;
}
.opt-row:last-child { border-bottom: 0; }
.opt-row--head {
  background: var(--color-bg-alt);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.opt-name { font-family: var(--font-serif); font-size: 1.1rem; color: var(--color-ink); }
.opt-for { font-size: 0.94rem; line-height: 1.6; color: var(--color-ink-soft); }
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; margin: 0 auto; }
.area-chips span {
  padding: 11px 20px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}
@media (max-width: 560px) {
  .opt-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; }
  .opt-row--head { display: none; }
}

/* ============================================
   Long-form treatment detail (individual pages)
   ============================================ */
.prose { max-width: 780px; margin: 0 auto; }
.prose p { font-size: 1.02rem; line-height: 1.85; color: var(--color-ink-soft); margin-bottom: 20px; }
.prose p:last-child { margin-bottom: 0; }
.prose p strong { color: var(--color-ink); font-weight: 600; }
.prose-note {
  max-width: 780px;
  margin: 34px auto 0;
  padding: 20px 24px;
  background: var(--color-bg-blush);
  border-left: 3px solid var(--color-gold);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-ink-soft);
}
.rel-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}
.rel-links a {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--color-line);
  border-radius: 100px;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.rel-links a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
  background: var(--color-bg-blush);
}

/* ============================================
   Laser package table (Offers page)
   ============================================ */
.pkg-band { background: var(--color-espresso); color: #f2ece2; }
.pkg-band .ornament em { background: var(--color-gold); }
.pkg-head { text-align: center; max-width: 720px; margin: 0 auto 42px; }
.pkg-head .eyebrow { color: var(--color-gold-light); justify-content: center; }
.pkg-head .eyebrow::before, .pkg-head .eyebrow::after { background: var(--color-gold); }
.pkg-head h2 { color: #fff; }
.pkg-head p { color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.75; margin-top: 16px; }
.pkg-head strong { color: var(--color-gold-light); font-weight: 600; }

.pkg-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 9px 20px;
  background: var(--color-gold);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
}

.pkg {
  max-width: 860px;
  margin: 0 auto;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(233,211,162,.22);
}
.pkg__cap {
  padding: 16px 26px;
  border-bottom: 1px solid rgba(233,211,162,.22);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  text-align: center;
}
.pkg__list { list-style: none; margin: 0; padding: 0; }
.pkg__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 26px;
  border-bottom: 1px solid rgba(233,211,162,.14);
}
.pkg__row:last-child { border-bottom: 0; }
.pkg__name {
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.3;
  color: #f4efe6;
}
.pkg__prices { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.pkg__was {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: rgba(255,255,255,.45);
  text-decoration: line-through;
}
.pkg__now {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 500;
  color: var(--color-gold-light);
}
.pkg__foot {
  padding: 26px;
  border-top: 1px solid rgba(233,211,162,.22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
}
.pkg__note {
  max-width: 860px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgba(255,255,255,.6);
}
@media (max-width: 560px) {
  .pkg__row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px; }
  .pkg__cap, .pkg__foot { padding-left: 20px; padding-right: 20px; }
  .pkg__foot .btn { width: 100%; text-align: center; }
}

/* ============================================
   Treatment tiles — photo above, label beneath
   (used on the All Treatments page)
   ============================================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 18px;
}
@media (min-width: 760px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
}
@media (min-width: 1100px) {
  /* four beauty categories sit on one row instead of orphaning the last tile */
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
  /* a six-tile set reads better as two rows of three than 4 + an orphan pair */
  .tile-grid.tile-grid--six { grid-template-columns: repeat(3, 1fr); }
}
/* a two-tile section stays a centred pair rather than hugging the left edge */
@media (min-width: 760px) {
  .tile-grid--duo {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
}
.tile { display: block; text-align: center; }
.tile__img {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line-soft);
}
.tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.tile:hover .tile__img img,
.tile:focus-visible .tile__img img { transform: scale(1.07); }
.tile__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(23,19,15,.28));
  opacity: 0;
  transition: opacity .35s ease;
}
.tile:hover .tile__img::after { opacity: 1; }
.tile__name {
  display: block;
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.32rem);
  line-height: 1.25;
  color: var(--color-ink);
  transition: color .25s ease;
}
.tile:hover .tile__name { color: var(--color-gold-dark); }
.tile__meta {
  display: block;
  margin-top: 7px;
  font-family: var(--font-sans);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tile:focus-visible { outline: 2px solid var(--color-gold-dark); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .tile__img img { transition: none; }
  .tile:hover .tile__img img { transform: none; }
}

/* ============================================
   Treatment list (category pages)
   ============================================ */
.treatment-list { display: grid; gap: 0; max-width: 900px; margin: 0 auto; }
.treatment-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-line);
}
.treatment-row:last-child { border-bottom: none; }
.treatment-row h3 { font-size: 1.35rem; margin-bottom: 6px; }
.treatment-row p { color: var(--color-ink-soft); font-size: 0.95rem; }
.treatment-row__price {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-gold-dark);
  white-space: nowrap;
  text-align: right;
}
.treatment-row__price small { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); font-family: var(--font-sans); margin-top: 4px; }

.price-section { max-width: 960px; margin: 0 auto 80px; }
.price-section:last-child { margin-bottom: 0; }
.price-section__head {
  text-align: center;
  margin-bottom: 40px;
}
.price-section__head h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin: 8px 0;
}
.price-section__head span {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-gold-dark);
  letter-spacing: 0.02em;
  padding: 0 22px;
  position: relative;
}
.price-section__head span::before,
.price-section__head span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 1px;
  background: var(--color-gold);
}
.price-section__head span::before { right: 100%; }
.price-section__head span::after { left: 100%; }
.price-note { max-width: 900px; margin: 0 auto 40px; padding: 18px 22px; background: var(--color-bg-alt); border-left: 3px solid var(--color-gold); font-size: 0.9rem; color: var(--color-ink-soft); }

/* ============================================
   Rich treatment cards
   ============================================ */
.treat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
}
.treat-grid--3 { grid-template-columns: 1fr; }

.treat-card {
  background: #fff;
  border: 1px solid var(--color-line-soft);
  padding: 0;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  display: grid;
  grid-template-columns: 360px 1fr;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 300px;
}
.treat-card__img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  background-color: var(--color-bg-alt);
  transition: transform .8s ease;
  position: relative;
  min-height: 260px;
  height: 100%;
}
.treat-card:hover .treat-card__img { transform: scale(1.05); }
.treat-card__inner {
  padding: 32px 36px 32px 40px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

@media (max-width: 720px) {
  .treat-card { grid-template-columns: 1fr; }
  .treat-card__img { min-height: 220px; aspect-ratio: 16/10; }
  .treat-card__inner { padding: 26px 24px; }
}
.treat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  transition: width .5s ease;
}
.treat-card:hover { border-color: var(--color-gold-light); box-shadow: var(--shadow-warm); transform: translateY(-4px); }
.treat-card:hover::before { width: 100%; }

.treat-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  box-shadow: 0 4px 10px rgba(140, 108, 62, 0.25);
}
.treat-card__badge--signature { background: linear-gradient(135deg, #2a1f16, #4a382a); }

.treat-card__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--color-line);
}
.treat-card__name { flex: 1; }
.treat-card h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}
.treat-card__price {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--color-gold-dark);
  font-weight: 500;
  white-space: nowrap;
  font-style: italic;
}

.treat-card__meta {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.treat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  background: var(--color-bg-blush);
  padding: 6px 12px;
  border-radius: 100px;
  font-weight: 500;
  border: 1px solid var(--color-line-soft);
}
.treat-chip strong { color: var(--color-gold-dark); font-weight: 700; }

.treat-card__desc {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.treat-card__for {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--color-line);
}
.treat-card__for-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  font-weight: 700;
  margin-bottom: 8px;
}
.treat-card__for ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.treat-card__for li {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  padding-left: 12px;
  position: relative;
}
.treat-card__for li::before {
  content: "•";
  color: var(--color-gold);
  position: absolute;
  left: 0;
}

/* Compact table-style rows for waxing/threading */
.compact-list {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 50px;
  background: #fff;
  border: 1px solid var(--color-line-soft);
  padding: 18px 38px;
  box-shadow: var(--shadow-sm);
}
.compact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dotted var(--color-line);
  gap: 20px;
  transition: color .2s ease;
}
.compact-row:hover .compact-row__name { color: var(--color-gold-dark); }
.compact-row:last-child, .compact-row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.compact-row__name { font-size: 0.95rem; color: var(--color-ink); font-weight: 500; }
.compact-row__name small { display: block; font-size: 0.72rem; color: var(--color-muted); margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }
.compact-row__price {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-gold-dark);
  white-space: nowrap;
  font-weight: 500;
}

/* Policies list */
.policy-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 0;
}
.policy-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 40px;
  padding: 44px 0;
  border-bottom: 1px solid var(--color-line);
  align-items: start;
}
.policy-item:last-child { border-bottom: none; }
.policy-item__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--color-gold-dark);
  line-height: 1;
  text-align: right;
  position: relative;
  padding-right: 20px;
}
.policy-item__num::after {
  content: "";
  position: absolute;
  right: 0; top: 8px;
  width: 1px; height: 40px;
  background: var(--color-gold);
}
.policy-item__body h3 {
  font-size: 1.55rem;
  margin-bottom: 12px;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}
.policy-item__body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin-bottom: 10px;
}
.policy-item__body p:last-child { margin-bottom: 0; }
.policy-item__body strong { color: var(--color-gold-dark); font-weight: 600; }
.policy-item__body ul { list-style: none; padding-left: 0; margin: 10px 0 0; }
.policy-item__body li {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  padding: 6px 0 6px 22px;
  position: relative;
  line-height: 1.6;
}
.policy-item__body li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 10px; height: 1px;
  background: var(--color-gold);
}

@media (max-width: 720px) {
  .policy-item { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
  .policy-item__num { text-align: left; padding-right: 0; font-size: 2rem; }
  .policy-item__num::after { display: none; }
}

/* Intro card for a section */
.intro-card {
  max-width: 960px;
  margin: 0 auto 40px;
  padding: 32px 40px;
  background: linear-gradient(135deg, #fff, var(--color-bg-blush));
  border: 1px solid var(--color-line-soft);
  border-left: 3px solid var(--color-gold);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.intro-card--img {
  padding: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  overflow: hidden;
  align-items: stretch;
}
.intro-card--img > .intro-card__img {
  min-height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
}
.intro-card--img > div:not(.intro-card__img) {
  padding: 32px 40px;
  align-self: center;
}
@media (max-width: 720px) {
  .intro-card--img { grid-template-columns: 1fr; }
  .intro-card--img > .intro-card__img { min-height: 180px; }
}
.intro-card::before {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-top: 1px solid var(--color-gold);
  border-right: 1px solid var(--color-gold);
  opacity: 0.5;
}
.intro-card h3 { font-size: 1.5rem; margin-bottom: 8px; font-style: italic; color: var(--color-ink); }
.intro-card p { font-size: 1rem; color: var(--color-ink-soft); margin: 0; line-height: 1.7; }

@media (max-width: 1024px) {
  .treat-grid, .treat-grid--3 { grid-template-columns: 1fr; }
  .compact-list { grid-template-columns: 1fr; gap: 0; padding: 12px 20px; }
  .compact-row:nth-last-child(2):nth-child(odd) { border-bottom: 1px dotted var(--color-line); }
}

/* ============================================
   Contact / Book form
   ============================================ */
.book-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.info-card {
  background: var(--color-bg-alt);
  padding: 40px;
  border-left: 3px solid var(--color-gold);
}
.info-card h3 { margin-bottom: 20px; }
.info-card ul { list-style: none; }
.info-card li { padding: 10px 0; border-bottom: 1px solid var(--color-line); font-size: 0.95rem; }
.info-card li:last-child { border-bottom: none; }
.info-card li strong { display: block; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.form input, .form select, .form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-ink);
  border-radius: var(--radius);
  transition: border-color .2s ease;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--color-gold); }
.form textarea { resize: vertical; min-height: 120px; }

/* ============================================
   Footer
   ============================================ */
.footer { background: linear-gradient(180deg, #14100c, #0a0806); color: #cfc4b6; padding: 90px 0 34px; position: relative; }
/* Column headings had no rule of their own, so they inherited the global
   heading colour (near-black) and were invisible against the dark footer. */
.footer h3 {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 18px;
}
/* the newsletter keeps the serif treatment */
.footer .newsletter h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
  margin-bottom: 10px;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 1px;
  background: var(--color-gold);
}
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 50px; }
.footer h4 { color: #fff; font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px; }
.footer p, .footer li a { font-size: 0.92rem; color: #a89e8f; }
.footer ul { list-style: none; }
.footer li { padding: 5px 0; }
.footer li a:hover { color: var(--color-gold); }
.footer__brand p { margin-top: 16px; max-width: 320px; }
.footer__socials { display: flex; gap: 12px; margin-top: 20px; }
.footer__socials a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #3b342d;
  border-radius: 50%;
  color: #cfc4b6;
}
.footer__socials a svg { width: 17px; height: 17px; display: block; }
.footer__socials a:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* brand colours: Instagram uses its gradient, WhatsApp its green.
   On hover the circle fills with the brand colour and the mark goes white. */
.footer__socials a[aria-label="Instagram"] svg path,
.footer__socials a[aria-label="Instagram"] svg circle { fill: url(#igGrad); }
.footer__socials a[aria-label="Instagram"] { border-color: #A6377F; }
.footer__socials a[aria-label="Instagram"]:hover {
  background: linear-gradient(45deg, #FEDA75, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5);
  border-color: transparent;
}
.footer__socials a[aria-label="Instagram"]:hover svg path,
.footer__socials a[aria-label="Instagram"]:hover svg circle { fill: #fff; }

.footer__socials a[aria-label="WhatsApp"] svg path { fill: #25D366; }
.footer__socials a[aria-label="WhatsApp"] { border-color: #1f9e4d; }
.footer__socials a[aria-label="WhatsApp"]:hover { background: #25D366; border-color: #25D366; }
.footer__socials a[aria-label="WhatsApp"]:hover svg path { fill: #fff; }
.footer__bottom {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid #2a2521;
  display: flex; justify-content: space-between;
  font-size: 0.82rem; color: #7d7367;
  flex-wrap: wrap; gap: 12px;
}

/* ============================================
   Treatment finder — filters, cards, selection
   ============================================ */
.finder {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(250, 245, 238, 0.94);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--color-line);
  padding: 22px 0;
}
.finder__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.finder__row + .finder__row { margin-top: 14px; }
.finder__label {
  flex: 0 0 116px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--color-muted);
}
.chip-btn {
  padding: 9px 17px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  color: var(--color-ink-soft);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s ease;
}
.chip-btn:hover { border-color: var(--color-gold-light); color: var(--color-ink); }
.chip-btn.is-on {
  color: #fff;
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}
.finder__count {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--color-muted);
  font-style: italic;
}

/* Contextual concern explainer */
.concern-panel {
  display: none;
  background: var(--color-bg-blush);
  border-left: 3px solid var(--color-gold);
  padding: 34px 38px;
  margin-bottom: 44px;
}
.concern-panel.is-open { display: block; }
.concern-panel h2 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.concern-panel__lead {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  margin-bottom: 22px;
  max-width: 720px;
}
.concern-panel__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.concern-panel__cols h3 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--color-gold-dark);
  margin-bottom: 9px;
}
.concern-panel__cols p { font-size: 0.88rem; color: var(--color-ink-soft); line-height: 1.65; }

/* Selectable treatment cards */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tcard {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tcard.is-hidden { display: none; }
.tcard:hover { border-color: var(--color-gold-light); box-shadow: var(--shadow-sm); }
.tcard.is-picked {
  border-color: var(--color-gold-dark);
  box-shadow: 0 0 0 1px var(--color-gold-dark) inset, var(--shadow-sm);
  background: #fffdf9;
}
.tcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.tcard__head h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
}
.tcard__price {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-gold-dark);
  white-space: nowrap;
}
.tcard__meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}
.tcard__meta span {
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--color-muted);
  padding: 4px 9px;
  border: 1px solid var(--color-line);
  border-radius: 2px;
}
.tcard__meta span.is-time { color: var(--color-gold-dark); border-color: var(--color-gold-light); }
.tcard__desc {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  line-height: 1.65;
  margin-bottom: 15px;
}
.tcard__for {
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line-soft);
}
.tcard__for strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: 7px;
}
.tcard__for ul { list-style: none; font-size: 0.85rem; color: var(--color-ink-soft); }
.tcard__for li { padding-left: 15px; position: relative; line-height: 1.75; }
.tcard__for li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-gold-light);
}
.tcard__pick {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-soft);
  user-select: none;
}
.tcard__pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.tcard__box {
  width: 21px; height: 21px;
  flex: 0 0 21px;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  background: #fff;
  position: relative;
  transition: all .22s ease;
}
.tcard__pick:hover .tcard__box { border-color: var(--color-gold); }
.tcard__pick input:focus-visible + .tcard__box {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 2px;
}
.tcard__pick input:checked + .tcard__box {
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}
.tcard__box::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .22s ease;
}
.tcard__pick input:checked + .tcard__box::after { transform: rotate(45deg) scale(1); }
.tcard__pick input:checked ~ .tcard__pick-on { display: inline; }
.tcard__pick input:checked ~ .tcard__pick-off { display: none; }
.tcard__pick-on { display: none; color: var(--color-gold-dark); font-weight: 600; }

.finder-empty {
  display: none;
  text-align: center;
  padding: 70px 20px;
  color: var(--color-muted);
  font-style: italic;
}
.finder-empty.is-on { display: block; }

/* Sticky selection bar */
.selbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  background: var(--color-ink);
  color: #f0e8dc;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 -14px 40px rgba(23, 20, 18, 0.22);
}
.selbar.is-up { transform: translateY(0); }
.selbar__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 0;
}
.selbar__info { flex: 1 1 260px; min-width: 0; }
.selbar__count {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-gold-light);
}
.selbar__names {
  display: block;
  font-size: 0.78rem;
  color: #a99e91;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.selbar__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.selbar__clear {
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #a99e91;
  cursor: pointer;
  padding: 10px 4px;
}
.selbar__clear:hover { color: #fff; text-decoration: underline; }
.selbar .btn--wa {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.selbar .btn--wa:hover { background: #1fbb59; border-color: #1fbb59; }

/* Lift the floating WhatsApp button clear of the selection bar */
body.selbar-open .wa-float { transform: translateY(-84px); }
body.selbar-open .wa-float:hover { transform: translateY(-87px); }

/* Jump links under a page heading */
.page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.page-jump a {
  padding: 9px 18px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-ink-soft);
  text-decoration: none;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  transition: all .3s ease;
}
.page-jump a:hover {
  color: #fff;
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}

/* ============================================
   Price list page
   ============================================ */
.price-nav {
  /* the list runs to 137 rows, so the category jumps stay pinned under the
     header instead of scrolling away at the top */
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 64px;
  padding: 18px 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
@media (max-width: 760px) {
  .price-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 14px 0;
    margin-bottom: 40px;
  }
  .price-nav::-webkit-scrollbar { display: none; }
  .price-nav a { flex: 0 0 auto; }
}
.price-nav a.is-active {
  color: var(--color-white);
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}
.price-block { scroll-margin-top: calc(var(--nav-h) + 96px); }

/* offer group heading in the price list */
.price-group--offer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.price-group__tag {
  padding: 5px 12px;
  background: var(--color-gold);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
}
.compact-row__price .was {
  color: var(--color-muted);
  text-decoration: line-through;
  margin-right: 6px;
  font-size: 0.86em;
}

/* back to top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 96px;
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--color-espresso);
  color: var(--color-gold-light);
  border: 1px solid rgba(233,211,162,.3);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  z-index: 60;
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease;
}
.to-top.is-on { display: flex; }
.to-top:hover { background: var(--color-gold); color: var(--color-ink); }
@media (max-width: 900px) { .to-top { bottom: 150px; right: 16px; } }
.price-nav a {
  padding: 10px 20px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-ink-soft);
  text-decoration: none;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  transition: all .3s ease;
}
.price-nav a:hover {
  color: var(--color-white);
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}
.price-block { margin-bottom: 72px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.price-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--color-gold-light);
}
.price-block__head h2 {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 500;
}
.price-block__more {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold-dark);
  text-decoration: none;
  white-space: nowrap;
}
.price-block__more:hover { text-decoration: underline; }
.price-group {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-muted);
  margin: 34px 0 14px;
}
.price-group:first-of-type { margin-top: 0; }
.price-foot {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ============================================
   Per-treatment booking actions
   ============================================ */
.treat-card__actions,
.tcard__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.btn-book {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-gold-dark);
  background: transparent;
  border: 1px solid var(--color-gold-light);
  border-radius: 100px;
  white-space: nowrap;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.btn-book:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
}
/* Quiet secondary action — a text link, not a competing button */
.btn-ask {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-muted);
  background: none;
  border: 0;
  padding: 0;
  transition: color .3s ease;
}
.btn-ask:hover { color: #128c4a; }
.btn-ask svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 14px; opacity: 0.8; }
.btn-ask:hover svg { opacity: 1; }
.btn-book:focus-visible,
.btn-ask:focus-visible { outline: 2px solid var(--color-gold-dark); outline-offset: 3px; }

/* ============================================
   Treatment rows — compact list, no repeated imagery
   ============================================ */
/* Rich rows need the full width — the 2-column grid crushes them */
.compact-list--rich {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 1000px;
  padding: 10px 38px;
}
.compact-list--rich .compact-row {
  border-bottom: 1px solid var(--color-line-soft);
}
.compact-list--rich .compact-row:last-child { border-bottom: none; }

.compact-row--rich {
  align-items: flex-start;
  padding: 22px 0;
  gap: 28px;
}
.compact-row--rich .compact-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}
.compact-row--rich .compact-row__name small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold-dark);
}
.compact-row--rich .compact-row__name em {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--color-ink-soft);
}
.compact-row--rich .compact-row__price {
  flex: 0 0 auto;
  padding-top: 2px;
  font-size: 1.2rem;
}
.compact-row__act {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 1px;
}
.row-book {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(143, 114, 51, 0.22);
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.row-book:hover {
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  color: #fff;
  box-shadow: 0 6px 16px rgba(143, 114, 51, 0.32);
  transform: translateY(-1px);
}
.row-ask {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-muted);
  white-space: nowrap;
  transition: color .28s ease;
}
.row-ask:hover { color: #128c4a; }
.row-book:focus-visible, .row-ask:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .compact-row--rich { flex-wrap: wrap; gap: 10px 16px; padding: 18px 0; }
  .compact-row--rich .compact-row__name { flex: 1 1 100%; font-size: 1.1rem; }
  .compact-row--rich .compact-row__name em { font-size: 0.83rem; }
  .compact-row--rich .compact-row__price { font-size: 1.1rem; }
  .compact-row__act { margin-left: auto; }
}

/* Price-list rows: a quiet link that only warms up on hover */
.compact-row__book {
  margin-left: 16px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-line);
  white-space: nowrap;
  transition: color .25s ease;
}
.compact-row:hover .compact-row__book { color: var(--color-muted); }
.compact-row__book:hover { color: var(--color-gold-dark); }

@media (max-width: 560px) {
  .compact-row { flex-wrap: wrap; gap: 8px 12px; }
  .compact-row__name { flex: 1 1 100%; }
  .compact-row__book { margin-left: auto; padding: 7px 15px; }
}
@media (max-width: 480px) {
  /* Buttons stay side by side — they're compact enough now */
  .treat-card__actions, .tcard__actions { gap: 14px; }
  .btn-book { padding: 10px 20px; letter-spacing: 0.16em; }
  .btn-ask { letter-spacing: 0.1em; }
}

/* ============================================
   Why choose us
   ============================================ */
.why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-line-soft);
  border: 1px solid var(--color-line-soft);
}
.why__item { background: var(--color-white); padding: 38px 32px; }
.why__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-gold-dark);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.why__item h3 {
  font-family: var(--font-serif);
  font-size: 1.32rem;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.28;
}
.why__item p { font-size: 0.89rem; color: var(--color-ink-soft); line-height: 1.7; }

/* ============================================
   FAQ accordion
   ============================================ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--color-line);
}
.faq details[open] { background: rgba(255, 255, 255, 0.5); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 46px 24px 4px;
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--color-ink);
  transition: color .25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-gold-dark); }
.faq summary:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 2px;
}
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  background: var(--color-gold-dark);
  transition: transform .28s ease, opacity .28s ease;
}
.faq summary::before { width: 14px; height: 1px; margin-top: -0.5px; }
.faq summary::after { width: 1px; height: 14px; margin-top: -7px; right: 16.5px; }
.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq__a {
  padding: 0 46px 26px 4px;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  line-height: 1.75;
}
.faq__a a { color: var(--color-gold-dark); text-decoration: underline; }

/* ============================================
   Ratings — partial stars, so 4.6 reads as 4.6
   ============================================ */
.stars-bar {
  position: relative;
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-line);
  white-space: nowrap;
}
.stars-bar::before {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  left: 0; top: 0;
  width: var(--pct);
  overflow: hidden;
  color: var(--color-gold);
  white-space: nowrap;
}
.footer .stars-bar, .cta-banner .stars-bar { color: #4a4139; }

/* Multi-platform rating strip */
.ratings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 760px;
  margin: 0 auto 54px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
}
.ratings__item {
  padding: 26px 20px;
  text-align: center;
  border-left: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background .3s ease;
}
.ratings__item:first-child { border-left: 0; }
a.ratings__item:hover { background: var(--color-bg-blush); }
.ratings__score {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-gold-dark);
}
.ratings__score small {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.ratings__stars { display: block; margin: 9px 0 8px; font-size: 0.82rem; }
.ratings__where {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-muted);
}

/* ============================================
   Trust bar
   ============================================ */
.trustbar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line-soft);
}
.trustbar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trustbar__item {
  padding: 34px 26px;
  text-align: center;
  border-left: 1px solid var(--color-line-soft);
}
.trustbar__item:first-child { border-left: 0; }
.trustbar__val {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--color-gold-dark);
  letter-spacing: 0.01em;
}
.trustbar__val .stars { font-size: 1.15rem; letter-spacing: 0.08em; vertical-align: 0.18em; }
.trustbar__val--text { font-size: 1.35rem; line-height: 1.3; }
.trustbar__label {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-muted);
}

/* ============================================
   Browse by concern
   ============================================ */
.concerns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.concern {
  display: block;
  padding: 30px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.concern:hover {
  border-color: var(--color-gold-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.concern__icon {
  display: block;
  width: 40px; height: 40px;
  margin-bottom: 16px;
  stroke: var(--color-gold-dark);
  stroke-width: 1.2;
  fill: none;
}
.concern h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.concern p {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin-bottom: 14px;
}
.concern__link {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--color-gold-dark);
}
.concern__link::after { content: " \2192"; }

/* ============================================
   Footer newsletter + payments
   ============================================ */
.newsletter { margin-top: 30px; max-width: 420px; }
.newsletter h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 10px;
}
.newsletter p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #cfc4b6;
  margin-bottom: 18px;
}
/* underlined field with an arrow submit, rather than a boxed input + button */
.newsletter__row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.4);
  transition: border-color .3s ease;
}
.newsletter__row:focus-within { border-bottom-color: var(--color-gold); }
.newsletter__row input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.newsletter__row input::placeholder { color: #9d9284; }
.newsletter__row input:focus { outline: none; }
.newsletter__row button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .3s ease, transform .3s ease;
}
.newsletter__row button:hover { color: var(--color-gold); transform: translateX(3px); }
.newsletter__row button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.newsletter__ok {
  display: none;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-gold-light);
}

.payments {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Card badges. Wordmarks are set in type rather than traced, and the marks
   that are geometric (Mastercard, Apple, Google) are drawn as SVG. */
.payments .pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 54px;
  height: 32px;
  padding: 0 9px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #1a1a1a;
}
.payments .pay i { font-style: normal; font-weight: 700; font-size: 0.68rem; }
.payments .pay svg { display: block; height: 15px; width: auto; }
.payments .pay--visa  { color: #1434CB; font-style: italic; font-size: 0.78rem; letter-spacing: -0.01em; }
.payments .pay--amex  { background: #006FCF; border-color: #006FCF; color: #fff; }
.payments .pay--mc i  { display: none; }
.payments .pay--mc    { padding: 0 6px; }
.payments .pay--mc svg { height: 19px; }
.payments .pay--apple { color: #000; }
.payments .pay--apple svg { height: 14px; }
.payments .pay--gpay  { color: #3c4043; }
.payments .pay--gpay svg { height: 14px; }
.payments .pay--cash  { color: #4a4a4a; }
.payments .pay--cash svg { height: 13px; }

/* ============================================
   Mobile sticky CTA — Book Now + WhatsApp
   ============================================ */
.mcta { display: none; }

@media (max-width: 720px) {
  .mcta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 940;
    gap: 1px;
    background: var(--color-line);
    box-shadow: 0 -8px 24px rgba(23, 20, 18, 0.16);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mcta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-decoration: none;
  }
  .mcta__book { background: var(--color-gold); color: var(--color-ink); }
  .mcta__wa { background: #25d366; color: #fff; flex: 0 0 42%; }
  .mcta__wa svg { width: 17px; height: 17px; fill: #fff; }

  /* The floating bubble is redundant once the bar is present */
  .wa-float { display: none; }

  /* Leave room so the bar never covers the footer's last line */
  body { padding-bottom: 58px; }

  /* On the finder page the selection bar takes over */
  body.selbar-open .mcta { display: none; }
}

/* ============================================
   Floating WhatsApp button
   ============================================ */
.wa-float {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0 18px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.34), 0 4px 12px rgba(23, 20, 18, 0.12);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.wa-float:hover {
  background: #1fbb59;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(37, 211, 102, 0.42), 0 6px 16px rgba(23, 20, 18, 0.16);
}
.wa-float:focus-visible {
  outline: 3px solid var(--color-gold-dark);
  outline-offset: 3px;
}
.wa-float__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  fill: #fff;
  display: block;
}
.wa-float__label {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .35s ease, opacity .25s ease, margin-left .35s ease;
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label {
  max-width: 180px;
  margin-left: 10px;
  opacity: 1;
}

/* Soft attention pulse — runs a few times, then rests */
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #25d366;
  animation: waPulse 2.4s ease-out 3;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float__label { transition: none; }
  .wa-float::after { animation: none; }
  .wa-float:hover { transform: none; }
}

@media (max-width: 720px) {
  .wa-float {
    right: 16px;
    bottom: 16px;
    height: 56px;
    width: 56px;
    padding: 0;
    justify-content: center;
  }
  /* Keep it a clean circle on small screens */
  .wa-float__label { display: none; }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .concerns { grid-template-columns: repeat(2, 1fr); }
  .tgrid { grid-template-columns: repeat(2, 1fr); }
  .concern-panel__cols { grid-template-columns: 1fr; gap: 20px; }
  .trustbar__inner { grid-template-columns: repeat(2, 1fr); }
  .trustbar__item:nth-child(3) { border-left: 0; }
  .trustbar__item:nth-child(n+3) { border-top: 1px solid var(--color-line-soft); }
  .split { grid-template-columns: 1fr; gap: 50px; }
  .testimonials { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero__meta { display: none; }
}

@media (max-width: 720px) {
  /* ---- Mobile: comfortable text, generous touch targets ---- */
  body { font-size: 16px; }
  :root { --nav-h: 68px; --gutter: 18px; }

  h1 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); line-height: 1.14; }
  h2 { font-size: clamp(1.65rem, 6.6vw, 2.15rem); line-height: 1.2; }
  h3 { font-size: 1.2rem; }

  .nav__toggle { width: 44px; height: 44px; }
  .nav__toggle span { left: 10px; right: 10px; }
  .nav__toggle span:nth-child(1) { top: 15px; }
  .nav__toggle span:nth-child(2) { top: 21px; }
  .nav__toggle span:nth-child(3) { top: 27px; }
  .nav.open .nav__toggle span:nth-child(1),
  .nav.open .nav__toggle span:nth-child(3) { top: 21px; }

  /* Every menu row is a full-width, thumb-sized target */
  .nav__menu > li { width: 100%; border-bottom: 1px solid var(--color-line-soft); }
  .nav__menu > li:last-child { border-bottom: 0; }
  .nav__menu > li > a {
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 0.92rem;
  }
  .nav__menu > li > a::after { display: none; }

  .btn { padding: 15px 26px; font-size: 0.8rem; }
  .dropdown li a { padding-top: 13px; padding-bottom: 13px; }
  /* No hover on touch — the bridge is unnecessary and the panel is always open */
  .has-dropdown::after { display: none; }
  .dropdown { transition: none; }

  /* Nothing may push the page sideways */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, video, iframe { max-width: 100%; height: auto; }

  .topbar { font-size: 0.68rem; letter-spacing: 0.08em; }
  .topbar__contact span:nth-child(2) { display: none; }
  .topbar__inner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 2px 14px;
  }
  .topbar__hours span + span {
    margin-left: 12px;
    padding-left: 12px;
  }
  .nav__cta .btn { display: none; }
  .nav__toggle { display: block; }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 8px 0 8px 16px;
    background: transparent;
    min-width: 0;
  }
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .concerns { grid-template-columns: 1fr; }
  .tgrid { grid-template-columns: 1fr; }
  .finder { position: static; padding: 18px 0; }
  .finder__label { flex: 0 0 100%; margin-bottom: 2px; }
  .finder__count { margin-left: 0; flex: 0 0 100%; }
  .concern-panel { padding: 26px 22px; }
  .selbar__inner { padding: 14px 0; gap: 12px; }
  .selbar__actions { width: 100%; }
  .selbar__actions .btn { flex: 1 1 auto; text-align: center; }
  body.selbar-open .wa-float { transform: translateY(-124px); }
  body.selbar-open .wa-float:hover { transform: translateY(-124px); }
  .trustbar__item { padding: 24px 18px; }
  .trustbar__val { font-size: 1.7rem; }
  .newsletter__row { max-width: none; }
  .process { grid-template-columns: 1fr; gap: 30px; }
  .section { padding: 70px 0; }
  .cta-banner { padding: 80px 0; }
  .split__stats { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .form__row { grid-template-columns: 1fr; }
  .treatment-row { grid-template-columns: 1fr; }
  .treatment-row__price { text-align: left; }
  .hero { min-height: 560px; }
}

/* Review attribution line */
.testimonial__author small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-transform: none;
}
.testimonial__author small a { color: var(--color-gold-dark); text-decoration: underline; }
.testimonial__author small a:hover { color: var(--color-ink); }

/* Inline notice under a page heading */
.notice-inline {
  display: inline-block;
  margin: 14px 0 0;
  padding: 9px 18px;
  background: var(--color-bg-blush);
  border-left: 3px solid var(--color-gold);
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}

/* Honeypot — hidden from people, visible to bots */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

/* ============================================
   Legal pages
   ============================================ */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 42px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line-soft);
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 14px; color: var(--color-ink-soft); line-height: 1.8; }
.legal a { color: var(--color-gold-dark); text-decoration: underline; }
.legal__updated {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--color-muted);
}

/* ============================================
   Cookie consent
   ============================================ */
.cookiebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 980;
  background: rgba(20, 17, 14, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e8e0d4;
  border-top: 1px solid rgba(194, 163, 95, 0.3);
  padding: 16px 26px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.cookiebar.is-up { display: flex; }
.cookiebar p { font-size: 0.82rem; line-height: 1.6; margin: 0; max-width: 620px; }
.cookiebar a { color: var(--color-gold-light); text-decoration: underline; }
.cookiebar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookiebar button {
  padding: 11px 22px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid var(--color-gold);
  transition: all .25s ease;
}
.cookiebar .ck-accept { background: var(--color-gold); color: var(--color-ink); }
.cookiebar .ck-accept:hover { background: var(--color-gold-light); }
.cookiebar .ck-decline { background: transparent; color: #e8e0d4; border-color: #4a4139; }
.cookiebar .ck-decline:hover { border-color: var(--color-gold); color: #fff; }

@media (max-width: 560px) {
  .cookiebar { bottom: 58px; padding: 14px 16px; gap: 12px; }
  .cookiebar__actions { width: 100%; }
  .cookiebar__actions button { flex: 1; }
  .cookiebar__actions { width: 100%; }
  .cookiebar button { flex: 1; }
  body.cookie-open .mcta { bottom: 130px; }
}

/* ============================================
   Team
   ============================================ */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team__member {
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  padding: 34px 30px;
  text-align: center;
}
.team__initial {
  width: 68px; height: 68px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.7rem;
}
.team__member h3 { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; }
.team__role {
  display: block;
  margin: 5px 0 14px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-gold-dark);
}
.team__member p { font-size: 0.89rem; color: var(--color-ink-soft); line-height: 1.7; }
.team__member blockquote {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-line-soft);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-ink-soft);
}
@media (max-width: 900px) { .team { grid-template-columns: 1fr; } }

/* ============================================
   Offers
   ============================================ */
.offers { display: grid; gap: 20px; max-width: 940px; margin: 0 auto; }
.offer {
  display: grid;
  grid-template-columns: 168px 1fr;
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.offer:hover { border-color: var(--color-gold-light); box-shadow: var(--shadow-md); }
.offer__price {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-line-soft);
  font-family: var(--font-serif);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--color-gold-dark);
  text-align: center;
}
.offer__body { padding: 28px 30px; }
.offer__cat {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.offer__body h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.25; }
.offer__sub {
  display: block;
  margin: 4px 0 12px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gold-dark);
}
.offer__body p { font-size: 0.9rem; color: var(--color-ink-soft); line-height: 1.7; }
.offer__saving {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 15px;
  background: var(--color-bg-blush);
  border-left: 3px solid var(--color-gold);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}
.offer__actions { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.offer__actions .row-ask { text-decoration: none; }

@media (max-width: 680px) {
  .offer { grid-template-columns: 1fr; }
  .offer__price {
    border-right: 0;
    border-bottom: 1px solid var(--color-line-soft);
    padding: 20px;
    font-size: 1.9rem;
  }
  .offer__body { padding: 24px 22px; }
}

/* ============================================
   Accessibility helpers
   ============================================ */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 13px 24px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 0; outline: 2px solid var(--color-gold); }

/* Heading that exists for structure and screen readers, not for sighted layout */
.sr-h2 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Why-choose-us grid: 3 up on desktop, 2 on tablet, stacked on phones */
@media (max-width: 1024px) {
  .why { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .why { grid-template-columns: 1fr; }
  .why__item { padding: 28px 24px; }
}

/* Group labels inside the treatments dropdown */
.dropdown__label {
  padding: 6px 26px 5px;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-muted);
}
.dropdown__label--sep {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line-soft);
}

/* Two long treatment labels — keep the bar on one line */
.nav__menu > li > a { white-space: nowrap; }
@media (max-width: 1440px) and (min-width: 1151px) {
  .nav__menu { gap: 15px; }
  .nav__menu > li > a { font-size: 0.73rem; letter-spacing: 0.07em; }
  .brand { font-size: 1.5rem; margin-right: 16px; }
  .brand__tag { display: none; }
  .brand__mark { height: 40px; }
  .nav__cta .btn { padding: 12px 18px; font-size: 0.66rem; letter-spacing: 0.1em; }
}
@media (max-width: 1400px) and (min-width: 1151px) {
  .nav__menu { gap: 5px; }
  .nav__menu > li > a { font-size: 0.655rem; letter-spacing: 0.03em; }
  .brand { font-size: 1.28rem; margin-right: 6px; }
  .brand__mark { height: 34px; }
  .nav__cta .btn { padding: 11px 14px; font-size: 0.62rem; }
}

/* Course pricing line under a treatment description */
.row-courses {
  display: block;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--color-bg-blush);
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-ink-soft);
}

/* "Price on consultation" reads as a label, not a figure */
.price-consult {
  font-family: var(--font-sans) !important;
  font-size: 0.66rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1.45;
  color: var(--color-gold-dark);
  /* must override the nowrap inherited from .compact-row__price,
     otherwise it runs under the Book button */
  white-space: normal !important;
  flex: 0 0 108px;
  width: 108px;
  text-align: right;
}
@media (max-width: 760px) {
  .price-consult { max-width: none; text-align: left; }
}

.price-note {
  max-width: 760px;
  margin: 0 0 34px;
  padding: 18px 22px;
  background: var(--color-bg-blush);
  border-left: 3px solid var(--color-gold);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

/* ============================================
   Treatment-page trust strip
   ============================================ */
.tstrip { margin-top: 26px; }
.tstrip__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
.tstrip__rating .stars-bar { font-size: 1rem; }
.tstrip ul { list-style: none; display: grid; gap: 11px; }
.tstrip li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.tstrip svg {
  width: 19px; height: 19px;
  flex: 0 0 19px;
  margin-top: 1px;
  stroke: var(--color-gold-dark);
  stroke-width: 1.5;
  fill: none;
}
.tstrip li a, .tstrip__rating a { color: var(--color-gold-dark); text-decoration: underline; }
.tstrip li a:hover, .tstrip__rating a:hover { color: var(--color-ink); }
.tstrip__actions .btn { text-decoration: none; }
.tstrip__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* The page header centres its text; the strip reads better left-aligned */
.page-header .tstrip {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.page-header .tstrip__actions { justify-content: center; }
@media (max-width: 560px) {
  .tstrip__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Anchored treatment rows shouldn't hide under the sticky nav */
.compact-row--rich[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* "Book consultation for exact price" under a from-price */
.compact-row__price small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: none;
  color: var(--color-muted);
  white-space: normal;
  max-width: 118px;
}
.compact-row--rich .compact-row__price { flex: 0 0 128px; text-align: right; }
.compact-row--rich .compact-row__price small { margin-left: auto; }
@media (max-width: 760px) {
  .compact-row--rich .compact-row__price { flex: 0 0 auto; text-align: left; }
  .compact-row__price small { max-width: none; margin-left: 0; }
}

/* ============================================
   Highlight treatment band
   ============================================ */
.highlight {
  background: linear-gradient(180deg, #1a1613, #100d0b);
  color: #ece4d8;
  padding: 84px 0;
  position: relative;
}
.highlight__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
.highlight__body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 500;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 16px;
}
.highlight__body > p { color: #c4b9ab; line-height: 1.8; max-width: 52ch; }
.highlight__points { list-style: none; margin: 22px 0 30px; }
.highlight__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: #ded3c4;
}
.highlight__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  transform: rotate(-45deg);
}
.highlight__media { position: relative; }
.highlight__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(194,163,95,0.34);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.highlight__tag {
  position: absolute;
  left: 16px; bottom: 16px;
  padding: 8px 16px;
  background: rgba(20,17,14,0.86);
  border: 1px solid rgba(194,163,95,0.4);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--color-gold-light);
}
.highlight .btn { border-color: rgba(236,228,216,0.4); color: #ece4d8; }
.highlight .btn--gold { border-color: var(--color-gold); color: var(--color-ink); }

@media (max-width: 900px) {
  .highlight { padding: 62px 0; }
  .highlight__inner { grid-template-columns: 1fr; gap: 34px; }
  .highlight__media { order: -1; }
}

/* Anchored treatment cards clear the sticky nav */
.treat-card[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ============================================
   Soprano Titanium — wavelength diagram
   ============================================ */
.wave-diagram { max-width: 760px; margin: 0 auto; }
.wave-diagram__skin {
  position: relative;
  padding: 46px 0 40px;
  background: linear-gradient(180deg, #f7efe3 0%, #e9d9c2 40%, #d9c2a2 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.wave-diagram__layer, .wave-diagram__depth {
  position: absolute;
  left: 16px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-ink-soft);
  opacity: 0.7;
}
.wave-diagram__layer { top: 14px; }
.wave-diagram__depth { bottom: 12px; }
.wave-beam {
  position: relative;
  height: 34px;
  margin: 0 auto 12px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.wave-beam--755  { width: 52%; background: linear-gradient(90deg, rgba(194,163,95,0.25), #c2a35f); }
.wave-beam--810  { width: 72%; background: linear-gradient(90deg, rgba(143,114,51,0.25), #8f7233); }
.wave-beam--1064 { width: 92%; background: linear-gradient(90deg, rgba(32,28,24,0.25), #201c18); }

.wave-card {
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  padding: 30px 26px;
  text-align: center;
}
.wave-card__nm {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-gold-dark);
  margin-bottom: 14px;
}
.wave-card__nm small { font-size: 1rem; color: var(--color-muted); }
.wave-card p { font-size: 0.89rem; color: var(--color-ink-soft); line-height: 1.7; }

/* Tech cards */
.tech-card {
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  padding: 34px 32px;
}
.tech-card h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 8px 0 14px;
}
.tech-card p { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.75; margin-bottom: 12px; }
.tech-card p:last-child { margin-bottom: 0; }

/* Treatment-area chips */
.area-block {
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  padding: 30px 28px;
}
.area-block h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line-soft);
}
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chip {
  padding: 8px 15px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--color-ink-soft);
  background: var(--color-bg-blush);
  border: 1px solid var(--color-line-soft);
  border-radius: 100px;
}

/* Numbered steps */
.steps { max-width: 820px; margin: 0 auto; display: grid; gap: 4px; }
.step {
  display: flex;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.step:last-child { border-bottom: 0; }
.step__n {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-gold-dark);
}
.step h3 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; margin-bottom: 6px; }
.step p { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.7; }

@media (max-width: 700px) {
  .wave-beam { font-size: 0.64rem; height: 30px; }
  .tech-card, .area-block { padding: 26px 22px; }
  .step { gap: 16px; }
}

/* Feature strip promoting a treatment inside a category page */
.feature-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin: 0 0 30px;
  padding: 26px 30px;
  background: var(--color-ink);
  color: #ece4d8;
  border-radius: var(--radius);
}
.feature-strip .eyebrow { color: var(--color-gold-light); }
.feature-strip h3 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 500;
  color: #fff;
  margin: 6px 0 8px;
}
.feature-strip p { font-size: 0.9rem; color: #c4b9ab; line-height: 1.65; max-width: 56ch; margin: 0; }
.feature-strip__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.feature-strip .btn { border-color: rgba(236,228,216,0.45); color: #ece4d8; }
.feature-strip .btn--gold { border-color: var(--color-gold); color: var(--color-ink); }
@media (max-width: 700px) {
  .feature-strip { padding: 22px; }
  .feature-strip__actions { width: 100%; }
  .feature-strip__actions .btn { flex: 1; justify-content: center; }
}

/* ============================================
   Hero slideshow
   ============================================ */
.hero--slides { position: relative; overflow: hidden; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center 38%;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 7s ease, visibility 1.1s;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
/* dark wash so the type stays readable over any photo */
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(10,8,6,0.88) 0%, rgba(10,8,6,0.72) 38%,
    rgba(10,8,6,0.42) 70%, rgba(10,8,6,0.24) 100%);
}
.hero__slide .container { position: relative; z-index: 2; width: 100%; }

/* the treatment slides use a paragraph styled like the h1 */
/* `.hero p` is (0,1,1) and was beating a bare `.hero__h` (0,1,0), so slide
   headings rendered as body copy — 19px/300 instead of display type. Both the
   heading and the lead need the extra class to win the cascade. */
.hero .hero__h {
  font-family: var(--font-serif);
  font-size: clamp(2.05rem, 5vw, 4.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 18px;
}
.hero .hero__h em { font-style: italic; color: var(--color-gold-light); }
.hero .hero__lead {
  max-width: 54ch;
  color: rgba(255,255,255,0.9);
  font-size: clamp(0.95rem, 1.4vw, 1.06rem);
  line-height: 1.72;
}

/* buttons stay put while the slides change behind them */
.hero__fixed {
  position: relative;
  z-index: 3;
  width: 100%;
  align-self: flex-end;
  padding-bottom: 0;
}
.hero--slides { display: flex; align-items: center; }
.hero--slides .hero__inner { padding-bottom: 152px; }
.hero__fixed .hero__actions { margin: 0; }
.hero--slides .hero__fixed {
  position: absolute;
  left: 0; right: 0;
  bottom: 120px;
}

/* arrows + dots */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.28);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.hero__nav:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-ink); }
.hero__nav:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.hero__nav--prev { left: 26px; }
.hero__nav--next { right: 26px; }

.hero__dots {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
.hero__dots button {
  width: 34px; height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,0.34);
  cursor: pointer;
  transition: background .3s ease;
}
.hero__dots button[aria-current="true"] { background: var(--color-gold); }

@media (max-width: 900px) {
  .hero__nav { display: none; }
  .hero--slides .hero__fixed { bottom: 92px; }
  .hero--slides .hero__inner { padding-bottom: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity .3s ease, visibility .3s; transform: none; }
  .hero__slide.is-active { transform: none; }
}

/* ============================================
   HydraFacial page
   ============================================ */
.hf-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.hf-step {
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  padding: 28px 22px;
}
.hf-step__n {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--color-gold-dark);
  margin-bottom: 12px;
}
.hf-step h3 {
  font-family: var(--font-serif);
  font-size: 1.24rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 9px;
}
.hf-step p { font-size: 0.86rem; color: var(--color-ink-soft); line-height: 1.65; }

/* Premium price cards */
.price-cards { align-items: stretch; }
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  padding: 38px 34px;
  position: relative;
}
.price-card--feature { border-color: var(--color-gold); box-shadow: var(--shadow-warm); }
.price-card h3 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.price-card__price {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-gold-dark);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-line-soft);
}
.price-card > p { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.75; }
.price-card__best {
  margin: 18px 0 26px;
  padding: 14px 18px;
  background: var(--color-bg-blush);
  border-left: 3px solid var(--color-gold);
  font-size: 0.86rem;
  color: var(--color-ink-soft);
  line-height: 1.65;
}
.price-card__best strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: 5px;
}
.price-card .btn { margin-top: auto; align-self: flex-start; }
.info-card > p { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.7; }

@media (max-width: 1024px) { .hf-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .hf-steps { grid-template-columns: 1fr; }
  .price-card { padding: 28px 24px; }
}

/* ============================================
   Aesthetic Treatments mega menu
   ============================================ */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1160px, calc(100vw - 40px));
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 2px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease .18s, transform .22s ease .18s, visibility .22s .18s;
  z-index: 60;
}
.has-dropdown:hover .mega,
.has-dropdown:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 34px 0 30px;
}
.mega__col { padding: 0 30px; border-left: 1px solid var(--color-line-soft); }
.mega__col:first-child { border-left: 0; }
.mega__col h4 {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-gold-dark);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-line-soft);
}
.mega__col ul { list-style: none; }
.mega__col li { margin-bottom: 2px; }
.mega__col a {
  display: block;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
.mega__col a:hover { color: var(--color-gold-dark); padding-left: 6px; }
.mega__foot {
  border-top: 1px solid var(--color-line-soft);
  background: var(--color-bg-blush);
  padding: 14px 0;
}
.mega__foot .container { display: flex; gap: 28px; justify-content: flex-end; }
.mega__foot a {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gold-dark);
  text-decoration: none;
}
.mega__foot a:hover { color: var(--color-ink); text-decoration: underline; }

@media (max-width: 1100px) {
  .mega__inner { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .mega__col:nth-child(3) { border-left: 0; }
}

/* On mobile it collapses into the stacked menu */
@media (max-width: 720px) {
  .mega {
    position: static;
    transform: none;
    width: auto;
    opacity: 1;
    visibility: visible;
    border: 0;
    border-top: 1px solid var(--color-line-soft);
    box-shadow: none;
    background: transparent;
    margin-top: 8px;
    transition: none;
  }
  .mega__inner { grid-template-columns: 1fr; padding: 12px 0 4px; gap: 14px; }
  .mega .container { padding: 0; width: auto; }
  .mega__col { padding: 0; border-left: 0; }
  .mega__col a { padding: 11px 0; }
  .mega__foot { background: transparent; padding: 10px 0 0; }
  .mega__foot .container { flex-direction: column; gap: 10px; justify-content: flex-start; }
}

/* Concern page — recommended treatment cards */
.ctreats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ctreat {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line-soft);
  padding: 28px 26px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ctreat:hover { border-color: var(--color-gold-light); box-shadow: var(--shadow-sm); }
.ctreat__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ctreat__head h3 { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; line-height: 1.25; }
.ctreat__head h3 a { color: var(--color-ink); text-decoration: none; }
.ctreat__head h3 a:hover { color: var(--color-gold-dark); }
.ctreat__price {
  font-family: var(--font-serif); font-size: 1.15rem;
  color: var(--color-gold-dark); white-space: nowrap;
}
.ctreat__meta {
  display: block; margin: 6px 0 12px;
  font-family: var(--font-sans); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted);
}
.ctreat p { font-size: 0.89rem; color: var(--color-ink-soft); line-height: 1.7; }
.ctreat__actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-line-soft); }
.ctreat__actions .row-ask { text-decoration: none; }
@media (max-width: 820px) { .ctreats { grid-template-columns: 1fr; } }
.mega--two .mega__inner { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .mega--two .mega__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .mega--two .mega__inner { grid-template-columns: 1fr; } }

/* ============================================
   Treatment finder
   ============================================ */
.tf { max-width: 860px; margin: 0 auto; }
.tf__progress { height: 3px; background: var(--color-line); margin-bottom: 44px; }
.tf__progress span { display: block; height: 100%; width: 33%; background: var(--color-gold); transition: width .4s ease; }
.tf__step { display: none; }
.tf__step.is-active { display: block; animation: tfIn .35s ease; }
@keyframes tfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tf__num {
  display: block; font-family: var(--font-sans); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.19em; color: var(--color-gold-dark); margin-bottom: 12px;
}
.tf__step h2 { font-family: var(--font-serif); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 500; margin-bottom: 26px; }
.tf__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tf-chip {
  padding: 13px 22px; font-family: var(--font-sans); font-size: 0.86rem;
  color: var(--color-ink-soft); background: var(--color-white);
  border: 1px solid var(--color-line); border-radius: 100px; cursor: pointer;
  transition: all .25s ease;
}
.tf-chip:hover, .tf-chip.is-on { background: var(--color-gold-dark); border-color: var(--color-gold-dark); color: #fff; }
.tf__opts { display: grid; gap: 12px; }
.tf-opt {
  display: block; width: 100%; text-align: left;
  padding: 22px 26px; background: var(--color-white);
  border: 1px solid var(--color-line); cursor: pointer; transition: all .25s ease;
}
.tf-opt:hover { border-color: var(--color-gold); box-shadow: var(--shadow-sm); }
.tf-opt strong { display: block; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 5px; }
.tf-opt span { font-size: 0.88rem; color: var(--color-ink-soft); line-height: 1.6; }
.tf__back {
  margin-top: 24px; padding: 10px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--color-muted);
}
.tf__back:hover { color: var(--color-gold-dark); }
.tf__note { margin-top: 22px; font-size: 0.88rem; color: var(--color-muted); }
.tf__note a { color: var(--color-gold-dark); text-decoration: underline; }
.tf__end { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--color-line); text-align: center; }
.tf__end p { max-width: 60ch; margin: 0 auto 22px; color: var(--color-ink-soft); }
.tf__end .page-cta { justify-content: center; }
@media (max-width: 600px) {
  .tf-chip { width: 100%; text-align: left; border-radius: var(--radius); }
  .tf-opt { padding: 18px 20px; }
}

/* Eight nav items need the width — the tagline gives way before the menu does */
@media (max-width: 1500px) {
  .brand__tag { display: none; }
  .brand { font-size: 1.62rem; }
  .brand__mark { height: 40px; }
}

/* ═══════════════════════════════════════════
   VISUAL REFINEMENT PASS
   More contrast, deeper gold, cards with life
   ═══════════════════════════════════════════ */
:root {
  --color-espresso: #17130f;      /* true dark band */
  --color-gold: #c9a961;          /* richer, warmer */
  --color-gold-dark: #96762f;     /* deeper for text */
  --color-gold-light: #e8d3a2;
  --color-bg-alt: #efe7db;        /* champagne, a shade deeper for separation */
  --shadow-card: 0 14px 34px rgba(23, 19, 15, 0.10);
  --shadow-hover: 0 26px 60px rgba(23, 19, 15, 0.18);
}

/* ── Trust bar: dark band, so it separates the hero from the page ── */
.trustbar {
  background: var(--color-espresso);
  border-bottom: 0;
  position: relative;
}
.trustbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.trustbar__item { border-left-color: rgba(233, 211, 162, 0.16); }
.trustbar__val { color: var(--color-gold-light); }
.trustbar__label { color: #a99a86; }
.trustbar .stars-bar { color: rgba(233, 211, 162, 0.25); }

/* ── Category cards: readable type, image that moves ── */
.cat-card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-size: cover;
  background-position: center;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
.cat-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(23,19,15,0.05) 0%, rgba(23,19,15,0.30) 45%,
    rgba(23,19,15,0.78) 82%, rgba(23,19,15,0.92) 100%);
  transition: opacity .45s ease;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.cat-card:hover::before { opacity: 0.92; }
.cat-card__body { position: relative; z-index: 2; }
.cat-card__body h3 { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.cat-card__count { color: var(--color-gold-light); }
.cat-card__link::after {
  content: "";
  display: block; height: 1px; width: 0;
  margin-top: 6px; background: var(--color-gold);
  transition: width .45s ease;
}
.cat-card:hover .cat-card__link::after { width: 100%; }

/* ── Feature cards lift ── */
.card {
  box-shadow: var(--shadow-card);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
  overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

/* ── Concern cards: gold accent that draws in ── */
.concern {
  position: relative;
  box-shadow: 0 2px 10px rgba(23,19,15,0.04);
}
.concern::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s ease;
}
.concern:hover::before { transform: scaleY(1); }
.concern:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

/* ── Section headings: more confident ── */
.section__head h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: -0.012em;
  line-height: 1.14;
}
.section__head { margin-bottom: 54px; }
.eyebrow { color: var(--color-gold-dark); }

/* ── A gold hairline between light sections, for rhythm ── */
.section--alt { position: relative; }
.section--alt::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 92px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* ── Buttons: a little more presence ── */
.btn--gold {
  background: linear-gradient(135deg, var(--color-gold), #b48f45);
  border-color: transparent;
  color: #1a1510;
  box-shadow: 0 6px 18px rgba(150, 118, 47, 0.28);
}
.btn--gold:hover {
  background: linear-gradient(135deg, #d5b874, var(--color-gold-dark));
  box-shadow: 0 12px 30px rgba(150, 118, 47, 0.38);
  transform: translateY(-2px);
}

/* ── Treatment + price rows respond ── */
.treat-card { transition: box-shadow .4s ease, transform .4s ease; }
.treat-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.compact-row--rich { transition: background .3s ease; }
.compact-list--rich .compact-row--rich:hover { background: rgba(201,169,97,0.045); }

/* ── Hero: anchor the slide copy above the fixed CTA layer ──
   Centring the copy meant padding only moved it half as far, so on tall
   viewports the last line ran under the buttons. Bottom-aligning the copy
   and reserving the CTA zone guarantees clearance at any height. */
.hero--slides .hero__slide { align-items: flex-end; }
.hero--slides .hero__inner { padding-bottom: 0; }
.hero--slides .hero__slide .container { padding-bottom: 216px; }

@media (max-width: 900px) {
  .hero--slides .hero__slide .container { padding-bottom: 186px; }
}
@media (max-width: 720px) {
  .hero--slides .hero__slide .container { padding-bottom: 168px; }
  .hero--slides .hero__inner { padding-bottom: 0; }
}

/* The reserved zone is measured at runtime; these are safe fallbacks. */
.hero--slides .hero__slide .container { padding-bottom: var(--hero-cta, 216px); }
@media (max-width: 900px) { .hero--slides .hero__slide .container { padding-bottom: var(--hero-cta, 260px); } }
@media (max-width: 720px) { .hero--slides .hero__slide .container { padding-bottom: var(--hero-cta, 280px); } }

/* ═══════════════════════════════════════════
   MOBILE NAVIGATION  (single source of truth)
   ═══════════════════════════════════════════ */

/* chevrons are a mobile-only control */
.mega-toggle { display: none; }

@media (max-width: 1150px) {
  .nav__toggle { display: block; }

  /* backdrop-filter makes .nav a containing block for fixed children,
     which traps the panel inside the header. Drop it on mobile. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg); }

  /* while the panel is open, pin the header to the very top so the logo and
     the close button stay above it (sticky would leave it under the topbar) */
  body.menu-open .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; }

  /* nothing floats over an open menu */
  body.menu-open .wa-float,
  body.menu-open .mcta,
  body.menu-open .cookiebar { display: none; }

  /* slide-in panel */
  .nav__menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 20px 120px;
    background: var(--color-espresso);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.4,0,.2,1);
  }
  .nav.open .nav__menu { transform: translateX(0); }

  .nav__menu > li {
    width: 100%;
    border-bottom: 1px solid rgba(233,211,162,.14);
    position: relative;
  }
  .nav__menu > li > a {
    display: block;
    padding: 17px 52px 17px 0;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #f2ece2;
    white-space: normal;
  }
  .nav__menu > li > a::after { display: none; }

  /* booking CTA lives inside the panel on mobile */
  .nav__book { display: block; border-bottom: 0; margin-top: 24px; }
  .nav__menu > li.nav__book > a {
    padding: 15px 20px;
    background: var(--color-gold);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 999px;
  }

  /* chevron */
  .mega-toggle {
    display: block;
    position: absolute;
    right: 0;
    top: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-gold-light);
    font-size: 1.6rem;
    line-height: 44px;
    text-align: center;
    transition: transform .3s ease;
  }
  .has-dropdown.is-open > .mega-toggle { transform: rotate(90deg); }

  /* submenu closed until its chevron is tapped */
  .mega {
    position: static;
    transform: none;
    width: auto;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: max-height .35s ease;
  }
  /* The desktop rules `.has-dropdown:hover .mega` / `:focus-within .mega`
     are (0,2,0) and beat a bare `.mega` override. Tapping the chevron on a
     phone sets :focus-within, which re-applied translateX(-50%) and threw the
     submenu off-screen to the left. Match their specificity to kill it. */
  .has-dropdown > .mega,
  .has-dropdown:hover > .mega,
  .has-dropdown:focus-within > .mega,
  .has-dropdown.is-open > .mega {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    opacity: 1;
    visibility: visible;
    transition: max-height .35s ease;
  }

  /* only the chevron opens it — never hover or focus */
  .has-dropdown > .mega,
  .has-dropdown:hover > .mega,
  .has-dropdown:focus-within > .mega { max-height: 0; }
  .has-dropdown.is-open > .mega,
  .has-dropdown.is-open:hover > .mega,
  .has-dropdown.is-open:focus-within > .mega { max-height: 2400px; }

  .mega::before { display: none; }
  .mega .container { padding: 0; width: auto; max-width: none; }
  .mega__inner { grid-template-columns: 1fr; gap: 16px; padding: 4px 0 14px; }
  .mega__col { padding: 0 0 0 14px; border-left: 2px solid rgba(233,211,162,.2); }
  .mega__col h4 { color: var(--color-gold); border-bottom-color: rgba(233,211,162,.14); }
  .mega__col a { color: #cfc4b6; font-size: .95rem; padding: 10px 0; }
  .mega__foot { background: transparent; border-top-color: rgba(233,211,162,.14); padding: 12px 0 0; }
  .mega__foot .container { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; }
  .mega__foot a { color: var(--color-gold-light); }

  /* keep the header usable while the panel is open */
  .nav.open .nav__toggle span { background: var(--color-ink); }
  body.menu-open { overflow: hidden; }
}

/* the Book Now button stays visible in the header on mobile */
@media (max-width: 560px) {
  /* Keep the hero copy inside one screen so the CTAs stay above the fold.
     The hero grows to fit its copy (see sizeHero in main.js), so every line
     saved here is a line the buttons move back up. */
  .hero--slides .ornament { display: none; }
  .hero--slides h1 { margin-bottom: 18px; }
  .hero__h1sub { margin-top: 12px; font-size: 0.68rem; letter-spacing: 0.13em; }
  .hero .hero__lead { font-size: 0.95rem; line-height: 1.62; }
  .nav__cta .btn { padding: 10px 14px; font-size: .62rem; letter-spacing: .1em; }
  .brand__mark { height: 32px; }
  .brand { font-size: 1.15rem; }
}