/* ==========================================================================
   MMG MUSIC — Majisa Entertainment
   Design tokens: maroon #7A1B2E, gold #C9A34E, indigo-night #14192B,
   sandstone #F4E9D8, terracotta #B5502C
   Display: 'Marcellus' (serif, carved-stone feel) — used with restraint
   Hindi accent: 'Yatra One'
   Body/UI: 'Poppins'
   Signature element: the "jharokha" arch — a carved sandstone balcony-window
   frame from Rajasthani havelis — used to frame photos, cards and the nav.
   ========================================================================== */

:root{
  --maroon: #7A1B2E;
  --maroon-deep: #591320;
  --gold: #C9A34E;
  --gold-soft: #E4C77A;
  --night: #14192B;
  --sandstone: #F4E9D8;
  --sandstone-2: #EADDC4;
  --terracotta: #B5502C;
  --ink: #241C15;
  --white: #FFFBF3;

  --font-display: 'Marcellus', 'Noto Serif Devanagari', serif;
  --font-hindi: 'Yatra One', cursive;
  --font-body: 'Poppins', 'Noto Sans Devanagari', sans-serif;

  --radius-arch: 140px 140px 8px 8px;
  --shadow-soft: 0 18px 40px rgba(20,25,43,0.18);
  --shadow-card: 0 10px 24px rgba(89,19,32,0.14);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--sandstone);
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; margin:0 0 .5em; color:var(--maroon-deep); }
p{ margin:0 0 1em; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--terracotta);
  outline-offset:3px;
}

/* ---------------------------------------------------------------------- */
/* Jharokha motif — the recurring carved-arch frame                        */
/* ---------------------------------------------------------------------- */
.jharokha{
  position:relative;
  border-radius: var(--radius-arch);
  border:3px solid var(--gold);
  padding:10px;
  background:var(--white);
  box-shadow: var(--shadow-card);
}
.jharokha::before{
  /* inner carved line, like a second sandstone frame */
  content:"";
  position:absolute; inset:6px;
  border-radius: 132px 132px 4px 4px;
  border:1px solid rgba(201,163,78,.55);
  pointer-events:none;
}
.jharokha img{
  width:100%; height:100%; object-fit:cover;
  border-radius: 130px 130px 2px 2px;
}
.jharokha-cap{
  position:absolute;
  top:-14px; left:50%; transform:translateX(-50%);
  width:34px; height:34px;
  background:var(--gold);
  clip-path: polygon(50% 0%, 100% 60%, 78% 100%, 22% 100%, 0% 60%);
}

/* ---------------------------------------------------------------------- */
/* Top marquee strip                                                       */
/* ---------------------------------------------------------------------- */
.top-strip{
  background:var(--night);
  color:var(--gold-soft);
  font-size:.78rem;
  letter-spacing:.06em;
  text-align:center;
  padding:6px 12px;
  font-family: var(--font-hindi);
}

/* ---------------------------------------------------------------------- */
/* Header / Nav                                                            */
/* ---------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  box-shadow:0 4px 18px rgba(0,0,0,.22);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
  max-width:1180px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--white);
}
.brand-mark{
  width:52px; height:52px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 60%, var(--terracotta) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.3rem; color:var(--maroon-deep);
  border:2px solid var(--gold-soft);
  flex-shrink:0;
}
.brand-text .brand-title{ font-family:var(--font-display); font-size:1.25rem; line-height:1.1; }
.brand-text .brand-sub{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); }

.nav-links{ display:flex; gap:6px; align-items:center; }
.nav-links a{
  color:var(--sandstone);
  padding:10px 14px;
  font-size:.92rem;
  border-radius:20px;
  transition: background .25s ease, color .25s ease;
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active{
  background: rgba(255,255,255,.12);
  color:var(--gold-soft);
}
.nav-cta{
  background:var(--gold);
  color:var(--maroon-deep) !important;
  font-weight:600;
  padding:10px 18px !important;
}
.nav-cta:hover{ background:var(--gold-soft) !important; }

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span{ width:26px; height:2px; background:var(--sandstone); display:block; }

@media (max-width: 960px){
  .hamburger{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--maroon-deep);
    flex-direction:column; align-items:stretch;
    max-height:0; overflow:hidden;
    transition: max-height .35s ease;
  }
  .nav-links.open{ max-height:520px; padding:10px 0; }
  .nav-links a{ padding:14px 24px; border-radius:0; }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(201,163,78,.25), transparent 60%),
    linear-gradient(160deg, var(--night) 0%, var(--maroon-deep) 55%, var(--maroon) 100%);
  color:var(--white);
  padding:76px 0 96px;
  overflow:hidden;
}
.hero::after{
  /* silhouette skyline of chhatris/domes along the bottom */
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:70px;
  background-repeat:repeat-x;
  background-size:220px 70px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='70' viewBox='0 0 220 70'><path d='M0 70 L0 40 Q10 40 10 28 Q10 16 20 16 Q20 6 30 6 Q40 6 40 16 Q50 16 50 28 Q50 40 60 40 L70 40 Q70 30 78 30 Q78 20 86 20 Q86 12 94 12 Q102 12 102 20 Q110 20 110 30 Q110 40 118 40 L128 40 Q128 30 136 30 Q136 20 144 20 Q144 12 152 12 Q160 12 160 20 Q168 20 168 30 Q168 40 176 40 L190 40 Q190 28 200 28 Q200 16 210 16 Q210 6 220 6 L220 70 Z' fill='%23F4E9D8' opacity='0.06'/></svg>");
  opacity:.9;
}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center;
  position:relative; z-index:2;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-hindi); color:var(--gold-soft);
  font-size:.95rem; margin-bottom:18px;
}
.eyebrow::before{ content:"॥"; font-size:1.1rem; }
.hero h1{
  font-size:clamp(2.3rem, 4.4vw, 3.6rem);
  color:var(--white);
  line-height:1.12;
  margin-bottom:.4em;
}
.hero h1 em{ color:var(--gold-soft); font-style:normal; }
.hero p.lead{
  font-size:1.08rem; color:rgba(244,233,216,.88); max-width:52ch;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:30px;
  font-weight:600; font-size:.95rem;
  border:2px solid transparent; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{ background:var(--gold); color:var(--maroon-deep); }
.btn-primary:hover{ background:var(--gold-soft); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.btn-outline{ border-color:var(--gold-soft); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn-whatsapp{ background:#2FAA5F; color:#fff; }
.btn-whatsapp:hover{ background:#37c56e; transform:translateY(-2px); }

.hero-art{ position:relative; }

/* ---------------------------------------------------------------------- */
/* Section framework                                                       */
/* ---------------------------------------------------------------------- */
.section{ padding:76px 0; }
.section-alt{ background:var(--sandstone-2); }
.section-dark{ background:var(--night); color:var(--sandstone); }
.section-dark h2, .section-dark h3{ color:var(--gold-soft); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.kicker{
  font-family:var(--font-hindi); color:var(--terracotta); font-size:.9rem;
  display:block; margin-bottom:8px; letter-spacing:.03em;
}
.section-dark .kicker{ color:var(--gold-soft); }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
.divider{
  width:120px; height:14px; margin:16px auto 0;
  background-image: radial-gradient(circle, var(--gold) 2.5px, transparent 2.6px);
  background-size:14px 14px; background-repeat:repeat-x;
  opacity:.85;
}

/* ---------------------------------------------------------------------- */
/* Cards & grids                                                           */
/* ---------------------------------------------------------------------- */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr;} }

.card{
  background:var(--white);
  border-radius:18px;
  padding:26px;
  box-shadow:var(--shadow-card);
  border:1px solid rgba(122,27,46,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.card .icon-badge{
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(135deg, var(--maroon), var(--terracotta));
  color:var(--gold-soft); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:16px;
}
.card h3{ font-size:1.18rem; }
.card p{ color:#5b4c3f; font-size:.95rem; margin-bottom:0; }

.service-card{ text-align:left; }

/* Artist card */
.artist-card{ text-align:center; padding-top:40px; }
.artist-card .jharokha{ width:150px; height:170px; margin:0 auto 18px; }
.artist-card h3{ margin-bottom:2px; }
.artist-role{ color:var(--terracotta); font-size:.85rem; font-weight:600; margin-bottom:10px; display:block; }

/* Event card */
.event-card{ overflow:hidden; padding:0; }
.event-card .event-photo{ height:180px; overflow:hidden; }
.event-card .event-photo img{ width:100%; height:100%; object-fit:cover; }
.event-card .event-body{ padding:22px; }
.event-tag{
  display:inline-block; background:var(--sandstone-2); color:var(--maroon);
  font-size:.75rem; font-weight:600; padding:4px 12px; border-radius:14px; margin-bottom:10px;
}

/* Gallery */
.gallery-item{ position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); cursor:pointer; }
.gallery-item img{ width:100%; height:220px; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(20,25,43,.88), transparent);
  color:var(--white); padding:16px 14px 12px;
  font-size:.9rem;
}
.gallery-caption strong{ display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--gold-soft); }

.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.filter-btn{
  padding:9px 20px; border-radius:20px; border:2px solid var(--maroon);
  background:transparent; color:var(--maroon); font-weight:600; font-size:.85rem; cursor:pointer;
  transition:all .2s ease;
}
.filter-btn.active, .filter-btn:hover{ background:var(--maroon); color:var(--white); }

.district-chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.district-chip{
  background:var(--white); border:1px solid var(--sandstone-2);
  padding:9px 16px; border-radius:14px; font-size:.86rem; color:var(--maroon-deep);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

/* Video grid */
.video-card{ background:var(--white); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); }
.video-thumb{ position:relative; aspect-ratio:16/9; background:var(--night); }
.video-thumb iframe{ width:100%; height:100%; border:0; }
.video-info{ padding:16px 18px; }
.video-info h4{ font-size:.98rem; margin-bottom:4px; }
.video-info span{ font-size:.8rem; color:#8a7a68; }

/* Testimonials */
.testi-card{ background:var(--white); border-radius:16px; padding:28px; box-shadow:var(--shadow-card); }
.stars{ color:var(--gold); letter-spacing:2px; margin-bottom:12px; font-size:1.05rem; }
.testi-name{ font-weight:600; color:var(--maroon-deep); margin-top:14px; display:block; }
.testi-loc{ font-size:.8rem; color:#8a7a68; }

/* Forms */
.form-panel{
  background:var(--white); border-radius:20px; padding:40px;
  box-shadow:var(--shadow-soft); border-top:5px solid var(--gold);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:7px; color:var(--maroon-deep); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:2px solid var(--sandstone-2); font-family:var(--font-body); font-size:.95rem;
  background:var(--sandstone); transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:none; background:var(--white); }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.82rem; color:#8a7a68; margin-top:-8px; }

/* Contact info strip */
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:44px; }
@media (max-width:800px){ .contact-info-grid{ grid-template-columns:1fr; } }
.contact-info-card{
  text-align:center; background:var(--white); border-radius:16px; padding:28px 20px;
  box-shadow:var(--shadow-card);
}
.contact-info-card .icon-badge{ margin:0 auto 14px; }

/* Stats strip */
.stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  background:var(--maroon); border-radius:22px; padding:40px 30px; color:var(--white);
  margin-top:-60px; position:relative; z-index:5; box-shadow:var(--shadow-soft);
}
@media (max-width:800px){ .stats-strip{ grid-template-columns:repeat(2,1fr); margin-top:-30px;} }
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold-soft); display:block; }
.stat .label{ font-size:.82rem; color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:.05em; }

/* Footer */
.site-footer{
  background:var(--night); color:rgba(244,233,216,.75);
  padding:64px 0 0;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(244,233,216,.12); }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:var(--gold-soft); font-size:1rem; margin-bottom:16px; font-family:var(--font-display); }
.footer-grid ul li{ margin-bottom:10px; font-size:.9rem; }
.footer-grid ul li a:hover{ color:var(--gold-soft); }
.footer-brand p{ font-size:.9rem; max-width:32ch; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:22px 0; font-size:.8rem; color:rgba(244,233,216,.55);
}
.social-row{ display:flex; gap:12px; margin-top:14px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(244,233,216,.3);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  transition:background .2s ease, border-color .2s ease;
}
.social-row a:hover{ background:var(--gold); border-color:var(--gold); color:var(--night); }

/* Floating WhatsApp */
.float-whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:300;
  width:60px; height:60px; border-radius:50%;
  background:#2FAA5F; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; box-shadow:0 10px 26px rgba(0,0,0,.3);
  animation: pulse-wa 2.6s ease-in-out infinite;
}
.float-whatsapp:hover{ background:#37c56e; }
@keyframes pulse-wa{
  0%,100%{ box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 0 0 rgba(47,170,95,.5); }
  50%{ box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 0 12px rgba(47,170,95,0); }
}

/* Page hero (inner pages) */
.page-hero{
  background:linear-gradient(160deg, var(--maroon-deep), var(--maroon));
  color:var(--white); padding:56px 0 64px; text-align:center;
}
.page-hero .kicker{ color:var(--gold-soft); }
.page-hero h1{ color:var(--white); font-size:clamp(2rem,3.6vw,2.8rem); }
.breadcrumb{ font-size:.85rem; color:rgba(244,233,216,.7); margin-top:10px; }
.breadcrumb a{ color:var(--gold-soft); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(20,25,43,.92); z-index:500;
  display:none; align-items:center; justify-content:center; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:82vh; border-radius:10px; border:4px solid var(--gold); }
.lightbox-close{
  position:absolute; top:24px; right:30px; color:var(--white); font-size:2rem; cursor:pointer; background:none; border:none;
}
.lightbox-cap{ position:absolute; bottom:30px; color:var(--gold-soft); font-family:var(--font-display); text-align:center; width:100%; }

/* Map embed wrapper */
.map-wrap{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card); border:3px solid var(--gold); }
.map-wrap iframe{ width:100%; height:340px; border:0; display:block; }

/* Utility */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } .hero-grid{ grid-template-columns:1fr; } }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.badge{
  background:rgba(255,255,255,.08); border:1px solid rgba(244,233,216,.25);
  color:var(--sandstone); font-size:.78rem; padding:6px 14px; border-radius:16px;
}

.timeline{ border-left:3px solid var(--gold); padding-left:26px; margin-left:6px; }
.timeline-item{ margin-bottom:30px; position:relative; }
.timeline-item::before{
  content:""; position:absolute; left:-32px; top:4px; width:14px; height:14px;
  border-radius:50%; background:var(--maroon); border:3px solid var(--gold-soft);
}
.timeline-item h4{ margin-bottom:4px; }
.timeline-year{ color:var(--terracotta); font-weight:600; font-size:.85rem; }