/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #faf8f5;
  color: #2c3e3a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #2c3e3a;
  font-weight: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   2. EDITORIAL HEADER & NAVIGATION (INLINE CENTERED INSTAGRAM BADGE)
   ========================================================================== */
.branding-header,
.site-header {
  background-color: #faf8f5;
  text-align: center;
  padding: 36px 20px 24px 20px;
}

.main-logo-container {
  display: inline-block;
  text-align: center;
}

.large-logo {
  max-width: 210px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(1.5px 1.5px 0px #c17f68);
  transition: transform 0.3s ease;
}

.large-logo:hover {
  transform: translateY(-1px);
}

.branding-header .site-tagline,
.site-header .site-tagline,
.site-tagline {
  display: block !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 300 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: #2c3e3a !important;
  margin-top: 12px !important;
  opacity: 0.75 !important;
}

.main-nav {
  border-top: 1px solid #c17f68;
  border-bottom: 1px solid #c17f68;
  padding: 12px 0;
  background-color: rgba(193, 127, 104, 0.08);
  position: relative;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.nav-links,
.nav-links ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.nav-links > li {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links a {
  color: #2c3e3a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.25s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-links a:hover {
  color: #a35f49;
}

.dropdown-arrow {
  font-size: 0.6rem;
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.2s ease;
  color: #a35f49;
}

.nav-links li:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-links li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  min-width: 220px;
  padding: 10px 0 !important;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(44, 62, 58, 0.08);
  border: 1px solid rgba(193, 127, 104, 0.2);
  z-index: 1010;
  margin-top: 10px !important;
}

.nav-links li ul::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
  background: transparent;
}

.nav-links li:hover > ul,
.nav-links li:focus-within > ul {
  display: block;
}

.nav-links li ul li {
  width: 100%;
  display: block;
}

.nav-links li ul li a {
  display: block;
  padding: 10px 20px;
  text-align: center;
  color: #2c3e3a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-links li ul li a:hover {
  color: #a35f49;
  background-color: #faf8f5;
}

/* Option 1: Inline Centered Instagram Badge */
.instagram-nav-item {
  display: inline-flex !important;
  align-items: center !important;
}

.instagram-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background-color: #2c3e3a !important;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(44, 62, 58, 0.15) !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}

.instagram-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.instagram-icon:hover {
  background-color: #c17f68 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(193, 127, 104, 0.35) !important;
}

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
  }

  .nav-links {
    gap: 20px;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero {
  max-width: 800px;
  margin: 0 auto;
  padding: 36px 24px 48px 24px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #2c3e3a;
  text-align: center;
}

.hero-subtitle {
  text-align: center;
  color: #4a5d58;
  line-height: 1.8;
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.hero-subtitle p {
  text-align: center;
  margin-bottom: 16px;
}

.hero-cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

.btn-primary {
  display: inline-block;
  background-color: #2c3e3a;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #a35f49;
  transform: translateY(-1px);
}

/* ==========================================================================
   4. LUXURY EDITORIAL CATEGORY TILES (WITH SVG HEADER BADGES)
   ========================================================================== */
.category-tiles-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 80px 24px;
}

.text-center {
  text-align: center;
}

.section-header {
  margin-bottom: 48px;
}

.section-header h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  color: #2c3e3a;
  margin-bottom: 8px;
}

.section-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  color: #4a5d58;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.editorial-category-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #eae5de;
  border-radius: 8px;
  padding: 32px 28px;
  text-decoration: none;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.editorial-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(44, 62, 58, 0.06);
  border-color: #c17f68;
}

.editorial-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  border-bottom: 1px solid #f2ede8;
  padding-bottom: 14px;
}

.editorial-card-header h3 {
  font-family: Georgia, serif;
  font-size: 1.35rem;
  color: #2c3e3a;
  letter-spacing: 0.5px;
  font-weight: normal;
}

/* Crisp Animated SVG Icon Badge */
.editorial-card-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink: 0;
  image-rendering: -webkit-optimize-contrast;
}

.editorial-category-card:hover .editorial-card-icon {
  transform: scale(1.12) translateY(-2px);
}

.editorial-category-card p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #4a5d58;
  margin-bottom: 24px;
  flex: 1;
}

.editorial-card-link {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a35f49;
  transition: color 0.2s ease;
}

.editorial-category-card:hover .editorial-card-link {
  color: #2c3e3a;
}

/* ==========================================================================
   5. MEET ERIN HOMEPAGE SPOTLIGHT
   ========================================================================== */
.about-spotlight-section {
  background-color: #f4efeb;
  padding: 72px 24px;
  border-top: 1px solid rgba(193, 127, 104, 0.2);
  border-bottom: 1px solid rgba(193, 127, 104, 0.2);
}

.about-spotlight-container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: center;
}

.about-spotlight-image {
  width: 100%;
  display: flex;
  justify-content: center;
}

.about-spotlight-image img {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(193, 127, 104, 0.3);
  box-shadow: 0 8px 24px rgba(44, 62, 58, 0.08);
}

.about-spotlight-content h2 {
  font-family: Georgia, serif;
  font-size: 2rem;
  color: #2c3e3a;
  margin-bottom: 16px;
}

.spotlight-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #2c3e3a;
  margin-bottom: 24px;
}

.spotlight-link {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2c3e3a;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.spotlight-link:hover {
  color: #a35f49;
}

.spotlight-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---- Homepage "View the Studio" photo gallery modal ---- */
.gallery-modal-content {
  max-width: 880px;
  max-height: 85vh;
  overflow-y: auto;
}

.gallery-modal-content h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  text-align: center;
}

.gallery-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.gallery-modal-item {
  border: 1px solid rgba(193, 127, 104, 0.3);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 6px 16px rgba(44, 62, 58, 0.1);
}

.gallery-modal-item img,
.gallery-modal-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   6. WHY NURTURED SKIN PILLARS
   ========================================================================== */
.pillars-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 24px;
}

.pillars-title {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 2rem;
  color: #2c3e3a;
  margin-bottom: 48px;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.pillar-card {
  background-color: #ffffff;
  border: 1px solid #eae5de;
  border-radius: 8px;
  padding: 36px 28px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(44, 62, 58, 0.06);
}

.pillar-number {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  color: #c17f68;
  display: block;
  margin-bottom: 12px;
}

.pillar-card h3 {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  color: #2c3e3a;
  margin-bottom: 12px;
}

.pillar-card p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #4a5d58;
}

/* ==========================================================================
   7. CLIENT REVIEWS SCROLLING MARQUEE
   ========================================================================== */
.reviews-section {
  padding: 56px 0 64px 0;
  background-color: #faf8f5;
  border-top: 1px solid rgba(193, 127, 104, 0.25);
  border-bottom: 1px solid rgba(193, 127, 104, 0.25);
  overflow: hidden;
}

.reviews-header {
  text-align: center;
  margin-bottom: 36px;
  padding: 0 20px;
}

.reviews-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #a35f49;
}

.reviews-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
}

.reviews-marquee::before,
.reviews-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.reviews-marquee::before {
  left: 0;
  background: linear-gradient(to right, #faf8f5 0%, rgba(250, 248, 245, 0) 100%);
}

.reviews-marquee::after {
  right: 0;
  background: linear-gradient(to left, #faf8f5 0%, rgba(250, 248, 245, 0) 100%);
}

.reviews-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: reviewsScroll 38s linear infinite;
}

.reviews-track:hover {
  animation-play-state: paused;
}

@keyframes reviewsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.review-card {
  width: 340px;
  flex-shrink: 0;
  background-color: #ffffff;
  border: 1px solid #eae5de;
  border-radius: 6px;
  padding: 28px 24px;
  box-shadow: 0 4px 16px rgba(44, 62, 58, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(44, 62, 58, 0.07);
}

.review-quote-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  line-height: 1;
  color: #c17f68;
  opacity: 0.5;
  margin-bottom: -12px;
}

.review-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}

.review-star {
  width: 14px;
  height: 14px;
  fill: #eae5de;
}

.review-star.is-filled {
  fill: #c17f68;
}

.review-text {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #2c3e3a;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-read-more {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #a35f49;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.review-read-more:hover,
.review-read-more:focus-visible {
  color: #2c3e3a;
}

.review-author-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid #f2ede8;
  padding-top: 14px;
}

.review-author-name {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2c3e3a;
}

.review-treatment {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  color: #a35f49;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   7b. TRUSTED BRANDS SCROLLING LOGO BAR
   ========================================================================== */
.brands-section {
  padding: 32px 0;
  background-color: #7e8885;
  border-top: 1px solid #c17f68;
  border-bottom: 1px solid #c17f68;
  overflow: hidden;
}

.brands-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
}

.brands-marquee::before,
.brands-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 110px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.brands-marquee::before {
  left: 0;
  background: linear-gradient(to right,
    rgba(126, 136, 133, 1) 0%,
    rgba(126, 136, 133, 0.95) 20%,
    rgba(126, 136, 133, 0.7) 45%,
    rgba(126, 136, 133, 0.35) 70%,
    rgba(126, 136, 133, 0.1) 88%,
    rgba(126, 136, 133, 0) 100%);
}

.brands-marquee::after {
  right: 0;
  background: linear-gradient(to left,
    rgba(126, 136, 133, 1) 0%,
    rgba(126, 136, 133, 0.95) 20%,
    rgba(126, 136, 133, 0.7) 45%,
    rgba(126, 136, 133, 0.35) 70%,
    rgba(126, 136, 133, 0.1) 88%,
    rgba(126, 136, 133, 0) 100%);
}

.brands-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: brandsScroll 28s linear infinite reverse;
}

.brands-track:hover {
  animation-play-state: paused;
}

@keyframes brandsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brand-logo-item {
  flex-shrink: 0;
  height: 72px;
  background-color: #ffffff;
  border: 1px solid #c17f68;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  box-shadow: 0 4px 16px rgba(44, 62, 58, 0.03);
}

.brand-logo-item img {
  /* 40px is a deliberate middle ground: smaller than the old 52px (which
     ran noticeably big), while staying close enough to these logos' own
     native resolution (~26-56px tall source art) that the upscale on
     the smallest ones (Aura Monaco, Circadia) stays mild instead of the
     ~2x stretch that made them look soft at 52px. */
  height: 40px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* ==========================================================================
   8. FINAL BOOKING CTA BANNER
   ========================================================================== */
.final-cta-section {
  background-color: #2c3e3a;
  color: #ffffff;
  text-align: center;
  padding: 80px 24px;
  /* No margin-top: this section only ever appears directly after the
     gift card promo, which already has its own bottom padding for
     breathing room. A margin here just reveals the page's base
     background color as an unintended pale gap between the two. */
}

.final-cta-container {
  max-width: 680px;
  margin: 0 auto;
}

.final-cta-container h2 {
  font-family: Georgia, serif;
  font-size: 2.2rem;
  color: #ffffff;
  margin-bottom: 16px;
}

.final-cta-container p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 32px;
}

.final-cta-section .btn-primary {
  background-color: #a35f49 !important;
  color: #ffffff !important;
  border: 1px solid #a35f49 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.final-cta-section .btn-primary:hover {
  background-color: #faf8f5 !important;
  color: #2c3e3a !important;
  border-color: #faf8f5 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.btn-lg {
  padding: 16px 36px;
  font-size: 0.88rem;
}

/* ==========================================================================
   9. SERVICES PAGE & BRANDED CANCELLATION BUTTON
   ========================================================================== */
.services-container {
  max-width: 850px;
  margin: 0 auto;
  padding: 48px 20px 64px 20px;
}

.services-header-box {
  text-align: center;
  margin-bottom: 40px;
}

.services-header-box h1 {
  font-size: 2.25rem;
  margin-bottom: 12px;
}

.multi-service-note {
  font-size: 0.85rem;
  color: #4a5d58;
  margin-top: 14px;
}

.multi-service-note a {
  color: #a35f49;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.multi-service-note a:hover,
.multi-service-note a:focus-visible {
  color: #2c3e3a;
}

/* .google-review-btn shares this styling but deliberately NOT the
   .policy-trigger-btn class itself — that class is also used as a global
   click-delegation selector (see cms-loader.js) that opens the
   cancellation-policy modal on any element with it, which silently
   swallowed clicks on the Google Review button (preventDefault fired,
   but #policy-modal doesn't exist on the homepage, so nothing visibly
   happened at all). */
.policy-trigger-btn,
.cancellation-policy-btn,
.google-review-btn {
  background: transparent;
  border: 1px solid #c17f68;
  color: #2c3e3a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 8px;
  display: inline-block;
  outline: none;
}

.policy-trigger-btn:focus-visible,
.cancellation-policy-btn:focus-visible,
.google-review-btn:focus-visible {
  outline: 2px solid #2c3e3a;
  outline-offset: 2px;
}

.policy-trigger-btn:hover,
.cancellation-policy-btn:hover,
.google-review-btn:hover {
  background-color: #a35f49;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(193, 127, 104, 0.25);
  transform: translateY(-1px);
}

/* Category sections are native <details>/<summary> — collapsed by
   default, so a 49-service menu reads as 8 compact headers instead of
   one very long scroll. Native disclosure semantics mean keyboard and
   screen-reader support come for free, no ARIA management needed. */
.service-category {
  border-bottom: 1px solid rgba(193, 127, 104, 0.3);
  scroll-margin-top: 36px;
}

.service-category:first-of-type {
  border-top: 1px solid rgba(193, 127, 104, 0.3);
}

.service-category-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
}

.service-category-toggle::-webkit-details-marker {
  display: none;
}

.service-category-toggle h2 {
  font-size: 1.4rem;
  color: #2c3e3a;
  margin: 0;
  transition: color 0.2s ease;
}

.service-category-toggle:hover h2,
.service-category-toggle:focus-visible h2 {
  color: #a35f49;
}

.service-category-toggle:focus-visible {
  outline: 2px solid #2c3e3a;
  outline-offset: 2px;
}

.accordion-chevron {
  flex-shrink: 0;
  color: #c17f68;
  transition: transform 0.25s ease;
}

.service-category[open] .accordion-chevron {
  transform: rotate(180deg);
}

.service-category .services-grid {
  padding-top: 12px;
  padding-bottom: 32px;
}

.service-card {
  background-color: #ffffff;
  border: 1px solid #eae5de;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.service-name {
  font-size: 1.25rem;
  color: #2c3e3a;
}

.service-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: #a35f49;
  letter-spacing: 0.5px;
}

.service-description {
  color: #4a5d58;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

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

.service-footer {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.provider-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.provider-note-logo {
  height: 54px;
  width: auto;
  margin-bottom: 6px;
  opacity: 0.8;
}

.provider-note p {
  margin: 0;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #4a5d58;
  font-style: italic;
}

/* ==========================================================================
   STRIKETHROUGH PRICING & SAVINGS BADGES
   ========================================================================== */
.service-title-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.original-price {
  color: #707070;
  font-size: 0.82rem;
  font-weight: 400;
  margin-left: 3px;
}

.savings-badge {
  background-color: rgba(193, 127, 104, 0.12);
  color: #a35f49;
  border: 1px solid rgba(193, 127, 104, 0.3);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
}

/* ==========================================================================
   10. BRANDED CANCELLATION MODAL
   ========================================================================== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(44, 62, 58, 0.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.policy-modal-content {
  background-color: #ffffff;
  padding: 44px 40px;
  border-radius: 12px;
  border: 1px solid #eae5de;
  box-shadow: 0 20px 40px rgba(44, 62, 58, 0.18);
  max-width: 580px;
  width: 90%;
  position: relative;
  animation: modalFadeUp 0.3s ease;
}

@keyframes modalFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.policy-modal-content h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  color: #2c3e3a;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2ede8;
  line-height: 1.3;
}

.policy-intro {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #4a5d58;
  margin-bottom: 24px;
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.policy-list li {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #2c3e3a;
  position: relative;
  padding-left: 20px;
}

.policy-list li::before {
  content: "—";
  color: #a35f49;
  font-size: 1rem;
  position: absolute;
  left: 0;
  top: -1px;
}

.policy-list li strong {
  color: #2c3e3a;
  font-weight: 600;
}

.policy-thanks {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #a35f49;
  margin-bottom: 28px;
  text-align: center;
}

.policy-modal-actions {
  text-align: center;
}

.policy-btn {
  width: 100%;
  padding: 14px 28px;
  background-color: #2c3e3a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.policy-btn:hover {
  background-color: #a35f49;
}

/* ==========================================================================
   11. EDITORIAL ABOUT PAGE
   ========================================================================== */
.about-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 80px 24px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.about-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.about-portrait {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(193, 127, 104, 0.25);
  outline: 1px solid rgba(193, 127, 104, 0.25);
  outline-offset: 8px;
  box-shadow: 0 12px 32px rgba(44, 62, 58, 0.08);
}

.about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-content h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
  color: #2c3e3a;
  margin-bottom: 24px;
  line-height: 1.25;
  font-weight: 400;
}

.about-content p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #2c3e3a;
  opacity: 0.9;
  margin-bottom: 20px;
}

.about-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 28px;
  background-color: #2c3e3a;
  color: #faf8f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.about-btn:hover {
  background-color: #a35f49;
  transform: translateY(-1px);
}

/* ---- Studio section (treatment room photo, below the bio) ---- */
.studio-section {
  background-color: #f4efeb;
  padding: 64px 24px;
  border-top: 1px solid rgba(193, 127, 104, 0.2);
  border-bottom: 1px solid rgba(193, 127, 104, 0.2);
}

.studio-container {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 44px;
  align-items: center;
}

.studio-image {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(193, 127, 104, 0.3);
  box-shadow: 0 10px 28px rgba(44, 62, 58, 0.12);
  background: none;
  cursor: zoom-in;
  transition: box-shadow 0.2s ease;
}

.studio-image:hover,
.studio-image:focus-visible {
  box-shadow: 0 14px 34px rgba(44, 62, 58, 0.2);
}

.studio-image:focus-visible {
  outline: 2px solid #2c3e3a;
  outline-offset: 3px;
}

.studio-image img {
  display: block;
  width: 100%;
  height: auto;
}

.studio-image-expand {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(44, 62, 58, 0.75);
  backdrop-filter: blur(2px);
  color: #fdfbf9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.studio-image:hover .studio-image-expand,
.studio-image:focus-visible .studio-image-expand {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  /* Touch devices: no hover state to reveal it on, so keep it visible */
  .studio-image-expand {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Gallery blade (scrolling filmstrip of studio photos, below the studio section) ---- */
.gallery-blade-section {
  background-color: #fdfbf9;
  padding: 56px 24px 64px;
}

.gallery-blade-container {
  max-width: 1100px;
  margin: 0 auto;
}

.gallery-blade-container .studio-eyebrow {
  text-align: center;
  display: block;
}

.gallery-blade-heading {
  font-family: Georgia, serif;
  font-size: 1.5rem;
  color: #2c3e3a;
  font-weight: 400;
  text-align: center;
  margin: 0 0 28px;
}

.gallery-blade {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(163, 95, 73, 0.4) transparent;
}

.gallery-blade::-webkit-scrollbar {
  height: 6px;
}

.gallery-blade::-webkit-scrollbar-thumb {
  background-color: rgba(163, 95, 73, 0.35);
  border-radius: 3px;
}

.gallery-blade::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-blade-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: block;
  height: 260px;
  width: auto;
  padding: 0;
  border: 1px solid rgba(193, 127, 104, 0.3);
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  box-shadow: 0 8px 20px rgba(44, 62, 58, 0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gallery-blade-item:hover,
.gallery-blade-item:focus-visible {
  box-shadow: 0 12px 28px rgba(44, 62, 58, 0.18);
  transform: translateY(-2px);
}

.gallery-blade-item:focus-visible {
  outline: 2px solid #2c3e3a;
  outline-offset: 3px;
}

.gallery-blade-item img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

.gallery-blade-item video {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
}

@media (max-width: 640px) {
  .gallery-blade-item {
    height: 200px;
  }
}

/* ---- Studio photo lightbox ---- */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  background-color: rgba(44, 62, 58, 0.85);
  backdrop-filter: blur(4px);
  z-index: 2100;
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.close-lightbox {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  color: #fdfbf9;
  z-index: 10;
  padding: 4px 10px;
  transition: color 0.2s ease;
  border-radius: 4px;
}

.close-lightbox:hover {
  color: #e0a894;
}

.close-lightbox:focus-visible {
  outline: 2px solid #fdfbf9;
  outline-offset: 2px;
}

.studio-eyebrow {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a35f49;
  font-weight: 700;
  margin-bottom: 10px;
}

.studio-content h2 {
  font-family: Georgia, serif;
  font-size: 1.5rem;
  color: #2c3e3a;
  margin: 0 0 12px;
  font-weight: 400;
}

.studio-content p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #2c3e3a;
  opacity: 0.9;
  margin: 0;
}

/* ==========================================================================
   12. CONTACT MODAL (STRICT CLASS TOGGLE)
   ========================================================================== */
.modal {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(44, 62, 58, 0.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex !important;
}

.modal-content {
  background-color: #ffffff;
  padding: 36px 32px;
  border-radius: 8px;
  width: 90%;
  max-width: 480px;
  position: relative;
  box-shadow: 0 12px 32px rgba(44, 62, 58, 0.2);
}

.close-modal {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: #2c3e3a;
  z-index: 10;
  padding: 4px 8px;
  transition: color 0.2s ease;
  outline: none;
  border-radius: 4px;
}

.close-modal:focus-visible {
  outline: 2px solid #2c3e3a;
  outline-offset: 2px;
}

.close-modal:hover {
  color: #c17f68;
}

.modal-content h2 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

/* ---- Review detail modal (opened via a review card's "Read More") ---- */
#review-modal .modal-content {
  max-width: 560px;
}

#review-modal .review-modal-stars {
  margin-bottom: 14px;
}

#review-modal .review-modal-stars .review-star {
  width: 16px;
  height: 16px;
}

.review-modal-text {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2c3e3a;
  margin: 0 0 20px;
}

.review-modal-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f2ede8;
}

.review-modal-nav button {
  background: none;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #2c3e3a;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 4px;
}

.review-modal-nav button:hover,
.review-modal-nav button:focus-visible {
  color: #a35f49;
}

.review-modal-nav button:focus-visible {
  outline: 2px solid #2c3e3a;
  outline-offset: 2px;
}

/* ---- Shared "thank you" content — used by thank-you.html standalone
   and by the VIP signup success modal, so the copy only lives once ---- */
.thank-you-section {
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.thank-you-content { text-align: center; }

.thank-you-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  color: #a35f49;
}

.thank-you-content h1,
.thank-you-content h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.1rem;
  color: #2c3e3a;
  margin: 0 0 16px;
  font-weight: 400;
}

.thank-you-content p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: #4a5d58;
  margin: 0 0 16px;
}

.thank-you-how {
  background-color: #f4efeb;
  border: 1px solid rgba(193, 127, 104, 0.25);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 28px 0;
  text-align: left;
}

.thank-you-how p {
  margin: 0;
  font-size: 0.9rem;
}

.thank-you-how strong {
  color: #2c3e3a;
}

.thank-you-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.thank-you-secondary-link {
  display: inline-block;
  padding: 14px 32px;
  color: #2c3e3a;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.thank-you-secondary-link:hover {
  border-color: #a35f49;
}

/* Modal-specific: a bit narrower than the contact modal, and the icon/
   heading need breathing room above the close button */
#vip-thank-you-modal .modal-content {
  max-width: 460px;
  padding-top: 44px;
}

#contact-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#contact-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #2c3e3a;
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: #c17f68;
}

.submit-btn {
  width: 100%;
  background-color: #2c3e3a;
  color: #ffffff;
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-btn:hover {
  background-color: #a35f49;
}

/* ==========================================================================
   13. EDITORIAL DARK FOOTER
   ========================================================================== */
.site-footer {
  background-color: #2c3e3a;
  color: #fdfbf9;
  padding: 64px 24px 32px;
  margin-top: 96px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.7;
  font-size: 0.88rem;
}

/* The final booking CTA banner (.final-cta-section) shares the footer's
   exact dark background color. When it's the last thing before the
   footer, the footer's normal 96px top margin shows up as an odd pale
   gap between two blocks that are meant to read as one continuous dark
   section — so collapse it to 0 in that specific case only. */
main:has(.final-cta-section) + .site-footer {
  margin-top: 0;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* Trusted Brands logos column (.footer-col-logos) is hidden below for
     now — see that rule for why. Only 3 tracks are declared here to
     match the columns actually showing (Brand, Visit Us, Explore); if
     the logos column comes back, restore the 4-track version:
     grid-template-columns: 1.2fr 1.6fr 1fr 1fr; */
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(253, 251, 249, 0.15);
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fdfbf9;
  margin: 0 0 6px 0;
}

.footer-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #e0a894;
  margin: 0;
  font-weight: 400;
}

.footer-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e0a894;
  margin: 0 0 16px 0;
  font-weight: 500;
  opacity: 0.95;
}

.footer-link,
.footer-nav a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  color: rgba(253, 251, 249, 0.8);
  font-size: 0.88rem;
  line-height: 1.65;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-link:hover,
.footer-nav a:hover {
  color: #ffffff;
  opacity: 1;
}

.footer-phone {
  margin-top: 10px;
  display: inline-block;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 10px;
}

/* Trusted Brands logos: hidden in the footer for now, per request — all
   the markup (partials/footer.html), assets (assets/logos/*.png), and
   the styling below are left fully intact so this can just be flipped
   back on later by deleting this rule (and restoring the 4-column
   .footer-container grid-template-columns above). */
.footer-col-logos {
  display: none;
}

/* Single left-aligned column under the "Trusted Brands" heading. Every
   logo image gets a fixed height (see below), so the flex `gap` here is
   genuinely equal spacing between logos, not just equal box-edge gaps
   around wildly different content sizes. */
.footer-brand-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25px;
  width: 100%;
}

.footer-brand-logos li {
  width: 100%;
  max-width: 260px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.footer-brand-logos img {
  /* Fixed height (not max-height) so every logo's box is the exact same
     size — that's what makes the gap below read as genuinely equal
     spacing rather than varying with each logo's own aspect ratio. Kept
     deliberately modest: these source files are natively only ~26-56px
     tall, and sizing them up further just upscales/softens the smallest
     ones (Aura Monaco, Circadia) more than the source detail supports. */
  height: 32px;
  width: auto;
  max-width: 100%;
  /* Logos now have real alpha transparency, so no mix-blend-mode hack is
     needed to fake away a white background that no longer exists.
     brightness(0) forces every pixel to pure black first, THEN invert(1)
     flips it to white — a plain invert() alone would shift any saturated
     brand color (e.g. Aura Monaco's pink heart) to an unrelated hue
     instead of just lightening it. */
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity 0.25s ease;
}

/* Logos with a real brand color (currently just Aura Monaco's pink heart)
   are pre-processed pixel-by-pixel in app.js instead — the dark ink is
   inverted to white but the colored pixels are left untouched, so the
   filter above (which would invert them too) must not apply here. */
.footer-brand-logos img.color-preserved {
  filter: none;
}

.footer-brand-logos img:hover {
  opacity: 0.9;
}

.footer-bottom {
  max-width: 1100px;
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(253, 251, 249, 0.65);
}

.footer-bottom p {
  margin: 0;
}

.admin-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: rgba(253, 251, 249, 0.65);
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.admin-link:hover {
  color: #e0a894;
}

/* ==========================================================================
   14. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 860px) {
  .category-grid,
  .pillars-grid,
  .about-spotlight-container,
  .about-grid,
  .studio-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-spotlight-image img {
    max-width: 220px;
  }

  .policy-modal-content {
    padding: 32px 24px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }

  .footer-brand-logos {
    align-items: center;
    gap: 0.875px;
  }

  .footer-brand-logos li {
    max-width: 220px;
    justify-content: center;
  }

  .service-footer {
    align-items: center;
  }

  .provider-note-logo {
    height: 40px;
  }

  .provider-note p {
    white-space: normal;
    max-width: 220px;
  }
}

/* ==========================================================================
   PRE & POST CARE EDITORIAL BULLET LISTS
   ========================================================================== */
.care-bullet-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.care-bullet-list li {
  position: relative !important;
  padding-left: 22px !important;
  line-height: 1.65 !important;
  color: #4a5d58 !important;
  font-size: 0.95rem !important;
}

.care-bullet-list li::before {
  content: "—" !important;
  color: #a35f49 !important;
  font-weight: 600 !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

.care-bullet-list li strong {
  color: #2c3e3a !important;
}

/* ==========================================================================
   PROACTIVE MAGGIE NUDGE BUBBLE (HIGH CONTRAST)
   ========================================================================== */
.chat-nudge-bubble {
  position: fixed !important;
  bottom: 85px !important;
  right: 24px !important;
  background-color: #ffffff !important;
  color: #2c3e3a !important;
  padding: 12px 18px !important;
  border-radius: 12px 12px 2px 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border: 1px solid #c17f68 !important;
  box-shadow: 0 10px 30px rgba(44, 62, 58, 0.25) !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  animation: nudgeFloatUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Remove Mismatched Nudge Arrow Tail */
.chat-nudge-bubble::before,
.chat-nudge-bubble::after {
  display: none !important;
}

.chat-nudge-close {
  color: #2c3e3a !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}

.chat-nudge-close:hover {
  opacity: 1 !important;
  color: #a35f49 !important;
}

@keyframes nudgeFloatUp {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   FLOATING "BACK TO TOP" BUTTON
   Bottom-left placement is deliberate — Maggie's launcher + tooltip
   occupy the bottom-right corner on every page (see chat-widget.css).
   ========================================================================== */
#back-to-top-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #2c3e3a;
  color: #fdfbf9;
  border: 1px solid #c17f68;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease;
  z-index: 999;
  box-shadow: 0 4px 14px rgba(44, 62, 58, 0.2);
}

#back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top-btn:hover {
  background-color: #a35f49;
}

#back-to-top-btn:focus-visible {
  outline: 2px solid #2c3e3a;
  outline-offset: 2px;
}

/* Homepage gift card promo: each pair of icons always stays side-by-side.
   On narrow screens the outer flex container (see the inline styles on
   .gift-card-section in index.html) wraps the whole pair above/below the
   text instead of flanking it — but within the pair itself, always row. */
.gift-icon-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.gift-icon-group img {
  width: 44px;
  height: 44px;
}

@media (max-width: 860px) {
  /* Touch targets need to be BIGGER than mouse targets, not smaller —
     this was previously 40px (under Apple/Material's ~44-48px minimum)
     while desktop was 44px, backwards for a button meant to be tapped. */
  #back-to-top-btn {
    width: 52px;
    height: 52px;
    bottom: 15px;
    left: 15px;
  }

  #back-to-top-btn svg {
    width: 24px;
    height: 24px;
  }
}

/* iOS Safari auto-zooms the page when a text input under 16px is
   focused — bump these to 16px on mobile so tapping in doesn't zoom. */
@media (max-width: 480px) {
  .lead-capture-section input[type="email"],
  #contact-form input,
  #contact-form textarea {
    font-size: 16px !important;
  }
}