/*
  AUZAENE — Energy Healing & Holistic Wellness
  Design System: Night Sky × Steel Blue × Warm Gold
  Color source: Rising sun (gold #C4A558), calligraphy strokes (steel blue #2478A0),
                black background (deep night #07101C)
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* ── Brand Palette (extracted from AUZAENE logo) ── */
  --night-950: #030609;
  --night-900: #07101C;
  --night-800: #0D1B2E;
  --night-700: #122438;
  --night-600: #1A3150;

  --blue-800: #125880;
  --blue-700: #1A5E8A;
  --blue-600: #2478A0;   /* logo primary */
  --blue-500: #3392BC;
  --blue-400: #58AECE;
  --blue-300: #8EC8DE;
  --blue-200: #C0E2EF;
  --blue-100: #E6F4FA;
  --blue-50:  #F2F9FC;

  --gold-800: #8A6B20;
  --gold-700: #A88428;
  --gold-600: #C4A558;   /* logo gold */
  --gold-500: #D4BA72;
  --gold-400: #E2CC8E;
  --gold-300: #ECD9A8;
  --gold-200: #F3E8C8;
  --gold-100: #FAF3E4;
  --gold-50:  #FDFAF2;

  --cream-900: #2E2820;
  --cream-500: #B5A98A;
  --cream-200: #EAE4D6;
  --cream-100: #F4EFE6;
  --cream-50:  #F9F6F0;

  --white: #FFFFFF;

  /* ── Semantic ── */
  --color-bg:         var(--night-900);
  --color-surface:    var(--night-800);
  --color-text:       rgba(255,255,255,0.82);
  --color-text-muted: rgba(255,255,255,0.48);
  --color-heading:    var(--white);
  --color-primary:    var(--blue-600);
  --color-accent:     var(--gold-600);
  --color-accent-lt:  var(--gold-400);

  /* ── Typography ── */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-arabic:  "Noto Sans Arabic", sans-serif;

  /* ── Spacing ── */
  --section-py: clamp(80px, 11vw, 140px);

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   36px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-gold:  0 4px 32px rgba(196, 165, 88, 0.28);
  --shadow-blue:  0 4px 32px rgba(36, 120, 160, 0.30);
  --shadow-dark:  0 20px 60px rgba(0, 0, 0, 0.50);
  --glow-gold:    0 0 40px rgba(196, 165, 88, 0.20), 0 0 80px rgba(196, 165, 88, 0.08);
  --glow-blue:    0 0 40px rgba(36, 120, 160, 0.25), 0 0 80px rgba(36, 120, 160, 0.10);

  /* ── Easing ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Bootstrap compat ── */
  --background-color: var(--color-bg);
  --default-color:    var(--color-text);
  --heading-color:    var(--color-heading);
  --accent-color:     var(--color-primary);
  --surface-color:    var(--color-surface);
  --contrast-color:   var(--white);

  /* ── Nav ── */
  --nav-color:                     rgba(255,255,255,0.85);
  --nav-hover-color:               var(--gold-500);
  --nav-mobile-background-color:   var(--night-900);
  --nav-dropdown-background-color: var(--night-800);
  --nav-dropdown-color:            rgba(255,255,255,0.80);
  --nav-dropdown-hover-color:      var(--gold-400);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:lang(ar), [lang="ar"] * { font-family: var(--font-arabic), var(--font-body); }

a { color: var(--gold-500); text-decoration: none; transition: color 0.25s var(--ease-out); }
a:hover { color: var(--gold-400); }

img { max-width: 100%; height: auto; display: block; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   3. PHP EMAIL FORM
   ============================================================ */
.php-email-form .error-message {
  display: none; background: #7f1d1d; color: #fff;
  padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px;
  border: 1px solid rgba(255,100,100,0.3);
}
.php-email-form .sent-message {
  display: none; background: rgba(36,120,160,0.2); color: var(--blue-300);
  padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px;
  border: 1px solid rgba(36,120,160,0.4); text-align: center;
}
.php-email-form .loading {
  display: none; background: rgba(255,255,255,0.04); text-align: center;
  padding: 14px; border-radius: var(--radius-sm); margin-bottom: 20px;
  color: var(--color-text-muted);
}
.php-email-form .loading::before {
  content: ""; display: inline-block; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid rgba(196,165,88,0.3);
  border-top-color: var(--gold-600); animation: spin 0.9s linear infinite;
  margin-right: 8px; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   4. HEADER / NAV
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1035;
  padding: 20px 0;
  background: transparent;
  transition: background 0.4s var(--ease-out), padding 0.4s var(--ease-out), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(7, 16, 28, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 0;
  border-bottom-color: rgba(196,165,88,0.12);
}
.header .container-fluid {
  padding-left:  clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
}
.header .logo { display: flex; align-items: center; gap: 12px; line-height: 1; }

/* Transparent logo — integrates cleanly on any header background */
.logo-custom {
  display: block;
  height: clamp(36px, 4vw, 48px);
  width: auto;
  object-fit: contain;
  filter: none;
  background: transparent;
}
/* Suppress old placeholders */
.logo-default, .logo-text-live { display: none !important; }

.header-toolbar { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* Nav */
.navmenu ul { list-style: none; display: flex; align-items: center; gap: 2px; }
.navmenu ul li a {
  display: inline-block; padding: 6px 15px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--nav-color);
  position: relative;
  transition: color 0.25s;
}
.navmenu ul li a::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; right: 50%;
  height: 1px; background: var(--gold-600);
  transition: left 0.3s var(--ease-out), right 0.3s var(--ease-out);
}
.navmenu ul li a:hover, .navmenu ul li a.active { color: var(--gold-400); }
.navmenu ul li a:hover::after, .navmenu ul li a.active::after { left: 15px; right: 15px; }

/* Book CTA pill */
.nav-book-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--gold-700), var(--gold-600));
  color: var(--night-900) !important;
  font-weight: 700 !important; font-size: 0.8125rem !important; letter-spacing: 0.06em;
  padding: 8px 20px; border-radius: var(--radius-full);
  box-shadow: var(--shadow-gold);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.25s !important;
}
.nav-book-pill:hover {
  transform: translateY(-1px); color: var(--night-900) !important;
  box-shadow: 0 8px 28px rgba(196,165,88,0.45) !important;
}
.nav-book-pill::after { display: none !important; }

.mobile-nav-toggle {
  display: none; font-size: 1.4rem; color: var(--white);
  cursor: pointer; border: none; background: none; padding: 4px;
  transition: color 0.2s;
}
.mobile-nav-toggle:hover { color: var(--gold-400); }

@media (max-width: 1199px) {
  .mobile-nav-toggle { display: block; }
  .navmenu ul {
    display: none; flex-direction: column;
    position: absolute; top: calc(100% + 12px); right: 0;
    background: var(--night-900);
    border: 1px solid rgba(196,165,88,0.15);
    border-radius: var(--radius-md); padding: 14px; min-width: 230px;
    box-shadow: var(--shadow-dark); gap: 2px; z-index: 100;
  }
  .navmenu ul.is-open { display: flex; }
  .navmenu ul li a { display: block; width: 100%; padding: 11px 16px; border-radius: var(--radius-sm); }
  .navmenu ul li a::after { display: none; }
  .navmenu ul li a:hover { background: rgba(196,165,88,0.08); }
  .navmenu { position: relative; }
}

/* Language switch */
.lang-switch { display: flex; gap: 2px; background: rgba(255,255,255,0.06); border-radius: var(--radius-full); padding: 3px; }
.lang-switch__btn {
  border: none; background: transparent; color: rgba(255,255,255,0.55);
  font-size: 0.75rem; font-weight: 600; padding: 4px 10px;
  border-radius: var(--radius-full); cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lang-switch__btn[aria-pressed="true"], .lang-switch__btn:hover {
  background: var(--gold-600); color: var(--night-900);
}

/* ============================================================
   5. HERO — Editorial Split Layout
   Left panel: dark atmospheric content
   Right panel: full-height image with diagonal clip
   ============================================================ */

/* ── Shared keyframes ── */
@keyframes heroFadeUp   { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
@keyframes heroFadeDown { from { opacity:0; transform: translateY(-20px); } to { opacity:1; transform: translateY(0); } }
@keyframes heroGlow     { from { opacity:0.5; transform:scale(1); } to { opacity:1; transform:scale(1.18); } }
@keyframes rotateSlow   { to { transform: rotate(360deg); } }
@keyframes rayPulse     { 0%,100% { opacity:0.3; height:28px; } 50% { opacity:0.9; height:44px; } }
@keyframes scrollDot    { 0%,100% { transform:translateX(-50%) translateY(0); opacity:1; } 80% { transform:translateX(-50%) translateY(12px); opacity:0; } }
@keyframes heroWordIn {
  from { opacity:0; transform: translateY(44px) rotateX(18deg); filter: blur(6px); }
  to   { opacity:1; transform: translateY(0)   rotateX(0);     filter: blur(0);   }
}
@keyframes particleFloat {
  0%   { opacity:0; transform:translateY(20px) scale(0); }
  10%  { opacity:0.8; }
  90%  { opacity:0.6; }
  100% { opacity:0; transform:translateY(-60px) scale(1.5); }
}
@keyframes badgePop {
  from { opacity:0; transform:translateY(16px) scale(0.9); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes quoteSlide {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── Outer shell ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 55fr 45fr;
  background: var(--night-950);
  overflow: hidden;
}

/* ── LEFT PANEL ── */
.hero__panel--left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(100px, 12vh, 140px) clamp(28px, 5vw, 72px) clamp(60px, 8vh, 100px);
  z-index: 2;
  overflow: hidden;
}

/* Aurora radial glows behind the text */
.hero__panel--left::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 20% 40%, rgba(36,120,160,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 60% 70%, rgba(196,165,88,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 120% 50% at 0% 100%, rgba(13,27,46,0.95) 0%, transparent 70%);
}
/* Animated gold pulse */
.hero__panel--left::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 45% 35% at 30% 35%, rgba(196,165,88,0.07) 0%, transparent 60%);
  animation: heroGlow 7s ease-in-out infinite alternate;
}

/* Arabic watermark */
.hero__watermark {
  position: absolute;
  bottom: -2%;
  left: -3%;
  font-family: var(--font-display);
  font-size: clamp(7rem, 18vw, 18rem);
  font-weight: 700;
  color: rgba(196,165,88,0.038);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.04em;
}

/* ── Floating particles (left panel only) ── */
.hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__particle {
  position: absolute; border-radius: 50%;
  background: var(--gold-600);
  animation: particleFloat linear infinite;
  opacity: 0;
}
.hero__particle:nth-child(1)  { width:2px;height:2px; top:15%; left:12%; animation-duration:8s;  animation-delay:0s; }
.hero__particle:nth-child(2)  { width:3px;height:3px; top:25%; left:78%; animation-duration:11s; animation-delay:1s; }
.hero__particle:nth-child(3)  { width:2px;height:2px; top:60%; left:22%; animation-duration:9s;  animation-delay:2s; }
.hero__particle:nth-child(4)  { width:2px;height:2px; top:75%; left:65%; animation-duration:13s; animation-delay:0.5s; }
.hero__particle:nth-child(5)  { width:1px;height:1px; top:40%; left:88%; animation-duration:7s;  animation-delay:3s; background:var(--blue-400); }
.hero__particle:nth-child(6)  { width:2px;height:2px; top:85%; left:42%; animation-duration:10s; animation-delay:1.5s; }
.hero__particle:nth-child(7)  { width:3px;height:3px; top:10%; left:55%; animation-duration:12s; animation-delay:4s; background:var(--blue-300); }
.hero__particle:nth-child(8)  { width:1px;height:1px; top:50%; left:5%;  animation-duration:14s; animation-delay:2.5s; }

/* ── Sun / logomark ── */
.hero__sun {
  position: relative; z-index: 2;
  width: clamp(80px, 10vw, 116px);
  height: clamp(80px, 10vw, 116px);
  margin-bottom: 2rem;
  flex-shrink: 0;
  animation: heroFadeUp 1s var(--ease-out) 0.1s both;
}
.hero__sun::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(196,165,88,0.4);
  box-shadow: var(--glow-gold);
  animation: rotateSlow 40s linear infinite;
}
.hero__sun::after {
  content: ''; position: absolute; inset: 10px; border-radius: 50%;
  border: 1px solid rgba(36,120,160,0.35);
  animation: rotateSlow 25s linear infinite reverse;
}
.hero__sun-logo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; border-radius: 50%;
  padding: 14%;
  mix-blend-mode: lighten;
  filter: brightness(1.3) contrast(1.1);
}
.hero__rays { position: absolute; inset: -28px; pointer-events: none; }
.hero__ray {
  position: absolute; top: 50%; left: 50%;
  width: 1px; height: 28px;
  background: linear-gradient(to top, transparent, rgba(196,165,88,0.5));
  transform-origin: bottom center;
  animation: rayPulse 3s ease-in-out infinite;
}
.hero__ray:nth-child(1)  { transform: translateX(-50%) rotate(0deg)   translateY(-100%); animation-delay:0s; }
.hero__ray:nth-child(2)  { transform: translateX(-50%) rotate(45deg)  translateY(-100%); animation-delay:0.3s; }
.hero__ray:nth-child(3)  { transform: translateX(-50%) rotate(90deg)  translateY(-100%); animation-delay:0.6s; }
.hero__ray:nth-child(4)  { transform: translateX(-50%) rotate(135deg) translateY(-100%); animation-delay:0.9s; }
.hero__ray:nth-child(5)  { transform: translateX(-50%) rotate(180deg) translateY(-100%); animation-delay:1.2s; }
.hero__ray:nth-child(6)  { transform: translateX(-50%) rotate(225deg) translateY(-100%); animation-delay:1.5s; }
.hero__ray:nth-child(7)  { transform: translateX(-50%) rotate(270deg) translateY(-100%); animation-delay:1.8s; }
.hero__ray:nth-child(8)  { transform: translateX(-50%) rotate(315deg) translateY(-100%); animation-delay:2.1s; }

/* ── Hero text content ── */
.hero__content { position: relative; z-index: 3; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 1.5rem;
  opacity: 0; animation: heroFadeDown 0.8s var(--ease-out) 0.3s forwards;
}
.hero__eyebrow::before {
  content: ''; display: inline-block; width: 28px; height: 1px; background: var(--gold-600);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  font-weight: 600; color: var(--white);
  line-height: 1.06; letter-spacing: -0.025em;
  margin-bottom: 0;
  perspective: 600px;
}
.hero__title-line { display: block; }
.hero__title-line:nth-child(2) { color: var(--gold-500); font-style: italic; }
/* word-by-word entrance */
.hero__title-line { opacity: 1 !important; animation: none !important; }
.hero__word {
  display: inline-block; opacity: 0;
  animation: heroWordIn 0.85s var(--ease-out) forwards;
  will-change: transform, opacity;
}
.hero__word + .hero__word { margin-left: 0.22em; }
[dir="rtl"] .hero__word + .hero__word { margin-left: 0; margin-right: 0.22em; }
.hero__title-line:nth-child(1) .hero__word:nth-child(1) { animation-delay: 0.45s; }
.hero__title-line:nth-child(1) .hero__word:nth-child(2) { animation-delay: 0.60s; }
.hero__title-line:nth-child(2) .hero__word:nth-child(1) { animation-delay: 0.76s; }

/* Gold ornamental divider */
.hero__ornament {
  display: flex; align-items: center; gap: 12px;
  margin: 1.6rem 0;
  opacity: 0; animation: heroFadeUp 0.7s var(--ease-out) 0.85s forwards;
}
.hero__ornament-line { width: 40px; height: 1px; background: linear-gradient(to right, var(--gold-600), transparent); }
.hero__ornament-diamond {
  width: 7px; height: 7px;
  background: var(--gold-600); transform: rotate(45deg);
  box-shadow: var(--shadow-gold);
}

.hero__lead {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem); color: rgba(255,255,255,0.6);
  line-height: 1.85; margin-bottom: 2.25rem; max-width: 460px;
  opacity: 0; animation: heroFadeUp 0.8s var(--ease-out) 0.95s forwards;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  opacity: 0; animation: heroFadeUp 0.8s var(--ease-out) 1.1s forwards;
}

/* ── Stats row (bottom of left panel) ── */
.hero__stats {
  position: relative; z-index: 3;
  display: flex; gap: clamp(20px, 3vw, 40px); align-items: flex-end;
  margin-top: auto;
  padding-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid rgba(196,165,88,0.12);
  opacity: 0; animation: heroFadeUp 0.8s var(--ease-out) 1.25s forwards;
}
.hero__stat-item { display: flex; flex-direction: column; gap: 3px; }
.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 600; color: var(--gold-500);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__stat-label {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.hero__stat-divider {
  width: 1px; height: 40px;
  background: rgba(196,165,88,0.18);
  align-self: center;
}

/* ── RIGHT PANEL ── */
.hero__panel--right {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* ── Slider chrome (fills the right panel) ── */
.hero__slider-chrome {
  position: absolute; inset: 0; z-index: 0;
}

/* Slider track */
.hero__slider {
  position: absolute; inset: 0;
}

/* Individual slides — crossfade */
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Full-height photo */
.hero__panel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform 8s ease;
}
.hero__slide.is-active .hero__panel-img { transform: scale(1.04); }

/* ── Progress bar ── */
.hero__slider-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.08); z-index: 8;
}
.hero__slider-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-700), var(--gold-400));
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ── Slide counter ── */
.hero__slider-counter {
  position: absolute; top: clamp(20px, 3vh, 32px); left: clamp(20px, 5vw, 40px);
  z-index: 8;
  display: flex; align-items: baseline; gap: 4px;
  font-size: 0.65rem; letter-spacing: 0.14em; font-weight: 600;
  color: rgba(255,255,255,0.45);
}
.hero__slider-counter-cur { color: var(--gold-400); font-size: 0.85rem; font-weight: 700; }
.hero__slider-counter-sep { opacity: .4; }

/* ── Dot navigation ── */
.hero__slider-dots {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 8;
  display: flex; align-items: center; gap: 10px;
}
.hero__slider-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: 1.5px solid transparent;
  padding: 0; cursor: pointer;
  transition: background .3s, transform .3s, border-color .3s;
}
.hero__slider-dot.is-active {
  background: var(--gold-500);
  border-color: rgba(196,165,88,0.4);
  transform: scale(1.5);
}
.hero__slider-dot:hover:not(.is-active) {
  background: rgba(255,255,255,0.6);
}

/* ── Prev / Next buttons ── */
.hero__slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 8;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(13,27,46,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(196,165,88,0.22);
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background .25s, border-color .25s, color .25s, opacity .25s;
  opacity: 0;
}
.hero__panel--right:hover .hero__slider-btn,
.hero__panel--right:focus-within .hero__slider-btn { opacity: 1; }
.hero__slider-btn:hover {
  background: rgba(196,165,88,0.18);
  border-color: var(--gold-500);
  color: var(--gold-400);
}
.hero__slider-btn--prev { left: 16px; }
.hero__slider-btn--next { right: 16px; }

/* Diagonal left-edge clip (creates the editorial angled seam) */
.hero__panel--right::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, var(--night-950) 0%, transparent 18%);
  clip-path: polygon(0 0, 18% 0, 30% 100%, 0 100%);
}

/* Dark vignette overlay for readability */
.hero__panel--right::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, var(--night-950) 0%, rgba(13,27,46,0.55) 22%, transparent 55%),
    linear-gradient(to top, rgba(13,27,46,0.75) 0%, transparent 40%);
}

/* ── Floating credential badge ── */
.hero__credential {
  position: absolute; top: clamp(100px, 15vh, 155px); right: clamp(20px, 4vw, 40px);
  z-index: 4;
  background: rgba(13,27,46,0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(196,165,88,0.28);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  max-width: 200px;
  opacity: 0; animation: badgePop 0.7s var(--ease-out) 1.4s forwards;
}
.hero__credential-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-700), var(--gold-500));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--night-950); flex-shrink: 0;
}
.hero__credential-text { display: flex; flex-direction: column; gap: 2px; }
.hero__credential-title {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-400);
}
.hero__credential-sub {
  font-size: 0.7rem; color: rgba(255,255,255,0.65); line-height: 1.3;
}

/* ── Floating quote card ── */
.hero__quote-card {
  position: absolute; bottom: clamp(60px, 10vh, 110px); right: clamp(20px, 4vw, 36px);
  z-index: 4;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--gold-500);
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 240px;
  opacity: 0; animation: quoteSlide 0.8s var(--ease-out) 1.6s forwards;
}
.hero__quote-card p {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.9rem; color: rgba(255,255,255,0.82);
  line-height: 1.6; margin: 0 0 8px;
}
.hero__quote-card cite {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-500); font-style: normal;
}

/* ── Scroll indicator ── */
.hero__scroll {
  position: absolute; bottom: 32px; left: clamp(28px, 5vw, 72px);
  z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  color: rgba(255,255,255,0.28); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  animation: heroFadeUp 1s var(--ease-out) 1.5s both;
  text-decoration: none;
}
.hero__scroll-mouse {
  width: 22px; height: 34px;
  border: 1.5px solid rgba(196,165,88,0.28); border-radius: 11px;
  position: relative;
}
.hero__scroll-mouse::after {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 5px; background: var(--gold-600); border-radius: 2px;
  animation: scrollDot 1.8s ease-in-out infinite;
}

/* ── RTL overrides ── */
[dir="rtl"] .hero {
  grid-template-columns: 45fr 55fr;
  direction: rtl;
}
[dir="rtl"] .hero__panel--left { order: 2; }
[dir="rtl"] .hero__slider-btn--prev { left: auto; right: 16px; }
[dir="rtl"] .hero__slider-btn--next { right: auto; left: 16px; }
[dir="rtl"] .hero__slider-counter { left: auto; right: clamp(20px, 5vw, 40px); }
[dir="rtl"] .hero__panel--right { order: 1; }
[dir="rtl"] .hero__panel--right::before {
  background: linear-gradient(to left, var(--night-950) 0%, transparent 18%);
  clip-path: polygon(82% 0, 100% 0, 100% 100%, 70% 100%);
}
[dir="rtl"] .hero__panel--right::after {
  background:
    linear-gradient(to left, var(--night-950) 0%, rgba(13,27,46,0.55) 22%, transparent 55%),
    linear-gradient(to top, rgba(13,27,46,0.75) 0%, transparent 40%);
}
[dir="rtl"] .hero__credential,
[dir="rtl"] .hero__quote-card { right: auto; left: clamp(20px, 4vw, 40px); }
[dir="rtl"] .hero__scroll { left: auto; right: clamp(28px, 5vw, 72px); }
[dir="rtl"] .hero__ornament-line { background: linear-gradient(to left, var(--gold-600), transparent); }
[dir="rtl"] .hero__eyebrow::before { display: none; }
[dir="rtl"] .hero__eyebrow::after {
  content: ''; display: inline-block; width: 28px; height: 1px; background: var(--gold-600);
}
[dir="rtl"] .hero__quote-card { border-left: 1px solid rgba(255,255,255,0.1); border-right: 3px solid var(--gold-500); }

/* ── Mobile: stack vertically ── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto 56vw; min-height: auto; }
  .hero__panel--left { order: 2; padding: 48px 24px 56px; }
  .hero__panel--right { order: 1; position: relative; height: 56vw; min-height: 260px; max-height: 400px; }
  .hero__panel--right::before { clip-path: none; background: none; }
  .hero__panel--right::after {
    background: linear-gradient(to top, var(--night-950) 0%, rgba(13,27,46,0.45) 35%, transparent 65%);
  }
  .hero__credential { top: auto; bottom: 16px; right: 16px; max-width: 170px; padding: 10px 12px; }
  .hero__quote-card { display: none; }
  .hero__stats { flex-wrap: wrap; gap: 16px; }
  .hero__scroll { display: none; }
  .hero__watermark { font-size: 5rem; }
  [dir="rtl"] .hero__panel--left { order: 2; }
  [dir="rtl"] .hero__panel--right { order: 1; }
  [dir="rtl"] .hero__panel--right::before { clip-path: none; background: none; }
  [dir="rtl"] .hero__credential { left: 16px; right: auto; }
}

/* ============================================================
   6. TRUST STRIP
   ============================================================ */
.trust-strip {
  background: var(--night-800);
  padding: 40px 0;
  border-top: 1px solid rgba(196,165,88,0.12);
  border-bottom: 1px solid rgba(196,165,88,0.12);
}
.trust-strip__grid {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
}
.trust-strip__item {
  flex: 1 1 180px; text-align: center;
  padding: 16px 24px; position: relative;
}
.trust-strip__item + .trust-strip__item::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: rgba(196,165,88,0.15);
}
.trust-strip__num {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 600;
  color: var(--gold-500); line-height: 1; display: block;
}
.trust-strip__label {
  font-size: 0.75rem; color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.1em; margin-top: 5px;
}
@media (max-width: 575px) { .trust-strip__grid { gap: 8px 0; } }

/* ============================================================
   7. SECTION BASE
   ============================================================ */
.section { padding: var(--section-py) 0; }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 1rem;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: ''; width: 24px; height: 1px; background: var(--gold-600); display: inline-block;
}
.section-eyebrow--light { color: rgba(255,255,255,0.45); }
.section-eyebrow--light::before, .section-eyebrow--light::after { background: rgba(255,255,255,0.2); }

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 600;
  line-height: 1.15;
}
.section-heading--light { color: var(--white); }
.section-heading--dark  { color: var(--night-800); }

.section-sub {
  font-size: 1.0625rem; line-height: 1.78;
  color: rgba(255,255,255,0.55); max-width: 560px;
}
.section-sub--dark { color: rgba(13,27,46,0.6); }

/* Ornament divider (reusable) */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 1.25rem auto;
}
.ornament-line { width: 36px; height: 1px; background: linear-gradient(to right, transparent, var(--gold-600), transparent); }
.ornament-diamond { width: 6px; height: 6px; background: var(--gold-600); transform: rotate(45deg); }

/* ============================================================
   7b. EDITORIAL QUOTE BAND (between About and Services)
   ============================================================ */
.editorial-quote {
  background: var(--night-950);
  padding: clamp(72px, 10vw, 120px) 0;
  text-align: center; position: relative; overflow: hidden;
}
.editorial-quote::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(196,165,88,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(36,120,160,0.05) 0%, transparent 55%);
}
.editorial-quote__inner {
  position: relative; z-index: 1; max-width: 880px; margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 60px);
}
.editorial-quote__mark {
  font-family: Georgia, serif; font-size: 9rem; line-height: 0.6;
  color: rgba(196,165,88,0.10); display: block; margin-bottom: 1.5rem;
  user-select: none; pointer-events: none;
  animation: heroFadeDown 1s var(--ease-out) 0.2s both;
}
.editorial-quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.5vw, 2.875rem);
  font-style: italic; font-weight: 400;
  color: var(--white); line-height: 1.55;
  border: none; padding: 0; margin: 0 0 2rem;
  letter-spacing: -0.01em;
}
.editorial-quote__text em { color: var(--gold-400); font-style: italic; }
.editorial-quote__cite {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--gold-600); font-style: normal; text-transform: uppercase;
}
.editorial-quote__cite::before, .editorial-quote__cite::after {
  content: ''; width: 28px; height: 1px; background: var(--gold-600); display: inline-block;
}

/* ============================================================
   8. ABOUT SECTION (light — contrast relief after dark hero)
   ============================================================ */
.about { background: var(--cream-50); }

.about__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 96px); align-items: center;
}
.about__visual { position: relative; }
.about__img-wrap {
  position: relative;
  border-radius: var(--radius-xl); overflow: hidden;
}
.about__img-wrap img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.about__img-wrap:hover img { transform: scale(1.04); }

/* Gold frame lines */
.about__img-wrap::before, .about__img-wrap::after {
  content: ''; position: absolute; pointer-events: none;
  border: 1.5px solid rgba(196,165,88,0.5);
  border-radius: var(--radius-xl);
}
.about__img-wrap::before { inset: -10px; z-index: -1; }
.about__img-wrap::after  { inset: -22px; z-index: -2; opacity: 0.4; }

/* Floating credential badge */
.about__badge {
  position: absolute; bottom: 28px; left: -24px;
  background: var(--night-800);
  border: 1px solid rgba(196,165,88,0.25);
  border-radius: var(--radius-md);
  padding: 14px 18px; text-align: center; min-width: 120px;
  box-shadow: var(--shadow-dark);
}
.about__badge-num {
  font-family: var(--font-display); font-size: 2rem; font-weight: 600;
  color: var(--gold-500); line-height: 1; display: block;
}
.about__badge-text { font-size: 0.6875rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }

.about__content { padding: 0; }
.about__content .section-eyebrow { color: var(--blue-700); }
.about__content .section-eyebrow::before, .about__content .section-eyebrow::after { background: var(--gold-600); }

.about__quote {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-style: italic; font-weight: 400;
  color: var(--night-800); line-height: 1.55;
  border-left: 2px solid var(--gold-600); padding-left: 20px;
  margin: 1.5rem 0 2rem;
}
.about__body { color: rgba(13,27,46,0.72); font-size: 1rem; line-height: 1.78; margin-bottom: 1.5rem; }

.about__credentials {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.75rem;
}
.about__cred-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--blue-700); background: var(--blue-50);
  padding: 6px 14px; border-radius: var(--radius-full);
  border: 1px solid rgba(36,120,160,0.18);
}
.about__cred-tag i { color: var(--gold-700); font-size: 0.875rem; }

@media (max-width: 991px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__visual { max-width: 420px; margin: 0 auto; order: -1; }
  .about__badge { left: 12px; bottom: 12px; }
  .about__img-wrap::before, .about__img-wrap::after { display: none; }
}

/* ============================================================
   9. SERVICES SECTION (dark)
   ============================================================ */
.services {
  background: var(--night-800);
  position: relative; overflow: hidden;
}
/* Subtle ambient texture behind services cards (no external dependency) */
.services::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(36,120,160,0.06) 0%, transparent 70%);
}
.services > .container { position: relative; z-index: 1; }

.services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: clamp(40px, 6vw, 72px);
}

.service-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(196,165,88,0.12);
  border-radius: var(--radius-lg); padding: 36px 28px;
  position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
  cursor: pointer;
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-600), transparent);
  transform: scaleX(0); transition: transform 0.4s var(--ease-out);
}
.service-card:hover {
  border-color: rgba(196,165,88,0.3); transform: translateY(-5px);
  box-shadow: var(--glow-gold);
}
.service-card:hover::before { transform: scaleX(1); }

.service-card__num {
  font-family: var(--font-display); font-size: 4rem; font-weight: 700;
  color: rgba(196,165,88,0.1); line-height: 1;
  position: absolute; top: 16px; right: 20px; pointer-events: none;
  user-select: none; transition: color 0.3s;
}
.service-card:hover .service-card__num { color: rgba(196,165,88,0.18); }

.service-card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(36,120,160,0.2), rgba(36,120,160,0.08));
  border: 1px solid rgba(36,120,160,0.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; transition: background 0.3s, border-color 0.3s;
}
.service-card__icon i { font-size: 1.25rem; color: var(--blue-400); transition: color 0.3s; }
.service-card:hover .service-card__icon { background: linear-gradient(135deg, rgba(196,165,88,0.2), rgba(196,165,88,0.08)); border-color: rgba(196,165,88,0.25); }
.service-card:hover .service-card__icon i { color: var(--gold-500); }

.service-card__title {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--white); margin-bottom: 10px;
}
.service-card__desc { font-size: 0.9rem; color: rgba(255,255,255,0.52); line-height: 1.68; margin-bottom: 20px; }
.service-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold-500); text-transform: uppercase;
  transition: gap 0.2s, color 0.2s;
}
.service-card__link i { transition: transform 0.2s; font-size: 0.75rem; }
.service-card:hover .service-card__link { color: var(--gold-400); gap: 9px; }
.service-card:hover .service-card__link i { transform: translateX(3px); }

@media (max-width: 991px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .services__grid { grid-template-columns: 1fr; } }

/* ============================================================
   9b. CUSTOM CURSOR (desktop / pointer-capable devices only)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body, a, button, [role="button"],
  .service-card, .mood-gallery__panel, .why__card { cursor: none !important; }
}
.cursor-dot {
  position: fixed; z-index: 10000; pointer-events: none;
  top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-500); transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width 0.28s var(--ease-spring), height 0.28s var(--ease-spring),
              background 0.25s, opacity 0.2s;
}
.cursor-ring {
  position: fixed; z-index: 9999; pointer-events: none;
  top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(196,165,88,0.45);
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width 0.38s var(--ease-spring), height 0.38s var(--ease-spring),
              border-color 0.3s, opacity 0.25s;
}
body.cursor-hover .cursor-dot  { width: 11px; height: 11px; background: var(--gold-400); }
body.cursor-hover .cursor-ring { width: 56px;  height: 56px;  border-color: rgba(196,165,88,0.65); }
body.cursor-click .cursor-dot  { width: 18px; height: 18px; background: var(--gold-300); }
body.cursor-click .cursor-ring { width: 28px;  height: 28px;  border-color: var(--gold-500); }
.cursor-dot.hidden, .cursor-ring.hidden { opacity: 0; }

/* ============================================================
   10. WHY CHOOSE (light section — alternating light/dark rhythm)
   ============================================================ */
.why { background: var(--cream-50); }
.why .section-heading--dark { color: var(--night-800); }

.why__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; margin-top: clamp(36px, 5vw, 64px);
}
.why__card {
  background: var(--white);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); padding: 32px 28px;
  display: flex; gap: 20px; align-items: flex-start;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out);
  position: relative; overflow: hidden;
}
/* Gold shimmer sweep on hover */
.why__card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(196,165,88,0.06) 60%, transparent 80%);
  transform: translateX(-100%); transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.why__card:hover::before { transform: translateX(100%); }
.why__card:hover {
  border-color: rgba(196,165,88,0.35); transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(196,165,88,0.1);
}
.why__card-icon {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--blue-100), var(--cream-50));
  border: 1px solid rgba(36,120,160,0.15);
  display: flex; align-items: center; justify-content: center;
}
.why__card-icon i { font-size: 1.25rem; color: var(--blue-700); }
.why__card-title {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
  color: var(--night-800); margin-bottom: 6px;
}
.why__card-body { font-size: 0.9rem; color: rgba(13,27,46,0.65); line-height: 1.7; }

@media (max-width: 767px) { .why__grid { grid-template-columns: 1fr; } }

/* ============================================================
   11. JOURNEY / PROCESS (dark, numbered timeline)
   ============================================================ */
.journey { background: var(--night-900); position: relative; overflow: hidden; }
.journey::before {
  content: ''; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(196,165,88,0.2), transparent);
  pointer-events: none;
}

.journey__steps {
  display: flex; flex-direction: column; gap: 0;
  position: relative; max-width: 900px; margin: 0 auto;
  margin-top: clamp(40px, 6vw, 72px);
}

.journey__step {
  display: grid; grid-template-columns: 1fr 80px 1fr;
  gap: 0; align-items: start; min-height: 120px;
}
.journey__step:nth-child(odd)  .journey__step-content { grid-column: 1; text-align: right; padding-right: 40px; }
.journey__step:nth-child(odd)  .journey__step-empty    { grid-column: 3; }
.journey__step:nth-child(even) .journey__step-content  { grid-column: 3; text-align: left; padding-left: 40px; }
.journey__step:nth-child(even) .journey__step-empty    { grid-column: 1; }
.journey__step-center { grid-column: 2; display: flex; flex-direction: column; align-items: center; z-index: 1; }

.journey__step-dot {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--night-800);
  border: 2px solid var(--gold-600);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--glow-gold);
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  color: var(--gold-500); transition: background 0.3s, transform 0.3s var(--ease-spring);
  position: relative; z-index: 1;
}
.journey__step:hover .journey__step-dot { background: var(--gold-600); color: var(--night-900); transform: scale(1.12); }
.journey__step-line { width: 2px; flex: 1; min-height: 40px; background: linear-gradient(to bottom, rgba(196,165,88,0.3), rgba(196,165,88,0.08)); }
.journey__step:last-child .journey__step-line { display: none; }

.journey__step-num {
  font-family: var(--font-display); font-size: 5rem; font-weight: 700;
  color: rgba(196,165,88,0.07); line-height: 1; display: block; margin-bottom: -1rem;
  pointer-events: none; user-select: none;
}
.journey__step-title {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--white); margin-bottom: 8px;
}
.journey__step-body { font-size: 0.9rem; color: rgba(255,255,255,0.5); line-height: 1.68; }

@media (max-width: 767px) {
  .journey__step { grid-template-columns: 56px 1fr; }
  .journey__step:nth-child(odd)  .journey__step-content,
  .journey__step:nth-child(even) .journey__step-content { grid-column: 2; text-align: left; padding: 0 0 0 20px; }
  .journey__step:nth-child(odd)  .journey__step-empty,
  .journey__step:nth-child(even) .journey__step-empty   { display: none; }
  .journey__step-center { grid-column: 1; }
  .journey__step-num { font-size: 3rem; }
}

/* ============================================================
   11b. MOOD GALLERY STRIP (full-bleed, no padding)
   ============================================================ */
.mood-gallery { overflow: hidden; line-height: 0; }
.mood-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.mood-gallery__panel {
  position: relative; aspect-ratio: 4/3; overflow: hidden; cursor: pointer;
}
.mood-gallery__panel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: saturate(0.85);
}
.mood-gallery__panel:hover img { transform: scale(1.07); filter: saturate(1.05); }
/* Layered dark gradient overlay */
.mood-gallery__panel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(3,6,9,0.92) 0%,
    rgba(3,6,9,0.45) 40%,
    rgba(3,6,9,0.15) 70%,
    transparent 100%
  );
}
/* Gold accent line on left edge of each panel */
.mood-gallery__panel::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; z-index: 3;
  background: linear-gradient(to bottom, transparent, var(--gold-600), transparent);
  opacity: 0; transition: opacity 0.4s;
}
.mood-gallery__panel:hover::before { opacity: 1; }
.mood-gallery__label {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: clamp(20px, 3vw, 40px);
  transform: translateY(8px);
  transition: transform 0.4s var(--ease-out);
}
.mood-gallery__panel:hover .mood-gallery__label { transform: translateY(0); }
.mood-gallery__label-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-400); display: block; margin-bottom: 7px;
}
.mood-gallery__label-title {
  font-family: var(--font-display); font-size: clamp(1.125rem, 1.8vw, 1.625rem);
  font-weight: 500; color: var(--white); line-height: 1.3;
}
.mood-gallery__label-sub {
  font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin-top: 6px; line-height: 1.5;
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s 0.05s, transform 0.35s 0.05s;
}
.mood-gallery__panel:hover .mood-gallery__label-sub { opacity: 1; transform: translateY(0); }
/* Number badge top-right */
.mood-gallery__num {
  position: absolute; top: 24px; right: 24px; z-index: 3;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
  color: rgba(196,165,88,0.6); letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .mood-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .mood-gallery__panel { aspect-ratio: 1/1; }
}
@media (max-width: 480px) {
  .mood-gallery__grid { grid-template-columns: 1fr; }
  .mood-gallery__panel { aspect-ratio: 4/3; }
}

/* ============================================================
   12. BENEFITS SECTION
   ============================================================ */
.benefits {
  background: linear-gradient(160deg, var(--night-800) 0%, var(--night-900) 60%, rgba(36,120,160,0.12) 100%);
  position: relative; overflow: hidden;
}
.benefits::before {
  content: ''; position: absolute; bottom: -80px; right: -80px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,165,88,0.07), transparent 60%);
  pointer-events: none;
}

.benefits__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: clamp(36px, 5vw, 64px);
}
.benefit-item {
  text-align: center; padding: 36px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(196,165,88,0.08);
  background: rgba(255,255,255,0.02);
  transition: border-color 0.3s, background 0.3s;
}
.benefit-item:hover { border-color: rgba(196,165,88,0.22); background: rgba(196,165,88,0.04); }

.benefit-item__icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(36,120,160,0.25), rgba(36,120,160,0.05));
  border: 1px solid rgba(36,120,160,0.2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.benefit-item__icon i { font-size: 1.375rem; color: var(--blue-400); transition: color 0.3s; }
.benefit-item:hover .benefit-item__icon { border-color: rgba(196,165,88,0.4); box-shadow: var(--glow-gold); }
.benefit-item:hover .benefit-item__icon i { color: var(--gold-400); }

.benefit-item__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.benefit-item__body  { font-size: 0.875rem; color: rgba(255,255,255,0.48); line-height: 1.7; }

@media (max-width: 991px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .benefits__grid { grid-template-columns: 1fr; } }

/* ============================================================
   13. TESTIMONIALS (light — warmth after dark)
   ============================================================ */
.testimonials {
  position: relative; overflow: hidden;
  background: var(--cream-100);
}
/* Subtle misty texture (no external dependency) */
.testimonials::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(196,165,88,0.05) 0%, transparent 65%);
}
.testimonials > .container { position: relative; z-index: 1; }
.testimonials .section-heading--dark { color: var(--night-800); }

.testimonials__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: clamp(36px, 5vw, 64px);
}
@media (max-width: 991px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
.testi-card {
  background: var(--white); border-radius: var(--radius-xl); padding: clamp(32px, 4vw, 48px);
  border: 1px solid var(--cream-200); position: relative; overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.testi-card:hover { box-shadow: 0 16px 48px rgba(196,165,88,0.12); transform: translateY(-4px); }

.testi-card__quote {
  font-size: 5rem; line-height: 1; font-family: Georgia, serif;
  color: var(--gold-200); position: absolute; top: 16px; left: 28px;
  pointer-events: none; user-select: none;
}
.testi-card__stars { display: flex; gap: 3px; margin-bottom: 1rem; }
.testi-card__stars i { color: var(--gold-600); font-size: 0.8125rem; }
.testi-card__text {
  font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.1875rem);
  font-style: italic; color: var(--night-800); line-height: 1.68; margin-bottom: 1.75rem; position: relative; z-index: 1;
}
.testi-card__author { display: flex; align-items: center; gap: 12px; }
.testi-card__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(145deg, #f8f5ed 0%, #eee6d2 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-700);
  overflow: hidden; border: 2px solid var(--cream-200);
}
.testi-card__avatar i { font-size: 1.25rem; line-height: 1; }
.testi-card__name  { font-weight: 700; font-size: 0.9375rem; color: var(--night-800); }
.testi-card__role  { font-size: 0.8rem; color: rgba(13,27,46,0.5); margin-top: 1px; }

@media (max-width: 767px) { .testimonials__grid { grid-template-columns: 1fr; } }

/* ============================================================
   14. FAQ (dark)
   ============================================================ */
.faq { background: var(--night-800); }

.faq__list { max-width: 760px; margin: clamp(36px,5vw,64px) auto 0; }
.faq__item { border-bottom: 1px solid rgba(196,165,88,0.1); }
.faq__question {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 0; cursor: pointer; width: 100%; border: none; background: transparent;
  text-align: left; color: rgba(255,255,255,0.82); font-size: 1rem; font-weight: 500; font-family: var(--font-body);
  transition: color 0.2s;
}
.faq__question:hover { color: var(--gold-400); }
.faq__question-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: rgba(196,165,88,0.08); border: 1px solid rgba(196,165,88,0.15);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, transform 0.3s var(--ease-out), border-color 0.25s;
}
.faq__question-icon i { font-size: 0.875rem; color: var(--gold-500); transition: transform 0.3s var(--ease-out); }
.faq__item.is-open .faq__question { color: var(--gold-400); }
.faq__item.is-open .faq__question-icon { background: var(--gold-600); border-color: var(--gold-600); }
.faq__item.is-open .faq__question-icon i { color: var(--night-900); transform: rotate(45deg); }
.faq__answer { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease-out), padding 0.3s; font-size: 0.9375rem; color: rgba(255,255,255,0.5); line-height: 1.75; }
.faq__item.is-open .faq__answer { max-height: 240px; padding-bottom: 20px; }

/* ============================================================
   15. CONTACT / BOOKING
   ============================================================ */
.contact { background: var(--night-900); }

.contact__inner {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(32px, 6vw, 80px); align-items: start;
}

.contact__info-panel { position: sticky; top: 100px; }
.contact__info-heading {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600; color: var(--white); margin-bottom: 0.5rem;
}
.contact__info-sub { font-size: 0.9375rem; color: rgba(255,255,255,0.48); margin-bottom: 2rem; }

.contact__info-items { display: flex; flex-direction: column; gap: 18px; margin-bottom: 2.5rem; }
.contact__info-item  { display: flex; align-items: flex-start; gap: 14px; }
.contact__info-item-icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: rgba(196,165,88,0.1); border: 1px solid rgba(196,165,88,0.2);
  display: flex; align-items: center; justify-content: center;
}
.contact__info-item-icon i { color: var(--gold-500); font-size: 0.9375rem; }
.contact__info-item-label { font-size: 0.6875rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.contact__info-item-val   { color: rgba(255,255,255,0.75); font-size: 0.9375rem; font-weight: 500; }

.contact__social { display: flex; gap: 8px; }
.contact__social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(196,165,88,0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); font-size: 0.9375rem;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-spring), border-color 0.2s;
}
.contact__social a:hover {
  background: var(--gold-600); color: var(--night-900); border-color: var(--gold-600); transform: translateY(-2px);
}

/* Form */
.contact__form-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(196,165,88,0.12);
  border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 52px);
}
.form-control {
  display: block; width: 100%;
  padding: 14px 18px; font-size: 0.9375rem; font-family: var(--font-body);
  color: rgba(255,255,255,0.85);
  -webkit-text-fill-color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,165,88,0.15);
  border-radius: var(--radius-md); outline: none;
  caret-color: var(--gold-400);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  -webkit-appearance: none;
}
.form-control:focus {
  border-color: rgba(196,165,88,0.45); background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(196,165,88,0.1);
  color: rgba(255,255,255,0.96);
  -webkit-text-fill-color: rgba(255,255,255,0.96);
}
.form-control::placeholder { color: rgba(255,255,255,0.3); }
.form-control::-webkit-input-placeholder { color: rgba(255,255,255,0.3); }
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255,255,255,0.96);
  caret-color: var(--gold-400);
  box-shadow: 0 0 0 1000px rgba(24,38,58,0.96) inset;
  transition: background-color 9999s ease-in-out 0s;
}
textarea.form-control { resize: vertical; min-height: 140px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 575px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 16px; }

.contact__submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: linear-gradient(135deg, var(--gold-700), var(--gold-600));
  color: var(--night-900); font-weight: 700; font-size: 0.9375rem;
  padding: 15px 36px; border: none; border-radius: var(--radius-full);
  cursor: pointer; box-shadow: var(--shadow-gold);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.25s;
  margin-top: 8px;
}
.contact__submit:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(196,165,88,0.42); }

@media (max-width: 991px) {
  .contact__inner { grid-template-columns: 1fr; }
  .contact__info-panel { position: static; }
}

/* ============================================================
   16. FINAL CTA
   ============================================================ */
.cta-banner {
  position: relative; overflow: hidden; text-align: center;
  background: var(--night-950);
  padding: clamp(80px, 12vw, 140px) 0;
}
/* Atmospheric photo layer */
.cta-banner__photo-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/gallery-transform-energy.jpg');
  background-size: cover; background-position: center 30%;
  opacity: 0.26; filter: saturate(0.6) brightness(0.65);
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(36,120,160,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(196,165,88,0.10) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(3,6,9,0.55) 0%, rgba(3,6,9,0.3) 50%, rgba(3,6,9,0.55) 100%);
}
.cta-banner > .container { position: relative; z-index: 2; }
.cta-banner__eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 1rem; }
.cta-banner__heading { font-family: var(--font-display); font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 600; color: var(--white); margin-bottom: 1rem; }
.cta-banner__heading em { font-style: italic; color: var(--gold-500); }
.cta-banner__sub { font-size: 1.0625rem; color: rgba(255,255,255,0.5); max-width: 500px; margin: 0 auto 2.5rem; }
.cta-banner__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   17. GLOBAL BUTTONS
   ============================================================ */
.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold-700), var(--gold-600));
  color: var(--night-900); font-weight: 700; font-size: 0.9375rem;
  padding: 14px 34px; border-radius: var(--radius-full); border: none; cursor: pointer;
  box-shadow: var(--shadow-gold); letter-spacing: 0.02em;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.25s;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(196,165,88,0.45); color: var(--night-900); }

.btn-outline-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: rgba(255,255,255,0.8);
  font-weight: 600; font-size: 0.9375rem;
  padding: 13px 30px; border-radius: var(--radius-full);
  border: 1.5px solid rgba(196,165,88,0.4); cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.btn-outline-gold:hover {
  border-color: var(--gold-500); color: var(--gold-400);
  background: rgba(196,165,88,0.07);
}

.btn-blue {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-600); color: var(--white);
  font-weight: 700; font-size: 0.9375rem;
  padding: 14px 32px; border-radius: var(--radius-full); border: none; cursor: pointer;
  box-shadow: var(--shadow-blue);
  transition: background 0.25s, transform 0.2s var(--ease-spring), box-shadow 0.25s;
}
.btn-blue:hover { background: var(--blue-500); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(36,120,160,0.45); }

/* ============================================================
   18. FOOTER
   ============================================================ */
.footer { background: var(--night-950); padding: clamp(60px, 9vw, 100px) 0 0; color: rgba(255,255,255,0.45); }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 52px); margin-bottom: clamp(48px, 7vw, 80px);
}

.footer__brand-logo { width: 68px; height: 68px; object-fit: contain; margin-bottom: 18px; mix-blend-mode: lighten; }
.footer__brand-name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--white); margin-bottom: 10px; letter-spacing: 0.06em; }
.footer__brand-desc { font-size: 0.875rem; line-height: 1.72; color: rgba(255,255,255,0.38); max-width: 250px; margin-bottom: 1.5rem; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(196,165,88,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4); font-size: 0.9375rem;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-spring), border-color 0.2s;
}
.footer__social a:hover { background: var(--gold-600); color: var(--night-900); border-color: var(--gold-600); transform: translateY(-2px); }

.footer__col-title {
  font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 20px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(196,165,88,0.12);
}
.footer__links { list-style: none; }
.footer__links li { margin-bottom: 10px; }
.footer__links a { font-size: 0.875rem; color: rgba(255,255,255,0.4); transition: color 0.2s, padding-left 0.2s; }
.footer__links a:hover { color: var(--gold-400); padding-left: 4px; }

.footer__contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
.footer__contact-item i { color: var(--gold-600); font-size: 0.8125rem; margin-top: 3px; flex-shrink: 0; }
.footer__contact-item span { font-size: 0.875rem; color: rgba(255,255,255,0.4); line-height: 1.5; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06); padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer__copyright { font-size: 0.8125rem; color: rgba(255,255,255,0.25); }
.footer__copyright a { color: var(--gold-500); transition: color 0.2s; }
.footer__copyright a:hover { color: var(--gold-400); }
.footer__staff { font-size: 0.8125rem; color: rgba(255,255,255,0.18); transition: color 0.2s; }
.footer__staff:hover { color: rgba(255,255,255,0.4); }

@media (max-width: 991px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px)  { .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; text-align: center; } }

/* ============================================================
   19. SCROLL TOP & WHATSAPP
   ============================================================ */
.scroll-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  width: 44px; height: 44px;
  background: var(--gold-600); color: var(--night-900);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; box-shadow: var(--shadow-gold);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.scroll-top.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top:hover { background: var(--gold-500); color: var(--night-900); transform: translateY(-2px); }

.whatsapp-float {
  position: fixed; right: 20px; bottom: 72px; z-index: 998;
  width: 50px; height: 50px; background: #25D366; color: var(--white);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
}
.whatsapp-float:hover { color: var(--white); transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.55); }
.whatsapp-float.is-dragging { transition: none; cursor: grabbing; }

/* ============================================================
   20. PRELOADER
   ============================================================ */
.preloader-clinic {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--night-950);
  display: flex; align-items: center; justify-content: center;
}
.preloader-clinic::before {
  content: ''; width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid rgba(196,165,88,0.15);
  border-top-color: var(--gold-600);
  animation: spin 0.8s linear infinite;
}

/* ============================================================
   21. LIGHT-BACKGROUND SECTION OVERRIDE (Bootstrap compat)
   ============================================================ */
.light-background { --background-color: var(--cream-50); --surface-color: var(--white); }
.dark-background  { --background-color: var(--night-800); --default-color: rgba(255,255,255,0.82); --heading-color: var(--white); }

/* ============================================================
   22. AOS
   ============================================================ */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

/* ============================================================
   23. RTL
   ============================================================ */
[dir="rtl"] .hero__ornament-line { background: linear-gradient(to left, transparent, var(--gold-600), transparent); }
[dir="rtl"] .about__quote { border-left: none; border-right: 2px solid var(--gold-600); padding-left: 0; padding-right: 20px; }
[dir="rtl"] .about__badge { left: auto; right: -24px; }
[dir="rtl"] .footer__col-title::after { right: 0; left: auto; }

/* ============================================================
   24. SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
  height: 2px; background: transparent; pointer-events: none;
}
.scroll-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-600), var(--gold-600), var(--gold-400));
  width: 0%;
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(196,165,88,0.6);
}

/* ============================================================
   25. SECTION WAVE DIVIDERS
   ============================================================ */
.section-divider {
  position: relative; z-index: 2; line-height: 0; overflow: hidden;
  margin-top: -1px;
}
.section-divider svg { display: block; width: 100%; }

/* ============================================================
   26. AURORA / MESH GRADIENT BACKGROUNDS
   ============================================================ */
@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3%, 2%) scale(1.04); }
  66%  { transform: translate(-2%, 3%) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}
.aurora-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.aurora-bg__orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  animation: auroraDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}
.aurora-bg__orb--1 {
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(36,120,160,0.18) 0%, transparent 70%);
  top: -20%; left: -15%;
  animation-duration: 20s;
}
.aurora-bg__orb--2 {
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgba(196,165,88,0.14) 0%, transparent 70%);
  bottom: -15%; right: -10%;
  animation-duration: 25s; animation-delay: -8s;
}
.aurora-bg__orb--3 {
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, rgba(36,120,160,0.10) 0%, transparent 70%);
  top: 50%; left: 55%;
  animation-duration: 16s; animation-delay: -4s;
}

/* ============================================================
   27. GRADIENT TEXT UTILITY
   ============================================================ */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 50%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-blue {
  background: linear-gradient(135deg, var(--blue-300) 0%, var(--blue-500) 60%, var(--blue-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   28. SPARKLE EFFECT
   ============================================================ */
@keyframes sparklePop {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1) rotate(180deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}
.sparkle {
  position: absolute; pointer-events: none; z-index: 4;
  animation: sparklePop ease-in-out infinite;
}
.sparkle::before, .sparkle::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold-500);
}
.sparkle::before { width: 2px; height: 10px; border-radius: 1px; }
.sparkle::after  { width: 10px; height: 2px; border-radius: 1px; }
.sparkle-1 { width: 10px; height: 10px; top: 12%; left: 8%; animation-duration: 3.2s; animation-delay: 0s; }
.sparkle-2 { width: 8px; height: 8px; top: 30%; left: 90%; animation-duration: 4.1s; animation-delay: 1s; }
.sparkle-3 { width: 6px; height: 6px; top: 65%; left: 15%; animation-duration: 2.8s; animation-delay: 1.7s; }
.sparkle-4 { width: 10px; height: 10px; top: 80%; left: 72%; animation-duration: 3.6s; animation-delay: 0.5s; }
.sparkle-5 { width: 7px; height: 7px; top: 45%; left: 48%; animation-duration: 5s; animation-delay: 2.4s; }

/* ============================================================
   29. ENHANCED HERO: TYPED CURSOR & EYEBROW PULSE
   ============================================================ */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero__cursor {
  display: inline-block; width: 2px; height: 0.85em;
  background: var(--gold-400); margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,165,88,0); }
  50%       { box-shadow: 0 0 0 4px rgba(196,165,88,0.12); }
}
.hero__eyebrow-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(196,165,88,0.09);
  border: 1px solid rgba(196,165,88,0.25);
  border-radius: var(--radius-full);
  padding: 5px 14px 5px 10px;
  animation: eyebrowPulse 3s ease-in-out infinite;
}

/* ============================================================
   30. MAGNETIC BUTTON GLOW ON HOVER
   ============================================================ */
.btn-gold, .btn-blue {
  position: relative; overflow: hidden;
}
.btn-gold::before, .btn-blue::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.22) 0%, transparent 65%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none; border-radius: inherit;
}
.btn-gold:hover::before, .btn-blue:hover::before { opacity: 1; }

/* ============================================================
   31. 3D TILT CARD EFFECT (Service Cards)
   ============================================================ */
.service-card {
  transform-style: preserve-3d;
  perspective: 900px;
  will-change: transform;
}
/* Shimmer sweep on service card */
.service-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}
.service-card:hover::after { transform: translateX(100%); }

/* ============================================================
   32. ANIMATED BORDER GRADIENT (Hero + CTA)
   ============================================================ */
@keyframes borderRotate {
  to { --border-angle: 360deg; }
}
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hero__credential {
  background:
    linear-gradient(var(--night-800), var(--night-800)) padding-box,
    conic-gradient(from var(--border-angle, 0deg), rgba(196,165,88,0.1), rgba(196,165,88,0.45), rgba(36,120,160,0.3), rgba(196,165,88,0.1)) border-box;
  border: 1px solid transparent;
  animation: borderRotate 6s linear infinite;
}

/* ============================================================
   33. GLASS CARD TESTIMONIALS (enhanced)
   ============================================================ */
.testi-card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.testi-card:hover {
  background: rgba(255,255,255,0.98);
}

/* ============================================================
   34. FLOATING LABEL INPUTS
   ============================================================ */
.form-floating-group {
  position: relative;
  margin-bottom: 16px;
}
.form-floating-group .form-control { padding-top: 22px; padding-bottom: 10px; }
.form-floating-group label {
  position: absolute; top: 14px; left: 18px;
  font-size: 0.875rem; color: rgba(255,255,255,0.35);
  pointer-events: none;
  transition: top 0.22s var(--ease-out), font-size 0.22s var(--ease-out), color 0.22s;
}
.form-floating-group .form-control:focus ~ label,
.form-floating-group .form-control:not(:placeholder-shown) ~ label {
  top: 6px; font-size: 0.65rem; color: var(--gold-500); letter-spacing: 0.06em;
}
[dir="rtl"] .form-floating-group label { left: auto; right: 18px; }

/* ============================================================
   35. ABOUT SECTION: STAT CHIPS
   ============================================================ */
.about__stat-chips {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem;
}
.about__stat-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--white);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.25s, transform 0.25s var(--ease-out);
}
.about__stat-chip:hover { box-shadow: 0 8px 28px rgba(196,165,88,0.14); transform: translateY(-2px); }
.about__stat-chip-num {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--blue-700); line-height: 1;
}
.about__stat-chip-label { font-size: 0.75rem; color: rgba(13,27,46,0.55); text-transform: uppercase; letter-spacing: 0.08em; }

/* ============================================================
   36. JOURNEY: ACTIVE STEP GLOW
   ============================================================ */
.journey__step[data-active] .journey__step-dot {
  background: var(--gold-600); color: var(--night-900);
  box-shadow: 0 0 0 8px rgba(196,165,88,0.15), var(--glow-gold);
}

/* ============================================================
   37. SECTION KICKER CHIP (reusable)
   ============================================================ */
.section-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(196,165,88,0.08);
  border: 1px solid rgba(196,165,88,0.2);
  border-radius: var(--radius-full);
  padding: 4px 14px 4px 10px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 1rem;
}
.section-kicker i { font-size: 0.8rem; }
.section-kicker--blue {
  background: rgba(36,120,160,0.08);
  border-color: rgba(36,120,160,0.2);
  color: var(--blue-400);
}

/* ============================================================
   38. TRUST STRIP: ANIMATED ORBS
   ============================================================ */
@keyframes countPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.trust-strip__num { display: inline-block; }
.trust-strip__num.is-counting { animation: countPulse 0.4s var(--ease-spring); }

/* ============================================================
   39. CONTACT FORM: ENHANCED SUBMIT RIPPLE
   ============================================================ */
@keyframes ripple {
  to { transform: scale(3.5); opacity: 0; }
}
.contact__submit { position: relative; overflow: hidden; }
.contact__submit-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0); animation: ripple 0.55s linear;
  pointer-events: none;
}

/* ============================================================
   40. CTA BANNER: ANIMATED STARS
   ============================================================ */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.9); }
  50%       { opacity: 0.8; transform: scale(1.1); }
}
.cta-star {
  position: absolute; border-radius: 50%;
  background: var(--gold-400); pointer-events: none;
  animation: twinkle ease-in-out infinite;
}
.cta-star:nth-child(1) { width: 3px; height: 3px; top: 15%; left: 10%; animation-duration: 2.4s; }
.cta-star:nth-child(2) { width: 2px; height: 2px; top: 25%; right: 18%; animation-duration: 3.1s; animation-delay: 0.8s; }
.cta-star:nth-child(3) { width: 4px; height: 4px; bottom: 20%; left: 22%; animation-duration: 2.8s; animation-delay: 1.5s; }
.cta-star:nth-child(4) { width: 2px; height: 2px; bottom: 30%; right: 30%; animation-duration: 3.6s; animation-delay: 0.4s; }
.cta-star:nth-child(5) { width: 3px; height: 3px; top: 60%; left: 55%; animation-duration: 4s; animation-delay: 2s; }
.cta-banner { position: relative; }

/* ============================================================
   41. SCROLL-TRIGGERED COUNTER (trust strip)
   ============================================================ */
.trust-strip__num[data-count] { cursor: default; }

/* ============================================================
   42. MOBILE NAV: GLASS PANEL
   ============================================================ */
@media (max-width: 1199px) {
  .navmenu ul {
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    background: rgba(7,16,28,0.96);
    border-color: rgba(196,165,88,0.18);
    animation: navSlide 0.22s var(--ease-out);
  }
  @keyframes navSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   43. HERO: AMBIENT NOISE TEXTURE OVERLAY
   ============================================================ */
.hero__panel--left::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 20% 40%, rgba(36,120,160,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 60% 70%, rgba(196,165,88,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 120% 50% at 0% 100%, rgba(13,27,46,0.95) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ============================================================
   44. BENEFITS: ICON HOVER ROTATE
   ============================================================ */
.benefit-item__icon {
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.4s var(--ease-spring);
}
.benefit-item:hover .benefit-item__icon { transform: rotate(12deg) scale(1.08); }

/* ============================================================
   45. FOOTER: TOP GRADIENT BORDER
   ============================================================ */
.footer {
  position: relative;
}
.footer::before {
  content: '';
  position: absolute; top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(196,165,88,0.25), rgba(36,120,160,0.2), rgba(196,165,88,0.25), transparent);
}

/* ============================================================
   46. SECTION HIGHLIGHT WORD
   ============================================================ */
.highlight-word {
  position: relative; display: inline-block; white-space: nowrap;
}
.highlight-word::after {
  content: '';
  position: absolute; bottom: 4px; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, rgba(196,165,88,0.35), rgba(196,165,88,0.15));
  border-radius: 2px; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.aos-animate .highlight-word::after { transform: scaleX(1); }

/* ============================================================
   47. SCROLL-SNAPPING HINT (subtle bottom bar)
   ============================================================ */
.section-progress-dots {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  z-index: 900; display: flex; flex-direction: column; gap: 8px;
}
.section-progress-dots__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(196,165,88,0.25);
  border: 1px solid rgba(196,165,88,0.4);
  cursor: pointer; transition: all 0.3s var(--ease-spring);
}
.section-progress-dots__dot.active {
  background: var(--gold-500); width: 8px; height: 8px;
  box-shadow: 0 0 8px rgba(196,165,88,0.5);
}
@media (max-width: 991px) { .section-progress-dots { display: none; } }

/* ============================================================
   48. TOOLTIP ON CREDENTIALS
   ============================================================ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--night-800); color: rgba(255,255,255,0.88);
  font-size: 0.7rem; font-weight: 500; white-space: nowrap;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid rgba(196,165,88,0.2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateX(-50%) translateY(4px);
  z-index: 10;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   49. HERO VIDEO / CANVAS BACKGROUND (placeholder)
   ============================================================ */
.hero__bg-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.35;
}

/* ============================================================
   50. ENHANCED PRELOADER
   ============================================================ */
@keyframes preloaderFade { to { opacity: 0; pointer-events: none; visibility: hidden; } }
.preloader-clinic {
  flex-direction: column; gap: 24px;
}
.preloader-clinic::before {
  width: 64px; height: 64px;
  border-width: 2.5px;
  border-color: rgba(196,165,88,0.12);
  border-top-color: var(--gold-500);
}
.preloader-clinic::after {
  content: 'Auzaene';
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(196,165,88,0.45);
}

/* ============================================================
   51. SERVICE CARD: FEATURED VARIANT
   ============================================================ */
.service-card--featured {
  background: linear-gradient(145deg, rgba(36,120,160,0.12), rgba(196,165,88,0.06));
  border-color: rgba(196,165,88,0.22);
}
.service-card--featured .service-card__icon {
  background: linear-gradient(135deg, rgba(196,165,88,0.2), rgba(196,165,88,0.08));
  border-color: rgba(196,165,88,0.3);
}
.service-card--featured .service-card__icon i { color: var(--gold-400); }

/* ============================================================
   52. WHY CARD: NUMBERED STEP BADGE
   ============================================================ */
.why__card-step {
  position: absolute; top: -12px; left: 24px;
  font-family: var(--font-display); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--gold-600); color: var(--night-900);
  padding: 3px 8px; border-radius: var(--radius-full);
}

/* ============================================================
   53. HERO SCROLL PARALLAX HINT
   ============================================================ */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.hero__float-hint {
  animation: floatY 3s ease-in-out infinite;
}

/* ============================================================
   54. ABOUT: SKILL BARS
   ============================================================ */
.about__skill-bars { margin-top: 1.5rem; }
.about__skill-bar {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px;
}
.about__skill-bar-header {
  display: flex; justify-content: space-between;
  font-size: 0.8rem; font-weight: 600; color: rgba(13,27,46,0.7);
}
.about__skill-track {
  height: 5px; background: var(--cream-200); border-radius: var(--radius-full); overflow: hidden;
}
.about__skill-fill {
  height: 100%; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--blue-700), var(--gold-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-out);
}
.aos-animate .about__skill-fill { transform: scaleX(1); }

/* ============================================================
   55. MOOD GALLERY: PARALLAX OVERLAY LABEL
   ============================================================ */
.mood-gallery__panel::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, transparent 50%, rgba(3,6,9,0.5) 85%, rgba(3,6,9,0.9) 100%);
  pointer-events: none;
}

/* ============================================================
   56. GLOBAL: FOCUS STYLES FOR ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   57. ANIMATED SECTION HEADINGS (underline draw)
   ============================================================ */
.section-heading .u-draw {
  position: relative; display: inline;
}
.section-heading .u-draw::after {
  content: '';
  position: absolute; left: 0; bottom: -3px; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out) 0.3s;
  border-radius: 1px;
}
.aos-animate .section-heading .u-draw::after { transform: scaleX(1); }

/* ============================================================
   58. WELLNESS REFINEMENT PASS
   Softer public mood without changing structure or logic
   ============================================================ */
:root {
  --night-950: #223734;
  --night-900: #2d4743;
  --night-800: #3f605b;
  --night-700: #5f7f79;
  --night-600: #7f9f99;

  --blue-800: #2d7c87;
  --blue-700: #3a9098;
  --blue-600: #52a8ad;
  --blue-500: #76c0c3;
  --blue-400: #98d4d3;
  --blue-300: #bee8e2;
  --blue-200: #dff3ef;
  --blue-100: #effaf7;
  --blue-50: #f6fcfb;

  --gold-800: #ad8b58;
  --gold-700: #c29e67;
  --gold-600: #d5b47d;
  --gold-500: #e3c790;
  --gold-400: #eedaa9;
  --gold-300: #f6e9c7;
  --gold-200: #fbf3de;
  --gold-100: #fdf9ee;
  --gold-50: #fffdf7;

  --cream-900: #4b534d;
  --cream-500: #aa9e86;
  --cream-200: #e7dece;
  --cream-100: #f4eee3;
  --cream-50: #faf7f1;

  --color-bg: #f8f4ec;
  --color-surface: rgba(255,255,255,0.74);
  --color-text: #536461;
  --color-text-muted: rgba(83,100,97,0.68);
  --color-heading: #2e4340;
  --color-primary: #6aaeb1;
  --color-accent: #d5b47d;
  --color-accent-lt: #eedaa9;

  --shadow-gold: 0 18px 45px rgba(213, 180, 125, 0.22);
  --shadow-blue: 0 18px 45px rgba(82, 168, 173, 0.18);
  --shadow-dark: 0 26px 55px rgba(60, 82, 79, 0.16);
  --glow-gold: 0 0 40px rgba(213, 180, 125, 0.18), 0 0 80px rgba(213, 180, 125, 0.08);
  --glow-blue: 0 0 40px rgba(82, 168, 173, 0.18), 0 0 80px rgba(82, 168, 173, 0.08);

  --nav-color: rgba(46,67,64,0.82);
  --nav-hover-color: var(--night-800);
  --nav-mobile-background-color: rgba(249,245,237,0.96);
  --nav-dropdown-background-color: rgba(250,247,241,0.98);
  --nav-dropdown-color: rgba(46,67,64,0.78);
  --nav-dropdown-hover-color: var(--night-800);
}

body {
  color: var(--color-text);
  background:
    radial-gradient(circle at top left, rgba(190,232,226,0.38) 0%, transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(238,218,169,0.24) 0%, transparent 24%),
    linear-gradient(180deg, #fbf8f2 0%, #f7f2e8 48%, #fbf9f4 100%);
}

a { color: var(--night-800); }
a:hover { color: var(--blue-700); }

.header {
  background: linear-gradient(180deg, rgba(252,249,243,0.72) 0%, rgba(252,249,243,0.28) 100%);
}

.header.scrolled {
  background: rgba(251,247,240,0.88);
  border-bottom-color: rgba(213,180,125,0.24);
  box-shadow: 0 12px 38px rgba(97,127,121,0.10);
}

/* Transparent logo — no filter needed on light header */
.logo-custom {
  width: auto;
  height: clamp(36px, 4vw, 48px);
  max-width: clamp(120px, 14vw, 168px);
  object-fit: contain;
  filter: none;
  background: transparent;
}

.lang-switch {
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(213,180,125,0.18);
  box-shadow: 0 8px 22px rgba(95,127,121,0.08);
}

.lang-switch__btn {
  color: rgba(46,67,64,0.62);
}

.lang-switch__btn[aria-pressed="true"], .lang-switch__btn:hover {
  background: linear-gradient(135deg, rgba(213,180,125,0.95), rgba(238,218,169,0.95));
  color: var(--night-950);
}

.nav-book-pill,
.btn-gold,
.contact__submit,
.sd-cta__btn {
  background: linear-gradient(135deg, #d8bb8b 0%, #edd8ac 48%, #f7ebcb 100%);
  color: var(--night-950) !important;
  box-shadow: 0 16px 36px rgba(213,180,125,0.24);
}

.nav-book-pill:hover,
.btn-gold:hover,
.contact__submit:hover,
.sd-cta__btn:hover {
  box-shadow: 0 18px 42px rgba(213,180,125,0.30) !important;
}

.btn-outline-gold {
  background: rgba(255,255,255,0.52);
  color: var(--night-900);
  border-color: rgba(95,127,121,0.22);
  box-shadow: 0 10px 28px rgba(95,127,121,0.08);
}

.btn-outline-gold:hover {
  background: rgba(255,255,255,0.82);
  color: var(--night-800);
  border-color: rgba(106,174,177,0.38);
}

.hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(190,232,226,0.46) 0%, transparent 26%),
    radial-gradient(circle at 72% 14%, rgba(238,218,169,0.32) 0%, transparent 20%),
    linear-gradient(145deg, #f9f5ee 0%, #f3efe4 46%, #edf7f4 100%);
}

.hero__panel--left::before {
  background:
    radial-gradient(ellipse 92% 70% at 18% 38%, rgba(152,212,211,0.42) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 65% 74%, rgba(238,218,169,0.24) 0%, transparent 56%),
    radial-gradient(ellipse 120% 58% at 0% 100%, rgba(255,255,255,0.84) 0%, transparent 74%);
}

.hero__panel--left::after {
  background: radial-gradient(ellipse 42% 32% at 28% 34%, rgba(255,255,255,0.48) 0%, transparent 70%);
}

.hero__watermark {
  color: rgba(95,127,121,0.10);
}

@keyframes logoBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}

.hero__sun {
  width: clamp(224px, 27vw, 360px);
  height: clamp(112px, 13vw, 174px);
  margin-bottom: 2.1rem;
  padding: 18px 24px;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(47,71,69,0.96) 0%, rgba(79,112,107,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 24px 54px rgba(63,96,91,0.20),
    0 0 0 1px rgba(238,218,169,0.08) inset;
  animation: logoBreath 7s ease-in-out infinite;
}

.hero__sun::before {
  inset: -14px;
  border: none;
  background: radial-gradient(circle, rgba(152,212,211,0.20) 0%, rgba(152,212,211,0.08) 44%, transparent 72%);
  box-shadow: none;
  animation: heroGlow 8s ease-in-out infinite alternate;
}

.hero__sun::after {
  inset: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 26px;
  animation: none;
}

.hero__sun-logo {
  padding: 0;
  object-fit: contain;
  border-radius: 22px;
  mix-blend-mode: screen;
  filter: brightness(1.14) contrast(1.06) saturate(1.04);
}

.hero__rays { display: none; }

.hero__eyebrow,
.section-eyebrow,
.cta-banner__eyebrow,
.page-title__eyebrow,
.sd-steps-head__label {
  color: var(--night-700);
}

.hero__eyebrow::before,
.section-eyebrow::before,
.section-eyebrow::after,
.editorial-quote__cite::before,
.editorial-quote__cite::after {
  background: rgba(95,127,121,0.42);
}

.hero__title,
.section-heading--light,
.cta-banner__heading,
.contact__info-heading,
.journey__step-title,
.faq__question,
.page-title h1,
.sd-display,
.sd-h3,
.sd-step__title,
.sd-card__title,
.sd-cta__title,
.hero__credential-title {
  color: var(--night-950);
}

.hero__title-line:nth-child(2) {
  color: #bc9a63;
}

.hero__lead,
.section-sub,
.hero__stat-label,
.hero__scroll,
.page-title__lead,
.sd-intro__text,
.sd-prose,
.sd-step__text,
.sd-card__text,
.sd-cta__text,
.faq__answer,
.contact__info-sub,
.cta-banner__sub {
  color: rgba(83,100,97,0.78);
}

.hero__stats {
  border-top-color: rgba(95,127,121,0.16);
}

.hero__stat-num {
  color: #c59f68;
}

.hero__stat-divider {
  background: rgba(95,127,121,0.18);
}

.hero__scroll-mouse {
  border-color: rgba(95,127,121,0.28);
}

.hero__scroll-mouse::after {
  background: var(--blue-700);
}

.hero__panel--right::before {
  background: linear-gradient(to right, rgba(248,244,236,0.96) 0%, rgba(248,244,236,0) 18%);
}

.hero__panel--right::after {
  background:
    linear-gradient(to right, rgba(248,244,236,0.92) 0%, rgba(248,244,236,0.36) 22%, transparent 56%),
    linear-gradient(to top, rgba(244,238,227,0.54) 0%, transparent 40%);
}

.hero__slider-progress {
  background: rgba(95,127,121,0.12);
}

.hero__slider-progress-bar {
  background: linear-gradient(90deg, var(--blue-600), var(--gold-600));
}

.hero__slider-counter,
.hero__slider-counter-cur {
  color: var(--night-800);
}

.hero__slider-dot {
  background: rgba(95,127,121,0.22);
}

.hero__slider-dot.is-active {
  background: var(--blue-600);
  border-color: rgba(82,168,173,0.35);
}

.hero__slider-btn {
  background: rgba(255,255,255,0.68);
  border-color: rgba(95,127,121,0.16);
  color: var(--night-800);
  box-shadow: 0 10px 24px rgba(95,127,121,0.10);
}

.hero__slider-btn:hover {
  background: rgba(255,255,255,0.88);
  border-color: rgba(82,168,173,0.28);
  color: var(--blue-700);
}

.hero__credential,
.hero__quote-card {
  background:
    linear-gradient(rgba(255,251,245,0.84), rgba(255,251,245,0.84)) padding-box,
    linear-gradient(135deg, rgba(82,168,173,0.24), rgba(213,180,125,0.32)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 35px rgba(95,127,121,0.12);
}

.hero__credential {
  animation: borderRotate 8s linear infinite;
}

.hero__credential-icon {
  background: linear-gradient(135deg, #95d1d0, #ead7ae);
  color: var(--night-950);
}

.hero__credential-sub,
.hero__quote-card p,
.hero__quote-card cite {
  color: rgba(46,67,64,0.78);
}

.section-sub--dark,
.about__body,
.why__card-body,
.testi-card__role,
.service-card__desc,
.journey__step-body,
.footer__brand-desc,
.footer__links a,
.footer__contact-item span,
.footer__copyright,
.footer__staff {
  color: rgba(83,100,97,0.76);
}

.editorial-quote,
.services,
.journey,
.benefits,
.faq,
.contact,
.cta-banner,
.page-title.page-title--service,
.sd-pro {
  background:
    radial-gradient(circle at top left, rgba(190,232,226,0.32) 0%, transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(238,218,169,0.22) 0%, transparent 18%),
    linear-gradient(180deg, #fbf9f4 0%, #f4efe5 100%);
}

.editorial-quote__mark {
  color: rgba(95,127,121,0.14);
}

.editorial-quote__text,
.about__quote,
.testi-card__text {
  color: var(--night-900);
}

.services::before,
.cta-banner__photo-bg {
  opacity: 0.10;
  filter: saturate(0.6) brightness(1.08);
}

.journey::before {
  background: linear-gradient(to bottom, transparent, rgba(95,127,121,0.28), transparent);
}

.service-card,
.benefit-item,
.why__card,
.testi-card,
.contact__form-wrap,
.sd-step,
.sd-card,
.sd-cta__inner,
.sd-media__frame,
.admin-soft-ignore {
  background: rgba(255,255,255,0.70);
  border-color: rgba(95,127,121,0.12);
  box-shadow: 0 20px 45px rgba(95,127,121,0.10);
}

.service-card:hover,
.benefit-item:hover,
.why__card:hover,
.testi-card:hover,
.sd-step:hover,
.sd-card:hover {
  border-color: rgba(106,174,177,0.26);
  box-shadow: 0 24px 50px rgba(95,127,121,0.12);
}

.service-card__title,
.why__card-title,
.testi-card__name,
.benefit-item__title,
.journey__step-dot,
.contact__info-item-val,
.footer__brand-name,
.footer__col-title,
.sd-pill,
.sd-quote blockquote,
.sd-quote figcaption {
  color: var(--night-900);
}

.service-card__icon,
.why__card-icon,
.benefit-item__icon,
.contact__info-item-icon,
.sd-card__icon,
.sd-media__tag {
  background: linear-gradient(135deg, rgba(190,232,226,0.72), rgba(252,249,243,0.94));
  border-color: rgba(106,174,177,0.20);
}

.service-card__icon i,
.why__card-icon i,
.benefit-item__icon i,
.contact__info-item-icon i,
.sd-card__icon i {
  color: var(--blue-700);
}

.service-card__num,
.journey__step-num,
.testi-card__quote {
  color: rgba(197,159,104,0.18);
}

.service-card__link,
.about__cred-tag,
.footer__copyright a,
.footer__contact-item i,
.sd-checks i,
.breadcrumbs a {
  color: var(--night-800);
}

.service-card:hover .service-card__link,
.footer__copyright a:hover,
.breadcrumbs a:hover {
  color: var(--blue-700);
}

.journey__step-dot {
  background: rgba(255,255,255,0.78);
  border-color: rgba(213,180,125,0.65);
  box-shadow: 0 10px 28px rgba(213,180,125,0.16);
}

.journey__step:hover .journey__step-dot,
.journey__step[data-active] .journey__step-dot {
  background: linear-gradient(135deg, #d8bb8b, #edd8ac);
  color: var(--night-950);
}

.journey__step-line {
  background: linear-gradient(to bottom, rgba(106,174,177,0.30), rgba(213,180,125,0.12));
}

.mood-gallery__panel::after,
.mood-gallery__panel::before {
  background:
    linear-gradient(to top, rgba(34,55,52,0.68) 0%, rgba(34,55,52,0.18) 48%, transparent 100%);
}

.mood-gallery__label-tag {
  color: var(--gold-300);
}

.faq__item {
  border-bottom-color: rgba(95,127,121,0.12);
}

.faq__question-icon {
  background: rgba(190,232,226,0.46);
  border-color: rgba(106,174,177,0.18);
}

.faq__question:hover,
.faq__item.is-open .faq__question {
  color: var(--blue-700);
}

.faq__item.is-open .faq__question-icon {
  background: linear-gradient(135deg, #95d1d0, #ead7ae);
  border-color: transparent;
}

.faq__item.is-open .faq__question-icon i {
  color: var(--night-950);
}

.contact__social a,
.footer__social a,
.scroll-top {
  background: rgba(255,255,255,0.74);
  border-color: rgba(95,127,121,0.14);
  color: var(--night-800);
}

.contact__social a:hover,
.footer__social a:hover,
.scroll-top:hover {
  background: linear-gradient(135deg, #95d1d0, #ead7ae);
  color: var(--night-950);
  border-color: transparent;
}

.form-control {
  color: var(--night-900);
  -webkit-text-fill-color: var(--night-900);
  background: rgba(255,255,255,0.82);
  border-color: rgba(95,127,121,0.14);
  caret-color: var(--night-800);
}

.form-control:focus {
  color: var(--night-950);
  -webkit-text-fill-color: var(--night-950);
  background: rgba(255,255,255,0.96);
  border-color: rgba(106,174,177,0.38);
  box-shadow: 0 0 0 3px rgba(106,174,177,0.12);
}

.form-control::placeholder,
.form-control::-webkit-input-placeholder {
  color: rgba(83,100,97,0.42);
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--night-950);
  box-shadow: 0 0 0 1000px rgba(255,252,247,0.98) inset;
}

.cta-banner::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(152,212,211,0.24) 0%, transparent 64%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(238,218,169,0.18) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(255,251,245,0.72) 0%, rgba(255,251,245,0.38) 50%, rgba(255,251,245,0.72) 100%);
}

.footer {
  background:
    radial-gradient(circle at 18% 0%, rgba(152,212,211,0.12) 0%, transparent 24%),
    linear-gradient(180deg, #f2efe6 0%, #e6efe9 100%);
  color: rgba(83,100,97,0.72);
}

.footer::before,
.footer__bottom {
  border-top-color: rgba(95,127,121,0.12);
}

.footer__brand-logo,
.footer-logo-small {
  mix-blend-mode: multiply;
  filter: brightness(1.02);
}

.scroll-progress__fill {
  background: linear-gradient(90deg, var(--blue-600), var(--gold-600), var(--blue-500));
  box-shadow: 0 0 12px rgba(106,174,177,0.34);
}

.whatsapp-float {
  box-shadow: 0 12px 28px rgba(37,211,102,0.24);
}

.preloader-clinic {
  background:
    radial-gradient(circle at top, rgba(190,232,226,0.38) 0%, transparent 28%),
    linear-gradient(180deg, #fbf9f4 0%, #f2ede3 100%);
}

.preloader-clinic::after {
  color: rgba(95,127,121,0.46);
}

.page-title.page-title--service,
.page-title.page-title--service .container {
  color: var(--night-900);
}

.page-title__glow {
  background: radial-gradient(circle, rgba(152,212,211,0.28) 0%, transparent 66%);
}

.breadcrumbs ol,
.breadcrumbs .current {
  color: rgba(83,100,97,0.78);
}

.sd-pill {
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(95,127,121,0.12);
}

.sd-checks li,
.sd-quote,
.sd-media__tag,
.sd-cta__copy {
  color: rgba(83,100,97,0.78);
}

.sd-media__img {
  border-radius: var(--radius-xl);
}

@media (max-width: 1199px) {
  .navmenu ul {
    background: rgba(250,247,241,0.96);
    border-color: rgba(95,127,121,0.14);
    box-shadow: 0 16px 38px rgba(95,127,121,0.12);
  }

  .navmenu ul li a:hover {
    background: rgba(190,232,226,0.34);
  }
}

@media (max-width: 900px) {
  .hero__panel--right::after {
    background: linear-gradient(to top, rgba(248,244,236,0.94) 0%, rgba(248,244,236,0.28) 40%, transparent 72%);
  }

  .hero__sun {
    width: min(100%, 310px);
    height: auto;
    aspect-ratio: 2.15 / 1;
    margin-inline: auto;
  }

  .hero__content,
  .hero__stats {
    text-align: center;
  }

  .hero__eyebrow,
  .hero__actions,
  .hero__ornament {
    justify-content: center;
  }

  .hero__lead {
    margin-inline: auto;
  }

  .hero__stats {
    justify-content: center;
  }
}

/* ============================================================
   59. STABILIZATION / QA PASS
   Layout-only fixes after visual refinement
   ============================================================ */
:root {
  --header-h: 78px;
}

main,
.main {
  padding-top: var(--header-h);
}

#hero,
.section,
.page-title {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

.header {
  padding: 0;
  min-height: var(--header-h);
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(95, 127, 121, 0.10);
}

.header.scrolled {
  padding: 0;
}

.header .container-fluid {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
}

.header .logo {
  flex: 0 0 auto;
  min-width: 0;
}

.logo-custom {
  width: auto;
  height: clamp(40px, 4.4vw, 52px);
  max-width: clamp(118px, 15vw, 176px);
  object-fit: contain;
  filter: none;
}

.header-toolbar {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  gap: 12px;
}

.navmenu {
  flex: 1 1 auto;
}

.navmenu ul {
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

.navmenu ul li a {
  padding: 8px 12px;
  font-size: 0.86rem;
}

.nav-book-pill {
  padding: 9px 16px;
  white-space: nowrap;
}

.lang-switch {
  flex: 0 0 auto;
  padding: 4px;
}

.lang-switch__btn {
  padding: 6px 10px;
  line-height: 1;
}

.hero {
  min-height: calc(100vh - var(--header-h));
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
  padding: 0 clamp(18px, 4vw, 42px) clamp(28px, 4vw, 40px);
  overflow: clip;
}

.hero__panel--left {
  padding: clamp(28px, 4vw, 56px) 0 clamp(18px, 3vw, 28px);
  justify-content: center;
}

.hero__panel--left::before,
.hero__panel--left::after {
  pointer-events: none;
}

.hero__watermark {
  opacity: 0.45;
  left: 0;
  bottom: 2%;
}

.hero__particles,
.sparkle {
  opacity: 0.45;
}

.hero__sun {
  width: min(100%, 330px);
  height: auto;
  aspect-ratio: 2037 / 1242;
  padding: 0;
  margin-bottom: 1.5rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}

.hero__sun::before,
.hero__sun::after,
.hero__rays,
.hero__slider-progress {
  display: none;
}

.hero__sun-logo {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: none;
}

.hero__content {
  max-width: 640px;
}

.hero__lead {
  max-width: 620px;
}

.hero__actions {
  gap: 14px;
}

.hero__stats {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
  gap: clamp(16px, 2vw, 28px);
}

.hero__panel--right {
  min-height: clamp(360px, 62vh, 720px);
  margin-top: clamp(14px, 2vw, 24px);
  border-radius: 28px;
  box-shadow: 0 20px 44px rgba(60, 82, 79, 0.14);
}

.hero__slider-chrome,
.hero__slider,
.hero__slide,
.hero__panel-img {
  border-radius: inherit;
}

.hero__panel--right::before,
.hero__panel--right::after {
  display: none;
}

.hero__panel-img {
  object-position: center center;
}

.hero__credential {
  top: 22px;
  right: 22px;
  max-width: 190px;
}

.hero__quote-card {
  right: 22px;
  bottom: 22px;
}

.service-card,
.benefit-item,
.why__card,
.testi-card,
.contact__form-wrap,
.sd-step,
.sd-card,
.sd-cta__inner {
  position: relative;
  isolation: isolate;
}

.service-card__title,
.service-card__desc,
.service-card__link,
.benefit-item__title,
.benefit-item__body,
.why__card-title,
.why__card-body,
.testi-card__text,
.testi-card__role,
.faq__question,
.faq__answer,
.contact__info-heading,
.contact__info-sub,
.contact__info-item-label,
.contact__info-item-val,
.sd-step__title,
.sd-step__text,
.sd-card__title,
.sd-card__text,
.sd-cta__title,
.sd-cta__text,
.page-title__lead,
.page-title__eyebrow,
.breadcrumbs ol,
.breadcrumbs .current,
.footer__brand-desc,
.footer__links a,
.footer__contact-item span {
  color: var(--night-900);
}

.service-card__icon,
.benefit-item__icon,
.why__card-icon,
.sd-card__icon {
  margin-bottom: 16px;
  flex-shrink: 0;
}

.benefit-item__icon {
  margin-inline: auto;
}

.benefit-item__icon i,
.service-card__icon i,
.why__card-icon i,
.sd-card__icon i,
.contact__info-item-icon i {
  color: var(--blue-700);
}

.benefits::before,
.hero__credential::before,
.hero__quote-card::before,
.mood-gallery__panel::before,
.mood-gallery__panel::after {
  pointer-events: none;
}

.footer__brand-logo,
.footer-logo-small {
  width: auto;
  height: clamp(46px, 5vw, 64px);
  max-width: 190px;
  mix-blend-mode: normal;
}

.footer-logo-small {
  margin-inline: auto;
}

[dir="rtl"] .header .container-fluid {
  flex-direction: row-reverse;
}

[dir="rtl"] .header-toolbar {
  margin-right: auto;
  margin-left: 0;
  justify-content: flex-start;
}

[dir="rtl"] .navmenu ul {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

[dir="rtl"] .hero {
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
}

[dir="rtl"] .hero__panel--left {
  text-align: right;
}

[dir="rtl"] .hero__content,
[dir="rtl"] .hero__lead {
  margin-left: auto;
  margin-right: 0;
}

[dir="rtl"] .hero__eyebrow,
[dir="rtl"] .hero__actions,
[dir="rtl"] .hero__ornament,
[dir="rtl"] .hero__stats {
  justify-content: flex-start;
}

[dir="rtl"] .hero__stat-item {
  align-items: flex-start;
}

[dir="rtl"] .hero__panel--right {
  margin-right: 0;
  margin-left: 0;
}

[dir="rtl"] .hero__credential {
  left: 22px;
  right: auto;
}

[dir="rtl"] .hero__quote-card {
  left: 22px;
  right: auto;
}

@media (max-width: 1199px) {
  :root {
    --header-h: 74px;
  }

  .header-toolbar {
    gap: 10px;
  }

  .navmenu {
    flex: 0 0 auto;
  }

  .navmenu ul {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 24px));
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  [dir="rtl"] .navmenu ul {
    left: 0;
    right: auto;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero__panel--right {
    order: 1;
    min-height: 340px;
    margin-top: 0;
  }

  .hero__panel--left {
    order: 2;
    padding-top: 10px;
  }

  [dir="rtl"] .hero__panel--left,
  [dir="rtl"] .hero__panel--right {
    order: unset;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 72px;
  }

  .hero {
    padding-inline: 14px;
    padding-bottom: 24px;
  }

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

  .hero__content,
  .hero__lead {
    margin-inline: auto;
  }

  .hero__eyebrow,
  .hero__actions,
  .hero__ornament,
  .hero__stats {
    justify-content: center;
  }

  .hero__stat-item {
    align-items: center;
  }

  .hero__watermark,
  .hero__particles,
  .sparkle,
  .hero__quote-card {
    display: none;
  }

  .hero__credential {
    position: static;
    margin-top: 16px;
    max-width: none;
  }
}

@media (max-width: 575px) {
  :root {
    --header-h: 68px;
  }

  .header .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
    gap: 10px;
  }

  .logo-custom {
    height: 36px;
    max-width: 132px;
  }

  .lang-switch__btn {
    padding: 6px 8px;
    font-size: 0.7rem;
  }

  .nav-book-pill {
    padding: 8px 12px;
    font-size: 0.76rem !important;
  }

  .hero__title {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  .whatsapp-float {
    width: 46px;
    height: 46px;
    right: 14px;
    bottom: 74px;
  }

  .scroll-top {
    right: 14px;
    bottom: 18px;
  }
}

/* ============================================================
   60. HERO LOGO ENHANCEMENT
   Subtle premium motion only
   ============================================================ */
@keyframes heroLogoReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes heroLogoFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-7px) scale(1.01);
  }
}

@keyframes heroLogoGlow {
  0%, 100% {
    opacity: 0.38;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.62;
    transform: scale(1.03);
  }
}

@keyframes heroLogoShimmer {
  0% {
    transform: translateX(-135%);
    opacity: 0;
  }
  18% {
    opacity: 0.18;
  }
  42% {
    opacity: 0.08;
  }
  100% {
    transform: translateX(135%);
    opacity: 0;
  }
}

.hero__sun {
  overflow: visible;
}

.hero__sun::before {
  content: "";
  display: block;
  position: absolute;
  inset: 6% 12%;
  z-index: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 50%, rgba(82, 168, 173, 0.16) 0%, transparent 44%),
    radial-gradient(circle at 70% 48%, rgba(213, 180, 125, 0.20) 0%, transparent 40%);
  filter: blur(24px);
  animation: heroLogoGlow 7.8s ease-in-out 1.2s infinite;
}

.hero__sun::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 24%, rgba(255,255,255,0.22) 46%, transparent 66%);
  mix-blend-mode: screen;
  animation: heroLogoShimmer 7.2s ease-in-out 2s infinite;
}

.hero__sun-logo {
  position: relative;
  z-index: 1;
  opacity: 0;
  animation:
    heroLogoReveal 1.05s var(--ease-out) 0.18s forwards,
    heroLogoFloat 6.8s ease-in-out 1.4s infinite;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hero__sun::before,
  .hero__sun::after,
  .hero__sun-logo {
    animation: none !important;
  }

  .hero__sun-logo {
    opacity: 1;
  }
}

/* ============================================================
   62. TIPS SECTION OVERRIDES
   ============================================================ */
.tips {
  background:
    radial-gradient(circle at top left, rgba(36,120,160,0.08), transparent 30%),
    linear-gradient(180deg, var(--cream-50) 0%, #f7f3ea 100%);
}

.tips__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
  margin-top: clamp(36px, 5vw, 64px);
}

.tip-visual {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(22px, 4vw, 42px);
  align-items: center;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: clamp(26px, 4vw, 38px);
  position: relative;
}

.tip-visual--light {
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(250,244,232,0.96));
  border: 1px solid rgba(196,165,88,0.16);
  box-shadow: 0 18px 50px rgba(13,27,46,0.06);
}

.tip-visual--dark {
  background:
    radial-gradient(circle at top right, rgba(36,120,160,0.18), transparent 35%),
    linear-gradient(145deg, var(--night-800), var(--night-900));
  border: 1px solid rgba(196,165,88,0.12);
  box-shadow: 0 24px 60px rgba(3,6,9,0.22);
}

.tip-visual__copy {
  position: relative;
  z-index: 2;
}

.tip-visual__label {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(196,165,88,0.12);
  border: 1px solid rgba(196,165,88,0.2);
  color: var(--gold-700);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.tip-visual--dark .tip-visual__label {
  color: var(--gold-400);
  background: rgba(196,165,88,0.08);
}

.tip-visual__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  color: var(--night-800);
  margin-bottom: 0.9rem;
}

.tip-visual--dark .tip-visual__title {
  color: var(--white);
}

.tip-visual__body {
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(13,27,46,0.68);
  max-width: 460px;
}

.tip-visual--dark .tip-visual__body {
  color: rgba(255,255,255,0.68);
}

.tip-visual__scene {
  position: relative;
  min-height: clamp(240px, 32vw, 340px);
  border-radius: calc(var(--radius-xl) - 10px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tip-visual__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.06), transparent 48%),
    linear-gradient(to top, rgba(7,16,28,0.08), rgba(7,16,28,0.2));
  pointer-events: none;
}

.tip-visual__glow {
  position: absolute;
  width: 62%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,165,88,0.22) 0%, rgba(36,120,160,0.08) 45%, transparent 72%);
  filter: blur(24px);
  animation: auroraDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

.tip-visual__image {
  position: relative;
  z-index: 1;
  width: min(78%, 360px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(3,6,9,0.22);
  border: 1px solid rgba(255,255,255,0.38);
}

/* Tip media column: stacks scene above bubbles */
.tip-visual__media {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Bubbles container: clean vertical list */
.tip-visual__bubbles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.tip-bubble {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 100%;
  padding: 11px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(196,165,88,0.18);
  box-shadow: 0 8px 24px rgba(13,27,46,0.10);
  color: var(--night-800);
  font-size: 0.82rem;
  line-height: 1.55;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: tipsFloat 6s ease-in-out infinite;
}

.tip-visual__bubbles .tip-bubble:nth-child(1) { animation-delay: 0s; }
.tip-visual__bubbles .tip-bubble:nth-child(2) { animation-delay: 0.8s; }
.tip-visual__bubbles .tip-bubble:nth-child(3) { animation-delay: 1.6s; }
.tip-visual__bubbles .tip-bubble:nth-child(4) { animation-delay: 2.4s; }
.tip-visual__bubbles .tip-bubble:nth-child(5) { animation-delay: 3.2s; }

.tip-visual--dark .tip-bubble {
  background: rgba(12,27,46,0.82);
  color: rgba(255,255,255,0.88);
  border-color: rgba(196,165,88,0.14);
}

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

@media (max-width: 991px) {
  .tip-visual {
    grid-template-columns: 1fr;
  }

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

  .tip-visual__body {
    max-width: none;
  }

  .tip-visual__scene {
    min-height: 280px;
  }
}

@media (max-width: 767px) {
  .tip-visual {
    padding: 22px 18px;
  }

  .tip-visual__scene {
    min-height: 260px;
    padding: 14px;
  }

  .tip-visual__image {
    width: min(72%, 240px);
    aspect-ratio: 1 / 1.2;
  }

  .tip-bubble {
    font-size: 0.78rem;
    padding: 9px 14px;
    border-radius: 16px;
  }
}

[dir="rtl"] .tip-visual__copy {
  text-align: right;
}

[dir="rtl"] .tip-bubble--a { right: 8%; left: auto; }
[dir="rtl"] .tip-bubble--b { left: 6%; right: auto; }
[dir="rtl"] .tip-bubble--c { right: 14%; left: auto; }
[dir="rtl"] .tip-bubble--d { right: 9%; left: auto; }
[dir="rtl"] .tip-bubble--e { left: 10%; right: auto; }
[dir="rtl"] .tip-bubble--f { left: 4%; right: auto; }
[dir="rtl"] .tip-bubble--g { right: 6%; left: auto; }
[dir="rtl"] .tip-bubble--h { left: 14%; right: auto; }

/* ============================================================
   63. FULL POLISH & QA FIXES
   ============================================================ */

/* ── Mood gallery: restore ::before as gold accent line, ::after as overlay ── */
.mood-gallery__panel::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(34,55,52,0.80) 0%, rgba(34,55,52,0.28) 45%, transparent 80%);
  pointer-events: none;
}
.mood-gallery__panel::before {
  content: '';
  position: absolute; left: 0; top: 15%; bottom: 15%; width: 2.5px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--gold-500), transparent);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  inset-inline-start: 0;
}
.mood-gallery__panel:hover::before { opacity: 1; }

/* ── Mood gallery: panel hover lift ── */
.mood-gallery__panel {
  transition: box-shadow 0.4s var(--ease-out);
}
.mood-gallery__panel:hover {
  box-shadow: inset 0 0 0 1.5px rgba(196,165,88,0.35);
}

/* ── Mood gallery label z-index above both pseudo-elements ── */
.mood-gallery__label {
  z-index: 5;
}
.mood-gallery__num {
  z-index: 5;
}

/* ── CTA banner: ensure photo-bg shows on light theme ── */
.cta-banner__photo-bg {
  opacity: 0.28;
  filter: saturate(0.55) brightness(0.60);
}

/* ── Tips: tip-photo-frame subtle inner shadow for depth ── */
.tip-photo-frame::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(196,165,88,0.20),
              inset 0 -40px 60px rgba(3,6,9,0.12);
}

/* ── Service cards: lift on hover ── */
.service-card {
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out), border-color 0.32s;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(95,127,121,0.14);
}

/* ── Journey step number: ghost behind title ── */
.journey__step-num {
  position: relative;
  z-index: 0;
}

/* ── Benefit items: subtle gold top border on hover ── */
.benefit-item {
  border-top: 2px solid transparent;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.benefit-item:hover {
  border-top-color: var(--gold-500);
  transform: translateY(-3px);
}

/* ── Contact form: smoother focus ring ── */
.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(82,168,173,0.16), 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Scroll-top button: appear only after 400px scroll ── */
.scroll-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease-out), background 0.25s;
  transform: translateY(8px);
}
.scroll-top.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Trust strip: stronger number weight ── */
.trust-strip__num {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Hero quote card: clamp font size ── */
.hero__quote-card p {
  font-size: clamp(0.8rem, 1.1vw, 0.9375rem);
  line-height: 1.6;
}

/* ── About section: image aspect ratio consistent ── */
.about__img-wrap img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}

/* ── Gallery images: proper object-fit cover ── */
.mood-gallery__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Photo 1 (bars session): focus upper area of image */
.mood-gallery__panel:nth-child(2) img {
  object-position: center 25%;
}

/* Photo 3 (meditation/energy): focus upper-center */
.mood-gallery__panel:nth-child(3) img {
  object-position: center 20%;
}

/* ── Tip scenes: correct object-position for energy photo ── */
.tip-visual:first-child .tip-photo-frame img {
  object-position: center 15%;
}

/* ── WhatsApp float: consistent z-index ── */
.whatsapp-float {
  z-index: 999;
}

/* ── Footer year: auto-updated via JS, suppress placeholder ── */
#footer-year {
  font-variant-numeric: tabular-nums;
}

/* ── Preloader: fade out smoothly ── */
#preloader {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Mobile nav: prevent overflow on small screens ── */
@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hero__actions .btn-gold,
  .hero__actions .btn-outline-gold {
    width: 100%;
    justify-content: center;
  }
  .mood-gallery__panel { aspect-ratio: 4/3; }
  .tip-visual { border-radius: var(--radius-lg); }
}

/* ── Reduced-motion: disable gallery hover transforms ── */
@media (prefers-reduced-motion: reduce) {
  .mood-gallery__panel img,
  .tip-photo-frame img,
  .service-card,
  .benefit-item {
    transition: none !important;
    transform: none !important;
  }
}

/* ── RTL: tip photo position for Arabic layout ── */
[dir="rtl"] .tip-photo-frame {
  border-radius: 28px;
}

/* ── Print: hide decorative elements ── */
@media print {
  .scroll-progress,
  .section-progress-dots,
  .whatsapp-float,
  .cursor-dot,
  .cursor-ring,
  #scroll-top,
  .hero__particles,
  .sparkle,
  .cta-star {
    display: none !important;
  }
  body { background: white !important; color: #111 !important; }
}

/* ============================================================
   64. PRO HERO SLIDER OVERHAUL
   ============================================================ */

/* ── Slide crossfade upgrade — smoother, longer ── */
.hero__slide {
  transition: opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* ── Ken Burns: each slide has a unique direction ── */
@keyframes kbZoomInLeft {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.09) translate(-2%, -1%); }
}
@keyframes kbZoomInRight {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.09) translate(2%, -1.5%); }
}
@keyframes kbZoomOut {
  0%   { transform: scale(1.09) translate(0, 0); }
  100% { transform: scale(1)    translate(0, 1%); }
}

.hero__panel-img {
  transition: none;
  transform-origin: center center;
}
.hero__slide:nth-child(1).is-active .hero__panel-img {
  animation: kbZoomInLeft 7s ease-out forwards;
}
.hero__slide:nth-child(2).is-active .hero__panel-img {
  animation: kbZoomInRight 7s ease-out forwards;
}
.hero__slide:nth-child(3).is-active .hero__panel-img {
  animation: kbZoomOut 7s ease-out forwards;
}

/* ── Dramatic layered overlay on right panel ── */
.hero__panel--right::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right,  rgba(248,244,236,0.94) 0%,  rgba(248,244,236,0.38) 22%, transparent 52%),
    linear-gradient(to top,    rgba(244,238,227,0.60) 0%,  transparent 42%),
    linear-gradient(to bottom, rgba(244,238,227,0.28) 0%,  transparent 32%);
}

/* ── Vignette overlay on each slide ── */
.hero__slide::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 140% 120% at 50% 50%, transparent 44%, rgba(34,55,52,0.26) 100%);
}

/* ── PRO Counter — bigger, editorial ── */
.hero__slider-counter {
  top: auto;
  bottom: clamp(60px, 9vh, 88px);
  left: clamp(22px, 4vw, 44px);
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}
.hero__slider-counter-cur {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: rgba(255,255,255,0.90);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__slider-counter-sep {
  display: none;
}
.hero__slider-counter-tot {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.38);
  margin-top: 3px;
}
.hero__slider-counter-tot::before {
  content: '— ';
  color: rgba(196,165,88,0.55);
}

/* ── PRO Dots — thin pills ── */
.hero__slider-dots {
  bottom: clamp(22px, 3vh, 32px);
  left: clamp(22px, 4vw, 44px);
  transform: none;
  gap: 6px;
}
.hero__slider-dot {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.4s var(--ease-out), background 0.3s;
}
.hero__slider-dot.is-active {
  width: 40px;
  background: var(--gold-500);
  transform: none;
  border-color: transparent;
}
.hero__slider-dot:hover:not(.is-active) {
  background: rgba(255,255,255,0.55);
  width: 28px;
}

/* ── Progress bar — thicker, golden ── */
.hero__slider-progress {
  height: 2px;
  background: rgba(255,255,255,0.06);
  z-index: 9;
}
.hero__slider-progress-bar {
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--blue-400));
  box-shadow: 0 0 8px rgba(196,165,88,0.45);
}

/* ── Prev/Next buttons — always visible, refined ── */
.hero__slider-btn {
  opacity: 1;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(196,165,88,0.18);
  box-shadow: 0 8px 24px rgba(34,55,52,0.12);
  color: var(--night-800);
  font-size: 1rem;
  transition: transform 0.2s var(--ease-spring), background 0.2s, box-shadow 0.2s;
}
.hero__slider-btn:hover {
  background: rgba(255,255,255,0.92);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 12px 32px rgba(34,55,52,0.18);
  color: var(--blue-700);
}
.hero__slider-btn--prev { left: 18px; }
.hero__slider-btn--next { right: 18px; }
.hero__slider-chrome:hover .hero__slider-btn { opacity: 1; }

/* ── Slide caption overlay (bottom-right creative tag) ── */
.hero__slide-caption {
  position: absolute;
  bottom: clamp(50px, 7vh, 72px);
  right: clamp(18px, 3vw, 36px);
  z-index: 6;
  text-align: right;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s 0.4s var(--ease-out), transform 0.8s 0.4s var(--ease-out);
  pointer-events: none;
}
.hero__slide.is-active .hero__slide-caption {
  opacity: 1;
  transform: translateY(0);
}
.hero__slide-caption-line {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero__slide-caption-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  background: rgba(196,165,88,0.18);
  border: 1px solid rgba(196,165,88,0.32);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-300);
  backdrop-filter: blur(8px);
}

/* ── Credential + quote cards — refined positioning ── */
.hero__credential {
  bottom: clamp(100px, 14vh, 140px);
  right: clamp(14px, 2.5vw, 28px);
  max-width: 200px;
}
.hero__quote-card {
  top: clamp(90px, 12vh, 120px);
  right: clamp(14px, 2.5vw, 28px);
  max-width: 220px;
}

/* ============================================================
   65. FULL RESPONSIVE OVERHAUL — No broken sizes
   ============================================================ */

/* ── Prevent horizontal overflow globally ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after {
  max-width: 100%;
}

/* ── Trust strip: 2×2 on mobile ── */
@media (max-width: 575px) {
  .trust-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .trust-strip__item {
    padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 20px);
  }
  .trust-strip__num {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }
}

/* ── Mood gallery: 2×2 always, 1-col on very small ── */
@media (max-width: 575px) {
  .mood-gallery__grid {
    grid-template-columns: 1fr;
  }
  .mood-gallery__panel {
    aspect-ratio: 4/3;
  }
}

/* ── Services grid: 1-col on very small screens ── */
@media (max-width: 480px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Benefits grid: 2-col tablet, 1-col mobile ── */
@media (max-width: 575px) {
  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ── Footer grid: responsive columns ── */
@media (max-width: 991px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 40px);
  }
}
@media (max-width: 575px) {
  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__social {
    justify-content: center;
  }
  .footer__contact-item {
    justify-content: center;
  }
  .footer__links {
    align-items: center;
  }
}

/* ── Contact form: stack info+form on mobile ── */
@media (max-width: 767px) {
  .contact__inner {
    grid-template-columns: 1fr;
  }
  .contact__info-panel {
    order: 2;
  }
  .contact__form-wrap {
    order: 1;
  }
  .contact__social {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .contact__info-items {
    gap: 12px;
  }
  .form-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* ── Hero mobile: tighter, cleaner ── */
@media (max-width: 575px) {
  .hero__panel--right {
    min-height: 280px;
  }
  .hero__lead {
    font-size: 0.9rem;
  }
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .hero__actions .btn-gold,
  .hero__actions .btn-outline-gold {
    width: 100%;
    justify-content: center;
    max-width: 300px;
  }
  .hero__slider-counter-cur {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }
  .hero__slider-btn {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
  .hero__slider-btn--prev { left: 10px; }
  .hero__slider-btn--next { right: 10px; }
}

/* ── About section: visual order on mobile ── */
.about {
  overflow: hidden;
}
.about__content {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 767px) {
  .about__inner {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
  .about__visual {
    order: -1;
    max-width: min(340px, 90vw);
    margin-inline: auto;
  }
  .about__content {
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .about__credentials {
    justify-content: center;
    flex-wrap: wrap;
  }
  .ornament {
    justify-content: center !important;
    margin-left: auto !important;
  }
  .about__quote {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* ── Journey: tighter on mobile ── */
@media (max-width: 575px) {
  .journey__step-content {
    padding-left: 16px !important;
    padding-right: 0 !important;
  }
  .journey__step-num {
    font-size: 2.5rem;
  }
  .journey__step-title {
    font-size: 1rem;
  }
}

/* ── Tips: full column on tablet ── */
@media (max-width: 991px) {
  .tip-visual {
    grid-template-columns: 1fr;
  }
  .tip-visual__copy {
    text-align: center;
  }
  .tip-visual__scene {
    order: -1;
    min-height: clamp(280px, 45vw, 400px);
  }
  .tip-visual__body {
    max-width: none;
  }
}

/* ── CTA banner buttons: stack on mobile ── */
@media (max-width: 575px) {
  .cta-banner__actions {
    flex-direction: column;
    align-items: center;
  }
  .cta-banner__actions .btn-gold,
  .cta-banner__actions .btn-outline-gold {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ── Testimonials / editorial quote: mobile text ── */
@media (max-width: 575px) {
  .editorial-quote__text {
    font-size: clamp(1.3rem, 6vw, 1.75rem);
  }
}

/* ── Section progress dots: hide on mobile ── */
@media (max-width: 767px) {
  .section-progress-dots {
    display: none;
  }
}

/* ── Scroll progress bar: thinner on mobile ── */
@media (max-width: 575px) {
  .scroll-progress {
    height: 2px;
  }
}

/* ── Nav book pill: hide label on very small screens ── */
@media (max-width: 380px) {
  .nav-book-pill span {
    display: none;
  }
  .nav-book-pill {
    padding: 8px 10px;
  }
  .lang-switch {
    display: none;
  }
}

/* ── Tablet hero: keep image taller ── */
@media (min-width: 576px) and (max-width: 1199px) {
  .hero__panel--right {
    min-height: 400px;
  }
  .hero__credential {
    bottom: 80px;
    right: 16px;
    max-width: 180px;
  }
}

/* ── Prevent tip bubbles from overflowing ── */
@media (max-width: 480px) {
  .tip-bubble {
    font-size: 0.68rem;
    padding: 7px 10px;
    min-width: 88px;
    max-width: 140px;
  }
}

/* ── Benefits: contain decorative ::before circle ── */
.benefits {
  overflow: hidden;
}

/* ── Benefits items: no overflow on text ── */
.benefit-item__title,
.benefit-item__body,
.service-card__desc,
.journey__step-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Header logo: clean transparent fix ── */
.header .logo {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
.logo-custom {
  height: clamp(42px, 5vw, 56px) !important;
  width: auto !important;
  max-width: clamp(120px, 16vw, 160px) !important;
  min-width: 90px;
  object-fit: contain !important;
  background: none !important;
  background-color: transparent !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block;
}
@media (max-width: 575px) {
  .logo-custom {
    height: clamp(36px, 10vw, 48px) !important;
    max-width: clamp(95px, 28vw, 130px) !important;
  }
}

/* ── Safe-area insets for notched phones ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .whatsapp-float {
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }
  .scroll-top {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  }
}

/* ============================================================
   66. MOBILE HERO / SLIDER FIX
   Fixes layout, overflow, and visual issues on all phone widths.
   Target: 375px / 390px / 414px / 430px
   ============================================================ */

/* ── Global overflow guard ── */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* ── Hero: proper overflow + no forced viewport height on mobile ── */
@media (max-width: 1199px) {
  .hero {
    overflow: hidden;   /* was 'clip' — hidden creates proper BFC */
    min-height: 0;      /* remove calc(100vh - header) constraint when stacked */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* All slider containers: full-width, safe box model */
  .hero__panel--right,
  .hero__slider-chrome,
  .hero__slider,
  .hero__slide {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Slider images: always cover, never overflow */
  .hero__panel-img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
  }
}

/* ── Phone: full-bleed slider, clean layout ── */
@media (max-width: 900px) {
  /* Remove hero side padding — let slider be edge-to-edge */
  .hero {
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }

  /* Right panel (slider): full-bleed, flat edges on mobile */
  .hero__panel--right {
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* Left panel: restore readable horizontal padding */
  .hero__panel--left {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 36px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Credential badge: keep absolute so it overlays the slider properly */
  .hero__credential {
    position: absolute;
    bottom: 16px;
    right: 16px;
    max-width: 170px;
    z-index: 4;
  }

  /* RTL: credential badge on the correct side */
  [dir="rtl"] .hero__credential {
    right: auto;
    left: 16px;
  }

  /* Hero sun/logo: constrain to panel width */
  .hero__sun {
    width: min(100%, 290px);
    max-width: 100%;
  }

  /* Hero title: prevent overflow */
  .hero__title {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Hero lead text: full width on mobile */
  .hero__lead {
    max-width: 100%;
  }
}

/* ── Small phones (≤575px): tighter sizing ── */
@media (max-width: 575px) {
  .hero__panel--right {
    min-height: 260px;
  }

  .hero__panel--left {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 28px;
  }

  .hero__sun {
    width: min(100%, 260px);
  }

  /* Slider counter: smaller on phones */
  .hero__slider-counter {
    bottom: 50px;
    left: 14px;
  }

  /* Dots: centered on phones */
  .hero__slider-dots {
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
  }

  /* Prev/next buttons: bring closer to edges */
  .hero__slider-btn--prev { left: 8px; }
  .hero__slider-btn--next { right: 8px; }
}

/* ── RTL (Arabic): mirror layout fixes ── */
[dir="rtl"] .hero__slider-dots {
  left: auto;
  right: auto;
}

@media (max-width: 900px) {
  [dir="rtl"] .hero__slider-counter {
    left: auto;
    right: 14px;
  }
  [dir="rtl"] .hero__slider-dots {
    left: auto;
    right: clamp(14px, 4vw, 44px);
    transform: none;
  }
}

@media (max-width: 575px) {
  [dir="rtl"] .hero__slider-counter {
    right: 14px;
  }
  [dir="rtl"] .hero__slider-dots {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ── Mood gallery: fix image overflow on narrow screens ── */
.mood-gallery {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.mood-gallery__grid {
  width: 100%;
  max-width: 100%;
}

.mood-gallery__panel {
  overflow: hidden;
  max-width: 100%;
  width: 100%;
}

.mood-real-photo,
.mood-gallery__panel img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Ensure hero section never causes body scrollWidth to grow ── */
#hero, .hero {
  contain: layout style;
}