*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* color: var(--mid); */
}

:root {
  --cream: #f7f4ef;
  --white: #ffffff;
  --teal: #2a7a6f;
  --teal-lt: #3a9b8e;
  --dark: darkgrey;
  --mid: #555;
  /* --dark: #1a1a1a */
  --gold: #c8a96e;
  --overlay: rgba(10, 10, 10, 0.38);

  --teal-deep: #143a35;
  --dark: darkgrey;

  --hairline: #e1dbcf;
  --paper-shadow: 0 24px 60px rgba(20, 40, 35, 0.18);

  --font-display: Calibri;
  --font-body: "Calibri";
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Calibri;
  color: var(--dark);
  overflow-x: hidden;
  background: #FFF8EE;
}

h1,
h2,
h3,
.hero-title,
.section-title {
  font-family: Calibri;
  font-weight: 600;
  letter-spacing: 0.01em;
}

h1,
.hero-title {
  font-weight: 600;
  font-style: italic; /* Cormorant's italic is gorgeous for hero headlines */
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.1;
}

/* ─── HEADER ─────────────────────────────── */
header {
  /* background: #FFF8EE; */
  background: #F2EDE1;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.07);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 33px 36px;
  transition: background 0.4s;
}

@media (max-width: 760px) {
  header {
    padding: 16px 18px;
  }

  .logo img {
    height: 66px;
  }

  .contact-btn {
    padding: 8px 14px;
    font-size: 12px;
    gap: 6px;
  }

  .contact-btn svg {
    width: 14px;
    height: 14px;
  }

  .hamburger {
    width: 28px;
    gap: 4px;
  }
}
/* header.scrolled {
      background: rgba(247,244,239,0.96);
      backdrop-filter: blur(8px);
      box-shadow: 0 1px 16px rgba(0,0,0,0.07);
    } */

.hamburger {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 46px;
  background: none;
  border: none;
  padding: 4px;
  
}
/* removing the hamburger icon when opened the navitems */
.hamburger.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hamburger span {
  display: block;
  width: 84%;
  height: 1.2px;
  background: #2a7a6f;
  transition: background 0.3s;
}
/* header.scrolled .hamburger span { background: var(--dark); } */

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.logo img {
  height: 103px;
  width: auto;
  /* filter: brightness(0) invert(1); */
  /* transition: filter 0.3s; */
}
header.scrolled .logo img {
  filter: none;
}

.contact-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1.5px solid var(--teal);
  border-radius: 50px;

  /* border-color: var(--teal); */
  color: var(--teal);
  font-family: Calibri;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}

.contact-btn:hover {
  background: var(--teal);
  color: var(--white);
}

.contact-btn svg {
  width: 16px;
  height: 16px;
}

/* ─── FULL-SCREEN NAV OVERLAY ─────────────── */
.nav-overlay {
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 200;
  background: rgba(255, 248, 238, 0.7);
  width: min(250px, 80vw);
  height: auto; /* When zoomed the last menu will not disapeear */
  max-height: 100vh; /* When zoomed the last menu will not disapeear */
  overflow-y: auto; /* When zoomed the last menu will not disapeear */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 56px 32px 0;
  opacity: 0;
  transform: translateX(-16px);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.nav-overlay.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}


.nav-close {
  display: none;
}





.nav-links {
  list-style: none;
  text-align: left;
  width: 100%;
}
.nav-links li {
  margin: 0 0 24px 0;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.nav-overlay.open .nav-links li:nth-child(1) {
  transition-delay: 0.08s;
}
.nav-overlay.open .nav-links li:nth-child(2) {
  transition-delay: 0.13s;
}
.nav-overlay.open .nav-links li:nth-child(3) {
  transition-delay: 0.18s;
}
.nav-overlay.open .nav-links li:nth-child(4) {
  transition-delay: 0.23s;
}
.nav-overlay.open .nav-links li:nth-child(5) {
  transition-delay: 0.28s;
}
.nav-overlay.open .nav-links li {
  opacity: 1;
  transform: translateY(0);
}

.nav-links a {
  font-family: Calibri, sans-serif;
  font-size: 18px;
  font-weight: 1000;
  color: #2a7a6f;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.25s;
  display: inline-block;
  line-height: 1;
}
.nav-links a:hover {
  color: var(--teal);
}
.nav-links li.active-link a {
  color: var(--teal);
  font-weight: 600;
}

.nav-divider {
  display: none;
}
.nav-logo-small {
  display: none;
}



/* ==========================================
   Rooms Dropdown
========================================== */

.nav-links .dropdown > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dropdown-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

/* Rotate arrow */

.dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}

/* Dropdown Menu */

.dropdown-menu {
  list-style: none;
  margin: 12px 0 0 18px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s ease;
}

.dropdown:hover .dropdown-menu {
  max-height: 350px;
  opacity: 1;
}

/* Submenu Items */

.dropdown-menu li {
  margin: 0;
  padding: 0;
  opacity: 1 !important;
  transform: none !important;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 0;
  font-family: Calibri, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dark);
  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.dropdown-menu li a:hover {
  color: var(--teal);
  padding-left: 10px;
}

/* Optional Left Border */

.dropdown-menu {
  border-left: 2px solid rgba(0, 0, 0, 0.08);
  padding-left: 16px;
  background: var(--cream);
}


/* Show on mobile */
@media (max-width: 768px) {
  .nav-close {
    display: flex;
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--teal);
    z-index: 1000;
  }

  .nav-close svg {
    width: 32px;
    height: 32px;
  }

  .nav-close:hover {
  transform: translateY(-2px);
  opacity: 0.7;
}

}

/* ─── HERO ────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2a4a3e 0%, #1a2e28 100%);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 80px;
  text-align: center;
  color: var(--white);
}
.hero-tagline {
  font-family: Calibri, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.85;
}
.hero-title {
  font-family: Calibri, sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 28px;
}
.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
.hero-scroll svg {
  width: 18px;
  opacity: 0.8;
}

/* .booking-widget-wrap {
  position: relative;
  z-index: 1; 
  display: flex;
  justify-content: center;
  margin-top: -80px;
  padding: 0 24px;
}

.booking-search-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 19px 79px; 
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-family: Calibri, sans-serif;
  font-size: 18px; 
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.3s,
    transform 0.2s;
  flex-shrink: 0;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
}

.booking-search-btn:hover {
  background: var(--teal-lt);
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .booking-widget-wrap {
    margin-top: -30px;
  }
  .booking-search-btn {
    justify-content: center;
    width: 100%; 
    max-width: 400px;
  }
} */




/* Booking widget */



    /* ─── BOOKING WIDGET (overlaps hero bottom) ─── */
    .booking-widget-wrap {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      margin-top: -63px;
      padding: 0 24px;
    }
    .booking-widget {
      background: var(--white);
      border-radius: 16px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.16);
      display: flex;
      align-items: center;
      padding: 20px 18px;
      gap: 0;
      max-width: 980px;
      width: 100%;
      flex-wrap: wrap;
    }
    .booking-field {
      display: flex;
      flex-direction: column;
      align-items: center; 
      /* justify-content: center; */
      text-align: center;
      gap: 4px;
      padding: 4px 22px;
      flex: 1;
      min-width: 130px;
    }
    .booking-field:first-child {
    padding-left: 0;
}
    .booking-field label {
      font-size: 14.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal);
      font-weight: 500;
    }
    .booking-field input[type="date"] {
      text-align: center;
      border: none;
      outline: none;
      font-family: 'Calibri', sans-serif;
      font-size: 18.5px;
      color: var(--dark);
      background: transparent;
      padding: 2px 0px 2px 25px;
      cursor: pointer;

      
    }
    .booking-divider {
      width: 1px;
      height: 38px;
      background: #e5e1da;
      flex-shrink: 0;
    }
    .guests-control {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }
    .guests-btn {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1px solid #d8d1c8;
      background: var(--cream);
      color: var(--dark);
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, border-color 0.2s;
      padding: 0;
    }
    .guests-btn:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }
    #guestCount {
      font-size: 14.5px;
      color: var(--dark);
      min-width: 14px;
      text-align: center;
    }
    .booking-search-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 15px 32px;
      background: var(--teal);
      color: var(--white);
      border: none;
      border-radius: 50px;
      font-family: 'Calibri', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.3s, transform 0.2s;
      flex-shrink: 0;
      margin-left: 10px;
    }
    .booking-search-btn:hover { background: var(--teal-lt); transform: translateY(-2px); }
 
    @media (max-width: 860px) {
      .booking-widget {
        flex-direction: column;
        align-items: stretch;
        border-radius: 14px;
        padding: 18px;
      }
      .booking-field { padding: 8px 4px; }
      .booking-divider { width: 100%; height: 1px; margin: 0; }
      .booking-search-btn { margin-left: 0; margin-top: 8px; justify-content: center; width: 100%; }
      .booking-widget-wrap { margin-top: -97px; }
    }
 

/* ─── SECTIONS SHARED ─────────────────────── */
section {
  padding: 100px 48px 0px;
}

.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.section-heading {
  font-family: Calibri, sans-serif;
  font-style: italic;
  font-size: clamp(2.5rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--dark);
  /* margin-bottom: 24px; */
  /* padding-top: 60px; */
}
.section-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--mid);
  max-width: 560px;
}
.teal-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 32px;
}

/* ─── OUR STORY ───────────────────────────── */
/* ─── OUR STORY ───────────────────────────── */
#ourstory {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  /* background: var(--white); */
  padding: 80px 64px;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.story-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 8px;
  background: #e8e4de;
}
.story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.story-img:hover img {
  transform: scale(1.08);
}

.story-text {
  padding-left: 16px;
}
.story-heading {
  font-family: Calibri, sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.story-para {
  font-size: 18px;
  line-height: 1.9;
  text-align: justify;
  color: #666;
  margin-bottom: 22px;
}
.btn-readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 30px;
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-family: Calibri, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.2s;
}
.btn-readmore:hover {
  background: var(--teal-lt);
  transform: translateY(-2px);
}

@media (max-width: 960px) {
  #ourstory {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px 24px;
  }
  .story-text {
    padding-left: 0;
  }
}


/* hero content opening & closing the code */
/* Gallery setup pointer cursor */
.story-img img {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.story-img img:hover {
  transform: scale(1.02); /* Slight hover effect */
}

/* Lightbox Background Overlay */
.lightbox {
  display: none; 
  position: fixed;
  z-index: 9999; /* Ensures it sits on top of everything */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Dark backdrop */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Active State for Lightbox */
.lightbox.active {
  display: flex;
  opacity: 1;
}

/* Enlarged Image Settings */
.lightbox-content {
  max-width: 85%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
  user-select: none;
}

/* Navigation & Close UI Buttons */
.lightbox-close, .lightbox-btn {
  position: absolute;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  user-select: none;
  padding: 10px;
}

.lightbox-close:hover, .lightbox-btn:hover {
  color: #ffdc5a; /* Uses your yellow accent color from earlier */
  transform: scale(1.1);
}

/* Specific Positions */
.lightbox-close {
  top: 20px;
  right: 30px;
  font-size: 3.5rem;
  line-height: 1;
}

.prev-btn {
  left: 20px;
}

.next-btn {
  right: 20px;
}

/* Hide navigation arrows on mobile if they block the image */
@media (max-width: 600px) {
  .lightbox-btn {
    font-size: 2rem;
    padding: 5px;
  }
  .lightbox-content {
    max-width: 95%;
  }
}


/* ─── OUR STORY (text left / images right) ─── */
.akasaStorySection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  background: var(--white);
  padding: 100px 64px;
}

.akasaEyebrow {
  font-size: 18px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
/* .akasaDivider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 32px; 
} */
.akasaStoryText {
  text-align: justify;
  font-size: 18px;
  line-height: 1.9;
  color: var(--mid);
  margin-bottom: 22px;
  max-width: 586px;
}

/* Two-image overlap, badge in between */
.akasaStoryMedia {
  position: relative;
  min-height: 460px;
}
.akasaPhotoPrimary {
  position: absolute;
  top: 0;
  right: 0;
  width: 82%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.akasaPhotoAccent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52%;
  aspect-ratio: 4/5;
  border-radius: 10px;
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  z-index: 2;
}
.akasaPhotoPrimary img,
.akasaPhotoAccent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.akasaBadge {
  position: absolute;
  right: 6%;
  bottom: 14%;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 3;
  box-shadow: 0 10px 26px rgba(42, 122, 111, 0.35);
}
.akasaBadgeNumber {
  font-family: Calibri, sans-serif;
  font-size: 1.9rem;
  line-height: 1;
}
.akasaBadgeLabel {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  line-height: 1.3;
}

@media (max-width: 960px) {
  .akasaStorySection {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 72px 24px;
  }
  .akasaStoryMedia {
    min-height: 380px;
    order: -1;
  }
}

/* ─── Simultaneous reveal on scroll ─── */
.akasaFadeLeft,
.akasaFadeRight {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.akasaFadeLeft {
  transform: translateX(-40px);
}
.akasaFadeRight {
  transform: translateX(40px);
}

.akasaStorySection.akasaInView .akasaFadeLeft,
.akasaStorySection.akasaInView .akasaFadeRight {
  opacity: 1;
  transform: translateX(0);
}

/* ─── FAQ ─────────────────────────────────── */
#faq {
  background: var(--white);
  padding: 110px 48px;
}
.faq-header {
  text-align: center;
  margin-bottom: 56px;
}
.faq-header .section-body {
  max-width: 480px;
  margin: 0 auto;
}

.faq-list {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid #e9e4da;
  border-radius: 10px;
  background: var(--cream);
  transition:
    border-color 0.3s,
    background 0.3s,
    box-shadow 0.3s;
}
.faq-item.open {
  background: var(--white);
  border-color: rgba(42, 122, 111, 0.28);
  box-shadow: 0 10px 30px rgba(20, 16, 10, 0.07);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  padding: 22px 26px;
  cursor: pointer;
  text-align: left;
  font-family: Calibri, sans-serif;
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--dark);
  transition: color 0.25s;
}
.faq-question:hover {
  color: var(--teal);
}

.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--gold);
  transition:
    transform 0.35s ease,
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.faq-item.open .faq-icon {
  transform: rotate(135deg);
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-answer p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--mid);
  padding: 0 26px 24px;
  max-width: 600px;
}

@media (max-width: 700px) {
  #faq {
    padding: 80px 24px;
  }
  .faq-question {
    font-size: 1.08rem;
    gap: 16px;
    padding: 18px 20px;
  }
  .faq-answer p {
    padding: 0 20px 20px;
  }
}

/* ───────── Rooms ───────── */
/* .room-hero{
  position:relative;
  height:78vh; min-height:480px;
  overflow:hidden;
}
.room-hero img{ width:100%; height:100%; object-fit:cover; }
.room-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,16,14,0.05) 0%, rgba(10,16,14,0.55) 100%);
}
.room-hero-content{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2; color:var(--white);
  padding:0 48px 56px;
  max-width:1180px; margin:0 auto;
}
.room-hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:0.24em; text-transform:uppercase;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.35);
  padding:7px 16px; border-radius:50px;
  margin-bottom:22px; backdrop-filter:blur(4px);
}
.room-hero-tag svg{ width:13px; height:13px; }
.room-hero h1{
  font-family: Calibri, sans-serif; font-weight:400;
  font-size:clamp(3rem,7vw,5.6rem); line-height:0.98;
}
.room-hero p.sub{
  margin-top:16px; font-size:16px; color:rgba(255,255,255,0.82); max-width:480px;
}
@media (max-width:760px){
  .room-hero{ height:60vh; }
  .room-hero-content{ padding:0 22px 36px; }
}


.room-layout{
  max-width:1180px; margin:0 auto;
  padding:84px 48px 0;
  display:grid;
  grid-template-columns:1fr 360px;
  gap:80px;
  align-items:start;
}
@media (max-width:980px){
  .room-layout{ grid-template-columns:1fr; padding:56px 24px 0; gap:48px; }
} */

/* ───────── MAIN COLUMN ───────── */
.lede {
  font-family: Calibri, sans-serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.5;
  color: var(--teal-deep);
  border-left: 2px solid var(--gold);
  padding-left: 26px;
  margin-bottom: 44px;
  max-width: 620px;
}
.body-copy {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--mid);
  max-width: 620px;
  margin-bottom: 20px;
}
.body-copy + .body-copy {
  margin-top: 0;
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 64px 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.room-layout .section-label:first-of-type {
  margin-top: 56px;
}

/* strip gallery */
.strip-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 420px;
  margin-bottom: 8px;
}
.strip-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.5s;
}
.strip-gallery a:hover img {
  transform: scale(1.03);
}
.strip-gallery a:first-child {
  grid-row: 1/3;
}
@media (max-width: 700px) {
  .strip-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .strip-gallery a:first-child {
    grid-column: 1/3;
    grid-row: auto;
    aspect-ratio: 16/9;
  }
  .strip-gallery a {
    aspect-ratio: 4/3;
  }
}

/* amenities */
.amenity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.amenity-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.amenity-row svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.amenity-row .t {
  font-size: 14.5px;
  color: var(--dark);
  font-weight: 500;
  margin-bottom: 2px;
}
.amenity-row .d {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.6;
}
@media (max-width: 560px) {
  .amenity-grid {
    grid-template-columns: 1fr;
  }
}

/* the room at a glance — facts strip */
.facts-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.fact-block {
  flex: 1;
  min-width: 140px;
  padding: 22px 22px;
  border-right: 1px solid var(--hairline);
}
.fact-block:last-child {
  border-right: none;
}
.fact-block .label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.fact-block .value {
  font-family: Calibri, sans-serif;
  font-size: 1.5rem;
  color: var(--dark);
}

/* nearby rooms */
.also-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.also-card {
  display: block;
  text-decoration: none;
  color: var(--dark);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--hairline);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.also-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 40, 35, 0.1);
}
.also-card .img {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.also-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.also-card .info {
  padding: 14px 16px;
}
.also-card .info .name {
  font-family: Calibri, sans-serif;
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.also-card .info .rate {
  font-size: 12.5px;
  color: var(--mid);
}
@media (max-width: 560px) {
  .also-grid {
    grid-template-columns: 1fr;
  }
}

/* ───────── BOOKING TICKET (signature element) ───────── */
.ticket-wrap {
  position: sticky;
  top: 100px;
}
.ticket {
  background: var(--teal-deep);
  color: var(--white);
  border-radius: 14px;
  box-shadow: var(--paper-shadow);
  position: relative;
  overflow: hidden;
}
.ticket-top {
  padding: 30px 28px 24px;
}
.ticket-top .room-no {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.ticket-top h3 {
  font-family: Calibri, sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  margin-bottom: 6px;
}
.ticket-top .rate {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}
.ticket-top .rate b {
  color: var(--white);
  font-family: Calibri, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
}

/* perforation */
.perf {
  position: relative;
  height: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.3);
  margin: 0 0;
}
.perf::before,
.perf::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream);
}
.perf::before {
  left: -9px;
}
.perf::after {
  right: -9px;
}

.ticket-form {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ticket-meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ticket-meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13.5px;
}
.ticket-meta li:first-child {
  padding-top: 0;
}
.ticket-meta li span:first-child {
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}
.ticket-meta li span:last-child {
  color: var(--white);
  font-family: Calibri, sans-serif;
  font-size: 1rem;
}

.btn-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 0;
  background: var(--gold);
  color: var(--teal-deep);
  border: none;
  border-radius: 50px;
  font-family: Calibri, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
}
.btn-confirm:hover {
  background: #dcc08a;
  transform: translateY(-2px);
}
.btn-confirm svg {
  flex-shrink: 0;
}
.ticket-note {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

@media (max-width: 980px) {
  .ticket-wrap {
    position: static;
    margin-bottom: 8px;
  }
}

/*About page*/

.about-section {
  background: var(--white);
  padding: 120px 64px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 88px;
  align-items: center;
  overflow: hidden;
}

/* ── Base Fallbacks ── */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.about-frame {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 8px;
  background: #e8e4de;
}
.about-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.about-frame:hover img {
  transform: scale(1.05);
}
.about-content {
  padding-left: 16px;
}
.about-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.about-divider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 32px;
}
.about-title {
  font-family: Calibri, sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.about-description {
  font-size: 15px;
  line-height: 1.9;
  color: #666;
  margin-bottom: 22px;
}
.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 30px;
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-family: Calibri, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.2s;
}
.about-btn:hover {
  background: var(--teal-lt);
  transform: translateY(-2px);
}

/* ── Collage Modifier Layout ── */
.about-section .about-grid.about-grid--collage {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4/5;
  justify-self: center;
  display: block;
}
.about-section .about-frame {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  background: #e8e4de;
  box-shadow: 0 24px 60px rgba(26, 26, 26, 0.14);
}
.about-section .about-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.about-section .about-frame:hover img {
  transform: scale(1.06);
}

.about-section .collage-img--primary {
  inset: 0 12% 14% 0;
  z-index: 1;
}
.about-section .collage-img--secondary-a {
  width: 46%;
  aspect-ratio: 1/1;
  right: -6%;
  top: 8%;
  border: 6px solid var(--white);
  z-index: 2;
}
.about-section .collage-img--secondary-b {
  width: 40%;
  aspect-ratio: 4/5;
  left: -4%;
  bottom: 6%;
  border: 6px solid var(--white);
  z-index: 2;
}
.about-section .collage-caption {
  position: absolute;
  font-family: Calibri, sans-serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--dark);
  letter-spacing: 0.01em;
}
.about-section .collage-caption--left {
  right: -6%;
  top: calc(8% + 46% + 10px);
  text-align: right;
}
.about-section .collage-caption--right {
  left: -4%;
  bottom: calc(-6% - 26px);
}

.about-section .collage-label {
  position: absolute;
  top: -34px;
  left: -4px;
  font-family: Calibri, sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Reveal Animations ── */
.about-section .about-grid--collage .collage-img--primary,
.about-section .about-grid--collage .collage-img--secondary-a,
.about-section .about-grid--collage .collage-img--secondary-b,
.about-section .about-grid--collage .collage-caption,
.about-section .about-grid--collage .collage-label {
  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.about-section .collage-label {
  transform: translateY(-10px);
}
.about-section .collage-img--primary {
  transform: translateY(30px) rotate(0deg);
}
.about-section .collage-img--secondary-a {
  transform: translate(24px, -18px) rotate(9deg);
}
.about-section .collage-img--secondary-b {
  transform: translate(-24px, 18px) rotate(-7deg);
}
.about-section .collage-caption--left,
.about-section .collage-caption--right {
  transform: translateY(8px);
}

.about-section .about-grid--collage.in-view .collage-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}
.about-section .about-grid--collage.in-view .collage-img--primary {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  transition-delay: 0.1s;
}
.about-section .about-grid--collage.in-view .collage-img--secondary-a {
  opacity: 1;
  transform: translate(0, 0) rotate(-3deg);
  transition-delay: 0.32s;
}
.about-section .about-grid--collage.in-view .collage-img--secondary-b {
  opacity: 1;
  transform: translate(0, 0) rotate(3deg);
  transition-delay: 0.46s;
}
.about-section .about-grid--collage.in-view .collage-caption--left {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.62s;
}
.about-section .about-grid--collage.in-view .collage-caption--right {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* ── Right Text Block Animations ── */
.about-section .about-content {
  padding-right: 8px;
}
.about-section .about-eyebrow {
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.about-section .about-divider {
  width: 0;
  transition: width 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s;
}
.about-section .about-title {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s ease 0.1s,
    transform 0.7s ease 0.1s;
}
.about-section .about-description {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.about-section .about-description:nth-of-type(1) {
  transition-delay: 0.22s;
}
.about-section .about-description:nth-of-type(2) {
  transition-delay: 0.32s;
}

.about-section .about-btn {
  opacity: 0;
  transform: translateY(14px);
  transition:
    background 0.3s,
    transform 0.2s,
    opacity 0.7s ease,
    transform 0.7s ease;
}

.about-section .about-content.in-view .about-eyebrow {
  opacity: 1;
  transform: translateY(0);
}
.about-section .about-content.in-view .about-divider {
  width: 40px;
}
.about-section .about-content.in-view .about-title {
  opacity: 1;
  transform: translateY(0);
}
.about-section .about-content.in-view .about-description {
  opacity: 1;
  transform: translateY(0);
}
.about-section .about-content.in-view .about-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.42s;
}

@media (prefers-reduced-motion: reduce) {
  .about-section * {
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 960px) {
  .about-section {
    grid-template-columns: 1fr;
    gap: 64px;
    padding: 88px 24px;
  }
  .about-section .about-grid--collage {
    max-width: 380px;
  }
  .about-section .about-content {
    padding-right: 0;
  }
}

/* ───────── FOOTER ───────── */

footer {
  background: #F2EDE1;
  color: #3D2A1C;
  text-align: center;
  padding: 4px 10px 6px 10px;
  font-size: 15px;
  letter-spacing: 0.06em;
}
footer img {
  height: 82px;
  margin-bottom: 20px;
  /* filter: brightness(0) invert(1) opacity(0.6); */
}
footer p {
  margin-top: 12px;
}

.footer-bottom{
  color:black;
  display: flex;
  justify-content: space-between;
}
.footer-bottom span{
  font-size:medium;
  font-weight: 600;
}

.footer-top--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 1px 0 1px;
}

.footer-top--centered .socials {
  display: flex;
  gap: 52px;
}
.footer-top--centered .socials a svg {
  width: 22px;
  height: 22px;
}
.socials i{
  width: 40px;
  height: 30px;
  font-size: 22px;
    color: #444;
}
.socials img{
height: 32px;
}
.footer-links-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* gap: 19px; */
  padding: 0px 0;
 
  /* border-top: 1px solid rgba(0, 0, 0, 0.08); */
}
.footer-links-row a {
  color: #444;
  font-family: Calibri, sans-serif;
  font-size: 0.95rem;
  transition: color 0.25s;
   text-decoration: none;
}
.footer-links-row a:hover { color: var(--teal); }

@media (max-width: 600px) {
  .footer-links-row { gap: 20px; font-size: 0.85rem; }
}

@media (max-width:768px){
  /* .footer-links-row {
    justify-content: space-between;
  } */
}

/* ===== RESPONSIVE ===== */

/* Tablets */
@media (max-width: 900px) {
  .site-footer {
    padding: 30px 30px 0 30px;
  }
  .footer-top {
    justify-content: center;
    text-align: center;
    gap: 40px;
  }
  .footer-brand {
    align-items: center;
    width: 100%;
  }
  .footer-links {
    
    justify-content: center;
    gap: 50px;
    width: 100%;
  }
  .footer-links-row{
    justify-content: space-evenly;
    gap: 70px;
    width: 100%;
  }
  .footer-col {
    text-align: left;
    min-width: 140px;
  }
  .footer-contact {
    text-align: left;
    max-width: 100%;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .site-footer {
    padding: 24px 18px 0 18px;
  }
  .footer-top {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .footer-brand {
    align-items: center;
  }
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  .footer-col {
    text-align: center;
    min-width: unset;
  }
  .footer-col h4,
  .footer-contact h4 {
    white-space: normal;
  }
  .footer-contact {
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    padding: 14px 0;
  }
  .logo-villa .villa,
  .logo-villa .akasa {
    font-size: 17px;
    letter-spacing: 3px;
  }
}

@media (max-width: 360px) {
  .socials a i {
    text-decoration: none;
    /* color: #E1306C; */
    font-size: 22px;
    width: 12px;
    height: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  /* .socials a i{
    font-size: 40px;
  } */
  .footer-col a,
  .footer-contact p {
    font-size: 14px; 
  }
}

/* ==============================
        TESTIMONIAL SECTION
=================================*/
/* 
.testimonial-section {
  padding: 40px 8%;
  background: #faf8f4;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: auto;
  margin-bottom: 70px;
}

.section-tag {
  color: #c89a5b;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
}

.section-header h2 {
  font-family: Calibri, sans-serif;
  font-size: 56px;
  font-weight: 500;
  margin: 15px 0;
}

.section-header p {
  color: #666;
  line-height: 1.8;
  font-size: 16px;
}
 */
/* Cards */
/* 
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}

.testimonial-card {
  background: #fff;

  padding: 40px;

  border-radius: 20px;

  position: relative;

  transition: 0.35s;

  border: 1px solid #eee;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.testimonial-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.quote-mark {
  position: absolute;

  top: 20px;
  right: 30px;

  font-size: 90px;

  color: #f3ede4;

  font-family: Calibri, sans-serif;

  line-height: 1;
}

.testimonial-content {
  color: #555;

  line-height: 1.9;

  font-size: 16px;

  margin-top: 25px;

  margin-bottom: 35px;
}

.testimonial-stars {
  color: #d4a94d;

  font-size: 22px;

  letter-spacing: 3px;

  margin-bottom: 28px;
}

.testimonial-footer {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  border-top: 1px solid #eee;

  padding-top: 20px;
}

.testimonial-footer h4 {
  margin: 0;

  font-size: 18px;

  font-weight: 600;
}

.testimonial-footer span {
  color: #888;

  font-size: 14px;
}

.testimonial-year {
  color: #c89a5b;

  font-weight: 600;

  font-size: 14px;
}



@media (max-width: 992px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .section-header h2 {
    font-size: 42px;
  }

  .testimonial-card {
    padding: 30px;
  }
} */

/* reveal */
/* .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
} */

/* ─── EXPERIENCE ──────────────────────────── */
#experience {
  background: var(--dark);
  color: var(--white);
}
#experience .section-heading {
  color: var(--white);
}
#experience .section-body {
  color: rgba(255, 255, 255, 0.65);
}
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
}
.exp-card {
  border-top: 1px solid rgba(200, 169, 110, 0.4);
  padding-top: 32px;
}
.exp-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  color: var(--gold);
}
.exp-card h3 {
  font-family: Calibri, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.exp-card p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.55);
}

/* ─── THE PROPERTY ────────────────────────── */
#property {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  background: var(--white);
}
.property-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 520px;
}
.property-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  transition: transform 0.5s;
}
.property-images img:first-child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}
.property-images img:hover {
  transform: scale(1.02);
}

.prop-stat {
  display: flex;
  gap: 40px;
  margin-top: 36px;
}

.prop-stat-item .num {
  font-family: Calibri, sans-serif;
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--teal);
  line-height: 1;
}
.prop-stat-item .label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 4px;
}

/* ─── CONTACT ─────────────────────────────── */
/* #contact {
      background: var(--cream);
      text-align: center;
    }
    #contact .section-body { margin: 0 auto 48px; }
    .contact-form {
      max-width: 560px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 16px 20px;
      border: 1px solid rgba(0,0,0,0.12);
      border-radius: 2px;
      background: var(--white);
      font-family: Calibri, sans-serif;
      font-size: 18px;
      color: rgb(43, 39, 39);
      outline: none;
      transition: border-color 0.3s;
    }
    .contact-form input:focus,
    .contact-form textarea:focus { border-color: var(--teal); }
    .contact-form textarea { min-height: 140px; resize: vertical; }
    .btn-primary {
      padding: 16px 48px;
      background: var(--teal);
      color: var(--white);
      border: none;
      border-radius: 50px;
      font-family: Calibri, sans-serif;
      font-size: 14px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
      align-self: center;
    }
    .btn-primary:hover { background: var(--teal-lt); transform: translateY(-2px); } */


/* ─── SCROLL REVEAL ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── RESPONSIVE ──────────────────────────── */
@media (max-width: 900px) {
  section {
    padding: 72px 24px;
  }
  #ourstory,
  #property {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .story-image::after {
    display: none;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .experience-grid {
    grid-template-columns: 1fr 1fr;
  }
  .property-images {
    height: 360px;
  }
  header {
    padding: 16px 20px;
  }
  .logo img {
    height: 60px;
  }
}
@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item:first-child {
    grid-column: 1;
  }
  .experience-grid {
    grid-template-columns: 1fr;
  }
  .prop-stat {
    flex-wrap: wrap;
  }
  .nav-links a {
    font-size: 2.4rem;
  }
}

/* rooms */
#rooms {
  background: var(--white);
  padding: 100px 64px;
}
.rooms-title {
  font-family: Calibri, sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  text-align: center;
  color: var(--dark);
  margin-bottom: 36px;
  letter-spacing: 0.02em;
}

/* Gallery */
#gallery {
  background: #FFF8EE;
  /* padding: 100px 48px; */
}
#gallery h1{
  font-weight: 400;
  color: #008d77;
  font-style: italic;
  text-align: center;
  padding:60px 0px ;
  font-size: clamp(2.5rem, 6vw, 3.2rem);
}
.gallery-title {
  font-family: Calibri, sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  text-align: center;
  color: var(--dark);
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}

/* Filter pill tabs */
.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.gallery-tab {
  padding: 8px 22px;
  border-radius: 50px;
  border: 1.5px solid #d8d1c8;
  background: transparent;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #666;
  cursor: pointer;
  transition: all 0.25s;
}
.gallery-tab:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.gallery-tab.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

/* Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery-item {
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  aspect-ratio: 4/3;
  background: #e8e4de;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item.hidden {
  display: none;
}

/* Fade-in animation when filtering */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.gallery-item.show {
  animation: fadeInUp 0.4s ease forwards;
}

/* Room panel */
.rooms-panels {
  position: relative;
}
.room-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.room-panel.active {
  display: grid;
}

/* Carousel */
.room-carousel {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 4/3;
}
.carousel-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}
.carousel-slide {
  min-width: 100%;
  height: 100%;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev / Next arrows */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.88);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.carousel-btn:hover {
  background: #fff;
}
.carousel-btn.prev {
  left: 14px;
}
.carousel-btn.next {
  right: 14px;
}
.carousel-btn svg {
  width: 16px;
  height: 16px;
  color: var(--dark);
}

/* Dots */
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 4;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.25s;
  padding: 0;
}
.carousel-dot.active {
  background: var(--white);
  transform: scale(1.25);
}

/* Room info panel */
.room-info {
  padding-top: 8px;
}
.room-info-name {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 18px;
}
.room-info-desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--mid);
  margin-bottom: 30px;
}
.amenities-label {
  font-family: Calibri, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 32px;
}
.amenity {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #444;
}
.amenity svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}
.room-price {
  margin-bottom: 28px;
}
.room-price .amount {
  font-family: Calibri, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--dark);
}
.room-price .per {
  font-size: 14px;
  color: var(--mid);
}
.btn-book {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-family: Calibri, sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.2s;
}
.btn-book:hover {
  background: var(--teal-lt);
  transform: translateY(-2px);
}
.btn-book svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  #rooms {
    padding: 72px 24px;
  }
  .room-panel.active {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .room-tab {
    padding: 10px 14px;
    font-size: 11px;
  }
}


.gallery-title {
  font-family: Calibri, sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  text-align: center;
  color: var(--dark);
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}

/* Filter pill tabs */
.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.gallery-tab {
  padding: 8px 22px;
  border-radius: 50px;
  border: 1.5px solid #d8d1c8;
  background: transparent;
  font-family: Calibri, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #666;
  cursor: pointer;
  transition: all 0.25s;
}
.gallery-tab:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.gallery-tab.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

/* Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery-item {
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  aspect-ratio: 4/3;
  background: #e8e4de;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item.hidden {
  display: none;
}

/* Fade-in animation when filtering */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.gallery-item.show {
  animation: fadeInUp 0.4s ease forwards;
}

/* ─── RESPONSIVE ──────────────────────────── */
@media (max-width: 900px) {
  section {
    padding: 72px 24px;
  }
  #ourstory,
  #property {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .story-image::after {
    display: none;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
  .experience-grid {
    grid-template-columns: 1fr 1fr;
  }
  .property-images {
    height: 360px;
  }
  header {
    padding: 16px 20px;
  }
  .logo img {
    height: 60px;
  }
}
@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .experience-grid {
    grid-template-columns: 1fr;
  }
  .prop-stat {
    flex-wrap: wrap;
  }
  .nav-links a {
    font-size: 2.4rem;
  }
}

/* ─── MOBILE RESPONSIVENESS (MAX-WIDTH: 768px) ─── */
@media screen and (max-width: 768px) {
  header {
    padding: 12px 16px; /* Tighten edge spacing on small screens */
  }

  /* Scale down the center logo so it doesn't crowd the buttons */
  .logo {
    left: 50%;
    transform: translateX(-50%);
  }
  .logo img {
    height: 48px; /* Reduced from 80px */
  }

  /* Shrink padding and hide button text to save horizontal space */
  .contact-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Optional: Hide text completely on ultra-small screens, leaving just the SVG icon */
  .contact-btn span {
    display: none;
  }

  /* Ensure the sidebar overlay matches smaller mobile widths comfortably */
  .nav-overlay {
    /* width: 85vw;  */
    padding: 64px 24px 0;
  }

  .nav-links a {
    font-size: 1.5rem; /* Make text links easier to tap on touch screens */
  }
}

/* ───────── Rooms ───────── */
.room-hero {
  position: relative;
  height: 78vh;
  min-height: 480px;
  overflow: hidden;
}
.room-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 16, 14, 0.05) 0%,
    rgba(10, 16, 14, 0.55) 100%
  );
}
.room-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: var(--white);
  padding: 0 48px 56px;
  max-width: 1180px;
  margin: 0 auto;
}
.room-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 22px;
  backdrop-filter: blur(4px);
}
.room-hero-tag svg {
  width: 13px;
  height: 13px;
}
.room-hero h1 {
  font-family: Calibri, sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 0.98;
}
.room-hero p.sub {
  margin-top: 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
}
@media (max-width: 760px) {
  .room-hero {
    height: 60vh;
  }
  .room-hero-content {
    padding: 0 22px 36px;
  }
}

/* ───────── LAYOUT GRID ───────── */
/* .room-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 48px 0;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}
@media (max-width: 980px) {
  .room-layout {
    grid-template-columns: 1fr;
    padding: 56px 24px 0;
    gap: 48px;
  }
} */

/* ───────── MAIN COLUMN ───────── */
.lede {
  font-family: Calibri, sans-serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.5;
  color: var(--teal-deep);
  border-left: 2px solid var(--gold);
  padding-left: 26px;
  margin-bottom: 44px;
  max-width: 620px;
}
.body-copy {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--mid);
  max-width: 620px;
  margin-bottom: 20px;
}
.body-copy + .body-copy {
  margin-top: 0;
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 64px 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.room-layout .section-label:first-of-type {
  margin-top: 56px;
}

/* strip gallery */
.strip-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 420px;
  margin-bottom: 8px;
}
.strip-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.5s;
}
.strip-gallery a:hover img {
  transform: scale(1.03);
}
.strip-gallery a:first-child {
  grid-row: 1/3;
}
@media (max-width: 700px) {
  .strip-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .strip-gallery a:first-child {
    grid-column: 1/3;
    grid-row: auto;
    aspect-ratio: 16/9;
  }
  .strip-gallery a {
    aspect-ratio: 4/3;
  }
}

/* amenities */
.amenity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.amenity-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.amenity-row svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.amenity-row .t {
  font-size: 14.5px;
  color: var(--dark);
  font-weight: 500;
  margin-bottom: 2px;
}
.amenity-row .d {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.6;
}
@media (max-width: 560px) {
  .amenity-grid {
    grid-template-columns: 1fr;
  }
}

/* the room at a glance — facts strip */
.facts-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.fact-block {
  flex: 1;
  min-width: 140px;
  padding: 22px 22px;
  border-right: 1px solid var(--hairline);
}
.fact-block:last-child {
  border-right: none;
}
.fact-block .label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.fact-block .value {
  font-family: Calibri, sans-serif;
  font-size: 1.5rem;
  color: var(--dark);
}

/* nearby rooms */
.also-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.also-card {
  display: block;
  text-decoration: none;
  color: var(--dark);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--hairline);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.also-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 40, 35, 0.1);
}
.also-card .img {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.also-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.also-card .info {
  padding: 14px 16px;
}
.also-card .info .name {
  font-family: Calibri, sans-serif;
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.also-card .info .rate {
  font-size: 12.5px;
  color: var(--mid);
}
@media (max-width: 560px) {
  .also-grid {
    grid-template-columns: 1fr;
  }
}

/* ───────── BOOKING TICKET (signature element) ───────── */
.ticket-wrap {
  position: sticky;
  top: 100px;
}
.ticket {
  background: var(--teal-deep);
  color: var(--white);
  border-radius: 14px;
  box-shadow: var(--paper-shadow);
  position: relative;
  overflow: hidden;
}
.ticket-top {
  padding: 30px 28px 24px;
}
.ticket-top .room-no {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.ticket-top h3 {
  font-family: Calibri, sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  margin-bottom: 6px;
}
.ticket-top .rate {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}
.ticket-top .rate b {
  color: var(--white);
  font-family: Calibri, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
}

/* perforation */
.perf {
  position: relative;
  height: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.3);
  margin: 0 0;
}
.perf::before,
.perf::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream);
}
.perf::before {
  left: -9px;
}
.perf::after {
  right: -9px;
}

.ticket-form {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ticket-meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ticket-meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13.5px;
}
.ticket-meta li:first-child {
  padding-top: 0;
}
.ticket-meta li span:first-child {
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}
.ticket-meta li span:last-child {
  color: var(--white);
  font-family: Calibri, sans-serif;
  font-size: 1rem;
}

.btn-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 0;
  background: var(--gold);
  color: var(--teal-deep);
  border: none;
  border-radius: 50px;
  font-family: Calibri, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
}
.btn-confirm:hover {
  background: #dcc08a;
  transform: translateY(-2px);
}
.btn-confirm svg {
  flex-shrink: 0;
}
.ticket-note {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

@media (max-width: 980px) {
  .ticket-wrap {
    position: static;
    margin-bottom: 8px;
  }
}

/* Experience Page */

/* ─── HERO BANNER ───────────────────────────── */
.exp-hero {
  position: relative;
  /* height: 50vh; */
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding-bottom: 60px;
}
.exp-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.exp-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.42);
}
.exp-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  /* padding: 0 24px;  */
  max-width: 720px;
}
.exp-hero-title {
  font-family: Calibri;
  font-size: clamp(2.6rem, 5.5vw, 3.2rem);
  font-weight: 400;
  padding: 60px 0px 0px 0px;
  color: #008d77;
  font-style: italic;
  /* margin-bottom: 20px; */
}
.exp-hero-sub {
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.88);
}

/* ─── PAGE TITLE (legacy intro spacer) ──────── */
.page-title-wrap {
  text-align: center;
  padding: 70px 24px 0;
}

/* ─── ALTERNATING ROWS ─────────────────────── */
.exp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto 110px;
  padding: 0 48px;
}
.exp-row.reverse > .exp-img {
  order: 2;
}
.exp-row.reverse > .exp-text {
  order: 1;
}

.exp-img {
  overflow: hidden;
  border-radius: 4px;
  background: #e8e4de;
}
.exp-img img {
  width: 100%;
  height: 420px;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.exp-img:hover img {
  transform: scale(1.03);
}

.exp-text h2 {
  font-family: Calibri, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 22px;
}
.exp-text p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--mid);
  margin-bottom: 20px;
  text-align: justify;
  max-width: 520px;
}
.exp-text p:last-of-type {
  margin-bottom: 32px;
}
@media (max-width: 400px) {
  .exp-hero{
    padding-bottom: 35px;
  }
}
.btn-readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-family: Calibri, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.3s,
    transform 0.2s;
}
.btn-readmore:hover {
  background: var(--teal-lt);
  transform: translateY(-2px);
}
.btn-readmore svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  .exp-row,
  .exp-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
    margin-bottom: 64px;
  }
  .exp-row.reverse > .exp-img,
  .exp-row.reverse > .exp-text {
    order: initial;
  }
  .page-title-wrap {
    padding: 64px 20px 0;
  }
}

/* Gallery */

/* ───────── TOP BAR ───────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.topbar .brand {
  font-family: Calibri, sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--dark);
  text-decoration: none;
}
.topbar .brand span {
  color: var(--teal);
}
.topbar nav a {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  margin-left: 32px;
  transition: color 0.25s;
}
.topbar nav a:hover {
  color: var(--teal);
}
.topbar nav a.current {
  color: var(--dark);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
@media (max-width: 760px) {
  .topbar {
    padding: 16px 20px;
  }
  .topbar nav a {
    margin-left: 16px;
    font-size: 11px;
  }
}

/* ───────── PAGE HEAD ───────── */
.gallery-head {
  /* max-width:1180px; */
  margin: 0 auto;
  padding: 112px 48px 36px;
  text-align: center;
}
.gallery-head .eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
.gallery-head h1 {
  font-family: Calibri;
  font-weight: 400;
font-size: clamp(2.5rem, 6vw, 3.2rem);
  color: #008d77;
  line-height: 1.2;
  font-style: italic;
  padding: 60px 0px 0px 0px ;
}
@media (max-width: 760px) {
  .gallery-head {
    padding: 74px 22px 28px;
  }
}

/* ───────── TABS ───────── */
.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 48px 36px;
}
.gtab {
  padding: 10px 26px;
  border-radius: 50px;
  border: 1.5px solid var(--hairline);
  background: var(--white);
  font-family: Calibri, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.25s;
}
.gtab:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.gtab.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}
@media (max-width: 760px) {
  .gallery-tabs {
    padding: 0 13px 12px;
  }
}

/* ───────── MAIN SLIDER ───────── */
.slider-wrap {
  /* max-width:1180px; */
  margin: 0 auto;
  padding: 0 48px;
}
.slider {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/7.4;
  background: #e9e5dd;
  box-shadow: 0 22px 50px rgba(20, 40, 35, 0.14);
}
.slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.slider-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slider-track img.active {
  opacity: 1;
}

.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.2s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.slide-arrow:hover {
  background: var(--white);
  transform: translateY(-50%) scale(1.06);
}
.slide-arrow.prev {
  left: 18px;
}
.slide-arrow.next {
  right: 18px;
}
.slide-arrow svg {
  width: 18px;
  height: 18px;
  color: var(--teal-deep);
}

.slide-caption {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
}
.slide-caption .cat-pill {
  background: rgba(20, 40, 35, 0.55);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
}
.slide-caption .count {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  background: rgba(20, 40, 35, 0.55);
  backdrop-filter: blur(4px);
  padding: 7px 14px;
  border-radius: 50px;
}
@media (max-width: 760px) {
  .slider {
    aspect-ratio: 4/3.6;
  }
  .slide-arrow {
    width: 38px;
    height: 38px;
  }
}

/* ───────── THUMB GRID ───────── */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  /* max-width:1180px; */
  margin: 18px auto 0;
  padding: 0 48px 100px;
}
.thumb {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform 0.3s,
    border-color 0.3s,
    opacity 0.35s;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.thumb:hover img {
  transform: scale(1.06);
}
.thumb:hover {
  transform: translateY(-3px);
}
.thumb.active {
  border-color: var(--gold);
}
.thumb.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold);
  border-radius: 6px;
}

/* fade in/out when switching tabs */
.thumb-grid.switching .thumb {
  opacity: 0;
  transform: translateY(8px);
}

@media (max-width: 900px) {
  .thumb-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .thumb-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 22px 72px;
  }
}

/* INdividual Rooms */
/* ───────── VAYU HERO ───────── */
.vy-hero {
  position: relative;
  height: 78vh;
  min-height: 480px;
  overflow: hidden;
}
.vy-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vy-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 16, 14, 0.05) 0%,
    rgba(10, 16, 14, 0.55) 100%
  );
}
.vy-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: var(--white);
  padding: 0 48px 56px;
  max-width: 1180px;
  margin: 0 auto;
}
.vy-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 22px;
  backdrop-filter: blur(4px);
}
.vy-hero h1 {
  font-family: Calibri, sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 0.98;
}
.vy-hero p.sub {
  margin-top: 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
}
@media (max-width: 760px) {
  .vy-hero {
    height: 60vh;
  }
  .vy-hero-content {
    padding: 0 22px 36px;
  }
}


#vy-room {
  margin: 0 auto;
  padding: 26px 48px 50px;
}
.vy-title {
  font-family: Calibri, sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.vy-subtitle {
  text-align: center;
  color: #666;
  max-width: 520px;
  margin: 0 auto 52px;
  font-size: 15px;
  line-height: 1.7;
}

.vy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
.vy-gallery,
.vy-info {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 900px) {
  .vy-panel {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #vy-room {
    padding: 24px 20px 72px;
  }
}

@media (max-width: 600px) {
  #vy-room {
    padding: 20px 16px 64px;
  }
  .vy-panel {
    gap: 24px;
  }
  .vy-frame {
    height: 280px;
  }
  .vy-info-desc {
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
  }
  .vy-amenities-grid {
    gap: 14px;
  }
}

.vy-gallery {
  position: relative;
  border-radius: 3px;
  overflow: visible;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vy-frame {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: #eee;
  border-radius: 6px;
  width: 100%;
  height: 450px;
}
.vy-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vy-thumbs {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.vy-thumbs::-webkit-scrollbar {
  height: 5px;
}
.vy-thumbs::-webkit-scrollbar-thumb {
  background: #d8d1c8;
  border-radius: 10px;
}

.vy-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 58px;
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  opacity: 0.6;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease;
}
.vy-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vy-thumb:hover {
  opacity: 0.9;
}
.vy-thumb.active {
  opacity: 1;
  border-color: var(--teal, #2a7a6f);
}

@media (max-width: 600px) {
  .vy-thumb {
    width: 60px;
    height: 46px;
    flex: 0 0 60px;
  }
}


.vy-info-name {
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b08d4f;
  margin-bottom: 14px;
  font-weight: 550;
}
.vy-info-desc {
  font-size: 17px;
  line-height: 1.75;
  text-align: justify;
  color: #4a4a4a;
  margin-bottom: 30px;
}
.vy-amenities-label {
  font-family: Calibri, sans-serif;
  font-size: 20px;
  color: #b08d4f;
  margin-bottom: 16px;
}
.vy-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 22px 50px;
  margin-bottom: 42px;
}

.vy-amenity {
  display: flex;
  align-items: center;
  gap: 14px;

  font-family: Calibri, sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #2f2f2f;
}

.amenity-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;

  color: #c99b56;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  .vy-amenities-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vy-amenity {
    font-size: 16px;
  }

  .amenity-icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 600px) {
  .vy-frame {
    height: 320px;
  }

  .vy-info-desc {
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
  }

  .vy-amenity {
    font-size: 15px;
  }
}
.vy-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal, #2a7a6f);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
}

/* faq section */

.roomFaqSection {
  max-width: 1180px;
  margin: 100px auto 45px;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 64px;
}
.roomFaqAside {
  /* position: sticky; */
  top: 120px;
  align-self: start;
}
.roomFaqEyebrow {
  font-size: 40px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.roomFaqRule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 24px;
}
.roomFaqHeading {
  font-family: Calibri, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 14px;
  line-height: 1.15;
}
.roomFaqSub {
  font-size: 16px;
  line-height: 1.8;
  color: var(--mid);
}

.roomFaqList {
  border-top: 1px solid #e7e2d9;
}
.roomFaqItem {
  border-bottom: 1px solid #e7e2d9;
}
.roomFaqQ {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  padding: 24px 2px;
  cursor: pointer;
  text-align: left;
  font-family: Calibri, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--mid);
  transition: color 0.25s;
}
.roomFaqQ:hover {
  color: var(--teal);
}
.roomFaqPlus {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  position: relative;
}
.roomFaqPlus::before,
.roomFaqPlus::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition:
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    background 0.25s;
}
.roomFaqPlus::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}
.roomFaqPlus::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: 1.5px;
  transform: translateX(-50%);
}
.roomFaqItem.open .roomFaqPlus::after {
  transform: translateX(-50%) rotate(90deg);
}
.roomFaqItem.open .roomFaqPlus::before,
.roomFaqItem.open .roomFaqPlus::after {
  background: var(--teal);
}

.roomFaqA {
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  max-height: 0;
  transition:
    clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.roomFaqItem.open .roomFaqA {
  clip-path: inset(0 0 0% 0);
}
.roomFaqA p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--mid);
  padding: 0 2px 24px;
  max-width: 620px;
}

@media (max-width: 900px) {
  .roomFaqSection {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 24px;
    margin-top: 72px;
  }
  .roomFaqAside {
    position: static;
  }
}





/* reveiws Page */

.container {
  width: min(1200px, 92%);
  margin: auto;
}

.guestbook-section,
.testimonial-section {
  padding: 0px 0;
}

.section-heading {
  text-align: center;
  /* margin-bottom: 60px; */
  color: #008b74;
  font-style: italic;
}

.section-heading h1 {
  font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 3.2rem);
  font-style: italic;
  margin: 15px 0;
  color: #008b74;

}

.section-heading span {
  color: #b68d40;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.section-heading p {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto;
  color: #666;
  font-style: normal;
}



/* ─────────────── SLIDER WRAPPERS ─────────────── */

.guestbook-slider,
.testimonial-slider {
  position: relative;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: 0.3s;
}

.slider-btn:hover {
  background: var(--teal);
  color: #fff;
}

.prev,
.review-prev {
  left: -20px;
}

.next,
.review-next {
  right: -20px;
}

@media (max-width: 992px) {
  .slider-btn {
    display: none;
  }
}

/* ─────────────── COVERFLOW CAROUSEL (shared engine) ─────────────── */

.coverflow-track {
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.coverflow-item {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 18px;
  cursor: pointer;
  transition:
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s ease;
  will-change: transform, opacity;
}

.coverflow-item.is-active {
  cursor: default;
}

/* Guestbook note cards inside coverflow */

.note-card {
  width: 320px;
  overflow: hidden;
  border-radius: 18px;
  /* box-shadow: 0 10px ; */
}

.note-card img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Testimonial cards inside coverflow */

.testimonial-card {
  width: 420px;
  background: #ffffff;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.review-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  transition: opacity 0.3s ease;
}

.review-top h3 {
  margin-bottom: 5px;
}

.headings h3 h4 {
    margin-bottom: 5px;
    font-weight: 600;
    color: #060606 !important;
}

.review-top span {

  font-size: 0.9rem;
}

.stars {
  color: #e7b600 !important;
  margin-bottom: 5px;
}

.testimonial-card p {
  color: #555;
  transition: opacity 0.3s ease;
  max-height: 220px;
  overflow-y: auto;
}

.coverflow-item:not(.is-active) .review-top,
.coverflow-item:not(.is-active) .testimonial-card p {
  opacity: 0;
  pointer-events: none;
}

/* ANIMATION */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────── LIGHTBOX (guestbook full-image view) ─────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: zoom-in;
  overflow: auto;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  transition: transform 0.35s ease;
  cursor: zoom-in;
}

.lightbox img.zoomed {
  max-width: none;
  max-height: none;
  transform: scale(1.8);
  cursor: zoom-out;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1000;
}

/* ─────────────── RESPONSIVE ─────────────── */

@media (max-width: 768px) {
  .guestbook-section,
  .testimonial-section {
    padding: 70px 0;
  }

  .section-heading h2 {
    font-size: 2rem;
  }

  /* .coverflow-track {
    height: 380px;
  } */

  .note-card {
    width: 220px;
  }
  .note-card img {
    height: 320px;
  }

  .testimonial-card {
    width: 280px;
    padding: 22px;
  }
}

@media (max-width: 480px) {
  /* .coverflow-track {
    height: 320px;
  } */
  .note-card {
    width: 180px;
  }
  .note-card img {
    height: 260px;
  }
  .testimonial-card {
    width: 230px;
    padding: 18px;
  }
}


/* ourphilosphy */
   /* just so the section has room to breathe when previewed alone */
  .page-pad { padding: 0px 0px 40px 0px; }

  /* ═══════════════ STORY COLLAGE SECTION ═══════════════ */
  .story-collage {
    padding: 40px 56px 100px;
    max-width: 1360px;
    margin: 0 auto;
  }

  .collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
  }

  /* ── LEFT: square text panel ──────────────────────────── */
  .text-panel {
    position: relative;
    background: var(--white);
    border-radius: 32px;
    aspect-ratio: 1 / 1;
    padding: 64px 12px 48px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 70px rgba(26,26,26,0.06);
  }

  .text-panel .eyebrow {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px;
  }
  .text-panel .rule {
    width: 40px; height: 2px;
    background: var(--gold);
    margin-bottom: 30px;
  }
  .text-panel h2 {
    font-family: 'calibri', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.15;
    margin-bottom: 30px;
    color: var(--dark);
    max-width: 100%;
  }

  .text-scroll-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
  .text-scroll {
     width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-right: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
  }
  .text-scroll::-webkit-scrollbar { width: 5px; }
  .text-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }
  .text-scroll::-webkit-scrollbar-track { background: transparent; }

  .text-scroll p {
    font-size: 18px;
    line-height: 1.9;
    text-align: justify;
    color: var(--mid);
    margin-bottom: 20px;
     max-width: 100%;
  }
  .text-scroll p:last-child { margin-bottom: 0; }

  /* fade mask + bounce cue hinting there's more to read */
  .scroll-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--white) 88%);
    pointer-events: none;
  }
  .scroll-cue {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0.75;
  }
  .scroll-cue svg {
    width: 15px; height: 15px;
    animation: cueBounce 1.8s ease-in-out infinite;
  }
  @keyframes cueBounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(4px); }
  }
  .text-scroll.at-bottom + .scroll-fade,
  .text-scroll.at-bottom ~ .scroll-cue { opacity: 0; }

  /* ── RIGHT: overlapping photo collage ─────────────────── */
  .image-collage {
    position: relative;
    height: 100%;
    min-height: 420px; /* fallback floor in case the panel ever renders very short */
  }

  .collage-item {
    position: absolute;
    overflow: hidden;
    border-radius: 20px;
    background: #e8e4de;
    box-shadow: 0 18px 40px rgba(26,26,26,0.10);
    border: 4px solid #FFF8EE;
  }
  .collage-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
  }
  .collage-item:hover img { transform: scale(1.07); }
  .collage-item:hover { z-index: 9 !important; }

  /* five tiles staggered/overlapping, mirroring the wireframe */
  .item-a { top: 0;    left: 0;    width: 50%;  height: 72%;  z-index: 6; }
  .item-b { top: 15%;   left: 44%;  width: 44%;  height: 66%;  z-index: 4; }
  .item-c { top: 67%;  left: 11%;  width: 54%;  height: 48%;  z-index: 3; }
  .item-d { top: 38%;  left: 46%;  width: 48%;  height: 36%;  z-index: 4; }
  .item-e { top: 66%;  left: 46%;  width: 29%;  height: 54%;  z-index: 5; }

  /* gentle ambient float — the one signature motion moment */
  /* .item-a { animation: floatA 8s ease-in-out infinite; }
  .item-d { animation: floatD 9s ease-in-out infinite; } */
  @keyframes floatA {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-10px); }
  }
  @keyframes floatD {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(8px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .item-a, .item-d { animation: none; }
    .scroll-cue svg { animation: none; }
  }

  /* ── scroll reveal ─────────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .image-collage .reveal.visible { transform: translateY(0); }

  /* ── responsive ────────────────────────────────────────── */
  @media (max-width: 980px) {
    .story-collage { padding: 32px 24px 72px; }
    .collage-grid { grid-template-columns: 1fr; gap: 40px; }
    .text-panel {
      border-radius: 28px;
      padding: 48px 32px;
      aspect-ratio: auto;
      height: auto;
    }
    .text-panel .text-scroll { height: 340px; }
    .text-panel h2, .text-scroll p { max-width: none; }
    .image-collage { height: auto; min-height: 460px; }
  }
  @media (max-width: 560px) {
    .item-a { width: 58%; height: 50%; }
    .item-b { left: 40%; width: 54%; height: 65%; top: 13%; }
    .item-c { left: 6%;  width: 49%; height: 57%; top: 46%; }
    .item-d { left: 42%; width: 54%; height: 24%; top: 36%; }
    .item-e { left: 30%; width: 60%; height: 24%; top: 66%; }
    .image-collage { min-height: 380px; }
  }


  /* Explore.html */
  /* ═══ GALLERY ═══ */
/* .vg-gallery__title { your existing gallery-title styles } */
/* .vg-gallery__tabs { your existing gallery-tabs styles } */
/* .vg-gallery__tab { your existing gallery-tab styles } */
/* .vg-gallery__tab--active { your existing gallery-tab.active styles } */
/* .vg-gallery__grid { your existing gallery-grid styles } */
/* .vg-gallery__item { your existing gallery-item styles } */
.vg-gallery__item img { cursor: zoom-in; }

/* ═══ LIGHTBOX ═══ */
.vg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10,10,10,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.vg-lightbox.vg-lightbox--open { opacity: 1; visibility: visible; }

.vg-lightbox__stage {
  position: relative;
  max-width: 86vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vg-lightbox__stage img {
  max-width: 86vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.vg-lightbox--open .vg-lightbox__stage img.vg-lightbox__img--loaded {
  opacity: 1;
  transform: scale(1);
}

.vg-lightbox__counter {
  margin-top: 14px;
  font-family: 'Calibri', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.vg-lightbox__close {
  position: absolute;
  top: 24px; right: 28px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
  z-index: 2;
}
.vg-lightbox__close:hover { background: var(--teal); transform: rotate(90deg); }
.vg-lightbox__close svg { width: 18px; height: 18px; }

.vg-lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.vg-lightbox__btn:hover { background: var(--teal); border-color: var(--teal); }
.vg-lightbox__btn svg { width: 20px; height: 20px; }
.vg-lightbox__btn--prev { left: 24px; }
.vg-lightbox__btn--next { right: 24px; }

@media (max-width: 640px) {
  .vg-lightbox__btn { width: 40px; height: 40px; }
  .vg-lightbox__btn--prev { left: 10px; }
  .vg-lightbox__btn--next { right: 10px; }
  .vg-lightbox__close { top: 14px; right: 14px; }
}



/* individual rooms */
/* make it obvious the main image is clickable */
.vy-frame {
  cursor: zoom-in;
}

/* ═══ RML LIGHTBOX ═══ */
.rml-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 10, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.rml-lightbox.rml-lightbox--open {
  opacity: 1;
  visibility: visible;
}

.rml-lightbox__stage {
  position: relative;
  max-width: 86vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rml-lightbox__stage img {
  max-width: 86vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.rml-lightbox__stage img.rml-lightbox__img--loaded {
  opacity: 1;
  transform: scale(1);
}

.rml-lightbox__counter {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.rml-lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
  z-index: 2;
}
.rml-lightbox__close:hover {
  background: var(--teal);
  transform: rotate(90deg);
}
.rml-lightbox__close svg {
  width: 18px;
  height: 18px;
}

.rml-lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.rml-lightbox__btn:hover {
  background: var(--teal);
  border-color: var(--teal);
}
.rml-lightbox__btn svg {
  width: 20px;
  height: 20px;
}
.rml-lightbox__btn--prev { left: 24px; }
.rml-lightbox__btn--next { right: 24px; }

@media (max-width: 640px) {
  .rml-lightbox__btn { width: 40px; height: 40px; }
  .rml-lightbox__btn--prev { left: 10px; }
  .rml-lightbox__btn--next { right: 10px; }
  .rml-lightbox__close { top: 14px; right: 14px; }
}

/* ═══ READ MORE (after FAQ) ═══ */
.rml-more {
  max-width: 1180px;
  margin: 0 auto 100px;
  padding: 0 48px;
  text-align: center;
}
.rml-more__btn {
  display: inline-flex;
  align-items: center;
  text-transform: none;
  text-decoration: none;
  gap: 10px;
  padding: 14px 34px;
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 50px;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}
.rml-more__btn:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-2px);
}
.rml-more__btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}
.rml-more__btn:hover svg {
  transform: translateY(2px);
}

@media (max-width: 900px) {
  .rml-more { padding: 0 24px; }
}

/* Terms & Conditon */
 /* ─── PAGE HERO ────────────────────────────── */
    .legal-hero {
      /* padding: 168px 0px 64px; */
      display: flex;
      justify-content: center;
      background: #FFF8EE   ;
      border-bottom: 1px solid var(--line);
      margin-bottom: 12px;
    
    }

     .legal-hero1 {
      padding: 20px 0px 64px;
      display: flex;
      justify-content: center;
      background: #FFF8EE   ;
      border-bottom: 1px solid var(--line);
      margin-bottom: 12px;
    
    }

     .legal-hero1 h1 {
      font-family: 'Calibri';
      color: var(--teal);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(2.4rem, 5vw, 3.6rem);
      line-height: 1.1;
      margin-bottom: 18px;
        text-align: center;
    }
    .legal-hero1 p {
      font-size: 15.5px;
      line-height: 1.85;
      color: var(--mid);
      max-width: 640px;
      text-align: center;
    }
     .legal-hero1 .teal-rule {
      width: 40px; height: 2px;
      /* background: #fff; */
      margin-bottom: 24px;
    }
    /* .legal-hero-inner { max-width: 900px; margin: 0 auto; } */
   
    .legal-hero h1 {
      font-family: 'Calibri';
      color: #008d77;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(2.4rem, 5vw, 3.2rem);
      line-height: 1.1;
      text-align: center;
      padding: 60px;
    }
    .legal-hero p {
      font-size: 15.5px;
      line-height: 1.85;
      color: var(--mid);
      max-width: 640px;
      text-align: center;
    }
    .legal-hero .teal-rule {
      width: 40px; height: 2px;
      /* background: #fff; */
      margin-bottom: 24px;
    }

    /* At-a-glance card */
    .glance-card {
      background: #fff;
      border: 1px solid var(--line);
      border-left: 3px solid var(--gold);
      border-radius: 6px;
      padding: 30px 34px;
    }
    .glance-card h2 {
      font-size: 18px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 18px;
    }
    .glance-list { list-style: none; display: grid; gap: 12px; }
    .glance-list li {
      font-size: 17px;
      line-height: 1.7;
      color: #666;
      padding-left: 22px;
      position: relative;
    }
    .glance-list li::before {
      content: '';
      position: absolute;
      left: 0; top: 8px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--teal);
    }
    .glance-list strong { font-weight: 500; color: var(--teal); }

    /* ─── LAYOUT: TOC + CONTENT ───────────────── */
    .legal-wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 64px 48px 100px;
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 64px;
      align-items: start;
    }

    /* TOC */
    .toc {
      position: sticky;
      top: 110px;
      max-height: calc(100vh - 140px);
      overflow-y: auto;
      padding-right: 8px;
    }
    .toc-title {
      font-size: 18px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--mid);
      margin-bottom: 18px;
    }
    .toc ol {
      
      list-style: none;
      counter-reset: toc;
      border-left: 1px solid var(--line);
    }
    .toc li { counter-increment: toc; }
    .toc a {
      display: block;
      text-decoration: none;
      font-size: 16px;
      line-height: 1.5;
      color: var(--mid);
      padding: 7px 0 7px 18px;
      margin-left: -1px;
      border-left: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s;
    }
    .toc a::before {
      content: counter(toc) '. ';
      color: var(--gold);
      font-weight: 500;
    }
    .toc a:hover { color: var(--teal); }
    .toc li.active a {
      color: var(--teal);
      border-left-color: var(--teal);
      font-weight: 500;
    }
    .toc-contact-link {
      display: block;
      margin-top: 14px;
      padding: 7px 0 7px 18px;
      font-size: 13.5px;
      color: var(--teal);
      text-decoration: none;
      font-weight: 500;
    }

    /* Mobile TOC toggle */
    .toc-mobile-bar { display: none; }

    /* Content */
    .legal-content h2.section-num {
      font-family: 'Calibri', serif;
      font-weight: 400;
      font-size: clamp(1.4rem, 2.6vw, 1.7rem);
      color: var(--dark);
      margin-bottom: 20px;
      display: flex;
      align-items: baseline;
      gap: 12px;
    }
    .legal-content h2.section-num span.n {
      font-size: 0.85rem;
      font-family: 'Calibri', sans-serif;
      font-weight: 500;
      color: var(--gold);
      letter-spacing: 0.04em;
    }
    .legal-section {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 40px 44px;
      margin-bottom: 28px;
      box-shadow: 0 4px 20px rgba(26,26,26,0.04);
      scroll-margin-top: 110px;
      transition: box-shadow 0.25s, border-color 0.25s;
      position: relative;
      overflow: hidden;
    }
    .legal-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 100%;
      background: var(--gold);
      opacity: 0.55;
    }
    .legal-section:hover {
      box-shadow: 0 10px 32px rgba(26,26,26,0.07);
      border-color: #ddd6c9;
    }
    .legal-section p {
      font-size: 17px;
      line-height: 1.9;
      color: var(--mid);
      margin-bottom: 16px;
      max-width: 100%;
      text-align: justify;
    }
    .legal-section p:last-child { margin-bottom: 0; }
    .legal-section p strong { color: black; font-weight: 500; }
    .legal-section ul {
      margin: 0 0 16px 0;
      padding-left: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .legal-section ul:last-child { margin-bottom: 0; }
    .legal-section ul li {
      font-size: 15px;
      line-height: 1.8;
      color: var(--mid);
      padding-left: 22px;
      position: relative;
    }
    .legal-section ul li::before {
      content: '';
      position: absolute;
      left: 0; top: 10px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--gold);
    }
    .legal-section ul li strong { color: var(--dark); font-weight: 500; }

    .callout {
      background: var(--cream);
      border: 1px solid var(--line);
      border-left: 3px solid var(--teal);
      border-radius: 6px;
      padding: 18px 22px;
      margin-bottom: 16px;
    }
    .callout p { margin-bottom: 0; }

    /* Contact / footer info card */
    #contact-info {
      scroll-margin-top: 110px;
    }
    .contact-card {
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 32px 36px;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px 32px;
      margin-top: 8px;
    }
    .contact-grid .label {
      font-size: 13.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 6px;
    }
    .contact-grid .value {
      font-size: 15px;
      color: #5b5454;
      line-height: 1.6;
    }
    .last-updated {
      font-size: 13px;
      color: var(--mid);
      font-style: italic;
      margin-top: 36px;
      max-width: 720px;
    }

    /* Back to top */
    .to-top {
      position: fixed;
      right: 28px; bottom: 28px;
      width: 46px; height: 46px;
      border-radius: 50%;
      background: var(--teal);
      color: var(--white);
      border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity 0.3s, transform 0.3s, background 0.3s;
      z-index: 60;
    }
    .to-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
    .to-top:hover { background: var(--teal-lt); }
    .to-top svg { width: 18px; height: 18px; }

 
    /* ─── RESPONSIVE ───────────────────────────── */
    @media (max-width: 980px) {
      /* Fixed: Reduced horizontal padding so layout doesn't overflow */
      .legal-wrap { 
        grid-template-columns: 1fr; 
        gap: 32px; 
        padding: 32px 16px 72px; 
      }
      
      .toc { display: none; }
      
      .toc-mobile-bar {
        display: none;
        position: sticky;
        top: 68px;
        z-index: 40;
        background: var(--cream);
        border-bottom: 1px solid var(--line);
        padding: 12px 0;
        margin: 0 -16px 8px; /* Adjusted to match parent padding */
      }
      
      .toc-mobile-scroll {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 16px;
        scrollbar-width: none;
      }
      
      .toc-mobile-scroll::-webkit-scrollbar { display: none; }
      
      .toc-mobile-scroll a {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 12.5px;
        padding: 7px 16px;
        border-radius: 50px;
        border: 1px solid var(--line);
        color: var(--mid);
        text-decoration: none;
      }
      
      /* Fixed: Reconstructed the broken/cut-off class selector */
      .toc-mobile-scroll a.active {
        border-color: var(--teal);
        background: var(--teal);
        color: var(--white);
      }

      /* New Mobile Addition: Reduce section card padding so it fits on mobile */
      .legal-section {
        padding: 24px 20px;
      }

      /* New Mobile Addition: Force contact card columns to stack vertically */
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      
      /* New Mobile Addition: Clean up glance card spacing for phone viewports */
      .glance-card {
        padding: 20px 24px;
      }
      .legal-hero-inner{
        padding: 10px;
      }
    }