/* ==========================================================================
   MOXI HAIR STUDIO — Brand Overrides for Reine Template
   Color Palette: Blush / Rose-Gold / Warm Brown
   ========================================================================== */

/* ------------------------------------------
   CSS CUSTOM PROPERTIES
   ------------------------------------------ */
:root {
  --moxi-rose: #C8918A;
  --moxi-rose-hover: #B57D76;
  --moxi-rose-gold: #B5806E;
  --moxi-pink: #E8C8C0;
  --moxi-cream: #FDF5F3;
  --moxi-charcoal: #6B5249;
  --moxi-gold: #C8A86E;
  --moxi-white: #FFFFFF;
  --moxi-soft-gray: #E8D8D2;
  --moxi-warm-gray: #9B8E87;
  --moxi-light-cream: #F5E6E0;
}


/* ------------------------------------------
   FONT OVERRIDES
   Reine uses Vollkorn (headings) + Jost (body)
   Moxi uses Vollkorn (headings) + DM Sans (body)
   ------------------------------------------ */

body {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 600;
  color: var(--moxi-warm-gray);
  background-color: var(--moxi-cream);
}

h1, h2, h3, h4, h5, h6,
.h2-md, .h2-lg, .h2-xl, .h2-title,
.h3-md, .h3-lg, .h3-xl,
.h4-md, .h4-lg, .h4-xl,
.h5-md, .h5-lg, .h5-xl,
.h6-md, .h6-lg, .h6-xl {
  font-family: 'Vollkorn', Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  color: var(--moxi-charcoal);
}


/* ------------------------------------------
   COLOR OVERRIDES
   Palette: dusty rose, rose-gold, warm brown
   ------------------------------------------ */

/* Links */
a {
  color: var(--moxi-rose);
}

a:hover {
  color: var(--moxi-rose-hover);
}

/* Theme accent color replacements */
.color--theme,
.color--theme:hover {
  color: var(--moxi-rose) !important;
}

/* Background color replacements */
.bg--theme {
  background-color: var(--moxi-rose) !important;
}

.bg--stone {
  background-color: var(--moxi-light-cream) !important;
}

.bg--cream {
  background-color: var(--moxi-cream) !important;
}

.bg--white {
  background-color: var(--moxi-white) !important;
}

.bg--smoke {
  background-color: var(--moxi-light-cream) !important;
}

/* Body text color */
.color--grey {
  color: var(--moxi-warm-gray) !important;
}

/* Links inside grey text must be darker and readable */
.color--grey a,
p.color--grey a,
.color--grey p a {
  color: var(--moxi-charcoal) !important;
  text-decoration: underline;
}

.color--grey a:hover,
p.color--grey a:hover,
.color--grey p a:hover {
  color: var(--moxi-rose) !important;
}

/* Heading color */
.color--black {
  color: var(--moxi-charcoal) !important;
}

/* White color override for banner CTA */
.color--white h2,
.color--white p,
.color--white .section-id {
  color: var(--moxi-white) !important;
}

/* Section IDs (small label text above headings) */
.section-id {
  color: var(--moxi-rose);
}


/* ------------------------------------------
   BUTTON OVERRIDES
   ------------------------------------------ */

/* Primary filled button -> dusty rose */
.btn--theme,
.btn--theme:focus {
  background-color: var(--moxi-rose) !important;
  border-color: var(--moxi-rose) !important;
  color: var(--moxi-white) !important;
}

.btn--theme:hover {
  background-color: var(--moxi-rose-hover) !important;
  border-color: var(--moxi-rose-hover) !important;
  color: var(--moxi-white) !important;
}

/* Transparent black button -> dusty rose border */
.btn--tra-black,
.btn--tra-black:focus {
  border-color: var(--moxi-rose) !important;
  color: var(--moxi-rose) !important;
  background-color: transparent !important;
}

.btn--tra-black:hover,
.hover--theme:hover,
.hover--black:hover {
  background-color: var(--moxi-rose) !important;
  border-color: var(--moxi-rose) !important;
  color: var(--moxi-white) !important;
}

/* Black filled button -> warm brown with rose hover */
.btn--black,
.btn--black:focus {
  background-color: var(--moxi-charcoal) !important;
  border-color: var(--moxi-charcoal) !important;
  color: var(--moxi-white) !important;
}

.btn--black:hover,
.hover--tra-black:hover {
  background-color: transparent !important;
  border-color: var(--moxi-charcoal) !important;
  color: var(--moxi-charcoal) !important;
}

/* Transparent white button (used in banner CTA) */
.btn--tra-white,
.btn--tra-white:focus {
  border-color: var(--moxi-white) !important;
  color: var(--moxi-white) !important;
  background-color: transparent !important;
}

.btn--tra-white:hover,
.hover--white:hover {
  background-color: var(--moxi-white) !important;
  border-color: var(--moxi-white) !important;
  color: var(--moxi-rose) !important;
}

/* Nav Book Now button */
.wsmenu-list .btn--tra-black.last-link,
.wsmenu-list .btn--tra-black.last-link:focus {
  border-color: var(--moxi-rose) !important;
  color: var(--moxi-rose) !important;
  background-color: transparent !important;
  white-space: nowrap;
}

.wsmenu-list .btn--tra-black.last-link:hover,
.wsmenu-list .hover--black.last-link:hover {
  background-color: var(--moxi-rose) !important;
  border-color: var(--moxi-rose) !important;
  color: var(--moxi-white) !important;
}


/* ------------------------------------------
   HEADER / NAV OVERRIDES
   ------------------------------------------ */

/* Tighten nav link spacing so all items fit without clipping */
@media (min-width: 992px) {
  .wsmenu > .wsmenu-list > li > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Logo swap: white logo on transparent nav, dark logo on scrolled nav */
.tra-menu .logo-black { display: none !important; }
.tra-menu .logo-white { display: block !important; }
.tra-menu .scroll .logo-black { display: block !important; }
.tra-menu .scroll .logo-white { display: none !important; }

/* Nav link color — transparent state (over hero) — desktop only */
@media (min-width: 992px) {
  .tra-menu .wsmenu-list > li > a {
    color: #fff !important;
  }

  .tra-menu .wsmenu-list > li > a:hover,
  .tra-menu.navbar-dark .wsmenu-list > li > a.h-link:hover {
    color: var(--moxi-pink) !important;
  }

  /* Book Now button — transparent state */
  .tra-menu .wsmenu-list > li > a.last-link {
    color: #fff !important;
    border-color: #fff !important;
  }

  .tra-menu .wsmenu-list > li > a.last-link:hover {
    background-color: #fff !important;
    color: var(--moxi-charcoal) !important;
  }
}

/* Mobile menu links — always dark/readable */
@media (max-width: 991px) {
  .tra-menu .wsmenu-list > li > a {
    color: var(--moxi-charcoal) !important;
  }
  .tra-menu .wsmenu-list > li > a:hover {
    color: var(--moxi-rose) !important;
  }
}

/* Nav link color — scrolled state (white bg) — must come AFTER transparent rules */
.tra-menu .scroll .wsmenu-list > li > a,
.scroll .wsmenu-list > li > a {
  color: var(--moxi-charcoal) !important;
}

.tra-menu .scroll .wsmenu-list > li > a.current,
.scroll .wsmenu-list > li > a.current {
  color: var(--moxi-rose) !important;
}

.tra-menu .scroll .wsmenu-list > li > a:hover,
.tra-menu.navbar-dark .scroll .wsmenu-list > li > a.h-link:hover,
.scroll .wsmenu-list > li > a:hover {
  color: var(--moxi-rose) !important;
}

/* Book Now button — scrolled state */
.tra-menu .scroll .wsmenu-list > li > a.last-link,
.scroll .wsmenu-list > li > a.last-link {
  color: var(--moxi-charcoal) !important;
  border-color: var(--moxi-charcoal) !important;
}

/* Nav link hover — white-menu (subpages) */
.white-menu .wsmenu-list > li > a:hover,
.white-menu.navbar-dark .wsmenu-list > li > a.h-link:hover {
  color: var(--moxi-rose) !important;
}

.white-menu .wsmenu-list > li > a.current {
  color: var(--moxi-rose) !important;
}

/* Dropdown menu */
.wsmenu-list li ul.sub-menu li a {
  color: var(--moxi-charcoal) !important;
}

.wsmenu-list li ul.sub-menu li a:hover {
  color: var(--moxi-rose) !important;
}

.wsmainfull,
.wsmainfull.scroll {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* ------------------------------------------
   LOGO IMAGE
   ------------------------------------------ */

.desktoplogo img.moxi-logo-img {
  height: 160px;
  width: auto;
  max-height: 160px !important;
}

.moxi-logo-img--white {
  filter: brightness(0) invert(1);
}

/* Vertically center logo with nav */
.desktoplogo {
  display: flex;
  align-items: center;
  height: 160px;
  line-height: 160px !important;
}

.desktoplogo a,
.smllogo a {
  display: flex;
  align-items: center;
}

/* --- MOBILE HEADER FIXES (only applies ≤991px) --- */
@media (max-width: 991px) {
  .wsmobileheader {
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 18px !important;
  }

  .wsmobileheader::before,
  .wsmobileheader::after {
    display: none !important;
  }

  .wsmobileheader .smllogo {
    margin-top: 0 !important;
    padding-left: 0 !important;
    display: flex;
    align-items: center;
    flex: 1;
  }

  .wsmobileheader #wsnavtoggle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 0 12px !important;
    order: 3;
  }

  .mobile-book-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--moxi-rose) !important;
    border: 1px solid var(--moxi-rose);
    padding: 8px 16px;
    white-space: nowrap;
    order: 2;
    text-decoration: none;
    margin-top: 4px;
  }

  .mobile-book-btn:hover {
    background-color: var(--moxi-rose);
    color: #fff !important;
  }

  .moxi-mobile-logo {
    height: 80px !important;
    width: auto !important;
    max-height: 80px !important;
    max-width: none !important;
  }

  .desktoplogo {
    display: none !important;
  }
}

/* Hide mobile book button on desktop */
.mobile-book-btn {
  display: none;
}
@media (max-width: 991px) {
  .mobile-book-btn {
    display: inline-block;
  }
}

/* Ensure hero content isn't clipped by taller mobile header */
@media (max-width: 991px) {
  .hero-section {
    padding-top: 110px !important;
  }
}

/* Logo flush left, nav flush right — use Bootstrap .container sizing */
.wsmainwp.container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
}

/* Override menu.css fixed max-width with Bootstrap responsive max-widths */
@media (min-width: 576px)  { .wsmainwp.container { max-width: 540px !important; } }
@media (min-width: 768px)  { .wsmainwp.container { max-width: 720px !important; } }
@media (min-width: 992px)  { .wsmainwp.container { max-width: 960px !important; } }
@media (min-width: 1200px) { .wsmainwp.container { max-width: 1140px !important; } }
@media (min-width: 1400px) { .wsmainwp.container { max-width: 1320px !important; } }

/* Remove extra padding on logo so it sits at container edge */
.desktoplogo {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Remove extra right padding on last nav item (Book Now) */
.wsmenu > .wsmenu-list > li:last-child {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.wsmenu > .wsmenu-list > li a.btn.last-link {
  margin-right: 0 !important;
}

/* Override menu.css float-based layout with flexbox — desktop only */
@media (min-width: 992px) {
  .wsmenu {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }

  .wsmenu > .wsmenu-list {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin: 0 !important;
  }

  .wsmenu > .wsmenu-list > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* Book Now button — remove top margin that misaligns it */
.wsmenu > .wsmenu-list > li a.btn {
  margin: 0 0 0 8px !important;
  line-height: 30px;
}


/* ------------------------------------------
   HERO SECTION (hero-6 slideshow)
   ------------------------------------------ */

#hero-6.hero-section {
  background-color: transparent;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Slideshow height override — taller hero */
#hero-6 .slideshow,
#hero-6 .slideshow .slides {
  height: 800px;
}

/* Dark overlay for text legibility */
#hero-6 .image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

/* Static text overlay — sits above slides */
.moxi-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
}

.moxi-hero-txt {
  overflow: visible;
}

.moxi-hero-txt h1,
.moxi-hero-txt h2 {
  font-family: 'Jost', sans-serif !important;
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 20px;
  white-space: nowrap;
}

.moxi-hero-txt p {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
}

/* Responsive hero text + height */
@media (max-width: 1199px) {
  #hero-6 .slideshow,
  #hero-6 .slideshow .slides {
    height: 700px;
  }
}

@media (max-width: 991px) {
  #hero-6 .slideshow,
  #hero-6 .slideshow .slides {
    height: 600px;
  }
  .moxi-hero-txt h1,
.moxi-hero-txt h2 {
    font-size: 2.25rem;
  }
  .moxi-hero-txt p {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  #hero-6 .slideshow,
  #hero-6 .slideshow .slides {
    height: 500px;
  }
  .moxi-hero-txt h1,
.moxi-hero-txt h2 {
    font-size: 1.6rem;
  }
  .moxi-hero-txt p {
    font-size: 0.85rem;
    padding: 0;
  }
}


/* ------------------------------------------
   SECTION BACKGROUNDS
   ------------------------------------------ */

/* Alternating section backgrounds for visual rhythm */
.bg--stone {
  background-color: var(--moxi-light-cream) !important;
}

/* Smoke backgrounds (used in content blocks) */
.smoke--shape,
.bg--smoke {
  background-color: var(--moxi-light-cream) !important;
}

.smoke--shape:after {
  background-color: var(--moxi-light-cream) !important;
}

/* Keep the box shape but remove the sliver — extend to full container width */
.ct-05 .container:after {
  width: 100% !important;
}

/* Equalize padding — text left should match image right */
.ct-05 .txt-block {
  padding-left: 40px !important;
  padding-right: 25px !important;
}

.ct-05 .ct-05-img {
  padding-right: 40px;
}


/* ------------------------------------------
   BANNER CTA SECTION
   ------------------------------------------ */

.banner-1-wrapper {
  background-color: var(--moxi-charcoal);
  border-radius: 16px;
  overflow: hidden;
}

.banner-1-wrapper.bg--fixed {
  background-color: var(--moxi-charcoal);
}

.banner-1-txt .section-id {
  color: var(--moxi-pink) !important;
}

.banner-1-txt h2 {
  color: var(--moxi-white) !important;
}

.banner-1-txt p {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* ------------------------------------------
   PRICING / SERVICES
   ------------------------------------------ */

/* Pricing table accent dots */
.pricing-5-table .pricing-dot,
.pricing-table .pricing-dot {
  border-color: var(--moxi-soft-gray);
}

/* Price highlight */
.pricing-5-table .price span,
.pricing-table .price span {
  color: var(--moxi-rose);
}

/* Category icon color */
.sbox-ico span[class^="flaticon-"] {
  color: var(--moxi-rose);
}

/* Service box hover */
.sbox-2:hover .sbox-ico span {
  color: var(--moxi-rose-hover);
}

/* Service description below the name/dots/price row */
.pricing-5-item .price-desc {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 2px;
  margin-bottom: 0;
}

/* Price dots */
.price-dots {
  border-color: var(--moxi-soft-gray) !important;
}


/* ------------------------------------------
   TESTIMONIALS / REVIEWS
   ------------------------------------------ */

.review-3 .star-rating span,
.review-2 .star-rating span {
  color: #E8B830 !important;
}

.color--yellow {
  color: #E8B830 !important;
}

/* Review card background — clean, no pink */
.review-3.bg--stone {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Quotation marks around review text */
.reviews-section .review-3 .review-txt > p {
  font-style: italic;
}
.reviews-section .review-3 .review-txt > p::before {
  content: "\201C";
}
.reviews-section .review-3 .review-txt > p::after {
  content: "\201D";
}

/* Google review link */
.review-google-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--moxi-charcoal);
  opacity: 0.5;
  text-decoration: none;
  margin-top: 12px;
  transition: opacity 0.3s ease;
}
.review-google-link:hover {
  opacity: 0.8;
  color: var(--moxi-charcoal);
}
.review-google-link svg {
  width: 12px;
  height: 12px;
}

.reviews-section {
  background-color: var(--moxi-cream);
}


/* ------------------------------------------
   GALLERY
   ------------------------------------------ */

.gallery-img .hover-overlay,
.gallery-image .item-overlay {
  background-color: rgba(200, 145, 138, 0.6);
}

.hover-overlay .image-data a {
  color: var(--moxi-white) !important;
}

/* Gallery grid: uniform aspect ratio with object-fit cover */
.gallery-img {
  overflow: hidden;
}

.gallery-img a {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery hidden items */
.gallery-item.gallery-hidden {
  display: none;
}

/* Gallery Pagination */
.gallery-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery-page-btn,
.gallery-page-num {
  border: 1px solid var(--moxi-warm-gray);
  background: transparent;
  color: var(--moxi-charcoal);
  padding: 8px 16px;
  font-family: var(--moxi-body-font);
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.gallery-page-num {
  padding: 8px 14px;
  min-width: 40px;
}

.gallery-page-btn:hover:not(:disabled),
.gallery-page-num:hover {
  background-color: var(--moxi-pink);
  border-color: var(--moxi-pink);
  color: #fff;
}

.gallery-page-num.active {
  background-color: var(--moxi-pink);
  border-color: var(--moxi-pink);
  color: #fff;
}

.gallery-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.gallery-page-btn span {
  font-weight: bold;
}

/* Lightbox counter styling */
.mfp-counter {
  color: #ccc;
  font-size: 14px;
}

/* Lightbox fade animation */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

@media (max-width: 575px) {
  .gallery-page-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
  }
  .gallery-page-num {
    padding: 6px 10px;
    min-width: 34px;
    font-size: 0.85rem;
  }
}


/* ------------------------------------------
   FOOTER OVERRIDES (Reine footer-3 style)
   ------------------------------------------ */

#footer-3 {
  background-color: var(--moxi-cream);
  color: var(--moxi-warm-gray);
}

#footer-3 h5 {
  color: var(--moxi-charcoal) !important;
}

#footer-3 p {
  color: var(--moxi-warm-gray);
}

#footer-3 a {
  color: var(--moxi-warm-gray);
}

#footer-3 a:hover {
  color: var(--moxi-rose);
}

/* Footer phone */
#footer-3 .footer-phone a {
  color: var(--moxi-charcoal);
}

#footer-3 .footer-phone a:hover {
  color: var(--moxi-rose);
}

/* Footer email */
#footer-3 .footer-email a {
  color: var(--moxi-warm-gray);
}

#footer-3 .footer-email a:hover {
  color: var(--moxi-rose);
}

/* Footer hours — highlight times */
#footer-3 .footer-info p span {
  color: var(--moxi-charcoal);
  font-weight: 600;
}

/* Footer divider */
#footer-3 hr {
  border-color: var(--moxi-soft-gray);
  opacity: 0.4;
}

/* Footer copyright */
#footer-3 .footer-copyright p {
  color: var(--moxi-warm-gray);
}

/* Footer social icons — centered row */
/* Social icon row — consistent sitewide */
.foo-socials {
  list-style: none;
  padding: 0;
  margin: 15px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  float: none;
}

.foo-socials::before,
.foo-socials::after {
  display: none !important;
}

.foo-socials li {
  display: inline-flex;
  align-items: center;
}

.foo-socials li a {
  display: inline-flex;
  align-items: center;
  color: var(--moxi-charcoal);
  transition: color 0.3s ease;
}

.foo-socials li a:hover {
  color: var(--moxi-rose);
}

.foo-socials li a span {
  color: var(--moxi-charcoal);
}

.foo-socials li a:hover span {
  color: var(--moxi-rose);
}

/* TikTok SVG icon (Reine style) */
.tiktok-icon-footer {
  width: 18px;
  height: 18px;
  display: block;
  color: var(--moxi-charcoal);
  transition: color 0.3s ease;
}

.foo-socials li a:hover .tiktok-icon-footer {
  color: var(--moxi-rose);
}

/* Instagram follow strip */
#gallery-3 {
  padding-top: 6rem;
  padding-bottom: 4rem;
}

#gallery-3 .section-title h3 {
  font-size: 2.85rem;  /* 20% bigger than default h3-lg (2.375rem) */
  font-weight: 700;
}

#gallery-3 .section-title h3 a {
  color: var(--moxi-rose);
  font-weight: 700;
}

#gallery-3 .section-title h3 a:hover {
  color: var(--moxi-rose-hover);
}

/* Instagram carousel */
.instagram-carousel .insta-slide {
  overflow: hidden;
  border-radius: 6px;
}

.instagram-carousel .insta-lightbox {
  display: block;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
}

.instagram-carousel .insta-lightbox img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.instagram-carousel .insta-lightbox:hover img {
  transform: scale(1.05);
  opacity: 0.85;
}

.instagram-carousel .owl-stage {
  display: flex;
  align-items: stretch;
}

/* TikTok SVG icon — inline (About, Contact pages) */
.tiktok-icon-inline {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  color: var(--moxi-charcoal);
  transition: color 0.3s ease;
}

a:hover .tiktok-icon-inline {
  color: var(--moxi-rose);
}


/* ------------------------------------------
   INNER PAGE HERO
   ------------------------------------------ */

.inner-page-hero {
  background-color: #fff;
  padding-top: 240px !important;
  padding-bottom: 60px !important;
}

.inner-page-hero h1,
.inner-page-hero h2 {
  font-size: 4.25rem !important;
  font-weight: 400 !important;
}

/* Space between inner-page hero and first content section */
.inner-page-hero + section,
.inner-page-hero + .pricing-section {
  padding-top: 40px;
  background-color: #fff;
}


/* ------------------------------------------
   MODAL / POPUP OVERRIDES
   ------------------------------------------ */

#modal-2 .request-form-title span {
  color: var(--moxi-rose);
}

#modal-2 .btn--black {
  background-color: var(--moxi-rose) !important;
  border-color: var(--moxi-rose) !important;
}

#modal-2 .btn--black:hover {
  background-color: var(--moxi-rose-hover) !important;
  border-color: var(--moxi-rose-hover) !important;
}

#modal-2 .modal-content {
  border-radius: 12px;
  overflow: hidden;
}

#modal-2 .modal-body-content {
  text-align: center;
  padding: 20px 10px;
}


/* ------------------------------------------
   FLOATING CTA
   ------------------------------------------ */

.moxi-floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-block;
  padding: 12px 28px;
  background-color: transparent;
  color: var(--moxi-rose);
  border: 2px solid var(--moxi-rose);
  border-radius: 0;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.moxi-floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.moxi-floating-cta:hover {
  background-color: var(--moxi-rose);
  border-color: var(--moxi-rose);
  color: var(--moxi-white);
  box-shadow: 0 6px 24px rgba(200, 145, 138, 0.45);
  transform: translateY(-2px);
  text-decoration: none;
}

@media (max-width: 767px) {
  .moxi-floating-cta {
    padding: 10px 20px;
    font-size: 13px;
    bottom: 16px;
    right: 16px;
  }
}


/* ------------------------------------------
   ABOUT SECTION — mobile layout tweaks
   ------------------------------------------ */

@media (max-width: 767.98px) {
  /* Side-by-side before/after images need a bit of vertical alignment */
  .about-6 .about-6-img {
    margin-bottom: 0;
  }
}


/* ------------------------------------------
   TRUST BADGES (custom)
   ------------------------------------------ */

.moxi-trust-badge {
  text-align: center;
  padding: 30px 20px;
}

.moxi-trust-badge__icon {
  color: var(--moxi-rose);
  margin-bottom: 20px;
  display: block;
}

.moxi-trust-badge__title {
  margin-bottom: 10px;
}

.moxi-trust-badge__text {
  color: var(--moxi-warm-gray);
}


/* ------------------------------------------
   PLAN STEPS (custom 3-step)
   ------------------------------------------ */

.moxi-plan-step {
  text-align: center;
  padding: 30px 20px;
}

.moxi-plan-step__icon {
  margin-bottom: 20px;
}

.moxi-plan-step__title {
  font-size: 22px;
  margin-bottom: 10px;
}

.moxi-plan-step__text {
  font-size: 15px;
  color: var(--moxi-warm-gray);
}


/* ------------------------------------------
   GLOBAL SECTION SPACING
   ------------------------------------------ */

/* Ensure inner pages have breathing room before the footer */
#page > section:last-of-type,
#page > div:last-of-type:not(#footer-1) {
  padding-bottom: 80px;
}

/* Inner page content sections — ensure bottom padding */
.wide-60 {
  padding-bottom: 60px;
}


/* ------------------------------------------
   REVIEW / TESTIMONIAL CARD SPACING
   ------------------------------------------ */

/* Reviews page grid — equal spacing between cards */
.reviews-section .review-3 {
  margin-bottom: 30px;
  padding: 40px 40px 40px;
  border-radius: 0 !important;
  border: none !important;
}

/* Author block — left-aligned, stacked, no indent */
.reviews-section .review-3 .review-author {
  display: block;
  text-align: left;
  padding-left: 0;
}

/* Reset the negative pull so stars aren't jammed to the top */
.reviews-section .review-3 .review-txt {
  margin-top: 0;
}

/* Homepage carousel — equal spacing between items */
.reviews-2-wrapper .review-2 {
  margin: 0 15px;
}

.reviews-2-wrapper .review-txt {
  padding: 30px;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Homepage review quotes + italic */
.reviews-2-wrapper .review-txt > p {
  font-style: italic;
}
.reviews-2-wrapper .review-txt > p::before {
  content: "\201C";
}
.reviews-2-wrapper .review-txt > p::after {
  content: "\201D";
}


/* ------------------------------------------
   FORM ELEMENTS
   ------------------------------------------ */

/* Form inputs — blush focus state */
.form-control:focus,
input:focus,
textarea:focus {
  border-color: var(--moxi-rose) !important;
  box-shadow: 0 0 0 0.2rem rgba(200, 145, 138, 0.25) !important;
}

/* Contact form submit button */
.contact-form .btn,
.booking-form .btn {
  background-color: var(--moxi-rose) !important;
  border-color: var(--moxi-rose) !important;
  color: var(--moxi-white) !important;
}

.contact-form .btn:hover,
.booking-form .btn:hover {
  background-color: var(--moxi-rose-hover) !important;
  border-color: var(--moxi-rose-hover) !important;
}


/* ------------------------------------------
   SECTION DIVIDER LINES
   ------------------------------------------ */

hr {
  border-color: var(--moxi-soft-gray);
}

/* Decorative dividers */
.section-title hr {
  border-color: var(--moxi-pink);
}