/* ==========================================================
   Swagat — luxe theme shared by every page: maroon, cream and gold, Indian ornament
   ========================================================== */
.luxe {
  --night: #3B0A16;
  --night-2: #320812;
  --night-3: #24060D;
  --cream: #F4ECDF;
  --cream-2: #ECE2D1;
  --card: #FBF6EC;
  --ink: #1F1712;
  --ink-2: #6A5A4C;
  --ink-3: #9A8876;
  --line: rgba(31, 23, 18, .14);
  --line-2: rgba(31, 23, 18, .24);
  --gold: #C9A25E;
  --gold-l: #E8CF96;
  --gold-d: #8E6A30;
  --on-dark: #F3E9D9;
  --on-dark-2: rgba(243, 233, 217, .64);
  --hair: rgba(232, 207, 150, .18);
  --f-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --gold-text: linear-gradient(100deg, #F6E2AE 0%, #D2AA62 38%, #F2D795 62%, #B88A45 100%);

  --cusp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0,140 L0,62 A9.5,9.5 0 0 1 6,46 A9.5,9.5 0 0 1 16,32 A9.5,9.5 0 0 1 29,20 A9.5,9.5 0 0 1 41,12 Q47,9 50,1 Q53,9 59,12 A9.5,9.5 0 0 1 71,20 A9.5,9.5 0 0 1 84,32 A9.5,9.5 0 0 1 94,46 A9.5,9.5 0 0 1 100,62 L100,140 Z'/%3E%3C/svg%3E");
  --zari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='32' viewBox='0 0 60 32'%3E%3Cg fill='none' stroke='%23D8B26A' stroke-width='1'%3E%3Cpath d='M0 2.5H60M0 29.5H60'/%3E%3Cpath d='M0 6H60M0 26H60' stroke-dasharray='1 3'/%3E%3Cpath d='M17 22c-5 0-8-4-7-8s6-7 10-5c3 2 3 6 0 7-2 0-3-1-2-3'/%3E%3Cpath d='M45 9l6 7-6 7-6-7z'/%3E%3C/g%3E%3Cg fill='%23D8B26A'%3E%3Ccircle cx='45' cy='16' r='1.6'/%3E%3Ccircle cx='15' cy='16.5' r='1.2'/%3E%3Ccircle cx='30' cy='16' r='1'/%3E%3Ccircle cx='0' cy='16' r='1'/%3E%3Ccircle cx='60' cy='16' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --jaali-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23E8CF96' stroke-opacity='.13' stroke-width='1'%3E%3Ccircle cx='44' cy='44' r='18'/%3E%3Cpath d='M44 0Q57 22 44 44Q31 22 44 0ZM44 88Q57 66 44 44Q31 66 44 88ZM0 44Q22 31 44 44Q22 57 0 44ZM88 44Q66 31 44 44Q66 57 88 44Z'/%3E%3C/g%3E%3C/svg%3E");
  --finial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 44'%3E%3Cg fill='%23D8B26A'%3E%3Ccircle cx='10' cy='3' r='2.2'/%3E%3Cpath d='M10 6C13.5 12 13.5 18 10 22C6.5 18 6.5 12 10 6Z'/%3E%3Crect x='9.3' y='21' width='1.4' height='5'/%3E%3Cpath d='M2.5 31C2.5 24.5 17.5 24.5 17.5 31C17.5 36.5 2.5 36.5 2.5 31Z'/%3E%3Crect x='4.5' y='37' width='11' height='2' rx='1'/%3E%3Crect x='6.5' y='40.5' width='7' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  --lotus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg fill='none' stroke='%238E6A30' stroke-width='1.2'%3E%3Cpath d='M32 4C38 12 38 24 32 34C26 24 26 12 32 4Z'/%3E%3Cpath d='M32 34C24 31 18 24 17 14C25 17 30 24 32 34ZM32 34C40 31 46 24 47 14C39 17 34 24 32 34Z'/%3E%3Cpath d='M32 34C22 36 12 32 6 24C15 22 25 27 32 34ZM32 34C42 36 52 32 58 24C49 22 39 27 32 34Z'/%3E%3C/g%3E%3C/svg%3E");

  background: var(--night);
  color: var(--on-dark);
}
.luxe ::selection { background: var(--gold); color: var(--night); }

/* ---------- surfaces ---------- */
.cream { position: relative; background: var(--cream); color: var(--ink); }
.cream::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--jaali) 0 0 / 88px 88px; opacity: .05; }
.night { position: relative; background: var(--night); color: var(--on-dark); }
.night--deep { background: var(--night-2); }
.cream > *, .night > * { position: relative; }

/* ---------- shared type ---------- */
.luxe .w { padding-bottom: .3em; margin-bottom: -.3em; }
.luxe .kicker {
  display: inline-flex; align-items: center; gap: .9rem;
  font: 600 .7rem/1 var(--f-body); letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
}
.luxe .kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.cream .kicker { color: var(--gold-d); }
.luxe .kicker--c::after, .shead--center .kicker::after, .icard .kicker::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.luxe .h2 { font: 400 clamp(2.6rem, 5.4vw, 5.4rem)/1 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.luxe .h2 em { font-style: italic; color: var(--gold-d); }
.night .h2 em, .luxe .night .h2 em { color: var(--gold-l); }
.luxe .h3 { font: 400 clamp(1.7rem, 2.4vw, 2.3rem)/1.08 var(--f-display); letter-spacing: -.015em; }
.luxe .lead { font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.8; color: var(--ink-2); max-width: 34em; }
.night .lead { color: var(--on-dark-2); }
.luxe .hi { font-family: var(--f-hindi); color: var(--gold-d); }
.night .hi { color: var(--gold-l); }
.luxe .link-arrow:hover { color: var(--gold-d); }
.night .link-arrow { color: var(--gold-l); }
.night .link-arrow:hover { color: var(--on-dark); }
.luxe .stars { color: var(--gold); }

/* ---------- buttons ---------- */
.btn--gold { --bg-c: var(--gold); --fg-c: var(--night); --hv: var(--gold-l); }
.btn--line { --bg-c: transparent; --fg-c: var(--on-dark); --hv: var(--on-dark); border: 1px solid rgba(232, 207, 150, .42); }
.btn--line:hover { color: var(--night); border-color: var(--on-dark); }
.btn--ink { --bg-c: var(--night); --fg-c: var(--on-dark); --hv: #5A1424; }
.btn--ink-line { --bg-c: transparent; --fg-c: var(--ink); --hv: var(--night); border: 1px solid var(--line-2); }
.btn--ink-line:hover { color: var(--on-dark); border-color: var(--night); }

/* ---------- nav, mobile menu, page transition ---------- */
.luxe .nav { color: var(--on-dark); }
.luxe .nav::before { background: rgba(52, 8, 19, .8); border-bottom-color: var(--hair); }
.luxe .nav__links a { color: var(--on-dark); }
.luxe .nav__links a::after { background: var(--gold); }
.luxe .nav__phone svg { color: var(--gold); }
.luxe .logo__mark { background: transparent; border: 1px solid rgba(232, 207, 150, .5); color: var(--gold-l); }
.luxe .logo__text b { font-weight: 500; letter-spacing: 0; }
.luxe .logo__text small { color: var(--on-dark-2); }
.luxe .nav .btn { --bg-c: var(--gold); --fg-c: var(--night); --hv: var(--gold-l); }
.luxe .nav__burger { border-color: rgba(232, 207, 150, .35); }
.luxe .nav__burger i { background: var(--on-dark); }
.luxe .mmenu { background: var(--night); color: var(--on-dark); }
.luxe .mmenu::before { background: var(--jaali-gold) 0 0 / 88px 88px; opacity: 1; }
.luxe .mmenu__links a { border-bottom-color: var(--hair); font-weight: 400; }
.luxe .mmenu__links a small, .luxe .mmenu__links a.is-active { color: var(--gold-l); }
.luxe .mmenu__foot { color: var(--on-dark-2); }
.luxe .mmenu__foot a:not(.btn) { color: var(--on-dark); }
.luxe .mmenu .btn { --bg-c: var(--gold); --fg-c: var(--night); --hv: var(--gold-l); }
.luxe .pt__panel { background: var(--night); }

/* ---------- footer ---------- */
.luxe .footer { background: var(--night-3); }
.luxe .footer__brand .logo__mark { background: transparent; border: 1px solid rgba(232, 207, 150, .5); color: var(--gold-l); }
.luxe .footer .btn--light { --bg-c: var(--gold); --fg-c: var(--night); --hv: var(--gold-l); }

/* ==========================================================
   ORNAMENT
   ========================================================== */
.zari {
  position: relative; z-index: 2; height: 36px;
  background: var(--zari) 0 50% / 60px 32px repeat-x, linear-gradient(#521222, #33091A);
  border-top: 1px solid rgba(216, 178, 106, .55); border-bottom: 1px solid rgba(216, 178, 106, .55);
}

.toran { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) - 2px); z-index: 4; pointer-events: none; overflow: hidden; }
.toran svg { display: block; filter: drop-shadow(0 6px 8px rgba(20, 0, 6, .35)); }
.toran__p { animation: sway 5s ease-in-out infinite alternate; transform-origin: 0 0; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

.luxe .ornament { width: 190px; color: var(--gold); }
.cream .ornament { color: var(--gold-d); }

.deco-corner { position: absolute; pointer-events: none; width: clamp(84px, 10vw, 160px); aspect-ratio: 1; color: #7A1E30; opacity: .32; }
.night .deco-corner { color: var(--gold); opacity: .34; }
.deco-corner svg { width: 100%; height: 100%; overflow: visible; }
.deco-corner--tl { left: 22px; top: 22px; }
.deco-corner--tr { right: 22px; top: 22px; transform: scaleX(-1); }
.deco-corner--bl { left: 22px; bottom: 22px; transform: scaleY(-1); }
.deco-corner--br { right: 22px; bottom: 22px; transform: scale(-1, -1); }
.cream > .deco-corner, .night > .deco-corner { position: absolute; }

.half-mandala { position: absolute; top: 50%; width: min(64vw, 760px); aspect-ratio: 1; color: #7A1E30; opacity: .07; pointer-events: none; }
.night .half-mandala { color: var(--gold-l); opacity: .06; }
.half-mandala svg { width: 100%; height: 100%; }
.half-mandala--l { left: 0; translate: -56% -50%; }
.half-mandala--r { right: 0; translate: 56% -50%; }
.cream > .half-mandala, .night > .half-mandala { position: absolute; }

.diya { display: block; width: 58px; height: 54px; flex: none; }
.diya svg { width: 100%; height: 100%; overflow: visible; }
.diya__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.6s ease-in-out infinite alternate; }
.diya__glow { animation: glow 2.4s ease-in-out infinite alternate; }
@keyframes flick { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.93, 1.07) rotate(1.5deg); } 100% { transform: scale(1.03, .95) rotate(-1deg); } }
@keyframes glow { from { opacity: .35; } to { opacity: .6; } }

/* a cusped Mughal arch window: [data-arch="cusp"] wrapper + .cusp child */
.cusp-wrap { position: relative; }
.cusp-wrap .arch-line { inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }
.cusp-wrap .arch-line path { stroke: rgba(142, 106, 48, .6); }
.night .cusp-wrap .arch-line path { stroke: rgba(232, 207, 150, .7); }
.cusp-wrap--finial::before {
  content: ''; position: absolute; left: 50%; top: -52px; width: 22px; height: 44px; translate: -50% 0; z-index: 1;
  background: var(--finial) center / contain no-repeat;
}
.cusp { position: relative; overflow: hidden; -webkit-mask: var(--cusp) center / 100% 100% no-repeat; mask: var(--cusp) center / 100% 100% no-repeat; background: var(--cream-2); }
.cusp img { width: 100%; height: 100%; object-fit: cover; }
.cream .cusp img { mix-blend-mode: multiply; }

/* lotus divider used between blocks */
.lotus { display: block; width: 64px; height: 40px; margin: 0 auto; background: var(--lotus) center / contain no-repeat; }

@media (max-width: 860px) {
  .deco-corner { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .toran__p, .diya__flame, .diya__glow { animation: none; }
}
