/* ============================================
   BIRLA DHARAMSHALA AYODHYA — LUXURY STYLESHEET
   ============================================ */

:root{
  --bg:#FAF8F3;
  --bg-alt:#F5EFE4;
  --gold:#C8A34D;
  --saffron:#C97B20;
  --ink:#222222;
  --ink-soft:#5B5650;
  --border:#E7E0D3;
  --white:#FFFFFF;
  --footer:#1C1A16;

  --font-display:'Cormorant Garamond', serif;
  --font-body:'Manrope', sans-serif;

  --radius:24px;
  --radius-sm:14px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;

  --shadow-sm:0 2px 14px rgba(34,34,34,0.07);
  --shadow-md:0 14px 44px rgba(34,34,34,0.12);
  --shadow-lg:0 28px 80px rgba(34,34,34,0.18);

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

html{font-size:16px;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font:inherit; cursor:pointer; background:none; border:none;}
input,select,textarea{font:inherit;}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,40px);
}

.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--white);
  padding:12px 20px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

h1,h2,h3{font-family:var(--font-display); font-weight:600; color:var(--ink); margin:0 0 var(--space-2);}
h1{font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.08; letter-spacing:-0.01em;}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.15;}
p{margin:0 0 var(--space-2); color:var(--ink-soft);}

.eyebrow{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.18em;
  font-size:0.75rem; font-weight:700; color:var(--saffron); margin:0 0 var(--space-2);
}

:focus-visible{outline:2px solid var(--saffron); outline-offset:3px;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 32px; border-radius:100px; font-weight:600; font-size:0.95rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  position:relative; overflow:hidden;
}
.btn-primary{background:var(--gold); color:var(--white); box-shadow:var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-sm{padding:11px 22px; font-size:0.85rem;}
.btn-ghost-light{border:1px solid rgba(255,255,255,0.55); color:var(--white); backdrop-filter:blur(6px);}
.btn-ghost-light:hover{background:rgba(255,255,255,0.12); transform:translateY(-2px);}
.btn-whatsapp{
  grid-column:1 / -1; background:#2AA84A; color:var(--white); padding:16px; border-radius:14px;
  font-size:1rem; width:100%; box-shadow:var(--shadow-sm);
}
.btn-whatsapp:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle,rgba(255,255,255,.5) 0%,transparent 60%);
  opacity:0; transform:scale(0);
}
.btn.rippling::after{animation:ripple .6s var(--ease);}
@keyframes ripple{ from{opacity:.6; transform:scale(0);} to{opacity:0; transform:scale(2.4);} }

.text-link{color:var(--saffron); font-weight:700; border-bottom:1px solid currentColor; padding-bottom:2px;}

/* ===== Navbar ===== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,248,243,0.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.navbar.scrolled{border-color:var(--border); box-shadow:0 4px 24px rgba(34,34,34,0.05); background:rgba(250,248,243,0.92);}
.navbar-inner{display:flex; align-items:center; justify-content:space-between; height:76px; transition:height .3s;}
.navbar.scrolled .navbar-inner{height:60px;}

.brand{display:flex; align-items:center; gap:12px; color:var(--ink);}
.brand-mark{width:34px; height:34px; color:var(--gold); flex-shrink:0;}
.brand-mark svg{width:100%; height:100%;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-title{font-family:var(--font-display); font-size:1.28rem; font-weight:600;}
.brand-sub{font-size:0.62rem; letter-spacing:0.32em; color:var(--saffron); font-weight:700;}
.brand-white{color:var(--white);}
.brand-white .brand-mark{color:var(--gold);}
.brand-white .brand-sub{color:var(--gold);}

.nav-links{display:flex; gap:var(--space-4); align-items:center;}
.nav-links a{font-size:0.92rem; font-weight:600; position:relative; padding:4px 0;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--gold); transition:width .3s var(--ease);}
.nav-links a:hover::after{width:100%;}

.nav-actions{display:flex; align-items:center; gap:var(--space-3);}
.nav-phone{font-size:0.85rem; font-weight:600; color:var(--ink-soft); display:none;}
.nav-toggle{display:none; flex-direction:column; gap:5px; width:26px;}
.nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--gold); z-index:101; transition:width .1s linear;}

@media (min-width:900px){.nav-phone{display:inline;}}

/* ===== Hero ===== */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;}
.hero-media{position:absolute; inset:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.06);}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,16,10,.35) 0%, rgba(20,16,10,.55) 60%, rgba(20,16,10,.75) 100%);
}
.hero-content{position:relative; z-index:2; color:var(--white); padding-top:100px; max-width:820px;}
.hero-sub{color:rgba(255,255,255,0.88); font-size:1.1rem; max-width:560px;}
.hero-btns{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3);}
.scroll-cue{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid rgba(255,255,255,.6); border-radius:20px; z-index:2;}
.scroll-cue span{position:absolute; top:8px; left:50%; width:4px; height:8px; background:var(--white); border-radius:2px; transform:translateX(-50%); animation:cue 1.8s infinite;}
@keyframes cue{ 0%{opacity:1; top:8px;} 70%{opacity:0; top:22px;} 100%{opacity:0; top:8px;} }

/* ===== Reveal animations ===== */
.reveal-up{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s);}
.reveal-up.in{opacity:1; transform:translateY(0);}
.hero .reveal-up{transition-delay:var(--d,0s);}
.hero .reveal-up{opacity:0; animation:heroIn .9s var(--ease) forwards; animation-delay:var(--d,0s);}
@keyframes heroIn{ to{opacity:1; transform:translateY(0);} from{opacity:0; transform:translateY(24px);} }

/* ===== Welcome Popup ===== */
.welcome-modal{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(28,26,22,0.62); padding:var(--space-2);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.welcome-modal.show{opacity:1; visibility:visible; transition:opacity .35s var(--ease);}
.welcome-card{
  position:relative; width:100%; max-width:460px; background:var(--white); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-lg); text-align:center;
  transform:translateY(18px) scale(.97); transition:transform .4s var(--ease);
}
.welcome-modal.show .welcome-card{transform:translateY(0) scale(1);}
.welcome-media{height:200px;}
.welcome-media img{width:100%; height:100%; object-fit:cover;}
.welcome-body{padding:var(--space-4) var(--space-4) var(--space-4);}
.welcome-body .eyebrow{justify-content:center;}
.welcome-body h2{margin-bottom:var(--space-2);}
.welcome-close{
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:1.4rem; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
.welcome-cta{width:100%; margin-top:var(--space-2);}
@media (max-width:560px){
  .welcome-media{height:150px;}
}

/* ===== Booking ===== */
.booking-wrap{position:relative; z-index:5; margin-top:-70px; padding-bottom:var(--space-6);}
.booking-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:var(--space-4); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);
  border:1px solid var(--border);
}
.field{display:flex; flex-direction:column; gap:6px;}
.field-wide{grid-column:span 2;}
.field label{font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft);}
.field input, .field select, .field textarea{
  padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg);
  color:var(--ink); transition:border-color .25s, box-shadow .25s;
}
.field textarea{resize:vertical; min-height:44px;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,163,77,0.18); outline:none;}

@media (max-width:900px){
  .booking-card{grid-template-columns:repeat(2,1fr);}
  .field-wide{grid-column:span 2;}
}
@media (max-width:560px){
  .booking-card{grid-template-columns:1fr; padding:var(--space-3);}
  .field-wide{grid-column:span 1;}
}

/* ===== Sections ===== */
.section{padding:var(--space-7) 0;}
.section-head{max-width:640px; margin:0 auto var(--space-5); text-align:center;}
.section-head h2{margin-bottom:var(--space-2);}
.section-sub{font-size:1.02rem;}

/* ===== About ===== */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:center;}
.about-media img{border-radius:var(--radius); box-shadow:var(--shadow-md); aspect-ratio:4/5; object-fit:cover;}
.check-list{margin:var(--space-3) 0; display:flex; flex-direction:column; gap:12px;}
.check-list li{padding-left:30px; position:relative; color:var(--ink-soft); font-weight:500;}
.check-list li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700;}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;} .about-media{order:-1;}}

/* ===== Rooms ===== */
.room-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); align-items:stretch;}
.room-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  display:flex; flex-direction:column; height:100%;
}
.room-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--gold);}
.room-img{position:relative; aspect-ratio:4/3; overflow:hidden; flex-shrink:0;}
.room-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.room-card:hover .room-img img{transform:scale(1.08);}
.room-price-tag{position:absolute; top:14px; right:14px; background:rgba(255,255,255,0.92); backdrop-filter:blur(4px); padding:6px 14px; border-radius:100px; font-weight:700; font-size:0.85rem; color:var(--ink);}
.room-body{padding:var(--space-3); display:flex; flex-direction:column; flex:1;}
.room-body h3{font-family:var(--font-display); font-size:1.3rem; margin:0 0 4px; line-height:1.2; min-height:1.2em;}
.room-meta{font-size:0.8rem; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;}
.room-desc{font-size:0.88rem; margin-bottom:12px; min-height:2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.room-amenities{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; min-height:26px;}
.room-amenities span{font-size:0.72rem; background:var(--bg-alt); border:1px solid var(--border); padding:4px 10px; border-radius:100px; color:var(--ink-soft);}
.room-book{display:block; text-align:center; padding:11px; border-radius:10px; border:1.5px solid var(--gold); color:var(--gold); font-weight:700; font-size:0.88rem; transition:background .3s, color .3s; margin-top:auto;}
.room-book:hover{background:var(--gold); color:var(--white);}

@media (max-width:1100px){.room-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.room-grid{grid-template-columns:1fr;}}

/* ===== Amenities ===== */
.amenity-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2);}
.amenity-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.amenity-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold);}
.amenity-icon{width:30px; height:30px; color:var(--gold); flex-shrink:0;}
.amenity-icon svg{width:100%; height:100%;}
.amenity-card p{margin:0; font-weight:600; font-size:0.78rem; line-height:1.3; color:var(--ink);}
@media (max-width:900px){.amenity-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.amenity-grid{grid-template-columns:repeat(2,1fr);}}

/* ===== Why choose us ===== */
.why{background:var(--bg-alt);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);}
.why-card{background:var(--white); border-radius:var(--radius-sm); padding:var(--space-3); border:1px solid var(--border); transition:transform .35s var(--ease);}
.why-card:hover{transform:translateY(-6px);}
.why-num{font-family:var(--font-display); font-size:1.6rem; color:var(--gold); font-weight:600; margin-bottom:8px;}
.why-card h3{font-family:var(--font-body); font-size:1rem; font-weight:700; margin:0;}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}

/* ===== Gallery ===== */
.masonry{columns:4 220px; column-gap:var(--space-3);}
.masonry-item{break-inside:avoid; margin-bottom:var(--space-3); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; position:relative;}
.masonry-item img{width:100%; display:block; transition:transform .6s var(--ease);}
.masonry-item:hover img{transform:scale(1.07);}
.masonry-item::after{content:"⤢"; position:absolute; top:12px; right:12px; width:32px; height:32px; background:rgba(255,255,255,0.85); border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s;}
.masonry-item:hover::after{opacity:1;}

/* ===== Experience Ayodhya ===== */
.experience{position:relative; padding:0; display:grid; grid-template-columns:1fr 1fr; min-height:560px; align-items:stretch;}
.exp-media{position:relative; overflow:hidden;}
.exp-media img{width:100%; height:100%; object-fit:cover;}
.exp-content{background:var(--footer); color:var(--white); display:flex; flex-direction:column; justify-content:center; padding-top:var(--space-6); padding-bottom:var(--space-6);}
.exp-content h2{color:var(--white);}
.exp-content p{color:rgba(255,255,255,0.75);}
.exp-list{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:var(--space-3);}
.exp-list span{display:block; padding:12px 16px; border:1px solid rgba(255,255,255,0.16); border-radius:10px; font-size:0.9rem; font-weight:600;}
@media (max-width:900px){.experience{grid-template-columns:1fr;} .exp-media{min-height:320px;} .exp-content{padding-left:clamp(20px,5vw,40px); padding-right:clamp(20px,5vw,40px);}}

/* ===== Testimonials ===== */
.testi-track{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3);}
.testi-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-4);}
.testi-stars{color:var(--gold); letter-spacing:2px; margin-bottom:12px;}
.testi-card p{font-style:italic; color:var(--ink); margin-bottom:16px;}
.testi-name{font-weight:700; font-size:0.9rem;}
.testi-loc{font-size:0.78rem; color:var(--ink-soft);}
@media (max-width:900px){.testi-track{grid-template-columns:1fr;}}

/* ===== FAQ ===== */
.faq-wrap{max-width:800px;}
.accordion-item{border-bottom:1px solid var(--border);}
.accordion-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:22px 4px; text-align:left; font-family:var(--font-display); font-size:1.15rem; font-weight:600;
}
.accordion-icon{transition:transform .35s var(--ease); color:var(--gold); font-size:1.3rem; flex-shrink:0; margin-left:16px;}
.accordion-btn[aria-expanded="true"] .accordion-icon{transform:rotate(45deg);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.accordion-panel p{padding:0 4px 22px; margin:0;}

/* ===== Contact ===== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:center;}
.contact-rows{display:flex; flex-direction:column; gap:14px; margin-top:var(--space-3);}
.contact-row{display:flex; align-items:center; gap:14px; font-weight:600; padding:14px 18px; background:var(--white); border:1px solid var(--border); border-radius:12px; transition:border-color .3s, transform .3s;}
.contact-row:is(a):hover{border-color:var(--gold); transform:translateX(4px);}
.c-icon{font-size:1.2rem;}
.contact-map{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3;}
.contact-map iframe{width:100%; height:100%; border:0;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}

/* ===== Footer ===== */
.footer{background:var(--footer); color:rgba(255,255,255,0.7); padding-top:var(--space-6);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--space-5); padding-bottom:var(--space-5); border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand p{color:rgba(255,255,255,0.55); margin-top:var(--space-2); max-width:320px;}
.footer-col h3{color:var(--white); font-family:var(--font-body); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px;}
.footer-col{display:flex; flex-direction:column; gap:10px;}
.footer-col a, .footer-col span{color:rgba(255,255,255,0.65); font-size:0.9rem; transition:color .3s;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{padding:var(--space-3) clamp(20px,5vw,40px); text-align:center; font-size:0.82rem;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr; gap:var(--space-4);}}

/* ===== Floating widgets ===== */
.float-whatsapp{
  position:fixed; bottom:28px; right:24px; width:58px; height:58px; background:#25D366; color:var(--white);
  border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); z-index:90;
  animation:pulse 2.6s infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.back-to-top{
  position:fixed; bottom:28px; right:96px; width:46px; height:46px; border-radius:50%; background:var(--white);
  border:1px solid var(--border); box-shadow:var(--shadow-md); z-index:90; opacity:0; pointer-events:none;
  transform:translateY(10px); transition:opacity .3s, transform .3s; color:var(--ink); font-size:1.1rem;
}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; background:rgba(15,12,8,0.92); z-index:200; display:flex; align-items:center; justify-content:center;
  padding:40px; animation:fadeIn .3s var(--ease);
}
.lightbox[hidden]{display:none;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:8px; box-shadow:0 20px 80px rgba(0,0,0,.5);}
.lightbox-close{position:absolute; top:24px; right:32px; color:var(--white); font-size:2.2rem; line-height:1;}

/* ===== Mobile Nav ===== */
@media (max-width:940px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(320px,80vw); background:var(--white);
    flex-direction:column; align-items:flex-start; padding:100px var(--space-4) var(--space-4);
    box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .4s var(--ease); gap:var(--space-3); z-index:99;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
}

/* ===== Sticky mobile booking button ===== */
.mobile-book{
  position:fixed; bottom:0; left:0; right:0; z-index:80; background:var(--white); border-top:1px solid var(--border);
  padding:12px clamp(16px,4vw,24px); display:none; box-shadow:0 -8px 24px rgba(0,0,0,0.06);
}
@media (max-width:640px){
  .mobile-book{display:block;}
  body{padding-bottom:70px;}
  .float-whatsapp{bottom:88px;}
  .back-to-top{bottom:88px; right:24px;}
}
.mobile-book .btn{width:100%;}