@import url('https://fonts.googleapis.com/css2?family=Lekton:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700;900&display=swap');

/* Bullet dot styling - increase size and make bold */
.bullet-dot {
  font-size: 1em !important;
  font-weight: 900 !important;
  color: #000 !important;
  vertical-align: text-bottom !important;
  margin-right: 8px !important;
  line-height: 1 !important;
  display: inline-block !important;
  font-family: serif !important;
}

#upcoming-events > div:first-child {
  font-weight: 900 !important;
}

#upcoming-events p1 {
  font-weight: 900 !important;
}

#upcoming-events span {
  font-weight: 900 !important;
  font-size: 16px;
}

/* Make venue headings in location sections bold and styled */
.location-section span[style*="font-weight: 700;"][style*="font-size: 16px;"],
.location-dining-full span[style*="font-weight: 700;"][style*="font-size: 16px;"] {
  font-weight: 700 !important;
  font-family: var(--font-body), 'Lora', serif !important;
  color: #222 !important;
}
/* Force bold for venue headings in location sections */
.location-section strong,
.location-dining-full strong {
  font-weight: 700 !important;
  color: #000 !important;
  font-family: inherit !important;
}
/* Bold section headings in location page */
.location-section h4,
.location-dining-full h4 {
  font-weight: 700 !important;
}
/* Uniform size for location images */
 .location-section .location-section-img,
 .location-dining-full .location-section-img {
   width: 100%;
   max-width: 600px;
   height: 260px;
   object-fit: cover;
   border-radius: 10px;
   display: block;
   margin: 12px 0 16px 0;
  cursor: pointer;
}

/* Image Modal Styles */
.image-modal {
  display: none;
  position: fixed;
  z-index: 13000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.image-modal-content {
  margin: 0 auto;
  display: block;
  width: 600px;
  height: 400px;
  max-width: 90vw;
  max-height: 70vh;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
  background: #fff;
}
@media (max-width: 1024px) {
  .image-modal-content {
    width: 90vw !important;
    height: 70vh !important;
    max-width: 90vw !important;
    max-height: 70vh !important;
    min-width: 220px !important;
    min-height: 220px !important;
    object-fit: cover !important;
    display: block;
    margin: 0 auto;
  }
}
.image-modal-caption {
  color: #fff;
  margin: 18px auto 0 auto;
  font-size: 20px;
  font-family: inherit;
  text-shadow: 0 2px 8px #000;
  max-width: 90vw;
  text-align: center;
  background: none;
  display: block;
  padding-bottom: 32px;
}
@media (max-width: 1024px) {
  .image-modal-content {
    max-width: 96vw !important;
    max-height: 70vh !important;
    width: 90vw !important;
    height: 70vh !important;
  }
  .image-modal-caption {
    font-size: 16px;
    padding-bottom: 18px;
  }
}
.image-modal-close {
  position: absolute;
  top: 32px;
  right: 50%;
  transform: translateX(300px); /* 600px/2 = 300px, matches image width */
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  text-shadow: 0 2px 8px #000;
  background: rgba(0,0,0,0.25);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: background 0.2s;
}
.image-modal-close:hover {
  background: rgba(0,0,0,0.5);
}
@media (max-width: 700px) {
  .image-modal-close {
    top: 18px;
    right: 8vw;
    transform: none;
    font-size: 32px;
    width: 36px;
    height: 36px;
  }
}
.image-modal-caption {
  color: #fff;
  margin-top: 18px;
  font-size: 18px;
  font-family: inherit;
  text-shadow: 0 2px 8px #000;
}
.sidebar-link,
.sidebar-submenu a {
  font-family: 'Lekton', var(--font-subheading), sans-serif !important;
}
/* Sidebar Dropdowns for Mobile */
.sidebar-menu {
  position: relative;
}
.sidebar-link.has-submenu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 8px 10px;
  font-size: 16px;
  cursor: pointer;
}
.sidebar-dropdown-arrow {
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.2s;
}
.sidebar-menu.open .sidebar-dropdown-arrow {
  transform: rotate(180deg);
}
.sidebar-submenu {
  display: none;
  flex-direction: column;
  background: #fff;
  padding-left: 18px;
  padding-bottom: 6px;
}
.sidebar-menu.open .sidebar-submenu {
  display: flex;
}
.sidebar-submenu a {
  padding: 6px 0;
  font-size: 15px;
  color: #580f41;
  text-decoration: none;
  border: none;
  background: none;
}
.sidebar-submenu a:hover {
  text-decoration: underline;
}

@import url('https://fonts.googleapis.com/css2?family=Lekton:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Responsive padding for Smart Boutique Business Hotel subtitle */
@media (max-width: 900px) {
  .smart-boutique-hotel {
    padding: 0 14px !important;
  }
}

@font-face {
  font-family: "RETROPIX";
  src: url("./Retropix.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "PressStart";
  src: url("./fonts/PressStart2P.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Final mobile authority: remove large min-heights and excessive paddings that create big gaps */
@media (max-width: 1023px) {
  .experience-wrapper,
  .experience-grid,
  .experience-grid-section,
  .stay-grid,
  .stay-locations-section {
    min-height: auto !important;
    padding: 12px 0 !important;
  }

  .experience-wrapper {
    gap: 20px !important;
    padding: 0 14px !important;
    min-height: auto !important;
  }

  .stay-content,
  .experience-content {
    padding: 28px 16px !important;
  }

  .rethinking-section { padding-bottom: 6px !important; }
  .rethinking-wrapper { padding: 0 14px !important; }

  /* Reduce any large top/bottom spacing globally on mobile */
  .section { padding-top: 12px !important; padding-bottom: 12px !important; }

  /* Reduce header margins for section headers on mobile */
  .section-header { margin-bottom: 16px !important; }
}
/* Strictly scoped modal carousel arrows */
.room-modal .room-modal-images {
  position: relative;
}
.room-modal .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: none;
  color: #580f41;
  font-size: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  opacity: 0.92;
}
.room-modal .carousel-arrow.left {
  left: 12px;
}
.room-modal .carousel-arrow.right {
  right: 12px;
}
.room-modal .carousel-arrow:hover {
  background: #580f41;
  color: #fff;
  opacity: 1;
}
/* Add 2px space between stay and experience sections only */
.stay-locations-section + .experience-section {
  margin-top: 2px !important;
}

/* Add 2px space between experience and next section (if needed) */
.experience-section + section {
  margin-top: 2px !important;
}

/* Add 2px gap between images in gallery columns (experience gallery) */
.experience-gallery .gallery-column {
  gap: 2px;
}
.experience-gallery .gallery-item {
  margin-bottom: 0 !important;
}

/* Add 2px gap for stay-image and experience-image if they contain multiple images */
.stay-image, .experience-image {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Extra-last-resort compacting for mobile: remove remaining top spacing */
@media (max-width: 1023px) {
  .rethinking-section, .experience-section, .stay-locations-section {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .experience-content, .stay-content {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .section-title { margin-top: 0 !important; }
  .rethinking-text { margin-bottom: 4px !important; }
}

/* Also apply the same compacting for devices targeting 1024px breakpoints */
@media (max-width: 1024px) {
  .experience-wrapper,
  .experience-grid,
  .experience-grid-section,
  .stay-grid,
  .stay-locations-section {
    min-height: auto !important;
    padding: 8px 0 !important;
  }

  .experience-wrapper { gap: 16px !important; padding: 0 12px !important; min-height: auto !important; }
  .stay-content, .experience-content { padding: 22px 12px !important; }
  .rethinking-section { padding-bottom: 6px !important; }
  .rethinking-wrapper { padding: 0 12px !important; }
  .section { padding-top: 10px !important; padding-bottom: 10px !important; }
  .section-header { margin-bottom: 12px !important; }
  .section-title { margin-top: 0 !important; }
}

/* Moxy-style booking bar (desktop first). Also provide a compact stacked mobile layout. */
.booking-bar {
  display: block; /* show by default (mobile + desktop) */
  margin: 12px 0;
}

/* Desktop layout: centered labels */
@media (min-width: 1024px) {
  .booking-field label {
    text-align: center !important;
  }
}

/* Mobile / narrow layout: stack fields */
@media (max-width: 1023px) {
  .booking-bar .container { padding: 0 16px; }
  .booking-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    background: #f2f2f2;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(10,10,10,0.04);
    border: 1px solid rgba(10,10,10,0.03);
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .booking-field { width: 100%; }
  .booking-field label { margin-bottom: 6px; }
  .booking-field input[type="date"], .booking-field select { width: 100%; }
  .booking-field.booking-cta { display: flex; justify-content: center; }
  .booking-form .btn-primary { width: 100%; padding: 12px 16px; }

  /* Extra: fix input font size, padding, and prevent overflow */
  .booking-form input[type="date"],
  .booking-form select {
    font-size: 15px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(10,10,10,0.10);
    background: #fff;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

    /* Add calendar icon to date inputs */
    .booking-field input[type="date"] {
      background-color: #fff !important;
      color: #580f41 !important;
      font-size: 14px !important;
      cursor: pointer;
      text-align: center !important;
      letter-spacing: 1px;
      direction: ltr;
      -webkit-appearance: none !important;
      appearance: none !important;
      accent-color: #c4d6b0 !important;
      padding: 8px 10px !important;
    }
    /* For Firefox */
    .booking-field input[type="date"]::-moz-placeholder { text-align: center !important; }
    .booking-field input[type="date"]::-webkit-input-placeholder { text-align: center !important; }
    .booking-field input[type="date"]::-ms-input-placeholder { text-align: center !important; }
    /* For iOS Safari and all browsers - universal date alignment */
    input[type="date" i] { text-align: center !important; }
    .booking-field input[type="date"]::placeholder { text-align: center !important; }
    @media (max-width: 1023px) {
      .booking-field input[type="date"] {
        color: #580f41 !important;
      }
    }
    /* Remove native calendar icon to avoid double icon (all browsers) */
    /* Style native calendar picker with #c4d6b0 color */
    .booking-field input[type="date"]::-webkit-calendar-picker-indicator {
      cursor: pointer;
      filter: brightness(0) saturate(100%) invert(65%) sepia(20%) hue-rotate(85deg) brightness(1.1);
      opacity: 0.9;
    }
    .booking-field input[type="date"]::-ms-input-placeholder {
      color: transparent;
    }
    .booking-field input[type="date"]::-moz-placeholder {
      color: transparent;
    }
    .booking-field input[type="date"]::-webkit-input-placeholder {
      color: transparent;
    }
    .booking-field input[type="date"]:focus::-webkit-calendar-picker-indicator {
      opacity: 0;
      display: none;
    }
    /* Ensure icon is visible on all backgrounds */
    .booking-field input[type="date"]:focus {
      outline: 2px solid #b4d2e7;
      background-color: #f7faff;
    }

  /* Fix button spacing on very small screens */
  .booking-form .btn-primary {
    font-size: 15px;
    padding: 14px 0;
    border-radius: 8px;
    margin-top: 4px;
  }

  /* Prevent horizontal scroll on mobile */
  .booking-bar, .booking-form, .booking-bar .container {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Homepage mobile: single-image sections should be full-screen/edge-to-edge */
@media (max-width: 768px) {
  body.home .split-image,
  body.home .stay-image,
  body.home .experience-image,
  body.home .gallery-section .gallery-item {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.home .split-image,
  body.home .stay-image,
  body.home .experience-image {
    height: 78vh !important;
    min-height: 420px !important;
    max-height: none !important;
  }

  body.home .gallery-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  body.home .gallery-section .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 78vh !important;
    gap: 1.5px !important;
  }
}

/* Mobile full-bleed photos + thin line between stacked photos */
@media (max-width: 768px) {
  .gallery-section,
  .gallery-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .gallery-grid,
  .gallery-grid-full {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 78vh !important;
    gap: 1.5px !important; /* line space between photos */
    background: #f2f2f2 !important;
  }

  .gallery-grid .gallery-item,
  .gallery-grid-full > div {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .gallery-grid .gallery-item img,
  .gallery-grid-full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* Homepage: section before "WELCOME TO PXL" must be full-bleed on mobile */
@media (max-width: 1024px) {
  body.home .experience-grid-section,
  body.home .experience-grid-section .container-full,
  body.home .experience-grid-section .experience-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home .experience-grid-section .experience-gallery {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    gap: 1.5px !important;
    background: #f2f2f2 !important;
  }

  body.home .experience-grid-section .gallery-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .experience-grid-section .gallery-item {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    margin-bottom: 1px !important;
  }

  body.home .experience-grid-section .gallery-column:last-child .gallery-item:last-child {
    margin-bottom: 0 !important;
  }
}

/* Final homepage gallery spacing fix (section after Experience) */
body.home .gallery-section .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home .gallery-section .gallery-grid {
  gap: 1.5px !important;
  margin-top: 0 !important;
}

body.home .gallery-section .gallery-item {
  margin: 0 !important;
}

@media (max-width: 1023px) {
  body.home .gallery-section .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5px !important;
    grid-auto-rows: 78vh !important;
  }

  body.home .gallery-section .gallery-grid > .gallery-item {
    aspect-ratio: auto !important;
    height: 78vh !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  body.home .gallery-section .gallery-grid > .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* Final mobile override for section before newsletter (experience-grid-section images) */
@media (max-width: 768px) {
  body.home .experience-grid-section,
  body.home .experience-grid-section .container-full,
  body.home .experience-grid-section .experience-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.home .experience-grid-section .experience-gallery,
  body.home .experience-grid-section .gallery-column {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    gap: 1.5px !important; /* line space between photos */
    background: #f2f2f2 !important;
  }

  body.home .experience-grid-section .gallery-item {
    width: 100% !important;
    height: 78vh !important;
    min-height: 420px !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
  }

  body.home .experience-grid-section .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* Additional mobile refinements: tighten label size and input spacing */
@media (max-width: 1023px) {
  .booking-form { padding: 10px 8px; border-radius: 12px; }
  .booking-field label {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--text-muted, #666);
  }
  .booking-field input[type="date"], .booking-field select {
    height: 44px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.12);
    background: transparent;
    font-size: 16px;
  }
  .booking-form .btn-primary {
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(201,169,97,0.12);
  }

  /* Make the Book CTA gold on mobile too */
  .booking-form .btn-primary {
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-color));
    color: var(--white);
  }
}

@media (min-width: 1024px) {
  .booking-bar {
    display: block;
    margin-top: 18px;
    margin-bottom: 24px;
  }
  .booking-bar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
  }
  /* center the booking card and constrain its width like Moxy */
  .booking-bar .container {
    display: flex;
    justify-content: center;
  }
  .booking-form {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #f2f2f2;
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(10,10,10,0.06);
    border: 1px solid rgba(10,10,10,0.04);
    width: 100%;
    max-width: 980px; /* constrain card width */
  }
  .booking-field {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--text-light);
  }
  .booking-field label {
    font-weight: 700;
    color: var(--text-lighter);
    margin-bottom: 6px;
    letter-spacing: 1px;
  }
  .booking-field input[type="date"] {
    height: 40px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(10,10,10,0.08);
    background: #f2f2f2;
    font-size: 14px;
    color: var(--text-dark);
    text-align: center;
    -webkit-appearance: none !important;
    appearance: none !important;
    accent-color: #c4d6b0 !important;
    cursor: pointer;
  }
  .booking-field select {
    height: 40px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(10,10,10,0.08);
    background: #f2f2f2;
    font-size: 14px;
    color: var(--text-dark);
    text-align: center;
  }
  /* Layout sizing: make date fields grow, guests fixed */
  .booking-field:nth-of-type(1),
  .booking-field:nth-of-type(2) {
    flex: 1 1 0;
    min-width: 220px;
  }
  .booking-field:nth-of-type(3) {
    flex: 0 0 88px;
  }
  .booking-field.booking-cta {
    flex: 0 0 auto;
  }
  .booking-field.booking-cta {
    margin-left: 8px;
  }
  .booking-form .btn-primary {
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-color));
    color: var(--white);
    padding: 12px 22px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 6px 18px rgba(201,169,97,0.18);
  }
}

/* Compact hamburger and sidebar spacing (desktop + mobile) */
.hamburger .bar {
  height: 2px;
  border-radius: 2px;
  margin: 3px 0; /* reduce gap between bars */
  transition: all 0.18s ease;
}

.sidebar {
  padding: 8px 12px; /* overall container padding */
}

.sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px; /* reduced gap between items */
  padding: 6px 0;
}

.sidebar .sidebar-link {
  display: block;
  padding: 8px 10px; /* tighter vertical padding */
  line-height: 1.12; /* reduce line spacing */
  font-size: 16px;
}

.sidebar .sidebar-link .sidebar-link-text {
  font-size: 12px !important;
}

@media (min-width: 1024px) {
  .sidebar {
    padding: 6px 10px;
  }

  .sidebar .sidebar-nav {
    gap: 6px;
    padding: 4px 0;
  }

  .sidebar .sidebar-link {
    padding: 6px 8px;
    font-size: 15px;
  }

  .sidebar .sidebar-link .sidebar-link-text {
    font-size: 12px !important;
  }
}

/* Hide hamburger on desktop for homepage only */
@media (min-width: 1024px) {
  body.no-hamburger .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure nav spacing looks good when hamburger is hidden */
  body.no-hamburger .header-right .nav {
    display: flex;
    gap: 28px;
    align-items: center;
  }
}

@media (max-width: 1023px) {
  .sidebar .sidebar-nav {
    gap: 7px;
  }

  .sidebar .sidebar-link {
    padding: 7px 10px;
    font-size: 16px;
  }

  .sidebar .sidebar-link .sidebar-link-text {
    font-size: 17px !important;
  }
}

/* Using Google Fonts - Dancing Script for elegant script typography */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

/* Ensure all named sections clear the fixed header when jumped to via anchor */
section[id] {
  scroll-margin-top: 120px;
}

:root {
  --primary-color: #0a0a0a;
  --primary-dark: #000000;
  --secondary-color: #fafafa;
  --accent-color: #d4af37;
  --accent-gold: #c9a961;
  --accent-gold-light: #e5d4a0;
  --text-dark: #1a1a1a;
  --text-light: #6b6b6b;
  --text-lighter: #9a9a9a;
  --white: #f2f2f2;
  --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: all 0.3s ease;

  /* Typography - Three main fonts */
  --font-heading: "Press Start 2P", "PressStart", monospace; /* Headings (h1-h6, page titles) */
  --font-subheading: "Lekton", sans-serif; /* Subheadings, labels, buttons */
  --font-body: "Lekton", sans-serif; /* Body text, paragraphs, descriptions */
  --font-serif: "Lekton", sans-serif;
  --font-display: "Press Start 2P", "PressStart", monospace;
  --font-script: "Press Start 2P", "PressStart", monospace;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.5;
  overflow-x: hidden;
  font-weight: 400; /* Lato Regular */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
}

/* Semantic HTML font rules - THREE FONT SYSTEM */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400; /* Press Start 2P default weight */
  line-height: 1.6; /* Extra line spacing for pixel font readability */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

p {
  font-family: var(--font-body);
  font-weight: 400; /* Lato Regular */
}

label, button, input[type="button"], input[type="submit"], .btn {
  font-family: var(--font-subheading);
  font-weight: 700; /* Lato Bold */
}

strong, b, .bold {
  font-weight: 700; /* Lato Bold */
}

em, i, .italic {
  font-style: italic;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  margin-bottom: 0px;
  padding: 0 80px;
}

.container1{
  max-width: 1400px;
    margin: 0 auto;
    margin-bottom: 30px;
    padding: 0 20px;
}
/* Header - Premium */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 5px 0;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 99999;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-bottom: none;
  overflow: visible;
  /* Set exactly 30px space between hero and overview section on location page */
  .section.location-section {
    margin-top: 30px !important;
    padding-top: 0 !important;
  }
  box-shadow: none;
}

/* Glass strip only at menu text height (desktop/tablet), not full header */
@media (min-width: 769px) {
  .header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 56px;
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
    z-index: 1;
  }

  .header .container {
    position: relative;
    z-index: 2;
  }
}

/* Translucent highlight bar for header nav (desktop only) */
@media (min-width: 1024px) {
  .header-right .nav a,
  .header .header-right .nav a {
    position: relative;
    padding: 0;
    border-radius: 0;
    z-index: 2;
    transition: color 0.2s ease;
  }

  .header-right .nav a:not(.nav-link)::before,
  .header .header-right .nav a:not(.nav-link)::before {
    display: none;
  }

  /* Dark-text header (light background) - use darker translucent bar */
  .header.header-dark-text .header-right .nav a:not(.nav-link)::before,
  .header.header-dark-text .header .header-right .nav a:not(.nav-link)::before {
    background: rgba(10,10,10,0.06);
  }

  .header-right .nav a:not(.nav-link):hover::before,
  .header .header-right .nav a:not(.nav-link):hover::before,
  .header-right .nav a:not(.nav-link).active::before,
  .header .header-right .nav a:not(.nav-link).active::before {
    opacity: 1;
  }

  /* Make sure nav links sit above the pseudo-bg */
  .header-right .nav a span,
  .header .header-right .nav a span,
  .header-right .nav a,
  .header .header-right .nav a {
    position: relative;
    z-index: 2;
  }
  
  /* Adaptive pill backgrounds so header options remain readable
     when a section has both dark and light areas (split backgrounds) */
  .header-right .nav a:not(.nav-link) {
    background: transparent;
    color: #fff;
    padding: 0;
    border-radius: 0;
    transition: color 0.25s ease;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* When the header switches to dark text (over light sections),
     make the pill light so contrast is preserved */
  .header.header-dark-text .header-right .nav a:not(.nav-link) {
    background: transparent !important;
    color: var(--primary-color) !important;
    box-shadow: none;
  }

  /* Locations link should follow the same adaptive style */
  .locations-link {
    background: transparent;
    color: #fff;
    padding: 0;
    border-radius: 0;
    transition: background 0.25s ease, color 0.25s ease;
  }

  .hotel-link {
    background: transparent;
    color: #fff;
    padding: 0;
    border-radius: 0;
    transition: color 0.25s ease;
    text-decoration: none;
    margin-right: 0;
    font-size: 19px;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-family: "Lekton", sans-serif !important;
  }

  .header.header-dark-text .locations-link {
    background: transparent !important;
    color: var(--primary-color) !important;
  }

  .header.header-dark-text .hotel-link {
    background: transparent !important;
    color: #333 !important;
    text-decoration: none !important;
    font-family: "Lekton", sans-serif !important;
  }
  /* Ensure header nav is visible on desktop and hide hamburger */
  .header-right .nav { display: flex; gap: 28px; align-items: center; }
  .header-right .nav { padding-right: 150px; }
  .menu-toggle { display: none !important; visibility: hidden !important; }
}

@media (max-width: 1023px) {
  .book-ribbon {
    display: none !important;
  }
}

.header.scrolled {
  padding: 12px 0;
}

/* Dropdown submenu link styles — color handled by .hotel-submenu a rules below */
.nav-submenu a {
  color: var(--primary-dark) !important;
  text-shadow: none !important;
}

.header.header-dark-text .nav-submenu a {
  color: var(--primary-dark) !important;
  text-shadow: none !important;
}

/* Base text color for dark backgrounds (Hero/Intro) */
.header .nav a:not(.nav-submenu a),
.header .nav > div > a:not(.nav-submenu a),
.header .locations-link,
.header .hotel-link,
.header .menu-toggle span {
  color: var(--white);
  transition: color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.header .menu-toggle span {
  background-color: var(--white);
}

/* State for light backgrounds (switches text to dark) */
.header.header-dark-text .nav a,
.header.header-dark-text .locations-link {
  color: var(--primary-color) !important;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
}

.header.header-dark-text .menu-toggle span {
  background-color: var(--primary-color) !important;
}

.header.header-dark-text .logo-img {
  filter: invert(1) brightness(0.2);
}

.header .container {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Logo on left */
.header-left {
  flex: 0.47;
  display: flex;
  align-items: center;
}

/* All 6 nav links in one centered group */
.header-center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  margin: 0;
  gap: 65px;
}

.hotel-menu {
  position: relative;
  display: inline-block;
}

.hotel-submenu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #1a0d14;
  padding: 8px 0;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,169,97,0.15);
  display: none;
  opacity: 0;
  min-width: 270px;
  z-index: 11002;
  border-top: 2px solid #580f41;
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Arrow tip at the top */
.hotel-submenu::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #580f41;
}

.hotel-submenu a {
  display: block;
  padding: 5px 10px;
  color: rgba(255,255,255,0.72);
  background: transparent;
  font-family: 'Lora', 'Georgia', serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: none;
  border-bottom: none;
  transition: color 0.18s ease, padding-left 0.18s ease;
  white-space: nowrap;
  line-height: 1.5;
  position: relative;
}

/* Subtle left-side gold line on hover */
.hotel-submenu a::before {
  display: none;
}

.hotel-submenu a:hover {
  color: #c4d6b0;
  padding-left: 24px;
  background: transparent;
}

.hotel-submenu a:hover::before {
  display: none;
}

.hotel-submenu a:last-child {
  border-bottom: none;
}

.hotel-menu.is-open .hotel-submenu {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hotel-menu.is-open .hotel-link {
  color: #580f41 !important;
  opacity: 1;
  font-family: "Lekton", sans-serif !important;
}

/* Navigation menu dropdowns (Experience, Offers, About, Photos) */
.nav {
  display: flex;
  gap: 28px;
}

.nav-menu {
  position: relative;
  display: inline-block;
}

.nav-link {
  background: transparent;
  color: #fff;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: var(--font-subheading);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
}

.nav-link:hover {
  opacity: 1;
  color: var(--accent-gold);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: var(--white);
  padding: 0;
  border-radius: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  display: none;
  min-width: 250px;
  z-index: 1000;
  border-top: 2px solid var(--accent-burgundy, #7b2c4a);
}

.nav-submenu a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: var(--primary-dark);
  background: var(--white);
  font-family: var(--font-subheading);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--primary-dark);
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  line-height: 1.2;
  min-height: 48px;
}

.nav-submenu a:last-child {
  border-bottom: none;
}

.nav-submenu a:hover {
  background: var(--accent-burgundy, #7b2c4a);
  color: var(--white);
}

.nav-menu.is-open .nav-submenu {
  display: block;
}

.nav-menu.is-open .nav-link {
  color: var(--accent-burgundy, #7b2c4a) !important;
  opacity: 1 !important;
}

.header.header-dark-text .nav-link {
  color: var(--primary-color) !important;
}

.header.header-dark-text .nav-menu.is-open .nav-link {
  color: var(--accent-burgundy, #7b2c4a) !important;
}

/* BOOK ribbon + hamburger on right */
.header-right {
  flex: 0.6;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-left: 0;
  margin-top: 32px;
}

.book-ribbon {
  position: relative;
  width: 120px;
  height: auto;
  padding: 10px 24px 34px 24px;
  background: #c4d6b0;
  color: #580f41 !important;
  text-decoration: none;
  text-transform: capitalize;
  font-family: "Lekton", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em;
  font-size: 16px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.0;
  z-index: 10;
  transition: all 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(196, 214, 176, 0.3);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
  text-shadow: none !important;
}

.book-ribbon span {
  font-size: 22px;
  display: block;
  margin: 0;
  padding: 0;
  font-family: "Lekton", sans-serif !important;
  font-weight: 900 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
}

  .book-ribbon:hover {
    transform: translateY(-2px);
    background: #b0c89c;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(196, 214, 176, 0.4);
}


.booking-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 15000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(84px, 10vh, 120px) 20px 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms ease-in-out, visibility 360ms ease-in-out;
}

.booking-panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.booking-panel {
  width: min(960px, 100%);
  background: #070707;
  border: 1px solid rgba(180, 210, 231, 0.35);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
  padding: clamp(18px, 2vw, 28px);
  color: #b4d2e7;
  position: relative;
  z-index: 15001;
  transform: translateY(-28px);
  opacity: 0;
  transition: transform 360ms ease-in-out, opacity 360ms ease-in-out;
}

.booking-panel-overlay.is-open .booking-panel {
  transform: translateY(0);
  opacity: 1;
}

.booking-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(196, 214, 176, 0.65);
  background: #c4d6b0;
  color: #580f41;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.booking-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 18px;
}

.booking-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-field-group-full {
  grid-column: 1 / -1;
}

.booking-panel-label {
  color: #b4d2e7;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-family: var(--font-subheading); /* Lato Bold */
  font-weight: 700;
}

.booking-panel-input,
.booking-panel-select {
  width: 100%;
  min-height: 56px;
  border: 2px solid #c4d6b0;
  background: #070707;
  color: #c4d6b0;
  padding: 0 14px;
  font-size: 18px;
  outline: none;
  cursor: pointer;
  transition: border-color 180ms ease-in-out, background-color 180ms ease-in-out;
}

.booking-panel-input:hover,
.booking-panel-select:hover {
  border-color: #b0c89c;
  background-color: rgba(7, 7, 7, 0.8);
}

.booking-panel-input:focus,
.booking-panel-select:focus {
  border-color: #b0c89c;
  background-color: rgba(20, 20, 20, 0.9);
}

.booking-panel-select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23c4d6b0" d="M1 1l5 5 5-5"/></svg>');
  background-position: calc(100% - 14px) center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 44px;
  font-style: italic;
}

/* Calendar styling for booking panel date inputs */
.booking-panel-input[type="date"] {
  accent-color: #c4d6b0 !important;
}

/* Style picker button to match #c4d6b0 color */
.booking-panel-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1) brightness(0.8) sepia(0.5) hue-rotate(80deg);
}

/* Style dropdown options when opened */
.booking-panel-select option {
  background: #070707;
  color: #c4d6b0;
  font-style: italic;
  padding: 10px 14px;
  margin: 4px 0;
  border: none;
}

/* Style selected option in dropdown */
.booking-panel-select option:checked {
  background: linear-gradient(#c4d6b0, #c4d6b0);
  background-color: #c4d6b0;
  color: #000000;
  font-style: italic;
}

/* Style option hover (browser-dependent, but helps some browsers) */
.booking-panel-select option:hover {
  background: rgba(196, 214, 176, 0.2);
  color: #c4d6b0;
}

/* Custom Dropdown Styling */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown-trigger {
  width: 100%;
  min-height: 56px;
  border: 2px solid #c4d6b0;
  background: #070707;
  color: #c4d6b0;
  padding: 0 14px;
  font-size: 18px;
  font-style: italic;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 180ms ease-in-out, background-color 180ms ease-in-out;
}

.custom-dropdown-trigger:hover {
  border-color: #b0c89c;
  background-color: rgba(7, 7, 7, 0.8);
}

.custom-dropdown-trigger:focus {
  border-color: #b0c89c;
  background-color: rgba(20, 20, 20, 0.9);
}

.custom-dropdown-arrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><polygon points="5,8 10,13 15,8" fill="%23c4d6b0"/></svg>') no-repeat center center;
  background-size: 20px 20px;
  transition: transform 200ms ease-in-out;
}
.custom-dropdown.open .custom-dropdown-arrow {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #070707;
  border: 2px solid #c4d6b0;
  border-top: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease-in-out;
  z-index: 12001;
}

.custom-dropdown.open .custom-dropdown-menu {
  max-height: 300px;
}

.custom-dropdown-option {
  padding: 12px 14px;
  color: #c4d6b0;
  font-size: 18px;
  font-style: italic;
  cursor: pointer;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
  border-bottom: 1px solid rgba(196, 214, 176, 0.2);
}

.custom-dropdown-option:last-child {
  border-bottom: none;
}

.custom-dropdown-option:hover {
  background-color: rgba(196, 214, 176, 0.15);
  color: #ffffff;
}

.custom-dropdown-option.active {
  background-color: rgba(196, 214, 176, 0.3);
  color: #c4d6b0;
  font-weight: 700;
}

.booking-panel-cta {
  min-height: 60px;
  border: 1px solid rgba(196, 214, 176, 0.65);
  background: #c4d6b0;
  color: #580f41;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 900 !important;
  cursor: pointer;
  transition: filter 180ms ease-in-out;
  font-family: "Lekton", sans-serif !important;
  font-family: "Lekton", sans-serif !important;
}

.booking-panel-cta:hover {
  filter: brightness(1.08);
}

@media (max-width: 768px) {
  .booking-panel-overlay {
    padding: 84px 12px 12px;
    align-items: flex-start;
  }

  .booking-panel {
    width: 100%;
    padding: 16px 14px;
  }

  .booking-panel-grid {
    grid-template-columns: 1fr;
  }

  .booking-panel-input,
  .booking-panel-select {
    min-height: 52px;
    font-size: 16px;
  }

  .booking-panel-cta {
    min-height: 54px;
    font-size: 22px;
  }
}

.locations-link {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-subheading);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
  opacity: 0.8;
}

.locations-link:hover {
  opacity: 1;
  color: var(--accent-gold);
}

.hotel-link {
  color: var(--white);
  text-decoration: none;
  font-family: "Lekton", sans-serif !important;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease, opacity 0.25s ease;
  opacity: 1;
  margin-right: 0;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

.hotel-link:hover {
  opacity: 1;
  color: #580f41 !important;
  text-shadow: 0 2px 12px rgba(201,169,97,0.35);
}

.locations-link span {
  font-size: 10px;
  transition: transform 0.3s ease;
}


.logo {
  display: flex;
  align-items: center;
  height: 48px;
  font-family: var(--font-display);
  position: relative;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  /* Ensure no background is rendered */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.logo-img {
  display: block !important;
  width: auto;
  height: 70px;
  max-width: 160px;
  object-fit: contain;
  object-position: center;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  /* Force transparency - remove any background rendering */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* Ensure proper PNG transparency rendering */
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Remove any filters that might affect transparency */
  filter: none !important;
  /* Ensure no box shadow creating background appearance */
  box-shadow: none !important;
  /* Force proper alpha channel rendering */
  opacity: 1;
  /* Try mix-blend-mode to help with transparency */
  mix-blend-mode: normal;
  /* Additional transparency enforcement */
  -webkit-appearance: none;
  appearance: none;
  /* Prevent any default browser background */
  border: none;
  outline: none;
}

.logo-text {
  display: flex !important; /* Show text logo by default */
  align-items: baseline;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1.5;
  position: relative;
  text-shadow: none;
}

.logo-pxl {
  color: var(--primary-color);
  font-weight: 900; /* Extra bold for maximum boldness */
  letter-spacing: 2.5px;
  font-size: 28px;
  text-shadow: none;
  transition: color 0.3s ease;
  font-family: "Lekton", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-stretch: condensed;
}

.logo:hover .logo-pxl {
  letter-spacing: 3.5px;
  color: var(--primary-color);
}

.logo-27 {
  color: var(--primary-color);
  font-weight: 900; /* Extra bold to match PXL */
  margin-left: 2px;
  letter-spacing: 1.5px;
  font-size: 28px;
  text-shadow: none;
  transition: color 0.3s ease;
  font-family: "Lekton", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-stretch: condensed;
}

.logo:hover .logo-27 {
  color: var(--primary-color);
}

.footer .logo-text {
  display: none !important;
}

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

.nav a {
  text-decoration: none;
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  text-transform: none;
  transition: color 0.3s ease;
  font-family: var(--font-subheading);
  opacity: 0.9;
}

.nav a:hover {
  color: var(--accent-gold);
  opacity: 1;
}

.nav a::before,
.nav a::after {
  display: none !important;
}

.nav a:hover {
  opacity: 1;
  letter-spacing: 3px;
}

.nav a:hover::before,
.nav a:hover::after {
  width: 100%;
}

.nav a.active {
  opacity: 1;
  font-weight: 500;
}

.nav a.active::after {
  width: 100%;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: var(--transition-fast);
  z-index: 11002 !important;
  position: relative;
  width: auto;
  height: auto;
  min-width: 50px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  visibility: visible;
  opacity: 1;
  pointer-events: auto !important;
}

.menu-toggle:hover {
  background: rgba(0, 0, 0, 0.03);
}


.menu-toggle span {
  width: 38px;
  height: 4px;
  background: var(--white);
  transition: var(--transition-fast);
  border-radius: 3px;
  display: block;
  visibility: visible;
  opacity: 1;
}

/* Hamburger color adapts to header background */
.header.header-dark-text .menu-toggle span {
  background: var(--primary-color) !important;
}

@media (max-width: 768px) {
  .menu-toggle span {
    width: 28px;
    height: 4px;
    background: var(--white);
    display: block;
    transition: all 0.3s ease;
    border-radius: 3px;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .header.header-dark-text .menu-toggle span {
    background: var(--primary-color) !important;
  }
}

.menu-toggle.active span {
  height: 4px;
  width: 32px;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 12px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -12px);
}

/* Sidebar Menu - Elegant */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 11998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  cursor: pointer;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}

.sidebar {
  position: fixed;
  top: 0;
  right: -100% !important;
  width: 280px;
  max-width: 50vw;
  height: 100vh;
  background: var(--white);
  z-index: 11999 !important;
  transition: right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  box-shadow: -10px 0 60px rgba(0, 0, 0, 0.3);
  pointer-events: auto !important;
  will-change: right;
}

/* Custom Scrollbar for Sidebar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 97, 0.3);
  border-radius: 10px;
  transition: background 0.3s ease;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 169, 97, 0.6);
}

.sidebar.active {
  right: 0 !important;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--primary-dark);
  background: var(--white);
  flex-shrink: 0;
}

.sidebar-back {
  background: none;
  border: none;
  cursor: pointer;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-dark);
  transition: transform 0.3s ease;
  padding: 0;
}

.sidebar-back:hover {
  transform: translateX(-5px);
}

.sidebar-close {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
  padding: 0 15px 0 0;
}

.sidebar-close:hover {
  opacity: 0.6;
}

.sidebar-close-text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--primary-dark);
  text-transform: capitalize;
}

.sidebar-nav {
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  height: auto;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 97, 0.3) rgba(255, 255, 255, 0.05);
  justify-content: flex-start;
}

.sidebar-nav .sidebar-link {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0;
}

.sidebar-book-btn {
  display: block;
  padding: 5px 5px;
  margin: 2px auto;
  width: auto;
  max-width: 140px;
  background: #c4d6b0;
  color: #580f41;
  text-decoration: none;
  text-align: center;
  font-family: "Lekton", sans-serif !important;
  font-size: 16px;
  font-weight: 900 !important;
  letter-spacing: 0.12em;
  text-transform: capitalize;
  border-radius: 4px;
  transition: all 0.3s ease;
  border: 1px solid #b0c89c;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(196, 214, 176, 0.3);
  flex-shrink: 0;
}

.sidebar-book-btn:hover {
  transform: translateY(-1px);
  background: #b0c89c;
  box-shadow: 0 6px 20px rgba(196, 214, 176, 0.4);
  border-color: #9eb989;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 14px; /* compact vertical spacing */
  color: var(--primary-dark);
  background: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--primary-dark);
  transition: all 0.2s ease;
  position: relative;
  line-height: 1.0;
  height: auto;
  min-height: 24px;
  width: 100%;
  white-space: nowrap;
}

.sidebar-link:first-child {
  border-top: 1px solid var(--primary-dark);
}

/* Force all sidebar links to be visible - no hiding allowed */
.sidebar-nav .sidebar-link {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force LOCATIONS link specifically */
.sidebar-nav a[href="location.html"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

.sidebar-link:hover {
  background: var(--primary-color);
  color: var(--white);
}

.sidebar-link-text {
  font-family: "Lekton", sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: capitalize;
  display: block;
  white-space: normal;
  word-break: break-word;
}

/* Page Hero Section */
.page-hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.page-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.4) 100%);
  z-index: 2;
}

.page-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--white);
  max-width: 800px;
  padding: 0 40px;
}

.page-hero-label {
  font-family: var(--font-subheading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  display: block;
  margin-bottom: 20px;
}

.page-hero-title {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
  font-size: clamp(14px, 2.5vw, 36px);
  font-weight: 400;
  margin-bottom: 24px;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  word-spacing: -0.3em;
}

/* Force hero title into two explicit lines (each line won't wrap further) */
.page-hero-title .hero-line {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
  display: block;
  white-space: nowrap;
}

.page-hero-description {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  opacity: 0.95;
  letter-spacing: 0.02em;
}

/* Page Content Section */
.page-content-section {
  padding: 100px 0;
  background: var(--white);
}

/* Offers Page: Custom Offer Headings Styling */
.offers-page .offer-title-lekton {
  font-family: 'Lekton', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: #000 !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.02em;
}

.page-content-grid {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.page-content-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.page-content-item.reverse {
  direction: rtl;
}

.page-content-item.reverse > * {
  direction: ltr;
}

.page-content-image {
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.page-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-content-image:hover img {
  transform: scale(1.05);
}

.page-content-text {
  padding: 40px 0;
}

.page-content-text h2 {
  font-family: var(--font-heading); /* RETROPIX */
  font-size: clamp(14px, 2.5vw, 36px);
  font-weight: 400;
  color: var(--primary-color);
  margin-bottom: 24px;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.page-content-text p {
  font-family: var(--font-body); /* Lato Regular */
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-light);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Hero Section - Premium */
.hero {
  position: relative;
  height: 85vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-video,
.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  min-width: 100%;
  min-height: 100%;
  display: block;
  filter: brightness(1.1) contrast(1.05);
  transition: filter 0.3s ease;
}

/* Fallback image styling */
.hero-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* Show fallback image if video fails */
.hero-video video:not([src]) + img,
.hero-video video[poster] + img {
  display: block;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.25) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Enhanced video overlay for elegant look */
.hero-video .video-overlay {
  background: linear-gradient(
    135deg, 
    rgba(10, 10, 10, 0.4) 0%, 
    rgba(10, 10, 10, 0.2) 50%,
    rgba(10, 10, 10, 0.3) 100%
  );
  backdrop-filter: blur(0.5px);
}

/* Ensure header nav links receive clicks before the hamburger/menu toggle or overlays */
.header-right .nav a,
.header .header-right .nav a {
  position: relative !important;
  z-index: 11000 !important;
  pointer-events: auto !important;
}

/* Keep the header itself interactive and above accidental overlays */
.header {
  z-index: 11001 !important;
  pointer-events: auto !important;
}

/* Reduce clickable footprint of the menu-toggle to avoid overlapping nav links */
.menu-toggle {
  padding: 8px !important;
  margin-right: 0 !important;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--white);
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  margin: 0 auto;
}

.hero-title {
  font-family: 'Press Start 2P', "PressStart", monospace !important; /* Press Start 2P pixel font for hero */
  font-size: clamp(14px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  max-width: none;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 0;
}

.hero-logo {
  width: auto;
  height: auto;
  max-width: 500px;
  max-height: 400px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0;
  padding: 0;
  transform: translateX(55px);
}

.hero-book-btn {
  display: inline-block;
  padding: 14px 40px;
  background: #c4d6b0;
  color: #580f41;
  text-decoration: none;
  font-weight: 900 !important;
  letter-spacing: 2px;
  font-size: 14px;
  border-radius: 4px;
  margin-top: 0px;
  margin-bottom: 15px;
  position: relative;
  top: -24px;
  transition: all 0.3s ease;
  border: 2px solid #b0c89c;
  margin-bottom: 15%;
  font-family: "Lekton", sans-serif !important;
}

.hero-book-btn:hover {
  background: #b0c89c;
  color: #580f41;
  transform: scale(1.05);
}

.title-line {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
  display: inline;
  opacity: 0;
  animation: fadeInUp 1.4s ease forwards;
}

.title-line:nth-child(2) {
  animation-delay: 0.2s;
}

.hero-subtitle {
  font-family: var(--font-heading); /* Press Start 2P for hero subtitle */
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  font-weight: 400;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeInUp 1.4s ease 0.4s forwards;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.8px;
  line-height: 1.8;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeInUp 1.4s ease 0.6s forwards;
  margin-bottom: 100px;
}

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  color: var(--white);
  font-size: 10px;
  letter-spacing: 4px;
  opacity: 0;
  animation: fadeIn 1s ease 1.4s forwards;
  font-weight: 300;
}

.scroll-arrow {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.5);
  margin: 14px auto 0;
  position: relative;
}

.scroll-arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
}

/* Buttons - Premium */
.btn {
  padding: 20px 48px;
  border: none;
  font-size: 11px;
  font-weight: 900 !important; /* Bold for buttons */
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "Lekton", sans-serif !important;
  border-radius: 0;
}

.btn-primary {
  background: #c4d6b0;
  color: #580f41;
  font-family: "Lekton", sans-serif !important;
  font-weight: 900 !important;
}

.btn-primary:hover {
  background: #b0c89c !important;
  color: #580f41 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(196, 214, 176, 0.4);
}

.booking-btn-text {
  font-weight: 900 !important;
  font-family: "Lekton", sans-serif !important;
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* Sections - Premium */
.section {
  padding: 40px 0;
  position: relative;
  background: var(--white);
  color: var(--text-dark);
}

.section:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}

.section-header {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 36px;
}

.section-label {
  display: inline-block;
  font-family: var(--font-subheading); /* Lato Bold for labels */
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-gold);
  margin-bottom: 24px;
}

.section-title {
  font-family: var(--font-heading); /* RETROPIX for all section titles */
  font-size: clamp(24px, 5vw, 48px);
  font-weight: 400;
  margin-bottom: 28px;
  color: var(--primary-color);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Black background sections - override title color */
.intro-section .section-title,
.features-section .section-title,
.testimonials-section .section-title {
  color: var(--primary-color);
}

.intro-section .section-title {
  text-shadow: none;
}

.section-description {
  font-family: var(--font-body); /* Lato Regular for descriptions */
  font-size: 18px;
  color: var(--text-dark);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Black background sections - override description color */
.intro-section .section-description {
  color: var(--primary-color);
  opacity: 0.8;
}

.container-large {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

.container-full {
  width: 100%;
  padding: 0;
}

/* Split Image Section */
.split-image-section {
  background: var(--white);
  padding: 0;
}

.split-wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
  min-height: 600px;
}

.split-image {
  width: 50%;
  position: relative;
  padding: 0 40px;
  flex-shrink: 0;
}

.split-image img {
  width: 100%;
  height: 95%;
  display: block;
  object-fit: cover;
}

.image-tag {
  position: absolute;
  top: 0;
  right: -60px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--primary-color);
  opacity: 0.8;
}

.split-text-panel {
  width: 50%;
  display: flex;
  align-items: center;
  background: var(--white);
  padding: 0px 40px 0px 0px;
}

.split-text-panel .rethinking-wrapper {
  padding: 0;
  width: 100%;
}

.split-spacer {
  width: 50%;
}

@media (max-width: 1024px) {
  .split-image {
    width: 55%;
    padding: 0 25px;
  }
  .split-text-panel {
    width: 45%;
    padding: 40px 25px;
  }
}

@media (max-width: 768px) {
  .split-wrapper {
    flex-direction: column;
    min-height: auto;
  }
  .split-image {
    width: 100%;
    padding: 0 20px;
    min-height: 300px;
  }
  .split-text-panel {
    width: 100%;
    padding: 30px 0;
    min-height: auto;
  }
  .rethinking-wrapper {
    padding: 0 20px;
  }
}

/* Rethinking Text Section */
.rethinking-section {
  background: var(--white);
  padding: 0 0 100px 0;
}

.rethinking-wrapper {
  padding: 0 40px;
}

.rethinking-subtitle {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-dark);
  margin: 0 0 24px 0;
  padding: 0;
  letter-spacing: 0;
  text-align: left;
}

.rethinking-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-dark);
  width: 100%;
  max-width: 100%;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 28px 0;
  padding: 0;
  display: block;
  text-align: left;
}

.rethinking-text:last-child {
  margin-bottom: 0;
}

  .rethinking-text .highlight {
  font-weight: 700 !important;
  font-style: normal !important;
  display: inline !important;
  padding: 0 !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  border-radius: 0 !important;
  -webkit-box-decoration-break: none !important;
  box-decoration-break: none !important;
}

/* Experience Grid Section - Sticky Left, Scroll Right */
.experience-grid-section {
  background: var(--white);
  padding: 0;
  margin: 0;
  color: var(--primary-dark);
  overflow: hidden;
  position: relative;
}

.experience-grid-section .container-full {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.experience-wrapper {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Mobile overrides: reduce large vertical spacing between sections */
@media (max-width: 1023px) {
  .rethinking-section {
    padding-bottom: 20px; /* tighten space below the rethinking text */
  }
  .rethinking-wrapper { padding: 0 25px; }
  .rethinking-text { font-size: clamp(14px, 5vw, 24px); line-height: 1.0; }

  .experience-grid-section { padding: 40px 0; }
  .experience-wrapper { padding: 0 25px; gap: 24px; min-height: 60vh; }

  /* If any section has large bottom margins, reduce them globally on mobile */
  .section { padding-top: 18px; padding-bottom: 18px; }
}

.experience-sticky {
  display: none;
}

.experience-title {
  font-family: var(--font-heading); /* RETROPIX */
  font-size: clamp(16px, 4vw, 30px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15em;
  margin-bottom: 60px;
  text-transform: uppercase;
  max-width: 400px;
  color: var(--primary-dark);
}

.experience-desc {
  font-family: var(--font-body); /* Lato Regular */
  font-size: 17px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 45px;
  max-width: 360px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.approach-link {
  font-family: var(--font-subheading); /* Lato Bold for links */
  color: var(--primary-dark);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--primary-dark);
  padding-bottom: 4px;
  display: inline-block;
  transition: opacity 0.3s;
  text-transform: uppercase;
}

.approach-link:hover {
  opacity: 0.7;
}

.experience-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  right: 0;
  background: #fff;
}

.gallery-column {
  display: contents;
}

.gallery-column:nth-child(2) {
  padding: 0;
  margin: 0;
}

.gallery-item {
  width: 100%;
  height: 400px;
  overflow: hidden;
  transition: transform 0.3s ease;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  font-size: 0;
  box-shadow: 0 0 0 2px #e0e0e0;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin: 0;
  padding: 0;
  border: 0;
}

.gallery-item:hover {
  transform: scale(1.02);
  z-index: 10;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

@media (max-width: 1024px) {
  .experience-wrapper {
    flex-direction: column;
    padding: 0 25px;
    gap: 60px;
  }
  .experience-sticky {
    position: relative;
    top: 0;
    flex: none;
  }
}

@media (max-width: 1024px) {
  .rethinking-text {
    font-size: 32px;
  }
}

/* Stay Locations Section */
.stay-locations-section {
  background: var(--white);
  padding: 0;
}

.stay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  gap: 2px;
}

.stay-left {
  display: flex;
  flex-direction: column;
}

.stay-content {
  background: var(--accent-color);
  padding: 100px 80px 80px 80px;
  color: var(--white);
}

.stay-title {
  font-family: var(--font-heading); /* RETROPIX */
  font-size: 60px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
  text-transform: uppercase;
  color: #fff;
}

.stay-subtitle {
  font-family: var(--font-body); /* Lato Regular */
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 480px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.stay-locations {
  background: var(--white);
  padding: 60px 80px 100px 80px;
  flex: 1;
}

.locations-list {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.locations-heading {
  font-family: var(--font-subheading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 30px 0;
  margin: 0;
  color: var(--primary-color);
}

.location-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: var(--primary-color);
  cursor: pointer;
  transition: background-color 0.3s ease, padding-left 0.3s ease;
  position: relative;
  background-color: transparent;
}

.location-item:hover {
  background-color: var(--accent-color);
  padding-left: 20px;
  color: white;
}

.location-name {
  font-family: var(--font-subheading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex: 1;
}

.location-status {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  margin-right: 20px;
  opacity: 0.7;
}

.location-city {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
}

.stay-image {
  overflow: hidden;
  background: var(--secondary-color);
}

.stay-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .stay-grid {
    grid-template-columns: 1fr;
  }
  .stay-content {
    padding: 60px 40px 50px 40px;
  }
  .stay-locations {
    padding: 40px 40px 60px 40px;
  }
  .stay-title {
    font-size: 80px;
  }
  .stay-image {
    min-height: 50vh;
  }
}

/* Experience Section */
.experience-section {
  background: var(--white);
  padding: 0;
}

.experience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  gap: 2px;
}

.experience-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.experience-content {
  background: var(--primary-color);
  padding: 100px 80px 80px 80px;
  color: var(--white);
}

.experience-main-title {
  font-family: var(--font-heading); /* RETROPIX */
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
  text-transform: uppercase;
  color: var(--white);
  max-width: 100%;
  white-space: normal;
}

.experience-subtitle {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 480px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.experience-events {
  background: var(--white);
  padding: 60px 80px 100px 80px;
  flex: 1;
}

.events-list {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.events-heading {
  font-family: var(--font-subheading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 30px 0;
  margin: 0;
  color: var(--primary-color);
}

/* Match STAY section row style for experience events */
.experience-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 25px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: var(--primary-color);
  cursor: pointer;
  transition: background-color 0.3s ease, padding-left 0.3s ease;
  background-color: transparent;
  gap: 20px;
  width: 100%;
}

.experience-item:hover {
  background-color: var(--accent-color);
  padding-left: 20px;
  color: var(--white);
}

.experience-item-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.experience-item-name strong {
  font-weight: 700;
}

.experience-item-meta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
}

.experience-item-meta strong {
  font-weight: 700;
  opacity: 1;
}

.experience-image {
  overflow: hidden;
  background: var(--secondary-color);
  min-width: 0;
}

.experience-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .experience-grid {
    grid-template-columns: 1fr;
  }
  .experience-content {
    padding: 60px 40px 50px 40px;
  }
  .experience-events {
    padding: 40px 40px 60px 40px;
  }
  .experience-main-title {
    font-size: clamp(44px, 10vw, 72px);
  }
  .experience-image {
    min-height: 50vh;
  }
  .experience-item {
    padding: 20px 0;
    gap: 12px;
  }
  .experience-item-meta {
    text-align: right;
  }
}

/* Playlist Section */
.playlist-section {
  background: var(--white);
  padding: 0;
}

.playlist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.playlist-left {
  display: flex;
  flex-direction: column;
}

.playlist-content {
  background: var(--primary-dark);
  padding: 100px 80px 80px 80px;
  color: var(--white);
}

.playlist-main-title {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
  text-transform: uppercase;
  color: var(--white);
}

.playlist-subtitle {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 480px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.playlist-player {
  background: var(--white);
  padding: 60px 80px 100px 80px;
  flex: 1;
  display: flex;
  align-items: center;
}

.spotify-embed {
  width: 100%;
  max-width: 500px;
}

.spotify-embed iframe {
  width: 100%;
  min-height: 450px;
}

.playlist-images {
  display: grid;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  background: var(--secondary-color);
}

.playlist-image-item {
  overflow: hidden;
  position: relative;
}

.playlist-image-item.large {
  grid-row: 1;
}

.playlist-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row: 2;
}

.playlist-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.playlist-image-item:hover img {
  transform: scale(1.08);
}

@media (max-width: 1024px) {
  .playlist-grid {
    grid-template-columns: 1fr;
  }
  .playlist-content {
    padding: 60px 40px 50px 40px;
  }
  .playlist-player {
    padding: 40px 40px 60px 40px;
  }
  .playlist-main-title {
    font-size: 80px;
  }
  .playlist-images {
    min-height: 50vh;
  }
}

/* Newsletter Scrolling Banner */
.newsletter-banner {
  background: var(--primary-dark) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  padding: 32px 0 !important; /* Increased height significantly */
  position: relative !important;
  min-height: 100px !important;
}

.newsletter-scroll {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.newsletter-track {
  display: flex;
  gap: 0;
  min-width: 200%; /* Ensure overflow for animation */
  animation: scroll-left 20s linear infinite;
  will-change: transform;
}

.newsletter-text {
  font-family: var(--font-heading) !important; /* RETROPIX */
  font-size: clamp(36px, 5vw, 72px) !important;
  line-height: 1 !important;
  color: var(--white) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0 24px !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

@media (min-width: 900px) {
  .newsletter-text {
    padding: 0 8px;
    letter-spacing: 0.04em;
  }
  .newsletter-track { gap: 0; }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.newsletter-banner:hover .newsletter-track {
  animation-play-state: paused;
}

@media (max-width: 1024px) {
  .newsletter-text {
    font-size: 52px !important;
  }
  .newsletter-banner {
    padding: 28px 0 !important;
    min-height: 90px !important;
  }
  .newsletter-track {
    min-width: 300%; /* Force overflow for mobile */
    animation-duration: 20s !important;
  }
}

/* Footer */
.footer {
  background: var(--white) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 0;
}

.footer-main {
  padding: 80px 0 60px 0;
  background: var(--white);
}

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

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-heading {
  font-family: var(--font-subheading); /* Lato Bold */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 24px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent-gold);
}

.footer-branding {
  padding: 60px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--white);
}

.footer-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo-img {
  height: 80px;
  width: auto;
}

.footer-heading-logo {
  height: 40px;
  width: auto;
  margin-bottom: 24px;
}

.footer-cta-logo {
  height: 60px;
  width: auto;
  margin-bottom: 12px;
}

.footer-cta {
  text-align: right;
}

.footer-cta-text {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 400;
  color: var(--primary-color);
  margin: 0 0 8px 0;
}

.footer-cta-link {
  font-family: var(--font-subheading);
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

.footer-cta-link:hover {
  color: var(--accent-gold);
}

.footer-bottom {
  padding: 30px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--white);
  margin: 0;
  padding-bottom: 10px;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  gap: 40px;
}

.footer-bottom-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
  color: var(--accent-gold);
}

.back-to-top {
  cursor: pointer;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .footer-brand-row {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .footer-cta {
    text-align: center;
  }
  .footer-bottom-row {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .footer-bottom-links {
    flex-direction: column;
    gap: 12px;
  }
}

/* Intro Section - Updated to A Living Collective */
.intro-section {
  background: var(--white);
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  cursor: none;
}

.collective-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  cursor: none;
  min-height: auto;
  padding: 0;
}

.collective-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
}

.collective-container:hover::before {
  opacity: 0;
  display: none;
}

.collective-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  transition: none;
  will-change: auto;
  text-align: center;
}

.collective-container:hover .collective-title {
  transform: none;
}

.intro-section {
  display: none;
}

.word-a {
  font-family: var(--font-heading);
  font-size: clamp(24px, 8vw, 180px);
  color: var(--primary-color);
  line-height: 0.9;
  letter-spacing: 0.08em;
  display: inline-block;
  font-weight: 400;
  position: relative;
}

.word-collective {
  font-family: var(--font-heading);
  font-size: clamp(22px, 7vw, 160px);
  color: var(--primary-color);
  line-height: 0.9;
  letter-spacing: -1px;
  display: inline-block;
  font-weight: 400;
}

.word-living {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
  font-style: normal;
  font-size: 36px !important;
  color: var(--primary-color);
  line-height: 1.6;
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight: 400;
  letter-spacing: -1px;
  text-align: center;
}

@media (max-width: 1024px) {
  .collective-title {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .word-a, .word-collective, .word-living {
    font-family: 'Press Start 2P', "PressStart", monospace !important;
    font-size: 60px;
  }
}

.custom-cursor {
  display: none !important;
  visibility: hidden !important;
}

.intro-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  position: relative;
  overflow: hidden;
  cursor: auto;
}

.intro-content::before {
  display: none;
}

.intro-text,
.intro-stats {
  position: relative;
  z-index: 2;
}



.intro-text {
  max-width: 100%;
  width: 100%;
}



/* Spaces Section - Premium */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.space-card {
  background: var(--white);
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              box-shadow 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              border-color 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.06);
  will-change: transform;
  position: relative;
}

/* Holographic gradient overlay - sweeps across on hover */
.space-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(201, 169, 97, 0.3) 50%,
    transparent 70%
  );
  transform: rotate(-45deg);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

.space-card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10),
              0 0 20px #c4d6b0;
  border-color:#c4d6b0
}

.space-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

.space-image {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
}

/* Image Carousel Styling */
.space-image-carousel {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
}

.space-image-carousel[data-single-image] {
  cursor: pointer;
}

.space-image-carousel[data-single-image] img {
  cursor: pointer;
}

.carousel-images {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-img.active {
  opacity: 1;
}

/* Carousel Navigation Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  opacity: 0;
}

.carousel-prev {
  left: 12px;
}

.carousel-next {
  right: 12px;
}

.space-image-carousel:hover .carousel-btn {
  opacity: 1;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

/* Image Counter */
.carousel-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  z-index: 9;
  letter-spacing: 0.05em;
}

.space-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 200px;
  background-color: var(--secondary-color);
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.space-card:hover .space-image img {
  transform: scale(1.03);
}

.space-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  opacity: 0.12;
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.space-card:hover .space-overlay {
  opacity: 0.28;
}

.space-content {
  padding: 28px;
}

.space-content h3 {
  font-family: var(--font-subheading); /* Lato Bold */
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--primary-color);
  letter-spacing: 0.02em;
}

.space-content p {
  font-family: var(--font-body);
  color: var(--text-light);
  margin-bottom: 20px;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.space-features {
  list-style: none;
  margin-bottom: 20px;
}

.space-features li {
  font-family: var(--font-body);
  padding: 8px 0;
  font-size: 15px;
  color: var(--text-dark);
  position: relative;
  padding-left: 28px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.space-features li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-gold);
  font-weight: 300;
  font-size: 18px;
}

.space-link {
  background: #c4d6b0;
  color: #580f41;
  text-decoration: none;
  font-weight: 900 !important;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Lekton", sans-serif !important;
}

.space-link:hover {
  background: #b0c89c;
  color: #580f41;
  gap: 14px;
}

/* Features Section - Premium */
.features-section {
  background: var(--primary-color);
  padding: 30px 0;
}

/* Features Scroll Wrapper */
.features-scroll-wrapper {
  overflow: hidden;
  position: relative;
  width: 100vw;
  margin: 0 auto;
  padding: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.features-scroll-wrapper::before,
.features-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.features-scroll-wrapper::before {
  left: 0;
  background: none;
}

.features-scroll-wrapper::after {
  right: 0;
  background: none;
}

.features-scroll {
  display: flex;
  gap: 36px;
  padding-right: 36px;
  animation: scrollFeatures 34s linear infinite;
  will-change: transform;
}

.features-scroll:hover {
  animation-play-state: paused;
}

@keyframes scrollFeatures {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 18px));
  }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
}

.feature-item {
  text-align: center;
  flex: 0 0 220px;
  min-width: 220px;
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 32px;
  color: var(--accent-gold);
  stroke-width: 1;
}

.feature-item h3 {
  font-size: 28px;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--font-subheading); /* Lato Bold */
  color: var(--white);
}

.feature-item p {
  display: none;
}

@media (max-width: 700px) {
  .features-scroll {
    gap: 24px;
  }
  .feature-item {
    flex: 0 0 160px;
    min-width: 200px;
    padding: 16px 8px;
  }
}

/* Amenities Section - Premium */
.amenities-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.amenities-text {
  max-width: 650px;
}

.amenities-grid-text {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.amenity-category h4 {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.amenity-category:last-child {
  margin-bottom: 60px;
}

.amenities-list {
  list-style: none;
}

.amenities-list li {
  font-family: var(--font-body);
  padding: 8px 0;
  font-size: 17px;
  color: var(--text-dark);
  position: relative;
  padding-left: 40px;
  font-weight: 600;
  line-height: 1.5;
}

.amenities-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-gold);
  font-weight: 300;
  font-size: 20px;
}

.amenities-image {
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
  height: 600px;
  position: relative;
}

.amenities-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 200px;
  background-color: var(--secondary-color);
}

/* Community Section - Premium */
/* Community Scroll Wrapper */
.community-scroll-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 0px;
  padding: 20px 0;
}

.community-scroll-wrapper::before,
.community-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.community-scroll-wrapper::before {
  left: 0;
  background: none;
}

.community-scroll-wrapper::after {
  right: 0;
  background: none;
}

.community-scroll {
  display: flex;
  gap: 50px;
  width: fit-content;
  animation: scrollCommunity 20s linear infinite;
  will-change: transform;
}

.community-scroll:hover {
  animation-play-state: paused;
}

@keyframes scrollCommunity {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 25px));
  }
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 50px;
  margin-top: 60px;
}

.community-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  flex: 0 0 340px;
  min-width: 340px;
}

.community-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 200px;
  background-color: var(--secondary-color);
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.community-card:hover img {
  transform: scale(1.035);
}

.community-card:hover {
  transform: translateY(-6px);
}

.community-card-content {
  position: absolute;
  align-items: center;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: var(--white);
  transform: translateY(10px);
  transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.community-card:hover .community-card-content {
  transform: translateY(0);
}

.community-card-content h3 {
  font-size: 28px;
  margin-bottom: 42px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
}

.community-card-content p {
  font-family: var(--font-body);
  opacity: 0.9;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Testimonials Section */
.testimonials-section {
  background: var(--primary-color);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 50px;
  margin-top: 60px;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 48px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 450ms cubic-bezier(0.2, 0.8, 0.2, 1), background 450ms ease, border-color 450ms ease;
  will-change: transform;
}

.testimonial-card:hover {
  box-shadow: 0 14px 40px rgba(201, 169, 97, 0.16);
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(201, 169, 97, 0.35);
}

.testimonial-content {
  margin-bottom: 32px;
}

.testimonial-content p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.testimonial-author {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.testimonial-card h3 {
  font-family: var(--font-subheading); /* Lato Bold */
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.author-role {
  font-family: var(--font-subheading); /* Lato Bold */
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

/* Gallery Section - Premium */
/* Gallery Section - Clean Centered Layout */
.gallery-section {
  padding: 40px 0 0;
  background: var(--white);
  width: 100%;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 350px;
  gap: 1.5px !important;
  width: 100%;
  margin: 0;
  padding: 0;
}

.gallery-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
  margin: 0;
  padding: 0;
  border: 0;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 300px;
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
  }
}

/* Location Section */
.location-section {
  background: var(--white);
  padding: 72px 0;
}

.location-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
  margin-top: 60px;
}

.location-info h3 {
  font-family: var(--font-subheading); /* Lato Bold */
  font-size: 36px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.location-info > p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-light);
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

.location-info > p strong {
  font-weight: 700;
  color: var(--primary-color);
}

.container p strong {
  font-weight: 700;
  color: #7b2c4a;
}

.location-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.location-detail-item h4 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.location-detail-item p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.amenities-list {
  margin-top: 40px;
}

.amenities-list h4 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.amenities-list ul {
  list-style: none;
  padding: 0;
}

.amenities-list li {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  padding: 12px 0;
  padding-left: 32px;
  position: relative;
  font-weight: 700 !important;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.amenities-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

/* FAQ Section - Desktop Justify */
.faqs-section p {
  text-align: left;
}

/* Align FAQ headings with the start of their sections using absolute positioning */
.faqs-section .container > div[style*="grid-template-columns"] > div:first-child {
  position: relative !important;
}

.faqs-section .container > div[style*="grid-template-columns"] > div:first-child > div:nth-child(1) {
  position: absolute !important;
  top: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 20px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.faqs-section .container > div[style*="grid-template-columns"] > div:first-child > div:nth-child(2) {
  position: absolute !important;
  top: 260px !important;
  margin-bottom: 0 !important;
  margin-top: 20px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.faqs-section .container > div[style*="grid-template-columns"] > div:first-child > div:nth-child(3) {
  position: absolute !important;
  top: 390px !important;
  margin-bottom: 0 !important;
  margin-top: 20px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Adjust FAQ label alignment on desktop */
.faqs-section .container > div[style*="grid-template-columns"] > div:first-child > div:nth-child(1) {
  margin-bottom: 200px !important;
}

.faqs-section .container > div[style*="grid-template-columns"] > div:first-child > div:nth-child(2) {
  margin-bottom: 100px !important;
}

.faqs-section .container > div[style*="grid-template-columns"] > div:first-child > div:nth-child(3) {
  margin-bottom: 0 !important;
}

/* Amenities Grid with Icons */
.amenities-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.amenities-list li {
  margin: 12px 0;
  padding-left: 40px;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  font-weight: 700 !important;
}

.amenities-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.amenities-list li[data-icon="subway"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><path d="M12 1v6m0 6v6"></path><path d="M4.22 4.22l4.24 4.24m5.08 5.08l4.24 4.24"></path><path d="M1 12h6m6 0h6"></path><path d="M4.22 19.78l4.24-4.24m5.08-5.08l4.24-4.24"></path></svg>');
}

.amenities-list li[data-icon="shopping"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M6 4h12v3H6z"></path><path d="M3 7h18v10H3z"></path><path d="M6 17h12v2H6z"></path><circle cx="8" cy="12" r="1"></circle><circle cx="16" cy="12" r="1"></circle></svg>');
}

.amenities-list li[data-icon="dining"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"></path><path d="M8 11h8v6H8z"></path><line x1="12" y1="7" x2="12" y2="11"></line></svg>');
}

.amenities-list li[data-icon="culture"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M4 6h16v12H4z"></path><path d="M9 6V4m6 2V4"></path><path d="M4 10h16"></path><line x1="9" y1="14" x2="9" y2="18"></line><line x1="15" y1="14" x2="15" y2="18"></line></svg>');
}

.amenities-list li[data-icon="business"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M9 11h6v6H9z"></path><line x1="12" y1="3" x2="12" y2="9"></line><line x1="12" y1="15" x2="12" y2="21"></line><line x1="3" y1="12" x2="9" y2="12"></line><line x1="15" y1="12" x2="21" y2="12"></line></svg>');
}

.amenities-list li[data-icon="parks"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M12 6v6l4 2"></path><circle cx="8" cy="16" r="1"></circle><circle cx="16" cy="16" r="1"></circle></svg>');
}

.amenities-list li[data-icon="health"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"></path><path d="M12 6v6h5"></path><circle cx="16" cy="10" r="1"></circle></svg>');
}

.amenities-list li[data-icon="airport"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M17.78 15.89l2.83-2.83a1 1 0 0 0-1.41-1.41l-2.83 2.83"></path><circle cx="12" cy="12" r="8"></circle><path d="M12 8v8m-4-4h8"></path></svg>');
}

.location-transport {
  margin-top: 40px;
  margin-bottom: 40px;
}

.location-transport h4 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

.transport-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

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

  .location-transport h4 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .location-transport {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.transport-item {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  border-left: 3px solid #580F41;
  transition: transform 0.3s ease, background 0.3s ease;
}

.transport-item:hover {
  transform: translateY(-3px);
  background: rgba(201, 169, 97, 0.1);
}

.transport-item h5 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.transport-item p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}

.location-map {
  width: 100%;
  height: 600px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  position: relative;
}

.location-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(20%) brightness(0.98);
  transition: filter 0.3s ease;
}

.location-map:hover iframe {
  filter: grayscale(0%) brightness(1);
}

/* CTA Section - Premium */
.cta-section {
  position: relative;
  padding: 150px 0;
  text-align: center;
  color: var(--white);
}

.cta-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cta-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.8) 100%);
  z-index: 2;
}

.cta-content {
  position: relative;
  z-index: 3;
  max-width: 850px;
  margin: 0 auto;
}

.cta-content h2 {
  font-family: var(--font-body);
  font-size: clamp(3rem, 7.5vw, 5rem);
  font-weight: 700;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}

.cta-content p {
  font-family: var(--font-body);
  font-size: 19px;
  margin-bottom: 56px;
  opacity: 0.9;
  font-weight: 600;
  line-height: 1.5;
}

.cta-buttons {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Footer - Premium */
.footer {
  background: var(--primary-color);
  color: var(--white);
  padding: 120px 0 60px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 100px;
  margin-bottom: 100px;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  height: 90px;
}

.footer-logo-img {
  height: 70px;
  width: auto;
  max-width: 200px;
  min-width: 120px;
  object-fit: contain;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.footer-section p {
  opacity: 0.65;
  line-height: 1.5;
  font-weight: 300;
  font-size: 16px;
}

.footer-section h4 {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.95;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 16px;
  opacity: 0.65;
  transition: var(--transition-fast);
  font-weight: 300;
  font-size: 16px;
}

.footer-section ul li:hover {
  opacity: 1;
}

.footer-section a {
  color: var(--white);
  text-decoration: none;
  transition: var(--transition-fast);
}

.footer-section a:hover {
  color: var(--accent-gold);
  opacity: 1;
}

.social-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.social-links a {
  opacity: 0.65;
  transition: var(--transition-fast);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 400;
}

.social-links a:hover {
  opacity: 1;
  color: var(--accent-gold);
}

.footer-bottom {
  padding-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  opacity: 0.5;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.8px;
}

/* Animations - Premium */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive Design - Premium */
@media (max-width: 1024px) {
  .container {
    padding: 0 50px;
  }
  
  .intro-content {
    grid-template-columns: 1fr;
    gap: 80px;
  }
  
  .amenities-content {
    grid-template-columns: 1fr;
    gap: 70px;
  }
  
  .amenities-image {
    height: 500px;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 400px);
  }
  
  .gallery-item.large {
    grid-column: span 2;
    grid-row: span 1;
  }
  
  .location-content {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .location-map {
    height: 500px;
    order: -1;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  
  .container-large {
    padding: 0 20px !important;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  
  .container-full {
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Section Header Mobile - allow full width for titles */
  .section-header {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .section-title {
    max-width: 100% !important;
  }
  
  /* Header Mobile */
  .header {
    padding: 15px 0;
    position: fixed;
    width: 100%;
    background: transparent;
  }

  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }
  
  .header-left, .header-center {
    display: flex;
    align-items: center;
  }

  .header-right{
    display: flex;
    align-items: center;
    margin-bottom: 38px;
  }

  .header-center {
    display: none !important; /* Hide Locations from header on mobile */
  }

  .header-right .nav {
    display: none !important; /* Hide Rooms/About/Blogs from header on mobile */
  }
  
  .header-right {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  
  .header .container {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 0 15px;
  }
  
  .logo {
    height: 32px;
  }
  
  .logo-img {
    height: 32px;
    max-width: 120px;
  }
  
  .logo-img {
    height: 40px;
  }
  
  .logo-text,
  .logo-pxl,
  .logo-27 {
    font-size: 18px;
    letter-spacing: 0.5px;
  }
  
  .menu-toggle {
    padding: 12px 8px;
    margin-right: -8px;
    display: flex !important;
    flex-direction: column;
    gap: 7px;
    cursor: pointer;
    z-index: 11002 !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    height: auto;
    pointer-events: auto !important;
    /* margin-bottom: 20px; */
  }
  
  .menu-toggle span {
    width: 28px;
    height: 4px;
    background: var(--white);
    display: block;
    transition: all 0.3s ease;
    border-radius: 3px;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Hero Video Section - Mobile */
  .hero {
    height: 70vh !important;
    min-height: 450px !important;
    max-height: 600px !important;
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    position: relative;
  }

  .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--white);
    max-width: 100%;
    width: 100%;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
  }

  .hero-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
  }

  .hero-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    min-width: 100%;
    min-height: 100%;
  }
  
  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
  }

  .hero-title {
    font-family: 'Press Start 2P', "PressStart", monospace !important;
    font-size: clamp(18px, 4vw, 48px);
    line-height: 1.0;
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: none;
  }

  .hero-logo {
    width: auto !important;
    max-width: 180px !important;
    max-height: 180px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: translateX(0) !important;
  }

  /* Ensure homepage hero stays centered on mobile */
  body.home .hero .hero-content {
    padding: 0 15px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.home .hero .hero-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  body.home .hero .hero-logo {
    width: auto !important;
    max-width: 180px !important;
    max-height: 180px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: translateX(0) !important;
  }

  .hero-subtitle {
    font-size: 10px;
    line-height: 1.6;
    margin-bottom: 40px; /* Increased spacing */
    max-width: 100%;
  }

  .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
  }
  
  .spaces-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  
  .feature-item {
    flex: 0 0 160px;
    min-width: 200px;
  }
  
  .features-scroll {
    gap: 28px;
  }
  
  .community-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .community-card {
    flex: 0 0 280px;
    min-width: 280px;
  }
  
  .community-scroll {
    gap: 40px;
  }
  
  .location-section {
    padding: 60px 0;
  }
  
  .location-content {
    margin-top: 40px;
  }
  
  .location-map {
    height: 400px;
  }
  
  .location-info h3 {
    font-size: 28px;
  }
  
  .location-info > p {
    text-align: left;
  }
  
  .location-details {
    gap: 24px;
  }
  
  /* FAQ Section - Mobile Justify */
  .faqs-section p {
    text-align: left !important;
  }
  
  .page-hero {
    height: 60vh;
    min-height: 400px;
  }
  
  .page-content-section {
    padding: 80px 0;
  }
  
  .page-content-grid {
    gap: 80px;
  }
  
  .page-content-item {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .page-content-item.reverse {
    direction: ltr;
  }
  
  .page-content-text h2 {
    font-size: clamp(14px, 2.5vw, 36px) !important;
  }
  
  .page-content-image {
    height: 300px;
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 300px);
  }
  
  .gallery-item.large {
    grid-column: span 1;
  }
  
  .section {
    padding: 20px 0 !important;
    margin: 0 !important;
  }
  
  .stay-locations-section {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .experience-section {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .playlist-section {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .newsletter-banner {
    padding: 20px 0 !important;
    margin: 0 !important;
  }
  
  .location-section {
    padding: 20px 0 !important;
    margin: 0 !important;
  }
  
  .cta-section {
    padding: 40px 0 !important;
    margin: 0 !important;
  }
  }
  
  .footer {
    padding: 100px 0 50px;
  }
  
  .footer-content {
    gap: 80px;
  }
  
  .amenities-image {
    height: 400px;
  }

  /* Sidebar Mobile Adjustments */
  .sidebar {
    width: 100%;
    max-width: 100%;
  }

  .sidebar-header {
    padding: 15px 30px;
  }

  .sidebar {
    width: 250px !important;
    max-width: 45vw !important;
  }

  .sidebar-nav {
    padding: 8px 12px;
  }

  .sidebar-link {
    padding: 8px 14px; /* compact on smaller viewports */
    gap: 10px;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .sidebar-link-text {
    font-family: "Lekton", sans-serif !important;
    font-size: 12px !important;
    display: block;
    white-space: normal;
    word-break: break-word;
  }

  .sidebar-link-number {
    min-width: 25px;
    font-size: 10px;
  }

  .sidebar-header .logo {
    height: 32px;
  }

  .sidebar-header .logo-img {
    height: 32px;
  }

  .sidebar-close {
    width: auto;
    height: auto;
    padding-right: 8px;
    white-space: nowrap;
  }

  .sidebar-close .sidebar-close-text {
    display: inline-block;
    width: auto;
    font-size: 20px;
    line-height: 1;
  }

  /* Mobile sidebar: occupy 75% width on all pages (global behavior) */
  @media (max-width: 1023px) {
    .sidebar {
      width: 75vw !important;
      max-width: 75vw !important;
      right: -75vw !important;
      top: 0 !important;
      height: 100vh !important;
      border-radius: 0 !important;
      box-shadow: -6px 0 40px rgba(0,0,0,0.25) !important;
      overflow-y: auto !important;
      z-index: 11999 !important;
      pointer-events: auto !important;
    }

    .sidebar.active {
      right: 0 !important;
    }

    /* Ensure the overlay still covers the rest of the viewport for click-to-close */
    .sidebar-overlay {
      width: 100% !important;
      height: 100% !important;
      top: 0 !important;
      left: 0 !important;
      z-index: 11998 !important;
      pointer-events: auto !important;
    }

    .sidebar-overlay.active {
      pointer-events: auto !important;
    }
  }


/* Enhanced transitions for revealed elements */
.space-card.revealed,
.community-card.revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Image loading fade-in */
img.loaded {
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* Important: don't hide images by default. JS may not run in some environments. */
img[loading="lazy"] {
  opacity: 1;
}

/* Smooth section transitions */
section {
  transition: opacity 0.3s ease;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .space-card,
  .community-card,
  .testimonial-card,
  .gallery-item,
  .space-image,
  .community-card img,
  .community-card-content {
    transition: none !important;
  }
  
  .space-card:hover,
  .community-card:hover,
  .testimonial-card:hover {
    transform: none !important;
  }
  
  .space-card:hover .space-image img,
  .community-card:hover img,
  .gallery-item:hover img {
    transform: none !important;
  }
  
  .community-card:hover .community-card-content {
    transform: translateY(10px) !important;
  }
}

/* Stay Page - Smooth Fade-in Scroll */
.stay-page .fade-in-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stay-page .fade-in-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.stay-page .feature-list {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

.stay-page .feature-list li {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  padding: 10px 0;
  padding-left: 28px;
  position: relative;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.stay-page .feature-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #000000;
  font-weight: 700;
  font-size: 18px;
}

/* Experience Page - Parallax Scroll */
.experience-page .parallax-item {
  position: relative;
}

.experience-page .parallax-image {
  will-change: transform;
  overflow: hidden; /* Ensure image doesn't bleed out */
}

.experience-page .parallax-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15); /* Base scale to allow movement */
  transition: none !important; /* Prevent fighting with JS scroll updates */
}

.experience-page .experience-features {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.experience-page .experience-feature {
  padding: 20px;
  background: rgba(201, 169, 97, 0.05);
  border-left: 3px solid var(--accent-gold);
  border-radius: 4px;
}

.experience-page .experience-feature h4 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.experience-page .experience-feature p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Experience Page - Enhanced Hover Effects */
.experience-page .parallax-item {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.experience-page .parallax-item:hover {
  transform: translateY(-8px);
}

.experience-page .parallax-item:hover .page-content-image {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.experience-page .page-content-image {
  transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.experience-page .page-content-image:hover {
  box-shadow: 0 20px 60px rgba(201, 169, 97, 0.3);
}

.experience-page .experience-feature {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.experience-page .experience-feature:hover {
  background: rgba(201, 169, 97, 0.12);
  border-left-width: 5px;
  transform: translateX(8px);
  box-shadow: 0 8px 24px rgba(201, 169, 97, 0.15);
}

.experience-page .experience-feature:hover h4 {
  color: var(--accent-gold);
  transform: translateX(4px);
  transition: color 0.4s ease, transform 0.4s ease;
}

.experience-page .experience-feature h4 {
  transition: color 0.4s ease, transform 0.4s ease;
}

.experience-page .experience-feature:hover p {
  color: var(--text-dark);
  transition: color 0.4s ease;
}

.experience-page .experience-feature p {
  transition: color 0.4s ease;
}

/* Create Page - Staggered Reveal Scroll */
.create-page .stagger-item {
  opacity: 0;
  transform: translateX(-80px) scale(0.95);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.create-page .stagger-item.reverse {
  transform: translateX(80px) scale(0.95);
}

.create-page .stagger-item.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.create-page .create-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.create-page .create-stat {
  text-align: center;
  padding: 24px;
  background: rgba(201, 169, 97, 0.05);
  border-radius: 8px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.create-page .create-stat:hover {
  transform: translateY(-5px);
  background: rgba(201, 169, 97, 0.1);
}

.create-page .create-stat .stat-number {
  display: block;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.create-page .create-stat .stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .create-page .create-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .experience-page .experience-features {
    gap: 16px;
  }
}

/* Blogs Section */
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-top: 20px;
}

.blog-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  border: none;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.blog-card:hover {
  transform: none;
  box-shadow: none;
}

.blog-image {
  height: 280px;
  overflow: hidden;
  position: relative;
  border-radius: 0;
  margin-bottom: 25px;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.blog-content {
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-date {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-lighter);
  font-weight: 400;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.blog-content h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  margin-bottom: 12px;
  color: var(--primary-color);
  line-height: 1.3;
  font-weight: 500;
  transition: color 0.3s ease;
}

.blog-card:hover h3 {
  color: var(--accent-gold);
}

.blog-content p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
  font-weight: 300;
}

.blog-link {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  width: fit-content;
  border-bottom: 1px solid var(--accent-gold);
  padding-bottom: 4px;
}

.blog-link:hover {
  color: var(--accent-gold);
  gap: 15px;
}

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

/* Booking Summary Bar */
.booking-summary {
  background: var(--white);
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: -60px auto 60px;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.booking-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 150px;
}

.booking-item label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  text-align: center;
}

.booking-item input,
.booking-item select {
  padding: 12px 15px;
  border: 1px solid var(--text-lighter);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark);
  width: 100%;
  outline: none;
  transition: border-color 0.3s ease;
}

.booking-item input:focus {
  border-color: var(--accent-gold);
}

.booking-search-btn {
  background: var(--accent-gold);
  color: var(--white);
  border: none;
  padding: 14px 40px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
  border-radius: 2px;
  height: 48px;
}

.booking-search-btn:hover {
  background: var(--accent-gold-dark);
}

@media (max-width: 992px) {
  .booking-summary {
    margin: 20px 20px 40px;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .booking-summary {
    flex-direction: column;
    align-items: stretch;
  }
  
  .booking-item {
    min-width: 100%;
  }
}

/* Mobile Responsive Styles - Enhanced */
@media (max-width: 768px) {
  /* Intro Section Mobile */
  .intro-section {
    padding: 0 !important;
    width: 100%;
    overflow: hidden;
    background: var(--white);
  }
  
  /* Collective Title Mobile */
  .collective-container {
    padding: 30px 20px !important;
    overflow: hidden;
    width: 100%;
    min-height: auto;
  }
  
  .collective-title {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-align: center;
    width: 100%;
  }
  
  .word-a {
    font-size: 28px !important;
    letter-spacing: 0.05em;
    line-height: 1.1 !important;
  }
  
  .word-living {
    font-family: 'Press Start 2P', "PressStart", monospace !important;
    font-size: 28px !important;
    margin: 0;
    letter-spacing: 0;
    line-height: 1.1 !important;
  }
  
  .word-collective {
    font-size: 28px !important;
    letter-spacing: 0;
    line-height: 1.1 !important;
  }
  
  /* Split Image Section */
  .split-image-section {
    padding: 0 !important;
    margin: 0;
    width: 100%;
    overflow: hidden;
  }
  
  .split-wrapper {
    flex-direction: column;
    width: 100%;
  }
  
  .split-image {
    width: 100% !important;
    height: 50vh;
    min-height: 300px;
    max-height: 420px;
    padding: 0 !important;
    margin: 0;
    position: relative;
  }
  
  .split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  
  .image-tag {
    position: absolute;
    font-size: 14px !important;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-dark);
  }
  
  .split-spacer {
    display: none;
  }
  
  /* Rethinking Section */
  .rethinking-section {
    padding: 60px 0 !important;
    background: var(--white);
    width: 100%;
    overflow: hidden;
  }
  
  .rethinking-wrapper {
    padding: 0;
    width: 100%;
  }
  
  .rethinking-text {
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 0 14px !important;
    text-align: left;
    max-width: 100%;
    word-wrap: break-word;
    margin-bottom: 24px !important;
    display: block !important;
  }
  
  .rethinking-text:last-child {
    margin-bottom: 0 !important;
  }
  
  .rethinking-text .highlight {
    font-weight: 700 !important;
    display: inline !important;
    padding: 0 !important;
    font-style: normal !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    border-radius: 0 !important;
    -webkit-box-decoration-break: none !important;
    box-decoration-break: clone !important;
  }
  
  /* STAY Grid Mobile */
  .stay-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    width: 100%;
  }
  
  .stay-left {
    min-height: auto;
    order: 1;
    width: 100%;
  }
  
  .stay-right {
    order: 2;
    min-height: 45vh;
    max-height: 420px;
    width: 100%;
  }
  
  .stay-content {
    padding: 60px 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .stay-content h2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
  }
  
  .stay-content p {
    font-size: 15px !important;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .stay-locations {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
  }
  
  .location-item {
    padding: 18px 20px !important;
    font-size: 16px !important;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
  }
  
  .stay-image {
    height: 65vh;
    min-height: 400px;
    max-height: 550px;
    width: 100%;
  }
  
  .stay-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* EXPERIENCE Grid Mobile */
  .experience-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    width: 100%;
  }
  
  .experience-left {
    min-height: auto;
    order: 1;
    width: 100%;
  }
  
  .experience-right {
    order: 2;
    min-height: 45vh;
    max-height: 420px;
    width: 100%;
  }
  
  .experience-content {
    padding: 60px 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .experience-content h2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
  }
  
  .experience-content p {
    font-size: 15px !important;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .experience-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
  }
  
  .experience-item {
    padding: 18px 20px !important;
    font-size: 16px !important;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
  }
  
  .experience-image {
    height: 65vh;
    min-height: 400px;
    max-height: 550px;
    width: 100%;
  }
  
  .experience-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* PLAYLIST Grid Mobile */
  .playlist-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    width: 100%;
  }
  
  .playlist-left {
    min-height: auto;
    order: 1;
    padding: 60px 20px !important;
    background: var(--primary-dark);
    width: 100%;
  }
  
  .playlist-right {
    order: 2;
    padding: 0;
    background: var(--primary-dark);
    width: 100%;
  }
  
  .playlist-content h2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px;
    color: var(--white);
    letter-spacing: 0.05em;
  }
  
  .playlist-content p {
    font-size: 15px !important;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.85);
  }
  
  .playlist-player {
    height: 200px;
    width: 100%;
    margin-top: 24px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .playlist-player iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  
  .playlist-images {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    width: 100%;
    min-height: auto;
  }
  
  .playlist-image-item {
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 4px;
  }

  .playlist-image-item.large {
    height: 300px;
  }

  .playlist-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .playlist-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Newsletter Banner Mobile */
  .newsletter-banner {
    padding: 30px 0 !important;
    overflow: hidden;
    width: 100%;
  }
  
  .newsletter-track {
    display: flex;
    gap: 50px;
    animation: scroll-left 15s linear infinite;
    will-change: transform;
  }
  
  .newsletter-text {
    font-size: 22px !important;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  
  /* Section Titles Mobile */
  .section {
    width: 100%;
    overflow: hidden;
  }
  
  .section-title {
    font-size: 21px !important; /* 30% reduction from 36px desktop */
    line-height: 1.3 !important;
    word-spacing: -0.1em;
    letter-spacing: -0.014em;
  }
  
  h1, h2 {
    font-size: 21px !important; /* 30% reduction from ~36px desktop */
    line-height: 1.1 !important;
  }
  
  h3, h4, h5, h6 {
    font-size: 21px !important; /* 30% reduction from ~28px desktop */
    line-height: 1.2 !important;
  }
  
  .hero-title {
    font-size: clamp(10px, 1.75vw, 21px) !important; /* 30% reduction from clamp(14px, 2.5vw, 36px) */
    line-height: 1.1 !important;
  }
  
  .page-hero-title {
    font-size: clamp(10px, 1.75vw, 21px) !important; /* 30% reduction from clamp(14px, 2.5vw, 36px) */
    line-height: 1.1 !important;
  }
  
  .stay-title {
    font-size: 21px !important; /* 30% reduction from 60px */
    line-height: 1.1 !important;
  }
  
  .booking-title {
    font-size: 21px !important; /* 30% reduction */
    line-height: 1.1 !important;
  }
  
  .experience-main-title {
    font-size: 21px !important; /* 30% reduction from ~34px */
    line-height: 1.1 !important;
  }
  
  .playlist-main-title {
    font-size: 21px !important; /* 30% reduction */
    line-height: 1.1 !important;
  }
  
  .locations-heading {
    font-size: 21px !important; /* 30% reduction */
    line-height: 1.1 !important;
  }
  
  .events-heading {
    font-size: 21px !important; /* 30% reduction */
    line-height: 1.1 !important;
  }
  
  .collective-title {
    font-size: 21px !important; /* 30% reduction */
    line-height: 1.1 !important;
  }
  
  .rethinking-subtitle {
    font-size: 21px !important; /* 30% reduction from 28px */
    line-height: 1.1 !important;
  }
  
  .word-a,
  .word-living,
  .word-collective {
    font-size: 21px !important; /* 30% reduction from 28px */
    line-height: 1.1 !important;
  }
  
  .space-content h3 {
    font-size: 20px !important; /* 30% reduction from 28px */
    line-height: 1.1 !important;
  }
  
  .section-label {
    font-size: 12px !important;
    letter-spacing: 0.15em;
  }
  
  .section-description {
    font-size: 16px !important;
    line-height: 1.6;
  }
  
  /* Experience Grid Section Mobile */
  .experience-grid-section {
    padding: 60px 0 !important;
    background: var(--white);
    width: 100%;
    overflow: hidden;
  }
  
  .experience-wrapper {
    flex-direction: column !important;
    padding: 0 20px !important;
    gap: 40px;
    min-height: auto;
    width: 100%;
  }
  
  .experience-sticky {
    position: relative !important;
    top: 0 !important;
    padding: 0 !important;
    flex: none !important;
    width: 100%;
    margin-bottom: 30px;
  }
  
  .experience-title {
    font-size: 21px !important; /* 30% reduction from 28px */
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
    max-width: 100%;
    color: var(--primary-dark);
    word-wrap: break-word;
  }
  
  .experience-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    max-width: 100%;
    color: rgba(0, 0, 0, 0.8);
  }
  
  .approach-link {
    font-size: 12px !important;
    color: var(--primary-dark);
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--primary-dark);
  }
  
  .gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  
  .experience-gallery {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  
  .gallery-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex: none !important;
    width: 100% !important;
    padding-top: 0 !important;
  }
  
  .gallery-column:nth-child(2) {
    padding-top: 0 !important;
  }
  
  .gallery-item {
    height: 40vh !important;
    min-height: 240px;
    max-height: 380px;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    margin: 0 !important;
  }
  
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Sidebar Mobile Adjustments */
  .sidebar {
    width: 75vw !important;
    max-width: 75vw !important;
    right: -75vw !important;
    top: 0 !important;
    height: 100vh !important;
  }

  .sidebar.active {
    right: 0 !important;
  }
  
  .sidebar-header {
    padding: 10px 15px !important;
    border-bottom: 1px solid var(--primary-dark);
  }
  
  .sidebar-back {
    width: 40px;
    height: 40px;
  }
  
  .sidebar-nav {
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .sidebar-link {
    padding: 4px 14px !important;
    border-bottom: 1px solid var(--primary-dark);
    flex-shrink: 0 !important;
  }
  
  .sidebar-link-text {
    font-family: "Lekton", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.02em;
    display: block;
    white-space: normal;
    word-break: break-word;
  }
  
  .sidebar-close-text {
    font-size: 14px !important;
    letter-spacing: 0.08em;
    font-weight: 900;
  }
  
  /* Page hero + content mobile rules — scoped to narrow viewports only */
  @media (max-width: 1024px) {
    .page-hero {
      height: 60vh !important;
      min-height: 400px !important;
      max-height: 500px !important;
      width: 100%;
      overflow: hidden;
    }

    .page-hero-image {
      width: 100%;
      height: 100%;
    }

    .page-hero-content {
      padding: 0 20px !important;
    }

    .page-hero-title {
      font-family: 'Press Start 2P', "PressStart", monospace !important;
      font-size: clamp(14px, 2.5vw, 36px) !important;
      line-height: 1.1 !important;
    }

    .page-hero-label {
      font-size: 12px !important;
      letter-spacing: 0.15em;
    }

    .page-hero-description {
      font-size: 16px !important;
      line-height: 1.6;
    }

    /* Page Content Mobile */
    .page-content-section {
      padding: 60px 0 !important;
      width: 100%;
      overflow: hidden;
    }

    .page-content-grid {
      gap: 60px !important;
    }

    .page-content-item {
      grid-template-columns: 1fr !important;
      gap: 30px !important;
    }

    .page-content-item.reverse {
      direction: ltr;
    }

    .page-content-image {
      height: 60vh !important;
      max-height: 500px !important;
      border-radius: 0;
    }

    .page-content-text {
      padding: 20px 0 !important;
    }

    .page-content-text h2 {
      font-size: clamp(28px, 6vw, 48px) !important;
      line-height: 1.1 !important;
    }
  }

/* Booking bar - authoritative desktop styling (override earlier rules) */
@media (min-width: 1024px) {
  body.home .booking-bar {
    display: block !important;
    margin: 18px 0 28px 0 !important;
  }
  body.home .booking-bar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px !important;
  }
  body.home .booking-form {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    background: #f2f2f2 !important;
    padding: 6px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(10,10,10,0.05) !important;
    border: 1px solid rgba(10,10,10,0.04) !important;
  }
  body.home .booking-form .booking-field {
    display: flex !important;
    flex-direction: column !important;
    font-size: 11px !important;
    color: var(--text-light) !important;
    min-width: 140px !important;
    flex: 1 1 0 !important;
    margin-bottom: 0 !important;
  }
  body.home .booking-form .booking-field.date {
    min-width: 220px !important;
  }
  body.home .booking-form .booking-field.guests {
    min-width: 92px !important;
    max-width: 120px !important;
    flex: 0 0 auto !important;
  }
  body.home .booking-field label {
    font-weight: 700 !important;
    color: var(--text-lighter) !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
  body.home .booking-field input[type="date"],
  body.home .booking-field select {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    text-align: center !important;
    text-align-last: center !important;
  }
  body.home .booking-form .booking-cta {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
  }
  body.home .booking-form .btn-primary {
    min-width: 110px !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    background: #c4d6b0 !important;
    box-shadow: 0 6px 12px rgba(196, 214, 176, 0.3) !important;
    color: #580f41 !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: "Lekton", sans-serif !important;
  }
}
  
  .page-content-text p {
    font-size: 16px !important;
    line-height: 1.6;
  }
  
  .feature-list li,
  .experience-features,
  .create-stats {
    font-size: 15px !important;
  }
  
  /* Community Cards Mobile */
  .community-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    margin-top: 30px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .community-card {
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
    aspect-ratio: 4/3 !important;
    scroll-snap-align: center !important;
  }
  
  .community-card-content {
    padding: 24px !important;
  }
  
  .community-card-content h3 {
    font-size: 20px !important;
  }
  
  /* Testimonials Mobile */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
  
  /* Location Section Mobile */
  .location-section {
    padding: 60px 0 !important;
  }
  
  .location-grid {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
  
  .location-map {
    height: 300px !important;
  }
  
  /* Home page gallery and location section titles mobile */
  body.home .gallery-section .section-title,
  body.home .location-section .section-title {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
}

  /* Slight extra spacing around the rethinking section so the banner doesn't collide */
  body.home .rethinking-wrapper {
    padding-top: 0px !important;
    padding-bottom: 36px !important;
  }


/* Gallery: remove fixed row heights and tighten spacing (authoritative overrides) */
.gallery-section {
  padding-top: 20px !important;
  padding-bottom: 8px !important;
}

.gallery-grid {
  /* prefer content-driven rows instead of fixed px heights */
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: none !important;
  grid-auto-rows: minmax(160px, auto) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

/* Homepage gallery must be 3 per row (6 images => 2 rows) on desktop */
@media (min-width: 1024px) {
  body.home .gallery-section .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 350px !important;
    gap: 1.5px !important;
  }
}

.gallery-item img {
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 1023px) {
  .gallery-section {
    padding-top: 12px !important;
    padding-bottom: 6px !important;
  }

  .gallery-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: 78vh !important;
    gap: 1px !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: #f2f2f2 !important;
  }
}

/* Collapse gap between gallery and the following section (location/contact) */
.gallery-section + .location-section {
  padding-top: 12px !important;
  margin-top: 0 !important;
}

/* If the following section is generic .section, also collapse it when adjacent */
.gallery-section + .section {
  padding-top: 30px !important;
  margin-top: 0 !important;
}

/* Remove internal top spacing inside the location section when it follows the gallery */
.gallery-section + .location-section .location-content {
  margin-top: 0 !important;
  gap: 28px !important;
}

/* Reduce the section-header bottom spacing immediately inside the gallery to tighten flow */
.gallery-section .section-header {
  margin-bottom: 12px !important;
}

/* Tighten vertical spacing between rethinking and experience sections on homepage */
body.home .rethinking-section {
  padding-bottom: 12px !important;
}

body.home .experience-grid-section {
  padding-top: 12px !important;
  padding-bottom: 24px !important;
}

body.home .experience-wrapper {
  min-height: auto !important;
  gap: 24px !important;
  padding: 0 20px !important;
}

/* Ensure section headers inside these sections don't add extra margin */
body.home .rethinking-section .section-header,
body.home .experience-grid-section .section-header {
  margin-bottom: 8px !important;
}




/* Small authoritative overrides: reduce hero and newsletter vertical size to avoid overlap */
:root { --site-hero-short: 65vh; --site-hero-min: 450px; }

/* Reduce homepage hero (video) height */
body.home .hero {
  height: var(--site-hero-short) !important;
  min-height: var(--site-hero-min) !important;
}

/* Keep inner-page heroes same size as homepage hero */
body:not(.home) .page-hero {
  height: var(--site-hero-short) !important;
  min-height: var(--site-hero-min) !important;
}

/* Make hero content slightly tighter */
.page-hero .page-hero-content {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Ensure homepage hero logo stays centered */
body.home .hero .hero-content {
  padding: 0 40px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1000px !important;
}

body.home .hero .hero-title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  margin-bottom: 24px !important;
}

body.home .hero .hero-logo {
  width: 500px !important;
  height: 281.25px !important;
  max-width: 500px !important;
  max-height: 281.25px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: translateX(0) !important;
}

@media (max-width: 1024px) {
  body.home .hero .hero-logo {
    max-width: 150px !important;
    transform: translateX(0) !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* Tighten newsletter banner: lower padding and font-size cap */
.newsletter-banner {
  padding: 4px 0 !important;
}
.newsletter-text {
  font-size: clamp(18px, 3vw, 40px) !important;
  padding: 0 8px !important;
}

@media (max-width: 900px) {
  body:not(.home) .page-hero { height: 60vh !important; min-height: 380px !important; }
  body.home .hero { height: 60vh !important; min-height: 380px !important; }
  .newsletter-text { font-size: clamp(16px, 4.5vw, 32px) !important; }
}



/* Extra breathing room: ensure hero text never touches the following banner */
.page-hero .page-hero-content {
  padding-bottom: 40px !important;
}

/* Ensure homepage hero has slightly larger min-height to accommodate large type */
body.home .hero { min-height: 450px !important; }

/* Push newsletter down to avoid touching hero text */
.newsletter-banner {
  margin-top: 5px !important;
}

/* Slightly cap hero title maximum to prevent extreme sizes on very wide screens */
.page-hero-title {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
  font-size: clamp(14px, 2.5vw, 36px) !important;
  line-height: 1.3 !important;
}

/* Global typography override (project-wide) */
/* Heading: Press Start 2P */
h1, h2,
.section-title,
.page-hero-title,
.hero-title {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
}

/* Subheading: Lato Bold */
h3, h4, h5, h6,
.section-label,
.page-hero-label,
.hero-subtitle,
.section-description,
.stay-subtitle,
.experience-subtitle {
  font-family: var(--font-subheading) !important;
  font-weight: 700 !important;
}

/* Body: Lato Regular */
body, p, li, a, span, label, input, textarea, select, button,
.space-content-text,
.location-detail-item p,
.feature-item p {
  font-family: var(--font-body) !important;
  font-weight: 400;
}

/* Image alignment consistency (same visual size/crop across repeated photos) */
.gallery-grid > .gallery-item,
.gallery-grid-full > div,
.community-card,
.space-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery-grid > .gallery-item img,
.gallery-grid-full img,
.community-card img,
.space-image img,
.page-content-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Homepage section below rethinking text: keep all 6 cards equal size/aligned */
body.home .experience-grid-section .experience-gallery {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
}

body.home .experience-grid-section .gallery-item {
  height: 360px !important;
  aspect-ratio: auto !important;
  transform: none !important; /* prevents parallax offset from making sizes look uneven */
}

body.home .experience-grid-section .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Final mobile override: full-bleed stacked photos + 1px separator line */
/* Mobile-only: Responsive Building, Rooms, and Experiences sections with proper padding */
@media (max-width: 768px) {
  /* Building Section - Stack single column with 20px padding */
  .gallery-page-body .section:has(#building) .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .gallery-page-body .section:has(#building) [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .gallery-page-body .section:has(#building) img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
  .gallery-page-body .section:has(#building) [style*="aspect-ratio"] {
    aspect-ratio: 4 / 3 !important;
  }

  /* Rooms Section - Stack single column with 20px padding */
  .gallery-page-body .section:has(#rooms) .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .gallery-page-body .section:has(#rooms) [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .gallery-page-body .section:has(#rooms) img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
  .gallery-page-body .section:has(#rooms) [style*="aspect-ratio"] {
    aspect-ratio: 4 / 3 !important;
  }

  /* Experiences Section - Stack single column with 20px padding */
  .gallery-page-body .section:has(#experiences) .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .gallery-page-body .section:has(#experiences) .common-areas-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .gallery-page-body .section:has(#experiences) img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
  .gallery-page-body .section:has(#experiences) [style*="aspect-ratio"] {
    aspect-ratio: 4 / 3 !important;
  }
}
@media (max-width: 768px) {
  .gallery-section,
  .gallery-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .gallery-grid,
  .gallery-grid-full {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 78vh !important;
    gap: 1px !important;
    background: #f2f2f2 !important;
  }

  .gallery-grid .gallery-item,
  .gallery-grid-full > div {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .gallery-grid .gallery-item img,
  .gallery-grid-full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* Absolute final override: home pre-newsletter image stack full-bleed + row gap on mobile */
@media (max-width: 1024px) {
  body.home .experience-grid-section,
  body.home .experience-grid-section .container-full,
  body.home .experience-grid-section .experience-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home .experience-grid-section .experience-gallery {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    gap: 1px !important;
    background: #f2f2f2 !important;
  }

  body.home .experience-grid-section .gallery-column {
    gap: 1px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .experience-grid-section .gallery-item {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
  }
}

/* Absolute final-final override: guarantee gaps for pre-WELCOME home images */
@media (max-width: 1024px) {
  body.home .experience-grid-section,
  body.home .experience-grid-section .container-full,
  body.home .experience-grid-section .experience-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home .experience-grid-section .experience-gallery {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    gap: 1px !important;
    background: #f2f2f2 !important;
  }

  body.home .experience-grid-section .gallery-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 1px !important;
  }

  body.home .experience-grid-section .gallery-item {
    width: 100% !important;
    margin: 0 0 1px 0 !important;
    border: 0 !important;
  }

  body.home .experience-grid-section .gallery-column:last-child .gallery-item:last-child {
    margin-bottom: 0 !important;
  }
}

/* Absolute final gallery fix: remove extra spacing after Experience section */
body.home .gallery-section .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home .gallery-section .gallery-grid {
  gap: 0 !important;
  margin-top: 0 !important;
}

body.home .gallery-section .gallery-item {
  margin: 0 !important;
}

@media (max-width: 1023px) {
  body.home .gallery-section .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

  /* Make hero-book-btn smaller on mobile */
  @media (max-width: 768px) {
    .hero-book-btn {
      padding: 10px 22px !important;
      font-size: 12px !important;
      margin-top: 20px !important;
      border-width: 1.5px !important;
      margin-bottom: 100px !important;
    }
  }

/* Absolute final-final gallery mobile fix: remove blank area between images */
@media (max-width: 1023px) {
  body.home .gallery-section .gallery-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    gap: 1px !important;
    background: #f2f2f2 !important;
  }

  body.home .gallery-section .gallery-grid > .gallery-item {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  body.home .gallery-section .gallery-grid > .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: cover !important;
  }
}

/* Absolute final booking form fix (mobile-first consistency across iOS/Android) */
body.home .booking-form .btn-primary {
  background: #c4d6b0 !important;
  color: #580f41 !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  font-family: "Lekton", sans-serif !important;
}


@media (max-width: 1023px) {
  body.home .booking-bar {
    padding: 10px 0 !important;
  }

  body.home .booking-bar .container {
    padding: 0 12px !important;
  }

  body.home .booking-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  body.home .booking-form .booking-field {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body.home .booking-field label {
    font-size: clamp(12px, 3.6vw, 14px) !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    margin-bottom:6px !important;
    color: #6f6f6f !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  body.home .booking-field input[type="date"],
  body.home .booking-field select {
    height: 54px !important;
    min-height: 54px !important;
    font-size: 16px !important; /* avoids iOS zoom + keeps readability */
    line-height: 1.2 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  body.home .booking-form .booking-cta {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.home .booking-form .btn-primary {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 14px !important;
    font-size: clamp(18px, 4.5vw, 24px) !important;
    letter-spacing: 4px !important;
    font-weight: 700 !important;
  }
}

/* Absolute final typography lock (entire project) */
body,
body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

h1,
h2,
.hero-title,
.page-hero-title,
.section-title,
.collective-title,
.stay-title,
.experience-main-title,
.playlist-main-title {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
  font-weight: 400 !important;
}

h3,
h4,
h5,
h6,
.section-label,
.hero-subtitle,
.page-hero-label,
.section-description,
.stay-subtitle,
.experience-subtitle,
.events-heading,
.locations-heading,
.location-name,
.location-city,
.nav a,
.locations-link,
.hotel-link,
.booking-field label,
.btn {
  font-family: var(--font-subheading) !important;
  font-weight: 700 !important;
}

/* Sidebar link text - Lekton for mobile menu */
.sidebar-link-text {
  font-family: "Lekton", sans-serif !important;
}

.hotel-link {
  font-family: "Lekton", sans-serif !important;
  font-variant: normal !important;
  letter-spacing: 0.1em !important;
}

/* Absolute final desktop image spacing (entire project): 1px gap */
@media (min-width: 1024px) {
  .gallery-grid,
  .gallery-grid-full,
  .experience-gallery,
  .playlist-image-grid,
  .community-grid {
    gap: 1px !important;
  }

  .gallery-grid > .gallery-item,
  .gallery-grid-full > div,
  .experience-gallery .gallery-item,
  .playlist-image-item,
  .community-card {
    margin: 0 !important;
  }
}

/* Absolute final fix: remove right-edge black shadow on mobile when sidebar is closed */
@media (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .sidebar {
    right: -76vw !important;
    box-shadow: none !important;
  }

  .sidebar.active {
    right: 0 !important;
    box-shadow: -6px 0 40px rgba(0, 0, 0, 0.25) !important;
  }
}

/* Absolute final home scrolling strip colors */
body.home .newsletter-banner,
body.home .features-section {
  background: #580f41 !important;
}

/* Absolute final STAY color override */
body.home .stay-content {
  background: #580f41 !important;
}

body.home .stay-locations .location-item:hover {
  background-color: #580f41 !important;
}

/* Absolute final EXPERIENCE color override */
body.home .experience-content {
  background: #c4d6b0 !important;
  color: #0a0a0a !important;
}

body.home .experience-content .experience-main-title,
body.home .experience-content .experience-subtitle {
  color: #0a0a0a !important;
}

body.home .experience-events .experience-item:hover {
  background-color: #c4d6b0 !important;
  color: #0a0a0a !important;
}

/* Absolute final EXPERIENCE text color override */
body.home .experience-section .experience-content,
body.home .experience-section .experience-content .experience-main-title,
body.home .experience-section .experience-content .experience-subtitle,
body.home .experience-section .experience-events,
body.home .experience-section .events-heading,
body.home .experience-section .experience-item,
body.home .experience-section .experience-item-name,
body.home .experience-section .experience-item-meta {
  color: #58355e !important;
}

body.home .experience-section .experience-item-name,
body.home .experience-section .experience-item-meta,
body.home .experience-section .experience-item-name strong,
body.home .experience-section .experience-item-meta strong {
  font-weight: 700 !important;
}

/* Absolute final STAY text color override */
body.home .stay-locations-section .stay-content,
body.home .stay-locations-section .stay-content .stay-title,
body.home .stay-locations-section .stay-content .stay-subtitle {
  color: #b4d2e7 !important;
}

/* Keep LOCATION row text dark (not light blue) */
body.home .stay-locations .locations-heading,
body.home .stay-locations .location-item,
body.home .stay-locations .location-name,
body.home .stay-locations .location-city,
body.home .stay-locations .location-status {
  /* color: #0a0a0a !important; */
}

body.home .stay-locations .location-item:hover{
color: #ffffff !important;
}

/* Ensure exactly 30px space between newsletter and stay section on home */
body.home .newsletter-banner {
  margin-bottom: 30px !important;
}
body.home .stay-locations-section {
  margin-top: 0 !important;
}

/* Only 30px between newsletter and stay section, no effect elsewhere */
body.home .newsletter-banner + .stay-locations-section {
  margin-top: 30px !important;
}
body.home .newsletter-banner {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.home .stay-locations-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Absolute final: slightly slower home newsletter scroll */
body.home .newsletter-track {
  animation-duration: 34s !important;
}

@media (max-width: 1023px) {
  body.home .newsletter-track {
    animation-duration: 30s !important;
  }
}

/* Absolute final: slow the home features carousel strip */
body.home .features-scroll {
  animation-duration: 20s !important;
  animation-timing-function: linear !important;
}

@media (max-width: 1023px) {
  body.home .features-scroll {
    animation-duration: 16s !important;
    animation-timing-function: linear !important;
  }
}

/* Home: tighten the scrolling features strip vertical height */
body.home .features-section {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body.home .features-scroll-wrapper {
  margin-top: 14px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

body.home .feature-icon {
  margin-bottom: 16px !important;
}

body.home .feature-item h3 {
  margin-bottom: 8px !important;
}

@media (max-width: 1023px) {
  body.home .features-section {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  body.home .features-scroll-wrapper {
    margin-top: 8px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
}

/* Absolute final: WELCOME TO PXL scrolling text color */
body.home .newsletter-text {
  color: #b4d2e7 !important;
}

/* Absolute final Stay hero text fix */
body.stay-page-body .page-hero .container {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

body.stay-page-body .page-hero-content {
  max-width: min(92vw, 980px) !important;
  padding: 72px 24px 24px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
}

body.stay-page-body .page-hero-title {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
  font-size: clamp(14px, 2.5vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.02em !important;
  margin: 0 auto !important;
  max-width: 14ch !important;
  text-wrap: balance;
  color: #ffffff !important;
}

body.stay-page-body .page-hero-description {
  font-size: clamp(14px, 1.15vw, 19px) !important;
  line-height: 1.5 !important;
  max-width: 56ch !important;
  margin: 0 auto !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 1023px) {
  body.stay-page-body .page-hero {
    height: 68vh !important;
    min-height: 500px !important;
    max-height: none !important;
  }

  body.stay-page-body .page-hero-content {
    padding: 84px 18px 24px !important;
    gap: 10px !important;
  }

  body.stay-page-body .page-hero-title {
    font-size: clamp(28px, 8vw, 52px) !important;
    line-height: 1.06 !important;
    max-width: 13ch !important;
  }

  body.stay-page-body .page-hero-description {
    font-size: clamp(13px, 4vw, 17px) !important;
    line-height: 1.45 !important;
    max-width: 34ch !important;
  }
}

@media (max-width: 768px) {
  body.stay-page-body .page-hero-title {
    font-size: 21px !important; /* 30% reduction from 28-52px clamp range */
    line-height: 1.06 !important;
    max-width: 13ch !important;
  }
  
  body.experience-page-body .page-hero-title {
    font-size: 21px !important; /* 30% reduction from 28-52px clamp range */
    line-height: 1.3 !important;
    max-width: 17ch !important;
    word-spacing: -0.01em;
    letter-spacing: -0.014em;
  }
  
  body.create-page-body .page-hero-title {
    font-size: 21px !important;
    line-height: 1.3 !important;
    max-width: 17ch !important;
    word-spacing: -0.1em;
    letter-spacing: -0.014em;
  }
  
  body.rooms-page-body .page-hero-title {
    font-size: 21px !important; /* 30% reduction from 28-52px clamp range */
    line-height: 1.06 !important;
    max-width: 13ch !important;
  }
}

/* Gallery page: Lifestyle Moments section color theme */
.lifestyle-moments-section {
  background: #580f41 !important;
  color: #b4d2e7 !important;
}

.lifestyle-moments-section h3,
.lifestyle-moments-section p,
.lifestyle-moments-section .community-card-content,
.lifestyle-moments-section .community-card-content h3,
.lifestyle-moments-section .community-card-content p {
  color: #b4d2e7 !important;
}
/* Rooms Page - Section Title Styling */
@media (min-width: 769px) {
  body.rooms-page-body .section-title {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 768px) {
  body.rooms-page-body .section-title {
    font-size: 25px !important; /* 30% reduction from 36px */
    line-height: 1.1 !important;
  }
  
  body.rooms-page-body .page-hero-title {
    font-size: 21px !important; /* 30% reduction from 28px */
    line-height: 1.4 !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    letter-spacing: 0.04em !important;
  }
  
  body.rooms-page-body .page-hero-title .hero-line {
    display: block !important;
    margin: 6px 0 !important;
    white-space: normal !important;
  }
}

/* Rooms Page - Category headings (Smart, Flex, Signature) */
body.rooms-page-body .space-content h3 {
  font-family: var(--font-heading) !important;
  font-size: 20px !important; /* 30% reduction from 28px for mobile, will be overridden by desktop */
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  color: var(--primary-color) !important;
}

/* Home Page - Section Titles (Gallery and Location sections) */
@media (min-width: 769px) {
  body.home .gallery-section .section-title,
  body.home .location-section .section-title {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
}

/* Home Page - Mobile section titles */
@media (max-width: 768px) {
  body.home .gallery-section .section-title,
  body.home .location-section .section-title {
    font-size: 25px !important; /* 30% reduction from 36px */
    line-height: 1.1 !important;
  }
}

/* About Page - Section Title Styling */
@media (min-width: 769px) {
  body.about-page-body .section-title {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 768px) {
  body.about-page-body .section-title {
    font-size: 21px !important;
    line-height: 1.3 !important;
    word-spacing: -0.1em;
    letter-spacing: -0.014em;
  }
  
  body.about-page-body .page-hero-title {
    font-size: 21px !important;
    line-height: 1.3 !important;
    max-width: 17ch !important;
    word-spacing: -0.1em;
    letter-spacing: -0.014em;
  }
}

/* Gallery Page - Section Title Styling */
@media (min-width: 769px) {
  body.gallery-page-body .section-title {
    font-size: 36px !important;
    line-height: 1.3 !important;
    word-spacing: -0.1em;
    letter-spacing: -0.014em;
  }
  
  body.about-page-body .page-hero-title {
    font-size: 36px !important;
    line-height: 1.3 !important;
    max-width: 17ch !important;
    word-spacing: -0.1em;
    letter-spacing: -0.014em;
  }
}

@media (max-width: 768px) {
  body.gallery-page-body .section-title {
    font-size: 21px !important;
    line-height: 1.3 !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    word-spacing: -0.1em;
    letter-spacing: -0.014em;
  }
  
  body.gallery-page-body .page-hero-title {
    font-size: 21px !important;
    line-height: 1.3 !important;
    max-width: 17ch !important;
    word-spacing: -0.1em;
    letter-spacing: -0.014em;
  }
  
  /* Don't apply 28px to gallery items */
  body.gallery-page-body .gallery-grid-full > div h3,
  body.gallery-page-body .gallery-item h3 {
    font-size: inherit !important;
  }
}

/* Gallery Page - All headings consistency */
body.gallery-page-body h1,
body.gallery-page-body h2,
body.gallery-page-body h3 {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
}

/* Room Details Modal */
.room-modal {
  display: none;
  position: fixed;
  z-index: 14000 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  animation: fadeIn 0.3s ease-in-out;
  overflow: hidden;
}

.room-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.room-modal-content {
  background: #ffffff;
  border-radius: 12px;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  animation: slideUp 0.3s ease-in-out;
  margin: auto;
}

#photosModal .room-modal-content {
  width: 95% !important;
  max-width: 100% !important;
}

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

.room-modal-close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 36px;
  font-weight: bold;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
  pointer-events: auto !important;
}

.room-modal-close:hover {
  color: #580f41;
}

.room-modal-body {
  display: grid;
  height: auto;
  min-height: auto;
  grid-template-columns: 70% 30%;
  gap: 24px;
  padding: 12px 24px;
  padding-left: 0;
  padding-right: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Photos page modal specific styles */
#photosModal .room-modal-body {
  grid-template-columns: 100%;
  padding: 0 !important;
  grid-template-rows: 100%;
}

.room-modal-gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 12px 24px;
}

#photosModal .room-modal-gallery {
  padding: 0 !important;
  gap: 0 !important;
}

.room-modal-images {
  width: 100%;
  aspect-ratio: 3/2;
  max-height: 480px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 8px 32px rgba(44,16,60,0.18);
  box-sizing: border-box;
}

#photosModal .room-modal-images {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
}

.modal-main-image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  box-sizing: border-box;
}

#photosModal .modal-main-image-wrapper {
  width: 100% !important;
  height: 100% !important;
}

.modal-main-image {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  cursor: zoom-in;
  box-sizing: border-box;
}
.modal-main-image:active {
  transform: scale(1.18);
  cursor: zoom-out;
}

.room-modal-thumbnails {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scroll-snap-type: x mandatory;
  padding-left: 0;
  padding-right: 0;
  scrollbar-width: thin;
  scrollbar-color: #b4d2e7 #f3e9f1;
  padding: 12px 24px 12px 24px;
}

#photosModal .room-modal-thumbnails {
  padding: 12px 24px 12px 24px;
}

/* Auto-scroll animation for main image in modal */

.room-modal-thumbnail {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.room-modal-thumbnail:hover,
.room-modal-thumbnail.active {
  border-color: #580f41;
}

.room-modal-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-modal-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px 24px;
}

.room-modal-details h2 {
  font-family: 'Press Start 2P', "PressStart", monospace !important;
  font-size: 36px;
  color: #580f41;
  margin: 0;
  line-height: 1.2;
}

.room-modal-details p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.room-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.room-features-list li {
  font-size: 15px;
  color: #333;
  padding-left: 24px;
  position: relative;
  list-style: none;
}

.room-features-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #580f41;
  font-weight: bold;
}

.btn-book-room {
  background: #c4d6b0;
  color: #580f41;
  border: none;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 900 !important;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
  align-self: flex-start;
  letter-spacing: 1px;
  font-family: "Lekton", sans-serif !important;
}

.btn-book-room:hover {
  background: #b0c89c;
}

/* Room Modal (#roomModal) - Desktop Styles */
#roomModal .room-modal-content {
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}

#roomModal .room-modal-body {
  grid-template-columns: 70% 30%;
  gap: 0px;
  padding: 12px 24px;
  padding-left: 0;
  padding-right: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mobile responsive - ONLY for index.html room modal (#roomModal) */
@media (max-width: 1024px) {
  .container, .container-full {
    overflow-x: hidden;
  }

  /* Gallery modal mobile - extend full width */
  #galleryModal.room-modal {
    width: 115vw !important;
    left: -7.5vw !important;
  }

  #galleryModal .room-modal-content {
    width: 120vw !important;
    max-width: 120vw !important;
    max-height: 60vh !important;
    height: auto !important;
    animation: fadeIn 0.3s ease-in-out;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  #galleryModal .room-modal-body {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 60vh !important;
  }

  #galleryModal .room-modal-gallery {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-height: 60vh !important;
    overflow: hidden !important;
  }

  #galleryModal .room-modal-images {
    width: 100% !important;
    height: 60vh !important;
    aspect-ratio: unset !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0 !important;
  }

  #galleryModal .modal-main-image-wrapper {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: transform !important;
    box-sizing: border-box !important;
  }

  #galleryModal .modal-main-image {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1) !important;
    cursor: zoom-in !important;
    box-sizing: border-box !important;
  }

  #galleryModal .room-modal-thumbnails {
    padding: 12px 24px !important;
  }


  /* Specific to roomModal container on index.html */
  #roomModal {
    width: 100% !important;
    left: 0 !important;
  }

  /* Specific to roomModal on index.html */
  #roomModal .room-modal-content {
    width: calc(100% - 4px) !important;
    max-width: 600px !important;
    max-height: 80vh !important;
    height: auto !important;
    animation: fadeIn 0.3s ease-in-out !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 12000 !important;
    margin: auto !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
    border-radius: 20px !important;
  }

  /* Make close button clickable on mobile - keep original position */
  #roomModal .room-modal-close {
    z-index: 10001 !important;
    pointer-events: auto !important;
  }

  #roomModal .room-modal-body {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #roomModal .room-modal-gallery {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-height: 50vh !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  #roomModal .room-modal-images {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
    max-height: 50vh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 12px 12px 0 0 !important;
  }

  #roomModal .modal-main-image-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: transform !important;
    box-sizing: border-box !important;
  }

  #roomModal .modal-main-image {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1) !important;
    cursor: zoom-in !important;
    box-sizing: border-box !important;
  }

  #roomModal .room-modal-thumbnails {
    padding: 12px 12px !important;
  }

  #roomModal .room-modal-details {
    padding: 16px !important;
    grid-column: 1 !important;
    overflow-y: auto !important;
  }


  /* Photos modal mobile - keep original responsive behavior */
  #photosModal.room-modal {
    width: 115vw !important;
    left: -7.5vw !important;
  }

  #photosModal .room-modal-content {
    width: 120vw !important;
    max-width: 120vw !important;
    max-height: 60vh !important;
    height: auto !important;
    animation: fadeIn 0.3s ease-in-out !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  #photosModal .room-modal-body {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 60vh !important;
  }

  #photosModal .room-modal-gallery {
    width: 100% !important;
    box-sizing: border-box !important;
    max-height: 60vh !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #photosModal .room-modal-images {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 60vh !important;
    aspect-ratio: unset !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0 !important;
  }

  #photosModal .modal-main-image-wrapper {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: transform !important;
    box-sizing: border-box !important;
  }

  #photosModal .modal-main-image {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1) !important;
    cursor: zoom-in !important;
    box-sizing: border-box !important;
  }

  /* Shared mobile styles for both modals */
  .room-modal-body {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px;
  }

  .room-modal-details h2 {
    font-size: 28px;
  }
  .room-modal-thumbnails {
    height: 80px;
    max-height: 80px;
    margin-bottom: 4px;
  }
  .room-modal-thumbnail {
    width: 70px;
    height: 70px;
  }
  .room-modal-details h2 {
    font-size: 20px;
    margin-top: 8px;
    margin-bottom: 4px;
  }
  .room-modal-details p {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
  }
  .room-features-list li {
    font-size: 12px;
    padding-left: 18px;
  }
  .btn-book-room {
    padding: 10px 18px;
    font-size: 14px;
    margin-top: 8px;
  }

  .menu-toggle {
    pointer-events: auto !important;
    z-index: 11002 !important;
    cursor: pointer !important;
  }

  .menu-toggle span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Sidebar always positioned correctly */
  .sidebar {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    right: -75vw !important;
    top: 0 !important;
    height: 100vh !important;
    width: 75vw !important;
    max-width: 75vw !important;
    z-index: 11999 !important;
    transition: right 0.5s ease !important;
    pointer-events: auto !important;
  }

  .sidebar.active {
    right: 0 !important;
  }

  /* Overlay always functional */
  .sidebar-overlay {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 11998 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
  }

  .sidebar-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Room Types Title Styling */
.room-types-title {
  font-size: 36px !important;
  line-height: 1.2;
  font-weight: 400;
}

@media (max-width: 768px) {
  .room-types-title {
    font-size: 28px !important;
  }
}

/* FAQ Accordion Styles */
.faq-item {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  gap: 15px;
}

.faq-question h4 {
  font-family: var(--font-body);
  font-weight: 700 !important;
  color: #333;
  font-size: 16px !important;
  margin: 0;
  flex: 1;
  text-align: left;
  transition: color 0.3s ease;
  line-height: 1.5;
}

.faq-arrow {
  font-size: 12px;
  color: #999;
  transition: transform 0.3s ease;
  margin-left: 15px;
  flex-shrink: 0;
  display: inline-block;
}

.faq-question:hover h4 {
  color: #580f41;
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  color: #580f41;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  padding: 0;
}

.faq-item.active .faq-answer {
  max-height: 1000px;
  opacity: 1;
  padding: 0 0 20px 0;
}

.faq-answer p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 15px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* Mobile Responsive - Tablet */
@media (max-width: 1024px) {
  .faq-question h4 {
    font-size: 15px !important;
  }

  .faq-answer p {
    font-size: 14px;
  }
}

/* Mobile Responsive - Small Devices */
@media (max-width: 768px) {
  .faq-item {
    border-bottom: 1px solid #e0e0e0;
  }

  .faq-question {
    padding: 16px 0;
    gap: 10px;
  }

  /* FAQ Grid Mobile */
  .faqs-section .container > div[style*="grid-template-columns"] {
    display: block !important;
    padding: 0 20px !important;
  }

  .faqs-section .container > div[style*="grid-template-columns"] > div:first-child {
    display: none !important;
  }

  .faqs-section .container > div[style*="grid-template-columns"] > div:last-child {
    padding-left: 0 !important;
  }

  /* Add section headings on mobile */
  .faqs-section .container > div[style*="grid-template-columns"] > div:last-child > .faq-item:nth-child(1)::before {
    content: "General";
    display: block;
    font-weight: 700;
    color: #333;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .faqs-section .container > div[style*="grid-template-columns"] > div:last-child > .faq-item:nth-child(5)::before {
    content: "Transportation/Directions";
    display: block;
    font-weight: 700;
    color: #333;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .faqs-section .container > div[style*="grid-template-columns"] > div:last-child > .faq-item:nth-child(7)::before {
    content: "Reservations";
    display: block;
    font-weight: 700;
    color: #333;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .faq-question h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .faq-arrow {
    font-size: 11px;
    margin-left: 10px;
    min-width: 16px;
    text-align: center;
  }

  .faq-answer {
    padding: 0;
  }

  .faq-item.active .faq-answer {
    padding: 0 0 16px 0;
  }

  .faq-answer p {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
  }
}

/* Mobile Responsive - Extra Small Devices */
@media (max-width: 480px) {
  .faq-question {
    padding: 14px 0;
    gap: 8px;
  }

  .faq-question h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  .faq-arrow {
    font-size: 10px;
    margin-left: 8px;
  }

  .faq-answer p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 6px;
  }

  .faqs-section {
    padding: 60px 0 !important;
  }

  /* Hide sidebar on mobile */
  .faqs-section > .container > div > div:first-child {
    display: none !important;
  }

  /* Fix FAQ grid width on mobile */
  .faqs-section > .container > div {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
}

/* ========================================
   PXL FOOTER SECTION
   ======================================== */

.pxl-footer {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0px solid #580f41;
  border-top: 6px solid #580f41;
  border-bottom: 6px solid #580f41;
  color: #000000;
  padding: 10px 0 10px;
  font-family: var(--font-body);
  position: relative;
}

/* Footer Header - Logo, Address, Social */
.footer-header {
  display: grid;
  grid-template-columns: 1fr 2.5fr 1fr;
  align-items: start;
  gap: 40px;
  padding: 0 40px 5px;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo-img {
  height: 105px;
  width: 150px;
  max-width: 150px;
  max-height: 105px;
  object-fit: contain;
  display: block;
}

.footer-address {
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px 30px;
}

.footer-address p {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  color: #000000;
}

.footer-social {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}

.social-link {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.social-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #580f41, #7b2c4a);
  z-index: -1;
  transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 50%;
}

.social-link:hover {
  background: #580f41;
  color: #ffffff;
  transform: translateY(-3px) scale(1.15);
  border-color: rgba(88, 15, 65, 0.3);
  box-shadow: 0 8px 16px rgba(88, 15, 65, 0.3);
}

.social-link:hover::before {
  left: 0;
}

.social-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Footer Divider Line */
.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 40px 40px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer Content Grid - 4 Columns */
.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 0 40px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links li {
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: #000000;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.footer-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #580f41, #7b2c4a);
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.footer-links a:hover {
  color: #580f41;
  transform: translateX(4px);
}

.footer-links a:hover::after {
  width: 100%;
}

/* Footer Contact Column (Column 4) */
.footer-contact {
  gap: 24px;
}

.footer-phone,
.footer-website {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #000000;
}

.footer-phone .highlight,
.footer-website .highlight {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  opacity: 0.9;
}

.footer-website a {
  color: #000000;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 4px;
  margin: -8px -12px;
}

.footer-website a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(88, 15, 65, 0.1);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.footer-website a:hover {
  color: #580f41;
  transform: translateY(-2px);
}

.footer-website a:hover::before {
  opacity: 1;
}

/* Footer Bottom Copyright */
.footer-bottom {
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.footer-bottom p {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  margin: 0;
  letter-spacing: 0.5px;
}

/* ========================================
   FOOTER RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
  .footer-header {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 30px 30px;
  }

  .footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-address {
    border-left: none;
    border-right: none;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 0 30px 30px;
  }

  .footer-divider {
    margin: 0 30px 30px;
  }

  .footer-bottom {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 768px) {
  .pxl-footer {
    padding: 40px 0 20px;
  }

  .footer-header {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px 20px;
  }

  .footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-logo-img {
    height: 65px;
    width: 84px;
    max-width: 84px;
    max-height: 65px;
  }

  .footer-address {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 20px 0;
    text-align: center;
    
  }

  .footer-address p {
    font-size: 15px;
    letter-spacing: 1px;
  }

  .footer-social {
    gap: 15px;
    justify-content: center;
  }

  .social-link {
    width: 28px;
    height: 28px;
  }

  .social-link svg {
    width: 16px;
    height: 16px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px 20px;
  }

  .footer-column {
    gap: 16px;
  }

  .footer-links {
    gap: 10px;
  }

  .footer-links a {
    font-size: 15px;
  }

  .footer-phone,
  .footer-website {
    font-size: 15px;
  }

  .footer-divider {
    margin: 0 20px 20px;
  }

  .footer-bottom {
    padding: 20px 20px 0;
  }

  .footer-bottom p {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .pxl-footer {
    padding: 30px 0 15px;
    border: none;
    border-top: 6px solid #580f41;
  }

  .footer-header {
    gap: 15px;
    padding: 0 16px 15px;
  }

  .footer-logo-img {
    height: 40px;
    width: auto;
    max-width: 55px;
    max-height: 40px;
  }

  .footer-address p {
    font-size: 15px;
    letter-spacing: 0.5px;
  }

  .footer-social {
    gap: 12px;
  }

  .social-link {
    width: 24px;
    height: 24px;
  }

  .social-link svg {
    width: 14px;
    height: 14px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px 15px;
  }

  .footer-column {
    gap: 12px;
  }

  .footer-links {
    gap: 8px;
  }

  .footer-links a {
    font-size: 15px;
  }

  .footer-phone,
  .footer-website {
    font-size: 15px;
  }

  .footer-phone .highlight,
  .footer-website .highlight {
    font-size: 15px;
    margin-bottom: 3px;
  }

  .footer-divider {
    margin: 0 16px 15px;
    height: 0.5px;
  }

  .footer-bottom {
    padding: 15px 16px 0;
  }

  .footer-bottom p {
    font-size: 15px;
  }
}

/* Footer Links Zoom Effect */
.footer-links a:hover {
  transform: scale(1.05);
  text-decoration: none;
}

.footer-links a::after {
  display: none !important;
}

/* Instagram-style 2-Column Grid for Photos Page */
.photos-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.photos-grid-2col > div {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f0f0f0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
}

.photos-grid-2col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  line-height: 0;
  font-size: 0;
}

.photos-grid-2col > div:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Responsive for tablets and mobile */
@media (max-width: 768px) {
  .photos-grid-2col {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .photos-grid-2col {
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
  }
}

#webDiv{
  width: 100%;
  height: auto;
  /* min-height: 800px; */
  /* overflow: auto; */
}

/* Mobile responsive StayGrid section */
@media (max-width: 1024px) {
  #webDiv iframe {
    min-height: 700px;
  }
}

@media (max-width: 768px) {
  #webDiv iframe {
    min-height: 600px;
    min-width: 100%;
  }
}

@media (max-width: 480px) {
  #webDiv iframe {
    min-height: 500px;
    min-width: 100%;
  }
}

/* === Founder Biography Modal Styles === */
.founder-bio-modal {
  position: fixed;
  z-index: 13000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.75);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s ease, opacity 0.3s ease;
  padding: 20px;
  display: none;
}

.founder-bio-modal.active {
  display: flex;
  visibility: visible;
  opacity: 1;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.founder-bio-modal-content {
  animation: slideIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Close button hover effect */
#founder-bio-modal-close:hover {
  background: #e0e0e0 !important;
  transform: scale(1.1);
}

/* Read More button styling */
.founder-read-more-btn {
  display: inline;
  padding: 0 !important;
  margin-left: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #580f41 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  transition: all 0.2s ease;
}

.founder-read-more-btn:hover {
  color: #3d0a2b !important;
  text-decoration-thickness: 2px !important;
}

.founder-read-more-btn:active {
  opacity: 0.8;
}

/* Truncated bio text styling */
.founder-bio-truncated {
  color: #d32f2f;
  font-weight: 600;
  text-align: left;
}

/* Modal responsive design */
@media (max-width: 768px) {
  .founder-bio-modal-content {
    padding: 30px 20px !important;
    margin: 20px;
    max-height: 75vh !important;
  }
  
  #founder-bio-modal-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
    top: 12px !important;
    right: 12px !important;
  }
}

@media (max-width: 480px) {
  .founder-bio-modal-content {
    padding: 20px 16px !important;
    margin: 10px;
    max-height: 75vh !important;
  }
}

/* Responsive 3-column grid for Public Areas section */
@media (max-width: 1024px) {
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}