/* ═══════════════════════════════════════════════════════════════
   GLAMOUR CASCADE — 3D Animations Layer
   Additive file — loaded after style.css & page CSS.
   Never changes colour theme or content; only adds depth & motion.
═══════════════════════════════════════════════════════════════ */

/* ── Design tokens (mirrors style.css vars for standalone use) ── */
:root {
  --gc3d-ease: cubic-bezier(.16, 1, .3, 1);
  --gc3d-gold:  #CB9468;
  --gc3d-goldL: rgba(203,148,104,.55);
  --gc3d-goldF: rgba(220,187,142,.4);
  --gc3d-goldD: rgba(138,80,40,.25);
  --gc3d-cream: rgba(253,246,238,.06);
}

/* ══════════════════════════════════════════════════════════════
   1. SCROLL PROGRESS BAR
══════════════════════════════════════════════════════════════ */
.gc-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--g4, #CB9468), var(--g8, #8A5028), var(--g4, #CB9468));
  background-size: 200% 100%;
  animation: gc-shimmer 2.4s linear infinite;
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(203,148,104,.65), 0 0 3px rgba(220,187,142,.4);
  transition: width .08s linear;
}

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

/* ══════════════════════════════════════════════════════════════
   2. NAV BACKDROP-FILTER FIX
   Moves blur to ::before so position:fixed drawer children
   are NOT clipped to nav height when page is scrolled.
══════════════════════════════════════════════════════════════ */
#nav.solid {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#nav.solid::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}

/* ══════════════════════════════════════════════════════════════
   3. 3D FADE-IN ENTRANCE OVERRIDE
   Replaces simple translateY with full 3D perspective entrance.
   Hooks into existing .js-fi / .fi / .on pattern from main.js.
   webkit prefixes required for iOS Safari 3D transitions.
══════════════════════════════════════════════════════════════ */
.js-fi .fi {
  opacity: 0;
  -webkit-transform: perspective(700px) rotateX(22deg) translateY(40px) scale(0.96);
          transform: perspective(700px) rotateX(22deg) translateY(40px) scale(0.96);
  -webkit-transition: opacity 0.72s var(--gc3d-ease), -webkit-transform 0.72s var(--gc3d-ease);
          transition: opacity 0.72s var(--gc3d-ease),         transform 0.72s var(--gc3d-ease);
  will-change: transform;
}

.js-fi .fi.on {
  opacity: 1;
  -webkit-transform: perspective(700px) rotateX(0deg) translateY(0) scale(1);
          transform: perspective(700px) rotateX(0deg) translateY(0) scale(1);
}

/* Stagger for grid children — augments main.js inline delays */
.js-fi .srv-grid   .srv-card.fi:nth-child(2) { transition-delay: 0.09s; }
.js-fi .srv-grid   .srv-card.fi:nth-child(3) { transition-delay: 0.18s; }
.js-fi .srv-grid   .srv-card.fi:nth-child(4) { transition-delay: 0.27s; }
.js-fi .courses-grid .c-card.fi:nth-child(2) { transition-delay: 0.09s; }
.js-fi .courses-grid .c-card.fi:nth-child(3) { transition-delay: 0.18s; }
.js-fi .courses-grid .c-card.fi:nth-child(4) { transition-delay: 0.27s; }
.js-fi .why-grid   .why-card.fi:nth-child(2) { transition-delay: 0.09s; }
.js-fi .why-grid   .why-card.fi:nth-child(3) { transition-delay: 0.18s; }
.js-fi .why-grid   .why-card.fi:nth-child(4) { transition-delay: 0.27s; }
.js-fi .team-grid  .tm-card.fi:nth-child(2)  { transition-delay: 0.09s; }
.js-fi .team-grid  .tm-card.fi:nth-child(3)  { transition-delay: 0.18s; }
.js-fi .team-grid  .tm-card.fi:nth-child(4)  { transition-delay: 0.27s; }
/* testi-grid replaced by carousel — stagger handled by carousel JS */

/* ══════════════════════════════════════════════════════════════
   4. HERO — CANVAS PARTICLES
══════════════════════════════════════════════════════════════ */
#gcParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════
   5. HERO — FLOATING ROSE-GOLD 3D SHAPES
══════════════════════════════════════════════════════════════ */
.gc-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.gc-shape {
  position: absolute;
  will-change: transform;
}

/* --- Diamonds (rotated squares) --- */
.gc-diamond {
  width: 36px; height: 36px;
  border: 1.8px solid var(--gc3d-goldL);
  transform: rotate(45deg);
  animation: gc-float 9s ease-in-out infinite;
}
.gc-diamond::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(220,187,142,.25);
}
.gc-d1 { top: 18%; left: 6%;  width: 28px; height: 28px; animation-duration:  8s; animation-delay: 0s; }
.gc-d2 { top: 65%; left: 4%;  width: 18px; height: 18px; animation-duration: 11s; animation-delay: -4s; border-color: rgba(220,187,142,.35); }
.gc-d3 { top: 22%; right: 5%; width: 48px; height: 48px; animation-duration: 12s; animation-delay: -6s; }
.gc-d4 { top: 75%; right: 7%; width: 22px; height: 22px; animation-duration:  9s; animation-delay: -2s; border-color: rgba(203,148,104,.3); }
.gc-d5 { top: 45%; left: 2%;  width: 14px; height: 14px; animation-duration: 14s; animation-delay: -8s; border-color: rgba(220,187,142,.3); }

/* --- Rings (circle outlines) --- */
.gc-ring {
  border-radius: 50%;
  border: 1.5px solid var(--gc3d-goldF);
  animation: gc-pulse-ring 7s ease-in-out infinite;
}
.gc-r1 { top: 40%; right: 3%; width: 64px; height: 64px; animation-delay: 0s; }
.gc-r2 { top: 10%; left: 15%; width: 40px; height: 40px; animation-delay: -3s; border-color: rgba(203,148,104,.3); }
.gc-r3 { top: 80%; left: 20%; width: 28px; height: 28px; animation-delay: -5s; border-color: rgba(220,187,142,.25); }

/* --- Petals (ellipses at angles) --- */
.gc-petal {
  border-radius: 50% 10% 50% 10%;
  border: 1.5px solid rgba(203,148,104,.3);
  animation: gc-spin-slow 18s linear infinite;
}
.gc-p1 { top: 55%; right: 8%; width: 42px; height: 22px; animation-duration: 20s; }
.gc-p2 { top: 30%; left: 11%; width: 30px; height: 14px; animation-duration: 16s; animation-direction: reverse; border-color: rgba(220,187,142,.3); }

/* --- Sparkle glyphs --- */
.gc-sparkle {
  font-size: 14px;
  color: var(--gc3d-goldL);
  animation: gc-twinkle 4s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(203,148,104,.55);
}
.gc-s1 { top: 20%; right: 14%; animation-delay: 0s;   font-size: 18px; }
.gc-s2 { top: 68%; left: 12%; animation-delay: -2s;   font-size: 12px; }
.gc-s3 { top: 85%; right: 18%; animation-delay: -3.5s; font-size: 10px; color: rgba(220,187,142,.5); }
.gc-s4 { top: 50%; right: 22%; animation-delay: -1.5s; font-size: 8px; }
.gc-s5 { top: 12%; left: 28%;  animation-delay: -4s;   font-size: 9px; }

/* --- Floating dots --- */
.gc-fdot {
  border-radius: 50%;
  background: var(--gc3d-goldL);
  animation: gc-float 10s ease-in-out infinite;
}
.gc-fdot1 { top: 35%; right: 12%; width: 5px;  height: 5px;  animation-delay: -1s;  }
.gc-fdot2 { top: 72%; right: 25%; width: 3px;  height: 3px;  animation-delay: -5s;  background: rgba(220,187,142,.4); }
.gc-fdot3 { top: 60%; left: 8%;   width: 4px;  height: 4px;  animation-delay: -3s;  }
.gc-fdot4 { top: 15%; right: 30%; width: 6px;  height: 6px;  animation-delay: -7s;  background: rgba(220,187,142,.35); }
.gc-fdot5 { top: 88%; left: 35%;  width: 3px;  height: 3px;  animation-delay: -2s;  }

/* --- Lines / streaks --- */
.gc-line {
  background: linear-gradient(90deg, transparent, rgba(203,148,104,.3), transparent);
  height: 1px;
  animation: gc-float 13s ease-in-out infinite;
}
.gc-l1 { top: 48%; right: 0; width: 80px; animation-delay: -4s; transform: rotate(-18deg); }
.gc-l2 { top: 32%; left: 0;  width: 60px; animation-delay: -9s; transform: rotate(12deg); }

/* ── Shape keyframes ── */
@keyframes gc-float {
  0%, 100% { transform: translateY(0px) rotate(0deg);   }
  33%       { transform: translateY(-14px) rotate(3deg); }
  66%       { transform: translateY(8px) rotate(-2deg);  }
}

/* for .gc-diamond which already has rotate(45deg) */
.gc-diamond.gc-d1 { animation-name: gc-float-diamond; }
.gc-diamond.gc-d2 { animation-name: gc-float-diamond; }
.gc-diamond.gc-d3 { animation-name: gc-float-diamond; }
.gc-diamond.gc-d4 { animation-name: gc-float-diamond; }
.gc-diamond.gc-d5 { animation-name: gc-float-diamond; }
@keyframes gc-float-diamond {
  0%, 100% { transform: rotate(45deg) translateY(0px);  }
  33%       { transform: rotate(48deg) translateY(-12px); }
  66%       { transform: rotate(43deg) translateY(7px);  }
}

@keyframes gc-pulse-ring {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%       { transform: scale(1.12); opacity: 0.35; }
}

@keyframes gc-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes gc-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.9) rotate(0deg); }
  40%       { opacity: 0.90; transform: scale(1.2) rotate(15deg); }
  70%       { opacity: 0.55; transform: scale(1.0) rotate(-5deg); }
}

/* ══════════════════════════════════════════════════════════════
   6. HERO CONTENT — 3D LAYERING
   Hero content sits above canvas + shapes
══════════════════════════════════════════════════════════════ */
#hero { position: relative; }
#hero .container { position: relative; z-index: 3; }
#hero .hero-scroll { position: relative; z-index: 3; }

/* ── 3D extrusion on hero heading ── */
#hero .hero-h1 {
  text-shadow:
    1px  1px  0 rgba(138,80,40,.60),
    2px  2px  0 rgba(138,80,40,.52),
    3px  3px  0 rgba(107,53,24,.44),
    4px  4px  0 rgba(107,53,24,.36),
    5px  5px  0 rgba(80,36,14,.28),
    6px  6px  0 rgba(60,24, 8,.20),
    7px  7px 14px rgba(0,0,0,.45);
}

/* ══════════════════════════════════════════════════════════════
   7. CARD 3D HOVER EFFECTS
══════════════════════════════════════════════════════════════ */

/* ── Service cards ── */
.srv-card {
  transition:
    transform 0.42s var(--gc3d-ease),
    box-shadow 0.42s ease;
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateY(0);
}
.srv-card:hover {
  transform: perspective(800px) rotateX(3deg) rotateY(-4deg) translateY(-8px);
  box-shadow: 0 24px 48px rgba(138,80,40,.22), 0 8px 20px rgba(203,148,104,.15);
}

/* ── Why/Benefit cards ── */
.why-card {
  transition:
    transform 0.42s var(--gc3d-ease),
    box-shadow 0.42s ease;
  transform-style: preserve-3d;
}
.why-card:hover {
  transform: perspective(800px) rotateX(5deg) translateY(-6px) scale(1.03);
  box-shadow: 0 20px 40px rgba(138,80,40,.18), 0 0 0 1px rgba(203,148,104,.2);
}

/* ── Course cards ── */
.c-card {
  transition:
    transform 0.42s var(--gc3d-ease),
    box-shadow 0.42s ease;
  transform-style: preserve-3d;
}
.c-card:hover {
  transform: perspective(800px) rotateX(-4deg) rotateY(3deg) translateY(-7px) scale(1.02);
  box-shadow: 0 22px 44px rgba(138,80,40,.2);
}

/* ── Team cards ── */
.tm-card,
.tm-card-lg {
  transition:
    transform 0.45s var(--gc3d-ease),
    box-shadow 0.45s ease;
  transform-style: preserve-3d;
}
.tm-card:hover,
.tm-card-lg:hover {
  transform: perspective(800px) rotateX(4deg) rotateY(-3deg) translateY(-8px);
  box-shadow: 0 24px 48px rgba(138,80,40,.22);
}

/* ── Testimonial cards ── */
.t-card {
  transition:
    transform 0.42s var(--gc3d-ease),
    box-shadow 0.42s ease;
  transform-style: preserve-3d;
}
.t-card:hover {
  transform: perspective(800px) rotateX(3deg) translateY(-5px);
  box-shadow: 0 18px 36px rgba(138,80,40,.18);
}

/* ── Gallery items ── */
.gal-item {
  transition:
    transform 0.38s var(--gc3d-ease),
    box-shadow 0.38s ease;
  transform-style: preserve-3d;
}
.gal-item:hover {
  transform: perspective(700px) rotateX(-3deg) scale(1.04);
  box-shadow: 0 16px 32px rgba(138,80,40,.25);
}

/* ── Value cards (about page) ── */
.val-card {
  transition:
    transform 0.42s var(--gc3d-ease),
    box-shadow 0.42s ease;
  transform-style: preserve-3d;
}
.val-card:hover {
  transform: perspective(800px) rotateX(5deg) rotateY(2deg) translateY(-6px);
  box-shadow: 0 20px 40px rgba(138,80,40,.18);
}

/* ── Step cards (academy page) ── */
.step-card {
  transition:
    transform 0.42s var(--gc3d-ease),
    box-shadow 0.42s ease;
}
.step-card:hover {
  transform: perspective(800px) rotateX(-4deg) translateY(-5px);
  box-shadow: 0 18px 36px rgba(138,80,40,.18);
}

/* ── Blog cards ── */
.blog-card {
  transition:
    transform 0.42s var(--gc3d-ease),
    box-shadow 0.42s ease;
  transform-style: preserve-3d;
}
.blog-card:hover {
  transform: perspective(800px) rotateX(3deg) rotateY(-2deg) translateY(-6px);
  box-shadow: 0 20px 40px rgba(138,80,40,.2);
}

/* ══════════════════════════════════════════════════════════════
   8. TILT CARDS (JS-driven)
   The .gc-tilt class is added by 3d-animations.js to cards
   that should track mouse position.
══════════════════════════════════════════════════════════════ */
.gc-tilt {
  /* base transform is managed by JS — transition only on mouseleave */
  transition: transform 0.45s var(--gc3d-ease), box-shadow 0.45s ease;
  transform-style: preserve-3d;
  position: relative;
}

.gc-tilt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(203,148,104,.18) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.gc-tilt:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   9. SECTION DIVIDER SHIMMER
   Thin rose-gold animated line between major sections
══════════════════════════════════════════════════════════════ */
.gc-divider-3d {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(203,148,104,.55) 35%,
    rgba(220,187,142,.8) 50%,
    rgba(203,148,104,.55) 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: gc-shimmer 3s linear infinite;
  margin: 0 auto;
  max-width: 60%;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   10. SCROLL-TO-TOP BUTTON 3D GLOW
══════════════════════════════════════════════════════════════ */
#stb {
  transition: transform 0.35s var(--gc3d-ease), box-shadow 0.35s ease, opacity 0.35s ease;
}
#stb:hover {
  transform: translateY(-4px) scale(1.1) perspective(200px) rotateX(8deg);
  box-shadow: 0 12px 28px rgba(138,80,40,.35), 0 0 0 3px rgba(203,148,104,.25);
}

/* ══════════════════════════════════════════════════════════════
   11. NAV CTA 3D GLOW
══════════════════════════════════════════════════════════════ */
.nav-cta a,
a.nav-cta {
  transition: transform 0.3s var(--gc3d-ease), box-shadow 0.3s ease !important;
}
.nav-cta a:hover,
a.nav-cta:hover {
  transform: perspective(300px) translateZ(4px);
  box-shadow: 0 6px 18px rgba(138,80,40,.3);
}

/* ══════════════════════════════════════════════════════════════
   12. STATS — 3D POP
══════════════════════════════════════════════════════════════ */
.stat {
  transition: transform 0.38s var(--gc3d-ease);
}
.stat:hover {
  transform: perspective(400px) translateZ(12px) scale(1.04);
}

/* ══════════════════════════════════════════════════════════════
   13. BUTTONS — 3D PRESS EFFECT
══════════════════════════════════════════════════════════════ */
.btn {
  transition: transform 0.25s var(--gc3d-ease), box-shadow 0.25s ease !important;
}
.btn:hover {
  transform: perspective(300px) translateZ(6px) translateY(-2px) !important;
}
.btn:active {
  transform: perspective(300px) translateZ(2px) translateY(1px) !important;
}

/* ══════════════════════════════════════════════════════════════
   14. MOBILE — Lighter 3D values for small screens
   Uses the webkit prefixes already set in section 3.
   Reduces perspective angle + translateY for smoother mobile perf.
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Lighter 3D entrance — works on all mobile browsers ── */
  .js-fi .fi {
    opacity: 0;
    -webkit-transform: perspective(500px) rotateX(14deg) translateY(28px) scale(0.97);
            transform: perspective(500px) rotateX(14deg) translateY(28px) scale(0.97);
    -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
            transition: opacity 0.6s ease,         transform 0.6s ease;
    will-change: transform;
  }
  .js-fi .fi.on {
    opacity: 1;
    -webkit-transform: perspective(500px) rotateX(0deg) translateY(0) scale(1);
            transform: perspective(500px) rotateX(0deg) translateY(0) scale(1);
  }

  /* ── Disable hover-only 3D (no hover on touch screens) ── */
  .srv-card:hover, .why-card:hover, .c-card:hover,
  .tm-card:hover, .tm-card-lg:hover, .t-card:hover,
  .gal-item:hover, .val-card:hover, .step-card:hover,
  .blog-card:hover, #stb:hover {
    transform: none !important;
    -webkit-transform: none !important;
  }

  /* ── Reduce floating shape count for performance ── */
  .gc-d3, .gc-d4, .gc-d5,
  .gc-r3, .gc-p1, .gc-p2,
  .gc-l1, .gc-l2,
  .gc-fdot4, .gc-fdot5 { display: none; }

  /* ── Hero heading: lighter text-shadow on small screens ── */
  #hero .hero-h1 { text-shadow: 2px 2px 8px rgba(0,0,0,.5) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-shape,
  .gc-scroll-progress,
  .gc-divider-3d { animation: none !important; }
  .js-fi .fi { transition: opacity 0.4s ease !important; transform: none !important; }
  .js-fi .fi.on { opacity: 1 !important; }
}

/* ══════════════════════════════════════════════════════════════
   15. ENHANCED GALLERY
   Editorial mosaic on homepage · gradient overlays ·
   category chip + title slide-up · zoom button · glow border
══════════════════════════════════════════════════════════════ */

/* ── Images always fill their container ── */
.gal-item img,
.gal-full-grid .gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(.16,1,.3,1);
}
.gal-item:hover img { transform: scale(1.08) !important; }

/* ── Gradient overlay (replaces flat tint) ── */
.gal-ov {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(26,10,2,.92)  0%,
    rgba(107,53,24,.52) 38%,
    rgba(26,10,2,.1)   68%,
    transparent        100%
  ) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 18px !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}
.gal-item:hover .gal-ov { opacity: 1 !important; }

/* Hide old bare expand icon — replaced by .gal-zoom */
.gal-ov > i { display: none !important; }

/* ── Category chip ── */
.gal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(203,148,104,.2);
  border: 1px solid rgba(203,148,104,.55);
  color: var(--g3, #DCBB8E);
  font-family: var(--ff-b, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 7px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.38s ease 0.05s, opacity 0.38s ease 0.05s;
}
.gal-chip i { font-size: 8px; }
.gal-item:hover .gal-chip { transform: translateY(0); opacity: 1; }

/* ── Title label ── */
.gal-label {
  font-family: var(--ff-h, serif);
  color: #fff;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  pointer-events: none;
  transform: translateY(12px);
  opacity: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  transition: transform 0.38s ease 0.1s, opacity 0.38s ease 0.1s;
}
.gal-item:hover .gal-label { transform: translateY(0); opacity: 1; }

/* ── Zoom button (top-right) ── */
.gal-zoom {
  position: absolute;
  top: 13px; right: 13px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(253,246,238,.1);
  border: 1px solid rgba(203,148,104,.5);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.5) rotate(-18deg);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), opacity 0.3s ease;
  z-index: 4;
}
.gal-item:hover .gal-zoom { transform: scale(1) rotate(0deg); opacity: 1; }
.gal-zoom:hover {
  background: rgba(203,148,104,.3);
  border-color: var(--g4, #CB9468);
  transform: scale(1.1) rotate(0deg) !important;
}

/* ── Featured item (first in homepage mosaic) ── */
.gc-gal-featured {
  box-shadow: 0 0 0 2px rgba(203,148,104,.3), 0 14px 36px rgba(138,80,40,.18);
}
.gc-gal-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 0 0 2px rgba(203,148,104,.0);
  transition: box-shadow 0.4s ease;
}
.gc-gal-featured:hover::before {
  box-shadow: inset 0 0 0 2px rgba(203,148,104,.65);
}
.gc-gal-featured:hover {
  box-shadow:
    0 0 0 2px rgba(203,148,104,.5),
    0 24px 48px rgba(138,80,40,.28),
    0 0 60px rgba(203,148,104,.12);
}

/* ─────────────────────────────────────────────
   HOMEPAGE MOSAIC GRID (12-col editorial layout)
───────────────────────────────────────────── */
#gallery-preview .gal-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-template-rows: 210px 210px 200px !important;
  gap: 10px !important;
}

/* Clear old nth-child placements from style.css */
#gallery-preview .gal-item { border-radius: 14px !important; }
#gallery-preview .gal-item:nth-child(1) { grid-column: 1 / 7  !important; grid-row: 1 / 3 !important; }
#gallery-preview .gal-item:nth-child(2) { grid-column: 7 / 10 !important; grid-row: 1 / 2 !important; }
#gallery-preview .gal-item:nth-child(3) { grid-column: 10 / 13 !important; grid-row: 1 / 2 !important; }
#gallery-preview .gal-item:nth-child(4) { grid-column: 7 / 10 !important; grid-row: 2 / 3 !important; }
#gallery-preview .gal-item:nth-child(5) { grid-column: 10 / 13 !important; grid-row: 2 / 3 !important; }
#gallery-preview .gal-item:nth-child(6) { grid-column: 1 / 5  !important; grid-row: 3 / 4 !important; }
#gallery-preview .gal-item:nth-child(7) { grid-column: 5 / 9  !important; grid-row: 3 / 4 !important; }
#gallery-preview .gal-item:nth-child(8) { grid-column: 9 / 13 !important; grid-row: 3 / 4 !important; }

/* ─────────────────────────────────────────────
   FULL GALLERY PAGE — masonry-feel equal grid
───────────────────────────────────────────── */
.gal-full-grid .gal-item {
  border-radius: 12px;
  transition: transform 0.4s var(--gc3d-ease), box-shadow 0.4s ease;
}
.gal-full-grid .gal-item:hover {
  transform: perspective(600px) rotateX(-2deg) scale(1.03) !important;
  box-shadow: 0 18px 40px rgba(138,80,40,.22);
}

/* ─────────────────────────────────────────────
   RESPONSIVE — Gallery
───────────────────────────────────────────── */
@media (max-width: 1100px) {
  #gallery-preview .gal-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: 180px 180px 180px 180px !important;
  }
  #gallery-preview .gal-item:nth-child(1) { grid-column: 1 / 5 !important; grid-row: 1 / 3 !important; }
  #gallery-preview .gal-item:nth-child(2) { grid-column: 5 / 7 !important; grid-row: 1 / 2 !important; }
  #gallery-preview .gal-item:nth-child(3) { grid-column: 5 / 7 !important; grid-row: 2 / 3 !important; }
  #gallery-preview .gal-item:nth-child(4) { grid-column: 1 / 3 !important; grid-row: 3 / 4 !important; }
  #gallery-preview .gal-item:nth-child(5) { grid-column: 3 / 5 !important; grid-row: 3 / 4 !important; }
  #gallery-preview .gal-item:nth-child(6) { grid-column: 5 / 7 !important; grid-row: 3 / 4 !important; }
  #gallery-preview .gal-item:nth-child(7) { grid-column: 1 / 4 !important; grid-row: 4 / 5 !important; }
  #gallery-preview .gal-item:nth-child(8) { grid-column: 4 / 7 !important; grid-row: 4 / 5 !important; }
}

@media (max-width: 768px) {
  #gallery-preview .gal-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  #gallery-preview .gal-item {
    height: 180px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  #gallery-preview .gal-item:nth-child(1) {
    grid-column: 1 / 3 !important;
    height: 240px !important;
  }
  .gal-label { font-size: 12px !important; }
  .gal-chip  { font-size: 8.5px !important; }
}

/* ══════════════════════════════════════════════════════════════
   18. TESTIMONIAL CAROUSEL
   CSS-only layout; JS (3d-animations.js) drives slide position.
   Uses transform: translateX on the track for smooth GPU-composited
   sliding — no scroll, no extra library.
══════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ── */
.gc-testi-carousel {
  position: relative;
  overflow: hidden;
  padding: 0 0 56px;          /* space below for dots */
}

/* ── Sliding track ── */
.gc-testi-track {
  display: flex;
  gap: 24px;
  -webkit-transition: -webkit-transform 0.55s cubic-bezier(.16,1,.3,1);
          transition:         transform 0.55s cubic-bezier(.16,1,.3,1);
  will-change: transform;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}
.gc-testi-track.is-dragging { cursor: grabbing; transition: none; }

/* ── Each slide ── */
.gc-testi-slide {
  flex: 0 0 calc(33.333% - 16px);   /* 3-up desktop */
  min-width: 0;
}

/* ── Quote mark decoration ── */
.gc-quote-icon {
  font-size: 48px;
  line-height: 1;
  color: var(--gc3d-goldL);
  margin-bottom: -8px;
  display: block;
  font-family: Georgia, serif;
  opacity: 0.7;
}

/* ── Prev / Next arrow buttons ── */
.gc-testi-btn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-60%);
          transform: translateY(-60%);   /* slightly above centre (above dots space) */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(253,246,238,.08);
  border: 1.5px solid rgba(203,148,104,.45);
  color: var(--gc3d-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: background 0.28s ease, border-color 0.28s ease,
                      -webkit-transform 0.28s cubic-bezier(.16,1,.3,1);
          transition: background 0.28s ease, border-color 0.28s ease,
                              transform 0.28s cubic-bezier(.16,1,.3,1);
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gc-testi-btn:hover {
  background: rgba(203,148,104,.22);
  border-color: var(--gc3d-gold);
  -webkit-transform: translateY(-60%) scale(1.1);
          transform: translateY(-60%) scale(1.1);
}
.gc-testi-btn:active {
  -webkit-transform: translateY(-60%) scale(0.95);
          transform: translateY(-60%) scale(0.95);
}
.gc-testi-btn.gc-btn-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.gc-testi-prev { left: -10px; }
.gc-testi-next { right: -10px; }

/* ── Dot indicators ── */
.gc-testi-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
}
.gc-testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(203,148,104,.3);
  border: 1.5px solid rgba(203,148,104,.5);
  cursor: pointer;
  -webkit-transition: background 0.3s ease, -webkit-transform 0.3s ease, width 0.3s ease;
          transition: background 0.3s ease,         transform 0.3s ease, width 0.3s ease;
}
.gc-testi-dot.active {
  background: var(--gc3d-gold);
  border-color: var(--gc3d-gold);
  width: 24px;
  border-radius: 4px;
  -webkit-transform: none;
          transform: none;
  box-shadow: 0 0 10px rgba(203,148,104,.5);
}
.gc-testi-dot:hover:not(.active) {
  background: rgba(203,148,104,.55);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

/* ── Fade-in active slide(s) — subtle depth ── */
.gc-testi-slide {
  -webkit-transition: opacity 0.45s ease, -webkit-transform 0.45s ease;
          transition: opacity 0.45s ease,         transform 0.45s ease;
  opacity: 0.45;
  -webkit-transform: scale(0.96);
          transform: scale(0.96);
}
.gc-testi-slide.gc-slide-active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .gc-testi-slide {
    flex: 0 0 calc(50% - 12px);   /* 2-up on tablet */
  }
}
@media (max-width: 600px) {
  .gc-testi-slide {
    flex: 0 0 100%;               /* 1-up on mobile */
  }
  .gc-testi-prev { left: 4px; }
  .gc-testi-next { right: 4px; }
  .gc-testi-btn {
    width: 38px;
    height: 38px;
  }
}

/* ══════════════════════════════════════════════════════════════
   16. FIX — Full gallery grid nth-child bleed
   style.css has unscoped .gal-item:nth-child(1/5) span rules
   that apply inside .gal-full-grid too. Reset them here.
══════════════════════════════════════════════════════════════ */
.gal-full-grid .gal-item:nth-child(1) {
  grid-column: auto !important;
  grid-row:    auto !important;
}
.gal-full-grid .gal-item:nth-child(5) {
  grid-column: auto !important;
}

/* ══════════════════════════════════════════════════════════════
   17. FIX — Horizontal scroll caused by floating shapes / canvas
   Clip hero children strictly within the section bounds.
══════════════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

#hero {
  overflow: hidden;
}