/* ============================================================
   NILE MARBLE & GRANITE — Page-Wide Interactive Styles
   Custom Cursor · Card Shine · CTA Particles · Text Contrast
   Depth effects across all sections
   ============================================================ */

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── 1. CUSTOM CURSOR ──────────────────────────────────────── */
* { cursor: none !important; }

/* ── IMAGE PROTECTION ────────────────────────────────────────
   pointer-events:none removes the browser's "Save image as"
   tooltip on hover AND blocks drag-to-desktop.
   Clicks still work because they bubble up to parent <a>/div.
   ─────────────────────────────────────────────────────────── */
img {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

#cursorDot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #C9A84C;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  mix-blend-mode: normal;
}
#cursorDot.hover {
  width: 12px; height: 12px;
  background: #F5D675;
}

#cursorRing {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(201,168,76,0.65);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(0.2,0,0.2,1),
              height 0.25s cubic-bezier(0.2,0,0.2,1),
              border-color 0.25s,
              background 0.25s;
}
#cursorRing.hover {
  width: 56px; height: 56px;
  border-color: #C9A84C;
  background: rgba(201,168,76,0.06);
}

/* On mobile — restore default cursor */
@media (hover: none), (pointer: coarse) {
  * { cursor: auto !important; }
  #cursorDot, #cursorRing { display: none !important; }
}

/* ── 2. CARD SHINE (specular highlight, injected by JS) ─────── */
.card-shine {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
  top: 0; left: 0;
}

/* ── 3. CTA PARTICLE ────────────────────────────────────────── */
.cta-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #F5D675 0%, #C9A84C 60%, transparent 100%);
  pointer-events: none;
  z-index: 10;
  opacity: 1;
}

/* ── 4. HERO TEXT CONTRAST BOOST ────────────────────────────── */
/* White words */
.hero-title-new .hero-word:not(.hero-word-gold) {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7) !important;
}
/* Gold gradient words */
.hero-word-gold {
  filter: drop-shadow(0 2px 16px rgba(0,0,0,0.85)) drop-shadow(0 0 12px rgba(201,168,76,0.5));
}
.hero-subtitle-new {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 18px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.7) !important;
}
.hero-badge {
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  backdrop-filter: blur(12px) saturate(1.4) !important;
}
.hero-eyebrow-text {
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.hero-stat-num {
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
.hero-stat-label {
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  color: rgba(255,255,255,0.75) !important;
}

/* ── 5. SECTION TEXT CONTRAST ─────────────────────────────── */
.section-title {
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.text-gold {
  text-shadow: 0 0 20px rgba(201,168,76,0.35);
}
.section-subtitle,
.section-label {
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* ── 6. 3D CARD ENHANCEMENTS ─────────────────────────────────── */
.material-card,
.feature-item,
.dual-card,
.trust-item,
.step-item {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Material card overlay — always partially visible */
.material-card-overlay {
  background: linear-gradient(to top,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.75) 50%,
    rgba(0,0,0,0.1) 100%
  ) !important;
}

.material-card-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  color: #ffffff !important;
}
.material-card-cat {
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.material-card-desc {
  color: rgba(255,255,255,0.9) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Gold border on material card hover */
.material-card:hover {
  border: 1px solid rgba(201,168,76,0.5) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(201,168,76,0.2) !important;
}

/* ── 7. FEATURE ITEMS ─────────────────────────────────────── */
.feature-item {
  border: 1px solid rgba(201,168,76,0.08);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.feature-item:hover {
  border-color: rgba(201,168,76,0.35) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(201,168,76,0.12) !important;
}
.feature-title {
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* ── 8. STEP ITEMS ──────────────────────────────────────────── */
.step-num {
  font-size: 52px !important;
  font-weight: 800 !important;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #C9A84C, #F5D675, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.3));
}
.step-item {
  border-left: 2px solid rgba(201,168,76,0.15);
  padding-left: 24px !important;
  transition: border-color 0.3s;
}
.step-item:hover {
  border-left-color: rgba(201,168,76,0.6) !important;
}

/* ── 9. TRUST ITEMS ─────────────────────────────────────────── */
.trust-item {
  transition: background 0.3s, box-shadow 0.3s;
  border-radius: 12px;
  padding: 28px !important;
}
.trust-item:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 16px rgba(201,168,76,0.1) !important;
}
.trust-icon i {
  transition: all 0.3s;
}

/* ── 10. DUAL CARDS ──────────────────────────────────────────── */
.dual-card {
  transition: border-color 0.3s, box-shadow 0.3s;
}
.dual-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(201,168,76,0.15) !important;
}

/* ── 11. COUNTER ITEMS ───────────────────────────────────────── */
.counter-item {
  cursor: default;
}
.counter-num {
  font-size: 64px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #C9A84C 0%, #F5D675 45%, #C9A84C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -2px;
}
.counter-label {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65) !important;
}

/* ── 12. MARQUEE ITEMS ──────────────────────────────────────── */
.marquee-item {
  transition: color 0.3s, letter-spacing 0.3s, text-shadow 0.3s;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
}

/* ── 13. INTRO IMAGE PLACEHOLDER ────────────────────────────── */
.intro-img-placeholder {
  background: linear-gradient(145deg, #1a1510, #2a2015, #150e08) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  position: relative;
  overflow: hidden;
}
.intro-img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(201,168,76,0.06) 0%, transparent 60%);
  animation: introShimmer 4s ease-in-out infinite alternate;
}
@keyframes introShimmer {
  from { opacity: 0.3; transform: translateX(-10%); }
  to   { opacity: 1;   transform: translateX(10%);  }
}
.intro-img-placeholder i {
  color: rgba(201,168,76,0.5) !important;
}

/* ── 14. SECTION-WIDE 3D PERSPECTIVE ────────────────────────── */
.features-grid,
.materials-grid,
.dual-grid,
.trust-items,
.steps-grid {
  perspective: 1200px;
}

/* ── 15. CTA SECTION ENHANCEMENT ───────────────────────────── */
.cta-section {
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 30% 50%, rgba(201,168,76,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 75% 50%, rgba(201,168,76,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-title {
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* ── 16. YEARS PILL ─────────────────────────────────────────── */
.years-pill {
  background: linear-gradient(135deg, #C9A84C, #F5D675) !important;
  box-shadow: 0 8px 32px rgba(201,168,76,0.4), 0 2px 8px rgba(0,0,0,0.3) !important;
}
.yp-num {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #0a0807 !important;
}
.yp-text {
  color: rgba(10,8,7,0.75) !important;
  font-weight: 600 !important;
}

/* ── 17. INTRO FEATURES ──────────────────────────────────────── */
.intro-feature-icon {
  border: 1px solid rgba(201,168,76,0.4) !important;
  transition: background 0.3s, box-shadow 0.3s;
}
.intro-feature:hover .intro-feature-icon {
  background: rgba(201,168,76,0.15) !important;
  box-shadow: 0 0 16px rgba(201,168,76,0.3) !important;
}
.intro-feature {
  transition: transform 0.3s;
}
.intro-feature:hover {
  transform: translateX(6px);
}

/* ── 19. STONE GALLERY SECTION ────────────────────────────────── */
.stone-gallery-section {
  padding: 100px 0 120px;
  background: var(--dark-2, #0d0b08);
  border-top: 1px solid rgba(201,168,76,0.08);
  overflow: hidden;
}
.stone-gallery-head {
  text-align: center;
  margin-bottom: 64px;
}
.stone-gallery-head .section-subtitle {
  max-width: 520px;
  margin: 14px auto 0;
}

/* Grid: 4 columns on desktop, 2 on tablet, 1 on mobile */
.stone-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
@media (max-width: 1100px) {
  .stone-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 24px 18px; }
}
@media (max-width: 800px) {
  .stone-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}
@media (max-width: 480px) {
  .stone-gallery-section { padding: 56px 0 72px; }
  .stone-gallery-head { margin-bottom: 28px; }
  .stone-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
  .stone-3d-card { gap: 8px; min-width: 0; }
  .stone-3d-card .s3c-scene {
    aspect-ratio: 4 / 5;
    transform: perspective(480px) rotateY(-5deg) rotateX(2deg);
  }
  .s3c-name { font-size: 0.65rem; }
  .s3c-type { font-size: 6px; letter-spacing: 1px; }
  .s3c-cta { width: 20px; height: 20px; font-size: 7px; }
}

/* ── Each card ── */
.stone-3d-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
}

/* ── Organic stone shape — canvas texture fills this element ── */
.s3c-scene {
  width: 100%;
  aspect-ratio: 2/3;
  position: relative;
  overflow: hidden;  /* clips canvas + ::after to the border-radius shape */
  transform: perspective(600px) rotateY(-18deg) rotateX(6deg);
  transition: transform 0.5s cubic-bezier(0.2,0,0.2,1);
}
/* Procedural stone texture canvas or real image */
.s3c-scene canvas,
.s3c-scene img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* Polished surface highlight — always above the canvas texture */
.s3c-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.26) 0%, transparent 45%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
  z-index: 2;
}
.stone-3d-card:hover .s3c-scene {
  transform: perspective(600px) rotateY(-8deg) rotateX(3deg) translateY(-12px);
}

/* Info row */
.s3c-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.s3c-type {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(201,168,76,0.65);
  font-weight: 700;
  white-space: nowrap;
}
.s3c-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.9);
  flex: 1;
}
.s3c-cta {
  width: 26px; height: 26px;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(201,168,76,0.6);
  font-size: 9px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.stone-3d-card:hover .s3c-cta {
  background: rgba(201,168,76,0.15);
  border-color: var(--gold, #C9A84C);
  color: var(--gold, #C9A84C);
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════
   ORGANIC STONE SHAPES — gradient + border-radius per stone
   Marble → elongated, smooth rounded slab shape
   Granite → chunky, angular rock shape
   ══════════════════════════════════════════════════════════ */

/* ── PER-STONE: organic blob shape + depth shadows ──────────────
   Gradient backgrounds are now provided by the canvas texture.
   Only the border-radius (stone silhouette) and box-shadows
   (depth + hover glow) are defined here.
   ─────────────────────────────────────────────────────────────── */

/* Marble slabs — smooth elongated blob */
.stone-3d-card[data-stone="sinai-pearl"] .s3c-scene    { border-radius: 36% 64% 56% 44% / 30% 42% 58% 70%; }
.stone-3d-card[data-stone="galala"] .s3c-scene         { border-radius: 44% 56% 50% 50% / 36% 30% 70% 64%; }
.stone-3d-card[data-stone="zaafrana"] .s3c-scene       { border-radius: 38% 62% 58% 42% / 46% 36% 64% 54%; }
.stone-3d-card[data-stone="travertine"] .s3c-scene     { border-radius: 45% 55% 52% 48% / 33% 45% 55% 67%; }
.stone-3d-card[data-stone="wadi-el-melouk"] .s3c-scene { border-radius: 30% 70% 58% 42% / 36% 30% 70% 64%; }
.stone-3d-card[data-stone="silvia"] .s3c-scene         { border-radius: 40% 60% 55% 45% / 35% 40% 60% 65%; }
.stone-3d-card[data-stone="bronze"] .s3c-scene         { border-radius: 42% 58% 50% 50% / 38% 32% 68% 62%; }
.stone-3d-card[data-stone="milly-grey"] .s3c-scene     { border-radius: 35% 65% 52% 48% / 32% 44% 56% 68%; }

/* Granite chunks — angular, chunkier blob */
.stone-3d-card[data-stone="double-black"] .s3c-scene   { border-radius: 18% 24% 22% 28% / 24% 18% 30% 24%; }
.stone-3d-card[data-stone="rosa-el-nasr"] .s3c-scene   { border-radius: 22% 30% 26% 32% / 30% 22% 34% 26%; }
.stone-3d-card[data-stone="halayeb"] .s3c-scene        { border-radius: 26% 22% 30% 24% / 22% 28% 24% 32%; }
.stone-3d-card[data-stone="quesier-brown"] .s3c-scene  { border-radius: 20% 26% 24% 30% / 28% 20% 32% 26%; }
.stone-3d-card[data-stone="safaga"] .s3c-scene         { border-radius: 24% 28% 28% 30% / 26% 24% 36% 28%; }

/* Default depth shadows (applied to all unless overridden by JS on hover) */
.stone-3d-card .s3c-scene {
  box-shadow:
    inset -10px 0 18px rgba(0,0,0,0.40),
    inset 0 -8px 12px rgba(0,0,0,0.25),
    8px 22px 48px rgba(0,0,0,0.78);
}

/* Per-material hover glow */
.stone-3d-card[data-stone="sinai-pearl"]:hover    .s3c-scene { box-shadow: inset -10px 0 18px rgba(0,0,0,0.35), 8px 26px 55px rgba(0,0,0,0.65), 0 0 32px rgba(200,160,64,0.45); }
.stone-3d-card[data-stone="galala"]:hover         .s3c-scene { box-shadow: inset -8px 0 16px rgba(0,0,0,0.22), 8px 26px 52px rgba(0,0,0,0.55), 0 0 26px rgba(200,188,162,0.35); }
.stone-3d-card[data-stone="double-black"]:hover   .s3c-scene { box-shadow: inset -10px 0 18px rgba(0,0,0,0.45), 8px 28px 58px rgba(0,0,0,0.82), 0 0 28px rgba(138,130,118,0.40); }
.stone-3d-card[data-stone="zaafrana"]:hover       .s3c-scene { box-shadow: inset -10px 0 16px rgba(0,0,0,0.36), 8px 26px 54px rgba(0,0,0,0.68), 0 0 28px rgba(200,112,58,0.44); }
.stone-3d-card[data-stone="travertine"]:hover     .s3c-scene { box-shadow: inset -10px 0 16px rgba(0,0,0,0.28), 8px 26px 52px rgba(0,0,0,0.60), 0 0 24px rgba(188,162,96,0.38); }
.stone-3d-card[data-stone="wadi-el-melouk"]:hover .s3c-scene { box-shadow: inset -10px 0 18px rgba(0,0,0,0.34), 8px 26px 54px rgba(0,0,0,0.64), 0 0 30px rgba(218,182,28,0.50); }
.stone-3d-card[data-stone="rosa-el-nasr"]:hover   .s3c-scene { box-shadow: inset -10px 0 16px rgba(0,0,0,0.34), 8px 26px 54px rgba(0,0,0,0.62), 0 0 26px rgba(198,138,132,0.44); }
.stone-3d-card[data-stone="halayeb"]:hover        .s3c-scene { box-shadow: inset -10px 0 18px rgba(0,0,0,0.46), 8px 28px 58px rgba(0,0,0,0.80), 0 0 24px rgba(118,102,76,0.40); }
.stone-3d-card[data-stone="silvia"]:hover         .s3c-scene { box-shadow: inset -10px 0 16px rgba(0,0,0,0.30), 8px 26px 52px rgba(0,0,0,0.60), 0 0 26px rgba(180,180,180,0.40); }
.stone-3d-card[data-stone="bronze"]:hover         .s3c-scene { box-shadow: inset -10px 0 16px rgba(0,0,0,0.40), 8px 26px 54px rgba(0,0,0,0.70), 0 0 28px rgba(160,100,60,0.45); }
.stone-3d-card[data-stone="milly-grey"]:hover     .s3c-scene { box-shadow: inset -10px 0 16px rgba(0,0,0,0.35), 8px 26px 52px rgba(0,0,0,0.65), 0 0 26px rgba(150,150,150,0.40); }
.stone-3d-card[data-stone="quesier-brown"]:hover  .s3c-scene { box-shadow: inset -10px 0 18px rgba(0,0,0,0.42), 8px 28px 56px rgba(0,0,0,0.75), 0 0 28px rgba(140,80,40,0.45); }
.stone-3d-card[data-stone="safaga"]:hover         .s3c-scene { box-shadow: inset -10px 0 18px rgba(0,0,0,0.40), 8px 28px 56px rgba(0,0,0,0.70), 0 0 26px rgba(130,140,130,0.40); }

/* ── 20. HERO 3-D CONTAINER ──────────────────────────────────── */
#hero3DContainer {
  background: transparent;
}

/* ── 21. NAV HOVER GLOW ──────────────────────────────────────── */
.nav-links a {
  transition: color 0.25s, text-shadow 0.25s !important;
}
.nav-links a:hover,
.nav-links a.active {
  text-shadow: 0 0 16px rgba(201,168,76,0.5) !important;
}

/* ── 22. STONE GALLERY — 360° HOVER SPIN ────────────────────── */
.stone-3d-card { perspective: 900px; }
/* GSAP handles all rotation — remove the CSS hover transform override */

/* ── 23. WORLD COVERAGE MAP ─────────────────────────────────── */
.markets-map-wrap {
  position: relative;
  margin-bottom: 22px;
  background: rgba(10,8,5,0.6);
  border: 1px solid rgba(201,168,76,0.14);
  border-radius: 16px;
  padding: 18px 18px 14px;
  overflow: hidden;
}

/* ── Regional project numbers ── */
.markets-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.mn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 12px;
  background: rgba(10,8,5,0.55);
  border: 1px solid rgba(201,168,76,0.14);
  border-radius: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s;
}
.mn-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.mn-item:hover::before { opacity: 1; }
.mn-item:hover { border-color: rgba(201,168,76,0.32); }
.mn-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  font-family: var(--font-display, serif);
  color: #C9A84C;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(201,168,76,0.4);
}
.mn-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  font-weight: 600;
}
@media (max-width: 768px) {
  .markets-numbers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .markets-numbers { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mn-num { font-size: 1.8rem; }
}

#worldMap {
  width: 100%;
  height: 340px;
}

/* Override jsVectorMap defaults for luxury look */
.jvm-container {
  background: transparent !important;
}
.jvm-tooltip {
  background: rgba(10,8,5,0.92) !important;
  border: 1px solid rgba(201,168,76,0.35) !important;
  color: #C9A84C !important;
  font-family: inherit !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
.jvm-zoom-btn {
  display: none !important;
}

/* Map legend */
.map-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(201,168,76,0.12);
}
.ml-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
}
.ml-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ml-me   { background: #C9A84C; }
.ml-eu   { background: rgba(201,168,76,0.50); border: 1px solid #C9A84C; }
.ml-city { background: #C9A84C; border-radius: 50%; }

@media (max-width: 768px) {
  #worldMap { height: 220px; }
  .map-legend { gap: 16px; }
  .ml-item { font-size: 10px; }
}

/* ── 24. OUR LEGACY — CANVAS STONE PHOTO PLACEHOLDERS ──────── */
.legacy-canvas-photo {
  position: relative;
  overflow: hidden;
}
/* Canvas fills the placeholder */
.legacy-canvas-photo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
/* Vignette + colour-grade overlay */
.lcp-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.38) 0%,
      rgba(0,0,0,0.05) 35%,
      rgba(0,0,0,0.10) 65%,
      rgba(0,0,0,0.72) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
}
/* Bottom caption strip */
.lcp-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, transparent 100%);
  color: rgba(255,255,255,0.88);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.lcp-caption i {
  color: #C9A84C;
  font-size: 14px;
  flex-shrink: 0;
}
/* Small accent caption */
.lcp-caption-sm {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(0deg, rgba(0,0,0,0.62) 0%, transparent 100%);
  color: rgba(255,255,255,0.80);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}
.lcp-caption-sm i {
  color: #C9A84C;
  font-size: 11px;
  flex-shrink: 0;
}
/* Top "SINCE 1990" badge */
.lcp-top-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 4px;
  padding: 5px 10px;
  color: #C9A84C;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  backdrop-filter: blur(4px);
}

/* ── 25. CTA SECTION — GOLD LUXURY ORNAMENT ──────────────────── */
.cta-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
}
.cta-orn-line {
  flex: 1;
  max-width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.55), transparent);
}
.cta-orn-center {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #C9A84C;
}
.cta-orn-center i {
  font-size: 20px;
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.65));
  animation: ctaGemPulse 3s ease-in-out infinite;
}
.cta-orn-side {
  width: 6px;
  height: 6px;
  background: rgba(201,168,76,0.45);
  transform: rotate(45deg);
  border: 1px solid rgba(201,168,76,0.7);
}
@keyframes ctaGemPulse {
  0%, 100% { transform: rotate(0deg) scale(1);   opacity: 1; }
  50%       { transform: rotate(12deg) scale(1.12); opacity: 0.80; }
}

/* Corner frame brackets */
.cta-frame {
  position: absolute;
  inset: 28px 40px;
  pointer-events: none;
  z-index: 0;
}
.cf-tl, .cf-tr, .cf-bl, .cf-br {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: rgba(201,168,76,0.30);
  border-style: solid;
  transition: border-color 0.4s;
}
.cta-section:hover .cf-tl,
.cta-section:hover .cf-tr,
.cta-section:hover .cf-bl,
.cta-section:hover .cf-br { border-color: rgba(201,168,76,0.55); }
.cf-tl { top: 0;    left: 0;  border-width: 2px 0 0 2px; }
.cf-tr { top: 0;    right: 0; border-width: 2px 2px 0 0; }
.cf-bl { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.cf-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* Motivating tagline strip below CTA buttons */
.cta-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(201,168,76,0.12);
}
.cta-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
  font-weight: 600;
  transition: color 0.3s;
}
.cta-trust-item i {
  color: #C9A84C;
  font-size: 14px;
}
.cta-trust-item:hover { color: rgba(255,255,255,0.85); }
@media (max-width: 600px) {
  .cta-trust-strip { gap: 18px; }
  .cta-frame { display: none; }
}