/* ═══════════════════════════════════════════════════════
   TOKENS & RESET
═══════════════════════════════════════════════════════ */
:root {
  --rose:      #C5543A;
  --gold:      #B8922A;
  --gold-lt:   #D4A83A;
  --ivory:     #F6EFE3;
  --blush:     #EDD9C4;
  --charcoal:  #1E1A17;
  --mid:       #6B5B4E;
  --light:     #F9F5EF;
  --white:     #FFFFFF;
  --green-wa:  #25D366;
  --serif:     'Cormorant Garamond', Georgia, serif;
  --sans:      'Jost', system-ui, sans-serif;
  --ease:      cubic-bezier(.25,.8,.25,1);
  --hdr:       72px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--light); color: var(--charcoal); line-height: 1.6; overflow-x: hidden; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { font-family: var(--sans); cursor: pointer; }
 
/* ─── UTILITY ─────────────────────────────────────── */
.eyebrow { font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.section-title { font-family: var(--serif); font-size: clamp(2rem,4vw,3.2rem); font-weight: 300; line-height: 1.15; }
.section-title em { font-style: italic; color: var(--rose); }
.divider { width: 48px; height: 2px; background: var(--gold); margin: .9rem 0 1.6rem; }
.divider.center { margin-left: auto; margin-right: auto; }
.btn-rose { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 2rem; background: var(--rose); color: var(--white); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: none; transition: background .2s, transform .2s; }
.btn-rose:hover { background: #a8432b; transform: translateY(-2px); }
.btn-gold-outline { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 2rem; border: 1px solid rgba(184,146,42,.6); color: var(--gold); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; background: none; transition: background .2s, border-color .2s; }
.btn-gold-outline:hover { background: rgba(184,146,42,.1); border-color: var(--gold); }
 
/* ═══════════════════════════════════════════════════════
   PAGE SYSTEM (Home ↔ Rooms Results)
═══════════════════════════════════════════════════════ */
#page-home, #page-rooms {
  position: fixed; inset: 0; overflow-y: auto;
  transition: transform .55s var(--ease), opacity .45s var(--ease);
  will-change: transform, opacity; background: var(--light);
}
#page-home  { z-index: 1; }
#page-rooms { z-index: 2; transform: translateX(100%); opacity: 0; pointer-events: none; }
#page-rooms.active  { transform: translateX(0); opacity: 1; pointer-events: all; }
#page-home.slide-out { transform: translateX(-6%); opacity: .35; pointer-events: none; }
 
/* ═══════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4vw;
  background: rgba(20,15,12,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(184,146,42,.2);
  transition: background .3s;
}
.logo-wrap { display: flex; align-items: center; gap: .85rem; cursor: pointer; }
.logo-img { width: 150px; height: 70px; width: auto; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; gap: 1px; }
.logo-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--ivory); letter-spacing: .04em; line-height: 1.15; }
.logo-sub  { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.main-nav  { display: flex; align-items: center; gap: 2rem; }
.main-nav a { font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(246,239,227,.75); transition: color .2s; }
.main-nav a:hover { color: var(--gold); }
.nav-book { padding: .45rem 1.3rem !important; border: 1px solid var(--gold); color: var(--gold) !important; transition: background .2s, color .2s !important; }
.nav-book:hover { background: var(--gold); color: var(--charcoal) !important; }
/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--ivory); transition: transform .3s, opacity .3s; }
/* Mobile nav */
.mobile-nav {
  display: none; position: fixed; top: var(--hdr); left: 0; right: 0; z-index: 290;
  background: rgba(20,15,12,.97); backdrop-filter: blur(20px);
  padding: 1.5rem 6vw 2rem; flex-direction: column; gap: 1rem;
  border-bottom: 1px solid rgba(184,146,42,.2);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(246,239,227,.8); padding: .6rem 0; border-bottom: 1px solid rgba(184,146,42,.1); }
.mobile-nav a:last-child { border-bottom: none; }
 
/* ═══════════════════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════════════════ */
#hero { position: relative; height: 100dvh; min-height: 560px; overflow: hidden; }
.slider-track {
  position: absolute; inset: 0;
  display: flex; transition: transform .8s var(--ease);
}
.slide {
  min-width: 100%; height: 100%; position: relative; flex-shrink: 0;
}
.slide img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 8s linear;
}
.slide.active img { transform: scale(1.06); }
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(17,10,6,.82) 0%, rgba(17,10,6,.38) 65%, rgba(17,10,6,.1) 100%);
}
/* Hero content */
.hero-content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 8vw; padding-top: var(--hdr);
  max-width: 800px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .7rem;
  background: rgba(184,146,42,.15); border: 1px solid rgba(184,146,42,.35);
  padding: .4rem 1rem; margin-bottom: 1.4rem; width: fit-content;
}
.hero-badge span { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hero-title {
  font-family: var(--serif); font-size: clamp(2.6rem,6vw,5.2rem);
  font-weight: 300; color: var(--ivory); line-height: 1.1; margin-bottom: .4rem;
}
.hero-title em { font-style: italic; color: var(--gold-lt); }
.hero-sub  { font-family: var(--serif); font-size: clamp(1.1rem,2vw,1.6rem); color: rgba(246,239,227,.7); font-weight: 300; letter-spacing: .04em; margin-bottom: 1rem; }
.hero-desc { font-size: .9rem; color: rgba(246,239,227,.6); max-width: 440px; line-height: 1.8; margin-bottom: 2rem; }
.hero-cta  { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Slider controls */
.slider-btn {
  position: absolute; top: 50%; z-index: 6;
  transform: translateY(-50%);
  background: rgba(20,15,12,.5); border: 1px solid rgba(184,146,42,.3);
  color: var(--gold); width: 48px; height: 48px;
  font-size: 1.1rem; backdrop-filter: blur(4px);
  transition: background .2s, border-color .2s;
}
.slider-btn:hover { background: rgba(184,146,42,.2); border-color: var(--gold); }
.slider-prev { left: 2vw; }
.slider-next { right: 2vw; }
/* Dots */
.slider-dots {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 6; display: flex; gap: .55rem;
}
.dot {
  width: 28px; height: 3px; background: rgba(246,239,227,.35);
  transition: background .3s, width .3s; cursor: pointer; border: none;
}
.dot.active { background: var(--gold); width: 42px; }
/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 2rem; right: 5vw; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(246,239,227,.35); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
}
.scroll-hint::after { content: ''; width: 1px; height: 44px; background: linear-gradient(to bottom, rgba(184,146,42,.6), transparent); animation: dropLine 2s ease-in-out infinite; }
@keyframes dropLine { 0%,100%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1)} }
 
/* ═══════════════════════════════════════════════════════
   CHECK AVAILABILITY BAR
═══════════════════════════════════════════════════════ */
#availability { position: relative; z-index: 10; margin-top: -60px; padding: 0 5vw; }
.avail-card {
  background: var(--white); border-top: 3px solid var(--gold);
  box-shadow: 0 10px 48px rgba(17,10,6,.18);
  padding: 1.8rem 2.2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1.2rem; align-items: end;
}
.avail-field { display: flex; flex-direction: column; gap: .3rem; }
.avail-label { font-size: .62rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.avail-input { border: none; border-bottom: 1.5px solid var(--blush); padding: .5rem 0; font-family: var(--serif); font-size: 1rem; color: var(--charcoal); background: transparent; outline: none; transition: border-color .2s; width: 100%; }
.avail-input:focus { border-color: var(--rose); }
.avail-btn { padding: .9rem 2rem; background: var(--rose); color: var(--white); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: none; white-space: nowrap; transition: background .2s; }
.avail-btn:hover { background: #a8432b; }
.avail-error { color: var(--rose); font-size: .74rem; margin-top: .5rem; display: none; padding: 0 .2rem; }
 
/* ═══════════════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════════════ */
#about { padding: 7rem 5vw; max-width: 1300px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-img-wrap { position: relative; }
.about-main-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about-accent-box {
  position: absolute; bottom: -2rem; right: -2rem;
  width: 46%; background: var(--rose);
  padding: 1.8rem 1.2rem; color: var(--white);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  box-shadow: 0 6px 28px rgba(197,84,58,.35);
}
.acc-num   { font-family: var(--serif); font-size: 3rem; font-weight: 300; line-height: 1; }
.acc-label { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; text-align: center; }
.about-frame { position: absolute; inset: 16px; border: 1px solid rgba(184,146,42,.35); pointer-events: none; }
.about-text p { font-size: .9rem; color: var(--mid); line-height: 1.88; margin-bottom: 1.2rem; }
.about-stats { display: flex; gap: 2.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--blush); flex-wrap: wrap; }
.stat-item { display: flex; flex-direction: column; gap: .25rem; }
.stat-num   { font-family: var(--serif); font-size: 2.2rem; font-weight: 300; color: var(--rose); line-height: 1; }
.stat-label { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
 
/* ═══════════════════════════════════════════════════════
   ROOMS SECTION (homepage teaser)
═══════════════════════════════════════════════════════ */
#rooms { background: var(--charcoal); padding: 7rem 5vw; }
.rooms-intro { text-align: center; max-width: 560px; margin: 0 auto 4rem; }
.rooms-intro .section-title { color: var(--ivory); }
.rooms-intro p { color: rgba(246,239,227,.5); font-size: .88rem; line-height: 1.75; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3px; max-width: 1200px; margin: auto; }
.room-card { position: relative; overflow: hidden; cursor: pointer; }
.room-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.room-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.room-card:hover .room-img-wrap img { transform: scale(1.06); }
.room-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,10,6,.9) 0%, rgba(17,10,6,.1) 60%); }
.room-tag { position: absolute; top: 1rem; left: 1rem; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); background: rgba(17,10,6,.65); padding: .3rem .75rem; backdrop-filter: blur(4px); border: 1px solid rgba(184,146,42,.25); }
.room-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.8rem 1.8rem; }
.room-name { font-family: var(--serif); font-size: 1.6rem; font-weight: 300; color: var(--ivory); margin-bottom: .4rem; }
.room-amenities { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-bottom: 1rem; }
.room-am { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(246,239,227,.5); }
.room-am::before { content: '✦ '; color: var(--gold); font-size: .45rem; }
.room-footer { display: flex; align-items: center; justify-content: space-between; }
.room-price { color: var(--gold); font-size: .8rem; }
.room-price strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; }
.room-book-btn { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(184,146,42,.4); padding-bottom: 2px; background: none; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid rgba(184,146,42,.4); transition: border-color .2s; }
.room-book-btn:hover { border-color: var(--gold); }
 
/* ═══════════════════════════════════════════════════════
   NEARBY ATTRACTIONS
═══════════════════════════════════════════════════════ */
#attractions { padding: 7rem 5vw; max-width: 1300px; margin: auto; }
.attr-head { margin-bottom: 3.5rem; }
.attr-head p { max-width: 520px; font-size: .88rem; color: var(--mid); line-height: 1.75; margin-top: .8rem; }
.attr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; }
.attr-cell {
  background: var(--white); padding: 1.6rem 1.4rem;
  border-bottom: 2px solid transparent; transition: border-color .2s, transform .2s;
  display: flex; flex-direction: column; gap: .4rem;
}
.attr-cell:hover { border-color: var(--gold); transform: translateY(-4px); }
.attr-icon { font-size: 1.5rem; }
.attr-name { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--charcoal); }
.attr-dist { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
 
/* ═══════════════════════════════════════════════════════
   AMENITIES
═══════════════════════════════════════════════════════ */
#amenities { background: var(--ivory); padding: 7rem 5vw; }
.amen-inner { max-width: 1200px; margin: auto; }
.amen-head  { text-align: center; margin-bottom: 4rem; }
.amen-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px; }
.amen-cell  { background: var(--white); padding: 2rem; display: flex; flex-direction: column; gap: .8rem; border-bottom: 2px solid transparent; transition: border-color .2s, transform .2s; }
.amen-cell:hover { border-color: var(--gold); transform: translateY(-3px); }
.amen-icon  { font-size: 1.7rem; }
.amen-name  { font-family: var(--serif); font-size: 1.08rem; font-weight: 400; }
.amen-desc  { font-size: .8rem; color: var(--mid); line-height: 1.65; }
 
/* ═══════════════════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════════════════ */
#gallery { padding: 7rem 5vw; max-width: 1400px; margin: auto; }
.gal-head { text-align: center; margin-bottom: 3rem; }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 260px 260px;
  gap: 4px;
}
/* Feature large items */
.gal-item { overflow: hidden; position: relative; cursor: pointer; }
.gal-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gal-item:nth-child(4) { grid-column: span 2; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.gal-item:hover img { transform: scale(1.07); }
.gal-overlay { position: absolute; inset: 0; background: rgba(17,10,6,0); transition: background .3s; display: flex; align-items: center; justify-content: center; }
.gal-item:hover .gal-overlay { background: rgba(17,10,6,.32); }
.gal-plus { color: var(--ivory); font-size: 1.8rem; opacity: 0; transition: opacity .3s; font-weight: 200; }
.gal-item:hover .gal-plus { opacity: 1; }
 
/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 800; background: rgba(10,6,4,.96); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; }
.lb-close { position: absolute; top: 1.5rem; right: 2rem; font-size: 2rem; color: rgba(246,239,227,.6); background: none; border: none; line-height: 1; transition: color .2s; }
.lb-close:hover { color: var(--ivory); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(184,146,42,.15); border: 1px solid rgba(184,146,42,.3); color: var(--gold); width: 50px; height: 50px; font-size: 1.2rem; transition: background .2s; }
.lb-prev { left: 2vw; }
.lb-next { right: 2vw; }
.lb-prev:hover, .lb-next:hover { background: rgba(184,146,42,.3); }
 
/* ═══════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════ */
#faq { padding: 6rem 5vw; background: var(--charcoal); }
.faq-inner { max-width: 800px; margin: auto; }
.faq-head  { text-align: center; margin-bottom: 3rem; }
.faq-head .section-title { color: var(--ivory); }
.faq-item  { border-bottom: 1px solid rgba(184,146,42,.15); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 0; background: none; border: none;
  font-family: var(--sans); font-size: .9rem; color: rgba(246,239,227,.85);
  text-align: left; gap: 1rem; transition: color .2s;
}
.faq-q:hover { color: var(--gold); }
.faq-icon { font-size: 1.2rem; color: var(--gold); flex-shrink: 0; transition: transform .3s; }
.faq-a { font-size: .83rem; color: rgba(246,239,227,.5); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), padding .35s; }
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 1.2rem; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
 
/* ═══════════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════════ */
#cta-banner {
  padding: 5rem 5vw;
  background: linear-gradient(135deg, #3D2014 0%, #8B3A22 60%, #5A2510 100%);
  text-align: center; position: relative; overflow: hidden;
}
#cta-banner::before { content: ''; position: absolute; inset: 0; background-image: repeating-conic-gradient(rgba(184,146,42,.07) 0% 25%, transparent 0% 50%); background-size: 48px 48px; pointer-events: none; }
.cta-title { font-family: var(--serif); font-size: clamp(1.8rem,4vw,3rem); font-weight: 300; color: var(--ivory); margin-bottom: .6rem; }
.cta-title em { font-style: italic; color: var(--gold-lt); }
.cta-sub   { color: rgba(246,239,227,.6); font-size: .88rem; margin-bottom: 2rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
 
/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
footer { background: #0E0A07; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; padding: 5rem 5vw 3rem; border-bottom: 1px solid rgba(184,146,42,.12); max-width: 1300px; margin: auto; }
.footer-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.2rem; }
.footer-logo img { height: 50px; width: auto; object-fit: contain; }
.footer-brand-text p { font-size: .8rem; color: rgba(246,239,227,.5); line-height: 1.8; margin-bottom: 1.2rem; }
.footer-contact a { display: block; font-size: .8rem; color: rgba(246,239,227,.55); margin-bottom: .5rem; transition: color .2s; }
.footer-contact a:hover { color: var(--gold); }
.footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.soc-btn { width: 34px; height: 34px; border: 1px solid rgba(184,146,42,.25); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: .75rem; transition: background .2s, border-color .2s; }
.soc-btn:hover { background: rgba(184,146,42,.15); border-color: var(--gold); }
.footer-col h4 { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; }
.footer-col li { font-size: .8rem; color: rgba(246,239,227,.45); margin-bottom: .65rem; cursor: pointer; transition: color .2s; }
.footer-col li:hover { color: var(--ivory); }
.footer-bottom { max-width: 1300px; margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 5vw; font-size: .67rem; color: rgba(246,239,227,.3); letter-spacing: .06em; flex-wrap: wrap; gap: .5rem; }
 
/* ═══════════════════════════════════════════════════════
   ROOMS RESULTS PAGE
═══════════════════════════════════════════════════════ */
.results-topbar { background: var(--charcoal); padding: 0 5vw; padding-top: var(--hdr); border-bottom: 1px solid rgba(184,146,42,.18); }
.results-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.2rem 0; }
.res-dates { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.rdb { display: flex; flex-direction: column; gap: .15rem; }
.rdb-lbl { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.rdb-val { font-family: var(--serif); font-size: 1.05rem; color: var(--ivory); }
.res-arrow { color: rgba(184,146,42,.5); }
.res-nights { font-size: .72rem; color: rgba(246,239,227,.4); letter-spacing: .06em; }
.res-actions-bar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.res-btn { background: none; border: 1px solid rgba(184,146,42,.35); color: var(--gold); padding: .4rem 1rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--sans); transition: background .2s; }
.res-btn:hover { background: rgba(184,146,42,.12); }
.res-btn-dim { border-color: rgba(246,239,227,.15) !important; color: rgba(246,239,227,.4) !important; }
/* Modify bar */
.modify-bar { background: var(--white); padding: 1.2rem 0; display: none; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)) auto; gap: 1rem; align-items: end; border-top: 1px solid var(--blush); }
.modify-bar.open { display: grid; }
.mb-lbl { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .3rem; }
.mb-inp { border: none; border-bottom: 1.5px solid var(--blush); padding: .4rem 0; font-family: var(--serif); font-size: .9rem; color: var(--charcoal); background: transparent; outline: none; width: 100%; transition: border-color .2s; }
.mb-inp:focus { border-color: var(--rose); }
.mb-btn { padding: .68rem 1.4rem; background: var(--rose); color: var(--white); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; border: none; font-family: var(--sans); transition: background .2s; white-space: nowrap; }
.mb-btn:hover { background: #a8432b; }
/* Results body */
.results-body { max-width: 1100px; margin: 0 auto; padding: 3rem 5vw 6rem; }
.res-count { font-size: .78rem; color: var(--mid); margin-bottom: 2.5rem; }
.res-count strong { color: var(--rose); }
/* Room result card */
.res-card { display: grid; grid-template-columns: 380px 1fr; background: var(--white); border: 1px solid var(--blush); margin-bottom: 1.5rem; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.res-card:hover { box-shadow: 0 12px 44px rgba(17,10,6,.12); transform: translateY(-3px); }
.res-card-img { position: relative; min-height: 280px; overflow: hidden; }
.res-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.res-card:hover .res-card-img img { transform: scale(1.05); }
.res-card-badge { position: absolute; bottom: 1rem; left: 1rem; background: var(--rose); color: var(--white); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .7rem; font-family: var(--sans); }
.res-card-body { padding: 2rem 2.2rem; display: flex; flex-direction: column; gap: .9rem; }
.res-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.res-room-name { font-family: var(--serif); font-size: 1.65rem; font-weight: 300; }
.res-room-tag { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(184,146,42,.3); padding: .22rem .55rem; display: inline-block; margin-top: .3rem; }
.res-price-col { text-align: right; flex-shrink: 0; }
.res-from { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
.res-price { font-family: var(--serif); font-size: 2.1rem; font-weight: 300; color: var(--rose); line-height: 1.1; }
.res-per   { font-size: .65rem; color: var(--mid); }
.res-divider { height: 1px; background: var(--blush); }
.res-feats { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.res-feat { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--mid); }
.res-desc  { font-size: .84rem; color: var(--mid); line-height: 1.78; }
.res-foot  { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: auto; }
.res-book  { padding: .82rem 2rem; background: var(--green-wa); color: var(--white); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border: none; font-family: var(--sans); transition: background .2s; display: flex; align-items: center; gap: .6rem; }
.res-book:hover { background: #1ea855; }
.res-total { font-size: .72rem; color: var(--mid); margin-left: auto; text-align: right; }
/* No rooms */
.no-rooms-msg { text-align: center; padding: 4rem 2rem; }
.no-rooms-msg .emoji { font-size: 2.5rem; margin-bottom: 1rem; }
.no-rooms-msg h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; margin-bottom: .5rem; }
.no-rooms-msg p  { font-size: .85rem; color: var(--mid); }
 
/* ═══════════════════════════════════════════════════════
   BOOKING MODAL
═══════════════════════════════════════════════════════ */
.modal-back { position: fixed; inset: 0; z-index: 600; background: rgba(10,6,4,.75); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; padding: 1rem; }
.modal-back.open { opacity: 1; pointer-events: all; }
.modal-box { background: var(--white); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; transform: translateY(24px) scale(.97); transition: transform .35s var(--ease); }
.modal-back.open .modal-box { transform: none; }
.modal-hdr { background: var(--charcoal); padding: 1.6rem 2rem; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--gold); }
.modal-hdr-info h3  { font-family: var(--serif); font-size: 1.35rem; font-weight: 300; color: var(--ivory); }
.modal-hdr-info .wa-tag { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.modal-hdr-info .wa-tag span { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-wa); }
.modal-close { background: none; border: none; color: rgba(246,239,227,.45); font-size: 1.5rem; line-height: 1; transition: color .2s; }
.modal-close:hover { color: var(--ivory); }
.modal-body { padding: 2rem; }
.room-strip { background: var(--light); border-left: 3px solid var(--gold); padding: 1rem 1.2rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.rs-name  { font-family: var(--serif); font-size: 1.1rem; }
.rs-dates { font-size: .72rem; color: var(--mid); margin-top: .15rem; }
.rs-total { font-family: var(--serif); font-size: 1.35rem; color: var(--rose); font-weight: 300; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grp { margin-bottom: 1.1rem; }
.form-lbl { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .35rem; }
.form-inp { width: 100%; border: none; border-bottom: 1.5px solid var(--blush); padding: .5rem 0; font-family: var(--sans); font-size: .9rem; color: var(--charcoal); background: transparent; outline: none; transition: border-color .2s; }
.form-inp:focus { border-color: var(--rose); }
.form-error { color: var(--rose); font-size: .73rem; display: none; margin-bottom: .8rem; }
.wa-submit { width: 100%; padding: .95rem; background: var(--green-wa); color: var(--white); font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: none; display: flex; align-items: center; justify-content: center; gap: .7rem; transition: background .2s; margin-top: .5rem; }
.wa-submit:hover { background: #1ea855; }
.modal-note { font-size: .7rem; color: var(--mid); text-align: center; margin-top: 1rem; line-height: 1.65; }
/* Success */
.booking-success { text-align: center; padding: 2.8rem 1.5rem; display: none; }
.bk-icon  { font-size: 3rem; margin-bottom: 1rem; }
.bk-title { font-family: var(--serif); font-size: 1.75rem; font-weight: 300; margin-bottom: .6rem; }
.bk-msg   { font-size: .84rem; color: var(--mid); line-height: 1.75; }
.bk-ref   { display: inline-block; margin-top: 1.2rem; background: var(--light); border: 1px solid var(--blush); padding: .5rem 1.2rem; font-size: .75rem; letter-spacing: .1em; color: var(--mid); }
.bk-ref strong { color: var(--rose); }
 
/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-l.visible { opacity: 1; transform: none; }
.reveal-r { opacity: 0; transform: translateX(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-r.visible { opacity: 1; transform: none; }
 
/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .avail-card { grid-template-columns: 1fr 1fr; }
  .avail-btn  { grid-column: span 2; width: 100%; }
  #about      { grid-template-columns: 1fr; gap: 3rem; }
  .about-accent-box { right: 0; bottom: -1.5rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .gal-grid { grid-template-columns: repeat(3,1fr); grid-template-rows: 200px 200px 200px; }
  .gal-item:nth-child(1) { grid-column: span 2; }
  .gal-item:nth-child(4) { grid-column: span 1; }
  .res-card { grid-template-columns: 300px 1fr; }
}
@media (max-width: 768px) {
  :root { --hdr: 64px; }
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .logo-text { display: none; }
  .logo-img  { height: 44px; }
  .avail-card { grid-template-columns: 1fr; }
  .avail-btn  { grid-column: unset; }
  #about      { padding: 5rem 5vw; }
  .rooms-grid { grid-template-columns: 1fr; }
  .res-card   { grid-template-columns: 1fr; }
  .res-card-img { min-height: 220px; }
  .gal-grid   { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5,160px); }
  .gal-item:nth-child(1) { grid-column: 1; grid-row: span 1; }
  .footer-top { grid-template-columns: 1fr; }
  .form-row   { grid-template-columns: 1fr; }
  .results-summary { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 2.4rem; }
  .gal-grid { grid-template-columns: 1fr; grid-template-rows: repeat(10,160px); }
  .attr-grid { grid-template-columns: 1fr 1fr; }
  .cta-actions { flex-direction: column; align-items: center; }
}

/* terms */
/* ============ MAIN LAYOUT ============ */
        .container {
            max-width: 1400px;
            margin: 40px auto;
            padding: 3rem 2rem;
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            min-height: 100vh;
        }
 
        /* ============ MAIN CONTENT ============ */
        .content {
            background: var(--white);
            padding: 3rem;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        }
 
        .hero {
            text-align: center;
            margin-bottom: 4rem;
            padding-bottom: 2rem;
            border-bottom: 2px solid var(--blush);
        }
 
        .hero h1 {
            font-family: var(--serif);
            font-size: 3rem;
            font-weight: 700;
            color: var(--charcoal);
            margin-bottom: 0.5rem;
            letter-spacing: -0.5px;
        }
 
        .hero p {
            color: var(--mid);
            font-size: 1.05rem;
            margin-bottom: 1rem;
            text-align: center;
        }
 
        .last-updated {
            display: inline-block;
            background: var(--blush);
            color: var(--charcoal);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 500;
        }
 
        /* ============ SECTIONS ============ */
        section {
            margin-bottom: 4rem;
        }
 
        section:last-child {
            margin-bottom: 0;
        }
 
        .section-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            gap: 1rem;
        }
 
        .section-number {
            font-family: var(--serif);
            font-size: 2rem;
            font-weight: 700;
            color: var(--gold);
            min-width: 50px;
        }
 
        h2 {
            font-family: var(--serif);
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--charcoal);
            flex: 1;
        }
 
        .section-divider {
            height: 2px;
            background: linear-gradient(90deg, var(--rose) 0%, rgba(197, 84, 58, 0) 100%);
            margin-bottom: 1.5rem;
        }
 
        h3 {
            font-family: var(--serif);
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--rose);
            margin: 1.5rem 0 0.8rem 0;
        }
 
        h3:first-child {
            margin-top: 0;
        }
 
        p {
            margin-bottom: 1rem;
            text-align: justify;
        }
 
        ul, ol {
            margin-left: 2rem;
            margin-bottom: 1rem;
        }
 
        ul li, ol li {
            margin-bottom: 0.6rem;
        }
 
        a {
            color: var(--rose);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px solid rgba(197, 84, 58, 0.3);
            transition: all 0.2s ease;
        }
 
        a:hover {
            border-bottom-color: var(--rose);
            color: var(--gold);
        }
 
        .highlight-box {
            background: var(--light);
            border-left: 4px solid var(--gold);
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-radius: 4px;
        }
 
        .highlight-box strong {
            color: var(--rose);
        }
 
        /* ============ RESPONSIVE DESIGN ============ */
        @media (max-width: 1024px) {
            .container {
                padding: 2rem 1.5rem;
            }
 
            .content {
                padding: 2rem;
            }
 
            .hero h1 {
                font-size: 2.2rem;
            }
 
            h2 {
                font-size: 1.5rem;
            }
        }
 
        @media (max-width: 768px) {
            .container {
              margin-top: 82px;
                padding: 1.5rem 1rem;
            }
 
            .content {
                padding: 1.5rem;
                border-radius: 4px;
            }
 
            .hero h1 {
                font-size: 1.8rem;
            }
 
            h2 {
                font-size: 1.3rem;
            }
 
            .section-header {
                flex-direction: column;
                align-items: flex-start;
            }
 
            .section-number {
                font-size: 1.5rem;
            }
 
            p {
                text-align: left;
            }
        }
 
        @media (max-width: 480px) {
            .container {
                padding: 1rem;
                gap: 1.5rem;
            }
 
            .content {
                padding: 1rem;
                border-radius: 4px;
            }
 
            .hero h1 {
                font-size: 1.5rem;
            }
 
            h2 {
                font-size: 1.1rem;
            }
 
            h3 {
                font-size: 1rem;
            }
 
            .section-divider {
                margin-bottom: 1rem;
            }
 
            .highlight-box {
                padding: 1rem;
            }
 
            ul, ol {
                margin-left: 1.5rem;
            }
        }
 
        /* ============ ACCESSIBILITY ============ */
        @media (prefers-reduced-motion: reduce) {
            * {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
 
        /* Focus styles for keyboard navigation */
        a:focus,
        button:focus {
            outline: 2px solid var(--rose);
            outline-offset: 2px;
        }
 
        /* Print styles */
        @media print {
            .container {
                max-width: 100%;
            }
 
            .content {
                box-shadow: none;
                border: none;
            }
        }


        /* contact us */
        /* ============ HERO SECTION ============ */
        .BKM-hero {
            background: linear-gradient(135deg, rgba(197, 84, 58, 0.05) 0%, rgba(184, 146, 42, 0.05) 100%);
            padding: 4rem 2rem;
            text-align: center;
            border-bottom: 2px solid var(--blush);
            margin-top: 30px;
        }
 
        .BKM-hero-content {
            max-width: 1400px;
            margin: 0 auto;
        }
 
        .BKM-hero h1 {
            font-family: var(--serif);
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--charcoal);
            margin-bottom: 1rem;
            letter-spacing: -0.5px;
        }
 
        .BKM-hero p {
            font-size: 1.2rem;
            color: var(--mid);
            margin-bottom: 0;
            text-align: center;
        }
 
        /* ============ MAIN CONTAINER ============ */
        .BKM-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1rem 2rem;
        }
 
        /* ============ TWO COLUMN LAYOUT ============ */
        .BKM-contact-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            margin-bottom: 4rem;
        }
 
        /* ============ CONTACT INFO SECTION ============ */
        .BKM-contact-info {
            background: var(--white);
            padding: 3rem;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            height: fit-content;
        }
 
        .BKM-contact-info h2 {
            font-family: var(--serif);
            font-size: 2rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
 
        .BKM-contact-info h2::before {
            content: '';
            width: 4px;
            height: 30px;
            background: linear-gradient(180deg, var(--rose), var(--gold));
            border-radius: 2px;
        }
 
        .BKM-contact-card {
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-left: 4px solid var(--gold);
            background: var(--light);
            border-radius: 4px;
            transition: all 0.3s ease;
        }
 
        .BKM-contact-card:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(197, 84, 58, 0.1);
            border-left-color: var(--rose);
        }
 
        .BKM-card-label {
            font-family: var(--serif);
            font-size: 0.9rem;
            color: var(--rose);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }
 
        .BKM-card-content {
            font-size: 1.1rem;
            color: var(--charcoal);
            font-weight: 500;
        }
 
        .BKM-card-content a {
            color: var(--rose);
            text-decoration: none;
            border-bottom: 1px solid rgba(197, 84, 58, 0.3);
            transition: all 0.2s ease;
        }
 
        .BKM-card-content a:hover {
            border-bottom-color: var(--rose);
            color: var(--gold);
        }
 
        /* ============ HOURS SECTION ============ */
        .BKM-hours-section {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 2px solid var(--blush);
        }
 
        .BKM-hours-title {
            font-family: var(--serif);
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 1rem;
        }
 
        .BKM-hours-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            font-size: 0.95rem;
        }
 
        .BKM-hour-item {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--blush);
            align-items: center;
        }
 
        .BKM-hour-day {
            font-weight: 600;
            color: var(--charcoal);
        }
 
        .BKM-hour-time {
            color: var(--mid);
        }
 
        /* ============ SOCIAL LINKS ============ */
        .BKM-social-section {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 2px solid var(--blush);
        }
 
        .BKM-social-title {
            font-family: var(--serif);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 1.5rem;
        }
 
        .BKM-social-links {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
 
        .BKM-social-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--blush);
            color: var(--rose);
            text-decoration: none;
            font-size: 1.3rem;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
 
        .BKM-social-btn:hover {
            background: var(--rose);
            color: var(--white);
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(197, 84, 58, 0.2);
        }
 
        .BKM-social-btn.whatsapp {
            background: var(--green-wa);
            color: var(--white);
        }
 
        .BKM-social-btn.whatsapp:hover {
            background: #1fa857;
        }
 
        /* ============ CONTACT FORM ============ */
        .BKM-contact-form {
            background: var(--white);
            padding: 3rem;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        }
 
        .BKM-contact-form h2 {
            font-family: var(--serif);
            font-size: 2rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
 
        .BKM-contact-form h2::before {
            content: '';
            width: 4px;
            height: 30px;
            background: linear-gradient(180deg, var(--gold), var(--rose));
            border-radius: 2px;
        }
 
        .BKM-form-divider {
            height: 2px;
            background: linear-gradient(90deg, var(--rose) 0%, rgba(197, 84, 58, 0) 100%);
            margin-bottom: 2rem;
        }
 
        .BKM-form-group {
            margin-bottom: 1.5rem;
        }
 
        .BKM-form-group label {
            display: block;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }
 
        .BKM-form-group input,
        .BKM-form-group textarea,
        .BKM-form-group select {
            width: 100%;
            padding: 1rem;
            border: 2px solid var(--blush);
            border-radius: 4px;
            font-family: var(--sans);
            font-size: 1rem;
            color: var(--charcoal);
            background: var(--light);
            transition: all 0.3s ease;
        }
 
        .BKM-form-group input:focus,
        .BKM-form-group textarea:focus,
        .BKM-form-group select:focus {
            outline: none;
            border-color: var(--rose);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(197, 84, 58, 0.1);
        }
 
        .BKM-form-group textarea {
            resize: vertical;
            min-height: 150px;
        }
 
        .BKM-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
 
        .BKM-submit-btn {
            background: linear-gradient(135deg, var(--rose) 0%, var(--gold) 100%);
            color: var(--white);
            padding: 1rem 2.5rem;
            border: none;
            border-radius: 4px;
            font-family: var(--serif);
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(197, 84, 58, 0.2);
            letter-spacing: 1px;
            margin-top: 1rem;
        }
 
        .BKM-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(197, 84, 58, 0.3);
        }
 
        .BKM-submit-btn:active {
            transform: translateY(0);
        }
 
        /* ============ ADDITIONAL INFO ============ */
        .BKM-info-section {
            background: var(--light);
            padding: 3rem 2rem;
            border-radius: 8px;
            border-left: 4px solid var(--gold);
            margin-top: 4rem;
        }
 
        .BKM-info-section h3 {
            font-family: var(--serif);
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 1rem;
        }
 
        .BKM-info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 2rem;
        }
 
        .BKM-info-item {
            text-align: center;
        }
 
        .BKM-info-item-icon {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
 
        .BKM-info-item-title {
            font-weight: 600;
            color: var(--rose);
            margin-bottom: 0.5rem;
        }
 
        .BKM-info-item-text {
            color: var(--mid);
            font-size: 0.95rem;
        }
 
        /* ============ RESPONSIVE DESIGN ============ */
        @media (max-width: 1024px) {
            .BKM-contact-wrapper {
                gap: 3rem;
            }
 
            .BKM-hero h1 {
                font-size: 2.5rem;
            }
 
            .BKM-info-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
 
        @media (max-width: 768px) {
            .BKM-contact-wrapper {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
 
            .BKM-hero {
                padding: 2.5rem 1.5rem;
            }
 
            .BKM-hero h1 {
                font-size: 1.8rem;
            }
 
            .BKM-container {
                padding: 2rem 1rem;
            }
 
            .BKM-contact-info,
            .BKM-contact-form {
                padding: 2rem;
            }
 
            .BKM-contact-info h2,
            .BKM-contact-form h2 {
                font-size: 1.5rem;
            }
 
            .BKM-form-row {
                grid-template-columns: 1fr;
            }
 
            .BKM-hours-grid {
                grid-template-columns: 1fr;
            }
 
            .BKM-info-grid {
                grid-template-columns: 1fr;
            }
 
            .BKM-info-section {
                padding: 2rem 1.5rem;
            }
        }
 
        @media (max-width: 480px) {
            .BKM-hero h1 {
                font-size: 1.4rem;
            }
 
            .BKM-hero p {
                font-size: 1rem;
            }
 
            .BKM-container {
                padding: 1.5rem 1rem;
            }
 
            .BKM-contact-info,
            .BKM-contact-form {
                padding: 1.5rem;
            }
 
            .BKM-contact-info h2,
            .BKM-contact-form h2 {
                font-size: 1.3rem;
            }
 
            .BKM-contact-info h2::before,
            .BKM-contact-form h2::before {
                height: 20px;
            }
 
            .BKM-form-group input,
            .BKM-form-group textarea,
            .BKM-form-group select {
                padding: 0.75rem;
            }
 
            .BKM-submit-btn {
                padding: 0.75rem 1.5rem;
                font-size: 1rem;
            }
 
            .BKM-info-section {
                padding: 1.5rem 1rem;
            }
 
            .BKM-info-section h3 {
                font-size: 1.2rem;
            }
 
            .BKM-info-item-icon {
                font-size: 2rem;
            }
        }
 
        /* ============ ACCESSIBILITY ============ */
        @media (prefers-reduced-motion: reduce) {
            * {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
 
        /* Focus styles for keyboard navigation */
        a:focus,
        button:focus,
        input:focus,
        textarea:focus,
        select:focus {
            outline: 2px solid var(--rose);
            outline-offset: 2px;
        }
 
        /* ============ PRINT STYLES ============ */
        @media print {
            header, footer, .submit-btn {
                display: none;
            }
 
            .container {
                max-width: 100%;
            }
 
            .contact-wrapper {
                gap: 2rem;
            }
        }

        /* gallery */

        /* ============ HERO SECTION ============ */
        .BKM-gallery-hero {
            background: linear-gradient(135deg, rgba(197, 84, 58, 0.08) 0%, rgba(184, 146, 42, 0.08) 100%);
            padding: 5rem 2rem 3rem;
            text-align: center;
            border-bottom: 3px solid var(--blush);
        }
 
        .BKM-gallery-hero-content {
            max-width: 1400px;
            margin: 0 auto;
        }
 
        .BKM-gallery-hero h1 {
            font-family: var(--serif);
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--charcoal);
            margin-bottom: 1rem;
            letter-spacing: -0.5px;
        }
 
        .BKM-gallery-hero p {
            font-size: 1.2rem;
            color: var(--mid);
            margin-bottom: 0;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
 
        .BKM-gallery-divider {
            height: 3px;
            background: linear-gradient(90deg, var(--rose) 0%, var(--gold) 50%, rgba(184, 146, 42, 0) 100%);
            width: 150px;
            margin: 2rem auto 0;
            border-radius: 2px;
        }
 
        /* ============ MAIN CONTAINER ============ */
        .BKM-gallery-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }
 
        /* ============ FILTER SECTION ============ */
        .BKM-filter-section {
            text-align: center;
            margin-bottom: 4rem;
        }
 
        .BKM-filter-label {
            font-family: var(--serif);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 1.5rem;
            display: block;
        }
 
        .BKM-filter-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
 
        .BKM-filter-btn {
            padding: 0.75rem 1.5rem;
            border: 2px solid var(--blush);
            background: var(--white);
            color: var(--charcoal);
            font-family: var(--sans);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
 
        .BKM-filter-btn:hover {
            border-color: var(--rose);
            color: var(--rose);
            transform: translateY(-2px);
        }
 
        .BKM-filter-btn.BKM-active {
            background: linear-gradient(135deg, var(--rose) 0%, var(--gold) 100%);
            color: var(--white);
            border-color: transparent;
        }
 
        /* ============ GALLERY GRID ============ */
        .BKM-gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }
 
        .BKM-gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            aspect-ratio: 1 / 1;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
 
        .BKM-gallery-item:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 25px rgba(197, 84, 58, 0.2);
        }
 
        .BKM-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }
 
        .BKM-gallery-item:hover img {
            transform: scale(1.05);
        }
 
        .BKM-gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(197, 84, 58, 0) 0%, rgba(30, 26, 23, 0.8) 100%);
            display: flex;
            align-items: flex-end;
            padding: 2rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
 
        .BKM-gallery-item:hover .BKM-gallery-overlay {
            opacity: 1;
        }
 
        .BKM-gallery-info {
            color: var(--white);
            width: 100%;
        }
 
        .BKM-gallery-category {
            font-family: var(--serif);
            font-size: 0.85rem;
            color: var(--gold-lt);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
        }
 
        .BKM-gallery-category::before {
            content: '';
            width: 20px;
            height: 2px;
            background: var(--gold);
            margin-right: 0.75rem;
            border-radius: 1px;
        }
 
        .BKM-gallery-title {
            font-family: var(--serif);
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--white);
            margin: 0;
        }
 
        /* ============ LIGHTBOX MODAL ============ */
        .BKM-lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 1000;
            animation: BKM-fadeIn 0.3s ease;
        }
 
        .BKM-lightbox.BKM-active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        @keyframes BKM-fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
 
        .BKM-lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            animation: BKM-slideIn 0.3s ease;
        }
 
        @keyframes BKM-slideIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
 
        .BKM-lightbox-image {
            width: 100%;
            height: auto;
            max-height: 80vh;
            object-fit: cover;
            display: block;
        }
 
        .BKM-lightbox-info {
            padding: 2rem;
            background: var(--white);
            border-top: 2px solid var(--blush);
        }
 
        .BKM-lightbox-category {
            font-family: var(--serif);
            font-size: 0.9rem;
            color: var(--rose);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
        }
 
        .BKM-lightbox-title {
            font-family: var(--serif);
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 1rem;
        }
 
        .BKM-lightbox-description {
            color: var(--mid);
            line-height: 1.8;
            margin-bottom: 1rem;
        }
 
        .BKM-lightbox-counter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid var(--blush);
        }
 
        .BKM-counter-text {
            font-size: 0.9rem;
            color: var(--mid);
            font-weight: 600;
        }
 
        .BKM-lightbox-nav {
            display: flex;
            gap: 0.5rem;
        }
 
        .BKM-nav-btn {
            background: var(--light);
            border: 2px solid var(--blush);
            color: var(--charcoal);
            width: 40px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            transition: all 0.3s ease;
        }
 
        .BKM-nav-btn:hover {
            background: var(--rose);
            color: var(--white);
            border-color: var(--rose);
        }
 
        .BKM-close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 2rem;
            color: var(--charcoal);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 1001;
        }
 
        .BKM-close-btn:hover {
            background: var(--rose);
            color: var(--white);
            transform: rotate(90deg);
        }
 
        /* ============ STATS SECTION ============ */
        .BKM-gallery-stats {
            background: var(--light);
            padding: 3rem 2rem;
            border-radius: 8px;
            border-left: 4px solid var(--gold);
            margin-top: 4rem;
        }
 
        .BKM-stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }
 
        .BKM-stat-item {
            text-align: center;
        }
 
        .BKM-stat-number {
            font-family: var(--serif);
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--rose);
            margin-bottom: 0.5rem;
        }
 
        .BKM-stat-label {
            color: var(--mid);
            font-weight: 600;
        }
 
        /* ============ RESPONSIVE DESIGN ============ */
        @media (max-width: 1024px) {
            .BKM-gallery-hero h1 {
                font-size: 2.5rem;
            }
 
            .BKM-gallery-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 1.5rem;
            }
 
            .BKM-stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
 
        @media (max-width: 768px) {
            .BKM-gallery-hero {
                padding: 3rem 1.5rem 2rem;
            }
 
            .BKM-gallery-hero h1 {
                font-size: 2rem;
            }
 
            .BKM-gallery-container {
                padding: 2rem 1rem;
            }
 
            .BKM-gallery-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1.5rem;
            }
 
            .BKM-filter-buttons {
                gap: 0.75rem;
            }
 
            .BKM-filter-btn {
                padding: 0.6rem 1rem;
                font-size: 0.85rem;
            }
 
            .BKM-stats-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
 
            .BKM-lightbox-content {
                max-width: 95vw;
                max-height: 95vh;
                border-radius: 0;
            }
 
            .BKM-lightbox-info {
                padding: 1.5rem;
            }
 
            .BKM-lightbox-title {
                font-size: 1.3rem;
            }
        }
 
        @media (max-width: 480px) {
            .BKM-gallery-hero h1 {
                font-size: 1.6rem;
            }
 
            .BKM-gallery-hero p {
                font-size: 1rem;
            }
 
            .BKM-gallery-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
 
            .BKM-gallery-item {
                aspect-ratio: auto;
                height: 300px;
            }
 
            .BKM-filter-btn {
                padding: 0.5rem 0.8rem;
                font-size: 0.8rem;
            }
 
            .BKM-filter-buttons {
                gap: 0.5rem;
            }
 
            .BKM-gallery-stats {
                padding: 2rem 1rem;
            }
 
            .BKM-stats-grid {
                gap: 1rem;
            }
 
            .BKM-stat-number {
                font-size: 2rem;
            }
 
            .BKM-lightbox-image {
                max-height: 50vh;
            }
 
            .BKM-close-btn {
                width: 40px;
                height: 40px;
                font-size: 1.5rem;
            }
        }
 
        /* ============ ACCESSIBILITY ============ */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
 
        .BKM-gallery-item:focus-visible,
        .BKM-filter-btn:focus-visible,
        .BKM-nav-btn:focus-visible,
        .BKM-close-btn:focus-visible {
            outline: 2px solid var(--rose);
            outline-offset: 2px;
        }
 
        /* ============ PRINT STYLES ============ */
        @media print {
            .BKM-filter-section,
            .BKM-lightbox,
            .BKM-close-btn {
                display: none;
            }
 
            .BKM-gallery-grid {
                gap: 1rem;
            }
        }