/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: #000;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  overflow-x: hidden;
}

/* ============================================================
   SMOOTH SCROLL
   ============================================================ */
html { scroll-behavior: smooth; }

/* ============================================================
   NAVBAR — sticky, scrolled state, active links
   ============================================================ */
.navbar {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(0,0,0,0.92);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  border-bottom: 1px solid rgba(180,140,40,0.15);
  backdrop-filter: blur(12px);
  transition: background 0.3s, box-shadow 0.3s;
}
.navbar.scrolled {
  background: rgba(5,3,1,0.97);
  box-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.navbar-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.navbar-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-size: 20px;
  font-weight: 800;
  color: #D8A73A;
  letter-spacing: 0.05em;
}

.brand-sub {
  font-size: 10px;
  color: #888;
  letter-spacing: 0.12em;
  font-weight: 400;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  justify-content: center;
  padding: 0 20px;
}

.nav-link {
  font-size: 11px;
  font-weight: 700;
  color: rgba(200,201,202,0.8);
  text-decoration: none;
  letter-spacing: 0.07em;
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: #C8870A;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
}
.nav-link:hover { color: #D8A73A; }
.nav-link:hover::after,
.nav-link.active { color: #D8A73A; }
.nav-link.active::after { transform: scaleX(1); }

/* Hamburger */
.navbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.navbar-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: #D8A73A;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.navbar-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-hamburger.open span:nth-child(2) { opacity: 0; }
.navbar-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 498;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(4px);
}
.nav-drawer-overlay.open { opacity: 1; pointer-events: all; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 85vw);
  background: #F7F4ED;
  z-index: 499;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 32px;
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.35);
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-close {
  align-self: flex-end;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}

.nav-drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E0D4B8;
}

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.nav-drawer-link {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1A1310;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: color 0.2s, padding-left 0.2s;
}
.nav-drawer-link:hover,
.nav-drawer-link.active { color: #C8870A; padding-left: 6px; }

.nav-drawer-ctas {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.nav-drawer-call, .nav-drawer-wa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.nav-drawer-call { background: #1A1310; color: #fff; }
.nav-drawer-wa   { background: #25D366; color: #fff; }

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 44px;
  background: transparent;
  border: 1.5px solid #A07010;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: #fff;
    font-size: 14px;
}

.btn-nav-cta:hover { border-color: #D8A73A; box-shadow: 0 0 10px rgba(216,167,58,0.25); }

.btn-nav-cta span {
  font-size: 11.5px;
  font-weight: 700;
  color: #D4A03E;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.btn-nav-phone {
  width: 44px;
  height: 44px;
  border: 1.5px solid #A07010;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.btn-nav-phone img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 760px;
  background: #050302;
  overflow: hidden;
}

/* ── LAYER 1: Stage Background ── */
.hero-stage-bg {
  position: absolute;
  right: -2%;
  top: 0;
  width: 85%;
  height: 100%;
  z-index: 0;
}

.hero-stage-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% top;
  display: block;
}

/* Gradient fade from left (black) into the stage */
.hero-stage-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #050302 0%, rgba(5,3,2,0.55) 22%, rgba(5,3,2,0) 42%);
  z-index: 1;
}

/* Vignette on right edge */
.hero-stage-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.25) 0%, transparent 25%);
  z-index: 1;
}

/* Overall hero overlay for depth — sits above fx layer */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.28) 100%);
  z-index: 4;
}

/* ── LAYER 4: CONTENT (text + floating cards) ── */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: stretch;
}

/* LEFT: text column ~40% */
.hero-left {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 40px 40px 52px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(200,150,40,0.7);
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 26px;
  box-shadow: 0 0 12px rgba(200,150,40,0.2);
}

.hero-badge img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.hero-badge-text {
  font-size: 11px;
  font-weight: 700;
  color: #C49820;
  letter-spacing: 0.05em;
}

.hero-h1-white {
  font-size: 50px;
  font-weight: 700;
  color: #EFEFEF;
  line-height: 1.1;
  margin-bottom: 2px;
}

.hero-h1-gold1 {
  font-size: 80px;
  font-weight: 900;
  color: #D4A03E;
  line-height: 1.0;
  margin-bottom: 0;
  text-shadow: 0 0 40px rgba(212,160,62,0.25);
}

.hero-h1-gold2 {
  font-size: 80px;
  font-weight: 900;
  color: #C48E2E;
  line-height: 1.0;
  margin-bottom: 22px;
  text-shadow: 0 0 40px rgba(196,142,46,0.25);
}

.hero-services {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 32px;
}

.services-row {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.svc {
  font-size: 12.5px;
  color: #A8A9AA;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.svc-dot {
  margin: 0 8px;
  color: #B07820;
  font-size: 14px;
  line-height: 1;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Gold filled CTA */
.btn-hero-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  height: 62px;
  min-width: 240px;
  background: linear-gradient(135deg, #BF8800 0%, #E5B428 40%, #BF8800 100%);
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(229,180,40,0.35);
  transition: box-shadow 0.25s, filter 0.25s;
}

.btn-hero-primary:hover {
  box-shadow: 0 6px 28px rgba(229,180,40,0.55);
  filter: brightness(1.08);
}

.btn-hero-primary img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.btn-hero-primary .btn-label {
  font-size: 13px;
  font-weight: 800;
  color: #1A0D00;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

/* Dark bordered CTA */
.btn-hero-secondary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  height: 62px;
  background: rgba(0,0,0,0.5);
  border: 1.5px solid #9A6C08;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.btn-hero-secondary:hover {
  border-color: #D4A03E;
  box-shadow: 0 0 16px rgba(212,160,62,0.25);
}

.btn-hero-secondary img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.btn-hero-secondary .btn-label {
  font-size: 13px;
  font-weight: 700;
  color: #C8C9CA;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

/* RIGHT: floating card stage area ~60% */
.hero-right {
  flex: 1;
  position: relative;
}

/* Floating category cards */
.float-card {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(200,160,60,0.65);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 12px rgba(180,140,40,0.2);
  z-index: 5;
  transition: transform 0.3s, box-shadow 0.3s;
}

.float-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 20px rgba(200,160,40,0.4);
  z-index: 8;
}

.float-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.float-card .fc-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 8px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #E8E8E8;
  letter-spacing: 0.12em;
}

/* -------------------------------------------------------
   Card positions — surround the center singer with overlap
   Left col: LIVE SINGERS / DANCERS / MUSICIANS
   Right col: COMEDIANS / SOUND & LIGHT / STAGE PRODUCTION
   ------------------------------------------------------- */

/* Left col top: LIVE SINGERS — top-left, tilted outward */
.fc-live-singers {
  left: -0.5%;
  top: 1%;
  width: 26%;
  height: 29%;
  transform: rotate(-5deg);
  z-index: 6;
}

/* Left col mid: DANCERS — nudged right, slight gap from top card */
.fc-dancers {
  left: 3%;
  top: 35%;
  width: 22%;
  height: 26%;
  transform: rotate(3deg);
  z-index: 7;
}

/* Left col bot: MUSICIANS — pulled left, larger, overlaps bottom */
.fc-musicians {
  left: -1%;
  top: 65%;
  width: 27%;
  height: 27%;
  transform: rotate(-4.5deg);
  z-index: 6;
}

/* Right col top: COMEDIANS — top-right, strong outward tilt */
.fc-comedians {
  right: -1%;
  top: 0%;
  width: 26%;
  height: 27%;
  transform: rotate(5.5deg);
  z-index: 6;
}

/* Right col mid: SOUND & LIGHT — inset more, smaller, subtle tilt */
.fc-sound-light {
  right: 2%;
  top: 30%;
  width: 22%;
  height: 27%;
  transform: rotate(-1.5deg);
  z-index: 7;
}

/* Right col bot: STAGE PRODUCTION — pulled right, deeper tilt */
.fc-stage-prod {
  right: -0.5%;
  top: 61%;
  width: 25%;
  height: 28%;
  transform: rotate(4deg);
  z-index: 6;
}

/* ============================================================
   OCCASIONS SECTION
   ============================================================ */
.occasions {
  width: 100%;
  background: #060400;
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(200,160,50,0.3);
  box-shadow: 0 -2px 20px rgba(180,140,40,0.08) inset;
}

.occasions-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.occ-rule {
  flex: 1;
  max-width: 160px;
  height: 1.5px;
  background: linear-gradient(to right, transparent, rgba(210,160,50,0.85), transparent);
  position: relative;
  box-shadow: 0 0 6px rgba(200,155,40,0.35);
}

.occ-rule::before,
.occ-rule::after {
  content: '◆';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 7px;
  color: rgba(210,160,50,0.9);
  text-shadow: 0 0 5px rgba(210,160,50,0.6);
}

.occ-rule::before { left: 0; }
.occ-rule::after { right: 0; }

.occ-title {
  font-size: 15px;
  font-weight: 700;
  color: #D4A830;
  letter-spacing: 0.16em;
  white-space: nowrap;
  margin: 0;
  text-shadow: 0 0 18px rgba(212,168,48,0.3);
}

.occasions-grid {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 7px;
}

.occ-card {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(200,160,50,0.5);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 6px rgba(180,140,40,0.08);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.occ-card:hover {
  border-color: rgba(220,170,60,0.85);
  box-shadow: 0 4px 20px rgba(0,0,0,0.65), 0 0 14px rgba(200,160,40,0.35);
}

.occ-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.occ-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.22) 40%,
    rgba(0,0,0,0.32) 100%);
  z-index: 1;
}

.occ-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 130px 8px 12px;
  gap: 5px;
}

.occ-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.occ-label {
  font-size: 11px;
  font-weight: 700;
  color: #D0D1D1;
  text-align: center;
  letter-spacing: 0.07em;
  line-height: 1.35;
}

.occ-arrow {
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-top: 2px;
}

/* ============================================================
   LAYER 2: MAIN SINGER
   ─ Replace .hero-singer-img src to swap the performer.
   ─ Stage, lighting, cards and layout are unaffected.
   ============================================================ */
/* ============================================================
   LAYER 2: MAIN SINGER — frameless, borderless, blended layer
   ─ No card, no border, no border-radius, no overflow clip.
   ─ The singer image blends into the stage via CSS masking.
   ─ To swap the performer: change ONLY the <img src> in HTML.
   ─ Use a transparent PNG/WebP cutout for best results.
   ============================================================ */
.hero-singer-layer {
  position: absolute;
  /* Centered in the right 58% showcase area */
  left: 26%;
  bottom: 0;
  width: 58%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* No background, no border, no overflow: visible so nothing clips */
  background: transparent;
}

.hero-singer-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* Tall full-height figure */
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  /* Blend bottom into stage floor, sides fade naturally */
  -webkit-mask-image:
    linear-gradient(to top,  transparent 0%,  black 12%, black 88%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%,  black 92%, transparent 100%);
  mask-image:
    linear-gradient(to top,  transparent 0%,  black 12%, black 88%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%,  black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  filter: brightness(1.06) contrast(1.04);
}

/* ============================================================
   LAYER 3: LIGHTING & EFFECTS
   ============================================================ */
.hero-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 3;        /* above singer, below content */
  pointer-events: none;
  overflow: hidden;
}

/* ── Central spotlight cone (top-center → stage floor) ── */
.fx-spotlight {
  position: absolute;
  transform-origin: top center;
}

.fx-spot-center {
  top: -5%;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 220px;
  height: 110%;
  background: linear-gradient(to bottom,
    rgba(255,210,80,0.18) 0%,
    rgba(255,190,50,0.09) 40%,
    rgba(255,160,20,0.0) 100%);
  clip-path: polygon(38% 0%, 62% 0%, 85% 100%, 15% 100%);
}

.fx-spot-left {
  top: -5%;
  left: 24%;
  transform: rotate(12deg);
  width: 140px;
  height: 90%;
  background: linear-gradient(to bottom,
    rgba(255,180,50,0.12) 0%,
    rgba(255,150,30,0.04) 60%,
    transparent 100%);
  clip-path: polygon(35% 0%, 65% 0%, 90% 100%, 10% 100%);
}

.fx-spot-right {
  top: -5%;
  right: 22%;
  transform: rotate(-12deg);
  width: 140px;
  height: 90%;
  background: linear-gradient(to bottom,
    rgba(255,180,50,0.12) 0%,
    rgba(255,150,30,0.04) 60%,
    transparent 100%);
  clip-path: polygon(35% 0%, 65% 0%, 90% 100%, 10% 100%);
}

/* ── Gold atmospheric haze around the singer ── */
.fx-gold-haze {
  position: absolute;
  left: 22%;
  top: 10%;
  width: 56%;
  height: 75%;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(255,190,60,0.12) 0%,
    rgba(220,150,30,0.06) 45%,
    transparent 70%);
  border-radius: 50%;
}

/* ── Diagonal light rays (decorative streaks) ── */
.fx-rays {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255,210,80,0.06) 0%, transparent 35%),
    linear-gradient(55deg, rgba(255,200,60,0.05) 0%, transparent 30%),
    linear-gradient(160deg, rgba(255,180,40,0.04) 0%, transparent 28%);
}

/* ── Floor glow under singer's feet ── */
.fx-floor-glow {
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 160px;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(220,160,40,0.28) 0%,
    rgba(180,120,20,0.10) 45%,
    transparent 70%);
}

/* ============================================================
   SERVICES SECTION — Light theme, stacked category rows
   ============================================================ */
.services-section {
  width: 100%;
  background: #F7F4ED;
  padding: 52px 0 68px;
  border-top: 1px solid #E0D4B8;
  position: relative;
  overflow: hidden;
}

/* Gold decorative dot patterns on left and right sides */
.services-section::before,
.services-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(200,135,10,0.18) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.services-section::before { left: 0; }
.services-section::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.7) 0%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,0.7) 0%, transparent 100%);
}

/* ── Section Header ── */
.svc-section-header {
  text-align: center;
  padding: 0 24px 40px;
  position: relative;
  z-index: 1;
}

.svc-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}

.svc-rule-line {
  display: block;
  width: 60px;
  height: 1.5px;
  background: linear-gradient(to right, transparent, rgba(200,140,50,0.6), transparent);
}

.svc-small-label {
  font-size: 11px;
  font-weight: 700;
  color: #C8870A;
  letter-spacing: 0.22em;
}

.svc-main-heading {
  font-size: 40px;
  font-weight: 800;
  color: #1A1A1A;
  line-height: 1.15;
  margin-bottom: 14px;
}

.svc-sub-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
}

/* ── Panels — stacked rows, all always visible ── */
.svc-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 28px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.svc-panel {
  display: none;
}
.svc-panel.active {
  display: block;
}

/* White card wrapper with shadow — matches reference */
.svc-card-wrap {
  display: grid;
  grid-template-columns: 359px 1fr;
  gap: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(220,200,160,0.35);
}

/* ── Left: Panel Image — large, dominant ── */
.svc-panel-img-wrap {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  flex-shrink: 0;
}

.svc-panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.svc-panel-img-wrap:hover .svc-panel-img { transform: scale(1.03); }

.svc-panel-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
}

/* "Perfect For" dark card overlay at bottom of image */
.svc-img-overlay-card {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  background: rgba(10,8,5,0.82);
  border: 1px solid rgba(210,160,50,0.35);
  border-radius: 12px;
  padding: 14px 16px 16px;
  backdrop-filter: blur(4px);
}

.svc-overlay-card-label {
  font-size: 11px;
  font-weight: 700;
  color: #C8A040;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.svc-overlay-card-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.svc-overlay-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #B0A888;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── Right: Panel Content ── */
.svc-panel-content {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
}

/* Title row: icon badge + heading side by side */
.svc-panel-title-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}

/* Square icon badge */
.svc-panel-badge {
  width: 64px;
  height: 64px;
  background: rgba(200,135,10,0.1);
  border: 1px solid rgba(200,135,10,0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.svc-badge-weddings { background: rgba(194,24,91,0.08); border-color: rgba(194,24,91,0.2); }
.svc-badge-private  { background: rgba(0,121,107,0.08); border-color: rgba(0,121,107,0.2); }
.svc-badge-birthday { background: rgba(123,31,162,0.08); border-color: rgba(123,31,162,0.2); }
.svc-badge-college  { background: rgba(230,81,0,0.08); border-color: rgba(230,81,0,0.2); }
.svc-badge-cultural { background: rgba(21,101,192,0.08); border-color: rgba(21,101,192,0.2); }
.svc-badge-engagements { background: rgba(183,28,28,0.08); border-color: rgba(183,28,28,0.2); }
.svc-badge-luxury   { background: rgba(184,134,11,0.08); border-color: rgba(184,134,11,0.2); }

.svc-panel-title {
  font-size: 29px;
  font-weight: 900;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin-bottom: 6px;
}

/* Thin colored underline below title */
.svc-panel-title-underline {
  height: 2px;
  width: 40px;
  background: #C8870A;
  border-radius: 2px;
}

.svc-gold { color: #C8870A; }

.svc-panel-desc {
  font-size: 13.5px;
  color: #666;
  line-height: 1.65;
  margin-bottom: 16px;
}

/* "CHOOSE YOUR EVENT TYPE" label above type cards */
.svc-choose-label {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ── Service Type Cards — horizontal row of large tiles ── */
.svc-type-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 0;
  background: #fff;
  overflow: hidden;
}
/* After JS init, .svc-type-grid is emptied — hide the empty shell */
.svc-type-grid:empty {
  display: none;
}

.svc-type-card {
  flex: 1 0 11%;
  min-width: 100px;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 10px 18px;
  background: #fff;
  border: 1px solid #e8dcc8;
  border-radius: 0;
  color: #888;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  min-height: 96px;
}



.svc-type-card:hover {
  background: #FFFBF0;
  color: #C8870A;
}

.svc-type-card.active {
  background: #FFFBF0;
  color: #C8870A;
  border: 1.5px solid #C8870A;
  border-radius: 0;
  z-index: 1;
}

/* ── Expanded Content Box — 3-column horizontal layout ── */
.svc-expanded {
  max-height: 0;
  overflow: hidden;
  /* Smooth height slide */
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      margin-top: 10px;
}

.svc-expanded.open { /* max-height set via JS */ }

/* Inner wrapper handles opacity/translate separately for smooth reveal */
.svc-exp-inner {
  display: flex;
  align-items: stretch;
  background: #FAFAF6;
  border: 1.5px solid #E8DCC8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0;
  /* Content reveal animation */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

/* Hidden state for content crossfade */
.svc-exp-inner.content-hidden {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Active card connector: a colored tab on the bottom edge of the active card
   that visually "points" into the expanded box below */
.svc-type-card {
  position: relative;
}
.svc-type-card.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 7px solid #E8DCC8;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.2s;
}

/* Inner triangle — accent colored fill */
.svc-type-card.active::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FAFAF6;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.2s;
}

/* Left column: title + description */
.svc-exp-left {
  flex: 0 0 210px;
  padding: 18px 20px 18px 18px;
  border-right: 1px solid #EEE5D4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* Middle column: services grid */
.svc-exp-mid {
  flex: 1;
  padding: 16px 16px 16px 18px;
  border-right: 1px solid #EEE5D4;
  display: flex;
  flex-direction: column;
}

/* Right column: CTA button */
.svc-exp-right {
  flex: 0 0 170px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

/* Small helper text below CTA */
.svc-cta-sub {
  font-size: 10px;
  color: #AAA;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.svc-exp-title {
  font-size: 12px;
  font-weight: 800;
  color: #C8870A;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1.3;
}

.svc-exp-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.65;
}

.svc-exp-included-label {
  font-size: 9px;
  font-weight: 700;
  color: #C8870A;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Services icon grid — single row across */
.svc-included-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,135,10,0.35) transparent;
}
.svc-included-grid::-webkit-scrollbar {
  height: 3px;
}
.svc-included-grid::-webkit-scrollbar-track {
  background: transparent;
}
.svc-included-grid::-webkit-scrollbar-thumb {
  background: rgba(200,135,10,0.35);
  border-radius: 2px;
}

.svc-included-item {
  flex: 1 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #555;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  min-width: 64px;
  padding: 8px 4px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #F0E8D4;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.svc-included-item:hover {
  background: #FFFBF0;
  border-color: #DEC88A;
  color: #8A5A00;
}

.svc-included-item svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  opacity: 0.75;
}

.svc-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 48px;
  background: #C8870A;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(200,135,10,0.35);
  transition: box-shadow 0.25s, transform 0.2s, filter 0.25s;
  text-align: center;
  width: 100%;
}

.svc-cta-btn:hover {
  box-shadow: 0 6px 20px rgba(200,135,10,0.45);
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.svc-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(200,135,10,0.3);
}

/* ── Wedding section special layout ── */
.svc-wedding-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 16px;
}

.svc-wedding-left {
  flex: 0 0 290px;
  padding-right: 28px;
  border-right: 1px solid #EEE5D4;
}

.svc-wedding-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Wedding type cards — single-row carousel (same as other panels) */
.svc-type-grid-wedding {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap ;
  grid-template-columns: unset;
  gap: 0;
  margin-bottom: 0;
}

.svc-type-grid-wedding .svc-type-card {
  border-right: 1px solid #E8DCC8;
  
}

.svc-type-grid-wedding .svc-type-card:last-child { border-right: none; }

.svc-wedding-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  height: 44px;
  background: transparent;
  color: #C2185B;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 1.5px solid #C2185B;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.svc-wedding-cta-btn:hover {
  background: #C2185B;
  color: #fff;
}

.svc-wedding-arrow-btn {
  align-self: flex-end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #E0D4B8;
  background: #fff;
  color: #888;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}

.svc-wedding-arrow-btn:hover {
  border-color: #C2185B;
  color: #C2185B;
}

/* ── Collapsed List — hidden, keeping for JS compat ── */
.svc-collapsed-list { display: none; }
.svc-collapsed-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.svc-collapsed-icon { flex-shrink: 0; display: flex; }
.svc-collapsed-label { flex: 1; font-size: 13.5px; font-weight: 600; color: #555; }
.svc-collapsed-plus { font-size: 20px; color: #C8C0A8; font-weight: 300; }
.svc-collapsed-item.expanded .svc-collapsed-label { color: #C8870A; }
.svc-collapsed-item.expanded .svc-collapsed-plus  { color: #C8870A; }

/* ============================================================
   TABLET RESPONSIVE — services panel content area
   ─ Between 601px and 900px: panel content squeezes, so allow
     the svc-exp-inner to scroll horizontally instead of clipping.
   ============================================================ */
@media (max-width: 900px) and (min-width: 601px) {
  .svc-card-wrap {
    grid-template-columns: 280px 1fr;
  }

  /* Allow expanded box to scroll horizontally on mid tablets */
  .svc-exp-inner {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(200,135,10,0.3) transparent;
  }
  .svc-exp-inner::-webkit-scrollbar { height: 3px; }
  .svc-exp-inner::-webkit-scrollbar-track { background: transparent; }
  .svc-exp-inner::-webkit-scrollbar-thumb { background: rgba(200,135,10,0.3); border-radius: 2px; }

  .svc-exp-left  { flex: 0 0 180px; }
  .svc-exp-right { flex: 0 0 140px; }
}

/* ============================================================
   MOBILE RESPONSIVE
   ─ Desktop layout is fully preserved above 768px.
   ─ Below 768px: single-column stack.
   ============================================================ */

  @media only screen and (min-width:768px) and (max-width:1023px){
    .svc-card-wrap{display: block;}
    .svc-wedding-right{overflow-x: scroll;
    width: 100%;
    scrollbar-width: none;}
    .svc-type-grid-wedding{    overflow-x: scroll;        padding-bottom: 15px;}
    .svc-type-grid{    overflow-x: scroll;
    overflow-y: hidden;}
  }
   
@media (max-width: 768px) {

   .svc-card-wrap{display: block;}
    .svc-wedding-right{overflow-x: scroll;
    width: 100%;
    scrollbar-width: none;}
    .svc-type-grid-wedding{    overflow-x: scroll;        padding-bottom: 15px;}
    .svc-type-grid{    overflow-x: scroll;
    overflow-y: hidden;}

  /* ── Navbar ── */
  .navbar {
    padding: 0 16px;
    height: 64px;
  }

  .navbar-nav { display: none; }

  .brand-name { font-size: 16px; }
  .brand-sub  { font-size: 9px; }

  .navbar-logo { width: 40px; height: 40px; }

  .btn-nav-cta span { font-size: 10.5px; }
  .btn-nav-cta { padding: 0 12px; height: 38px; }
  .btn-nav-phone { width: 38px; height: 38px; }

  /* ── Hero: switch to vertical column layout ── */
  .hero {
    height: auto;
    min-height: unset;
    overflow: visible;
    /* Use grid so absolute children become grid items */
    display: flex;
    flex-direction: column;
    background: #050302;
  }

  /* Stage BG: full-width banner */
  .hero-stage-bg {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: 300px;
    order: 1;            /* appears after text content */
    flex-shrink: 0;
  }

  /* Stage BG pseudo-elements: disable left fade on mobile */
  .hero-stage-bg::before {
    background: linear-gradient(to bottom, transparent 60%, #050302 100%);
  }
  .hero-stage-bg::after { display: none; }

  .hero-stage-bg img {
    object-position: center 20%;
  }

  /* Hide singer layer on mobile (singer visible in stage BG) */
  .hero-singer-layer { display: none; }

  /* Hide FX layer on mobile */
  .hero-fx-layer { display: none; }

  /* Overlay: hide */
  .hero-overlay { display: none; }

  /* Content layer: static flow, full width */
  .hero-content {
    position: relative;
    inset: auto;
    z-index: auto;
    flex-direction: column;
    order: 1;            /* text first, above stage */
    flex-shrink: 0;
  }

  /* LEFT text column: full width, reset padding */
  .hero-left {
    flex: none;
    width: 100%;
    padding: 24px 20px 20px;
    justify-content: flex-start;
  }

  .hero-badge {
    margin-bottom: 16px;
    padding: 7px 12px;
  }

  .hero-badge-text { font-size: 10px; }

  .hero-h1-white { font-size: 28px; }
  .hero-h1-gold1 { font-size: 44px; }
  .hero-h1-gold2 { font-size: 44px; margin-bottom: 14px; }

  .hero-services { margin-bottom: 20px; }
  .svc           { font-size: 11px; }

  .hero-ctas { flex-direction: column; gap: 10px; }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    min-width: unset;
    height: 54px;
    justify-content: center;
  }

  /* RIGHT cards column: stacked below stage BG */
  .hero-right {
    position: relative;
    flex: none;
    width: 100%;
    order: 3;            /* cards below stage BG */
    /* Switch from absolute-positioned layout to a 2-col grid */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 16px 16px;
    background: #050302;
  }

  /* Reset all absolute-position float cards to grid items */
  .float-card,
  .fc-live-singers,
  .fc-dancers,
  .fc-musicians,
  .fc-comedians,
  .fc-sound-light,
  .fc-stage-prod {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 130px;
    transform: rotate(0deg);
    z-index: auto;
  }

  /* ── Occasions section ── */
  .occasions {
    padding: 16px 12px 20px;
  }

  .occasions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    flex-wrap: unset;
  }

  .occ-card-inner {
    padding: 90px 8px 10px;
  }

  .occ-label { font-size: 10.5px; }
  .occ-icon  { width: 24px; height: 24px; }
  .occ-arrow { width: 18px; height: 18px; }

  .occ-rule { max-width: 80px; }
  .occ-title { font-size: 12px; letter-spacing: 0.12em; }

  /* ── Services Section Mobile ── */
  .services-section { padding: 24px 0 32px; }


  .svc-main-heading { font-size: 24px; }
  .svc-sub-desc     { font-size: 13px; }
  .svc-section-header { padding: 0 16px 20px; }

  .svc-panels { padding: 0 10px; gap: 14px; }

  /* Stack image above content on mobile */
  .svc-card-wrap {
    grid-template-columns: 1fr;
  }

  .svc-panel-img-wrap {
    min-height: 180px;
  }

  .svc-img-overlay-card { display: none; }

  .svc-panel-content { padding: 14px 12px 16px; }

  .svc-panel-badge { width: 40px; height: 40px; }
  .svc-panel-title { font-size: 19px; }
  .svc-panel-desc  { font-size: 12px; margin-bottom: 10px; }

  /* Mobile: smaller arrows, same absolute positioning */
  .svc-carousel-arrow {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .svc-carousel-prev { left: -12px; }
  .svc-carousel-next { right: -12px; }

  .svc-carousel-wrap { margin-bottom: 6px; padding: 0 2px; }
  .svc-carousel-track {
    margin: 0 14px 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(123,31,162,0.3) transparent;
  }
  .svc-carousel-track::-webkit-scrollbar { height: 3px; }
  .svc-carousel-track::-webkit-scrollbar-track { background: transparent; }
  .svc-carousel-track::-webkit-scrollbar-thumb { background: rgba(123,31,162,0.3); border-radius: 2px; }

  /* Cards: fixed narrow width so JS counts correctly */
  .svc-type-card {
    flex: 0 0 78px;
    min-width: 78px;
    max-width: 78px;
    font-size: 9px;
    padding: 10px 5px 8px;
    min-height: 68px;
    gap: 6px;
  }
  .svc-type-card svg { width: 20px; height: 20px; }

  /* Expanded: always visible on mobile */
  .svc-expanded {
    max-height: none !important;
    overflow: visible;
  }

  /* No connector triangle on mobile (stacked layout) */
  .svc-type-card.active::after,
  .svc-type-card.active::before { display: none; }

  /* Exp inner stacks on mobile */
  .svc-exp-inner { flex-direction: column; }
  .svc-exp-left { flex: unset; border-right: none; border-bottom: 1px solid #EEE5D4; padding: 12px 12px 10px; }
  .svc-exp-mid { padding: 10px 12px; border-right: none; border-bottom: 1px solid #EEE5D4; }
  .svc-exp-right { flex: unset; padding: 12px 12px; align-items: stretch; justify-content: flex-start; gap: 6px; }
  .svc-cta-sub { display: none; }
  .svc-included-grid {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(123,31,162,0.35) transparent;
    gap: 6px;
    padding-bottom: 4px;
  }
  .svc-included-grid::-webkit-scrollbar { height: 3px; }
  .svc-included-grid::-webkit-scrollbar-track { background: transparent; }
  .svc-included-grid::-webkit-scrollbar-thumb { background: rgba(123,31,162,0.35); border-radius: 2px; }
  .svc-included-item { flex: 0 0 68px; min-width: 68px; font-size: 9.5px; padding: 6px 4px; }
  .svc-exp-title { font-size: 11.5px; }
  .svc-exp-desc { font-size: 11.5px; }
  .svc-cta-btn { height: 44px; font-size: 10.5px; width: 100%; }

  /* Wedding layout stacks on mobile */
  .svc-wedding-layout { flex-direction: column; gap: 12px; }
  .svc-wedding-left { flex: unset; padding-right: 0; border-right: none; border-bottom: 1px solid #EEE5D4; padding-bottom: 14px; }
  .svc-wedding-right { padding-left: 0; }
  .svc-type-grid-wedding { display: flex !important; flex-direction: row !important; grid-template-columns: unset !important; width: max-content; min-width: 100%; }
}

/* ============================================================
   PER-CATEGORY ACCENT COLORS
   ============================================================ */

/* Corporate — gold/amber */
.svc-panel[data-panel="corporate"] .svc-gold { color: #C8870A; }
.svc-panel[data-panel="corporate"] .svc-panel-title-underline { background: #C8870A; }
.svc-panel[data-panel="corporate"] .svc-type-card:hover { background: #FFFBF0; color: #C8870A; }
.svc-panel[data-panel="corporate"] .svc-type-card.active { background: #FFFBF0; color: #C8870A; border-color: #C8870A; }
.svc-panel[data-panel="corporate"] .svc-type-card.active::after { border-bottom-color: #C8870A; }
.svc-panel[data-panel="corporate"] .svc-exp-title { color: #C8870A; }
.svc-panel[data-panel="corporate"] .svc-exp-included-label { color: #C8870A; }
.svc-panel[data-panel="corporate"] .svc-cta-btn { background: #C8870A; }

/* Weddings — pink/rose */
.svc-panel[data-panel="weddings"] .svc-panel-title { color: #C2185B; }
.svc-panel[data-panel="weddings"] .svc-panel-title-underline { background: #C2185B; }
.svc-panel[data-panel="weddings"] .svc-type-card:hover { background: #FFF0F6; color: #C2185B; }
.svc-panel[data-panel="weddings"] .svc-type-card.active { background: #FFF0F6; color: #C2185B; border-color: #C2185B; }
.svc-panel[data-panel="weddings"] .svc-type-card.active::after { border-bottom-color: #C2185B; }
.svc-panel[data-panel="weddings"] .svc-exp-title { color: #C2185B; }
.svc-panel[data-panel="weddings"] .svc-exp-included-label { color: #C2185B; }
.svc-panel[data-panel="weddings"] .svc-cta-btn { background: #C2185B; }

/* Private — teal */
.svc-panel[data-panel="private"] .svc-gold { color: #00796B; }
.svc-panel[data-panel="private"] .svc-panel-title-underline { background: #00796B; }
.svc-panel[data-panel="private"] .svc-type-card:hover { background: #F0FAF8; color: #00796B; }
.svc-panel[data-panel="private"] .svc-type-card.active { background: #F0FAF8; color: #00796B; border-color: #00796B; }
.svc-panel[data-panel="private"] .svc-type-card.active::after { border-bottom-color: #00796B; }
.svc-panel[data-panel="private"] .svc-exp-title { color: #00796B; }
.svc-panel[data-panel="private"] .svc-exp-included-label { color: #00796B; }
.svc-panel[data-panel="private"] .svc-cta-btn { background: #00796B; }

/* Birthday — purple */
.svc-panel[data-panel="birthday"] .svc-gold { color: #7B1FA2; }
.svc-panel[data-panel="birthday"] .svc-panel-title-underline { background: #7B1FA2; }
.svc-panel[data-panel="birthday"] .svc-type-card:hover { background: #F8F2FB; color: #7B1FA2; }
.svc-panel[data-panel="birthday"] .svc-type-card.active { background: #F8F2FB; color: #7B1FA2; border-color: #7B1FA2; }
.svc-panel[data-panel="birthday"] .svc-type-card.active::after { border-bottom-color: #7B1FA2; }
.svc-panel[data-panel="birthday"] .svc-exp-title { color: #7B1FA2; }
.svc-panel[data-panel="birthday"] .svc-exp-included-label { color: #7B1FA2; }
.svc-panel[data-panel="birthday"] .svc-cta-btn { background: #7B1FA2; }

/* College — deep orange */
.svc-panel[data-panel="college"] .svc-gold { color: #E65100; }
.svc-panel[data-panel="college"] .svc-panel-title-underline { background: #E65100; }
.svc-panel[data-panel="college"] .svc-type-card:hover { background: #FFF5F0; color: #E65100; }
.svc-panel[data-panel="college"] .svc-type-card.active { background: #FFF5F0; color: #E65100; border-color: #E65100; }
.svc-panel[data-panel="college"] .svc-type-card.active::after { border-bottom-color: #E65100; }
.svc-panel[data-panel="college"] .svc-exp-title { color: #E65100; }
.svc-panel[data-panel="college"] .svc-exp-included-label { color: #E65100; }
.svc-panel[data-panel="college"] .svc-cta-btn { background: #E65100; }

/* Cultural — deep blue */
.svc-panel[data-panel="cultural"] .svc-gold { color: #1565C0; }
.svc-panel[data-panel="cultural"] .svc-panel-title-underline { background: #1565C0; }
.svc-panel[data-panel="cultural"] .svc-type-card:hover { background: #EFF5FD; color: #1565C0; }
.svc-panel[data-panel="cultural"] .svc-type-card.active { background: #EFF5FD; color: #1565C0; border-color: #1565C0; }
.svc-panel[data-panel="cultural"] .svc-type-card.active::after { border-bottom-color: #1565C0; }
.svc-panel[data-panel="cultural"] .svc-exp-title { color: #1565C0; }
.svc-panel[data-panel="cultural"] .svc-exp-included-label { color: #1565C0; }
.svc-panel[data-panel="cultural"] .svc-cta-btn { background: #1565C0; }

/* Engagements — crimson */
.svc-panel[data-panel="engagements"] .svc-gold { color: #B71C1C; }
.svc-panel[data-panel="engagements"] .svc-panel-title-underline { background: #B71C1C; }
.svc-panel[data-panel="engagements"] .svc-type-card:hover { background: #FFF2F2; color: #B71C1C; }
.svc-panel[data-panel="engagements"] .svc-type-card.active { background: #FFF2F2; color: #B71C1C; border-color: #B71C1C; }
.svc-panel[data-panel="engagements"] .svc-type-card.active::after { border-bottom-color: #B71C1C; }
.svc-panel[data-panel="engagements"] .svc-exp-title { color: #B71C1C; }
.svc-panel[data-panel="engagements"] .svc-exp-included-label { color: #B71C1C; }
.svc-panel[data-panel="engagements"] .svc-cta-btn { background: #B71C1C; }

/* Luxury — dark gold */
.svc-panel[data-panel="luxury"] .svc-gold { color: #B8860B; }
.svc-panel[data-panel="luxury"] .svc-panel-title-underline { background: #B8860B; }
.svc-panel[data-panel="luxury"] .svc-type-card:hover { background: #FFFDF0; color: #B8860B; }
.svc-panel[data-panel="luxury"] .svc-type-card.active { background: #FFFDF0; color: #B8860B; border-color: #B8860B; }
.svc-panel[data-panel="luxury"] .svc-type-card.active::after { border-bottom-color: #B8860B; }
.svc-panel[data-panel="luxury"] .svc-exp-title { color: #B8860B; }
.svc-panel[data-panel="luxury"] .svc-exp-included-label { color: #B8860B; }
.svc-panel[data-panel="luxury"] .svc-cta-btn {
  background: linear-gradient(135deg, #BF8800, #E5B428);
  color: #1A0D00;
}

/* ============================================================
   TYPE CARD CAROUSEL
   ============================================================ */
.svc-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
}

.svc-carousel-wrap--wedding {
  margin-bottom: 0;
}

.svc-carousel-track {
  flex: 1;
  overflow: hidden;
  margin: 0 18px 16px;
  position: relative;
  scroll-behavior: smooth;
}

/* Inner sliding row — JS moves cards here and applies translateX */
.svc-slide-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  border: 1.5px solid #E8DCC8;
  background: #fff;
  overflow: hidden;
  will-change: transform;
  scroll-behavior: smooth;
}

/* Carousel arrow buttons — absolutely positioned over the track edges */
.svc-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  background: #fff;
  border: 1.5px solid #E0D4B8;
  border-radius: 50%;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
.svc-carousel-prev { left: -14px; }
.svc-carousel-next { right: -14px; }
.svc-carousel-arrow:hover {
  border-color: #C8870A;
  color: #C8870A;
}
.svc-carousel-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Per-category arrow accent on hover */
.svc-panel[data-panel="weddings"] .svc-carousel-arrow:hover { border-color: #C2185B; color: #C2185B; }
.svc-panel[data-panel="private"]  .svc-carousel-arrow:hover { border-color: #00796B; color: #00796B; }
.svc-panel[data-panel="birthday"] .svc-carousel-arrow:hover { border-color: #7B1FA2; color: #7B1FA2; }
.svc-panel[data-panel="college"]  .svc-carousel-arrow:hover { border-color: #E65100; color: #E65100; }
.svc-panel[data-panel="cultural"] .svc-carousel-arrow:hover { border-color: #1565C0; color: #1565C0; }
.svc-panel[data-panel="engagements"] .svc-carousel-arrow:hover { border-color: #B71C1C; color: #B71C1C; }
.svc-panel[data-panel="luxury"]   .svc-carousel-arrow:hover { border-color: #B8860B; color: #B8860B; }

/* ============================================================
   EVENT GALLERY SECTION
   ============================================================ */

.eg-section {
  width: 100%;
  background: #0E0C09;
  padding: 64px 0 72px;
  position: relative;
  overflow: clip;
}

/* subtle radial gold glow in bg */
.eg-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(200,135,10,0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Section Header ── */
.eg-header {
  text-align: center;
  padding: 0 24px 40px;
  position: relative;
  z-index: 1;
}

.eg-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}

.eg-rule-line {
  display: block;
  width: 60px;
  height: 1.5px;
  background: linear-gradient(to right, transparent, rgba(200,140,50,0.6), transparent);
}

.eg-small-label {
  font-size: 11px;
  font-weight: 700;
  color: #C8870A;
  letter-spacing: 0.22em;
}

.eg-heading {
  font-size: 38px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 14px;
}

.eg-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Category Filter Tabs ── */
.eg-filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  width: 100%;
  position: sticky;
  top: var(--filter-top, 80px);
  z-index: 100;
  background: #0E0C09;
}

.eg-filter-track {
  display: flex;
  gap: 8px;
  overflow: hidden;
  flex: 1;
}

.eg-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  color: rgba(255,255,255,0.6);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.eg-filter-tab:hover {
  background: rgba(200,135,10,0.12);
  border-color: rgba(200,135,10,0.4);
  color: #C8870A;
}

.eg-filter-tab.active {
  background: rgba(200,135,10,0.15);
  border-color: #C8870A;
  color: #C8870A;
}

.eg-filter-tab svg { flex-shrink: 0; }

.eg-filter-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.eg-filter-arrow:hover {
  background: rgba(200,135,10,0.15);
  border-color: #C8870A;
  color: #C8870A;
}
.eg-filter-arrow:disabled { opacity: 0.3; cursor: default; }

/* ── Gallery Grid — masonry-style CSS columns ── */
.eg-grid {
  column-count: 4;
  column-gap: 12px;
  padding: 0 28px;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.eg-item {
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #1A1611;
  /* Entrance animation */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.eg-item.eg-visible {
  opacity: 1;
  transform: translateY(0);
}

.eg-item.eg-hidden {
  display: none;
}

/* Wide items span 2 columns */
.eg-item--wide {
  break-inside: avoid;
}

.eg-thumb {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.45s ease;
}

/* Tall items force taller image */
.eg-item--tall .eg-thumb {
  min-height: 340px;
  object-fit: cover;
}

.eg-item:hover .eg-thumb {
  transform: scale(1.04);
}

/* Overlay on hover */
.eg-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
}

.eg-item:hover .eg-item-overlay { opacity: 1; }

.eg-item-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
}

/* Badge colors per category */
.eg-badge--corporate  { background: rgba(200,135,10,0.85);  color: #fff; }
.eg-badge--weddings   { background: rgba(194,24,91,0.85);   color: #fff; }
.eg-badge--private    { background: rgba(0,121,107,0.85);   color: #fff; }
.eg-badge--birthday   { background: rgba(123,31,162,0.85);  color: #fff; }
.eg-badge--college    { background: rgba(230,81,0,0.85);    color: #fff; }
.eg-badge--cultural   { background: rgba(21,101,192,0.85);  color: #fff; }
.eg-badge--luxury     { background: rgba(184,134,11,0.85);  color: #1A0D00; }

.eg-item-meta {
  align-self: flex-end;
  width: 100%;
}

.eg-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 3px;
}

.eg-item-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}

/* Video play button overlay */
.eg-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.eg-play-btn svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.eg-item:hover .eg-play-btn { opacity: 1; }

/* ── Load More ── */
.eg-load-more-wrap {
  text-align: center;
  padding: 36px 24px 0;
  position: relative;
  z-index: 1;
}

.eg-load-more-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 32px;
  height: 52px;
  background: transparent;
  border: 1.5px solid rgba(200,135,10,0.6);
  border-radius: 100px;
  color: #C8870A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.eg-load-more-btn:hover {
  background: rgba(200,135,10,0.12);
  border-color: #C8870A;
}

/* ============================================================
   GALLERY LIGHTBOX MODAL
   ============================================================ */

.egl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
}
.egl-overlay.open { opacity: 1; pointer-events: all; }

.egl-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 85vh;
  max-height: 960px;
  background: #111009;
  border-radius: 24px 24px 0 0;
  z-index: 3001;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -12px 60px rgba(0,0,0,0.5);
  border-top: 1px solid rgba(200,135,10,0.2);
}
.egl-sheet.open { transform: translateY(0); }

/* Desktop: centered */
@media (min-width: 769px) {
  .egl-sheet {
    max-width: 880px;
    left: 50%; right: auto;
    transform: translateX(-50%) translateY(100%);
  }
  .egl-sheet.open { transform: translateX(-50%) translateY(0); }
}

/* Close button above modal */
.egl-close-btn {
  position: fixed;
  top: calc(15vh - 52px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.42s cubic-bezier(0.32,0.72,0,1), opacity 0.42s ease;
  backdrop-filter: blur(6px);
  z-index: 3002;
  opacity: 0;
  pointer-events: none;
}
.egl-close-btn.open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.egl-close-btn:hover { background: rgba(255,255,255,0.28); }

.egl-handle {
  width: 44px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 4px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

.egl-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 72px;
}
.egl-body::-webkit-scrollbar { width: 0; }

/* ── Media Viewer ── */
.egl-viewer {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  background: #0A0806;
  min-height: 260px;
  max-height: 380px;
  overflow: hidden;
}

.egl-media-wrap {
  flex: 1;
  height: 100%;
  min-height: 260px;
  max-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.egl-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.egl-video-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.egl-video-player {
  width: 100%;
  height: 100%;
  max-height: 380px;
  background: #000;
  display: block;
  border-radius: 0;
  outline: none;
}

/* Mixed media thumbnail strip */
.egl-video-strip {
  display: none; /* shown via JS when 2+ items */
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  background: #0d0b08;
  border-top: 1px solid rgba(255,255,255,0.06);
  scrollbar-width: thin;
  scrollbar-color: #C8870A #1a1410;
  flex-shrink: 0;
}
.egl-video-strip::-webkit-scrollbar { height: 4px; }
.egl-video-strip::-webkit-scrollbar-track { background: #1a1410; }
.egl-video-strip::-webkit-scrollbar-thumb { background: #C8870A; border-radius: 2px; }

.egl-vthumb {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  height: 62px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
  background: #0a0806;
}
.egl-vthumb:hover { transform: scale(1.04); border-color: rgba(200,135,10,0.6); }
.egl-vthumb.active { border-color: #C8870A; }

.egl-vthumb video,
.egl-vthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.egl-vthumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.38);
  transition: background 0.2s;
}
.egl-vthumb:hover .egl-vthumb-overlay,
.egl-vthumb.active .egl-vthumb-overlay { background: rgba(0,0,0,0.18); }

.egl-vthumb-overlay svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }

.egl-vthumb-num {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Nav arrows inside viewer */
.egl-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, border-color 0.2s;
}
.egl-nav:hover { background: rgba(200,135,10,0.5); border-color: #C8870A; }
.egl-nav--prev { left: 12px; }
.egl-nav--next { right: 12px; }

/* ── Thumbnail strip ── */
.egl-thumbs {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #0A0806;
}
.egl-thumbs::-webkit-scrollbar { display: none; }

.egl-thumb-item {
  flex-shrink: 0;
  width: 56px; height: 42px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.55;
  position: relative;
}
.egl-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.egl-thumb-item.active { border-color: #C8870A; opacity: 1; }
.egl-thumb-item:hover { opacity: 0.85; }
.egl-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  padding: 4px 2px 2px;
  letter-spacing: 0.3px;
  line-height: 1;
  pointer-events: none;
}

/* ── Event Details ── */
.egl-details {
  display: flex;
  gap: 20px;
  padding: 20px 20px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.egl-details-left { flex: 1; min-width: 0; }
.egl-details-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.egl-event-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #C8870A;
  background: rgba(200,135,10,0.12);
  border: 1px solid rgba(200,135,10,0.3);
  border-radius: 100px;
  padding: 3px 12px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.egl-event-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.2;
}

.egl-event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.egl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 4px 12px;
}

.egl-services-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #C8870A;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.egl-services-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.egl-service-tag {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 4px 10px;
}

.egl-feedback-wrap { margin-bottom: 8px; }

.egl-quote {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  font-style: italic;
  border-left: 2px solid #C8870A;
  padding-left: 12px;
  margin: 0;
}

/* ── CTA Card (right column) ── */
.egl-cta-card {
  background: rgba(200,135,10,0.08);
  border: 1px solid rgba(200,135,10,0.25);
  border-radius: 14px;
  padding: 16px;
  width: 200px;
  text-align: center;
}

.egl-cta-heading {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.egl-cta-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
}

.egl-cta-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 40px;
  background: #25D366;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 8px;
  transition: filter 0.2s;
}
.egl-cta-wa:hover { filter: brightness(1.1); }

.egl-cta-enquiry {
  width: 100%;
  height: 40px;
  background: #C8870A;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.2s;
}
.egl-cta-enquiry:hover { filter: brightness(1.1); }

/* Counter */
.egl-counter-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  justify-content: flex-end;
  padding: 4px 16px 6px;
}
.egl-counter-num { font-size: 16px; font-weight: 700; color: #C8870A; }

/* ── Enquiry form inside modal ── */
.egl-enquiry-form-wrap {
  padding: 0 20px 16px;
}

.egl-enquiry-inner {
  background: rgba(200,135,10,0.06);
  border: 1px solid rgba(200,135,10,0.2);
  border-radius: 14px;
  padding: 20px;
}

.egl-enquiry-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
}

.egl-form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.egl-input {
  flex: 1;
  height: 44px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 0 14px;
  outline: none;
  transition: border-color 0.2s;
}
.egl-input::placeholder { color: rgba(255,255,255,0.3); }
.egl-input:focus { border-color: #C8870A; }

.egl-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: #C8870A;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: filter 0.2s, transform 0.2s;
}
.egl-submit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.egl-body-spacer { height: 16px; }



/* ============================================================
   GALLERY SECTION — MOBILE
   ============================================================ */
@media (max-width: 1024px) {
  .eg-grid { column-count: 3; }
}

@media (max-width: 768px) {
  .eg-section { padding: 40px 0 48px; }
  .eg-heading { font-size: 26px; }
  .eg-desc { font-size: 13.5px; }
  .eg-header { padding: 0 16px 28px; }
  .eg-filter-wrap { padding: 10px 12px; gap: 6px; }
  .eg-filter-tab { padding: 8px 14px; font-size: 12px; }
  .eg-filter-arrow { width: 32px; height: 32px; font-size: 14px; }

  /* Grid: 2 equal columns, no wide cards on mobile */
  .eg-grid { column-count: 2; column-gap: 8px; padding: 0 12px; }
  .eg-item { border-radius: 10px; margin-bottom: 8px; }
  .eg-item--wide { column-span: none; }

  /* Always show overlay text on mobile (no hover) */
  .eg-item-overlay { opacity: 1; }

  /* Tighter text inside small cards */
  .eg-item-title {
    font-size: 11px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .eg-item-sub { font-size: 10px; }
  .eg-item-badge { font-size: 9px; padding: 3px 7px; border-radius: 4px; }

  /* Play button always visible and properly sized on mobile */
  .eg-play-btn { opacity: 1; }
  .eg-play-btn svg { width: 32px; height: 32px; }

  /* Lightbox mobile */
  .egl-details { flex-direction: column; gap: 14px; }
  .egl-details-right { align-items: stretch; }
  .egl-cta-card { width: auto; }
  .egl-form-row { flex-direction: column; gap: 8px; }
  .egl-viewer { min-height: 220px; max-height: 280px; }
  .egl-media-wrap { min-height: 220px; max-height: 280px; }
  .egl-event-title { font-size: 17px; }

  /* Media strip smaller on mobile */
  .egl-vthumb { width: 76px; height: 50px; }
  .egl-video-strip { padding: 6px 10px; gap: 6px; }
}

@media (max-width: 420px) {
  .eg-grid { column-count: 2; column-gap: 6px; padding: 0 8px; }
  .eg-item-title { font-size: 10px; }
  .eg-item-sub { display: none; }
  .eg-play-btn svg { width: 26px; height: 26px; }
}

/* ============================================================
   BOTTOM SHEET MODAL
   ============================================================ */

/* Overlay */
.bsm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(3px);
}
.bsm-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Sheet */
.bsm-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82vh;
  max-height: 920px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  z-index: 2001;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.22);
}
.bsm-sheet.open {
  transform: translateY(0);
}

/* Close button: floats above modal */
.bsm-close-btn {
  position: fixed;
  top: calc(0vh - 52px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.3s, transform 0.3s;
  backdrop-filter: blur(6px);
  z-index: 2002;
  opacity: 0;
  pointer-events: none;
}
.bsm-close-btn:hover { background: rgba(255,255,255,0.3); }
.bsm-sheet.open .bsm-close-btn {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Drag handle */
.bsm-handle {
  width: 44px;
  height: 4px;
  background: #DDD;
  border-radius: 4px;
  margin: 12px auto 4px;
  flex-shrink: 0;
}

/* Scrollable body */
.bsm-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px; /* room for sticky CTA */
}

/* Hero image section */
.bsm-hero-img-wrap {
  position: relative;
  height: 260px;
  overflow: hidden;
  flex-shrink: 0;
}
.bsm-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bsm-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
}
.bsm-hero-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
}
.bsm-category-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #C8870A;
  background: rgba(200,135,10,0.18);
  border: 1px solid rgba(200,135,10,0.4);
  border-radius: 20px;
  padding: 3px 12px;
  margin-bottom: 8px;
}
.bsm-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.bsm-headline {
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}

/* Sections */
.bsm-section {
  padding: 24px 20px 0;
}
.bsm-section-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #1A1A1A;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #F0E8D8;
}

/* Gallery */
.bsm-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bsm-gallery-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #F0E8D8;
}

/* Video */
.bsm-video-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: #0A0A0A;
}
.bsm-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 160px;
  padding: 24px;
  cursor: pointer;
}
.bsm-video-placeholder p {
  color: #C8A040;
  font-weight: 700;
  font-size: 14px;
}
.bsm-play-hint {
  font-size: 11px;
  color: #888;
}

/* Services grid */
.bsm-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bsm-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  background: #FAFAF6;
  border: 1px solid #EEE5D4;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #444;
  text-align: center;
  line-height: 1.3;
}
.bsm-service-item svg {
  color: #C8870A;
}

/* Why choose us */
.bsm-why-section { background: #FAFAF6; border-radius: 12px; margin: 24px 20px 0; padding: 20px; }
.bsm-why-section .bsm-section-title { margin: 0 0 16px; }
.bsm-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bsm-why-item { display: flex; gap: 12px; align-items: flex-start; }
.bsm-why-icon { font-size: 20px; color: #C8870A; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.bsm-why-item strong { display: block; font-size: 12px; font-weight: 700; color: #1A1A1A; margin-bottom: 3px; }
.bsm-why-item p { font-size: 11px; color: #666; line-height: 1.5; }

/* Process */
.bsm-process { display: flex; flex-direction: column; gap: 14px; }
.bsm-process-step { display: flex; gap: 14px; align-items: flex-start; }
.bsm-step-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #C8870A;
  color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.bsm-process-step strong { display: block; font-size: 13px; font-weight: 700; color: #1A1A1A; margin-bottom: 3px; }
.bsm-process-step p { font-size: 12px; color: #666; line-height: 1.5; }

/* FAQs */
.bsm-faqs { display: flex; flex-direction: column; gap: 0; border: 1px solid #EEE5D4; border-radius: 10px; overflow: hidden; }
.bsm-faq-item { border-bottom: 1px solid #EEE5D4; }
.bsm-faq-item:last-child { border-bottom: none; }
.bsm-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 10px;
}
.bsm-faq-arrow { font-size: 18px; color: #C8870A; flex-shrink: 0; transition: transform 0.25s; }
.bsm-faq-item.open .bsm-faq-arrow { transform: rotate(180deg); }
.bsm-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 12.5px;
  color: #666;
  line-height: 1.65;
  padding: 0 16px;
}
.bsm-faq-item.open .bsm-faq-a {
  max-height: 200px;
  padding: 0 16px 14px;
}

/* Testimonials */
.bsm-testimonials { display: flex; flex-direction: column; gap: 12px; }
.bsm-testimonial { background: #FAFAF6; border: 1px solid #EEE5D4; border-radius: 10px; padding: 16px; }
.bsm-stars { color: #C8870A; font-size: 14px; margin-bottom: 8px; }
.bsm-testimonial-text { font-size: 13px; color: #444; line-height: 1.65; font-style: italic; margin-bottom: 8px; }
.bsm-testimonial-author { font-size: 11px; font-weight: 700; color: #888; }

/* Enquiry Form */
.bsm-enquiry-section { background: #F7F4ED; border-radius: 12px; margin: 24px 20px 0; padding: 20px; }
.bsm-enquiry-section .bsm-section-title { margin: 0 0 16px; }
.bsm-form { display: flex; flex-direction: column; gap: 10px; }
.bsm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bsm-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #E0D4B8;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #1A1A1A;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.bsm-input:focus { border-color: #C8870A; }
.bsm-textarea { resize: vertical; min-height: 80px; }
.bsm-form-submit {
  padding: 14px;
  background: #C8870A;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.2s, box-shadow 0.2s;
  box-shadow: 0 3px 12px rgba(200,135,10,0.35);
}
.bsm-form-submit:hover { filter: brightness(1.1); }

/* Sticky CTA bar */
.bsm-sticky-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 0;
  background: #fff;
  border-top: 1px solid #EEE5D4;
  z-index: 10;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.bsm-sticky-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: filter 0.2s;
  margin: 0 4px;
}
.bsm-sticky-call {
  background: #1A1A1A;
  color: #fff;
}
.bsm-sticky-wa {
  background: #25D366;
  color: #fff;
}
.bsm-sticky-proposal {
  background: #C8870A;
  color: #fff;
}
.bsm-sticky-btn:hover { filter: brightness(1.1); }

/* Desktop: make sticky CTA bar slightly more compact */
@media (min-width: 769px) {
  .bsm-sheet {
    max-width: 720px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    border-radius: 24px 24px 0 0;
  }
  .bsm-sheet.open {
    transform: translateX(-50%) translateY(0);
  }
  .bsm-gallery { grid-template-columns: repeat(4, 1fr); }
  .bsm-why-grid { grid-template-columns: 1fr 1fr; }
  .bsm-services-grid { grid-template-columns: repeat(4, 1fr); }
  .bsm-form-row { grid-template-columns: 1fr 1fr; }
}

/* Modal on mobile: full width */
@media (max-width: 768px) {
  .bsm-sheet {
    height: 88vh;
    border-radius: 20px 20px 0 0;
  }
  .bsm-hero-img-wrap { height: 200px; }
  .bsm-title { font-size: 20px; }
  .bsm-headline { font-size: 12px; }
  .bsm-gallery { grid-template-columns: repeat(2, 1fr); }
  .bsm-why-grid { grid-template-columns: 1fr; }
  .bsm-services-grid { grid-template-columns: repeat(3, 1fr); }
  .bsm-form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   OUR ARTISTS SECTION
   ============================================================ */

.oa-section {
  background: #F7F4ED;
  padding: 72px 0 0;
  overflow: clip;
}

/* ── Header ── */
.oa-header {
  text-align: center;
  padding: 0 24px 40px;
  max-width: 780px;
  margin: 0 auto;
}

.oa-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.oa-diamond {
  color: #C8870A;
  font-size: 10px;
}

.oa-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, #C8870A80, transparent);
}

.oa-small-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #C8870A;
  text-transform: uppercase;
}

.oa-heading {
  font-size: 36px;
  font-weight: 900;
  color: #1A1310;
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.oa-desc {
  font-size: 15px;
  color: #6B5C44;
  line-height: 1.7;
}

/* ── Filter Tabs ── */
.oa-filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  width: 100%;
  position: sticky;
  top: var(--filter-top, 80px);
  z-index: 100;
  background: #F7F4ED;
}

.oa-filter-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding: 4px 0;
}
.oa-filter-track::-webkit-scrollbar { display: none; }

.oa-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1.5px solid #D9CEB5;
  background: #fff;
  color: #5A4A34;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.oa-filter-tab:hover {
  border-color: #C8870A;
  color: #C8870A;
}

.oa-filter-tab.active {
  background: #1A1310;
  border-color: #1A1310;
  color: #fff;
}

.oa-filter-tab svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.oa-filter-tab.active svg { opacity: 1; }

.oa-filter-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #D9CEB5;
  color: #5A4A34;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.oa-filter-arrow:hover {
  background: #1A1310;
  border-color: #1A1310;
  color: #fff;
}

/* ── Artist Grid ── */
.oa-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Cards hidden by filter */
.oa-card.oa-hidden {
  display: none;
}

/* ── Artist Card ── */
.oa-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid #EEE5D4;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
  position: relative;
}

.oa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  border-color: #C8870A60;
}

.oa-card.oa-card--active {
  border-color: #C8870A;
  box-shadow: 0 0 0 2px rgba(200,135,10,0.18), 0 8px 24px rgba(0,0,0,0.12);
}

/* Card image */
.oa-card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.oa-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.oa-card:hover .oa-card-img {
  transform: scale(1.06);
}

.oa-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
}

/* Availability badge */
.oa-availability {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.oa-avail--available {
  background: rgba(16,140,72,0.9);
  color: #fff;
}

.oa-avail--limited {
  background: rgba(210,100,0,0.9);
  color: #fff;
}

/* Card info */
.oa-card-info {
  padding: 12px 12px 14px;
}

.oa-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.oa-card-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #1A1310;
  line-height: 1.2;
  margin-bottom: 3px;
}

.oa-card-type {
  font-size: 11px;
  color: #8A7260;
  font-weight: 500;
}

.oa-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}

.oa-rating span {
  font-size: 12px;
  font-weight: 700;
  color: #1A1310;
}

.oa-view-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 12px;
  background: #F7F4ED;
  border: 1px solid #E0D4B8;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #C8870A;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}

.oa-card.oa-card--active .oa-view-btn,
.oa-view-btn:hover {
  background: #1A1310;
  border-color: #1A1310;
  color: #fff;
}

/* ── Carousel Navigation ── */
.oa-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 20px 16px;
}

.oa-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #D9CEB5;
  color: #5A4A34;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.oa-nav-btn:hover {
  background: #1A1310;
  border-color: #1A1310;
  color: #fff;
}
.oa-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.oa-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.oa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D9CEB5;
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
  border: none;
  padding: 0;
}

.oa-dot.active {
  background: #C8870A;
  width: 20px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════
   Artist Detail Modal  (oad- prefix)
   — same slide-up pattern as egl-sheet
══════════════════════════════════════════════ */

/* Overlay — same as egl-overlay */
.oad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.oad-overlay.open { opacity: 1; pointer-events: all; }

/* Sheet — slides up from bottom, same curve as egl-sheet */
.oad-modal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 85vh;
  max-height: 960px;
  background: #111009;
  border-radius: 24px 24px 0 0;
  z-index: 3001;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -12px 60px rgba(0,0,0,0.5);
  border-top: 1px solid rgba(200,135,10,0.2);
  overflow: hidden;
}
.oad-modal.open { transform: translateY(0); }

/* Desktop: centered, same as egl-sheet desktop */
@media (min-width: 769px) {
  .oad-modal {
    max-width: 880px;
    left: 50%; right: auto;
    transform: translateX(-50%) translateY(100%);
  }
  .oad-modal.open { transform: translateX(-50%) translateY(0); }
}

/* Close button — same pattern as egl-close-btn */
.oad-close-btn {
  position: fixed;
  top: calc(15vh - 52px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.42s cubic-bezier(0.32,0.72,0,1), opacity 0.42s ease;
  backdrop-filter: blur(6px);
  z-index: 3002;
  opacity: 0;
  pointer-events: none;
}
.oad-close-btn.open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.oad-close-btn:hover { background: rgba(255,255,255,0.28); }

/* Drag handle */
.oad-handle {
  width: 44px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

/* Scrollable body */
.oad-scroll-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.oad-scroll-body::-webkit-scrollbar { display: none; }

/* ── Slider ── */
.oad-slider {
  position: relative;
  background: #0a0a0a;
  flex-shrink: 0;
  overflow: hidden;
}

.oad-slider-track {
  display: flex;
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

.oad-slide {
  min-width: 100%;
  height: 280px;
  flex-shrink: 0;
}
.oad-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oad-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.oad-slider-btn:hover { background: rgba(255,255,255,0.32); transform: translateY(-50%) scale(1.08); }
.oad-slider-prev { left: 12px; }
.oad-slider-next { right: 12px; }

/* Thumbnail strip */
.oad-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: #0a0a0a;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.oad-thumbs::-webkit-scrollbar { display: none; }

.oad-thumb {
  width: 52px;
  height: 38px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: opacity 0.18s, border-color 0.18s;
}
.oad-thumb.active { border-color: #C8870A; opacity: 1; }
.oad-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Body grid ── */
.oad-body {
  display: grid;
  grid-template-columns: 1fr 220px;
}

/* Info column */
.oad-info {
  padding: 20px 22px 22px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.oad-category-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  background: rgba(200,135,10,0.18);
  color: #C8870A;
  border-radius: 100px;
  border: 1px solid rgba(200,135,10,0.3);
  margin-bottom: 8px;
}

.oad-title {
  font-size: 24px;
  font-weight: 900;
  color: #F7F4ED;
  line-height: 1.15;
  margin: 0 0 12px;
}

.oad-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.oad-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #C4B49A;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 5px 11px;
}
.oad-meta-chip svg { color: #C8870A; flex-shrink: 0; }

.oad-bio {
  font-size: 13px;
  color: #9A8A76;
  line-height: 1.72;
  margin: 0 0 16px;
}

.oad-section-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #6A5C50;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.oad-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oad-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: #C4B49A;
  background: rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Perfect For row */
.oad-perfect-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.oad-perfect-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #9A8A76;
  min-width: 52px;
  text-align: center;
}
.oad-perfect-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(200,135,10,0.12);
  border: 1px solid rgba(200,135,10,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C8870A;
}

/* Sidebar */
.oad-sidebar {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oad-sidebar-card {
  background: rgba(200,135,10,0.08);
  border: 1px solid rgba(200,135,10,0.2);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oad-sidebar-title {
  font-size: 14px;
  font-weight: 800;
  color: #F7F4ED;
  margin: 0;
}
.oad-sidebar-sub {
  font-size: 11.5px;
  color: #9A8A76;
  margin: 0 0 2px;
}

.oad-btn-whatsapp {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: #25D366;
  color: #fff;
  transition: filter 0.2s;
}
.oad-btn-whatsapp:hover { filter: brightness(1.1); }

.oad-btn-book {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid #C8870A;
  background: transparent;
  color: #C8870A;
  transition: background 0.2s, color 0.2s;
}
.oad-btn-book:hover { background: #C8870A; color: #fff; }

.oad-rating-card {
  background: rgba(200,135,10,0.1);
  border: 1px solid rgba(200,135,10,0.2);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.oad-rating-big {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 26px;
  font-weight: 900;
  color: #F7F4ED;
}
.oad-rating-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #9A8A76;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* ── Sticky bottom CTA — same as egl-sticky-cta */
.oad-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  z-index: 5;
}

.oad-footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: filter 0.18s;
}
.oad-footer-btn:hover { filter: brightness(1.12); }

.oad-footer-call  { background: rgba(255,255,255,0.1); color: #F7F4ED; }
.oad-footer-whatsapp { background: #25D366; color: #fff; }
.oad-footer-book  { background: #C8870A; color: #fff; }

/* spacer so content doesn't hide behind sticky footer */
.oad-body-spacer { height: 60px; }

/* keep old class refs alive */
.oa-cta-book, .oa-cta-quote { display: none; }
.oa-detail-expand { display: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .oad-body { grid-template-columns: 1fr; }
  .oad-info { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .oad-sidebar { flex-direction: row; flex-wrap: wrap; padding: 14px; }
  .oad-sidebar-card { flex: 1; min-width: 160px; }
  .oad-rating-card { flex: 0 0 auto; }
  .oad-slide { height: 220px; }
  .oad-footer-btn { font-size: 12px; padding: 13px 0; }
}

/* ── Trust Bar ── */
.oa-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #E0D4B8;
  margin-top: 40px;
  background: #fff;
}

.oa-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  border-right: 1px solid #E0D4B8;
  transition: background 0.2s;
}
.oa-trust-item:last-child { border-right: none; }
.oa-trust-item:hover { background: #FAF7F0; }

.oa-trust-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(200,135,10,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oa-trust-title {
  font-size: 13px;
  font-weight: 800;
  color: #1A1310;
  margin-bottom: 4px;
}

.oa-trust-sub {
  font-size: 11.5px;
  color: #8A7260;
  line-height: 1.5;
}

/* ── Responsive 1024px ── */
@media (max-width: 1200px) {
  .oa-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .oa-detail-inner {
    grid-template-columns: 200px 1fr 200px;
    gap: 24px;
  }
}

@media (max-width: 1024px) {
  .oa-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .oa-heading { font-size: 30px; }
  .oa-trust-bar { grid-template-columns: repeat(2, 1fr); }
  .oa-trust-item:nth-child(2) { border-right: none; }
  .oa-trust-item:nth-child(3) { border-top: 1px solid #E0D4B8; }
  .oa-trust-item:nth-child(4) { border-top: 1px solid #E0D4B8; }
  .oa-detail-inner {
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto auto;
  }
  .oa-detail-right {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .oa-detail-gallery {
    flex: 1;
  }
  .oa-detail-ctas {
    flex-direction: column;
    width: 180px;
    flex-shrink: 0;
  }
  .oa-detail-panel.open { max-height: 800px; }
}

@media (max-width: 768px) {
  .oa-section { padding: 48px 0 0; }
  .oa-heading { font-size: 26px; }
  .oa-desc { font-size: 14px; }
  .oa-header { padding: 0 16px 28px; }
  .oa-filter-wrap { padding: 10px 12px; gap: 6px; }
  .oa-filter-tab { padding: 8px 14px; font-size: 12px; }
  .oa-filter-arrow { width: 30px; height: 30px; font-size: 14px; }
  .oa-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 12px;
    gap: 12px;
  }
  .oa-trust-bar {
    grid-template-columns: 1fr 1fr;
  }
  .oa-trust-item { padding: 18px 14px; }
  .oa-trust-item:nth-child(2) { border-right: none; }
  .oa-trust-item:nth-child(3) { border-top: 1px solid #E0D4B8; }
  .oa-trust-item:nth-child(4) { border-top: 1px solid #E0D4B8; }
  /* Detail panel stacked */
  .oa-detail-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 16px;
  }
  .oa-detail-img-wrap {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
  }
  .oa-detail-right {
    grid-column: 1;
    flex-direction: column;
  }
  .oa-detail-ctas {
    flex-direction: row;
    width: auto;
  }
  .oa-detail-name { font-size: 22px; }
  .oa-detail-panel.open { max-height: 1200px; }
}

/* ============================================================
   SUCCESS STORIES SECTION
   ============================================================ */

.ss-section {
  background: #0A0805;
  padding: 72px 0 0;
  overflow: clip;
}

/* ── Header ── */
.ss-header {
  text-align: center;
  padding: 0 24px 40px;
  max-width: 820px;
  margin: 0 auto;
}

.ss-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.ss-label-line {
  display: block;
  width: 52px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,135,10,0.6), transparent);
}

.ss-label-icon { opacity: 0.9; }

.ss-small-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #C8870A;
  text-transform: uppercase;
}

.ss-heading {
  font-size: 40px;
  font-weight: 900;
  color: #F7F4ED;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}

.ss-desc {
  font-size: 15px;
  color: rgba(247,244,237,0.55);
  line-height: 1.75;
}

/* ── Filter Tabs ── */
.ss-filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  width: 100%;
  position: sticky;
  top: var(--filter-top, 80px);
  z-index: 100;
  background: #0A0805;
}

.ss-filter-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding: 4px 0;
}
.ss-filter-track::-webkit-scrollbar { display: none; }

.ss-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1.5px solid rgba(200,135,10,0.25);
  background: rgba(255,255,255,0.04);
  color: rgba(247,244,237,0.6);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.ss-filter-tab:hover {
  border-color: #C8870A;
  color: #C8870A;
  background: rgba(200,135,10,0.08);
}
.ss-filter-tab.active {
  background: #C8870A;
  border-color: #C8870A;
  color: #fff;
}
.ss-filter-tab svg { flex-shrink: 0; opacity: 0.75; }
.ss-filter-tab.active svg { opacity: 1; }

.ss-filter-arrow {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(200,135,10,0.25);
  color: rgba(247,244,237,0.6);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ss-filter-arrow:hover {
  background: #C8870A;
  border-color: #C8870A;
  color: #fff;
}

/* ── Cards ── */
.ss-cards-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 40px;
  overflow: hidden;
}

.ss-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.ss-card {
  background: #161210;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(200,135,10,0.12);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.ss-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  border-color: rgba(200,135,10,0.4);
}
.ss-card.ss-card--active {
  border-color: #C8870A;
  box-shadow: 0 0 0 2px rgba(200,135,10,0.25), 0 12px 32px rgba(0,0,0,0.35);
}
.ss-card.ss-hidden { display: none; }

.ss-card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.ss-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.ss-card:hover .ss-card-img { transform: scale(1.07); }
.ss-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}

.ss-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.ss-badge--corporate  { background: rgba(200,135,10,0.9);  color: #fff; }
.ss-badge--weddings   { background: rgba(194,24,91,0.9);   color: #fff; }
.ss-badge--college    { background: rgba(230,81,0,0.9);    color: #fff; }
.ss-badge--private    { background: rgba(0,121,107,0.9);   color: #fff; }
.ss-badge--luxury     { background: rgba(184,134,11,0.88); color: #1A0D00; }
.ss-badge--cultural   { background: rgba(21,101,192,0.9);  color: #fff; }

.ss-card-body {
  padding: 14px 14px 16px;
}
.ss-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #F7F4ED;
  line-height: 1.3;
  margin-bottom: 5px;
}
.ss-card-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: rgba(247,244,237,0.45);
  margin-bottom: 10px;
}
.ss-card-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.ss-card-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(247,244,237,0.45);
}

.ss-view-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 12px;
  background: rgba(200,135,10,0.1);
  border: 1px solid rgba(200,135,10,0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #C8870A;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ss-view-btn:hover,
.ss-card.ss-card--active .ss-view-btn {
  background: #C8870A;
  border-color: #C8870A;
  color: #fff;
}

/* ── Featured Story Panel ── */
.ss-featured {
  background: #100D0A;
  border-top: 1px solid rgba(200,135,10,0.15);
  border-bottom: 1px solid rgba(200,135,10,0.1);
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ss-featured.open { max-height: 1000px; }

.ss-featured-inner {
  display: grid;
  grid-template-columns: 340px 1fr 280px;
  gap: 0;
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 20px 28px;
  gap: 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}
.ss-featured.open .ss-featured-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Featured media column */
.ss-feat-media { display: flex; flex-direction: column; gap: 12px; }

.ss-feat-img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  cursor: pointer;
  background: #1A1410;
}
.ss-feat-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.ss-feat-img-wrap:hover .ss-feat-img { transform: scale(1.04); }

.ss-feat-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  transition: background 0.2s;
}
.ss-feat-img-wrap:hover .ss-feat-play-btn { background: rgba(0,0,0,0.38); }
.ss-feat-play-btn > div,
.ss-feat-play-btn svg {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(200,135,10,0.9);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 20px rgba(200,135,10,0.5);
  transition: transform 0.2s;
}
.ss-feat-img-wrap:hover .ss-feat-play-btn svg { transform: scale(1.08); }

.ss-feat-video-label {
  position: absolute;
  bottom: 10px; left: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
}

/* Gallery strip */
.ss-feat-gallery-strip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-feat-gallery-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.ss-feat-gallery-track::-webkit-scrollbar { display: none; }

.ss-feat-gallery-thumb {
  width: 72px; height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.ss-feat-gallery-thumb:hover,
.ss-feat-gallery-thumb.active { border-color: #C8870A; transform: scale(1.05); }
.ss-feat-gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.ss-feat-gal-arrow {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.ss-feat-gal-arrow:hover { background: rgba(200,135,10,0.3); color: #C8870A; }

/* Featured details column */
.ss-feat-details { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }

.ss-feat-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C8870A;
  margin-bottom: 2px;
}

.ss-feat-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ss-feat-title {
  font-size: 24px;
  font-weight: 900;
  color: #F7F4ED;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ss-feat-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 4px;
}
.ss-feat-rating span {
  font-size: 13px;
  font-weight: 800;
  color: #C8870A;
}

.ss-feat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ss-feat-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(247,244,237,0.5);
}
.ss-feat-meta span:not(:last-child):after { content: none; }

.ss-feat-summary {
  font-size: 13px;
  color: rgba(247,244,237,0.65);
  line-height: 1.7;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ss-feat-section { display: flex; flex-direction: column; gap: 5px; }
.ss-feat-section-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #C8870A;
  text-transform: uppercase;
}
.ss-feat-section-text {
  font-size: 12.5px;
  color: rgba(247,244,237,0.55);
  line-height: 1.65;
}

/* Featured right column */
.ss-feat-right { display: flex; flex-direction: column; gap: 16px; }

.ss-feat-highlights-box,
.ss-feat-feedback-box {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(200,135,10,0.14);
  border-radius: 14px;
  padding: 16px 18px;
}

.ss-feat-box-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(247,244,237,0.4);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ss-feat-highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ss-feat-highlights li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(247,244,237,0.75);
}
.ss-feat-highlights li svg { flex-shrink: 0; }

.ss-feat-quote-icon { display: block; margin-bottom: 10px; }

.ss-feat-feedback-text {
  font-size: 12.5px;
  color: rgba(247,244,237,0.7);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 12px;
}

.ss-feat-feedback-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ss-feat-author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C8870A, #8B5E00);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ss-feat-author-name {
  font-size: 12px;
  font-weight: 700;
  color: #F7F4ED;
  margin-bottom: 2px;
}
.ss-feat-author-role {
  font-size: 10.5px;
  color: rgba(247,244,237,0.4);
  line-height: 1.4;
}

.ss-feat-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  background: #C8870A;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(200,135,10,0.4);
}
.ss-feat-book-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ── Featured bottom row (gallery / videos / artists) ── */
.ss-feat-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 1240px;
  margin: 0 auto 0;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.25s, transform 0.4s ease 0.25s;
}
.ss-featured.open .ss-feat-bottom {
  opacity: 1;
  transform: translateY(0);
}

.ss-feat-bottom-col {
  padding: 20px 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding-right: 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ss-feat-bottom-col:not(:first-child) { padding-left: 20px; }
.ss-feat-bottom-col:last-child { border-right: none; }

.ss-feat-bottom-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(247,244,237,0.35);
  text-transform: uppercase;
}

.ss-feat-media-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-feat-media-row::-webkit-scrollbar { display: none; }

.ss-feat-media-thumb {
  width: 80px; height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.2s, transform 0.2s;
}
.ss-feat-media-thumb:hover { border-color: #C8870A; transform: scale(1.04); }
.ss-feat-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ss-feat-video-thumb-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.42);
  display: flex; align-items: center; justify-content: center;
}
.ss-feat-video-thumb-overlay svg { width: 18px; height: 18px; }

.ss-feat-media-arrow {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  align-self: center;
  transition: background 0.2s;
}
.ss-feat-media-arrow:hover { background: #C8870A; color: #fff; border-color: #C8870A; }

.ss-feat-artists-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ss-feat-artist-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.ss-feat-artist-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(200,135,10,0.3);
  transition: border-color 0.2s;
}
.ss-feat-artist-chip:hover .ss-feat-artist-avatar { border-color: #C8870A; }
.ss-feat-artist-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ss-feat-artist-name {
  font-size: 9.5px;
  color: rgba(247,244,237,0.5);
  font-weight: 600;
  text-align: center;
  max-width: 52px;
  line-height: 1.3;
}

.ss-feat-more-chip {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(200,135,10,0.15);
  border: 1.5px solid rgba(200,135,10,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #C8870A;
  cursor: pointer;
}

/* ── Content crossfade ── */
.ss-feat-content-wrap {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.ss-feat-content-wrap.ss-fading {
  opacity: 0;
  transform: translateY(6px);
}

/* ── Trust Strip ── */
.ss-trust-strip {
  background: #F7F4ED;
  border-top: 1px solid #E0D4B8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  max-width: 100%;
  flex-wrap: wrap;
}

.ss-trust-items {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.ss-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  border-right: 1px solid #D9CEB5;
  flex: 1;
}
.ss-trust-item:first-child { padding-left: 0; }
.ss-trust-item:last-child { border-right: none; }

.ss-trust-num {
  font-size: 20px;
  font-weight: 900;
  color: #1A1310;
  line-height: 1;
  margin-bottom: 2px;
}
.ss-trust-label {
  font-size: 12px;
  font-weight: 700;
  color: #1A1310;
  margin-bottom: 1px;
}
.ss-trust-sub {
  font-size: 10.5px;
  color: #8A7260;
}

.ss-trust-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  height: 52px;
  background: #C8870A;
  border: none;
  border-radius: 100px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 4px 20px rgba(200,135,10,0.4);
}
.ss-trust-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Success Stories Bottom Sheet Modal ── */
.ss-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 4000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
}
.ss-modal-overlay.open { opacity: 1; pointer-events: all; }

.ss-modal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 82vh;
  max-height: 960px;
  background: #111009;
  border-radius: 24px 24px 0 0;
  z-index: 4001;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.44s cubic-bezier(0.32, 0.72, 0, 1);
  border-top: 1px solid rgba(200,135,10,0.2);
  box-shadow: 0 -16px 64px rgba(0,0,0,0.6);
  overflow: hidden;
}
.ss-modal.open { transform: translateY(0); }

@media (min-width: 769px) {
  .ss-modal {
    max-width: 900px;
    left: 50%; right: auto;
    transform: translateX(-50%) translateY(100%);
  }
  .ss-modal.open { transform: translateX(-50%) translateY(0); }
}

.ss-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4002;
  transition: background 0.2s;
}
.ss-modal-close:hover { background: rgba(255,255,255,0.24); }

.ss-modal-handle {
  width: 44px; height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

.ss-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 90px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,135,10,0.3) transparent;
}
.ss-modal-body::-webkit-scrollbar { width: 4px; }
.ss-modal-body::-webkit-scrollbar-thumb { background: rgba(200,135,10,0.3); border-radius: 4px; }

/* Modal interior sections */
.ss-modal-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  margin-bottom: 20px;
}
.ss-modal-hero img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ss-modal-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  display: flex; align-items: flex-end;
  padding: 20px;
}
.ss-modal-hero-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C8870A;
  margin-bottom: 6px;
}
.ss-modal-hero-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}

.ss-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.ss-modal-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.ss-modal-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C8870A;
  margin-bottom: 10px;
}

.ss-modal-stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ss-modal-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 80px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
}
.ss-modal-stat-val {
  font-size: 18px;
  font-weight: 900;
  color: #C8870A;
  line-height: 1;
}
.ss-modal-stat-label {
  font-size: 10.5px;
  color: rgba(247,244,237,0.45);
}

.ss-modal-text {
  font-size: 13px;
  color: rgba(247,244,237,0.6);
  line-height: 1.75;
}

.ss-modal-img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ss-modal-img-grid-item {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.ss-modal-img-grid-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.35s;
}
.ss-modal-img-grid-item:hover img { transform: scale(1.06); }

.ss-modal-highlights-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ss-modal-highlights-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(247,244,237,0.7);
}

.ss-modal-testimonial {
  background: rgba(200,135,10,0.08);
  border: 1px solid rgba(200,135,10,0.2);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 12px;
}
.ss-modal-testimonial-text {
  font-size: 13.5px;
  color: rgba(247,244,237,0.8);
  line-height: 1.7;
  font-style: italic;
  margin: 10px 0 12px;
}

.ss-modal-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.ss-modal-cta-primary, .ss-modal-cta-secondary {
  flex: 1;
  height: 48px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  border: none;
  transition: filter 0.2s, transform 0.15s;
}
.ss-modal-cta-primary { background: #C8870A; color: #fff; box-shadow: 0 4px 16px rgba(200,135,10,0.4); }
.ss-modal-cta-secondary { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #F7F4ED; }
.ss-modal-cta-primary:hover, .ss-modal-cta-secondary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .ss-cards { grid-template-columns: repeat(4, 1fr); }
  .ss-featured-inner { grid-template-columns: 280px 1fr 250px; }
}

@media (max-width: 1024px) {
  .ss-cards { grid-template-columns: repeat(3, 1fr); }
  .ss-heading { font-size: 32px; }
  .ss-featured-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .ss-feat-right { grid-column: 1 / -1; flex-direction: row; gap: 16px; }
  .ss-feat-highlights-box, .ss-feat-feedback-box { flex: 1; }
  .ss-featured.open { max-height: 1300px; }
  .ss-feat-bottom { grid-template-columns: 1fr 1fr; }
  .ss-feat-bottom-col:last-child { grid-column: 1 / -1; border-right: none; border-top: 1px solid rgba(255,255,255,0.06); }
  .ss-trust-items { gap: 0; }
  .ss-trust-item { padding: 0 16px; }
}

@media (max-width: 768px) {
  .ss-section { padding: 48px 0 0; }
  .ss-heading { font-size: 26px; }
  .ss-desc { font-size: 13.5px; }
  .ss-header { padding: 0 16px 28px; }
  .ss-filter-wrap { padding: 10px 12px; gap: 6px; }
  .ss-filter-tab { padding: 8px 14px; font-size: 12px; }
  .ss-filter-arrow { width: 32px; height: 32px; }
  .ss-cards-wrap { padding: 0 12px 28px; }
  .ss-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ss-featured-inner {
    grid-template-columns: 1fr;
    padding: 24px 16px 20px;
    gap: 20px;
  }
  .ss-feat-right { flex-direction: column; }
  .ss-feat-title { font-size: 20px; }
  .ss-feat-bottom { grid-template-columns: 1fr; padding: 0 16px; }
  .ss-feat-bottom-col { border-right: none; border-top: 1px solid rgba(255,255,255,0.06); }
  .ss-feat-bottom-col:first-child { border-top: none; }
  .ss-featured.open { max-height: 2800px; }
  .ss-trust-strip { flex-direction: column; padding: 20px 16px; gap: 20px; }
  .ss-trust-items { flex-wrap: wrap; }
  .ss-trust-item { padding: 8px 14px; border-right: none; border-bottom: 1px solid #D9CEB5; flex: 0 0 45%; }
  .ss-trust-item:last-child { border-bottom: none; }
  .ss-trust-cta { width: 100%; justify-content: center; }
  .ss-modal-grid { grid-template-columns: 1fr; }
  .ss-modal-highlights-list { grid-template-columns: 1fr; }
  .ss-modal-img-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ABOUT US SECTION
   ============================================================ */
.au-section {
  background: #F7F4ED;
  padding: 80px 0 0;
  overflow: hidden;
}

/* Header */
.au-header {
  text-align: center;
  padding: 0 24px 52px;
  max-width: 860px;
  margin: 0 auto;
}
.au-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.au-rule {
  display: block;
  width: 52px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,135,10,0.5), transparent);
}
.au-small-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #C8870A;
  text-transform: uppercase;
}
.au-heading {
  font-size: 42px;
  font-weight: 900;
  color: #1A1310;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.au-desc {
  font-size: 15.5px;
  color: #6B5B4E;
  line-height: 1.75;
}

/* Main 2-col grid */
.au-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px 64px;
  align-items: start;
}

/* Image column */
.au-img-col {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.au-img-primary-wrap {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26,19,16,0.18);
}
.au-img-primary {
  width: 100%; height: 360px;
  object-fit: cover;
  display: block;
}
.au-img-badge {
  position: absolute;
  bottom: 18px; left: 18px;
  background: rgba(5,3,2,0.85);
  border: 1px solid rgba(200,135,10,0.5);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(8px);
}
.au-img-badge-num {
  font-size: 26px;
  font-weight: 900;
  color: #D8A73A;
  line-height: 1;
}
.au-img-badge-text {
  font-size: 10px;
  font-weight: 700;
  color: rgba(247,244,237,0.7);
  letter-spacing: 0.08em;
  white-space: nowrap;
  margin-top: 2px;
}
.au-img-secondary-wrap {
  grid-column: 1 / -1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(26,19,16,0.12);
}
.au-img-secondary {
  width: 100%; height: 180px;
  object-fit: cover;
  display: block;
}

/* Story column */
.au-story-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.au-story-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #C8870A;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.au-story-heading {
  font-size: 28px;
  font-weight: 900;
  color: #1A1310;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.au-story-text {
  font-size: 14.5px;
  color: #6B5B4E;
  line-height: 1.8;
  margin-bottom: 14px;
}

/* Stats row */
.au-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: #1A1310;
  border-radius: 16px;
  padding: 22px 16px;
  margin: 22px 0 28px;
}
.au-stat {
  text-align: center;
  border-right: 1px solid rgba(247,244,237,0.08);
  padding: 0 8px;
}
.au-stat:last-child { border-right: none; }
.au-stat-num {
  font-size: 26px;
  font-weight: 900;
  color: #D8A73A;
  line-height: 1;
}
.au-stat-plus {
  font-size: 18px;
  font-weight: 900;
  color: #D8A73A;
}
.au-stat-label {
  font-size: 10px;
  color: rgba(247,244,237,0.5);
  letter-spacing: 0.05em;
  margin-top: 5px;
  line-height: 1.3;
}

/* Story CTAs */
.au-story-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.au-cta-primary {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  height: 50px;
  background: #C8870A;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 6px 20px rgba(200,135,10,0.35);
  text-decoration: none;
}
.au-cta-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.au-cta-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 50px;
  background: #25D366;
  border-radius: 10px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  transition: filter 0.2s, transform 0.15s;
}
.au-cta-wa:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Capability cards */
.au-caps-wrap {
  background: #1A1310;
  padding: 56px 40px;
}
.au-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
}
.au-cap-card {
  background: rgba(247,244,237,0.04);
  border: 1px solid rgba(200,135,10,0.15);
  border-radius: 16px;
  padding: 28px 24px;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.au-cap-card:hover {
  background: rgba(200,135,10,0.07);
  border-color: rgba(200,135,10,0.35);
  transform: translateY(-3px);
}
.au-cap-icon {
  width: 52px; height: 52px;
  background: rgba(200,135,10,0.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.au-cap-title {
  font-size: 15px;
  font-weight: 800;
  color: #F7F4ED;
  margin-bottom: 8px;
}
.au-cap-text {
  font-size: 13px;
  color: rgba(247,244,237,0.5);
  line-height: 1.7;
}

/* Process strip */
.au-process {
  background: #F7F4ED;
  padding: 56px 40px;
  text-align: center;
}
.au-process-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #C8870A;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.au-process-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
}
.au-process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}
.au-process-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #1A1310;
  color: #D8A73A;
  font-size: 16px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  border: 2px solid rgba(200,135,10,0.3);
}
.au-process-title {
  font-size: 14px;
  font-weight: 800;
  color: #1A1310;
  margin-bottom: 6px;
}
.au-process-text {
  font-size: 12.5px;
  color: #8A7260;
  line-height: 1.65;
}
.au-process-arrow {
  flex-shrink: 0;
  font-size: 22px;
  color: #C8870A;
  margin-top: 14px;
  opacity: 0.6;
}

/* Image strip */
.au-img-strip {
  display: flex;
  gap: 0;
  height: 220px;
  overflow: hidden;
}
.au-img-strip img {
  flex: 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  filter: brightness(0.85);
}
.au-img-strip img:hover { transform: scale(1.04); filter: brightness(1); }

/* CTA banner */
.au-cta-banner {
  background: linear-gradient(135deg, #1A1310 60%, #2C1F0A);
  border-top: 1px solid rgba(200,135,10,0.2);
}
.au-cta-banner-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.au-cta-banner-heading {
  font-size: 26px;
  font-weight: 900;
  color: #F7F4ED;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.au-cta-banner-sub {
  font-size: 14px;
  color: rgba(247,244,237,0.5);
}
.au-cta-banner-btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.au-cta-banner-primary {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  height: 52px;
  background: #C8870A;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 6px 24px rgba(200,135,10,0.4);
}
.au-cta-banner-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.au-cta-banner-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 52px;
  border: 1.5px solid rgba(200,135,10,0.5);
  border-radius: 10px;
  color: #D8A73A;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.au-cta-banner-call:hover { border-color: #D8A73A; color: #fff; }

/* About Us responsive */
@media (max-width: 1024px) {
  .au-main-grid { grid-template-columns: 1fr; gap: 32px; padding: 0 24px 48px; }
  .au-img-col { grid-template-columns: 1fr 1fr; }
  .au-img-primary-wrap { grid-column: 1 / -1; }
  .au-img-secondary-wrap { grid-column: auto; }
  .au-caps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .au-section { padding: 48px 0 0; }
  .au-heading { font-size: 28px; }
  .au-main-grid { padding: 0 16px 40px; gap: 24px; }
  .au-img-primary { height: 260px; }
  .au-img-secondary { height: 140px; }
  .au-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .au-stat:nth-child(2) { border-right: none; }
  .au-stat:nth-child(3), .au-stat:nth-child(4) { border-top: 1px solid rgba(247,244,237,0.08); }
  .au-caps-wrap { padding: 40px 16px; }
  .au-caps-grid { grid-template-columns: 1fr; gap: 14px; }
  .au-process { padding: 40px 16px; }
  .au-process-steps { flex-direction: column; align-items: center; gap: 8px; }
  .au-process-arrow { transform: rotate(90deg); margin: 0; }
  .au-img-strip { height: 160px; }
  .au-cta-banner-inner { padding: 32px 16px; flex-direction: column; align-items: flex-start; }
  .au-cta-banner-heading { font-size: 20px; }
  .au-cta-banner-btns { width: 100%; }
  .au-cta-banner-primary, .au-cta-banner-call { flex: 1; justify-content: center; }
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-section {
  background: #0E0B08;
  padding: 80px 0;
  border-top: 1px solid rgba(200,135,10,0.1);
}
.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: start;
}
.contact-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #C8870A;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.contact-heading {
  font-size: 36px;
  font-weight: 900;
  color: #F7F4ED;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.contact-text {
  font-size: 14px;
  color: rgba(247,244,237,0.5);
  line-height: 1.75;
  margin-bottom: 32px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(247,244,237,0.04);
  border: 1px solid rgba(247,244,237,0.07);
  transition: border-color 0.2s, background 0.2s;
}
.contact-detail-item:hover {
  border-color: rgba(200,135,10,0.3);
  background: rgba(200,135,10,0.06);
}
.contact-detail-icon {
  width: 40px; height: 40px;
  background: rgba(200,135,10,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-detail-label {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(247,244,237,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-detail-val {
  font-size: 14px;
  font-weight: 700;
  color: #F7F4ED;
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(247,244,237,0.05);
  border: 1px solid rgba(247,244,237,0.1);
  border-radius: 10px;
  color: #F7F4ED;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.contact-input::placeholder { color: rgba(247,244,237,0.3); }
.contact-input:focus {
  border-color: rgba(200,135,10,0.5);
  background: rgba(200,135,10,0.05);
}
.contact-textarea { resize: vertical; min-height: 90px; }
.contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  background: #C8870A;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 6px 20px rgba(200,135,10,0.35);
  margin-top: 4px;
}
.contact-submit:hover { filter: brightness(1.1); transform: translateY(-1px); }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .contact-section { padding: 48px 0; }
  .contact-inner { padding: 0 16px; }
  .contact-heading { font-size: 26px; }
  .contact-form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #070504;
  border-top: 1px solid rgba(200,135,10,0.12);
  padding: 60px 0 0;
}
.footer-top {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px 52px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
  gap: 32px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-brand-name {
  font-size: 18px;
  font-weight: 900;
  color: #D8A73A;
  letter-spacing: 0.05em;
}
.footer-brand-sub {
  font-size: 9px;
  color: rgba(247,244,237,0.35);
  letter-spacing: 0.12em;
}
.footer-brand-desc {
  font-size: 13px;
  color: rgba(247,244,237,0.45);
  line-height: 1.75;
  margin-bottom: 20px;
}
.footer-socials {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.footer-social {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(247,244,237,0.06);
  border: 1px solid rgba(247,244,237,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(247,244,237,0.55);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-social:hover {
  background: rgba(200,135,10,0.15);
  color: #D8A73A;
  border-color: rgba(200,135,10,0.35);
}
.footer-contact-btns {
  display: flex;
  gap: 10px;
}
.footer-call-btn, .footer-wa-btn {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}
.footer-call-btn {
  background: rgba(247,244,237,0.08);
  border: 1px solid rgba(247,244,237,0.15);
  color: #F7F4ED;
}
.footer-call-btn:hover { filter: brightness(1.2); }
.footer-wa-btn { background: #25D366; color: #fff; }
.footer-wa-btn:hover { filter: brightness(1.08); }

.footer-col-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(247,244,237,0.55);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links-list a {
  font-size: 13.5px;
  color: rgba(247,244,237,0.55);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.footer-links-list a:hover { color: #D8A73A; padding-left: 4px; }
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-contact-list li span,
.footer-contact-list li a {
  font-size: 13px;
  color: rgba(247,244,237,0.5);
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.2s;
}
.footer-contact-list li a:hover { color: #D8A73A; }

.footer-bottom {
  border-top: 1px solid rgba(247,244,237,0.07);
  padding: 20px 40px;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copyright {
  font-size: 12.5px;
  color: rgba(247,244,237,0.3);
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a {
  font-size: 12px;
  color: rgba(247,244,237,0.3);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-bottom-links a:hover { color: #D8A73A; }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .footer { padding-top: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; padding: 0 16px 36px; gap: 24px; }
  .footer-brand-col { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .footer-bottom { padding: 16px;        text-align: center; flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .services-row{    overflow-x: scroll;
    scrollbar-width: none;}
    .hero{        margin-top: 100px;}
    
   .svc-card-wrap{display: block;}
    .svc-wedding-right{overflow-x: scroll;
    width: 100%;
    scrollbar-width: none;}
    .svc-type-grid-wedding{    overflow-x: scroll;        padding-bottom: 0px;}
    .svc-type-grid{    overflow-x: scroll;
    overflow-y: hidden;}
}

/* ============================================================
   FLOATING BUTTONS (WhatsApp + Tel)
   ============================================================ */
.float-wa,
.float-tel {
  position: fixed;
  bottom: 24px;
  z-index: 490;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}
.float-wa {
  right: 24px;
  background: #25D366;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  animation: float-wa-pulse 2.8s ease-in-out infinite;
}
.float-tel {
  left: 20px;
  background: #0078D4;
  box-shadow: 0 4px 20px rgba(0,120,212,0.45);
  animation: float-tel-pulse 2.8s ease-in-out infinite;
}
.float-wa:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(37,211,102,0.6);
  animation: none;
}
.float-tel:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(0,120,212,0.6);
  animation: none;
}
@keyframes float-wa-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45); }
  50% { box-shadow: 0 4px 28px rgba(37,211,102,0.7), 0 0 0 8px rgba(37,211,102,0.12); }
}
@keyframes float-tel-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,120,212,0.45); }
  50% { box-shadow: 0 4px 28px rgba(0,120,212,0.7), 0 0 0 8px rgba(0,120,212,0.12); }
}

/* ============================================================
   NAVBAR RESPONSIVE — hamburger show/hide
   ============================================================ */
@media (max-width: 900px) {
  .navbar-nav { display: none; }
  .navbar-hamburger { display: flex; }
  .btn-nav-cta { display: none; }
}

/* ============================================================
   MOBILE PILL NAV BAR
   ============================================================ */
.mob-pill-nav {
  display: none;
  position: fixed;
  top: var(--navbar-h, 64px);
  left: 0; right: 0;
  z-index: 490;
  padding: 6px 10px 5px;
  background: rgba(5, 3, 1, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 135, 10, 0.18);
}

.mob-pill-track {
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mob-pill-track::-webkit-scrollbar { display: none; }

.mob-pill-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(220, 185, 100, 0.7);
  background: transparent;
  border: 1.5px solid transparent;
  transition: color 0.22s, background 0.22s, border-color 0.22s;
}

.mob-pill-link:hover {
  color: #D8A73A;
  border-color: rgba(200, 135, 10, 0.4);
  background: rgba(200, 135, 10, 0.08);
}

.mob-pill-link.active {
  color: #1A0D00;
  background: linear-gradient(135deg, #C8870A 0%, #E5B428 60%, #C8870A 100%);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(200, 135, 10, 0.45);
}

@media (max-width: 900px) {
  .mob-pill-nav { display: block; }
}