/* =============================================
   TOTAL BODY FLOW MASSAGE - EXACT REPLICA
   Shared Stylesheet
   Fonts: Playfair Display + Montserrat
   Palette: White, cream, warm neutrals
   ============================================= */

/* ========== RESET & BASE ========== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #000000;
  background-color: #FFFFFF;
}

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

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

ul, ol {
  list-style: none;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.3;
  color: #000000;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

.script-heading {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

/* ========== LAYOUT ========== */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-narrow {
  max-width: 800px;
}

.section {
  padding: 60px 0;
}

.section-cream {
  background-color: #FFF7F5;
}

.section-dark {
  background-color: #2C2C2C;
  color: #FFFFFF;
}

/* ========== SKIP LINK ========== */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 10px 20px;
  z-index: 10000;
  font-size: 0.875rem;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* ========== HEADER / TOP BAR ========== */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.header-logo a {
  display: block;
}

.header-logo img {
  height: 80px;
  width: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.header-right a {
  color: #000;
  transition: opacity 0.2s;
}

.header-right a:hover {
  opacity: 0.7;
}

.header-phone {
  font-weight: 600;
}

.header-book-link {
  text-decoration: underline;
}

/* ========== NAVIGATION ========== */
.site-nav {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-nav .nav-links a {
  display: block;
  padding: 14px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a.active {
  background-color: #F5F0EB;
  color: #000000;
}

/* Mobile Nav Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  transition: all 0.3s;
  transform-origin: center;
}

/* Hamburger to X animation */
.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ========== HERO ========== */
.hero {
  position: relative;
  overflow: hidden;
  max-height: 450px;
}

.hero-bg {
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  padding: 48px 20px 80px;
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.82) 30%,
    rgba(255, 255, 255, 0.40) 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

.hero-overlay h1 {
  font-size: 2.125rem;
  font-weight: 400;
  margin-bottom: 10px;
  color: #000;
}

.hero-overlay p {
  font-size: 0.9375rem;
  color: #1a1a1a;
  max-width: 600px;
  margin: 0 auto;
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-block;
  padding: 12px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-dark {
  background-color: #000000;
  color: #FFFFFF;
}

.btn-dark:hover {
  background-color: #333333;
}

.btn-outline-dark {
  background: transparent;
  color: #000000;
  border: 2px solid #000000;
}

.btn-outline-dark:hover {
  background-color: #000000;
  color: #FFFFFF;
}

.btn-red {
  background-color: #CC0000;
  color: #FFFFFF;
}

.btn-red:hover {
  background-color: #AA0000;
}

/* ========== PRICING SECTION ========== */
.pricing-section {
  padding: 60px 0;
  background: #FFFFFF;
}

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

.pricing-header h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 8px;
}

.pricing-header .pricing-subtitle {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.pricing-header p {
  font-size: 0.875rem;
  color: #333;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.pricing-card {
  border: 1px solid #E0E0E0;
  padding: 30px 16px;
  text-align: center;
}

.pricing-card .duration {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.pricing-card .price {
  font-size: 1.5rem;
  font-weight: 300;
  color: #000;
}

.pricing-note {
  text-align: center;
  margin-top: 24px;
  font-size: 0.8125rem;
  color: #444;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== MEMBERSHIPS SECTION ========== */
.memberships-section {
  padding: 60px 0;
  background: #F3F0ED;
}

.memberships-header {
  text-align: center;
  margin-bottom: 50px;
}

.memberships-header h2 {
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.memberships-header p {
  font-size: 0.875rem;
  color: #333;
  max-width: 600px;
  margin: 0 auto;
}

.membership-tier {
  margin-bottom: 50px;
}

.membership-tier:last-child {
  margin-bottom: 0;
}

.tier-header {
  text-align: center;
  margin-bottom: 20px;
}

.tier-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.tier-header p {
  font-size: 0.875rem;
  font-style: italic;
  color: #333;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.tier-card {
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
  padding: 24px 14px;
  text-align: center;
}

.tier-card .duration {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.tier-card .price {
  font-size: 1.375rem;
  font-weight: 300;
  color: #000;
}

.membership-benefits {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #E5E0DB;
}

.membership-benefits h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.membership-benefits ul {
  display: inline-block;
  text-align: left;
  font-size: 0.875rem;
  color: #1a1a1a;
  line-height: 2;
}

.membership-benefits li {
  padding-left: 20px;
  position: relative;
}

.membership-benefits li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: #666;
}

.membership-payment-note {
  text-align: center;
  margin-top: 30px;
  font-size: 0.8125rem;
  color: #444;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== METHOD SECTION ========== */
.method-section {
  padding: 60px 0;
  background: #FFFFFF;
}

.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.method-image img {
  width: 100%;
  height: auto;
}

.method-content h2 {
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

.method-content p {
  font-size: 0.9375rem;
  color: #1a1a1a;
  line-height: 1.8;
}

.method-tagline {
  font-weight: 500;
  font-style: italic;
  margin-top: 20px;
}

.method-contact {
  margin-top: 20px;
  font-weight: 600;
}

/* ========== FOOTER ========== */
.site-footer {
  background-color: #FFFFFF;
  border-top: 1px solid #E5E5E5;
  padding: 50px 0 30px;
}

.footer-method {
  text-align: center;
  margin-bottom: 40px;
}

.footer-method h2 {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.footer-method p {
  font-size: 0.875rem;
  color: #1a1a1a;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto 16px;
}

.footer-service-areas {
  text-align: center;
  font-size: 0.8125rem;
  color: #333;
  margin-bottom: 16px;
}

.footer-service-tags {
  text-align: center;
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #E5E5E5;
  font-size: 0.75rem;
  color: #666;
}

.footer-bottom a {
  color: #333;
  text-decoration: underline;
}

.footer-bottom a:hover {
  color: #000;
}

/* ========== REVIEW / PRAISE PAGE ========== */
.praise-header {
  text-align: center;
  padding: 50px 20px;
}

.praise-header h1 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 8px;
}

.praise-header p {
  font-size: 0.9375rem;
  color: #333;
}

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

.testimonial-card {
  padding: 24px;
  border: 1px solid #E5E0DB;
  background: #FFFFFF;
}

.testimonial-card .quote {
  font-size: 0.9375rem;
  font-style: italic;
  color: #1a1a1a;
  line-height: 1.7;
  margin-bottom: 12px;
}

.testimonial-card .author {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #444;
}

.professional-testimonial {
  padding: 30px;
  margin-bottom: 30px;
  border: 1px solid #E5E0DB;
  background: #FFFFFF;
}

.professional-testimonial .photo-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.professional-testimonial .avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}

.professional-testimonial .author-name {
  font-size: 1rem;
  font-weight: 600;
}

.professional-testimonial .author-title {
  font-size: 0.8125rem;
  color: #444;
}

.professional-testimonial .text {
  font-size: 0.9375rem;
  color: #1a1a1a;
  line-height: 1.8;
}

/* ========== GIFT CARD PAGE ========== */
.giftcard-section {
  text-align: center;
  padding: 60px 20px;
}

.giftcard-section h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 16px;
}

.giftcard-section p {
  font-size: 0.9375rem;
  color: #1a1a1a;
  max-width: 600px;
  margin: 0 auto 16px;
}

/* ========== THERAPIST PAGE ========== */
.therapist-hero h1 {
  font-family: 'Great Vibes', cursive;
  font-size: 2.5rem;
  font-weight: 400;
  color: #000;
}

.therapist-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 50px;
  align-items: start;
}

.therapist-portrait img {
  width: 100%;
  height: auto;
}

.therapist-bio p {
  font-size: 0.9375rem;
  color: #1a1a1a;
  line-height: 1.8;
  margin-bottom: 16px;
}

.therapist-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #000;
}

.passion-quote {
  font-style: italic;
  font-weight: 500;
  margin-top: 20px;
}

/* ========== EXPERIENCE PAGE ========== */
.experience-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.experience-hero .hero-image {
  position: absolute;
  inset: 0;
}

.experience-hero .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-hero .hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #FFFFFF;
  padding: 40px 20px;
}

.experience-hero .hero-text h1 {
  color: #FFFFFF;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.experience-content {
  padding: 50px 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.experience-content p {
  font-size: 0.9375rem;
  color: #1a1a1a;
  line-height: 1.8;
  margin-bottom: 16px;
}

.method-logo-section {
  text-align: center;
  padding: 20px 0;
}

.method-logo-section img {
  height: 150px;
  width: auto;
  margin: 0 auto;
}

.appointment-box {
  text-align: center;
  padding: 40px 30px;
  background: #FFFFFF;
  border: 1px solid #E5E0DB;
  max-width: 600px;
  margin: 30px auto;
}

.appointment-box h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.appointment-box .phone {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.appointment-box p {
  font-size: 0.8125rem;
  color: #333;
}

/* ========== TRAINING PAGE ========== */
.training-banner {
  background-color: #CC0000;
  color: #FFFFFF;
  text-align: center;
  padding: 30px 20px;
}

.training-banner h1 {
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}

.training-banner a {
  color: #FFFFFF;
  text-decoration: underline;
}

.training-section {
  padding: 40px 0;
}

.training-section h2 {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.video-placeholder {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto 20px;
  aspect-ratio: 16 / 9;
  background: #222;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

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

.video-placeholder .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(204, 0, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-placeholder .play-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #FFFFFF;
  margin-left: 4px;
}

.video-caption {
  text-align: center;
  font-size: 0.8125rem;
  color: #444;
}

.video-caption a {
  color: #CC0000;
  text-decoration: underline;
}

.training-red-text {
  color: #CC0000;
}

.course-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.course-module {
  padding: 14px;
  border: 1px solid #E0E0E0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #CC0000;
  background-color: #FFFFFF;
  transition: background-color 0.2s;
}

.course-module:hover {
  background-color: #FFF0F0;
}

.resource-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.resource-card {
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
  overflow: hidden;
}

.resource-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.resource-card-body {
  padding: 16px;
}

.resource-card-body h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.resource-card-body p {
  font-size: 0.8125rem;
  color: #333;
  line-height: 1.6;
}

.resource-card-body a {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: #CC0000;
  text-decoration: underline;
}

/* ========== RESPONSIVE - TABLET ========== */
@media (max-width: 1024px) {
  .header-right {
    gap: 16px;
    font-size: 0.75rem;
  }

  .site-nav .nav-links a {
    padding: 12px 12px;
    font-size: 0.75rem;
  }

  .pricing-grid,
  .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-grid {
    gap: 30px;
  }

  .therapist-layout {
    grid-template-columns: 280px 1fr;
    gap: 30px;
  }

  .resource-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========== RESPONSIVE - MOBILE ========== */
@media (max-width: 768px) {
  .header-top {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 16px 20px;
  }

  .header-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .nav-inner {
    justify-content: space-between;
  }

  .site-nav .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 999;
  }

  .site-nav .nav-links.open {
    display: flex;
  }

  .site-nav .nav-links a {
    padding: 14px 20px;
    border-bottom: 1px solid #F0F0F0;
    text-align: center;
  }

  .site-nav .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: relative;
  }

  .hero {
    max-height: 350px;
  }

  .hero-bg {
    height: 350px;
  }

  .pricing-grid,
  .tier-grid {
    grid-template-columns: 1fr 1fr;
  }

  .method-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

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

  .therapist-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .therapist-portrait {
    max-width: 350px;
    margin: 0 auto;
  }

  .resource-cards {
    grid-template-columns: 1fr;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }
}

@media (max-width: 480px) {
  .pricing-grid,
  .tier-grid {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .header-logo img {
    height: 60px;
  }

  .course-modules {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==============================================
   ADDITIONAL RESPONSIVE REFINEMENTS
   Appended for mobile polish across all pages
   ============================================== */

/* --- 768px: Tablet & smaller --- */
@media (max-width: 768px) {
  /* Experience hero: reduce min-height on mobile */
  .experience-hero {
    min-height: 320px;
  }

  /* Method logo: scale down on tablets */
  .method-logo-section img {
    height: 110px;
  }

  /* Training banner: scale down large inline heading */
  .training-banner h1 {
    font-size: 1rem;
  }

  /* Praise header: allow long headings to reflow */
  .praise-header h1 {
    font-size: 1.5rem;
    padding: 0 10px;
  }

  /* Footer service tags: prevent overflow from long dash-separated list */
  .footer-service-tags {
    word-break: break-word;
  }

  /* Buttons: ensure minimum touch target height */
  .btn {
    min-height: 44px;
    padding: 13px 24px;
  }
}

/* --- 480px: Small phones --- */
@media (max-width: 480px) {
  /* Hero overlay: hide <br> so text reflows naturally */
  .hero-overlay br {
    display: none;
  }

  /* Memberships header: hide <br> for natural text reflow */
  .memberships-header br {
    display: none;
  }

  /* Praise header: hide <br> for natural reflow on reviews page */
  .praise-header br {
    display: none;
  }

  /* Experience hero: further reduce on very small screens */
  .experience-hero {
    min-height: 280px;
  }

  /* Experience hero heading: scale down */
  .experience-hero .hero-text h1 {
    font-size: 1.375rem;
    letter-spacing: 0.06em;
  }

  /* Hero overlay: adjust for top-anchored text */
  .hero-overlay {
    padding: 24px 12px 48px;
  }

  /* Hero overlay heading: refine size for very small screens */
  .hero-overlay h1 {
    font-size: 1.375rem;
    margin-bottom: 6px;
  }

  /* Hero section: reduce max-height for small phones */
  .hero {
    max-height: 280px;
  }

  .hero-bg {
    height: 280px;
  }

  /* Method logo: further scale on small phones */
  .method-logo-section img {
    height: 80px;
  }

  /* Training banner: ensure large text does not overflow */
  .training-banner {
    padding: 24px 16px;
  }

  /* Buttons: generous touch targets on small phones */
  .btn {
    min-height: 44px;
    padding: 14px 24px;
    font-size: 0.75rem;
  }

  /* Professional testimonial: ensure avatar does not shrink */
  .professional-testimonial .avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }

  /* Professional testimonial: reduce padding on small screens */
  .professional-testimonial {
    padding: 20px;
  }

  /* Testimonial cards: tighten padding */
  .testimonial-card {
    padding: 18px;
  }

  /* Appointment box: ensure adequate padding */
  .appointment-box {
    padding: 30px 16px;
    margin: 20px auto;
  }

  /* Section padding: reduce for small screens */
  .section {
    padding: 40px 0;
  }

  /* Pricing section: reduce padding */
  .pricing-section {
    padding: 40px 0;
  }

  /* Memberships section: reduce padding */
  .memberships-section {
    padding: 40px 0;
  }

  /* Footer: tighten padding on small phones */
  .site-footer {
    padding: 36px 0 24px;
  }

  /* Footer method section: reduce bottom margin */
  .footer-method {
    margin-bottom: 28px;
  }
}

/* --- 375px: Very small phones (iPhone SE, etc.) --- */
@media (max-width: 375px) {
  /* Further scale headings */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  /* Container: reduce side padding slightly */
  .container {
    padding: 0 16px;
  }

  /* Header padding: reduce */
  .header-top {
    padding: 12px 16px;
  }

  /* Pricing cards: reduce padding */
  .pricing-card {
    padding: 20px 12px;
  }

  /* Tier cards: reduce padding */
  .tier-card {
    padding: 18px 10px;
  }

  /* Reduce hero further */
  .hero {
    max-height: 240px;
  }

  .hero-bg {
    height: 240px;
  }

  .hero-overlay h1 {
    font-size: 1.375rem;
  }
}

/* ==============================================
   COMPREHENSIVE MOBILE RESPONSIVENESS AUDIT FIXES
   Appended 2026-02-07
   Covers: 375px, 390px, 480px, 768px, 1024px
   ============================================== */

/* ============================================
   1. HEADER & NAVIGATION - Touch Targets & Spacing
   ============================================ */

/* Ensure hamburger menu button meets 44x44 minimum touch target */
.nav-toggle {
  min-width: 44px;
  min-height: 44px;
  display: none;               /* hidden on desktop, shown via media query */
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure header links have adequate touch targets on all devices */
.header-right a,
.header-right span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Footer links: ensure tappable touch targets */
.footer-bottom a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* Method contact phone link: ensure adequate touch target */
.method-contact a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* Appointment box phone link: ensure adequate touch target */
.appointment-box .phone a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* ============================================
   2. TABLET BREAKPOINT - 1024px
   ============================================ */
@media (max-width: 1024px) {
  /* Hero overlay: adjust for top-anchored text on tablets */
  .hero-overlay {
    padding: 40px 20px 70px;
  }

  /* Therapist script heading: scale for tablet */
  .therapist-hero h1 {
    font-size: 2.5rem;
  }

  /* Experience hero: slightly smaller heading */
  .experience-hero .hero-text h1 {
    font-size: 1.75rem;
  }

  /* Method logo: start scaling down */
  .method-logo-section img {
    max-width: 90%;
    height: auto;
  }
}

/* ============================================
   3. MOBILE BREAKPOINT - 768px
   ============================================ */
@media (max-width: 768px) {
  /* -- Header: vertical stacking with proper spacing -- */
  .header-right a,
  .header-right span {
    font-size: 0.8125rem;
    min-height: 44px;
  }

  /* -- Navigation: mobile menu overlay (scoped to old nav) -- */
  .site-nav .nav-toggle {
    display: flex;
  }

  /* Ensure nav-links drop down with proper stacking context */
  .site-nav .nav-links {
    z-index: 1000;
  }

  /* Nav links in mobile menu: ensure full-width touch targets */
  .site-nav .nav-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
  }

  /* -- Hero: top-anchored text on mobile -- */
  .hero-overlay {
    padding: 32px 16px 60px;
  }

  .hero-overlay h1 {
    font-size: 1.625rem;
    line-height: 1.3;
  }

  .hero-overlay p {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* -- Pricing: ensure text doesn't overflow at 2-column -- */
  .pricing-card .price,
  .tier-card .price {
    font-size: 1.125rem;
    word-break: break-word;
  }

  /* Membership benefits heading: allow wrapping */
  .membership-benefits h3 {
    font-size: 1rem;
    line-height: 1.4;
  }

  /* -- Experience page -- */
  .experience-hero .hero-text {
    padding: 30px 16px;
  }

  .experience-hero .hero-text h1 {
    font-size: 1.5rem;
    letter-spacing: 0.06em;
  }

  .experience-content {
    padding: 40px 16px;
  }

  /* Method logo: cap at container width */
  .method-logo-section img {
    max-width: 80%;
    height: auto;
  }

  /* -- Training page -- */
  /* Training banner: prevent inline-styled large text from overflowing */
  .training-banner h1,
  .training-banner p {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .training-banner {
    padding: 24px 16px;
  }

  /* Override inline-styled large heading on training banner at mobile
     (the h1 has style="font-size: 2.25rem" inline which is too big for mobile) */
  .training-banner h1 {
    font-size: 1.625rem !important;
  }

  /* Video placeholder play button: scale down */
  .video-placeholder .play-btn {
    width: 56px;
    height: 56px;
  }

  .video-placeholder .play-btn::after {
    border-width: 11px 0 11px 18px;
    margin-left: 3px;
  }

  /* Resource card images: reduce fixed height on mobile */
  .resource-card img {
    height: auto;
    max-height: 180px;
  }

  /* -- Reviews page -- */
  /* Professional testimonial: ensure proper layout at mobile width */
  .professional-testimonial .photo-author {
    flex-wrap: wrap;
  }

  .professional-testimonial .author-title {
    font-size: 0.75rem;
    word-break: break-word;
  }

  /* -- Gift cards page -- */
  .giftcard-section {
    padding: 40px 16px;
  }

  /* -- Therapist page: script heading -- */
  .therapist-hero h1,
  .therapist-hero .script-heading {
    font-size: 2rem;
  }

  /* -- Footer: ensure wrapping and readability -- */
  .footer-service-areas {
    font-size: 0.75rem;
    padding: 0 8px;
  }

  .footer-service-tags {
    font-size: 0.6875rem;
    padding: 0 8px;
  }

  .footer-method p {
    font-size: 0.8125rem;
    padding: 0 4px;
  }

  .footer-method h2 {
    font-size: 1.125rem;
  }

  /* -- General: prevent horizontal overflow site-wide -- */
  body {
    overflow-x: hidden;
  }

  main {
    overflow-x: hidden;
  }
}

/* ============================================
   4. SMALL PHONE BREAKPOINT - 480px
   ============================================ */
@media (max-width: 480px) {
  /* -- Header: tighter layout for small phones -- */
  .header-top {
    gap: 8px;
    padding: 12px 16px;
  }

  .header-logo img {
    height: 55px;
  }

  .header-right {
    gap: 6px;
    font-size: 0.6875rem;
  }

  /* Ensure header links stay tappable despite smaller font */
  .header-right a {
    min-height: 44px;
    padding: 10px 4px;
  }

  /* -- Hero: top-anchored text on small phones -- */
  .hero-overlay {
    padding: 24px 12px 48px;
  }

  .hero-overlay h1 {
    font-size: 1.375rem;
    margin-bottom: 6px;
  }

  .hero-overlay p {
    font-size: 0.8125rem;
  }

  /* -- Pricing cards: ensure price text fits at 1-column -- */
  .pricing-card {
    padding: 22px 16px;
  }

  .pricing-card .price {
    font-size: 1.375rem;
  }

  .tier-card .price {
    font-size: 1.25rem;
  }

  /* Tier header: slightly smaller */
  .tier-header h3 {
    font-size: 1.125rem;
  }

  /* -- Membership benefits: tighter on small screens -- */
  .membership-benefits {
    padding-top: 20px;
  }

  .membership-benefits h3 {
    font-size: 0.9375rem;
    padding: 0 8px;
  }

  .membership-payment-note {
    font-size: 0.75rem;
    padding: 0 8px;
  }

  /* -- Experience page: further scale -- */
  .experience-hero {
    min-height: 240px;
  }

  .experience-hero .hero-text h1 {
    font-size: 1.25rem;
    letter-spacing: 0.04em;
  }

  .experience-content {
    padding: 30px 14px;
  }

  .experience-content p {
    font-size: 0.875rem;
  }

  /* -- Method logo: even smaller on small phones -- */
  .method-logo-section img {
    max-width: 70%;
    height: auto;
  }

  /* -- Appointment box: tighter padding -- */
  .appointment-box {
    padding: 24px 14px;
    margin: 16px auto;
    max-width: calc(100% - 32px);
  }

  .appointment-box h3 {
    font-size: 0.8125rem;
  }

  .appointment-box .phone {
    font-size: 1.125rem;
  }

  /* -- Training banner: handle large inline-styled text -- */
  .training-banner {
    padding: 20px 14px;
  }

  /* Override inline-styled h1 font-size (2.25rem inline is too big at 480px) */
  .training-banner h1 {
    font-size: 1.375rem !important;
  }

  /* Ensure inline-styled paragraphs respect container width */
  .training-banner p {
    max-width: 100% !important;
  }

  /* Video placeholder: scale play button further */
  .video-placeholder .play-btn {
    width: 48px;
    height: 48px;
  }

  .video-placeholder .play-btn::after {
    border-width: 9px 0 9px 15px;
    margin-left: 2px;
  }

  /* Course modules: 2-column is already set, verify text containment */
  .course-module {
    padding: 12px 8px;
    font-size: 0.8125rem;
    word-break: break-word;
  }

  /* -- Reviews page: professional testimonials -- */
  .professional-testimonial {
    padding: 16px;
  }

  .professional-testimonial .avatar {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
  }

  .professional-testimonial .author-name {
    font-size: 0.9375rem;
  }

  .professional-testimonial .text {
    font-size: 0.875rem;
  }

  .professional-testimonial .text p {
    font-size: 0.875rem;
    margin-bottom: 10px;
  }

  /* Testimonial cards: tighter */
  .testimonial-card {
    padding: 16px;
  }

  .testimonial-card .quote {
    font-size: 0.875rem;
  }

  /* -- Praise header: prevent long heading overflow -- */
  .praise-header {
    padding: 36px 14px;
  }

  .praise-header h1 {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  /* -- Gift cards: ensure padding on small screens -- */
  .giftcard-section {
    padding: 30px 14px;
  }

  /* -- Therapist page: script heading shrinks -- */
  .therapist-hero h1,
  .therapist-hero .script-heading {
    font-size: 1.75rem;
  }

  .therapist-hero {
    padding: 36px 16px 28px;
  }

  .therapist-bio p {
    font-size: 0.875rem;
  }

  /* -- Method section: stack and reduce on small phones -- */
  .method-content h2 {
    font-size: 1.25rem;
  }

  .method-content p {
    font-size: 0.875rem;
  }

  .method-grid {
    gap: 24px;
  }

  /* -- Footer: final tightening -- */
  .site-footer {
    padding: 30px 0 20px;
  }

  .footer-method {
    margin-bottom: 24px;
  }

  .footer-method h2 {
    font-size: 1rem;
  }

  .footer-method p {
    font-size: 0.75rem;
  }

  .footer-service-areas {
    font-size: 0.6875rem;
  }

  .footer-service-tags {
    font-size: 0.625rem;
    line-height: 1.6;
  }

  .footer-bottom {
    font-size: 0.6875rem;
  }

  /* -- Section padding: reduce globally -- */
  .section {
    padding: 36px 0;
  }

  .pricing-section {
    padding: 36px 0;
  }

  .memberships-section {
    padding: 36px 0;
  }

  .method-section {
    padding: 40px 0;
  }
}

/* ============================================
   5. VERY SMALL PHONES - 375px (iPhone SE)
   ============================================ */
@media (max-width: 375px) {
  /* -- Headings: further scale for iPhone SE -- */
  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.125rem; }
  h3 { font-size: 1.0625rem; }

  /* -- Container: tighter side padding -- */
  .container {
    padding: 0 14px;
  }

  /* -- Header: compact for 375px -- */
  .header-top {
    padding: 10px 14px;
    gap: 6px;
  }

  .header-logo img {
    height: 50px;
  }

  .header-right {
    gap: 4px;
    font-size: 0.625rem;
  }

  /* -- Hero: minimal sizing -- */
  .hero {
    max-height: 220px;
  }

  .hero-bg {
    height: 220px;
  }

  .hero-overlay {
    padding: 18px 10px 36px;
  }

  .hero-overlay h1 {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }

  .hero-overlay p {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* -- Pricing: single column, allow full card width -- */
  .pricing-grid,
  .tier-grid {
    max-width: 280px;
  }

  .pricing-card {
    padding: 18px 10px;
  }

  .pricing-card .duration {
    font-size: 0.8125rem;
  }

  .pricing-card .price {
    font-size: 1.25rem;
  }

  .tier-card {
    padding: 16px 8px;
  }

  .tier-card .duration {
    font-size: 0.75rem;
  }

  .tier-card .price {
    font-size: 1.125rem;
  }

  /* -- Membership tier header: compact -- */
  .tier-header h3 {
    font-size: 1rem;
  }

  .memberships-header h2 {
    font-size: 1.125rem;
  }

  /* -- Pricing note: smaller text -- */
  .pricing-note {
    font-size: 0.75rem;
    padding: 0 4px;
  }

  /* -- Experience page: minimal hero -- */
  .experience-hero {
    min-height: 200px;
  }

  .experience-hero .hero-text h1 {
    font-size: 1.125rem;
  }

  /* -- Method logo: very small -- */
  .method-logo-section img {
    max-width: 65%;
  }

  /* -- Training banner: prevent massive text overflow at 375px -- */
  .training-banner {
    padding: 18px 12px;
  }

  /* Force training banner inline styles to scale with !important
     (inline styles require !important to override) */
  .training-banner h1 {
    font-size: 0.9375rem !important;
  }

  /* -- Course modules: single column at 375px -- */
  .course-modules {
    grid-template-columns: 1fr;
  }

  .course-module {
    padding: 14px 10px;
    font-size: 0.8125rem;
  }

  /* -- Resource cards: reduce internal padding -- */
  .resource-card-body {
    padding: 14px;
  }

  .resource-card-body h3,
  .resource-card-body h4 {
    font-size: 0.875rem;
  }

  .resource-card-body p {
    font-size: 0.75rem;
  }

  /* -- Reviews: tighter professional testimonials -- */
  .professional-testimonial {
    padding: 14px;
  }

  .professional-testimonial .avatar {
    width: 50px;
    height: 50px;
  }

  .professional-testimonial .author-name {
    font-size: 0.875rem;
  }

  .professional-testimonial .author-title {
    font-size: 0.6875rem;
  }

  .professional-testimonial .text,
  .professional-testimonial .text p {
    font-size: 0.8125rem;
    line-height: 1.7;
  }

  .testimonial-card {
    padding: 14px;
  }

  .testimonial-card .quote {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  .testimonial-card .author {
    font-size: 0.75rem;
  }

  /* -- Praise header at 375px -- */
  .praise-header {
    padding: 30px 12px;
  }

  .praise-header h1 {
    font-size: 1.125rem;
  }

  /* -- Therapist page: script heading at iPhone SE -- */
  .therapist-hero h1,
  .therapist-hero .script-heading {
    font-size: 1.5rem;
  }

  .therapist-hero {
    padding: 30px 14px 24px;
  }

  /* Portrait: allow full width on very small phones */
  .therapist-portrait {
    max-width: 300px;
  }

  /* -- Gift cards: compact -- */
  .giftcard-section {
    padding: 24px 12px;
  }

  /* -- Appointment box at 375px -- */
  .appointment-box {
    padding: 20px 12px;
    max-width: calc(100% - 24px);
  }

  .appointment-box h3 {
    font-size: 0.75rem;
  }

  .appointment-box .phone {
    font-size: 1rem;
  }

  /* -- Method section at 375px -- */
  .method-content h2 {
    font-size: 1.125rem;
  }

  .method-content p {
    font-size: 0.8125rem;
    line-height: 1.7;
  }

  .method-tagline {
    font-size: 0.875rem;
  }

  .method-contact {
    font-size: 0.9375rem;
  }

  /* -- Footer at 375px: final compact -- */
  .site-footer {
    padding: 24px 0 16px;
  }

  .footer-method {
    margin-bottom: 20px;
  }

  .footer-method h2 {
    font-size: 0.9375rem;
  }

  .footer-method p {
    font-size: 0.6875rem;
    line-height: 1.7;
  }

  .footer-service-areas {
    font-size: 0.625rem;
    margin-bottom: 10px;
  }

  .footer-service-tags {
    font-size: 0.6875rem;
    margin-bottom: 20px;
  }

  .footer-bottom {
    font-size: 0.625rem;
  }

  .footer-bottom a {
    min-height: 44px;
    line-height: 44px;
  }

  /* -- Buttons at 375px: full width for easy tapping -- */
  .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
}

/* ============================================
   6. ANDROID STANDARD - 360px
   (Anything narrower than iPhone SE)
   ============================================ */
@media (max-width: 360px) {
  /* Ultra-compact header */
  .header-logo img {
    height: 45px;
  }

  .header-right {
    gap: 3px;
    font-size: 0.5625rem;
  }

  /* Hero: absolute minimum */
  .hero {
    max-height: 200px;
  }

  .hero-bg {
    height: 200px;
  }

  .hero-overlay {
    padding: 14px 10px 30px;
  }

  .hero-overlay h1 {
    font-size: 1.125rem;
  }

  .hero-overlay p {
    font-size: 0.6875rem;
  }

  /* Pricing grid: narrower max */
  .pricing-grid,
  .tier-grid {
    max-width: 260px;
  }

  /* Training banner: even more compact */
  .training-banner {
    padding: 16px 10px;
  }

  /* Experience hero */
  .experience-hero {
    min-height: 180px;
  }

  .experience-hero .hero-text h1 {
    font-size: 1rem;
  }

  /* Therapist script heading */
  .therapist-hero h1,
  .therapist-hero .script-heading {
    font-size: 1.375rem;
  }

  /* Container: minimal padding */
  .container {
    padding: 0 12px;
  }
}

/* ============================================
   7. iPad / iPad Pro BREAKPOINT - 768px-1024px
   Specific tweaks for tablet landscape
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Pricing grid: 2 columns with better spacing */
  .pricing-grid,
  .tier-grid {
    gap: 16px;
  }

  /* Method grid: balanced on tablet */
  .method-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  /* Experience hero: comfortable size on tablet */
  .experience-hero {
    min-height: 350px;
  }

  /* Testimonials grid: 2 columns on tablet */
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Resource cards: 2 columns on tablet */
  .resource-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Therapist layout: side-by-side on tablet */
  .therapist-layout {
    grid-template-columns: 260px 1fr;
    gap: 28px;
  }
}

/* ============================================
   8. GLOBAL OVERFLOW PROTECTION
   Prevents any element from causing horizontal scroll
   ============================================ */
html {
  overflow-x: hidden;
}

/* Ensure all images respect container bounds */
img {
  max-width: 100%;
  height: auto;
}

/* Ensure long words/URLs break properly */
.pricing-note,
.membership-payment-note,
.footer-service-tags,
.footer-service-areas,
.training-banner,
.testimonial-card .quote,
.professional-testimonial .text,
.experience-content p,
.method-content p,
.therapist-bio p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================
   9. PRINT-SAFE / ACCESSIBILITY
   Ensure focus outlines are visible for keyboard nav
   ============================================ */
.nav-toggle:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.header-right a:focus-visible,
.nav-links a:focus-visible,
.btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   LUXURY TRANSFORMATION — Total Body Flow Massage®
   Rule: NOTHING above this line was changed. These styles ADD
   luxury polish on top of the existing foundation.
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS CUSTOM PROPERTIES ─── */
:root {
  /* Typography */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Helvetica Neue', 'Arial', sans-serif;

  /* Color Palette — warm, deep, luxurious */
  --lux-charcoal: #2c2825;
  --lux-charcoal-soft: #2c2825;
  --lux-warm-gray: #6b6560;
  --lux-cream: #faf8f5;
  --lux-warm-white: #fdfcfa;
  --lux-blush: #f5efe9;
  --lux-blush-deep: #ede4da;

  /* Gold accent system */
  --lux-gold: #b8935a;
  --lux-gold-light: #d4c4a0;
  --lux-gold-pale: #e8dcc8;
  --lux-gold-glow: rgba(184, 147, 90, 0.15);
  --lux-gold-border: rgba(184, 147, 90, 0.25);

  /* Shadows — soft, warm, layered */
  --shadow-subtle: 0 1px 3px rgba(44, 40, 37, 0.04);
  --shadow-soft: 0 2px 20px rgba(44, 40, 37, 0.06);
  --shadow-medium: 0 4px 30px rgba(44, 40, 37, 0.10);
  --shadow-elevated: 0 8px 40px rgba(44, 40, 37, 0.14);
  --shadow-gold-glow: 0 4px 20px rgba(184, 147, 90, 0.12);

  /* Transitions */
  --ease-luxury: cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ─── GLOBAL TYPOGRAPHY ─── */
body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.8;
  color: var(--lux-charcoal);
  background-color: var(--lux-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--lux-charcoal);
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: 0.01em;
  font-weight: 600;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.01em;
}

h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.01em;
}

p {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--lux-charcoal-soft);
}

/* ─── TEXT SELECTION ─── */
::selection {
  background-color: var(--lux-gold-pale);
  color: var(--lux-charcoal);
}

::-moz-selection {
  background-color: var(--lux-gold-pale);
  color: var(--lux-charcoal);
}

/* ─── CUSTOM SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--lux-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--lux-gold-light);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--lux-gold);
}

/* ─── GOLD HORIZONTAL RULE ─── */
.gold-rule {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--lux-gold-light) 20%,
    var(--lux-gold) 50%,
    var(--lux-gold-light) 80%,
    transparent
  );
  max-width: 120px;
  margin: 3rem auto;
  opacity: 0.8;
}

.gold-rule-wide {
  max-width: 200px;
}

/* ─── NAVIGATION REFINEMENT (scoped to old nav — now hidden) ─── */
.site-nav .nav-links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: var(--transition-smooth);
  position: relative;
}

.site-nav .nav-links a:hover {
  color: var(--lux-gold);
  background-color: transparent;
}

.site-nav .nav-links a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--lux-gold);
  transition: all 0.4s var(--ease-luxury);
  transform: translateX(-50%);
}

.site-nav .nav-links a:hover::after {
  width: 60%;
}

.site-nav .nav-links a.active::after,
.site-nav .nav-links a[aria-current="page"]::after {
  width: 60%;
  background: var(--lux-gold);
}

.site-nav .nav-links a.active,
.site-nav .nav-links a[aria-current="page"] {
  background-color: transparent;
  color: var(--lux-charcoal);
}

/* ─── HEADER REFINEMENT ─── */
.site-header {
  background: var(--lux-warm-white);
  border-bottom: 1px solid var(--lux-blush-deep);
}

.header-right a {
  transition: var(--transition-smooth);
}

.header-right a:hover {
  color: var(--lux-gold);
  opacity: 1;
}

.site-nav {
  background: var(--lux-warm-white);
  border-bottom: 1px solid var(--lux-blush-deep);
}

/* ─── BUTTON LUXURY ─── */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 14px 36px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.btn-dark {
  background-color: var(--lux-charcoal);
  border: 1.5px solid var(--lux-charcoal);
}

.btn-dark:hover {
  background: var(--lux-gold);
  border-color: var(--lux-gold);
  color: white;
  box-shadow: var(--shadow-gold-glow);
  transform: translateY(-2px);
}

.btn-outline-dark {
  border: 1.5px solid var(--lux-gold);
  color: var(--lux-charcoal);
  background: transparent;
}

.btn-outline-dark:hover {
  background: var(--lux-gold);
  color: white;
  box-shadow: var(--shadow-gold-glow);
  transform: translateY(-2px);
}

/* ─── PRICING CARDS LUXURY ─── */
.pricing-card {
  border: 1px solid var(--lux-gold-border);
  background: var(--lux-warm-white);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-smooth);
  border-radius: 2px;
}

.pricing-card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px);
  border-color: var(--lux-gold-light);
}

.pricing-card .duration {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--lux-warm-gray);
}

.pricing-card .price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--lux-charcoal);
}

/* ─── MEMBERSHIP TIER CARDS ─── */
.tier-card {
  border: 1px solid var(--lux-gold-border);
  background: var(--lux-warm-white);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-smooth);
  border-radius: 2px;
}

.tier-card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px);
  border-color: var(--lux-gold-light);
}

.tier-card .duration {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--lux-warm-gray);
}

.tier-card .price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--lux-charcoal);
}

/* ─── TIER HEADINGS (Priority Care, Signature Care, etc.) ─── */
.tier-header h3 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 1rem;
  position: relative;
  display: inline-block;
}

.tier-header h3::after {
  content: '';
  display: block;
  width: 40px;
  height: 1.5px;
  background: var(--lux-gold);
  margin: 0.6rem auto 0;
}

/* ─── MEMBERSHIPS SECTION ─── */
.memberships-section {
  background: var(--lux-blush);
}

.membership-benefits {
  border-top: 1px solid var(--lux-gold-border);
}

.membership-benefits li::before {
  color: var(--lux-gold);
}

/* ─── METHOD SECTION ─── */
.method-section {
  background: var(--lux-warm-white);
}

.method-image {
  overflow: hidden;
  border-radius: 2px;
}

.method-image img {
  transition: transform 0.8s var(--ease-luxury);
}

.method-image:hover img {
  transform: scale(1.03);
}

.method-content h2 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

.method-tagline {
  color: var(--lux-gold);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.method-contact a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  color: var(--lux-charcoal);
  transition: var(--transition-smooth);
}

.method-contact a:hover {
  color: var(--lux-gold);
}

/* ─── PRICING SECTION HEADER ─── */
.pricing-header h2 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

.pricing-header .pricing-subtitle {
  font-family: var(--font-body);
  letter-spacing: 0.18em;
  color: var(--lux-gold);
}

.memberships-header h2 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* ─── TESTIMONIAL CARDS ─── */
.testimonial-card {
  border: 1px solid var(--lux-gold-border);
  border-left: 3px solid var(--lux-gold-light);
  background: var(--lux-warm-white);
  transition: var(--transition-smooth);
}

.testimonial-card:hover {
  border-left-color: var(--lux-gold);
  box-shadow: var(--shadow-soft);
}

.testimonial-card .quote {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--lux-charcoal-soft);
}

.testimonial-card .author {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--lux-gold);
}

/* ─── PROFESSIONAL TESTIMONIAL ─── */
.professional-testimonial {
  border: 1px solid var(--lux-gold-border);
  background: var(--lux-warm-white);
  transition: var(--transition-smooth);
}

.professional-testimonial:hover {
  box-shadow: var(--shadow-soft);
}

.professional-testimonial .author-name {
  color: var(--lux-charcoal);
}

.professional-testimonial .author-title {
  color: var(--lux-warm-gray);
}

.professional-testimonial .text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--lux-charcoal-soft);
}

/* ─── PRAISE HEADER ─── */
.praise-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.praise-header p {
  color: var(--lux-charcoal-soft);
}

/* ─── FOOTER REFINEMENT ─── */
.site-footer {
  background: var(--lux-charcoal);
  border-top: none;
  color: var(--lux-gold-light);
}

.footer-method h2 {
  color: var(--lux-cream);
  font-family: var(--font-display);
}

.footer-method p {
  color: rgba(250, 248, 245, 0.7);
  font-weight: 400;
}

.footer-service-areas {
  color: rgba(250, 248, 245, 0.6);
}

.footer-service-tags {
  color: rgba(250, 248, 245, 0.45);
}

.footer-bottom {
  border-top: 1px solid rgba(184, 147, 90, 0.2);
  color: rgba(250, 248, 245, 0.5);
}

.footer-bottom a {
  color: var(--lux-gold-light);
  text-decoration: none;
  transition: var(--transition-fast);
}

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

/* ─── IMAGE CONTAINERS ─── */
img {
  transition: var(--transition-slow);
}

/* ─── EXPERIENCE PAGE ─── */
.experience-hero {
  background: var(--lux-charcoal);
}

.experience-hero .hero-text h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.2);
}

.experience-content p {
  color: var(--lux-charcoal-soft);
}

/* ─── APPOINTMENT BOX ─── */
.appointment-box {
  border: 1.5px solid var(--lux-gold-border);
  background: var(--lux-warm-white);
  box-shadow: var(--shadow-medium);
}

/* ─── THERAPIST PAGE ─── */
.therapist-portrait {
  overflow: hidden;
  border-radius: 2px;
}

.therapist-portrait img {
  transition: transform 0.8s var(--ease-luxury);
}

.therapist-portrait:hover img {
  transform: scale(1.03);
}

.therapist-bio p {
  color: var(--lux-charcoal-soft);
}

.therapist-cta {
  border: 1.5px solid var(--lux-gold);
  padding: 12px 28px;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: var(--transition-smooth);
}

.therapist-cta:hover {
  background: var(--lux-gold);
  color: white;
  box-shadow: var(--shadow-gold-glow);
}

/* ─── GIFT CARD PAGE ─── */
.giftcard-image img,
.giftcard-section img {
  box-shadow: var(--shadow-medium);
  border-radius: 2px;
}

/* ─── TRAINING PAGE — KEEP RED BRAND COLOR ─── */
/* Red banners stay red — training brand identity. DO NOT OVERRIDE. */

.resource-card {
  border: 1px solid var(--lux-gold-border);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-smooth);
  overflow: hidden;
}

.resource-card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-3px);
}

.course-module {
  transition: var(--transition-smooth);
}

.course-module:hover {
  border-color: var(--lux-gold-light);
  box-shadow: var(--shadow-soft);
}

/* ─── PHONE NUMBER STYLING ─── */
a[href^="tel:"] {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ─── LINKS — elegant underline animation ─── */
.method-content a:not(.btn),
.therapist-bio a:not(.btn),
.experience-content a:not(.btn),
.footer-method a:not(.btn) {
  background-image: linear-gradient(var(--lux-gold-light), var(--lux-gold-light));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease-luxury);
}

.method-content a:not(.btn):hover,
.therapist-bio a:not(.btn):hover,
.experience-content a:not(.btn):hover,
.footer-method a:not(.btn):hover {
  background-size: 100% 1px;
}

/* ─── SCROLL REVEAL ANIMATION ─── */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s var(--ease-luxury), transform 0.8s var(--ease-luxury);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }

/* ─── HERO SECTION TRANSFORMATION ─── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 55vh;
  max-height: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  filter: brightness(1.08);
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(30, 25, 20, 0.10) 0%,
    rgba(30, 25, 20, 0.22) 50%,
    rgba(30, 25, 20, 0.35) 100%
  );
  z-index: 2;
}

.hero-overlay {
  position: relative;
  z-index: 3;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  background: none;
  padding: 2rem;
  max-width: 780px;
  text-align: center;
}

.hero-overlay h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 600;
  color: white;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow:
    0 2px 20px rgba(0,0,0,0.5),
    0 1px 4px rgba(0,0,0,0.4),
    0 0 8px rgba(0,0,0,0.2);
  margin-bottom: 1rem;
}

/* Gold accent line under hero heading */
.hero-overlay h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--lux-gold);
  margin: 1.2rem auto 0;
}

.hero-overlay p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: white;
  letter-spacing: 0.015em;
  line-height: 1.65;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.7),
    0 2px 8px rgba(0,0,0,0.5),
    0 4px 16px rgba(0,0,0,0.3);
  max-width: none;
}

.hero-overlay .hero-location {
  display: inline-block;
  font-size: 1.12em;
  font-weight: 600;
  color: #e2d2aa;
  letter-spacing: 0.10em;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.8),
    0 2px 8px rgba(0,0,0,0.6),
    0 4px 20px rgba(0,0,0,0.4),
    0 0 16px rgba(184,147,90,0.15);
  margin-top: 0.15em;
}

/* Hero Ken Burns — very subtle, DESKTOP ONLY */
@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

.hero-bg {
  animation: kenBurns 25s ease-in-out infinite alternate;
}

/* ─── SECTION BACKGROUNDS ─── */
.pricing-section {
  background-color: var(--lux-warm-white);
}

.section-cream {
  background-color: var(--lux-blush);
}

/* ─── RESPONSIVE LUXURY ─── */
@media (max-width: 768px) {
  .hero {
    min-height: 55vh;
    max-height: none !important;
  }

  .hero-bg {
    height: 100%;
    animation: none;
  }

  .hero-overlay {
    padding: 1.5rem 1rem;
  }

  .hero-overlay h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-overlay h1::after {
    width: 40px;
    margin-top: 0.8rem;
  }

  .hero-overlay p {
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    line-height: 1.7;
  }

  .hero-overlay .hero-location {
    letter-spacing: 0.08em;
  }

  .pricing-card:hover,
  .tier-card:hover {
    transform: none;
  }

  .site-nav .nav-links a::after {
    display: none;
  }

  .gold-rule {
    max-width: 80px;
    margin: 2rem auto;
  }

  /* Mobile nav dropdown styling (scoped to old nav — now hidden) */
  .site-nav .nav-links {
    background: var(--lux-warm-white);
  }

  .site-nav .nav-links a:hover {
    background-color: var(--lux-blush);
    color: var(--lux-charcoal);
  }

  .site-nav .nav-links a.active,
  .site-nav .nav-links a[aria-current="page"] {
    background-color: var(--lux-blush);
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 50vh;
    max-height: none !important;
  }

  .hero-overlay h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .btn {
    padding: 12px 28px;
    font-size: 0.75rem;
  }
}

@media (max-width: 375px) {
  .hero {
    min-height: 45vh;
    max-height: none !important;
  }

  .hero-overlay h1 {
    font-size: 1.8rem;
  }

  .hero-overlay p {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.75;
  }

  .hero-overlay .hero-location {
    letter-spacing: 0.06em;
    font-size: 1.05em;
  }
}

@media (max-width: 360px) {
  .hero {
    min-height: 40vh;
    max-height: none !important;
  }

  .hero-overlay h1 {
    font-size: 1.6rem;
  }

  .hero-overlay .hero-location {
    letter-spacing: 0.04em;
  }
}

/* ─── ACCESSIBILITY: Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-bg {
    animation: none;
  }
}

/* ─── PRINT STYLES ─── */
@media print {
  .hero::after,
  .gold-rule {
    display: none;
  }
  body {
    color: #000;
    background: #fff;
  }
  .site-footer {
    background: #fff;
    color: #000;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LUXURY REFINEMENT PASS — Complementary CSS
   Appended AFTER the Luxury Transformation block.
   These rules target elements present in HTML that have NO
   luxury treatment, reconcile inline/<style> conflicts with
   the luxury system, and add invisible polish.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   1. THERAPIST PAGE — Page-specific <style> conflicts
   your-therapist.html declares .therapist-hero bg: #FFFFFF,
   .therapist-bio color: #1a1a1a, .phone-cta border: #000,
   .testimonial-link color: #000 — all fighting the luxury
   warm palette. Override gently without touching the inline
   <style> (which stays for structure/responsive).
   ───────────────────────────────────────────────── */

.therapist-hero {
  background: var(--lux-warm-white);
}

.therapist-hero h1 {
  color: var(--lux-charcoal);
}

/* Therapist section wrapping the portrait + bio */
.therapist-section {
  background: var(--lux-warm-white);
}

/* Bio paragraph refinement (page <style> sets color:#1a1a1a) */
.therapist-bio .passion-quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--lux-gold);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Testimonial link in therapist bio */
.therapist-bio .testimonial-link {
  color: var(--lux-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--lux-gold-light);
  transition: var(--transition-smooth);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.therapist-bio .testimonial-link:hover {
  color: var(--lux-gold);
  border-bottom-color: var(--lux-gold);
  opacity: 1;
}

/* Phone CTA button on therapist page
   (page <style> sets border: 2px solid #000, hover bg: #000) */
.therapist-bio .phone-cta {
  border: 1.5px solid var(--lux-gold);
  color: var(--lux-charcoal);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: var(--transition-smooth);
}

.therapist-bio .phone-cta:hover {
  background: var(--lux-gold);
  color: white;
  border-color: var(--lux-gold);
  box-shadow: var(--shadow-gold-glow);
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────────────
   2. EXPERIENCE PAGE — Page-specific <style> conflicts
   the-experience.html declares .testimonials-link color: #000,
   .experience-appointment padding, hero overlay dark bg.
   ───────────────────────────────────────────────── */

/* Testimonials link (page <style> sets color: #000) */
.testimonials-link {
  color: var(--lux-charcoal) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--lux-gold-light);
  transition: var(--transition-smooth);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.testimonials-link:hover {
  color: var(--lux-gold) !important;
  border-bottom-color: var(--lux-gold);
  opacity: 1 !important;
}

/* Experience appointment wrapper section */
.experience-appointment {
  background: var(--lux-warm-white);
}

/* Experience content section luxury enhancement */
.experience-content {
  background: var(--lux-warm-white);
}

/* Experience hero dark overlay — align with warm charcoal */
.experience-hero .hero-image::after {
  background: rgba(44, 40, 37, 0.40);
}


/* ─────────────────────────────────────────────────
   3. GIFT CARD PAGE — Page-specific <style> conflicts
   gift-cards.html declares .giftcard-text h1, .giftcard-text p,
   .giftcard-text a with non-luxury colors.
   ───────────────────────────────────────────────── */

.giftcard-hero {
  background: var(--lux-warm-white);
}

.giftcard-text h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: 0.01em;
  color: var(--lux-charcoal);
}

.giftcard-text p {
  color: var(--lux-charcoal-soft);
  line-height: 1.85;
}

.giftcard-text a {
  color: var(--lux-charcoal);
  font-weight: 600;
  transition: var(--transition-smooth);
  border-bottom: 1px solid var(--lux-gold-light);
  text-decoration: none;
}

.giftcard-text a:hover {
  color: var(--lux-gold);
  border-bottom-color: var(--lux-gold);
}

/* Gift card image — warm shadow and subtle radius */
.giftcard-image {
  overflow: hidden;
  border-radius: 2px;
}

.giftcard-image img {
  transition: transform 0.8s var(--ease-luxury);
}

.giftcard-image:hover img {
  transform: scale(1.02);
}


/* ─────────────────────────────────────────────────
   4. TRAINING PAGE — Page-specific <style> conflicts
   training.html declares .intro-row, .intro-left h2,
   .course-access-section bg, .resource-card-body styles.
   Keep red banners red. Warm everything else.
   ───────────────────────────────────────────────── */

/* Intro section left heading (page <style> sets color: #000) */
.intro-row .intro-left h2 {
  font-family: var(--font-display);
  color: var(--lux-charcoal);
  letter-spacing: 0.01em;
}

/* Course access section (page <style> sets bg: #F5F5F5) */
.course-access-section {
  background-color: var(--lux-blush);
}

/* Resource card body heading (page <style> sets color: #000) */
.resource-card-body h3 {
  font-family: var(--font-display);
  color: var(--lux-charcoal);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Resource card body paragraph warmth */
.resource-card-body p {
  color: var(--lux-charcoal-soft);
}

/* Resource card body link — keep red for training identity */
.resource-card-body a {
  transition: var(--transition-smooth);
}

.resource-card-body a:hover {
  opacity: 0.8;
}

/* Swedish categories info box (inline border: #E0E0E0, bg: #FAFAFA) */
.training-section > .container > div[style*="border"] {
  border-color: var(--lux-gold-border) !important;
  background: var(--lux-warm-white) !important;
  border-radius: 2px;
}

/* Video caption refinement */
.video-caption {
  color: var(--lux-warm-gray);
  font-family: var(--font-body);
  letter-spacing: 0.04em;
}


/* ─────────────────────────────────────────────────
   5. HEADER ELEMENTS — Untreated classes
   .header-logo, .header-phone, .header-book-link
   exist in HTML but have no luxury treatment.
   ───────────────────────────────────────────────── */

.header-logo a {
  transition: var(--transition-smooth);
}

.header-logo a:hover {
  opacity: 0.85;
}

.header-phone {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--lux-charcoal);
  transition: var(--transition-smooth);
}

.header-phone:hover {
  color: var(--lux-gold);
}

.header-book-link {
  text-decoration: none;
  border-bottom: 1px solid var(--lux-gold-light);
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: var(--transition-smooth);
}

.header-book-link:hover {
  color: var(--lux-gold);
  border-bottom-color: var(--lux-gold);
}


/* ─────────────────────────────────────────────────
   6. SKIP LINK — Luxury warmth instead of pure black
   ───────────────────────────────────────────────── */

.skip-link {
  background: var(--lux-charcoal);
  color: var(--lux-cream);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  font-weight: 500;
  transition: top 0.3s var(--ease-luxury);
}

.skip-link:focus {
  outline: 2px solid var(--lux-gold);
  outline-offset: 2px;
}


/* ─────────────────────────────────────────────────
   7. PRICING NOTE & MEMBERSHIP PAYMENT NOTE — Refinement
   Classes exist in HTML but only received basic color
   treatment. Add spacing, typography warmth.
   ───────────────────────────────────────────────── */

.pricing-note {
  color: var(--lux-warm-gray);
  font-size: 0.8125rem;
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1.7;
  margin-top: 2rem;
}

.membership-payment-note {
  color: var(--lux-warm-gray);
  font-size: 0.8125rem;
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1.7;
}


/* ─────────────────────────────────────────────────
   8. PRICING SECTION BACKGROUND & SPACING
   .pricing-section exists in original CSS with bg: #FFFFFF,
   luxury section sets it to --lux-warm-white. Add extra
   vertical breathing room.
   ───────────────────────────────────────────────── */

.pricing-section {
  padding: 70px 0;
}

.pricing-header {
  margin-bottom: 3rem;
}

.pricing-header h2 {
  margin-bottom: 0.6rem;
}

.pricing-header p {
  color: var(--lux-charcoal-soft);
}


/* ─────────────────────────────────────────────────
   9. MEMBERSHIPS SECTION — Extra spacing and header
   refinement. .memberships-header h2 is treated, but
   the paragraph beneath is not.
   ───────────────────────────────────────────────── */

.memberships-section {
  padding: 70px 0;
}

.memberships-header {
  margin-bottom: 3.5rem;
}

.memberships-header p {
  color: var(--lux-charcoal-soft);
  line-height: 1.85;
}

.membership-benefits h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: var(--lux-charcoal);
}

.membership-benefits ul {
  color: var(--lux-charcoal-soft);
}


/* ─────────────────────────────────────────────────
   10. MEMBERSHIP TIER — Extra vertical rhythm between
   tiers. The .membership-tier class exists but has
   no luxury treatment.
   ───────────────────────────────────────────────── */

.membership-tier {
  margin-bottom: 3.5rem;
}

.membership-tier:last-child {
  margin-bottom: 0;
}

.tier-header p {
  color: var(--lux-warm-gray);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
}


/* ─────────────────────────────────────────────────
   11. METHOD SECTION — Extra vertical breathing room
   and paragraph spacing warmth.
   ───────────────────────────────────────────────── */

.method-section {
  padding: 70px 0;
}

.method-content p {
  color: var(--lux-charcoal-soft);
}

.method-contact {
  margin-top: 1.5rem;
}


/* ─────────────────────────────────────────────────
   12. PRAISE HEADER — Additional refinement
   .praise-header p needs font-family and color warmth.
   Also used on in-home-massage-services.html as a
   generic page heading section.
   ───────────────────────────────────────────────── */

.praise-header {
  background: var(--lux-warm-white);
  padding: 3.5rem 20px;
}

.praise-header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--lux-charcoal);
}

/* Gold accent line under praise section h2 */
.praise-header h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 1.5px;
  background: var(--lux-gold);
  margin: 1rem auto 0;
}


/* ─────────────────────────────────────────────────
   13. PROFESSIONAL TESTIMONIAL AVATAR — Warm border
   ring. .avatar class exists but has no luxury
   border or shadow treatment.
   ───────────────────────────────────────────────── */

.professional-testimonial .avatar {
  border: 2px solid var(--lux-gold-pale);
  box-shadow: 0 0 0 4px rgba(184, 147, 90, 0.08);
}


/* ─────────────────────────────────────────────────
   14. FOOTER — Deeper refinement. Footer service areas
   and tags need letter-spacing for luxury readability.
   ───────────────────────────────────────────────── */

.footer-service-areas {
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.footer-service-tags {
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  line-height: 2;
}

.footer-bottom p {
  letter-spacing: 0.04em;
}

/* Footer email link — gold warmth */
.footer-bottom a[href^="mailto:"] {
  border-bottom: 1px solid rgba(184, 147, 90, 0.3);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.footer-bottom a[href^="mailto:"]:hover {
  color: var(--lux-gold);
  border-bottom-color: var(--lux-gold);
}


/* ─────────────────────────────────────────────────
   15. APPOINTMENT BOX — Finer interior typography
   .appointment-box h3 and .phone sub-elements
   exist but have no luxury font treatment.
   ───────────────────────────────────────────────── */

.appointment-box h3 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lux-charcoal);
}

.appointment-box .phone {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--lux-charcoal);
}

.appointment-box .phone a {
  color: var(--lux-charcoal);
  transition: var(--transition-smooth);
}

.appointment-box .phone a:hover {
  color: var(--lux-gold);
}

.appointment-box p {
  color: var(--lux-charcoal-soft);
}


/* ─────────────────────────────────────────────────
   16. METHOD LOGO SECTION — Background warmth
   .method-logo-section exists in HTML (the-experience)
   but has no background treatment in luxury CSS.
   ───────────────────────────────────────────────── */

.method-logo-section {
  background: var(--lux-warm-white);
  padding: 2rem 0;
}

.method-logo-section img {
  transition: var(--transition-slow);
  filter: contrast(1.02);
}


/* ─────────────────────────────────────────────────
   17. SECTION-CREAM CLASS — Training page uses
   .section-cream but luxury CSS only sets bg color.
   Add subtle top/bottom border for section separation.
   ───────────────────────────────────────────────── */

.section-cream {
  border-top: 1px solid var(--lux-gold-border);
  border-bottom: 1px solid var(--lux-gold-border);
}


/* ─────────────────────────────────────────────────
   18. BODY & PARAGRAPH — Inline style overrides
   Multiple pages use inline style="color: #1a1a1a"
   and style="color: #333". These cannot be overridden
   by class selectors, but we can warm the base <p>
   styling so un-inlined paragraphs inherit properly,
   and add font smoothing for better rendering.
   ───────────────────────────────────────────────── */

p {
  text-rendering: optimizeLegibility;
}


/* ─────────────────────────────────────────────────
   19. NAV TOGGLE (HAMBURGER) — Warm the bars
   .nav-toggle span sets background: #000 in base CSS.
   Warm it to charcoal.
   ───────────────────────────────────────────────── */

.nav-toggle span {
  background: var(--lux-charcoal);
}


/* ─────────────────────────────────────────────────
   20. FOCUS OUTLINES — Gold instead of black
   Base CSS sets outline: 2px solid #000. Replace
   with warm gold for cohesion.
   ───────────────────────────────────────────────── */

.nav-toggle:focus-visible {
  outline: 2px solid var(--lux-gold);
  outline-offset: 2px;
}

.header-right a:focus-visible,
.nav-links a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--lux-gold);
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--lux-gold);
  outline-offset: 2px;
}


/* ─────────────────────────────────────────────────
   21. INLINE-STYLED ELEMENTS — Targeted specificity
   boost for elements that have inline styles fighting
   the luxury system.
   ───────────────────────────────────────────────── */

/* in-home-massage-services.html appointment box phone link
   has inline style="color: #000" */
.appointment-box p a[href^="tel:"] {
  color: var(--lux-charcoal) !important;
  transition: var(--transition-smooth);
}

.appointment-box p a[href^="tel:"]:hover {
  color: var(--lux-gold) !important;
}


/* ─────────────────────────────────────────────────
   22. TRAINING SECTION — Generic .training-section
   wrapper has no luxury treatment.
   ───────────────────────────────────────────────── */

.training-section {
  background: var(--lux-warm-white);
}

.training-section h2 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}


/* ─────────────────────────────────────────────────
   23. VIDEO PLACEHOLDER — Warm the dark background
   Base CSS sets background: #222. Warm it slightly.
   ───────────────────────────────────────────────── */

.video-placeholder {
  background: var(--lux-charcoal);
  border-radius: 2px;
  box-shadow: var(--shadow-medium);
}


/* ─────────────────────────────────────────────────
   24. COURSE MODULE — Container background warmth
   .course-modules has no container background. The
   individual .course-module cards need background
   warmth.
   ───────────────────────────────────────────────── */

.course-module {
  background: var(--lux-warm-white);
  border-color: var(--lux-gold-border);
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
}


/* ─────────────────────────────────────────────────
   25. .SECTION CLASS — Generic padding warmth
   Used by reviews.html to wrap testimonials grid.
   Add subtle background warmth.
   ───────────────────────────────────────────────── */

.section {
  background: var(--lux-warm-white);
}


/* ─────────────────────────────────────────────────
   26. EXPERIENCE HERO — Content refinement
   .hero-text p element on experience page lacks
   luxury typography treatment.
   ───────────────────────────────────────────────── */

.experience-hero .hero-text p {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(250, 248, 245, 0.85);
}


/* ─────────────────────────────────────────────────
   27. GOLD DIVIDER AFTER PRICING-SUBTITLE
   The .pricing-subtitle class has gold color but
   no decorative separation. Add a whisper-thin
   gold line below it.
   ───────────────────────────────────────────────── */

.pricing-subtitle {
  position: relative;
  padding-bottom: 1rem;
}

.pricing-subtitle::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--lux-gold);
  margin: 0.8rem auto 0;
  opacity: 0.7;
}


/* ─────────────────────────────────────────────────
   28. CONTAINER NARROW — No luxury treatment
   Used on training page for narrower content.
   ───────────────────────────────────────────────── */

.container-narrow {
  max-width: 800px;
}


/* ─────────────────────────────────────────────────
   29. MOBILE LUXURY REFINEMENTS — Ensure luxury
   details carry through to small screens
   ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .praise-header {
    padding: 2.5rem 16px;
  }

  .praise-header h2::after {
    width: 35px;
    margin-top: 0.7rem;
  }

  .pricing-section,
  .memberships-section,
  .method-section {
    padding: 50px 0;
  }

  .membership-tier {
    margin-bottom: 2.5rem;
  }

  .giftcard-text h1 {
    font-size: 1.6rem;
  }

  /* Mobile nav links — warm background on hover (scoped to old nav) */
  .site-nav .nav-links a:hover {
    background-color: var(--lux-blush);
  }

  /* Appointment box on mobile — remove excess shadow */
  .appointment-box {
    box-shadow: var(--shadow-soft);
  }
}

@media (max-width: 480px) {
  .praise-header {
    padding: 2rem 14px;
  }

  .pricing-section,
  .memberships-section,
  .method-section {
    padding: 40px 0;
  }

  .membership-tier {
    margin-bottom: 2rem;
  }

  .giftcard-text h1 {
    font-size: 1.4rem;
  }

  .pricing-subtitle::after {
    width: 30px;
  }

  .header-book-link {
    border-bottom: none;
  }

  .professional-testimonial .avatar {
    border-width: 1.5px;
    box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.06);
  }
}

@media (max-width: 375px) {
  .praise-header {
    padding: 1.5rem 12px;
  }

  .giftcard-text h1 {
    font-size: 1.3rem;
  }

  .pricing-note,
  .membership-payment-note {
    font-size: 0.75rem;
  }
}


/* ─────────────────────────────────────────────────
   30. SUBTLE LOADING STATE — Background colors for
   images while they load so there's no stark white
   flash. Invisible when loaded, noticeable when
   absent.
   ───────────────────────────────────────────────── */

.hero-bg,
.experience-hero .hero-image img,
.method-image img,
.therapist-portrait img,
.giftcard-image img,
.resource-card img,
.video-placeholder img {
  background-color: var(--lux-blush);
}

.professional-testimonial .avatar {
  background-color: var(--lux-blush-deep);
}


/* ─────────────────────────────────────────────────
   31. SMOOTH ANCHOR SCROLLING — Warm the scroll
   behavior offset so fixed-header pages don't
   clip headings under the nav.
   ───────────────────────────────────────────────── */

html {
  scroll-padding-top: 120px;
}


/* ─────────────────────────────────────────────────
   32. INLINE STYLE RECONCILIATION — The membership
   benefits <p> on index and in-home-massage-services
   has inline style="margin-top:20px; font-size:0.9375rem;
   color:#1a1a1a" — We cannot override color via class
   but can warm the font.
   ───────────────────────────────────────────────── */

.membership-benefits p {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.85;
}


/* ─────────────────────────────────────────────────
   33. REDUCED MOTION — Ensure our new transitions
   are disabled for users who prefer reduced motion
   ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .giftcard-image img,
  .method-logo-section img {
    transition: none;
  }

  .therapist-bio .phone-cta:hover,
  .btn-dark:hover,
  .btn-outline-dark:hover {
    transform: none;
  }
}


/* ===================================================================
   LUXURY MICRO-DETAIL POLISH
   Total Body Flow Massage -- CSS-only refinements

   Builds on the luxury transformation (line ~2307+ in styles.css).
   Uses var(--lux-*) custom properties exclusively.
   Targets actual class names from the HTML files.
   Never duplicates existing rules.
   =================================================================== */


/* ===================================================================
   1. SUBTLE BACKGROUND TEXTURES
   CSS-only noise and depth for flat sections.
   Uses repeating-linear-gradient at micro-scale.
   =================================================================== */

/* Fine linen texture on the pricing section background */
.pricing-section {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(184, 147, 90, 0.012) 2px,
      rgba(184, 147, 90, 0.012) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(184, 147, 90, 0.012) 2px,
      rgba(184, 147, 90, 0.012) 4px
    );
}

/* Micro crosshatch warmth on the memberships section */
.memberships-section {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(184, 147, 90, 0.015) 3px,
      rgba(184, 147, 90, 0.015) 4px
    );
}

/* Very subtle radial warmth on the praise-header */
.praise-header {
  background-image:
    radial-gradient(
      ellipse 80% 60% at 50% 40%,
      rgba(184, 147, 90, 0.04) 0%,
      transparent 70%
    );
}

/* Gentle paper grain on experience-content */
.experience-content {
  background-image:
    repeating-linear-gradient(
      120deg,
      transparent,
      transparent 1px,
      rgba(44, 40, 37, 0.008) 1px,
      rgba(44, 40, 37, 0.008) 2px
    );
}


/* ===================================================================
   2. SECTION TRANSITIONS
   Gradient fades where sections meet to soften hard lines.
   =================================================================== */

/* Soft gold-tinted fade above the memberships section */
.memberships-section::before {
  content: '';
  display: block;
  height: 40px;
  margin-top: -40px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--lux-blush) 100%
  );
  pointer-events: none;
}

/* Warm fade below memberships back to white */
.memberships-section::after {
  content: '';
  display: block;
  height: 32px;
  margin-bottom: -32px;
  background: linear-gradient(
    to bottom,
    var(--lux-blush) 0%,
    transparent 100%
  );
  pointer-events: none;
}

/* Softened edge above the footer */
.site-footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 10%,
    var(--lux-gold-border) 50%,
    transparent 90%
  );
  margin-bottom: 0;
}

/* Subtle inward warmth at the top of the method section */
.method-section::before {
  content: '';
  display: block;
  height: 1px;
  max-width: 200px;
  margin: 0 auto 3rem;
  background: linear-gradient(
    to right,
    transparent,
    var(--lux-gold-light) 40%,
    var(--lux-gold-light) 60%,
    transparent
  );
  opacity: 0.5;
}


/* ===================================================================
   3. REFINED SPACING
   Specific elements that need more breathing room.
   =================================================================== */

/* More generous padding in the pricing header */
.pricing-header {
  padding-bottom: 0.5rem;
}

/* Breathing room between "Choose your session length" and the grid */
.pricing-header p:last-child {
  margin-bottom: 0.75rem;
}

/* Space between tier groups in membership section */
.membership-tier + .membership-tier {
  padding-top: 0.5rem;
}

/* Wider gap between tier header text and its gold underline */
.tier-header {
  margin-bottom: 1.5rem;
}

/* More vertical space inside the membership benefits box */
.membership-benefits {
  padding: 2.5rem 1.5rem 1.5rem;
}

/* Professional testimonial: more space between photo row and body */
.professional-testimonial .photo-author {
  margin-bottom: 1.25rem;
}

/* Extra breathing room below the testimonials grid before Great Praise */
.testimonials-grid {
  margin-bottom: 0.5rem;
}

/* Experience content: more generous vertical rhythm */
.experience-content p + p {
  margin-top: 0.25rem;
}

/* Footer method block: more space before service areas */
.footer-method {
  padding-bottom: 0.5rem;
}


/* ===================================================================
   4. FLAT / CHEAP ELEMENT REFINEMENT
   Cards, boxes, and sections elevated to luxury.
   =================================================================== */

/* Appointment box: warm inner glow and refined border */
.appointment-box {
  border-radius: 3px;
  position: relative;
}

.appointment-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 40px rgba(184, 147, 90, 0.04);
  pointer-events: none;
}

/* Membership benefits: subtle inset glow for warmth */
.membership-benefits::after {
  content: '';
  display: block;
  height: 1px;
  max-width: 80px;
  margin: 2rem auto 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--lux-gold-light),
    transparent
  );
  opacity: 0.6;
}

/* Professional testimonial avatar: warm ring */
.professional-testimonial .avatar {
  border: 2px solid var(--lux-gold-pale);
  box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.08);
}

/* Pricing note and membership payment note: refined styling */
.pricing-note,
.membership-payment-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--lux-warm-gray);
  letter-spacing: 0.01em;
  line-height: 1.7;
}

/* Gift card image: whisper-thin gold frame */
.giftcard-image {
  position: relative;
}

.giftcard-image::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--lux-gold-border);
  border-radius: 2px;
  pointer-events: none;
}

/* Gift card text heading: display font for elegance */
.giftcard-text h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.01em;
}

/* Gift card body text: warm and refined */
.giftcard-text p {
  color: var(--lux-charcoal-soft);
}

/* Resource card body: warm link color instead of raw red */
.resource-card-body a {
  transition: var(--transition-smooth);
}

.resource-card-body a:hover {
  opacity: 0.8;
}

/* Course module cards: slight border-radius for softness */
.course-module {
  border-radius: 2px;
}

/* Section-cream backgrounds: slightly warmer than raw #FFF7F5 */
.section-cream {
  background-color: var(--lux-blush);
}


/* ===================================================================
   5. HOVER STATE GAPS
   Interactive elements missing smooth hover effects.
   =================================================================== */

/* Header phone number: gold hover */
.header-phone {
  transition: var(--transition-smooth);
}

.header-phone:hover {
  color: var(--lux-gold);
}

/* Header book link: subtle underline grow */
.header-book-link {
  transition: var(--transition-smooth);
  position: relative;
}

.header-book-link:hover {
  color: var(--lux-gold);
  text-decoration-color: var(--lux-gold);
}

/* Therapist bio testimonial link: gold transition */
.therapist-bio .testimonial-link {
  transition: var(--transition-smooth);
}

.therapist-bio .testimonial-link:hover {
  color: var(--lux-gold);
  opacity: 1;
}

/* Therapist bio phone CTA: gold on hover */
.therapist-bio .phone-cta {
  transition: var(--transition-smooth);
}

.therapist-bio .phone-cta:hover {
  background-color: var(--lux-gold);
  border-color: var(--lux-gold);
  color: white;
  box-shadow: var(--shadow-gold-glow);
}

/* Experience page testimonials link: gold transition */
.testimonials-link {
  transition: var(--transition-smooth);
}

.testimonials-link:hover {
  color: var(--lux-gold);
  opacity: 1;
}

/* Footer email link: elegant hover */
.footer-bottom a:hover {
  text-decoration: none;
  color: var(--lux-gold);
}

/* Professional testimonial: subtle left border shift on hover */
.professional-testimonial {
  border-left: 3px solid transparent;
}

.professional-testimonial:hover {
  border-left-color: var(--lux-gold-light);
}

/* Training resource card body links: smooth hover */
.resource-card-body a {
  position: relative;
}

.resource-card-body a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease-luxury);
}

.resource-card-body a:hover::after {
  width: 100%;
}

/* Appointment box phone number: hover color */
.appointment-box .phone a {
  transition: var(--transition-smooth);
}

.appointment-box .phone a:hover {
  color: var(--lux-gold);
}


/* ===================================================================
   6. LOADING POLISH
   Fade-in on page load and image loading states.
   =================================================================== */

/* Body fade-in from cream to visible on page load */
@keyframes luxFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: luxFadeIn 0.8s var(--ease-luxury) both;
}

/* Warm placeholder background while images load */
.method-image img,
.therapist-portrait img,
.giftcard-image img,
.experience-hero .hero-image img,
.resource-card img {
  background-color: var(--lux-blush);
}

/* Professional testimonial avatars: warm load state */
.professional-testimonial .avatar {
  background-color: var(--lux-blush-deep);
}


/* ===================================================================
   7. TYPOGRAPHY REFINEMENT
   Letter-spacing, font-weight, and quote mark polish.
   =================================================================== */

/* Pricing subtitle: slightly tighter tracking for elegance */
.pricing-header .pricing-subtitle {
  letter-spacing: 0.22em;
  font-weight: 500;
  font-size: 0.85rem;
}

/* Membership tier header subtitles (italic session count) */
.tier-header p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--lux-warm-gray);
  letter-spacing: 0.02em;
}

/* Footer service tags: generous letter-spacing for air */
.footer-service-tags {
  letter-spacing: 0.06em;
  font-weight: 400;
}

/* Footer service areas: display font for warmth */
.footer-service-areas {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* Testimonial quote text: slightly larger for gravitas */
.testimonial-card .quote {
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Testimonial author dash: warm gold color */
.testimonial-card .author {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

/* Experience content first paragraph: slightly larger lead-in */
.experience-content p:first-child {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.7;
  color: var(--lux-charcoal);
}

/* Method section tagline: tracking refinement */
.method-tagline {
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* Membership benefits heading: display font */
.membership-benefits h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 1.2rem;
}

/* Membership benefits list items: refined font */
.membership-benefits li {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Praise header h2 (Great Praise!) */
.praise-header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
}


/* ===================================================================
   8. SUBTLE BACKGROUND WARMTH
   Sections that are pure white shifted to warm white or cream.
   =================================================================== */

/* Pricing section: warm white instead of pure white */
.pricing-section {
  background-color: var(--lux-warm-white);
}

/* Therapist hero: warm white */
.therapist-hero {
  background-color: var(--lux-warm-white);
}

/* Therapist section: ever-so-slightly warm */
.therapist-section {
  background-color: var(--lux-cream);
}

/* Gift card hero: warm cream */
.giftcard-hero {
  background-color: var(--lux-cream);
}

/* Training section backgrounds: warm rather than raw white */
.training-section {
  background-color: var(--lux-cream);
}

/* Course access section: warm gray instead of flat gray */
.course-access-section {
  background-color: var(--lux-blush);
}

/* Experience appointment section: warm */
.experience-appointment {
  background-color: var(--lux-cream);
}

/* Reviews page .section: warm */
.section {
  background-color: var(--lux-cream);
}


/* ===================================================================
   9. GOLD ACCENT WHISPERS
   1px lines, subtle borders, gentle glows.
   Nothing loud. Everything felt.
   =================================================================== */

/* Whisper-thin gold line beneath site header */
.site-header {
  border-bottom-color: var(--lux-gold-border);
}

/* Gold tint on nav border */
.site-nav {
  border-bottom-color: var(--lux-gold-border);
}

/* Pricing grid: whisper separator between card rows */
.pricing-grid {
  row-gap: 22px;
}

/* Footer bottom border: gold tint already set, reinforce opacity */
.footer-bottom {
  border-top-color: rgba(184, 147, 90, 0.15);
}

/* Testimonial grid: very subtle gold gap lines via card shadows */
.testimonials-grid {
  gap: 1.5rem;
}


/* ===================================================================
   10. MOBILE RESPONSIVE REFINEMENTS FOR MICRO-DETAILS
   Ensure luxury micro-details degrade gracefully.
   =================================================================== */

@media (max-width: 768px) {
  /* Disable section transition pseudo-elements on mobile */
  .memberships-section::before,
  .memberships-section::after {
    display: none;
  }

  /* Reduce body fade-in duration on mobile for perceived speed */
  body {
    animation-duration: 0.5s;
  }

  /* Experience content lead-in: scale back on mobile */
  .experience-content p:first-child {
    font-size: 1.1625rem;
  }

  /* Membership benefits: tighten on mobile */
  .membership-benefits {
    padding: 1.5rem 1rem 1rem;
  }

  /* Professional testimonial left border: still visible on mobile */
  .professional-testimonial:hover {
    border-left-color: var(--lux-gold-light);
  }

  /* Footer service areas: keep display font but reduce size */
  .footer-service-areas {
    font-size: 0.8rem;
  }

  /* Gift card heading: scale for mobile */
  .giftcard-text h1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  /* Experience lead-in: further scale */
  .experience-content p:first-child {
    font-size: 1.0625rem;
  }

  /* Disable background textures on small screens for performance */
  .pricing-section,
  .memberships-section,
  .praise-header,
  .experience-content {
    background-image: none;
  }

  /* Membership benefits: compact */
  .membership-benefits {
    padding: 1.25rem 0.75rem 0.75rem;
  }

  /* Gift card heading: phone size */
  .giftcard-text h1 {
    font-size: 1.3rem;
  }
}

@media (max-width: 375px) {
  /* Footer service areas: serif still reads at small size */
  .footer-service-areas {
    font-size: 0.7rem;
  }

  /* Tier header italic: scale */
  .tier-header p {
    font-size: 0.875rem;
  }
}

/* Reduced motion: disable body fade-in */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REFINEMENT PASS — Sizing, Spacing, Brightness, CTA Buttons
   Matches FONTindex.html proportions. Serif fonts render visually
   smaller than sans-serif at the same px — these compensate.
   ═══════════════════════════════════════════════════════════════ */

/* ─── G1: HEADING SIZE INCREASES ─── */
h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
}

h2 {
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
}

h3 {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
}

/* Section headings — major prominence */
.pricing-header h2,
.memberships-header h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);
  font-weight: 600;
}

/* Pricing subtitle "A LA CARTE MENU" */
.pricing-header .pricing-subtitle {
  font-size: 0.9rem;
}

/* Pricing header body text "Choose your session length" */
.pricing-header p:not(.pricing-subtitle):not(.pricing-note) {
  font-size: 1rem;
}

/* ─── G1: PRICING CARD SIZE INCREASES ─── */
/* Duration labels — bolder + larger */
.pricing-card .duration {
  font-size: 0.875rem;
  font-weight: 700;
}

/* Price amounts — slightly larger */
.pricing-card .price {
  font-size: 2rem;
  font-weight: 500;
}

/* Tier duration labels — MATCH pricing-card */
.tier-card .duration {
  font-size: 0.875rem;
  font-weight: 700;
}

/* Tier prices — MATCH pricing-card */
.tier-card .price {
  font-size: 2rem;
  font-weight: 500;
}

/* Tier names — slightly larger */
.tier-header h3 {
  font-size: 1.1rem;
}

/* Tier descriptions — 2 steps larger, must be readable */
.tier-header p {
  font-size: 1.1rem;
}

/* ─── G2: HERO BRIGHTER + HEADING HIGHER ─── */
.hero::after {
  background: linear-gradient(
    to bottom,
    rgba(30, 25, 20, 0.06) 0%,
    rgba(30, 25, 20, 0.18) 50%,
    rgba(30, 25, 20, 0.30) 100%
  );
}

/* ─── G3: REDUCE SPACE AFTER HERO ─── */
.hero + hr.gold-rule {
  margin-top: 0;
  margin-bottom: 0;
}

.hero + hr.gold-rule + .pricing-section,
.hero + hr.gold-rule + section {
  padding-top: 2.5rem;
}

/* ─── G4: PHONE NUMBER — BODY FONT ─── */
a[href^="tel:"] {
  font-family: var(--font-body) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.method-contact a {
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: 0.03em;
}

.appointment-box .phone a {
  font-family: var(--font-body) !important;
}

/* ─── G5: CTA BUTTONS — Phone + Book Online side by side ─── */
.cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.cta-buttons .btn {
  min-width: 200px;
  border: 1.5px solid var(--lux-gold, #b8935a);
  color: var(--lux-charcoal, #2c2825);
  background: transparent;
  padding: 14px 32px;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cta-buttons .btn:hover {
  background: var(--lux-gold, #b8935a);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(184, 147, 90, 0.15);
  transform: translateY(-2px);
}

/* ─── G6: REVIEWS QUOTE BOXES — unify with Great Praise section ─── */
.testimonial-card .quote {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.85;
  font-style: normal;
  font-weight: 400;
  color: var(--lux-charcoal-soft);
}

/* ─── RESPONSIVE REFINEMENT ─── */
@media (max-width: 768px) {
  .hero {
    min-height: 45vh;
    padding-top: 6vh;
  }

  .hero-overlay h1 {
    font-size: clamp(2rem, 7vw, 3rem);
  }

  .pricing-header h2,
  .memberships-header h2 {
    font-size: clamp(1.6rem, 4.2vw, 2.2rem);
  }

  .pricing-card .price {
    font-size: 1.6rem;
  }

  .tier-card .price {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-buttons .btn {
    text-align: center;
    width: 100%;
    min-width: unset;
    padding: 12px 24px;
  }

  .hero {
    min-height: 40vh;
    padding-top: 5vh;
  }

  .pricing-card .duration {
    font-size: 0.75rem;
  }

  .tier-card .duration {
    font-size: 0.75rem;
  }

  .tier-header p {
    font-size: 0.95rem;
  }
}

/* ─── ROUND 8 REFINEMENTS ─── */

/* Reduce space between memberships section and method section */
.memberships-section + hr.gold-rule {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Increase praise-header h1 for page titles (In-Home Massage Menu, Great Praise) */
.praise-header h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
}

/* ─── CLIENT FEEDBACK PASS ─── */

/* C1: De-animate pricing cards — NOT clickable, remove interactive hover states */
.pricing-card:hover,
.tier-card:hover {
  box-shadow: var(--shadow-soft);
  transform: none;
  border-color: var(--lux-gold-border);
  cursor: default;
}

.pricing-card,
.tier-card {
  cursor: default;
}


/* ═══════════════════════════════════════════════════════════════════════
   TWO-BAR HEADER — Wynn-inspired luxury navigation
   Replaces old .site-header + .site-nav with unified .two-bar-header
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Reset: Neutralize ALL old header/nav rules --- */
.site-header,
.site-nav {
  display: none !important;
}

/* --- Two-Bar Header Container --- */
.two-bar-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* ─── BAR 1: UTILITY BAR (slim, dark) ─── */
.utility-bar {
  background: #3a322c;
  width: 100%;
  border-bottom: 1px solid rgba(184, 147, 90, 0.15);
}

.utility-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 24px;
}

.utility-bar .utility-link,
.utility-bar .utility-label {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.3s var(--ease-luxury, ease);
  white-space: nowrap;
  line-height: 1;
}

.utility-bar .utility-label {
  color: rgba(255, 255, 255, 0.55);
  cursor: default;
}

.utility-bar .utility-link:hover {
  color: var(--lux-gold-light, #d4c4a0);
}

/* Kill ANY pseudo-element gold underlines from luxury CSS */
.utility-bar .utility-link::before,
.utility-bar .utility-link::after {
  display: none !important;
  content: none !important;
}

.utility-bar .utility-phone {
  font-weight: 600;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.95);
}

.utility-bar .utility-phone:hover {
  color: var(--lux-gold-light, #d4c4a0);
}

/* ─── BAR 2: MAIN NAVIGATION BAR (warm brown) ─── */
.main-nav-bar {
  background: #6b5a49;
  width: 100%;
  box-shadow: 0 2px 12px rgba(44, 40, 37, 0.18);
}

.main-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
}

/* --- Logo --- */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.3s var(--ease-luxury, ease);
}

.nav-logo:hover {
  opacity: 0.88;
}

/* Kill gold underline from luxury CSS on logo */
.nav-logo::before,
.nav-logo::after {
  display: none !important;
  content: none !important;
}

.nav-logo img {
  height: 46px;
  width: auto;
  display: block;
  border-radius: 3px;
}

/* --- Nav Links (in main bar) --- */
.main-nav-bar .nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  flex-direction: row;
}

.main-nav-bar .nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 20px 16px;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease-luxury, ease);
  position: relative;
  background: transparent;
  border: none;
  min-height: auto;
  line-height: 1;
}

.main-nav-bar .nav-links a:hover {
  color: var(--lux-gold-light, #d4c4a0);
  background: transparent;
}

/* Gold underline on hover */
.main-nav-bar .nav-links a::after {
  content: '';
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--lux-gold-light, #d4c4a0);
  transition: width 0.35s var(--ease-luxury, ease), transform 0.35s var(--ease-luxury, ease);
  transform: translateX(-50%);
  display: block !important;
}

.main-nav-bar .nav-links a:hover::after {
  width: 60%;
}

/* Active page state */
.main-nav-bar .nav-links a.active,
.main-nav-bar .nav-links a[aria-current="page"] {
  color: #fff;
  background: transparent;
}

.main-nav-bar .nav-links a.active::after,
.main-nav-bar .nav-links a[aria-current="page"]::after {
  width: 60%;
  background: var(--lux-gold, #b8935a);
}

/* --- Hamburger Toggle (hidden on desktop) --- */
.main-nav-bar .nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  /* Kill luxury button styles */
  box-shadow: none;
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  letter-spacing: normal;
  text-transform: none;
  position: relative;
  overflow: visible;
}

.main-nav-bar .nav-toggle::before,
.main-nav-bar .nav-toggle::after {
  display: none !important;
  content: none !important;
}

.main-nav-bar .nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.88);
  transition: all 0.3s ease;
  transform-origin: center;
  border-radius: 1px;
}

.main-nav-bar .nav-toggle:focus-visible {
  outline: 2px solid var(--lux-gold, #b8935a);
  outline-offset: 2px;
}

/* Hamburger → X animation */
.main-nav-bar .nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.main-nav-bar .nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.main-nav-bar .nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ═══════════════════════════════════════
   RESPONSIVE: TABLET (≤ 1024px)
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .main-nav-bar .nav-links a {
    padding: 20px 11px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }

  .nav-logo img {
    height: 40px;
  }
}


/* ═══════════════════════════════════════
   RESPONSIVE: MOBILE (≤ 768px)
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Utility bar: compress */
  .utility-bar-inner {
    gap: 16px;
    padding: 6px 16px;
  }

  .utility-hide-mobile {
    display: none !important;
  }

  .utility-bar .utility-link {
    font-size: 0.625rem;
  }

  .utility-bar .utility-phone {
    font-size: 0.6875rem;
  }

  /* Main nav bar */
  .main-nav-inner {
    height: 54px;
    padding: 0 16px;
  }

  .nav-logo img {
    height: 38px;
  }

  /* Show hamburger */
  .main-nav-bar .nav-toggle {
    display: flex;
  }

  /* Collapse nav links */
  .main-nav-bar .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #6b5a49;
    box-shadow: 0 8px 24px rgba(44, 40, 37, 0.22);
    z-index: 999;
    border-top: 1px solid rgba(184, 147, 90, 0.2);
  }

  .main-nav-bar .nav-links.open {
    display: flex;
  }

  .main-nav-bar .nav-links a {
    padding: 16px 24px;
    text-align: center;
    justify-content: center;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    min-height: 44px;
  }

  .main-nav-bar .nav-links a:last-child {
    border-bottom: none;
  }

  .main-nav-bar .nav-links a:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .main-nav-bar .nav-links a.active,
  .main-nav-bar .nav-links a[aria-current="page"] {
    background: rgba(184, 147, 90, 0.12);
  }

  /* Hide hover underlines in mobile dropdown */
  .main-nav-bar .nav-links a::after {
    display: none !important;
  }

  /* Main nav needs relative positioning for dropdown */
  .main-nav-bar {
    position: relative;
  }
}


/* ═══════════════════════════════════════
   RESPONSIVE: SMALL PHONE (≤ 480px)
   ═══════════════════════════════════════ */
@media (max-width: 480px) {
  .utility-bar-inner {
    gap: 12px;
    padding: 5px 12px;
  }

  .utility-bar .utility-link {
    font-size: 0.5625rem;
  }

  .utility-bar .utility-phone {
    font-size: 0.625rem;
  }

  .main-nav-inner {
    height: 48px;
    padding: 0 12px;
  }

  .nav-logo img {
    height: 34px;
  }

  .main-nav-bar .nav-links a {
    padding: 14px 16px;
    font-size: 0.6875rem;
  }
}


/* ═══════════════════════════════════════
   RESPONSIVE: TINY PHONE (≤ 375px)
   ═══════════════════════════════════════ */
@media (max-width: 375px) {
  .utility-bar-inner {
    gap: 10px;
    padding: 4px 10px;
  }

  .nav-logo img {
    height: 30px;
  }

  .main-nav-inner {
    height: 44px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SPACING TIGHTENING PASS
   Reduces excess whitespace between sections while preserving luxury feel.
   Overrides earlier values; placed last for cascade priority.
   ═══════════════════════════════════════════════════════════════════════ */

/* Gold rule dividers — tighter margins */
.gold-rule {
  margin: 1.8rem auto;
}

/* Page headings — reduce vertical padding */
.praise-header {
  padding: 2.5rem 20px;
}

/* Main content sections — tighter vertical rhythm */
.pricing-section,
.memberships-section,
.method-section {
  padding: 55px 0;
}

/* Section internal headers — less bottom margin */
.pricing-header {
  margin-bottom: 2rem;
}

.memberships-header {
  margin-bottom: 2.5rem;
}

/* Membership tiers — tighter stacking */
.membership-tier {
  margin-bottom: 2.5rem;
}

/* Footer gold rule — match tighter rhythm */
.site-footer .gold-rule {
  margin: 1.5rem auto;
}

/* ── Responsive spacing tightening ── */
@media (max-width: 768px) {
  .praise-header {
    padding: 2rem 16px;
  }

  .pricing-section,
  .memberships-section,
  .method-section {
    padding: 40px 0;
  }

  .gold-rule {
    margin: 1.4rem auto;
  }

  .membership-tier {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .praise-header {
    padding: 1.6rem 14px;
  }

  .pricing-section,
  .memberships-section,
  .method-section {
    padding: 32px 0;
  }

  .gold-rule {
    margin: 1.2rem auto;
  }

  .membership-tier {
    margin-bottom: 1.6rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LUXURY POLISH — Textures, Depth, Shimmer
   Rule: Append-only. Do NOT modify existing rules above this line.
   ═══════════════════════════════════════════════════════════════ */


/* ─── PHASE 1A: TEXTURE LIBRARY ─── */
:root {
  /* Fine linen / crosshatch — hotel stationery paper feel */
  --texture-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 0h1v1H0zm2 2h1v1H2zm4 0h1v1H4zm-2 2h1v1H2zm4 0h1v1H4zm-6 2h1v1H0zm2 2h1v1H2zm4 0h1v1H4z' fill='%23000' opacity='.025'/%3E%3C/svg%3E");

  /* Fine random noise / grain — premium matte cardstock feel */
  --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000' opacity='.02'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23000' opacity='.03'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23000' opacity='.015'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%23000' opacity='.025'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23000' opacity='.02'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23000' opacity='.018'/%3E%3C/svg%3E");

  /* Subtle horizontal grain — brushed bronze / satin-finish metal feel */
  --texture-brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cline x1='0' y1='1' x2='4' y2='1' stroke='%23000' stroke-width='.5' opacity='.018'/%3E%3Cline x1='0' y1='3' x2='4' y2='3' stroke='%23000' stroke-width='.3' opacity='.012'/%3E%3C/svg%3E");

  /* ─── PHASE 1B: ENHANCED SHADOW SYSTEM ─── */
  --shadow-luxury:
    0 1px 2px rgba(44, 40, 37, 0.06),
    0 4px 12px rgba(44, 40, 37, 0.05),
    0 8px 28px rgba(44, 40, 37, 0.04),
    0 16px 48px rgba(44, 40, 37, 0.03);

  --shadow-gold-soft:
    0 2px 8px rgba(184, 147, 90, 0.08),
    0 6px 24px rgba(184, 147, 90, 0.05);

  --shadow-inset-subtle:
    inset 0 1px 3px rgba(44, 40, 37, 0.04),
    inset 0 -1px 2px rgba(255, 255, 255, 0.4);

  /* ─── PHASE 1C: ENHANCED GOLD SYSTEM ─── */
  --gold-shimmer: linear-gradient(
    105deg,
    #c9a86c 0%,
    #dfc99a 25%,
    #b8935a 50%,
    #dfc99a 75%,
    #c9a86c 100%
  );

  --gold-radial: radial-gradient(
    ellipse 70% 50% at 50% 45%,
    rgba(184, 147, 90, 0.06) 0%,
    rgba(184, 147, 90, 0.02) 40%,
    transparent 70%
  );
}


/* ─── LUXURY POLISH: HEADER/NAV ─── */

/*
 * Utility Bar: position context for texture pseudo-element
 * (Does NOT already have position: relative at any breakpoint)
 */
.utility-bar {
  position: relative;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(0, 0, 0, 0.02) 100%
  );
  border-image: linear-gradient(
    to right,
    transparent,
    rgba(184, 147, 90, 0.15),
    transparent
  ) 1;
  box-shadow: 0 1px 6px rgba(44, 40, 37, 0.08);
}

/* Brushed-metal texture overlay on utility bar */
.utility-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-brushed);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

/*
 * Main Navigation Bar: position context for texture pseudo-element
 * (Only has position: relative inside @media max-width:768px — needs it globally)
 */
.main-nav-bar {
  position: relative;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(0, 0, 0, 0.02) 100%
  );
}

/* Brushed-metal texture overlay on main nav bar (using ::after — ::before kept free) */
.main-nav-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-brushed);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

/* Nav link micro-depth text shadow */
.main-nav-bar .nav-links a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Shimmer gradient on hover underline — overrides flat background via higher specificity */
.main-nav-bar .nav-links a:hover::after {
  background: var(--gold-shimmer);
  background-size: 200% 100%;
}

/* ─── LUXURY POLISH: HEADER/NAV — MOBILE ─── */
@media (max-width: 768px) {
  /* Disable texture overlays on mobile — they're invisible at small sizes and waste paint */
  .utility-bar::before,
  .main-nav-bar::after {
    display: none;
  }
}

/* ─── LUXURY POLISH: HERO SECTIONS ─── */

/*
 * 1. INDEX HERO — Film grain texture via ::before
 *    .hero already has position: relative; overflow: hidden (line ~2941).
 *    ::after is TAKEN (dark overlay gradient, z-index: 2).
 *    ::before renders before ::after in DOM order, so at the same z-index
 *    the noise sits between the hero image and the dark gradient.
 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-noise);
  z-index: 2;
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/*
 * 2. INDEX HERO — Gold accent line shimmer upgrade
 *    Overrides the flat var(--lux-gold) background on .hero-overlay h1::after
 *    (line ~3008) via later-cascade position. Thinner line + faint gold glow
 *    = more premium.
 */
.hero-overlay h1::after {
  background: var(--gold-shimmer);
  height: 1.5px;
  box-shadow: 0 0 8px rgba(184, 147, 90, 0.12);
}

/*
 * 3. EXPERIENCE HERO — Film grain texture via ::before
 *    .experience-hero .hero-image has position: absolute (line ~788).
 *    The inline ::after on this element (overlay gradient) is z-index: 1.
 *    We use z-index: 2 so the noise sits above the gradient, giving the
 *    whole composited image a filmic quality.
 */
.experience-hero .hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-noise);
  z-index: 2;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/*
 * 4. THERAPIST HERO — Subtle warm radial glow
 *    Text-on-white layout, no photograph to grain. A barely-visible
 *    warm center glow on the white background adds dimensionality.
 */
.therapist-hero {
  background-image: var(--gold-radial);
}

/*
 * 5. GIFT CARD HERO — Same warm radial glow treatment
 */
.giftcard-hero {
  background-image: var(--gold-radial);
}

/* ─── LUXURY POLISH: HERO SECTIONS — MOBILE ─── */
@media (max-width: 768px) {
  /*
   * Disable film grain on mobile — the texture is sub-pixel at small
   * viewports, invisible to the eye, and wastes a compositing layer.
   * The shimmer gold line and warm radial glows are lightweight and stay.
   */
  .hero::before,
  .experience-hero .hero-image::before {
    display: none;
  }
}

/* ─── LUXURY POLISH: CONTENT SECTIONS ─── */

/*
 * 1. PRICING SECTION — SVG linen texture overlay
 *    The ::before pseudo-element layers a subtle woven linen texture
 *    over the pricing section. Combined opacity (SVG 0.025 × pseudo 0.35)
 *    yields ~0.009 — barely perceptible but adds tactile warmth.
 */
.pricing-section {
  position: relative;
}

.pricing-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-linen);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/*
 * 2. MEMBERSHIPS SECTION — Warm radial glow + linen texture
 *    Both ::before and ::after are TAKEN (gradient fades), so we layer
 *    textures directly via background-image on the element itself.
 *    The gold-radial adds a warm center glow; the linen adds tactile depth.
 *    This overrides the old repeating-linear-gradient with the superior SVG.
 */
.memberships-section {
  background-image:
    var(--gold-radial),
    var(--texture-linen);
  background-blend-mode: normal, multiply;
}

/*
 * 3. GOLD RULE — Faint radial warm glow halo
 *    A barely-visible warm ellipse sits behind each gold divider line,
 *    making the line appear to emit a tiny amount of warm light.
 */
.gold-rule {
  position: relative;
}

.gold-rule::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 30px;
  background: radial-gradient(ellipse, rgba(184,147,90,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/*
 * 4. METHOD SECTION — Linen texture via ::after (::before is TAKEN)
 *    Adds the same woven linen feel to the method/philosophy section.
 */
.method-section {
  position: relative;
}

.method-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-linen);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/*
 * 4b. METHOD TAGLINE — Gold shimmer gradient text
 *     "Bespoke therapeutic bodywork." rendered with a gold shimmer gradient
 *     instead of flat gold. Includes fallback for browsers without
 *     -webkit-background-clip support.
 */
.method-tagline {
  background: var(--gold-shimmer);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@supports not (-webkit-background-clip: text) {
  .method-tagline {
    color: var(--lux-gold);
  }
}

/*
 * 5. METHOD IMAGE — Premium layered shadow
 *    A multi-layer shadow that lifts the image off the page with depth
 *    consistent with the luxury design language.
 */
.method-image {
  box-shadow: var(--shadow-luxury);
}

/*
 * 6. EXPERIENCE CONTENT — Linen texture overlay
 *    Adds woven linen warmth to the experience content section.
 */
.experience-content {
  position: relative;
}

.experience-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-linen);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/*
 * 7. WELCOME-TO-WHOLENESS PAGE SECTIONS
 *    Wholeness header: warm radial glow background
 *    Pillar cards: luxury shadow with gold glow on hover
 *    Vision quote: warm radial glow + inset shadow for depth
 */
.wholeness-header {
  background-image: var(--gold-radial);
}

.pillar-card {
  box-shadow: var(--shadow-luxury);
  transition: box-shadow 0.4s var(--ease-luxury);
}

.pillar-card:hover {
  box-shadow: var(--shadow-luxury), var(--shadow-gold-soft);
}

.vision-quote {
  background-image: var(--gold-radial);
  box-shadow: var(--shadow-inset-subtle);
}

/*
 * 8. SPIRITUAL ENCOURAGEMENT PAGE
 *    Scripture quote blocks: luxury shadow + warm radial glow
 *    for a reverent, elevated feel.
 */
.scripture-quote {
  box-shadow: var(--shadow-luxury);
  background-image: var(--gold-radial);
}

/*
 * 9. PRAISE HEADER — Inset shadow depth
 *    Adds a subtle inset shadow to the reviews/praise header area,
 *    enhancing the existing radial gradient with physical depth.
 */
.praise-header {
  box-shadow: var(--shadow-inset-subtle);
}

/*
 * 10. MOBILE — Performance & Readability
 *     Disable texture pseudo-elements on tablets (compositing layers),
 *     simplify memberships background, keep shadows and glows.
 */
@media (max-width: 768px) {
  .pricing-section::before,
  .method-section::after,
  .experience-content::before {
    display: none;
  }

  .memberships-section {
    background-image: var(--gold-radial);
  }
}

@media (max-width: 480px) {
  .memberships-section,
  .wholeness-header,
  .vision-quote,
  .scripture-quote {
    background-image: none;
  }
}

/* ─── LUXURY POLISH: CARDS ─── */

/*
 * 1. PRICING CARDS — Refined Border Treatment
 *    Gold cap, linen texture overlay, subtle price text-shadow.
 */
.pricing-card {
  border-top: 2px solid var(--lux-gold-light);
  box-shadow: var(--shadow-luxury);
  position: relative;
}

.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-linen);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.pricing-card .price {
  text-shadow: 0 1px 2px rgba(184, 147, 90, 0.08);
}

/*
 * 2. MEMBERSHIP TIER CARDS — Same Treatment
 *    Gold cap, linen texture, price text-shadow.
 */
.tier-card {
  border-top: 2px solid var(--lux-gold-light);
  box-shadow: var(--shadow-luxury);
  position: relative;
}

.tier-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-linen);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.tier-card .price {
  text-shadow: 0 1px 2px rgba(184, 147, 90, 0.08);
}

/*
 * 3. TIER HEADER GOLD ACCENT LINES — Shimmer
 *    Override background to gold shimmer gradient; add soft glow.
 */
.tier-header h3::after {
  background: var(--gold-shimmer);
  box-shadow: 0 0 6px rgba(184, 147, 90, 0.08);
}

/*
 * 4. TESTIMONIAL CARDS — Refined Left Border + Decorative Quote Mark
 *    Gradient left border, gold edge glow, faint opening-quote ornament,
 *    author name shimmer.
 */
.testimonial-card {
  border-left: 3px solid;
  border-image: linear-gradient(to bottom, var(--lux-gold), var(--lux-gold-light)) 1;
  box-shadow: var(--shadow-luxury);
  position: relative;
  overflow: visible;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 20px;
  background: linear-gradient(to right, rgba(184, 147, 90, 0.06), transparent);
  pointer-events: none;
  z-index: 0;
}

.testimonial-card::after {
  content: '\201C';
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: rgba(184, 147, 90, 0.07);
  pointer-events: none;
  z-index: 0;
}

.testimonial-card .author {
  background: var(--gold-shimmer);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/*
 * 5. PROFESSIONAL TESTIMONIAL CARDS — Elevated Shadow
 */
.professional-testimonial {
  box-shadow: var(--shadow-luxury);
}

/*
 * 6. MOBILE RESPONSIVE — Card Polish
 *    768px: disable textures, simplify shadows, reduce quote size.
 *    480px: hide decorative elements entirely.
 */
@media (max-width: 768px) {
  .pricing-card::before,
  .tier-card::before {
    display: none;
  }

  .pricing-card,
  .tier-card,
  .testimonial-card,
  .professional-testimonial {
    box-shadow: var(--shadow-soft);
  }

  .testimonial-card::after {
    font-size: 3rem;
    opacity: 0.7;
  }
}

@media (max-width: 480px) {
  .testimonial-card::after {
    display: none;
  }

  .testimonial-card::before {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LUXURY POLISH: FOOTER, BUTTONS & FINE DETAILS
   Rule: Append-only — do NOT modify existing rules above this line.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Footer Noise Texture ─── */

.site-footer {
  position: relative;
}

.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-noise);
  background-repeat: repeat;
  opacity: 0.03;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* ─── 2. Enhanced Footer Gold Line ─── */

.site-footer::before {
  height: 2px;
  background: var(--gold-shimmer);
  box-shadow: 0 0 8px rgba(184, 147, 90, 0.12), 0 0 20px rgba(184, 147, 90, 0.06);
}

/* ─── 3. Footer Text Color Temperature ─── */

.footer-method h2 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.footer-bottom {
  opacity: 0.7;
}

/* ─── 4. Button Gold Shimmer ─── */

.cta-buttons .btn {
  border-image: var(--gold-shimmer) 1;
  box-shadow: 0 1px 3px rgba(184, 147, 90, 0.08);
}

.cta-buttons .btn:hover {
  box-shadow: 0 4px 20px rgba(184, 147, 90, 0.20), 0 0 12px rgba(184, 147, 90, 0.10);
}

/* ─── 5. Custom Scrollbar Enhancement ─── */

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c9a86c, #b8935a, #c9a86c);
}

/* ─── 6. Text Selection Deepening ─── */

::selection {
  background-color: #dfc99a;
}

::-moz-selection {
  background-color: #dfc99a;
}

/* ─── 7. Mobile Responsive ─── */

@media (max-width: 768px) {
  .site-footer::after {
    display: none;
  }

  .cta-buttons .btn {
    border-image: none;
    border: 1.5px solid var(--lux-gold, #b8935a);
  }
}


/* ═══════════════════════════════════════════════════════════════
   CLIENT REFINEMENT — Tagline, Static Cards, Darker Gray Text
   Rule: Append-only — do NOT modify existing rules above.
   ═══════════════════════════════════════════════════════════════ */

/*
 * 1. DARKEN GRAY TEXT — 50% toward black
 *    Previous: #6b6560 (RGB 107,101,96)
 *    New:      #363330 (RGB 54,51,48) — midpoint to black
 *    Affects: .pricing-note, .tier-header p, .pricing-card .duration,
 *    .tier-card .duration, .professional-testimonial .author-title,
 *    .video-caption, and all other --lux-warm-gray consumers.
 */
:root {
  --lux-warm-gray: #363330;
}

/*
 * 2. METHOD TAGLINE — More prominent
 *    "Bespoke therapeutic bodywork." gets lost at 1.1rem italic.
 *    Bump size, weight, and tracking for commanding presence.
 */
.method-tagline {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/*
 * 3. REMOVE NON-LINK HOVER ANIMATIONS
 *    Only real links (<a>) and buttons should respond to hover.
 *    Override hover values to match their default (non-hover) states.
 *    Do NOT use transition:none — it would break .reveal scroll animations.
 *    Note: .therapist-portrait:hover img KEPT per client request.
 */

/* Testimonial cards — hover matches default */
.testimonial-card:hover {
  border-left-color: var(--lux-gold-light);
  box-shadow: var(--shadow-luxury);
}

/* Professional testimonials — hover matches default */
.professional-testimonial:hover {
  box-shadow: var(--shadow-luxury);
  border-left-color: transparent;
}

/* Pricing/tier cards — sync hover shadow to luxury polish base */
.pricing-card:hover,
.tier-card:hover {
  box-shadow: var(--shadow-luxury);
}

/* Method section image — no zoom on hover */
.method-image:hover img {
  transform: none;
}

/* Gift card image — no zoom on hover */
.giftcard-image:hover img {
  transform: none;
}

/* Resource cards (training) — no lift or shadow change */
.resource-card:hover {
  box-shadow: var(--shadow-soft);
  transform: none;
}

/* Course modules (training) — no border or shadow change */
.course-module:hover {
  border-color: inherit;
  box-shadow: none;
}

/* Pillar cards (welcome-to-wholeness) — hover matches default */
.pillar-card:hover {
  box-shadow: var(--shadow-luxury);
}


/* ═══════════════════════════════════════════════════════════════
   CONTRAST & READABILITY PASS
   Rule: Append-only. Do NOT modify existing rules above.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────
   CHANGE 2: DARKEN ALL GRAY TEXT — 90% toward black
   All text should read as near-black with faint warm undertone.
   ───────────────────────────────────────────────── */
:root {
  --lux-warm-gray: #1e1c1a;
}

/* Override hardcoded hex grays site-wide */
.pricing-header p,
.memberships-header p,
.tier-header p,
.praise-header p,
.footer-service-areas,
.appointment-box p {
  color: #0f0d0b;
}

.footer-service-tags {
  color: #1a1715;
}

.footer-bottom {
  color: #1e1b18;
}

.footer-bottom a {
  color: #0f0d0b;
}

.testimonial-card .author,
.professional-testimonial .author-title,
.video-caption {
  color: #151210;
}

.pricing-note,
.membership-payment-note {
  color: #1e1c1a;
}

.membership-benefits li::before {
  color: #1e1b18;
}

/* ─────────────────────────────────────────────────
   CHANGE 3: BRIGHTEN LIGHT BACKGROUNDS — push toward white
   Warmth stays, but 40-50% closer to pure white.
   ───────────────────────────────────────────────── */
:root {
  --lux-cream: #fcfbf9;
  --lux-warm-white: #fefefe;
  --lux-blush: #f9f5f1;
  --lux-blush-deep: #f2ece5;
}

/* Override memberships background (was #F3F0ED) */
.memberships-section {
  background: #f7f4f1;
}

/* ─────────────────────────────────────────────────
   CHANGE 5: NAVIGATION LINKS — more presence
   Bolder active state, slightly larger, more letter-spacing.
   ───────────────────────────────────────────────── */

/* Desktop nav links: slightly larger + more letter-spacing */
.main-nav-bar .nav-links a {
  font-size: 0.78rem;
  letter-spacing: 0.20em;
}

/* Active page state: visibly bolder */
.main-nav-bar .nav-links a.active,
.main-nav-bar .nav-links a[aria-current="page"] {
  font-weight: 600;
  color: #ffffff;
}

/* Active underline: thicker + brighter gold */
.main-nav-bar .nav-links a.active::after,
.main-nav-bar .nav-links a[aria-current="page"]::after {
  height: 2.5px;
  background: #c9a959;
  width: 70%;
}

/* Hover underline: also slightly thicker */
.main-nav-bar .nav-links a:hover::after {
  height: 2px;
}

/* Hover state: clearer color shift to gold */
.main-nav-bar .nav-links a:hover {
  color: #d4c4a0;
}

/* Mobile dropdown: bolder active treatment */
@media (max-width: 768px) {
  .main-nav-bar .nav-links a.active,
  .main-nav-bar .nav-links a[aria-current="page"] {
    font-weight: 600;
    background: rgba(184, 147, 90, 0.18);
  }

  .main-nav-bar .nav-links a {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
  }
}

/* Tablet adjustment */
@media (max-width: 1024px) {
  .main-nav-bar .nav-links a {
    font-size: 0.73rem;
    letter-spacing: 0.14em;
  }
}

/* ─────────────────────────────────────────────────
   CHANGE 6: PLAYFAIR DISPLAY ITALIC NOTES — size bump
   All Playfair + italic text bumped ~1pt (0.9rem → 0.95rem).
   ───────────────────────────────────────────────── */
.pricing-note,
.membership-payment-note {
  font-size: 0.95rem;
}

/* ─────────────────────────────────────────────────
   CHANGE 1 (partial): Payment note prominence
   Membership payment note gets equal or greater visual weight.
   ───────────────────────────────────────────────── */
.membership-payment-note {
  font-size: 0.98rem;
  font-weight: 500;
  border-left: 3px solid var(--lux-gold, #b8935a);
  padding-left: 16px;
}

/* ─────────────────────────────────────────────────
   CHANGE 4: EXPERIENCE PAGE — appointment section
   Larger text, darker color, more prominent phone.
   ───────────────────────────────────────────────── */
.experience-appointment .appointment-box h3 {
  font-size: 0.95rem;
}

.experience-appointment .appointment-box p {
  font-size: 0.9rem;
  color: #0f0d0b;
}

.experience-appointment .appointment-box .phone {
  font-size: 1.35rem;
  color: #0f0d0b;
}

.experience-appointment .appointment-box .phone a {
  color: #0f0d0b;
}

/* ─────────────────────────────────────────────────
   Responsive overrides for contrast pass
   ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pricing-note,
  .membership-payment-note {
    font-size: 0.85rem;
  }

  .membership-payment-note {
    padding-left: 12px;
  }
}

/* ═══════════════════════════════════════════════════
   FINAL PRODUCTION AUDIT — 2026-02-08
   Rule: Append-only. Do NOT modify existing rules above.
   ═══════════════════════════════════════════════════ */

/* ─── FIX 1: Kill hover on non-clickable cards ─────
   pointer-events:none prevents :hover from ever activating.
   No hover = no animation. No specificity wars with .reveal.
   Scroll-reveal unaffected (IntersectionObserver != pointer events).
   NOTE: .pricing-card excluded — now <a> links to booking page.
   ──────────────────────────────────────────────────── */

.tier-card,
.testimonial-card,
.professional-testimonial {
  pointer-events: none;
}

/* Pricing cards are now <a> links — subtle luxury hover feedback */
a.pricing-card {
  display: block;
  cursor: pointer;
}

/* Hover transition activates only AFTER scroll-reveal completes.
   .revealed is added by JS IntersectionObserver, so the 0.8s scroll
   entrance runs uninterrupted, then this snappier timing takes over. */
a.pricing-card.revealed {
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

a.pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(44,40,37,0.07),
              0 8px 20px rgba(44,40,37,0.06),
              0 12px 36px rgba(44,40,37,0.05),
              0 20px 56px rgba(44,40,37,0.04);
}

@media (max-width: 768px) {
  a.pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 24px rgba(44,40,37,0.09);
  }
}

/* ─── FIX 2: Footer text readability on dark background ─────
   The contrast pass (line ~6222) set dark text colors (#0f0d0b,
   #1a1715) on footer elements that sit on the dark charcoal
   footer background (#2c2825). This made text invisible.
   Restoring light-on-dark colors for all footer text.
   Service tags bumped from 0.45 to 0.6 opacity per client request.
   ──────────────────────────────────────────────────────────── */

.footer-service-tags {
  color: rgba(250, 248, 245, 0.6);
}

.footer-service-areas {
  color: rgba(250, 248, 245, 0.6);
}

.footer-bottom {
  color: rgba(250, 248, 245, 0.5);
}

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