/* ==========================================================================
   STRICT ZERO-HORIZONTAL-SWIPE PROTECTION (Mobile & Desktop)
   Uses overflow-x: clip so horizontal scroll is eliminated without breaking position: sticky
   ========================================================================== */
html {
  overflow-x: clip !important;
  max-width: 100% !important;
  width: 100% !important;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  touch-action: pan-y !important;
}

main {
  overflow: visible !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Treatment Suites & Master Navigation Persistent Sticky Sidebar:
   Stays in the side consistently and scrolls up naturally when the section ends */
@media (min-width: 1024px) {
  .lume-sticky-sidebar,
  aside.lg\:sticky,
  aside[class*="lg:sticky"],
  aside[class*="sticky"] {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 6.5rem !important;
    align-self: start !important;
    height: fit-content !important;
    z-index: 20;
  }

  /* Fallback scroll solely for ultra-short laptop screens where content exceeds vertical viewport */
  @media (max-height: 720px) {
    .lume-sticky-sidebar,
    aside.lg\:sticky,
    aside[class*="lg:sticky"],
    aside[class*="sticky"] {
      max-height: calc(100vh - 7rem) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
    }
  }
}

/* LUMÉ AESTHETICS REIMAGINED — BESPOKE EDITORIAL LUXURY STYLESHEET */

:root {
  --radius: 0px;
  /* Dusty Pink Walls, Rose Gold Logos/Accents & Pure White Furniture */
  --background: #FAF5F3;
  --foreground: #2A2124;
  --card: #FFFFFF;
  --card-foreground: #2A2124;
  --popover: #FFFFFF;
  --popover-foreground: #2A2124;
  --primary: #B76E79;
  --primary-foreground: #FFFFFF;
  --secondary: #F4E8E5;
  --secondary-foreground: #2A2124;
  --muted: #EFE2DF;
  --muted-foreground: #7D6F73;
  --accent: #E8C5C8;
  --accent-foreground: #2A2124;
  --destructive: #D9485C;
  --destructive-foreground: #FFFFFF;
  --border: rgba(183, 110, 121, 0.22);
  --input: rgba(183, 110, 121, 0.35);
  --ring: #B76E79;
  
  /* Brand Tokens */
  --rose-gold: #B76E79;
  --rose-gold-light: #E7B2A9;
  --rose-gold-dark: #8F4954;
  --dusty-pink: #E8C5C8;
  --dusty-pink-soft: #FAF5F3;
  --dusty-pink-wall: #F0DFDA;
  --plum-noir: #201317;

  /* Editorial Haute Typography Fonts */
  --font-display: "Playfair Display", "Bodoni Moda", "Italiana", serif;
  --font-serif: "Playfair Display", "Bodoni Moda", "Italiana", serif;
  --font-sans: "Plus Jakarta Sans", "Syne", system-ui, -apple-system, sans-serif;
  
  /* Backwards compatibility aliases seamlessly mapped to Rose Gold & Cream */
  --copper: #B76E79;
  --copper-dark: #8F4954;
  --copper-light: #E7B2A9;
  --champagne: #F5EAE7;
  --obsidian: #201317;
  --travertine: #FFFFFF;
  --cashmere: #F4E8E5;
  --sand-light: #FAF5F3;
  --sand-medium: #F0DFDA;
  --stone-dark: #2A2124;
}

.dark {
  /* Ultra-luxury Obsidian Plum Noir Palette */
  --background: #120A0E;
  --foreground: #FAF4F2;
  --card: #1C1116;
  --card-foreground: #FAF4F2;
  --popover: #1C1116;
  --popover-foreground: #FAF4F2;
  --primary: #E7B2A9;
  --primary-foreground: #120A0E;
  --secondary: #27161F;
  --secondary-foreground: #FAF4F2;
  --muted: #22131B;
  --muted-foreground: #B8A6AB;
  --accent: #B76E79;
  --accent-foreground: #FAF4F2;
  --destructive: #E5484D;
  --destructive-foreground: #FAF4F2;
  --border: rgba(231, 178, 169, 0.2);
  --input: rgba(231, 178, 169, 0.28);
  --ring: #E7B2A9;

  --rose-gold: #E7B2A9;
  --rose-gold-light: #F2D2CB;
  --rose-gold-dark: #B76E79;
  --dusty-pink: #2F1A24;
  --dusty-pink-soft: #180E13;
  --dusty-pink-wall: #1C1116;
  --plum-noir: #0D0709;
  --champagne: #2A1821;
  --obsidian: #0D0709;
  --travertine: #1C1116;
  --cashmere: #27161F;
  --sand-light: #180E13;
  --sand-medium: #1C1116;
  --stone-dark: #FAF4F2;

  --copper: #E7B2A9;
  --copper-light: #F2D2CB;
  --copper-dark: #B76E79;
}


@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: 'DM Sans', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  html {
    scroll-behavior: smooth;
  }

  a {
    transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
  }

  .font-display {
    font-family: var(--font-display) !important;
  }
  .font-serif {
    font-family: var(--font-serif) !important;
  }
  .font-sans {
    font-family: var(--font-sans) !important;
  }

  /* Luxury Fine Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: #FAF5F3;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-rose-gold);
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-rose-gold-dark);
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-rose-gold) #FAF5F3;
  }

  html.dark ::-webkit-scrollbar-track,
  .dark ::-webkit-scrollbar-track {
    background: #120A0E;
  }
  html.dark ::-webkit-scrollbar-thumb,
  .dark ::-webkit-scrollbar-thumb {
    background: #E7B2A9;
  }
  html.dark ::-webkit-scrollbar-thumb:hover,
  .dark ::-webkit-scrollbar-thumb:hover {
    background: #F2D2CB;
  }
  html.dark *,
  .dark * {
    scrollbar-color: #E7B2A9 #120A0E;
  }
}

/* Haute Editorial Utility Classes */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8F4954;
  display: inline-flex;
  align-items: center;
}

.gold-gradient-text,
.rose-gold-gradient-text {
  background: linear-gradient(135deg, #682230 0%, #8F4954 30%, #A35260 60%, #682230 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sensory-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #FFFFFF;
  border: 1px solid rgba(183, 110, 121, 0.4);
  color: var(--color-rose-gold);
  box-shadow: 0 4px 12px rgba(183, 110, 121, 0.1);
}

.dark-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #FAF5F3;
  border: 1px solid rgba(183, 110, 121, 0.45);
  color: var(--color-rose-gold);
  font-family: var(--font-mono, monospace);
  box-shadow: 0 2px 8px rgba(183, 110, 121, 0.08);
}

.card-luxury {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(183, 110, 121, 0.2);
  box-shadow: 0 8px 24px -6px rgba(183, 110, 121, 0.08);
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-luxury:hover {
  border-color: var(--color-rose-gold);
  box-shadow: 0 20px 40px -15px rgba(183, 110, 121, 0.18);
  transform: translateY(-2px);
}

.hairline-b {
  border-bottom: 1px solid rgba(183, 110, 121, 0.2);
}
.hairline-t {
  border-top: 1px solid rgba(183, 110, 121, 0.2);
}

/* Haute Editorial Utility Classes in Dark Mode */
.dark .eyebrow {
  color: #E7B2A9;
}

.dark .gold-gradient-text,
.dark .rose-gold-gradient-text {
  background: linear-gradient(135deg, #F5D5CF 0%, #E7B2A9 35%, #F8E3DE 70%, #E7B2A9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .sensory-badge {
  background: #1C1116;
  border-color: rgba(231, 178, 169, 0.35);
  color: #E7B2A9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.dark .dark-pill-badge {
  background: #27161F;
  border-color: rgba(231, 178, 169, 0.35);
  color: #E7B2A9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.dark .card-luxury {
  background: #1C1116;
  border-color: rgba(231, 178, 169, 0.2);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
}
.dark .card-luxury:hover {
  border-color: #E7B2A9;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.8), 0 0 24px rgba(231, 178, 169, 0.15);
}

.dark .hairline-b {
  border-bottom-color: rgba(231, 178, 169, 0.2);
}
.dark .hairline-t {
  border-top-color: rgba(231, 178, 169, 0.2);
}

/* ==========================================================================
   Comprehensive Dark Mode Palette Adapters (Zero impact on Light Mode)
   ========================================================================== */
.dark {
  /* Surface backgrounds */
  & .bg-\[\#FAF5F3\],
  & .bg-\[\#FAF5F3\]\/50,
  & [class*="bg-[#FAF5F3]"] {
    background-color: #120A0E !important;
  }

  & .bg-white {
    background-color: #1C1116 !important;
  }
  & .bg-white\/95 {
    background-color: rgba(20, 11, 15, 0.94) !important;
  }
  & .bg-white\/90 {
    background-color: rgba(28, 17, 22, 0.9) !important;
  }
  & .bg-white\/80 {
    background-color: rgba(28, 17, 22, 0.8) !important;
  }
  & .bg-white\/70 {
    background-color: rgba(28, 17, 22, 0.7) !important;
  }

  & .bg-\[\#FAF0F0\],
  & .bg-\[\#FAF0F0\]\/70,
  & .bg-\[\#FDF8F7\],
  & .bg-\[\#F4E8E5\],
  & .bg-\[\#F0DFDA\],
  & .bg-\[\#EFE2DF\] {
    background-color: #27161F !important;
  }

  /* Ambient Glows */
  & .bg-\[\#E8C5C8\]\/40,
  & .bg-\[\#E8C5C8\]\/30,
  & .bg-\[\#E8C5C8\]\/20 {
    background-color: rgba(231, 178, 169, 0.1) !important;
  }

  /* Section Gradients */
  & .bg-gradient-to-b.from-\[\#FAF5F3\],
  & [class*="bg-gradient-to-b"][class*="from-[#FAF5F3]"] {
    background-image: linear-gradient(to bottom, #170D13, #1E1118 60%, #120A0E) !important;
  }
  & .bg-gradient-to-br.from-\[\#FAF5F3\] {
    background-image: linear-gradient(to bottom right, #24151C, #180D13) !important;
  }

  /* Typography */
  & .text-\[\#2A2124\],
  & .text-\[\#3A3033\],
  & [class*="text-[#3A3033]"] {
    color: #FAF4F2 !important;
  }
  & .text-\[\#5E5054\] {
    color: #D2C2C6 !important;
  }
  & .text-\[\#7A6B6E\],
  & .text-\[\#7D6F73\] {
    color: #A39297 !important;
  }
  & .text-\[\#8F4954\] {
    color: #E7B2A9 !important;
  }

  /* Hover states */
  & .hover\:text-\[\#8F4954\]:hover {
    color: #E7B2A9 !important;
  }
  & .hover\:text-\[\#682230\]:hover {
    color: #F2D2CB !important;
  }
  & .hover\:text-\[\#2A2124\]:hover {
    color: #FAF4F2 !important;
  }
  & .hover\:bg-\[\#FAF5F3\]:hover,
  & .hover\:bg-\[\#FAF0F0\]:hover,
  & .hover\:bg-\[\#FAF0F0\]\/70:hover,
  & .hover\:bg-\[\#FAF5F3\]\/50:hover,
  & .hover\:bg-white:hover {
    background-color: #2F1B25 !important;
  }

  /* Form Elements & Inputs */
  & input:not([type="checkbox"]):not([type="radio"]),
  & textarea,
  & select {
    background-color: #1C1116 !important;
    color: #FAF4F2 !important;
    border-color: rgba(231, 178, 169, 0.28) !important;
  }
  & input::placeholder,
  & textarea::placeholder {
    color: #8F7E84 !important;
  }
  & input:focus,
  & textarea:focus,
  & select:focus {
    border-color: #E7B2A9 !important;
    box-shadow: 0 0 0 1px rgba(231, 178, 169, 0.5) !important;
  }

  /* Outline Buttons on dark surfaces */
  & .border-\[\#8F4954\]\/40.bg-white,
  & .border-\[\#B76E79\]\/40.bg-white,
  & .border-\[\#B76E79\].bg-white {
    background-color: #23141C !important;
    color: #E7B2A9 !important;
    border-color: rgba(231, 178, 169, 0.35) !important;
  }
  & .border-\[\#8F4954\]\/40.bg-white:hover,
  & .border-\[\#B76E79\]\/40.bg-white:hover,
  & .border-\[\#B76E79\].bg-white:hover {
    background-color: #2F1B25 !important;
    color: #FAF4F2 !important;
    border-color: #E7B2A9 !important;
  }

  /* Borders */
  & [class*="border-[#B76E79]"] {
    border-color: rgba(231, 178, 169, 0.22);
  }

  /* ==========================================================================
     Preservation for Lighter Banner Sections in Dark Mode (e.g. AuroraGlow)
     Ensures text on lighter parts remains deep espresso plum (#2A2124),
     rich rose-gold gradient (Image 5 Considered Beauty), and crisp slate (#5E5054)
     ========================================================================== */
  & .lume-light-surface,
  & [data-surface="light"] {
    color: #2A2124 !important;

    /* Headings on light surfaces */
    & h1,
    & h2,
    & h3,
    & h4,
    & .font-display,
    & .text-\[\#2A2124\] {
      color: #2A2124 !important;
    }

    /* Paragraphs & subtext */
    & p,
    & .text-\[\#5E5054\] {
      color: #5E5054 !important;
    }

    /* Eyebrows, badges, and accents */
    & .eyebrow,
    & .text-\[\#8F4954\],
    & [class*="text-[#8F4954]"] {
      color: #8F4954 !important;
    }

    & .text-\[\#7A6B6E\],
    & .text-\[\#7D6F73\] {
      color: #7A6B6E !important;
    }

    & .text-\[\#B76E79\] {
      color: #B76E79 !important;
    }

    /* Rose-gold & Gold Gradient Text identical to Image 5 "Considered Beauty." */
    & .gold-gradient-text,
    & .rose-gold-gradient-text,
    & [class*="gold-gradient-text"],
    & [class*="rose-gold-gradient-text"] {
      background: linear-gradient(135deg, #682230 0%, #8F4954 30%, #A35260 60%, #682230 100%) !important;
      background-clip: text !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }

    /* ShinyText animated shine on light surfaces */
    & .animate-shine {
      background: linear-gradient(120deg, #682230 0%, #8F4954 30%, #B76E79 50%, #682230 80%, #8F4954 100%) !important;
      background-size: 200% 100% !important;
      background-clip: text !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }

    /* Badges & Pills on light surfaces */
    & .bg-white\/80,
    & .bg-white\/70,
    & [class*="bg-white/80"],
    & [class*="bg-white/70"],
    & .sensory-badge {
      background-color: rgba(255, 255, 255, 0.92) !important;
      color: #5E5054 !important;
      border-color: rgba(183, 110, 121, 0.35) !important;
      box-shadow: 0 2px 8px rgba(183, 110, 121, 0.1) !important;
    }

    & .bg-\[\#FAF5F3\],
    & [class*="bg-[#FAF5F3]"] {
      background-color: #FAF5F3 !important;
      color: #8F4954 !important;
    }

    /* Photo frames and cards on light surfaces (e.g. Clinician & Lookbook right frames) */
    & .bg-white {
      background-color: #FFFFFF !important;
      border-color: rgba(183, 110, 121, 0.3) !important;
    }

    /* RotatingBadge center button & SVG text fill on light surfaces */
    & a.bg-white,
    & button.bg-white,
    & div.bg-white {
      background-color: #FFFFFF !important;
      color: #8F4954 !important;
      border-color: rgba(183, 110, 121, 0.4) !important;
    }

    & svg text {
      fill: #8F4954 !important;
    }

    /* Outline callout buttons on light surfaces */
    & .border-\[\#B76E79\].bg-white,
    & .border-\[\#B76E79\]\/40.bg-white {
      background-color: #FFFFFF !important;
      color: #8F4954 !important;
      border-color: #B76E79 !important;
    }
    & .border-\[\#B76E79\].bg-white:hover,
    & .border-\[\#B76E79\]\/40.bg-white:hover {
      background-color: #FAF5F3 !important;
      color: #682230 !important;
      border-color: #8F4954 !important;
    }

    /* LiveSuiteClock on light surfaces */
    & .bg-white.text-\[\#2A2124\] {
      background-color: #FFFFFF !important;
      color: #2A2124 !important;
      border-color: rgba(183, 110, 121, 0.4) !important;
    }

    /* Hairlines and dividers */
    & .bg-\[\#B76E79\]\/40,
    & .bg-\[\#B76E79\]\/20 {
      background-color: rgba(183, 110, 121, 0.3) !important;
    }
    & .border-\[\#B76E79\]\/20,
    & .border-\[\#B76E79\]\/30 {
      border-color: rgba(183, 110, 121, 0.25) !important;
    }
  }
}


/* Luxury Keyframe Animations from lumeproject */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinSlowReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes jumpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes jumpReverseFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.08); }
}

@keyframes shine {
  0% { background-position: 100%; }
  100% { background-position: -100%; }
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}

@keyframes breathGlow {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.06); }
}

.animate-float-gentle {
  animation: floatGentle 6s ease-in-out infinite;
}

.animate-breath-glow {
  animation: breathGlow 8s ease-in-out infinite;
}

.animate-shine {
  animation: shine 4s linear infinite;
}

.animate-spin-slow {

  animation: spinSlow 20s linear infinite;
}

.animate-spin-reverse {
  animation: spinSlowReverse 25s linear infinite;
}

.animate-jump {
  animation: jumpFloat 4.5s ease-in-out infinite;
}

.animate-jump-reverse {
  animation: jumpReverseFloat 5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Rotating Circle Text SVG */
.circle-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
}

.circle-badge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spinSlow 18s linear infinite;
}

.circle-badge-btn {
  position: relative;
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #131211;
  color: #DFC29D;
  border: 1px solid rgba(181, 126, 82, 0.4);
  transition: all 0.3s ease;
}

.circle-badge-btn:hover {
  background: #B57E52;
  color: #FFFFFF;
  transform: scale(1.08);
}

/* Marquee Infinite Scroll */
@keyframes marqueeScroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

.font-serif-luxury {
  font-family: var(--font-serif);
}

.spotlight-glow {
  background: radial-gradient(circle at 50% 30%, rgba(181, 126, 82, 0.18), transparent 70%);
}

.spotlight-dark-glow {
  background: radial-gradient(circle at 50% 20%, rgba(223, 194, 157, 0.12), rgba(19, 18, 17, 0.95) 75%);
}

.glass-copper {
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(181, 126, 82, 0.25);
}

.glass-dark {
  background: rgba(19, 18, 17, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(223, 194, 157, 0.2);
}

@keyframes star-movement-bottom {
  0% { transform: translate(0%, 0%); opacity: 1; }
  100% { transform: translate(-100%, 0%); opacity: 0; }
}

@keyframes star-movement-top {
  0% { transform: translate(0%, 0%); opacity: 1; }
  100% { transform: translate(100%, 0%); opacity: 0; }
}

.animate-star-movement-bottom {
  animation: star-movement-bottom 4s linear infinite alternate;
}

.animate-star-movement-top {
  animation: star-movement-top 4s linear infinite alternate;
}

@keyframes aurora-mesh {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-aurora {
  background-size: 200% 200%;
  animation: aurora-mesh 14s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   HAUTE EDITORIAL SERVICES & PROTOCOLS MEGA MENU
   ========================================================================== */
/* ==========================================================================
   HAUTE EDITORIAL SERVICES & PROTOCOLS MEGA MENU
   ========================================================================== */
.services-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: -80px !important;
  transform: none !important;
  width: 850px !important;
  max-width: calc(100vw - 40px) !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(183, 110, 121, 0.3) !important;
  box-shadow: 0 25px 50px -12px rgba(42, 33, 36, 0.28) !important;
  z-index: 99999 !important;
  text-align: left !important;
  padding: 20px !important;
}

.dark .services-dropdown-menu {
  background: #1C1116 !important;
  border-color: rgba(231, 178, 169, 0.25) !important;
  color: #FAF4F2 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
}

#nav-services-menu:hover .services-dropdown-menu,
#nav-services-menu.is-open .services-dropdown-menu {
  display: block !important;
}

@media (max-width: 1024px) {
  .services-dropdown-menu {
    display: none !important;
  }
}

/* Mega Menu Header Tabs */
.services-dropdown-menu .js-mega-tab {
  border-radius: 0 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(183, 110, 121, 0.2) !important;
}

.services-dropdown-menu .js-mega-tab.is-active {
  background: #8F4954 !important;
  color: #FFFFFF !important;
  border-color: #8F4954 !important;
  box-shadow: 0 1px 3px rgba(143, 73, 84, 0.3) !important;
}

.dark .services-dropdown-menu .js-mega-tab.is-active {
  background: #8F4954 !important;
  color: #FAF4F2 !important;
  border-color: #8F4954 !important;
}

.services-dropdown-menu .js-mega-tab:not(.is-active) {
  background: #FAF5F3 !important;
  color: #5E5054 !important;
  border: 1px solid rgba(183, 110, 121, 0.2) !important;
}

.services-dropdown-menu .js-mega-tab:not(.is-active):hover {
  color: #8F4954 !important;
  background: #F5EAE6 !important;
}

.dark .services-dropdown-menu .js-mega-tab:not(.is-active) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(250, 244, 242, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark .services-dropdown-menu .js-mega-tab:not(.is-active):hover {
  color: #E7B2A9 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Header Action Buttons on the Right (Styled Identically to Tabs) */
.services-dropdown-menu .mega-header-btn {
  border-radius: 0 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  background: #FAF5F3 !important;
  color: #5E5054 !important;
  border: 1px solid rgba(183, 110, 121, 0.25) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.services-dropdown-menu .mega-header-btn:hover {
  color: #FFFFFF !important;
  background: #8F4954 !important;
  border-color: #8F4954 !important;
  box-shadow: 0 1px 3px rgba(143, 73, 84, 0.3) !important;
}

.dark .services-dropdown-menu .mega-header-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(250, 244, 242, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark .services-dropdown-menu .mega-header-btn:hover {
  color: #FAF4F2 !important;
  background: #8F4954 !important;
  border-color: #8F4954 !important;
}

/* Mega Menu Body Flex Layout */
.mega-menu-body {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.mega-tab-panel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.mega-tab-panel.hidden,
#mega-tab-categories.hidden,
#mega-tab-concerns.hidden {
  display: none !important;
}

#mega-tab-categories:not(.hidden) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#mega-tab-concerns:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Category Cards */
.mega-category-card {
  display: block !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(183, 110, 121, 0.18) !important;
  background: #FAF5F3 !important;
  text-decoration: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.mega-category-card:hover {
  background: #FFFFFF !important;
  border-color: #8F4954 !important;
  box-shadow: 0 4px 12px rgba(143, 73, 84, 0.08) !important;
}

.dark .mega-category-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(231, 178, 169, 0.15) !important;
}

.dark .mega-category-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #E7B2A9 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.mega-category-card h4 {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: #2A2124 !important;
  transition: color 0.2s ease !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.dark .mega-category-card h4 {
  color: #FAF4F2 !important;
}

.mega-category-card:hover h4 {
  color: #8F4954 !important;
}

.dark .mega-category-card:hover h4 {
  color: #E7B2A9 !important;
}

.mega-category-card p {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  margin: 3px 0 0 0 !important;
  color: #5E5054 !important;
  font-weight: 400 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dark .mega-category-card p {
  color: rgba(250, 244, 242, 0.65) !important;
}

.mega-card-badge {
  background: rgba(143, 73, 84, 0.1) !important;
  color: #8F4954 !important;
}

.dark .mega-card-badge {
  background: rgba(231, 178, 169, 0.15) !important;
  color: #E7B2A9 !important;
}

/* Concern Cards */
.mega-concern-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(183, 110, 121, 0.18) !important;
  background: #FAF5F3 !important;
  text-decoration: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.mega-concern-card:hover {
  background: #FFFFFF !important;
  border-color: #8F4954 !important;
}

.dark .mega-concern-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(231, 178, 169, 0.15) !important;
}

.dark .mega-concern-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #E7B2A9 !important;
}

/* Spotlight Feature Card (Right Column) */
.mega-spotlight-card {
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  padding: 18px !important;
  border: 1px solid rgba(183, 110, 121, 0.25) !important;
  background: linear-gradient(145deg, #FAF5F3 0%, #F0DFDA 100%) !important;
  overflow: hidden !important;
}

.mega-spotlight-card a:not(.mega-scrubber-link) {
  white-space: normal !important;
  word-break: break-word !important;
}

.mega-spotlight-card .mega-scrubber-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 10px !important;
  padding: 5px 8px !important;
  text-align: center !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #8F4954 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  text-decoration: none !important;
  border-radius: 3px !important;
  transition: all 0.2s ease !important;
}

.dark .mega-spotlight-card .mega-scrubber-link {
  color: #E7B2A9 !important;
}

.mega-spotlight-card .mega-scrubber-link:hover {
  color: #682230 !important;
  background: rgba(143, 73, 84, 0.08) !important;
  text-decoration: none !important;
}

.dark .mega-spotlight-card .mega-scrubber-link:hover {
  color: #FAF4F2 !important;
  background: rgba(231, 178, 169, 0.12) !important;
}

.mega-spotlight-card .mega-scrubber-link .scrubber-arrow {
  display: inline-block !important;
  font-size: 11px !important;
  line-height: 1 !important;
  transition: transform 0.2s ease !important;
}

.mega-spotlight-card .mega-scrubber-link:hover .scrubber-arrow {
  transform: translateX(3px) !important;
}

.dark .mega-spotlight-card {
  background: linear-gradient(145deg, #24151C 0%, #170E13 100%) !important;
  border-color: rgba(231, 178, 169, 0.22) !important;
}

.mega-spotlight-card h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #2A2124 !important;
  margin: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.dark .mega-spotlight-card h4 {
  color: #FAF4F2 !important;
}

.mega-spotlight-card p {
  font-size: 11px !important;
  line-height: 1.45 !important;
  margin-top: 6px !important;
  color: #5E5054 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.dark .mega-spotlight-card p {
  color: rgba(250, 244, 242, 0.7) !important;
}

.mega-spotlight-card .spotlight-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 36px !important;
  background: #8F4954 !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mega-spotlight-card .spotlight-btn:hover {
  background: #73313C !important;
}

/* ==========================================================================
   JOURNAL & BLOG FILTERS
   ========================================================================== */
.js-journal-filter {
  cursor: pointer;
  user-select: none;
}

.js-blog-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   HAUTE ATTENTION-GRABBING THEME TOGGLE & FLOATING CALLOUT
   ========================================================================== */
@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ==========================================================================
   FLOATING ATTENTION-GRABBER THEME TOGGLE & HEADER THEME TOGGLE
   Optimized for Every Screen Size (Mobile, Tablet, Laptop, Ultra-wide)
   ========================================================================== */

/* Floating bottom-right light/dark mode toggle completely removed as requested */
#lar-theme-toggle-container,
#lar-theme-callout,
#lar-callout-inner,
#lar-dark-mode-toggle,
.fixed.bottom-6.right-6 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Header Luxury Theme Switcher */
#lumeThemeToggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 9999px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  outline: none !important;
  touch-action: manipulation;
  flex-shrink: 0 !important;
}

#lumeThemeToggle:hover {
  transform: translateY(-1px) scale(1.02) !important;
}

#lumeThemeToggle:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ==========================================================================
   PRIMARY NAVIGATION & HEADER RESPONSIVE ENGINE (OPTIMIZED FOR EVERY SCREEN)
   ========================================================================== */

/* Header actions group (Theme toggle, Book button, Hamburger) */
.header-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
@media (min-width: 640px) {
  .header-actions-group {
    gap: 8px !important;
  }
}
@media (min-width: 1024px) {
  .header-actions-group {
    gap: 10px !important;
  }
}
@media (min-width: 1280px) {
  .header-actions-group {
    gap: 14px !important;
  }
}

/* Primary Desktop Navigation Bar */
nav[aria-label="Primary navigation"],
.primary-nav-menu {
  display: none !important;
  align-items: center !important;
  white-space: nowrap !important;
}

@media (min-width: 1024px) {
  nav[aria-label="Primary navigation"],
  .primary-nav-menu {
    display: flex !important;
  }
}

/* 1024px to 1149px: Compact laptop / 13-inch screens */
@media (min-width: 1024px) and (max-width: 1149px) {
  nav[aria-label="Primary navigation"],
  .primary-nav-menu {
    gap: 10px !important;
  }
  nav[aria-label="Primary navigation"] a,
  nav[aria-label="Primary navigation"] button,
  .primary-nav-menu a,
  .primary-nav-menu button {
    font-size: 9px !important;
    letter-spacing: 0.10em !important;
    white-space: nowrap !important;
  }
}

/* 1150px to 1279px: Standard 13-14 inch laptops */
@media (min-width: 1150px) and (max-width: 1279px) {
  nav[aria-label="Primary navigation"],
  .primary-nav-menu {
    gap: 14px !important;
  }
  nav[aria-label="Primary navigation"] a,
  nav[aria-label="Primary navigation"] button,
  .primary-nav-menu a,
  .primary-nav-menu button {
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }
}

/* 1280px to 1439px: Standard 15-inch laptops & 1080p monitors */
@media (min-width: 1280px) and (max-width: 1439px) {
  nav[aria-label="Primary navigation"],
  .primary-nav-menu {
    gap: 18px !important;
  }
  nav[aria-label="Primary navigation"] a,
  nav[aria-label="Primary navigation"] button,
  .primary-nav-menu a,
  .primary-nav-menu button {
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap !important;
  }
}

/* 1440px+: Wide screens & high-resolution displays */
@media (min-width: 1440px) {
  nav[aria-label="Primary navigation"],
  .primary-nav-menu {
    gap: 24px !important;
  }
  nav[aria-label="Primary navigation"] a,
  nav[aria-label="Primary navigation"] button,
  .primary-nav-menu a,
  .primary-nav-menu button {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
  }
}

/* Header Book Appointment Button responsiveness */
.header-book-btn {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 639px) {
  .header-book-btn {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.10em !important;
  }
}
@media (min-width: 640px) and (max-width: 1279px) {
  .header-book-btn {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
  }
}
@media (min-width: 1280px) {
  .header-book-btn {
    height: 42px !important;
    padding: 0 24px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
}

/* Header Hamburger Button responsiveness */
.header-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
}
@media (min-width: 640px) {
  .header-menu-btn {
    width: 38px !important;
    height: 38px !important;
  }
}
@media (min-width: 1024px) {
  .header-menu-btn {
    display: none !important;
  }
}

/* Header Theme Toggle Label: default hidden, visible on >= 1150px */
.js-header-theme-label {
  display: none !important;
}

/* Mobile Phones (< 640px) */
@media (max-width: 639px) {
  #lar-theme-toggle-container {
    bottom: 14px !important;
    right: 12px !important;
  }
  #lar-theme-callout {
    display: none !important;
  }
  #lar-dark-mode-toggle {
    height: 38px !important;
    padding: 0 11px !important;
    gap: 7px !important;
    box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.28) !important;
  }
  #lar-dark-mode-toggle .js-theme-pill-subtitle {
    display: none !important;
  }
  #lar-dark-mode-toggle .js-theme-pill-title {
    font-size: 8.5px !important;
    letter-spacing: 0.12em !important;
  }
  #lar-dark-mode-toggle .sun-icon,
  #lar-dark-mode-toggle .moon-icon {
    width: 15px !important;
    height: 15px !important;
  }
  .lar-radar-ring-outer {
    inset: -6px !important;
  }

  /* Compact Header Icon Toggle on Mobile */
  #lumeThemeToggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .js-header-theme-label {
    display: none !important;
  }
}

/* Tablets and Compact Laptops (640px to 1149px) */
@media (min-width: 640px) and (max-width: 1149px) {
  #lar-theme-toggle-container {
    bottom: 20px !important;
    right: 20px !important;
  }
  #lar-dark-mode-toggle {
    height: 42px !important;
    padding: 0 14px !important;
    gap: 8px !important;
  }
  #lumeThemeToggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .js-header-theme-label {
    display: none !important;
  }
}

/* Standard Laptops (1150px to 1359px): Luxury Pill with PORCELAIN / NOIR Label */
@media (min-width: 1150px) and (max-width: 1359px) {
  #lumeThemeToggle {
    width: auto !important;
    min-width: unset !important;
    height: 38px !important;
    padding: 0 12px !important;
    gap: 6px !important;
    border-radius: 9999px !important;
  }
  .js-header-theme-label {
    display: inline-block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  }
}

/* Wide Desktops & Ultra-wides (>= 1360px): Full Luxury Pill */
@media (min-width: 1360px) {
  #lumeThemeToggle {
    width: auto !important;
    min-width: unset !important;
    height: 42px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    border-radius: 9999px !important;
  }
  .js-header-theme-label {
    display: inline-block !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  }
}

/* Official luxury logo dimensions across all viewports */
.header-logo {
  height: 40px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block;
}

@media (min-width: 640px) {
  .header-logo {
    height: 44px !important;
    max-height: 48px !important;
    max-width: 210px !important;
  }
}

@media (min-width: 1280px) {
  .header-logo {
    height: 48px !important;
    max-height: 52px !important;
    max-width: 240px !important;
  }
}

html.dark .header-logo-light {
  display: none !important;
}
html:not(.dark) .header-logo-light {
  display: block !important;
}
html.dark .header-logo-dark {
  display: block !important;
  filter: drop-shadow(0 1px 8px rgba(231, 178, 169, 0.25));
}
html:not(.dark) .header-logo-dark {
  display: none !important;
}

/* Master Footer Rose Gold Logo */
.footer-logo {
  filter: drop-shadow(0 2px 10px rgba(231, 178, 169, 0.22));
}

/* Radar ping and beacon dots */
.lar-radar-ring-outer {
  position: absolute;
  inset: -10px;
  border-radius: 9999px;
  pointer-events: none;
  opacity: 0.35;
  background: #B76E79;
  animation: ping 3.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dark .lar-radar-ring-outer {
  background: #E7B2A9;
}

.lar-radar-ring-inner {
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  pointer-events: none;
  opacity: 0.5;
  filter: blur(4px);
  background: rgba(143, 73, 84, 0.25);
  animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.dark .lar-radar-ring-inner {
  background: rgba(231, 178, 169, 0.3);
}

/* Sun and Moon icon visibility rules across the entire theme */
html:not(.dark) .sun-icon {
  display: none !important;
}
html:not(.dark) .moon-icon {
  display: inline-block !important;
}
html.dark .sun-icon {
  display: inline-block !important;
}
html.dark .moon-icon {
  display: none !important;
}

/* =====================================================
   Image Overlay Text — Always White (Light & Dark Mode)
   ===================================================== */
/* Force overlay text on hero/card images to always be white */
.bg-gradient-to-t.from-black\/80 p,
.bg-gradient-to-t.from-black\/80 span,
.bg-gradient-to-t p.text-white,
.bg-gradient-to-t span.text-white {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* =====================================================
   Dark Mode — Team Page & General Content Text Fixes
   ===================================================== */

/* === ALWAYS preserve white text (image overlays, buttons, etc.) === */
html.dark .text-white,
html.dark .text-white * {
  color: #ffffff !important;
}

/* Card & section backgrounds */
html.dark .bg-white {
  background-color: #1A1118 !important;
}
/* Exclude gradient overlay divs from bg-white override */
html.dark .bg-gradient-to-t,
html.dark [class*="from-black"],
html.dark [class*="via-black"] {
  background-color: transparent !important;
}
html.dark .bg-white\/90,
html.dark .bg-white\/95 {
  background-color: rgba(26, 17, 24, 0.95) !important;
}
/* Make body text readable in dark mode */
html.dark .text-\[\#2A2124\],
html.dark .text-\[\#5E5054\],
html.dark .text-\[\#7D6B70\] {
  color: #EDE0DD !important;
}
html.dark .text-\[\#2A2124\] h1,
html.dark .text-\[\#2A2124\] h2,
html.dark .text-\[\#2A2124\] h3,
html.dark h1.text-\[\#2A2124\],
html.dark h2.text-\[\#2A2124\],
html.dark h3.text-\[\#2A2124\] {
  color: #F5EBE8 !important;
}
/* ==========================================================================
   HAUTE EDITORIAL DARK MODE SYSTEM REFINEMENT
   Refined Dark Mode Aesthetics: Obsidian Plum, Rose-Gold Luminescence & Glassmorphism
   ========================================================================== */

/* 1. Eliminate unintended background fills on border utility classes & dividers */
html.dark [class*="border-b"],
html.dark [class*="border-t"],
html.dark [class*="border-y"],
html.dark .border-b,
html.dark .border-t,
html.dark .border-y {
  background-color: transparent !important;
}

html.dark [class*="border-[#B76E79]/20"],
html.dark [class*="border-[#B76E79]/15"],
html.dark [class*="border-[#B76E79]/25"],
html.dark [class*="border-[#B76E79]/30"],
html.dark [class*="border-[#B76E79]/40"] {
  border-color: rgba(231, 178, 169, 0.18) !important;
}

/* Ensure divider strips and section headers remain completely transparent */
html.dark .border-b.border-\[\#B76E79\]\/20,
html.dark div:has(> .js-gallery-filter),
html.dark div:has(> .js-journal-filter),
html.dark div:has(> h3.font-display) {
  background-color: transparent !important;
}

/* 2. Refined Card & Stage Backgrounds */
html.dark .shadow-soft-card,
html.dark .card-luxury {
  background: linear-gradient(145deg, #1C1117 0%, #140A0F 100%) !important;
  border-color: rgba(231, 178, 169, 0.18) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.75), 0 0 1px rgba(231, 178, 169, 0.12) !important;
}

html.dark .shadow-soft-card:hover,
html.dark .card-luxury:hover {
  border-color: rgba(231, 178, 169, 0.4) !important;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(183, 110, 121, 0.18) !important;
}

/* 3. Lookbook / Gallery Filter Tabs (.js-gallery-filter) — Exact Light Mode Rectangular Structure */
html.dark .js-gallery-filter {
  border-radius: 0 !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

html.dark .js-gallery-filter:not(.is-active) {
  background-color: #1C1116 !important;
  background: #1C1116 !important;
  color: #FAF4F2 !important;
  border: 1px solid rgba(231, 178, 169, 0.25) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark .js-gallery-filter:not(.is-active):hover {
  background-color: #281720 !important;
  background: #281720 !important;
  color: #FFFFFF !important;
  border-color: #E7B2A9 !important;
}

html.dark .js-gallery-filter.is-active {
  background-color: #B76E79 !important;
  background: #B76E79 !important;
  color: #FFFFFF !important;
  border: 1px solid #B76E79 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* 4. Journal / Blog Filter Tabs (.js-journal-filter) — Exact Light Mode Rectangular Structure */
html.dark .js-journal-filter {
  border-radius: 0 !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

html.dark .js-journal-filter:not(.bg-\[\#B76E79\]):not([class*="bg-[#B76E79]"]) {
  background-color: #1C1116 !important;
  background: #1C1116 !important;
  color: #FAF4F2 !important;
  border: 1px solid rgba(231, 178, 169, 0.25) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark .js-journal-filter:not(.bg-\[\#B76E79\]):not([class*="bg-[#B76E79]"]):hover {
  background-color: #281720 !important;
  background: #281720 !important;
  color: #FFFFFF !important;
  border-color: #E7B2A9 !important;
}

html.dark .js-journal-filter.bg-\[\#B76E79\],
html.dark .js-journal-filter[class*="bg-[#B76E79]"] {
  background-color: #B76E79 !important;
  background: #B76E79 !important;
  color: #FFFFFF !important;
  border: 1px solid #B76E79 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* ─── DARK MODE ROOT FIX ────────────────────────────────────────────────────
   The body always has bg-[#FAF5F3] (cream). In dark mode its background must
   also be dark so it cannot bleed through beside or around the fixed header. */
html.dark,
html.dark body {
  background-color: #12090E !important;
  color: #FAF4F2 !important;
}

/* Top Navigation Bar in Dark Mode: Solid Luxury Dark, Never Glassy */
html.dark header,
html.dark header.fixed,
html.dark header[class*="fixed"],
body.dark header {
  background: #12090E !important;
  background-color: #12090E !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(231, 178, 169, 0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
}

/* Announcement Ribbon inside Header */
html.dark header > div:first-child,
html.dark header .bg-\[\#FAF5F3\] {
  background: #190E14 !important;
  background-color: #190E14 !important;
  border-bottom: 1px solid rgba(231, 178, 169, 0.12) !important;
  color: #D6C2C7 !important;
}

html.dark header > div:first-child span.font-bold,
html.dark header > div:first-child a {
  color: #E7B2A9 !important;
}

/* Header main row */
html.dark header > div:nth-child(2) {
  background: #12090E !important;
  background-color: #12090E !important;
}

/* Primary Nav Menu in Dark Mode */
html.dark header nav.primary-nav-menu a,
html.dark header nav.primary-nav-menu button,
html.dark header nav a,
html.dark header nav button {
  color: #FAF4F2 !important;
}

html.dark header nav.primary-nav-menu a:hover,
html.dark header nav.primary-nav-menu button:hover,
html.dark header nav a:hover,
html.dark header nav button:hover,
html.dark header nav a.active,
html.dark header nav a[data-status="active"],
html.dark header nav a.text-\[\#8F4954\],
html.dark header nav a[class*="text-[#8F4954]"] {
  color: #E7B2A9 !important;
}

/* Mega menu dropdown in dark mode */
html.dark .services-dropdown-menu,
html.dark #servicesMegaMenu,
html.dark header .services-dropdown-menu {
  background: #160D13 !important;
  background-color: #160D13 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(231, 178, 169, 0.25) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9) !important;
}

/* Top Nav Theme Switcher in Dark Mode */
html.dark #lumeThemeToggle {
  background: #1E1218 !important;
  border-color: rgba(231, 178, 169, 0.35) !important;
  color: #E7B2A9 !important;
}

html.dark #lumeThemeToggle:hover {
  border-color: #E7B2A9 !important;
  box-shadow: 0 0 12px rgba(231, 178, 169, 0.3) !important;
}

/* Hide floating bottom-right light/dark mode toggle completely */
#lar-theme-toggle-container,
#lar-theme-callout,
#lar-dark-mode-toggle,
.fixed.bottom-6.right-6 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}


/* 5. Treatments Page Search Bar, Download Link & Category Pills */
html.dark input[placeholder*="Search treatments"] {
  background: rgba(18, 10, 14, 0.85) !important;
  border: 1px solid rgba(231, 178, 169, 0.28) !important;
  color: #FAF4F2 !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

html.dark input[placeholder*="Search treatments"]::placeholder {
  color: rgba(214, 194, 199, 0.55) !important;
}

html.dark input[placeholder*="Search treatments"]:focus {
  border-color: #E7B2A9 !important;
  box-shadow: 0 0 14px rgba(231, 178, 169, 0.35), inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

html.dark a[href*="Brochure.pdf"] {
  color: #E7B2A9 !important;
}

html.dark a[href*="Brochure.pdf"]:hover {
  color: #FAF4F2 !important;
  text-shadow: 0 0 10px rgba(231, 178, 169, 0.4) !important;
}

/* Category Filter Pills on Treatments Catalog */
html.dark .flex.flex-wrap.gap-2.pt-2.border-t button:not(.bg-gradient-to-r):not([class*="bg-gradient-to-r"]),
html.dark button.rounded-full.cursor-pointer:not(.bg-gradient-to-r):not([class*="bg-gradient-to-r"]) {
  background: rgba(26, 15, 21, 0.75) !important;
  color: #D6C2C7 !important;
  border: 1px solid rgba(231, 178, 169, 0.22) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

html.dark .flex.flex-wrap.gap-2.pt-2.border-t button:not(.bg-gradient-to-r):not([class*="bg-gradient-to-r"]):hover,
html.dark button.rounded-full.cursor-pointer:not(.bg-gradient-to-r):not([class*="bg-gradient-to-r"]):hover {
  background: rgba(183, 110, 121, 0.22) !important;
  color: #FAF4F2 !important;
  border-color: #E7B2A9 !important;
  box-shadow: 0 4px 12px rgba(183, 110, 121, 0.25) !important;
}

html.dark .flex.flex-wrap.gap-2.pt-2.border-t button.bg-gradient-to-r,
html.dark .flex.flex-wrap.gap-2.pt-2.border-t button[class*="bg-gradient-to-r"],
html.dark button.rounded-full.cursor-pointer.bg-gradient-to-r,
html.dark button.rounded-full.cursor-pointer[class*="bg-gradient-to-r"] {
  background: linear-gradient(135deg, #8F4954 0%, #B76E79 50%, #8F4954 100%) !important;
  border: 1px solid #E7B2A9 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(183, 110, 121, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

/* 6. Section Headers & Collection Dossiers (Collection 01, Complete Treatment Catalog, etc.) */
html.dark .eyebrow,
html.dark span.eyebrow,
html.dark p.eyebrow {
  color: #E7B2A9 !important;
  font-weight: 600 !important;
}

html.dark h2.font-display,
html.dark h3.font-display,
html.dark h4.font-display {
  color: #FAF4F2 !important;
}

html.dark a[class*="uppercase"][class*="tracking-widest"]:hover,
html.dark a[class*="uppercase"][class*="tracking-wider"]:hover {
  color: #FAF4F2 !important;
  text-shadow: 0 0 10px rgba(231, 178, 169, 0.35);
}

/* 7. Treatment Cards & Protocol Detail Highlights in Dark Mode */
html.dark .grid.gap-6 > div > div.rounded-2xl,
html.dark [class*="grid"][class*="sm:grid-cols-12"][class*="items-start"] {
  background: linear-gradient(145deg, #1C1117 0%, #140A0F 100%) !important;
  border: 1px solid rgba(231, 178, 169, 0.2) !important;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.75) !important;
}

html.dark .grid.gap-6 > div > div.rounded-2xl:hover,
html.dark [class*="grid"][class*="sm:grid-cols-12"][class*="items-start"]:hover {
  border-color: rgba(231, 178, 169, 0.45) !important;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.85), 0 0 20px rgba(183, 110, 121, 0.15) !important;
}

html.dark .lucide-sparkles,
html.dark .lucide-circle-check,
html.dark .lucide-shield-check {
  color: #E7B2A9 !important;
}

html.dark span[class*="text-[#8F4954]"].font-display,
html.dark span.font-display[class*="text-[#8F4954]"] {
  color: #E7B2A9 !important;
}

/* 8. Treatment Suites Sticky Sidebar (Dark Mode Refinement) */
html.dark .lume-sticky-sidebar nav a.active,
html.dark .lume-sticky-sidebar nav a[data-status="active"] {
  background: linear-gradient(135deg, rgba(143, 73, 84, 0.45) 0%, rgba(183, 110, 121, 0.25) 100%) !important;
  border-color: #E7B2A9 !important;
  color: #FAF4F2 !important;
  box-shadow: 0 2px 10px rgba(183, 110, 121, 0.25) !important;
}

html.dark .lume-sticky-sidebar nav a:not(.active):not([data-status="active"]) {
  background: rgba(24, 14, 20, 0.55) !important;
  border-color: rgba(231, 178, 169, 0.15) !important;
  color: #D6C2C7 !important;
}

html.dark .lume-sticky-sidebar nav a:not(.active):not([data-status="active"]):hover {
  background: rgba(183, 110, 121, 0.18) !important;
  border-color: rgba(231, 178, 169, 0.4) !important;
  color: #FAF4F2 !important;
}

html.dark .lume-sticky-sidebar nav a span.rounded-full {
  background: rgba(231, 178, 169, 0.15) !important;
  border-color: rgba(231, 178, 169, 0.3) !important;
  color: #E7B2A9 !important;
}

html.dark .lume-sticky-sidebar a[href*="Brochure.pdf"] span.font-mono {
  background: rgba(231, 178, 169, 0.15) !important;
  border-color: rgba(231, 178, 169, 0.3) !important;
  color: #E7B2A9 !important;
}

/* Explicit dimensions for theme toggle SVGs */
#lar-dark-mode-toggle .sun-icon,
#lar-dark-mode-toggle .moon-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

#lumeThemeToggle .sun-icon,
#lumeThemeToggle .moon-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   LUMÉ ANIMATION KEYFRAMES — Exact 1-to-1 parity with React site
   ========================================================================== */

@keyframes shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(0.5deg); }
  66%       { transform: translateY(-4px) rotate(-0.3deg); }
}

@keyframes breathGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

@keyframes jumpFloat {
  0%, 100% { transform: translateY(0px); }
  25%       { transform: translateY(-14px); }
  50%       { transform: translateY(-6px); }
  75%       { transform: translateY(-10px); }
}

@keyframes jumpReverseFloat {
  0%, 100% { transform: translateY(0px); }
  25%       { transform: translateY(14px); }
  50%       { transform: translateY(6px); }
  75%       { transform: translateY(10px); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes pulseRing {
  0%   { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(2.2);  opacity: 0; }
}

@keyframes radarPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes glowOrbit {
  0%   { transform: rotate(0deg) translateX(28px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
}

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

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

/* ==========================================================================
   ANIMATION UTILITY CLASSES
   ========================================================================== */

.animate-shine {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: shine 2.8s linear infinite;
}

.animate-float {
  animation: floatGentle 6s ease-in-out infinite;
}

.animate-breathe {
  animation: breathGlow 4s ease-in-out infinite;
}

.animate-jump-float {
  animation: jumpFloat 3.5s ease-in-out infinite;
}

.animate-jump-reverse-float {
  animation: jumpReverseFloat 3.5s ease-in-out infinite;
}

.animate-fade-up {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-pulse-ring {
  animation: pulseRing 1.8s ease-out infinite;
}

.animate-radar-pulse {
  animation: radarPulse 2s ease-out infinite;
}

.animate-ticker {
  animation: ticker 28s linear infinite;
}

.animate-marquee {
  animation: marqueeLeft 22s linear infinite;
}

/* ==========================================================================
   INTERACTION UTILITY CLASSES — consumed by initSpotlightCards etc.
   ========================================================================== */

/* Spotlight Card — add data-spotlight attr to any card */
.spotlight-card {
  position: relative;
  overflow: hidden;
}

/* Tilt Card — add data-tilt attr */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.3s ease;
}

/* Magnetic Button — add data-magnetic attr */
.magnetic-btn {
  will-change: transform;
  display: inline-block;
}

/* Decrypt Text — add data-decrypt attr */
.decrypt-text {
  font-variant-numeric: tabular-nums;
}

/* Scroll Reveal — add data-reveal attr, optionally data-reveal-delay="200" */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* ==========================================================================
   LUXURY GRADIENT TEXT UTILITY
   ========================================================================== */

.gradient-text-gold {
  background: linear-gradient(
    135deg,
    var(--rose-gold) 0%,
    var(--rose-gold-light) 50%,
    var(--rose-gold) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shine 3.5s linear infinite;
}

.gradient-text-plum {
  background: linear-gradient(
    135deg,
    #8F4954 0%,
    #B76E79 45%,
    #E7B2A9 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   GLASS MORPHISM UTILITIES
   ========================================================================== */

.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dark .glass-card {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(183, 110, 121, 0.18);
}

/* ==========================================================================
   STAGGER DELAY UTILITIES (for scroll-reveal chains)
   ========================================================================== */

[data-reveal][data-reveal-delay="100"] { transition-delay: 100ms !important; }
[data-reveal][data-reveal-delay="200"] { transition-delay: 200ms !important; }
[data-reveal][data-reveal-delay="300"] { transition-delay: 300ms !important; }
[data-reveal][data-reveal-delay="400"] { transition-delay: 400ms !important; }
[data-reveal][data-reveal-delay="500"] { transition-delay: 500ms !important; }
[data-reveal][data-reveal-delay="600"] { transition-delay: 600ms !important; }

/* ==========================================================================
   HAUTE EDITORIAL MOBILE DRAWER (Exact Match to User Specs & Screenshot)
   ========================================================================== */
.lume-mobile-drawer {
  background-color: #FAF5F3;
  color: #2A2124;
}

.dark .lume-mobile-drawer {
  background-color: #120A0E;
  color: #FAF4F2;
}

.mobile-nav-heading {
  font-family: 'Bodoni Moda', 'Playfair Display', 'Italiana', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.mobile-nav-grid-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.85rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.3;
  background-color: #FFFFFF;
  border: 1px solid rgba(183, 110, 121, 0.25);
  color: #2A2124;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.mobile-nav-grid-item:hover {
  background-color: #FAF0F0;
  border-color: #8F4954;
  color: #8F4954;
  transform: translateY(-1px);
}

.dark .mobile-nav-grid-item {
  background-color: #1C1116;
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  box-shadow: none;
}

.dark .mobile-nav-grid-item:hover {
  background-color: #26161E;
  border-color: rgba(183, 110, 121, 0.5);
  color: #FAF4F2;
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER & SITE FREEZE MECHANICS
   ========================================================================== */
html.menu-open-frozen,
body.menu-open-frozen {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Pause all background tickers, animations, and spinning badges when menu is open */
.menu-open-frozen .animate-marquee,
.menu-open-frozen .animate-marquee-slow,
.menu-open-frozen .animate-marquee-reverse,
.menu-open-frozen .animate-spin-slow,
.menu-open-frozen .animate-aurora,
.menu-open-frozen .animate-shine {
  animation-play-state: paused !important;
}

/* Master Overlay & Backdrop */
#mobile-nav-drawer {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mobile-nav-drawer.is-open {
  display: flex !important;
  justify-content: flex-end !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (min-width: 1024px) {
  #mobile-nav-drawer,
  #mobile-nav-drawer.is-open {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Sliding Drawer Panel */
#mobile-nav-drawer .lume-mobile-drawer {
  position: relative !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 480px !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  background-color: #FAF5F3 !important;
  color: #2A2124 !important;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  z-index: 1000000 !important;
  border-left: 1px solid rgba(183, 110, 121, 0.3) !important;
}

.dark #mobile-nav-drawer .lume-mobile-drawer {
  background-color: #120A0E !important;
  color: #FAF4F2 !important;
  box-shadow: -10px 0 45px rgba(0, 0, 0, 0.75) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   LUMÉ AESTHETICS REIMAGINED — MASTER HAUTE ANIMATIONS ENGINE
   Exact 1-to-1 Parity with React Project Framer Motion & ReactBits
   ========================================================================== */

/* 1. Keyframes from React styles.css */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinSlowReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes jumpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes jumpReverseFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.08); }
}

@keyframes shine {
  0% { background-position: 100%; }
  100% { background-position: -100%; }
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}

@keyframes breathGlow {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.06); }
}

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

@keyframes star-movement-bottom {
  0% { transform: translate(0%, 0%); opacity: 1; }
  100% { transform: translate(-100%, 0%); opacity: 0; }
}

@keyframes star-movement-top {
  0% { transform: translate(0%, 0%); opacity: 1; }
  100% { transform: translate(100%, 0%); opacity: 0; }
}

@keyframes aurora-mesh {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 2. Utility Classes from React Project */
.animate-spin-slow {
  animation: spinSlow 20s linear infinite !important;
}

.animate-spin-reverse {
  animation: spinSlowReverse 25s linear infinite !important;
}

.animate-jump {
  animation: jumpFloat 4.5s ease-in-out infinite !important;
}

.animate-jump-reverse {
  animation: jumpReverseFloat 5s ease-in-out infinite !important;
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite !important;
}

.animate-shine {
  animation: shine 4s linear infinite !important;
}

.animate-float-gentle {
  animation: floatGentle 6s ease-in-out infinite !important;
}

.animate-breath-glow {
  animation: breathGlow 8s ease-in-out infinite !important;
}

.animate-marquee {
  display: flex !important;
  width: max-content !important;
  animation: marqueeScroll 28s linear infinite !important;
}

.animate-marquee:hover {
  animation-play-state: paused !important;
}

.animate-star-movement-bottom {
  animation: star-movement-bottom 4s linear infinite alternate !important;
}

.animate-star-movement-top {
  animation: star-movement-top 4s linear infinite alternate !important;
}

.animate-aurora {
  background-size: 200% 200% !important;
  animation: aurora-mesh 14s ease infinite !important;
}

/* 3. ReactBits: ShinyText */
.shiny-text {
  display: inline-block;
  font-weight: 700;
  background-image: linear-gradient(120deg, #682230 0%, #8F4954 30%, #B76E79 50%, #682230 80%, #8F4954 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: shine 4s linear infinite;
}

html.dark .shiny-text {
  background-image: linear-gradient(120deg, #E7B2A9 0%, #FAF4F2 30%, #B76E79 50%, #E7B2A9 80%, #FAF4F2 100%);
}

/* 4. ReactBits: TrueFocus */
.true-focus-container {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  user-select: none;
}

.true-focus-word {
  position: relative;
  cursor: pointer;
  transition: filter 0.35s ease, opacity 0.35s ease, color 0.35s ease;
  display: inline-block;
}

.true-focus-box {
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(183, 110, 121, 0.8);
  box-shadow: 0 0 16px rgba(183, 110, 121, 0.4);
  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
  z-index: 10;
}

html.dark .true-focus-box {
  border-color: rgba(231, 178, 169, 0.8);
  box-shadow: 0 0 18px rgba(231, 178, 169, 0.45);
}

.true-focus-box .tf-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  border-color: #B76E79;
}

html.dark .true-focus-box .tf-corner {
  border-color: #E7B2A9;
}

.true-focus-box .tf-tl { top: -2px; left: -2px; border-top: 2px solid; border-left: 2px solid; }
.true-focus-box .tf-tr { top: -2px; right: -2px; border-top: 2px solid; border-right: 2px solid; }
.true-focus-box .tf-bl { bottom: -2px; left: -2px; border-bottom: 2px solid; border-left: 2px solid; }
.true-focus-box .tf-br { bottom: -2px; right: -2px; border-bottom: 2px solid; border-right: 2px solid; }

/* 5. ReactBits: StarBorder */
.star-border-container {
  position: relative;
  display: inline-block;
  padding: 1px;
  overflow: hidden;
}

.star-border-trail-bottom {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  bottom: -11px;
  right: -250%;
  border-radius: 9999px;
  pointer-events: none;
  background: radial-gradient(circle, #B76E79, transparent 20%);
  animation: star-movement-bottom 4s linear infinite alternate;
  z-index: 0;
}

.star-border-trail-top {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  top: -10px;
  left: -250%;
  border-radius: 9999px;
  pointer-events: none;
  background: radial-gradient(circle, #B76E79, transparent 20%);
  animation: star-movement-top 4s linear infinite alternate;
  z-index: 0;
}

/* 6. ReactBits: BlurText & SplitText */
.blur-word, .blur-letter {
  display: inline-block;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(-15px);
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter, opacity, transform;
}

.blur-word.is-revealed, .blur-letter.is-revealed {
  filter: blur(0px) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.split-char, .split-word {
  display: inline-block;
  filter: blur(6px);
  opacity: 0;
  transform: translateY(24px);
  transition: filter 0.5s cubic-bezier(0.2, 0.65, 0.3, 0.9),
              opacity 0.5s cubic-bezier(0.2, 0.65, 0.3, 0.9),
              transform 0.5s cubic-bezier(0.2, 0.65, 0.3, 0.9);
  will-change: filter, opacity, transform;
}

.split-char.is-revealed, .split-word.is-revealed {
  filter: blur(0px) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 7. LuxuryTiltCard: Glare Layer */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 25;
}

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

/* ==========================================================================
   MAJESTIC HERO HEADLINE TYPOGRAPHY (Grand Luxury Editorial Scale)
   ========================================================================== */
.hero-brand-title {
  font-family: var(--font-display), "Playfair Display", "Bodoni Moda", "Didot", serif !important;
  font-size: clamp(4.5rem, 9.5vw, 8.5rem) !important;
  line-height: 0.95 !important;
  font-weight: 400 !important;
  color: #2A2124 !important;
  letter-spacing: -0.025em !important;
  display: block !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

.dark .hero-brand-title {
  color: #FAF4F2 !important;
}

@media (min-width: 1024px) {
  .hero-brand-title {
    font-size: clamp(5.25rem, 8.5vw, 8.5rem) !important;
    line-height: 0.94 !important;
  }
}

/* Grand Scale Typography Utilities */
.text-4xl { font-size: clamp(2rem, 4vw, 2.5rem) !important; }
.text-5xl { font-size: clamp(2.5rem, 5vw, 3.25rem) !important; }
.text-6xl { font-size: clamp(3rem, 6vw, 4rem) !important; }
.text-7xl { font-size: clamp(3.75rem, 7.5vw, 5.5rem) !important; }
@media (min-width: 640px) {
  .sm\:text-5xl { font-size: clamp(2.5rem, 5vw, 3.25rem) !important; }
  .sm\:text-6xl { font-size: clamp(3rem, 6vw, 4rem) !important; }
  .sm\:text-7xl { font-size: clamp(4rem, 7.5vw, 5.5rem) !important; }
}
@media (min-width: 1024px) {
  .lg\:text-7xl { font-size: clamp(4.5rem, 8vw, 6.5rem) !important; }
  .lg\:text-\[5\.5rem\] { font-size: 5.5rem !important; }
  .lg\:text-\[6\.5rem\] { font-size: 6.5rem !important; }
}

/* Lookbook / Gallery Filter Transitions & Dark Mode */
.js-gallery-filter {
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.js-gallery-card {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.dark .js-gallery-filter {
  border-radius: 0 !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
}

.dark .js-gallery-filter:not(.is-active) {
  background-color: #1C1116 !important;
  background: #1C1116 !important;
  color: #FAF4F2 !important;
  border: 1px solid rgba(231, 178, 169, 0.25) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dark .js-gallery-filter:not(.is-active):hover {
  background-color: #281720 !important;
  background: #281720 !important;
  color: #FFFFFF !important;
  border-color: #E7B2A9 !important;
}

.dark .js-gallery-filter.is-active {
  background-color: #B76E79 !important;
  background: #B76E79 !important;
  color: #FFFFFF !important;
  border: 1px solid #B76E79 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   HAUTE EDITORIAL MASTER SCROLL MOTION & KINETIC TEXT ENGINE
   ========================================================================== */
.lar-motion-ready {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  filter: blur(4px) !important;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform, filter;
}

.lar-motion-revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0px) !important;
}

/* Kinetic Text Reveals for Headings & Titles */
.lar-kinetic-text {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  filter: blur(5px) !important;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform, filter;
}

.lar-kinetic-text.is-in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0px) !important;
}

/* Parallax Drifter elements */
.lar-parallax-orb {
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Badges & Ambient Soft Motion */
@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.4deg);
  }
}

.animate-float-subtle {
  animation: floatSubtle 7s ease-in-out infinite !important;
}

/* Subtle image depth shift on card hover */
.tilt-card img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tilt-card:hover img {
  transform: scale(1.04) !important;
}

/* ==========================================================================
   HAUTE HERO LUXURY ANIMATIONS ENGINE (Interactive Botanical Physics & 3D Glare)
   ========================================================================== */

/* 1. Liquid Metallic Title Glint */
@keyframes luxuryTitleGlint {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.hero-brand-title.lar-glint-title {
  background: linear-gradient(
    115deg,
    #2A2124 0%,
    #2A2124 35%,
    #B76E79 48%,
    #E7B2A9 52%,
    #FFFFFF 55%,
    #E7B2A9 58%,
    #B76E79 62%,
    #2A2124 75%,
    #2A2124 100%
  ) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: luxuryTitleGlint 7s ease-in-out infinite !important;
  display: inline-block !important;
  will-change: background-position;
}

.dark .hero-brand-title.lar-glint-title {
  background: linear-gradient(
    115deg,
    #FAF4F2 0%,
    #FAF4F2 35%,
    #B76E79 48%,
    #E7B2A9 52%,
    #FFFFFF 55%,
    #E7B2A9 58%,
    #B76E79 62%,
    #FAF4F2 75%,
    #FAF4F2 100%
  ) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: luxuryTitleGlint 7s ease-in-out infinite !important;
}

/* 2. Interactive Botanical Leaves Aerodynamic Physics */
.hero-leaf-interactive {
  will-change: transform;
  transform-style: preserve-3d;
  --leaf-tx: 0px;
  --leaf-ty: 0px;
  --leaf-rot: 0deg;
  --flower-tx: 0px;
  --flower-ty: 0px;
}

@keyframes leafBreatheTop {
  0%, 100% {
    transform: translate3d(var(--leaf-tx, 0px), calc(var(--leaf-ty, 0px) + 0px), 35px) rotate(calc(var(--leaf-rot, 0deg) + 0deg)) scale(1);
  }
  50% {
    transform: translate3d(var(--leaf-tx, 0px), calc(var(--leaf-ty, 0px) - 14px), 35px) rotate(calc(var(--leaf-rot, 0deg) + 3deg)) scale(1.03);
  }
}

@keyframes leafBreatheBottom {
  0%, 100% {
    transform: translate3d(var(--leaf-tx, 0px), calc(var(--leaf-ty, 0px) + 0px), 25px) rotate(calc(var(--leaf-rot, 0deg) + 0deg)) scale(1);
  }
  50% {
    transform: translate3d(var(--leaf-tx, 0px), calc(var(--leaf-ty, 0px) + 12px), 25px) rotate(calc(var(--leaf-rot, 0deg) - 4deg)) scale(1.02);
  }
}

.leaf-float-top {
  animation: leafBreatheTop 6s ease-in-out infinite !important;
}

.leaf-float-bottom {
  animation: leafBreatheBottom 7s ease-in-out infinite !important;
}

.hero-flower-interactive {
  animation: flowerSpinParallax 20s linear infinite !important;
}

@keyframes flowerSpinParallax {
  from {
    transform: translate3d(var(--flower-tx, 0px), var(--flower-ty, 0px), 20px) rotate(0deg);
  }
  to {
    transform: translate3d(var(--flower-tx, 0px), var(--flower-ty, 0px), 20px) rotate(360deg);
  }
}


/* 3. Hero 3D Card Stage & Specular Sheen */
.hero-3d-stage {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.hero-3d-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-specular-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  mix-blend-mode: overlay;
}

/* 4. Atmospheric Drifting Petal Particle Canopy */
.hero-botanical-canopy {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 15;
}

.hero-drifting-particle {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(183, 110, 121, 0.75) 0%, rgba(231, 178, 169, 0.3) 60%, transparent 85%);
  filter: blur(1.5px);
  will-change: transform, opacity;
  animation: petalFall linear infinite;
}

.dark .hero-drifting-particle {
  background: radial-gradient(circle, rgba(231, 178, 169, 0.85) 0%, rgba(183, 110, 121, 0.4) 60%, transparent 85%);
  box-shadow: 0 0 12px rgba(231, 178, 169, 0.5);
}

@keyframes petalFall {
  0% {
    transform: translate3d(0, -30px, 0) rotate(0deg) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  85% {
    opacity: 0.75;
  }
  100% {
    transform: translate3d(var(--drift-x, 40px), 520px, 0) rotate(var(--rot-deg, 360deg)) scale(1.1);
    opacity: 0;
  }
}

/* 5. Live Clock & Sanctuary Radar Beacon */
.sanctuary-pulse-dot {
  position: relative;
  display: inline-flex;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background-color: #B76E79;
}

.sanctuary-pulse-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background-color: rgba(183, 110, 121, 0.5);
  animation: pulseBeacon 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes pulseBeacon {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* 6. Dynamic Aurora Mesh Breathing */
.hero-aurora-mesh {
  animation: auroraMeshBreathe 12s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}

@keyframes auroraMeshBreathe {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.12) translate3d(-20px, 15px, 0);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.05) translate3d(25px, -15px, 0);
    opacity: 0.4;
  }
}

/* ==========================================================================
   EDITORIAL DISPLAY TYPOGRAPHY & GRADIENT CLIP PROTECTIONS
   Prevents font clipping, baseline displacement, and broken line boxes
   ========================================================================== */
h1.font-display,
.font-display {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1.font-display,
.font-display.text-4xl,
.font-display.text-5xl,
.font-display.text-6xl,
.font-display.text-7xl {
  line-height: 1.15 !important;
}

@media (min-width: 640px) {
  h1.font-display,
  .font-display.text-4xl,
  .font-display.text-5xl,
  .font-display.text-6xl,
  .font-display.text-7xl {
    line-height: 1.12 !important;
  }
}

.leading-\[1\.05\] {
  line-height: 1.15 !important;
}

@media (min-width: 640px) {
  .leading-\[1\.05\] {
    line-height: 1.12 !important;
  }
}

/* Haute Editorial Gold/Rose-Gold Gradient Text fallback */
.gold-gradient-text {
  background: linear-gradient(120deg, #682230 0%, #8F4954 30%, #B76E79 50%, #8F4954 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #8F4954;
  display: inline-block;
}

.dark .gold-gradient-text {
  background: linear-gradient(120deg, #E7B2A9 0%, #FAF4F2 40%, #E7B2A9 80%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #E7B2A9;
}

/* ==========================================================================
   MASTER CLINICIAN & TEAM PORTRAIT FRAMING (Anti-Head-Cropping)
   Guarantees full visibility of heads and natural headroom across all screens
   ========================================================================== */
.object-top {
  object-position: top center !important;
}

.object-center {
  object-position: center center !important;
}

.object-bottom {
  object-position: bottom center !important;
}

.object-cover {
  object-fit: cover !important;
}

.object-contain {
  object-fit: contain !important;
}

.clinician-card-photo,
.specialist-collective-card img,
.group img[src*="team-navkiran"],
.group img[src*="team-senna"],
.group img[src*="team-gagan"],
img[alt="Navkiran Kaur"],
img[alt="Senna"],
img[alt="Gagan"] {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* ==========================================================================
   SERVICE DETAILS & PROTOCOL SCRUBBER CUSTOM SCROLLBAR & TRANSITIONS
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(183, 110, 121, 0.08);
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #B76E79;
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #8F4954;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(231, 178, 169, 0.08);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #E7B2A9;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #F4D0C9;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #B76E79 rgba(183, 110, 121, 0.08);
}

.dark .custom-scrollbar {
  scrollbar-color: #E7B2A9 rgba(231, 178, 169, 0.08);
}

/* ==========================================================================
   TEMPORARY PRICE HIDING UTILITIES (LAR_HIDE_PRICES)
   Reversible via define('LAR_HIDE_PRICES', false) in functions.php
   ========================================================================== */
body.lar-prices-hidden .service-price-label,
body.lar-prices-hidden #detail-meta-price,
body.lar-prices-hidden #detail-footer-price,
body.lar-prices-hidden #detail-meta > span.opacity-40,
body.lar-prices-hidden .js-diagnostic-price,
body.lar-prices-hidden .lar-price-tag,
body.lar-prices-hidden [data-price-tag],
body.lar-prices-hidden .treatment-price-badge,
body.lar-prices-hidden .ritual-price,
body.lar-prices-hidden .catalog-item-price,
body.lar-prices-hidden .pricing-bullet,
body.lar-prices-hidden .price-display,
body.lar-prices-hidden .service-card-price,
body.lar-prices-hidden .protocol-price,
body.lar-prices-hidden .tilt-card .text-right span.font-display,
body.lar-prices-hidden .tilt-card .text-right p,
body.lar-prices-hidden h4.font-display + span.font-display,
body.lar-prices-hidden h3.font-display + span.font-display,
body.lar-prices-hidden h2.font-display + span.font-display,
body.lar-prices-hidden .flex.items-baseline.justify-between > span.font-display:last-child,
body.lar-prices-hidden .flex.justify-between.items-baseline > span.font-display:last-child {
  display: none !important;
}