/* --- Inherited Balanced Luxury Theme Variables --- */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family:
          "Segoe UI",
          system-ui,
          -apple-system,
          sans-serif;
      }

      :root {
        --bg-gradient: linear-gradient(
          135deg,
          #ffffff 0%,
          #f8fafc 50%,
          #f1f5f9 100%
        );
        --glass-core: rgba(255, 255, 255, 0.22);
        --glass-thick: rgba(255, 255, 255, 0.65);
        --glass-border: rgba(255, 255, 255, 0.6);
        --text-dark: #0f172a;
        --text-muted: #475569;
        --shadow-3d:
          0 25px 50px -12px rgba(0, 0, 0, 0.04),
          0 4px 6px -4px rgba(0, 0, 0, 0.01),
          inset 0 2px 4px rgba(255, 255, 255, 0.8);
      }

      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        background: var(--bg-gradient);
        background-attachment: fixed;
        color: var(--text-dark);
        overflow-x: hidden;
      }

      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      /* Ambient Spheres */
      .ambient-sphere {
        position: fixed;
        border-radius: 50%;
        filter: blur(120px);
        z-index: -2;
        pointer-events: none;
        opacity: 0.2;
      }
      .sphere-1 {
        width: 600px;
        height: 600px;
        background: #cbd5e1;
        top: -10%;
        right: -10%;
      }
      .sphere-2 {
        width: 500px;
        height: 500px;
        background: #e2e8f0;
        bottom: -5%;
        left: -5%;
      }

      /* Pure Glassmorphic Containers */
      .glass-box {
        background: var(--glass-core);
        backdrop-filter: blur(30px) saturate(120%);
        -webkit-backdrop-filter: blur(30px) saturate(120%);
        border: 1px solid var(--glass-border);
        border-radius: 32px;
        box-shadow: var(--shadow-3d);
        transition:
          border-color 0.4s,
          box-shadow 0.4s,
          background 0.4s;
      }
      .glass-box:hover {
        background: rgba(255, 255, 255, 0.32);
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow:
          0 35px 60px rgba(0, 0, 0, 0.06),
          inset 0 2px 4px rgba(255, 255, 255, 0.9);
      }

      .section-padding {
        padding: 140px 6% 60px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
      }

      .section-header {
        text-align: center;
        margin-bottom: 70px;
      }
      .section-header h1 {
        font-size: 3.8rem;
        color: var(--text-dark);
        font-weight: 900;
        letter-spacing: -0.04em;
        margin-bottom: 15px;
      }
      .section-header p {
        font-size: 1.2rem;
        color: var(--text-muted);
        max-width: 650px;
        margin: 0 auto;
      }

      /* Buttons Setup */
      .cta-btn {
        background: var(--glass-thick);
        color: var(--text-dark);
        border: 1px solid var(--glass-border);
        padding: 14px 32px;
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: 50px;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      }
      .cta-btn:hover {
        background: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
      }
      .cta-btn.solid {
        background: var(--text-dark);
        color: #ffffff;
        border: none;
      }
      .cta-btn.solid:hover {
        background: #000000;
      }
      .cta-btn:focus-visible, 
      .nav-links a:focus-visible, 
      .footer-column ul a:focus-visible {
        outline: 2px solid var(--text-dark);
        outline-offset: 4px;
        border-radius: 8px;
      }
      .cta-btn.solid:focus-visible {
        outline-offset: 4px;
        border-radius: 50px;
      }

      /* --- Navigation --- */
     /* --- Unified Premium Navigation System --- */
      nav {
        position: fixed;
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 1300px;
        z-index: 1000;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 18px 45px;
        box-sizing: border-box !important;
      }
      
      .logo {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 10px;
        letter-spacing: -0.04em;
        text-decoration: none;
      }

      /* Hide technical layout controller input natively */
      #menu-toggle {
        display: none !important;
      }

      /* Base settings for standard hamburger layout box */
      .hamburger-btn {
        display: none;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 26px !important;
        height: 18px !important;
        cursor: pointer !important;
        z-index: 1000 !important;
      }

      .hamburger-btn span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: #0f172a !important; 
        border-radius: 4px !important;
        transform-origin: center !important; 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
      }

      /* --- Desktop Mode Styles (Screens wider than 1260px) --- */
      @media (min-width: 1261px) {
        .nav-links {
          display: flex !important;
          gap: 30px;
          list-style: none;
          align-items: center;
        }
        .nav-links a {
          text-decoration: none;
          color: var(--text-muted);
          font-weight: 600;
          transition: color 0.3s;
        }
        .nav-links a:hover {
          color: var(--text-dark);
        }
      }

      /* --- Mobile Dropdown Panel Mode Styles (Screens smaller than 1260px) --- */
      @media (max-width: 1260px) {
        .hamburger-btn {
          display: flex !important;
        }

        nav .nav-links {
          display: flex !important; /* Forces layout rendering */
          position: absolute !important;
          top: calc(100% + 15px) !important;
          left: 0 !important;
          width: 100% !important;
          background: rgba(255, 255, 255, 0.98) !important; 
          backdrop-filter: blur(20px) !important;
          -webkit-backdrop-filter: blur(20px) !important;
          border: 1px solid rgba(15, 23, 42, 0.08) !important;
          border-radius: 24px !important;
          box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05) !important;
          
          flex-direction: column !important;
          padding: 30px !important;
          gap: 15px !important;
          align-items: stretch !important;
          text-align: center !important;
          margin: 0 !important;
          list-style: none;
          
          /* Smoothly animate entrance gates */
          opacity: 0 !important;
          transform: translateY(-15px) !important;
          pointer-events: none !important;
          transition: opacity 0.3s ease, transform 0.3s ease !important;
          z-index: 999 !important;
        }

        nav .nav-links li {
          width: 100% !important;
          margin: 0 !important;
        }

        nav .nav-links li a {
          display: block !important;
          padding: 12px !important;
          width: 100% !important;
          font-size: 1.1rem !important;
          color: #0f172a !important;
          background: transparent !important;
          text-decoration: none;
          font-weight: 600;
        }
        /* Toggle State Event Drivers */
        #menu-toggle:checked ~ .nav-links {
          opacity: 1 !important;
          transform: translateY(0) !important;
          pointer-events: auto !important;
        }

        /* Create smooth structural vector 'X' closures */
        #menu-toggle:checked ~ .hamburger-btn span:nth-child(1) {
          transform: translateY(7.5px) rotate(45deg) !important;
        }
        #menu-toggle:checked ~ .hamburger-btn span:nth-child(2) {
          opacity: 0 !important;
        }
        #menu-toggle:checked ~ .hamburger-btn span:nth-child(3) {
          transform: translateY(-7.5px) rotate(-45deg) !important;
        }
      }

      /* --- Detailed Treatments Layout --- */
      .treatments-showcase {
        display: flex;
        flex-direction: column;
        gap: 50px;
        margin-bottom: 60px;
      }

      .treatment-row-card {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 50px;
        padding: 40px;
        align-items: center;
        border-radius: 40px;
      }
      .treatment-row-card.reverse {
        grid-template-columns: 1.2fr 1fr;
      }

      .treatment-media {
        width: 100%;
        height: 380px;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
      }
      .treatment-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
      }
      .treatment-row-card:hover .treatment-media img {
        transform: scale(1.04);
      }

      .treatment-info h2 {
        font-size: 2.2rem;
        font-weight: 800;
        margin-bottom: 15px;
        letter-spacing: -0.02em;
      }
      .treatment-meta {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
      }
      .treatment-meta span i {
        margin-right: 6px;
        color: var(--text-dark);
      }
      .treatment-info p {
        font-size: 1.05rem;
        line-height: 1.7;
        color: var(--text-muted);
        margin-bottom: 30px;
      }

      /* Utilities Grid internal details */
      .details-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 30px;
        list-style: none;
      }
      .details-list li {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .details-list li i {
        color: #475569;
        font-size: 0.85rem;
      }

      /* --- Footer Section --- */
      footer {
        margin-top: auto;
        padding: 80px 6% 40px;
        border-radius: 48px 48px 0 0;
        width: 100%;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr;
        gap: 50px;
      }
      .footer-column h4 {
        font-size: 1.15rem;
        color: var(--text-dark);
        margin-bottom: 25px;
        font-weight: 700;
      }
      .footer-column ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .footer-column ul a {
        text-decoration: none;
        color: var(--text-muted);
        transition: color 0.3s;
      }
      .footer-column ul a:hover {
        color: var(--text-dark);
      }
      .schedule-table li {
        display: flex;
        justify-content: space-between;
        font-size: 0.95rem;
      }
      .footer-bottom {
        margin-top: 80px;
        padding-top: 30px;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        text-align: center;
        font-size: 0.95rem;
        color: var(--text-muted);
      }

      /* Responsive Rules */
      @media (max-width: 992px) {
        .treatment-row-card,
        .treatment-row-card.reverse {
          grid-template-columns: 1fr;
          gap: 30px;
          padding: 30px;
        }
        .treatment-media {
          height: 300px;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
        .section-header h1 {
          font-size: 2.8rem;
        }
      }
      @media (max-width: 640px) {
        .details-list {
          grid-template-columns: 1fr;
          gap: 10px;
        }
        .footer-grid {
          grid-template-columns: 1fr;
        }
      }
      /* ==========================================================================
   BULLETPROOF RESPONSIVE NAVIGATION & CORRECT 'X' TRANSFORMS
   ========================================================================== */

/* Force layout container to hold its structure on a single row */
nav.glass-box {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
}

#menu-toggle {
  display: none !important;
}

/* Define explicit rendering values for the hamburger container */
.hamburger-btn {
  display: none;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 26px !important;
  height: 18px !important;
  cursor: pointer !important;
  z-index: 1000 !important;
}

/* Force lines to have structural thickness and center orientation origins */
.hamburger-btn span {
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  background-color: #0f172a !important; 
  border-radius: 4px !important;
  
  /* 🌟 FIX: Force lines to rotate around their exact center point, preventing the tick mark bug */
  transform-origin: center !important; 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
}
/* ==========================================================================
   PREMIUM MAGNETIC PULSE UNDERLINE SYSTEM (NAV & FOOTER LINKS)
   ========================================================================== */

/* 1. Clear styling and anchor contexts */
.nav-links li a,
.footer-links a,
.footer-section ul li a,
footer a {
  position: relative !important;
  text-decoration: none !important;
  padding-bottom: 6px !important; /* Spaces text away from the rising baseline */
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Construct the Invisible Double-Sided Magnetic Dot baseline */
.nav-links li a::after,
.footer-links a::after,
.footer-section ul li a::after,
footer a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background-color: #0f172a !important; /* Deep Premium Charcoal Black Line */
  border-radius: 4px !important;
  opacity: 0 !important;
  
  /* Elastic bounce easing curve to mimic magnetic spring physics */
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              left 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.3s ease !important;
}

/* 3. Active Elastic Stretch Target Trigger on Hover */
.nav-links li a:hover::after,
.footer-links a:hover::after,
.footer-section ul li a:hover::after,
footer a:hover::after {
  width: 100% !important;
  left: 0 !important;
  opacity: 1 !important;
}
/* ==========================================================================
   THE UNSEEN: TREATMENTS RECOVERY SLOT OVERRIDE (TREATMENTS.HTML)
   ========================================================================== */

/* Target all cta-btn solid elements (including treatments buttons) */
.cta-btn.solid {
  position: relative !important;
  overflow: hidden !important; /* Clips the circular mercury wave perfectly */
  z-index: 1 !important;
  background-color: #0f172a !important; /* Force baseline deep charcoal */
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  
  /* Smooth cinematic deceleration transition profile (1.2s matching timing) */
  transition: 
    color 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.8s ease,
    box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Ensure the hidden mercury droplet pool acts relative to the core block dimensions */
.cta-btn.solid::before {
  content: '' !important;
  position: absolute !important;
  bottom: -50px !important;
  left: 50% !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  background: #ffffff !important; /* Pure Stark White Liquid */
  z-index: -1 !important;
  
  /* Initial state: Compressed zero-pixel baseline matrix coordinate */
  transform: translate(-50%, 50%) scale(0) !important;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: center center !important;
}

/* Isolate nested element configurations inside the treatment action triggers */
.cta-btn.solid * {
  position: relative !important;
  z-index: 2 !important;
  transition: color 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Active Hover Interaction Driver */
.cta-btn.solid:hover {
  color: #0f172a !important; /* Sharp ink-drop inversion to deep charcoal */
  border-color: #ffffff !important;
  transform: scale(1.03) translateY(-2px) !important; /* Elegant modern micro-lift spatial float */
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25) !important;
}

/* Force the mercury layer to ripple outward past the boundaries on button hover */
.cta-btn.solid:hover::before {
  transform: translate(-50%, 50%) scale(6.5) !important; /* Scaled slightly higher to cleanly mask full-width button cards */
}