/* ==========================================================================
   MEERA CELEBRATION — meeracelebration.com
   Design language: editorial resort (CozyStay / Island Resort) in Meera's
   own identity — magenta, gold, cream, ornate mark.
   No frameworks. One stylesheet. Mobile-first.
   ========================================================================== */

:root{
  /* Brand — taken from the visiting card + banners */
  --plum:#8C1B5A;
  --plum-dk:#6E1246;
  --plum-ink:#4A0C2F;
  --gold:#C9A05C;
  --gold-lt:#E4CBA0;
  --cream:#FAF6EF;
  --sand:#F1E8DA;
  --navy:#232C63;
  --ink:#2C2A2E;
  --muted:#7A737C;
  --line:#E6DACB;
  --white:#fff;
  --wa:#25D366;

  --display:'Cormorant Garamond', Cambria, Georgia, 'Times New Roman', serif;
  --sans:'Jost', Calibri, 'Segoe UI', system-ui, -apple-system, sans-serif;

  --pad:clamp(20px, 5vw, 40px);
  --sec:clamp(64px, 9vw, 120px);
  --shadow:0 30px 60px -30px rgba(74,12,47,.35);

  /* the interlocking-circle lattice from the visiting card */
  --lattice:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23C9A05C' stroke-opacity='0.22' stroke-width='1'><circle cx='0' cy='0' r='21'/><circle cx='60' cy='0' r='21'/><circle cx='0' cy='60' r='21'/><circle cx='60' cy='60' r='21'/><circle cx='30' cy='30' r='21'/></g></svg>");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4{font-family:var(--display); font-weight:300; line-height:1.12; margin:0; letter-spacing:.005em}
h1{font-size:clamp(42px, 6.6vw, 86px)}
h2{font-size:clamp(32px, 4.4vw, 56px)}
h3{font-size:clamp(22px, 2.4vw, 30px)}
p{margin:0 0 1.1em}
em{font-style:italic; color:var(--plum)}

/* ---------- layout utilities ---------- */
.wrap{width:100%; max-width:1240px; margin:0 auto; padding-inline:var(--pad)}
.narrow{max-width:820px}
.section{padding-block:var(--sec)}
.center{text-align:center}
.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.32em; color:var(--gold); margin:0 0 18px;
}
.eyebrow.on-dark{color:var(--gold-lt)}
.rule{width:54px; height:1px; background:var(--gold); border:0; margin:22px 0}
.center .rule{margin-inline:auto}
.lead{font-size:clamp(18px,1.5vw,21px); color:var(--muted); line-height:1.85}
.mr{font-family:var(--display); font-style:italic}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; padding:17px 32px; border-radius:2px; border:1px solid transparent;
  transition:.28s cubic-bezier(.2,.7,.3,1); white-space:nowrap;
}
.btn-primary{background:var(--plum); color:#fff; border-color:var(--plum)}
.btn-primary:hover{background:var(--plum-dk); border-color:var(--plum-dk); transform:translateY(-2px)}
.btn-gold{background:var(--gold); color:var(--plum-ink); border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-lt); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff; color:var(--plum); border-color:#fff}
.btn-outline{background:transparent; color:var(--plum); border-color:var(--plum)}
.btn-outline:hover{background:var(--plum); color:#fff}
.btn-wa{background:var(--wa); color:#fff; border-color:var(--wa)}
.btn-wa:hover{filter:brightness(1.06); transform:translateY(-2px)}
.link-more{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--plum);
  font-weight:500; display:inline-flex; align-items:center; gap:8px;
}
.link-more::after{content:'→'; transition:.25s}
.link-more:hover::after{transform:translateX(6px)}

/* ---------- header ---------- */
.head{
  position:fixed; inset:0 0 auto; z-index:60; display:flex; align-items:center; gap:24px;
  padding:18px var(--pad); transition:.35s ease;
}
.head::before{
  content:''; position:absolute; inset:0; background:var(--cream);
  opacity:0; transition:.35s ease; border-bottom:1px solid var(--line); z-index:-1;
}
.head.solid{padding-block:12px}
.head.solid::before{opacity:1}
.head .logo{display:flex; align-items:center; gap:12px; margin-right:auto; z-index:2}
.head .logo img{height:80px; width:auto; transition:.35s}
.head.solid .logo img{height:64px}
.logo-word{font-family:var(--display); font-size:21px; line-height:1.05; color:#fff; transition:.3s}
.logo-word small{display:block; font-family:var(--sans); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-lt); font-weight:400}
.head.solid .logo-word{color:var(--plum)}
.head.solid .logo-word small{color:var(--gold)}

.nav{display:none; gap:30px; align-items:center}
.nav a{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:400;
  position:relative; padding-block:6px; transition:.25s;
}
.nav a::after{content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:.3s}
.nav a:hover::after,.nav a.active::after{width:100%}
.head.solid .nav a{color:var(--ink)}
.head.solid .nav a:hover,.head.solid .nav a.active{color:var(--plum)}
.head-cta{display:none; align-items:center; gap:16px}
.head-tel{font-size:13px; letter-spacing:.06em; color:#fff; white-space:nowrap}
.head.solid .head-tel{color:var(--ink)}
.head-tel b{font-weight:500}
.burger{
  display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(255,255,255,.45);
  background:transparent; border-radius:2px; cursor:pointer; z-index:2;
}
.head.solid .burger{border-color:var(--line)}
.burger span{display:block; width:20px; height:1px; background:#fff; position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:20px; height:1px; background:#fff; transition:.3s}
.burger span::before{top:-6px} .burger span::after{top:6px}
.head.solid .burger span,.head.solid .burger span::before,.head.solid .burger span::after{background:var(--ink)}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70; background:var(--plum); color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.7,0,.2,1);

  /* On a short phone (iPhone SE, 640px Androids) the menu is taller than the
     screen. Plain flex centring then overflows BOTH ends, and the top overflow
     is unreachable — "Home" ends up above the viewport with no way to scroll to
     it. `safe center` pins the content to the start instead of centring it once
     it no longer fits, and auto makes the rest reachable. */
  justify-content:safe center;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.drawer::before{content:''; position:absolute; inset:0; background-image:var(--lattice); opacity:.5}
.drawer.open{transform:none}
.drawer nav{position:relative; display:grid; gap:6px}
.drawer nav a{font-family:var(--display); font-size:34px; padding-block:8px; border-bottom:1px solid rgba(255,255,255,.12)}
.drawer nav a:hover{color:var(--gold-lt); padding-left:10px; transition:.25s}
.drawer .dr-foot{position:relative; margin-top:36px; display:grid; gap:12px; font-size:14px}
.drawer .dr-foot a{color:var(--gold-lt)}
.drawer .close{position:absolute; top:24px; right:24px; background:none; border:0; color:#fff; font-size:30px; cursor:pointer; line-height:1}

/* Short screens (iPhone SE, 640px Androids): tighten the menu so the whole
   thing — links, phone numbers and the social icons — fits without scrolling.
   MUST come after the .drawer rules above: a media query adds no specificity,
   so if this sat higher up, `.drawer nav a{font-size:34px}` would simply win on
   source order and this block would do nothing. */
@media (max-height:730px){
  .drawer nav a{font-size:26px; padding-block:4px}
  .drawer nav{gap:2px}
  .drawer .dr-foot{margin-top:18px; gap:6px; font-size:13px}
  .drawer .dr-foot a{padding-block:7px}
  .drawer .socials{margin-top:14px}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:grid; align-items:center; overflow:hidden}
.hero-media{position:absolute; inset:0; background:linear-gradient(160deg,#8C1B5A,#4A0C2F 70%)}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(74,12,47,.62) 0%, rgba(74,12,47,.35) 40%, rgba(74,12,47,.78) 100%),
             var(--lattice);
}
.hero-in{position:relative; z-index:2; padding-block:150px 190px; color:#fff}
.hero h1{color:#fff; max-width:14ch}
.hero h1 em{color:var(--gold-lt)}
.hero .sub{max-width:52ch; color:rgba(255,255,255,.88); font-size:clamp(16px,1.4vw,19px); margin-top:22px}
.hero .h-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

/* Any row of call-to-action buttons. Was an inline style repeated per page,
   which left no hook to restyle them for phones. */
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.cta-row.center{justify-content:center}

/* The header is fixed, so an in-page jump would scroll the heading to y=0 —
   i.e. straight underneath the header. Push each jump target clear of it. */
#lawn,#conference,#kids{scroll-margin-top:120px}
.rating-badge{
  display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:10px 18px;
  border:1px solid rgba(255,255,255,.28); border-radius:2px; backdrop-filter:blur(4px);
  background:rgba(255,255,255,.07); font-size:13px; letter-spacing:.04em; color:#fff;
}
.rating-badge .stars{color:var(--gold); letter-spacing:2px}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,.6); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  display:grid; justify-items:center; gap:8px;
}
.scroll-cue::after{content:''; width:1px; height:38px; background:linear-gradient(rgba(255,255,255,.6), transparent); animation:cue 2s infinite}
@keyframes cue{0%{opacity:0; transform:scaleY(.3)}50%{opacity:1}100%{opacity:0; transform:scaleY(1)}}

/* ---------- enquiry bar (the "check availability" widget) ---------- */
.enquire{position:relative; z-index:5; margin-top:-58px}
.enquire-card{
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:3px;
  display:grid; gap:0; grid-template-columns:1fr; overflow:hidden;
}
.enquire-card .f{padding:18px 22px; border-bottom:1px solid var(--line); display:grid; gap:5px}
.enquire-card label{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:500}
.enquire-card select,.enquire-card input{
  border:0; background:transparent; font-family:var(--sans); font-size:16px; color:var(--ink);
  outline:none; width:100%; padding:0;
}
.enquire-card .go{
  border:0; background:var(--plum); color:#fff; cursor:pointer; padding:22px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; transition:.25s;
}
.enquire-card .go:hover{background:var(--plum-dk)}
.enquire-note{font-size:12.5px; color:var(--muted); margin-top:12px; text-align:center; letter-spacing:.02em}

/* ---------- welcome ---------- */
.split{display:grid; gap:clamp(36px,5vw,70px); align-items:center}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 20px; margin-top:38px; padding-top:32px; border-top:1px solid var(--line)}
.stat .n{font-family:var(--display); font-size:40px; color:var(--plum); line-height:1}
.stat .l{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.collage{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.collage .shot:nth-child(1){aspect-ratio:3/4}
.collage .shot:nth-child(2){aspect-ratio:3/4; margin-top:34px}
.collage .shot:nth-child(3){aspect-ratio:3/4; margin-top:-34px}
.collage .shot:nth-child(4){aspect-ratio:3/4}

/* ---------- photo slots (elegant before the shoot, photos after) ---------- */
.shot{
  position:relative; overflow:hidden; border-radius:3px; background:var(--sand);
  background-image:linear-gradient(150deg, rgba(140,27,90,.92), rgba(74,12,47,.95)), var(--lattice);
  background-blend-mode:normal;
}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.3,1)}
/* the "photo goes here" label — never on the hero, only on content shots */
.shot.is-empty:not(.hero-media)::after{
  content:attr(data-ph); position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  padding:56px 16px 16px; color:var(--gold-lt); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:500; line-height:1.9;
}
.shot.is-empty:not(.hero-media)::before{
  content:''; position:absolute; left:50%; top:calc(50% - 62px); transform:translateX(-50%);
  width:34px; height:34px; opacity:.45;
  background:url('../img/logo-gold.png') center/contain no-repeat;
}
a.shot:hover img,.card:hover .shot img{transform:scale(1.06)}

/* The hero image box is also a .shot, so it must win the cascade back:
   full-bleed, square corners, and its own darkening overlay. */
.hero .hero-media,.phero .hero-media{
  position:absolute; inset:0; border-radius:0;
  background:linear-gradient(160deg,#8C1B5A 0%,#5C1039 60%,#4A0C2F 100%);
}
.hero .hero-media img,.phero .hero-media img{width:100%; height:100%; object-fit:cover}
.hero .hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(74,12,47,.60) 0%, rgba(74,12,47,.30) 42%, rgba(74,12,47,.82) 100%),
             var(--lattice);
}
.phero .hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(74,12,47,.72), rgba(74,12,47,.64)), var(--lattice);
}

/* ---------- spaces ---------- */
.cards{display:grid; gap:26px; grid-template-columns:1fr}
.card{background:#fff; border:1px solid var(--line); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; transition:.35s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-lt)}
.card .shot{aspect-ratio:4/3}
.card .body{padding:26px 24px 28px; display:flex; flex-direction:column; flex:1}
.card h3{margin-bottom:8px}
.card .meta{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
.card p{font-size:15.5px; color:var(--muted); flex:1}
.card .link-more{margin-top:8px}

/* ---------- facilities ---------- */
.band-plum{background:var(--plum); color:#fff; position:relative; overflow:hidden}
.band-plum::before{content:''; position:absolute; inset:0; background-image:var(--lattice); opacity:.6}
.band-plum .wrap{position:relative}
.band-plum h2,.band-plum h3{color:#fff}
.band-plum .lead{color:rgba(255,255,255,.82)}
.facils{display:grid; grid-template-columns:repeat(2,1fr); gap:34px 24px; margin-top:52px}
.facil{display:grid; gap:10px}
.facil .ic{width:40px; height:40px; color:var(--gold-lt)}
.facil .ic svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.1}
.facil b{font-family:var(--display); font-size:20px; font-weight:400}
.facil span{font-size:14px; color:rgba(255,255,255,.72); line-height:1.6}

/* ---------- reviews band ---------- */
.reviews{background:var(--sand)}
.rating-big{display:grid; place-items:center; gap:6px; text-align:center}
.rating-big .num{font-family:var(--display); font-size:76px; color:var(--plum); line-height:1}
.rating-big .stars{color:var(--gold); font-size:22px; letter-spacing:5px}
.rating-big .cnt{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.quotes{display:grid; gap:20px; grid-template-columns:1fr; margin-top:48px}
.quote{background:#fff; border:1px solid var(--line); border-radius:3px; padding:28px 26px}
.quote .stars{color:var(--gold); letter-spacing:3px; font-size:14px}
.quote p{font-family:var(--display); font-size:20px; font-style:italic; color:var(--ink); margin:14px 0 16px; line-height:1.55}
.quote .who{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* ---------- gallery ---------- */
.grid-gal{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.grid-gal .shot{aspect-ratio:1/1; cursor:zoom-in}
.grid-gal .shot.wide{grid-column:span 2; aspect-ratio:16/9}

/* ---------- location ---------- */
.map-wrap{border:1px solid var(--line); border-radius:3px; overflow:hidden; min-height:340px; background:var(--sand)}
.map-wrap iframe{width:100%; height:100%; min-height:340px; border:0; display:block; filter:saturate(.85)}
.addr{display:grid; gap:22px}
.addr .row{display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start}
.addr .row svg{width:20px; height:20px; stroke:var(--plum); fill:none; stroke-width:1.2; margin-top:4px}
.addr .row b{display:block; font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--plum); margin-bottom:2px}
.addr .row span,.addr .row a{font-size:16px; color:var(--ink)}
.addr .row a:hover{color:var(--plum)}

/* ---------- inner-page hero ---------- */
.phero{position:relative; min-height:56vh; display:grid; align-items:center; overflow:hidden}
.phero .hero-media::after{background:linear-gradient(180deg, rgba(74,12,47,.7), rgba(74,12,47,.62)), var(--lattice)}
.phero-in{position:relative; z-index:2; color:#fff; padding-block:150px 60px; text-align:center}
.phero h1{color:#fff; margin-inline:auto}
.phero .sub{color:rgba(255,255,255,.85); max-width:60ch; margin:18px auto 0}
.crumbs{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:18px}
.crumbs a:hover{color:#fff}

/* ---------- content blocks (inner pages) ---------- */
.feature{display:grid; gap:clamp(30px,4vw,64px); align-items:center; margin-bottom:var(--sec)}
.feature:last-child{margin-bottom:0}
.feature .shot{aspect-ratio:4/3}
.ticks{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px}
.ticks li{display:grid; grid-template-columns:20px 1fr; gap:12px; font-size:16px; color:var(--ink)}
.ticks li::before{content:'✦'; color:var(--gold); font-size:13px; line-height:1.7}
.spec{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:30px; padding:24px; background:var(--sand); border-radius:3px}
.spec div{display:grid; gap:2px}
.spec .k{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.spec .v{font-family:var(--display); font-size:22px; color:var(--plum)}

/* menu / tariff tables */
.tbl{width:100%; border-collapse:collapse; margin-top:28px; font-size:16px}
.tbl th{text-align:left; font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); padding:0 0 14px; border-bottom:1px solid var(--line)}
.tbl td{padding:16px 0; border-bottom:1px solid var(--line); vertical-align:top}
.tbl td:last-child{text-align:right; font-family:var(--display); font-size:20px; color:var(--plum); white-space:nowrap}
.tbl .d{display:block; font-size:14px; color:var(--muted)}

/* ---------- contact form ---------- */
.form{display:grid; gap:20px}
.field{display:grid; gap:7px}
.field label{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:500}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:16px; font-weight:300; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:2px; padding:14px 16px; outline:none; transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--plum); box-shadow:0 0 0 3px rgba(140,27,90,.08)}
.field textarea{min-height:120px; resize:vertical}
.form .two{display:grid; gap:20px}
.form-note{font-size:13px; color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--plum-ink); color:rgba(255,255,255,.72); position:relative; overflow:hidden}
.foot::before{content:''; position:absolute; inset:0; background-image:var(--lattice); opacity:.35}
.foot .wrap{position:relative; padding-block:70px 30px}
.foot-grid{display:grid; gap:44px}
.foot img.mark{height:104px; width:auto; margin-bottom:18px}
.foot h4{font-family:var(--sans); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0 0 20px; font-weight:500}
.foot a:hover{color:#fff}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:15px}
.foot .tag{font-family:var(--display); font-style:italic; font-size:19px; color:var(--gold-lt); margin-top:14px}
.socials{display:flex; gap:12px; margin-top:20px}
.socials a{width:40px; height:40px; border:1px solid rgba(255,255,255,.22); border-radius:2px; display:grid; place-items:center; transition:.25s}
.socials a:hover{background:var(--gold); border-color:var(--gold); color:var(--plum-ink)}
.socials svg{width:17px; height:17px; fill:currentColor}

/* Bare icons are invisible: the client could not find their own social links
   in the footer, so a visitor certainly won't. Label them and name the handle. */
.foot .soc-h{margin-top:30px}
.soc-handle{margin-top:14px; font-size:14px; letter-spacing:.03em; color:rgba(255,255,255,.6)}
.soc-handle a{color:var(--gold-lt); border-bottom:1px solid rgba(228,203,160,.35)}
.soc-handle a:hover{color:#fff; border-color:#fff}

/* Socials in the mobile drawer — on a phone the drawer IS the navigation, and
   it had no route to Instagram at all. The drawer is plum, so .socials works. */
.drawer .socials{justify-content:center; margin-top:26px}
.drawer .socials a{color:#fff}

/* "See more on Instagram" under the gallery. The venue has 100+ posts of real
   photographs — far more than the site can hold — so this is the one link on
   the site that genuinely pays the visitor back. */
.ig-more{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  padding:14px 24px; border:1px solid var(--line); border-radius:2px;
  font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--plum); transition:.25s;
}
.ig-more:hover{background:var(--plum); border-color:var(--plum); color:#fff}
.ig-more svg{width:17px; height:17px; fill:currentColor}
.foot-btm{
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.5px; letter-spacing:.04em;
}

/* ---------- sticky mobile call bar ---------- */
.mobar{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(0,0,0,.07); box-shadow:0 -10px 30px rgba(74,12,47,.12);
}
.mobar a{
  display:flex; align-items:center; justify-content:center; gap:9px; padding:15px 10px;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
}
.mobar .call{background:#fff; color:var(--plum)}
.mobar .wa{background:var(--wa); color:#fff}
.mobar svg{width:17px; height:17px; fill:currentColor}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; z-index:90; background:rgba(40,6,26,.94); display:none; place-items:center; padding:5vw}
.lb.on{display:grid}
.lb img{max-width:92vw; max-height:88vh; width:auto; border-radius:3px}
.lb .x{position:absolute; top:22px; right:26px; background:none; border:0; color:#fff; font-size:34px; cursor:pointer; line-height:1}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:700px){
  .enquire-card{grid-template-columns:1.1fr 1fr 1fr auto}
  .enquire-card .f{border-bottom:0; border-right:1px solid var(--line)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .form .two{grid-template-columns:1fr 1fr}
  .facils{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
  .grid-gal{grid-template-columns:repeat(3,1fr)}
  .grid-gal .shot.wide{grid-column:span 2; aspect-ratio:auto}
}
@media (min-width:960px){
  body{padding-bottom:0}
  .nav,.head-cta{display:flex}
  .burger{display:none}
  .mobar{display:none}
  .split{grid-template-columns:1fr 1fr}
  .split.wide-left{grid-template-columns:1.15fr 1fr}
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards.three{grid-template-columns:repeat(3,1fr)}
  .card .shot{aspect-ratio:3/4}
  .stats{grid-template-columns:repeat(4,1fr)}
  .feature{grid-template-columns:1fr 1fr}
  .feature.flip .shot{order:2}
  .facils{grid-template-columns:repeat(4,1fr)}
  .loc-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center}
  .phero-in{padding-block:180px 90px}
}
@media (max-width:959px){
  body{padding-bottom:52px}          /* room for the sticky call bar */
  .hero-in{padding-block:130px 150px}
  .collage .shot:nth-child(2),.collage .shot:nth-child(3){margin-top:0}
  .loc-grid{display:grid; gap:36px}
  .foot .wrap{padding-block:56px 24px}
}

/* the ★ next to the 4.1 rating stat — keep it small and gold, not a giant glyph */
.stat .n .s{font-size:.5em; color:var(--gold); vertical-align:middle; margin-left:3px}


/* ==========================================================================
   HANDHELD (≤959px — where the burger and the sticky call bar appear)

   The layout below 960px was already correct: mobile-first, single column,
   nothing overflows sideways. What was wrong was the *touch* layer.

   Two rules, both from the platform guidelines, both measured on a 390px
   viewport before/after:
     · nothing a thumb must hit is under 44px tall  (was: 16–32px)
     · nothing a customer must read is under 12px   (was: 10–11px)

   The small-caps letter-spaced label at 10–11px is the editorial idiom this
   design borrows, and it reads fine on a desktop at arm's length. On a
   five-inch Android in Vidarbha daylight it does not, and this venue's
   customers are on exactly that phone. Legibility wins over the idiom.
   ========================================================================== */
@media (max-width:959px){

  /* --- logo ---
     It grows on desktop, but on a 390px screen it shares the row with the
     burger. Cap it here so the two can never collide. */
  .head .logo img{height:64px}
  .head.solid .logo img{height:54px}
  .foot img.mark{height:88px}

  /* --- readable --- */
  .eyebrow,
  .card .meta,
  .crumbs,
  .foot h4,
  .spec .k,
  .enquire-card label,
  .field label{font-size:12px}
  .scroll-cue{font-size:11px}          /* decorative, not content — exempt */
  .stat .l{font-size:12px}             /* "Guest capacity" etc. — these caption the
                                          numbers, so they are content, not chrome */

  /* --- thumb-sized ---
     Every one of these can start an enquiry, and the enquiry IS the funnel:
     there is no cart, no form that posts anywhere. A missed tap is a lost
     booking, so they all get the full 44px. */

  /* The home-page availability bar. The fields carried padding:0, so the tap
     area was only the height of the text — 25px. This is the single most
     important widget on the site. */
  .enquire-card .f{padding:14px 22px}
  .enquire-card select,
  .enquire-card input{min-height:44px; padding-block:10px}
  .enquire-card .go{min-height:56px}

  /* Footer link lists: swap the flex gap for padding, so the row spacing
     stays about the same but the tap area doubles. */
  .foot ul{gap:0}
  .foot ul li a{display:block; padding-block:11px}
  .dr-foot a{display:block; padding-block:10px}
  .socials a{width:44px; height:44px}

  .drawer .close{width:48px; height:48px; top:16px; right:16px; display:grid; place-items:center}
  .crumbs a{display:inline-block; padding-block:12px}

  /* The "Discover →" links under each venue card, and the map link. They are
     the only way into the inner pages from a card, so they must be tappable. */
  .link-more{padding-block:11px}

  /* Buttons. Side by side on a 390px screen they shrink to thumb-hostile pills
     and the second one wraps under the first anyway, half-width and ragged.
     Stack them full-width instead: on a phone these ARE the page — "check my
     date" and "call" are the only two things a visitor came to do. */
  .hero .h-cta,
  .cta-row{flex-direction:column; align-items:stretch; gap:12px}
  .hero .h-cta .btn,
  .cta-row .btn{width:100%; justify-content:center; padding-inline:20px}

  /* Every link in the address block — the phone numbers were a 23px tap target,
     and calling is the conversion on this site. Covers the Follow links too. */
  .addr a{display:inline-block; padding-block:11px}

  /* The menu/tariff table heading was 10.5px with .22em tracking — legible on a
     desktop, not on a phone held at arm's length. */
  .tbl th{font-size:12px; letter-spacing:.14em}

  /* "MIDC, Jalna Road · Chikhli · Buldhana" wrapped onto two lines purely
     because of the tracking. Tighten it so the address reads as one line. */
  .hero .eyebrow{letter-spacing:.14em}

  /* iOS zooms the page in when a focused input is under 16px. The inputs are
     already 16px — do not "tidy" them smaller. */
}