/* ==========================================================
   HOTEL RANN OF KUTCH DHOLAVIRA
   style.css
   Design: Ajrakh block-print palette — indigo, madder, salt.
   ========================================================== */

:root{
  --indigo:      #16324F;
  --indigo-deep: #0D2033;
  --indigo-soft: #24507A;
  --madder:      #A63A2A;
  --madder-soft: #C4543F;
  --salt:        #F6F4EF;
  --salt-deep:   #E9E4D9;
  --sand:        #C9B79C;
  --ink:         #14181F;
  --muted:       #667082;
  --white:       #FFFFFF;

  --shell: 1180px;
  --gap: 24px;
  --r: 4px;

  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

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

  --ajrakh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23A63A2A' stroke-width='1'%3E%3Cpath d='M20 5 35 20 20 35 5 20Z'/%3E%3Cpath d='M20 13 27 20 20 27 13 20Z'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='1.8' fill='%2316324F'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16.5px;
  line-height:1.7;
  color:var(--ink);
  background:var(--salt);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.015em}
p{margin:0 0 1em}
address{font-style:normal}

.wrap{width:min(100% - 40px, var(--shell));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--white);padding:10px 16px;border-radius:var(--r)}
:focus-visible{outline:2px solid var(--madder);outline-offset:3px}

/* ---------- Type scale ---------- */
.eyebrow{
  font-family:var(--ff-body);
  font-size:11.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--madder);display:block;margin-bottom:14px;
}
.eyebrow--light{color:var(--sand)}
.lede{font-size:19px;color:#3A4351;max-width:62ch}
.h-xl{font-size:clamp(38px,6.4vw,74px)}
.h-lg{font-size:clamp(30px,4.4vw,48px)}
.h-md{font-size:clamp(23px,2.6vw,30px)}

/* ---------- Ajrakh rule (signature) ---------- */
.ajrakh-rule{
  height:40px;
  background-image:var(--ajrakh);
  background-repeat:repeat-x;
  background-position:center;
  opacity:.5;
}
.ajrakh-rule--tight{height:40px;margin:0 auto 34px;max-width:220px;opacity:.65}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-body);font-weight:700;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 26px;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;transition:.25s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn--solid{background:var(--madder);color:var(--white)}
.btn--solid:hover{background:var(--madder-soft)}
.btn--ink{background:var(--indigo);color:var(--white)}
.btn--ink:hover{background:var(--indigo-soft)}
.btn--ghost{border-color:currentColor;color:var(--indigo)}
.btn--ghost:hover{background:var(--indigo);color:var(--white);border-color:var(--indigo)}
.btn--onDark{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn--onDark:hover{background:var(--white);color:var(--indigo);border-color:var(--white)}

/* ---------- Header ---------- */
.site-head{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.brand-img{height:52px;width:auto;transition:.3s var(--ease)}
.brand-img--dark{display:none}
.site-head.is-stuck{background:var(--indigo-deep);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.site-head.is-stuck .brand-img{height:42px}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:13.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--white);position:relative;padding:6px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--madder-soft);transition:width .28s var(--ease);
}
.nav a:hover::after,.nav a.is-current::after{width:100%}
.nav-call{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r);
  padding:10px 16px !important;letter-spacing:.04em !important;text-transform:none !important;
  font-size:14px !important;
}
.nav-call::after{display:none}
.nav-call:hover{background:var(--white);color:var(--indigo);border-color:var(--white)}
.nav-call svg{width:16px;height:16px}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:var(--white);margin:5px 0;transition:.28s var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Inner pages: header sits on a solid band */
body:not(.page-home) .site-head{background:var(--indigo-deep)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;color:var(--white);overflow:hidden}
.hero-slides{position:absolute;inset:0}
.hero-slides li{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);list-style:none}
.hero-slides li.is-on{opacity:1}
.hero-slides img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,32,51,.72) 0%,rgba(13,32,51,.28) 38%,rgba(13,32,51,.9) 100%);
}
.hero-body{position:relative;z-index:2;padding:150px 0 46px}
.hero h1{max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-sub{max-width:48ch;font-size:18px;color:rgba(255,255,255,.9);margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ---------- Rate card (signature) ---------- */
.rate-band{background:var(--indigo-deep);color:var(--white);position:relative}
.rate-card{
  display:grid;grid-template-columns:auto 1px 1fr auto;align-items:center;gap:34px;
  padding:34px 0;
}
.rate-price{display:flex;flex-direction:column}
.rate-price b{font-family:var(--ff-display);font-size:52px;font-weight:700;line-height:1}
.rate-price small{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-top:8px}
.rate-div{background:rgba(255,255,255,.2);align-self:stretch}
.rate-what h3{font-size:20px;margin-bottom:6px}
.rate-what p{margin:0;color:rgba(255,255,255,.75);font-size:15px}
.rate-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rate-tags span{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,255,255,.3);padding:5px 11px;border-radius:100px;color:var(--sand);
}

/* ---------- Sections ---------- */
.sec{padding:96px 0}
.sec--salt{background:var(--salt)}
.sec--white{background:var(--white)}
.sec--indigo{background:var(--indigo);color:var(--white)}
.sec--indigo .lede{color:rgba(255,255,255,.82)}
.sec-head{max-width:64ch;margin-bottom:52px}
.sec-head--center{margin-inline:auto;text-align:center}

/* ---------- Intro split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split-media{position:relative}
.split-media img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
.split-media::before{
  content:"";position:absolute;inset:auto -16px -16px auto;width:56%;height:56%;
  background-image:var(--ajrakh);opacity:.4;z-index:-1;border-radius:var(--r);
}
.stat-row{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap}
.stat b{font-family:var(--ff-display);font-size:30px;display:block;color:var(--madder);line-height:1.1}
.stat span{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ---------- Room cards ---------- */
.rooms{display:grid;gap:34px}
.room{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  background:var(--white);border:1px solid var(--salt-deep);border-radius:var(--r);overflow:hidden;
}
.room-media{position:relative;min-height:340px}
.room-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-thumbs{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;z-index:2}
.room-thumbs button{
  width:52px;height:38px;padding:0;border:2px solid rgba(255,255,255,.6);border-radius:2px;
  overflow:hidden;cursor:pointer;background:none;opacity:.7;transition:.22s var(--ease);
}
.room-thumbs button.is-on{opacity:1;border-color:var(--white)}
.room-thumbs img{width:100%;height:100%;object-fit:cover;position:static}
.room-body{padding:38px 40px}
.room-body h3{font-size:27px;margin-bottom:10px}
.room-plan{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--madder);background:rgba(166,58,42,.08);padding:6px 12px;border-radius:100px;margin-bottom:18px;
}
.room-price{display:flex;align-items:baseline;gap:10px;margin:20px 0 6px}
.room-price b{font-family:var(--ff-display);font-size:38px;color:var(--indigo);line-height:1}
.room-price span{font-size:13.5px;color:var(--muted)}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin:22px 0 26px;padding:0;list-style:none}
.amen li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:#3A4351}
.amen svg{width:15px;height:15px;color:var(--madder);flex:none;margin-top:5px}
.room-cta{display:flex;gap:12px;flex-wrap:wrap}
.policy{
  margin-top:34px;padding:24px 28px;border-left:3px solid var(--madder);
  background:var(--white);border-radius:0 var(--r) var(--r) 0;
}
.policy p{margin:0 0 8px;font-size:14.5px;color:#3A4351}
.policy p:last-child{margin:0}

/* ---------- Facilities ---------- */
.fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16)}
.fac{background:var(--indigo);padding:38px 32px}
.fac svg{width:28px;height:28px;color:var(--sand);margin-bottom:18px}
.fac h3{font-size:19px;margin-bottom:8px}
.fac p{font-size:14.5px;color:rgba(255,255,255,.72);margin:0}

/* ---------- Attractions ---------- */
.attr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.attr{background:var(--white);border-radius:var(--r);overflow:hidden;border:1px solid var(--salt-deep);transition:.3s var(--ease)}
.attr:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(20,24,31,.09)}
.attr img{aspect-ratio:4/3;object-fit:cover;width:100%}
.attr-body{padding:22px 22px 26px}
.attr-dist{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--madder)}
.attr h3{font-size:19px;margin:8px 0 10px}
.attr p{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.gal img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.gal a:nth-child(1),.gal a:nth-child(6){grid-row:span 2;grid-column:span 2}
.gal a{overflow:hidden;border-radius:var(--r)}
.gal a img{transition:transform .55s var(--ease)}
.gal a:hover img{transform:scale(1.05)}

/* ---------- Enquiry form ---------- */
.enq{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--ff-body);font-size:15.5px;color:var(--ink);
  padding:13px 15px;border:1px solid var(--salt-deep);border-radius:var(--r);
  background:var(--white);transition:.2s var(--ease);width:100%;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--indigo);outline:none;box-shadow:0 0 0 3px rgba(22,50,79,.1)}
.form-note{font-size:13.5px;color:var(--muted);margin-top:16px}
.hp{position:absolute;left:-9999px}

.flash{padding:16px 20px;border-radius:var(--r);margin-bottom:24px;font-size:15px}
.flash--ok{background:#E7F2EA;border-left:3px solid #2E7D46;color:#1E5230}
.flash--err{background:#FBEAE7;border-left:3px solid var(--madder);color:#7A2A1E}

/* ---------- Contact blocks ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:52px}
.c-card{background:var(--white);border:1px solid var(--salt-deep);border-radius:var(--r);padding:30px}
.c-card svg{width:24px;height:24px;color:var(--madder);margin-bottom:14px}
.c-card h3{font-size:18px;margin-bottom:8px}
.c-card a,.c-card address{font-size:15px;color:#3A4351;display:block}
.c-card a:hover{color:var(--madder)}
.map-frame{border:0;width:100%;height:420px;border-radius:var(--r);display:block;filter:grayscale(.25)}

/* ---------- Page banner (inner pages) ---------- */
.banner{position:relative;color:var(--white);padding:190px 0 76px;background:var(--indigo-deep);overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.banner .wrap{position:relative;z-index:2}
.banner p{max-width:58ch;color:rgba(255,255,255,.82);margin:16px 0 0}

/* ---------- Footer ---------- */
.site-foot{background:var(--indigo-deep);color:rgba(255,255,255,.8);font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:46px;padding:60px 0 46px}
.foot-logo{height:56px;margin-bottom:20px}
.foot-brand p{margin:0 0 10px;max-width:34ch}
.foot-note{font-size:14px;color:rgba(255,255,255,.55)}
.foot-col h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);margin-bottom:18px;font-family:var(--ff-body);font-weight:700}
.foot-col a,.foot-col address{display:block;margin-bottom:10px;transition:.2s var(--ease)}
.foot-col a:hover{color:var(--madder-soft)}
.foot-rate strong{font-family:var(--ff-display);font-size:36px;color:var(--white);display:block;line-height:1}
.foot-rate-note{display:block;font-size:13.5px;color:rgba(255,255,255,.6);margin:8px 0 20px}
.foot-base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:rgba(255,255,255,.5);
}
.credit a{color:var(--sand);border-bottom:1px solid rgba(201,183,156,.35);transition:.2s var(--ease)}
.credit a:hover{color:var(--madder-soft);border-bottom-color:var(--madder-soft)}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:var(--white);
  display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.24);transition:.25s var(--ease);
}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:scale(1.07)}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1024px){
  .split{grid-template-columns:1fr;gap:40px}
  .attr-grid{grid-template-columns:repeat(2,1fr)}
  .fac-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .rate-card{grid-template-columns:1fr;gap:22px}
  .rate-div{display:none}
  .enq{grid-template-columns:1fr;gap:38px}
}

@media (max-width:860px){
  .burger{display:block}
  .nav{
    position:fixed;inset:0;background:var(--indigo-deep);
    flex-direction:column;justify-content:center;gap:26px;
    transform:translateX(100%);transition:transform .4s var(--ease);
  }
  .nav.is-open{transform:none}
  .nav a{font-size:22px;font-family:var(--ff-display);text-transform:none;letter-spacing:0}
  .nav-call{font-size:16px !important;margin-top:10px}
  .room{grid-template-columns:1fr}
  .room-media{min-height:250px}
  .room-body{padding:30px 26px}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gal a:nth-child(1),.gal a:nth-child(6){grid-row:span 1;grid-column:span 2}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  body{font-size:16px}
  .sec{padding:66px 0}
  .hero-body{padding:130px 0 40px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .rate-price b{font-size:42px}
  .amen{grid-template-columns:1fr}
  .attr-grid{grid-template-columns:1fr}
  .fac-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;padding:46px 0 34px}
  .banner{padding:150px 0 56px}
  .split-media::before{display:none}
}

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