/* ================================================================
   SHARED CSS — Pravakars Hospitality Hotels
   Design system matches index.html (light cream / gold / black)
================================================================ */

/* ---- Reset & Root Variables ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --cream: #FAF6EE;
  --cream-dark: #F2EBD9;
  --cream-mid: #F7F1E4;
  --parchment: #EFE5CC;
  --gold: #B8860B;
  --gold-bright: #D4A017;
  --gold-light: #F0D080;
  --gold-pale: #FAF0D0;
  --gold-deep: #8B6914;
  --black: #0A0804;
  --black-soft: #1A1408;
  --charcoal: #2C2416;
  --ink: #3D3020;
  --text-primary: #1A1408;
  --text-secondary: #4A3C28;
  --text-muted: #8B7355;
  --gold-border: rgba(184, 134, 11, .25);
  --gold-border-strong: rgba(184, 134, 11, .5);
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --site-navy: #0D0D0D;
  --site-gold: #C5A028;
  --site-gold-light: #D4B84A;
  --site-line: rgba(10,10,10,0.10);
  --site-maxw: 1320px;
}

html {
  scroll-behavior: smooth;
  font-size: 17px;
  overflow-x: hidden
}

body {
  background: var(--cream);
  color: var(--text-primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%
}

a {
  text-decoration: none;
  color: inherit
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit
}

em {
  font-style: normal
}

/* ---- Container ---- */
.si {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 64px
}

/* ---- Loader ---- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity .9s var(--ease-luxury), visibility .9s;
  text-align: center;
}

#loader.fade-out, #loader.out {
  opacity: 0;
  visibility: hidden
}

.loader-logo, .loader-mark {
  font-family: 'Marcellus', serif;
  font-size: 2rem;
  letter-spacing: .2em;
  color: var(--gold-bright);
  animation: lp 1.6s ease-in-out infinite alternate
}

.loader-bar-wrap, .loader-line-wrap {
  width: 180px;
  height: 1px;
  background: rgba(212, 160, 23, .18);
  overflow: hidden
}

.loader-bar, .loader-line {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  animation: ll 1.8s ease-in-out forwards
}

.loader-text, .loader-sub {
  font-size: .6rem;
  letter-spacing: .32em;
  color: rgba(212, 160, 23, .55);
  text-transform: uppercase
}

@keyframes lp {
  from {
    opacity: .35;
    transform: scale(.96)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes ll {
  0% {
    width: 0
  }

  100% {
    width: 100%
  }
}

/* ---- Nav Animations ---- */
@keyframes nav-reveal {
  from {
    transform: translateY(-100%);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes nav-link-in {
  from {
    opacity: 0;
    transform: translateY(-8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ---- Nav ---- */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 22px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-100%);
  opacity: 0;
  background: linear-gradient(to bottom, rgba(10, 8, 4, .55) 0%, transparent 100%);
  transition: padding .6s var(--ease-luxury), background .6s, box-shadow .5s
}

#nav.nav-visible, #nav.visible {
  animation: nav-reveal .65s var(--ease-luxury) forwards
}

#nav.scrolled {
  padding: 12px 64px;
  background: var(--black);
  box-shadow: 0 1px 0 var(--gold-border), 0 4px 32px rgba(0, 0, 0, .4)
}

.nav-wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0;
  animation: nav-link-in .5s .3s var(--ease-luxury) forwards
}

.nav-logo-mark {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center
}


.nav-logo-img {
  width: 130px;

  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .12));
}

.nav-logo-svg {
  width: 100%;
  height: 100%;
  display: none
}

.nav-logo-divider, .nav-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, transparent, var(--gold-border-strong), transparent);
  flex-shrink: 0
}

.nav-logo-wordmark, .nav-wordmark {
  display: none;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

.nav-logo-primary, .nav-name {
 font-family: 'Marcellus', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: #f4ca5a;
    text-transform: uppercase;
}


.nav-logo-secondary, .nav-tag {
  font-size: .48rem;
  letter-spacing: .42em;
  color: rgba(250, 246, 238, .9);
  text-transform: uppercase
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px
}

.nav-links a {
  font-size: .9rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 400;
  position: relative;
  padding-bottom: 4px;
  opacity: 0;
  transition: color .3s
}


.nav-links a:nth-child(1) {
  animation: nav-link-in .5s .4s var(--ease-luxury) forwards
}

.nav-links a:nth-child(2) {
  animation: nav-link-in .5s .5s var(--ease-luxury) forwards
}

.nav-links a:nth-child(3) {
  animation: nav-link-in .5s .6s var(--ease-luxury) forwards
}

.nav-links a:nth-child(4) {
  animation: nav-link-in .5s .7s var(--ease-luxury) forwards
}

.nav-links a:nth-child(5) {
  animation: nav-link-in .5s .8s var(--ease-luxury) forwards
}

.nav-links a:nth-child(6) {
  animation: nav-link-in .5s .88s var(--ease-luxury) forwards
}

.nav-links a:nth-child(7) {
  animation: nav-link-in .5s .96s var(--ease-luxury) forwards
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s var(--ease-luxury)
}

.nav-links a:hover {
  color: var(--gold-bright)
}

.nav-links a:hover::after, .nav-links a.nav-active::after, .nav-links a.active::after {
  transform: scaleX(1)
}

.nav-links a.nav-active, .nav-links a.active {
  color: var(--gold-bright);
  opacity: 1
}

.nav-cta {
  position: relative;
  overflow: hidden;
  background: var(--gold-bright);
  color: var(--black);
  padding: 14px 36px;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--gold-bright);
  transition: all .4s var(--ease-luxury);
  opacity: 0;
  animation: nav-link-in .5s .9s var(--ease-luxury) forwards;
  display: inline-block
}

#siteHeader .nav-cta{position:static;overflow:visible;background:none;color:inherit;padding:0;font-size:inherit;letter-spacing:normal;text-transform:none;font-weight:normal;border:none;opacity:1;animation:none;display:flex;align-items:center;gap:22px;}
#siteHeader .nav-cta::before{display:none;}

.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-luxury);
  z-index: 0
}

.nav-cta span {
  position: relative;
  z-index: 1;
  transition: color .45s
}

.nav-cta:hover::before {
  transform: scaleX(1)
}

.nav-cta:hover {
  color: var(--black)
}

.nav-hamburger, .nav-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  opacity: 0;
  animation: nav-link-in .5s .3s var(--ease-luxury) forwards
}

.nav-hamburger span, .nav-ham span {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--cream);
  transition: transform .4s var(--ease-luxury), opacity .3s, width .3s;
  transform-origin: center
}

.nav-hamburger span:nth-child(2), .nav-ham span:nth-child(2) {
  width: 18px
}

.nav-hamburger.open span:nth-child(1), .nav-ham.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  width: 26px
}

.nav-hamburger.open span:nth-child(2), .nav-ham.open span:nth-child(2) {
  opacity: 0
}

.nav-hamburger.open span:nth-child(3), .nav-ham.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  width: 26px
}

#mobile-nav, #mob-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  opacity: 0;
  visibility: hidden;
  transition: all .55s var(--ease-luxury)
}

#mobile-nav.open, #mob-nav.open {
  opacity: 1;
  visibility: visible
}

#mobile-nav a, #mob-nav a {
  font-family: 'Marcellus', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: .06em;
  transition: color .3s
}

#mobile-nav a:hover, #mob-nav a:hover {
  color: var(--gold-bright)
}

#mobile-close, #mob-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .3s;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center
}

#mobile-close:hover, #mob-close:hover {
  color: var(--gold-bright)
}

/* ---- Page Hero ---- */
.page-hero {
  position: relative;
  height: 72vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s var(--ease-luxury)
}

.page-hero:hover .page-hero-bg {
  transform: scale(1.0)
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 4, .9) 0%, rgba(10, 8, 4, .45) 50%, rgba(10, 8, 4, .22) 100%)
}

.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 64px 80px
}

.page-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .6rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 18px
}

.page-hero-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold-bright)
}

.page-hero-title {
  font-family: 'Marcellus', serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--cream);
  max-width: 820px
}

.page-hero-title em {
  color: var(--gold-bright)
}

.page-hero-sub {
  margin-top: 18px;
  font-size: .9rem;
  color: rgba(250, 246, 238, .78);
  max-width: 540px;
  line-height: 1.8
}

/* ---- Section Utilities ---- */
.s-label, .section-label {
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px
}

.s-label::before, .section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold-bright)
}

.s-title, .section-title {
  font-family: 'Marcellus', serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--black)
}

.s-title em, .section-title em {
  color: var(--gold-deep)
}

.gold-rule, .gold-line {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-bright), transparent);
  margin: 20px 0
}

.section-desc {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.9
}

.section-head {
  text-align: left;
  margin: 0 0 64px
}

.section-head .section-label, .section-head .s-label {
  justify-content: flex-start
}

.section-head .gold-rule, .section-head .gold-line {
  margin-left: 0;
  margin-right: auto
}

.section-wrap {
  padding: 100px 64px;
  max-width: 1380px;
  margin: 0 auto
}

/* ---- Buttons ---- */
.btn-primary {
  background: var(--gold-bright);
  color: var(--black);
  padding: 14px 44px;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all .4s var(--ease-luxury);
  position: relative;
  overflow: hidden;
  display: inline-block;
  border: 1px solid var(--gold-bright)
}

.btn-primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  transform: translateY(-1px)
}

.btn-ghost {
  padding: 14px 44px;
  border: 1px solid var(--gold-border-strong);
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: all .4s var(--ease-luxury);
  display: inline-block
}

.btn-ghost:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright)
}

/* ---- CTA Section ---- */
.cta-section {
  background: var(--black);
  padding: 120px 64px;
  text-align: left;
  position: relative;
  overflow: hidden
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 23, .07) 0%, transparent 70%);
  pointer-events: none
}

.cta-title {
  font-family: 'Marcellus', serif;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.cta-title em {
  color: var(--gold-bright)
}

.cta-desc {
  font-size: .88rem;
  color: rgba(250, 246, 238, .7);
  max-width: 500px;
  margin: 0 auto 48px;
  line-height: 1.9;
  position: relative;
  z-index: 1
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1
}

/* ---- Cards ---- */
.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px
}

.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

.luxury-card {
  background: #fff;
  border: 1px solid var(--parchment);
  overflow: hidden;
  transition: transform .5s var(--ease-luxury), box-shadow .5s, border-color .5s
}

.luxury-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(10, 8, 4, .1);
  border-color: var(--gold-border-strong)
}

.luxury-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-luxury)
}

.luxury-card:hover .luxury-card-img {
  transform: scale(1.04)
}

.luxury-card-body {
  padding: 28px 32px
}

/* ---- WhatsApp Float ---- */
#whatsapp-float, #wa {
  position: fixed;
  bottom: 36px;
  right: 36px;
  z-index: 500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 8px 28px rgba(37, 211, 102, .35);
  transition: all .4s var(--ease-luxury);
  animation: wa-float 3s ease-in-out infinite
}

#whatsapp-float:hover, #wa:hover {
  transform: scale(1.12);
  box-shadow: 0 14px 40px rgba(37, 211, 102, .5)
}

@keyframes wa-float {
  0%, 100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-5px)
  }
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease-luxury), transform .9s var(--ease-luxury)
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .9s var(--ease-luxury), transform .9s var(--ease-luxury)
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0)
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .9s var(--ease-luxury), transform .9s var(--ease-luxury)
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0)
}

/* ---- New Footer ---- */
footer {
  background: #0D0B08;
  padding: 72px 0 0
}

.footer-inner, .ft-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 64px
}

.ft-top {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(250, 246, 238, .08)
}

.ft-logo {
  height: 130px;
  width: auto;
  filter: brightness(1.1);
  margin-bottom: 6px
}

.ft-brand {
  font-family: 'Marcellus', serif;
  font-size: 1.05rem;
  letter-spacing: .3em;
  color: var(--gold-bright);
  text-transform: uppercase;
  margin-bottom: 28px;
  display:none;
}

.ft-subscribe-label {
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, .45);
  margin-bottom: 14px
}

.ft-subscribe {
  display: flex;
  gap: 0;
  margin-bottom: 32px
}

.ft-subscribe input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(250, 246, 238, .25);
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  padding: 10px 0;
  outline: none;
  transition: border-color .3s
}

.ft-subscribe input::placeholder {
  color: rgba(250, 246, 238, .3)
}

.ft-subscribe input:focus {
  border-color: var(--gold-bright)
}

.ft-subscribe button {
  background: var(--gold-bright);
  color: var(--black);
  border: none;
  padding: 10px 22px;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background .3s;
  flex-shrink: 0
}

.ft-subscribe button:hover {
  background: var(--gold-deep)
}

.ft-contact-block {
  margin-bottom: 20px
}

.ft-contact-label {
  font-size: .52rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, .38);
  margin-bottom: 6px
}

.ft-contact-val {
  font-size: .85rem;
  color: rgba(250, 246, 238, .8);
  line-height: 1.6
}

.ft-contact-val a {
  color: rgba(250, 246, 238, .8);
  transition: color .3s
}

.ft-contact-val a:hover {
  color: var(--gold-bright)
}

.ft-col-title, .footer-col-title {
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, .38);
  margin-bottom: 22px
}

.ft-links, .footer-links {
  display: flex;
  flex-direction: column;
  gap: 13px
}

.ft-links a, .footer-links a {
  font-size: .88rem;
  color: rgba(250, 246, 238, .7);
  transition: color .3s;
  letter-spacing: .02em
}

.ft-links a:hover, .footer-links a:hover {
  color: var(--gold-bright)
}

.ft-social-icons {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.ft-soc {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(250, 246, 238, .65);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s;
  cursor: pointer
}

.ft-soc svg {
  flex-shrink: 0;
  color: rgba(250, 246, 238, .4);
  transition: color .3s
}

.ft-soc:hover {
  color: var(--gold-bright)
}

.ft-soc:hover svg {
  color: var(--gold-bright)
}

.ft-hotels-row {
  border-bottom: 1px solid rgba(250, 246, 238, .08);
  padding: 22px 0
}

.ft-hotels-label {
  font-size: .55rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, .35);
  margin-bottom: 14px
}

.ft-hotels-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0
}

.ft-hotels-list a {
  font-size: .78rem;
  color: rgba(250, 246, 238, .55);
  transition: color .3s;
  padding-right: 20px;
  position: relative
}

.ft-hotels-list a::after {
  content: '·';
  position: absolute;
  right: 8px;
  color: rgba(250, 246, 238, .2)
}

.ft-hotels-list a:last-child::after {
  display: none
}

.ft-hotels-list a:hover {
  color: var(--gold-bright)
}

.ft-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 0
}

.ft-copy, .footer-copy {
  font-size: .75rem;
  color: rgba(250, 246, 238, .35);
  letter-spacing: .04em
}

.ft-bottom-links, .footer-bottom-links {
  display: flex;
  gap: 0
}

.ft-bottom-links a, .footer-bottom-links a {
  font-size: .72rem;
  color: rgba(250, 246, 238, .4);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .3s;
  padding: 0 18px;
  border-right: 1px solid rgba(250, 246, 238, .12)
}

.ft-bottom-links a:last-child, .footer-bottom-links a:last-child {
  border-right: none
}

.ft-bottom-links a:hover, .footer-bottom-links a:hover {
  color: var(--gold-bright)
}

/* ---- Responsive ---- */
@media(max-width:1200px) {
  .si, .footer-inner, .ft-inner {
    padding: 0 40px
  }

  #nav, #nav.scrolled {
    padding-left: 40px;
    padding-right: 40px
  }

  .page-hero-content {
    padding: 0 40px 60px
  }

  .section-wrap {
    padding: 80px 40px
  }

  .cta-section {
    padding: 100px 40px
  }

  .ft-top {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px
  }
}

@media(max-width:1024px) {
  .nav-hamburger, .nav-ham {
    display: flex
  }

  .nav-links, .nav-cta {
    display: none
  }

  #nav, #nav.scrolled {
    padding-left: 24px;
    padding-right: 24px
  }
}

@media(max-width:768px) {
  .si, .footer-inner, .ft-inner {
    padding: 0 20px
  }

  .page-hero-content {
    padding: 0 24px 52px
  }

  .section-wrap {
    padding: 64px 20px
  }

  .card-grid-2, .card-grid-3, .card-grid-4 {
    grid-template-columns: 1fr
  }

  .cta-section {
    padding: 80px 20px
  }

  .ft-top {
    grid-template-columns: 1fr;
    gap: 24px
  }

  footer {
    padding: 40px 0 0
  }

  .ft-logo {
    height: 72px
  }

  .ft-top {
    padding-bottom: 32px
  }

  .ft-subscribe {
    margin-bottom: 20px
  }

  .ft-contact-block {
    margin-bottom: 12px
  }

  .ft-hotels-row {
    display: none
  }

  .ft-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 0
  }

  .ft-bottom-links {
    flex-wrap: wrap;
    gap: 0
  }

  .ft-bottom-links a {
    font-size: .65rem;
    padding: 4px 12px
  }

  .ft-copy {
    font-size: .68rem
  }
}

@media(max-width:480px) {
  .nav-logo-img {
    width: 100px
  }

  .nav-logo-mark {
    width: 56px;
    height: 56px
  }

  .nav-logo-secondary, .nav-tag {
    display: none
  }

  .page-hero-title, .page-hero-title {
    font-size: 2.4rem
  }
}

/* =====================================================================
   Merged from our-hotels.html inline <style> (hotels grid / filter bar)
   ===================================================================== */
.hotels-hero{position:relative;height:80vh;min-height:580px;overflow:hidden;display:flex;align-items:flex-end}
.hotels-hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s var(--ease-luxury);transform:scale(1.08);transition:opacity 1.6s var(--ease-luxury),transform 9s linear}
.hotels-hero-slide.active{opacity:1;transform:scale(1.02)}
.hotels-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,15,0.96) 0%,rgba(8,9,15,0.45) 55%,rgba(8,9,15,0.2) 100%)}
.page-hero .page-hero-overlay{background:linear-gradient(to top,rgba(8,9,15,0.92) 0%,rgba(8,9,15,0.35) 55%,rgba(8,9,15,0) 100%) !important;}
.hotels-hero-content{position:relative;z-index:2;padding:0 60px 80px;width:100%}
.filter-bar{background:#ffffff;border-bottom:1px solid rgba(184,134,11,.2);padding:24px 60px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:100;backdrop-filter:blur(20px)}
.filter-bar-label{font-size:0.62rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold-bright);white-space:nowrap}
.filter-pill{padding:8px 22px;border-radius:100px;border:1px solid rgba(184,134,11,.25);font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);transition:all 0.3s var(--ease-luxury);background:transparent}
.filter-pill:hover,.filter-pill.active{background:rgba(184,134,11,.12);border-color:var(--gold-bright);color:var(--gold-bright)}
.filter-count{margin-left:auto;font-size:0.72rem;color:var(--text-muted)}
.hotels-grid-section{padding:80px 60px 120px;max-width:1400px;margin:0 auto}
.hotels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.hotel-card{background:#ffffff;border:1px solid rgba(184,134,11,.2);border-radius:4px;overflow:hidden;transition:transform 0.6s var(--ease-luxury),box-shadow 0.6s var(--ease-luxury),border-color 0.5s;display:flex;flex-direction:column}
.hotel-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(10,8,4,.12);border-color:rgba(184,134,11,.4)}
.hotel-card-img-wrap{position:relative;overflow:hidden;aspect-ratio:4/3}
.hotel-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease-luxury)}
.hotel-card:hover .hotel-card-img{transform:scale(1.07)}
.hotel-card-badge{position:absolute;top:16px;left:16px;padding:5px 14px;background:rgba(212,175,55,0.9);color:var(--black);font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;border-radius:2px}
.hotel-card-rating{display:inline-flex;align-items:center;gap:6px;background:var(--gold-pale);border:1px solid var(--gold-border);padding:5px 10px;border-radius:4px;margin-bottom:12px;}
.hotel-card-rating-star{color:var(--gold-bright);font-size:0.75rem}
.hotel-card-rating-num{font-size:0.72rem;color:var(--black);font-weight:500}
.hotel-card-city{position:absolute;bottom:0;left:0;right:0;padding:8px 16px;background:linear-gradient(to top,rgba(8,9,15,0.9),transparent);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-bright)}
.hotel-card-body{padding:28px 28px 24px;flex:1;display:flex;flex-direction:column}
.hotel-card-eyebrow{font-size:0.58rem;letter-spacing:0.3em;text-transform:uppercase;color:rgba(184,134,11,.7);margin-bottom:8px}
.hotel-card-name{font-family:'Marcellus',serif;font-size:1.55rem;font-weight:400;color:var(--black);line-height:1.2;margin-bottom:6px}
.hotel-card-tagline{font-size:0.78rem;color:var(--text-muted);margin-bottom:16px;line-height:1.5}
.hotel-card-desc{font-size:0.8rem;color:var(--text-secondary);line-height:1.8;margin-bottom:20px;flex:1}
.hotel-card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.hotel-chip{padding:4px 12px;border:1px solid rgba(184,134,11,.2);border-radius:100px;font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}
.hotel-card-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(184,134,11,.2);padding-top:18px}
.hotel-card-price{display:flex;flex-direction:column}
.hotel-card-price-lbl{font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted)}
.hotel-card-price-num{font-family:'Marcellus',serif;font-size:1.35rem;color:var(--gold-bright);font-weight:400}
.hotel-card-price-unit{font-size:0.65rem;color:var(--text-muted);font-family:'Poppins',sans-serif}
.hotel-card-name-link{text-decoration:none}
.hotel-card-name-link:hover .hotel-card-name{color:var(--gold-bright)}
.hotel-card-name-link .hotel-card-name{transition:color 0.25s}
.hotel-card-actions{display:flex;align-items:center;gap:12px}
.hotel-card-details{font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-bright);text-decoration:none;font-weight:500;transition:opacity 0.25s;white-space:nowrap}
.hotel-card-details:hover{opacity:0.7}
.hotel-card-cta{padding:10px 22px;background:linear-gradient(135deg,var(--gold-bright),#B8962E);color:var(--black);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;border-radius:2px;transition:all 0.4s var(--ease-luxury)}
.hotel-card-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(184,134,11,.35)}
@media(max-width:1200px){ .hotels-grid{grid-template-columns:repeat(2,1fr)} .hotels-hero-content,.hotels-grid-section,.filter-bar{padding-left:40px;padding-right:40px} }
@media(max-width:768px){ .hotels-hero-content{padding:0 24px 48px} .hotels-grid-section{padding:60px 24px 80px} .filter-bar{padding:18px 24px} .hotels-grid{grid-template-columns:1fr} }
@media(max-width:768px){ #siteHeader nav.primary-nav{display:none;} #siteHeader .burger{display:flex;} #siteHeader .logo-block img{height:52px;} #siteHeader.scrolled .logo-block img{height:44px;} #siteHeader .nav-cta .btn{padding:9px 16px;font-size:10px;} #siteHeader .header-inner,#siteHeader .mega-inner{padding:0 22px;} #siteHeader .mega-grid{grid-template-columns:repeat(2,1fr);} #siteHeader .mega-panel{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:none;padding:20px 0;} #siteHeader .has-mega.is-open .mega-panel{display:block;} #siteHeader .nav-list{flex-direction:column;gap:0;width:100%;} #siteHeader .nav-list>li{width:100%;} #siteHeader .nav-list>li>a{color:var(--site-navy);display:block;padding:14px 0;border-bottom:1px solid var(--site-line);} }
#siteFooter{background:var(--site-navy);color:rgba(244,241,230,.85);padding:80px 0 30px;position:relative;}
#siteFooter .wrap{max-width:var(--site-maxw);margin:0 auto;padding:0 40px;}
#siteFooter .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;padding-bottom:60px;border-bottom:1px solid rgba(244,241,230,.12);}
#siteFooter .footer-top>*{min-width:0;}
#siteFooter .logo-block img{height:60px;width:auto;}
#siteFooter .footer-brand p{margin-top:20px;font-size:15px;line-height:1.8;max-width:280px;color:rgba(244,241,230,.72);font-family:'Lato',sans-serif;}
#siteFooter .footer-social{display:flex;gap:12px;margin-top:24px;}
#siteFooter .footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--site-gold);background:var(--site-gold);display:flex;align-items:center;justify-content:center;color:var(--site-navy);transition:border-color .35s ease, color .35s ease, background .35s ease;}
#siteFooter .footer-social a:hover{border-color:var(--site-gold-light);color:var(--site-navy);background:var(--site-gold-light);}
#siteFooter .footer-social svg{width:16px;height:16px;}
#siteFooter .footer-col h5{font-family:'Cinzel','Palatino Linotype',sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:.16em;color:var(--site-gold);margin-bottom:22px;font-weight:500;}
#siteFooter .footer-col ul{list-style:none;}
#siteFooter .footer-col li{margin-bottom:14px;font-size:15px;font-family:'Lato',sans-serif;}
#siteFooter .footer-col a{color:rgba(244,241,230,.82);overflow-wrap:break-word;text-decoration:none;}
#siteFooter .footer-col a:hover{color:var(--site-gold-light);}
#siteFooter .footer-bottom{display:flex;justify-content:space-between;padding-top:28px;font-size:13px;color:rgba(244,241,230,.55);font-family:'Lato',sans-serif;flex-wrap:wrap;gap:14px;}
#siteFooter .wavy-divider{position:absolute;left:0;right:0;bottom:0;width:100%;height:34px;z-index:2;pointer-events:none;line-height:0;}
#siteFooter .wavy-divider.wavy-top{top:0;bottom:auto;}
#siteFooter .wavy-divider svg{width:100%;height:100%;display:block;}
#siteFooter .wavy-divider path{fill:none;stroke:#D8BD8A;stroke-width:1.4;opacity:0.6;}
@media(max-width:768px){ #siteFooter .footer-top{grid-template-columns:1fr 1fr;} #siteFooter .wrap{padding:0 22px;} }