/**
 * Sneha MUA — "The Bridal Night Sky" Design System & Layout Engine
 * Version: 2.2.0
 * Author: PropelionVentures LLP
 */

/* ── 1. CSS Custom Properties / Design Tokens ─────────────────────── */
:root {
  color-scheme: dark;
  /* Primary Dark Luxury Palette (Bridged to WPC Brand Colors) */
  --plum-primary: var(--brand-color-primary, #2D1B35);
  --plum-midnight: var(--brand-color-bg-dark, #1A0F22);
  --plum-royal: var(--brand-color-bg-tertiary, #3D2648);
  --plum-card: rgba(45, 27, 53, 0.75);

  /* Accent Metallics */
  --rose-gold: var(--brand-color-secondary, #C9956A);
  --rose-gold-light: var(--brand-color-secondary-light, #DEB48A);
  --rose-gold-glow: rgba(201, 149, 106, 0.35);
  --champagne: var(--brand-color-accent, #F4DEC8);
  --champagne-light: var(--brand-color-champagne-light, #F5D7B5);
  --champagne-soft: var(--brand-color-champagne-soft, #F3DFCE);
  --warm-gold: var(--brand-color-warning, #E8C870);

  /* Neutral Silk Backdrops */
  --ivory-silk: #FAF6F1;
  --linen: var(--brand-color-bg-secondary, #F2EBE0);
  --warm-white: var(--brand-color-bg-white, #FEFCF9);
  --warm-white-soft: var(--brand-color-warm-white-soft, #FFF5EB);
  --pure-white: var(--brand-color-text-white, #FFFFFF);
  --plum-deep: var(--brand-color-bg-deep, #120A18);

  /* Unified Homogeneous Dark Hero Canvas (Matches pitch-black photography shadows) */
  --plum-canvas: #0c0711;
  --plum-canvas-a95: rgba(12, 7, 17, 0.95);
  --plum-canvas-a95: color-mix(in srgb, var(--plum-canvas, #0c0711) 95%, transparent);
  --plum-canvas-a90: rgba(12, 7, 17, 0.90);
  --plum-canvas-a90: color-mix(in srgb, var(--plum-canvas, #0c0711) 90%, transparent);
  --plum-canvas-a80: rgba(12, 7, 17, 0.80);
  --plum-canvas-a80: color-mix(in srgb, var(--plum-canvas, #0c0711) 80%, transparent);
  --plum-canvas-a60: rgba(12, 7, 17, 0.60);
  --plum-canvas-a60: color-mix(in srgb, var(--plum-canvas, #0c0711) 60%, transparent);
  --plum-canvas-a40: rgba(12, 7, 17, 0.40);
  --plum-canvas-a40: color-mix(in srgb, var(--plum-canvas, #0c0711) 40%, transparent);
  --plum-canvas-a20: rgba(12, 7, 17, 0.20);
  --plum-canvas-a20: color-mix(in srgb, var(--plum-canvas, #0c0711) 20%, transparent);
  --plum-canvas-a05: rgba(12, 7, 17, 0.05);
  --plum-canvas-a05: color-mix(in srgb, var(--plum-canvas, #0c0711) 5%, transparent);
  --plum-canvas-a00: rgba(12, 7, 17, 0);
  --plum-canvas-a00: color-mix(in srgb, var(--plum-canvas, #0c0711) 0%, transparent);
  /* ── Derived brand alpha tokens ──────────────────────────────
     Each translucent brand tint, defined once, so a palette change
     propagates everywhere. Literal rgba first so browsers without
     color-mix keep the exact original value; the color-mix line
     makes the tint track the palette token on modern browsers. */
  --rose-gold-a05: rgba(201, 149, 106, 0.05);
  --rose-gold-a05: color-mix(in srgb, var(--rose-gold) 5%, transparent);
  --rose-gold-a08: rgba(201, 149, 106, 0.08);
  --rose-gold-a08: color-mix(in srgb, var(--rose-gold) 8%, transparent);
  --rose-gold-a10: rgba(201, 149, 106, 0.1);
  --rose-gold-a10: color-mix(in srgb, var(--rose-gold) 10%, transparent);
  --rose-gold-a12: rgba(201, 149, 106, 0.12);
  --rose-gold-a12: color-mix(in srgb, var(--rose-gold) 12%, transparent);
  --rose-gold-a14: rgba(201, 149, 106, 0.14);
  --rose-gold-a14: color-mix(in srgb, var(--rose-gold) 14%, transparent);
  --rose-gold-a15: rgba(201, 149, 106, 0.15);
  --rose-gold-a15: color-mix(in srgb, var(--rose-gold) 15%, transparent);
  --rose-gold-a16: rgba(201, 149, 106, 0.16);
  --rose-gold-a16: color-mix(in srgb, var(--rose-gold) 16%, transparent);
  --rose-gold-a18: rgba(201, 149, 106, 0.18);
  --rose-gold-a18: color-mix(in srgb, var(--rose-gold) 18%, transparent);
  --rose-gold-a20: rgba(201, 149, 106, 0.2);
  --rose-gold-a20: color-mix(in srgb, var(--rose-gold) 20%, transparent);
  --rose-gold-a22: rgba(201, 149, 106, 0.22);
  --rose-gold-a22: color-mix(in srgb, var(--rose-gold) 22%, transparent);
  --rose-gold-a24: rgba(201, 149, 106, 0.24);
  --rose-gold-a24: color-mix(in srgb, var(--rose-gold) 24%, transparent);
  --rose-gold-a25: rgba(201, 149, 106, 0.25);
  --rose-gold-a25: color-mix(in srgb, var(--rose-gold) 25%, transparent);
  --rose-gold-a28: rgba(201, 149, 106, 0.28);
  --rose-gold-a28: color-mix(in srgb, var(--rose-gold) 28%, transparent);
  --rose-gold-a30: rgba(201, 149, 106, 0.3);
  --rose-gold-a30: color-mix(in srgb, var(--rose-gold) 30%, transparent);
  --rose-gold-a32: rgba(201, 149, 106, 0.32);
  --rose-gold-a32: color-mix(in srgb, var(--rose-gold) 32%, transparent);
  --rose-gold-a35: rgba(201, 149, 106, 0.35);
  --rose-gold-a35: color-mix(in srgb, var(--rose-gold) 35%, transparent);
  --rose-gold-a38: rgba(201, 149, 106, 0.38);
  --rose-gold-a38: color-mix(in srgb, var(--rose-gold) 38%, transparent);
  --rose-gold-a40: rgba(201, 149, 106, 0.4);
  --rose-gold-a40: color-mix(in srgb, var(--rose-gold) 40%, transparent);
  --rose-gold-a45: rgba(201, 149, 106, 0.45);
  --rose-gold-a45: color-mix(in srgb, var(--rose-gold) 45%, transparent);
  --rose-gold-a48: rgba(201, 149, 106, 0.48);
  --rose-gold-a48: color-mix(in srgb, var(--rose-gold) 48%, transparent);
  --rose-gold-a50: rgba(201, 149, 106, 0.5);
  --rose-gold-a50: color-mix(in srgb, var(--rose-gold) 50%, transparent);
  --rose-gold-a55: rgba(201, 149, 106, 0.55);
  --rose-gold-a55: color-mix(in srgb, var(--rose-gold) 55%, transparent);
  --rose-gold-a60: rgba(201, 149, 106, 0.6);
  --rose-gold-a60: color-mix(in srgb, var(--rose-gold) 60%, transparent);
  --rose-gold-a70: rgba(201, 149, 106, 0.7);
  --rose-gold-a70: color-mix(in srgb, var(--rose-gold) 70%, transparent);
  --rose-gold-a85: rgba(201, 149, 106, 0.85);
  --rose-gold-a85: color-mix(in srgb, var(--rose-gold) 85%, transparent);
  --plum-midnight-a00: rgba(26, 15, 34, 0);
  --plum-midnight-a00: color-mix(in srgb, var(--plum-midnight) 0%, transparent);
  --plum-midnight-a05: rgba(26, 15, 34, 0.05);
  --plum-midnight-a05: color-mix(in srgb, var(--plum-midnight) 5%, transparent);
  --plum-midnight-a20: rgba(26, 15, 34, 0.2);
  --plum-midnight-a20: color-mix(in srgb, var(--plum-midnight) 20%, transparent);
  --plum-midnight-a22: rgba(26, 15, 34, 0.22);
  --plum-midnight-a22: color-mix(in srgb, var(--plum-midnight) 22%, transparent);
  --plum-midnight-a25: rgba(26, 15, 34, 0.25);
  --plum-midnight-a25: color-mix(in srgb, var(--plum-midnight) 25%, transparent);
  --plum-midnight-a40: rgba(26, 15, 34, 0.4);
  --plum-midnight-a40: color-mix(in srgb, var(--plum-midnight) 40%, transparent);
  --plum-midnight-a50: rgba(26, 15, 34, 0.5);
  --plum-midnight-a50: color-mix(in srgb, var(--plum-midnight) 50%, transparent);
  --plum-midnight-a60: rgba(26, 15, 34, 0.6);
  --plum-midnight-a60: color-mix(in srgb, var(--plum-midnight) 60%, transparent);
  --plum-midnight-a65: rgba(26, 15, 34, 0.65);
  --plum-midnight-a65: color-mix(in srgb, var(--plum-midnight) 65%, transparent);
  --plum-midnight-a70: rgba(26, 15, 34, 0.7);
  --plum-midnight-a70: color-mix(in srgb, var(--plum-midnight) 70%, transparent);
  --plum-midnight-a75: rgba(26, 15, 34, 0.75);
  --plum-midnight-a75: color-mix(in srgb, var(--plum-midnight) 75%, transparent);
  --plum-midnight-a80: rgba(26, 15, 34, 0.8);
  --plum-midnight-a80: color-mix(in srgb, var(--plum-midnight) 80%, transparent);
  --plum-midnight-a85: rgba(26, 15, 34, 0.85);
  --plum-midnight-a85: color-mix(in srgb, var(--plum-midnight) 85%, transparent);
  --plum-midnight-a88: rgba(26, 15, 34, 0.88);
  --plum-midnight-a88: color-mix(in srgb, var(--plum-midnight) 88%, transparent);
  --plum-midnight-a90: rgba(26, 15, 34, 0.9);
  --plum-midnight-a90: color-mix(in srgb, var(--plum-midnight) 90%, transparent);
  --plum-midnight-a92: rgba(26, 15, 34, 0.92);
  --plum-midnight-a92: color-mix(in srgb, var(--plum-midnight) 92%, transparent);
  --plum-midnight-a94: rgba(26, 15, 34, 0.94);
  --plum-midnight-a94: color-mix(in srgb, var(--plum-midnight) 94%, transparent);
  --plum-midnight-a95: rgba(26, 15, 34, 0.95);
  --plum-midnight-a95: color-mix(in srgb, var(--plum-midnight) 95%, transparent);
  --plum-midnight-a96: rgba(26, 15, 34, 0.96);
  --plum-midnight-a96: color-mix(in srgb, var(--plum-midnight) 96%, transparent);
  --plum-midnight-a98: rgba(26, 15, 34, 0.98);
  --plum-midnight-a98: color-mix(in srgb, var(--plum-midnight) 98%, transparent);
  --plum-midnight-a100: rgba(26, 15, 34, 1);
  --plum-midnight-a100: color-mix(in srgb, var(--plum-midnight) 100%, transparent);
  --rose-gold-light-a06: rgba(222, 180, 138, 0.06);
  --rose-gold-light-a06: color-mix(in srgb, var(--rose-gold-light) 6%, transparent);
  --rose-gold-light-a12: rgba(222, 180, 138, 0.12);
  --rose-gold-light-a12: color-mix(in srgb, var(--rose-gold-light) 12%, transparent);
  --rose-gold-light-a14: rgba(222, 180, 138, 0.14);
  --rose-gold-light-a14: color-mix(in srgb, var(--rose-gold-light) 14%, transparent);
  --rose-gold-light-a20: rgba(222, 180, 138, 0.2);
  --rose-gold-light-a20: color-mix(in srgb, var(--rose-gold-light) 20%, transparent);
  --rose-gold-light-a22: rgba(222, 180, 138, 0.22);
  --rose-gold-light-a22: color-mix(in srgb, var(--rose-gold-light) 22%, transparent);
  --rose-gold-light-a24: rgba(222, 180, 138, 0.24);
  --rose-gold-light-a24: color-mix(in srgb, var(--rose-gold-light) 24%, transparent);
  --rose-gold-light-a25: rgba(222, 180, 138, 0.25);
  --rose-gold-light-a25: color-mix(in srgb, var(--rose-gold-light) 25%, transparent);
  --rose-gold-light-a28: rgba(222, 180, 138, 0.28);
  --rose-gold-light-a28: color-mix(in srgb, var(--rose-gold-light) 28%, transparent);
  --rose-gold-light-a30: rgba(222, 180, 138, 0.3);
  --rose-gold-light-a30: color-mix(in srgb, var(--rose-gold-light) 30%, transparent);
  --rose-gold-light-a32: rgba(222, 180, 138, 0.32);
  --rose-gold-light-a32: color-mix(in srgb, var(--rose-gold-light) 32%, transparent);
  --rose-gold-light-a34: rgba(222, 180, 138, 0.34);
  --rose-gold-light-a34: color-mix(in srgb, var(--rose-gold-light) 34%, transparent);
  --rose-gold-light-a35: rgba(222, 180, 138, 0.35);
  --rose-gold-light-a35: color-mix(in srgb, var(--rose-gold-light) 35%, transparent);
  --rose-gold-light-a40: rgba(222, 180, 138, 0.4);
  --rose-gold-light-a40: color-mix(in srgb, var(--rose-gold-light) 40%, transparent);
  --rose-gold-light-a45: rgba(222, 180, 138, 0.45);
  --rose-gold-light-a45: color-mix(in srgb, var(--rose-gold-light) 45%, transparent);
  --rose-gold-light-a60: rgba(222, 180, 138, 0.6);
  --rose-gold-light-a60: color-mix(in srgb, var(--rose-gold-light) 60%, transparent);
  --rose-gold-light-a70: rgba(222, 180, 138, 0.7);
  --rose-gold-light-a70: color-mix(in srgb, var(--rose-gold-light) 70%, transparent);
  --rose-gold-light-a75: rgba(222, 180, 138, 0.75);
  --rose-gold-light-a75: color-mix(in srgb, var(--rose-gold-light) 75%, transparent);
  --rose-gold-light-a80: rgba(222, 180, 138, 0.8);
  --rose-gold-light-a80: color-mix(in srgb, var(--rose-gold-light) 80%, transparent);
  --plum-primary-a40: rgba(45, 27, 53, 0.4);
  --plum-primary-a40: color-mix(in srgb, var(--plum-primary) 40%, transparent);
  --plum-primary-a45: rgba(45, 27, 53, 0.45);
  --plum-primary-a45: color-mix(in srgb, var(--plum-primary) 45%, transparent);
  --plum-primary-a55: rgba(45, 27, 53, 0.55);
  --plum-primary-a55: color-mix(in srgb, var(--plum-primary) 55%, transparent);
  --plum-primary-a65: rgba(45, 27, 53, 0.65);
  --plum-primary-a65: color-mix(in srgb, var(--plum-primary) 65%, transparent);
  --plum-primary-a70: rgba(45, 27, 53, 0.7);
  --plum-primary-a70: color-mix(in srgb, var(--plum-primary) 70%, transparent);
  --plum-primary-a72: rgba(45, 27, 53, 0.72);
  --plum-primary-a72: color-mix(in srgb, var(--plum-primary) 72%, transparent);
  --plum-primary-a90: rgba(45, 27, 53, 0.9);
  --plum-primary-a90: color-mix(in srgb, var(--plum-primary) 90%, transparent);
  --champagne-a08: rgba(244, 222, 200, 0.08);
  --champagne-a08: color-mix(in srgb, var(--champagne) 8%, transparent);
  --champagne-a15: rgba(244, 222, 200, 0.15);
  --champagne-a15: color-mix(in srgb, var(--champagne) 15%, transparent);
  --champagne-a22: rgba(244, 222, 200, 0.22);
  --champagne-a22: color-mix(in srgb, var(--champagne) 22%, transparent);
  --champagne-a70: rgba(244, 222, 200, 0.7);
  --champagne-a70: color-mix(in srgb, var(--champagne) 70%, transparent);

  /* Text System */
  --text-dark: var(--brand-color-text-dark, #1C1010);
  /* Override plugin's muted token to meet 4.5:1 on plum (#2D1B35) */
  --brand-color-text-muted: #C5A99B;
  --text-muted: var(--brand-color-text-muted, #C5A99B);
  --text-dusty: var(--brand-color-text-muted, #C5A99B);
  --text-light: var(--brand-color-text-light, #F8F4F0);
  --text-light-muted: rgba(248, 244, 240, 0.82);

  /* Typography */
  --font-display: var(--wpc-font-display, 'Cormorant Garamond', Georgia, serif);
  --font-body: var(--wpc-font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --font-script: 'Great Vibes', cursive;

  /* Spacing Grid (8px) */
  --space-xs: 0.5rem;
  /* 8px */
  --space-sm: 1rem;
  /* 16px */
  --space-md: 1.5rem;
  /* 24px */
  --space-lg: 3rem;
  /* 48px */
  --space-xl: 6rem;
  /* 96px */
  --space-2xl: 8rem;
  /* 128px */

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(26, 15, 34, 0.08);
  --shadow-md: 0 8px 24px rgba(26, 15, 34, 0.12);
  --shadow-lg: 0 16px 40px rgba(26, 15, 34, 0.18);
  --shadow-rose: 0 8px 25px rgba(201, 149, 106, 0.28);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Transitions */
  --ease-elegant: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-mid: 300ms;
  --duration-slow: 600ms;

  /* Layout */
  --max-width: 1320px;
  --header-height: 80px;
  --whn-height-desk: 80px;
  --whn-height-tab: 70px;
  --whn-height-mob: 64px;
  --wab-height: 36px;
  --mobile-bottom-bar-height: 64px;
}

/* ── 2. Reset & Baseline ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  background-color: var(--plum-darkest, #0d0612);
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-light);
  background-color: var(--plum-darkest, #0d0612);
  line-height: 1.65;
  overflow-x: clip;
  padding-bottom: 0;
  overscroll-behavior-y: none;
}

/* Guard: Closed <details> elements must strictly never render children or leak overflow into page height */
details:not([open])> :not(summary) {
  display: none !important;
}

/* ── 2b. Accessibility Skip Link & Screen Reader Utilities ───────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 99999;
  background: var(--plum-midnight, #1A0F22);
  color: var(--champagne, #FAF6F1);
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--rose-gold, #C9956A);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease-in-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--rose-gold-light, #DEB48A);
  outline-offset: 2px;
}

.screen-reader-text,
.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--plum-midnight, #1A0F22);
  border-radius: 6px;
  box-shadow: 0 0 12px var(--rose-gold-a60);
  clip: auto !important;
  clip-path: none;
  color: var(--champagne, #FAF6F1);
  display: block;
  font-size: 0.95rem;
  height: auto;
  left: 1rem;
  line-height: normal;
  padding: 1rem 1.5rem;
  text-decoration: none;
  top: 1rem;
  width: auto;
  z-index: 100000;
}

/* Body bottom padding matches the dock breakpoint (767.98px).
   Tablets at 768px+ no longer need to reserve dock space because
   the dock is hidden at that width (see section 17 below). */
@media (max-width: 767.98px) {
  body {
    padding-bottom: var(--mobile-bottom-bar-height);
  }
}

img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-elegant);
}

button,
input,
select,
textarea {
  font: inherit;
}

.sneha-container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

/* ── 3. Typography Styles ────────────────────────────────────────── */
.font-display {
  font-family: var(--font-display);
}

.font-script {
  font-family: var(--font-script);
}

.font-body {
  font-family: var(--font-body);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  color: var(--rose-gold-light) !important;
  text-shadow: 0 0 20px var(--rose-gold-light-a40);
  margin-bottom: 0.4rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-light, #FAF6F1);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

[id],
section[id],
div[id],
:target,
.transformation-section,
.portfolio-section,
.instagram-showcase-section,
.packages-section,
.privilege-pass-section,
.why-choose-section,
.journey-section,
.testimonials-section,
.booking-section,
.saaya-checker-section,
.coverage-bar-section,
.faq-section {
  scroll-margin-top: calc(var(--whn-height, 80px) + 52px);
}

@media (max-width: 991.98px) {

  [id],
  :target,
  .transformation-section,
  .portfolio-section,
  .instagram-showcase-section,
  .packages-section,
  .privilege-pass-section,
  .why-choose-section,
  .journey-section,
  .testimonials-section,
  .booking-section,
  .saaya-checker-section,
  .coverage-bar-section,
  .faq-section {
    scroll-margin-top: calc(var(--whn-height-mob, 64px) + 24px) !important;
  }
}

.section-title.text-light {
  color: var(--text-light);
}

.section-desc {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--text-muted);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.section-desc.text-light {
  color: var(--text-light-muted);
}

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

/* ── 4. Buttons & Interactive UI ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--btn-pad-y, 0.9rem) var(--btn-pad-x, 2rem);
  border-radius: var(--btn-radius, 9999px);
  font-weight: var(--btn-weight, 600);
  font-size: var(--btn-font, 0.95rem);
  letter-spacing: var(--btn-tracking, 0.03em);
  text-transform: none;
  min-height: var(--btn-min-h, 48px);
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--duration-mid) var(--ease-elegant);
  white-space: nowrap;
}

.btn-sm {
  font-size: var(--btn-sm-font, 0.86rem);
  padding: var(--btn-sm-pad-y, 0.75rem) var(--btn-sm-pad-x, 1.35rem);
  min-height: var(--btn-sm-min-h, 44px);
}

.btn-xs {
  font-size: var(--btn-xs-font, 0.76rem);
  padding: var(--btn-xs-pad-y, 0.42rem) var(--btn-xs-pad-x, 0.85rem);
  min-height: 36px;
}

.btn-block {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.btn-rose-gold,
[data-theme="dark"] .btn-rose-gold,
[data-theme="dark"] a.btn-rose-gold {
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%);
  color: var(--plum-midnight, #1A0F22) !important;
  -webkit-text-fill-color: var(--plum-midnight, #1A0F22) !important;
  font-weight: 600;
  box-shadow: var(--shadow-rose);
  border: 1px solid rgba(255, 255, 255, 0.22);
  position: relative;
}

.btn-rose-gold:hover,
[data-theme="dark"] .btn-rose-gold:hover,
[data-theme="dark"] a.btn-rose-gold:hover {
  background: linear-gradient(135deg, var(--champagne-light) 0%, var(--rose-gold-light) 50%, var(--rose-gold) 100%);
  color: var(--plum-midnight, #1A0F22) !important;
  -webkit-text-fill-color: var(--plum-midnight, #1A0F22) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--rose-gold-a45);
}

.btn-outline-light {
  background: var(--plum-midnight-a70) !important;
  border: 1.5px solid var(--rose-gold-a55) !important;
  color: var(--champagne, #F4DEC8) !important;
  -webkit-text-fill-color: var(--champagne, #F4DEC8) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-outline-light:hover {
  background: var(--rose-gold) !important;
  border-color: var(--rose-gold) !important;
  color: var(--plum-midnight, #1A0F22) !important;
  -webkit-text-fill-color: var(--plum-midnight, #1A0F22) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--rose-gold-a35);
}

.btn-outline-plum {
  background: var(--plum-midnight-a70) !important;
  border: 1.5px solid var(--rose-gold-a55) !important;
  color: var(--champagne, #F4DEC8) !important;
  -webkit-text-fill-color: var(--champagne, #F4DEC8) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-outline-plum:hover {
  background: var(--rose-gold) !important;
  border-color: var(--rose-gold) !important;
  color: var(--plum-midnight, #1A0F22) !important;
  -webkit-text-fill-color: var(--plum-midnight, #1A0F22) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--rose-gold-a35);
}

.btn-outline-rose-gold {
  background: var(--rose-gold-a10);
  border: 1.5px solid var(--rose-gold-a55);
  color: var(--ivory-silk) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06);
  transition: all var(--duration-mid) var(--ease-elegant);
}

.btn-outline-rose-gold:hover {
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%);
  border-color: var(--rose-gold);
  color: var(--plum-midnight) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--rose-gold-a40);
}

.hero-actions .btn-outline-light {
  color: var(--ivory-silk) !important;
  border-color: var(--champagne-a70) !important;
}

.hero-actions .btn-outline-light:hover {
  color: var(--plum-midnight) !important;
  border-color: var(--rose-gold) !important;
  background: var(--rose-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--rose-gold-a35);
}

h1,
h2,
h3,
.section-title,
.hero-title,
.page-hero-title,
.pkg-title {
  font-family: var(--font-display) !important;
}

.btn-whatsapp {
  background: linear-gradient(135deg, var(--whatsapp-dark, #1E8E5A) 0%, var(--whatsapp-deep, #15663F) 100%);
  color: var(--pure-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(21, 102, 63, 0.35);
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg, var(--whatsapp-green, #25D366) 0%, var(--whatsapp-forest, #1B7A4B) 100%);
  color: var(--pure-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
}

/* ── 5. Announcement Bar (Refined Luxury Ribbon) ───────────────── */
#wab-bar.wab-sticky,
.wab-bar.wab-sticky,
#wab-bar,
.wab-announcement-bar,
.sneha-announcement-bar {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: linear-gradient(90deg, var(--rose-gold-light) 0%, var(--champagne-soft) 50%, var(--rose-gold-light) 100%) !important;
  color: var(--plum-midnight) !important;
  min-height: 36px !important;
  padding: 0.35rem 1rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 10001 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer;
}

#wab-bar .wab-item span::before {
  content: none !important;
  display: none !important;
}

#wab-bar .wab-inner,
.wab-announcement-bar .wab-inner,
.wab-inner {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#wab-bar .wab-track,
.wab-track {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#wab-bar .wab-item,
.wab-item {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  white-space: normal !important;
}

#wab-bar a,
.sneha-announcement-bar a {
  color: var(--plum-midnight) !important;
  text-decoration: underline !important;
  margin-left: 0.5rem !important;
}

/* ── 6. Header Navigation (Always Fixed, Visible & Polished) ─────── */
#whn-header,
.sneha-header {
  display: block !important;
  position: sticky !important;
  top: var(--wab-height, 36px) !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: var(--whn-bg, var(--plum-midnight)) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--whn-border, var(--rose-gold-a20)) !important;
  transition: background var(--duration-mid) var(--ease-elegant);
}

.sneha-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* --whn-height is set by the Header Nav early-inline style per breakpoint
     (80 / 70 @768-1024 / 64 @<=767), so the inner row always matches the
     #whn-header box exactly. Fallbacks keep the old 80px default when the
     plugin styles are absent. */
  min-height: var(--whn-height, var(--whn-height-desk, var(--header-height)));
}

.sneha-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  text-decoration: none;
}

.sneha-brand-crest {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--rose-gold-light-a45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.sneha-brand:hover .sneha-brand-crest {
  transform: scale(1.05);
  border-color: var(--rose-gold);
}

.sneha-brand-text {
  display: flex;
  flex-direction: column;
}

.sneha-brand-logo {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--whn-text, var(--text-light));
  text-transform: uppercase;
  white-space: nowrap;
}

.sneha-brand-sub {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--whn-active, var(--rose-gold));
  text-transform: uppercase;
  margin-top: -3px;
  white-space: nowrap;
}

.sneha-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.4vw, 1.6rem);
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
}

.sneha-nav a {
  font-size: clamp(0.78rem, 0.85vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--whn-text, var(--text-light-muted));
  position: relative;
  padding: 0.3rem 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.sneha-nav a:hover,
.sneha-nav a.active {
  color: var(--whn-active, var(--rose-gold-light));
}

.sneha-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--rose-gold);
  transition: width var(--duration-mid) var(--ease-elegant);
}

.sneha-nav a:hover::after,
.sneha-nav a.active::after {
  width: 100%;
}

.sneha-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Intermediate Laptop/Tablet Landscape Breakpoint: Prevent Header Nav Collisions.
   The brand tagline (".sneha-brand-sub") used to be display:none here, which made
   "Bridal & Occasion Studio" blink out between 1199px and 992px and reappear
   below it. It stacks under the wordmark, so it never contested horizontal space
   and the hide is gone: the tagline is now visible at every width. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sneha-header-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .sneha-nav {
    gap: clamp(0.55rem, 1vw, 0.95rem) !important;
  }

  .sneha-nav a {
    font-size: 0.76rem !important;
    letter-spacing: 0.03em !important;
  }

  .sneha-header-actions .header-cta-btn {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.76rem !important;
  }
}

/* ── 7. Cinematic Hero Section ───────────────────────────────────── */
.page-hero-section {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  background: radial-gradient(circle at 50% 20%, var(--plum-primary) 0%, var(--plum-midnight) 100%);
  color: var(--text-light);
  border-bottom: 1px solid var(--rose-gold-a25);
  position: relative;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.18;
  color: var(--text-light);
  margin: 0.35rem 0 0.6rem;
}

.page-hero-subtitle {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  color: var(--text-light-muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   7. HERO SECTION — DUAL ARCHITECTURE SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* Base hero container shared properties */
.hero-section {
  position: relative;
  background: var(--plum-midnight);
  color: var(--text-light);
  overflow: hidden;
  padding: clamp(5rem, 8vw, 7rem) 0 clamp(3.5rem, 5vw, 5rem);
}

/* Common text column wrapper */
.hero-content {
  position: relative;
  z-index: 3;
}

/* ─────────────────────────────────────────────────────────────────
   HERO VARIANT A: 2-Column Split with Arched Portrait Frame (Mode 2)
   ───────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────
   HERO VARIANTS: DESKTOP DUAL ARCHITECTURE (Split, Float, Fullbleed)
   ───────────────────────────────────────────────────────────────── */
.hero-variant-split,
.hero-variant-float,
.hero-variant-fullbleed {
  position: relative;
  background: var(--plum-canvas, #0c0711);
  color: var(--text-light);
  overflow: hidden;
  height: calc(100dvh - var(--whn-height-desk, 80px) - var(--wab-height, 36px) - 20px);
  max-height: calc(100dvh - var(--whn-height-desk, 80px) - var(--wab-height, 36px) - 20px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;
}

/* Containers: all share standard sneha-container horizontal centering & padding */
.hero-variant-split .hero-split-container,
.hero-variant-float .hero-float-container,
.hero-variant-fullbleed .hero-fullbleed-container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max-width);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding-top: clamp(0.4rem, 1vh, 0.85rem);
  padding-bottom: clamp(0.4rem, 1vh, 0.85rem);
  box-sizing: border-box;
}

/* Desktop 2-column grids — tight gap so text and model feel cohesive */
.hero-split-grid,
.hero-float-grid,
.hero-fullbleed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.75rem);
  position: relative;
  z-index: 3;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* Right-hand portrait columns aligned towards text to eliminate dead space */
.hero-portrait-col,
.hero-float-col,
.hero-fullbleed-col {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  height: 100%;
  min-height: 0;
}

/* ── MODE 2: Arch Frame (Split) ─────────────────────────────────── */
.hero-portrait-frame {
  position: relative;
  height: clamp(280px, calc(100dvh - var(--whn-height-desk, 80px) - var(--wab-height, 36px) - 170px), 660px);
  max-height: 100%;
  width: auto;
  aspect-ratio: 4 / 5.2;
  max-width: 580px;
  border-radius: 50% 50% 0 0 / 55% 55% 0 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--rose-gold-a32),
    0 0 0 3px var(--rose-gold-a12),
    0 20px 60px rgba(0, 0, 0, 0.85);
}

.hero-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 6%;
  filter: saturate(1.08) brightness(1.02);
}

/* Inside arch frame: vignette darkens the right side & edges to seamlessly match #0c0711 */
.hero-portrait-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--rose-gold-a35);
  background:
    linear-gradient(to right, transparent 55%, rgba(12, 7, 17, 0.6) 88%, rgba(12, 7, 17, 0.95) 100%),
    linear-gradient(to top, rgba(12, 7, 17, 0.65) 0%, transparent 18%);
  pointer-events: none;
}

/* Subtle ambient halo centered behind arch (no stray light on right side) */
.hero-portrait-col::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at center, rgba(201, 149, 106, 0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* ── MODE 3: Floating Editorial Frame (Float) ───────────────────── */
.hero-float-frame {
  position: relative;
  height: clamp(280px, calc(100dvh - var(--whn-height-desk, 80px) - var(--wab-height, 36px) - 170px), 660px);
  max-height: 100%;
  width: auto;
  aspect-ratio: 4 / 5.2;
  max-width: 580px;
  border-radius: 18px;
  overflow: visible;
}

.hero-float-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 6%;
  border-radius: 18px;
  /* Left-dissolve into dark background + right edge darkening */
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.92) 0%, black 15%, black 45%, rgba(0, 0, 0, 0.8) 65%, rgba(0, 0, 0, 0.35) 82%, transparent 98%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.92) 0%, black 15%, black 45%, rgba(0, 0, 0, 0.8) 65%, rgba(0, 0, 0, 0.35) 82%, transparent 98%);
  filter: saturate(1.08) brightness(1.02);
}

.hero-float-glow {
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at center, rgba(201, 149, 106, 0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* Shared luxury floating badge for all 3 modes */
.hero-float-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  background: rgba(18, 9, 24, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rose-gold-a32);
  border-radius: var(--brand-radius-pill, 99px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  z-index: 5;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.hero-float-badge:hover {
  transform: translateY(-2px);
  border-color: var(--rose-gold-a50);
}

.hero-float-badge-sparkle {
  font-size: 0.85rem;
}

.hero-float-badge-text {
  font-family: var(--wpc-font-body, var(--brand-font-family));
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* ── MODE 1: Refined Fullbleed within Container (Fullbleed) ─────── */
.hero-fullbleed-media {
  position: relative;
  height: clamp(280px, calc(100dvh - var(--whn-height-desk, 80px) - var(--wab-height, 36px) - 170px), 660px);
  max-height: 100%;
  width: auto;
  aspect-ratio: 4 / 5.2;
  max-width: 600px;
  overflow: visible;
}

.hero-fullbleed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  /* Pure fullbleed: seamless left dissolve into typography + right/top/bottom edge blend */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 18%, rgba(0, 0, 0, 0.85) 35%, black 50%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 18%, rgba(0, 0, 0, 0.85) 35%, black 50%, black 100%);
  filter: saturate(1.08) brightness(1.02);
}

.hero-fullbleed-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent 65%, rgba(12, 7, 17, 0.55) 90%, var(--plum-canvas, #0c0711) 100%),
    linear-gradient(to top, var(--plum-canvas, #0c0711) 0%, rgba(12, 7, 17, 0.6) 8%, transparent 20%),
    linear-gradient(to bottom, var(--plum-canvas, #0c0711) 0%, transparent 12%);
}

.hero-fullbleed-content,
.hero-variant-split .hero-content,
.hero-variant-float .hero-content {
  max-width: 760px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mobile backdrop image (hidden on desktop, active on mobile across all 3 modes) */
.hero-mobile-backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-mobile-backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
}

.hero-mobile-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      var(--plum-canvas-a05) 0%,
      var(--plum-canvas-a00) 25%,
      var(--plum-canvas-a20) 50%,
      var(--plum-canvas-a80) 72%,
      var(--plum-canvas-a95) 88%,
      var(--plum-canvas) 100%);
}

/* Legacy classes maintained for backward compatibility */
.hero-backdrop,
.hero-overlay {
  display: none;
}

.hero-backdrop-img {
  display: none;
}

.hero-script-tag {
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 3.4vw, 3.1rem) !important;
  color: var(--rose-gold-light);
  margin-bottom: clamp(0.35rem, 1vh, 0.65rem) !important;
  display: block;
  font-weight: 400;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  line-height: 1.25;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.9rem, 5.4vw, 5.0rem) !important;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--text-light);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.15rem) !important;
}

.hero-title span {
  font-weight: 600;
  color: var(--champagne);
}

.hero-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--champagne-light, #FAF6F1);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  max-width: 620px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.hero-actions .btn {
  padding: 0.75rem 1.35rem;
  font-size: 0.86rem;
}

.site-main .hero-actions .hero-scroll-hint,
.hero-actions .hero-scroll-hint,
.hero-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--champagne, #F4DEC8) !important;
  font-family: var(--font-body);
  font-size: var(--btn-sm-font, 0.84rem);
  font-weight: var(--btn-weight, 600);
  letter-spacing: var(--btn-tracking, 0.03em);
  text-transform: none;
  text-decoration: none !important;
  padding: 0.72rem 1.25rem;
  border-radius: var(--btn-radius, 9999px);
  background: var(--rose-gold-a16) !important;
  border: 1px solid var(--rose-gold-a45) !important;
  transition: all var(--duration-mid) var(--ease-elegant);
}

.site-main .hero-actions .hero-scroll-hint:hover,
.site-main .hero-actions .hero-scroll-hint:focus-visible,
.hero-actions .hero-scroll-hint:hover,
.hero-actions .hero-scroll-hint:focus-visible,
.hero-scroll-hint:hover,
.hero-scroll-hint:focus-visible {
  color: var(--plum-midnight) !important;
  background: var(--rose-gold) !important;
  border-color: var(--rose-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--rose-gold-a35);
}

.hero-scroll-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: 1.1rem;
  color: inherit;
}

.hero-scroll-hint:hover .hero-scroll-arrow,
.hero-actions .hero-scroll-hint:hover .hero-scroll-arrow {
  color: var(--plum-midnight);
  transform: translateY(3px);
}

/* ── 8. Integrated Hero Credibility Masthead (4 Authority Pillars) ─ */
.hero-trust-bar.trust-strip,
.trust-strip {
  width: 100%;
  position: relative;
  z-index: 4;
  margin-top: auto;
  flex-shrink: 0;
  padding: clamp(0.75rem, 1.2vh, 1.15rem) 0;
  background: var(--plum-canvas-a80, rgba(12, 7, 17, 0.8));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--rose-gold-a22);
  border-bottom: 1px solid var(--rose-gold-a15);
  color: var(--text-light);
  box-sizing: border-box;
}

.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 1.25rem;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.35rem 0.75rem 0.35rem 0;
  border-right: 1px solid var(--rose-gold-a16);
  transition: transform 0.25s ease;
}

.trust-badge:last-child {
  border-right: none;
}

.trust-badge:hover {
  transform: translateY(-2px);
}

.trust-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--rose-gold-a10);
  border: 1px solid var(--rose-gold-a28);
  color: var(--champagne);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.trust-badge-icon svg {
  width: 19px;
  height: 19px;
}

.trust-badge:hover .trust-badge-icon {
  background: var(--rose-gold-a22);
  border-color: var(--rose-gold);
  color: var(--pure-white);
  transform: scale(1.05);
}

.trust-badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.trust-badge-title {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--champagne, #F3E5D8);
  line-height: 1.25;
}

.trust-badge-sub {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  color: var(--rose-gold-light, #DEB48A);
  opacity: 0.85;
  line-height: 1.2;
}

/* Backward compatibility fallbacks for legacy references */
.hero-trust-item {
  display: flex;
  flex-direction: column;
}

.hero-trust-number {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--rose-gold);
}

.hero-trust-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light-muted);
}

/* ── 8.5 Luxury International Vanity Ribbon ──────────────────────── */
.luxury-brands-ribbon {
  background: linear-gradient(180deg, rgba(20, 10, 26, 0.98) 0%, rgba(32, 16, 42, 0.98) 100%);
  border-top: 1px solid var(--rose-gold-light-a20);
  border-bottom: 1px solid var(--rose-gold-light-a20);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  position: relative;
  overflow: hidden;
}

.luxury-brands-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.luxury-brands-tag {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rose-gold-light);
  font-weight: 600;
}

.luxury-brands-heading {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  font-weight: 500;
  color: var(--text-light);
  letter-spacing: 0.02em;
  margin: 0 0 0.25rem;
}

.luxury-brands-promise {
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 0.4rem;
}

.luxury-brands-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--champagne);
}

.brand-item {
  white-space: nowrap;
}

.brand-item:hover {
  color: var(--pure-white);
}

.brand-dot {
  color: var(--rose-gold);
  opacity: 0.55;
  font-size: 0.9rem;
}

.luxury-brands-promise {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--text-light-muted);
}

.transformation-section {
  background: var(--plum-midnight);
  color: var(--text-light);
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(3.5rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.ba-carousel-wrapper {
  position: relative;
  margin-top: 2.75rem;
  display: flex;
  align-items: center;
  width: 100%;
}

.ba-slider-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1.75rem;
  width: 100%;
  padding: 0.75rem 0.5rem 1.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

.ba-slider-container::-webkit-scrollbar {
  display: none;
}

.ba-card {
  flex: 0 0 clamp(320px, 42vw, 440px);
  scroll-snap-align: center;
  background: var(--plum-royal);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--rose-gold-a22);
  transition: transform var(--duration-mid) var(--ease-elegant), border-color 0.3s ease, box-shadow 0.3s ease;
}

.ba-card:hover {
  transform: translateY(-4px);
  border-color: var(--rose-gold-a45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 20px var(--rose-gold-a15);
}

.ba-card.is-active-card {
  border-color: var(--rose-gold-a50);
}

.ba-view-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
}

.ba-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.ba-before-img {
  z-index: 1;
}

.ba-after-img {
  z-index: 2;
  clip-path: polygon(var(--slider-pos, 50%) 0, 100% 0, 100% 100%, var(--slider-pos, 50%) 100%);
  -webkit-clip-path: polygon(var(--slider-pos, 50%) 0, 100% 0, 100% 100%, var(--slider-pos, 50%) 100%);
}

.ba-badge {
  position: absolute;
  top: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 3;
}

.ba-badge-before {
  left: 1rem;
  background: var(--plum-midnight-a75);
  color: var(--text-light);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ba-badge-after {
  right: 1rem;
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%) !important;
  color: var(--plum-midnight) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px var(--rose-gold-a40) !important;
}

.ba-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 10;
  margin: 0;
  pointer-events: none;
  touch-action: pan-x pan-y;
}

.ba-handle-line {
  position: absolute;
  top: 0;
  left: var(--slider-pos, 50%);
  width: 2px;
  height: 100%;
  background: var(--rose-gold);
  z-index: 4;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--rose-gold-a60);
}

.ba-handle-button {
  position: absolute;
  top: 50%;
  left: var(--slider-pos, 50%);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%);
  color: var(--plum-midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px var(--rose-gold-a40);
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
  z-index: 5;
  border: 2px solid var(--pure-white);
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ba-handle-button:hover,
.ba-handle-button.hint-active {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 18px var(--rose-gold-a70);
}

.ba-drag-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 10, 24, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rose-gold-a45);
  color: var(--rose-gold);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease;
  animation: pulse-hint 2.5s infinite ease-in-out;
}

@keyframes pulse-hint {

  0%,
  100% {
    opacity: 0.95;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 0.65;
    transform: translateX(-50%) scale(0.96);
  }
}

/* Nav Arrows */
.ba-nav-arrow {
  position: absolute;
  top: calc(50% - 24px);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--plum-midnight-a90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rose-gold-a40);
  color: var(--rose-gold-light);
  font-size: 2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 12px var(--rose-gold-a15);
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 0;
}

.ba-nav-arrow span {
  display: block;
  transform: translateY(-2px);
  pointer-events: none;
}

.ba-nav-prev {
  left: -20px;
}

.ba-nav-next {
  right: -20px;
}

.ba-nav-arrow:hover:not(:disabled) {
  background: rgba(45, 25, 60, 0.95);
  border-color: var(--rose-gold);
  color: var(--pure-white);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 20px var(--rose-gold-a40);
}

.ba-nav-arrow:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
}

/* Modern Luxury Floating Dots Dock & Editorial Look Tag */
.ba-carousel-controls {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.ba-dots-dock {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  background: rgba(18, 9, 26, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 9999px;
  border: 1px solid var(--rose-gold-light-a25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ba-dots-dock:hover {
  border-color: var(--rose-gold-light-a45);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 16px var(--rose-gold-a18);
}

.ba-dock-arrow {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rose-gold-light-a22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--rose-gold-light);
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.ba-dock-arrow span {
  display: block;
  transform: translateY(-1px);
  pointer-events: none;
}

.ba-dock-arrow:hover:not(:disabled) {
  background: var(--rose-gold-a25);
  border-color: var(--rose-gold);
  color: var(--pure-white);
  transform: scale(1.08);
}

.ba-dock-arrow:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
}

.ba-dots-track {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.35rem;
}

.ba-dot {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  outline: none;
}

.ba-dot:focus-visible {
  outline: 2px solid var(--rose-gold);
  outline-offset: 2px;
  border-radius: 9999px;
}

.ba-dot-inner {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--rose-gold-light-a28);
  border: 1px solid var(--rose-gold-light-a45);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.ba-dot:hover .ba-dot-inner {
  background: var(--rose-gold-light-a75);
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.25);
}

.ba-dot.active .ba-dot-inner {
  width: 28px;
  height: 8px;
  background: linear-gradient(135deg, var(--warm-white-soft) 0%, var(--rose-gold-light) 45%, var(--rose-gold) 100%);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 14px var(--rose-gold-a85), 0 0 4px rgba(255, 240, 224, 0.9);
  transform: scale(1);
}

/* Dynamic Luxury Editorial Look Tag */
.ba-look-counter-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  letter-spacing: 0.05em;
  color: var(--text-light);
  text-align: center;
}

.ba-counter-num {
  font-weight: 700;
  color: var(--rose-gold);
  font-feature-settings: 'tnum' 1;
}

.ba-counter-dot {
  font-size: 0.42rem;
  color: var(--rose-gold-a55);
  vertical-align: middle;
}

.ba-counter-title {
  color: var(--rose-gold-light);
  font-style: italic;
  font-weight: 400;
  transition: opacity 0.25s ease;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .ba-card {
    flex: 0 0 clamp(290px, 55vw, 380px);
  }

  .ba-nav-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .ba-card {
    flex: 0 0 clamp(270px, 80vw, 340px);
  }

  .ba-slider-container {
    gap: 1.25rem;
    padding: 0.5rem 1rem 1.25rem;
  }
}

.ba-meta {
  padding: 1.5rem;
}

.ba-look-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--text-light);
  margin-bottom: 0.4rem;
}

.ba-look-tags {
  font-size: 0.85rem;
  color: var(--rose-gold-light);
  line-height: 1.4;
}

/* ── 10. Portfolio Lookbook Masonry ──────────────────────────────── */
.portfolio-section {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--plum-midnight);
  color: var(--text-light);
}

/* Ensure Lookbook section has zero top padding so sticky bar sits completely flush under header */
body.page-template-page-lookbook .portfolio-section,
.page-template-page-lookbook .portfolio-section,
.portfolio-section.page-lookbook-section,
.portfolio-section:has(#lookbook-sticky-bar) {
  padding-top: 0 !important;
}

/* ── Lookbook Full-Width Sticky Bar (Desktop & Mobile) ────────── */
.lookbook-sticky-bar {
  position: sticky !important;
  top: calc(var(--whn-height-desk, 80px) + var(--wab-height, 36px)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 890 !important;
  background: var(--plum-midnight, #1A0F22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--rose-gold-a22) !important;
  box-shadow: 0 8px 24px rgba(10, 4, 16, 0.55);
  margin: 0 !important;
  padding: 0.7rem 0 0.6rem 0 !important;
}

.lookbook-sticky-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.45rem;
}

.lookbook-sticky-bar .portfolio-filters {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.lookbook-sticky-heading {
  /* border-top: 1px solid var(--rose-gold-a15); */
  padding-top: 0.45rem;
  margin-top: 0.1rem;
}

.lookbook-sticky-heading .section-tag {
  font-family: var(--font-script);
  font-size: 0.98rem;
  color: var(--rose-gold-light);
  display: block;
  line-height: 1.2;
}

.lookbook-sticky-heading .lookbook-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.15rem;
  margin-bottom: 0;
}

.lookbook-sticky-heading .lookbook-category-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 500;
  color: var(--champagne);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lookbook-sticky-heading .lookbook-count-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose-gold);
  background: var(--rose-gold-a12);
  border: 1px solid var(--rose-gold-a30);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

/* In All Looks mode, show ceremony section headers for 2nd onwards sections in the page flow */
.lookbook-category-group .lookbook-category-header {
  display: block !important;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--rose-gold-a22);
}

/* First section's heading is represented by the static masthead at the top */
.lookbook-sections-wrapper>.lookbook-category-group:first-child .lookbook-category-header {
  display: none !important;
}

/* When a specific category pill is active, hide the in-flow header to avoid duplication with static masthead */
.portfolio-section[data-active-filter]:not([data-active-filter="all"]) .lookbook-category-group .lookbook-category-header {
  display: none !important;
}

.lookbook-gallery-container {
  padding-top: 1.25rem !important;
}

.portfolio-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem auto 2.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--rose-gold-a20);
  background: rgba(26, 15, 34, 0.94);
  box-shadow: 0 8px 32px rgba(10, 4, 16, 0.6);
  max-width: fit-content;
}

.filter-btn {
  padding: 0.55rem 1.35rem;
  border-radius: 9999px;
  border: 1px solid var(--rose-gold-a32);
  background: rgba(38, 22, 50, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-light-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-mid) var(--ease-elegant);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.filter-btn:hover:not(.active) {
  border-color: var(--rose-gold-a60);
  color: var(--champagne);
  background: var(--rose-gold-a12);
  transform: translateY(-1px);
}

.filter-btn.active {
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%);
  color: var(--plum-midnight) !important;
  border-color: var(--rose-gold);
  font-weight: 600;
  box-shadow: 0 4px 16px var(--rose-gold-a35);
}

@media (max-width: 991.98px) {
  .lookbook-sticky-bar {
    top: calc(var(--whn-height-tab, 70px) + var(--wab-height, 36px)) !important;
    padding: 0.6rem 0 0.5rem 0 !important;
  }
}

@media (max-width: 767.98px) {
  .lookbook-sticky-bar {
    top: calc(var(--whn-height-mob, 64px) + var(--wab-height, 35px)) !important;
    padding: 0.35rem 0 0.35rem 0 !important;
  }

  .lookbook-sticky-container {
    gap: 0.35rem;
  }

  .lookbook-sticky-bar .portfolio-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.45rem !important;
  }

  .lookbook-sticky-bar .portfolio-filters::-webkit-scrollbar {
    display: none !important;
  }

  .lookbook-sticky-heading {
    padding-top: 0.35rem !important;
    margin-top: 0 !important;
  }

  .lookbook-sticky-heading .section-tag {
    font-size: 0.85rem !important;
  }

  .lookbook-sticky-heading .lookbook-category-title {
    font-size: 1.15rem !important;
  }

  .lookbook-sticky-heading .lookbook-count-badge {
    font-size: 0.68rem !important;
    padding: 0.2rem 0.6rem !important;
  }

  .lookbook-gallery-container {
    padding-top: 0.85rem !important;
  }

  .portfolio-filters {
    position: relative !important;
    top: auto !important;
    z-index: 5 !important;
    border-radius: 14px;
    max-width: 100%;
    margin: 0.75rem 0 1.25rem;
    padding: 0.5rem 0.75rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .portfolio-filters::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.75rem;
}

/* On desktop & laptop viewports, show exactly 4 columns */
@media (min-width: 768px) {
  .portfolio-section .portfolio-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.portfolio-grid:not(.is-expanded) .portfolio-item-extra {
  display: none !important;
}

.portfolio-grid.is-expanded .portfolio-item-extra {
  animation: sneha-shimmer 0.4s ease backwards;
}

@keyframes sneha-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.portfolio-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4/5;
  background: linear-gradient(90deg, var(--plum-deep) 0%, var(--rose-gold-a16) 50%, var(--plum-deep) 100%);
  background-size: 200% 100%;
  animation: sneha-shimmer 2.4s infinite ease-in-out;
  border: 1px solid var(--rose-gold-a25);
  cursor: pointer;
}

/* Filtered-out looks are hidden via the attribute; keep that authoritative. */
.portfolio-item[hidden] {
  display: none !important;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background-color: var(--plum-midnight);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  transition: transform var(--duration-slow) var(--ease-elegant);
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 35%, var(--plum-midnight-a95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
  opacity: 0;
  transition: opacity var(--duration-mid) var(--ease-elegant);
}

.portfolio-item:hover .portfolio-overlay,
.portfolio-item:focus-within .portfolio-overlay,
.portfolio-item:focus .portfolio-overlay {
  opacity: 1;
}

/*
 * Touch and assistive tech have no hover. Without this the category and
 * title of every look is invisible on mobile and to screen readers, which
 * is the entire content of the grid.
 */
@media (hover: none) {
  .portfolio-overlay {
    opacity: 1;
    background: linear-gradient(180deg, transparent 72%, var(--plum-midnight-a88) 100%) !important;
    padding: 0.75rem 1rem !important;
    justify-content: flex-end;
  }

  .portfolio-overlay-desc {
    display: none;
  }

  .portfolio-overlay-title {
    font-size: 1.05rem;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .portfolio-overlay-cat {
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-overlay {
    opacity: 1;
  }
}

.portfolio-overlay-cat {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rose-gold);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.portfolio-overlay-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.portfolio-overlay-desc {
  font-size: 0.85rem;
  color: var(--text-light-muted);
}

/* ── 10.1 Lookbook Dedicated Ceremony Sections & Headers ── */
.lookbook-sections-wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 4.5rem);
}

.lookbook-category-group {
  scroll-margin-top: calc(var(--whn-height-desk, 80px) + var(--wab-height, 36px) + 65px);
  transition: opacity var(--duration-mid) var(--ease-elegant);
}

@media (max-width: 991.98px) {
  .lookbook-category-group {
    scroll-margin-top: calc(var(--whn-height-tab, 70px) + var(--wab-height, 36px) + 55px);
  }
}

@media (max-width: 768px) {
  .lookbook-category-group {
    scroll-margin-top: calc(var(--whn-height-mob, 64px) + var(--wab-height, 35px) + 50px);
  }
}

.lookbook-category-group[hidden] {
  display: none !important;
}

.lookbook-category-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--rose-gold-a22);
  position: relative;
}

.lookbook-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.2rem;
  margin-bottom: 0.35rem;
}

.lookbook-category-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 500;
  color: var(--champagne);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lookbook-category-desc {
  font-size: 0.88rem;
  color: var(--text-light-muted);
  margin: 0.25rem 0 0;
  line-height: 1.5;
}

.lookbook-count-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose-gold);
  background: var(--rose-gold-a12);
  border: 1px solid var(--rose-gold-a30);
  border-radius: 9999px;
  padding: 0.3rem 0.85rem;
  white-space: nowrap;
}

.lookbook-category-desc {
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  color: var(--text-light-muted, #C5A99B);
  line-height: 1.6;
  max-width: 68ch;
  margin: 0;
}

/* ── 11. 4-Tier Luxury Bridal Packages Matrix ────────────────────── */
.packages-section {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--plum-midnight);
  border-top: 1px solid var(--rose-gold-a15);
  color: var(--text-light);
}

.packages-scroll-wrapper {
  width: 100%;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 2.5rem auto 0;
  align-items: stretch;
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .packages-grid {
    gap: 1.25rem;
  }
}

@media (max-width: 1023px) {
  .packages-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 1.5rem -1rem 0 -1rem;
    padding: 0.75rem 1rem 1.25rem 1rem;
    scrollbar-width: none;
  }

  .packages-scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  .packages-grid {
    display: flex !important;
    gap: 1rem !important;
    margin-top: 0 !important;
    width: max-content;
  }

  .packages-grid .pkg-card {
    flex: 0 0 84vw !important;
    max-width: 320px !important;
    scroll-snap-align: center;
    box-sizing: border-box;
  }
}

.pkg-card {
  min-width: 0;
  min-height: 480px;
  background: var(--plum-primary-a72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rose-gold-a32);
  border-radius: 18px;
  padding: 2.6rem 1.6rem 2.2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform var(--duration-mid) var(--ease-elegant),
    box-shadow var(--duration-mid) var(--ease-elegant),
    border-color var(--duration-mid) var(--ease-elegant);
}

.pkg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px var(--rose-gold-a28);
  border-color: var(--champagne);
}

.pkg-card.featured {
  background: radial-gradient(ellipse at 50% 12%, rgba(76, 44, 92, 0.95) 0%, rgba(28, 14, 38, 0.98) 100%);
  color: var(--text-light);
  border: 1.8px solid var(--rose-gold-light-a80);
  box-shadow: 0 18px 45px var(--rose-gold-light-a24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@media (min-width: 992px) {
  .pkg-card.featured {
    transform: translateY(-8px);
  }

  .pkg-card.featured:hover {
    transform: translateY(-14px);
    box-shadow: 0 24px 55px var(--rose-gold-light-a34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

.pkg-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.pkg-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--rose-gold-a16);
  color: var(--champagne);
  border: 1px solid var(--rose-gold-a38);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

.pkg-tier-badge svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  margin: 0;
}

.pkg-tier-badge.featured {
  background: linear-gradient(135deg, var(--champagne-light) 0%, var(--rose-gold-light) 50%, var(--rose-gold) 100%);
  color: var(--plum-midnight);
  font-weight: 800;
  border: none;
  box-shadow: 0 4px 14px var(--rose-gold-light-a40);
}

.pkg-title {
  font-family: var(--font-display) !important;
  font-size: 1.48rem;
  line-height: 1.25;
  margin-bottom: 0.45rem;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  color: var(--champagne);
  text-align: left;
}

.pkg-card.featured .pkg-title {
  color: var(--pure-white);
}

.pkg-tagline {
  font-size: 0.85rem;
  color: var(--text-light-muted);
  line-height: 1.45;
  min-height: 2.5rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

.pkg-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--rose-gold-light-a45) 0%, var(--rose-gold-a10) 100%);
  margin-bottom: 1.35rem;
}

.pkg-inclusions {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  flex: 1;
}

.pkg-inclusions li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0;
  text-align: left;
}

.pkg-check {
  color: var(--champagne);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.pkg-card-action {
  width: 100%;
  margin-top: auto;
  padding-top: 0.75rem;
}

.pkg-card .btn {
  width: 100% !important;
  padding: 0.9rem 1.2rem !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  text-align: center;
  justify-content: center;
  box-sizing: border-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pkg-card .btn-outline-rose-gold {
  background: rgba(201, 149, 106, 0.22) !important;
  border: 1.5px solid var(--rose-gold, #C9956A) !important;
  color: var(--champagne, #F3E5D8) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.08) !important;
  transition: all var(--duration-mid, 0.3s) var(--ease-elegant, ease);
}

.pkg-card .btn-outline-rose-gold:hover,
.pkg-card .btn-outline-rose-gold:focus-visible {
  background: linear-gradient(135deg, var(--rose-gold-light, #DEB48A) 0%, var(--rose-gold, #C9956A) 100%) !important;
  color: var(--plum-midnight, #140C18) !important;
  border-color: var(--rose-gold, #C9956A) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--rose-gold-a40, rgba(201, 149, 106, 0.4)) !important;
}

.pkg-card.featured .btn {
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%) !important;
  color: var(--plum-midnight) !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 6px 18px var(--rose-gold-a35);
}

/* Mobile swipe hint */
.mobile-swipe-hint {
  display: none;
  font-size: 0.75rem;
  color: var(--rose-gold);
  margin: 0.5rem 0 1rem 0;
  opacity: 0.85;
  letter-spacing: 0.05em;
}

@media (max-width: 1023px) {
  .mobile-swipe-hint {
    display: block;
  }
}

/* VIP Bridal Entourage Ribbon — Atelier Luxury Redesign */
.pkg-entourage-ribbon {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, rgba(38, 22, 46, 0.82) 0%, rgba(22, 12, 28, 0.92) 100%);
  border: 1px solid var(--rose-gold-a32);
  border-radius: 18px;
  padding: 1.65rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  transition: border-color var(--duration-mid) var(--ease-elegant),
    box-shadow var(--duration-mid) var(--ease-elegant),
    transform var(--duration-mid) var(--ease-elegant);
}

.pkg-entourage-ribbon:hover {
  border-color: var(--rose-gold-a55);
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 25px var(--rose-gold-a15);
}

.pkg-entourage-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}

.pkg-entourage-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--rose-gold-a12);
  border: 1px solid var(--rose-gold-a38);
  color: var(--rose-gold-light, #DEB48A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.pkg-entourage-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--rose-gold-light, #DEB48A);
  color: var(--rose-gold-light, #DEB48A);
}

.pkg-entourage-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.pkg-entourage-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.pkg-entourage-badge {
  background: var(--rose-gold-a16);
  color: var(--champagne);
  border: 1px solid var(--rose-gold-a40);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pkg-entourage-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--champagne);
  margin: 0;
  line-height: 1.2;
}

.pkg-entourage-desc {
  font-size: 0.88rem;
  color: rgba(243, 229, 216, 0.82);
  margin: 0;
  line-height: 1.55;
  max-width: 62ch;
}

.pkg-entourage-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.pkg-entourage-feature-pill {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--champagne, #F3E5D8);
  background: var(--rose-gold-a08);
  border: 1px solid var(--rose-gold-a22);
  border-radius: 6px;
  padding: 0.22rem 0.6rem;
  letter-spacing: 0.02em;
}

.pkg-entourage-action .btn {
  white-space: nowrap;
  padding: 0.85rem 1.65rem;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  border-radius: 9999px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-gold) !important;
  border: 1px solid var(--rose-gold) !important;
  color: var(--plum-midnight) !important;
  box-shadow: 0 4px 14px var(--rose-gold-a30);
  transition: all var(--duration-mid) var(--ease-elegant);
}

.pkg-entourage-action .btn:hover {
  background: var(--rose-gold);
  color: var(--plum-midnight);
  border-color: var(--rose-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--rose-gold-a30);
}

@media (max-width: 900px) {
  .pkg-entourage-ribbon {
    flex-direction: column;
    align-items: stretch;
    padding: 1.35rem 1.15rem;
    gap: 1.15rem;
    border-radius: 16px;
    margin-top: 1.75rem;
  }

  .pkg-entourage-left {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem 0.85rem;
    width: 100%;
  }

  .pkg-entourage-icon {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .pkg-entourage-icon svg {
    width: 20px;
    height: 20px;
  }

  .pkg-entourage-body {
    display: contents;
  }

  .pkg-entourage-header {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
  }

  .pkg-entourage-badge {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 0.16rem 0.52rem;
  }

  .pkg-entourage-title {
    font-size: 1.28rem;
    line-height: 1.2;
  }

  .pkg-entourage-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(243, 229, 216, 0.82);
    margin: 0.15rem 0 0.1rem;
    max-width: 100%;
  }

  .pkg-entourage-features {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .pkg-entourage-feature-pill {
    font-size: 0.72rem;
    padding: 0.26rem 0.58rem;
    border-radius: 6px;
  }

  .pkg-entourage-action {
    width: 100%;
    margin-top: 0.15rem;
  }

  .pkg-entourage-action .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    min-height: 44px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
  }
}

@media (max-width: 380px) {
  .pkg-entourage-ribbon {
    padding: 1.15rem 0.95rem;
    gap: 0.95rem;
  }

  .pkg-entourage-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .pkg-entourage-icon svg {
    width: 17px;
    height: 17px;
  }

  .pkg-entourage-title {
    font-size: 1.15rem;
  }

  .pkg-entourage-desc {
    font-size: 0.78rem;
  }

  .pkg-entourage-feature-pill {
    font-size: 0.68rem;
    padding: 0.22rem 0.5rem;
  }
}

/* ── 11.5 Booking Terms & Trial Policy ────────────────────────── */
.pkg-policy-strip {
  margin-top: 4rem;
  background: linear-gradient(180deg, rgba(38, 22, 50, 0.72) 0%, rgba(20, 11, 28, 0.88) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 20px;
  box-shadow: var(--shadow-glass);
  border: 1px solid var(--rose-gold-a32);
  color: var(--text-light);
}

.pkg-policy-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: var(--champagne);
  margin-bottom: 2rem;
  text-align: center;
}

.pkg-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.pkg-policy-card {
  background: var(--plum-midnight-a75);
  border: 1px solid var(--rose-gold-a24);
  border-radius: 14px;
  padding: 1.6rem;
  transition: border-color var(--duration-mid) var(--ease-elegant), transform var(--duration-mid) var(--ease-elegant);
}

.pkg-policy-card:hover {
  border-color: var(--rose-gold-a45);
  transform: translateY(-2px);
}

.pkg-policy-heading {
  color: var(--rose-gold);
  font-size: 1.12rem;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pkg-policy-heading svg {
  color: var(--rose-gold);
  flex-shrink: 0;
}

.pkg-policy-desc {
  color: var(--text-light-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

/* ── 12. 4-Step Bridal Journey Timeline ─────────────────────────── */
.journey-section {
  background: var(--plum-deep);
  border-top: 1px solid var(--rose-gold-a18);
  color: var(--text-light);
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2.25rem;
  position: relative;
}

.journey-step {
  text-align: center;
  position: relative;
}

.journey-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--plum-royal);
  border: 2px solid var(--rose-gold);
  color: var(--champagne);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 auto 1.5rem;
}

.journey-step-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}

.journey-step-desc {
  font-size: 0.9rem;
  color: var(--text-light-muted);
  line-height: 1.6;
}

/* ── 13. Real Bride Reviews & Testimonials ───────────────────────── */
.testimonials-section {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--plum-deep);
  color: var(--text-light);
  border-top: 1px solid var(--rose-gold-a20);
  border-bottom: 1px solid var(--rose-gold-a20);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
  margin-top: 3.5rem;
}

.review-card {
  background: var(--plum-primary-a70);
  border-radius: 18px;
  padding: 2.2rem;
  box-shadow: var(--shadow-glass);
  border: 1px solid var(--rose-gold-a30);
  color: var(--text-light);
}

.review-stars {
  color: var(--warm-gold);
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.review-quote {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-light-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.review-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rose-gold);
}

.review-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--plum-primary) 0%, #160B1F 100%);
  color: var(--champagne, #FAF6F1);
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--rose-gold, #C9956A);
  box-shadow: inset 0 0 10px var(--rose-gold-a25);
  user-select: none;
}

.review-author-name {
  font-weight: 600;
  color: var(--champagne);
}

.review-event-tag {
  font-size: 0.8rem;
  color: var(--rose-gold);
}

/* ── 14. 3-Step WhatsApp Instant Booking Form ────────────────────── */
.booking-section {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--plum-midnight);
  color: var(--text-light);
  position: relative;
}

/* Sets out what the form does and does not do, before the visitor uses it. */
.booking-honesty-note {
  max-width: 62ch;
  margin: 0.9rem auto 0;
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-light-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rose-gold-a22);
  border-radius: 12px;
}

.booking-honesty-note strong {
  color: var(--rose-gold);
}

/* ── Contact Page Responsive Layout (Mobile-First Form Prioritization) ── */
.contact-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767.98px) {
  .contact-grid-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  .contact-details-col {
    display: contents !important;
  }

  .contact-intro-block {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-form-col {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .contact-touchpoints-card {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-studio-card {
    order: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-venue-card {
    order: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-form-col .booking-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: clamp(1.25rem, 4vw, 2rem) 1.15rem !important;
  }
}

.booking-box {
  background: var(--plum-royal);
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--shadow-glass);
  border: 1px solid var(--rose-gold-a25);
  max-width: 840px;
  margin: 2.25rem auto 0;
}

.booking-form-grid {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 1.25rem !important;
  margin-bottom: 2rem !important;
}

.booking-form-grid .form-group,
.form-group {
  display: flex;
  flex-direction: column;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  gap: 0.5rem;
}

.form-label {
  letter-spacing: 0.05em;
  color: var(--champagne);
  text-transform: uppercase;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

/*
 * Ceremony / Function Type is hidden for à-la-carte services (party glam,
 * hair + draping only). `display: flex` outranks the UA [hidden] rule, so
 * restate it explicitly or the field stays on screen.
 */
.form-group[hidden] {
  display: none !important;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 0.45rem;
  line-height: 1.3;
  opacity: 0.95;
}

.form-control {
  width: 100%;
  min-height: 48px;
  background: linear-gradient(180deg, rgba(38, 22, 50, 0.52) 0%, rgba(20, 11, 28, 0.72) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rose-gold-a28);
  border-radius: 12px;
  padding: 0.82rem 1.15rem;
  color: var(--ivory-silk);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.35), 0 1px 2px var(--rose-gold-a05);
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
}

.form-control:hover {
  border-color: var(--rose-gold-a48);
  background: linear-gradient(180deg, rgba(46, 26, 60, 0.62) 0%, rgba(26, 14, 36, 0.78) 100%);
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.28), 0 2px 10px var(--rose-gold-a10);
}

.form-control:focus,
.form-control:focus-visible {
  outline: none;
  border-color: var(--rose-gold);
  background: linear-gradient(180deg, rgba(42, 24, 55, 0.94) 0%, rgba(24, 13, 33, 0.98) 100%);
  box-shadow: 0 0 0 3px var(--rose-gold-a22), inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4);
}

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9956A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 1.15rem) center;
  background-size: 15px 15px;
  padding-right: 2.85rem !important;
  cursor: pointer;
}

.form-control option {
  background: var(--plum-midnight);
  color: var(--ivory-silk);
  padding: 0.75rem 1rem;
}

.form-control::placeholder {
  color: rgba(250, 246, 241, 0.38);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── 15. FAQ Accordion ───────────────────────────────────────────── */
.faq-section {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--plum-deep);
  color: var(--text-light);
  border-top: 1px solid var(--rose-gold-a18);
}

.faq-list {
  max-width: 800px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--rose-gold-a25);
  border-radius: 14px;
  background: var(--plum-primary-a70);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 1rem;
  text-align: left;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--champagne);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-answer {
  padding: 0 1.75rem 1.35rem;
  font-size: 0.95rem;
  color: var(--text-light-muted);
  line-height: 1.7;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

/*
 * The accordion now toggles the `hidden` attribute as well as .active, so
 * the collapsed answer leaves the accessibility tree. `display` from the
 * rules above outranks the UA's [hidden] rule, so restate it explicitly or
 * a hidden-but-open answer stays announced.
 */
.faq-answer[hidden] {
  display: none !important;
}

.faq-heading {
  margin: 0;
  font: inherit;
}

.faq-item.active .faq-toggle-icon {
  transform: none;
  color: var(--warm-gold);
}

/* ── 16. Luxury Footer ───────────────────────────────────────────── */
.sneha-footer {
  background: var(--plum-midnight) !important;
  color: var(--text-light) !important;
  padding: 5rem 0 2rem !important;
  border-top: 1px solid var(--rose-gold-a20) !important;
  display: block !important;
}

.sneha-footer .sneha-brand {
  margin-bottom: 2rem !important;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 3.5rem;
  margin-bottom: 2.75rem;
}

@media (max-width: 991.98px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--champagne);
  margin-bottom: 1.25rem;
}

.footer-cert-badge {
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, var(--rose-gold-a12) 0%, var(--plum-primary-a40) 100%);
  border: 1px solid var(--rose-gold-a35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-cert-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--rose-gold-a20);
  border: 1px solid var(--rose-gold-a40);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  stroke: var(--rose-gold);
}

.footer-cert-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--champagne);
  letter-spacing: 0.02em;
}

.footer-cert-sub {
  display: block;
  font-size: 0.74rem;
  color: var(--text-light-muted);
}

.footer-col-details {
  display: block;
}

.footer-col-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-col-summary::-webkit-details-marker {
  display: none;
}

.footer-col-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 1.25rem !important;
  }

  .footer-grid>.footer-col:first-child {
    margin-bottom: 2.25rem !important;
  }

  .footer-grid>.footer-col:not(:first-child) {
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-col-details {
    border-bottom: 1px solid var(--rose-gold-a16) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .footer-grid>.footer-col:nth-child(2) .footer-col-details {
    border-top: 1px solid var(--rose-gold-a16) !important;
  }

  .footer-col-summary {
    cursor: pointer !important;
    user-select: none !important;
    padding: 0.95rem 0.25rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .footer-col-summary .footer-col-title {
    margin-bottom: 0 !important;
    font-size: 1.05rem !important;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important;
    color: var(--champagne) !important;
    letter-spacing: 0.02em !important;
    font-weight: 600 !important;
  }

  .footer-col-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    color: var(--rose-gold) !important;
    transition: transform 0.25s ease !important;
    width: 24px !important;
    height: 24px !important;
    font-weight: 300 !important;
  }

  .footer-col-details[open] .footer-col-toggle {
    transform: rotate(45deg) !important;
  }

  .footer-col-details[open] .footer-links {
    padding: 0.5rem 0.25rem 1.25rem !important;
    margin: 0 !important;
    gap: 0.75rem !important;
  }
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--wpf-link, var(--text-light-muted));
}

.footer-links a:hover {
  color: var(--wpf-link-hover, var(--rose-gold));
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--champagne);
  line-height: 1.5;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.footer-contact-icon {
  flex-shrink: 0;
  stroke: var(--rose-gold);
  margin-top: 0.2rem;
}

/* ── Footer Regional Circuits Accordion (Luxury Cert-Badge Aesthetic) ─ */
.footer-localities-wrap {
  margin: 0 0 2.5rem 0;
}

.footer-localities-details {
  background: linear-gradient(135deg, var(--rose-gold-a12) 0%, var(--plum-primary-a45) 100%);
  border: 1px solid var(--rose-gold-a35);
  border-radius: 12px;
  padding: 0.85rem 1.15rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.footer-localities-details:not([open]) .footer-localities-content {
  display: none !important;
}

.footer-col-details {
  overflow: hidden;
}

.footer-col-details:not([open]) .footer-links {
  display: none !important;
}

.footer-localities-details:hover {
  border-color: var(--rose-gold-a55);
  box-shadow: 0 6px 24px var(--rose-gold-a12);
}

.footer-localities-details[open] {
  background: linear-gradient(135deg, var(--rose-gold-a16) 0%, var(--plum-primary-a65) 100%);
  border-color: var(--rose-gold-a50);
  padding-bottom: 1.35rem;
}

.footer-localities-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.footer-localities-summary::-webkit-details-marker {
  display: none;
}

.footer-localities-badge-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
}

.footer-localities-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--rose-gold-a20);
  border: 1px solid var(--rose-gold-a40);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  stroke: var(--rose-gold);
  color: var(--rose-gold);
}

.footer-localities-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.footer-localities-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--champagne);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.footer-localities-sub {
  display: block;
  font-size: 0.74rem;
  color: var(--text-light-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-localities-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--champagne);
  background: var(--rose-gold-a15);
  border: 1px solid var(--rose-gold-a35);
  padding: 0.32rem 0.75rem;
  border-radius: 9999px;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.footer-localities-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--rose-gold);
}

.footer-localities-details[open] .footer-localities-toggle {
  border-color: var(--rose-gold);
  background: var(--rose-gold-a28);
  color: var(--pure-white);
}

.footer-localities-details[open] .footer-localities-arrow {
  transform: rotate(180deg);
}

.footer-localities-content {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rose-gold-a15);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-localities-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-group-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rose-gold-light);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-localities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
}

.footer-localities-grid a,
.footer-localities-grid .footer-locality-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.75rem;
  background: var(--rose-gold-a08);
  border: 1px solid var(--rose-gold-a20);
  border-radius: 9999px;
  color: var(--champagne);
  font-size: 0.8rem;
  line-height: 1.3;
  text-decoration: none;
  min-height: 36px;
  transition: all 0.2s ease;
}

.footer-localities-grid .footer-locality-tag {
  opacity: 0.92;
  cursor: default;
  user-select: none;
}

.footer-localities-grid a:hover {
  background: var(--rose-gold-a20);
  border-color: var(--rose-gold);
  color: var(--text-light) !important;
  transform: translateY(-1px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-light-muted);
}

.footer-bottom-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-claims {
  font-size: 0.8rem;
  color: var(--text-light-muted);
  opacity: 0.95;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.footer-claim-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.78rem;
  transition: all var(--duration-fast) var(--ease-elegant);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.footer-claim-rating-pill:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.7);
  color: #fef08a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
}

.footer-legal-links a {
  color: var(--text-light-muted);
  text-decoration: none;
  opacity: 0.78;
  transition: color var(--duration-fast) var(--ease-elegant), opacity var(--duration-fast) var(--ease-elegant);
  padding: 0.2rem 0;
}

.footer-legal-links a:hover {
  color: var(--champagne);
  opacity: 1;
}

.footer-legal-sep {
  display: inline-block;
  color: var(--rose-gold-a45);
  font-size: 0.65rem;
  user-select: none;
}

/* ── 17. Mobile Fixed Bottom Navigation Dock ─────────────────────── */
/* Hidden at every width by default, then switched on below the breakpoint
   where the header collapses into the drawer. The dock and the header
   drawer must never both be active, so 991px is the single shared cutoff. */
.mobile-bottom-dock {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--mobile-bottom-bar-height);
  background: var(--wmf-bg, var(--plum-midnight-a96)) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--wmf-border, var(--rose-gold-a25));
  z-index: 9999;
  padding: 0 1rem;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Dock is a mobile-only pattern. Show only on handsets (< 768px).
   Tablets (768px+) use the desktop header layout instead. */
@media (max-width: 767.98px) {
  .sneha-footer {
    padding-top: 3.5rem !important;
    padding-bottom: calc(var(--mobile-bottom-bar-height) + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
  }

  .footer-localities-wrap {
    margin-bottom: 1.5rem !important;
  }

  .footer-localities-details {
    padding: 0.85rem 1rem !important;
    border-radius: 12px !important;
  }

  .footer-localities-summary {
    gap: 0.75rem !important;
    align-items: center !important;
  }

  .footer-localities-badge-left {
    gap: 0.75rem !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .footer-localities-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .footer-localities-text {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }

  .footer-localities-title {
    font-size: 0.86rem !important;
    line-height: 1.32 !important;
    font-weight: 700 !important;
    color: var(--champagne) !important;
    letter-spacing: 0.015em !important;
  }

  .footer-localities-sub {
    font-size: 0.71rem !important;
    line-height: 1.35 !important;
    color: var(--text-light-muted) !important;
    white-space: normal !important;
    display: block !important;
  }

  .footer-localities-toggle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--rose-gold-a16) !important;
    border: 1px solid var(--rose-gold-a38) !important;
    color: var(--champagne) !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
  }

  .footer-localities-toggle-label {
    display: none !important;
  }

  .footer-localities-arrow {
    font-size: 0.95rem !important;
    line-height: 1 !important;
    color: var(--rose-gold) !important;
    transition: transform 0.25s ease !important;
  }

  .footer-localities-details[open] .footer-localities-toggle {
    background: var(--rose-gold-a30) !important;
    border-color: var(--rose-gold) !important;
    color: var(--pure-white) !important;
  }

  .footer-localities-details[open] .footer-localities-arrow {
    transform: rotate(180deg) !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.85rem !important;
    padding-bottom: 8.5rem !important;
    border-top: 1px solid var(--rose-gold-a15) !important;
    padding-top: 1.5rem !important;
  }

  .footer-bottom-info {
    align-items: center !important;
    text-align: center !important;
    gap: 0.35rem !important;
  }

  .footer-legal-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.2rem 0.45rem !important;
    margin-top: 0.25rem !important;
  }

  .footer-legal-links a {
    /* Was `min-height: auto`, which collapsed these three links to 23px —
       a pixel under the 24px AA minimum. The row is laid out with
       `align-items: center`, so a taller box stays centred and costs no
       vertical space beyond the 24px floor. */
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: clamp(0.68rem, 2.2vw, 0.73rem) !important;
    color: var(--text-light-muted) !important;
    text-decoration: none !important;
    opacity: 0.82 !important;
    padding: 0.15rem 0.05rem !important;
    white-space: nowrap !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
  }

  .footer-legal-links a:hover {
    color: var(--champagne) !important;
    opacity: 1 !important;
  }

  .footer-legal-sep {
    display: inline-block !important;
    color: var(--rose-gold-a45) !important;
    font-size: 0.55rem !important;
    user-select: none !important;
  }

  .mobile-bottom-dock {
    display: flex;
  }
}

@media (max-width: 480px) {
  .footer-localities-explore-text {
    display: none !important;
  }
}

button.mobile-tab,
button.mobile-tab-menu {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
}

/* =============================================================================
   Header Navigation Responsive Architecture & Mobile Drawer
   ============================================================================= */
.sneha-menu-toggle {
  display: none;
}

.sneha-mobile-drawer,
.sneha-drawer-overlay {
  display: none;
}

@media (max-width: 991.98px) {
  .sneha-header {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    box-sizing: border-box !important;
    background: var(--plum-midnight-a98) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--rose-gold-a25);
  }

  .sneha-header-inner {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .sneha-brand {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* At 768-991px the base lockup kept margin-top: -3px against a line-height: 1
     wordmark, so the tagline's line box rode ~3px up into the brand name's box
     (ink clearance ~3px vs ~9px on desktop) and read as overlapping text.
     Match the <=767px treatment: normal line boxes and a positive gap. */
  .sneha-brand-logo {
    line-height: 1.15 !important;
  }

  .sneha-brand-sub {
    margin-top: 2px !important;
    line-height: 1.1 !important;
  }

  .sneha-nav {
    display: none !important;
  }

  .sneha-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    margin: 0 !important;
  }

  .sneha-header-actions .header-cta-btn {
    display: inline-flex !important;
    font-size: 0.76rem !important;
    padding: 0.42rem 0.85rem !important;
    letter-spacing: 0.04em !important;
  }

  .sneha-menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 8px;
    background: var(--rose-gold-a12);
    border: 1px solid var(--rose-gold-a35);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .sneha-menu-toggle:hover {
    background: var(--rose-gold-a22);
    border-color: var(--rose-gold);
  }

  .sneha-menu-toggle .hamburger-bar {
    width: 100%;
    height: 2px;
    background: var(--champagne, #F4DEC8);
    border-radius: 2px;
    transition: all 0.25s ease;
  }

  /* Elevate header stacking context and remove transforms/backdrop-filter when mobile drawer is open
     so the fixed drawer and overlay are positioned relative to the viewport from y=0 and cover the announcement bar */
  body.drawer-open #whn-header,
  #whn-header:has(.sneha-mobile-drawer.open) {
    z-index: 100002 !important;
    transform: none !important;
    -webkit-transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  /* Drawer Overlay */
  .sneha-drawer-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(10, 5, 14, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  }

  .sneha-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  /* ── Pure Haute Couture Mobile Navigation (Sabyasachi / Manish Malhotra Style) ── */
  .sneha-mobile-drawer {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    width: 100dvw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: radial-gradient(circle at 50% 20%, rgba(52, 22, 65, 0.45) 0%, rgba(16, 8, 22, 0.98) 75%), var(--plum-darkest, #100816) !important;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-left: none;
    box-shadow: none;
    z-index: 100001 !important;
    flex-direction: column;
    transform: translateX(100%);
    /*
     * Removed from the tab order and the a11y tree while closed.
     *
     * `transform: translateX(100%)` only moves the drawer off-screen; it does
     * not remove it. The close button, six nav links, the WhatsApp CTA and the
     * phone/email row all stayed focusable inside a subtree the JS marks
     * aria-hidden="true", so a keyboard user tabbed into an element that
     * assistive tech reported as hidden.
     *
     * `visibility: hidden` (rather than the `inert` attribute alone) because it
     * also removes the links from the tab order in the browsers that predate
     * `inert` support, and it costs nothing here: the existing transform
     * transition still animates, and a visibility change on an
     * already-off-screen element is not visible to anyone.
     */
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    contain: layout paint;
  }

  .sneha-mobile-drawer:not(.open) {
    display: none !important;
  }

  .sneha-mobile-drawer.open {
    display: flex !important;
    transform: translateX(0);
    visibility: visible;
    /* Flip the delay back to 0s on open so the panel is visible for the whole
       slide-in rather than only after it finishes. */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
  }

  @media (min-width: 576px) and (max-width: 991.98px) {
    .sneha-mobile-drawer {
      width: 440px;
      max-width: 85vw;
      border-left: 1px solid var(--champagne-a15);
      box-shadow: -15px 0 60px rgba(0, 0, 0, 0.8);
    }
  }

  /* Hide bottom dock when drawer is open so it never overlaps drawer content */
  body.drawer-open .mobile-bottom-dock {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
  }

  /* Minimalist Haute Couture Header */
  .sneha-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--champagne-a08);
    background: transparent;
    flex-shrink: 0;
  }

  .sneha-drawer-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .sneha-drawer-brand .sneha-brand-crest {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--rose-gold-a30), 0 3px 12px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
  }

  .sneha-drawer-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .sneha-drawer-brand .sneha-brand-logo {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 1.05rem !important;
    font-weight: 600;
    letter-spacing: 0.04em !important;
    color: var(--ivory-silk, #FAF6F1) !important;
    white-space: nowrap;
    line-height: 1.15;
  }

  .sneha-drawer-brand .sneha-brand-sub {
    font-size: 0.58rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--rose-gold) !important;
    white-space: nowrap !important;
    line-height: 1.3;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 1px;
  }

  .sneha-drawer-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--champagne-a22);
    color: var(--champagne, #F4DEC8) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  .sneha-drawer-close:hover,
  .sneha-drawer-close:focus-visible {
    background: var(--rose-gold-a16);
    border-color: var(--rose-gold);
    color: var(--ivory-silk) !important;
    transform: rotate(90deg);
  }

  /* Haute Couture Navigation List */
  .sneha-drawer-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.5rem 2rem;
    gap: 0.75rem;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  @media (min-height: 720px) {
    .sneha-drawer-nav {
      /* justify-content: center; */
      gap: 1.1rem;
      padding: 2rem 2.25rem;
    }
  }

  .sneha-drawer-nav a,
  .sneha-drawer-nav a:visited,
  .sneha-drawer-link,
  .sneha-drawer-link:visited {
    display: block !important;
    padding: 0.35rem 0 !important;
    border: none !important;
    background: transparent !important;
    text-decoration: none !important;
    color: var(--champagne, #F4DEC8) !important;
    -webkit-text-fill-color: var(--champagne, #F4DEC8) !important;
    box-shadow: none !important;
    opacity: 0;
    transform: translateX(12px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link:nth-child(1) {
    transition-delay: 0.02s !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link:nth-child(2) {
    transition-delay: 0.04s !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link:nth-child(3) {
    transition-delay: 0.06s !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link:nth-child(4) {
    transition-delay: 0.08s !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link:nth-child(5) {
    transition-delay: 0.10s !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link:nth-child(6) {
    transition-delay: 0.12s !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link:nth-child(7) {
    transition-delay: 0.14s !important;
  }

  .sneha-mobile-drawer.open .sneha-drawer-link:nth-child(8) {
    transition-delay: 0.16s !important;
  }

  .sneha-drawer-title {
    font-family: var(--font-display, 'Cormorant Garamond', serif) !important;
    font-size: clamp(1.2rem, 4vw, 1.45rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--champagne, #F4DEC8) !important;
    -webkit-text-fill-color: var(--champagne, #F4DEC8) !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6) !important;
    line-height: 1.35 !important;
    display: inline-block !important;
    transition: color 0.25s ease, transform 0.25s ease, font-style 0.2s ease;
  }

  @media (min-height: 720px) {
    .sneha-drawer-title {
      font-size: clamp(1.25rem, 4.2vw, 1.5rem) !important;
    }
  }

  .sneha-drawer-link:hover .sneha-drawer-title,
  .sneha-drawer-link:focus-visible .sneha-drawer-title {
    color: var(--rose-gold, #C9956A) !important;
    -webkit-text-fill-color: var(--rose-gold, #C9956A) !important;
    font-style: italic !important;
    transform: translateX(8px);
  }

  .sneha-drawer-link.active,
  .sneha-drawer-link.active:visited {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .sneha-drawer-link.active .sneha-drawer-title {
    color: var(--rose-gold, #C9956A) !important;
    -webkit-text-fill-color: var(--rose-gold, #C9956A) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    position: relative;
  }

  .sneha-drawer-link.active .sneha-drawer-title::before {
    content: '✦';
    position: absolute;
    right: calc(100% + 0.45rem);
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-size: 0.72rem;
    color: var(--rose-gold);
    opacity: 0.85;
  }

  /* Editorial Atelier Imprint Footer */
  .sneha-drawer-footer {
    padding: 1.25rem 2rem;
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
    border-top: 1px solid var(--champagne-a08);
    background: transparent;
    flex-shrink: 0;
  }

  .sneha-drawer-btn {
    width: 100% !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%) !important;
    color: var(--plum-deep) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 8px 24px var(--rose-gold-a28) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .sneha-drawer-btn:hover,
  .sneha-drawer-btn:focus-visible {
    background: linear-gradient(135deg, var(--champagne-light) 0%, var(--rose-gold-light) 50%, var(--rose-gold) 100%) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 12px 30px var(--rose-gold-a45) !important;
    transform: translateY(-2px);
    color: var(--plum-deep) !important;
  }

  .sneha-drawer-imprint-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.2rem 0 0.9rem;
    width: 100%;
  }

  .sneha-drawer-imprint-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rose-gold-a30), transparent);
  }

  .sneha-drawer-imprint-star {
    font-size: 0.65rem;
    color: var(--rose-gold);
    opacity: 0.8;
    line-height: 1;
  }

  .sneha-drawer-imprint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
  }

  .sneha-drawer-imprint-location {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FAF6F1 !important;
    opacity: 0.9 !important;
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  }

  .sneha-drawer-imprint-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    text-decoration: none !important;
    transition: transform 0.2s ease;
  }

  .sneha-drawer-imprint-label {
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--champagne, #F3E5D8) !important;
    opacity: 0.9 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .sneha-drawer-imprint-sep {
    font-size: 0.65rem;
    color: var(--rose-gold);
    opacity: 0.7;
  }

  .sneha-drawer-imprint-number {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #FAF6F1 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    transition: color 0.2s ease;
  }

  .sneha-drawer-imprint-phone:hover .sneha-drawer-imprint-number {
    color: var(--pure-white) !important;
  }

  .sneha-drawer-imprint-phone:hover .sneha-drawer-imprint-label {
    color: var(--champagne) !important;
    opacity: 1;
  }

  @media (max-height: 700px) {
    .sneha-drawer-header {
      padding: 0.75rem 1.25rem;
    }

    .sneha-drawer-nav {
      padding: 0.75rem 1.75rem;
      gap: 0.35rem;
    }

    .sneha-drawer-nav a,
    .sneha-drawer-nav a:visited,
    .sneha-drawer-link,
    .sneha-drawer-link:visited {
      padding: 0.2rem 0 !important;
    }

    .sneha-drawer-title {
      font-size: 1.15rem !important;
    }

    .sneha-drawer-footer {
      padding: 0.75rem 1.5rem;
      padding-bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
    }

    .sneha-drawer-btn {
      min-height: 44px !important;
      font-size: 0.85rem !important;
    }

    .sneha-drawer-imprint-divider {
      margin: 0.6rem 0 0.4rem;
    }

    .sneha-drawer-imprint-location {
      font-size: 0.62rem;
    }

    .sneha-drawer-imprint-phone {
      min-height: 36px;
    }

    .sneha-drawer-imprint-number {
      font-size: 0.95rem;
    }
  }

  /* ── Mobile Hero Styles (Shared Across All 3 Modes) ───────────── */
  .hero-section,
  .hero-variant-fullbleed,
  .hero-variant-split,
  .hero-variant-float {
    min-height: calc(100vh - var(--whn-height-mob, 64px) - var(--wab-height, 35px) - 64px) !important;
    min-height: calc(100svh - var(--whn-height-mob, 64px) - var(--wab-height, 35px) - 64px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    background: var(--plum-canvas, #0c0711);
  }

  /* Desktop-only portrait columns: hidden on mobile */
  .hero-portrait-col,
  .hero-float-col,
  .hero-fullbleed-col {
    display: none !important;
  }

  /* 1. Mobile Backdrop: full-width portrait image at top */
  .hero-mobile-backdrop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    width: 100%;
    height: clamp(235px, 62vw, 265px) !important;
    flex-shrink: 0;
    overflow: hidden;
    margin: 0;
  }

  .hero-mobile-backdrop-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25% !important;
    /* Centers model forehead, eyes, nose, lips and smile in view */
  }

  /* Smooth gradient transition: photo blends softly into #0c0711 background without facial overlap */
  .hero-mobile-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(12, 7, 17, 0) 0%,
        rgba(12, 7, 17, 0) 70%,
        rgba(12, 7, 17, 0.4) 85%,
        var(--plum-canvas, #0c0711) 100%);
  }

  /* 2. Content container: sits cleanly below backdrop image without facial overlap */
  .hero-split-container,
  .hero-float-container,
  .hero-fullbleed-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto !important;
    position: relative;
    z-index: 3;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.75rem !important;
  }

  .hero-split-grid,
  .hero-float-grid,
  .hero-fullbleed-grid {
    display: block;
    padding: 0;
    margin: 0;
  }

  .hero-content,
  .hero-fullbleed-content {
    position: relative;
    z-index: 3;
    max-width: 100%;
    padding: 0 var(--sneha-gutter, 1.25rem);
  }

  .hero-script-tag {
    font-size: clamp(1.15rem, 3.6vw, 1.4rem) !important;
    margin-bottom: 0.2rem !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 14px rgba(10, 5, 15, 0.95) !important;
  }

  .hero-title {
    font-size: clamp(1.65rem, 5.2vw, 2.05rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-subtitle {
    display: none !important;
  }

  .hero-scroll-hint {
    display: none !important;
  }

  .hero-actions {
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }

  .hero-actions .btn {
    padding: 0.65rem 1.35rem !important;
    font-size: 0.85rem !important;
    min-height: 42px !important;
  }

  /* 3. Authority Trust Pillars: 2x2 luxury grid, visible with natural scroll flow */
  .hero-trust-bar.trust-strip,
  .trust-strip {
    width: 100%;
    margin-top: 0 !important;
    padding: 0.65rem 0 !important;
    background: var(--plum-canvas-a80, rgba(12, 7, 17, 0.8));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--rose-gold-a22);
    border-bottom: 1px solid var(--rose-gold-a15);
    box-shadow: none;
    position: relative;
    z-index: 4;
    flex-shrink: 0;
  }

  .hero-trust-bar .sneha-container {
    padding: 0 var(--sneha-gutter, 1.25rem);
  }

  .trust-strip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
    box-shadow: none;
  }

  .trust-badge {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.55rem 0.6rem !important;
    display: flex;
    align-items: center;
    gap: 0.65rem !important;
    min-height: auto;
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Delicate luxury hairline grid dividers matching laptop aesthetic */
  .trust-badge:nth-child(odd) {
    border-right: 1px solid var(--rose-gold-a16);
    padding-left: 0.15rem !important;
  }

  .trust-badge:nth-child(even) {
    padding-right: 0.15rem !important;
    padding-left: 0.65rem !important;
  }

  .trust-badge:nth-child(1),
  .trust-badge:nth-child(2) {
    border-bottom: 1px solid var(--rose-gold-a16);
  }

  .trust-badge-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: var(--rose-gold-a10);
    border: 1px solid var(--rose-gold-a28);
    color: var(--champagne);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: none;
    font-size: 1.1rem !important;
  }

  .trust-badge-icon svg {
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor;
  }

  .trust-badge-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .trust-badge-title {
    font-family: var(--font-body);
    font-size: 0.82rem !important;
    font-weight: 600;
    letter-spacing: 0.015em;
    color: var(--champagne, #F3E5D8);
    line-height: 1.25;
  }

  .trust-badge-sub {
    font-size: 0.68rem !important;
    font-weight: 400;
    letter-spacing: 0.015em;
    color: var(--rose-gold-light, #DEB48A);
    opacity: 0.85;
    line-height: 1.2;
  }

  /* ── Narrowest phones (≤380px) ── */
  @media (max-width: 380px) {
    .hero-mobile-backdrop {
      height: clamp(225px, 60vw, 255px) !important;
    }

    .hero-mobile-backdrop-img {
      object-position: center 25% !important;
    }

    .hero-split-container,
    .hero-float-container,
    .hero-fullbleed-container {
      margin: 0 auto !important;
      flex: 1 1 auto;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      padding-top: 0.35rem !important;
      padding-bottom: 0.65rem !important;
    }

    .trust-badge {
      gap: 0.45rem !important;
      padding: 0.4rem 0.4rem !important;
    }

    .trust-badge:nth-child(odd) {
      padding-left: 0 !important;
    }

    .trust-badge:nth-child(even) {
      padding-right: 0 !important;
      padding-left: 0.45rem !important;
    }

    .trust-badge-icon {
      width: 30px !important;
      height: 30px !important;
      border-radius: 7px !important;
      font-size: 0.95rem !important;
    }

    .trust-badge-icon svg {
      width: 14px !important;
      height: 14px !important;
    }

    .trust-badge-title {
      font-size: 0.76rem !important;
      line-height: 1.2 !important;
    }

    .trust-badge-sub {
      font-size: 0.64rem !important;
      line-height: 1.15 !important;
    }
  }

  .page-hero-section {
    padding-top: clamp(5.5rem, 12vw, 7rem) !important;
  }
}

.mobile-tab,
.mobile-tab:visited,
a.mobile-tab,
a.mobile-tab:visited,
button.mobile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Raised from 0.72rem (11.5px) to 0.75rem (12px) — minimum legibility
     floor. Colour lifted to pass WCAG AA small-text contrast on the dark
     dock background (var(--plum-midnight-a96)). */
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--wmf-item, rgba(248, 244, 240, 0.90)) !important;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 0.35rem 0.2rem;
  text-align: center;
  line-height: 1.15;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-tab span:last-child {
  white-space: nowrap;
  font-size: 0.7rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: inherit !important;
}

.mobile-tab:hover,
.mobile-tab:focus-visible {
  color: var(--rose-gold-light, #DEB48A) !important;
}

.mobile-tab.active,
.mobile-tab.active:visited,
a.mobile-tab.active,
a.mobile-tab.active:visited {
  color: var(--wmf-active, var(--rose-gold-light)) !important;
}

.mobile-tab-icon {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: inherit !important;
}

.mobile-tab-icon svg,
.mobile-tab:visited .mobile-tab-icon svg,
a.mobile-tab:visited .mobile-tab-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor !important;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.mobile-tab.active .mobile-tab-icon svg,
.mobile-tab.active:visited .mobile-tab-icon svg,
a.mobile-tab.active:visited .mobile-tab-icon svg {
  stroke: var(--wmf-active, var(--rose-gold-light)) !important;
  transform: translateY(-1px);
}

/* On the narrowest phones the dock stays compact, but the label must not drop
   below the 12px legibility floor. This previously set 0.62rem (9.92px) while
   the comment above it claimed it "still clears the 12px legibility floor" —
   it did not. */
@media (max-width: 380px) {
  .mobile-tab {
    font-size: 0.75rem;
  }

  .mobile-tab-icon {
    font-size: 1.1rem;
  }

  .mobile-tab-icon svg {
    width: 17px;
    height: 17px;
  }
}

.mobile-tab-center {
  position: relative;
  top: -14px;
}

.mobile-tab-center .mobile-tab-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%);
  color: var(--plum-midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  box-shadow: var(--shadow-rose);
  border: 3px solid var(--plum-midnight);
}

.mobile-tab-center .mobile-tab-btn svg {
  width: 24px;
  height: 24px;
  stroke: var(--plum-midnight);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 18. VIP Bride Lounge & Client Suite Styles ─────────────────── */
.bride-lounge-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: radial-gradient(circle at 50% 10%, var(--plum-primary) 0%, var(--plum-midnight) 100%);
  position: relative;
  border-top: 1px solid var(--rose-gold-a20);
  border-bottom: 1px solid var(--rose-gold-a20);
}

.lounge-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.lounge-demo-note {
  background: var(--rose-gold-a12);
  border: 1px solid var(--rose-gold-a35);
  border-left: 4px solid var(--rose-gold);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--text-light-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
}

.lounge-demo-note strong {
  color: var(--champagne);
}

.lounge-tabs [role="tab"] {
  cursor: pointer;
}

.lounge-dashboard-card {
  background: var(--plum-primary-a90);
  border: 1px solid var(--rose-gold-a40);
  border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  color: var(--text-light);
}

.lounge-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--rose-gold-a25);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.lounge-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rose-gold-a20);
  padding-bottom: 0.75rem;
}

.lounge-tab-btn {
  background: rgba(38, 22, 50, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rose-gold-a28);
  color: var(--text-light-muted);
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-mid) var(--ease-elegant);
  /* Same 48x48 floor as .filter-btn. */
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.lounge-tab-btn:hover:not(.active) {
  border-color: var(--rose-gold-a55);
  color: var(--champagne);
  background: var(--rose-gold-a12);
  transform: translateY(-1px);
}

.lounge-tab-btn.active {
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%);
  color: var(--plum-midnight) !important;
  border-color: var(--rose-gold);
  font-weight: 600;
  box-shadow: 0 4px 16px var(--rose-gold-a35);
}

.lounge-tab-content {
  min-height: 480px;
}

.lounge-tab-content.active {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lounge-grid-2 {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem;
  align-items: stretch;
}

@media (max-width: 767.98px) {
  .lounge-grid-2 {
    grid-template-columns: 1fr;
  }
}

.lounge-box {
  background: var(--plum-midnight-a75);
  border: 1px solid var(--rose-gold-a25);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  min-height: 320px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .lounge-tab-content {
    min-height: 360px;
  }

  .lounge-box {
    min-height: 340px;
  }
}

.timeline-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 2px solid var(--rose-gold);
  padding-left: 1rem;
  position: relative;
}

.timeline-time {
  color: var(--champagne);
  font-weight: 700;
  min-width: 75px;
}

/* ── 19. Accessibility & Reduced Motion ──────────────────────────── */
:focus-visible {
  outline: 3px solid var(--rose-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 20. Complimentary Atelier Courtesies & Signature Inclusions ──── */
.privilege-pass-section {
  padding: clamp(3.5rem, 6vw, 5rem) 0;
  background: radial-gradient(circle at 50% 30%, var(--plum-primary) 0%, var(--plum-deep, #150B1B) 100%);
  color: var(--text-light);
  border-top: 1px solid var(--rose-gold-a25);
  border-bottom: 1px solid var(--rose-gold-a25);
  position: relative;
  overflow: hidden;
}

.privilege-pass-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--rose-gold-a08) 0%, transparent 70%);
  pointer-events: none;
}

/* Master Atelier Container */
.privilege-passbook {
  background: linear-gradient(165deg, rgba(42, 24, 51, 0.92) 0%, rgba(20, 11, 27, 0.98) 100%);
  border: 1px solid var(--rose-gold-light-a32);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--rose-gold-light-a22);
  position: relative;
  z-index: 2;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin: 0 auto;
}

/* Header */
.privilege-passbook-header {
  text-align: center;
  padding: 3.2rem 2.5rem 2.2rem;
  position: relative;
}

.privilege-passbook-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rose-gold-a14);
  border: 1px solid var(--rose-gold-a38);
  color: var(--champagne);
  padding: 0.35rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.privilege-passbook-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  color: var(--pure-white);
  margin-bottom: 0.65rem;
  line-height: 1.25;
}

.privilege-passbook-desc {
  font-size: 0.96rem;
  color: var(--text-light-muted);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

.privilege-terms-link {
  margin-top: 0.85rem;
  font-size: 0.85rem;
}

.privilege-terms-link a {
  color: var(--rose-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 4-Pillar Grid inside Passbook */
.privilege-passbook-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rose-gold-a20);
  border-bottom: 1px solid var(--rose-gold-a20);
  background: rgba(255, 255, 255, 0.015);
  position: relative;
  z-index: 2;
}

.privilege-passbook-grid .privilege-card {
  background: transparent;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--rose-gold-a18);
  padding: 2.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--duration-mid) var(--ease-elegant);
  position: relative;
}

.privilege-passbook-grid .privilege-card:last-child {
  border-right: none;
}

.privilege-passbook-grid .privilege-card:hover {
  background: var(--rose-gold-light-a06);
  transform: none;
  box-shadow: none;
  border-color: var(--rose-gold-a18);
}

.privilege-card-top {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.privilege-pillar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.privilege-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rose-gold-light-a12);
  border: 1px solid var(--rose-gold-light-a35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.privilege-value-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%);
  color: var(--plum-midnight);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.privilege-title {
  font-family: var(--font-display) !important;
  font-size: 1.24rem;
  color: var(--champagne);
  margin-bottom: 0.6rem;
  line-height: 1.35;
  text-align: left;
}

.privilege-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: left;
}

/* Offer conditions */
.privilege-terms {
  font-size: 0.74rem;
  color: var(--text-light-muted);
  opacity: 0.85;
  line-height: 1.5;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rose-gold-a16);
  margin-top: auto;
  text-align: left;
}

.privilege-action {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--rose-gold-a22);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.privilege-btn {
  background: none;
  border: none;
  color: var(--rose-gold) !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--duration-fast) var(--ease-elegant);
  white-space: nowrap;
}

.privilege-btn:hover {
  background: none;
  color: var(--champagne) !important;
  transform: translateX(3px);
  box-shadow: none;
}

/* Passbook Footer */
.privilege-passbook-footer {
  padding: 1.4rem 2.2rem;
  background: var(--rose-gold-light-a06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.privilege-passbook-note {
  font-size: 0.88rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.privilege-seal-icon {
  color: var(--rose-gold);
  font-size: 0.95rem;
}

.privilege-passbook-footer .btn {
  padding: 0.75rem 1.6rem !important;
  font-size: 0.86rem !important;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .privilege-passbook-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .privilege-passbook-grid .privilege-card:nth-child(1),
  .privilege-passbook-grid .privilege-card:nth-child(2) {
    border-bottom: 1px solid var(--rose-gold-a18);
  }

  .privilege-passbook-grid .privilege-card:nth-child(2n) {
    border-right: none;
  }

  .privilege-passbook-grid .privilege-card:nth-child(2n+1) {
    border-right: 1px solid var(--rose-gold-a18);
  }
}

/* ── 21. Sector-93 & Regional Coverage Hub ───────────────────────── */
.coverage-section {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  background: var(--plum-midnight);
  color: var(--text-light);
  border-bottom: 1px solid var(--rose-gold-a20);
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.coverage-card {
  background: var(--plum-primary-a70);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-glass);
  border: 1px solid var(--rose-gold-a30);
  color: var(--text-light);
  transition: all var(--duration-mid) var(--ease-elegant);
  display: flex;
  flex-direction: column;
}

.coverage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  border-color: var(--rose-gold);
}

.coverage-card-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.coverage-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem;
  color: var(--champagne);
  margin-bottom: 0.5rem;
}

.coverage-card-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rose-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.coverage-card-desc {
  font-size: 0.92rem;
  color: var(--text-light-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.coverage-sectors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--rose-gold-a20);
}

.coverage-tag {
  background: var(--rose-gold-a15);
  color: var(--rose-gold-light);
  border: 1px solid var(--rose-gold-a25);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

a.coverage-tag:hover {
  background: var(--rose-gold);
  color: var(--plum-midnight);
  border-color: var(--rose-gold);
  transform: translateY(-1px);
}

/* ── 22. Auspicious Saaya Wedding Date Scarcity Engine ────────────── */
.saaya-checker-section {
  padding: clamp(2.75rem, 5vw, 4rem) 0;
  background: radial-gradient(circle at 50% 20%, var(--plum-primary, #2A1732) 0%, var(--plum-deep, #150B1B) 100%);
  color: var(--text-light);
  position: relative;
  overflow: visible !important;
  z-index: 50;
  border-bottom: 1px solid var(--rose-gold-a20);
}

.saaya-checker-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: 0;
  max-width: 100%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--rose-gold-a12) 0%, transparent 70%);
  pointer-events: none;
}

.saaya-header {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.saaya-checker-card {
  background: var(--plum-primary-a72);
  border: 1px solid var(--rose-gold-a32);
  border-radius: 20px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: visible !important;
  z-index: 5;
}

.saaya-checker-section:has(.is-open),
.saaya-checker-section.has-open-select,
body.has-open-select .saaya-checker-section,
body.has-open-calendar .saaya-checker-section {
  z-index: 9999 !important;
}

.saaya-checker-card:has(.is-open),
.saaya-checker-card.has-open-select {
  z-index: 9999 !important;
}

/* ── NCR Luxury Trust Pillars ───────────────────────────────────── */
.concierge-trust-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rose-gold-a20);
}

.concierge-pillar {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--plum-midnight-a65);
  border: 1px solid var(--rose-gold-a25);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  transition: all 250ms ease;
}

.concierge-pillar:hover {
  background: var(--plum-midnight-a90);
  border-color: var(--rose-gold-a45);
  transform: translateY(-2px);
}

.concierge-pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rose-gold-a16);
  color: var(--champagne);
  flex-shrink: 0;
}

.concierge-pillar-text {
  display: flex;
  flex-direction: column;
}

.concierge-pillar-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--champagne);
  margin-bottom: 0.25rem;
  letter-spacing: 0.01em;
}

.concierge-pillar-desc {
  font-size: 0.78rem;
  color: var(--text-light-muted);
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .concierge-trust-pillars {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Quick-Pick Saaya Pills (Refined Single-Row Luxury Scroller) */
.saaya-quick-picks {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rose-gold-a20);
}

.saaya-quick-picks-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.saaya-quick-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--champagne);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.saaya-quick-hint {
  font-size: 0.78rem;
  color: var(--text-light-muted);
}

.saaya-pills-wrap {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0.75rem 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rose-gold-a40) transparent;
  position: relative;
}

.saaya-pills-wrap::-webkit-scrollbar {
  height: 4px;
}

.saaya-pills-wrap::-webkit-scrollbar-track {
  background: var(--plum-midnight-a50);
  border-radius: 4px;
}

.saaya-pills-wrap::-webkit-scrollbar-thumb {
  background: var(--rose-gold-a40);
  border-radius: 4px;
}

.saaya-pills-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--rose-gold);
}

.saaya-quick-picks:not(.pills-at-end) .saaya-pills-wrap::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  display: block;
  width: 56px;
  height: 100%;
  margin-left: -56px;
  background: linear-gradient(to right, transparent, var(--plum-royal, #3D2648));
  pointer-events: none;
  flex-shrink: 0;
  align-self: stretch;
}

.saaya-pill-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--plum-midnight-a75);
  border: 1px solid var(--rose-gold-a35);
  border-radius: 9999px;
  padding: 0.55rem 1.15rem;
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-body);
  text-align: left;
}

.saaya-pill-date {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--champagne);
}

.saaya-pill-sub {
  font-size: 0.72rem;
  color: var(--text-light-muted);
  opacity: 0.85;
}

.saaya-pill-btn:hover {
  background: var(--rose-gold-a18);
  border-color: var(--rose-gold);
  transform: translateY(-2px);
}

.saaya-pill-btn.active {
  background: linear-gradient(135deg, var(--rose-gold-light) 0%, var(--rose-gold) 100%);
  border-color: var(--rose-gold-light);
  box-shadow: 0 4px 15px var(--rose-gold-a40);
  transform: translateY(-2px);
}

.saaya-pill-btn.active .saaya-pill-date {
  color: var(--plum-midnight);
  font-weight: 700;
}

.saaya-pill-btn.active .saaya-pill-sub {
  color: var(--plum-primary);
  font-weight: 600;
}

/* Form Controls */
.saaya-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.75rem;
  overflow: visible !important;
  position: relative;
}

.saaya-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  position: relative;
}

/*
 * Ceremony / Function Type is hidden for à-la-carte services (party glam,
 * hair + draping only). `display: flex` from the rule above outranks the UA
 * [hidden] rule, so restate it explicitly or the field stays on screen.
 */
.saaya-field[hidden] {
  display: none !important;
}

.saaya-field:has(.is-open),
.saaya-field.has-open-select {
  z-index: 10000 !important;
}

.saaya-label,
.form-label,
.form-group label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--champagne, #F4DEC8) !important;
  -webkit-text-fill-color: var(--champagne, #F4DEC8) !important;
  margin-bottom: 0.48rem;
  line-height: 1.3;
  opacity: 1 !important;
}

.saaya-req {
  color: var(--rose-gold);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
}

.saaya-label-spacer {
  visibility: hidden;
}

.saaya-input,
.saaya-select,
.form-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.82rem 1.15rem;
  background: linear-gradient(180deg, rgba(38, 22, 50, 0.52) 0%, rgba(20, 11, 28, 0.72) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rose-gold-a28);
  border-radius: 12px;
  color: var(--ivory-silk, #FAF6F1) !important;
  -webkit-text-fill-color: var(--ivory-silk, #FAF6F1) !important;
  opacity: 1 !important;
  -webkit-opacity: 1 !important;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.35), 0 1px 2px var(--rose-gold-a05);
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
}

.saaya-input:hover,
.saaya-select:hover {
  border-color: var(--rose-gold-a48);
  background: linear-gradient(180deg, rgba(46, 26, 60, 0.62) 0%, rgba(26, 14, 36, 0.78) 100%);
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.28), 0 2px 10px var(--rose-gold-a10);
}

.saaya-input:focus,
.saaya-input:focus-visible,
.saaya-select:focus,
.saaya-select:focus-visible {
  outline: none;
  border-color: var(--rose-gold);
  background: linear-gradient(180deg, rgba(42, 24, 55, 0.94) 0%, rgba(24, 13, 33, 0.98) 100%);
  box-shadow: 0 0 0 3px var(--rose-gold-a22), inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.saaya-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9956A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 1.15rem) center;
  background-size: 15px 15px;
  padding-right: 2.85rem !important;
  cursor: pointer;
  color-scheme: dark;
}

select.form-control {
  color-scheme: dark;
}

.saaya-select option,
select.form-control option,
select option {
  background-color: #140b1c !important;
  color: #FAF6F1 !important;
  padding: 0.75rem 1rem;
}

.saaya-select option:checked,
select.form-control option:checked,
select option:checked,
.saaya-select option:hover,
select.form-control option:hover,
select option:hover {
  background-color: #3b1d42 !important;
  color: #E2B29F !important;
}

.saaya-input::placeholder {
  color: rgba(250, 246, 241, 0.38);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Explicit date input constraints to eliminate iOS Safari & Android mobile overflow */
.saaya-input[type="date"],
.form-control[type="date"],
input[type="date"].saaya-input,
input[type="date"].form-control {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color-scheme: dark;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.8) sepia(60%) saturate(400%) hue-rotate(330deg) brightness(1.1);
  opacity: 0.9;
  padding: 4px;
  border-radius: 6px;
  margin-left: 0.4rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Autofill luxury styling override */
.saaya-input:-webkit-autofill,
.saaya-select:-webkit-autofill,
.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--plum-midnight) inset !important;
  -webkit-text-fill-color: var(--ivory-silk) !important;
  caret-color: var(--ivory-silk) !important;
  border-color: var(--rose-gold-a45) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* iOS Safari auto-zooms inputs below 16px — prevent on mobile. */
@media (max-width: 767.98px) {

  .saaya-input,
  .saaya-select {
    font-size: 16px;
    padding: 0.8rem 1rem;
  }
}

.saaya-field-action {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}

.saaya-submit-btn {
  width: 100%;
  max-width: 440px;
  height: auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.25rem;
  font-size: var(--btn-font, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}

/* Dynamic Live Result Card */
.saaya-result-card {
  background: var(--plum-midnight-a92);
  border: 1px solid var(--rose-gold-a35);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 1rem;
  transition: all 300ms ease;
  animation: fadeIn 0.4s ease forwards;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.saaya-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rose-gold-a20);
}

.booking-anchor-target {
  display: block;
  position: relative;
  height: 0;
  visibility: hidden;
  scroll-margin-top: calc(var(--whn-height, 80px) + 32px);
}

.saaya-privacy-note {
  font-size: 0.76rem;
  color: var(--rose-gold-light);
  margin-top: 0.75rem;
  text-align: center;
  opacity: 0.88;
  display: block !important;
  line-height: 1.45;
}

.saaya-privacy-note svg {
  display: inline-block !important;
  vertical-align: -2px !important;
  margin-right: 4px !important;
}

.saaya-offseason-note {
  font-size: 0.78rem;
  color: var(--rose-gold-light);
  margin-top: 0.45rem;
  opacity: 0.9;
  line-height: 1.4;
}

.saaya-offseason-note a {
  color: var(--champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 150ms ease;
}

.saaya-offseason-note a:hover {
  opacity: 0.8;
}

.saaya-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--rose-gold-light-a14);
  border: 1px solid var(--rose-gold-light-a45);
  color: var(--champagne, #DEB48A);
}

.saaya-state-critical .saaya-status-pill {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid var(--state-danger, #EF4444);
  color: var(--state-danger-text, #FCA5A5);
}

.saaya-state-high .saaya-status-pill {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid var(--state-warning, #F59E0B);
  color: var(--state-warning-text, #FCD34D);
}

.saaya-state-open .saaya-status-pill {
  background: var(--rose-gold-light-a14);
  border-color: var(--rose-gold-light-a45);
  color: var(--champagne, #DEB48A);
}

.saaya-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose-gold-light);
  box-shadow: 0 0 10px var(--rose-gold-light-a70);
  animation: pulse 1.6s infinite;
}

.saaya-state-critical .saaya-pulse-dot {
  background: var(--state-danger, #EF4444);
}

.saaya-state-high .saaya-pulse-dot {
  background: var(--state-warning, #F59E0B);
}

.saaya-state-open .saaya-pulse-dot {
  background: var(--rose-gold-light);
  box-shadow: 0 0 8px var(--rose-gold-light-a60);
}

/* Dynamic Result Card: Hidden when empty */
.saaya-result-card:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.saaya-result-compact {
  display: block;
  margin-top: 1.25rem;
  padding: 1.15rem 1.5rem;
  background: var(--plum-midnight-a95);
  border: 1px solid var(--rose-gold-a40);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: fadeIn 0.3s ease forwards;
}

.saaya-compact-receipt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.saaya-submitted-link-msg {
  font-size: 0.92rem;
  margin: 0.25rem 0 0 0;
}

.saaya-submitted-link-msg a {
  color: var(--whatsapp-green, #25D366);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.saaya-submitted-trial-msg {
  font-size: 0.78rem;
  color: var(--text-light-muted);
  margin: 0;
}

.saaya-submitted-trial-msg a {
  color: var(--champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Alert Banner on Packages Page */
.saaya-alert-banner {
  background: linear-gradient(90deg, var(--plum-primary) 0%, var(--plum-royal) 50%, var(--plum-primary) 100%);
  border-bottom: 1px solid var(--rose-gold-a30);
  padding: 1rem 0;
  color: var(--text-light);
}

.saaya-alert-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.saaya-alert-text {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.saaya-alert-text strong {
  color: var(--champagne);
  display: block;
}

.saaya-alert-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Responsive Breakpoints */
@media (max-width: 991.98px) {
  .saaya-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .saaya-form-grid {
    grid-template-columns: 1fr;
  }

  .saaya-field-action .saaya-submit-btn {
    max-width: 100%;
  }

  .saaya-label-spacer {
    display: none;
  }

  .saaya-result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .saaya-lock-btn {
    justify-content: center;
  }

  body {
    padding-bottom: 0 !important;
  }
}


/* ── Keyframes ─────────────────────────────────────────────────── */
/*
 * `fadeIn` is referenced by .saaya-result-card (above) and by the
 * portfolio filter in snehamua-theme.js, but was never defined, so both
 * animations were silently dropped by the browser.
 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Honour the OS-level motion preference for every animation we define. */
@media (prefers-reduced-motion: reduce) {

  .saaya-result-card,
  .portfolio-item {
    animation: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   22. Mobile-First UX, Touch Ergonomics & Safe Area Enhancements
   ============================================================================= */

@media (max-width: 767.98px) {

  /* Prevent button blowout and horizontal overflow */
  .btn {
    text-align: center;
    max-width: 100%;
    word-break: break-word;
  }

  /* Prevent iOS Safari auto-zoom on input focus */
  .form-control,
  .saaya-input,
  .saaya-select,
  input[type="text"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Touch target compliance (WCAG 2.5.5 >= 44x44px) */
  .sneha-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    padding: 10px 9px !important;
  }

  .sneha-drawer-close {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    font-size: 2rem !important;
  }

  /* The close button already had a 44px width, but it was being squeezed by
     the brand flex item, which refused to yield space. Measured 20px wide at
     360px and 35px at 390px. Letting the brand shrink restores the full 44px. */
  .sneha-drawer-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .sneha-drawer-brand-text {
    min-width: 0 !important;
  }

  .sneha-drawer-brand .sneha-brand-logo,
  .sneha-drawer-brand .sneha-brand-sub {
    white-space: nowrap;
  }

  .privilege-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.6rem 1.25rem !important;
  }

  /* Declutter mobile header: let brand mark breathe */
  .sneha-header-actions .header-cta-btn {
    display: none !important;
  }

  /* Compact mobile brand lockup & announcement bar: single line, no top truncation */
  html body #wab-bar.wab-sticky,
  html body .wab-bar.wab-sticky,
  html body #wab-bar,
  #wab-bar.wab-sticky,
  .wab-bar.wab-sticky,
  #wab-bar,
  .wab-announcement-bar,
  .sneha-announcement-bar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10001 !important;
    font-size: clamp(0.68rem, 2.8vw, 0.74rem) !important;
    padding: 0.35rem 0.5rem !important;
    min-height: 34px !important;
    height: auto !important;
    line-height: 1.25 !important;
    overflow: visible !important;
  }

  #wab-bar .wab-inner,
  #wab-bar .wab-track {
    height: auto !important;
  }

  #wab-bar .wab-item,
  .wab-item {
    padding: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    white-space: nowrap !important;
  }

  #wab-bar .wab-item span,
  .wab-item span {
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
    display: inline-block !important;
  }

  .sneha-header-inner {
    padding-left: clamp(0.75rem, 3vw, 1rem) !important;
    padding-right: clamp(0.75rem, 3vw, 1rem) !important;
    gap: 0.5rem !important;
  }

  .sneha-brand {
    gap: clamp(0.45rem, 2vw, 0.65rem) !important;
    min-width: 0 !important;
  }

  .sneha-brand-crest {
    width: 36px !important;
    height: 36px !important;
  }

  .sneha-brand-logo {
    font-size: clamp(1.1rem, 4.4vw, 1.3rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .sneha-brand-sub {
    font-size: clamp(0.58rem, 1.8vw, 0.64rem) !important;
    letter-spacing: clamp(0.12em, 2vw, 0.18em) !important;
    margin-top: 2px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    opacity: 0.9 !important;
  }

  /* Clarify Lookbook imagery on mobile: subtle bottom vignette only */
  .portfolio-overlay {
    background: linear-gradient(180deg, transparent 72%, var(--plum-midnight-a88) 100%) !important;
    padding: 0.75rem 1rem !important;
  }

  /* About page floating badge mobile alignment */
  .about-exp-badge {
    right: 0 !important;
    bottom: -10px !important;
  }

  /* Keep mobile dock label legible.
     This was 0.68rem, which resolves to 10.88px — below the 12px floor.
     This declaration is the real control on the label: the parent
     .mobile-tab is already 0.75rem (:2834) and the base span rule is 0.7rem
     (:2856), but this !important block overrode both. Raising the parent at
     :2834 or :2896 alone changes nothing measurable. */
  .mobile-tab span:last-child {
    font-size: 0.75rem !important;
  }

  /* ── Mobile Horizontal Peek Carousels (CSS Scroll-Snap, Zero JS Overhead) ── */
  /* 1. Portfolio Grid Peek Carousel */
  .portfolio-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding: 0.5rem 0.5rem 1.5rem 0.5rem !important;
    margin: 0 -1rem !important;
    padding-left: 1rem !important;
    padding-right: 2rem !important;
    scrollbar-width: none !important;
  }

  .portfolio-grid::-webkit-scrollbar {
    display: none !important;
  }

  .portfolio-item {
    flex: 0 0 78% !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
    aspect-ratio: 4/5 !important;
  }

  /* 3. Complimentary Atelier Courtesies Peek Carousel */
  .privilege-passbook-grid,
  .privilege-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0.75rem 1.25rem 1.5rem 1.25rem !important;
    scrollbar-width: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  .privilege-passbook-grid::-webkit-scrollbar,
  .privilege-grid::-webkit-scrollbar {
    display: none !important;
  }

  .privilege-passbook-grid .privilege-card,
  .privilege-card {
    flex: 0 0 84vw !important;
    max-width: 315px !important;
    min-height: 380px !important;
    scroll-snap-align: center !important;
    background: rgba(32, 17, 40, 0.85) !important;
    border: 1px solid var(--rose-gold-light-a30) !important;
    border-radius: 16px !important;
    padding: 1.85rem 1.45rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .privilege-passbook-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    padding: 1.5rem 1.25rem !important;
    gap: 1rem !important;
  }

  .privilege-passbook-note {
    justify-content: center !important;
    font-size: 0.82rem !important;
    text-align: center !important;
  }

  .privilege-passbook-footer .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 4. Testimonials (Love Notes) Peek Carousel */
  .testimonials-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1.25rem !important;
    padding: 0.5rem 0.5rem 1.5rem 0.5rem !important;
    margin: 0 -1rem !important;
    padding-left: 1rem !important;
    padding-right: 2rem !important;
    scrollbar-width: none !important;
  }

  .testimonials-grid::-webkit-scrollbar {
    display: none !important;
  }

  .review-card {
    flex: 0 0 84% !important;
    max-width: 330px !important;
    scroll-snap-align: center !important;
  }

  /* 5. Regional Coverage Hub Peek Carousel */
  .coverage-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding: 0.5rem 0.5rem 1.5rem 0.5rem !important;
    margin: 0 -1rem !important;
    padding-left: 1rem !important;
    padding-right: 2rem !important;
    scrollbar-width: none !important;
  }

  .coverage-grid::-webkit-scrollbar {
    display: none !important;
  }

  .coverage-card {
    flex: 0 0 84% !important;
    max-width: 330px !important;
    scroll-snap-align: center !important;
  }

  /* Section padding tightening on mobile to prevent vertical scroll fatigue */
  .transformation-section {
    padding: clamp(1rem, 2.5vw, 1.5rem) 0 clamp(2.5rem, 6vw, 3.5rem) !important;
  }

  .portfolio-section:not(.page-lookbook-section):not(:has(#lookbook-sticky-bar)),
  .packages-section,
  .privilege-pass-section,
  .journey-section,
  .testimonials-section,
  .coverage-section,
  .faq-section {
    padding: clamp(2.5rem, 6vw, 3.5rem) 0 !important;
  }

  .saaya-checker-section {
    padding-top: clamp(2.5rem, 6vw, 3.5rem) !important;
    padding-bottom: calc(var(--mobile-bottom-bar-height, 64px) + env(safe-area-inset-bottom, 16px) + 3rem) !important;
  }

  /* ────────────────────────────────────────────────────────────────────────
     Mobile a11y pass — touch targets, section rhythm, legibility floors.

     Every declaration below is additive and scoped to this breakpoint, so
     desktop and tablet are untouched. Each value is measured, not guessed.
     ──────────────────────────────────────────────────────────────────────── */

  /* 1. Footer link tap targets.
        Columns 2-4 sit at the WCAG 2.2 AA minimum of 24px (2.5.8); the
        "Connect With Sneha" column (.footer-col:nth-child(4)) carries the
        primary conversion actions — WhatsApp, Instagram, Facebook, booking and
        maps — so it gets the full 44px. Column 1 is the brand column and has
        no .footer-links. */
  .footer-links a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  /* The inline phone and email links in the footer contact list, and the
        Instagram handle inside the reels intro sentence. These are inline
        `<a>` inside a run of text, so they inherited the line box: measured at
        320px they were 104x17, 183x17 and 171x21, all under the 24px that
        2.5.8 requires. They were missed because the earlier pass only looked at
        block-level link lists. Inline-flex plus a 24px floor keeps them on the
        same line as their label while making the hit area 24px tall. */
  .footer-contact-list a,
  .section-desc a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  .footer-col:nth-child(4) .footer-links a {
    min-height: 44px;
  }

  /* Locality pills are already 36px, which clears the WCAG 2.2 AA minimum of
     24px (2.5.8), and they live inside the collapsed <details> where the added
     height is invisible by default. Raising them to 44px cost +184px of page
     height on every page load for an enhancement nobody sees, so it is
     deliberately NOT applied here. */

  /* 2. Section rhythm. The list above covers eight sections; these six were
        never added and kept desktop-scale clamp() values, which made the
        mobile page feel unevenly loose. Matching them to the existing list is
        safer than introducing a new global padding rule. */
  .coverage-bar-section,
  .booking-section,
  .why-choose-section,
  .instagram-showcase-section,
  .bride-lounge-section {
    padding: clamp(2.5rem, 6vw, 3.5rem) 0 !important;
  }

  /* 4. Supporting-text legibility floors (gracefully scaling on <=320px). */
  .sneha-brand-sub {
    font-size: clamp(0.58rem, 1.8vw, 0.64rem) !important;
  }

  .trust-badge-title,
  .saaya-pill-sub,
  .ig-follow-pill {
    font-size: 0.75rem !important;
    /* was 11.52px / 11.52px / 10.88px */
  }

  /* 5. Packages — the horizontal peek carousel override lives further down the
        file, immediately after the a079584 vertical-stack reset it has to
        beat. Cascade order matters here; see the block after that reset. */
}

/* Safe Area Insets & Bottom Clearance for iOS & Gesture Navigation */
@media (max-width: 991.98px) {
  .mobile-bottom-dock {
    height: calc(var(--mobile-bottom-bar-height) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .sneha-footer {
    padding-bottom: calc(var(--mobile-bottom-bar-height) + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
  }
}

/* =============================================================================
   23. Luxury Portfolio Lightbox Modal (Mobile-First Touch Viewer)
   ============================================================================= */
.sneha-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  border: none;
  background: rgba(10, 5, 14, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

dialog.sneha-lightbox {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border: none !important;
}

dialog.sneha-lightbox:not([open]) {
  display: none !important;
}

.sneha-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.sneha-lightbox-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rose-gold-a20);
  border: 1px solid var(--rose-gold);
  color: var(--champagne);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sneha-lightbox-close:hover,
.sneha-lightbox-close:focus {
  background: var(--rose-gold);
  color: var(--plum-midnight);
  transform: scale(1.08);
}

.sneha-lightbox-body {
  max-width: 90vw;
  max-height: 80vh;
  max-height: 80dvh;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sneha-lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  max-height: 70dvh;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  border: 1px solid var(--rose-gold-a30);
}

.sneha-lightbox-caption {
  margin-top: 1rem;
  text-align: center;
  color: var(--text-light);
}

.sneha-lightbox-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--champagne);
  margin-bottom: 0.25rem;
}

.sneha-lightbox-cat {
  font-size: 0.8rem;
  color: var(--rose-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sneha-lightbox-inquire {
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  padding: 0.6rem 1.35rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 15px var(--rose-gold-a35);
  transition: all 0.2s ease;
}

.sneha-lightbox-inquire:hover,
.sneha-lightbox-inquire:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--rose-gold-a50);
  color: var(--plum-midnight);
}

/* ── 24. Sneha Bridal Experience Homepage Preview Cards ────────── */
.experience-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.experience-preview-card {
  background: var(--plum-primary-a45);
  border: 1px solid var(--rose-gold-a25);
  border-radius: 16px;
  padding: 2.2rem 1.8rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.experience-preview-card:hover {
  transform: translateY(-4px);
  border-color: var(--rose-gold);
  background: var(--plum-primary-a70);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.experience-card-icon {
  font-size: 2.2rem;
  margin-bottom: 1.25rem;
}

.experience-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--champagne);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.experience-card-desc {
  font-size: 0.92rem;
  color: var(--text-light-muted);
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .experience-preview-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .experience-preview-card {
    flex: 0 0 82%;
    min-width: 82%;
    scroll-snap-align: center;
    padding: 1.75rem 1.4rem;
  }
}

/* ── 25. Before/After Interaction Hint ───────────────────────────── */
@keyframes ba-hint-sweep {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  25% {
    transform: translate(calc(-50% - 18px), -50%) scale(1.08);
  }

  75% {
    transform: translate(calc(-50% + 18px), -50%) scale(1.08);
  }
}

.ba-handle-button.hint-active {
  animation: ba-hint-sweep 1.8s cubic-bezier(0.25, 1, 0.5, 1) 1;
}

/* ── 26. Luxury Lightbox Prev/Next Controls & Counter ────────────── */
.sneha-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--plum-midnight-a85);
  border: 1px solid var(--rose-gold);
  color: var(--champagne);
  font-size: 2.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.sneha-lightbox-nav:hover,
.sneha-lightbox-nav:focus {
  background: var(--rose-gold);
  color: var(--plum-midnight);
  transform: translateY(-50%) scale(1.1);
}

.sneha-lightbox-prev {
  left: max(1rem, env(safe-area-inset-left));
}

.sneha-lightbox-next {
  right: max(1rem, env(safe-area-inset-right));
}

@media (max-width: 767.98px) {
  .sneha-lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 1.8rem;
  }
}

.sneha-lightbox-counter {
  position: absolute;
  top: max(1.1rem, env(safe-area-inset-top));
  left: 1.25rem;
  background: var(--plum-midnight-a75);
  border: 1px solid var(--rose-gold-a30);
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--rose-gold-light);
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Landscape phones: image + caption cannot fit a ~360px-tall viewport, so
   shrink the image and tighten spacing to keep everything above the fold. */
@media (orientation: landscape) and (max-height: 500px) {
  .sneha-lightbox {
    padding: 0.5rem;
  }

  .sneha-lightbox-body {
    max-height: 92dvh;
  }

  .sneha-lightbox-img {
    max-height: 52vh;
    max-height: 52dvh;
    border-radius: 10px;
  }

  .sneha-lightbox-caption {
    margin-top: 0.5rem;
  }

  .sneha-lightbox-title {
    font-size: 1.05rem;
  }

  .sneha-lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 1.7rem;
  }
}

/* ── 27. Atelier Craftsmanship & Standards Section ───────────────── */
.why-choose-section {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--plum-midnight, #140B1A);
  position: relative;
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.25rem;
}

@media (max-width: 1100px) {
  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

.why-card {
  background: rgba(30, 16, 38, 0.72);
  border: 1px solid var(--rose-gold-a22);
  border-radius: 16px;
  padding: 2rem 1.6rem;
  transition: transform var(--duration-mid) var(--ease-elegant), border-color var(--duration-mid) var(--ease-elegant), box-shadow var(--duration-mid) var(--ease-elegant);
  position: relative;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
}

.why-card:hover {
  transform: translateY(-4px);
  border-color: var(--rose-gold);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.why-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--rose-gold-a10);
  border: 1px solid var(--rose-gold-a28);
  color: var(--champagne);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.why-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--champagne);
  transition: stroke var(--duration-fast);
}

.why-card:hover .why-card-icon {
  background: var(--rose-gold-a20);
  border-color: var(--rose-gold);
}

.why-card:hover .why-card-icon svg {
  stroke: var(--rose-gold);
}

.why-card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--champagne);
  margin-bottom: 0.65rem;
  line-height: 1.25;
}

.why-card-desc {
  font-size: 0.88rem;
  color: var(--text-light-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── 28. Streamlined Regional Coverage Bar ──────────────────────── */
.coverage-bar-section {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--plum-midnight);
  border-top: 1px solid var(--rose-gold-a15);
}

.coverage-bar-card {
  background: var(--plum-primary-a55);
  border: 1px solid var(--rose-gold-a25);
  border-radius: 20px;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
}

.coverage-bar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.coverage-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--plum-midnight-a60);
  border: 1px solid var(--rose-gold-a20);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  transition: border-color var(--duration-mid) ease;
}

.coverage-pill:hover {
  border-color: var(--rose-gold);
}

.coverage-pill-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.coverage-pill-title {
  display: block;
  color: var(--champagne);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.coverage-pill-sub {
  display: block;
  color: var(--text-light-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

@media (max-width: 991.98px) {
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .instagram-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.85rem !important;
    margin: 0 -1rem !important;
    padding: 0 1rem 1rem 1rem !important;
    scrollbar-width: none !important;
  }

  .instagram-grid::-webkit-scrollbar {
    display: none !important;
  }

  .ig-card {
    flex: 0 0 70% !important;
    max-width: 240px !important;
    scroll-snap-align: start !important;
  }
}

.ig-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1/1;
  display: block;
  border: 1px solid var(--rose-gold-a20);
  box-shadow: var(--shadow-sm);
}

.ig-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-elegant);
}

.ig-card:hover img {
  transform: scale(1.08);
}

.ig-overlay {
  position: absolute;
  inset: 0;
  background: var(--plum-midnight-a75);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: var(--text-light);
  padding: 1rem;
  text-align: center;
}

.ig-card:hover .ig-overlay,
.ig-card:focus .ig-overlay {
  opacity: 1;
}

.ig-icon {
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
}

.ig-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rose-gold-light);
  letter-spacing: 0.04em;
}

/* ── 30. Scroll-Driven Section Reveal Animations ─────────────────── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ── 31. Instagram Reels-Style Showcase ────────────────────────────── */
.instagram-showcase-section {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: radial-gradient(circle at 50% 20%, var(--plum-deep, #1e1026) 0%, var(--plum-darkest, #0d0612) 100%);
  border-top: 1px solid var(--rose-gold-a20);
  border-bottom: 1px solid var(--rose-gold-a20);
  position: relative;
  overflow: hidden;
}

.ig-reels-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Luxury Carousel Navigation Arrows */
.ig-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(22, 12, 30, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--rose-gold-a40);
  color: var(--champagne);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--duration-fast) var(--ease-elegant);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  padding: 0;
}

.ig-prev-btn {
  left: -20px;
}

.ig-next-btn {
  right: -20px;
}

.ig-carousel-btn:hover {
  background: var(--rose-gold);
  color: var(--plum-midnight);
  border-color: var(--champagne);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 30px var(--rose-gold-a45);
}

.ig-carousel-btn:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .ig-carousel-btn {
    display: none;
  }
}

/* Horizontal Reels Track */
.ig-reels-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1.5rem;
  padding: 0.75rem 0.5rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rose-gold-a40) transparent;
  mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);
}

.ig-reels-grid::-webkit-scrollbar {
  height: 6px;
}

.ig-reels-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
}

.ig-reels-grid::-webkit-scrollbar-thumb {
  background: var(--rose-gold-a40);
  border-radius: 9999px;
}

/* Individual Reel Card — High-immersion 9:16 vertical ratio */
.ig-reel-card {
  position: relative;
  /* 3 cards visible per screen on desktop */
  flex: 0 0 calc((100% - 3rem) / 3);
  max-width: 370px;
  min-width: 290px;
  height: 620px;
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  border-radius: 22px;
  overflow: hidden;
  display: block;
  border: 1px solid var(--rose-gold-a32);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65);
  background: var(--plum-deep, #120917);
  transition: transform var(--duration-mid) var(--ease-elegant),
    box-shadow var(--duration-mid) var(--ease-elegant),
    border-color var(--duration-mid) var(--ease-elegant);
  text-decoration: none;
}

@media (max-width: 1024px) {
  .ig-reel-card {
    /* 2 cards visible on tablet */
    flex: 0 0 calc((100% - 1.5rem) / 2);
    min-width: 280px;
    height: 560px;
  }
}

@media (max-width: 640px) {
  .ig-reels-grid {
    gap: 1rem !important;
    margin: 0 -1rem !important;
    padding: 0.5rem 1rem 1.25rem 1rem !important;
    scrollbar-width: none !important;
    /* Use CSS scroll-snap for a native swipe feel — no JS needed */
    scroll-snap-type: x mandatory !important;
  }

  .ig-reels-grid::-webkit-scrollbar {
    display: none !important;
  }

  .ig-reel-card {
    height: 540px !important;
    border-radius: 18px;
    scroll-snap-align: center !important;
  }

  /* Add a right-edge fade to signal more cards, same pattern as pills */
  .ig-reels-wrapper {
    position: relative;
  }

  .ig-reels-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--plum-midnight, #1A0F22));
    pointer-events: none;
    z-index: 5;
    /* Fade hides itself once the track reaches the last card (JS toggles .at-end) */
    transition: opacity 0.3s ease;
  }

  .ig-reels-wrapper.at-end::after {
    opacity: 0;
    pointer-events: none;
  }
}

.ig-reel-card:hover,
.ig-reel-card:focus {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--rose-gold);
  box-shadow: 0 20px 50px var(--rose-gold-a28);
}

/* Reel Media Container & Images */
.ig-reel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ig-reel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-elegant);
}

.ig-reel-card:hover .ig-reel-media img {
  transform: scale(1.05);
}

.ig-reel-scrim-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.ig-reel-scrim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 260px;
  background: linear-gradient(0deg, rgba(12, 6, 17, 0.96) 0%, rgba(12, 6, 17, 0.8) 45%, rgba(12, 6, 17, 0.3) 75%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Top Bar: Official Reels Badge & View Counter */
.ig-reel-header {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}

.ig-reel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--pure-white);
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ig-reels-icon {
  display: flex;
  align-items: center;
  color: var(--rose-gold);
}

.ig-reel-views,
.ig-reel-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--champagne, #F4DEC8) !important;
  -webkit-text-fill-color: var(--champagne, #F4DEC8) !important;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  background: rgba(28, 14, 36, 0.78);
  border: 1px solid rgba(201, 149, 106, 0.5);
  padding: 0.32rem 0.72rem;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.ig-reel-watch-text {
  color: var(--champagne, #F4DEC8) !important;
  -webkit-text-fill-color: var(--champagne, #F4DEC8) !important;
  font-weight: 600;
}

.ig-reel-card:hover .ig-reel-views,
.ig-reel-card:hover .ig-reel-watch {
  background: rgba(201, 149, 106, 0.3);
  border-color: var(--rose-gold, #C9956A);
  color: var(--pure-white, #FFFFFF) !important;
  -webkit-text-fill-color: var(--pure-white, #FFFFFF) !important;
}

.ig-reel-watch-arrow {
  color: var(--rose-gold, #C9956A) !important;
  -webkit-text-fill-color: var(--rose-gold, #C9956A) !important;
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.ig-reel-card:hover .ig-reel-watch-arrow {
  transform: translate(2px, -2px);
  color: var(--pure-white, #FFFFFF) !important;
  -webkit-text-fill-color: var(--pure-white, #FFFFFF) !important;
}

/* Center Frosted Play Button (Disabled: original cover image already features authentic Instagram play icon) */
.ig-reel-center-play {
  display: none !important;
}

/* Right-Side Floating Action Rail (Iconic Instagram Reel Column) */
.ig-reel-actions-rail {
  position: absolute;
  right: 0.75rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  z-index: 4;
}

.ig-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
}

.ig-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
  transition: transform 0.2s ease;
}

.ig-reel-card:hover .ig-action-icon {
  transform: scale(1.1);
}

.ig-action-count {
  font-size: 0.72rem;
  color: var(--pure-white);
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Spinning Vinyl Disc */
.ig-vinyl-disc {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--plum-primary) 30%, var(--pure-black, #000000) 70%);
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: igVinylSpin 4s linear infinite;
  margin-top: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.ig-vinyl-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rose-gold);
}

@keyframes igVinylSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Bottom Editorial Meta & Scrim */
.ig-reel-bottom-scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 3.5rem;
  padding: 1.25rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  z-index: 4;
}

.ig-creator-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ig-avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(45deg, var(--ig-amber, #f09433) 0%, var(--ig-orange, #e6683c) 25%, var(--ig-crimson, #dc2743) 50%, var(--ig-pink, #cc2366) 75%, var(--ig-purple, #bc1888) 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--plum-deep);
  display: block;
}

.ig-creator-handle {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pure-white);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.ig-follow-pill {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--pure-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  margin-left: auto;
}

.ig-reel-title-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ivory-silk);
  line-height: 1.35;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}

.ig-reel-audio-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ig-music-icon {
  color: var(--rose-gold);
  font-size: 0.75rem;
}

/* ── 32. Package Tier Visual Accents: Card 1 and 2 look identical, only Card 3 (featured) differs ── */
.packages-grid .pkg-card {
  border-left: 1px solid var(--rose-gold-a32);
}

.packages-grid .pkg-card.featured {
  border-left: 1.8px solid var(--rose-gold-light-a80);
}

/* Mobile: cap package bullet list depth */
@media (max-width: 576px) {
  .pkg-inclusions {
    max-height: 20rem;
    overflow: hidden;
    position: relative;
  }
}

/* ── 33. Vanity Kit — Logo-Pill Brand Items ───────────────────────── */
.brand-item {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.8rem;
  border: 1px solid var(--rose-gold-a35);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--champagne);
  background: var(--rose-gold-a08);
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.brand-item:hover {
  background: var(--rose-gold-a18);
  border-color: var(--rose-gold-a60);
}

.luxury-brands-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

/* Hide bullet separators — pills handle visual separation */
.brand-dot {
  display: none !important;
}


/* ── 34. Luxury Brands Logo Strip & Mobile Rows ──────────────────── */
.luxury-brands-logo-strip {
  width: 100%;
  max-width: 1240px;
  overflow: hidden;
  border-radius: 14px;
  margin: 1.5rem auto 0.75rem;
  line-height: 0;
  background: rgba(18, 9, 24, 0.65);
  border: 1px solid var(--rose-gold-light-a24);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 0.6rem 1rem;
}

.luxury-brands-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.luxury-brands-img:hover {
  opacity: 1;
}

.luxury-brands-mobile-rows {
  display: none;
}

@media (max-width: 767.98px) {
  .luxury-brands-logo-strip {
    display: none !important;
  }

  .luxury-brands-mobile-rows {
    display: flex !important;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    margin: 1.15rem 0 0.5rem;
  }

  .luxury-brands-mobile-row {
    background: rgba(22, 11, 28, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--rose-gold-light-a22);
    border-radius: 12px;
    padding: 0.5rem 0.65rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .luxury-brands-mobile-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .luxury-brands-heading {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .luxury-brands-promise {
    font-size: 0.7rem;
    line-height: 1.4;
    padding: 0 0.5rem;
  }
}

/* ── 35. Packages — vertical stacked cards on mobile ─────────────── */
/* Industry standard for service/pricing pages: horizontal scroll is an
   acceptable UX for galleries but works against conversion on pricing
   decisions. Stacking cards full-width ensures every package is seen.
   The featured card's gold border-left accent (section 32) is kept.
   Cards are separated by a subtle luxury divider line for hierarchy. */
@media (max-width: 767.98px) {

  /* Reset the outer wrapper from its horizontal scroll role */
  .packages-scroll-wrapper {
    overflow-x: visible;
    overflow-y: visible;
    display: block;
    margin: 0;
    padding: 0 0 1rem 0;
    scroll-snap-type: none;
    scrollbar-width: auto;
  }

  .packages-scroll-wrapper::-webkit-scrollbar {
    display: revert;
  }
}


/* ── Packages: horizontal peek carousel (restores swipe-right browsing) ──
   Placed deliberately AFTER the a079584 vertical-stack reset above. At equal
   specificity the later block wins, so this must come after it — placing it
   earlier in the file silently does nothing.

   The selectors repeat the `.packages-scroll-wrapper X` form used by the
   reset, because the reset is !important at a higher specificity; a plain
   `.pkg-card` rule would lose and the cards would stay full-width and stacked.
   Likewise overflow-x and scroll-snap-type must be re-asserted, because the
   reset sets them to visible / none.

   The grid is the scroll container; the wrapper stays overflow visible. */
@media (max-width: 767.98px) {

  .packages-scroll-wrapper .packages-grid,
  .packages-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem !important;
    /* The grid box must stay the width of its wrapper, NOT max-content. If the
       box itself grows to the full 1040px of cards there is nothing left to
       scroll: scrollWidth == clientWidth, the wrapper is overflow:visible so
       it cannot scroll either, and cards 2-3 become unreachable. Keeping the
       box at 100% and letting the 320px cards overflow *inside* it is what
       makes scrollWidth (1040) exceed clientWidth (358). */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 2rem 1rem 0 !important;
    margin: 1.25rem 0 0 !important;
  }

  .packages-scroll-wrapper .packages-grid::-webkit-scrollbar,
  .packages-grid::-webkit-scrollbar {
    display: none;
  }

  .packages-scroll-wrapper .pkg-card,
  .pkg-card {
    flex: 0 0 84vw !important;
    width: auto !important;
    max-width: 320px !important;
    min-height: 460px !important;
    scroll-snap-align: start !important;
  }

  /* Cards are 320px wide in the carousel (358px when stacked), so the
     full-width CTA inside them needs slightly tighter side padding or its
     label clips by 2-3px. Scoped to the card CTA so verified buttons
     elsewhere keep their current spacing. */
  .packages-scroll-wrapper .pkg-card .pkg-card-action .btn,
  .pkg-card .pkg-card-action .btn {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
}


/* ── 36. Horizontal Touch Peek Scroll Wrappers (mobile) ──────────── */
.why-choose-scroll-wrapper,
.journey-scroll-wrapper {
  /* Desktop: standard block container */
}

@media (max-width: 767.98px) {

  .why-choose-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 0;
    margin: 0 -1rem;
    padding: 0 1rem 1.25rem 1rem;
    scrollbar-width: none;
  }

  .why-choose-scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  .why-choose-scroll-wrapper .why-choose-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    min-width: max-content;
  }

  .why-choose-scroll-wrapper .why-card {
    flex: 0 0 78vw;
    max-width: 290px;
    scroll-snap-align: start;
    padding: 1.6rem 1.3rem;
  }
}

/* ── 37. Scroll-hint fade indicator (right edge) ─────────────────── */
.packages-scroll-wrapper::after,
.why-choose-scroll-wrapper::after,
.journey-scroll-wrapper::after {
  content: none;
  /* shown only on mobile via media query below */
}

@media (max-width: 767.98px) {

  .packages-scroll-wrapper,
  .why-choose-scroll-wrapper,
  .journey-scroll-wrapper {
    position: relative;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   SPRINT 1 MOBILE UX PATCH — Chunk 1 (October 2026)
   Targeted improvements from the deep mobile review.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 38. Portfolio 2-column grid on small handsets ─────────────────── */
/* Default single-column with aspect-ratio 4/5 produces ~330px-tall tiles
   on 375px screens — users see fewer than 2 items at once. Switching to
   2-columns increases visible portfolio density by ~2× and aligns with
   how Nykaa / Vogue Beauty surface image-heavy galleries on mobile. */
@media (max-width: 480px) {
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .portfolio-item {
    aspect-ratio: 3 / 4;
  }

  /* Tighten overlay padding for narrower 2-col tiles */
  .portfolio-overlay {
    padding: 0.65rem 0.75rem;
  }

  .portfolio-overlay-title {
    font-size: 0.95rem;
  }

  .portfolio-overlay-cat {
    font-size: 0.75rem;
    /* was 0.65rem = 10.4px */
  }
}

/* ── 39. Muhurtham date-pill horizontal scroll fade indicator ─────── */
/* Without a right-edge fade the pill list looks like it ends — users
   won't discover additional auspicious dates further along the row.
   The pseudo-element gradient signals "more content to the right". */
.saaya-date-scroll-wrapper {
  position: relative;
}

.saaya-date-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--plum-royal, #3D2648));
  pointer-events: none;
  z-index: 2;
  border-radius: 0 12px 12px 0;
}

/* JS can toggle this class when scroll reaches the end */
.saaya-date-scroll-wrapper.no-overflow::after {
  display: none;
}

/* ── 40. Reduce excessive footer top-padding on small screens ────── */
@media (max-width: 480px) {
  .sneha-footer {
    padding-top: 3rem !important;
  }
}

/* ── 41. FAQ question — tighter font on narrow screens ───────────── */
@media (max-width: 480px) {
  .faq-question {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
  }

  .faq-answer {
    padding: 0 1.25rem 1.1rem;
  }
}

/* ── 42. Tablet body-padding reset (mirrors dock breakpoint fix) ─── */
/* body padding-bottom is now only set at max-width: 767.98px.
   This explicit @media min-width rule overrides any plugin or theme
   override that may still inject the old 991.98px rule. */
@media (min-width: 768px) {
  body {
    padding-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SPRINT 3 MOBILE UX ENHANCEMENTS — Chunk 3 (October 2026)
   Interactivity refinement & linear narrative transformation.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 43. Before/After Transformation Slider — Mobile Affordance ─── */
.ba-view-wrapper {
  cursor: ew-resize;
}

.ba-range-input {
  /* Pass pointer gestures to ba-view-wrapper for direction-guarded touch tracking */
  pointer-events: none;
}

.ba-range-input:focus-visible {
  pointer-events: auto;
  outline: 2px solid var(--rose-gold, #C9956A);
}

@media (max-width: 767.98px) {
  .ba-handle-button {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.2rem !important;
    border: 2.5px solid var(--pure-white) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75), 0 0 16px var(--rose-gold-a50) !important;
  }

  .ba-section {
    padding-bottom: calc(var(--mobile-bottom-bar-height, 68px) + 1.5rem) !important;
    scroll-margin-bottom: calc(var(--mobile-bottom-bar-height, 68px) + 1.5rem);
  }

  .ba-slider-container {
    padding-bottom: 2rem !important;
  }
}

/* ── 44. 4-Step Bridal Journey — Vertical Connected Timeline ──────── */
@media (max-width: 767.98px) {

  /* Override the horizontal scroll wrapper */
  .journey-scroll-wrapper {
    overflow-x: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  .journey-scroll-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  .journey-scroll-wrapper::after {
    display: none !important;
  }

  /* Hide the horizontal swipe hint on mobile since steps are now vertically stacked */
  .journey-section .mobile-swipe-hint {
    display: none !important;
  }

  /* Vertical timeline container */
  .journey-scroll-wrapper .journey-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    min-width: 0 !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
    margin-top: 1.75rem !important;
  }

  /* Connected timeline cards: Step number on left, title & description on right */
  .journey-scroll-wrapper .journey-step {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 1.1rem !important;
    row-gap: 0.35rem !important;
    align-items: start !important;
    text-align: left !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    background: linear-gradient(135deg, rgba(32, 17, 40, 0.88) 0%, rgba(22, 11, 28, 0.94) 100%) !important;
    border: 1px solid var(--rose-gold-a28) !important;
    border-radius: 16px !important;
    padding: 1.35rem 1.15rem !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: relative !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
  }

  /* Step number badge */
  .journey-scroll-wrapper .journey-num {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background: var(--plum-royal) !important;
    border: 2px solid var(--rose-gold) !important;
    color: var(--champagne) !important;
    box-shadow: 0 0 16px var(--rose-gold-a35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  /* Step title */
  .journey-scroll-wrapper .journey-step-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-family: var(--font-display) !important;
    font-size: 1.22rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-align: left !important;
    color: var(--champagne) !important;
    line-height: 1.3 !important;
  }

  /* Step description */
  .journey-scroll-wrapper .journey-step-desc {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: left !important;
    color: var(--text-light-muted) !important;
  }

  /* Vertical connector line connecting consecutive step cards */
  .journey-scroll-wrapper .journey-step:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    left: calc(1.15rem + 24px) !important;
    /* Centered under 48px journey-num */
    top: 100% !important;
    height: 1.25rem !important;
    /* Spans the gap between cards */
    width: 2px !important;
    background: linear-gradient(180deg, var(--rose-gold) 0%, var(--rose-gold-a25) 100%) !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
  }
}


/* ==========================================================================
   Carousel snap alignment — the first card had NO left gutter
   ==========================================================================
   Both horizontal tracks use `margin: 0 -1rem` to bleed to the viewport edge
   and `padding-left: 1rem` to restore the gutter. That works at scrollLeft 0
   in a static box, but these tracks set `scroll-snap-type: x mandatory`, and
   `scroll-padding-left` defaults to `auto` (= 0). The snapport is therefore
   the scrollport's *padding box*, so the browser snaps each card flush to the
   padding edge — i.e. x = 0, not x = 16px.

   Measured: first card left = 0px while every other section's content sits at
   16px. Declaring `scroll-padding-left` re-insets the snapport so the snap
   position coincides with the intended gutter. Verified, not assumed.
   ========================================================================== */
.portfolio-grid,
.ig-reels-grid {
  scroll-padding-left: 1rem;
}

.portfolio-grid {
  scroll-padding-right: 2rem;
  /* matches its own padding-right */
}

/* ==========================================================================
   Behind the Scenes — make the next card visibly peek
   ==========================================================================
   Card was `90vw` = 351px inside a 358px content box, so the next card sat
   behind a 16px gap and showed 0px of itself. Measured peek was exactly 16px
   (the gap) at 360/390/412 — indistinguishable from no affordance at all.
   76vw leaves a ~46px sliver at 390px: enough to read as "there is more".
   ========================================================================== */
@media (max-width: 640px) {
  .ig-reel-card {
    /* `min-width` from the <=1024px tablet rule (280px) OVERRIDES a smaller
       flex-basis, which floored the card at 280px on 320/360px screens and
       left the second card completely off-screen. It must be reset to 0 here
       or the peek below is unreachable on small phones. */
    flex: 0 0 74vw !important;
    min-width: 0 !important;
    max-width: 300px !important;
  }
}

/* ==========================================================================
   FAQ — match the width of neighbouring sections
   ==========================================================================
   `.faq-list` had `max-width: 800px` inside a 1240px container, so at >=1024px
   the FAQ column was 144-440px narrower than every other section. Measured.

   Naively widening to the full 1240px would push answers to ~163 characters
   per line. They are *already* ~105ch at 800px, which is past the 60-75ch
   comfortable range. So instead of one wide column, this uses a two-column
   grid: the section now spans the same width as its neighbours while each
   answer lands near ~80ch. The width request and the readability problem are
   the same fix, not a tradeoff.
   ========================================================================== */
@media (min-width: 1024px) {
  .faq-list {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.35rem;
    align-items: start;
  }

  .faq-question {
    font-size: clamp(1.02rem, 1.05vw, 1.18rem) !important;
    padding: 0.85rem 1.15rem !important;
  }
}

/* ==========================================================================
   TEMPORARILY HIDDEN — owner request, 2026-10-04
   ==========================================================================
   "Circuits & Venues" coverage bar. Hidden via CSS only (no template change)
   so it costs one rule to restore. Nothing links to #coverage, so removing it
   from the flow breaks no in-page anchor. */
.coverage-bar-section {
  display: none;
}

/* ==========================================================================
   BUTTON SCALE TOKENS — Stage 1 (additive, no visual change)
   ==========================================================================
   Measured inventory: 210 buttons across 8 pages rendered 50 distinct style
   signatures. `.btn` itself was already a clean single source of truth; ten
   rules overrode it. These tokens give those overrides one place to come from
   so future sections consume tokens instead of inventing values.

   Declared but not yet consumed. Wiring them up is Stage 2 and must be measured
   one selector at a time, because 13 CTAs currently wrap onto two lines and a
   font-size increase makes more of them wrap.

   Padding is split into -y / -x rather than a single shorthand, because the
   mobile override (`padding: .7rem 1.15rem`) changes both axes independently
   and could not reuse a composite `--btn-padding`.
   ========================================================================== */
:root {
  /* Tier A — pill CTA. The default `.btn`. */
  --btn-font: 0.95rem;
  --btn-weight: 600;
  --btn-tracking: 0.03em;
  --btn-pad-y: 0.9rem;
  --btn-pad-x: 2rem;
  --btn-radius: 9999px;
  --btn-min-h: 48px;

  /* Tier B — compact pill. TWO sizes exist in the wild and they are not
     interchangeable: 0.86rem (hero, package card, passbook footer) and
     0.82rem (package entourage, lightbox). A single --btn-sm value would grow
     the entourage button and cannot express the header at all. */
  --btn-sm-font: 0.86rem;
  --btn-sm-pad-y: 0.75rem;
  --btn-sm-pad-x: 1.35rem;
  --btn-sm-min-h: 44px;

  /* Tier B-xs — header CTA. Intentionally the smallest button on the site.
     Header space is the tightest on the page; raising it toward --btn-sm
     risks wrapping the header, so it gets its own explicit token. */
  --btn-xs-font: 0.76rem;
  --btn-xs-pad-y: 0.42rem;
  --btn-xs-pad-x: 0.85rem;

  /* Tier C — single-line chips: `.filter-btn`, `.lounge-tab-btn`.
     Lowercase and not uppercase: these are segmented controls, not CTAs, and
     must not inherit Tier A's text-transform. */
  --chip-font: 0.88rem;
  --chip-pad-y: 0.6rem;
  --chip-pad-x: 1.25rem;
  --chip-radius: 9999px;
  --chip-min-h: 48px;

  /* Tier C2 — `.saaya-pill-btn`. Deliberately NOT folded into --chip-*.
     It stacks a date over a sub-label, so it measures 62px tall at 1rem, not
     48px at 0.88rem. Applying --chip-min-h here would clip the sub-label. */
  --pill-date-font: 1rem;
  --pill-date-pad-y: 0.55rem;
  --pill-date-pad-x: 1.15rem;
  --pill-date-radius: 9999px;
  --pill-date-min-h: 62px;
}

/* ==========================================================================
   STAGE 1a — Radius unification (layout-neutral: border-radius never
   participates in layout, so page heights cannot move)
   ==========================================================================
   8px, 10px and 30px pills were sitting directly beside 9999px pills — the
   most visible inconsistency in the set. */
.pkg-card .btn {
  border-radius: 9999px;
}

.saaya-submit-btn {
  border-radius: 9999px;
}

.lounge-tab-btn {
  border-radius: 9999px;
}

/* ==========================================================================
   STAGE 1b — Lightbox touch targets (WCAG 2.5.8 / 44px minimum)
   ==========================================================================
   Root cause: two separate `@media (max-width: 767.98px)` blocks shrink
   `.sneha-lightbox-nav` to 38x38, below the 44px minimum. `min-width` and
   `min-height` override `width`/`height`, so this needs no !important.

   Verified safe at 390px and 1440px: the close button occupies y16-60 (top
   corner) while the nav arrows sit at y403-441 (vertically centred), so they
   never overlap despite sharing the horizontal axis. The arrows stay inside
   the viewport (next right edge 374 <= 390).

   `.sneha-lightbox-dismiss` has no CSS rule of its own — it is sized entirely
   by inline styles on the JS template, and `.btn-sm` is a dead class (used in
   markup 4 times, defined 0 times). min-height overrides the inline padding. */
.sneha-lightbox-nav {
  min-width: 44px;
  min-height: 44px;
}

.sneha-lightbox-dismiss {
  min-height: 44px;
  background: transparent;
  color: var(--champagne);
  border: 1px solid var(--rose-gold-a30);
  padding: 0.5rem 1.15rem;
  border-radius: var(--btn-radius, 9999px);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-mid) var(--ease-elegant);
}

.sneha-lightbox-dismiss:hover {
  background: var(--rose-gold-a15);
  color: var(--pure-white);
  border-color: var(--rose-gold);
  transform: translateY(-1px);
}

/* ── 45. Mobile heading scale & single-line label integrity ───────── */
/* Every rule in this section answers one measured defect from the
   320/375/390/412px Playwright sweep. None of it is speculative.

   ROOT CAUSE 1 — desktop heading size on a phone.
   `.section-title` is `clamp(2.2rem, 5vw, 3.6rem)`. At 320px the 5vw term is
   only 16px, so the 2.2rem (35.2px) FLOOR wins and a desktop-sized heading is
   rendered on a 320px handset. Measured 2-3 line wraps:
     "The Transformation Studio"                        2 lines @320/375/390
     "Your Glam Journey with Sneha"                     2 lines @320-412
     "Reserve Your Date & Get a Quote"                  2 lines @320/375/390
     "Frequently Asked Questions"                       2 lines @320/375/390
     "The Artistry & Vision Behind Makeovers By Sneha"  3 lines @320/375/390
     "Spaze Privvy Studio, Sector 93 & On-Venue ..."    3 lines @320/375/390
   A sweep of 20/21/22/23/24/25px put the threshold for one-line rendering at
   22px for the longest of these inside a 288px column, so the floor is 1.4rem
   (22.4px) and the slope is 7vw. Scoped to the three heading classes only —
   body copy, card text and every other type step are left exactly as they
   were, because this is a polish pass and not a rebrand.

   `.lounge-dash-title` carried its size as an inline `font-size: 1.85rem`,
   which outranks any stylesheet rule, so the clamp above could not reach it
   until the inline size was dropped from the template. */
.lounge-dash-title {
  font-size: 1.85rem;
}

@media (max-width: 767.98px) {

  .section-title,
  .page-hero-title,
  .lounge-dash-title {
    font-size: clamp(1.4rem, 7vw, 1.65rem);
    line-height: 1.2;
  }
}

/* VIP Bridal Entourage Ribbon mobile styles are unified in .pkg-entourage-ribbon (CSS Grid full-width architecture) */


/* Harmonized mobile button typography — unifies button scale across hero banner,
   packages, and availability checker so no button appears disproportionately small
   or wraps into awkward multi-line shapes. */
@media (max-width: 767.98px) {

  .btn,
  .hero-actions .btn,
  .saaya-submit-btn {
    font-size: clamp(0.80rem, 2.4vw, 0.86rem) !important;
    padding: 0.72rem 1.15rem !important;
    white-space: nowrap !important;
    letter-spacing: 0.025em !important;
  }

  .saaya-submit-btn {
    border-radius: var(--btn-radius, 9999px) !important;
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 360px) {

  .btn,
  .hero-actions .btn,
  .saaya-submit-btn {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    font-size: clamp(0.75rem, 3.5vw, 0.80rem) !important;
  }
}

/* Trust strip mobile alignment is unified in .trust-badge (align-items: center) matching laptop masthead ribbon */


/* The dock labels reached 322px inside a 320px viewport, so the widest label
   ("Connect With Sneha") pushed 2px past the edge on the smallest supported
   handset. 0.68rem keeps the label above the 12px floor the audit asserts for
   `dockLabel` while removing the overflow. */
@media (max-width: 767.98px) {
  .mobile-bottom-dock {
    padding: 0 6px !important;
    gap: 2px !important;
  }

  .mobile-bottom-dock .mobile-tab {
    padding: 0.35rem 2px !important;
  }

  .mobile-bottom-dock .mobile-tab span:last-child {
    font-size: 0.68rem;
    letter-spacing: -0.02em;
    padding: 0 !important;
  }
}

@media (max-width: 350px) {
  .mobile-bottom-dock {
    padding: 0 4px !important;
  }

  .mobile-tab-center .mobile-tab-btn {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ── Polish Updates: Hide Stress-Free Experience and Date & Availability trust boxes ── */
.journey-section,
#journey,
.concierge-trust-pillars {
  display: none !important;
}

/* ── Meet Sneha Founder Section ────────────────────────────────────────── */
.meet-sneha-section {
  padding: 5rem 0;
  position: relative;
  background: radial-gradient(circle at 80% 20%, var(--rose-gold-a08) 0%, transparent 60%), var(--plum-midnight);
}

.meet-sneha-card {
  background: var(--plum-deep);
  border: 1.5px solid var(--rose-gold-a28);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.meet-sneha-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose-gold), transparent);
}

.meet-sneha-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3.5rem;
  align-items: center;
}

.meet-sneha-media-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--rose-gold-a40);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  aspect-ratio: 1 / 1 !important;
  max-width: 440px;
  margin: 0 auto;
  background: var(--plum-midnight);
}

.meet-sneha-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center !important;
  display: block;
}

.meet-sneha-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.meet-sneha-media-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(20, 11, 28, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rose-gold, #C9956A);
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.meet-sneha-media-badge span {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.meet-sneha-badge-icon {
  color: var(--rose-gold, #C9956A) !important;
  -webkit-text-fill-color: var(--rose-gold, #C9956A) !important;
}

.meet-sneha-title {
  color: var(--champagne, #F4DEC8) !important;
  -webkit-text-fill-color: var(--champagne, #F4DEC8) !important;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.8rem 0 1.2rem;
}

.meet-sneha-quote {
  border-left: 3px solid var(--rose-gold);
  padding-left: 1.2rem;
  margin: 0 0 1.4rem;
  font-style: italic;
  color: var(--champagne);
  font-size: 1.05rem;
  line-height: 1.6;
}

.meet-sneha-bio {
  color: var(--text-light-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.meet-sneha-pillars {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  border-top: 1px solid var(--rose-gold-a20);
  border-bottom: 1px solid var(--rose-gold-a20);
  padding: 1.2rem 0;
}

.meet-sneha-pillar {
  display: flex;
  flex-direction: column;
}

.pillar-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--rose-gold);
  line-height: 1;
}

.pillar-label {
  font-size: 12px;
  color: var(--text-light-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meet-sneha-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .meet-sneha-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .meet-sneha-card {
    padding: 2rem 1.5rem;
  }

  .meet-sneha-media-frame {
    max-width: 380px;
    margin: 0 auto;
  }
}

/* ── Bespoke Haute Couture Select & Calendar Theming ─────────────────── */
.luxury-native-select-hidden,
select.luxury-native-select-hidden,
select.saaya-select.luxury-native-select-hidden,
select.form-control.luxury-native-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  -webkit-opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.luxury-select-container {
  position: relative;
  width: 100%;
}

.luxury-select-container.is-open {
  z-index: 10000 !important;
}

.saaya-field.has-open-select,
.form-group.has-open-select,
.saaya-field:has(.luxury-select-container.is-open),
.form-group:has(.luxury-select-container.is-open),
.luxury-date-wrapper.is-open {
  z-index: 10000 !important;
  position: relative !important;
}

.luxury-select-trigger {
  width: 100%;
  min-height: 50px;
  padding: 0.82rem 1.15rem;
  background: linear-gradient(180deg, rgba(38, 22, 50, 0.52) 0%, rgba(20, 11, 28, 0.72) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rose-gold-a28);
  border-radius: 12px;
  color: var(--ivory-silk, #FAF6F1) !important;
  -webkit-text-fill-color: var(--ivory-silk, #FAF6F1) !important;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.35), 0 1px 2px var(--rose-gold-a05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  user-select: none;
  -webkit-appearance: none;
}

.luxury-select-trigger:hover,
.luxury-select-trigger:focus,
.luxury-select-container.is-open .luxury-select-trigger {
  border-color: var(--rose-gold);
  box-shadow: 0 0 0 3px var(--rose-gold-a20), inset 0 1.5px 3px rgba(0, 0, 0, 0.35);
  outline: none;
}

.luxury-select-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.5rem;
  color: var(--ivory-silk, #FAF6F1) !important;
  -webkit-text-fill-color: var(--ivory-silk, #FAF6F1) !important;
  font-weight: 500;
}

.luxury-select-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rose-gold, #C9956A) !important;
  -webkit-text-fill-color: var(--rose-gold, #C9956A) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.luxury-select-container.is-open .luxury-select-chevron {
  transform: rotate(180deg);
}

.luxury-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 999999 !important;
  background: #241330 !important;
  color-scheme: dark !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--rose-gold-a40);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(10, 4, 16, 0.96), 0 0 0 1px rgba(201, 149, 106, 0.25);
  max-height: 310px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--rose-gold-a40) transparent;
  -webkit-overflow-scrolling: touch;
}

.luxury-select-container.is-open .luxury-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.luxury-select-menu::-webkit-scrollbar {
  width: 6px;
}

.luxury-select-menu::-webkit-scrollbar-track {
  background: transparent;
}

.luxury-select-menu::-webkit-scrollbar-thumb {
  background: var(--rose-gold-a40);
  border-radius: 9999px;
}

.luxury-select-option {
  padding: 0.65rem 0.95rem !important;
  margin: 2px 0 !important;
  border-radius: 8px !important;
  font-size: 0.91rem !important;
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 1px solid transparent;
}

.luxury-select-option .luxury-opt-text {
  padding: 0 !important;
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
  flex: 1 1 auto;
}

.luxury-select-option:hover,
.luxury-select-option.is-highlighted {
  background: rgba(201, 149, 106, 0.16) !important;
  border-color: rgba(201, 149, 106, 0.25) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.luxury-select-option:hover .luxury-opt-text,
.luxury-select-option.is-highlighted .luxury-opt-text {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.luxury-select-option.is-selected {
  background: linear-gradient(135deg, rgba(201, 149, 106, 0.28) 0%, rgba(201, 149, 106, 0.14) 100%) !important;
  border-color: rgba(201, 149, 106, 0.45) !important;
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  font-weight: 600 !important;
}

.luxury-select-option.is-selected .luxury-opt-text {
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  font-weight: 600 !important;
}

.luxury-opt-check {
  display: none;
  color: var(--rose-gold, #C9956A) !important;
  -webkit-text-fill-color: var(--rose-gold, #C9956A) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  flex-shrink: 0;
}

.luxury-select-option.is-selected .luxury-opt-check {
  display: inline-block !important;
}

/* ── Bespoke Haute Couture Themed Calendar ──────────────────────────── */
.luxury-date-wrapper {
  position: relative;
  width: 100%;
}

.luxury-date-wrapper.is-open {
  z-index: 1000 !important;
}

.luxury-date-input {
  cursor: pointer;
  background-image: none !important;
  padding-right: 2.85rem !important;
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  opacity: 1 !important;
  -webkit-opacity: 1 !important;
}

.luxury-date-icon {
  position: absolute;
  right: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: #C9956A !important;
  -webkit-text-fill-color: #C9956A !important;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.luxury-calendar-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999999 !important;
  width: 310px;
  max-width: calc(100vw - 2rem);
  background: #241330 !important;
  background: linear-gradient(180deg, #241330 0%, #150a1d 100%) !important;
  color-scheme: dark !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--rose-gold-a40);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 15px var(--rose-gold-a15);
  padding: 1.1rem;
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
}

.luxury-calendar-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.luxury-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--rose-gold-a20);
}

.luxury-cal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #F4DEC8 !important;
  -webkit-text-fill-color: #F4DEC8 !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.luxury-cal-nav {
  background: rgba(201, 149, 106, 0.12);
  border: 1px solid var(--rose-gold-a30);
  border-radius: 8px;
  color: #C9956A !important;
  -webkit-text-fill-color: #C9956A !important;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.luxury-cal-nav:hover {
  background: var(--rose-gold);
  color: #140b1c !important;
  -webkit-text-fill-color: #140b1c !important;
  transform: scale(1.05);
}

.luxury-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: #C9956A !important;
  -webkit-text-fill-color: #C9956A !important;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.luxury-cal-weekdays span {
  color: #C9956A !important;
  -webkit-text-fill-color: #C9956A !important;
}

.luxury-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
  color-scheme: dark !important;
}

.luxury-cal-day {
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  font-size: 0.88rem;
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  cursor: pointer;
  margin: 1px auto;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 1 !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.luxury-cal-day:hover:not(.is-disabled) {
  background: rgba(201, 149, 106, 0.28) !important;
  color: #F4DEC8 !important;
  -webkit-text-fill-color: #F4DEC8 !important;
  transform: scale(1.08);
}

.luxury-cal-day.is-selected {
  background: linear-gradient(135deg, #C9956A 0%, #b3794d 100%) !important;
  color: #140b1c !important;
  -webkit-text-fill-color: #140b1c !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px var(--rose-gold-glow) !important;
}

.luxury-cal-day.is-disabled {
  color: rgba(250, 246, 241, 0.25) !important;
  -webkit-text-fill-color: rgba(250, 246, 241, 0.25) !important;
  cursor: not-allowed;
  pointer-events: none;
}

.luxury-cal-day.is-today {
  border: 1px solid var(--rose-gold);
}

.luxury-cal-day.is-saaya::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--champagne);
}

.luxury-cal-day.is-selected.is-saaya::after {
  background: #140b1c;
}

/* ── 44. Mobile Calendar & Luxury Select Ergonomics ─────────────────── */
@media (max-width: 640px) {
  .luxury-calendar-popup {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    padding: 0.85rem 0.65rem !important;
  }

  .luxury-cal-day {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 0.88rem !important;
  }
}

/* Auto-hide floating mobile bottom dock when custom dropdown or calendar modal is active */
body:has(.luxury-select-container.is-open) .mobile-bottom-dock,
body:has(.luxury-calendar-popup.is-open) .mobile-bottom-dock,
body.has-open-select .mobile-bottom-dock,
body.has-open-calendar .mobile-bottom-dock,
body:has(.luxury-select-container.is-open) #wpc-consent-banner,
body:has(.luxury-calendar-popup.is-open) #wpc-consent-banner,
body.has-open-select #wpc-consent-banner,
body.has-open-calendar #wpc-consent-banner {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(100%) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

/* iOS Safari & WebKit native and custom text fill overrides */
input[type="date"]::-webkit-date-and-time-value,
.saaya-input::-webkit-date-and-time-value,
.form-control::-webkit-date-and-time-value,
.luxury-date-input::-webkit-date-and-time-value {
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  text-align: left !important;
  min-height: 1.2em !important;
}

.luxury-select-trigger,
.luxury-date-input,
.saaya-input,
.saaya-select,
.form-control,
input[type="text"].saaya-input,
input[type="tel"].saaya-input,
input[type="date"].saaya-input,
input[type="text"].form-control,
input[type="tel"].form-control,
input[type="date"].form-control,
select.saaya-select:not(.luxury-native-select-hidden),
select.form-control:not(.luxury-native-select-hidden) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  -webkit-opacity: 1 !important;
  opacity: 1 !important;
  background-color: #241330 !important;
  color-scheme: dark !important;
}

.luxury-select-value {
  color: #FAF6F1 !important;
  -webkit-text-fill-color: #FAF6F1 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 0.5rem !important;
  display: block !important;
}

.saaya-label,
.form-label,
.form-group label,
label[for="saaya-name-input"],
label[for="saaya-phone-input"],
label[for="saaya-date-input"],
label[for="saaya-ceremony-select"],
label[for="saaya-location-select"],
label[for="saaya-service-select"],
label[for="inq-name"],
label[for="inq-phone"],
label[for="inq-date"],
label[for="inq-ceremony"],
label[for="inq-location"],
label[for="inq-service"] {
  color: #F4DEC8 !important;
  -webkit-text-fill-color: #F4DEC8 !important;
  font-size: 0.77rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.45rem !important;
}

/* Contact & Atelier Page Society Directory & Table Layout */
.society-details-card summary::-webkit-details-marker {
  display: none !important;
}

.society-details-card summary {
  list-style: none !important;
}

details[open] .society-details-arrow {
  transform: rotate(180deg) !important;
}

.society-table-row {
  transition: border-color 0.2s ease, background 0.2s ease;
}

.society-table-row:hover {
  border-color: var(--rose-gold-a45) !important;
  background: rgba(38, 22, 50, 0.95) !important;
}

/* iOS Safari Apple Data Detector Overrides (prevents auto-blue date/phone styling) */
a[x-apple-data-detectors],
[x-apple-data-detectors],
[x-apple-data-detectors="true"] {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* About Page Vanity Kit Grid & Horizontal Mobile Swipe */
.about-vanity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.about-vanity-card {
  background: var(--plum-card);
  border: 1px solid var(--rose-gold-a30);
  border-radius: 14px;
  padding: 1.75rem;
}

/* Mobile Polish Overrides (<= 767.98px) */
@media (max-width: 767.98px) {

  /* Meet Sneha: Heading, achievements & 2 buttons only */
  .meet-sneha-quote,
  .meet-sneha-bio {
    display: none !important;
  }

  /* About Page Vanity Kit: Horizontal swipe on mobile */
  .about-vanity-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    scrollbar-width: none !important;
  }

  .about-vanity-grid::-webkit-scrollbar {
    display: none !important;
  }

  .about-vanity-card {
    flex: 0 0 82% !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
    padding: 1.35rem 1.25rem !important;
  }

  /* VIP Bride Lounge: Mobile ergonomics, swipeable tabs & compact cards */
  .bride-lounge-section {
    padding: 2rem 0 !important;
    min-height: auto !important;
  }

  .lounge-dashboard-card {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
  }

  .lounge-dash-header {
    padding-bottom: 1rem !important;
    margin-bottom: 1.25rem !important;
  }

  .lounge-dash-header h2 {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }

  .lounge-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.25rem !important;
  }

  .lounge-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .lounge-tab-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0.45rem 0.95rem !important;
    font-size: 0.82rem !important;
    min-height: 42px !important;
  }

  .lounge-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .lounge-box {
    padding: 1.1rem 1rem !important;
    border-radius: 12px !important;
  }
}