/* ═══════════════════════════════════════════════════════════════
   DUBAI ELITE LUXURIES — PREMIUM THEME
   ───────────────────────────────────────────────────────────────
   Port of the pearl "room" scroll-transformation onto the existing
   PHP site. Colour, background and atmosphere only — no markup,
   copy, layout, spacing or workflow is altered.

   Load LAST, after Bootstrap / Font Awesome / AOS / style.css.
   Pairs with js/premium-theme.js, which injects the room layers.

   Palette
     Ink        #16112B   navy-aubergine — all body text
     Violet     #6B2D94   the accent: rules, icons, borders, buttons
     Aubergine  #4A2260   the accent, deepened down the page
     Blush      #E5989B   light only — glows and washes, never type
     Pearl      #FFFFFF → #E0DAE9   the five rooms

   Contents
     1   The rooms
     2   Atmosphere
     3   Let the rooms show through
     4   Type
     5   Hero badges
     6   Trust bar
     7   Cards
     8   Collection cards
     9   Buttons
     10  Contact section
     11  Navbar / odds and ends
     12a Unified button rest state
     12b Unified button hover
     12c Hero redesign — centered brand block
     12d Trust bar in hero
     13  Responsive + motion
     14  Site-wide classes (About and other inner pages)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --del-violet:    #6B2D94;
  --del-violet-lt: #8A4FB0;
  --del-aubergine: #4A2260;
  --del-blush:     #E5989B;

  --del-ink:       #16112B;
  --del-ink-soft:  rgba(35, 26, 58, .72);
  --del-ink-faint: rgba(35, 26, 58, .52);

  /* driven by js/premium-theme.js — violet easing toward aubergine */
  --del-accent:    #6B2D94;
  --del-hair:      rgba(107, 45, 148, .20);
  --del-hair-soft: rgba(107, 45, 148, .11);
  --del-panel:     rgba(255, 255, 255, .62);

  --del-shadow:    rgba(42, 30, 70, .10);

  --del-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ───────────────────────────────────────────────────────────────
   1. THE ROOMS
   Five fixed full-viewport layers, crossfaded on scroll by the JS.
   Only opacity animates, so this stays compositor-cheap.
   ─────────────────────────────────────────────────────────────── */
body { background-color: #FCFBFD; color: var(--del-ink); }

.del-room {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  z-index: 0;
  overflow: hidden;
}

/* I · ARRIVAL — white with the faintest blush sunrise */
#del-room-1 {
  background:
    radial-gradient(130% 85% at 50% 4%, rgba(229,152,155,.15), transparent 66%),
    linear-gradient(180deg, #FFFFFF 0%, #FCFBFD 46%, #F5F3F8 100%);
}
.del-arch {
  position: absolute;
  left: 50%; bottom: 0;
  width: min(48vw, 660px);
  height: 82%;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(ellipse 92% 62% at 50% 16%, rgba(255,255,255,.98), transparent 68%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF7F9 48%, #F0EBF1 100%);
  box-shadow:
    0 0 0 1px rgba(107,45,148,.09),
    0 0 130px rgba(229,152,155,.28),
    inset 0 -44px 90px rgba(107,45,148,.07);
  filter: blur(.3px);
}
.del-arch::before {
  content: '';
  position: absolute; inset: 5% 12% 0 12%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBFC 54%, #F6F2F6 100%);
  box-shadow: inset 0 0 70px rgba(229,152,155,.16);
}
.del-panelling {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(13,19,38,.05) 0 2px, transparent 2px 96px);
  opacity: .6;
}
.del-sheer {
  position: absolute; top: -2vh; bottom: -2vh;
  width: 20vw;
  filter: blur(3px);
  transform-origin: top center;
  animation: del-sway 9s ease-in-out infinite alternate;
}
.del-sheer.l { left: 0;  background: linear-gradient(90deg,  rgba(255,255,255,.92), rgba(255,240,243,.4) 55%, transparent); }
.del-sheer.r { right: 0; background: linear-gradient(-90deg, rgba(255,255,255,.92), rgba(255,240,243,.4) 55%, transparent); animation-delay: -4.5s; }
@keyframes del-sway {
  from { transform: skewX(.8deg) translateX(-6px); }
  to   { transform: skewX(-1.2deg) translateX(10px); }
}

/* II · warm pearl */
#del-room-2 {
  background:
    radial-gradient(95% 72% at 18% 18%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(180deg, #FDFCFD 0%, #F9F6F8 50%, #F1ECF1 100%);
}
.del-window {
  position: absolute; left: 4vw; top: 15vh;
  width: 38vw; height: 74vh;
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDF4F5 58%, #F3E3E7 100%);
  box-shadow: inset 0 0 0 1px rgba(107,45,148,.10), 0 34px 90px rgba(42,30,70,.10);
  overflow: hidden;
}
.del-window::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../images/IMG_0737.PNG') center / cover no-repeat;
  opacity: var(--del-window-image-opacity, 0);
  transition: opacity 0.15s linear;
  pointer-events: none;
}
.del-window::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 60%, rgba(255,255,255,.14));
  animation: del-sway 11s ease-in-out infinite alternate;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* III · neutral pearl */
#del-room-3 {
  background: linear-gradient(180deg, #FBF9FB 0%, #F4F1F6 54%, #ECE7F1 100%);
}
.del-herringbone {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.07) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(42,22,77,.05)    0 2px, transparent 2px 14px);
}
.del-slats {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 16vw;
  background: repeating-linear-gradient(90deg, #CFC4D8 0 10px, #BCB0C8 10px 14px, #D8CEE0 14px 24px);
  box-shadow: -24px 0 70px rgba(42,30,70,.10);
  opacity: .5;
  filter: blur(.4px);
}

/* IV · a whisper of lilac */
#del-room-4 {
  background: linear-gradient(180deg, #F7F4FA 0%, #F0EBF5 50%, #E7E1EF 100%);
}
.del-feature-wall {
  position: absolute; left: 8vw; top: 10vh;
  width: 52vw; height: 66vh;
  background:
    radial-gradient(140% 90% at 30% 20%, rgba(255,255,255,.65), transparent 56%),
    linear-gradient(160deg, #F4F0F8 0%, #E6DEF0 40%, #F7F4FA 68%, #DDD4EA 100%);
  box-shadow: 0 34px 80px rgba(42,30,70,.12), inset 0 0 0 1px rgba(107,45,148,.14);
}
.del-feature-wall::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--del-noise);
  opacity: .3;
  mix-blend-mode: soft-light;
}
.del-lightstrip {
  position: absolute; left: 14vw; top: 62vh;
  width: 40vw; height: 12px; border-radius: 8px;
  background: linear-gradient(90deg, #FFEEF0, #F0C6C8 24%, #FFF2F3 48%, #E8BCBF 72%, #FFF6F7);
  filter: blur(2px);
  box-shadow: 0 0 30px rgba(229,152,155,.34), 0 0 80px rgba(229,152,155,.16);
}

/* V · soft silver-lilac dusk */
#del-room-5 {
  background: linear-gradient(180deg, #F3F0F8 0%, #EBE6F2 46%, #E0DAE9 100%);
}
.del-skyline {
  position: absolute; left: 0; right: 0; bottom: 34vh; height: 20vh;
  opacity: .45;
  filter: blur(.6px);
}
.del-skyline svg { width: 100%; height: 100%; }
.del-pool {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34vh;
  background:
    linear-gradient(180deg, rgba(214,204,232,.42), rgba(198,188,220,.55) 44%, #D9D2E6 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 60px, transparent 60px 120px);
  overflow: hidden;
}
.del-pool::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  filter: blur(.6px);
}
.del-pool::after {
  /* Sliding stripes disabled — the "moving panels" at page bottom.
     Base pool gradient is kept for the room aesthetic. */
  content: none;
  animation: none;
}

/* Pool and skyline removed entirely — the purple "panels" at the
   bottom of the last pearl room (Room 5). Base Room 5 gradient
   still renders, but no purple slab/slat/water elements. */
.del-pool,
.del-pool::before,
.del-skyline,
.del-palm {
  display: none !important;
}
@keyframes del-glide { from { transform: translateX(0); } to { transform: translateX(90px); } }
.del-palm { position: absolute; bottom: 28vh; width: 200px; height: 270px; opacity: .45; filter: blur(.7px); display: none !important; }
.del-palm.l { left: 2vw; }
.del-palm.r { right: 3vw; transform: scaleX(-1); }
.del-skyline { display: none !important; }

/* ───────────────────────────────────────────────────────────────
   2. ATMOSPHERE — sunrise wash, dusk settle, dust, grain
   ─────────────────────────────────────────────────────────────── */
#del-dawn, #del-dusk {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
}
#del-dawn { background: radial-gradient(130% 95% at 50% 0%, rgba(229,152,155,.17), rgba(229,152,155,.04) 58%, transparent); }
#del-dusk { background: linear-gradient(180deg, rgba(107,45,148,.06), rgba(42,30,70,.10)); }

#del-motes { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

.del-grain {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  background-image: var(--del-noise);
  opacity: .045;
  mix-blend-mode: overlay;
}

/* ───────────────────────────────────────────────────────────────
   3. LET THE ROOMS SHOW THROUGH
   Every section becomes transparent and sits above the layers.
   Placement, padding and grid are untouched.
   ─────────────────────────────────────────────────────────────── */
.hp-hero,
.hp-trust-bar,
.hp-section,
.hp-section--white,
.hp-section--light,
.hp-section--cream,
.hp-contact-cta {
  background: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 5;
}
.navbar-luxury, footer, .hp-wa-float { position: relative; z-index: 6; }

/* hero: the arch in room 1 does the work now */
.hp-hero__overlay { background: transparent !important; }
.hp-hero__particles .particle {
  background: var(--del-accent) !important;
  box-shadow: 0 0 8px rgba(107,45,148,.45) !important;
  opacity: .18 !important;
}

/* a violet hairline marks each new room */
.hp-section + .hp-section::before,
.hp-contact-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1140px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--del-hair), transparent);
}

/* ───────────────────────────────────────────────────────────────
   4. TYPE — one ink, end to end
   ─────────────────────────────────────────────────────────────── */
.hp-hero__title,
.hp-section__title,
.hp-customize__title,
.hp-contact-cta__title,
.hp-why-card__title,
.hp-product-card__body h3,
.hp-product-card__body h4,
.hp-empty-state h3,
.hp-contact-cta__form-title {
  color: var(--del-ink) !important;
  text-shadow: none !important;
}

.hp-hero__subtitle,
.hp-section__desc,
.hp-why-card__desc,
.hp-product-card__desc,
.hp-empty-state p,
.text-muted,
.hp-contact-cta .text-white-50 {
  color: var(--del-ink-soft) !important;
}

/* eyebrow with violet rules — block-level so it sits above the H2 */
.hp-section__eyebrow {
  color: var(--del-accent) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hp-section__eyebrow::after {
  content: ''; width: 40px; height: 1px;
  background: var(--del-accent); opacity: .45;
}
.hp-section__header .hp-section__eyebrow::before {
  content: ''; width: 40px; height: 1px;
  background: var(--del-accent); opacity: .45;
}
/* .text-start variant keeps left-alignment (Philosophy / Contact) */
.hp-section__eyebrow.text-start {
  justify-content: flex-start !important;
}
.hp-section__eyebrow.text-start::before { display: none !important; }

/* Contact CTA eyebrow: keep left-aligned, but bring back the leading line
   so it reads "— CONTACT —" like every other section eyebrow. */
.hp-contact-cta .hp-section__eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 40px;
  height: 1px;
  background: var(--del-accent);
  opacity: 0.45;
}

/* gold gradient text becomes violet → aubergine */
.text-gradient-gold {
  background: linear-gradient(100deg, var(--del-violet) 0%, var(--del-violet-lt) 45%, var(--del-aubergine) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.text-gold, i.text-gold { color: var(--del-accent) !important; }

/* ───────────────────────────────────────────────────────────────
   5. HERO BADGES
   ─────────────────────────────────────────────────────────────── */
.hp-hero__badge {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--del-hair) !important;
  box-shadow: 0 18px 44px var(--del-shadow) !important;
  color: var(--del-ink) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hp-hero__badge strong, .hp-hero__badge-text strong { color: var(--del-ink) !important; }
.hp-hero__badge span,   .hp-hero__badge-text span   { color: var(--del-ink-soft) !important; }
.hp-hero__badge i { color: var(--del-accent) !important; }
.hp-hero__badge-icon {
  background: linear-gradient(135deg, var(--del-violet), var(--del-aubergine)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(107,45,148,.24) !important;
}
.hp-hero__scroll, .hp-hero__scroll i { color: var(--del-accent) !important; }
.hp-hero__scroll-line { background: linear-gradient(180deg, transparent, var(--del-accent)) !important; }

/* ───────────────────────────────────────────────────────────────
   6. TRUST BAR
   ─────────────────────────────────────────────────────────────── */
.hp-trust-bar {
  border-top: 1px solid var(--del-hair-soft) !important;
  border-bottom: 1px solid var(--del-hair-soft) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hp-trust-bar__item      { color: var(--del-ink) !important; }
.hp-trust-bar__item i    { color: var(--del-accent) !important; }
.hp-trust-bar__item span { color: var(--del-ink-soft) !important; }
.hp-trust-bar__divider   { background: var(--del-hair) !important; }

/* ───────────────────────────────────────────────────────────────
   7. CARDS — pearl glass on the rooms
   ─────────────────────────────────────────────────────────────── */
.hp-product-card,
.hp-why-card,
.hp-contact-cta__form-card {
  background: var(--del-panel) !important;
  border: 1px solid var(--del-hair-soft) !important;
  box-shadow: 0 12px 34px var(--del-shadow) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hp-product-card:hover,
.hp-why-card:hover {
  border-color: var(--del-accent) !important;
  box-shadow: 0 26px 56px rgba(107,45,148,.14) !important;
}
.hp-product-card__badge,
[class*="hp-product-card__badge--"] {
  background: linear-gradient(135deg, var(--del-violet), var(--del-aubergine)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(107,45,148,.26) !important;
}
.hp-product-card__img-wrap {
  background: linear-gradient(180deg, #FFFFFF, #F7F4F9) !important;
}
.hp-product-card__img-overlay {
  background: linear-gradient(180deg, rgba(42,30,70,0), rgba(42,30,70,.5)) !important;
}
.hp-product-card__quick-view {
  background: rgba(255,255,255,.94) !important;
  color: var(--del-accent) !important;
}
.hp-product-card__quick-view:hover {
  background: var(--del-accent) !important;
  color: #FFFFFF !important;
}
.hp-product-card__cat   { color: var(--del-accent) !important; }
.hp-product-card__price { color: var(--del-ink) !important; }

/* why / service icons — violet circles */
.hp-why-card__icon {
  background: rgba(107,45,148,.06) !important;
  color: var(--del-accent) !important;
  border: 1px solid var(--del-hair) !important;
}
.hp-why-card:hover .hp-why-card__icon {
  background: linear-gradient(135deg, var(--del-violet), var(--del-aubergine)) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
.hp-why-card__link { color: var(--del-accent) !important; }
.hp-why-card__link:hover { color: var(--del-aubergine) !important; }
.hp-service-card { background: transparent !important; }

/* ───────────────────────────────────────────────────────────────
   8. COLLECTION CARDS
   These carry photographs, so the shade stays — warmed to aubergine.
   ─────────────────────────────────────────────────────────────── */
.hp-collection-card {
  border: 1px solid var(--del-hair-soft) !important;
  box-shadow: 0 16px 40px var(--del-shadow) !important;
}
.hp-collection-card:hover { box-shadow: 0 30px 70px rgba(107,45,148,.18) !important; }
.hp-collection-card__shade {
  background: linear-gradient(180deg, rgba(42,30,70,.06) 0%, rgba(35,24,58,.58) 60%, rgba(22,17,43,.86) 100%) !important;
}
.hp-collection-card__eyebrow { color: var(--del-blush) !important; }
.hp-collection-card__title   { color: #FFFFFF !important; }
.hp-collection-card__desc    { color: rgba(249,249,251,.82) !important; }
.hp-collection-card__cta     { color: var(--del-blush) !important; }
.hp-collection-card:hover .hp-collection-card__cta { color: #FFFFFF !important; }

/* ───────────────────────────────────────────────────────────────
   9. BUTTONS
   ─────────────────────────────────────────────────────────────── */
.btn-hp-primary {
  background: linear-gradient(120deg, var(--del-violet), var(--del-aubergine)) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 34px rgba(107,45,148,.24) !important;
}
.btn-hp-primary:hover, .btn-hp-primary:focus {
  background: linear-gradient(120deg, var(--del-violet-lt), var(--del-violet)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 44px rgba(107,45,148,.34) !important;
}
.btn-hp-outline, .btn-hp-outline-dark {
  border: 1px solid var(--del-accent) !important;
  color: var(--del-accent) !important;
  background: rgba(255,255,255,.5) !important;
}
.btn-hp-outline:hover, .btn-hp-outline-dark:hover {
  background: var(--del-accent) !important;
  color: #FFFFFF !important;
}
.btn-hp-ghost {
  border: 1px solid var(--del-hair) !important;
  color: var(--del-ink) !important;
  background: rgba(255,255,255,.6) !important;
}
.btn-hp-ghost:hover {
  border-color: var(--del-accent) !important;
  color: var(--del-accent) !important;
  background: rgba(107,45,148,.06) !important;
}
.btn-hp-add-rfq {
  background: rgba(107,45,148,.05) !important;
  border: 1px solid var(--del-hair) !important;
  color: var(--del-accent) !important;
}
.btn-hp-add-rfq:hover {
  background: var(--del-accent) !important;
  border-color: var(--del-accent) !important;
  color: #FFFFFF !important;
}
.btn-hp-add-rfq.added {
  background: var(--del-aubergine) !important;
  border-color: var(--del-aubergine) !important;
  color: #FFFFFF !important;
}

/* ───────────────────────────────────────────────────────────────
   10. CONTACT SECTION
   The page no longer goes dark, so this section is re-inked for
   pearl. Markup, fields, labels and the form workflow are untouched.
   ─────────────────────────────────────────────────────────────── */
.hp-contact-cta__method {
  background: rgba(255,255,255,.6) !important;
  border: 1px solid var(--del-hair-soft) !important;
  color: var(--del-ink) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hp-contact-cta__method:hover {
  background: rgba(255,255,255,.85) !important;
  border-color: var(--del-accent) !important;
}
.hp-contact-cta__method strong { color: var(--del-ink) !important; }
.hp-contact-cta__method span   { color: var(--del-ink-soft) !important; }
.hp-contact-cta__method-icon {
  background: rgba(107,45,148,.07) !important;
  color: var(--del-accent) !important;
  border: 1px solid var(--del-hair) !important;
}
.hp-contact-cta__method-icon--wa {
  background: rgba(37,211,102,.10) !important;
  color: #1FA855 !important;
  border-color: rgba(37,211,102,.28) !important;
}
.hp-form-input {
  background: rgba(255,255,255,.75) !important;
  border: 1px solid var(--del-hair) !important;
  color: var(--del-ink) !important;
}
.hp-form-input::placeholder { color: var(--del-ink-faint) !important; }
.hp-form-input:focus {
  border-color: var(--del-accent) !important;
  box-shadow: 0 0 0 3px rgba(107,45,148,.12) !important;
  background: #FFFFFF !important;
}
.hp-form-input option { background: #FFFFFF !important; color: var(--del-ink) !important; }

/* ───────────────────────────────────────────────────────────────
   11. NAVBAR / ODDS AND ENDS
   ─────────────────────────────────────────────────────────────── */
.navbar-logo-img {
  filter:
    drop-shadow(0 0 6px rgba(255, 180, 90, 0.55))
    drop-shadow(0 0 16px rgba(255, 120, 160, 0.35));
  transition: filter 0.3s ease;
}
.navbar-logo-img:hover {
  filter:
    drop-shadow(0 0 10px rgba(255, 180, 90, 0.75))
    drop-shadow(0 0 22px rgba(255, 120, 160, 0.5));
}

.navbar-luxury {
  background: rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-bottom: 1px solid transparent !important;
}
.navbar-luxury.scrolled {
  background: rgba(255,255,255,0.25) !important;
  border-bottom-color: var(--del-hair-soft) !important;
  box-shadow: 0 8px 30px rgba(42,30,70,.06) !important;
}
.navbar-luxury .nav-link { color: var(--del-ink) !important; }
.navbar-luxury .nav-link:hover,
.navbar-luxury .nav-link.active { color: var(--del-accent) !important; }

/* empty-state icons carry an inline blue in the PHP — repaint */
.hp-empty-state i, .hp-empty-state .fa-gift { color: var(--del-accent) !important; }

.hp-wa-float__tooltip { background: var(--del-aubergine) !important; color: #FFFFFF !important; }

::selection { background: rgba(107,45,148,.16); color: var(--del-ink); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--del-accent) !important;
  outline-offset: 3px !important;
}

/* ───────────────────────────────────────────────────────────────
   12a. UNIFIED BUTTON REST STATE
   Book Consultation (.hp-hero .btn-hp-outline) and View Collection
   (.btn-hp-ghost, appearing in sections 2 and 4) inherit the
   Discover button's resting font colour and border colour —
   violet on violet. No background change, no lift.
   Specificity note: .hp-hero .btn-hp-outline in style.css uses
   !important and (0,2,0) specificity, so we match it here.
   ─────────────────────────────────────────────────────────────── */
.hp-hero .btn-hp-outline,
.btn-hp-ghost {
  color: var(--del-accent) !important;
  border-color: var(--del-accent) !important;
}
.hp-hero .btn-hp-outline i,
.btn-hp-ghost i {
  color: var(--del-accent) !important;
}

/* ───────────────────────────────────────────────────────────────
   12b. UNIFIED BUTTON HOVER
   Book Consultation (.hp-hero .btn-hp-outline in the hero) and
   View Collection (.btn-hp-ghost) inherit the Discover button's
   fill-with-accent animation — violet fill, white text, subtle
   lift. Existing markup is not touched.
   Specificity note: .hp-hero .btn-hp-outline:hover in style.css
   uses !important and (0,2,1) specificity, so we match it here.
   ─────────────────────────────────────────────────────────────── */
.hp-hero .btn-hp-outline:hover,
.btn-hp-ghost:hover {
  background: var(--del-accent) !important;
  border-color: var(--del-accent) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(107,45,148,.22) !important;
}
.hp-hero .btn-hp-outline:hover i,
.btn-hp-ghost:hover i {
  color: #FFFFFF !important;
}

/* ───────────────────────────────────────────────────────────────
   12c. HERO REDESIGN — centered brand block
   Replaces the previous two-column hero+badges layout with a
   single centred column: eyebrow → 'Dubai Elite' → hairline →
   'Luxuries' → subtitle → buttons.
   ─────────────────────────────────────────────────────────────── */

/* Shrink hero height — no trust bar occupies the lower band any more,
   so the previous 100vh left too much empty space below the buttons. */
.hp-hero { min-height: 85vh !important; }
.hp-hero__row { min-height: 78vh !important; }

/* Nudge the whole content block a little above viewport centre */
.hp-hero__content { margin-top: -3vh; }

/* Eyebrow: 'CORPORATE GIFTING HOUSE' with violet hairlines */
.hp-hero__brand-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: -0.5vh auto 28px;
  color: var(--del-accent);
  font-family: var(--font-body, 'Inter', Helvetica, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
}
.hp-hero__brand-eyebrow-line {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: var(--del-accent);
  opacity: 0.55;
}
.hp-hero__brand-eyebrow-text {
  color: var(--del-accent);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────
   Shared secondary-page H1 (About, Collections, FAQs, Contact …)
   — matches the Home hero title: same font, size, weight; black; no lines.
   ────────────────────────────────────────────────────────────── */
.page-hero-title {
  display: block !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(2.75rem, 5.5vw, 4.75rem) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  text-align: center !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
}
/* Shared secondary-page hero SUBTITLE — matches About page pattern.
   Italic body font, black, centered. */
.page-hero-sub {
  display: block !important;
  font-family: var(--font-body, 'Inter', Helvetica, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.9 !important;
  letter-spacing: normal !important;
  color: #000000 !important;
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Title: 'Dubai Elite' → hairline → 'LUXURIES' stacked centered */
.hp-hero__title {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 10px !important;
  text-align: center !important;
}
.hp-hero__brand {
  color: var(--del-ink) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  font-size: 1.15em;
}
.hp-hero__brand-divider {
  width: 60px;
  height: 1px;
  background: var(--del-accent);
  opacity: 0.55;
  margin: 4px 0;
}
.hp-hero__brand-suffix {
  color: var(--del-accent) !important;
  font-family: var(--font-body, 'Inter', Helvetica, sans-serif);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
}

/* Subtitle: centred, constrained width */
.hp-hero__subtitle {
  max-width: 620px;
  margin: 0 auto 34px !important;
  text-align: center !important;
}

/* Hero CTA buttons: uniform width */
.hp-hero__ctas .btn-hp-primary,
.hp-hero__ctas .btn-hp-outline {
  min-width: 230px;
  text-align: center;
  justify-content: center;
}

/* Hero CTA buttons: narrower + centred + equal width on mobile */
@media (max-width: 767.98px) {
  .hp-hero .hp-hero__ctas,
  .hp-hero__ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hp-hero .hp-hero__ctas .btn-hp-primary,
  .hp-hero .hp-hero__ctas .btn-hp-outline,
  .hp-hero__ctas .btn-hp-primary,
  .hp-hero__ctas .btn-hp-outline {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Our Philosophy: fill viewport height, vertically centre content */
#our-philosophy {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Mobile: tighten gap between hero (Enquire Now) and Where Design Meets Distinction */
@media (max-width: 767.98px) {
  .hp-hero {
    min-height: auto !important;
    padding-bottom: 4px !important;
  }
  #our-philosophy {
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 30px !important;
  }
  #our-philosophy .hp-section__title,
  #our-philosophy #philosophy-heading {
    margin-top: 0 !important;
  }

  /* Contact CTA: centre-align eyebrow, heading and description */
  #contact-cta .hp-section__eyebrow,
  #contact-cta .hp-contact-cta__title,
  #contact-cta .hp-section__desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Contact CTA title: <br> is hidden on mobile — inject a space before "Extraordinary" */
  #contact-cta .hp-contact-cta__title .text-gradient-gold::before {
    content: ' ';
    white-space: pre;
  }
}

/* ───────────────────────────────────────────────────────────────
   Featured Pieces — horizontal snap carousel
   4 slides on lg/md (≥768), 1 slide on mobile (<768).
   ─────────────────────────────────────────────────────────────── */
.hp-featured-carousel-wrap {
  position: relative;
  padding: 0;
}
.hp-featured-nav { display: none !important; }
.hp-featured-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 24px;
}
.hp-featured-carousel::-webkit-scrollbar { display: none; }
.hp-featured-slide {
  flex: 0 0 calc((100% - 24px * 3) / 4);
  scroll-snap-align: start;
  min-width: 0;
}
.hp-featured-slide > .hp-product-card { height: 100%; }
.hp-featured-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--del-accent, #6B2D94);
  background: #ffffff;
  color: var(--del-accent, #6B2D94);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 4px 14px rgba(42,30,70,.10);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.hp-featured-nav:hover { background: var(--del-accent, #6B2D94); color: #ffffff; }
.hp-featured-nav--prev { left: 0; }
.hp-featured-nav--next { right: 0; }
.hp-featured-nav[disabled] { opacity: 0.3; cursor: default; }

@media (max-width: 991.98px) {
  /* tab: still 4 across as requested */
  .hp-featured-slide {
    flex: 0 0 calc((100% - 24px * 3) / 4);
  }
}
@media (max-width: 767.98px) {
  /* mobile: one slide at a time */
  .hp-featured-carousel-wrap { padding: 0 12px; }
  .hp-featured-carousel { gap: 16px; }
  .hp-featured-slide { flex: 0 0 100%; }
  .hp-featured-nav { width: 34px; height: 34px; }
}

/* Curation Philosophy cards: label above question, tightly stacked */
.hp-why-card__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 6px;
  line-height: 1.1;
}

/* Curation Philosophy cards: extra breathing room under the description */
#bespoke-services .hp-why-card {
  padding-bottom: 44px;
}
#bespoke-services .hp-why-card__desc {
  margin-bottom: 0;
}
.hp-why-card__header .hp-why-card__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: var(--del-accent) !important;
  text-transform: uppercase !important;
  line-height: 1.1;
}
.hp-why-card__label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--del-accent);
  text-transform: uppercase;
  line-height: 1.1;
}

/* Featured Pieces & Bespoke Services: tighter header spacing, no gold underline */
#featured-pieces .hp-section__header,
#bespoke-services .hp-section__header {
  margin-bottom: 20px;
}
#featured-pieces .hp-section__title,
#bespoke-services .hp-section__title {
  padding-bottom: 0;
}
#featured-pieces .hp-section__title::after,
#bespoke-services .hp-section__title::after {
  display: none;
}

/* Hero image holder: pearl / arch-matched frame between subtitle and CTAs */
.hp-hero__image-holder {
  width: min(520px, 78%);
  aspect-ratio: 16 / 9;
  margin: 0 auto 32px;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(250,247,249,.6));
  box-shadow:
    0 0 0 1px rgba(107,45,148,.10),
    0 24px 60px rgba(42,30,70,.10),
    0 0 90px rgba(229,152,155,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Hero carousel: 3 holders rotating through left / center / right slots.
   Each holder cycles: enters at left (small, faded), grows into centre
   (big, opaque), shrinks to right (small, faded), then teleports back
   to left invisibly and fades in. Staggered delays keep all three slots
   filled at all times. */
.hp-hero__carousel {
  position: relative;
  width: min(720px, 100%);
  height: 260px;
  margin: 0 auto 32px;
}
.hp-hero__carousel > .hp-hero__image-holder {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: min(420px, 88%);
  animation: hp-hero-carousel-rotate 12s ease-in-out infinite;
  will-change: transform, opacity;
}
.hp-hero__carousel > .hp-hero__image-holder:nth-child(1) { animation-delay: 0s; }
.hp-hero__carousel > .hp-hero__image-holder:nth-child(2) { animation-delay: -4s; }
.hp-hero__carousel > .hp-hero__image-holder:nth-child(3) { animation-delay: -8s; }

@keyframes hp-hero-carousel-rotate {
  0%      { transform: translate(calc(-50% - 220px), -50%) scale(0.55); opacity: 0.35; z-index: 1; }
  33.33%  { transform: translate(-50%, -50%) scale(1);                  opacity: 1;    z-index: 3; }
  66.66%  { transform: translate(calc(-50% + 220px), -50%) scale(0.55); opacity: 0.35; z-index: 1; }
  74%     { transform: translate(calc(-50% + 260px), -50%) scale(0.5);  opacity: 0;    z-index: 0; }
  74.5%   { transform: translate(calc(-50% - 260px), -50%) scale(0.5);  opacity: 0;    z-index: 0; }
  86%     { transform: translate(calc(-50% - 220px), -50%) scale(0.55); opacity: 0.35; z-index: 1; }
  100%    { transform: translate(calc(-50% - 220px), -50%) scale(0.55); opacity: 0.35; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-hero__carousel > .hp-hero__image-holder { animation: none; }
  .hp-hero__carousel > .hp-hero__image-holder:nth-child(1) { transform: translate(calc(-50% - 220px), -50%) scale(0.55); opacity: 0.35; }
  .hp-hero__carousel > .hp-hero__image-holder:nth-child(2) { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .hp-hero__carousel > .hp-hero__image-holder:nth-child(3) { transform: translate(calc(-50% + 220px), -50%) scale(0.55); opacity: 0.35; }
}
@media (max-width: 767px) {
  .hp-hero__carousel { height: 200px; }
  .hp-hero__carousel > .hp-hero__image-holder { width: 70%; }
  @keyframes hp-hero-carousel-rotate {
    0%     { transform: translate(calc(-50% - 42%), -50%) scale(0.55); opacity: 0.35; z-index: 1; }
    33.33% { transform: translate(-50%, -50%) scale(1);                opacity: 1;    z-index: 3; }
    66.66% { transform: translate(calc(-50% + 42%), -50%) scale(0.55); opacity: 0.35; z-index: 1; }
    74%    { transform: translate(calc(-50% + 52%), -50%) scale(0.5);  opacity: 0;    z-index: 0; }
    74.5%  { transform: translate(calc(-50% - 52%), -50%) scale(0.5);  opacity: 0;    z-index: 0; }
    86%    { transform: translate(calc(-50% - 42%), -50%) scale(0.55); opacity: 0.35; z-index: 1; }
    100%   { transform: translate(calc(-50% - 42%), -50%) scale(0.55); opacity: 0.35; z-index: 1; }
  }
}
.hp-hero__image-holder-inner {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FAF7F9 55%, #F0EBF1 100%);
  border: 1px dashed rgba(107,45,148,.22);
  color: rgba(42,30,70,.45);
}
/* When the holder contains a real product image, drop the dashed placeholder
   look and let the image fill the frame. */
.hp-hero__image-holder-inner:has(img) {
  border: 0;
  background: #ffffff;
}
.hp-hero__image-holder-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.6s ease;
}
.hp-hero__image-holder-inner i {
  font-size: 2rem;
  color: var(--del-accent);
  opacity: 0.55;
}
.hp-hero__image-holder-inner span {
  font-family: var(--font-body, 'Inter', Helvetica, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .hp-hero__content { margin-top: -6vh; }
  .hp-hero__brand-eyebrow { gap: 10px; font-size: 0.62rem; letter-spacing: 0.24em; margin-bottom: 20px; }
  .hp-hero__brand-eyebrow-line { width: 24px; }
  .hp-hero__brand-suffix { letter-spacing: 0.32em; }
  .hp-hero__brand-divider { width: 42px; }
}

/* ───────────────────────────────────────────────────────────────
   13. RESPONSIVE + MOTION
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .del-window { width: 66vw; }
  .del-feature-wall { width: 80vw; }
  .del-palm { width: 140px; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .del-sheer, .del-window::after, .del-pool::after { animation: none !important; }
  .hp-hero__particles { display: none; }
}

/* ───────────────────────────────────────────────────────────────
   13a. COLLECTIONS MEGA-MENU — hover bridge (CSS half)
   Force the panel to stay visible when it carries our
   .mega-open helper class (added by JS hover-intent handler
   in section 13a-JS lower down). Also provide a small ::before
   bridge for redundancy so the CSS-only :hover from style.css
   still works if JS fails.
   ─────────────────────────────────────────────────────────────── */
.navbar-luxury .dropdown-mega .mega-menu-panel {
  margin-top: 0 !important;
}
.navbar-luxury .dropdown-mega.mega-open .mega-menu-panel,
.navbar-luxury .dropdown-mega .mega-menu-panel.mega-open {
  display: block !important;
}
.navbar-luxury .dropdown-mega .mega-menu-panel::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background: transparent;
}

/* ───────────────────────────────────────────────────────────────
   13b. PRINT / PDF EXPORT
   Default paper: A4 landscape. Preserve backgrounds and colour so
   Chrome's print-to-PDF captures the pearl palette faithfully.
   Hides the fixed pearl-room layers because CSS turns fixed
   elements into first-page-only backgrounds in print, which looks
   inconsistent across a multi-page PDF — body pearl colour renders
   instead.
   ─────────────────────────────────────────────────────────────── */
@media print {
  @page {
    size: A4 landscape;
    margin: 12mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body {
    background-color: #FCFBFD !important;
  }
  .del-room,
  #del-dawn,
  #del-dusk,
  #del-motes,
  .del-grain {
    display: none !important;
  }
  /* Avoid clipping any hero background image */
  .navbar-luxury {
    position: relative !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   13c. QUICK-VIEW MODAL — collage + carousel
   Client-side gallery for product Quick View across listings.
   Two modes toggled by JS: collage (grid) and carousel (one at
   a time). Fully themed to match pearl/violet palette.
   ═══════════════════════════════════════════════════════════════ */
.quick-view-modal .modal-content {
  background: var(--del-panel) !important;
  border: 1px solid var(--del-hair-soft) !important;
  border-radius: 10px;
  box-shadow: 0 30px 80px var(--del-shadow) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--del-ink);
}
.quick-view-modal .modal-title {
  color: var(--del-ink) !important;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-weight: 500;
}
.quick-view-modal .quick-view-eyebrow {
  color: var(--del-accent) !important;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}
.quick-view-modal .btn-close {
  filter: none;
  opacity: 0.6;
}
.quick-view-modal .btn-close:hover { opacity: 1; }

/* ---- Collage grid ---- */
.quick-view-collage {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.quick-view-collage[data-count="1"] { grid-template-columns: 1fr; }
.quick-view-collage[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.quick-view-collage[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.quick-view-collage[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.quick-view-collage[data-count="5"] { grid-template-columns: repeat(3, 1fr); }

/* First tile in 5-image collage spans two columns for asymmetric interest */
.quick-view-collage[data-count="5"] > .quick-view-tile:first-child { grid-column: span 2; }

.quick-view-tile {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #FFFFFF, #F7F4F9);
  border: 1px solid var(--del-hair-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.quick-view-collage[data-count="5"] > .quick-view-tile:first-child { aspect-ratio: 2 / 1.15; }
.quick-view-tile:hover {
  transform: translateY(-2px);
  border-color: var(--del-accent);
  box-shadow: 0 14px 36px rgba(107,45,148,0.18);
}
.quick-view-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.quick-view-tile:hover img { transform: scale(1.04); }
.quick-view-tile__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255,255,255,.92);
  color: var(--del-accent);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
}
.quick-view-tile__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--del-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.quick-view-tile:hover .quick-view-tile__zoom { opacity: 1; }

/* ---- Carousel ---- */
.quick-view-back {
  background: transparent;
  border: 1px solid var(--del-hair);
  color: var(--del-accent);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.quick-view-back:hover {
  background: var(--del-accent);
  border-color: var(--del-accent);
  color: #fff;
}
.quick-view-carousel__stage {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF, #F7F4F9);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-view-carousel__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity .18s ease;
}
.quick-view-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--del-hair);
  background: rgba(255,255,255,.92);
  color: var(--del-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease, color .2s ease;
}
.quick-view-arrow:hover {
  background: var(--del-accent);
  color: #fff;
  border-color: var(--del-accent);
}
.quick-view-arrow--prev { left: 12px; }
.quick-view-arrow--next { right: 12px; }
.quick-view-carousel__counter {
  text-align: center;
  color: var(--del-ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 12px;
  font-weight: 500;
}
.quick-view-carousel__thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.quick-view-carousel__thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity .2s ease, border-color .2s ease;
}
.quick-view-carousel__thumbs img:hover { opacity: 1; }
.quick-view-carousel__thumbs img.active {
  opacity: 1;
  border-color: var(--del-accent);
}

@media (max-width: 575px) {
  .quick-view-collage[data-count="3"],
  .quick-view-collage[data-count="5"] { grid-template-columns: repeat(2, 1fr); }
  .quick-view-collage[data-count="5"] > .quick-view-tile:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
  .quick-view-arrow { width: 34px; height: 34px; }
}

/* ───────────────────────────────────────────────────────────────
   13d. FOOTER — tighter vertical rhythm
   Original style.css:934 set .footer-top { padding: 80px 0 40px }.
   Halved to give the four footer columns less breathing room
   above and below without touching the copyright bar spacing.

   Also tightens the gap under each column heading — was 25px
   margin + 8px padding (33px total between "Exclusive Updates"
   and the subtitle, "Stay Connected" and the email link).
   ─────────────────────────────────────────────────────────────── */
.footer-top {
  padding: 20px 0 20px !important;
}
.footer-title {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 4px !important;
  line-height: 1 !important;   /* removes leading so text top matches box top */
}

/* ───────────────────────────────────────────────────────────────
   13e. FOOTER SOCIAL ICONS — bare, brand-coloured glyphs
   Strip the white tile / border / shadow that style.css:4450
   applies, and render each icon in its own brand palette.
   ─────────────────────────────────────────────────────────────── */
.footer .social-links a {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  transition: transform .2s ease, opacity .2s ease;
}
.footer .social-links a i {
  font-size: 1.6rem;
  line-height: 1;
}
.footer .social-links a:hover {
  background: transparent !important;
  transform: translateY(-2px);
}

/* Instagram — brand gradient on the icon glyph */
.footer .social-links a[aria-label="Instagram"] i {
  background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 75%, #515BD4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* WhatsApp — brand green */
.footer .social-links a[aria-label="WhatsApp"] i {
  color: #25D366 !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. SITE-WIDE CLASSES — About and other inner pages
   ───────────────────────────────────────────────────────────────
   The inner pages are built on the base vocabulary (section-padding,
   bg-white, section-title, glass-card-light, text-gold) rather than
   the hp- prefix. Theming them here means every page inherits the
   pearl rooms and violet accent with no per-page CSS.
   ═══════════════════════════════════════════════════════════════ */

/* ── 14.1 Retire the gold variable ───────────────────────────────
   Inline styles across the site reference var(--color-gold)
   directly — the About pull-quote's left border, the numbered
   process circles. Redefining it here repaints every one of them
   at once, with no markup edits anywhere.                        */
:root {
  --color-gold:       #6B2D94;
  --color-gold-light: #8A4FB0;
  --color-gold-dark:  #4A2260;
}

/* ── 14.2 Page grounds go transparent so the rooms show through ── */
.section-padding,
.bg-white,
.bg-light,
.bg-cream,
section.bg-white,
section.bg-light {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 5;
}

/* ── 14.3 Inner-page hero
   The About hero carries an inline navy background with white text.
   Both are overridden: the room behind becomes the backdrop and the
   copy is re-inked. Its padding and alignment stay as written.    */
#aboutHeroSection {
  background: transparent !important;
  color: var(--del-ink) !important;
}
#aboutHeroSection h1,
#aboutHeroSection .text-white,
#aboutHeroSection h1.text-white {
  color: var(--del-ink) !important;
}
#aboutHeroSection .text-white-50,
#aboutHeroSection .lead {
  color: var(--del-ink-soft) !important;
}
/* the eyebrow gains the same violet hairlines as the home page */
#aboutHeroSection > .container > span.text-white {
  color: var(--del-accent) !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
}
#aboutHeroSection > .container > span.text-white::before,
#aboutHeroSection > .container > span.text-white::after {
  content: '';
  width: 42px; height: 1px;
  background: var(--del-accent);
  opacity: .5;
}

/* ── 14.4 Section titles (base vocabulary) ─────────────────────── */
/* Block-level flex so the H2 wraps to the next line, hairlines centred */
.section-title .subtitle,
.section-title span.subtitle {
  color: var(--del-accent) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.section-title .subtitle::before,
.section-title .subtitle::after {
  content: '';
  width: 42px; height: 1px;
  background: var(--del-accent);
  opacity: .5;
}
.section-title h2 { color: var(--del-ink) !important; }
.section-title p  { color: var(--del-ink-soft) !important; }

/* ── 14.5 Body copy ───────────────────────────────────────────── */
.text-dark { color: var(--del-ink) !important; }
.lead { color: var(--del-ink-soft); }

/* Re-ink all .font-heading elements. style.css sets these to
   var(--color-primary) (the site's original blue). This catches
   inner-page headings like the About h2/h5s that don't sit inside
   an already-themed .hp-* or .section-title wrapper.            */
.font-heading { color: var(--del-ink) !important; }

/* pull-quote: border is already violet via --color-gold above */
.lead.font-heading.text-dark {
  color: var(--del-ink) !important;
  border-left-color: var(--del-accent) !important;
}

/* ── 14.6 Glass cards ─────────────────────────────────────────── */
.glass-card-light,
.glass-card {
  background: var(--del-panel) !important;
  border: 1px solid var(--del-hair-soft) !important;
  box-shadow: 0 12px 34px var(--del-shadow) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-card-light:hover,
.glass-card:hover {
  border-color: var(--del-accent) !important;
  box-shadow: 0 26px 56px rgba(107,45,148,.14) !important;
}
.glass-card-light h4,
.glass-card-light h5 { color: var(--del-ink) !important; }
.glass-card-light p  { color: var(--del-ink-soft) !important; }

/* ── 14.7 Numbered process steps
   These use .bg-light for their disc, which is now transparent, so
   they get their own violet-tinted fill and ring.                */
.rounded-circle.bg-light,
.d-inline-block.rounded-circle {
  background: rgba(107,45,148,.06) !important;
  border-color: var(--del-accent) !important;
  color: var(--del-accent) !important;
}

/* ── 14.8 Icons and rules ─────────────────────────────────────── */
.text-gold,
i.text-gold,
.fa-solid.text-gold,
.fa-brands.text-gold { color: var(--del-accent) !important; }

.border-top    { border-top-color: var(--del-hair) !important; }
.border-bottom { border-bottom-color: var(--del-hair) !important; }
.tagline-col-middle {
  border-left-color: var(--del-hair) !important;
  border-right-color: var(--del-hair) !important;
}
hr { border-color: var(--del-hair) !important; opacity: 1 !important; }

/* ── 14.9 Imagery ─────────────────────────────────────────────── */
.shadow-lg { box-shadow: 0 30px 70px rgba(42,30,70,.16) !important; }
.img-fluid.shadow-lg {
  box-shadow: 0 30px 70px rgba(42,30,70,.16),
              0 0 0 1px rgba(107,45,148,.10) !important;
}

/* ── 14.10 Bootstrap utilities used across pages ──────────────── */
.text-secondary { color: var(--del-ink-soft) !important; }
.badge.bg-primary, .badge.bg-dark {
  background: linear-gradient(135deg, var(--del-violet), var(--del-aubergine)) !important;
  color: #FFFFFF !important;
}
.btn-primary {
  background: linear-gradient(120deg, var(--del-violet), var(--del-aubergine)) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.btn-outline-primary,
.btn-outline-dark {
  border-color: var(--del-accent) !important;
  color: var(--del-accent) !important;
}
.btn-outline-primary:hover,
.btn-outline-dark:hover {
  background: var(--del-accent) !important;
  color: #FFFFFF !important;
}
.page-link { color: var(--del-accent) !important; }
.page-item.active .page-link {
  background: var(--del-accent) !important;
  border-color: var(--del-accent) !important;
  color: #FFFFFF !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--del-accent) !important;
  box-shadow: 0 0 0 3px rgba(107,45,148,.12) !important;
}
.accordion-button:not(.collapsed) {
  color: var(--del-accent) !important;
  background: rgba(107,45,148,.05) !important;
}
.accordion-button:focus {
  border-color: var(--del-accent) !important;
  box-shadow: 0 0 0 3px rgba(107,45,148,.12) !important;
}

/* ── 14.11 Inner-page hero spacing
   The home hero pulls its content up (12c). Inner pages keep their
   own padding, so the nudge is scoped away from them.            */
.hp-hero__content { margin-top: -3vh; }
#aboutHeroSection .container { margin-top: 0; }

/* ───────────────────────────────────────────────────────────────
   14.12 Footer — mobile layout
   Centre-align logo+socials, stack Stay Connected below it,
   and force the bottom bar (© + Terms/Privacy) to be visible.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .footer .footer-top .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    text-align: center !important;
  }
  .footer .footer-top .d-flex > div {
    margin-top: 0 !important;
  }
  /* Logo block: keep centred (image + social icons row) */
  .footer .footer-top .d-flex > div:first-child {
    text-align: center !important;
  }
  .footer .footer-top .d-flex > div:first-child img {
    margin-left: auto;
    margin-right: auto;
  }
  .footer .footer-top .d-flex .social-links {
    justify-content: center !important;
  }
  /* Stay Connected block: centred heading and contact list */
  .footer .footer-top .d-flex > div:nth-child(2) {
    width: 100% !important;
    text-align: center !important;
  }
  .footer .footer-top .d-flex > div:nth-child(2) .footer-title {
    text-align: center !important;
  }
  /* Centre the decorative underline under each footer heading on mobile
     (desktop keeps it left-anchored under the left-aligned heading) */
  .footer .footer-top .footer-title {
    position: relative;
  }
  .footer .footer-top .footer-title::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .footer .footer-top .footer-contact-list {
    text-align: center !important;
    padding-left: 0 !important;
    list-style: none;
  }
  .footer .footer-top .footer-contact-list li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    gap: 6px !important;
  }
  .footer .footer-top .footer-contact-list li .footer-icon {
    flex: 0 0 auto;
    width: 14px;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.85rem;
    line-height: 1;
  }
  .footer .footer-top .footer-contact-list li .footer-link {
    display: inline;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Exclusive Updates column: heading, description, newsletter input all centred */
  .footer .footer-top > .container > .row > .col-lg-6:last-child {
    margin-top: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: center !important;
  }
  .footer .footer-top > .container > .row > .col-lg-6:last-child .footer-title,
  .footer .footer-top > .container > .row > .col-lg-6:last-child .footer-text {
    text-align: center !important;
  }
  .footer .footer-top .footer-newsletter {
    justify-content: center !important;
    max-width: 340px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .footer .footer-top .footer-newsletter input {
    text-align: center !important;
  }
  .footer .footer-top .footer-newsletter input::placeholder {
    text-align: center !important;
  }
  /* Footer bottom bar (Terms & Privacy) — make sure it renders clearly on mobile */
  .footer-bottom {
    display: block !important;
    padding: 18px 12px !important;
  }
  .footer-bottom .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px;
  }
  .footer-bottom .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
    margin-bottom: 0 !important;
  }
  .footer-bottom-link {
    display: inline-block;
    margin: 0 8px;
    font-size: 0.82rem !important;
    color: var(--del-accent, #6B2D94) !important;
  }
}