@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ── Trap Font Definition (Geometric Sans with Iconic Ink-traps) ── */
@font-face {
  font-family: 'Trap';
  src: url('../assets/fonts/trap-regular-webfont.woff2') format('woff2'),
       url('../assets/fonts/trap-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trap';
  src: url('../assets/fonts/trap-bold-webfont.woff2') format('woff2'),
       url('../assets/fonts/trap-bold-webfont.woff') format('woff');
  font-weight: 600 700 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   CLANFORD ACADEMY - WARM IVORY & HONEY GOLD LUXURY REDESIGN
   Inspired by Visual Reference (Image 2)
   - Warm Ivory (#FFF9F0) & Soft Cream (#F6EBDD) palette
   - Near-black (#171411) bold rounded typography
   - Honey Gold (#D99A16) & Deep Amber (#A96808) accents
   - 3D Fan-shaped Hero with slender golden ribbon
   - Rounded cards (24px radius) with soft ambient shadows
   - Rich amber treatment for featured course card
   - High-contrast, crystal clear readability & smooth interactions
   ========================================================================== */

:root {
  /* Core Reference Colors */
  --bg-ivory: #FFF9F0;
  --bg-cream: #F6EBDD;
  --bg-card: #FFFFFF;
  --bg-cream-card: #FAF4EB;
  
  --text-dark: #171411;
  --text-primary: #171411;
  --text-body: #5A524A;
  --text-secondary: #746B63;
  --text-muted: #9E948B;

  --color-gold: #D99A16;
  --color-gold-light: #F2BA3C;
  --color-gold-glow: rgba(217, 154, 22, 0.25);
  --color-amber: #A96808;
  --color-amber-dark: #875003;
  --gradient-amber: linear-gradient(135deg, #E6A217 0%, #C9820A 45%, #A96808 100%);
  --gradient-capsule: linear-gradient(90deg, #EAA81D 0%, #D99A16 100%);
  --gradient-gold-soft: linear-gradient(180deg, #FFFDF9 0%, #FAF2E6 100%);

  --border-light: rgba(169, 104, 8, 0.12);
  --border-card: rgba(169, 104, 8, 0.14);
  --border-gold: rgba(217, 154, 22, 0.45);

  --shadow-subtle: 0 4px 16px rgba(169, 104, 8, 0.04);
  --shadow-card: 0 14px 34px -6px rgba(169, 104, 8, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 22px 48px -8px rgba(169, 104, 8, 0.14), 0 4px 14px rgba(0, 0, 0, 0.04);
  --shadow-pill: 0 6px 18px -2px rgba(217, 154, 22, 0.35);

  --radius-card: 24px;
  --radius-card-sm: 18px;
  --radius-pill: 9999px;

  /* Typography - Display: League Spartan, Body: Manrope */
  --font-heading: 'League Spartan', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'League Spartan', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'League Spartan', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Global Base Resets to Warm Ivory */
html, body {
  background-color: var(--bg-ivory) !important;
  color: var(--text-body) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative;
}

body {
  overflow-x: clip !important;
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark) !important;
  font-family: var(--font-heading) !important;
  letter-spacing: -0.02em;
}

p, li, input, textarea, select {
  font-family: var(--font-body);
}

.btn, .nav-link, .eyebrow, .badge, .stat-num, .ref-stat-num, .brand-logo {
  font-family: var(--font-heading);
}

a {
  color: var(--text-dark);
}

/* ==========================================================================
   1. Clean Light Navigation Header
   ========================================================================== */
.site-header {
  background: rgba(255, 249, 240, 0.95) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(169, 104, 8, 0.1) !important;
  box-shadow: 0 4px 20px rgba(169, 104, 8, 0.04) !important;
}

.site-header.is-scrolled {
  background: rgba(255, 249, 240, 0.98) !important;
  box-shadow: 0 8px 30px rgba(169, 104, 8, 0.08) !important;
}

.nav-container {
  height: 92px !important;
}

.brand-logo img {
  filter: none !important;
  height: 68px !important;
  width: auto !important;
  max-width: 290px !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
}

.brand-logo:hover img {
  transform: scale(1.025);
}

.nav-links {
  gap: 2.75rem !important;
}

.nav-link {
  color: #261D17 !important;
  font-weight: 600 !important;
  font-size: 1.0625rem !important; /* Increased from 0.9375rem (15px -> 17px) */
  letter-spacing: 0.015em !important;
  padding: 0.6rem 0 !important;
  transition: color 0.25s ease !important;
  position: relative;
}

.nav-link:hover {
  color: var(--color-amber) !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: var(--color-gold);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link.active {
  color: var(--color-amber) !important;
  font-weight: 700 !important;
}

/* Header Enquire Pill */
.site-header .btn-primary,
.site-header .btn-gold,
.site-header .btn-outline-gold,
.site-header a[href*="wa.me"] {
  background: var(--color-gold) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.75rem 1.8rem !important;
  box-shadow: var(--shadow-pill) !important;
  transition: all 0.25s ease !important;
}

.site-header .btn-primary:hover,
.site-header .btn-outline-gold:hover,
.site-header a[href*="wa.me"]:hover {
  background: var(--color-amber) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -2px rgba(169, 104, 8, 0.35) !important;
}

@media (max-width: 991px) {
  .nav-container {
    height: 80px !important;
  }

  .brand-logo img {
    height: 54px !important;
    max-width: 230px !important;
  }
}

/* ==========================================================================
   2. Open, Centred 3D Hero Section (Image 2 Architecture)
   ========================================================================== */
.ref-hero-section {
  position: relative;
  background: var(--bg-ivory);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  overflow: hidden;
  text-align: center;
}

/* Subtle organic cream curves in background */
.ref-hero-bg-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-blob-1 {
  position: absolute;
  top: -12%;
  left: -8%;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 235, 221, 0.7) 0%, rgba(255, 249, 240, 0) 70%);
  filter: blur(50px);
}

.hero-blob-2 {
  position: absolute;
  top: 15%;
  right: -10%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 235, 221, 0.8) 0%, rgba(255, 249, 240, 0) 70%);
  filter: blur(60px);
}

/* Sparkle Icons */
.ref-sparkle {
  color: var(--color-gold);
  display: inline-block;
  user-select: none;
  animation: sparkleTwinkle 3.2s ease-in-out infinite;
}

.ref-sparkle-left {
  position: absolute;
  left: clamp(2%, 8vw, 15%);
  top: 8%;
  font-size: 1.75rem;
}

.ref-sparkle-right {
  position: absolute;
  right: clamp(2%, 8vw, 15%);
  top: 32%;
  font-size: 2.1rem;
  animation-delay: 1.4s;
}

@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50% { transform: scale(1.25) rotate(12deg); opacity: 1; filter: drop-shadow(0 0 6px rgba(217, 154, 22, 0.6)); }
}

/* Master Centred Headline */
.ref-hero-header {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto 2.5rem;
  padding: 0 1.25rem;
  text-align: center;
}

.ref-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-amber);
  margin-bottom: 1.15rem;
}

.ref-hero-title {
  font-size: clamp(2.35rem, 5.2vw, 4.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-dark) !important;
  margin-bottom: 1.25rem;
  letter-spacing: -0.025em;
}

.ref-hero-title .title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}

/* Rounded Honey Gold Capsule Pill (Matching Image 2) */
.ref-hero-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--gradient-capsule);
  color: #FFFFFF !important;
  padding: 0.2em 0.7em 0.25em 0.8em;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px -4px rgba(217, 154, 22, 0.45);
  font-weight: 800;
  white-space: nowrap;
}

.ref-hero-capsule .capsule-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  background: #FFFFFF;
  color: var(--color-amber);
  border-radius: 50%;
  font-size: 0.75em;
  line-height: 1;
}

/* Sub-Row: Description on left, CTAs on right */
.ref-hero-sub-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  text-align: left;
}

.ref-hero-sub-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 440px;
  margin: 0 0 1rem;
}

.ref-hero-stats {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.ref-stat-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.ref-stat-num {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--color-amber);
  line-height: 1;
}

.ref-stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.25;
}

.ref-hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-ref-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-gold);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.85rem 1.85rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}

.btn-ref-primary:hover {
  background: var(--color-amber);
  transform: translateY(-2.5px);
  box-shadow: 0 10px 28px -3px rgba(169, 104, 8, 0.4);
}

.btn-ref-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  color: var(--text-dark) !important;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.85rem 1.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(169, 104, 8, 0.22);
  box-shadow: var(--shadow-subtle);
  transition: all 0.28s ease;
}

.btn-ref-secondary:hover {
  border-color: var(--color-gold);
  color: var(--color-amber) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   3. The 3D Fan-Shaped 5-Panel Dimensional Stage (Luminous Floating Composition)
   ========================================================================== */
.ref-fan-stage-wrapper {
  position: relative;
  z-index: 2;
  max-width: 1260px;
  margin: 0 auto;
  padding: 1.8rem 1rem 1rem;
  perspective: 1400px;
  transform-style: preserve-3d;
  overflow: visible;
}

.ref-fan-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.8vw, 1.5rem);
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
}

/* Softly Illuminated Weaving Gold Ribbon (Layered behind Central Card, in front of Outer Cards) */
.ref-fan-ribbon-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: clamp(500px, 74vw, 980px);
  height: clamp(200px, 26vw, 340px);
  pointer-events: none;
  z-index: 4;
  overflow: visible;
  filter: drop-shadow(0 6px 18px rgba(169, 104, 8, 0.35));
  transition: transform 0.5s ease;
}

/* Card Root Container (Handles 3D Depth & Inward Tilting) */
.ref-fan-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card Halos & Shimmers Disabled (Clean & Natural) */
.ref-fan-halo,
.ref-fan-halo-center,
.ref-fan-shimmer {
  display: none !important;
}

/* Dimensional Card Surface (Crisp Ivory Border & Soft Natural Shadows) */
.ref-fan-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(18px, 2.4vw, 28px);
  overflow: hidden;
  background: #FFFFFF;
  border: 2.5px solid #FFFFFF;
  outline: none !important;
  box-shadow: 
    0 16px 36px -8px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.04);
  will-change: transform, box-shadow;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

/* Photographs (Clean with Natural Skin Tones) */
.ref-fan-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: none !important;
}

/* Layered Inward-Tilting 3D Positioning */
/* Panel 1: Brushes (Far Left, Receding & Tilting Inward) */
.ref-fan-card-1 {
  width: clamp(110px, 14.5vw, 180px);
  height: clamp(165px, 22.5vw, 265px);
  z-index: 2;
  transform: translate3d(var(--gx1, 0px), var(--gy1, 0px), -18px) rotateY(14deg) rotateZ(-7deg);
}

.ref-fan-card-1 .ref-fan-card-inner {
  animation: floatFanCard1 7.2s ease-in-out infinite alternate;
}

/* Panel 2: Eyeshadow Palette (Mid Left, Tilting Gently Inward) */
.ref-fan-card-2 {
  width: clamp(125px, 16.5vw, 205px);
  height: clamp(195px, 26.5vw, 320px);
  z-index: 3;
  transform: translate3d(var(--gx2, 0px), var(--gy2, 0px), 14px) rotateY(8deg) rotateZ(-3.5deg);
}

.ref-fan-card-2 .ref-fan-card-inner {
  animation: floatFanCard2 8.4s ease-in-out infinite alternate 0.7s;
}

/* Panel 3: Central Bridal Portrait (Center, Largest & Closest to Viewer) */
.ref-fan-card-3 {
  width: clamp(170px, 23vw, 290px);
  height: clamp(255px, 35vw, 420px);
  z-index: 6;
  transform: translate3d(var(--gx3, 0px), var(--gy3, 0px), 42px) rotateY(0deg) rotateZ(0deg) scale(1.02);
}

.ref-fan-card-3 .ref-fan-card-inner {
  border: 3.5px solid #FFFFFF;
  outline: none !important;
  box-shadow: 
    0 24px 50px -8px rgba(0, 0, 0, 0.13),
    0 6px 16px rgba(0, 0, 0, 0.05);
  animation: floatFanCard3 6.6s ease-in-out infinite alternate 0.2s;
}

/* Panel 4: Bridal Jasmine Floral Hairstyle (Mid Right, Tilting Gently Inward) */
.ref-fan-card-4 {
  width: clamp(125px, 16.5vw, 205px);
  height: clamp(195px, 26.5vw, 320px);
  z-index: 3;
  transform: translate3d(var(--gx4, 0px), var(--gy4, 0px), 14px) rotateY(-8deg) rotateZ(3.5deg);
}

.ref-fan-card-4 .ref-fan-card-inner {
  animation: floatFanCard4 8.0s ease-in-out infinite alternate 1.1s;
}

/* Panel 5: Skincare Creams & Glow Products (Far Right, Receding & Tilting Inward) */
.ref-fan-card-5 {
  width: clamp(110px, 14.5vw, 180px);
  height: clamp(165px, 22.5vw, 265px);
  z-index: 2;
  transform: translate3d(var(--gx5, 0px), var(--gy5, 0px), -18px) rotateY(-14deg) rotateZ(7deg);
}

.ref-fan-card-5 .ref-fan-card-inner {
  animation: floatFanCard5 7.6s ease-in-out infinite alternate 0.4s;
}

/* Independent Floating Keyframes (Natural, subtle shadow breathing) */
@keyframes floatFanCard1 {
  0% {
    transform: translateY(0px) rotate(0deg);
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.09), 0 4px 10px rgba(0, 0, 0, 0.03);
  }
  50% {
    transform: translateY(-11px) rotate(-1.5deg);
    box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.13), 0 8px 16px rgba(0, 0, 0, 0.04);
  }
  100% {
    transform: translateY(5px) rotate(1deg);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.07), 0 3px 8px rgba(0, 0, 0, 0.02);
  }
}

@keyframes floatFanCard2 {
  0% {
    transform: translateY(0px) rotate(0deg);
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.1), 0 5px 12px rgba(0, 0, 0, 0.03);
  }
  50% {
    transform: translateY(-13px) rotate(1.5deg);
    box-shadow: 0 28px 54px -10px rgba(0, 0, 0, 0.14), 0 9px 18px rgba(0, 0, 0, 0.05);
  }
  100% {
    transform: translateY(6px) rotate(-1deg);
    box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.02);
  }
}

@keyframes floatFanCard3 {
  0% {
    transform: translateY(0px) rotate(0deg);
    box-shadow: 0 24px 50px -8px rgba(0, 0, 0, 0.13), 0 6px 16px rgba(0, 0, 0, 0.05);
  }
  50% {
    transform: translateY(-14px) rotate(1deg);
    box-shadow: 0 34px 68px -10px rgba(0, 0, 0, 0.17), 0 12px 24px rgba(0, 0, 0, 0.06);
  }
  100% {
    transform: translateY(4px) rotate(-1deg);
    box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.1), 0 5px 12px rgba(0, 0, 0, 0.04);
  }
}

@keyframes floatFanCard4 {
  0% {
    transform: translateY(0px) rotate(0deg);
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.1), 0 5px 12px rgba(0, 0, 0, 0.03);
  }
  50% {
    transform: translateY(-12px) rotate(-1.5deg);
    box-shadow: 0 26px 52px -10px rgba(0, 0, 0, 0.14), 0 9px 18px rgba(0, 0, 0, 0.05);
  }
  100% {
    transform: translateY(5px) rotate(1deg);
    box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.02);
  }
}

@keyframes floatFanCard5 {
  0% {
    transform: translateY(0px) rotate(0deg);
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.09), 0 4px 10px rgba(0, 0, 0, 0.03);
  }
  50% {
    transform: translateY(-10px) rotate(1.5deg);
    box-shadow: 0 24px 46px -10px rgba(0, 0, 0, 0.13), 0 8px 16px rgba(0, 0, 0, 0.04);
  }
  100% {
    transform: translateY(5px) rotate(-1deg);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.07), 0 3px 8px rgba(0, 0, 0, 0.02);
  }
}

/* Interactive Hover: Calm & Elegant Lift */
.ref-fan-card:hover {
  z-index: 10 !important;
}

.ref-fan-card:hover .ref-fan-card-inner {
  animation-play-state: paused !important;
  transform: translateY(-10px) scale(1.025) !important;
  box-shadow: 
    0 28px 55px -10px rgba(0, 0, 0, 0.16),
    0 8px 20px rgba(0, 0, 0, 0.06) !important;
  outline: none !important;
}

/* Responsive Handling */
@media (max-width: 991px) {
  .ref-fan-stage-wrapper {
    perspective: 800px;
    padding-top: 1rem;
  }
  .ref-fan-card-1, .ref-fan-card-5 {
    display: none;
  }
  .ref-fan-card-2 {
    transform: translate3d(var(--gx2, 0px), var(--gy2, 0px), 8px) rotateY(4deg) rotateZ(-2deg);
  }
  .ref-fan-card-4 {
    transform: translate3d(var(--gx4, 0px), var(--gy4, 0px), 8px) rotateY(-4deg) rotateZ(2deg);
  }
  .ref-fan-card-3 {
    transform: translate3d(var(--gx3, 0px), var(--gy3, 0px), 25px);
  }
  .ref-fan-ribbon-svg {
    width: clamp(280px, 45vw, 420px);
    height: auto;
  }
}

@media (max-width: 576px) {
  .ref-fan-container {
    gap: 0.6rem;
  }
  .ref-fan-card-2, .ref-fan-card-4 {
    width: 27vw;
    height: 40vw;
    transform: none !important;
  }
  .ref-fan-card-3 {
    width: 42vw;
    height: 58vw;
    transform: none !important;
  }
  .ref-fan-card-inner {
    border-radius: 14px;
  }
  .ref-fan-halo {
    filter: blur(10px);
  }
}

/* Reduced Motion Mode (Accessible Static Composition) */
@media (prefers-reduced-motion: reduce) {
  .ref-fan-card-inner,
  .ref-fan-shimmer,
  .ref-fan-card,
  .ref-fan-ribbon-svg {
    animation: none !important;
    transition: none !important;
  }
  .ref-fan-card:hover .ref-fan-card-inner {
    transform: none !important;
  }
}

/* ==========================================================================
   4. Courses Section Redesign (Matching Image 2 Cream & Amber Cards)
   ========================================================================== */
.ref-courses-section {
  background: var(--bg-cream);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  position: relative;
}

.ref-courses-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.ref-courses-header h2 {
  font-family: 'Trap', 'League Spartan', sans-serif !important;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.025em;
}

.ref-courses-header p {
  max-width: 480px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  color: var(--text-body);
}

.ref-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* Card Type 1: Warm Off-White / Cream Card */
.ref-course-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 2.25rem 2rem 1.75rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.ref-course-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(217, 154, 22, 0.35);
}

.ref-course-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ref-course-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-dark) !important;
  margin: 0;
  flex: 1;
}

/* Arrow Pill Link Button */
.ref-course-arrow-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-gold);
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(217, 154, 22, 0.3);
  transition: transform 0.3s ease, background 0.3s ease;
}

.ref-course-card:hover .ref-course-arrow-btn {
  transform: rotate(45deg);
  background: var(--color-amber);
}

.ref-course-card-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* Bottom Beauty Photography Placement */
.ref-course-card-bottom-visual {
  width: 100%;
  height: 170px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  margin-top: auto;
}

.ref-course-card-bottom-visual img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(169, 104, 8, 0.15));
  transition: transform 0.5s ease;
}

.ref-course-card-bottom-visual img.ref-course-photo-visual {
  width: 100% !important;
  height: 175px !important;
  max-height: 175px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 20px -4px rgba(169, 104, 8, 0.14) !important;
  filter: none !important;
}

.ref-course-card:hover .ref-course-card-bottom-visual img {
  transform: scale(1.06);
}

.ref-course-card:hover .ref-course-card-bottom-visual img.ref-course-photo-visual {
  transform: scale(1.03) !important;
}

/* Card Type: Background Fill (Photo fills entire card, text overlaid) */
.ref-course-card-bg-fill {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  padding: 0 !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

.ref-course-card-bg-fill .ref-course-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10, 8, 6, 0.72) 0%,
    rgba(10, 8, 6, 0.55) 45%,
    rgba(10, 8, 6, 0.18) 100%
  );
  z-index: 1;
  transition: background 0.4s ease;
}

.ref-course-card-bg-fill:hover .ref-course-card-overlay {
  background: linear-gradient(
    160deg,
    rgba(10, 8, 6, 0.80) 0%,
    rgba(10, 8, 6, 0.60) 45%,
    rgba(10, 8, 6, 0.22) 100%
  );
}

.ref-course-card-bg-fill .ref-course-card-content-over {
  position: relative;
  z-index: 2;
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;
  justify-content: flex-start;
}

.ref-course-card-bg-fill .ref-course-card-title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.ref-course-card-bg-fill .ref-course-card-desc {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

.ref-course-card-bg-fill .ref-course-arrow-btn {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
}

.ref-course-card-bg-fill:hover .ref-course-arrow-btn {
  background: rgba(255,255,255,0.28) !important;
  transform: rotate(45deg);
}

/* Card Type 2: Featured Deep Honey Amber Treatment (Matching Image 2 Center Card!) */
.ref-course-card-featured {
  background: var(--gradient-amber) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 45px -6px rgba(169, 104, 8, 0.32) !important;
}

.ref-course-card-featured .ref-course-card-title {
  color: #FFFFFF !important;
}

.ref-course-card-featured .ref-course-card-desc {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ref-course-card-featured .ref-course-arrow-btn {
  background: #FFFFFF !important;
  color: var(--color-amber) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.ref-course-card-featured:hover .ref-course-arrow-btn {
  background: #FFF8EE !important;
  color: var(--color-amber-dark) !important;
}

.ref-course-card-featured .ref-course-card-bottom-visual img {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.25)) !important;
}

/* ==========================================================================
   5. Quote Banner & Benefits 4-Pill Row (Matching Image 2 Bottom)
   ========================================================================== */
.ref-quote-benefits-section {
  background: var(--bg-ivory);
  padding: clamp(3.5rem, 5vw, 5rem) 0 clamp(4rem, 6vw, 6rem);
  text-align: center;
  position: relative;
}

.ref-quote-heading {
  font-size: clamp(1.65rem, 3.4vw, 2.45rem);
  font-weight: 800;
  color: var(--text-dark) !important;
  margin: 0 auto 3.5rem;
  max-width: 780px;
  line-height: 1.25;
}

.ref-quote-gold {
  color: var(--color-amber) !important;
}

/* ==========================================================================
   SLOW SIDE SCROLL ANIMATION - BENEFITS 4-CARD HORIZONTAL TRACK
   - Display only four text labels:
     1. Expert Trainers
     2. Hands-on Practice
     3. Certification Support
     4. Career Guidance
   - Remove all icons completely (Centered text only)
   - Bold, premium typography (League Spartan 700)
   - Gold + Ivory luxury palette
   - White background cards (#FFFFFF)
   - Rounded corners (30px)
   - Subtle gold borders & soft shadows
   - Continuous slow horizontal side-scroll drift (32s linear)
   - Responsive scrub coupling via GSAP ScrollTrigger
   - Interactive hover-pause
   ========================================================================== */

.ref-benefits-side-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0 2.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.ref-benefits-scroll-layer {
  display: flex;
  width: 100%;
  will-change: transform;
}

.ref-benefits-side-track {
  display: flex;
  align-items: center;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
  animation: benefitsSideScrollSlow 32s linear infinite;
}

.ref-benefits-group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-right: 1.75rem;
  flex-shrink: 0;
}

.ref-benefits-side-viewport:hover .ref-benefits-side-track {
  animation-play-state: paused;
}

@keyframes benefitsSideScrollSlow {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-33.333333%, 0, 0);
  }
}

.ref-benefit-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(217, 154, 22, 0.28) !important;
  border-radius: 30px !important;
  padding: 2.25rem 2.5rem !important;
  min-width: 290px !important;
  max-width: 320px !important;
  height: 140px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 10px 30px -4px rgba(169, 104, 8, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
  cursor: default;
}

.ref-benefit-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 18px 40px -4px rgba(217, 154, 22, 0.22) !important;
  border-color: rgba(217, 154, 22, 0.55) !important;
}

.ref-benefit-label {
  font-family: 'League Spartan', var(--font-heading), sans-serif !important;
  font-size: clamp(1.2rem, 1.4vw, 1.35rem) !important;
  font-weight: 700 !important;
  color: #171411 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  .ref-benefits-side-track {
    animation: none !important;
  }
  .ref-benefits-side-viewport {
    overflow-x: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* ==========================================================================
   6. Reusing Mentor & Teaching Classroom Photography (Story & About Section)
   ========================================================================== */
.ref-mentorship-section {
  background: var(--bg-cream);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.ref-mentorship-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 992px) {
  .ref-mentorship-grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

.ref-mentorship-img-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 4px solid #FFFFFF;
}

.ref-mentorship-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ref-mentorship-content h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
}

.ref-mentorship-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 1.75rem;
}

/* ==========================================================================
   7. Student Work, Testimonials, Form & Footer in Cream Luxury
   ========================================================================== */
.section-bg-ivory {
  background-color: var(--bg-ivory) !important;
}

.section-bg-blush,
.section-bg-cream {
  background-color: var(--bg-cream) !important;
}

.gallery-draggable-card,
.advantage-card,
.mentor-pillar-card,
.contact-card,
.enquiry-form-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-card) !important;
  color: var(--text-body) !important;
}

.gallery-draggable-title {
  color: #FFFFFF !important; /* overlay text on photo */
}

/* Luxury Dark Brown Footer */
.site-footer {
  background: #24140D !important;
  color: #D6C8BC !important;
  border-top: 1px solid rgba(217, 154, 22, 0.28) !important;
}

.site-footer .footer-heading,
.site-footer h3,
.site-footer h4,
.site-footer .footer-col-title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

.site-footer p,
.site-footer .footer-brand p {
  color: #C7B7A9 !important;
  line-height: 1.65 !important;
}

.site-footer a,
.site-footer .footer-link {
  color: #D6C8BC !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.site-footer a:hover,
.site-footer .footer-link:hover {
  color: #F2BA3C !important;
}

.site-footer .footer-contact-list {
  color: #D6C8BC !important;
}

.site-footer .footer-contact-item {
  color: #D6C8BC !important;
}

.site-footer .footer-contact-item span,
.site-footer .footer-contact-item a {
  color: #D6C8BC !important;
}

.site-footer .footer-contact-item small {
  color: #A8988C !important;
}

.site-footer .footer-contact-item svg {
  color: #D99A16 !important;
  flex-shrink: 0;
}

.site-footer .social-icon-btn {
  background: #331C13 !important;
  border: 1px solid rgba(217, 154, 22, 0.3) !important;
  color: #D6C8BC !important;
  transition: all 0.25s ease !important;
}

.site-footer .social-icon-btn:hover {
  background: var(--color-gold) !important;
  color: #171411 !important;
  border-color: var(--color-gold) !important;
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #9C8C7F !important;
}

.footer-bottom div,
.footer-bottom p,
.footer-bottom a {
  color: #9C8C7F !important;
}

.footer-bottom a:hover {
  color: #F2BA3C !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .ref-fan-card-1, .ref-fan-card-5 {
    display: none;
  }
  .ref-fan-card-2 { transform: translateY(8px) rotate(-3deg); }
  .ref-fan-card-4 { transform: translateY(8px) rotate(3deg); }
}

@media (max-width: 576px) {
  .ref-hero-title {
    font-size: 2.15rem;
  }
  .ref-hero-sub-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ref-hero-sub-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .ref-hero-stats {
    justify-content: center;
  }
  .ref-hero-actions {
    justify-content: center;
    width: 100%;
  }
  .ref-fan-container {
    gap: 0.5rem;
  }
  .ref-fan-card-2, .ref-fan-card-4 {
    width: 28vw;
    height: 42vw;
  }
  .ref-fan-card-3 {
    width: 44vw;
    height: 60vw;
  }
}

/* ==========================================================================
   ADDITIONAL GLOBAL POLISH FOR INNER SECTIONS
   ========================================================================== */

/* Buttons General */
.btn-primary {
  background: var(--color-gold) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-pill) !important;
  font-weight: 700 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover {
  background: var(--color-amber) !important;
  transform: translateY(-2.5px) !important;
  box-shadow: 0 10px 28px -3px rgba(169, 104, 8, 0.4) !important;
}

.btn-outline-dark {
  background: #FFFFFF !important;
  color: var(--text-dark) !important;
  border: 1px solid rgba(169, 104, 8, 0.25) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  transition: all 0.28s ease !important;
}

.btn-outline-dark:hover {
  border-color: var(--color-gold) !important;
  color: var(--color-amber) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Light Theme Section Headers */
.section-header .eyebrow {
  color: var(--color-amber) !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-title {
  font-family: 'Trap', 'League Spartan', sans-serif !important;
  color: var(--text-dark) !important;
  font-weight: 800;
  letter-spacing: -0.02em !important;
}

.lead {
  color: var(--text-body) !important;
}

/* Modal Popups in Warm Light Luxury */
.course-modal-content {
  background: #FFFDF9 !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 24px 60px rgba(169, 104, 8, 0.18) !important;
  color: var(--text-body) !important;
}

.course-modal-title {
  color: var(--text-dark) !important;
}

.course-modal-close {
  background: #F6EBDD !important;
  color: var(--text-dark) !important;
  border-radius: 50% !important;
}

.course-modal-close:hover {
  background: var(--color-gold) !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   Student Work Standard Gallery Grid (Cream Luxury Theme)
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-card, 20px) !important;
  overflow: hidden;
  background-color: #F6EBDD;
  aspect-ratio: 4 / 5;
  box-shadow: 0 10px 28px -6px rgba(23, 20, 17, 0.08);
  border: 1px solid var(--border-card, #EDE0D0);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover,
.gallery-item:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -8px rgba(169, 104, 8, 0.22);
  border-color: rgba(217, 154, 22, 0.45);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.06);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 20, 17, 0.88) 0%, rgba(23, 20, 17, 0.4) 45%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay {
  opacity: 1;
}

@media (hover: none) {
  .gallery-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(23, 20, 17, 0.85) 0%, rgba(23, 20, 17, 0.3) 40%, transparent 100%);
    padding: 1.1rem;
  }
}

.gallery-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold, #D99A16) !important;
  margin-bottom: 0.35rem;
}

.gallery-caption {
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF !important;
  line-height: 1.3;
  margin: 0;
}


/* ==========================================================================
   LUXURY DUAL-DIRECTION HORIZONTAL MARQUEE BENEFITS SECTION
   - Premium makeup academy aesthetic
   - Cream background with champagne gold accents & dark charcoal text
   - Two opposite-direction infinite sliding strips (Row 1 left, Row 2 right)
   - Seamless loops with 0 jumps or visible resets
   - 4 bespoke gold outline makeup icons: brush, lipstick, compact, palette
   - Feathered soft gradient edge fades
   - Hover pause per strip with smooth resume
   - Faint champagne gold center divider
   - Fully responsive & accessible (aria-hidden on clones, screen-reader clean)
   - Reduced-motion compliant static readable fallback
   ========================================================================== */

.luxury-benefits-marquee {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  background-color: #FAF7F2;
  background: linear-gradient(180deg, #FBF9F5 0%, #F5EEE2 50%, #FAF7F2 100%);
  border-top: 1px solid rgba(197, 160, 89, 0.22);
  border-bottom: 1px solid rgba(197, 160, 89, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px -6px rgba(169, 104, 8, 0.05);
  padding: 0.35rem 0;
  user-select: text;
  -webkit-user-select: text;
  display: block !important;
}

/* Masked viewport for gentle gradient edge fades */
.luxury-marquee-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 3%, black 8%, black 92%, rgba(0, 0, 0, 0.4) 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 3%, black 8%, black 92%, rgba(0, 0, 0, 0.4) 97%, transparent 100%);
}

/* Gradient overlay fades for depth & guaranteed cross-browser feathering */
.luxury-benefits-marquee::before,
.luxury-benefits-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 3;
  pointer-events: none;
}

.luxury-benefits-marquee::before {
  left: 0;
  background: linear-gradient(to right, #FAF7F2 20%, rgba(250, 247, 242, 0) 100%);
}

.luxury-benefits-marquee::after {
  right: 0;
  background: linear-gradient(to left, #FAF7F2 20%, rgba(250, 247, 242, 0) 100%);
}

/* Marquee Row Container */
.luxury-marquee-row {
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
  cursor: default;
}

/* Faint Champagne Gold Divider between strips */
.luxury-marquee-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(197, 160, 89, 0.12) 15%, rgba(212, 175, 55, 0.45) 50%, rgba(197, 160, 89, 0.12) 85%, transparent 100%);
}

/* Marquee Tracks */
.luxury-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
}

.luxury-marquee-track-left {
  animation: marqueeScrollLeft 40s linear infinite;
}

.luxury-marquee-track-right {
  animation: marqueeScrollRight 40s linear infinite;
}

/* Pause individual strip on hover and resume smoothly on mouse leave */
.luxury-marquee-row:hover .luxury-marquee-track {
  animation-play-state: paused;
}

/* Keyframes for seamless looping */
@keyframes marqueeScrollLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marqueeScrollRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Marquee Groups inside track */
.luxury-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Benefit Text Item */
.marquee-item {
  color: #1A1715 !important;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: color 0.25s ease;
  user-select: text;
  -webkit-user-select: text;
}

.luxury-marquee-row:hover .marquee-item:hover {
  color: #A96808 !important;
}

/* Makeup Outline Icon Separator */
.marquee-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2rem;
  color: #C5A059;
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}

.luxury-marquee-row:hover .marquee-separator:hover {
  transform: scale(1.15) rotate(4deg);
  color: #D99A16;
}

.marquee-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgba(197, 160, 89, 0.25));
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 991px) {
  .luxury-marquee-row {
    padding: 0.85rem 0;
  }
  .marquee-item {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }
  .marquee-separator {
    margin: 0 1.5rem;
  }
  .marquee-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
  }
  .luxury-benefits-marquee::before,
  .luxury-benefits-marquee::after {
    width: 60px;
  }
}

@media (max-width: 600px) {
  .luxury-marquee-row {
    padding: 0.72rem 0;
  }
  .marquee-item {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
  }
  .marquee-separator {
    margin: 0 1.15rem;
  }
  .marquee-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
  }
  .luxury-benefits-marquee::before,
  .luxury-benefits-marquee::after {
    width: 40px;
  }
}

/* Reduced Motion Preference Accessibility */
@media (prefers-reduced-motion: reduce) {
  .luxury-marquee-track-left,
  .luxury-marquee-track-right {
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
  }
  .luxury-marquee-group[aria-hidden="true"] {
    display: none !important;
  }
  .luxury-marquee-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem 1.25rem !important;
    width: 100% !important;
  }
  .luxury-marquee-viewport {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .luxury-benefits-marquee::before,
  .luxury-benefits-marquee::after {
    display: none !important;
  }
  .luxury-marquee-row {
    overflow: visible !important;
    padding: 0.65rem 0.5rem !important;
    justify-content: center !important;
  }
  .marquee-item {
    white-space: normal !important;
  }
  .marquee-separator {
    margin: 0 0.5rem !important;
  }
}


/* ==========================================================================
   STATISTICS MARQUEE (Dark Chocolate & Champagne Gold)
   - Continuous silky-smooth infinite horizontal marquee
   - Duplicated groups with mathematical seamless loop
   - Feathered edge fades into dark espresso background
   - Pause on hover with smooth resume
   - Responsive scaling for mobile & tablet
   - Reduced motion accessibility support
   ========================================================================== */

.luxury-stats-strip {
  background: linear-gradient(135deg, #180F0B 0%, #231713 50%, #1A100C 100%) !important;
  border-top: 1px solid rgba(212, 160, 23, 0.25) !important;
  border-bottom: 1px solid rgba(212, 160, 23, 0.25) !important;
  padding: 2.2rem 0 !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  display: block !important;
}

.luxury-stats-strip::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: radial-gradient(ellipse at center, rgba(229, 199, 137, 0.45) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Feathered edge fades into dark espresso background */
.luxury-stats-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 3%, black 8%, black 92%, rgba(0, 0, 0, 0.5) 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 3%, black 8%, black 92%, rgba(0, 0, 0, 0.5) 97%, transparent 100%);
}

.luxury-stats-strip-edge-left,
.luxury-stats-strip-edge-right {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 3;
  pointer-events: none;
}

.luxury-stats-strip-edge-left {
  left: 0;
  background: linear-gradient(to right, #180F0B 20%, rgba(24, 15, 11, 0) 100%);
}

.luxury-stats-strip-edge-right {
  right: 0;
  background: linear-gradient(to left, #180F0B 20%, rgba(24, 15, 11, 0) 100%);
}

/* Marquee Track */
.luxury-stats-track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  flex-shrink: 0 !important;
  will-change: transform !important;
  animation: statsMarqueeScroll 34s linear infinite !important;
}

.luxury-stats-strip:hover .luxury-stats-track {
  animation-play-state: paused !important;
}

@keyframes statsMarqueeScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.luxury-stats-group {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Stat Item */
.luxury-stat-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 0 2.25rem !important;
  flex-shrink: 0 !important;
  cursor: default !important;
  transition: transform 0.3s ease !important;
  position: relative !important;
}

.luxury-stat-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 50% !important;
  background: rgba(212, 160, 23, 0.12) !important;
  border: 1px solid rgba(212, 160, 23, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #D99A16 !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}

.luxury-stat-item:hover .luxury-stat-icon-wrap {
  transform: scale(1.08) !important;
  border-color: #F2BA3C !important;
  background: rgba(212, 160, 23, 0.22) !important;
  color: #F2BA3C !important;
}

.luxury-stat-data {
  display: flex !important;
  flex-direction: column !important;
}

.luxury-stat-number {
  font-family: var(--font-heading) !important;
  font-size: 2.75rem !important;
  font-weight: 700 !important;
  color: #F6E2B8 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.luxury-stat-label {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(245, 232, 224, 0.85) !important;
  margin-top: 0.15rem !important;
  white-space: nowrap !important;
}

/* Vertical Divider between Stat Items */
.luxury-stat-divider {
  width: 1px !important;
  height: 48px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.35) 25%, rgba(212, 160, 23, 0.35) 75%, transparent 100%) !important;
  flex-shrink: 0 !important;
  margin: 0 0.5rem !important;
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 991px) {
  .luxury-stats-strip {
    padding: 1.75rem 0 !important;
  }
  .luxury-stat-item {
    gap: 1rem !important;
    padding: 0 1.5rem !important;
  }
  .luxury-stat-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .luxury-stat-icon-wrap svg {
    width: 20px !important;
    height: 20px !important;
  }
  .luxury-stat-number {
    font-size: 2.2rem !important;
  }
  .luxury-stat-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
  }
  .luxury-stat-divider {
    height: 38px !important;
  }
  .luxury-stats-strip-edge-left,
  .luxury-stats-strip-edge-right {
    width: 60px !important;
  }
}

@media (max-width: 600px) {
  .luxury-stats-strip {
    padding: 1.35rem 0 !important;
  }
  .luxury-stat-item {
    gap: 0.75rem !important;
    padding: 0 1rem !important;
  }
  .luxury-stat-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  .luxury-stat-icon-wrap svg {
    width: 17px !important;
    height: 17px !important;
  }
  .luxury-stat-number {
    font-size: 1.85rem !important;
  }
  .luxury-stat-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.06em !important;
  }
  .luxury-stat-divider {
    height: 30px !important;
  }
  .luxury-stats-strip-edge-left,
  .luxury-stats-strip-edge-right {
    width: 40px !important;
  }
}

/* Reduced Motion Mode */
@media (prefers-reduced-motion: reduce) {
  .luxury-stats-track {
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.5rem !important;
  }
  .luxury-stats-group[aria-hidden="true"] {
    display: none !important;
  }
  .luxury-stats-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 1.5rem !important;
  }
  .luxury-stats-viewport {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .luxury-stats-strip-edge-left,
  .luxury-stats-strip-edge-right {
    display: none !important;
  }
}


/* ==========================================================================
   3D HERO MAKEUP TOOLS & DIMENSIONAL TYPOGRAPHY
   - 3D Floating Makeup Assets framing the headline
   - Realistic diffused shadows & metallic highlights
   - Dimensional sculpted typography & gold capsule
   - Slow floating & rotation animations with varied timings
   - Subtle cursor parallax on desktop
   - Mobile optimization & reduced motion compliance
   ========================================================================== */

/* Dimensional Typography */
.ref-hero-header {
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  transition: transform 0.15s ease-out;
  animation: heroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ref-hero-title {
  color: #171411 !important;
  text-shadow: 
    0 1px 1px rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(23, 20, 17, 0.08),
    0 6px 18px rgba(169, 104, 8, 0.06);
  letter-spacing: -0.025em;
  position: relative;
  z-index: 2;
}

/* Sculpted Honey Gold Capsule */
.ref-hero-capsule {
  display: inline-flex !important;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(135deg, #F9C954 0%, #EAA81D 30%, #D99A16 70%, #BD7C07 100%) !important;
  color: #FFFFFF !important;
  padding: 0.22em 0.75em 0.28em 0.82em !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 
    0 14px 34px -4px rgba(169, 104, 8, 0.44),
    0 4px 12px rgba(0, 0, 0, 0.07),
    inset 0 2px 2px rgba(255, 255, 255, 0.75),
    inset 0 -2px 3px rgba(135, 80, 3, 0.42) !important;
  border: 1px solid rgba(255, 243, 204, 0.55);
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ref-hero-capsule:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 18px 40px -4px rgba(169, 104, 8, 0.52),
    0 6px 16px rgba(0, 0, 0, 0.09),
    inset 0 2px 2px rgba(255, 255, 255, 0.85),
    inset 0 -2px 3px rgba(135, 80, 3, 0.42) !important;
}

.ref-hero-capsule > span:first-child {
  font-weight: 800;
  text-shadow: 
    0 1px 2px rgba(135, 80, 3, 0.55),
    0 -1px 0 rgba(255, 255, 255, 0.3);
  letter-spacing: -0.01em;
}

.ref-hero-capsule .capsule-arrow {
  box-shadow: 
    0 3px 8px rgba(135, 80, 3, 0.32),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
  transition: transform 0.3s ease;
}

.ref-hero-capsule:hover .capsule-arrow {
  transform: translateX(3px);
}

/* Minimal Black & White Line-Art Makeup Artistry Elements (Airy Editorial Framing) */
.hero-lineart-scene,
.hero-3d-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-lineart-item,
.hero-3d-item {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  transition: transform 0.12s ease-out;
}

.hero-lineart-inner,
.hero-3d-inner {
  position: relative;
  will-change: transform;
}

.hero-lineart-svg {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.88;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 14px rgba(43, 36, 30, 0.05));
  transition: opacity 0.3s ease;
}

/* Positioning & Floating Animations with Staggered Timings */
.hero-lineart-lipstick-wrap {
  left: clamp(2%, 3.5vw, 5.5%);
  top: clamp(6%, 7.5vw, 10.5%);
  width: clamp(80px, 8.5vw, 120px);
}

.hero-lineart-lipstick {
  transform: rotate(14deg);
  animation: floatLineArtLipstick 9s ease-in-out infinite alternate;
}

.hero-lineart-mascara-wrap {
  right: clamp(2%, 3.5vw, 5.5%);
  top: clamp(6.5%, 8vw, 11%);
  width: clamp(120px, 12vw, 168px);
}

.hero-lineart-mascara {
  transform: rotate(-6deg);
  animation: floatLineArtMascara 11s ease-in-out infinite alternate;
}

.hero-lineart-compact-wrap {
  left: clamp(1%, 2.2vw, 3.8%);
  top: clamp(35%, 38vw, 42%);
  width: clamp(74px, 7.6vw, 110px);
}

.hero-lineart-compact {
  transform: rotate(-4deg);
  animation: floatLineArtCompact 12.5s ease-in-out infinite alternate;
}

.hero-lineart-brush-wrap {
  right: clamp(1.8%, 3.2vw, 5%);
  top: clamp(32%, 35vw, 40%);
  width: clamp(68px, 7.5vw, 102px);
}

.hero-lineart-brush {
  transform: rotate(18deg);
  animation: floatLineArtBrush 10s ease-in-out infinite alternate;
}

/* Subtle, Gentle Floating Keyframes with Delicate Rotation */
@keyframes floatLineArtLipstick {
  0% { transform: translateY(0) translateX(0) rotate(12deg); }
  50% { transform: translateY(-9px) translateX(3px) rotate(16deg); }
  100% { transform: translateY(6px) translateX(-3px) rotate(11deg); }
}

@keyframes floatLineArtMascara {
  0% { transform: translateY(0) translateX(0) rotate(-7deg); }
  50% { transform: translateY(-11px) translateX(-4px) rotate(-3deg); }
  100% { transform: translateY(7px) translateX(3px) rotate(-9deg); }
}

@keyframes floatLineArtCompact {
  0% { transform: translateY(0) translateX(0) rotate(-4deg); }
  50% { transform: translateY(8px) translateX(4px) rotate(-7deg); }
  100% { transform: translateY(-7px) translateX(-3px) rotate(-2deg); }
}

@keyframes floatLineArtBrush {
  0% { transform: translateY(0) translateX(0) rotate(17deg); }
  50% { transform: translateY(-9px) translateX(-3px) rotate(21deg); }
  100% { transform: translateY(8px) translateX(4px) rotate(15deg); }
}

@keyframes heroEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 991px) {
  .hero-lineart-lipstick-wrap { left: 1.5%; top: 3%; width: 75px; }
  .hero-lineart-mascara-wrap { right: 1.5%; top: 4%; width: 110px; }
  .hero-lineart-compact-wrap { left: 2%; top: 50%; width: 85px; }
  .hero-lineart-brush-wrap { right: 2%; top: 48%; width: 68px; }
}

@media (max-width: 680px) {
  .hero-lineart-mascara-wrap,
  .hero-lineart-brush-wrap {
    display: none !important;
  }
  .hero-lineart-lipstick-wrap {
    left: 1%;
    top: 2%;
    width: 58px;
    opacity: 0.75;
  }
  .hero-lineart-compact-wrap {
    left: 1%;
    top: 60%;
    width: 68px;
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lineart-lipstick,
  .hero-lineart-mascara,
  .hero-lineart-compact,
  .hero-lineart-brush,
  .hero-lineart-item,
  .hero-3d-lipstick,
  .hero-3d-mascara,
  .hero-3d-compact,
  .hero-3d-brush,
  .hero-3d-item,
  .ref-hero-header {
    animation: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   ELEGANT BRIDAL CALLIGRAPHY HERO HEADLINE
   - Refined serif lead-in ("Master the Art of")
   - Oversized flowing calligraphy ("Bridal Beauty") with rich antique gold sheen
   - Delicate flourish extending from the final "y"
   - Clean balanced tail typography ("at Clanford")
   - Ample vertical space for ascenders, descenders & swashes
   - Fully selectable & responsive
   ========================================================================== */

.ref-hero-title-bridal {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0.25rem auto 1.5rem !important;
  padding: 0.25rem 0.5rem !important;
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* 1. "Master the Art of" — smaller, refined serif lettering with generous breathing room */
.bridal-lead-serif {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.15rem, 2.1vw, 1.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #110D09 !important;
  margin: 0 0 0.5rem 0 !important;
  display: block !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  line-height: 1.3 !important;
}

/* 2. "Bridal Beauty" — Modern Geometric Sans with Iconic Ink-traps ('Trap' Font) in Rich Golden Color */
.bridal-calligraphy-wrap {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  position: relative !important;
  margin: 0.15rem 0 0.45rem !important;
  padding: 0.05em 0.15em !important;
  max-width: 100% !important;
}

.bridal-calligraphy-text {
  font-family: 'Trap', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(3.2rem, 7.8vw, 6.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.028em !important;
  word-spacing: 0 !important;
  color: #2E1A11 !important;
  background: linear-gradient(135deg, #1C0E06 0%, #331A0F 36%, #4C2617 62%, #241108 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 !important;
  filter: drop-shadow(0 3px 8px rgba(35, 17, 9, 0.22)) !important;
  display: inline-block !important;
  white-space: nowrap !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Fallback for browsers that don't support text fill color */
@supports not (-webkit-background-clip: text) {
  .bridal-calligraphy-text {
    color: #2E1A11 !important;
  }
}

.bridal-y-flourish-svg {
  display: none !important;
}

/* 4. "at Clanford" — small, clean typography beneath the headline */
.bridal-tail-clean {
  font-family: 'Plus Jakarta Sans', 'Manrope', -apple-system, sans-serif !important;
  font-size: clamp(0.82rem, 1.3vw, 1.05rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #4A423A !important;
  margin: 0.4rem 0 0 0 !important;
  display: block !important;
}

.bridal-tail-clean span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.bridal-tail-clean span::before,
.bridal-tail-clean span::after {
  content: "" !important;
  display: inline-block !important;
  width: 32px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, rgba(140, 78, 5, 0.6), transparent) !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .bridal-calligraphy-text {
    font-size: clamp(2.8rem, 7.2vw, 4.8rem) !important;
    -webkit-text-stroke: 0 !important;
  }
}

@media (max-width: 600px) {
  .bridal-lead-serif {
    font-size: clamp(0.78rem, 3.2vw, 0.95rem) !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 0.15rem !important;
    line-height: 1.3 !important;
  }
  .bridal-calligraphy-wrap {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .bridal-calligraphy-text {
    font-size: clamp(1.85rem, 8vw, 2.6rem) !important;
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    display: block !important;
    max-width: 100% !important;
    padding: 0 0.25rem !important;
  }
  .bridal-tail-clean {
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    margin-top: 0.25rem !important;
  }
  .bridal-tail-clean span::before,
  .bridal-tail-clean span::after {
    width: 16px !important;
  }
}

/* Reduced Motion Mode */
@media (prefers-reduced-motion: reduce) {
  .bridal-y-flourish-svg {
    transition: none !important;
  }
}

/* ==========================================================================
   HERO HEADLINE - DISPLAY FONT: LEAGUE SPARTAN
   ========================================================================== */

.ref-hero-title {
  font-family: 'Trap', 'League Spartan', sans-serif !important;
  font-size: clamp(2rem, 4.6vw, 3.85rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  color: #171411 !important;
  text-align: center !important;
  margin: 0.5rem auto 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.55rem !important;
  max-width: 980px !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

.ref-hero-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0.45rem 0.65rem !important;
  position: relative !important;
  text-align: center !important;
}

.ref-hero-text {
  font-family: 'Trap', 'League Spartan', sans-serif !important;
  font-weight: 800 !important;
  color: #171411 !important;
  white-space: nowrap !important;
}

/* Yellow pill for "Beauty Skills" */
.ref-hero-pill-yellow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FDC767 !important;
  color: #171411 !important;
  font-family: 'Trap', 'League Spartan', sans-serif !important;
  font-weight: 800 !important;
  padding: 0.12em 0.75em 0.16em 0.75em !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(253, 199, 103, 0.45) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.ref-hero-pill-yellow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(253, 199, 103, 0.6) !important;
}

/* Brown oval button with white arrow */
.ref-hero-arrow-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #9A6615 !important;
  color: #FFFFFF !important;
  padding: 0.28em 0.85em !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 12px rgba(154, 102, 21, 0.35) !important;
  line-height: 1 !important;
  transition: transform 0.25s ease, background-color 0.25s ease !important;
}

.ref-hero-arrow-pill svg {
  display: block !important;
  stroke: #FFFFFF !important;
  stroke-width: 3px !important;
  width: clamp(15px, 1.6vw, 22px) !important;
  height: clamp(15px, 1.6vw, 22px) !important;
  transition: transform 0.25s ease !important;
}

.ref-hero-row:hover .ref-hero-arrow-pill {
  transform: scale(1.05) !important;
  background: #83540C !important;
}

.ref-hero-row:hover .ref-hero-arrow-pill svg {
  transform: translateX(3px) !important;
}

/* Golden Sparkle Stars */
.hero-sparkle-group {
  display: inline-flex !important;
  pointer-events: none !important;
}

.sparkle-top-left {
  position: absolute !important;
  left: -3.2rem !important;
  top: -0.65rem !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.15rem !important;
}

.sparkle-bottom-right {
  position: absolute !important;
  right: -3rem !important;
  bottom: 0.15rem !important;
}

.sparkle-svg {
  display: block !important;
  filter: drop-shadow(0 2px 5px rgba(239, 184, 37, 0.45)) !important;
  animation: sparkleTwinkle 3s ease-in-out infinite alternate !important;
}

.sparkle-lg {
  width: clamp(1.4rem, 2.2vw, 2.2rem) !important;
  height: clamp(1.4rem, 2.2vw, 2.2rem) !important;
}

.sparkle-sm {
  width: clamp(0.9rem, 1.4vw, 1.35rem) !important;
  height: clamp(0.9rem, 1.4vw, 1.35rem) !important;
  margin-right: 0.65rem !important;
  animation-delay: 1.2s !important;
}

@keyframes sparkleTwinkle {
  0% { transform: scale(0.92) rotate(0deg); opacity: 0.88; }
  100% { transform: scale(1.12) rotate(8deg); opacity: 1; filter: drop-shadow(0 2px 10px rgba(239, 184, 37, 0.75)); }
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .sparkle-top-left {
    left: -2.4rem !important;
  }
  .sparkle-bottom-right {
    right: -2.2rem !important;
  }
}

@media (max-width: 768px) {
  .sparkle-top-left {
    position: absolute !important;
    left: -1.85rem !important;
    top: -0.35rem !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
  }
  .sparkle-bottom-right {
    position: absolute !important;
    right: -1.85rem !important;
    bottom: -0.2rem !important;
  }
  .ref-hero-row {
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 540px) {
  .ref-hero-title {
    font-size: clamp(1.45rem, 6.4vw, 2rem) !important;
    line-height: 1.25 !important;
    gap: 0.45rem !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0.25rem auto 1.25rem !important;
  }
  .ref-hero-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    gap: 0.35rem !important;
  }
  .ref-hero-text {
    white-space: nowrap !important;
    text-align: center !important;
  }
  .ref-hero-pill-yellow {
    padding: 0.12em 0.55em 0.16em 0.55em !important;
    border-radius: 9999px !important;
    font-size: 0.96em !important;
  }
  .ref-hero-arrow-pill {
    padding: 0.2em 0.55em !important;
  }
  .sparkle-top-left {
    left: -1.45rem !important;
    top: -0.35rem !important;
  }
  .sparkle-bottom-right {
    right: -1.45rem !important;
    bottom: -0.15rem !important;
  }
  .sparkle-lg {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }
  .sparkle-sm {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }
}

/* ==========================================================================
   STUDENT REVIEWS / TESTIMONIALS SECTION
   ========================================================================== */

.ref-reviews-section {
  background: var(--bg-cream);
  padding: clamp(4rem, 6vw, 6rem) 0;
  position: relative;
  overflow: visible !important;
}

.reviews-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'League Spartan', var(--font-heading), sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-amber);
  margin-bottom: 0.75rem;
}

.reviews-eyebrow .sparkle-gold {
  color: #EFB825;
  font-size: 1.1em;
}

.reviews-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: #FFFFFF;
  border: 1px solid rgba(217, 154, 22, 0.25);
  border-radius: 9999px;
  padding: 0.4rem 1.15rem;
  margin-top: 1.25rem;
  box-shadow: 0 4px 14px rgba(169, 104, 8, 0.06);
}

.reviews-stars {
  color: #EAA81D;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}

.reviews-rating-text {
  font-size: 0.875rem;
  color: var(--text-dark);
}

.ref-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.ref-review-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 1.85rem 1.65rem;
  border: 1px solid rgba(169, 104, 8, 0.12);
  box-shadow: 0 10px 30px -4px rgba(169, 104, 8, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.ref-review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -6px rgba(169, 104, 8, 0.14);
  border-color: rgba(217, 154, 22, 0.35);
}

.ref-review-card-highlight {
  border-color: rgba(217, 154, 22, 0.4);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF5 100%);
  box-shadow: 0 14px 36px -4px rgba(217, 154, 22, 0.16);
}

.review-card-stars {
  color: #EAA81D;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.85rem;
}

.review-quote {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #4A423A;
  font-style: italic;
  margin-bottom: 1.5rem;
  flex: 1;
}

.review-student-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(169, 104, 8, 0.08);
}

.review-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #EAA81D;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(169, 104, 8, 0.15);
}

.review-student-name {
  font-family: 'League Spartan', var(--font-heading), sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #171411;
  margin: 0 0 0.15rem 0;
}

.review-student-role {
  display: block;
  font-size: 0.78rem;
  color: #746B63;
  margin-bottom: 0.25rem;
}

.review-course-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #8C4E05;
  background: #FFF3DA;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(217, 154, 22, 0.25);
}

/* ==========================================================================
   FACULTY & MENTORSHIP SECTION - ULTRA-LUXURY REDESIGN (ICON-FREE & ANIMATED)
   ========================================================================== */
.mentors-overview-card {
  background: radial-gradient(circle at 90% 10%, rgba(217, 154, 22, 0.05), transparent 50%), #FAF4EB !important;
  border: 1px solid rgba(217, 154, 22, 0.28) !important;
  border-radius: 32px !important;
  padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1.25rem, 3.5vw, 3rem) !important;
  box-shadow: 0 20px 50px -10px rgba(169, 104, 8, 0.09), 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  margin-top: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.mentors-overview-card:hover {
  border-color: rgba(217, 154, 22, 0.45) !important;
  box-shadow: 0 25px 60px -10px rgba(169, 104, 8, 0.14), 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

.mentors-overview-header {
  max-width: 820px !important;
  margin: 0 auto 3rem !important;
  text-align: center !important;
}

.mentors-badge-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1.5rem !important;
}

.mentor-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  font-family: 'League Spartan', var(--font-heading), sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.45rem 1.15rem !important;
  border-radius: 999px !important;
  background: rgba(217, 154, 22, 0.08) !important;
  border: 1px solid rgba(217, 154, 22, 0.25) !important;
  color: #A96808 !important;
  box-shadow: 0 2px 8px rgba(217, 154, 22, 0.06) !important;
  transition: all 0.3s ease !important;
}

/* ==========================================================================
   FACULTY & MENTORSHIP - FAN-OUT LUXURY DECK (MATCHING REFERENCE IMAGE)
   ========================================================================== */

.mentors-overview-card {
  background: radial-gradient(circle at 90% 10%, rgba(217, 154, 22, 0.05), transparent 50%), #FAF4EB !important;
  border: 1px solid rgba(217, 154, 22, 0.22) !important;
  border-radius: 32px !important;
  padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 3.5vw, 3.5rem) !important;
  box-shadow: 0 20px 50px -10px rgba(169, 104, 8, 0.1), 0 6px 18px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  margin-top: 2rem !important;
}

.mentors-overview-header {
  text-align: center !important;
  margin-bottom: 2.75rem !important;
}

.mentors-badge-wrap {
  display: flex !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1.15rem !important;
}

.mentor-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.45rem 1.25rem !important;
  border-radius: 9999px !important;
  font-family: 'League Spartan', var(--font-heading), sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.mentor-badge-blush {
  background: rgba(244, 219, 214, 0.65) !important;
  color: #B04A36 !important;
  border: 1px solid rgba(224, 168, 156, 0.45) !important;
}

.mentor-badge-honey {
  background: rgba(247, 233, 203, 0.7) !important;
  color: #B37D14 !important;
  border: 1px solid rgba(217, 154, 22, 0.35) !important;
}

.mentors-lead-headline {
  font-family: 'League Spartan', var(--font-heading), sans-serif !important;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important;
  font-weight: 700 !important;
  color: #1A1612 !important;
  line-height: 1.22 !important;
  margin: 0 auto 1.15rem !important;
  letter-spacing: -0.015em !important;
}

.mentor-headline-accent {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  color: #C58B24 !important;
}

.mentors-lead-desc {
  font-family: 'Manrope', var(--font-body), sans-serif !important;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;
  line-height: 1.75 !important;
  color: #5A524C !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* 4-Pillars Fan-out Deck */
.mentors-pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  margin: 2.75rem 0 3.25rem !important;
  align-items: stretch !important;
  perspective: 1200px !important;
}

/* Hide Mobile Carousel Controls on Desktop */
.mentors-mobile-tabs,
.mentors-mobile-controls {
  display: none !important;
}

/* Base Card Style */
.mentor-pillar-card {
  background: #FFFDF8 !important;
  border: 1.5px solid rgba(217, 154, 22, 0.28) !important;
  border-radius: 24px !important;
  padding: 2.25rem 1.5rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  box-shadow: 0 14px 34px -4px rgba(169, 104, 8, 0.11), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease !important;
  opacity: 1 !important; /* CRITICAL: Never opacity 0 */
  transform: none;
  box-sizing: border-box !important;
}

/* Desktop Fan Tilt Layout */
@media (min-width: 992px) {
  .mentor-pillar-card-1 {
    transform: rotate(-3deg) translateY(6px);
    z-index: 1;
  }
  .mentor-pillar-card-2 {
    transform: rotate(-1deg) translateY(-8px);
    z-index: 2;
  }
  .mentor-pillar-card-3 {
    transform: rotate(1deg) translateY(0px);
    z-index: 1;
  }
  .mentor-pillar-card-4 {
    transform: rotate(3deg) translateY(6px);
    z-index: 1;
  }

  .mentor-pillar-card:hover {
    transform: rotate(0deg) translateY(-14px) scale(1.025) !important;
    z-index: 10 !important;
  }
}

.mentor-pillar-card:hover {
  border-color: rgba(217, 154, 22, 0.55) !important;
  box-shadow: 0 24px 48px -8px rgba(169, 104, 8, 0.18), 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Card Header: Bold Numeral & Luxury Tag */
.pillar-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 1.25rem !important;
}

.pillar-num-badge {
  font-family: 'Trap', 'League Spartan', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: #C68B25 !important;
}

.pillar-tag {
  font-family: 'League Spartan', var(--font-heading), sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8C5E0E !important;
  background: rgba(217, 154, 22, 0.08) !important;
  border: 1px solid rgba(217, 154, 22, 0.22) !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* Card Headline (Trap Bold Luxury) */
.pillar-card-title {
  font-family: 'Trap', 'League Spartan', var(--font-heading), sans-serif !important;
  font-size: clamp(1.24rem, 1.45vw, 1.42rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #171411 !important;
  margin: 0 !important;
}

/* Short Divider Bar */
.pillar-card-divider {
  width: 34px !important;
  height: 3.5px !important;
  background: #C68B25 !important;
  border-radius: 2px !important;
  margin: 0.85rem 0 1rem !important;
}

/* Card Body Description */
.pillar-card-desc {
  font-family: 'Manrope', var(--font-body), sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.68 !important;
  color: #5C544E !important;
  margin: 0 !important;
  flex-grow: 1 !important;
}

/* Card Benefit Strip */
.pillar-card-benefit {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin-top: 1.25rem !important;
  padding-top: 0.85rem !important;
  border-top: 1px dashed rgba(217, 154, 22, 0.22) !important;
  font-family: 'Manrope', var(--font-body), sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #736453 !important;
}

.pillar-card-benefit .benefit-bullet {
  color: #C68B25 !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
}

/* Footer of the Card */
.mentors-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
  padding-top: 2rem !important;
  border-top: 1px solid rgba(217, 154, 22, 0.16) !important;
}

.mentors-footer-info {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-family: 'Manrope', var(--font-body), sans-serif !important;
  font-size: 0.92rem !important;
  color: #5A524C !important;
  font-weight: 500 !important;
  flex: 1 1 320px !important;
}

.footer-trust-shield {
  color: #C68B25 !important;
  flex-shrink: 0 !important;
}

/* Luxury WhatsApp CTA Button */
.btn-mentors-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  background: linear-gradient(135deg, #D49D2B 0%, #B87C10 100%) !important;
  color: #FFFFFF !important;
  font-family: 'League Spartan', var(--font-heading), sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0.9rem 2.1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 24px rgba(184, 124, 16, 0.28) !important;
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.btn-mentors-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 16px 32px rgba(184, 124, 16, 0.42) !important;
  color: #FFFFFF !important;
}

@media (max-width: 991px) {
  /* Retain 2-col on tablets if desired or handled by mobile-luxury.css */
}

@media (max-width: 640px) {
  .mentors-overview-card {
    border-radius: 26px !important;
    overflow: hidden !important;
  }
  .mentors-card-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: 1.25rem !important;
  }
  .mentors-footer-info {
    justify-content: center !important;
    text-align: center !important;
  }
  .btn-mentors-cta {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mentor-pillar-card {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   SCROLL-RESPONSIVE GOLDEN BOWL BACKGROUND ANIMATION & IDLE BREATHING
   - At top: Subtle, shallow golden bowl-shaped glow dipping from top edge
   - On scroll down: Bowl gradually expands downward & curved edges spread outward
   - Gradient smoothly transitions into a soft champagne and ivory ambient veil
   - Reverses naturally on scroll up
   - Idle animation: Extremely slow, subtle breathing oscillation
   ========================================================================== */

:root {
  --bowl-width: 70vw;
  --bowl-depth: 42vh;
  --bowl-scale-x: 1;
  --bowl-scale-y: 1;
  --bowl-opacity-core: 0.28;
  --bowl-opacity-mid: 0.18;
  --bowl-opacity-arc: 0.35;
  --bowl-veil-opacity: 0;
}

.luxury-scroll-bowl-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background-color: var(--bg-ivory) !important;
}

/* Primary Golden Bowl Glow (Curved Parabolic Inverted Dome) */
.bowl-glow-core {
  position: absolute !important;
  top: -6vh !important;
  left: 50% !important;
  transform: translateX(-50%) scale(var(--bowl-scale-x, 1), var(--bowl-scale-y, 1)) !important;
  width: var(--bowl-width, 72vw) !important;
  height: var(--bowl-depth, 44vh) !important;
  border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(235, 170, 30, var(--bowl-opacity-core, 0.35)) 0%,
    rgba(245, 202, 105, var(--bowl-opacity-mid, 0.22)) 35%,
    rgba(253, 232, 185, calc(var(--bowl-opacity-mid, 0.22) * 0.55)) 65%,
    rgba(255, 249, 240, 0) 88%
  ) !important;
  filter: blur(36px) !important;
  will-change: transform, width, height, opacity !important;
  pointer-events: none !important;
}

/* Luminous Curved Lip / Lower Arc Contour */
.bowl-glow-arc {
  position: absolute !important;
  top: -6vh !important;
  left: 50% !important;
  transform: translateX(-50%) scale(var(--bowl-scale-x, 1), var(--bowl-scale-y, 1)) !important;
  width: calc(var(--bowl-width, 72vw) * 0.94) !important;
  height: calc(var(--bowl-depth, 44vh) * 0.96) !important;
  border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
  border-bottom: 4px solid rgba(225, 168, 30, var(--bowl-opacity-arc, 0.42)) !important;
  filter: blur(12px) !important;
  will-change: transform, width, height, opacity !important;
  pointer-events: none !important;
}

/* Secondary Ambient Champagne/Ivory Spread Veil */
.bowl-ambient-veil {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse 110% 90% at 50% 30%,
    rgba(246, 222, 168, calc(var(--bowl-veil-opacity, 0) * 0.18)) 0%,
    rgba(254, 243, 224, calc(var(--bowl-veil-opacity, 0) * 0.12)) 45%,
    rgba(255, 249, 240, 0) 80%
  ) !important;
  opacity: var(--bowl-veil-opacity, 0) !important;
  pointer-events: none !important;
  will-change: opacity !important;
}

/* Ensure Page Structure Sits Gracefully Above Backdrop */
.site-header {
  position: relative !important;
  z-index: 20 !important;
}

#main-content {
  position: relative !important;
  z-index: 10 !important;
}

.site-footer {
  position: relative !important;
  z-index: 10 !important;
}

/* Make Section Backgrounds Translucent/Transparent to Reveal the Glowing Bowl */
.ref-hero-section {
  background: transparent !important;
}

.ref-hero-bg-blobs {
  display: none !important; /* Replaced by superior golden bowl backdrop */
}

.ref-courses-section {
  background: rgba(246, 235, 221, 0.65) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.ref-quote-benefits-section {
  background: transparent !important;
}

.ref-mentorship-section {
  background: transparent !important;
}

.section-bg-ivory {
  background: transparent !important;
}

.section-bg-blush,
.section-bg-cream {
  background: rgba(246, 235, 221, 0.62) !important;
}

.ref-reviews-section {
  background: transparent !important;
  overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  .bowl-glow-core,
  .bowl-glow-arc {
    transform: translateX(-50%) !important;
    transition: none !important;
  }
}