:root{
  --navy:#0a1740; --navy-2:#122054; --maroon:#6b0f22; --maroon-2:#8c1428;
  --gold:#e8b44a; --gold-lt:#ffd98a; --gold-dp:#b8862b;
  --cream:#fdf6e6; --cream-2:#f7ecd6; --ink:#20160c; --ink-soft:#5b4a33;
  --live:#e02020; --ok:#1f9d55;
  --r-s:10px; --r-m:16px; --r-l:22px;
  --sh-s:0 2px 10px rgba(10,23,64,.10);
  --sh-m:0 10px 34px rgba(10,23,64,.16);
  --sh-l:0 24px 70px rgba(10,23,64,.30);
  /* Two voices, each with one job. A high-contrast Garamond carries every
     headline, name and numeral; a geometric sans carries all running text,
     UI and the wide-tracked capitals. Festivity comes from colour, ornament
     and motion — the type stays quiet. */
  /* Matching the approved dasara build: Marcellus for display, Jost for
     everything else, Noto Serif Kannada for the Kannada cut. */
  --display:'Marcellus',Georgia,serif;
  --head:'Marcellus',Georgia,serif;
  --sub:'Marcellus',Georgia,serif;
  --ui:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1560px; --hdr:74px;
  --ease:cubic-bezier(.22,.85,.3,1);
  /* festive accents */
  --saffron:#f79433; --marigold:#f2a83d; --emerald:#0e7a58; --plum:#3b0f3a;
  --gold-1:#fbe6ae; --gold-2:#e8b44a; --gold-3:#a9761f; --gold-4:#ffeec4;
  --foil:linear-gradient(135deg,var(--gold-1) 0%,var(--gold-2) 26%,var(--gold-3) 48%,var(--gold-2) 68%,var(--gold-4) 100%);
  --foil-lite:linear-gradient(118deg,#fffaf0 0%,#ffe7b3 20%,var(--gold-2) 42%,#d69f36 56%,#ffe09a 74%,#fffaf0 100%);
}
html[data-lang="kn"] body{font-family:'Noto Serif Kannada',var(--body)}
*,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0}
/* The sideways clip belongs to ONE element, and it is this one.
   `overflow-x:hidden` on <body> looks like the same thing and is not: the
   body's overflow is only handed up to the viewport while <html> is `visible`
   on both axes. Set it on both and the handover stops, <body> becomes a
   scroll container of its own, and the page ends up with two nested
   scrollers - two scrollbars wherever scrollbars take up space, two scroll
   positions, and window.scrollTo() landing against whichever one it is not
   being asked about. Anchor jumps then go anywhere but the anchor.
   `clip` cuts the overflow off without ever creating a scroll box, so the
   sticky header still works and nothing can be panned sideways. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
/* The header is sticky and 75px tall. Without this a fragment link puts its
   target's heading underneath the header, which reads as "the link went to
   the wrong place". Letting the browser handle the jump and telling it where
   to stop is the whole job, and it covers links added by script later - which
   a one-shot click handler bound at parse time never could. */
:target,[id]{scroll-margin-top:92px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block} a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(14px,2.4vw,26px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-60px;left:14px;z-index:999;background:var(--gold);color:var(--navy);
  padding:10px 18px;border-radius:0 0 12px 12px;font-weight:700;transition:top .25s}
.skip:focus{top:0}

/* ---------- HEADER ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(7,14,40,.92);
  backdrop-filter:blur(16px) saturate(1.25);border-bottom:1px solid rgba(232,180,74,.22);
  transition:box-shadow .3s,background .3s}
.hdr.stuck{box-shadow:0 10px 34px rgba(0,0,0,.42);background:rgba(6,12,34,.97)}
.hdr .wrap{display:flex;align-items:center;gap:clamp(8px,1.2vw,20px);height:var(--hdr)}
.brand{display:flex;align-items:center;flex:none;position:relative}
.brand img{width:clamp(56px,4.6vw,78px);height:auto;margin-bottom:-14px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(-6deg) scale(1.05)}
.nav{display:none;flex:1;align-items:center;gap:1px;min-width:0}
@media(min-width:1240px){.nav{display:flex}}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:5px;padding:9px 10px;border-radius:9px;
  font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#e6dcc6;
  transition:color .2s,background .2s;white-space:nowrap}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.open>button{color:var(--gold-lt);background:rgba(232,180,74,.12)}
.nav>li>a.active{color:var(--gold-lt);position:relative}
.nav>li>a.active::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2.5px;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold));border-radius:3px}
.cev{width:9px;height:9px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .3s}
.nav>li.open .cev{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:250px;background:#0c1738;
  border-radius:var(--r-m);box-shadow:0 22px 50px rgba(0,0,0,.5);padding:9px;opacity:0;visibility:hidden;
  transform:translateY(-10px) scale(.98);transition:.28s var(--ease);border:1px solid rgba(232,180,74,.28)}
.nav>li.open .drop{opacity:1;visibility:visible;transform:none}
/* The panel hangs 10px clear of the button so the little arrow has somewhere
   to sit. Nothing occupied those 10px, so a reader moving from the trigger
   down into the list left the menu on the way - the pointer was over the
   header's .wrap, not over anything belonging to the menu. This fills the gap
   with the panel's own hit area: invisible, no paint, but the subtree is
   continuous from button to list. */
.drop::after{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.drop a{display:flex;gap:10px;padding:9px 12px;border-radius:10px;transition:background .18s;font-size:.83rem;color:#f3e8ce}
.drop a:hover{background:rgba(232,180,74,.14)}
.hact{display:flex;align-items:center;gap:7px;margin-left:auto;flex:none}
.pill{display:flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:24px;
  border:1.5px solid rgba(232,180,74,.34);color:#eee3c9;font-size:.78rem;font-weight:600;
  transition:.24s var(--ease);background:rgba(255,255,255,.04)}
.pill:hover{border-color:var(--gold);background:rgba(232,180,74,.14)}
.icobtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#eee3c9;
  border:1.5px solid rgba(232,180,74,.34);transition:.24s var(--ease)}
.icobtn:hover{background:var(--gold);border-color:var(--gold);color:#2c1c04}
.icobtn svg{width:17px;height:17px}
.btn-gold{background:linear-gradient(135deg,var(--gold),#f0c463);color:#3a2400;font-weight:800;
  height:40px;padding:0 16px;border-radius:24px;display:flex;align-items:center;gap:8px;font-size:.8rem;
  box-shadow:0 6px 18px rgba(232,180,74,.42);transition:.26s var(--ease)}
.btn-gold:hover{transform:translateY(-2px)}
.burger{display:grid;place-items:center;width:42px;height:42px;gap:5px}
@media(min-width:1240px){.burger{display:none}}
.burger i{display:block;width:22px;height:2.4px;background:var(--gold-lt);border-radius:2px;transition:.3s var(--ease)}
body.menu-open .burger i:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}
.lang-wrap{position:relative}
.lang-menu{position:absolute;right:0;top:50px;background:#0c1738;border-radius:14px;
  box-shadow:0 20px 44px rgba(0,0,0,.5);color:#f0e5cc;padding:7px;min-width:170px;opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:.25s var(--ease);border:1px solid rgba(232,180,74,.28)}
.lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:flex;width:100%;gap:9px;padding:9px 12px;border-radius:9px;font-size:.84rem;text-align:left}
.lang-menu button:hover{background:rgba(232,180,74,.14)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(88vw,370px);background:linear-gradient(170deg,#0c1836,#2a0c1e);
  color:#f4e7cd;z-index:190;transform:translateX(102%);transition:transform .45s var(--ease);
  overflow-y:auto;padding:20px 18px 60px;box-shadow:-20px 0 60px rgba(0,0,0,.4)}
body.menu-open .drawer{transform:none}
.scrim{position:fixed;inset:0;background:rgba(6,10,26,.6);backdrop-filter:blur(3px);z-index:180;
  opacity:0;visibility:hidden;transition:.35s}
body.menu-open .scrim{opacity:1;visibility:visible}
.drawer h4{font-family:var(--head);color:var(--gold);font-size:.7rem;letter-spacing:.26em;margin:20px 0 8px}
.drawer .macc{border-bottom:1px solid rgba(255,255,255,.09)}
.drawer .macc>button{display:flex;justify-content:space-between;width:100%;padding:13px 4px;font-size:.92rem;font-weight:600}
.drawer .macc .sub{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.drawer .macc.open .sub{max-height:420px}
.drawer .macc .sub a{display:block;padding:8px 4px 8px 16px;font-size:.84rem;opacity:.78;
  border-left:2px solid rgba(232,180,74,.35);margin-left:4px}


/* ---------- HERO ---------- */
.hero{position:relative;background:#050b22;overflow:hidden;isolation:isolate;
  padding-block:clamp(18px,2.2vw,32px)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:.55}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,10,32,.72),rgba(6,12,34,.55) 40%,rgba(7,13,36,.88)),
             radial-gradient(ellipse 70% 60% at 18% 10%,rgba(64,30,98,.5),transparent 66%)}
.hero .wrap{position:relative;z-index:2;display:grid;gap:22px}
/* grid items default to min-width:auto, so the 4-up action tiles (636px of
   max-content) stretched the whole hero column past the viewport on phones */
.hero .wrap>*{min-width:0}
.acts{min-width:0}

.h-welcome{font-family:var(--body);color:#efe3c8;letter-spacing:.36em;font-size:.82rem;
  font-weight:600;text-transform:uppercase}
.h-title{font-family:var(--head);font-weight:900;line-height:.92;margin:2px 0 6px;
  font-size:clamp(2.8rem,7vw,5.4rem);letter-spacing:.01em;
  background:linear-gradient(178deg,#fff9e8 8%,var(--gold-lt) 48%,var(--gold-dp) 99%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.6))}
.h-tag{font-family:var(--sub);color:var(--gold-lt);font-size:clamp(1rem,2vw,1.5rem);letter-spacing:.03em}
.h-orn{display:flex;align-items:center;gap:12px;margin:12px 0 10px;color:var(--gold);opacity:.75}
.h-orn i{height:1px;flex:1;max-width:110px;background:linear-gradient(90deg,transparent,var(--gold))}
.h-orn i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.h-pills{display:flex;flex-wrap:wrap;gap:10px 22px;color:#e9dcc0;font-size:.86rem;letter-spacing:.03em}
.h-pills span{display:flex;align-items:center;gap:9px}
.h-pills span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
/* four action tiles */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px;max-width:660px}
.act{position:relative;border-radius:var(--r-m);padding:15px 15px 14px;color:#fff;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.34);transition:.32s var(--ease);border:1px solid rgba(255,255,255,.14)}
.act:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.48)}
.act .ic{width:26px;height:26px;margin-bottom:9px;opacity:.95}
.act b{display:block;font-size:.94rem;font-weight:700;line-height:1.2}
.act small{font-size:.72rem;opacity:.85}
.act.a1{background:linear-gradient(150deg,#6d4bd6,#4a2fa8)}
.act.a2{background:linear-gradient(150deg,#12805a,#0c5c40)}
.act.a3{background:linear-gradient(150deg,#e2622a,#bd4415)}
.act.a4{background:linear-gradient(150deg,#2a72d6,#1a4fa0)}
/* mascots */
.mascots{position:relative;justify-self:center;align-self:end;margin-top:6px}
.mascots .duo{display:flex;align-items:flex-end;gap:4px}
.mascots .fm{position:relative;height:clamp(160px,19.5vw,290px);width:auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55))}
.mascots .fm picture{display:block;height:100%}
.mascots .fm img{height:100%;width:auto;display:block}
.m-band{margin:10px auto 0;display:block;text-align:center;background:linear-gradient(90deg,#7a1020,#a8202f,#7a1020);
  color:var(--gold-lt);border:1px solid rgba(232,180,74,.5);border-radius:8px;padding:7px 22px;
  box-shadow:0 8px 22px rgba(0,0,0,.45)}
.m-band b{display:block;font-family:var(--head);font-size:.98rem;letter-spacing:.06em}
.m-band small{font-size:.68rem;opacity:.85;letter-spacing:.05em}
@media(min-width:1180px){
  /* the four action tiles stay on one line, as in the mockup */
  .acts{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
  .act{padding:13px 12px 12px}
  .act b{font-size:.88rem} .act small{font-size:.69rem}
  /* copy · mascots · live rail, the way the mockup reads */
  .hero .wrap{grid-template-columns:minmax(0,1fr) auto 392px;
    grid-template-areas:"copy mascot rail";align-items:end;gap:26px}
  .h-copy{grid-area:copy;align-self:start;padding-top:6px}
  .mascots{grid-area:mascot;align-self:end}
  .rail{grid-area:rail;align-self:start}
}
@media(min-width:1180px) and (max-width:1420px){
  .hero .wrap{grid-template-columns:minmax(0,1fr) auto 340px;gap:18px}
  .mascots .fm{height:clamp(148px,15.5vw,210px)}
}
/* ---------- RIGHT RAIL ---------- */
.rail{display:grid;gap:10px;align-content:start}
.rcard{background:linear-gradient(160deg,rgba(10,19,50,.94),rgba(22,12,44,.94));
  border:1px solid rgba(232,180,74,.4);border-radius:var(--r-l);padding:12px 14px;
  box-shadow:var(--sh-l);backdrop-filter:blur(10px)}
.rcard h3{display:flex;align-items:center;gap:9px;font-family:var(--head);color:#fff;
  font-size:.94rem;letter-spacing:.1em;margin-bottom:10px}
.rcard h3 .sun{width:20px;height:20px;color:var(--gold)}
.rcard h3 a{margin-left:auto;font-family:var(--body);font-size:.7rem;font-weight:700;
  color:var(--gold-lt);letter-spacing:.04em;display:flex;align-items:center;gap:5px}
.now li{display:flex;align-items:center;gap:11px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.now li:last-child{border-bottom:0}
.now .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.now .ic svg{width:15px;height:15px}
.now .lbl{font-size:.8rem;color:#dfd4bb}
.now .val{margin-left:auto;text-align:right;line-height:1.25}
.now .val b{display:block;font-size:.86rem;color:#fff;font-weight:700}
.now .val small{font-size:.66rem;color:#a9b3c9}
.now-more{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:10px;
  padding:9px;border-radius:10px;border:1px solid rgba(232,180,74,.35);color:var(--gold-lt);
  font-size:.76rem;font-weight:700;transition:.25s var(--ease)}
.now-more:hover{background:rgba(232,180,74,.16)}
.now-more .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,157,85,.7)}70%{box-shadow:0 0 0 8px rgba(31,157,85,0)}}
/* live card */
.livec h3{margin-bottom:9px}
.live-tag{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:var(--live);color:#fff;
  font-size:.58rem;font-weight:800;padding:3px 8px;border-radius:5px;letter-spacing:.1em}
.live-tag i{width:5px;height:5px;border-radius:50%;background:#fff;animation:blinky 1.2s infinite}
@keyframes blinky{50%{opacity:.35}}
.lvplayer{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.lvplayer img{width:100%;height:100%;object-fit:cover;transition:transform 6s var(--ease)}
.lvplayer:hover img{transform:scale(1.08)}
.lvplayer .pl{position:absolute;inset:0;display:grid;place-items:center}
.lvplayer .pl b{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;
  place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.5)}
.lvplayer .pl b::before{content:"";border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--maroon);margin-left:4px}
.lvcap{margin-top:9px}
.lvcap b{display:block;color:#fff;font-size:.86rem;font-weight:700}
.lvcap small{color:#a9b3c9;font-size:.72rem}
.lvall{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:8px;
  color:var(--gold-lt);font-size:.72rem;font-weight:700}
/* dasara promo */
.promo{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid rgba(232,180,74,.45);
  box-shadow:var(--sh-l);min-height:126px;display:flex;align-items:center}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(92,10,26,.95) 34%,rgba(92,10,26,.35) 78%)}
.promo>div{position:relative;z-index:2;padding:15px 16px}
.promo h3{font-family:var(--head);color:var(--gold-lt);font-size:1.2rem;line-height:1.1}
.promo p{color:#f2e2c4;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;margin:3px 0 7px}
.promo .dt{color:#fff;font-family:var(--sub);font-size:.84rem;line-height:1.35;margin-bottom:10px}
.promo a{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--gold),#f2c669);
  color:#3a2400;font-weight:800;font-size:.76rem;padding:8px 15px;border-radius:22px;transition:.26s var(--ease)}
.promo a:hover{gap:13px}
/* countdown */
.cdc{background:linear-gradient(160deg,#5d0d1c,#8d1420 55%,#4a0a16);border:1px solid rgba(232,180,74,.4);
  border-radius:var(--r-l);padding:11px 13px;box-shadow:var(--sh-l)}
.cdc h4{font-family:var(--head);color:var(--gold-lt);text-align:center;font-size:.86rem;
  letter-spacing:.14em;margin-bottom:11px}
.cdg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cdcell{background:rgba(0,0,0,.28);border:1px solid rgba(232,180,74,.3);border-radius:11px;padding:7px 3px;text-align:center}
.cdcell b{display:block;font-family:var(--head);font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--gold-lt);
  line-height:1;font-variant-numeric:tabular-nums}
.cdcell span{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#e8d6b4;margin-top:4px;display:block}


/* ---------- CONCIERGE BAR ---------- */
.conc{margin-top:-30px;position:relative;z-index:30}
.conc-in{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-m);
  border:1px solid rgba(184,134,43,.28);padding:14px 18px;display:flex;align-items:center;gap:16px}
.conc-mascot{position:relative;height:96px;width:auto;flex:none;display:none}
@media(min-width:760px){.conc-mascot{display:block}}
.conc-mascot picture{display:block;height:100%}
.conc-mascot img{height:100%;width:auto;display:block}
.conc-body{flex:1;min-width:0}
.conc-body h3{font-size:clamp(1rem,1.9vw,1.3rem);font-weight:700;color:var(--navy);line-height:1.3}
.conc-body h3 b{color:var(--maroon)}
.conc-body p{color:var(--ink-soft);font-size:.85rem;margin-top:2px}
.conc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.conc-chips button{border:1px solid rgba(107,15,34,.28);color:#4a3518;font-size:.76rem;
  padding:6px 13px;border-radius:20px;transition:.24s var(--ease);background:#fff}
.conc-chips button:hover{background:var(--navy);color:var(--gold-lt);border-color:var(--navy);transform:translateY(-2px)}
.conc-go{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;flex:none;
  display:grid;place-items:center;transition:.28s var(--ease)}
.conc-go:hover{background:var(--maroon);transform:scale(1.08)}
.conc-go svg{width:19px;height:19px}
/* ---------- CATEGORY RAIL ---------- */
.crail-sec{margin-top:16px}
.crail{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-s);border:1px solid rgba(184,134,43,.24);
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.crail::-webkit-scrollbar{display:none}
.crail a{position:relative;display:grid;justify-items:center;gap:8px;padding:17px 8px 15px;text-align:center;
  scroll-snap-align:center;transition:.3s var(--ease)}
.crail a+a::before{content:"";position:absolute;left:0;top:24%;height:52%;width:1px;background:rgba(107,15,34,.12)}
.crail a .ic{width:30px;height:30px;transition:.4s var(--ease)}
.crail a span{font-size:.72rem;font-weight:600;color:#402c14;line-height:1.3}
.crail a:hover{background:linear-gradient(180deg,rgba(232,180,74,.14),transparent)}
.crail a:hover .ic{transform:translateY(-5px) scale(1.12)}
.crail a::after{content:"";position:absolute;left:26%;right:26%;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold));transform:scaleX(0);transition:transform .32s var(--ease)}
.crail a:hover::after{transform:scaleX(1)}
/* ---------- EXPLORE CARDS ---------- */
.sec-pad{padding:clamp(26px,4vw,44px) 0}
.ecards{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.ecard{background:#fff;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-s);
  border:1px solid rgba(184,134,43,.22);transition:.4s var(--ease);display:flex;flex-direction:column}
.ecard:hover{transform:translateY(-6px);box-shadow:var(--sh-m);border-color:rgba(232,180,74,.6)}
.ecard .ph{position:relative;aspect-ratio:16/10;overflow:hidden}
.ecard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ecard:hover .ph img{transform:scale(1.09)}
.ecard .tagx{position:absolute;top:10px;left:10px;font-size:.58rem;font-weight:800;letter-spacing:.11em;
  padding:4px 10px;border-radius:20px;color:#fff;background:rgba(10,23,64,.78);
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.ecard .bd{padding:13px 15px 15px;display:flex;flex-direction:column;flex:1}
.ecard h4{font-size:1.02rem;font-weight:700;color:var(--navy);line-height:1.25}
.ecard p{font-size:.79rem;color:var(--ink-soft);margin:5px 0 11px;flex:1}
.ecard .go{font-size:.78rem;font-weight:800;color:var(--maroon);display:inline-flex;align-items:center;gap:7px;transition:gap .25s}
.ecard:hover .go{gap:12px}
/* ---------- TRUST BAR ---------- */
.trust{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-s);border:1px solid rgba(184,134,43,.24);
  display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));overflow:hidden}
.trust div{display:flex;gap:12px;align-items:flex-start;padding:16px 17px;position:relative}
.trust div+div::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:rgba(107,15,34,.11)}
.trust .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(232,180,74,.24),rgba(107,15,34,.1));color:var(--maroon)}
.trust .ic svg{width:19px;height:19px}
.trust b{display:block;font-size:.83rem;font-weight:700;color:var(--navy);line-height:1.25}
.trust small{font-size:.72rem;color:var(--ink-soft);line-height:1.4}
/* ---------- FOOTER ---------- */
.foot{background:var(--cream-2);border-top:3px solid var(--gold);padding-top:clamp(30px,4vw,48px);margin-top:clamp(24px,4vw,44px)}
.foot-grid{display:grid;gap:26px;align-items:start}
@media(min-width:980px){.foot-grid{grid-template-columns:1.1fr 1fr .9fr 1.25fr}}
.foot h5{font-family:var(--head);font-size:.78rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:11px}
.foot p{font-size:.81rem;color:var(--ink-soft)}
.news{display:flex;max-width:330px;border-radius:26px;overflow:hidden;box-shadow:var(--sh-s);background:#fff;
  border:1px solid rgba(184,134,43,.3);margin-top:11px}
.news input{flex:1;border:0;padding:0 16px;height:44px;font-size:.83rem;min-width:0;background:transparent}
.news input:focus{outline:none}
.news button{background:linear-gradient(135deg,var(--gold-dp),var(--gold));color:#3a2400;font-weight:800;padding:0 18px;font-size:.78rem}
.stores{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.store{display:flex;align-items:center;gap:10px;background:#000;color:#fff;padding:8px 15px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);transition:.3s var(--ease)}
.store:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.45)}
.store .brand{width:21px;height:21px;flex:none}
.store small{display:block;font-size:.52rem;letter-spacing:.1em;opacity:.75;text-transform:uppercase}
.store b{font-size:.8rem;font-weight:700;line-height:1.15}
.socials{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:.3s var(--ease)}
.socials a:hover{transform:translateY(-4px) rotate(-8deg)}
.socials svg{width:17px;height:17px}
.gok{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.gok .kt{font-family:var(--sub);line-height:1.2}
.gok .kt b{display:block;font-size:1.5rem;color:var(--navy);letter-spacing:.01em}
.gok .kt i{display:block;font-style:italic;font-size:.72rem;color:var(--ink-soft)}
.gok .kt small{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:3px}
.gok .fm{position:relative;height:96px;width:auto}
.gok .fm picture{display:block;height:100%}
.gok .fm img{height:100%;width:auto;display:block}
.gok .tagline{font-family:var(--sub);color:var(--maroon);line-height:1.35}
.gok .tagline b{display:block;font-size:.94rem}
.gok .tagline small{font-size:.72rem;color:var(--ink-soft)}
.foot-bot{margin-top:26px;border-top:1px solid rgba(107,15,34,.16);padding:14px 0 20px;display:flex;
  flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.74rem;color:var(--ink-soft)}
.foot-bot nav{display:flex;gap:15px;flex-wrap:wrap}
/* The right-hand half of the footer's bottom band: who maintains the page,
   and the legal links under it, both right-aligned so they sit opposite the
   social icons rather than stacking down the left edge. */
.fb-legal{display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  text-align:right;min-width:0;margin-left:auto}
.fb-legal .fb-own{margin:0;max-width:56ch}
.fb-legal nav{justify-content:flex-end}
/* below the two-column point the band stacks and everything reads left */
@media(max-width:860px){
  .fb-legal{align-items:flex-start;text-align:left;margin-left:0}
  .fb-legal nav{justify-content:flex-start}
}
/* one Mysuru Dasara row in the footer, not two, and it is the one thing in
   those columns with a date attached - so it carries the brand gold */
.foot-grid .fl-hi{color:var(--g-lt);font-weight:500;letter-spacing:.005em}
.foot-grid a:hover .fl-hi,.foot-grid a:focus-visible .fl-hi{color:var(--g-hi)}
/* The official marks, above the bottom bar. The list and its order live in
   FOOT_LOGOS in gen_lib.py; both footers are built from it.

   Sized by height with width:auto, never the other way round - these are a
   square emblem, a square roundel, a wide three-line lockup and two ovals,
   and a shared width would make the square ones tower over the wide ones.
   Each <img> carries its real pixel dimensions, read from the file at build
   time, so the row reserves its space before the images arrive. */
/* the same number in the footer wrapped after "242" too */
.foot-mail a[href^="tel:"],.fb-id a[href^="tel:"]{white-space:nowrap}
.fb-logos{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:clamp(16px,2.6vw,38px);margin-top:30px;padding-top:24px;
  border-top:1px solid rgba(233,188,99,.16)}
.fb-logos a{display:flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;color:var(--cr-dim);opacity:.88;max-width:150px;
  font-family:var(--ui);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  text-align:center;line-height:1.35;
  transition:color .18s ease,opacity .18s ease}
.fb-logos a:hover,.fb-logos a:focus-visible{color:var(--g-lt);opacity:1}
.fb-logos img{width:auto;height:clamp(38px,4.2vw,54px);max-width:100%;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
@media(max-width:560px){
  .fb-logos{gap:16px 18px;margin-top:24px;padding-top:20px}
  .fb-logos img{height:34px}
  .fb-logos a{font-size:.52rem;letter-spacing:.07em;gap:7px;max-width:104px}
}
/* The state wordmark, not the site's display face. Sized by height so the
   script sits on the same baseline weight as the tagline under it. */
.fb-id .kt img{height:26px;width:auto;display:block;max-width:100%;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
/* The second row: the marks still waiting on artwork. No rule above it -
   it belongs to the row of logos, it is just set apart from it. */
.fb-logos-txt{border-top:0;margin-top:0;padding-top:clamp(14px,1.8vw,20px);
  gap:clamp(14px,2.2vw,28px)}
/* A mark set in type, for the two bodies that have not sent artwork. It
   occupies the same slot and the same height as a real logo, so the row
   still reads as nine marks rather than seven and a gap. Swapped for a file
   by putting one in FOOT_LOGOS - nothing else changes. */
.fl-type{display:flex;flex-direction:column;align-items:center;
  max-width:168px;opacity:.9}
.fl-type-m{min-height:clamp(38px,4.2vw,54px);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:7px 15px;
  border:1px solid rgba(233,188,99,.34);border-radius:14px;
  background:linear-gradient(180deg,rgba(233,188,99,.08),rgba(233,188,99,.02));
  font-family:var(--display);font-weight:400;letter-spacing:.01em;
  font-size:clamp(.7rem,.85vw,.82rem);line-height:1.25;color:var(--g-lt);
  text-wrap:balance}
@media(max-width:560px){
  .fl-type{max-width:132px}
  .fl-type-m{min-height:34px;padding:6px 11px;font-size:.66rem}
}

/* ---------- SHARED BITS ---------- */
.lid{position:absolute;display:block;transform:scaleY(0);transform-origin:50% 0;
  border-radius:44% 44% 40% 40% / 54% 54% 46% 46%;transition:transform .085s cubic-bezier(.4,0,.7,1)}
.lid.shut{transform:scaleY(1)}
.lids-gajju .lid{background:linear-gradient(180deg,#3f3d3b 0%,#615e5c 40%,#7a7775 78%,#565351 100%)}
.lids-gajju .lid-l{left:28.5%;top:25.5%;width:9.6%;height:7.7%}
.lids-gajju .lid-r{left:54.4%;top:25.2%;width:10.8%;height:7.7%}
.lids-divya .lid{background:linear-gradient(180deg,#e8964e 0%,#fbb972 55%,#f0a061 100%)}
.lids-divya .lid-l{left:22.7%;top:27.5%;width:20.7%;height:7.8%}
.lids-divya .lid-r{left:56.7%;top:27.3%;width:20.7%;height:7.8%}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);z-index:400;background:var(--navy);
  color:#fff;padding:12px 22px;border-radius:30px;font-size:.83rem;box-shadow:var(--sh-l);
  opacity:0;visibility:hidden;transition:transform .4s var(--ease),opacity .4s var(--ease);max-width:90vw}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast b{color:var(--gold-lt)}
#top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;z-index:120;
  background:linear-gradient(140deg,var(--maroon),#a01a2e);color:var(--gold-lt);display:grid;place-items:center;
  box-shadow:var(--sh-m);opacity:0;visibility:hidden;transform:translateY(16px) scale(.85);transition:.35s var(--ease)}
#top.on{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media(max-width:1179px){.rail{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
/* ---------- CONCIERGE CHAT ---------- */
.conc-in{flex-wrap:wrap}
.conc-chat{flex-basis:100%;order:5;display:none;margin-top:12px;border-top:1px solid rgba(184,134,43,.28);padding-top:12px}
.conc-in.open .conc-chat{display:block}
.chat-log{display:flex;flex-direction:column;gap:9px;max-height:290px;overflow-y:auto;padding:2px 4px 2px 0;scrollbar-width:thin}
.chat-log::-webkit-scrollbar{width:5px}
.chat-log::-webkit-scrollbar-thumb{background:rgba(107,15,34,.3);border-radius:4px}
.bub{max-width:82%;padding:10px 14px;border-radius:16px;font-size:.85rem;line-height:1.55;animation:pop .35s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.bub.bot{background:var(--cream-2);color:#2b1a08;border-bottom-left-radius:5px;align-self:flex-start;
  border:1px solid rgba(184,134,43,.28)}
.bub.bot b{color:var(--maroon)}
.bub.me{background:linear-gradient(135deg,var(--navy),#1b2c5e);color:#fff;font-weight:500;
  border-bottom-right-radius:5px;align-self:flex-end}
.bub.typing{display:flex;gap:4px;align-items:center;padding:13px 15px}
.bub.typing i{width:6px;height:6px;border-radius:50%;background:var(--maroon);opacity:.5;animation:dot 1.3s infinite}
.bub.typing i:nth-child(2){animation-delay:.18s}.bub.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{30%{transform:translateY(-5px);opacity:1}}
.ask{display:flex;gap:9px;margin-top:11px}
.ask input{flex:1;height:44px;border-radius:24px;border:1px solid rgba(184,134,43,.4);background:#fff;
  padding:0 17px;font-size:.86rem;min-width:0}
.ask input:focus{outline:none;box-shadow:0 0 0 3px rgba(232,180,74,.35)}
.ask button{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;flex:none;
  display:grid;place-items:center;transition:.26s var(--ease)}
.ask button:hover{background:var(--maroon);transform:scale(1.07)}
.ask button svg{width:18px;height:18px}

/* below this the two-up rail no longer fits and its cards get clipped */
@media(max-width:820px){.rail{grid-template-columns:1fr}}

/* ============ DESIGN LAYER ==============================================
   Same palette and type as index.html, taken from the approved dasara build.
   ===================================================================== */
:root{
  --k-950:#080310; --k-900:#0B0511; --k-850:#100716; --k-800:#12081A;
  --k-750:#170B20;
  --g:#E9BC63; --g-lt:#F8DFA6; --g-hi:#FFF0C9; --g-dp:#A9772E;
  --rose:#B3316B; --rose-lt:#E58BB4; --wine:#3A0D1E;
  --cr:#F7F0E4; --cr-hi:#FFF6E4; --cr-dim:rgba(247,240,228,.62);
  --cr-faint:rgba(247,240,228,.58);
  --mint:#9BE3C9;
  --hair:rgba(233,188,99,.16); --hair-2:rgba(247,240,228,.09);
  --grad-head:linear-gradient(100deg,var(--g) 0%,var(--g-lt) 34%,#F3C9A8 62%,var(--rose-lt) 88%,var(--rose) 100%);
  /* --grad-head with its last stop removed, for headings that sit on a
     photograph or a dark scrim. --rose is #B3316B: against the hero's wash
     it measures 1.56:1, so the final letters of any heading using the full
     ramp are close to unreadable. That dark tail is the reason someone
     swapped these headings onto a pale three-stop gradient instead - which
     fixed the contrast and took all the colour out with it, and is what
     "the coloured text looks dull" was about.
     Stopping short of --rose keeps every stop light enough to read on a
     dark ground.

     The stops are also far more saturated than --grad-head's middle. The
     client's note was exact: the shadow was never the problem, the colour
     was. #F3D89A and #F3C9A8 are creams with almost no chroma left in them;
     over a photograph the eye reads them as grey however much you darken
     what is behind. These are brighter AND more saturated, so the word
     reads as gold on a bright sky instead of as a smudge - which is what
     lets the scrim come off the picture. */
  --grad-head-lift:linear-gradient(100deg,#FFC23D 0%,#FFD98A 32%,#FFB4C6 66%,#FF8FBE 100%);
  --grad-gold:linear-gradient(135deg,var(--g-lt),var(--g) 46%,var(--g-dp));
}
html,body{background:var(--k-900)}
body{color:var(--cr);font-family:var(--body);letter-spacing:.002em}
p{font-family:var(--body);font-size:.95rem;line-height:1.8;color:var(--cr-dim);font-weight:300}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
.sec-pad{padding:clamp(64px,9vw,124px) 0;background:var(--k-900);position:relative}
.sec-pad>*{position:relative;z-index:1}
#trust{background:var(--k-900)}

/* --- hero --- */
.h-title{font-family:var(--display);font-weight:400;letter-spacing:.006em;line-height:.96;
  font-size:clamp(3.4rem,8.6vw,7.2rem);
  background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.6))}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .h-title{background:none;color:var(--g-lt)}}
.h-welcome{font-family:var(--ui);font-weight:300;letter-spacing:.4em;font-size:.7rem;color:var(--cr-dim)}
.h-tag{font-family:var(--display);font-weight:400;letter-spacing:.01em;color:var(--g-lt);
  font-size:clamp(1.15rem,2.3vw,1.75rem)}
.h-pills span,.acts b,.acts small{font-family:var(--ui)}
.acts b{font-weight:500;letter-spacing:.02em}
.h-orn{color:var(--g)}

/* --- capitals + UI on the sans --- */
.rcard h3,.now .lbl,.now-more,.lvall,.cdc h4,.cdcell span,.promo p,.crail a span,
.trust small,.foot h5,.foot-bot,.nav>li>a,.nav>li>button,.pill,.tagx,
.gal-filter button,.conc-chips button,.lvcap small,.ecard .go{font-family:var(--ui)}
.rcard h3{font-family:var(--ui);font-weight:400;letter-spacing:.22em;font-size:.68rem;color:var(--cr-hi)}
.cdc h4{font-family:var(--ui);font-weight:400;letter-spacing:.24em;font-size:.62rem;color:var(--g)}
.cdcell b{font-family:var(--display);font-variant-numeric:tabular-nums lining-nums;color:var(--g-lt)}
.cdcell span{color:var(--cr-faint)}

/* --- section frame --- */
.sec-head{display:grid;grid-template-columns:1fr;margin-bottom:clamp(34px,4vw,54px);align-items:end}
@media(min-width:900px){.sec-head{grid-template-columns:minmax(0,1fr) auto;gap:40px}}
.sec-head .kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--ui);
  font-weight:400;font-size:.63rem;letter-spacing:.32em;text-transform:uppercase;color:var(--g)}
.sec-head .kicker::before,.sec-head .kicker::after{content:"";width:30px;height:1px;background:var(--g-dp)}
.sec-head h2{font-family:var(--display);font-weight:400;letter-spacing:.004em;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;color:var(--cr-hi);margin-top:14px}
.sec-head h2 em{font-style:normal;background:var(--grad-head);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{font-size:.96rem;line-height:1.8;max-width:52ch;margin-top:14px;color:var(--cr-dim)}
.orn{display:flex;align-items:center;justify-content:center;gap:18px;
  padding:0 0 clamp(30px,4vw,48px);color:var(--g);opacity:.8}
.orn::before,.orn::after{content:"";height:1px;flex:1;max-width:280px;
  background:linear-gradient(90deg,transparent,var(--hair))}
.orn::after{background:linear-gradient(270deg,transparent,var(--hair))}
.orn svg{width:30px;height:30px;flex:none}
.orn .no{font-family:var(--display);font-size:.94rem;letter-spacing:.14em;color:var(--g-dp)}
.arch{position:relative;z-index:3;height:20px;line-height:0;pointer-events:none;--bump:64px;--rise:20px}
.arch-bot{margin-top:-20px;background:var(--k-900);
  -webkit-mask:radial-gradient(calc(var(--bump)/2) var(--rise) at 50% 0,#000 99.4%,transparent 100%) repeat-x 0 0;
  mask:radial-gradient(calc(var(--bump)/2) var(--rise) at 50% 0,#000 99.4%,transparent 100%) repeat-x 0 0;
  -webkit-mask-size:var(--bump) 100%;mask-size:var(--bump) 100%}
@media(max-width:700px){.arch{height:14px;--bump:44px;--rise:14px}.arch-bot{margin-top:-14px}}

/* --- surfaces --- */
.foil-rim{position:relative}
.foil-rim::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-gold);opacity:.45;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .4s var(--ease)}
.foil-rim:hover::after{opacity:.9}
.rcard{background:linear-gradient(160deg,var(--k-800),var(--k-750));border:1px solid var(--hair);
  box-shadow:0 22px 54px -34px #000,inset 0 1px 0 rgba(255,255,255,.05)}
.ecard{position:relative;background:var(--k-800);border:1px solid var(--hair);border-radius:2px;
  box-shadow:0 20px 50px -34px #000;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.ecard:hover{transform:translateY(-5px);border-color:rgba(233,188,99,.4);
  box-shadow:0 28px 62px -34px #000,0 0 44px -22px rgba(233,188,99,.36)}
.ecard .ph img{transition:transform 1.1s var(--ease)}
.ecard:hover .ph img{transform:scale(1.05)}
.ecard h4{font-family:var(--display);font-weight:400;font-size:1.24rem;line-height:1.26;color:var(--cr-hi)}
.ecard p{font-size:.83rem;line-height:1.7;margin-top:6px;color:var(--cr-dim)}
.ecard .go{font-weight:400;letter-spacing:.14em;font-size:.62rem;text-transform:uppercase;color:var(--g-lt)}
.tagx{font-family:var(--ui);font-weight:400;letter-spacing:.18em;font-size:.55rem}
.trust{background:var(--k-800);border:1px solid var(--hair);border-radius:2px;box-shadow:none}
.trust div+div::before{background:var(--hair-2)}
.trust b{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--cr-hi)}
.trust small{font-size:.74rem;color:var(--cr-dim)}
.trust .ic{background:rgba(233,188,99,.12);color:var(--g)}
.crail-sec{background:var(--k-900)}
.crail{background:var(--k-800);border:1px solid var(--hair);box-shadow:none}
.crail a span:last-child{font-family:var(--ui);font-weight:300;font-size:.74rem;color:var(--cr-dim)}
.crail a:hover span:last-child{color:var(--g-lt)}
.crail a .ic{color:var(--g)!important}
.act{position:relative;overflow:hidden;isolation:isolate}
.act::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.3) 50%,transparent 66%);
  transform:translateX(-135%);transition:transform .9s var(--ease)}
.act:hover::after{transform:translateX(135%)}
.conc{background:var(--k-850)}
.conc-in{background:linear-gradient(160deg,var(--k-800),var(--wine) 190%);border:1px solid var(--hair)}
.conc-chips button{background:rgba(255,255,255,.06);border:1px solid var(--hair-2);color:var(--cr)}
.conc-chips button:hover{border-color:var(--g);color:var(--g-lt)}

/* --- footer --- */
.foot{background:linear-gradient(170deg,var(--k-850),var(--k-950));border-top:0;
  padding-top:clamp(52px,6vw,84px);position:relative;color:var(--cr-dim)}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:1px;opacity:.6;
  background:linear-gradient(90deg,transparent,var(--g) 22%,var(--g) 78%,transparent)}
.foot h5{font-family:var(--ui);font-weight:400;font-size:.63rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--g);margin-bottom:18px}
.foot p{color:var(--cr-dim);font-size:.86rem}
.foot li a,.foot a{font-family:var(--ui);font-weight:300;font-size:.84rem;color:var(--cr-dim)}
.foot li a:hover{color:var(--g-lt)}
.news{background:rgba(255,255,255,.05);border:1px solid var(--hair)}
.news input{color:var(--cr)}.news input::placeholder{color:var(--cr-faint)}
.news button{font-family:var(--ui);font-weight:500;letter-spacing:.14em;font-size:.68rem;
  text-transform:uppercase;background:var(--grad-gold);color:#241505}
.foot-bot{border-top:1px solid var(--hair-2);color:var(--cr-faint);font-family:var(--ui);
  font-weight:300;font-size:.76rem}
.foot-bot a{color:var(--cr-dim)}.foot-bot a:hover{color:var(--g-lt)}
.gok .kt b{font-family:var(--display);color:var(--cr-hi)}
.gok .kt i{color:var(--cr-dim)}
.gok .kt small{color:var(--cr-faint)}
.gok .tagline{font-family:var(--display);color:var(--g-lt)}
.gok .tagline b{font-weight:400;font-size:1.02rem}
.gok .tagline small{font-family:var(--body);color:var(--cr-faint)}

/* --- festive --- */

::selection{background:var(--g);color:#241505}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(233,188,99,.2);border-radius:4px}
@media(min-width:1024px){
  *{scrollbar-width:thin;scrollbar-color:rgba(233,188,99,.4) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:rgba(233,188,99,.36);border-radius:20px;
    border:3px solid var(--k-900)}
  ::-webkit-scrollbar-track{background:transparent}}
@media(prefers-reduced-motion:reduce){.act::after{transition:none}}

/* ---- ported from index.html so both pages share one concierge ---------- */
/* ---- hero mascots: museum-caption name plaques, whole figure clickable -- */
.fm{overflow:visible;position:relative;pointer-events:auto}
.mhit{position:absolute;inset:0;z-index:3;background:transparent;border:0;cursor:pointer;
  border-radius:14px;transition:.3s var(--ease)}
.mhit:hover,.mhit:focus-visible{background:radial-gradient(60% 55% at 50% 60%,rgba(233,188,99,.18),transparent 70%)}
.mname{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;pointer-events:none;
  font-family:var(--ui);font-weight:400;font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--g-lt);
  padding:4px 12px;border-radius:20px;background:rgba(8,3,16,.62);
  border:1px solid rgba(233,188,99,.26);backdrop-filter:blur(6px);
  text-shadow:0 1px 6px rgba(0,0,0,.9);transition:.3s var(--ease)}
/* a hairline tick ties the plaque to the figure above it */
.mname::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:9px;
  background:linear-gradient(rgba(233,188,99,.05),rgba(233,188,99,.7))}
.mname .mchat{width:11px;height:11px;flex:none;color:var(--g)}
.fm:hover .mname{background:var(--grad-gold);color:#241505;border-color:var(--g);
  box-shadow:0 8px 22px -10px rgba(233,188,99,.8)}
.fm:hover .mname .mchat{color:#241505}
@media(max-width:860px){.mname{font-size:.5rem;letter-spacing:.16em;padding:3px 9px;bottom:-7px}
  .mname .mchat{width:9px;height:9px}}

/* ---- floating concierge ---------------------------------------------- */
.gw{position:fixed;right:18px;bottom:22px;z-index:160;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px;
  /* hidden by default; the scroll handler reveals it past the hero and hides
     it again over the footer, exactly as the countdown dock behaves */
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px);
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
.gw.on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.gw.open{pointer-events:auto}
.gw-btn{position:relative;width:62px;height:62px;border-radius:50%;flex:none;cursor:pointer;
  background:linear-gradient(160deg,#5e0d1e,#8b1a1a 55%,#3f0a18);
  border:1.5px solid rgba(233,188,99,.6);overflow:visible;
  box-shadow:0 14px 34px -12px #000,0 0 0 0 rgba(233,188,99,.5);
  transition:.32s var(--ease)}
.gw-btn picture{display:block;width:100%;height:100%;overflow:hidden;border-radius:50%}
.gw-btn img{width:118%;height:118%;object-fit:cover;object-position:50% 14%;
  transform:translate(-8%,-4%)}
.gw-btn:hover{transform:translateY(-3px) scale(1.05);border-color:var(--g);
  box-shadow:0 18px 40px -12px #000,0 0 26px -6px rgba(233,188,99,.55)}
/* Both guides on the sticky button. It was Gajju alone, which made the
   label "Chat with Gajju and Ammu" only half true. An oval rather than a
   circle, because two figures in a 62px circle are two smudges. */
.gw-btn:has(.gw-duo){width:92px;border-radius:46px}
/* height:112% put 12% of each figure outside a box with overflow:hidden,
   and because they are bottom-aligned the 12% that went was the top - both
   turbans sliced off. The figures are 538px tall against a 62px pill, so
   there is no need to oversize them at all: 88% leaves the crowns clear
   with the feet still on the floor of the oval. */
.gw-duo{position:absolute;inset:0;display:flex;align-items:flex-end;
  justify-content:center;gap:0;overflow:hidden;border-radius:inherit;
  padding-bottom:2px}
.gw-duo img{height:88%;width:auto;object-fit:contain;display:block}
.gw-duo img:first-child{margin-right:-7%}
@supports not selector(:has(*)){
  .gw-btn{width:92px;border-radius:46px}
}
@media(max-width:560px){
  .gw-btn:has(.gw-duo){width:80px;border-radius:40px}
}
.gw-ping{position:absolute;right:1px;top:1px;width:13px;height:13px;border-radius:50%;
  background:var(--mint);border:2px solid #1a0a12;animation:gwPing 2.4s infinite}
@keyframes gwPing{0%,100%{box-shadow:0 0 0 0 rgba(155,227,201,.7)}60%{box-shadow:0 0 0 9px rgba(155,227,201,0)}}
.gw-x{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  transition:opacity .25s var(--ease);border-radius:50%;background:rgba(8,3,16,.72)}
.gw-x::before,.gw-x::after{content:"";position:absolute;width:19px;height:1.6px;
  background:var(--g-lt);border-radius:2px}
.gw-x::before{transform:rotate(45deg)} .gw-x::after{transform:rotate(-45deg)}
.gw.open .gw-x{opacity:1}
.gw.open .gw-ping{opacity:0}

.gw-panel{width:min(88vw,368px);max-height:min(74vh,560px);display:flex;flex-direction:column;
  background:linear-gradient(168deg,var(--k-800),var(--k-750));
  border:1px solid rgba(233,188,99,.34);border-radius:20px;overflow:hidden;
  box-shadow:0 34px 80px -28px #000,inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin:100% 100%;animation:gwIn .34s var(--ease)}
@keyframes gwIn{from{opacity:0;transform:translateY(14px) scale(.94)}}
.gw-head{display:flex;align-items:center;gap:11px;padding:13px 14px;
  background:linear-gradient(150deg,#5e0d1e,#3f0a18);border-bottom:1px solid rgba(233,188,99,.24)}
.gw-av{width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;
  border:1.5px solid rgba(233,188,99,.55);background:#2a0a14}
.gw-av img{width:120%;height:120%;object-fit:cover;object-position:50% 12%;transform:translate(-9%,-4%)}
.gw-id{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.gw-id b{font-family:var(--display);font-weight:400;font-size:1.02rem;color:var(--g-lt)}
.gw-id small{font-family:var(--ui);font-weight:300;font-size:.66rem;color:var(--cr-dim);
  display:flex;align-items:center;gap:6px}
.gw-id small i{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none}
.gw-close{margin-left:auto;width:30px;height:30px;border-radius:50%;flex:none;cursor:pointer;
  color:var(--cr-dim);font-size:.8rem;transition:.25s var(--ease)}
.gw-close:hover{background:rgba(255,255,255,.1);color:var(--cr-hi)}
.gw-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;
  min-height:150px}
.gw-log .b{max-width:86%;padding:10px 13px;border-radius:14px;font-family:var(--ui);
  font-weight:300;font-size:.82rem;line-height:1.6;animation:gwPop .3s var(--ease) both}
@keyframes gwPop{from{opacity:0;transform:translateY(7px)}}
.gw-log .b.bot{align-self:flex-start;background:rgba(255,255,255,.07);color:var(--cr);
  border:1px solid var(--hair-2);border-bottom-left-radius:5px}
.gw-log .b.me{align-self:flex-end;background:var(--grad-gold);color:#241505;font-weight:400;
  border-bottom-right-radius:5px}
.gw-log .b b{font-weight:600;color:var(--g-lt)}
.gw-log .b.me b{color:#241505}
.gw-log .b.typing{display:flex;gap:5px;padding:13px}
.gw-log .b.typing i{width:6px;height:6px;border-radius:50%;background:var(--g);
  animation:gwDot 1.1s infinite}
.gw-log .b.typing i:nth-child(2){animation-delay:.16s}
.gw-log .b.typing i:nth-child(3){animation-delay:.32s}
@keyframes gwDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.gw-chips{display:flex;gap:7px;overflow-x:auto;padding:0 14px 11px;scrollbar-width:none}
.gw-chips::-webkit-scrollbar{display:none}
.gw-chips button{flex:none;font-family:var(--ui);font-weight:300;font-size:.7rem;
  padding:7px 13px;border-radius:20px;border:1px solid var(--hair);color:var(--cr-dim);
  background:transparent;cursor:pointer;white-space:nowrap;transition:.25s var(--ease)}
.gw-chips button:hover{border-color:var(--g);color:var(--g-lt);background:rgba(233,188,99,.1)}
.gw-form{display:flex;gap:8px;align-items:center;padding:11px 12px;
  border-top:1px solid var(--hair-2);background:rgba(0,0,0,.22)}
.gw-form input{flex:1;min-width:0;height:40px;border:0;border-radius:20px;padding:0 14px;
  background:rgba(255,255,255,.07);color:var(--cr);font-family:var(--ui);font-weight:300;
  font-size:.82rem}
.gw-form input::placeholder{color:var(--cr-faint)}
.gw-form input:focus{outline:none;box-shadow:0 0 0 2px rgba(233,188,99,.45)}
.gw-form button{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-gold);color:#241505;cursor:pointer;transition:.26s var(--ease)}
.gw-form button:hover{transform:scale(1.08) rotate(-8deg)}
.gw-form button svg{width:18px;height:18px}
@media(max-width:520px){
  .gw{right:12px;bottom:14px;left:12px;align-items:flex-end}
  .gw-panel{width:100%}
  .gw-btn{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){
  .gw-ping,.gw-log .b.typing i{animation:none}
  .gw-panel{animation:none}}

/* .hs-stage sets pointer-events:none so the scene never eats page clicks —
   the mascots have to opt back in for their hit area to receive any */
.mhit{pointer-events:auto}
.fm picture,.fm img{pointer-events:none}
/* mysuru's hero is a three-column grid — the mascots have their own column,
   so nothing overlaps them and no pointer-events surgery is needed */

/* when the footer's own chat field is on screen, lift the floating button
   clear of it rather than sitting on top */

/* ---- footer: a single entry point into the same concierge -------------- */
.foot-chat{display:flex;align-items:center;gap:12px;width:100%;max-width:340px;cursor:pointer;
  text-align:left;padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair);
  transition:.28s var(--ease)}
.foot-chat:hover{background:rgba(233,188,99,.1);border-color:var(--g);transform:translateY(-2px)}
.fcb-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(233,188,99,.14);color:var(--g)}
.fcb-ic svg{width:19px;height:19px}
.fcb-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.fcb-t b{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--cr-hi)}
.fcb-t small{font-family:var(--ui);font-weight:300;font-size:.72rem;color:var(--cr-dim)}
.fcb-go{width:16px;height:16px;margin-left:auto;flex:none;color:var(--g);
  transition:transform .28s var(--ease)}
.foot-chat:hover .fcb-go{transform:translateX(4px)}
#fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2}

/* the mascot caption doubles as the chat cue — index.html needs per-figure
   plaques because it has no caption band; repeating the names here would just
   say "Ammu" directly above "Ammu & Gajju" */
.m-band{display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;
  width:auto;margin-inline:auto;padding:9px 18px;border-radius:24px;
  background:rgba(8,3,16,.5);border:1px solid rgba(233,188,99,.3);
  backdrop-filter:blur(6px);transition:.28s var(--ease)}
.m-band .mb-ic{width:17px;height:17px;flex:none;color:var(--g)}
.m-band span{display:flex;flex-direction:column;line-height:1.3;text-align:left}
.m-band b{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--cr-hi)}
.m-band small{font-family:var(--ui);font-weight:300;font-size:.68rem;color:var(--cr-dim)}
.m-band:hover{background:var(--grad-gold);border-color:var(--g);transform:translateY(-2px);
  box-shadow:0 12px 28px -12px rgba(233,188,99,.7)}
.m-band:hover b,.m-band:hover small{color:#241505}
.m-band:hover .mb-ic{color:#241505}
/* the figures stay clickable, just without their own labels */
.fm .mhit{border-radius:18px}

/* ---- hero, rearranged ------------------------------------------------- */
/* The rail now carries only MYSURU NOW, so it no longer needs to be a tall
   column — and the countdown sits with the copy it belongs to. */
@media(min-width:1180px){
  .hero .wrap{grid-template-columns:minmax(0,1.05fr) auto minmax(300px,340px);
    align-items:start}
}
.rail{align-content:start}
.h-cdc{margin-top:clamp(16px,2vw,24px);background:linear-gradient(150deg,rgba(58,13,30,.72),rgba(23,11,32,.72));
  border:1px solid rgba(233,188,99,.28);border-radius:var(--r-l);padding:14px 16px;
  backdrop-filter:blur(8px);max-width:520px}
.h-cdc h4{font-family:var(--ui);font-weight:400;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--g);margin-bottom:11px;text-align:left}
.h-cdc .cdg{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.h-cdc .cdcell{background:rgba(8,3,16,.42);border:1px solid rgba(233,188,99,.2);
  border-radius:12px;padding:10px 6px;text-align:center}
.h-cdc .cdcell b{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.75rem);
  color:var(--g-lt);display:block;line-height:1;font-variant-numeric:tabular-nums}
.h-cdc .cdcell span{font-family:var(--ui);font-weight:300;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cr-faint);margin-top:6px;display:block}
@media(max-width:640px){.h-cdc{max-width:none}.h-cdc .cdg{gap:6px}}

/* ---- the watch band that took the stream and promo out of the rail ----- */
.watch-band{background:var(--k-850);padding:clamp(56px,7vw,96px) 0;position:relative}
.watch-grid{display:grid;gap:clamp(16px,2.4vw,26px);align-items:start}
@media(min-width:900px){.watch-grid{grid-template-columns:1.35fr 1fr}}
.watch-grid .wb-live,.watch-grid .promo{margin:0;height:100%}
.watch-grid .wb-live{display:flex;flex-direction:column}
.watch-grid .lvplayer{flex:1;min-height:clamp(220px,26vw,340px)}
.watch-grid .lvplayer img{height:100%;object-fit:cover}
.watch-grid .promo{border-radius:var(--r-l);overflow:hidden;position:relative;
  min-height:clamp(220px,26vw,340px);display:flex}
.watch-band .orn{color:var(--g)}

/* ---- the four hero actions, on the brand ramp ------------------------- */
/* They were purple / green / orange / blue — a generic product palette that
   fought the plum-and-gold ground. Now they run gold → wine → rose → plum, and
   a shared gold hairline reads them as one set. The gold card is the primary:
   the concierge is the action this page most wants you to take. */
.acts .act{border:1px solid rgba(233,188,99,.28);border-radius:14px;
  box-shadow:0 14px 34px -22px #000;transition:.32s var(--ease)}
.acts .act b{color:var(--cr-hi)}
.acts .act small{color:var(--cr-dim);opacity:1}
.acts .act .ic{color:var(--g);opacity:1}

.acts .act.a1{background:var(--grad-gold);border-color:rgba(255,240,201,.6)}
.acts .act.a1 b{color:#241505}
.acts .act.a1 small{color:rgba(36,21,5,.78)}
.acts .act.a1 .ic{color:#3a2400}

.acts .act.a2{background:linear-gradient(150deg,#4A1226,var(--wine) 78%)}
.acts .act.a3{background:linear-gradient(150deg,var(--rose),#7E1F4B 82%)}
.acts .act.a3 .ic{color:#FFD9E8}
.acts .act.a4{background:linear-gradient(150deg,#241436,var(--k-800) 82%)}

.acts .act:hover{transform:translateY(-5px);border-color:var(--g);
  box-shadow:0 22px 46px -20px #000,0 0 30px -14px rgba(233,188,99,.55)}
.acts .act.a1:hover{box-shadow:0 22px 46px -18px rgba(233,188,99,.6)}

/* ---- footer, rebuilt to the Dasara page's structure ------------------- */
/* It was five blocks in a four-column grid, so the Karnataka lockup wrapped
   under column one and the mascots floated loose beside it. Four columns now,
   with the identity moved into the bottom bar where the Dasara page keeps it. */
.foot ul{display:flex;flex-direction:column}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.fb-id{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.fb-id .kt{display:flex;flex-direction:column;line-height:1.2;padding-right:16px;
  border-right:1px solid var(--hair-2)}
.fb-id .kt b{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--cr-hi)}
.fb-id .kt i{font-family:var(--body);font-style:italic;font-weight:300;font-size:.68rem;
  color:var(--cr-dim)}
.foot-bot b{color:var(--g-lt);font-weight:400;font-family:var(--display)}
@media(max-width:700px){.fb-id .kt{border-right:0;padding-right:0}}

/* ---- the concierge bar, re-toned and resized -------------------------- */
/* Its type was still navy-on-white ink sitting on a dark card. It also ran the
   full width for what is really one short invitation, so it now takes about
   half and reads as a panel rather than a banner. */
.conc{background:var(--k-850);padding-bottom:clamp(28px,4vw,44px)}
.conc .wrap{display:flex;justify-content:center}
.conc-in{width:100%;max-width:660px;flex-wrap:wrap;align-items:center;gap:16px;
  padding:18px 20px;border-radius:22px;
  background:linear-gradient(158deg,#241436,var(--k-800) 55%,var(--wine) 190%);
  border:1px solid rgba(233,188,99,.34);
  box-shadow:0 28px 64px -34px #000,inset 0 1px 0 rgba(255,255,255,.06)}
.conc-in::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 120% at 12% 0%,rgba(233,188,99,.12),transparent 60%)}
.conc-in{position:relative;overflow:hidden}
.conc-in>*{position:relative}
.conc-mascot{display:block;height:104px;flex:none;margin-top:-26px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55))}
.conc-body h3{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,2vw,1.34rem);
  line-height:1.3;color:var(--cr-hi);letter-spacing:.004em}
.conc-body h3 b{font-weight:400;background:var(--grad-head);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.conc-body p{font-family:var(--ui);font-weight:300;color:var(--cr-dim);font-size:.84rem;margin-top:4px}
.conc-chips{margin-top:12px}
.conc-chips button{font-family:var(--ui);font-weight:300;font-size:.75rem;padding:7px 14px;
  border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--hair);
  color:var(--cr);transition:.24s var(--ease)}
.conc-chips button:hover{background:var(--grad-gold);color:#241505;border-color:var(--g);
  transform:translateY(-2px)}
.conc-go{width:46px;height:46px;background:var(--grad-gold);color:#241505;
  box-shadow:0 10px 24px -12px rgba(233,188,99,.8)}
.conc-go:hover{background:var(--grad-gold);filter:brightness(1.08);transform:scale(1.08) rotate(-8deg)}
.conc-chat{border-top:1px solid var(--hair-2)}
.chat-log .bub{font-family:var(--ui);font-weight:300}
.conc .ask input{background:rgba(255,255,255,.06);border:1px solid var(--hair);color:var(--cr);
  font-family:var(--ui);font-weight:300}
.conc .ask input::placeholder{color:var(--cr-faint)}
.conc .ask button{background:var(--grad-gold);color:#241505}
@media(max-width:620px){
  .conc-in{max-width:none;padding:16px}
  .conc-mascot{height:78px;margin-top:-20px}
}

/* ---- hero columns: MYSURU NOW and the countdown share a baseline -------- */
/* Both columns stretch to the row, the countdown is pinned to the bottom of
   the copy column and the panel fills its own — so the two bottom edges line
   up whichever column happens to be tallest. */
@media(min-width:1180px){
  .hero .wrap{align-items:stretch}
  .hero .mascots{align-self:end}
  .h-copy{display:flex;flex-direction:column}
  .h-cdc{margin-top:auto}
  .rail{align-self:stretch;align-content:stretch;grid-template-rows:1fr}
  .rail .rcard{height:100%;display:flex;flex-direction:column}
  .rail .now{flex:1;display:flex;flex-direction:column;justify-content:space-between}
  .rail .now li{flex:0 0 auto}
}

/* ---- emergency & helplines -------------------------------------------- */
.em{background:linear-gradient(180deg,var(--k-900),var(--k-850))}
.em .link-all{color:#FFB3B3;border-bottom-color:rgba(255,138,138,.4)}
.em .link-all:hover{color:#fff;border-bottom-color:#FF8A8A}

/* the numbers */
.em-nums{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  margin-bottom:clamp(26px,3.4vw,40px)}
.em-num{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:16px;
  background:var(--k-800);border:1px solid var(--hair-2);transition:.28s var(--ease);
  position:relative;overflow:hidden}
.em-num:hover{transform:translateY(-4px);border-color:var(--tone,var(--g));
  box-shadow:0 20px 44px -24px #000}
.em-num .ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone,#E9BC63) 16%,transparent);color:var(--tone,#E9BC63)}
.em-num .ic svg{width:21px;height:21px}
.em-num .tx{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.em-num .num{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--cr-hi);
  letter-spacing:.01em;font-variant-numeric:tabular-nums}
.em-num .lbl{font-family:var(--ui);font-weight:400;font-size:.8rem;color:var(--cr)}
.em-num .sub{font-family:var(--ui);font-weight:300;font-size:.7rem;color:var(--cr-dim);margin-top:2px}
/* the all-in-one number leads */
.em-num.lead{background:linear-gradient(150deg,#5E1420,#3A0D1E 78%);border-color:rgba(255,138,138,.42)}
.em-num.lead .num{font-size:1.9rem;color:#FFD9D9}
.em-num.lead .ic{background:rgba(255,138,138,.18);color:#FF8A8A}
@media(min-width:900px){.em-num.lead{grid-column:span 2}}

/* map + list */
.em-grid{display:grid;gap:clamp(14px,2vw,22px)}
@media(min-width:960px){.em-grid{grid-template-columns:1.4fr 1fr;align-items:stretch}}
.em-mapwrap{position:relative;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--hair);background:var(--k-800);min-height:420px}
.em-map{position:absolute;inset:0;background:var(--k-850)}
.em-filter{position:absolute;left:56px;top:12px;z-index:900;display:flex;gap:6px;
  flex-wrap:wrap;max-width:calc(100% - 132px)}
.em-filter button{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);
  font-weight:300;font-size:.7rem;padding:6px 11px;border-radius:20px;cursor:pointer;
  background:rgba(8,3,16,.82);border:1px solid var(--hair);color:var(--cr-dim);
  backdrop-filter:blur(6px);transition:.22s var(--ease)}
.em-filter button svg{width:13px;height:13px;color:var(--dot,var(--g))}
.em-filter button:hover{color:var(--cr-hi);border-color:var(--g-dp)}
.em-filter button.on{background:var(--g);color:#241505;border-color:var(--g)}
.em-filter button.on svg{color:#241505}
.em-pin{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--k-900);border:2px solid var(--pc,#E9BC63);
  box-shadow:0 6px 16px rgba(0,0,0,.6);cursor:pointer;transition:.2s var(--ease)}
.em-pin svg{width:15px;height:15px;color:var(--pc,#E9BC63)}
.em-pin:hover,.em-pin.on{background:var(--pc,#E9BC63);transform:scale(1.14)}
.em-pin:hover svg,.em-pin.on svg{color:#0B0511}

.em-list{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow-y:auto;
  padding-right:4px}
.em-item{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:14px;
  background:var(--k-800);border:1px solid var(--hair-2);cursor:pointer;text-align:left;
  transition:.24s var(--ease);width:100%}
.em-item:hover,.em-item.on{background:rgba(233,188,99,.08);border-color:var(--hair);
  transform:translateX(3px)}
.em-item .ic{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone,#E9BC63) 15%,transparent);color:var(--tone,#E9BC63)}
.em-item .ic svg{width:17px;height:17px}
.em-item .tx{min-width:0;flex:1}
.em-item b{display:block;font-family:var(--display);font-weight:400;font-size:1rem;
  color:var(--cr-hi);line-height:1.25}
.em-item small{display:block;font-family:var(--ui);font-weight:300;font-size:.72rem;
  color:var(--cr-dim);margin-top:2px}
.em-item .tel{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-family:var(--ui);
  font-weight:400;font-size:.72rem;color:var(--g-lt);border-bottom:1px solid var(--hair)}
.em-item .tel svg{width:12px;height:12px}


/* Leaflet chrome, matched to the page */
.em .leaflet-container{background:var(--k-850);font-family:var(--ui)}
.em .leaflet-popup-content-wrapper{background:var(--k-800);color:var(--cr);border-radius:12px;
  border:1px solid var(--hair)}
.em .leaflet-popup-tip{background:var(--k-800)}
.em .leaflet-popup-content{margin:12px 14px;font-family:var(--ui);font-weight:300;font-size:.78rem}
.em .leaflet-popup-content b{font-family:var(--display);font-weight:400;font-size:1rem;
  color:var(--cr-hi);display:block;margin-bottom:3px}
.em .leaflet-popup-content a{color:var(--g-lt);border-bottom:1px solid var(--hair)}
.em .leaflet-control-zoom a{background:var(--k-800);color:var(--cr);border-color:var(--hair)}
.em .leaflet-control-zoom a:hover{background:var(--k-750);color:var(--g-lt)}
.em .leaflet-control-attribution{background:rgba(8,3,16,.72);color:var(--cr-faint)}
.em .leaflet-control-attribution a{color:var(--cr-dim)}
.em .leaflet-attribution-flag{width:1em!important;height:.6669em!important;display:inline!important}
@media(max-width:640px){.em-mapwrap{min-height:340px}.em-list{max-height:none}}

/* ---- attractions map: a list beside a map, opened as an overlay -------- */
.mapx-open{display:flex;align-items:center;gap:14px;width:100%;max-width:520px;cursor:pointer;
  text-align:left;margin:0 0 clamp(22px,3vw,32px);padding:15px 18px;border-radius:18px;
  background:linear-gradient(150deg,var(--k-800),var(--k-750));
  border:1px solid rgba(233,188,99,.34);transition:.28s var(--ease)}
.mapx-open:hover{transform:translateY(-3px);border-color:var(--g);
  box-shadow:0 22px 46px -24px #000,0 0 30px -16px rgba(233,188,99,.5)}
.mo-ic{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:rgba(233,188,99,.14);color:var(--g)}
.mo-ic svg{width:22px;height:22px}
.mo-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.mo-t b{font-family:var(--display);font-weight:400;font-size:1.08rem;color:var(--cr-hi)}
.mo-t small{font-family:var(--ui);font-weight:300;font-size:.75rem;color:var(--cr-dim)}
.mo-go{width:17px;height:17px;margin-left:auto;flex:none;color:var(--g);
  transition:transform .28s var(--ease)}
.mapx-open:hover .mo-go{transform:translateX(4px)}

.mapx{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(10px,3vw,34px);
  background:rgba(4,2,9,.82);backdrop-filter:blur(6px);animation:mapxFade .28s var(--ease)}
@keyframes mapxFade{from{opacity:0}}
.mapx-in{width:min(1180px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden;background:var(--k-850);
  border:1px solid rgba(233,188,99,.34);box-shadow:0 40px 100px -30px #000;
  animation:mapxIn .32s var(--ease)}
@keyframes mapxIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.mapx-head{display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:linear-gradient(150deg,#241436,var(--k-800));
  border-bottom:1px solid var(--hair)}
.mapx-kick{display:block;font-family:var(--ui);font-weight:400;font-size:.6rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--g)}
.mapx-head h3{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,2.2vw,1.5rem);
  color:var(--cr-hi);margin-top:4px;letter-spacing:.004em}
.mapx-x{margin-left:auto;width:36px;height:36px;flex:none;border-radius:50%;cursor:pointer;
  color:var(--cr-dim);font-size:.9rem;transition:.24s var(--ease)}
.mapx-x:hover{background:rgba(255,255,255,.1);color:var(--cr-hi)}
.mapx-body{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr)}
@media(min-width:860px){.mapx-body{grid-template-columns:390px minmax(0,1fr);grid-template-rows:none}}
/* position:relative is load-bearing. Each of the 42 rows carries an
   absolutely positioned .sr span (the screen-reader half of "Show on
   map for Chamundi Hill"). With this list left static, their containing
   block was an ancestor OUTSIDE the scroller, so they were not clipped
   by it: 7,480px of list content in a 720px box pushed the document
   1,735px past the footer and the home page ended in a tall empty
   strip with nothing in it. That is the "last section is empty" report.
   Making the list the containing block clips them with everything else. */
.mapx-list{position:relative;overflow-y:auto;border-bottom:1px solid var(--hair-2);max-height:38vh}
@media(min-width:860px){.mapx-list{max-height:none;border-bottom:0;border-right:1px solid var(--hair-2)}}
.mx-item{display:flex;gap:13px;width:100%;text-align:left;cursor:pointer;padding:15px 18px;
  border-bottom:1px solid var(--hair-2);transition:.22s var(--ease);background:transparent}
.mx-item:last-child{border-bottom:0}
.mx-item:hover,.mx-item.on{background:rgba(233,188,99,.07)}
.mx-item .ic{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone,#E9BC63) 18%,transparent);color:var(--tone,#E9BC63);
  border:1px solid color-mix(in srgb,var(--tone,#E9BC63) 45%,transparent)}
.mx-item .ic svg{width:18px;height:18px}
.mx-item .tx{min-width:0}
.mx-item b{display:block;font-family:var(--display);font-weight:400;font-size:1.06rem;
  color:var(--cr-hi);line-height:1.25}
.mx-item p{font-family:var(--ui);font-weight:300;font-size:.78rem;line-height:1.6;
  color:var(--cr-dim);margin-top:4px}
.mx-item .go{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--ui);
  font-weight:400;font-size:.72rem;color:var(--g-lt)}
.mx-item .go svg{width:12px;height:12px}
.mapx-map{min-height:300px;background:var(--k-850)}
.mx-pin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--k-900);border:2px solid var(--pc,#E9BC63);
  box-shadow:0 6px 18px rgba(0,0,0,.65);cursor:pointer;transition:.2s var(--ease)}
.mx-pin svg{width:17px;height:17px;color:var(--pc,#E9BC63)}
.mx-pin:hover,.mx-pin.on{background:var(--pc,#E9BC63);transform:scale(1.15)}
.mx-pin:hover svg,.mx-pin.on svg{color:#0B0511}
.mapx .leaflet-container{background:var(--k-850);font-family:var(--ui)}
.mapx .leaflet-popup-content-wrapper{background:var(--k-800);color:var(--cr);border-radius:12px;
  border:1px solid var(--hair)}
.mapx .leaflet-popup-tip{background:var(--k-800)}
.mapx .leaflet-popup-content{margin:12px 14px;font-family:var(--ui);font-weight:300;font-size:.78rem}
.mapx .leaflet-popup-content b{font-family:var(--display);font-weight:400;font-size:1rem;
  color:var(--cr-hi);display:block;margin-bottom:3px}
.mapx .leaflet-popup-content a{color:var(--g-lt);border-bottom:1px solid var(--hair)}
.mapx .leaflet-control-zoom a{background:var(--k-800);color:var(--cr);border-color:var(--hair)}
.mapx .leaflet-control-attribution{background:rgba(8,3,16,.72);color:var(--cr-faint)}
.mapx .leaflet-attribution-flag{width:1em!important;height:.6669em!important;display:inline!important}
@media(prefers-reduced-motion:reduce){.mapx,.mapx-in{animation:none}}

/* The UA rule for [hidden] is display:none at zero specificity, so any class
   that sets display — .gw-panel{display:flex}, .mapx{display:grid} — silently
   outranks it and the element never hides. Settle it once, globally. */
[hidden]{display:none!important}
/* ============ end design layer ============ */