:root {
  --cream:        #F3EEE4;
  --cream-soft:   #F7F4EC;
  --sand:         #C9BCA3;
  --sand-deep:    #B3A488;
  --olive:        #4B5540;
  --olive-dark:   #3D4634;
  --sage:         #6E7A5E;
  --sage-dark:    #57624A;
  --gold:         #B08D57;
  --ink:          #3A362E;
  --ink-soft:     #6B6559;
  --on-dark:      #EDE8DC;
  --on-dark-soft: #B9BCA8;
  --line:         #DDD5C6;
  --line-dark:    rgba(237,232,220,0.22);
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --maxw: 1200px;
  --nav-h: 140px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-md); }
.section { padding: var(--space-xl) 0; }
.eyebrow {
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: var(--space-sm);
}
.eyebrow.on-dark { color: var(--on-dark); }
.eyebrow.centered { text-align: center; }
.treatments .eyebrow.centered { margin-top: var(--space-md); }
.rule {
  width: 46px; height: 1px; background: var(--gold);
  margin: var(--space-sm) 0;
}
.rule.centered { margin-left: auto; margin-right: auto; }
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 32px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-solid { background: var(--sage); color: var(--cream); }
.btn-solid:hover { background: var(--sage-dark); }
.btn-outline { background: transparent; color: var(--sage); border-color: var(--sage); }
.btn-outline:hover { background: var(--sage); color: var(--cream); }
.btn-ghost-light { background: transparent; color: var(--on-dark); border-color: var(--on-dark-soft); }
.btn-ghost-light:hover { background: var(--on-dark); color: var(--olive); }
.text-link {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sage-dark);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.text-link:hover { border-color: var(--sage-dark); }
.ph {
  background: var(--sand-deep);
  background-image: linear-gradient(135deg, #C4B69B 0%, #B3A488 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(58,54,46,0.5);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  text-align: center;
}
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-md);
}
.logo { display: flex; align-items: center; margin-left: clamp(-166px, calc(-30.74vw + 277px), 0px); }
.logo img { height: clamp(150px, calc(1.85vw + 133px), 160px); width: auto; display: block; }
.logo .sprig { font-size: 15px; color: var(--gold); margin-bottom: 2px; letter-spacing: 2px; }
.logo .name {
  font-family: var(--font-display);
  font-size: 30px; font-style: italic; font-weight: 500; color: var(--sage-dark);
  letter-spacing: 0.5px;
}
.logo .sub {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 3px; padding-left: 3px;
}
.nav-links { display: flex; align-items: center; gap: var(--space-md); list-style: none; }
.nav-links a {
  font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink); font-weight: 400; transition: color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-cta .btn { padding: 13px 26px; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 26px; color: var(--ink);
}
.hero {
  position: relative; min-height: 830px; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(100deg, var(--olive-dark) 0%, #6B6650 45%, var(--sand) 100%);
}
.hero-cap { position: relative; width: 100%; max-width: 1800px; margin: 0 auto; min-height: 830px; display: flex; align-items: center; }
.hero-inner { position: relative; z-index: 2; padding: 0 2rem 0 3rem; height: 100%; }
.hero-content { max-width: 560px; color: var(--on-dark); position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero .eyebrow { font-size: 14px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #fff; margin-bottom: var(--space-sm); }
.hero h1 { font-size: clamp(46px, 6vw, 108px); color: #fff; font-weight: 400; margin-bottom: var(--space-sm); line-height: 1.1; white-space: nowrap; }
.hero h1 em { font-style: italic; }
.hero p { font-size: 27px; font-weight: 400; line-height: 1.4; margin-bottom: var(--space-md); max-width: 460px; color: #fff; }
.hero .btn { font-size: 17px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; padding: 18px 38px; }


.hero-photo-frame {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: clamp(350px, calc(53vw - 336px), 590px); width: auto; aspect-ratio: 1.89; z-index: 1;
}
.mask-x {
  width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6px, black calc(100% - 6px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 6px, black calc(100% - 6px), transparent 100%);
}
.mask-y {
  width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 6px, black calc(100% - 6px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 6px, black calc(100% - 6px), transparent 100%);
}
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.welcome { display: flex; align-items: stretch; padding: 2rem 0.5rem 2rem 0; }
.welcome-text { flex: 0 0 auto; width: 600px; max-width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 3.6rem 0; }
.welcome-text-inner { max-width: 480px; margin: 0 auto; }
.welcome-text h2 { font-size: clamp(34px, 4vw, 46px); margin-bottom: var(--space-md); position: relative; }
.welcome-text p { color: var(--ink-soft); max-width: 440px; }
.welcome-media { display: grid; grid-template-columns: 0.8fr 1.2fr; grid-template-rows: 420px; flex: 1; }
.welcome-values {
  background: var(--sand); color: var(--olive-dark);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--space-sm); text-align: center; padding: var(--space-md);
  border-radius: 14px 0 0 14px;
}
.welcome-values .heart { font-size: 26px; color: var(--olive); margin-bottom: var(--space-xs); }
.welcome-values span {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 400;
}
.welcome-media .ph { min-height: 420px; }
.welcome-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 14px 14px 0; }
.treatments { background: var(--cream-soft); text-align: center; padding: 3.6rem 0; }
.treatments-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: var(--space-md);
}
.treatment {
  padding: 0 var(--space-md);
  border-right: 1px solid var(--line);
}
.treatment:last-child { border-right: none; }
.treatment .icon { font-size: 32px; color: var(--gold); margin-bottom: var(--space-sm); }
.treatment h3 { font-size: 22px; letter-spacing: 1px; margin-bottom: var(--space-sm); text-transform: uppercase; font-family: var(--font-body); font-weight: 400; }
.treatment p { font-size: 15px; color: var(--ink-soft); margin-bottom: var(--space-md); min-height: 78px; }
.why { background: var(--olive); color: var(--on-dark); padding: 2.4rem 0; }
.why h2 {
  text-align: center; font-family: var(--font-body); font-weight: 400;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--on-dark); margin-bottom: var(--space-lg);
}
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.why-item {
  text-align: center; padding: 0 var(--space-sm);
  border-right: 1px solid var(--line-dark);
}
.why-item:last-child { border-right: none; }
.why-item .icon { font-size: 30px; color: var(--on-dark); margin-bottom: var(--space-sm); opacity: 0.9; }
.why-item span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.studio { display: grid; grid-template-columns: 0.9fr 2fr; align-items: center; gap: 0; }
.studio-text { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; }
.studio-text h2 { font-size: clamp(30px, 3.5vw, 42px); margin-bottom: var(--space-md); }
.studio-text p { color: var(--ink-soft); margin-bottom: var(--space-md); max-width: 320px; }
.studio-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.studio-gallery .ph { min-height: 300px; }
.studio-gallery img { width: 100%; aspect-ratio: 1.333; object-fit: cover; display: block; }
.shop { background: var(--cream-soft); }
.shop-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-lg); }
.shop-text h2 { font-size: clamp(30px, 3.5vw, 42px); margin-bottom: var(--space-md); }
.shop-text p { color: var(--ink-soft); margin-bottom: var(--space-md); max-width: 400px; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.shop-card { text-align: center; position: relative; }
.shop-card .ph { min-height: 200px; margin-bottom: var(--space-xs); }
.shop-card a { display: block; overflow: visible; margin-bottom: var(--space-xs); position: relative; z-index: 1; }
.shop-card a:hover { z-index: 10; }
.shop-card img { width: 100%; aspect-ratio: 0.84; object-fit: cover; display: block; transition: transform 0.35s ease; cursor: pointer; }
.shop-card a:hover img { transform: scale(2.1); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.shop-card .p-name { font-size: 15px; color: var(--ink); }
.shop-card .p-price { font-size: 14px; color: var(--ink-soft); }
.mukti { background: var(--cream); position: relative; padding: 2rem 0; }
.mukti-inner { display: grid; grid-template-columns: 1fr 1.6fr; grid-template-rows: 300px; align-items: stretch; }
.mukti-text { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; }
.mukti-text .eyebrow { margin-bottom: var(--space-xs); }
.mukti-text h3 { font-family: var(--font-body); font-size: 26px; letter-spacing: 6px; font-weight: 400; margin-bottom: var(--space-sm); }
.mukti-text p { color: var(--ink-soft); max-width: 300px; margin-bottom: var(--space-md); font-size: 15px; }
.mukti-media .ph { min-height: 300px; }
.mukti-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer { background: var(--olive); color: var(--on-dark); padding: 2.4rem 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr 1.2fr; gap: var(--space-md); }
.footer .logo .name { color: var(--on-dark); }
.footer .logo .sub { color: var(--on-dark-soft); }
.footer-socials { display: flex; gap: var(--space-sm); margin-top: var(--space-md); font-size: 20px; }
.footer h4 { font-family: var(--font-body); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--space-sm); color: var(--on-dark); font-weight: 400; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 8px; }
.footer ul li a, .footer .contact-line { font-size: 14px; color: var(--on-dark-soft); transition: color 0.2s ease; }
.footer ul li a:hover { color: var(--on-dark); }
.footer .contact-line { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.footer-book { border: 1px solid var(--line-dark); padding: var(--space-sm); }
.footer-book .eyebrow { color: var(--on-dark); margin-bottom: 4px; }
.footer-book p { font-size: 13px; color: var(--on-dark-soft); }
.footer-bottom {
  text-align: center; margin-top: 2rem;
  padding-top: var(--space-md); border-top: 1px solid var(--line-dark);
  font-size: 12px; letter-spacing: 1px; color: var(--on-dark-soft);
}
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute;
    top: var(--nav-h); left: 0; right: 0; background: var(--cream);
    padding: var(--space-md); gap: var(--space-md);
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle { display: block; }
  .welcome { flex-direction: column; padding: 2rem 1.5rem; }
  .welcome-text { width: auto; max-width: 100%; flex: none; padding: 0 0 2rem 0; }
  .welcome-text-inner { max-width: 100%; margin: 0; }
  .welcome-media { flex: none; width: 100%; grid-template-rows: 260px; }
  .logo { margin-left: 0; }
  .logo img { height: 150px; }
  .hero p { font-size: 19px; }
  .welcome, .studio, .shop-inner, .mukti-inner { grid-template-columns: 1fr; }
  .welcome-text { padding: var(--space-lg) 0; }
  .studio-text, .mukti-text { padding: var(--space-lg) 0 var(--space-md); }
  .treatments-grid, .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) 0; }
  .treatment { border-right: none; }
  .treatment:nth-child(odd) { border-right: 1px solid var(--line); }
  .why-item { border-right: none; margin-bottom: var(--space-md); }
  .studio-gallery { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .section { padding: var(--space-lg) 0; }
  .treatments-grid { grid-template-columns: 1fr; }
  .treatment:nth-child(odd) { border-right: none; }
  .treatment { border-bottom: 1px solid var(--line); padding-bottom: var(--space-md); }
  .why-grid, .shop-grid, .studio-gallery, .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(44px, 12vw, 60px); }
}

@media (max-width: 1300px) {
  .hero { min-height: 0; }
  .hero-cap { display: block; min-height: 0; padding: 3rem 0; }
  .hero-inner { height: auto; padding: 0 2rem; }
  .hero-content { height: auto; max-width: 600px; margin: 0 auto; }
  .hero h1 { white-space: normal; }
  .hero-photo-frame {
    position: relative; right: auto; top: auto; transform: none;
    height: auto; width: calc(100% - 4rem); max-width: 900px;
    margin: 2.5rem auto 0; aspect-ratio: 1.89;
  }
}

/* ===== Facials page: hero ===== */
.facials-hero { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.facials-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.facials-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(270deg, rgba(30,32,24,0.88) 0%, rgba(30,32,24,0.55) 40%, rgba(30,32,24,0.05) 70%);
}
.facials-hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-md); width: 100%; display: flex; justify-content: flex-end; }
.facials-hero-content { max-width: 420px; color: #fff; }
.facials-hero-content h1 { font-size: clamp(42px, 5vw, 56px); color: #fff; margin-bottom: 0.6rem; }
.facials-hero-content p { font-size: 16px; font-weight: 300; color: #fff; }

/* ===== Facials page: intro ===== */
.facials-intro { text-align: center; padding: var(--space-xl) var(--space-md) var(--space-lg); }
.facials-intro h2 { font-size: 32px; margin-bottom: 0.8rem; }
.facials-intro p { color: var(--ink-soft); max-width: 520px; margin: 0 auto; line-height: 1.7; }

/* ===== Facials page: treatments list ===== */
.treatments-list { max-width: 840px; margin: 0 auto; padding: 0 var(--space-md) var(--space-xl); }
.treatment-row {
  border-bottom: 1px solid var(--line); padding: var(--space-lg) 0;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: start;
}
.treatment-row:first-child { padding-top: 0; }
.treatment-row.last { border-bottom: none; }
.treatment-row.highlight {
  background: var(--cream-soft); border: 1px solid var(--sand); border-radius: 8px;
  padding: 1.8rem; margin-bottom: 0.5rem;
}
.t-name { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin-bottom: 0.3rem; }
.t-badge {
  display: inline-block; font-family: var(--font-body); font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; background: var(--sage); color: #fff; padding: 3px 10px;
  border-radius: 20px; margin-left: 10px; vertical-align: middle; position: relative; top: -3px;
}
.t-desc { color: var(--ink-soft); font-size: 15px; line-height: 1.7; max-width: 520px; margin-top: 0.5rem; }
.t-meta { text-align: right; white-space: nowrap; }
.t-price { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.t-duration { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.treatment-row .text-link { display: inline-block; margin-top: 0.8rem; }

/* ===== Footer logo (white version, overrides header's logo positioning) ===== */
.footer .logo { margin-left: 0; align-items: center; }
.footer .logo img { height: 105px; width: auto; display: block; }

/* ===== Waxing page: hero (gradient, no photo) ===== */
.waxing-hero {
  position: relative; min-height: 340px; display: flex; align-items: center;
  background: linear-gradient(100deg, var(--olive-dark) 0%, #6B6650 45%, var(--sand) 100%);
}
.waxing-hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-md); width: 100%; }
.waxing-hero h1 { font-size: clamp(42px, 5vw, 56px); color: #fff; margin-bottom: 0.6rem; }
.waxing-hero p { font-size: 16px; font-weight: 300; color: #fff; max-width: 420px; }

/* ===== Waxing page: section intro ===== */
.section-intro { text-align: center; padding: 3.5rem var(--space-md) 1rem; }

/* ===== Waxing page: compact treatments list ===== */
.waxing-treatments { max-width: 840px; margin: 0 auto; padding: 0 var(--space-md) 3rem; }
.wax-row {
  border-bottom: 1px solid var(--line); padding: 1.4rem 0;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center;
}
.wax-row:first-child { padding-top: 0; }
.wax-row.last { border-bottom: none; }
.wax-name { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.wax-duration { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.wax-note { font-size: 13px; color: var(--ink-soft); font-style: italic; margin-top: 2px; }
.wax-meta { text-align: right; white-space: nowrap; }
.wax-price { font-family: var(--font-display); font-size: 22px; color: var(--ink); }

/* ===== Facials mobile hero fix ===== */
.eyebrow-mobile { display: none; }
@media (max-width: 900px) {
  .facials-hero { min-height: 422px; align-items: stretch; }
  .facials-hero-inner { max-width: none; margin: 0; padding: 0; width: 100%; display: block; }
  .facials-hero-content { max-width: 340px; width: auto; height: 100%; position: relative; }
  .eyebrow-desktop { display: none; }
  .eyebrow-mobile { display: block; }
  .facials-hero-content .eyebrow-mobile { position: absolute; top: 55px; left: 200px; color: #fff; text-align: left; width: max-content; }
  .facials-hero-content p:not(.eyebrow) { position: absolute; top: 150px; left: 215px; width: 150px; text-align: right; font-size: 15px; font-weight: 300; line-height: 1.5; }
  .facials-intro { padding: 1.5rem 1.5rem 2.5rem; }
}

/* ===== Waxing page: photo hero (matches facials-hero exactly) ===== */
.waxing-photo-hero { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.waxing-photo-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
.waxing-photo-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(270deg, rgba(30,32,24,0.88) 0%, rgba(30,32,24,0.55) 40%, rgba(30,32,24,0.05) 70%);
}
.waxing-photo-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 4rem; display: flex; justify-content: flex-end; }
.waxing-photo-hero-content { max-width: 420px; color: #fff; }
.waxing-photo-hero-content h1 { font-size: clamp(42px, 5vw, 56px); color: #fff; margin-bottom: 0.6rem; }
.waxing-photo-hero-content p { font-size: 16px; font-weight: 300; color: #fff; }

/* ===== About page ===== */
.about-hero { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.about-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; z-index: 0; }
.about-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(270deg, rgba(30,32,24,0.85) 0%, rgba(30,32,24,0.5) 40%, rgba(30,32,24,0.05) 70%);
}
.about-hero-inner { position: absolute; z-index: 2; left: 84.5%; top: 50%; transform: translate(-50%, -50%); width: 100%; }
.about-hero-inner .eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #fff; margin-bottom: 0.5rem; }
.about-hero-inner h1 { font-size: clamp(38px, 5vw, 56px); color: #fff; font-weight: 400; margin: 0; white-space: nowrap; text-align: center; }

.bio-section { max-width: 1100px; margin: 0 auto; padding: 4.5rem var(--space-md); display: grid; grid-template-columns: 320px 1fr; gap: 3.5rem; align-items: start; }
.bio-photo { width: 100%; aspect-ratio: 0.667; overflow: hidden; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-text .eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.bio-text h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 400; margin: 0 0 1.4rem; }
.bio-text p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 1.1rem; max-width: 560px; }

.approach-section { max-width: 1200px; margin: 0 auto; padding: 1rem var(--space-md) 4.5rem; }
.approach-eyebrow { text-align: center; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.approach-item { text-align: center; padding: 0 1.5rem; border-right: 1px solid var(--line); }
.approach-item:last-child { border-right: none; }
.approach-item .icon { font-size: 28px; color: var(--gold); margin-bottom: 1.2rem; }
.approach-item h3 { font-weight: 500; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 0.8rem; }
.approach-item p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin: 0 auto; max-width: 280px; }

@media (max-width: 800px) {
  .bio-section { grid-template-columns: 1fr; }
  .bio-photo { max-width: 280px; margin: 0 auto; }
  .approach-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .approach-item { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 2rem; }
  .approach-item:last-child { border-bottom: none; }
}

/* ===== About page: reviews ===== */
.reviews-section { max-width: 1100px; margin: 0 auto; padding: 1rem var(--space-md) 4.5rem; }
.reviews-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: stretch; }
.review-card { display: flex; flex-direction: column; text-align: left; padding: 1.8rem; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.review-card .stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 0.9rem; }
.review-card .review-quote { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); font-style: italic; margin: 0 0 1rem; flex-grow: 1; }
.review-card .review-name { font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); margin: 0; padding-top: 0.8rem; border-top: 1px solid var(--line); }

@media (max-width: 800px) {
  .reviews-columns { grid-template-columns: 1fr; }
}

/* ===== Gallery page ===== */
.gallery-hero {
  position: relative; min-height: 300px; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(100deg, var(--olive-dark) 0%, #6B6650 45%, var(--sand) 100%);
}
.gallery-hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-md); width: 100%; text-align: center; }
.gallery-hero-inner h1 { font-size: clamp(38px, 5vw, 56px); color: #fff; font-weight: 400; margin: 0 0 0.6rem; }
.gallery-hero-inner p { font-size: 16px; font-weight: 300; color: #fff; margin: 0; }

.gallery-grid { max-width: 1300px; margin: 0 auto; padding: 3rem var(--space-md) 4rem; column-count: 3; column-gap: 1.2rem; }
.gallery-grid img { width: 100%; display: block; margin-bottom: 1.2rem; border-radius: 4px; break-inside: avoid; }

@media (max-width: 900px) {
  .gallery-grid { column-count: 2; }
}
@media (max-width: 560px) {
  .gallery-grid { column-count: 1; }
}

.section-intro-cta { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: var(--maxw); margin: 0 auto; padding: 3.5rem var(--space-md) 1rem; }
.section-intro-cta .eyebrow { margin-bottom: 0; }

/* ===== Contact page ===== */
.contact-hero {
  position: relative; min-height: 300px; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(100deg, var(--olive-dark) 0%, #6B6650 45%, var(--sand) 100%);
}
.contact-hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-md); width: 100%; text-align: center; }
.contact-hero-inner h1 { font-size: clamp(38px, 5vw, 56px); color: #fff; font-weight: 400; margin: 0 0 0.6rem; }
.contact-hero-inner p { font-size: 16px; font-weight: 300; color: #fff; margin: 0; }

.contact-section {
  max-width: var(--maxw); margin: 0 auto; padding: 4rem var(--space-md);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.contact-photo-placeholder {
  aspect-ratio: 1; border: 1px dashed var(--line); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  color: var(--ink-soft); background: var(--cream);
}
.contact-photo-placeholder i { font-size: 40px; }
.contact-photo-placeholder p { font-size: 14px; margin: 0; }

.contact-info .eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.contact-info h2 { font-size: clamp(28px, 3.5vw, 38px); font-weight: 400; margin: 0 0 1.5rem; }
.contact-info .contact-line { font-size: 16px; color: var(--ink-soft); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.contact-info .contact-line a { color: var(--ink-soft); text-decoration: none; }
.contact-info .contact-line a:hover { color: var(--ink); }

.contact-map { max-width: var(--maxw); margin: 0 auto var(--space-xl); padding: 0 var(--space-md); }
.contact-map iframe { border-radius: 4px; display: block; }

@media (max-width: 800px) {
  .contact-section { grid-template-columns: 1fr; }
}

/* ===== Mobile fixes (Sept 2026) ===== */
@media (max-width: 900px) {
  /* 1. Shorter header */
  :root { --nav-h: 96px; }
  .nav { padding: 0 1.25rem; }
  .logo img { height: 90px; }

  /* 2. Book button beside the menu icon */
  .nav-cta { display: block; margin-left: auto; margin-right: 0.75rem; }
  .nav-cta .btn { padding: 10px 16px; font-size: 11px; letter-spacing: 1.5px; }

  /* 3. About hero: heading on the right, over the wall, on two lines */
  .about-hero-inner { left: auto; right: 1.5rem; transform: translateY(-50%); width: auto; max-width: 50%; }
  .about-hero-inner h1 { white-space: normal; text-align: right; }

  /* 9. Waxing hero: less side padding, narrower text block */
  .waxing-photo-hero-inner { padding: 0 1.5rem; }
  .waxing-photo-hero-content { max-width: 60%; text-align: right; }
  .waxing-photo-hero-content p { font-size: 15px; }
}

/* ===== Mobile fixes: hero text positions ===== */
@media (max-width: 900px) {
  /* About: "Meet Michelle" bottom right, stacked on two lines */
  .about-hero-inner { top: auto; bottom: 1.75rem; right: 1.5rem; transform: none; }
  .about-hero-inner h1 { width: min-content; text-align: right; line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }

  /* Waxing: all text top right */
  .waxing-photo-hero { align-items: flex-start; }
  .waxing-photo-hero-inner { padding: 1.75rem 1.5rem 0; }
}

/* ===== Mobile fixes: waxing hero shows more of the photo ===== */
@media (max-width: 900px) {
  .waxing-photo-hero { min-height: 340px; }
}

/* ===== Mobile: About hero, Option B ===== */
@media (max-width: 900px) {
  .about-hero-inner { top: 56%; bottom: auto; right: 1.5rem; transform: none; }
  .about-hero-inner h1 { width: auto; text-align: right; line-height: 0.95; text-shadow: none; }
  .about-hero-inner .hero-kicker { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: 4px; margin: 0 -4px 6px 0; }
  .about-hero-inner .hero-name { display: block; font-size: 44px; font-style: italic; }
  .about-hero-inner h1::after { content: ""; display: block; width: 52px; height: 1px; background: var(--gold); margin: 12px 0 0 auto; }
}

/* ===== Mobile: About page spacing + swipeable reviews ===== */
@media (max-width: 800px) {
  .bio-section { padding-bottom: 2rem; }
  .approach-section { padding-top: 0; padding-bottom: 1.5rem; }
  .approach-item:last-child { padding-bottom: 0; }
  .reviews-section { padding-top: 1.5rem; }

  .reviews-columns {
    display: flex; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 0.5rem;
  }
  .reviews-columns::-webkit-scrollbar { display: none; }
  .review-card { flex: 0 0 85%; scroll-snap-align: start; }
}

/* ===== Mobile: About, gap above "Our approach" (midpoint) ===== */
@media (max-width: 800px) {
  .bio-section { padding-bottom: 3.75rem; }
}

/* ===== Mobile: Homepage (Batch 2) ===== */
@media (hover: none) {
  .shop-card a:hover img { transform: none; box-shadow: none; }
}
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .shop-card .p-name { font-size: 11px; letter-spacing: 0.5px; line-height: 1.4; }
  .shop-card .p-price { font-size: 12px; }

  .welcome-values { padding: 1rem 0.5rem; gap: 0.6rem; }
  .welcome-values span { font-size: 10.5px; letter-spacing: 1.5px; }

  .why { padding: 2rem 0; }
  .why h2 { margin-bottom: 1.5rem; }
  .why-grid { grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; }
  .why-item { display: flex; align-items: center; gap: 0.6rem; text-align: left; padding: 0; margin: 0; }
  .why-item .icon { font-size: 22px; margin: 0; }
  .why-item span { font-size: 10.5px; letter-spacing: 1.5px; line-height: 1.4; }
  .why-item:last-child { grid-column: 1 / -1; justify-content: center; }

  .text-link { display: inline-block; padding: 10px 0; }
}

/* ===== Mobile: Homepage, hide "Why clients love" + tighten welcome gap ===== */
@media (max-width: 900px) {
  .why { display: none; }
  .welcome-text { padding: 1rem 0 2rem; }
}

/* ===== Mobile: Homepage, tighten gap above Mukti ===== */
@media (max-width: 900px) {
  .shop.section { padding-bottom: 3rem; }
  .mukti { padding-top: 0; }
  .mukti-text { padding-top: 2rem; }
}

/* ===== Mobile: Homepage, Mukti photo closer to text ===== */
@media (max-width: 900px) {
  .mukti-inner { grid-template-rows: auto; }
  .mukti-text { padding-bottom: 1.25rem; }
}

/* ===== Mobile: Footer, Quick links + More info side by side ===== */
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md) 1rem; }
  .footer-grid > div:nth-child(1),
  .footer-grid > div:nth-child(4),
  .footer-grid > div:nth-child(5) { grid-column: 1 / -1; }
}

/* ===== Mobile: Footer, socials beside logo (aligned with More info) ===== */
@media (max-width: 560px) {
  .footer-grid > div:nth-child(1) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; align-items: center; }
  .footer-socials { margin-top: 0; gap: 0.9rem; font-size: 30px; }
  .footer-socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%;
    border: 1px solid rgba(237,232,220,0.35); color: var(--on-dark);
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .footer-socials a:active { background: rgba(237,232,220,0.12); border-color: var(--on-dark); }
}

/* ===== Mobile: Footer, logo slightly larger ===== */
@media (max-width: 560px) {
  .footer .logo img { height: 118px; }
}

/* ===== Mobile: Gallery, two-column masonry ===== */
@media (max-width: 560px) {
  .gallery-grid { column-count: 2; column-gap: 0.6rem; padding: 1.5rem 1rem 3rem; }
  .gallery-grid img { margin-bottom: 0.6rem; }
}

/* ===== Mobile: Facials + Lashes & Brows, stacked treatment rows ===== */
@media (max-width: 560px) {
  .treatment-row { grid-template-columns: 1fr; gap: 0.3rem; padding: 2rem 0; }
  .treatment-row > div:first-child { display: contents; }
  .t-name { order: 1; }
  .t-meta { order: 2; display: flex; align-items: baseline; gap: 0.5rem; text-align: left; }
  .t-price { font-size: 22px; }
  .t-duration { margin-top: 0; }
  .t-duration::before { content: "\00B7"; margin-right: 0.5rem; }
  .t-desc { order: 3; }
  .treatment-row .text-link { order: 4; justify-self: start; }
}

/* ===== Hidden headings (for Google and screen readers) ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Mobile: Facials hero, text anchored to the right ===== */
@media (max-width: 900px) {
  .facials-hero-content {
    max-width: none; width: 100%; height: auto;
    display: flex; flex-direction: column; align-items: flex-end;
    padding: 55px clamp(1.25rem, 14vw, 4rem) 2rem 1.5rem;
  }
  .facials-hero-content .eyebrow-mobile { position: static; width: max-content; margin-bottom: 3.2rem; }
  .facials-hero-content p:not(.eyebrow) { position: static; width: 150px; }
}

/* ===== Mobile: Facials hero, text nudged right ===== */
@media (max-width: 900px) {
  .facials-hero-content { padding-right: clamp(1.25rem, 11vw, 4rem); }
}

/* ===== Mobile: Facials hero, text nudged right (2) ===== */
@media (max-width: 900px) {
  .facials-hero-content { padding-right: clamp(1rem, 8vw, 3.5rem); }
}

/* ===== Desktop: header logo never pulled off-screen at mid widths ===== */
@media (min-width: 901px) {
  .site-header .logo {
    margin-left: max(clamp(-166px, calc(-30.74vw + 277px), 0px), min(0px, calc((1200px - 100vw) / 2)));
  }
}

/* ===== Desktop: footer socials 50% bigger, centred under logo ===== */
@media (min-width: 561px) {
  .footer-grid > div:first-child { display: flex; flex-direction: column; align-items: center; width: fit-content; }
  .footer-socials { font-size: 30px; gap: 1.5rem; }
}

/* ===== Desktop: hero, 47.5% less space above and below the photo ===== */
@media (min-width: 1301px) {
  .hero, .hero-cap { min-height: calc(435.75px + 0.475 * clamp(350px, calc(53vw - 336px), 590px)); }
}

/* ===== Desktop: gallery header, 52% less space above and below text ===== */
@media (min-width: 901px) {
  .gallery-hero { min-height: 195px; }
}

/* ===== Desktop: contact header, matched to gallery header ===== */
@media (min-width: 901px) {
  .contact-hero { min-height: 195px; }
}

/* ===== Footer: Book online box fits its content ===== */
.footer-book { align-self: start; justify-self: start; }

/* ===== Homepage: "Our treatments" heading sits higher above the cards ===== */
.treatments .eyebrow.centered { margin-top: 0; }
.treatments-grid { margin-top: 4rem; }

/* ===== Header: In-Home Facials tab on two lines (one line in mobile menu) ===== */
.nav-links a.nav-two-line { display: inline-block; text-align: center; line-height: 1.25; }
@media (max-width: 900px) {
  .nav-links a.nav-two-line br { display: none; }
}

/* ===== Cancellation policy page ===== */
.policy-wrap { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.policy-intro { font-size: 18px; color: var(--ink-soft); text-align: center; max-width: 620px; margin: 0 auto; }
.policy-rule { width: 56px; height: 1px; background: var(--gold); margin: 2.2rem auto; }
.policy-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 3.5rem; }
.policy-card { background: var(--cream-soft); border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem 1rem; text-align: center; }
.policy-card .big { font-family: var(--font-display); font-size: 42px; line-height: 1; color: var(--olive); }
.policy-card .lbl { display: block; margin-top: 0.7rem; font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; line-height: 1.5; }
.policy-block { padding: 1.8rem 0; border-top: 1px solid var(--line); }
.policy-block:last-of-type { border-bottom: 1px solid var(--line); }
.policy-label { font-size: 12px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold); font-weight: 400; margin-bottom: 0.6rem; }
.policy-block p { font-size: 16px; color: var(--ink-soft); }
.policy-block strong { font-weight: 500; color: var(--ink); }
.policy-closing { text-align: center; margin-top: 3rem; }
.policy-closing p { font-size: 16px; color: var(--ink-soft); max-width: 560px; margin: 0 auto 2rem; }
@media (max-width: 600px) {
  .policy-summary { grid-template-columns: 1fr; gap: 0.75rem; }
  .policy-card { padding: 1.2rem 1rem; }
  .policy-card .big { font-size: 36px; }
  .policy-wrap { padding-top: 3rem; }
  .policy-intro { font-size: 17px; }
}

/* ===== Mobile Facials page (reuses Cancellation Policy layout) ===== */
.mf-tagline { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; text-align: center; color: var(--ink); max-width: 680px; margin: 0 auto 2.2rem; }
.mf-tagline em { font-style: italic; }
.policy-intro + .policy-intro { margin-top: 1.1rem; }
.mf-areas { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; }
.mf-areas span { border: 1px solid var(--line); background: var(--cream-soft); border-radius: 999px; padding: 6px 16px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); font-weight: 400; }
.mf-areas span.between { background: transparent; border-style: dashed; border-color: var(--gold); color: var(--gold); text-transform: none; letter-spacing: 0.5px; font-style: italic; }
.mf-fees { margin-top: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--cream-soft); overflow: hidden; }
.mf-fee-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); }
.mf-fee-row:first-child { border-top: 0; }
.mf-fee-row .what { font-size: 15px; color: var(--ink-soft); }
.mf-fee-row .amt { font-family: var(--font-display); font-size: 24px; color: var(--olive); white-space: nowrap; }
.policy-block p.mf-fee-note { font-size: 14px; margin-top: 0.9rem; }
.mf-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
.btn.mf-solid { background: var(--sage); color: var(--cream); }
.btn.mf-solid:hover { background: var(--olive); }
.policy-block p.mf-contact-line { font-size: 15px; margin-top: 1.1rem; }
.mf-contact-line a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) {
  .mf-actions .btn { flex: 1 1 100%; text-align: center; }
  .mf-tagline { margin-bottom: 1.6rem; }
}
.policy-block p.mf-booking-note { font-size: 14px; font-style: italic; margin-top: 1.6rem; }

/* ===== Why section: custom Blossom icon, same size as the set's icons ===== */
.why-svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }

/* ===== Contact: shop-front photo in place of the placeholder ===== */
.contact-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }