:root {
  --espresso: #28170e;
  --espresso-deep: #160c07;
  --cream: #f8f2ea;
  --cream-deep: #eee0d1;
  --white: #fffdfa;
  --gold: #bd8738;
  --gold-light: #ddb665;
  --text: #3a281d;
  --muted: #77665b;
  --line: #ddc7ae;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--cream);

  color: var(--text);

  font-family: var(--sans);
}

img {
  display: block;

  max-width: 100%;
}

a {
  color: inherit;
}


/* =====================================================
   HEADER
   ===================================================== */

.sales-header {
  position: relative;

  z-index: 50;

  height: 82px;

  background: var(--espresso-deep);
}

.sales-header-inner {
  width: min(92%, 1220px);
  height: 82px;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.sales-logo {
  position: relative;

  z-index: 5;

  width: 128px;
  height: 128px;

  margin-top: 44px;

  object-fit: contain;

  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

.sales-nav {
  display: flex;
  align-items: center;

  gap: 27px;
}

.sales-nav a {
  color: rgba(255,255,255,.78);

  text-decoration: none;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.sales-nav a:hover {
  color: var(--gold-light);
}

.sales-nav .header-book {
  padding: 13px 20px;

  background: var(--gold-light);

  color: var(--espresso-deep);
}


/* =====================================================
   HERO
   ===================================================== */

.sales-hero {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: center;

  overflow: hidden;
}

.sales-hero-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: 69% center;
}

.sales-hero::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(248,242,234,.99) 0%,
      rgba(248,242,234,.97) 34%,
      rgba(248,242,234,.84) 48%,
      rgba(248,242,234,.28) 70%,
      rgba(248,242,234,.04) 100%
    );
}

.sales-hero-inner {
  position: relative;

  z-index: 2;

  width: min(92%, 1220px);

  margin: auto;
}

.sales-hero-copy {
  width: min(560px, 47%);
}

.eyebrow {
  color: var(--gold);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .19em;

  text-transform: uppercase;
}

.sales-hero h1 {
  max-width: 570px;

  margin:
    15px
    0
    20px;

  color: var(--espresso);

  font-family: var(--serif);

  font-size: clamp(62px, 6vw, 94px);

  font-weight: 500;

  line-height: .88;

  letter-spacing: -.025em;
}

.sales-hero p {
  max-width: 515px;

  margin: 0;

  color: #604e42;

  font-size: 15px;

  line-height: 1.85;
}

.hero-actions {
  margin-top: 30px;

  display: flex;

  flex-wrap: wrap;

  gap: 13px;
}


/* =====================================================
   BUTTONS
   ===================================================== */

.btn-primary,
.btn-secondary {
  min-height: 50px;

  padding:
    0
    26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .09em;

  text-transform: uppercase;
}

.btn-primary {
  background: var(--espresso);

  border:
    1px
    solid
    var(--espresso);

  color: white;
}

.btn-primary:hover {
  background: var(--gold);

  border-color: var(--gold);
}

.btn-secondary {
  background:
    rgba(255,255,255,.45);

  border:
    1px
    solid
    var(--gold);

  color: var(--espresso);
}


/* =====================================================
   TRUST STRIP
   ===================================================== */

.trust-strip {
  background: var(--espresso);

  color: white;
}

.trust-inner {
  width: min(92%, 1050px);

  min-height: 95px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  align-items: center;

  gap: 40px;

  text-align: center;
}

.trust-item strong {
  display: block;

  margin-bottom: 6px;

  color: var(--gold-light);

  font-family: var(--serif);

  font-size: 20px;

  font-weight: 500;
}

.trust-item span {
  color:
    rgba(255,255,255,.63);

  font-size: 9px;

  letter-spacing: .09em;

  text-transform: uppercase;
}


/* =====================================================
   SALES STORY
   ===================================================== */

.sales-story {
  padding:
    100px
    0;
}

.sales-story-inner {
  width: min(92%, 1120px);

  margin: auto;

  display: grid;

  grid-template-columns:
    .95fr
    1.05fr;

  gap: 75px;

  align-items: center;
}

.story-image {
  min-height: 520px;

  overflow: hidden;
}

.story-image img {
  width: 100%;
  height: 520px;

  object-fit: cover;

  border-radius: 2px;
}

.story-copy h2 {
  max-width: 560px;

  margin:
    12px
    0
    24px;

  color: var(--espresso);

  font-family: var(--serif);

  font-size:
    clamp(46px,5vw,65px);

  font-weight: 500;

  line-height: .95;
}

.story-copy > p {
  color: var(--muted);

  font-size: 14px;

  line-height: 1.9;
}

.benefits {
  margin:
    33px
    0
    0;

  padding: 0;

  list-style: none;
}

.benefits li {
  position: relative;

  padding:
    15px
    0
    15px
    38px;

  border-bottom:
    1px
    solid
    var(--line);

  color: #584539;

  font-size: 12px;

  line-height: 1.6;
}

.benefits li::before {
  content: "✦";

  position: absolute;

  left: 4px;
  top: 14px;

  color: var(--gold);

  font-size: 15px;
}


/* =====================================================
   EXPERIENCE SECTION
   ===================================================== */

.experience {
  padding:
    95px
    0;

  background: var(--cream-deep);
}

.experience-inner {
  width: min(92%, 1120px);

  margin: auto;

  text-align: center;
}

.experience h2 {
  margin:
    12px
    auto
    50px;

  color: var(--espresso);

  font-family: var(--serif);

  font-size:
    clamp(44px,5vw,62px);

  font-weight: 500;
}

.steps {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 22px;
}

.step {
  padding:
    40px
    30px;

  background: var(--white);

  border:
    1px
    solid
    var(--line);
}

.step-number {
  width: 44px;
  height: 44px;

  margin:
    0
    auto
    20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px
    solid
    var(--gold);

  border-radius: 50%;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 22px;
}

.step h3 {
  margin:
    0
    0
    12px;

  color: var(--espresso);

  font-family: var(--serif);

  font-size: 27px;

  font-weight: 500;
}

.step p {
  margin: 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.8;
}


/* =====================================================
   SALES QUOTE
   ===================================================== */

.sales-quote {
  padding:
    100px
    20px;

  background: #f9f5ef;

  text-align: center;
}

.sales-quote blockquote {
  max-width: 850px;

  margin:
    0
    auto;

  color: var(--espresso);

  font-family: var(--serif);

  font-size:
    clamp(35px,4vw,52px);

  font-weight: 500;

  line-height: 1.15;
}

.sales-quote p {
  margin-top: 22px;

  color: var(--gold);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .17em;

  text-transform: uppercase;
}


/* =====================================================
   BOOKING CTA
   ===================================================== */

.booking-panel {
  padding:
    95px
    20px;

  background:
    linear-gradient(
      135deg,
      #170d08,
      #321b0f
    );

  color: white;

  text-align: center;
}

.booking-panel h2 {
  margin:
    11px
    auto
    18px;

  color: white;

  font-family: var(--serif);

  font-size:
    clamp(48px,5vw,66px);

  font-weight: 500;

  line-height: 1;
}

.booking-panel p {
  max-width: 625px;

  margin:
    0
    auto
    26px;

  color:
    rgba(255,255,255,.67);

  font-size: 13px;

  line-height: 1.8;
}

.booking-panel .btn-primary {
  background: var(--gold-light);

  border-color: var(--gold-light);

  color: var(--espresso-deep);
}

.booking-note {
  display: block;

  max-width: 520px;

  margin:
    17px
    auto
    0;

  color:
    rgba(255,255,255,.45);

  font-size: 9px;

  line-height: 1.6;
}


/* =====================================================
   OTHER SERVICES
   ===================================================== */

.other-services {
  padding:
    70px
    0;

  background: var(--cream);
}

.other-services-inner {
  width: min(92%, 1050px);

  margin: auto;

  text-align: center;
}

.other-services h3 {
  margin:
    0
    0
    25px;

  font-family: var(--serif);

  font-size: 31px;

  font-weight: 500;
}

.other-links {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;
}

.other-links a {
  padding:
    12px
    18px;

  border:
    1px
    solid
    var(--line);

  background: white;

  color: var(--espresso);

  text-decoration: none;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .07em;

  text-transform: uppercase;
}


/* =====================================================
   FOOTER
   ===================================================== */

.sales-footer {
  padding:
    50px
    0
    28px;

  background: var(--espresso-deep);

  color: white;
}

.sales-footer-main {
  width: min(92%, 1120px);

  margin: auto;

  display: grid;

  grid-template-columns:
    180px
    1fr
    1fr;

  gap: 55px;
}

.footer-logo {
  width: 135px;
  height: 135px;

  object-fit: contain;
}

.sales-footer h4 {
  margin:
    0
    0
    14px;

  color: var(--gold-light);

  font-size: 10px;

  letter-spacing: .11em;

  text-transform: uppercase;
}

.sales-footer p,
.sales-footer a {
  color:
    rgba(255,255,255,.62);

  text-decoration: none;

  font-size: 10px;

  line-height: 1.9;
}

.footer-bottom {
  width: min(92%, 1120px);

  margin:
    35px
    auto
    0;

  padding-top: 20px;

  border-top:
    1px
    solid
    rgba(255,255,255,.09);

  display: flex;

  justify-content: space-between;

  gap: 30px;

  color:
    rgba(255,255,255,.36);

  font-size: 9px;
}

.footer-bottom a {
  color: var(--gold-light);
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 820px) {

  .sales-nav a:not(.header-book) {
    display: none;
  }

  .sales-logo {
    width: 98px;
    height: 98px;

    margin-top: 30px;
  }

  .sales-hero {
    min-height: 720px;

    align-items: flex-start;

    padding-top: 68px;
  }

  .sales-hero-inner {
    margin: 0 auto !important;
  }

  .sales-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(248,242,234,.99) 0%,
        rgba(248,242,234,.96) 47%,
        rgba(248,242,234,.61) 66%,
        rgba(248,242,234,.05) 100%
      );
  }

  .sales-hero-image {
    object-position: center bottom;
  }

  .sales-hero-copy {
    width: 100%;

    max-width: 520px;
  }

  .sales-hero h1 {
    font-size: 61px;
  }

  .trust-inner {
    grid-template-columns: 1fr;

    gap: 20px;

    padding:
      28px
      0;
  }

  .sales-story-inner {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .story-image,
  .story-image img {
    min-height: 390px;
    height: 390px;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .sales-footer-main {
    grid-template-columns: 1fr 1fr;
  }

}


@media (max-width: 540px) {

  .sales-hero {
    min-height: 830px;
  }

  .sales-hero h1 {
    font-size: 52px;
  }

  .sales-story {
    padding:
      75px
      0;
  }

  .story-image,
  .story-image img {
    min-height: 340px;
    height: 340px;
  }

  .sales-footer-main {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
  }

}

/* =====================================================
   MOBILE HERO STACK FIX
   Image first, text below, no shade overlay
   ===================================================== */

@media (max-width: 820px) {

  .sales-hero {
    min-height: auto !important;
    display: block !important;
    padding-top: 0 !important;
    background: var(--cream) !important;
    overflow: visible !important;
  }

  .sales-hero::before {
    display: none !important;
    background: none !important;
  }

  .sales-hero-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 430px !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .sales-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    background: var(--cream) !important;
  }

  .sales-hero-copy {
    width: min(92%, 560px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 34px 0 42px !important;
  }

  .sales-hero h1 {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }

  .sales-hero p {
    max-width: 100% !important;
  }

  .hero-actions {
    margin-top: 24px !important;
  }

}

@media (max-width: 540px) {

  .sales-hero-image {
    height: 360px !important;
    object-position: center center !important;
  }

  .sales-hero-copy {
    width: min(90%, 520px) !important;
    padding: 28px 0 36px !important;
  }

  .sales-hero h1 {
    font-size: 52px !important;
    line-height: .92 !important;
  }

  .sales-hero p {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  .hero-actions {
    gap: 12px !important;
  }

  .btn-primary,
  .btn-secondary {
    min-height: 50px !important;
    width: 100% !important;
  }

}

/* =====================================================
   HYDRO FACIALS — MOBILE OVERLAY HERO FIX
   ===================================================== */

@media (max-width: 820px) {

  body.page-hydro .sales-hero {
    position: relative !important;
    display: block !important;
    min-height: 760px !important;
    padding-top: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  body.page-hydro .sales-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.02) 0%,
        rgba(0,0,0,0.02) 36%,
        rgba(0,0,0,0.10) 52%,
        rgba(40,23,14,0.38) 66%,
        rgba(40,23,14,0.72) 80%,
        rgba(40,23,14,0.92) 100%
      ) !important;
  }

  body.page-hydro .sales-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 76% center !important;
  }

  body.page-hydro .sales-hero-inner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
  }

  body.page-hydro .sales-hero-copy {
    width: min(88%, 360px) !important;
    margin: 0 0 0 20px !important;
    padding: 0 0 26px !important;
    color: #fff !important;
  }

  body.page-hydro .sales-hero-copy .eyebrow {
    color: #e0b866 !important;
  }

  body.page-hydro .sales-hero h1 {
    margin: 10px 0 14px !important;
    color: #fffaf5 !important;
    font-size: 54px !important;
    line-height: .92 !important;
  }

  body.page-hydro .sales-hero p {
    max-width: 100% !important;
    color: rgba(255,250,245,.90) !important;
    font-size: 14px !important;
    line-height: 1.78 !important;
  }

  body.page-hydro .hero-actions {
    margin-top: 22px !important;
    gap: 10px !important;
  }

  body.page-hydro .btn-primary,
  body.page-hydro .btn-secondary {
    width: 100% !important;
    min-height: 50px !important;
  }

  body.page-hydro .btn-primary {
    background: #2c160d !important;
    border-color: #2c160d !important;
    color: #fff !important;
  }

  body.page-hydro .btn-secondary {
    background: rgba(255,248,241,.12) !important;
    border: 1px solid rgba(224,184,102,.95) !important;
    color: #fffaf5 !important;
    backdrop-filter: blur(2px) !important;
  }

}

@media (max-width: 540px) {

  body.page-hydro .sales-hero {
    min-height: 720px !important;
  }

  body.page-hydro .sales-hero-image {
    object-position: 78% center !important;
  }

  body.page-hydro .sales-hero-copy {
    width: min(88%, 330px) !important;
    margin-left: 18px !important;
    padding-bottom: 22px !important;
  }

  body.page-hydro .sales-hero h1 {
    font-size: 48px !important;
  }

}

/* =====================================================
   HYDRO FACIALS — HERO BOOKING CTA HIGHLIGHT
   ===================================================== */

body.page-hydro .sales-hero .hero-actions .btn-primary {
  position: relative !important;
  overflow: visible !important;

  background:
    linear-gradient(
      135deg,
      #e8c26f 0%,
      #c88c32 48%,
      #e6bb62 100%
    ) !important;

  color: #211109 !important;

  border:
    1px solid
    #f1d28a !important;

  font-weight: 800 !important;

  letter-spacing: .09em !important;

  box-shadow:
    0 0 0 1px rgba(255,226,162,.28),
    0 0 16px rgba(224,176,81,.55),
    0 0 34px rgba(205,144,48,.32),
    0 12px 28px rgba(0,0,0,.28) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease !important;
}

body.page-hydro .sales-hero .hero-actions .btn-primary::before {
  content: "" !important;

  position: absolute !important;
  inset: -4px !important;

  z-index: -1 !important;

  border-radius: 2px !important;

  background:
    linear-gradient(
      90deg,
      rgba(232,194,111,.35),
      rgba(255,225,157,.65),
      rgba(200,140,50,.30)
    ) !important;

  filter: blur(8px) !important;

  opacity: .78 !important;
}

body.page-hydro .sales-hero .hero-actions .btn-primary:hover {
  transform: translateY(-2px) !important;

  filter: brightness(1.07) !important;

  box-shadow:
    0 0 0 1px rgba(255,229,174,.42),
    0 0 22px rgba(230,187,98,.75),
    0 0 44px rgba(205,144,48,.42),
    0 15px 32px rgba(0,0,0,.32) !important;
}

@media (max-width: 820px) {

  body.page-hydro .sales-hero .hero-actions .btn-primary {
    min-height: 56px !important;

    font-size: 11px !important;

    background:
      linear-gradient(
        135deg,
        #f0cb79 0%,
        #d49a3d 50%,
        #e7b85e 100%
      ) !important;

    color: #1b0d07 !important;
  }

}

/* =====================================================
   HYDRO FACIALS — SHADED DIVIDER BEFORE STORY SECTION
   ===================================================== */

body.page-hydro .sales-story {
  position: relative !important;
  overflow: hidden !important;
}

body.page-hydro .sales-story::before {
  content: "" !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  height: 34px !important;

  background:
    linear-gradient(
      180deg,
      rgba(48,27,16,.26) 0%,
      rgba(102,72,52,.13) 38%,
      rgba(248,242,234,0) 100%
    ) !important;

  pointer-events: none !important;
  z-index: 1 !important;
}

body.page-hydro .sales-story-inner {
  position: relative !important;
  z-index: 2 !important;
}


/* Slightly stronger on mobile */
@media (max-width: 820px) {

  body.page-hydro .sales-story::before {
    height: 42px !important;

    background:
      linear-gradient(
        180deg,
        rgba(45,24,14,.32) 0%,
        rgba(116,82,58,.15) 42%,
        rgba(248,242,234,0) 100%
      ) !important;
  }

}

/* =====================================================
   BODY WAXING — SHADED DIVIDER BEFORE STORY SECTION
   ===================================================== */

.body-waxing-story {
  position: relative !important;
  overflow: hidden !important;
}

.body-waxing-story::before {
  content: "" !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  height: 34px !important;

  background:
    linear-gradient(
      180deg,
      rgba(48,27,16,.26) 0%,
      rgba(102,72,52,.13) 38%,
      rgba(248,242,234,0) 100%
    ) !important;

  pointer-events: none !important;
  z-index: 1 !important;
}

.body-waxing-story .sales-story-inner {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 820px) {

  .body-waxing-story::before {
    height: 42px !important;

    background:
      linear-gradient(
        180deg,
        rgba(45,24,14,.32) 0%,
        rgba(116,82,58,.15) 42%,
        rgba(248,242,234,0) 100%
      ) !important;
  }

}

/* =====================================================
   BODY WAXING — MOBILE OVERLAY HERO FIX
   ===================================================== */

@media (max-width: 820px) {

  body.page-body-waxing .sales-hero {
    position: relative !important;
    display: block !important;
    min-height: 770px !important;
    padding-top: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  body.page-body-waxing .sales-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.04) 0%,
        rgba(0,0,0,0.08) 36%,
        rgba(24,11,7,0.18) 52%,
        rgba(34,17,10,0.46) 68%,
        rgba(34,17,10,0.78) 84%,
        rgba(34,17,10,0.94) 100%
      ) !important;
  }

  body.page-body-waxing .sales-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 68% center !important;
  }

  body.page-body-waxing .sales-hero-inner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
  }

  body.page-body-waxing .sales-hero-copy {
    width: min(88%, 360px) !important;
    margin: 0 0 0 20px !important;
    padding: 0 0 28px !important;
    color: #fff !important;
  }

  body.page-body-waxing .sales-hero-copy .eyebrow {
    color: #dfb662 !important;
  }

  body.page-body-waxing .sales-hero h1 {
    margin: 10px 0 14px !important;
    color: #fffaf5 !important;
    font-size: 54px !important;
    line-height: .92 !important;
  }

  body.page-body-waxing .sales-hero p {
    max-width: 100% !important;
    color: rgba(255,250,245,.92) !important;
    font-size: 14px !important;
    line-height: 1.78 !important;
  }

  body.page-body-waxing .hero-actions {
    margin-top: 22px !important;
    gap: 10px !important;
  }

  body.page-body-waxing .btn-primary,
  body.page-body-waxing .btn-secondary {
    width: 100% !important;
    min-height: 50px !important;
  }

  body.page-body-waxing .btn-secondary {
    background: rgba(255,248,241,.10) !important;
    border: 1px solid rgba(224,184,102,.95) !important;
    color: #fffaf5 !important;
    backdrop-filter: blur(2px) !important;
  }

}

@media (max-width: 540px) {

  body.page-body-waxing .sales-hero {
    min-height: 740px !important;
  }

  body.page-body-waxing .sales-hero-image {
    object-position: 70% center !important;
  }

  body.page-body-waxing .sales-hero-copy {
    width: min(88%, 330px) !important;
    margin-left: 18px !important;
    padding-bottom: 24px !important;
  }

  body.page-body-waxing .sales-hero h1 {
    font-size: 48px !important;
  }

}

/* =====================================================
   BODY WAXING — PROFESSIONAL MOBILE HERO
   ===================================================== */

@media (max-width: 820px) {

  /* HERO */

  body.page-body-waxing .sales-hero {
    min-height: 720px !important;
    position: relative !important;
    overflow: hidden !important;

    box-shadow:
      0 18px 34px rgba(39,20,10,.18) !important;
  }

  body.page-body-waxing .sales-hero-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    /* Bring the client farther into view */
    object-position: 84% center !important;

    filter:
      brightness(.90)
      contrast(1.04)
      saturate(.96) !important;
  }


  /* More refined overlay */

  body.page-body-waxing .sales-hero::before {
    display: block !important;

    background:
      linear-gradient(
        180deg,
        rgba(22,11,6,.10) 0%,
        rgba(22,11,6,.02) 28%,
        rgba(22,11,6,.06) 44%,
        rgba(22,11,6,.30) 62%,
        rgba(22,11,6,.70) 82%,
        rgba(22,11,6,.88) 100%
      ) !important;
  }


  /* COPY PANEL */

  body.page-body-waxing .sales-hero-inner {
    left: 0 !important;
    right: 0 !important;
    bottom: 22px !important;

    width: 100% !important;

    padding: 0 18px !important;
  }

  body.page-body-waxing .sales-hero-copy {
    width: 100% !important;
    max-width: 470px !important;

    margin: 0 !important;

    padding:
      22px
      20px
      20px !important;

    background:
      linear-gradient(
        135deg,
        rgba(34,17,10,.66),
        rgba(24,11,7,.42)
      ) !important;

    border:
      1px solid
      rgba(219,176,91,.30) !important;

    box-shadow:
      0 16px 35px rgba(0,0,0,.20) !important;

    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }


  /* EYEBROW */

  body.page-body-waxing .sales-hero-copy .eyebrow {
    margin-bottom: 8px !important;

    color: #efc66f !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: .15em !important;
  }


  /* TITLE */

  body.page-body-waxing .sales-hero h1 {
    margin:
      0
      0
      12px !important;

    color: #fffaf4 !important;

    font-size: 48px !important;

    line-height: .95 !important;

    letter-spacing: -.025em !important;
  }


  /* PARAGRAPH */

  body.page-body-waxing .sales-hero p {
    margin: 0 !important;

    color: rgba(255,250,245,.92) !important;

    font-size: 13.5px !important;

    line-height: 1.68 !important;
  }


  /* BUTTON AREA */

  body.page-body-waxing .hero-actions {
    margin-top: 19px !important;

    display: grid !important;

    grid-template-columns:
      1fr
      1fr !important;

    gap: 10px !important;
  }


  body.page-body-waxing .hero-actions .btn-primary,
  body.page-body-waxing .hero-actions .btn-secondary {
    width: 100% !important;

    min-height: 52px !important;

    padding:
      0
      12px !important;

    font-size: 8.8px !important;

    letter-spacing: .065em !important;
  }


  /* PRIMARY CTA */

  body.page-body-waxing .hero-actions .btn-primary {
    background:
      linear-gradient(
        135deg,
        #efcb79 0%,
        #d69b3e 52%,
        #eabf65 100%
      ) !important;

    color: #211008 !important;

    border:
      1px solid
      #f4d590 !important;

    box-shadow:
      0 0 18px rgba(220,164,65,.28),
      0 10px 25px rgba(0,0,0,.20) !important;
  }


  /* SECONDARY CTA */

  body.page-body-waxing .hero-actions .btn-secondary {
    background:
      rgba(255,255,255,.08) !important;

    color: #fffaf5 !important;

    border:
      1px solid
      rgba(233,193,111,.82) !important;
  }


  /* ==================================================
     BODY WAXING TRUST STRIP
     ================================================== */

  body.page-body-waxing .trust-strip {
    position: relative !important;

    padding:
      27px
      10px !important;

    background:
      linear-gradient(
        135deg,
        #231108,
        #351b0e
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(225,184,98,.18) !important;
  }


  body.page-body-waxing .trust-inner {
    width: 100% !important;

    min-height: auto !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
      repeat(3,1fr) !important;

    gap: 0 !important;
  }


  body.page-body-waxing .trust-item {
    position: relative !important;

    padding:
      4px
      11px !important;
  }


  body.page-body-waxing .trust-item + .trust-item {
    border-left:
      1px solid
      rgba(224,181,94,.24) !important;
  }


  body.page-body-waxing .trust-item strong {
    margin-bottom: 7px !important;

    color: #e6b95c !important;

    font-size: 18px !important;

    line-height: 1 !important;
  }


  body.page-body-waxing .trust-item span {
    display: block !important;

    color: rgba(255,255,255,.66) !important;

    font-size: 7.5px !important;

    line-height: 1.45 !important;

    letter-spacing: .07em !important;
  }

}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 480px) {

  body.page-body-waxing .sales-hero {
    min-height: 700px !important;
  }

  body.page-body-waxing .sales-hero-image {
    object-position: 86% center !important;
  }

  body.page-body-waxing .sales-hero-inner {
    padding:
      0
      14px !important;
  }

  body.page-body-waxing .sales-hero-copy {
    padding:
      20px
      17px !important;
  }

  body.page-body-waxing .sales-hero h1 {
    font-size: 44px !important;
  }

  body.page-body-waxing .hero-actions {
    grid-template-columns: 1fr !important;
  }

  body.page-body-waxing .trust-item {
    padding:
      4px
      7px !important;
  }

  body.page-body-waxing .trust-item strong {
    font-size: 16px !important;
  }

  body.page-body-waxing .trust-item span {
    font-size: 6.8px !important;
  }

}

/* =====================================================
   BODY WAXING — PROFESSIONAL MOBILE HERO
   ===================================================== */

@media (max-width: 820px) {

  /* HERO */

  body.page-body-waxing .sales-hero {
    min-height: 720px !important;
    position: relative !important;
    overflow: hidden !important;

    box-shadow:
      0 18px 34px rgba(39,20,10,.18) !important;
  }

  body.page-body-waxing .sales-hero-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    /* Bring the client farther into view */
    object-position: 84% center !important;

    filter:
      brightness(.90)
      contrast(1.04)
      saturate(.96) !important;
  }


  /* More refined overlay */

  body.page-body-waxing .sales-hero::before {
    display: block !important;

    background:
      linear-gradient(
        180deg,
        rgba(22,11,6,.10) 0%,
        rgba(22,11,6,.02) 28%,
        rgba(22,11,6,.06) 44%,
        rgba(22,11,6,.30) 62%,
        rgba(22,11,6,.70) 82%,
        rgba(22,11,6,.88) 100%
      ) !important;
  }


  /* COPY PANEL */

  body.page-body-waxing .sales-hero-inner {
    left: 0 !important;
    right: 0 !important;
    bottom: 22px !important;

    width: 100% !important;

    padding: 0 18px !important;
  }

  body.page-body-waxing .sales-hero-copy {
    width: 100% !important;
    max-width: 470px !important;

    margin: 0 !important;

    padding:
      22px
      20px
      20px !important;

    background:
      linear-gradient(
        135deg,
        rgba(34,17,10,.66),
        rgba(24,11,7,.42)
      ) !important;

    border:
      1px solid
      rgba(219,176,91,.30) !important;

    box-shadow:
      0 16px 35px rgba(0,0,0,.20) !important;

    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }


  /* EYEBROW */

  body.page-body-waxing .sales-hero-copy .eyebrow {
    margin-bottom: 8px !important;

    color: #efc66f !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: .15em !important;
  }


  /* TITLE */

  body.page-body-waxing .sales-hero h1 {
    margin:
      0
      0
      12px !important;

    color: #fffaf4 !important;

    font-size: 48px !important;

    line-height: .95 !important;

    letter-spacing: -.025em !important;
  }


  /* PARAGRAPH */

  body.page-body-waxing .sales-hero p {
    margin: 0 !important;

    color: rgba(255,250,245,.92) !important;

    font-size: 13.5px !important;

    line-height: 1.68 !important;
  }


  /* BUTTON AREA */

  body.page-body-waxing .hero-actions {
    margin-top: 19px !important;

    display: grid !important;

    grid-template-columns:
      1fr
      1fr !important;

    gap: 10px !important;
  }


  body.page-body-waxing .hero-actions .btn-primary,
  body.page-body-waxing .hero-actions .btn-secondary {
    width: 100% !important;

    min-height: 52px !important;

    padding:
      0
      12px !important;

    font-size: 8.8px !important;

    letter-spacing: .065em !important;
  }


  /* PRIMARY CTA */

  body.page-body-waxing .hero-actions .btn-primary {
    background:
      linear-gradient(
        135deg,
        #efcb79 0%,
        #d69b3e 52%,
        #eabf65 100%
      ) !important;

    color: #211008 !important;

    border:
      1px solid
      #f4d590 !important;

    box-shadow:
      0 0 18px rgba(220,164,65,.28),
      0 10px 25px rgba(0,0,0,.20) !important;
  }


  /* SECONDARY CTA */

  body.page-body-waxing .hero-actions .btn-secondary {
    background:
      rgba(255,255,255,.08) !important;

    color: #fffaf5 !important;

    border:
      1px solid
      rgba(233,193,111,.82) !important;
  }


  /* ==================================================
     BODY WAXING TRUST STRIP
     ================================================== */

  body.page-body-waxing .trust-strip {
    position: relative !important;

    padding:
      27px
      10px !important;

    background:
      linear-gradient(
        135deg,
        #231108,
        #351b0e
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(225,184,98,.18) !important;
  }


  body.page-body-waxing .trust-inner {
    width: 100% !important;

    min-height: auto !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
      repeat(3,1fr) !important;

    gap: 0 !important;
  }


  body.page-body-waxing .trust-item {
    position: relative !important;

    padding:
      4px
      11px !important;
  }


  body.page-body-waxing .trust-item + .trust-item {
    border-left:
      1px solid
      rgba(224,181,94,.24) !important;
  }


  body.page-body-waxing .trust-item strong {
    margin-bottom: 7px !important;

    color: #e6b95c !important;

    font-size: 18px !important;

    line-height: 1 !important;
  }


  body.page-body-waxing .trust-item span {
    display: block !important;

    color: rgba(255,255,255,.66) !important;

    font-size: 7.5px !important;

    line-height: 1.45 !important;

    letter-spacing: .07em !important;
  }

}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 480px) {

  body.page-body-waxing .sales-hero {
    min-height: 700px !important;
  }

  body.page-body-waxing .sales-hero-image {
    object-position: 86% center !important;
  }

  body.page-body-waxing .sales-hero-inner {
    padding:
      0
      14px !important;
  }

  body.page-body-waxing .sales-hero-copy {
    padding:
      20px
      17px !important;
  }

  body.page-body-waxing .sales-hero h1 {
    font-size: 44px !important;
  }

  body.page-body-waxing .hero-actions {
    grid-template-columns: 1fr !important;
  }

  body.page-body-waxing .trust-item {
    padding:
      4px
      7px !important;
  }

  body.page-body-waxing .trust-item strong {
    font-size: 16px !important;
  }

  body.page-body-waxing .trust-item span {
    font-size: 6.8px !important;
  }

}

/* =====================================================
   BODY WAXING — MOBILE HERO REFINEMENT
   - bring woman more into view
   - add shaded divider into next section
   ===================================================== */

@media (max-width: 820px) {

  body.page-body-waxing .sales-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 760px !important;
  }

  /* Move image so the face is less cut off */
  body.page-body-waxing .sales-hero-image {
    object-fit: cover !important;
    object-position: 76% center !important;
    transform: scale(1.01) !important;
  }

  /* Keep the text readable without making the image too dark */
  body.page-body-waxing .sales-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(20,10,6,.08) 0%,
        rgba(20,10,6,.02) 22%,
        rgba(20,10,6,.08) 42%,
        rgba(20,10,6,.26) 60%,
        rgba(20,10,6,.58) 78%,
        rgba(20,10,6,.84) 100%
      ) !important;
  }

  /* Shaded divider at bottom of hero */
  body.page-body-waxing .sales-hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 72px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(58,30,16,0) 0%,
        rgba(58,30,16,.20) 30%,
        rgba(83,49,28,.34) 58%,
        rgba(216,209,199,.72) 86%,
        rgba(240,236,230,.96) 100%
      ) !important;
  }

  /* Keep content above divider */
  body.page-body-waxing .sales-hero-inner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 34px !important;
    z-index: 4 !important;
  }

  /* Lift trust strip slightly so divider feels intentional */
  body.page-body-waxing .trust-strip {
    position: relative !important;
    z-index: 5 !important;
    margin-top: -2px !important;
  }
}

@media (max-width: 540px) {

  body.page-body-waxing .sales-hero {
    min-height: 740px !important;
  }

  /* Slight extra adjustment for narrow screens */
  body.page-body-waxing .sales-hero-image {
    object-position: 74% center !important;
  }

  body.page-body-waxing .sales-hero::after {
    height: 82px !important;
    background:
      linear-gradient(
        180deg,
        rgba(58,30,16,0) 0%,
        rgba(58,30,16,.22) 28%,
        rgba(88,52,30,.38) 56%,
        rgba(221,214,205,.78) 84%,
        rgba(243,239,234,.98) 100%
      ) !important;
  }

  body.page-body-waxing .sales-hero-inner {
    bottom: 28px !important;
  }
}

/* =====================================================
   BODY WAXING — SHOW MORE OF WOMAN ON MOBILE
   ===================================================== */

@media (max-width: 820px) {

  body.page-body-waxing .sales-hero {
    min-height: 780px !important;
  }

  /* Shift crop to the right so more of the woman is visible */
  body.page-body-waxing .sales-hero-image {
    object-fit: cover !important;
    object-position: 92% center !important;
    transform: scale(1.02) !important;
  }

  /* Keep text panel readable but slightly narrower */
  body.page-body-waxing .sales-hero-copy {
    max-width: 430px !important;
  }
}

@media (max-width: 540px) {

  body.page-body-waxing .sales-hero {
    min-height: 760px !important;
  }

  body.page-body-waxing .sales-hero-image {
    object-position: 94% center !important;
    transform: scale(1.03) !important;
  }

  body.page-body-waxing .sales-hero-copy {
    max-width: 400px !important;
  }
}

/* =====================================================
   ALL SERVICE PAGES — MATCH BODY WAXING HERO OVERLAY
   Applies to:
   - body-waxing.html
   - facials.html
   - hydro-facials.html
   - add-ons.html
   ===================================================== */

@media (max-width: 820px) {

  body.page-body-waxing .sales-hero,
  body.page-facials .sales-hero,
  body.page-hydro-facials .sales-hero,
  body.page-add-ons .sales-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 760px !important;
    box-shadow: 0 18px 34px rgba(39,20,10,.18) !important;
  }

  body.page-body-waxing .sales-hero-image,
  body.page-facials .sales-hero-image,
  body.page-hydro-facials .sales-hero-image,
  body.page-add-ons .sales-hero-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(.90) contrast(1.04) saturate(.96) !important;
  }

  /* Keep existing page-specific image positions if already set.
     Only facials / hydro / add-ons are normalized here. */
  body.page-facials .sales-hero-image {
    object-position: center center !important;
  }

  body.page-hydro-facials .sales-hero-image {
    object-position: 62% center !important;
  }

  body.page-add-ons .sales-hero-image {
    object-position: 58% center !important;
  }

  body.page-body-waxing .sales-hero::before,
  body.page-facials .sales-hero::before,
  body.page-hydro-facials .sales-hero::before,
  body.page-add-ons .sales-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(
        180deg,
        rgba(22,11,6,.10) 0%,
        rgba(22,11,6,.02) 28%,
        rgba(22,11,6,.06) 44%,
        rgba(22,11,6,.30) 62%,
        rgba(22,11,6,.70) 82%,
        rgba(22,11,6,.88) 100%
      ) !important;
  }

  /* shaded divider to next section */
  body.page-body-waxing .sales-hero::after,
  body.page-facials .sales-hero::after,
  body.page-hydro-facials .sales-hero::after,
  body.page-add-ons .sales-hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 72px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(58,30,16,0) 0%,
        rgba(58,30,16,.20) 30%,
        rgba(83,49,28,.34) 58%,
        rgba(216,209,199,.72) 86%,
        rgba(240,236,230,.96) 100%
      ) !important;
  }

  body.page-body-waxing .sales-hero-inner,
  body.page-facials .sales-hero-inner,
  body.page-hydro-facials .sales-hero-inner,
  body.page-add-ons .sales-hero-inner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 34px !important;
    z-index: 4 !important;
    width: 100% !important;
    padding: 0 18px !important;
  }

  body.page-body-waxing .sales-hero-copy,
  body.page-facials .sales-hero-copy,
  body.page-hydro-facials .sales-hero-copy,
  body.page-add-ons .sales-hero-copy {
    width: 100% !important;
    max-width: 470px !important;
    margin: 0 !important;
    padding: 22px 20px 20px !important;
    background:
      linear-gradient(
        135deg,
        rgba(34,17,10,.66),
        rgba(24,11,7,.42)
      ) !important;
    border: 1px solid rgba(219,176,91,.30) !important;
    box-shadow: 0 16px 35px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  body.page-body-waxing .sales-hero-copy .eyebrow,
  body.page-facials .sales-hero-copy .eyebrow,
  body.page-hydro-facials .sales-hero-copy .eyebrow,
  body.page-add-ons .sales-hero-copy .eyebrow {
    margin-bottom: 8px !important;
    color: #efc66f !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
  }

  body.page-body-waxing .sales-hero h1,
  body.page-facials .sales-hero h1,
  body.page-hydro-facials .sales-hero h1,
  body.page-add-ons .sales-hero h1 {
    margin: 0 0 12px !important;
    color: #fffaf4 !important;
    font-size: 48px !important;
    line-height: .95 !important;
    letter-spacing: -.025em !important;
  }

  body.page-body-waxing .sales-hero p,
  body.page-facials .sales-hero p,
  body.page-hydro-facials .sales-hero p,
  body.page-add-ons .sales-hero p {
    margin: 0 !important;
    color: rgba(255,250,245,.92) !important;
    font-size: 13.5px !important;
    line-height: 1.68 !important;
    max-width: 100% !important;
  }

  body.page-body-waxing .hero-actions,
  body.page-facials .hero-actions,
  body.page-hydro-facials .hero-actions,
  body.page-add-ons .hero-actions {
    margin-top: 19px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body.page-body-waxing .hero-actions .btn-primary,
  body.page-body-waxing .hero-actions .btn-secondary,
  body.page-facials .hero-actions .btn-primary,
  body.page-facials .hero-actions .btn-secondary,
  body.page-hydro-facials .hero-actions .btn-primary,
  body.page-hydro-facials .hero-actions .btn-secondary,
  body.page-add-ons .hero-actions .btn-primary,
  body.page-add-ons .hero-actions .btn-secondary {
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 12px !important;
    font-size: 8.8px !important;
    letter-spacing: .065em !important;
  }

  body.page-body-waxing .hero-actions .btn-primary,
  body.page-facials .hero-actions .btn-primary,
  body.page-hydro-facials .hero-actions .btn-primary,
  body.page-add-ons .hero-actions .btn-primary {
    background:
      linear-gradient(
        135deg,
        #efcb79 0%,
        #d69b3e 52%,
        #eabf65 100%
      ) !important;
    color: #211008 !important;
    border: 1px solid #f4d590 !important;
    box-shadow:
      0 0 18px rgba(220,164,65,.28),
      0 10px 25px rgba(0,0,0,.20) !important;
  }

  body.page-body-waxing .hero-actions .btn-secondary,
  body.page-facials .hero-actions .btn-secondary,
  body.page-hydro-facials .hero-actions .btn-secondary,
  body.page-add-ons .hero-actions .btn-secondary {
    background: rgba(255,255,255,.08) !important;
    color: #fffaf5 !important;
    border: 1px solid rgba(233,193,111,.82) !important;
  }

  body.page-body-waxing .trust-strip,
  body.page-facials .trust-strip,
  body.page-hydro-facials .trust-strip,
  body.page-add-ons .trust-strip {
    position: relative !important;
    z-index: 5 !important;
    margin-top: -2px !important;
    padding: 27px 10px !important;
    background:
      linear-gradient(
        135deg,
        #231108,
        #351b0e
      ) !important;
    box-shadow: inset 0 1px 0 rgba(225,184,98,.18) !important;
  }

  body.page-body-waxing .trust-inner,
  body.page-facials .trust-inner,
  body.page-hydro-facials .trust-inner,
  body.page-add-ons .trust-inner {
    width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 0 !important;
  }

  body.page-body-waxing .trust-item,
  body.page-facials .trust-item,
  body.page-hydro-facials .trust-item,
  body.page-add-ons .trust-item {
    position: relative !important;
    padding: 4px 11px !important;
  }

  body.page-body-waxing .trust-item + .trust-item,
  body.page-facials .trust-item + .trust-item,
  body.page-hydro-facials .trust-item + .trust-item,
  body.page-add-ons .trust-item + .trust-item {
    border-left: 1px solid rgba(224,181,94,.24) !important;
  }

  body.page-body-waxing .trust-item strong,
  body.page-facials .trust-item strong,
  body.page-hydro-facials .trust-item strong,
  body.page-add-ons .trust-item strong {
    margin-bottom: 7px !important;
    color: #e6b95c !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.page-body-waxing .trust-item span,
  body.page-facials .trust-item span,
  body.page-hydro-facials .trust-item span,
  body.page-add-ons .trust-item span {
    display: block !important;
    color: rgba(255,255,255,.66) !important;
    font-size: 7.5px !important;
    line-height: 1.45 !important;
    letter-spacing: .07em !important;
  }
}

@media (max-width: 540px) {

  body.page-body-waxing .sales-hero,
  body.page-facials .sales-hero,
  body.page-hydro-facials .sales-hero,
  body.page-add-ons .sales-hero {
    min-height: 740px !important;
  }

  body.page-body-waxing .sales-hero-inner,
  body.page-facials .sales-hero-inner,
  body.page-hydro-facials .sales-hero-inner,
  body.page-add-ons .sales-hero-inner {
    bottom: 28px !important;
    padding: 0 14px !important;
  }

  body.page-body-waxing .sales-hero-copy,
  body.page-facials .sales-hero-copy,
  body.page-hydro-facials .sales-hero-copy,
  body.page-add-ons .sales-hero-copy {
    padding: 20px 17px !important;
  }

  body.page-body-waxing .sales-hero h1,
  body.page-facials .sales-hero h1,
  body.page-hydro-facials .sales-hero h1,
  body.page-add-ons .sales-hero h1 {
    font-size: 44px !important;
  }

  body.page-body-waxing .sales-hero::after,
  body.page-facials .sales-hero::after,
  body.page-hydro-facials .sales-hero::after,
  body.page-add-ons .sales-hero::after {
    height: 82px !important;
    background:
      linear-gradient(
        180deg,
        rgba(58,30,16,0) 0%,
        rgba(58,30,16,.22) 28%,
        rgba(88,52,30,.38) 56%,
        rgba(221,214,205,.78) 84%,
        rgba(243,239,234,.98) 100%
      ) !important;
  }

  body.page-body-waxing .hero-actions,
  body.page-facials .hero-actions,
  body.page-hydro-facials .hero-actions,
  body.page-add-ons .hero-actions {
    grid-template-columns: 1fr !important;
  }

  body.page-body-waxing .trust-item,
  body.page-facials .trust-item,
  body.page-hydro-facials .trust-item,
  body.page-add-ons .trust-item {
    padding: 4px 7px !important;
  }

  body.page-body-waxing .trust-item strong,
  body.page-facials .trust-item strong,
  body.page-hydro-facials .trust-item strong,
  body.page-add-ons .trust-item strong {
    font-size: 16px !important;
  }

  body.page-body-waxing .trust-item span,
  body.page-facials .trust-item span,
  body.page-hydro-facials .trust-item span,
  body.page-add-ons .trust-item span {
    font-size: 6.8px !important;
  }
}

/* =====================================================
   HYDRO FACIALS — KEEP WOMAN'S FACE VISIBLE ON MOBILE
   ===================================================== */

@media (max-width: 820px) {

  body.page-hydro-facials .sales-hero {
    min-height: 720px !important;
  }

  body.page-hydro-facials .sales-hero-image {
    object-fit: cover !important;
    object-position: 100% center !important;
    transform: none !important;
  }

}

@media (max-width: 540px) {

  body.page-hydro-facials .sales-hero {
    min-height: 700px !important;
  }

  body.page-hydro-facials .sales-hero-image {
    object-position: 100% 48% !important;
    transform: none !important;
  }

}

/* =====================================================
   HYDRO FACIALS — BALANCED MOBILE FACE CROP
   ===================================================== */

@media (max-width: 820px) {

  body.page-hydro-facials .sales-hero-image {
    object-fit: cover !important;
    object-position: 83% center !important;
    transform: none !important;
  }

}

@media (max-width: 540px) {

  body.page-hydro-facials .sales-hero-image {
    object-position: 84% center !important;
    transform: none !important;
  }

}

/* =====================================================
   HYDRO FACIALS — MOBILE ZOOM OUT + MOVE IMAGE UP
   ===================================================== */

@media (max-width: 820px) {

  body.page-hydro-facials .sales-hero {
    min-height: 700px !important;
  }

  body.page-hydro-facials .sales-hero-image {
    object-fit: cover !important;
    object-position: 82% 34% !important;
    transform: scale(0.96) !important;
  }

  body.page-hydro-facials .sales-hero-inner {
    bottom: 26px !important;
  }
}

@media (max-width: 540px) {

  body.page-hydro-facials .sales-hero {
    min-height: 680px !important;
  }

  body.page-hydro-facials .sales-hero-image {
    object-fit: cover !important;
    object-position: 82% 30% !important;
    transform: scale(0.94) !important;
  }

  body.page-hydro-facials .sales-hero-inner {
    bottom: 22px !important;
  }
}


/* =====================================================
   SERVICE PAGES — MOBILE NAVIGATION
   ===================================================== */

.mobile-menu-toggle {
  display: none;
}

.mobile-service-menu {
  display: none;
}


@media (max-width: 820px) {

  .sales-header {
    position: relative !important;
    z-index: 1000 !important;
  }


  .sales-header-inner {
    position: relative !important;

    padding-left: 18px !important;
    padding-right: 16px !important;

    gap: 10px !important;
  }


  .sales-nav {
    margin-left: auto !important;
  }


  /* Keep only header booking CTA from desktop navigation */

  .sales-nav a:not(.header-book) {
    display: none !important;
  }


  .sales-nav .header-book {
    min-height: 42px !important;

    padding:
      0
      17px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 9px !important;
  }


  /* Hamburger */

  .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;

    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    flex-shrink: 0 !important;

    border:
      1px solid
      rgba(222,181,99,.42) !important;

    background:
      rgba(255,255,255,.035) !important;

    cursor: pointer !important;
  }


  .mobile-menu-toggle span {
    width: 19px !important;
    height: 1.5px !important;

    display: block !important;

    background: #e7bd68 !important;

    transition:
      transform .22s ease,
      opacity .22s ease !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(1) {
    transform:
      translateY(6.5px)
      rotate(45deg) !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(3) {
    transform:
      translateY(-6.5px)
      rotate(-45deg) !important;
  }


  /* Dropdown panel */

  .mobile-service-menu {
    position: absolute !important;

    top: 82px !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 999 !important;

    display: block !important;

    padding:
      0
      18px
      20px !important;

    background:
      linear-gradient(
        180deg,
        #180c07 0%,
        #251209 100%
      ) !important;

    border-top:
      1px solid
      rgba(223,181,96,.20) !important;

    box-shadow:
      0 20px 38px rgba(0,0,0,.32) !important;

    opacity: 0 !important;

    transform:
      translateY(-8px) !important;

    pointer-events: none !important;

    transition:
      opacity .22s ease,
      transform .22s ease !important;
  }


  .mobile-service-menu[hidden] {
    display: none !important;
  }


  .mobile-service-menu.is-open {
    opacity: 1 !important;

    transform:
      translateY(0) !important;

    pointer-events: auto !important;
  }


  .mobile-menu-inner {
    width: 100% !important;

    padding-top: 16px !important;

    display: grid !important;

    grid-template-columns:
      1fr
      1fr !important;

    gap: 0 !important;
  }


  .mobile-menu-inner > a {
    min-height: 49px !important;

    padding:
      0
      15px !important;

    display: flex !important;
    align-items: center !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.07) !important;

    color:
      rgba(255,255,255,.88) !important;

    text-decoration: none !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    letter-spacing: .07em !important;

    text-transform: uppercase !important;
  }


  .mobile-menu-inner > a:hover {
    color: #e8bd68 !important;

    background:
      rgba(255,255,255,.035) !important;
  }


  .mobile-menu-label {
    grid-column:
      1 / -1 !important;

    padding:
      17px
      15px
      7px !important;

    color: #d99f44 !important;

    font-family:
      var(--serif) !important;

    font-size: 18px !important;

    letter-spacing: .03em !important;
  }


  .mobile-menu-divider {
    grid-column:
      1 / -1 !important;

    height: 1px !important;

    margin:
      10px
      0 !important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(222,181,99,.40),
        transparent
      ) !important;
  }


  .mobile-menu-book {
    grid-column:
      1 / -1 !important;

    min-height: 52px !important;

    margin-top: 15px !important;

    justify-content: center !important;

    background:
      linear-gradient(
        135deg,
        #efca78,
        #d79c3f,
        #e8bb61
      ) !important;

    color: #211008 !important;

    border:
      1px solid
      #f1d18a !important;

    font-weight: 800 !important;
  }

}


@media (max-width: 480px) {

  .sales-nav .header-book {
    padding:
      0
      14px !important;
  }


  .mobile-menu-inner {
    grid-template-columns:
      1fr !important;
  }


  .mobile-menu-label,
  .mobile-menu-divider,
  .mobile-menu-book {
    grid-column:
      1 !important;
  }

}


/* =====================================================
   FINAL SERVICE MOBILE MENU FIX
   ===================================================== */

.mobile-service-menu {
  display: none;
}


@media (max-width: 820px) {

  .sales-header {
    position: relative !important;
    z-index: 9999 !important;
  }


  .sales-header-inner {
    position: relative !important;
    z-index: 10001 !important;
  }


  .mobile-menu-toggle {
    position: relative !important;

    z-index: 10002 !important;

    width: 44px !important;
    height: 44px !important;

    display: flex !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    padding: 0 !important;

    border:
      1px solid
      rgba(229,188,100,.48) !important;

    background:
      rgba(255,255,255,.04) !important;

    cursor: pointer !important;

    touch-action: manipulation !important;
  }


  .mobile-menu-toggle span {
    display: block !important;

    width: 20px !important;
    height: 2px !important;

    background: #e7bd68 !important;

    pointer-events: none !important;

    transition:
      transform .2s ease,
      opacity .2s ease !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(1) {
    transform:
      translateY(7px)
      rotate(45deg) !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(3) {
    transform:
      translateY(-7px)
      rotate(-45deg) !important;
  }


  /* MENU EXISTS BUT STARTS CLOSED */

  .mobile-service-menu {
    position: absolute !important;

    top: 82px !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 10000 !important;

    display: block !important;

    visibility: hidden !important;

    opacity: 0 !important;

    transform:
      translateY(-12px) !important;

    pointer-events: none !important;

    padding:
      8px
      18px
      22px !important;

    background:
      linear-gradient(
        180deg,
        #170b06 0%,
        #291409 100%
      ) !important;

    border-top:
      1px solid
      rgba(225,184,99,.22) !important;

    box-shadow:
      0 22px 45px rgba(0,0,0,.38) !important;

    transition:
      opacity .22s ease,
      transform .22s ease,
      visibility .22s ease !important;
  }


  /* OPEN STATE */

  .mobile-service-menu.is-open {
    visibility: visible !important;

    opacity: 1 !important;

    transform:
      translateY(0) !important;

    pointer-events: auto !important;
  }


  .mobile-menu-inner {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 0 !important;
  }


  .mobile-menu-inner > a {
    min-height: 51px !important;

    padding:
      0
      15px !important;

    display: flex !important;
    align-items: center !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.075) !important;

    color:
      rgba(255,255,255,.90) !important;

    text-decoration: none !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    letter-spacing: .07em !important;

    text-transform: uppercase !important;
  }


  .mobile-menu-label {
    grid-column:
      1 / -1 !important;

    padding:
      18px
      15px
      8px !important;

    color: #dba446 !important;

    font-family:
      var(--serif) !important;

    font-size: 19px !important;
  }


  .mobile-menu-divider {
    grid-column:
      1 / -1 !important;

    height: 1px !important;

    margin:
      10px
      0 !important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(225,184,99,.42),
        transparent
      ) !important;
  }


  .mobile-menu-book {
    grid-column:
      1 / -1 !important;

    min-height: 54px !important;

    margin-top: 15px !important;

    justify-content: center !important;

    background:
      linear-gradient(
        135deg,
        #f0cc79,
        #d69a3b,
        #eabd61
      ) !important;

    color: #1d0d06 !important;

    border:
      1px solid
      #f3d58d !important;

    font-weight: 800 !important;
  }

}


@media (max-width: 480px) {

  .mobile-menu-inner {
    grid-template-columns: 1fr !important;
  }


  .mobile-menu-label,
  .mobile-menu-divider,
  .mobile-menu-book {
    grid-column: 1 !important;
  }

}


/* =====================================================
   FINAL SERVICE MOBILE MENU FIX
   ===================================================== */

.mobile-service-menu {
  display: none;
}


@media (max-width: 820px) {

  .sales-header {
    position: relative !important;
    z-index: 9999 !important;
  }


  .sales-header-inner {
    position: relative !important;
    z-index: 10001 !important;
  }


  .mobile-menu-toggle {
    position: relative !important;

    z-index: 10002 !important;

    width: 44px !important;
    height: 44px !important;

    display: flex !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    padding: 0 !important;

    border:
      1px solid
      rgba(229,188,100,.48) !important;

    background:
      rgba(255,255,255,.04) !important;

    cursor: pointer !important;

    touch-action: manipulation !important;
  }


  .mobile-menu-toggle span {
    display: block !important;

    width: 20px !important;
    height: 2px !important;

    background: #e7bd68 !important;

    pointer-events: none !important;

    transition:
      transform .2s ease,
      opacity .2s ease !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(1) {
    transform:
      translateY(7px)
      rotate(45deg) !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(3) {
    transform:
      translateY(-7px)
      rotate(-45deg) !important;
  }


  /* MENU EXISTS BUT STARTS CLOSED */

  .mobile-service-menu {
    position: absolute !important;

    top: 82px !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 10000 !important;

    display: block !important;

    visibility: hidden !important;

    opacity: 0 !important;

    transform:
      translateY(-12px) !important;

    pointer-events: none !important;

    padding:
      8px
      18px
      22px !important;

    background:
      linear-gradient(
        180deg,
        #170b06 0%,
        #291409 100%
      ) !important;

    border-top:
      1px solid
      rgba(225,184,99,.22) !important;

    box-shadow:
      0 22px 45px rgba(0,0,0,.38) !important;

    transition:
      opacity .22s ease,
      transform .22s ease,
      visibility .22s ease !important;
  }


  /* OPEN STATE */

  .mobile-service-menu.is-open {
    visibility: visible !important;

    opacity: 1 !important;

    transform:
      translateY(0) !important;

    pointer-events: auto !important;
  }


  .mobile-menu-inner {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 0 !important;
  }


  .mobile-menu-inner > a {
    min-height: 51px !important;

    padding:
      0
      15px !important;

    display: flex !important;
    align-items: center !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.075) !important;

    color:
      rgba(255,255,255,.90) !important;

    text-decoration: none !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    letter-spacing: .07em !important;

    text-transform: uppercase !important;
  }


  .mobile-menu-label {
    grid-column:
      1 / -1 !important;

    padding:
      18px
      15px
      8px !important;

    color: #dba446 !important;

    font-family:
      var(--serif) !important;

    font-size: 19px !important;
  }


  .mobile-menu-divider {
    grid-column:
      1 / -1 !important;

    height: 1px !important;

    margin:
      10px
      0 !important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(225,184,99,.42),
        transparent
      ) !important;
  }


  .mobile-menu-book {
    grid-column:
      1 / -1 !important;

    min-height: 54px !important;

    margin-top: 15px !important;

    justify-content: center !important;

    background:
      linear-gradient(
        135deg,
        #f0cc79,
        #d69a3b,
        #eabd61
      ) !important;

    color: #1d0d06 !important;

    border:
      1px solid
      #f3d58d !important;

    font-weight: 800 !important;
  }

}


@media (max-width: 480px) {

  .mobile-menu-inner {
    grid-template-columns: 1fr !important;
  }


  .mobile-menu-label,
  .mobile-menu-divider,
  .mobile-menu-book {
    grid-column: 1 !important;
  }

}

/* =====================================================
   LV SERVICE PAGES — FINAL MOBILE NAVIGATION
   ===================================================== */

.mobile-menu-toggle {
  display: none;
}

.mobile-service-menu {
  display: none;
}


@media (max-width: 820px) {

  .sales-header {
    position: relative !important;
    z-index: 99999 !important;

    height: 82px !important;
    overflow: visible !important;
  }


  .sales-header-inner {
    width: 100% !important;
    height: 82px !important;

    padding:
      0
      18px !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;
  }


  .service-brand-link {
    position: relative !important;
    z-index: 100003 !important;

    margin-right: auto !important;
  }


  .sales-logo {
    width: 100px !important;
    height: 100px !important;

    margin-top: 28px !important;
  }


  /* Hide desktop nav links except Book Now */

  .sales-nav {
    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;
  }


  .sales-nav > a:not(.header-book) {
    display: none !important;
  }


  .header-book {
    min-height: 42px !important;

    padding:
      0
      18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
      linear-gradient(
        135deg,
        #efcb78,
        #d89d3e,
        #ebbd62
      ) !important;

    color: #1d0d06 !important;

    font-size: 9px !important;
    font-weight: 700 !important;
  }


  /* Hamburger */

  .mobile-menu-toggle {
    position: relative !important;
    z-index: 100004 !important;

    width: 44px !important;
    height: 44px !important;

    margin-left: 10px !important;

    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    border:
      1px solid
      rgba(230,188,100,.52) !important;

    background:
      rgba(255,255,255,.04) !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    touch-action: manipulation !important;
  }


  .mobile-menu-toggle span {
    width: 20px !important;
    height: 2px !important;

    display: block !important;

    background:
      #e7bd68 !important;

    pointer-events: none !important;

    transition:
      transform .2s ease,
      opacity .2s ease !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(1) {
    transform:
      translateY(7px)
      rotate(45deg) !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }


  .mobile-menu-toggle.is-open span:nth-child(3) {
    transform:
      translateY(-7px)
      rotate(-45deg) !important;
  }


  /* Dropdown */

  .mobile-service-menu {
    position: absolute !important;

    top: 82px !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 100002 !important;

    display: block !important;

    max-height: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    background:
      linear-gradient(
        180deg,
        #180c07 0%,
        #2b160b 100%
      ) !important;

    border-top:
      1px solid
      rgba(229,187,98,.22) !important;

    box-shadow:
      0 24px 45px rgba(0,0,0,.40) !important;

    transition:
      max-height .32s ease,
      opacity .22s ease,
      visibility .22s ease !important;
  }


  .mobile-service-menu.is-open {
    max-height: 700px !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
  }


  .mobile-menu-inner {
    width: 100% !important;

    padding:
      17px
      20px
      23px !important;

    display: grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  .mobile-menu-inner > a {
    min-height: 50px !important;

    padding:
      0
      14px !important;

    display: flex !important;
    align-items: center !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.07) !important;

    color:
      rgba(255,255,255,.88) !important;

    text-decoration: none !important;

    font-size: 9px !important;
    font-weight: 600 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;
  }


  .mobile-menu-label {
    grid-column:
      1 / -1 !important;

    padding:
      18px
      14px
      7px !important;

    color:
      #dea94e !important;

    font-family:
      var(--serif) !important;

    font-size: 20px !important;
  }


  .mobile-menu-divider {
    grid-column:
      1 / -1 !important;

    height: 1px !important;

    margin:
      10px
      0 !important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(226,183,95,.44),
        transparent
      ) !important;
  }


  .mobile-menu-book {
    grid-column:
      1 / -1 !important;

    min-height: 54px !important;

    margin-top: 16px !important;

    justify-content: center !important;

    background:
      linear-gradient(
        135deg,
        #efcb78,
        #d89d3e,
        #ebbd62
      ) !important;

    color:
      #1d0d06 !important;

    border:
      1px solid
      #f1d28c !important;

    font-weight: 800 !important;
  }

}


@media (max-width: 480px) {

  .header-book {
    padding:
      0
      13px !important;
  }


  .mobile-menu-inner {
    grid-template-columns:
      1fr !important;
  }


  .mobile-menu-label,
  .mobile-menu-divider,
  .mobile-menu-book {
    grid-column:
      1 !important;
  }

}

/* =====================================================
   FACIALS + ADD-ONS
   MATCH BODY WAXING / HYDRO MOBILE HERO STRUCTURE
   ===================================================== */

@media (max-width: 820px) {

  /* -------------------------------------------------
     TRUE FULL-BLEED HERO
     ------------------------------------------------- */

  body.page-facials .sales-hero,
  body.page-add-ons .sales-hero {
    position: relative !important;

    display: block !important;

    min-height: 740px !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: #1b0d07 !important;
  }


  /* -------------------------------------------------
     IMAGE MUST SIT BEHIND THE TEXT
     ------------------------------------------------- */

  body.page-facials .sales-hero-image,
  body.page-add-ons .sales-hero-image {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    transform: none !important;

    filter:
      brightness(.91)
      contrast(1.03)
      saturate(.97) !important;
  }


  body.page-facials .sales-hero-image {
    object-position: 58% center !important;
  }


  body.page-add-ons .sales-hero-image {
    object-position: 58% center !important;
  }


  /* -------------------------------------------------
     LUXURY IMAGE SHADE
     ------------------------------------------------- */

  body.page-facials .sales-hero::before,
  body.page-add-ons .sales-hero::before {
    content: "" !important;

    display: block !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
      linear-gradient(
        180deg,
        rgba(20,10,6,.04) 0%,
        rgba(20,10,6,.02) 28%,
        rgba(20,10,6,.08) 45%,
        rgba(20,10,6,.30) 62%,
        rgba(20,10,6,.68) 82%,
        rgba(20,10,6,.88) 100%
      ) !important;
  }


  /* -------------------------------------------------
     SOFT DIVIDER INTO TRUST STRIP
     ------------------------------------------------- */

  body.page-facials .sales-hero::after,
  body.page-add-ons .sales-hero::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;

    height: 76px !important;

    z-index: 3 !important;

    pointer-events: none !important;

    background:
      linear-gradient(
        180deg,
        rgba(59,30,16,0) 0%,
        rgba(59,30,16,.18) 30%,
        rgba(91,54,31,.32) 58%,
        rgba(221,214,205,.73) 86%,
        rgba(242,238,232,.98) 100%
      ) !important;
  }


  /* -------------------------------------------------
     OVERLAY CONTENT
     ------------------------------------------------- */

  body.page-facials .sales-hero-inner,
  body.page-add-ons .sales-hero-inner {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 30px !important;

    z-index: 4 !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
      0
      18px !important;

    background: transparent !important;
  }


  /* -------------------------------------------------
     GLASS COPY PANEL
     ------------------------------------------------- */

  body.page-facials .sales-hero-copy,
  body.page-add-ons .sales-hero-copy {
    width: 100% !important;

    max-width: 470px !important;

    margin: 0 !important;

    padding:
      22px
      20px
      20px !important;

    background:
      linear-gradient(
        135deg,
        rgba(34,17,10,.68),
        rgba(24,11,7,.44)
      ) !important;

    border:
      1px solid
      rgba(219,176,91,.32) !important;

    box-shadow:
      0 16px 35px
      rgba(0,0,0,.22) !important;

    backdrop-filter:
      blur(4px) !important;

    -webkit-backdrop-filter:
      blur(4px) !important;
  }


  body.page-facials .sales-hero-copy .eyebrow,
  body.page-add-ons .sales-hero-copy .eyebrow {
    margin-bottom: 8px !important;

    color: #efc66f !important;

    font-size: 9px !important;

    font-weight: 700 !important;

    letter-spacing: .15em !important;
  }


  body.page-facials .sales-hero h1,
  body.page-add-ons .sales-hero h1 {
    margin:
      0
      0
      12px !important;

    color: #fffaf4 !important;

    font-size: 48px !important;

    line-height: .95 !important;

    letter-spacing: -.025em !important;
  }


  body.page-facials .sales-hero p,
  body.page-add-ons .sales-hero p {
    margin: 0 !important;

    max-width: 100% !important;

    color:
      rgba(255,250,245,.92) !important;

    font-size: 13.5px !important;

    line-height: 1.68 !important;
  }


  /* -------------------------------------------------
     CTA BUTTONS
     ------------------------------------------------- */

  body.page-facials .hero-actions,
  body.page-add-ons .hero-actions {
    margin-top: 19px !important;

    display: grid !important;

    grid-template-columns:
      1fr
      1fr !important;

    gap: 10px !important;
  }


  body.page-facials .hero-actions .btn-primary,
  body.page-facials .hero-actions .btn-secondary,
  body.page-add-ons .hero-actions .btn-primary,
  body.page-add-ons .hero-actions .btn-secondary {
    width: 100% !important;

    min-height: 52px !important;

    padding:
      0
      12px !important;

    font-size: 8.8px !important;

    letter-spacing: .065em !important;
  }


  body.page-facials .hero-actions .btn-primary,
  body.page-add-ons .hero-actions .btn-primary {
    background:
      linear-gradient(
        135deg,
        #efcb79 0%,
        #d69b3e 52%,
        #eabf65 100%
      ) !important;

    color: #211008 !important;

    border:
      1px solid
      #f4d590 !important;

    box-shadow:
      0 0 18px rgba(220,164,65,.28),
      0 10px 25px rgba(0,0,0,.20) !important;
  }


  body.page-facials .hero-actions .btn-secondary,
  body.page-add-ons .hero-actions .btn-secondary {
    background:
      rgba(255,255,255,.08) !important;

    color: #fffaf5 !important;

    border:
      1px solid
      rgba(233,193,111,.82) !important;
  }

}


/* =====================================================
   NARROW MOBILE
   ===================================================== */

@media (max-width: 540px) {

  body.page-facials .sales-hero,
  body.page-add-ons .sales-hero {
    min-height: 720px !important;
  }


  body.page-facials .sales-hero-image {
    object-position: 60% center !important;
  }


  body.page-add-ons .sales-hero-image {
    object-position: 60% center !important;
  }


  body.page-facials .sales-hero-inner,
  body.page-add-ons .sales-hero-inner {
    bottom: 26px !important;

    padding:
      0
      14px !important;
  }


  body.page-facials .sales-hero-copy,
  body.page-add-ons .sales-hero-copy {
    padding:
      20px
      17px !important;
  }


  body.page-facials .sales-hero h1,
  body.page-add-ons .sales-hero h1 {
    font-size: 44px !important;
  }


  body.page-facials .hero-actions,
  body.page-add-ons .hero-actions {
    grid-template-columns:
      1fr !important;
  }

}

/* =====================================================
   HYDRO FACIALS — MOBILE CSS ZOOM OUT
   Shows more of the woman + treatment room
   ===================================================== */

@media (max-width: 820px) {

  body.page-hydro-facials .sales-hero {
    min-height: 700px !important;

    background:
      linear-gradient(
        rgba(26,13,7,.18),
        rgba(26,13,7,.18)
      ),
      url('assets/images/hydro-facials-1.png')
      center center / cover no-repeat !important;
  }

  /*
    Foreground image is reduced instead of filling the
    entire tall mobile hero. Background copy fills edges.
  */
  body.page-hydro-facials .sales-hero-image {
    position: absolute !important;

    left: 50% !important;
    top: 42% !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 76% center !important;

    transform:
      translate(-50%, -50%)
      scale(.86) !important;

    transform-origin: center center !important;

    filter:
      brightness(.96)
      contrast(1.02)
      saturate(.98) !important;
  }

}


/* Narrow phones */

@media (max-width: 540px) {

  body.page-hydro-facials .sales-hero {
    min-height: 690px !important;
  }

  body.page-hydro-facials .sales-hero-image {
    top: 40% !important;

    object-position: 76% center !important;

    transform:
      translate(-50%, -50%)
      scale(.82) !important;
  }

}

/* =====================================================
   HYDRO FACIALS — BLEND ZOOMED HERO EDGES
   ===================================================== */

@media (max-width: 820px) {

  body.page-hydro-facials .sales-hero {
    background: #24130c !important;
  }

  body.page-hydro-facials .sales-hero::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: -18px !important;

    z-index: 0 !important;

    background:
      linear-gradient(
        180deg,
        rgba(24,12,7,.08),
        rgba(24,12,7,.34)
      ),
      url('assets/images/hydro-facials-1.png')
      78% center / cover no-repeat !important;

    filter:
      blur(12px)
      brightness(.82)
      saturate(.90) !important;

    transform: scale(1.06) !important;
  }

  body.page-hydro-facials .sales-hero-image {
    z-index: 1 !important;
  }

  body.page-hydro-facials .sales-hero-inner {
    z-index: 4 !important;
  }

}


/* =====================================================
   HYDRO FACIALS — FINAL MOBILE HERO
   FULL IMAGE / NO CROP
   ===================================================== */

@media (max-width: 820px) {

  body.page-hydro-facials .sales-hero {
    position: relative !important;

    display: block !important;

    min-height: auto !important;

    padding: 0 0 285px !important;

    overflow: visible !important;

    background: #f8f2ea !important;

    box-shadow: none !important;
  }


  /* Remove all previous background copies / blur tricks */

  body.page-hydro-facials .sales-hero::before {
    display: none !important;
    content: none !important;
  }


  /* Show the ENTIRE wide image */

  body.page-hydro-facials .sales-hero-image {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;

    filter: none !important;
  }


  /* Keep soft transition below the hero */

  body.page-hydro-facials .sales-hero::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 62px !important;

    z-index: 2 !important;

    background:
      linear-gradient(
        180deg,
        rgba(49,26,15,0) 0%,
        rgba(92,57,36,.18) 35%,
        rgba(225,218,209,.72) 76%,
        rgba(244,240,235,.98) 100%
      ) !important;

    pointer-events: none !important;
  }


  /* Float sales panel over lower edge of image */

  body.page-hydro-facials .sales-hero-inner {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    top: auto !important;
    bottom: 54px !important;

    z-index: 4 !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
      0
      18px !important;

    background: transparent !important;
  }


  body.page-hydro-facials .sales-hero-copy {
    width: 100% !important;
    max-width: 470px !important;

    margin: 0 auto !important;

    padding:
      22px
      20px
      20px !important;

    background:
      linear-gradient(
        135deg,
        rgba(42,21,12,.88),
        rgba(27,13,8,.78)
      ) !important;

    border:
      1px solid
      rgba(225,183,96,.36) !important;

    box-shadow:
      0 16px 35px
      rgba(0,0,0,.24) !important;

    backdrop-filter:
      blur(5px) !important;

    -webkit-backdrop-filter:
      blur(5px) !important;
  }


  body.page-hydro-facials .sales-hero h1 {
    color: #fffaf4 !important;
  }


  body.page-hydro-facials .sales-hero p {
    color:
      rgba(255,250,245,.92) !important;
  }

}


@media (max-width: 540px) {

  body.page-hydro-facials .sales-hero {
    padding-bottom: 300px !important;
  }


  body.page-hydro-facials .sales-hero-inner {
    bottom: 50px !important;

    padding:
      0
      14px !important;
  }


  body.page-hydro-facials .sales-hero-copy {
    padding:
      20px
      17px !important;
  }

}

/* =====================================================
   HYDRO FACIALS — TIGHTEN HERO TO TRUST STRIP
   ===================================================== */

@media (max-width: 820px) {

  body.page-hydro-facials .sales-hero {
    padding-bottom: 235px !important;
  }

  body.page-hydro-facials .sales-hero-inner {
    bottom: 28px !important;
  }

  body.page-hydro-facials .sales-hero::after {
    height: 46px !important;
  }

  body.page-hydro-facials .trust-strip {
    margin-top: 0 !important;
  }

}

@media (max-width: 540px) {

  body.page-hydro-facials .sales-hero {
    padding-bottom: 245px !important;
  }

  body.page-hydro-facials .sales-hero-inner {
    bottom: 24px !important;
  }

}

/* =====================================================
   HYDRO FACIALS — TALLER VISUAL HERO / NO IMAGE CROP
   ===================================================== */

@media (max-width: 820px) {

  /*
    Keep the full photo at its natural aspect ratio.
    Do not crop, zoom, or distort it.
  */
  body.page-hydro-facials .sales-hero-image {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    max-width: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;

    display: block !important;
  }


  /*
    Reduce artificial cream space below the image.
  */
  body.page-hydro-facials .sales-hero {
    position: relative !important;

    min-height: auto !important;

    padding-bottom: 190px !important;

    background: #f8f2ea !important;

    overflow: visible !important;
  }


  /*
    Move the glass panel upward so more of it overlaps
    the actual photograph rather than sitting on cream.
  */
  body.page-hydro-facials .sales-hero-inner {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    bottom: 22px !important;

    width: 100% !important;

    padding:
      0
      18px !important;

    z-index: 4 !important;
  }


  body.page-hydro-facials .sales-hero-copy {
    margin:
      0
      auto !important;
  }


  /*
    Shorter transition keeps the next section close.
  */
  body.page-hydro-facials .sales-hero::after {
    height: 30px !important;
  }

}


@media (max-width: 540px) {

  body.page-hydro-facials .sales-hero {
    padding-bottom: 185px !important;
  }


  body.page-hydro-facials .sales-hero-inner {
    bottom: 18px !important;

    padding:
      0
      14px !important;
  }

}