/* ==========================================================
   KASHI ON WEB — Digital Card
   Palette drawn from the KOW logo:
   navy #14305F | gold #B8802B | saffron #E8731A
   parchment #F8F1E2 | ganga blue #4A7FA5 | ink #1B2434
   ========================================================== */
:root{
  --navy:#14305F;
  --navy-deep:#0C1F42;
  --gold:#B8802B;
  --gold-lt:#E3B45C;
  --saffron:#E8731A;
  --parchment:#F8F1E2;
  --paper:#FFFBF2;
  --ganga:#4A7FA5;
  --ink:#1B2434;
  --ok:#1E7B4F;
  --shadow:0 6px 24px rgba(20,48,95,.14);
  --r:18px;
  --disp:'Marcellus',serif;
  --body:'Mukta',sans-serif;
  --deva:'Yatra One','Mukta',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--navy-deep);
  -webkit-font-smoothing:antialiased;
}

/* ---- mobile card frame: card floats centered even on desktop ---- */
.card{
  max-width:430px;margin:0 auto;min-height:100dvh;
  background:
    radial-gradient(120% 60% at 50% 0%, #FFF7E8 0%, var(--parchment) 55%),
    var(--parchment);
  box-shadow:0 0 60px rgba(0,0,0,.5);
  overflow-x:hidden;
}

/* ==========================================================
   1. SPLASH
   ========================================================== */
.splash{
  position:fixed;inset:0;z-index:100;
  background:
    radial-gradient(90% 55% at 50% 108%, rgba(232,115,26,.35) 0%, transparent 60%),
    radial-gradient(140% 90% at 50% -20%, #1D4179 0%, var(--navy-deep) 70%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s ease, visibility .9s;
}
.splash.gone{opacity:0;visibility:hidden}
.splash-inner{
  text-align:center;padding:32px 28px;max-width:400px;
  animation:rise 1.2s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.splash-logo{width:120px;height:120px;object-fit:contain;border-radius:50%;
  background:#fff;padding:8px;box-shadow:0 0 0 3px var(--gold-lt),0 0 40px rgba(227,180,92,.35);}
.diya{
  width:44px;height:22px;margin:26px auto 8px;
  background:linear-gradient(#8a4a10,#5c2f08);
  border-radius:0 0 22px 22px;position:relative;
}
.flame{
  position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  width:12px;height:18px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 75%, #fff3c4 0%, #ffb02e 45%, #e8731a 80%);
  box-shadow:0 0 18px 6px rgba(255,176,46,.55);
  animation:flicker 1.6s infinite ease-in-out;
  transform-origin:50% 100%;
}
@keyframes flicker{
  0%,100%{transform:translateX(-50%) scale(1) rotate(-2deg)}
  50%{transform:translateX(-50%) scale(1.12) rotate(3deg)}
}
.shloka{
  font-family:var(--deva);color:var(--gold-lt);
  font-size:1.35rem;line-height:1.7;margin-top:14px;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.shloka-sub{color:#B9C6DE;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-top:8px}
.local-friend{color:#EDE4CF;margin-top:22px;font-size:1rem;line-height:1.6}
.local-friend strong{color:var(--gold-lt)}
.btn-enter{
  margin-top:26px;padding:15px 30px;border:none;border-radius:40px;
  font-family:var(--body);font-weight:600;font-size:1.02rem;cursor:pointer;
  color:var(--navy-deep);
  background:linear-gradient(135deg,var(--gold-lt),#F3CE86 45%,var(--gold));
  box-shadow:0 8px 24px rgba(184,128,43,.45);
  transition:transform .2s;
}
.btn-enter:active{transform:scale(.96)}
/* ghat silhouette (stepped skyline) at splash bottom */
.splash-ghats{
  position:absolute;bottom:0;left:0;right:0;height:64px;
  background:linear-gradient(180deg,#0A1830,#071122);
  opacity:.9;
  clip-path:polygon(
    0 100%,0 55%,7% 55%,7% 30%,12% 30%,12% 55%,20% 55%,20% 18%,
    24% 18%,24% 55%,33% 55%,33% 40%,40% 40%,40% 10%,44% 10%,44% 40%,
    52% 40%,52% 55%,60% 55%,60% 25%,66% 25%,66% 55%,75% 55%,75% 35%,
    82% 35%,82% 55%,90% 55%,90% 20%,94% 20%,94% 55%,100% 55%,100% 100%);
}

/* ==========================================================
   GHAT-STEP DIVIDER  (signature element)
   ========================================================== */
.ghat-divider{
  height:26px;margin:6px 0;
  background:
    repeating-linear-gradient(to right,
      var(--gold) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom,
      transparent 0 8px,  rgba(184,128,43,.55) 8px 9px,
      transparent 9px 16px, rgba(184,128,43,.35) 16px 17px,
      transparent 17px 25px, rgba(184,128,43,.2) 25px 26px);
  background-size:25% 100%,100% 100%;
  background-repeat:repeat-x,no-repeat;
  clip-path:polygon(0 100%,0 60%,12.5% 60%,12.5% 30%,37.5% 30%,37.5% 0,62.5% 0,62.5% 30%,87.5% 30%,87.5% 60%,100% 60%,100% 100%);
  opacity:.5;
}

/* ==========================================================
   2. VIDEO HEADER
   ========================================================== */
.video-header{background:var(--navy-deep)}
.video-wrap{position:relative;padding-top:56.25%}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ==========================================================
   3. HERO
   ========================================================== */
.hero{
  text-align:center;padding:28px 22px 20px;
  background:
    linear-gradient(180deg, rgba(20,48,95,.06), transparent 40%);
}
.hero-logo{width:104px;height:104px;object-fit:contain;border-radius:50%;
  background:#fff;padding:6px;
  box-shadow:0 0 0 3px var(--gold-lt), var(--shadow);}
.hero-logo-fallback{
  width:104px;height:104px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:2rem;color:var(--gold);
  background:#fff;box-shadow:0 0 0 3px var(--gold-lt),var(--shadow);
}
.hero h1{
  font-family:var(--disp);font-size:1.9rem;color:var(--navy);
  margin-top:14px;letter-spacing:.02em;
}
.tagline{
  color:var(--gold);font-size:.76rem;letter-spacing:.28em;
  text-transform:uppercase;margin-top:4px;font-weight:600;
}
.hero-line{margin-top:10px;color:#4b5568;font-size:.95rem}
.hero-line em{color:var(--saffron);font-style:normal;font-weight:600}

.contact-row{display:flex;gap:12px;justify-content:center;margin-top:18px}
.c-btn{
  display:flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:40px;text-decoration:none;
  font-weight:600;font-size:.98rem;box-shadow:var(--shadow);
  transition:transform .15s;
}
.c-btn:active{transform:scale(.95)}
.c-btn svg{width:19px;height:19px;fill:currentColor}
.c-btn.call{background:var(--navy);color:#fff}
.c-btn.wa{background:#1FA855;color:#fff}

.social-row{display:flex;gap:10px;justify-content:center;margin-top:16px}
.social-row a{
  width:46px;height:46px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:1.25rem;
  background:#fff;text-decoration:none;
  border:1.5px solid rgba(184,128,43,.4);box-shadow:0 3px 10px rgba(20,48,95,.08);
  transition:transform .15s;
}
.social-row a:active{transform:scale(.9)}

.visitor-pill{
  display:inline-flex;gap:6px;align-items:center;margin-top:18px;
  padding:7px 16px;border-radius:30px;font-size:.82rem;font-weight:600;
  color:var(--navy);background:rgba(74,127,165,.12);
  border:1px dashed var(--ganga);
}

/* ==========================================================
   SECTIONS (shared)
   ========================================================== */
.sec{padding:26px 22px}
.sec-title{
  font-family:var(--disp);font-size:1.32rem;color:var(--navy);
  margin-bottom:6px;
}
.sec-sub{color:#5b6474;font-size:.9rem;margin-bottom:16px;line-height:1.55}
.tiny-note{font-size:.78rem;color:#7a8294;margin-top:12px;text-align:center}
.tiny-note a{color:var(--saffron);font-weight:600;text-decoration:none}
.btn-primary{
  width:100%;padding:15px;border:none;border-radius:14px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:1.02rem;color:#fff;
  background:linear-gradient(135deg,var(--saffron),#C85B0E);
  box-shadow:0 6px 18px rgba(232,115,26,.35);
}
.btn-outline{
  display:block;text-align:center;margin-top:14px;padding:12px;
  border:1.5px solid var(--navy);border-radius:14px;color:var(--navy);
  font-weight:600;text-decoration:none;font-size:.92rem;
}

/* ---- 4. WhatsApp share ---- */
.share-sec{background:linear-gradient(135deg,#EAF7EE,#F5FBF3);margin:0 14px;border-radius:var(--r);
  border:1px solid #CBE7D2;padding:22px 20px}
.wa-share{display:flex;gap:8px}
.wa-share input{
  flex:1;padding:13px 16px;border-radius:12px;border:1.5px solid #BFD9C6;
  font-family:var(--body);font-size:1rem;background:#fff;
}
.wa-share button{
  padding:13px 22px;border:none;border-radius:12px;background:#1FA855;color:#fff;
  font-weight:700;font-size:.95rem;cursor:pointer;
}

/* ---- 5. services ---- */
.services{display:grid;gap:12px}
.svc{
  display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;
  gap:2px 14px;align-items:center;text-align:left;text-decoration:none;
  background:#fff;border:1px solid rgba(184,128,43,.25);border-radius:var(--r);
  padding:16px;cursor:pointer;font-family:var(--body);color:var(--ink);
  box-shadow:0 3px 12px rgba(20,48,95,.06);transition:transform .15s;
}
.svc:active{transform:scale(.98)}
.svc-ic{grid-row:1/3;font-size:1.9rem;width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(232,115,26,.12),rgba(184,128,43,.16));}
.svc-name{font-weight:700;color:var(--navy);font-size:1.02rem}
.svc-desc{font-size:.82rem;color:#677183;grid-column:2}

/* ---- 6. ads ---- */
.ads{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;-webkit-overflow-scrolling:touch}
.ads::-webkit-scrollbar{display:none}
.ad{
  min-width:78%;scroll-snap-align:start;position:relative;
  background:linear-gradient(135deg,#fff,#FFF6E6);
  border:1px solid rgba(184,128,43,.35);border-radius:var(--r);
  padding:18px 16px 16px;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:4px;
}
.ad strong{color:var(--navy);font-size:1.05rem}
.ad span:last-child{font-size:.85rem;color:#677183}
.ad-badge{
  position:absolute;top:-9px;right:12px;font-size:.62rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:var(--gold);padding:3px 10px;border-radius:20px;
}

/* ---- 7. facts ---- */
.kashi-facts{background:var(--navy);margin:0;color:#EDE4CF;
  background:radial-gradient(120% 100% at 50% -10%, #1D4179, var(--navy-deep))}
.kashi-facts .sec-title{color:var(--gold-lt)}
.fact-scroller{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
  -webkit-overflow-scrolling:touch}
.fact-scroller::-webkit-scrollbar{display:none}
.fact{
  min-width:100%;scroll-snap-align:center;padding:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(227,180,92,.3);
  border-radius:var(--r);font-size:.95rem;line-height:1.6;
}
.fact span{display:block;font-size:1.6rem;margin-bottom:8px}
.fact strong{color:var(--gold-lt)}
.fact-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.fact-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.fact-dots i.on{background:var(--gold-lt)}

/* ---- 8. insta ---- */
.insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.insta-tile{
  aspect-ratio:1;border-radius:10px;position:relative;overflow:hidden;
  background:
    linear-gradient(calc(var(--i)*61deg),
      rgba(20,48,95,.85), rgba(74,127,165,.7) 45%, rgba(232,115,26,.8));
}
.insta-tile::after{
  content:'📷';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:1.4rem;opacity:.75;
}

/* ---- 9/10. google ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g-card{
  background:#fff;border:1px solid rgba(184,128,43,.25);border-radius:var(--r);
  padding:18px 14px;text-decoration:none;color:var(--ink);text-align:center;
  display:flex;flex-direction:column;gap:4px;box-shadow:0 3px 12px rgba(20,48,95,.06);
}
.g-ic{font-size:1.7rem}
.g-card strong{color:var(--navy);font-size:.95rem}
.g-card span:last-child{font-size:.76rem;color:#677183}

/* ---- 11. donation ---- */
.donation{
  margin:0 14px;border-radius:var(--r);text-align:center;
  background:linear-gradient(160deg,#FFF4E3,#FFEAD0);
  border:1px solid rgba(232,115,26,.3);
}
.donate-amts{display:flex;gap:10px;justify-content:center;margin:14px 0}
.amt{
  padding:10px 18px;border-radius:30px;border:1.5px solid var(--saffron);
  background:#fff;color:var(--saffron);font-weight:700;font-size:.95rem;
  cursor:pointer;font-family:var(--body);
}
.amt.sel{background:var(--saffron);color:#fff}
.btn-donate{
  display:block;padding:15px;border-radius:14px;text-decoration:none;
  font-weight:700;font-size:1.02rem;color:#fff;
  background:linear-gradient(135deg,var(--saffron),#C85B0E);
  box-shadow:0 6px 18px rgba(232,115,26,.35);
}

/* ---- 14. enquiry ---- */
.enquiry{background:#fff;margin:20px 14px;border-radius:var(--r);
  border:1px solid rgba(20,48,95,.12);box-shadow:var(--shadow)}
.enquiry input,.enquiry select,.enquiry textarea{
  width:100%;padding:13px 15px;margin-bottom:11px;border-radius:12px;
  border:1.5px solid #D9DCE4;font-family:var(--body);font-size:.98rem;
  background:var(--paper);color:var(--ink);
}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,128,43,.15)}
.form-row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.form-msg{margin-top:10px;text-align:center;font-weight:600;font-size:.9rem}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:#B4231F}

/* ---- 15. testimonials ---- */
.testi-scroller{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:6px}
.testi-scroller::-webkit-scrollbar{display:none}
.testi{
  min-width:84%;scroll-snap-align:start;background:#fff;
  border-radius:var(--r);border-left:4px solid var(--gold);
  padding:18px;box-shadow:0 3px 12px rgba(20,48,95,.06);
}
.testi blockquote{font-size:.94rem;line-height:1.6;color:#3a4356;font-style:italic}
.testi figcaption{margin-top:10px;font-size:.82rem;font-weight:600;color:var(--navy)}
.testi figcaption span{color:var(--gold);letter-spacing:.1em;margin-left:6px}

/* ---- 16. gallery ---- */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gallery img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  background:linear-gradient(135deg,#1D4179,#4A7FA5);cursor:pointer;
}
.gallery img.ph{object-fit:cover;cursor:default}
.gallery img:nth-child(1){grid-column:1/3;aspect-ratio:16/8}

/* ---- 17. videos ---- */
.video-scroller{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch}
.video-scroller::-webkit-scrollbar{display:none}
.v-tile{min-width:86%;scroll-snap-align:start;position:relative;
  padding-top:48%;border-radius:var(--r);overflow:hidden;background:#0C1F42}
.v-tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- footer ---- */
.footer{
  text-align:center;padding:32px 22px 110px;color:#C7D2E6;
  background:radial-gradient(120% 100% at 50% 120%, #1D4179, var(--navy-deep));
}
.foot-shloka{font-family:var(--deva);color:var(--gold-lt);font-size:1.15rem;margin-bottom:10px}
.footer p{font-size:.86rem;margin-top:5px}
.footer a{color:var(--gold-lt);text-decoration:none}
.foot-tags{letter-spacing:.1em;font-size:.68rem !important;text-transform:uppercase;
  margin-top:14px !important;opacity:.7}

/* ==========================================================
   13. CHAT BOT
   ========================================================== */
.chat-fab{
  position:fixed;right:16px;bottom:18px;z-index:90;
  width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  font-size:1.6rem;color:#fff;
  background:linear-gradient(135deg,var(--saffron),#C85B0E);
  box-shadow:0 8px 24px rgba(232,115,26,.5);
}
.fab-ring{
  position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(232,115,26,.6);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(1.35);opacity:0}
}
.chat-panel{
  position:fixed;z-index:95;right:0;left:0;bottom:0;margin:0 auto;
  max-width:430px;height:min(78dvh,620px);
  background:var(--paper);border-radius:22px 22px 0 0;
  display:flex;flex-direction:column;
  box-shadow:0 -10px 40px rgba(0,0,0,.35);
  animation:slideUp .35s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.chat-head{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--navy);color:#fff;border-radius:22px 22px 0 0;
}
.chat-avatar{
  width:42px;height:42px;border-radius:50%;font-size:1.3rem;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  display:flex;align-items:center;justify-content:center;
}
.chat-head strong{display:block;font-size:.98rem}
.chat-status{font-size:.72rem;color:#8FE3AE}
.chat-close{
  margin-left:auto;width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.15);color:#fff;font-size:1rem;cursor:pointer;
}
.chat-body{
  flex:1;overflow-y:auto;padding:16px 14px;display:flex;
  flex-direction:column;gap:10px;
  background:
    radial-gradient(60% 30% at 50% 0%, rgba(184,128,43,.06), transparent),
    var(--parchment);
}
.msg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:.93rem;line-height:1.55;
  white-space:pre-line;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.bot{background:#fff;border:1px solid rgba(184,128,43,.25);
  border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--navy);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg.typing{color:#8a93a6;font-style:italic}
.chat-quick{display:flex;gap:8px;overflow-x:auto;padding:10px 12px;background:var(--paper);
  border-top:1px solid #E8E2D2;-webkit-overflow-scrolling:touch}
.chat-quick::-webkit-scrollbar{display:none}
.chat-quick button{
  white-space:nowrap;padding:8px 14px;border-radius:30px;cursor:pointer;
  border:1.5px solid var(--gold);background:#fff;color:var(--navy);
  font-family:var(--body);font-size:.82rem;font-weight:600;
}
.chat-input{display:flex;gap:8px;padding:10px 12px 14px;background:var(--paper)}
.chat-input input{
  flex:1;padding:13px 16px;border-radius:30px;border:1.5px solid #D9DCE4;
  font-family:var(--body);font-size:.95rem;background:#fff;
}
.chat-input input:focus{outline:none;border-color:var(--gold)}
.chat-input button{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--navy);color:#fff;font-size:1.1rem;
}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(10,18,36,.94);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
}
.lightbox img{max-width:94%;max-height:78dvh;border-radius:12px}
.lightbox p{color:var(--gold-lt);font-family:var(--disp)}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}