/* ============ Fortune Vista Stay Inn ============ */

@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:500 700; font-display:swap;
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:500 700; font-display:swap;
  src:url("../fonts/fraunces-rupee.woff2") format("woff2");
  unicode-range:U+20B9;
}


:root{
  --navy:#102145;
  --navy-700:#1B3160;
  --navy-900:#0A1731;
  --gold:#C8992E;
  --gold-300:#E6C572;
  --gold-50:#F7EEDA;
  --cream:#FFFCF5;
  --tint:#F7F2E8;
  --ink:#1C1F26;
  --muted:#5F6672;
  --line:#E6DFD1;
  --wa:#1FA855;
  --white:#fff;

  --wrap:1180px;
  --r:14px;
  --r-lg:20px;
  --sh-1:0 1px 2px rgba(16,33,69,.06), 0 4px 14px rgba(16,33,69,.06);
  --sh-2:0 10px 34px rgba(16,33,69,.12);
  --sh-3:0 24px 60px rgba(16,33,69,.20);
  --ease:cubic-bezier(.22,.8,.3,1);

  --f-dis:"Fraunces", "Iowan Old Style", Georgia, serif;
  --f-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;
  /* anchors land clear of the real header, and clear of the real dock. Both
     heights are measured and published by main.js; the literals are fallbacks. */
  scroll-padding-top:calc(var(--navh, 86px) + 12px);
  scroll-padding-bottom:var(--dockh, 0px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-ui); font-size:1.0625rem; line-height:1.65;
  /* rem, not px, so the page honours the reader's browser / OS text size.
     break-word stops one long token from widening a grid track. */
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
svg, video, iframe, canvas{max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-dis); font-weight:600; line-height:1.14; margin:0; letter-spacing:-.018em;
  font-variation-settings:"SOFT" 0, "WONK" 0}
h1{font-size:clamp(2.1rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:16px}
@media(min-width:640px){.wrap{padding-inline:28px}}

.skip{position:absolute; left:8px; top:8px; z-index:200; background:var(--navy); color:#fff;
  padding:12px 18px; border-radius:8px;
  clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap}
.skip:focus{clip-path:none; width:auto; height:auto; overflow:visible}

.ic{width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round}
#i-wa, .ic--fill{fill:currentColor; stroke:none}
svg use[href="#i-wa"]{fill:currentColor; stroke:none}
.ic--lg{width:30px; height:30px; stroke-width:1.4}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-ui); font-size:.94rem; font-weight:650; letter-spacing:.01em;
  padding:12px 20px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; min-width:0; max-width:100%; text-align:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:15px 28px; font-size:1rem}
.btn--gold{background:linear-gradient(135deg,var(--gold-300),var(--gold)); color:#2A1D00; box-shadow:0 6px 20px rgba(200,153,46,.34)}
.btn--gold:hover{box-shadow:0 10px 28px rgba(200,153,46,.45)}
.btn--navy{background:var(--navy); color:#fff; box-shadow:0 6px 18px rgba(16,33,69,.22)}
.btn--navy:hover{background:var(--navy-700)}
.btn--wa{background:var(--wa); color:#fff; box-shadow:0 6px 18px rgba(31,168,85,.26)}
.btn--wa:hover{background:#188A45}
.btn--ghost{border-color:rgba(255,255,255,.5); color:#fff; backdrop-filter:blur(6px); background:rgba(255,255,255,.08)}
.btn--ghost:hover{background:rgba(255,255,255,.18); border-color:#fff}
.btn--line{border-color:var(--line); background:#fff; color:var(--navy)}
.btn--line:hover{border-color:var(--gold); color:var(--gold)}

.eyebrow{
  font-family:var(--f-ui); font-size:.73rem; font-weight:750; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-300); margin:0 0 14px;
}
.eyebrow--dark{color:var(--gold)}

/* ---------- topbar + nav ---------- */
.topbar{background:var(--navy-900); color:#C6CEDD; font-size:.8rem}
.topbar__in{display:flex; align-items:center; gap:12px; min-height:38px; padding-block:4px}
.topbar__badge{background:var(--gold); color:#2A1D00; font-weight:750; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:999px}
.topbar__txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar__tel{display:inline-flex; align-items:center; gap:7px; font-weight:650; color:#fff}
.topbar__tel:hover{color:var(--gold-300)}
@media(max-width:700px){.topbar__txt{display:none}}

.nav{position:sticky; top:0; z-index:90; background:rgba(255,252,245,.94);
  border-bottom:1px solid var(--line); transition:box-shadow .25s, background .25s}
/* backdrop-filter creates a containing block for position:fixed descendants,
   which breaks the mobile drawer. Desktop only, where there is no fixed child. */
@media(min-width:981px){.nav{backdrop-filter:saturate(1.6) blur(12px)}}
.nav.is-stuck{box-shadow:0 6px 24px rgba(16,33,69,.09)}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:72px; padding-block:8px}
.nav__brand img{height:40px; width:auto}
@media(min-width:900px){.nav__brand img{height:46px}}
.nav__links{display:flex; align-items:center; gap:26px}
.nav__links > a:not(.btn){font-size:.92rem; font-weight:560; color:var(--navy); position:relative; padding:4px 0}
.nav__links > a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--gold); transition:right .28s var(--ease)}
.nav__links > a:not(.btn):hover::after, .nav__links > a.is-active::after{right:0}
.nav__cta{padding:10px 18px; font-size:.88rem}

.nav__burger{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:10px}
.nav__burger span{display:block; width:22px; height:2px; background:var(--navy); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px){
  .nav__burger{display:flex}
  .nav{background:var(--cream)}
  .nav__links{
    position:fixed; top:var(--navh,110px); left:0; right:0; bottom:0; z-index:95;
    width:100%; max-width:100%; background:var(--cream); flex-direction:column;
    align-items:stretch; gap:0; padding:12px 20px 40px;
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%); transition:transform .36s var(--ease), visibility .36s;
    visibility:hidden;
  }
  .nav__links.is-open{transform:none; visibility:visible}
  .nav__links > a:not(.btn){padding:17px 4px; font-size:1.12rem; font-weight:600;
    border-bottom:1px solid var(--line); font-family:var(--f-dis)}
  .nav__links > a:not(.btn)::after{display:none}
  .nav__cta{margin-top:22px; justify-content:center; padding:15px}
  body.is-locked{overflow:hidden}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(540px,84svh,760px); display:flex; align-items:flex-end;
  padding:clamp(96px,14vw,140px) 0 clamp(56px,8vw,80px); overflow:hidden; isolation:isolate}
.hero__slides{position:absolute; inset:0; z-index:-2; background:var(--navy-900)}
.hero__bg{position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease)}
.hero__bg.is-on{opacity:1}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:58% 44%;
  animation:kb 14s var(--ease) both}
.hero__bg.is-on img{animation:kb 14s var(--ease) both}
@keyframes kb{from{transform:scale(1.045)}to{transform:scale(1)}}

.hero__dots{display:flex; gap:8px; margin-top:30px}
.hero__dots button{width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.4); box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:width .3s var(--ease), background .3s}
.hero__dots button.is-on{width:30px; border-radius:5px; background:var(--gold-300)}
@media(max-width:720px){.hero__dots{margin-top:22px}}
.hero__shade{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,23,49,.55) 0%, rgba(10,23,49,.52) 30%, rgba(10,23,49,.92) 100%),
             linear-gradient(100deg, rgba(10,23,49,.88) 0%, rgba(10,23,49,.6) 46%, rgba(10,23,49,.14) 78%),
             radial-gradient(80% 80% at 14% 86%, rgba(10,23,49,.6), transparent 72%)}
.hero__in{color:#fff; max-width:800px}
.hero h1{color:#fff; text-shadow:0 2px 28px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal; color:var(--gold-300)}
.hero__sub{margin:20px 0 30px; font-size:clamp(1.02rem,1.5vw,1.2rem); color:#E4E9F2; max-width:62ch; line-height:1.6}
.hero__cta{display:flex; flex-wrap:wrap; gap:13px}
.hero__chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:34px}
.hero__chips li{display:inline-flex; align-items:center; gap:8px; max-width:100%; font-size:.84rem; font-weight:600;
  color:#EDF1F7; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:8px 15px; border-radius:999px; backdrop-filter:blur(6px)}
.hero__chips .ic{width:16px; height:16px; color:var(--gold-300)}
@keyframes sc{0%{opacity:0; transform:translateY(0)}35%{opacity:1}100%{opacity:0; transform:translateY(15px)}}

/* ---------- sections ---------- */
.sec{padding:clamp(60px,7.5vw,104px) 0}
.sec--tint{background:var(--tint)}
.sec--navy{background:var(--navy); color:#E7ECF4}
.sec--navy h2,.sec--navy h3{color:#fff}

.sechead{max-width:690px; margin:0 auto clamp(38px,5vw,60px); text-align:center}
.sechead__sub{color:var(--muted); font-size:1.04rem; margin:14px 0 0}
.sechead--light .sechead__sub{color:#B9C4D6}

/* ---------- quick cards ---------- */
.quick{margin-top:-62px; position:relative; z-index:5; padding-bottom:0}
.quick__grid{display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr))}
.qcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px 22px;
  box-shadow:var(--sh-1); transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s}
.qcard:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--gold-300)}
.qcard .ic--lg{color:var(--gold); margin-bottom:14px}
.qcard h3{font-size:1.15rem; margin-bottom:8px}
.qcard p{font-size:.92rem; color:var(--muted); margin:0 0 14px}
.qcard__go{display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:700; color:var(--navy)}
.qcard__go .ic{width:15px; height:15px; transition:transform .25s var(--ease)}
.qcard:hover .qcard__go{color:var(--gold)}
.qcard:hover .qcard__go .ic{transform:translateX(4px)}

/* ---------- about ---------- */
.about{display:grid; gap:clamp(34px,5vw,64px); align-items:center}
@media(min-width:900px){.about{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.about__media{position:relative}
.about__media img{border-radius:var(--r-lg); box-shadow:var(--sh-2); aspect-ratio:4/3; object-fit:cover; width:100%}
.about__stat{position:absolute; right:-10px; bottom:-22px; background:var(--navy); color:#fff;
  border-radius:var(--r); padding:16px 22px; box-shadow:var(--sh-2); text-align:center;
  border:2px solid var(--gold)}
.about__stat strong{display:block; font-family:var(--f-dis); font-size:2.1rem; line-height:1; color:var(--gold-300)}
.about__stat span{font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:#C6CEDD}
@media(max-width:899px){.about__stat{right:14px; bottom:-18px}}
.about__body h2{margin-bottom:18px}
.about__body > p{color:var(--muted)}

.ticks{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin:26px 0 30px}
.ticks li{display:flex; gap:13px; align-items:flex-start; min-width:0; overflow-wrap:anywhere}
.ticks .ic{width:21px; height:21px; color:var(--gold); margin-top:3px}
.ticks strong{display:block; font-size:.98rem; font-weight:680}
.ticks span{display:block; font-size:.9rem; color:var(--muted); line-height:1.5}
.ticks--light strong{color:#fff}
.ticks--light span{color:#A9B5C9}

/* ---------- carousel ---------- */
.carousel{position:relative; border-radius:var(--r-lg); overflow:hidden; background:#EDE7DA}
.carousel__track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__slide{flex:0 0 100%; margin:0; scroll-snap-align:center}
.carousel__slide img{width:100%; aspect-ratio:4/3; object-fit:cover}
.carousel--big .carousel__slide img{aspect-ratio:16/10}
.carousel__nav{position:absolute; top:50%; translate:0 -50%; width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:var(--navy); display:grid; place-items:center;
  cursor:pointer; box-shadow:var(--sh-1); opacity:0; transition:opacity .25s, background .2s, transform .2s}
.carousel:hover .carousel__nav, .carousel__nav:focus-visible{opacity:1}
.carousel__nav:hover{background:#fff; transform:translateY(-50%) scale(1.08)}
.carousel__nav--prev{left:12px}
.carousel__nav--prev .ic{transform:rotate(180deg)}
.carousel__nav--next{right:12px}
@media(hover:none){.carousel__nav{display:none}}
.carousel__dots{position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:6px}
.carousel__dots button{width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.3); transition:width .25s var(--ease), background .25s}
.carousel__dots button.is-on{width:22px; border-radius:4px; background:var(--gold-300)}

/* ---------- rooms ---------- */
/* min() keeps the 300px floor from exceeding the container on a 320px phone,
   where it used to force a 300px track into 288px of room. */
.rooms{display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr))}
.room{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.room:hover{transform:translateY(-6px); box-shadow:var(--sh-2)}
.room__media{position:relative}
.room__media .carousel{border-radius:0}
.room__tag{position:absolute; top:13px; left:13px; z-index:2; background:rgba(16,33,69,.92); color:#fff;
  font-size:.68rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px)}
.room__tag--best{background:linear-gradient(135deg,var(--gold-300),var(--gold)); color:#2A1D00}
.room__tag--value{background:var(--wa)}
.room__body{padding:24px 22px 22px; display:flex; flex-direction:column; flex:1}
.room__body h3{margin-bottom:9px}
.room__desc{font-size:.93rem; color:var(--muted); margin-bottom:18px}
.room__feat{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 12px; padding-bottom:20px;
  border-bottom:1px solid var(--line); margin-bottom:18px}
.room__feat li{display:flex; align-items:center; gap:8px; min-width:0; overflow-wrap:anywhere;
  font-size:.85rem; font-weight:560; color:var(--ink)}
.room__feat .ic{width:16px; height:16px; color:var(--gold)}
.room__foot{margin-top:auto}
.price{display:flex; align-items:baseline; gap:3px; margin:0 0 16px; font-family:var(--f-dis)}
.price__cur{font-size:1.2rem; color:var(--navy); font-weight:600}
.price strong{font-size:2.15rem; font-weight:700; color:var(--navy); line-height:1}
.price__unit{font-family:var(--f-ui); font-size:.78rem; color:var(--muted); font-weight:500; margin-left:6px}
.room__btns{display:flex; gap:9px}
.room__btns .btn{flex:1 1 0; min-width:0; padding:12px 10px; font-size:.88rem}

.rooms__note{display:flex; align-items:center; justify-content:center; gap:10px; margin:34px auto 0;
  font-size:.9rem; color:var(--muted); background:#fff; border:1px dashed var(--line);
  border-radius:999px; padding:13px 24px; width:fit-content; max-width:100%; text-align:center}
.rooms__note .ic{width:17px; height:17px; color:var(--gold); fill:var(--gold-300)}

/* booking / enquiry fields that prefill the WhatsApp message */
/* Capped auto-fit, max 2 columns: the floor is whichever is larger, 8.5rem or
   half the row. So the fields drop to one column when the reader's text gets
   big OR the card gets narrow -- which a max-width breakpoint could not do --
   and never spread past two columns in a wide panel. */
.bk{display:grid; gap:10px; margin:0 0 18px;
  grid-template-columns:repeat(auto-fit, minmax(max(8.5rem, (100% - 10px)/2), 1fr))}
.bk__f{display:flex; flex-direction:column; gap:5px; min-width:0}
.bk__f--wide{grid-column:1 / -1}
.bk__f > span{font-size:.7rem; font-weight:750; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted)}
.bk input, .bk select{
  width:100%; min-width:0; font-family:var(--f-ui); font-size:.92rem; font-weight:560;
  color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:10px 12px; appearance:none; -webkit-appearance:none; transition:border-color .2s, box-shadow .2s;
}
.bk input[type="date"]{min-height:42px}
.bk select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F6672' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
  padding-right:32px;
}
.bk input:focus, .bk select:focus{outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,153,46,.18)}
.bk__chk{flex-direction:row; align-items:center; gap:9px}
.bk__chk input[type="checkbox"]{width:18px; height:18px; flex:0 0 auto; padding:0;
  appearance:auto; -webkit-appearance:checkbox; accent-color:var(--gold);
  background:none; border:0; border-radius:0}
.bk__chk > span{font-size:.84rem; font-weight:560; letter-spacing:0;
  text-transform:none; color:var(--ink)}

.price__calc{margin:-8px 0 14px; font-size:.82rem; font-weight:650; color:var(--navy);
  background:var(--gold-50); border:1px solid rgba(200,153,46,.3);
  border-radius:8px; padding:8px 12px}
.price__calc[hidden]{display:none}

/* on navy backgrounds */
.bk--dark{margin-bottom:20px}
.bk--dark .bk__f > span{color:#A9B5C9}
.bk--dark input, .bk--dark select{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff}
.bk--dark select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A9B5C9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px}
.bk--dark input:focus, .bk--dark select:focus{border-color:var(--gold-300);
  box-shadow:0 0 0 3px rgba(230,197,114,.22)}
.bk--dark .bk__chk > span{color:#DCE3EE}
.bk--dark option{color:var(--ink)}
/* make the native date picker icon visible on dark */
.bk--dark input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.75)}


/* ---------- amenities ---------- */
/* Capped auto-fit: the track floor is whichever is larger, 130px or the width
   a 4-column row would give. So it never exceeds 4 columns and never forces a
   track wider than its share -- repeat(2,1fr) did, because 1fr's floor is
   min-content, and "Air conditioning" pushed the row 19px past the gutter. */
.amen{display:grid; gap:12px; margin-bottom:42px;
  grid-template-columns:repeat(auto-fit, minmax(max(130px, (100% - 36px)/4), 1fr))}
/* anywhere (not break-word) also lowers min-content, which is what lets the
   anonymous text item beside the icon shrink instead of spilling out. */
.amen li{display:flex; align-items:center; gap:12px; min-width:0; overflow-wrap:anywhere;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:15px 16px; font-size:.9rem; font-weight:560;
  transition:border-color .25s, transform .25s var(--ease)}
.amen li:hover{border-color:var(--gold-300); transform:translateY(-3px)}
.amen .ic{width:21px; height:21px; color:var(--gold)}

.strip{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(max(88px, (100% - 60px)/6), 1fr))}
.strip__it{margin:0; position:relative; border-radius:var(--r); overflow:hidden; cursor:zoom-in;
  box-shadow:var(--sh-1)}
.strip__it img{aspect-ratio:1; object-fit:cover; width:100%; transition:transform .5s var(--ease)}
.strip__it:hover img{transform:scale(1.07)}
.strip__it figcaption{position:absolute; inset:auto 0 0 0; padding:18px 10px 9px; font-size:.74rem;
  font-weight:650; color:#fff; text-align:center;
  background:linear-gradient(transparent,rgba(10,23,49,.82))}

/* ---------- banquet ---------- */
.banquet{display:grid; gap:26px}
@media(min-width:960px){
  .banquet{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:stretch}
  .banquet__hero, .banquet__hero .carousel{height:100%}
  .banquet__hero .carousel__track, .banquet__hero .carousel__slide{height:100%}
  .carousel--big .carousel__slide img{height:100%; aspect-ratio:auto; min-height:430px}
}
.banquet__side{background:var(--navy-700); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:26px 24px}
.banquet__cap{display:flex; align-items:center; gap:14px; padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.banquet__cap .ic--lg{color:var(--gold-300)}
.banquet__cap strong{display:block; font-family:var(--f-dis); font-size:1.75rem; color:#fff; line-height:1}
.banquet__cap span{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#A9B5C9}
.banquet__side h3{font-size:1.1rem; margin-bottom:4px}
.banquet__events{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px}
.banquet__events span{max-width:100%; font-size:.78rem; font-weight:600; color:#DCE3EE; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16); padding:6px 12px; border-radius:999px}
.banquet__btns{display:flex; flex-wrap:wrap; gap:10px}
.banquet__btns .btn{flex:1 1 auto}
.banquet__fine{font-size:.8rem; color:#9FADC4; margin:16px 0 0; line-height:1.55}

/* ---------- catering ---------- */
.catering{display:grid; gap:clamp(30px,5vw,58px); align-items:center}
@media(min-width:900px){.catering{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.catering__body h2{margin-bottom:16px; font-size:clamp(1.5rem,3vw,2.2rem)}
.catering__body > p{color:var(--muted)}
.catering__pills{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 26px}
.catering__pills li{display:inline-flex; align-items:center; gap:8px; max-width:100%; font-size:.85rem; font-weight:600;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 15px}
.catering__pills .ic{width:16px; height:16px; color:var(--gold)}
.catering__btns{display:flex; flex-wrap:wrap; gap:11px}
.catering__btns .btn--gold .ic{transform:rotate(90deg)}


/* gold motifs behind the banquet section */
.sec--ornate{position:relative; overflow:hidden; isolation:isolate}
.sec--ornate > .wrap{position:relative; z-index:1}
.ornaments{position:absolute; inset:0; z-index:0; pointer-events:none; color:var(--gold-300)}
.orn{position:absolute; aspect-ratio:1; width:auto; fill:none; stroke:currentColor;
  stroke-width:1.1; stroke-linejoin:round; vector-effect:non-scaling-stroke}

.o1{height:clamp(150px,24vw,300px); top:-70px;  left:-70px;  opacity:.16; filter:blur(1.4px)}
.o2{height:clamp(110px,15vw,190px); top:10%;    right:6%;    opacity:.13; filter:blur(1.8px); transform:rotate(18deg)}
.o3{height:clamp(70px,9vw,110px);   top:34%;    left:7%;     opacity:.20; filter:blur(1px)}
.o4{height:clamp(170px,30vw,380px); bottom:-130px; right:-110px; opacity:.14; filter:blur(2.2px)}
.o5{height:clamp(90px,13vw,160px);  bottom:12%; left:4%;     opacity:.12; filter:blur(1.6px); transform:rotate(-12deg)}
.o6{height:clamp(48px,6vw,72px);    top:12%;    left:34%;    opacity:.22; filter:blur(.6px)}
.o7{height:clamp(80px,11vw,140px);  bottom:6%;  right:30%;   opacity:.11; filter:blur(2px); transform:rotate(-24deg)}

/* sizes are fluid, so this only drops the ones that crowd a phone */
@media(max-width:700px){.o2,.o5,.o6,.o7{display:none}}

/* scattered chillies behind the kitchen section */
.sec--spice{position:relative; overflow:hidden; isolation:isolate}
.sec--spice > .wrap{position:relative; z-index:1}
.chillis{position:absolute; inset:0; z-index:0; pointer-events:none}
.chilli{position:absolute; aspect-ratio:64/120; width:auto}
.chilli--red{color:#C33A2B}
.chilli--green{color:#4C9A3F}

/* position / size / tilt. heights in px, aspect is locked by the viewBox */
.c1{height:clamp(96px,14vw,165px);  top:-44px;    left:-36px;  transform:rotate(-24deg); opacity:.15}
.c2{height:clamp(70px,10vw,125px);  top:13%;      left:-46px;  transform:rotate(58deg);  opacity:.17}
.c3{height:clamp(120px,17vw,205px); bottom:-62px; left:3%;     transform:rotate(14deg);  opacity:.13}
.c4{height:clamp(80px,12vw,140px);  bottom:-34px; left:45%;    transform:rotate(-66deg); opacity:.16}
.c5{height:clamp(120px,19vw,235px); top:-66px;    right:3%;    transform:rotate(27deg);  opacity:.14}
.c6{height:clamp(92px,13vw,155px);  bottom:-44px; right:6%;    transform:rotate(-18deg); opacity:.17}
.c7{height:clamp(66px,9vw,115px);   top:44%;      right:-34px; transform:rotate(74deg);  opacity:.13}

/* sizes are fluid, so this only drops the ones that crowd a phone */
@media(max-width:700px){.c2,.c4,.c7{display:none}}

/* kitchen / Sampradhaya logo */
.kitchen{display:flex; align-items:center; justify-content:center}
.kitchen__logo{width:100%; max-width:clamp(230px, 40vw, 400px); height:auto;
  filter:drop-shadow(0 22px 46px rgba(16,33,69,.30))}

/* ---------- gallery ---------- */
.grid{display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(max(136px, (100% - 42px)/4), 1fr))}
.grid__it{margin:0; position:relative; border-radius:var(--r); overflow:hidden; cursor:zoom-in;
  box-shadow:var(--sh-1); background:#EDE7DA}
.grid__it img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .55s var(--ease)}
.grid__it::after{content:""; position:absolute; inset:0; background:rgba(16,33,69,0); transition:background .3s}
.grid__it:hover img{transform:scale(1.06)}
.grid__it:hover::after{background:rgba(16,33,69,.18)}

/* ---------- location ---------- */
.loc{display:grid; gap:24px; margin-bottom:26px}
@media(min-width:900px){.loc{grid-template-columns:repeat(2, minmax(0,1fr))}}
.loc__dist{display:grid; gap:12px; align-content:start;
  grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr))}
.loc__dist li{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 16px;
  min-width:0; overflow-wrap:anywhere;
  transition:border-color .25s, transform .25s var(--ease)}
.loc__dist li:hover{border-color:var(--gold-300); transform:translateY(-3px)}
.loc__dist strong{display:block; font-family:var(--f-dis); font-size:1.5rem; color:var(--navy); line-height:1.1}
.loc__dist span{font-size:.84rem; color:var(--muted)}
.loc__card{background:var(--navy); color:#DCE3EE; border-radius:var(--r-lg); padding:28px 26px}
.loc__card h3{display:flex; align-items:center; gap:10px; color:#fff; margin-bottom:14px}
.loc__card h3 .ic{color:var(--gold-300)}
.loc__card address{font-style:normal; color:#B9C4D6; line-height:1.75; margin-bottom:20px}
.loc__meta{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:0 0 22px;
  padding:18px 0; border-block:1px solid rgba(255,255,255,.14)}
.loc__meta dt{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8E9DB6; margin-bottom:3px}
.loc__meta dd{margin:0; min-width:0; overflow-wrap:anywhere; font-weight:650; color:#fff; font-size:.94rem}
.loc__btns{display:flex; flex-wrap:wrap; gap:10px}
.loc__map{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); border:1px solid var(--line);
  background:#E9E3D6}
.loc__map iframe{display:block; width:100%; height:clamp(260px,38vw,400px); border:0; filter:saturate(.92)}

/* ---------- cta ---------- */
.cta{background:linear-gradient(135deg,var(--navy-900),var(--navy-700)); color:#fff;
  padding:clamp(56px,7vw,86px) 0; text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 90% at 50% 0%, rgba(200,153,46,.22), transparent 70%)}
.cta__in{position:relative}
.cta h2{color:#fff; margin-bottom:12px}
.cta p{color:#C0CADA; margin-bottom:28px}
.cta__btns{display:flex; flex-wrap:wrap; gap:13px; justify-content:center}

/* ---------- footer ---------- */
.foot{background:var(--navy-900); color:#A9B5C9; padding:clamp(48px,6vw,70px) 0 0; font-size:.92rem}
.foot__in{display:grid; gap:34px; grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){
  .foot__in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.25fr)}
}
.foot h4{font-family:var(--f-ui); font-size:.74rem; font-weight:750; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin:0 0 16px}
.foot__brand img{height:58px; width:auto; margin-bottom:18px;
  filter:brightness(0) invert(1); opacity:.92}
.foot__brand p{line-height:1.7; max-width:42ch; margin:0}
.foot__nav{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.foot__nav a:hover{color:var(--gold-300)}
/* anywhere, not break-word: only anywhere also shrinks min-content, which is
   what stops the email address from widening the column. */
.foot__contact a, .foot__contact p{display:flex; align-items:flex-start; gap:10px;
  margin:0 0 12px; line-height:1.6; min-width:0; overflow-wrap:anywhere}
.foot__contact .ic{width:17px; height:17px; color:var(--gold); margin-top:3px}
.foot__contact a:hover{color:var(--gold-300)}
.foot__hours{color:#8E9DB6}
.foot__bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  margin-top:40px; padding-block:20px; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:#7D8CA5}
.foot__bar p{margin:0}
.foot__credit a{color:#A9B5C9; font-weight:650; border-bottom:1px solid rgba(200,153,46,.45);
  padding-bottom:1px; transition:color .2s, border-color .2s}
.foot__credit a:hover, .foot__credit a:focus-visible{color:var(--gold-300);
  border-color:var(--gold-300)}
@media(max-width:800px){
  .foot__bar{flex-direction:column; align-items:flex-start; gap:8px}
}

/* ---------- mobile dock ---------- */
.dock{display:none}
@media(max-width:720px){
  .dock{display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    position:fixed; inset:auto 0 0 0; z-index:80; max-width:100%;
    background:rgba(16,33,69,.97); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.12);
    padding-bottom:env(safe-area-inset-bottom)}
  .dock a{display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; min-width:0; text-align:center;
    padding:clamp(9px,2.4vw,12px) 4px clamp(8px,2.2vw,11px);
    overflow-wrap:anywhere;
    color:#DCE3EE; font-size:clamp(.64rem, 2.6vw, .72rem); font-weight:650}
  .dock a:active{background:rgba(255,255,255,.08)}
  .dock .ic{width:20px; height:20px; color:var(--gold-300)}
  /* reserve exactly the dock's measured height, not a guessed 66px */
  body{padding-bottom:var(--dockh, 66px)}
  .foot__bar{margin-bottom:4px}
}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:16px}
.modal[hidden]{display:none}
.modal__scrim{position:absolute; inset:0; background:rgba(10,23,49,.68); backdrop-filter:blur(5px);
  animation:fade .25s var(--ease)}
.modal__box{position:relative; width:min(760px,100%); max-height:88svh; background:var(--cream);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sh-3); animation:pop .32s var(--ease)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0; transform:translateY(22px) scale(.97)}}
.modal__head{display:flex; align-items:center; gap:14px; padding:20px 22px; background:var(--navy); color:#fff; flex:0 0 auto}
.modal__head img{width:52px; height:52px; border-radius:50%; flex:0 0 auto}
.modal__head h2{font-size:1.25rem; color:#fff; margin:0}
.modal__head p{margin:2px 0 0; font-size:.82rem; color:#A9B5C9}
.modal__x{margin-left:auto; width:38px; height:38px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center}
.modal__x:hover{background:rgba(255,255,255,.26)}
.modal__tabs{display:flex; gap:8px; overflow-x:auto; padding:14px 22px; background:#fff;
  border-bottom:1px solid var(--line); scrollbar-width:none; flex:0 0 auto}
.modal__tabs::-webkit-scrollbar{display:none}
.modal__tabs button{flex:0 0 auto; border:1px solid var(--line); background:#fff; cursor:pointer;
  font-family:var(--f-ui); font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:8px 15px; border-radius:999px; transition:all .2s}
.modal__tabs button.is-on{background:var(--navy); border-color:var(--navy); color:#fff}
.modal__body{overflow-y:auto; flex:1 1 auto; min-height:0; padding:8px 22px 20px; -webkit-overflow-scrolling:touch}
.mcat{padding-top:18px}
.mcat h3{font-size:1rem; letter-spacing:.1em; text-transform:uppercase; font-family:var(--f-ui);
  font-weight:750; color:var(--gold); margin-bottom:12px}
.mitem{display:flex; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px dashed var(--line)}
.mitem:last-child{border-bottom:0}
.mitem__n{font-weight:650; font-size:.98rem}
.mitem__d{display:block; font-size:.84rem; color:var(--muted); font-weight:400; line-height:1.5; margin-top:2px}
.mitem__dot{flex:1; border-bottom:1px dotted var(--line); min-width:18px; translate:0 -4px}
.mitem__p{font-family:var(--f-dis); font-size:1.08rem; font-weight:700; color:var(--navy); white-space:nowrap}
.modal__foot{padding:16px 22px; background:#fff; border-top:1px solid var(--line); flex:0 0 auto;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.modal__foot p{margin:0; font-size:.76rem; color:var(--muted); max-width:30ch}
.modal__foot div{display:flex; gap:9px; flex-wrap:wrap}
.modal__foot .btn{padding:11px 16px; font-size:.86rem}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; z-index:130; background:rgba(8,17,36,.95); display:grid; place-items:center;
  padding:52px 16px; animation:fade .22s var(--ease)}
.lb[hidden]{display:none}
.lb__fig{margin:0; max-width:1100px; width:100%; display:flex; flex-direction:column; align-items:center; gap:14px}
.lb__fig img{max-width:100%; max-height:76svh; width:auto; border-radius:10px; box-shadow:var(--sh-3)}
.lb__fig figcaption{color:#C6CEDD; font-size:.88rem; text-align:center}
.lb__x{position:absolute; top:16px; right:16px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:grid; place-items:center}
.lb__x:hover{background:rgba(255,255,255,.28)}
.lb__nav{position:absolute; top:50%; translate:0 -50%; width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:grid; place-items:center}
.lb__nav:hover{background:rgba(255,255,255,.28)}
.lb__nav--prev{left:14px}
.lb__nav--prev .ic{transform:rotate(180deg)}
.lb__nav--next{right:14px}
@media(max-width:600px){.lb__nav{top:auto; bottom:18px; translate:0 0}
  .lb__nav--prev{left:calc(50% - 60px)} .lb__nav--next{right:calc(50% - 60px)}}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .reveal.in, html.js.reveal-all .reveal{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1; transform:none; transition:none}
  .btn:hover,.qcard:hover,.room:hover,.amen li:hover,.loc__dist li:hover{transform:none}
  .hero__bg img{animation:none}
}