/* ── CSS Variables ───────────────────────────────────────────── */
    :root {
      --font-size: 16px;
      --background: #ffffff;
      --foreground: oklch(0.145 0 0);
      --card: #ffffff;
      --card-foreground: oklch(0.145 0 0);
      --popover: oklch(1 0 0);
      --popover-foreground: oklch(0.145 0 0);
      --primary: #030213;
      --primary-foreground: oklch(1 0 0);
      --secondary: oklch(0.95 0.0058 264.53);
      --secondary-foreground: #030213;
      --muted: #ececf0;
      --muted-foreground: #717182;
      --accent: #e9ebef;
      --accent-foreground: #030213;
      --destructive: #d4183d;
      --destructive-foreground: #ffffff;
      --border: rgba(0, 0, 0, 0.1);
      --input: transparent;
      --input-background: #f3f3f5;
      --switch-background: #cbced4;
      --font-weight-medium: 500;
      --font-weight-normal: 400;
      --ring: oklch(0.708 0 0);
      --chart-1: oklch(0.646 0.222 41.116);
      --chart-2: oklch(0.6 0.118 184.704);
      --chart-3: oklch(0.398 0.07 227.392);
      --chart-4: oklch(0.828 0.189 84.429);
      --chart-5: oklch(0.769 0.188 70.08);
      --radius: 0.625rem;
      --sidebar: oklch(0.985 0 0);
      --sidebar-foreground: oklch(0.145 0 0);
      --sidebar-primary: #030213;
      --sidebar-primary-foreground: oklch(0.985 0 0);
      --sidebar-accent: oklch(0.97 0 0);
      --sidebar-accent-foreground: oklch(0.205 0 0);
      --sidebar-border: oklch(0.922 0 0);
      --sidebar-ring: oklch(0.708 0 0);
      --radius: 0.625rem;
 
      /* Spa-specific tokens */
      --spa-dark:       #1a0a2e;
      --spa-dark-70:      rgba(26, 10, 46, 0.70);
      --spa-dark-95:    rgba(26, 10, 46, 0.95); 
        /* Spa tokens */
      --spa-darkest:     #0d0520;
      --spa-mid:           #240b3e;

      --spa-gold:         #d4af37;
      --spa-gold-10:      rgba(212, 175, 55, 0.10); 
      --spa-gold-20:    rgba(212, 175, 55, 0.2);
      --spa-gold-30:       rgba(212, 175, 55, 0.30);
      --spa-gold-50:    rgba(212, 175, 55, 0.5);
      --spa-dark-80:      rgba(26, 10, 46, 0.80);
      --spa-gold-70:    rgba(212, 175, 55, 0.7);
      --spa-gold-light:   #f4e5a7;  

      --spa-white-5:       rgba(255, 255, 255, 0.05);
      --spa-white-50:    rgba(255, 255, 255, 0.50);
      --spa-white-60:      rgba(255, 255, 255, 0.60);
      --spa-white-70:      rgba(255, 255, 255, 0.70);
      --spa-white-80:     rgba(255, 255, 255, 0.80);
      --spa-white-90:     rgba(255, 255, 255, 0.90);

      --spa-whatsapp-from: #25D366;
      --spa-whatsapp-to:   #128C7E;
    }
 
    /* ── Base ────────────────────────────────────────────────────── */
    body {
      font-size: var(--font-size);
      background: var(--background);
      color: var(--foreground);
      min-height: 200vh; /* demo scroll space */
    }
    .navbar-brand img{
        width: 160px;
    }
    /* ── Navbar Shell ────────────────────────────────────────────── */
    .spa-navbar {
      background: transparent;
      transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
    }
 
    .spa-navbar.scrolled {
      background: var(--spa-dark-95) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    }
 
    /* ── Logo mark ───────────────────────────────────────────────── */
    .spa-logo-circle {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .spa-logo-letter {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--spa-dark);
      line-height: 1;
    }
 
    .spa-brand-name {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1.5rem;
      letter-spacing: 0.15em;
      line-height: 1.2;
      margin: 0;
    }
 
    .spa-brand-tagline {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-gold-70);
      font-size: 0.6875rem;
      letter-spacing: 0.2em;
      margin: 0;
    }
 
    /* ── Nav Links ───────────────────────────────────────────────── */
    .spa-nav-link {
      font-family: 'Poppins', sans-serif;
      font-weight: var(--font-weight-normal);
      color: #ffffff !important;
      position: relative;
      padding-bottom: 2px !important;
      transition: color 0.3s ease;
      text-decoration: none;
    }
 
    .spa-nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--spa-gold);
      transition: width 0.3s ease;
    }
 
    .spa-nav-link:hover {
      color: var(--spa-gold) !important;
    }
 
    .spa-nav-link:hover::after {
      width: 100%;
    }
 
    /* ── CTA Button ──────────────────────────────────────────────── */
    .spa-btn-book {
      font-family: 'Poppins', sans-serif;
      font-weight: var(--font-weight-medium);
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark) !important;
      border: none;
      border-radius: 9999px;
      padding: 0.5rem 1.5rem;
      text-decoration: none;
      display: inline-block;
      transition: box-shadow 0.3s ease, transform 0.2s ease;
      white-space: nowrap;
    }
 
    .spa-btn-book:hover {
      box-shadow: 0 6px 20px var(--spa-gold-50);
      transform: translateY(-1px);
    }
 
    /* ── Toggler ─────────────────────────────────────────────────── */
    .spa-toggler {
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0;
    }
 
    .spa-toggler-icon {
      width: 28px;
      height: 28px;
      color: #ffffff;
      display: block;
    }
 
    /* ── Mobile collapse ─────────────────────────────────────────── */
    .spa-mobile-menu {
      background: var(--spa-dark);
      border-top: 1px solid var(--spa-gold-20);
    }
 
    .spa-mobile-menu .spa-nav-link {
      padding: 0.5rem 0 !important;
      display: block;
    }
 
    .spa-mobile-menu .spa-btn-book {
      display: block;
      text-align: center;
      margin-top: 0.5rem;
      padding: 0.75rem 1.5rem;
    }
 
    /* ── Navbar height ───────────────────────────────────────────── */
    .spa-navbar .navbar-nav {
      gap: 0.25rem;
    }
 
    .spa-navbar .container-lg {
      min-height: 80px;
    }


    /* ── Section ───────────────────────────────────── */
    .spa-hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
 
    /* ── Background image ──────────────────────────── */
    .spa-hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
 
    .spa-hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
 
    .spa-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        var(--spa-dark-80) 0%,
        var(--spa-dark-70) 50%,
        var(--spa-dark)    100%
      );
    }
 
    /* ── Decorative SVGs ───────────────────────────── */
    .spa-deco-tl {
      position: absolute;
      top: 2rem;
      left: 2rem;
      opacity: 0.2;
      z-index: 1;
      pointer-events: none;
    }
 
    .spa-deco-br {
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      opacity: 0.2;
      transform: rotate(180deg);
      z-index: 1;
      pointer-events: none;
    }
 
    /* ── Content wrapper ───────────────────────────── */
    .spa-hero-content {
      position: relative;
      z-index: 10;
      text-align: center;
      padding-left: 1rem;
      padding-right: 1rem;
      max-width: 900px;
      width: 100%;
    }
 
    /* ── Logo circle ───────────────────────────────── */
    .spa-hero-logo-circle {
      width: 96px;
      height: 96px;
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      box-shadow: 0 8px 32px var(--spa-gold-50);
    }
 
    .spa-hero-logo-letter {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 2.5rem;
      color: var(--spa-dark);
      line-height: 1;
    }
 
    /* ── Heading ───────────────────────────────────── */
    .spa-hero-title {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      letter-spacing: 0.08em;
      margin-bottom: 1rem;
      font-size: 70px;
      line-height: 1.1;
    }
 
    /* ── Divider row ───────────────────────────────── */
    .spa-hero-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 2rem;
    }
 
    .spa-divider-line-left {
      height: 1px;
      width: 80px;
      background: linear-gradient(to right, transparent, var(--spa-gold));
      flex-shrink: 0;
    }
 
    .spa-divider-line-right {
      height: 1px;
      width: 80px;
      background: linear-gradient(to left, transparent, var(--spa-gold));
      flex-shrink: 0;
    }
 
    .spa-hero-tagline {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: clamp(1.25rem, 3vw, 1.875rem);
      color: var(--spa-white-90);
      padding: 0 1.5rem;
      margin: 0;
    }
 
    /* ── Body text ─────────────────────────────────── */
    .spa-hero-body {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-80);
      font-size: clamp(1rem, 2vw, 1.25rem);
      line-height: 1.8;
      max-width: 780px;
      margin: 0 auto 3rem;
    }
 
    /* ── CTA Buttons ───────────────────────────────── */
    .spa-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      justify-content: center;
    }
 
    .spa-btn-primary {
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark) !important;
      padding: 1rem 2.5rem;
      border-radius: 9999px;
      font-size: 1.125rem;
      text-decoration: none;
      display: inline-block;
      border: none;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
 
    .spa-btn-primary:hover {
      box-shadow: 0 16px 48px var(--spa-gold-50);
      transform: scale(1.05);
    }
 
    .spa-btn-outline {
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      background: transparent;
      color: var(--spa-gold) !important;
      padding: 1rem 2.5rem;
      border-radius: 9999px;
      font-size: 1.125rem;
      text-decoration: none;
      display: inline-block;
      border: 2px solid var(--spa-gold);
      transition: background 0.3s ease, transform 0.3s ease;
    }
 
    .spa-btn-outline:hover {
      background: var(--spa-gold-10);
      transform: scale(1.05);
    }
 
    /* ── Scroll arrow ──────────────────────────────── */
    .spa-scroll-arrow {
      position: absolute;
      bottom: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      animation: spa-bounce 1.2s ease-in-out infinite;
    }
 
    @keyframes spa-bounce {
      0%, 100% { transform: translateX(-50%) translateY(0);   }
      50%       { transform: translateX(-50%) translateY(8px); }
    }
 
    /* ── Entrance animation ────────────────────────── */
    .spa-hero-content {
      opacity: 0;
      transform: translateY(30px);
      animation: spa-fade-up 0.8s ease forwards;
    }
 
    @keyframes spa-fade-up {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── Section ───────────────────────────────────── */
    .spa-about {
      position: relative;
      padding: 6rem 0;
      background: linear-gradient(
        to bottom,
        var(--spa-dark) 0%,
        var(--spa-mid)  50%,
        var(--spa-dark) 100%
      );
      overflow: hidden;
    }
 
    /* ── Ambient blobs ─────────────────────────────── */
    .spa-blob-tl,
    .spa-blob-br {
      position: absolute;
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    .spa-blob-tl { top: 0;    left: 0; }
    .spa-blob-br { bottom: 0; right: 0; }
 
    /* ── Section heading ───────────────────────────── */
    .spa-about-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 5vw, 3.25rem);
      color: var(--spa-gold);
      margin-bottom: 1rem;
    }
 
    .spa-title-rule {
      height: 4px;
      width: 6rem;
      background: linear-gradient(
        to right,
        transparent,
        var(--spa-gold),
        transparent
      );
      margin: 0 auto;
      border: none;
    }
 
    /* ── Image block ───────────────────────────────── */
    .spa-img-wrapper {
      position: relative;
    }
 
    .spa-img-border {
      position: absolute;
      top: -1.5rem;
      left: -1.5rem;
      width: 100%;
      height: 100%;
      border: 2px solid var(--spa-gold-30);
      border-radius: var(--radius);
      pointer-events: none;
      z-index: 0;
    }
 
    .spa-img-main {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 500px;
      object-fit: cover;
      border-radius: var(--radius);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
      display: block;
    }
 
    .spa-badge {
      position: absolute;
      bottom: -1.5rem;
      right: -1.5rem;
      z-index: 2;
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      padding: 2rem;
      border-radius: var(--radius);
      box-shadow: 0 8px 32px var(--spa-gold-50);
    }
 
    .spa-badge-number {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 1.875rem;
      color: var(--spa-dark);
      line-height: 1;
      margin: 0;
    }
 
    .spa-badge-label {
      font-family: 'Poppins', sans-serif;
      font-size: 0.875rem;
      color: var(--spa-dark);
      margin: 0;
    }
 
    /* ── Text column ───────────────────────────────── */
    .spa-about-subtitle {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.5rem, 3.5vw, 2.25rem);
      color: #ffffff;
      margin-bottom: 1.5rem;
    }
 
    .spa-about-body {
      font-family: 'Poppins', sans-serif;
      font-size: 1.125rem;
      color: var(--spa-white-70);
      line-height: 1.8;
    }
 
    /* ── Feature cards ─────────────────────────────── */
    .spa-feature-card {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      background: var(--spa-white-5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 1.5rem;
      border-radius: var(--radius);
      border: 1px solid var(--spa-gold-20);
      transition: border-color 0.3s ease, transform 0.3s ease;
    }
 
    .spa-feature-card:hover {
      border-color: var(--spa-gold-50);
      transform: translateY(-2px);
    }
 
    .spa-feature-icon {
      flex-shrink: 0;
      width: 3.5rem;
      height: 3.5rem;
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--spa-dark);
    }
 
    .spa-feature-icon svg {
      width: 1.75rem;
      height: 1.75rem;
      stroke: var(--spa-dark);
    }
 
    .spa-feature-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 1.125rem;
      color: var(--spa-gold);
      margin-bottom: 0.375rem;
    }
 
    .spa-feature-desc {
      font-family: 'Poppins', sans-serif;
      font-size: 0.9375rem;
      color: var(--spa-white-60);
      margin: 0;
    }
 
    /* ── Scroll-triggered fade-in ──────────────────── */
    .spa-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
 
    .spa-reveal.from-left  { transform: translateX(-30px); }
    .spa-reveal.from-right { transform: translateX( 30px); }
 
    .spa-reveal.visible {
      opacity: 1;
      transform: translate(0, 0);
    }
 
    .spa-reveal.delay-1 { transition-delay: 0.10s; }
    .spa-reveal.delay-2 { transition-delay: 0.20s; }
    .spa-reveal.delay-3 { transition-delay: 0.30s; }

    /* ── Section ───────────────────────────────────── */
    .spa-therapies {
      position: relative;
      padding: 6rem 0;
      background: var(--spa-dark);
      overflow: hidden;
    }
 
    /* ── Ambient blob ──────────────────────────────── */
    .spa-blob-mid {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    /* ── Section heading ───────────────────────────── */
    .spa-therapies-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 5vw, 3.25rem);
      color: var(--spa-gold);
      margin-bottom: 1rem;
    }
 
    .spa-title-rule {
      height: 4px;
      width: 6rem;
      background: linear-gradient(to right, transparent, var(--spa-gold), transparent);
      margin: 0 auto 1.5rem;
      border: none;
    }
 
    .spa-therapies-subtitle {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 1.125rem;
      max-width: 42rem;
      margin: 0 auto;
    }
 
    /* ── Card ──────────────────────────────────────── */
    .spa-therapy-card {
      background: var(--spa-white-5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--spa-gold-20);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease;
    }
 
    .spa-therapy-card:hover {
      border-color: var(--spa-gold-60);
      box-shadow: 0 24px 64px rgba(212, 175, 55, 0.20);
      transform: translateY(-4px);
    }
 
    /* ── Card image ────────────────────────────────── */
    .spa-card-img-wrap {
      position: relative;
      height: 224px;
      overflow: hidden;
    }
 
    .spa-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.7s ease;
    }
 
    .spa-therapy-card:hover .spa-card-img {
      transform: scale(1.10);
    }
 
    .spa-card-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        var(--spa-dark) 0%,
        var(--spa-dark-50) 50%,
        transparent 100%
      );
      pointer-events: none;
    }
 
    /* ── Duration badge ────────────────────────────── */
    .spa-duration-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark);
      font-family: 'Poppins', sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      padding: 0.375rem 1rem;
      border-radius: 9999px;
    }
 
    /* ── Card body ─────────────────────────────────── */
    .spa-card-body {
      padding: 1.5rem;
    }
 
    .spa-card-name {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1.375rem;
      margin-bottom: 0.75rem;
    }
 
    .spa-card-desc {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-60);
      font-size: 0.9375rem;
      min-height: 48px;
      margin-bottom: 1rem;
    }
 
    .spa-card-price {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-gold);
      font-size: 1.25rem;
      font-weight: 500;
      margin-bottom: 1.5rem;
    }
 
    /* ── Book button ───────────────────────────────── */
    .spa-btn-book-card {
      display: block;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark) !important;
      text-align: center;
      text-decoration: none;
      padding: 0.75rem 1rem;
      border-radius: 9999px;
      border: none;
      transition: box-shadow 0.3s ease, transform 0.2s ease;
    }
 
    .spa-btn-book-card:hover {
      box-shadow: 0 8px 24px var(--spa-gold-50);
      transform: translateY(-1px);
    }
 
    /* ── Scroll reveal ─────────────────────────────── */
    .spa-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
 
    .spa-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }



    /* ── Section ───────────────────────────────────── */
    .spa-scrubs {
      position: relative;
      padding: 6rem 0;
      background: linear-gradient(to bottom, var(--spa-dark) 0%, var(--spa-mid) 100%);
      overflow: hidden;
    }
 
    /* ── Ambient blob ──────────────────────────────── */
    .spa-blob-mid {
      position: absolute;
      top: 50%;
      right: 25%;
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    /* ── Section heading ───────────────────────────── */
    .spa-scrubs-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 5vw, 3.25rem);
      color: var(--spa-gold);
      margin-bottom: 1rem;
    }
 
    .spa-title-rule {
      height: 4px;
      width: 6rem;
      background: linear-gradient(to right, transparent, var(--spa-gold), transparent);
      margin: 0 auto 1.5rem;
      border: none;
    }
 
    .spa-scrubs-subtitle {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 1.125rem;
      max-width: 42rem;
      margin: 0 auto;
    }
 
    /* ── Card ──────────────────────────────────────── */
    .spa-scrub-card {
      background: var(--spa-white-5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--spa-gold-20);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease;
    }
 
    .spa-scrub-card:hover {
      border-color: var(--spa-gold-60);
      box-shadow: 0 24px 64px rgba(212, 175, 55, 0.20);
      transform: translateY(-4px);
    }
 
    /* ── Card image ────────────────────────────────── */
    .spa-card-img-wrap {
      position: relative;
      height: 256px;
      overflow: hidden;
    }
 
    .spa-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.7s ease;
    }
 
    .spa-scrub-card:hover .spa-card-img {
      transform: scale(1.10);
    }
 
    .spa-card-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        var(--spa-dark) 0%,
        var(--spa-dark-50) 50%,
        transparent 100%
      );
      pointer-events: none;
    }
 
    /* ── Card body ─────────────────────────────────── */
    .spa-card-body {
      padding: 1.5rem;
    }
 
    .spa-card-name {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
    }
 
    .spa-card-desc {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-60);
      font-size: 0.875rem;
      min-height: 60px;
      margin-bottom: 1rem;
    }
 
    .spa-card-price {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-gold);
      font-size: 1.5rem;
      font-weight: 500;
      margin-bottom: 1.5rem;
    }
 
    /* ── Book button ───────────────────────────────── */
    .spa-btn-book-card {
      display: block;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark) !important;
      text-align: center;
      text-decoration: none;
      padding: 0.75rem 1rem;
      border-radius: 9999px;
      border: none;
      transition: box-shadow 0.3s ease, transform 0.2s ease;
    }
 
    .spa-btn-book-card:hover {
      box-shadow: 0 8px 24px var(--spa-gold-50);
      transform: translateY(-1px);
    }
 
    /* ── Scroll reveal ─────────────────────────────── */
    .spa-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
 
    .spa-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Section ───────────────────────────────────── */
    .spa-combos {
      position: relative;
      padding: 6rem 0;
      background: var(--spa-dark);
      overflow: hidden;
    }
 
    /* ── Ambient blob ──────────────────────────────── */
    .spa-blob-bl {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    /* ── Section heading ───────────────────────────── */
    .spa-combos-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 5vw, 3.25rem);
      color: var(--spa-gold);
      margin-bottom: 1rem;
    }
 
    .spa-title-rule {
      height: 4px;
      width: 6rem;
      background: linear-gradient(to right, transparent, var(--spa-gold), transparent);
      margin: 0 auto 1.5rem;
      border: none;
    }
 
    .spa-combos-subtitle {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 1.125rem;
      max-width: 42rem;
      margin: 0 auto;
    }
 
    /* ── Card ──────────────────────────────────────── */
    .spa-combo-card {
      position: relative;
      background: linear-gradient(135deg, var(--spa-white-10) 0%, var(--spa-white-5) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--spa-gold-30);
      border-radius: 1rem;
      padding: 2rem;
      padding-top: 2.5rem;
      transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease;
    }
 
    .spa-combo-card:hover {
      border-color: var(--spa-gold);
      box-shadow: 0 24px 64px rgba(212, 175, 55, 0.20);
      transform: translateY(-4px);
    }
 
    /* ── Special offer badge ───────────────────────── */
    .spa-combo-badge {
      position: absolute;
      top: -1rem;
      left: 2rem;
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark);
      font-family: 'Poppins', sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      padding: 0.375rem 1.25rem;
      border-radius: 9999px;
    }
 
    .spa-combo-badge svg {
      width: 1rem;
      height: 1rem;
      stroke: var(--spa-dark);
    }
 
    /* ── Card content ──────────────────────────────── */
    .spa-combo-name {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1.75rem;
      margin-bottom: 0.75rem;
    }
 
    .spa-combo-desc {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      margin-bottom: 1.5rem;
    }
 
    /* ── Meta row (duration + price) ──────────────── */
    .spa-combo-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
 
    .spa-combo-duration {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-80);
    }
 
    .spa-combo-duration svg {
      width: 1.25rem;
      height: 1.25rem;
      stroke: var(--spa-gold);
    }
 
    .spa-combo-divider {
      width: 1px;
      height: 1.5rem;
      background: var(--spa-gold-30);
      flex-shrink: 0;
    }
 
    .spa-combo-price {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1.5rem;
    }
 
    /* ── Includes box ──────────────────────────────── */
    .spa-combo-includes {
      background: var(--spa-white-5);
      border-radius: var(--radius);
      padding: 1rem;
      margin-bottom: 1.5rem;
    }
 
    .spa-combo-includes-label {
      font-family: 'Poppins', sans-serif;
      color: #ffffff;
      margin-bottom: 0.75rem;
      font-weight: 500;
    }
 
    .spa-combo-feature-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
 
    .spa-combo-feature-list li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 0.9375rem;
    }
 
    .spa-feature-dot {
      width: 6px;
      height: 6px;
      background: var(--spa-gold);
      border-radius: 50%;
      flex-shrink: 0;
    }
 
    /* ── Book button ───────────────────────────────── */
    .spa-btn-book-card {
      display: block;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark) !important;
      text-align: center;
      text-decoration: none;
      padding: 0.75rem 1rem;
      border-radius: 9999px;
      border: none;
      transition: box-shadow 0.3s ease, transform 0.2s ease;
    }
 
    .spa-btn-book-card:hover {
      box-shadow: 0 8px 24px var(--spa-gold-50);
      transform: translateY(-1px);
    }
 
    /* ── Scroll reveal ─────────────────────────────── */
    .spa-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
 
    .spa-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Section ───────────────────────────────────── */
    .spa-membership {
      position: relative;
      padding: 6rem 0;
      background: linear-gradient(to bottom, var(--spa-mid) 0%, var(--spa-dark) 100%);
      overflow: hidden;
    }
 
    /* ── Ambient blob ──────────────────────────────── */
    .spa-blob-center {
      position: absolute;
      top: 33%;
      left: 33%;
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    /* ── Section heading ───────────────────────────── */
    .spa-membership-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 5vw, 3.25rem);
      color: var(--spa-gold);
      margin-bottom: 1rem;
    }
 
    .spa-title-rule {
      height: 4px;
      width: 6rem;
      background: linear-gradient(to right, transparent, var(--spa-gold), transparent);
      margin: 0 auto 1.5rem;
      border: none;
    }
 
    .spa-membership-subtitle {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 1.125rem;
      max-width: 42rem;
      margin: 0 auto;
    }
 
    /* ── Column heading ────────────────────────────── */
    .spa-col-heading {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 2rem;
    }
 
    .spa-col-heading svg {
      width: 2rem;
      height: 2rem;
      stroke: var(--spa-gold);
      flex-shrink: 0;
    }
 
    .spa-col-title {
      font-family: 'Cinzel', serif;
      font-size: 1.875rem;
      color: var(--spa-gold);
      margin: 0;
    }
 
    /* ── Offer / Plan row card ─────────────────────── */
    .spa-plan-card {
      background: var(--spa-white-5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--spa-gold-20);
      border-radius: var(--radius);
      padding: 1.5rem;
      transition: border-color 0.3s ease;
    }
 
    .spa-plan-card:hover {
      border-color: var(--spa-gold-50);
    }
 
    .spa-plan-card.popular {
      border-color: var(--spa-gold);
      box-shadow: 0 8px 32px rgba(212, 175, 55, 0.30);
    }
 
    .spa-plan-label {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 0.875rem;
      margin-bottom: 0.25rem;
    }
 
    .spa-plan-value {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1.5rem;
      margin: 0;
    }
 
    .spa-plan-price {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1.875rem;
      margin: 0;
    }
 
    /* ── Most Popular badge ────────────────────────── */
    .spa-popular-badge {
      position: absolute;
      top: -0.75rem;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark);
      font-family: 'Poppins', sans-serif;
      font-size: 0.8125rem;
      font-weight: 500;
      padding: 0.25rem 1rem;
      border-radius: 9999px;
      white-space: nowrap;
    }
 
    /* ── Enquiry form card ─────────────────────────── */
    .spa-enquiry-card {
      background: var(--spa-white-5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--spa-gold-30);
      border-radius: 1rem;
      padding: 2rem;
    }
 
    .spa-enquiry-title {
      font-family: 'Cinzel', serif;
      font-size: 1.5rem;
      color: var(--spa-gold);
      text-align: center;
      margin-bottom: 1.5rem;
    }
 
    /* ── Form controls ─────────────────────────────── */
    .spa-form-label {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-80);
      display: block;
      margin-bottom: 0.5rem;
      font-size: 0.9375rem;
    }
 
    .spa-form-control {
      width: 100%;
      background: var(--spa-white-10) !important;
      border: 1px solid var(--spa-gold-30) !important;
      color: #ffffff !important;
      font-family: 'Poppins', sans-serif;
      border-radius: var(--radius) !important;
      padding: 0.625rem 0.875rem;
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
 
    .spa-form-control::placeholder {
      color: var(--spa-white-70);
    }
 
    .spa-form-control:focus {
      border-color: var(--spa-gold) !important;
      box-shadow: 0 0 0 2px var(--spa-gold-30) !important;
      background: var(--spa-white-10) !important;
      color: #ffffff !important;
    }
 
    /* Select option fallback */
    .spa-form-control option {
      background: var(--spa-dark);
      color: #ffffff;
    }
 
    /* ── Submit button ─────────────────────────────── */
    .spa-btn-submit {
      display: block;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark) !important;
      text-align: center;
      padding: 0.75rem 1rem;
      border-radius: 9999px;
      border: none;
      cursor: pointer;
      transition: box-shadow 0.3s ease, transform 0.2s ease;
    }
 
    .spa-btn-submit:hover {
      box-shadow: 0 8px 24px var(--spa-gold-50);
      transform: translateY(-1px);
    }
 
    /* ── Scroll reveal ─────────────────────────────── */
    .spa-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
 
    .spa-reveal.from-left  { transform: translateX(-30px); }
    .spa-reveal.from-right { transform: translateX( 30px); }
 
    .spa-reveal.visible {
      opacity: 1;
      transform: translate(0, 0);
    }

    /* ── Section ───────────────────────────────────── */
    .spa-gallery {
      position: relative;
      padding: 6rem 0;
      background: var(--spa-dark);
      overflow: hidden;
    }
 
    /* ── Ambient blob ──────────────────────────────── */
    .spa-blob-tr {
      position: absolute;
      top: 0;
      right: 0;
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    /* ── Section heading ───────────────────────────── */
    .spa-gallery-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 5vw, 3.25rem);
      color: var(--spa-gold);
      margin-bottom: 1rem;
    }
 
    .spa-title-rule {
      height: 4px;
      width: 6rem;
      background: linear-gradient(to right, transparent, var(--spa-gold), transparent);
      margin: 0 auto 1.5rem;
      border: none;
    }
 
    .spa-gallery-subtitle {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 1.125rem;
      max-width: 42rem;
      margin: 0 auto;
    }
 
    /* ── Masonry grid (CSS columns) ────────────────── */
    .spa-masonry {
      columns: 3;
      column-gap: 1rem;
    }
 
    @media (max-width: 767px) {
      .spa-masonry { columns: 1; }
    }
 
    @media (min-width: 768px) and (max-width: 991px) {
      .spa-masonry { columns: 2; }
    }
 
    /* ── Individual masonry item ───────────────────── */
    .spa-masonry-item {
      break-inside: avoid;
      margin-bottom: 1rem;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--spa-gold-20);
      border-radius: var(--radius);
      cursor: pointer;
      transition: border-color 0.3s ease;
    }
 
    .spa-masonry-item:hover {
      border-color: var(--spa-gold);
    }
 
    .spa-masonry-item img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.7s ease;
    }
 
    .spa-masonry-item:hover img {
      transform: scale(1.10);
    }
 
    /* ── Hover overlay ─────────────────────────────── */
    .spa-masonry-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--spa-dark-80) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
 
    .spa-masonry-item:hover .spa-masonry-overlay {
      opacity: 1;
    }
 
    /* ── Scroll reveal ─────────────────────────────── */
    .spa-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
 
    .spa-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
 
    .spa-masonry-item.spa-reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
 
    .spa-masonry-item.spa-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Section ───────────────────────────────────── */
    .spa-testimonials {
      position: relative;
      padding: 6rem 0;
      background: linear-gradient(to bottom, var(--spa-dark) 0%, var(--spa-mid) 100%);
      overflow: hidden;
    }
 
    /* ── Ambient blob ──────────────────────────────── */
    .spa-blob-br {
      position: absolute;
      bottom: 25%;
      right: 25%;
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    /* ── Section heading ───────────────────────────── */
    .spa-testimonials-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 5vw, 3.25rem);
      color: var(--spa-gold);
      margin-bottom: 1rem;
    }
 
    .spa-title-rule {
      height: 4px;
      width: 6rem;
      background: linear-gradient(to right, transparent, var(--spa-gold), transparent);
      margin: 0 auto 1.5rem;
      border: none;
    }
 
    .spa-testimonials-subtitle {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 1.125rem;
      max-width: 42rem;
      margin: 0 auto;
    }
 
    /* ── Card ──────────────────────────────────────── */
    .spa-testimonial-card {
      position: relative;
      background: var(--spa-white-5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--spa-gold-20);
      border-radius: var(--radius);
      padding: 2rem;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
      margin-bottom: 40px;
      margin-top: 20px;
      margin-left: 20px;
    }
 
    .spa-testimonial-card:hover {
      border-color: var(--spa-gold-50);
      box-shadow: 0 16px 48px rgba(212, 175, 55, 0.10);
      transform: translateY(-3px);
    }
 
    /* ── Quote icon bubble ─────────────────────────── */
    .spa-quote-bubble {
      position: absolute;
      top: -1rem;
      left: -1rem;
      width: 3rem;
      height: 3rem;
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 
    .spa-quote-bubble svg {
      width: 1.5rem;
      height: 1.5rem;
      stroke: var(--spa-dark);
    }
 
    /* ── Stars ─────────────────────────────────────── */
    .spa-stars {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      margin-bottom: 1rem;
    }
 
    .spa-stars svg {
      width: 1.25rem;
      height: 1.25rem;
      stroke: var(--spa-gold);
      fill: var(--spa-gold);
    }
 
    /* ── Review text ───────────────────────────────── */
    .spa-review-text {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-80);
      font-style: italic;
      line-height: 1.8;
      margin-bottom: 1.5rem;
    }
 
    /* ── Author row ────────────────────────────────── */
    .spa-author {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
 
    .spa-author-avatar {
      width: 3rem;
      height: 3rem;
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .spa-author-initial {
      font-family: 'Cinzel', serif;
      font-size: 1.125rem;
      color: var(--spa-dark);
      line-height: 1;
    }
 
    .spa-author-name {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-gold);
      font-weight: 500;
      margin: 0;
    }
 
    .spa-author-tag {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-50);
      font-size: 0.8125rem;
      margin: 0;
    }
 
    /* ── Scroll reveal ─────────────────────────────── */
    .spa-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
 
    .spa-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Section ───────────────────────────────────── */
    .spa-contact {
      position: relative;
      padding: 6rem 0;
      background: var(--spa-dark);
      overflow: hidden;
    }
 
    /* ── Ambient blob ──────────────────────────────── */
    .spa-blob-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    /* ── Section heading ───────────────────────────── */
    .spa-contact-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 5vw, 3.25rem);
      color: var(--spa-gold);
      margin-bottom: 1rem;
    }
 
    .spa-title-rule {
      height: 4px;
      width: 6rem;
      background: linear-gradient(to right, transparent, var(--spa-gold), transparent);
      margin: 0 auto 1.5rem;
      border: none;
    }
 
    .spa-contact-subtitle {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      font-size: 1.125rem;
      max-width: 42rem;
      margin: 0 auto;
    }
 
    /* ── Form card ─────────────────────────────────── */
    .spa-form-card {
      background: var(--spa-white-5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--spa-gold-30);
      border-radius: 1rem;
      padding: 2rem;
    }
 
    .spa-form-card-title {
      font-family: 'Cinzel', serif;
      font-size: 1.5rem;
      color: var(--spa-gold);
      margin-bottom: 1.5rem;
    }
 
    /* ── Form controls ─────────────────────────────── */
    .spa-form-label {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-80);
      display: block;
      margin-bottom: 0.5rem;
      font-size: 0.9375rem;
    }
 
    .spa-form-control {
      width: 100%;
      background: var(--spa-white-10) !important;
      border: 1px solid var(--spa-gold-30) !important;
      color: #ffffff !important;
      font-family: 'Poppins', sans-serif;
      border-radius: var(--radius) !important;
      padding: 0.625rem 0.875rem;
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      resize: vertical;
    }
 
    .spa-form-control::placeholder {
      color: var(--spa-white-70);
    }
 
    .spa-form-control:focus {
      border-color: var(--spa-gold) !important;
      box-shadow: 0 0 0 2px var(--spa-gold-30) !important;
      background: var(--spa-white-10) !important;
      color: #ffffff !important;
    }
 
    /* ── Submit button ─────────────────────────────── */
    .spa-btn-submit {
      display: block;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      background: linear-gradient(90deg, var(--spa-gold), var(--spa-gold-light));
      color: var(--spa-dark) !important;
      text-align: center;
      padding: 0.75rem 1rem;
      border-radius: 9999px;
      border: none;
      cursor: pointer;
      transition: box-shadow 0.3s ease, transform 0.2s ease;
    }
 
    .spa-btn-submit:hover {
      box-shadow: 0 8px 24px var(--spa-gold-50);
      transform: translateY(-1px);
    }
 
    /* ── Info cards ────────────────────────────────── */
    .spa-info-card {
      background: var(--spa-white-5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--spa-gold-20);
      border-radius: var(--radius);
      padding: 1.5rem;
      transition: border-color 0.3s ease;
    }
 
    .spa-info-card:hover {
      border-color: var(--spa-gold-50);
    }
 
    /* ── Icon bubble ───────────────────────────────── */
    .spa-icon-bubble {
      width: 3rem;
      height: 3rem;
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .spa-icon-bubble svg {
      width: 1.5rem;
      height: 1.5rem;
      stroke: var(--spa-dark);
    }
 
    /* ── Info card text ────────────────────────────── */
    .spa-info-heading {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      color: var(--spa-gold);
      margin-bottom: 0.5rem;
    }
 
    .spa-info-body {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      line-height: 1.7;
      margin: 0;
    }
 
    .spa-info-link {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-70);
      text-decoration: none;
      transition: color 0.3s ease;
    }
 
    .spa-info-link:hover {
      color: var(--spa-gold);
    }
 
    /* ── Map wrapper ───────────────────────────────── */
    .spa-map-wrap {
      background: var(--spa-white-5);
      border: 1px solid var(--spa-gold-20);
      border-radius: var(--radius);
      overflow: hidden;
    }
 
    .spa-map-wrap iframe {
      display: block;
      width: 100%;
      height: 300px;
      border: 0;
    }
 
    /* ── Scroll reveal ─────────────────────────────── */
    .spa-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
 
    .spa-reveal.from-left  { transform: translateX(-30px); }
    .spa-reveal.from-right { transform: translateX( 30px); }
 
    .spa-reveal.visible {
      opacity: 1;
      transform: translate(0, 0);
    }

    /* ── Footer shell ──────────────────────────────── */
    .spa-footer {
      position: relative;
      background: var(--spa-darkest);
      border-top: 1px solid var(--spa-gold-20);
      overflow: hidden;
    }
 
    /* ── Ambient blob ──────────────────────────────── */
    .spa-blob-bl {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 24rem;
      height: 24rem;
      background: var(--spa-gold);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.05;
      pointer-events: none;
    }
 
    /* ── Logo mark ─────────────────────────────────── */
    .spa-footer-logo-circle {
      width: 3rem;
      height: 3rem;
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .spa-footer-logo-letter {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--spa-dark);
      line-height: 1;
    }
 
    .spa-footer-brand-name {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1.25rem;
      margin: 0;
      line-height: 1.2;
    }
 
    .spa-footer-brand-tag {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-gold-70);
      font-size: 0.75rem;
      margin: 0;
    }
 
    .spa-footer-desc {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-60);
      font-size: 0.875rem;
      line-height: 1.7;
      margin: 0;
    }
 
    /* ── Column headings ───────────────────────────── */
    .spa-footer-col-title {
      font-family: 'Cinzel', serif;
      color: var(--spa-gold);
      font-size: 1rem;
      margin-bottom: 1rem;
    }
 
    /* ── Nav / therapy lists ───────────────────────── */
    .spa-footer-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
 
    .spa-footer-link {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-60);
      font-size: 0.875rem;
      text-decoration: none;
      transition: color 0.3s ease;
    }
 
    .spa-footer-link:hover {
      color: var(--spa-gold);
    }
 
    /* ── Contact info list ─────────────────────────── */
    .spa-footer-contact-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
 
    .spa-footer-contact-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }
 
    .spa-footer-contact-list svg {
      width: 1.25rem;
      height: 1.25rem;
      stroke: var(--spa-gold);
      flex-shrink: 0;
      margin-top: 2px;
    }
 
    .spa-contact-text {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-60);
      font-size: 0.875rem;
      line-height: 1.6;
      margin: 0;
    }
 
    /* ── Bottom bar ────────────────────────────────── */
    .spa-footer-bottom {
      border-top: 1px solid var(--spa-gold-20);
      padding-top: 2rem;
    }
 
    .spa-footer-copy {
      font-family: 'Poppins', sans-serif;
      color: var(--spa-white-50);
      font-size: 0.875rem;
      margin: 0;
    }
 
    .spa-footer-legal {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    swiper-container::part(bullet-active) {
    background: #fff !important;
    width: 48px !important;
    height: 12px;
    border-radius: 99999px;
}
swiper-container::part(bullet) {
    background: #ddd !important;
    opacity: 1 !important;
}
.mySwiper::part(pagination){
    text-align: center; 
    bottom: 0px;
}

 /* ── Floating wrapper ──────────────────────────── */
    .spa-float-wrap {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 50;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
 
    /* ── Shared FAB base ───────────────────────────── */
    .spa-fab {
      position: relative;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
 
    .spa-fab:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
      transform: scale(1.10);
    }
 
    .spa-fab svg {
      width: 2rem;
      height: 2rem;
    }
 
    /* ── WhatsApp FAB ──────────────────────────────── */
    .spa-fab-whatsapp {
      background: linear-gradient(135deg, var(--spa-whatsapp-from), var(--spa-whatsapp-to));
    }
 
    .spa-fab-whatsapp svg {
      stroke: #ffffff;
    }
 
    /* ── Call FAB ──────────────────────────────────── */
    .spa-fab-call {
      background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold-light));
      animation: spa-pulse 2s ease-in-out infinite;
    }
 
    .spa-fab-call svg {
      stroke: var(--spa-dark);
    }
 
    .spa-fab-call:hover {
      animation-play-state: paused;
    }
 
    @keyframes spa-pulse {
      0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 0 var(--spa-gold-50); }
      50%       { box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 10px rgba(212,175,55,0); }
    }
 
    /* ── Tooltip label ─────────────────────────────── */
    .spa-fab-tooltip {
      position: absolute;
      right: calc(100% + 0.75rem);
      top: 50%;
      transform: translateY(-50%);
      background: var(--spa-dark);
      color: #ffffff;
      font-family: 'Poppins', sans-serif;
      font-size: 0.875rem;
      white-space: nowrap;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
 
    /* Tooltip arrow pointing right */
    .spa-fab-tooltip::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -6px;
      transform: translateY(-50%);
      border-width: 6px 0 6px 6px;
      border-style: solid;
      border-color: transparent transparent transparent var(--spa-dark);
    }
 
    .spa-fab:hover .spa-fab-tooltip {
      opacity: 1;
    }
    /* ── Breadcrumb ──────────────────────────────────────────────── */
    .spa-breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .spa-breadcrumb li {
      font-family: 'Poppins', sans-serif;
      font-size: 0.8rem;
      font-weight: var(--font-weight-medium);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--spa-white-70);
    }
    .spa-breadcrumb li a {
      color: var(--spa-gold-70);
      text-decoration: none;
      transition: color 0.2s;
    }
    .spa-breadcrumb li a:hover {
      color: var(--spa-gold);
    }
    .spa-breadcrumb li.active {
      color: var(--spa-gold);
    }
    .spa-breadcrumb-sep {
      color: var(--spa-gold-50);
      font-size: 0.65rem;
    }
 
    /* ── Page Hero ───────────────────────────────────────────────── */
    .page-hero {
      position: relative;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
 
    /* Background image */
    .page-hero__bg {
      position: absolute;
      inset: 0;
    }
    .page-hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
 
    /* Gradient overlay — mirrors: from-[#1a0a2e]/90 via-[#1a0a2e]/80 to-[#1a0a2e] */
    .page-hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        var(--spa-dark-95) 0%,
        var(--spa-dark-80) 50%,
        var(--spa-dark)    100%
      );
    }
 
    /* Decorative SVG corners */
    .page-hero__deco {
      position: absolute;
      opacity: 0.2;
    }
    .page-hero__deco--tl { top: 2rem; left: 2rem; }
    .page-hero__deco--br { bottom: 2rem; right: 2rem; transform: rotate(180deg); }
 
    /* Inner content */
    .page-hero__content {
      position: relative;
      z-index: 10;
      text-align: center;
      padding: 0 1rem;
      max-width: 900px;
    }
 
    /* Animated fade-up — pure CSS equivalent of motion initial/animate */
    .page-hero__animate {
      animation: heroFadeUp 0.8s ease forwards;
      opacity: 0;
    }
    @keyframes heroFadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0);    }
    }
 
    /* Hero title */
    .page-hero__title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2.5rem, 6vw, 4rem);
      color: var(--spa-gold);
      letter-spacing: 0.06em;
      margin-bottom: 1rem;
      line-height: 1.1;
    }
 
    /* Subtitle row with flanking lines */
    .page-hero__subtitle-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 1rem;
    }
    .page-hero__subtitle-line {
      flex: 0 0 80px;
      height: 1px;
    }
    .page-hero__subtitle-line--left  { background: linear-gradient(to right,  transparent, var(--spa-gold)); }
    .page-hero__subtitle-line--right { background: linear-gradient(to left,   transparent, var(--spa-gold)); }
    .page-hero__subtitle {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1rem, 2.5vw, 1.4rem);
      color: var(--spa-white-90);
      padding: 0 1.5rem;
      margin: 0;
      white-space: nowrap;
    }

    .spa-card-benefits {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.spa-card-benefits li {
  font-size: 0.9rem;
  color: #d6d6d6;
  margin-bottom: 5px;
  position: relative;
  padding-left: 18px;
}

.spa-card-benefits li::before {
  content: "✔";
  color: #d4af37;
  position: absolute;
  left: 0;
}

.spa-card-bestfor {
  font-size: 0.85rem;
  color: #b8b8b8;
}

 .footer-social {
        display: flex;
        align-items: center;
        gap: 12px;
    }
 
    .footer-social .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--spa-gold-10);
        border: 1px solid var(--spa-gold-30);
        color: var(--spa-gold);
        font-size: 16px;
        text-decoration: none;
        transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    }
 
    .footer-social .social-link:hover {
        background: var(--spa-gold-20);
        border-color: var(--spa-gold-70);
        color: var(--spa-gold-light);
        transform: translateY(-3px);
    }
 
    .footer-social .social-link.whatsapp {
        background: linear-gradient(135deg, var(--spa-whatsapp-from), var(--spa-whatsapp-to));
        border-color: transparent;
        color: #fff;
    }
 
    .footer-social .social-link.whatsapp:hover {
        background: linear-gradient(135deg, var(--spa-whatsapp-to), var(--spa-whatsapp-from));
        border-color: transparent;
        color: #fff;
    }