/* ==========================================================================
   SURYA GRAND — stylesheet
   Editorial / cinematic. Big condensed display type over full-bleed
   photography, Didone headings, thin column rules, pill navigation.

   You normally don't need to touch this file. Colours are all in one place,
   right below, if you ever want to change the look.
   ========================================================================== */

:root{
  /* ---- Colours (change these to restyle the whole site) ---- */
  --ink:        #1f2a44;   /* deep navy — headings, dark sections */
  --ink-2:      #12192b;
  --body:       #4a5268;   /* body text */
  --muted:      #8a8fa0;   /* secondary text */
  --rule:       rgba(31,42,68,.11);   /* the thin column lines */
  --rule-light: rgba(255,255,255,.13);
  --line:       #e4e2dd;   /* hairline borders */
  --surface:    #f5f3ef;   /* soft section background */
  --paper:      #ffffff;
  --accent:     #c2703f;   /* terracotta — the warm note */
  --accent-dk:  #a2542a;
  --accent-tint:#f8efe7;
  --wa:         #1fa855;   /* WhatsApp green */
  --wa-dark:    #188844;

  /* ---- Type ---- */
  --display: "Oswald", "Arial Narrow", Arial, sans-serif;   /* huge condensed caps */
  --serif:   "Bodoni Moda", Didot, "Times New Roman", serif; /* headings */
  --sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- Layout ---- */
  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 44px);
  --r-sm: 4px;
  --r:    6px;
  --pill: 999px;
  --shadow:    0 1px 2px rgba(31,42,68,.04), 0 10px 30px -18px rgba(31,42,68,.24);
  --shadow-lg: 0 2px 6px rgba(31,42,68,.05), 0 30px 64px -30px rgba(31,42,68,.34);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.66;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; color:var(--ink); }
h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.1; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--accent-dk); text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px;
}
.skip:focus{ left:12px; top:12px; }

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

.wrap{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  position:relative; z-index:1;
}

/* ---------- The thin column rules ----------------------------------------
   Six evenly spaced vertical hairlines across the full viewport width.
   Purely decorative, sits behind all content.
   -------------------------------------------------------------------------- */
.gridlines{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, var(--rule) 1px, transparent 1px);
  background-size:calc(100% / 6) 100%;
}
.gridlines-light{ background-image:linear-gradient(to right, var(--rule-light) 1px, transparent 1px); }

/* ---------- Photo placeholders --------------------------------------------
   Every photo sits on a warm neutral. If an image file is missing the block
   still looks deliberate rather than broken.
   -------------------------------------------------------------------------- */
.photo{
  background-color:#d8d3ca;
  background-image:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}
.photo::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(194,112,63,.10), rgba(31,42,68,.14) 65%);
  pointer-events:none;
}

/* ==========================================================================
   PILLS  (navigation + hero buttons)
   ========================================================================== */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.62em 1.2em;
  border-radius:var(--pill);
  font-size:.8rem; font-weight:500; letter-spacing:.005em;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background .25s, color .25s, border-color .25s, transform .15s;
}
.pill-glass{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26); color:#fff;
  backdrop-filter:blur(10px);
}
.pill-glass:hover{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.5); }
.pill-solid{ background:var(--accent); color:#fff; }
.pill-solid:hover{ background:var(--accent-dk); }
.pill:hover{ transform:translateY(-1px); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --btn-bg:var(--accent); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.85em 1.75em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--pill);
  font-size:.87rem; font-weight:600;
  cursor:pointer; text-align:center;
  transition:background .22s, color .22s, border-color .22s, transform .14s, box-shadow .22s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-lg{ padding:1em 2em; font-size:.93rem; }
.btn-block{ display:flex; width:100%; }

.btn-gold{ --btn-bg:var(--accent); }
.btn-gold:hover{ --btn-bg:var(--accent-dk); box-shadow:0 12px 26px -14px rgba(162,84,42,.85); }

.btn-outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.3); }
.btn-outline-light:hover{ --btn-bg:rgba(255,255,255,.1); --btn-bd:rgba(255,255,255,.62); }

.btn-wa{ --btn-bg:var(--wa); }
.btn-wa:hover{ --btn-bg:var(--wa-dark); box-shadow:0 12px 26px -14px rgba(31,168,85,.85); }
.btn-wa .ico{ width:20px; height:20px; }

.btn[disabled]{ opacity:.6; pointer-events:none; }
.ico{ width:15px; height:15px; flex:none; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-dk);
  border-bottom:1px solid rgba(162,84,42,.28); padding-bottom:4px;
  transition:gap .22s, border-color .22s;
}
.link-arrow::after{ content:"→"; transition:transform .22s; }
.link-arrow:hover{ border-color:var(--accent-dk); }
.link-arrow:hover::after{ transform:translateX(4px); }

/* ==========================================================================
   HEADER — logo centred, pills left and right
   ========================================================================== */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:16px 0;
  transition:background .3s, padding .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.site-head.stuck{
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(16px);
  padding:9px 0;
  border-bottom-color:var(--line);
}
.head-inner{ position:relative; display:block; }

.brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:9px; color:#fff;
  transition:color .3s; z-index:2;
}
.site-head.stuck .brand{ color:var(--ink); }
.brand-name{
  font-family:var(--display); font-weight:300; font-size:1rem;
  text-transform:uppercase; letter-spacing:.2em; white-space:nowrap;
}

.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nav-group{ display:flex; align-items:center; gap:7px; }
.nav a{
  display:inline-flex; align-items:center;
  padding:.55em 1.05em; border-radius:var(--pill);
  font-size:.78rem; font-weight:500; white-space:nowrap;
  color:#fff;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  transition:background .25s, color .25s, border-color .25s;
}
.nav a:hover{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.45); }
.nav a.active{ background:#fff; border-color:#fff; color:var(--ink); }

.site-head.stuck .nav a{
  color:var(--ink); background:rgba(31,42,68,.05); border-color:rgba(31,42,68,.1);
  backdrop-filter:none;
}
.site-head.stuck .nav a:hover{ background:rgba(31,42,68,.1); border-color:rgba(31,42,68,.2); }
.site-head.stuck .nav a.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.nav .nav-cta{
  background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important;
}
.nav .nav-cta:hover{ background:var(--accent-dk) !important; border-color:var(--accent-dk) !important; }

.nav-toggle{
  display:none; background:none; border:0; padding:10px; margin:-10px; cursor:pointer;
  color:#fff; position:relative; z-index:3;
}
.site-head.stuck .nav-toggle{ color:var(--ink); }
.nav-toggle-bars{ display:block; width:22px; }
.nav-toggle-bars i{
  display:block; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .3s, opacity .2s;
}
.nav-toggle-bars i + i{ margin-top:6px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   HERO — full-bleed photo, huge condensed name flush to the bottom
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:120px;
  overflow:hidden;
}
.hero-photo{ position:absolute; inset:0; z-index:0; background-color:#2c3242; }
/* a soft light source, so the hero has depth even before a photo is added */
.hero-photo::before{ background:radial-gradient(120% 90% at 68% 22%, rgba(255,255,255,.12), transparent 62%); }
/* Weighted to the lower band, where the tagline and the big name sit —
   decorated halls are bright and busy, and white text needs the cover. */
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top,
      rgba(15,20,33,.90) 0%,
      rgba(15,20,33,.78) 22%,
      rgba(15,20,33,.46) 44%,
      rgba(15,20,33,.20) 64%,
      rgba(15,20,33,.44) 100%);
}
.hero .gridlines{ z-index:2; }

.hero-body{ position:relative; z-index:3; margin-top:auto; padding-bottom:34px; }
.hero-tagline{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem, 2.1vw, 1.5rem); line-height:1.42;
  color:rgba(255,255,255,.94); margin:0 0 26px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:11px; }

.hero-meta{
  position:relative; z-index:3;
  display:flex; flex-wrap:wrap; gap:8px 30px; align-items:baseline;
  padding-bottom:20px;
  font-size:.73rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.hero-meta-alt{ text-transform:none; letter-spacing:.02em; font-size:.78rem; }
.hero-meta strong{ color:rgba(255,255,255,.9); font-weight:600; }

.hero-display{ position:relative; z-index:3; padding:0 clamp(8px, 1.4vw, 18px); }
.hero-title{
  font-family:var(--display); font-weight:300;
  text-transform:uppercase;
  font-size:12.95vw;     /* sized so "HOTEL SURYA GRAND" spans the full width */
  line-height:.8;
  letter-spacing:-.008em;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  margin:0 0 -.085em;
}

/* ==========================================================================
   FACTS STRIP
   ========================================================================== */
.facts{ background:var(--paper); padding:44px 0; border-bottom:1px solid var(--line); }
.facts-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.fact{
  display:flex; flex-direction:column; gap:7px;
  text-align:center; padding:4px 20px;
  border-left:1px solid var(--line);
}
.fact:first-child{ border-left:0; }
.fact strong{
  font-family:var(--serif); font-weight:400; font-size:1.75rem;
  color:var(--ink); line-height:1.1;
}
.fact span{ font-size:.76rem; letter-spacing:.03em; color:var(--muted); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{ position:relative; padding:clamp(80px, 11vw, 150px) 0; }
.section-tint{ background:var(--surface); }
.section-dark{ background:var(--ink); color:rgba(255,255,255,.72); }

.sec-head{ max-width:780px; margin-bottom:clamp(44px, 6vw, 72px); }
.eyebrow{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1rem; letter-spacing:0; text-transform:none;
  color:var(--accent-dk); margin:0 0 18px;
}
.eyebrow.light{ color:rgba(255,255,255,.72); }

.sec-head h2{
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  text-transform:uppercase;
  letter-spacing:-.005em;
  margin-bottom:26px;
}
.sec-head h2.light{ color:#fff; }

.sec-lead{ font-size:.98rem; color:var(--body); max-width:60ch; }
.sec-lead.light{ color:rgba(255,255,255,.68); }
.sec-lead strong{ color:var(--ink); font-weight:600; }
.sec-lead.light strong{ color:#fff; }

.mini-head{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin:40px 0 18px;
}

/* ---------- Full-bleed photograph band ---------- */
.bleed{ margin:clamp(20px,4vw,40px) 0 clamp(46px,6vw,76px); }
.bleed-photo{
  width:100%;
  aspect-ratio:21/9;
  min-height:280px;
}

/* ==========================================================================
   NOTICE — the "we're listed under a different name on OYO" callout
   ========================================================================== */
.notice{
  display:flex; gap:15px; align-items:flex-start;
  margin-bottom:clamp(36px, 4.5vw, 52px);
  padding:20px 24px;
  background:var(--accent-tint);
  border:1px solid rgba(194,112,63,.22);
  border-radius:var(--r);
  font-size:.9rem; line-height:1.6; color:var(--body);
}
.notice-ico{ width:20px; height:20px; flex:none; color:var(--accent); margin-top:3px; }
.notice strong{ color:var(--ink); font-weight:600; display:block; margin-bottom:3px; }
.notice em{ font-style:normal; font-weight:600; color:var(--accent-dk); }

/* ==========================================================================
   ROOMS
   ========================================================================== */
.rooms-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:clamp(24px, 3vw, 34px);
}
.room{ display:flex; flex-direction:column; }
.room-photo{
  aspect-ratio:3/4;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.room:hover .room-photo{ transform:translateY(-6px); }
.room-body{ padding:24px 0 0; display:flex; flex-direction:column; flex:1; }

/* Rooms have no photos of their own (OYO publishes those), so the cards
   are framed instead — deliberate rather than empty. Delete this block if
   you add room-1/2/3.jpg back in. */
.rooms-textonly .room{
  padding:30px 28px 32px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s, border-color .32s;
}
.rooms-textonly .room:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent;
}
.rooms-textonly .room-body{ padding:0; }
.rooms-textonly .room-body h3{
  padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.room-size{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-dk); margin-bottom:12px;
}
.room-body h3{ font-size:1.45rem; text-transform:uppercase; margin-bottom:11px; }
.room-body > p{ font-size:.9rem; color:var(--muted); }

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin:15px 0 22px; }
.tags li{
  font-size:.7rem; font-weight:500;
  padding:4px 10px; border-radius:var(--pill);
  background:rgba(31,42,68,.05); color:var(--body);
}
.room-body .link-arrow{ margin-top:auto; align-self:flex-start; }

.oyo-band{
  margin-top:clamp(50px, 6vw, 76px); padding-top:clamp(36px,4vw,52px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:26px;
}
.oyo-band .eyebrow{ margin-bottom:10px; }
.oyo-band h3{ font-size:1.9rem; text-transform:uppercase; margin-bottom:9px; }
.oyo-band p{ font-size:.9rem; color:var(--muted); max-width:44ch; }

/* ==========================================================================
   BANQUET
   ========================================================================== */
.banquet-grid{
  display:grid; grid-template-columns:1fr .82fr; gap:clamp(34px, 5vw, 72px);
  align-items:start;
}

.stats{ display:grid; grid-template-columns:repeat(2,1fr); max-width:440px; }
.stat{ padding:4px 16px; text-align:center; border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; padding-left:0; text-align:left; }
.stat strong{
  display:block; font-family:var(--serif); font-weight:400; font-size:2.2rem;
  color:var(--ink); line-height:1.05;
}
.stat span{ display:block; font-size:.73rem; letter-spacing:.03em; color:var(--muted); margin-top:7px; }

.ticks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px 26px; }
.ticks li{ position:relative; padding-left:24px; font-size:.9rem; color:var(--body); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:11px; height:6px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}
.soft-note{
  margin-top:30px; padding-left:20px; border-left:1px solid var(--accent);
  font-family:var(--serif); font-style:italic;
  font-size:.98rem; color:var(--muted);
}

/* ---------- Enquiry form ---------- */
.enquiry{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px, 3.4vw, 38px);
  box-shadow:var(--shadow);
  position:sticky; top:104px;
}
.enquiry h3{ font-size:1.7rem; text-transform:uppercase; margin-bottom:11px; }
.enquiry-lead{ font-size:.87rem; color:var(--muted); margin-bottom:26px; }

.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label{
  display:block; font-size:.69rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.req{ color:var(--accent); }
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px;
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:.92rem;
  transition:border-color .22s, box-shadow .22s;
}
.field textarea{ resize:vertical; min-height:76px; }
.field input::placeholder, .field textarea::placeholder{ color:#b4b2ac; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(194,112,63,.13);
}
.field.invalid input, .field.invalid select{ border-color:#b0392b; }
.err{ display:none; margin:6px 0 0; font-size:.77rem; color:#b0392b; }
.field.invalid .err{ display:block; }

#submitBtn{ margin-top:10px; }
.form-alt{ margin:16px 0 0; font-size:.84rem; color:var(--muted); text-align:center; }
.form-alt a{ font-weight:600; white-space:nowrap; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:210px;
  gap:14px;
}
.g-item{
  margin:0; overflow:hidden;
  display:flex; align-items:flex-end;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.g-item:hover{ transform:translateY(-4px); }
.g-tall{ grid-row:span 2; }
.g-wide{ grid-column:span 2; }
.g-item figcaption{
  position:relative; z-index:1; width:100%;
  padding:16px 18px;
  font-family:var(--serif); font-style:italic;
  font-size:.9rem; color:#fff;
  background:linear-gradient(to top, rgba(15,20,33,.8), transparent);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
}
.g-item:hover figcaption{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,5vw,68px);
  align-items:stretch;
}
.contact-info{ display:flex; flex-direction:column; }
.c-block{ padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.1); }
.c-block h3{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:14px;
}
.c-block p{ color:rgba(255,255,255,.82); font-size:.93rem; }
.c-block a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.26); }
.c-block a:hover{ border-color:var(--accent); color:var(--accent); }
.c-hint{ font-size:.81rem !important; color:rgba(255,255,255,.44) !important; margin-top:9px; }
.c-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:8px; }

.contact-map{
  min-height:430px; overflow:hidden;
  background:#243050; border:1px solid rgba(255,255,255,.1);
}
.contact-map iframe{ display:block; height:100%; min-height:430px; filter:grayscale(.4) contrast(1.05); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{ background:var(--ink-2); color:rgba(255,255,255,.5); padding:60px 0 44px; overflow:hidden; }
.foot-display{
  font-family:var(--display); font-weight:200; text-transform:uppercase;
  font-size:min(12vw, 150px); line-height:.85; letter-spacing:-.005em;
  color:rgba(255,255,255,.09);
  white-space:nowrap; text-align:center;
  margin-bottom:34px;
}
.foot-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.brand-sub{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.foot-nav{ display:flex; flex-wrap:wrap; gap:26px; }
.foot-nav a{ color:rgba(255,255,255,.6); font-size:.84rem; }
.foot-nav a:hover{ color:#fff; }
.foot-legal{
  font-size:.76rem; margin:0;
  padding-top:24px; margin-top:24px; border-top:1px solid rgba(255,255,255,.08);
}
.foot-legal a{ color:rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.2); }
.foot-legal a:hover{ color:#fff; }

/* ==========================================================================
   FLOATING CALL BUTTON (phones only)
   ========================================================================== */
.fab{
  display:none;
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:var(--accent); color:#fff;
  align-items:center; justify-content:center;
  box-shadow:0 8px 22px -6px rgba(31,42,68,.5);
}
.fab svg{ width:24px; height:24px; }

/* ==========================================================================
   SCROLL REVEAL  (falls back to fully visible if JavaScript is off)
   ========================================================================== */
.js .reveal{ opacity:0; transform:translateY(24px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .85s ease, transform .85s cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .banquet-grid{ grid-template-columns:1fr; }
  .enquiry{ position:static; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-map{ min-height:320px; }
  .contact-map iframe{ min-height:320px; }
  .gridlines{ background-size:calc(100% / 3) 100%; }
}

@media (max-width:860px){
  html{ scroll-padding-top:72px; }

  .nav-toggle{ display:block; margin-left:auto; }
  .head-inner{ display:flex; align-items:center; justify-content:space-between; }
  .brand{ position:static; transform:none; }

  .nav{
    position:fixed; inset:0 0 auto 0;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:84px 22px 26px;
    background:var(--paper);
    box-shadow:0 22px 44px -22px rgba(31,42,68,.45);
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:transform .36s cubic-bezier(.22,1,.36,1), opacity .3s, visibility .36s;
  }
  .nav.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav-group{ flex-direction:column; align-items:stretch; gap:0; }
  .nav a{
    background:transparent !important; border:0 !important; border-radius:0 !important;
    border-bottom:1px solid var(--line) !important;
    color:var(--ink) !important;
    padding:15px 2px; font-size:1rem; backdrop-filter:none;
  }
  .nav .nav-cta{
    background:var(--accent) !important; color:#fff !important;
    border-radius:var(--pill) !important; border:0 !important;
    justify-content:center; margin-top:18px; padding:14px !important;
  }
  .site-head:has(.nav.open){ background:var(--paper); }
  .site-head:has(.nav.open) .brand,
  .site-head:has(.nav.open) .nav-toggle{ color:var(--ink); }

  .hero{ min-height:88svh; padding-top:100px; }
  .hero-meta{ font-size:.66rem; gap:5px 20px; }
  .hero-meta-alt{ font-size:.72rem; }

  .facts{ padding:32px 0; }
  .facts-grid{ grid-template-columns:repeat(2,1fr); gap:24px 0; }
  .fact:nth-child(odd){ border-left:0; }

  .bleed-photo{ aspect-ratio:4/3; min-height:0; }

  .rooms-grid{ grid-template-columns:1fr 1fr; gap:18px; }
  .rooms-textonly{ grid-template-columns:1fr; }   /* text cards need the width */
  .room-body h3{ font-size:1.15rem; }
  .room-body > p{ font-size:.84rem; }
  .rooms-textonly .room-body h3{ font-size:1.35rem; }
  .rooms-textonly .room-body > p{ font-size:.9rem; }

  /* Drop the tall/wide spans on phones — with 6 photos in 2 columns they
     leave empty holes in the grid. Equal tiles fill it exactly. */
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:10px; }
  .g-tall{ grid-row:auto; }
  .g-wide{ grid-column:auto; }
  .g-item figcaption{ opacity:1; transform:none; }

  .fab{ display:flex; }
  .site-foot{ padding-bottom:92px; }
}

@media (max-width:560px){
  .gridlines{ background-size:50% 100%; }

  .hero-actions .pill{ flex:1 1 auto; justify-content:center; }
  .hero-tagline{ margin-bottom:22px; }

  .rooms-grid{ grid-template-columns:1fr; }
  .room-photo{ aspect-ratio:4/3; }
  .room-body h3{ font-size:1.4rem; }
  .room-body > p{ font-size:.9rem; }
  .tags{ display:flex; }

  .stats{ grid-template-columns:1fr; gap:0; }
  .stat{
    display:flex; align-items:baseline; justify-content:flex-start; gap:14px;
    text-align:left !important; padding:13px 0; border-left:0; border-top:1px solid var(--line);
  }
  .stat:first-child{ border-top:0; padding-top:0; }
  .stat strong{ font-size:1.7rem; }
  .stat span{ margin-top:0; }

  .field-row{ grid-template-columns:1fr; gap:0; }
  .oyo-band{ align-items:stretch; }
  .oyo-band .btn{ width:100%; }
  .foot-nav{ gap:14px 20px; }
}

/* ---------- Printing ---------- */
@media print{
  .site-head, .fab, .nav-toggle, .contact-map, .enquiry form, .gridlines{ display:none !important; }
  body{ color:#000; }
  .section-dark, .facts{ background:#fff !important; color:#000 !important; }
}