:root {
  --green: #2f4b2f;
  --cream: #FBF6F6;
  --ink: #1b1f23;
  --radius: 14px;
  --shadow-1: 0 2px 6px rgba(0, 0, 0, .10);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .12);
  --container: 1320px;
  --sticky-offset: 64px;
  --filters-h: 0px;
  --hero-h: 560px;
  --hero-h-max: 60vh;
  --panel-info-w: 260px;
  --panel-thumbs-w: 140px;
  --danger: #dc2626
  --roomsTitle-h: 56px; /* fallback */
  --filters-h: 0px;     /* JS overwrites this */
  --list-gap: 14px;     /* <— size of the gap (set 10–15px as you like) */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif
}

html,
body {
  height: 100%
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  color: #000000
}

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

[hidden] {
  display: none !important
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px
}

#topNav,
.top-nav {
  position: fixed;
  inset: 0 0 auto 0;
  background: var(--green);
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: .6rem 1rem;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .10);
  view-transition-name: none !important;
  z-index: 1100;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.search-bar {
  will-change: transform;
  gap: 1rem;
  transition: transform .3s ease;
  position: sticky !important;
  top: calc(var(--sticky-offset) + 6px) !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  justify-content: center !important;
  width: 100%;
  margin: 7px 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 650 !important
}

.search-bar.tab-hidden {
  transform: translateY(calc(-100% - 12px))
}

.branding {
  display: flex;
  align-items: center;
  gap: 10px
}

.branding .logo {
  height: 34px
}

.nav-icons {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  gap: 10px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.menu-btn {
  font-size: 18px;
  background: transparent;
  color: #111;
  border: 0;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  cursor: pointer;
  margin-left: 4px;
}

.menu-btn:hover {
  background: rgb(239, 239, 239)
}

.menu-btn:focus-visible {
  outline: 2px solid #0b5;
  outline-offset: 2px
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1001;
  background: #e7e7e7;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  padding: 8px;
  min-width: 180px
}

.menu-popover button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #111;
  cursor: pointer;
  font-size: 14px
}

.menu-popover button:hover,
.menu-popover button:focus-visible {
  background: rgba(0, 0, 0, .06);
  outline: none
}

.menu-popover .menu-sep {
  border: 0;
  height: 1px;
  background: #e9ecef;
  margin: 6px 0
}

.search-bar button {
  position: relative;
  z-index: 1;
  padding: .6rem 1.05rem;
  border: 0;
  background: transparent;
  border-radius: 9999px;
  font-weight: 700;
  color: #1e392a;
  opacity: .75;
  cursor: pointer;
  white-space: nowrap
}

.search-bar button.active {
  background: transparent;
  font-weight: 700;
  color: var(--green);
  opacity: 1
}

.content-section {
  padding: 3rem 1rem 2rem;
  background: #fff;
  flex: 1
}

.content-section h2 {
  margin-bottom: 1rem;
  color: var(--green)
}

.content-section ul {
  list-style: none;
  padding-left: 0
}

.content-section li {
  background: #f4f4f4;
  margin-bottom: .75rem;
  padding: 1rem;
  border-left: 6px solid var(--green);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08)
}

.video-block {
  padding: 3rem 0 2rem;
  background: #fff
}

.video-heading {
  color: #1e392a;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1rem
}

.video-embed {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  background: #000;
  aspect-ratio: 16/9
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0
}

#intro-video[aria-hidden="true"] {
  display: none
}

.room-filters-wrapper {
  margin: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.room-filters-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #f8f9fa;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.room-filters-toggle:hover {
  background: #e9ecef;
}

.filters-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #333;
}

.filters-toggle-icon {
  width: 22px;
  height: 22px;
  color: #666;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.room-filters-toggle[aria-expanded="true"] .filters-toggle-icon {
  transform: rotate(180deg);
}

.room-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-top: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.room-filters-toggle[aria-expanded="false"] + .room-filters {
  display: none;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 140px;
}

.filter-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #444;
}

.filter-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: white;
  font-size: 0.95rem;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-select:hover {
  border-color: #999;
}

.filter-select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.clear-filters-btn {
  padding: 0.5rem 1.25rem;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-end;
  white-space: nowrap;
}

.clear-filters-btn:hover {
  background: #f5f5f5;
  border-color: #999;
  color: #333;
}

.clear-filters-btn:active {
  transform: scale(0.98);
}

.room-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem
}

.no-rooms-message {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 12px;
  border: 2px dashed #e5e7eb;
  min-height: 300px;
}

.no-rooms-message svg {
  color: #9ca3af;
  margin-bottom: 1.5rem;
}

.no-rooms-message h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #374151;
  margin: 0 0 0.75rem;
}

.no-rooms-message p {
  font-size: 1rem;
  color: #6b7280;
  max-width: 500px;
  margin: 0;
  line-height: 1.6;
}

.room-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.room-card:hover {
  transform: translateY(-4px)
}

.room-card img {
  -webkit-user-drag: none;
  width: 100%;
  height: 160px;
  object-fit: cover
}

.room-card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.room-card-content h4 {
  font-size: 1rem;
  margin-bottom: .25rem;
  color: var(--green)
}

.room-card-content p {
  margin: 0;
  font-size: .9rem;
  color: #444
}

.room-card-content .highlight {
  font-weight: 700
}

.room-card,
.room-card * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.status {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: .85rem
}

.status.available {
  background: #c8e6c9;
  color: #256029
}

.status.full {
  background: #ffcdd2;
  color: #b71c1c
}

.room-card.is-active {
  outline: 3px solid #cfe8d0;
  outline-offset: 2px;
  border-radius: 8px
}

.room-panel .room-panel__bar .room-title {
  color: #ffffff;
}

.room-panel {
  display: none;
  margin-top: 16px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transform-origin: var(--grow-x, 50%) var(--grow-y, 0%)
}

.room-panel.is-open {
  display: block;
  animation: growIn .28s ease;
  position: sticky;
  top: var(--sticky-offset)
}

.room-panel__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  background: var(--green);
  color: #fff;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.room-close {
  font-size: 28px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer
}

.room-close:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px
}

.room-panel__content {
  display: grid;
  gap: 20px;
  padding: 18px;
  grid-template-columns: var(--panel-info-w) 1fr var(--panel-thumbs-w);
  align-items: start
}

.room-info {
  align-self: start;
  position: sticky;
  top: var(--sticky-offset);
  background: #fff;
  border: 1px solid #e8ece8;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
  padding: 16px 18px 18px
}

.room-info .unit-title {
  font-weight: 700;
  font-size: clamp(.95rem, .8rem + .25vw, 1.1rem);
  line-height: 1.2;
  margin: 4px 0 12px;
  color: #243026;
}

.kv {
  border-top: 1px solid #e8ece8;
  padding-top: 12px;
  margin-top: 6px
}

.kv>div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline
}

.kv dt {
  font-weight: 700;
  color: #1d2a21
}

.kv dd {
  margin: 0;
  color: #0e140f;
  text-align: right
}

.kv .occ-bar {
  height: 8px;
  background: #cccfce;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px
}

.kv .occ-bar>span {
  display: block;
  height: 100%;
  background: var(--green)
}

.kv .occ-bar.is-full>span {
  background: #dc2626
}

.kv .price-line {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .56rem;
  border-radius: 9999px;
  background: #eef6f2;
  color: #2a6b4d;
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.1;
}

.badge-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
}

.kv .price {
  font-weight: 700;
  letter-spacing: .2px;
}

.kv .kv-price .badge-pill {
  margin-left: .75rem;
}

.btn-inquire {
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer
}

.btn-inquire.is-full {
  background: #dc2626;
  color: #fff
}

/* total column height equals the visible sticky panel area */
/* narrower left, wider panel */
.filters-and-rooms.is-split {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(760px, 1fr);
  grid-template-areas: "filters panel" "list panel";
  gap: 12px 20px;
  align-items: start;
  align-content: start;
}

.filters-and-rooms.is-split .room-list {
  grid-area: list;
  overflow-y: auto !important;
  /* force its own scrollbar */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 6px;
  scrollbar-gutter: stable;
  min-height: 0;
  /* allow the grid item to shrink */
  max-height: calc(100vh - var(--sticky-offset) - var(--filters-h));
  /* css fallback; JS can still set height */
  overscroll-behavior: contain;
  /* keep scroll inside this area */
  contain: layout paint;
  /* (optional) perf */
}

/* keep filters sticky if you like (optional, you already have this) */
.filters-and-rooms.is-split .room-filters {
  position: sticky;
  top: var(--sticky-offset);
}


.filters-and-rooms.is-split .room-list>.room-card {
  flex: 0 0 auto;
  width: 100%;
}


.filters-and-rooms.is-split .room-panel {
  grid-area: panel;
  margin-top: 0;
  position: sticky;
  top: var(--sticky-offset);
  overflow: visible;
  /* was: auto */
}

body.details-open .search-bar {
  display: none !important
}

#rooms .container {
  padding-left: 0;
  padding-right: 0
}

.hero-img {
  width: 100%;
  height: var(--hero-h);
  max-height: var(--hero-h-max);
  object-fit: cover;
  border-radius: 14px;
  background: #ddd
}

.hero-image {
  position: relative;
  height: 300px;
  overflow: hidden;
  margin-top: 0 !important
}

#headerMuteBtn .icon {
  display: none;
  font-size: 16px;
  line-height: 1
}

#headerMuteBtn[aria-pressed="true"] .muted {
  display: inline
}

#headerMuteBtn[aria-pressed="false"] .unmuted {
  display: inline
}

.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background: #000;
  pointer-events: none
}

.hero-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2
}

.mute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  color: var(--green);
  transition: transform .15s ease, background-color .2s ease
}

.mute-btn:hover {
  transform: translateY(-1px);
  background: transparent;
}

.mute-btn .icon {
  display: none;
  line-height: 1;
  font-size: 18px
}

.mute-btn[aria-pressed="true"] .muted {
  display: inline
}

.mute-btn[aria-pressed="false"] .unmuted {
  display: inline
}

.pano-viewer {
  width: 100%;
  height: var(--hero-h);
  max-height: var(--hero-h-max);
  border-radius: 14px;
  display: none;
  background: #ddd;
  overflow: hidden
}

.pano-viewer.is-on {
  display: block
}

.thumbs {
  display: grid;
  gap: 10px;
  align-content: start;
  align-self: start;
  max-height: var(--hero-h-max);
  overflow: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain
}

.thumbs img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px
}

.building-info {
  padding: 4rem 0;
  background: #f5f6f7
}

.bi-heading {
  color: #1e392a;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  position: relative
}

.bi-heading::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: .6rem;
  background: linear-gradient(90deg, #1e392a, #2c4e3a);
  border-radius: 999px
}

.bi-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem
}

.bi-row--flip {
  grid-template-columns: 0.9fr 1.1fr
}

.bi-text h3 {
  color: #1e392a;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 .75rem
}

.bi-text p {
  line-height: 1.8;
  color: #4b5563;
  margin: 0
}

.bi-image {
  position: relative;
  isolation: isolate
}

.bi-image::before {
  content: "";
  position: absolute;
  inset: -10px -12px auto auto;
  z-index: -1;
  width: 40%;
  height: 40%;
  border-radius: 14px;
  filter: blur(10px);
  background: linear-gradient(135deg, #1e392a33, #2c4e3a22)
}

.bi-image img {
  width: 100%;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  object-fit: cover
}

.bi-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem
}

.bi-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1rem 1.2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
  border-left: 6px solid #1e392a;
  transition: transform .25s ease, box-shadow .25s ease
}

.bi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .08)
}

.bi-card h4 {
  margin: 0 0 .35rem;
  color: #1e392a;
  font-weight: 700
}

.bi-card p {
  margin: 0;
  color: #4b5563
}

.bi-cta {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem
}

.btn-brand {
  display: inline-block;
  padding: .7rem 1.1rem;
  border-radius: 10px;
  background: linear-gradient(90deg, #1e392a, #2c4e3a);
  color: #fff;
  font-weight: 600
}

.btn-brand:hover {
  filter: brightness(1.05)
}

.btn-ghost {
  display: inline-block;
  padding: .7rem 1.1rem;
  border-radius: 10px;
  color: #1e392a;
  border: 1px solid #1e392a;
  background: #fff
}

.btn-ghost:hover {
  background: #f0f4f2
}

.reveal,
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform
}

.reveal-left {
  transform: translateX(-24px)
}

.reveal-right {
  transform: translateX(24px)
}

.reveal-up {
  transform: translateY(24px)
}

.is-visible {
  opacity: 1;
  transform: none
}

.testimonials {
  padding: 4rem 0 4.5rem;
  background: #f5f6f7
}

.testimonials .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem
}

.t-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.05fr 1fr;
  align-items: start
}

.t-left .t-pill {
  display: inline-block;
  background: #f3eac2;
  color: #1e392a;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem
}

.t-title {
  margin: .75rem 0 1rem;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.1;
  color: #1e392a;
  font-weight: 800
}

.t-title span {
  color: #2c4e3a
}

.t-lead {
  color: #4b5563;
  line-height: 1.8;
  max-width: 48ch
}

.t-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap
}

.t-stat .t-value {
  color: #d4a300;
  font-size: 2rem;
  font-weight: 800
}

.t-stat .t-label {
  color: #6b7280
}

.t-right {
  display: grid;
  gap: 1rem
}

.map-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: #e4ebe7;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.t-card {
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06)
}

.t-stars {
  display: flex;
  gap: .25rem;
  margin-bottom: .5rem;
  color: #d4a300
}

.t-stars .star {
  width: 20px;
  height: 20px;
  fill: #d4a300
}

.t-quote {
  color: #374151;
  line-height: 1.8;
  margin: .25rem 0 .9rem;
  font-style: italic
}

.t-author .name {
  font-weight: 700;
  color: #1e392a
}

.t-author .role {
  color: #6b7280;
  font-size: .95rem
}

#toTopBtn {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 1200;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(32, 64, 32, .95);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  cursor: pointer;

  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

#toTopBtn.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#toTopBtn:focus-visible {
  outline: 2px solid #fff9;
  outline-offset: 2px;
}

#toTopBtn svg {
  width: 20px;
  height: 20px;
}

.site-footer {
  background: #0f1c16;
  color: #d7e6dd;
  padding: 3.5rem 0 2.25rem
}

.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 2.5rem 2rem;
  align-items: start
}

.footer-title {
  color: #fff;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.15;
  margin: 0
}

.brand-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem
}

.brand-icon {
  width: 28px;
  height: 28px;
  color: #8fc2a8
}

.footer-blurb {
  margin: .25rem 0 0;
  max-width: 32ch;
  color: #a8b9b1;
  line-height: 1.7
}

.footer-heading {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 .75rem
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem
}

.footer-link {
  color: #cfe4d9;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease
}

.footer-link:hover {
  color: #fff
}

.footer-link[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none
}

.footer-sep {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin: 2.25rem 0 1.25rem
}

.footer-copy {
  text-align: center;
  color: #a8b9b1;
  margin: 0;
  font-size: .95rem
}

section.hero-image {
  height: calc(75vh - var(--sticky-offset));
  position: relative;
  background: #000;
  overflow: hidden
}

.hero-media,
#heroVideo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: #000;
  pointer-events: none;
}

#headerMuteBtn {
  width: 36px;
  height: 36px;
  border: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  cursor: pointer;
  background: transparent
}

#headerMuteBtn:hover {
  background: #fff
}

.search-bar .tabs-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 auto
}

.search-bar .tab-underline {
  position: absolute;
  height: 3px;
  background: #204020;
  border-radius: 2px;
  bottom: 10px;
  left: 0;
  width: 0;
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1),
    width .28s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
  will-change: transform, width;
  z-index: 0;
}

.search-bar button:hover {
  opacity: 1
}

#main {
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform, opacity;
  view-transition-name: none !important;
  touch-action: pan-y;
}

#main.exit-left {
  transform: translateX(-24px);
  opacity: 0;
}

#main.exit-right {
  transform: translateX(24px);
  opacity: 0;
}

#main.enter-from-left {
  transform: translateX(-24px);
  opacity: 0;
}

#main.enter-from-right {
  transform: translateX(24px);
  opacity: 0;
}

::view-transition-old(page),
::view-transition-new(page) {
  animation: none !important;
}

#main.dragging {
  transition: none !important;
  cursor: grabbing;
}

#heroMuteBtn,
.hero-controls {
  display: none !important
}

#roomPanel .kv .kv-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: start;
  margin: 0
}

#roomPanel .kv .kv-row+.kv-row {
  margin-top: 8px
}

#roomPanel .kv .kv-info-text {
  font-size: 0.9rem;
  color: #555;
  font-weight: 400;
}

#roomPanel .kv .kv-occ-row {
  margin-top: 20px
}

#roomPanel .kv .kv-occ {
  display: flex;
  flex-direction: column;
  gap: 4px
}

#roomPanel .kv .kv-occ .occ-numbers {
  align-self: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: .9
}

#roomPanel .kv .occ-bar {
  height: 8px;
  border-radius: 999px;
  background: #e6e8ea;
  overflow: hidden
}

#roomPanel .kv .occ-bar>span {
  display: block;
  height: 100%;
  background: #2f5b3b
}

.filters-and-rooms,
.filters-and-rooms .room-list,
.room-card,
#roomPanel {
  touch-action: pan-y;
}

body.details-open #rooms {
  padding-top: 90px
}

body.details-open .filters-and-rooms {
  margin-top: 8px
}

dialog.login-dialog,
dialog.register-dialog,
dialog.inquire-dialog {
  border: 0;
  border-radius: 14px;
  padding: 22px 22px 18px;
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  position: fixed;
  inset: 0;
  margin: auto
}

dialog.login-dialog::backdrop,
dialog.register-dialog::backdrop,
dialog.inquire-dialog::backdrop {
  background: rgba(0, 0, 0, .35)
}

.login-dialog h3,
.register-dialog h3 {
  margin: 6px 0 18px;
  text-align: center;
  color: var(--green);
  font-size: 20px;
  font-weight: 800
}

.inquire-dialog h3 {
  margin: 6px 0 18px;
  text-align: center;
  color: var(--green);
  font-size: 22px;
  font-weight: 800
}

.dialog-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer
}

.dialog-close:hover {
  background: rgba(0, 0, 0, .06)
}

.auth-form,
.inq-form {
  display: grid;
  gap: 14px
}

.input-wrap input {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
  background: #fff;
  outline: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02) inset
}

.input-wrap input:focus {
  border-color: #c1d5c1;
  box-shadow: 0 0 0 3px rgba(47, 75, 47, .12)
}

.inq-form .input-wrap input {
  height: 48px;
  padding: 0 16px;
  border-radius: 999px
}

.inq-form .with-icon {
  position: relative
}

.inq-form .calendar-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none
}

.register-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px
}

.register-row .line {
  flex: 1 1 auto;
  height: 1px;
  background: #e5e7eb
}

.register-row .link,
.switch-auth .link {
  background: transparent;
  border: 0;
  color: #2563eb;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 6px
}

.register-row .link:hover,
.switch-auth .link:hover {
  background: rgba(0, 0, 0, .04)
}

.switch-auth {
  text-align: center;
  margin-top: 6px;
  color: #6b7280;
  font-size: 14px
}

.input-with-action {
  position: relative
}

.inline-action {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #5b5bd6;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px
}

.inline-action:disabled {
  color: #9ca3af;
  cursor: default
}

.btn {
  position: relative
}

.btn.primary.block {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  background: var(--green);
  color: #fff;
  border: 0;
  cursor: pointer;
  min-height: 44px;
  font-size: clamp(14px, 0.9rem + 0.2vw, 16px)
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .7
}

.btn.loading {
  pointer-events: none;
  opacity: .9;
  position: relative;
}

.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-top-color: #fff;
  /* Spinner color */
  border-radius: 50%;
  animation: cz-spin 0.9s linear infinite;
}

.input-wrap .field-error {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--danger)
}

.input-wrap.invalid input,
.input-wrap.invalid select,
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .16)
}

input[aria-invalid="true"]::placeholder {
  color: var(--danger);
  opacity: .9
}

.auth-form {
  --field-h: 44px
}

.auth-form .input-with-action {
  position: relative
}

.auth-form .input-with-action input {
  padding-right: 84px
}

.auth-form .input-with-action .inline-action {
  top: calc(var(--field-h) / 2);
  transform: translateY(-50%);
  min-width: 56px;
  text-align: right
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap
}

#roomPanel .kv .occ-bar.is-full>span {
  background: #dc2626
}

#roomPanel .room-hero .muted {
  color: #6b7280;
  font-size: .95rem
}

#roomPanel .thumbs .thumb {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  background: #fff;
  border-radius: 10px;
  cursor: pointer
}

#roomPanel .thumbs .thumb.is-active {
  border-color: var(--green)
}

#roomPanel .thumbs .thumb.thumb-cover-duplicate {
  display: none;
}

#roomPanel .thumbs .tag-360 {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  pointer-events: none
}

#roomPanel .thumbs,
#roomPanel .hero-img,
#roomPanel #panoViewer {
  touch-action: pan-y pinch-zoom;
}

.room-info .field-title {
  display: block;
  margin: 12px 0 4px;
  font-size: 1.05rem;
  color: #1d2a21
}

.room-info .field-body {
  color: #1a1f1c
}

.room-info .field-body .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 8px;
  vertical-align: middle
}

.room-info h2,
.room-info h3,
.room-info h4 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 4px 0 12px;
  color: #243026
}

.room-info .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px
}

.room-info .card-head .unit-title {
  margin: 0
}

.room-info .type-pill {
  position: static;
  background: #e7f0ea;
  color: var(--green);
  font-weight: 700;
  font-size: .85rem;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04) inset
}

.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px
}

.btn-inquire.is-full[disabled] {
  opacity: 1;
  cursor: not-allowed
}

@supports not (aspect-ratio:16/9) {
  .video-embed {
    padding-top: 56.25%
  }

  .video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
  }
}

@keyframes growIn {
  from {
    transform: scale(.98);
    opacity: 0
  }

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

@media (prefers-reduced-motion: reduce) {
  #main {
    transition: none;
  }

  #main.exit-left,
  #main.exit-right,
  #main.enter-from-left,
  #main.enter-from-right {
    transform: none;
    opacity: 1;
  }
}

@media(max-width:960px) {

  .bi-row,
  .bi-row--flip {
    grid-template-columns: 1fr
  }

  .bi-row--flip .bi-image {
    order: 1
  }

  .bi-row--flip .bi-text {
    order: 2
  }

  .bi-cards {
    grid-template-columns: 1fr
  }

  .bi-image::before {
    display: none
  }
}

/* --- Building photo: simple next arrow --- */
.bi-image { position: relative; }
.bi-image img { display:block; width:100%; height:auto; transition: opacity .35s ease; }

.bi-arrow {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 999px;
  background: rgba(29, 42, 33, .9); color: #fff; font-size: 28px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.bi-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bi-image:hover .bi-arrow { filter: brightness(1.05); }


@media(max-width:960px) {
  .t-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem
  }
}

@media(max-width:600px) {
  .footer-grid {
    grid-template-columns: 1fr
  }

  .footer-title {
    font-size: 1.4rem
  }
}
/*
@media (max-width: 720px) {
  .search-bar {
    overflow-x: auto
  }

  .search-bar .tabs-wrap {
    min-width: min(560px, 100%)
  }
}*/

@supports not (inset: 0) {

  dialog.login-dialog,
  dialog.register-dialog,
  dialog.inquire-dialog {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
  }
}

@keyframes cz-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 1060px) {

  /* stack the grid: panel first, then filters, then list  */
  .filters-and-rooms.is-split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "panel"
      "filters"
      "list";
    gap: 12px;
  }

  /* no sticky on mobile */
  .filters-and-rooms.is-split .room-filters {
    position: static;
    top: auto;
    margin: 0 12px;
  }

  /* list flows normally (no forced height/scroll calc) */
  .filters-and-rooms.is-split .room-list {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 12px 16px;
  }

  /* panel becomes normal flow and full width */
  .filters-and-rooms.is-split .room-panel {
    position: static;
    top: auto;
    border-radius: var(--radius);
    overflow: hidden;
    /* keep rounded corners on hero */
  }

  /* inside the panel: single column order: hero -> thumbs -> info */
  .room-panel__content {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "hero"
      "thumbs"
      "info";
    gap: 8px;
    padding: 0px;
  }

  /* hero sizing */
  .room-panel__content .hero-img,
  .room-panel__content #panoViewer {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* consistent height on phones */
    border-radius: 0 0 10px 10px;
  }
  
  /* Explicit ordering for mobile */
  .room-hero {
    order: 1;
  }

  /* thumbs: horizontal swipe/scroll */
  .thumbs {
    order: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(34%, 140px);
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .thumbs .thumb {
    scroll-snap-align: start;
  }

  .thumbs img {
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
  }

  /* info card third */
  .room-info {
    order: 3;
    position: static;
    top: auto;
  }
  
  /* description and amenities last */
  .unit-extra {
    order: 4;
    padding: 0 18px 18px;
  }

  /* tidy the green bar */
  .room-panel__bar {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }
}

/* a bit tighter on very small phones  */
@media (max-width: 420px) {
  .thumbs {
    grid-auto-columns: min(38%, 120px);  
  }
  .thumbs img {
    height: 72px;                      
  }
}

/* --- NEWSTUFF --- */
/* --- NEWSTUFF --- */
/* --- NEWSTUFF --- */
/* --- NEWSTUFF --- */
/* --- NEWSTUFF --- */
/* --- NEWSTUFF --- */

/* ── Inquire dialog: box, spacing, width (merged) ─────────────────────────── */
dialog.inquire-dialog,
#inquireDialog{
  width: min(92vw, 860px);      /* wider on desktop, mobile friendly */
  max-width: none;
  max-height: min(92vh, 900px);
  padding: 22px;                /* restored padding so .inq-header edge-pulls align */
  border: none;
  border-radius: 12px;
  overflow: auto;
  background: #fff;
}

/* Backdrop blur (shared by auth + inquire) */
dialog.login-dialog::backdrop,
dialog.register-dialog::backdrop,
dialog.inquire-dialog::backdrop{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
}

/* Header bar (green style) */
.inquire-dialog .inq-header{
  margin: -22px -22px 16px;     /* pulls to dialog edges (matches 22px padding above) */
  padding: 16px 22px;
  background: var(--green);
  color: #fff;
  border-radius: 12px 12px 0 0;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}

/* ── Form layout ─────────────────────────────────────────────────────────── */
.inq-form .form-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .inq-form .form-grid{ grid-template-columns: 1fr 1fr; }
  .inq-form .form-grid .full{ grid-column: 1 / -1; }
}

/* Inputs to match rounded-pill style */
.inq-form select,
.inq-form textarea{
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  outline: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  border-radius: 12px;
}
.inq-form select{
  height: 48px;
  padding: 0 16px;
  border-radius: 999px; /* pill */
}
.inq-form textarea{
  min-height: 120px;
  padding: 12px 14px;
  border-radius: 14px;
  resize: vertical;
}
.inq-form select:focus,
.inq-form textarea:focus{
  border-color: #c1d5c1;
  box-shadow: 0 0 0 3px rgba(47,75,47,.12);
}

/* Lock only the Inquiry message textarea height */
#inquireForm #inqMessage{
  resize: none !important;
  overflow: auto;
}

/* ── Has-room toggle row ─────────────────────────────────────────────────── */
.switch-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
.switch-row .switch-label{ display:flex; gap:10px; align-items:center; font-weight:600; }
.switch-row .switch-home{ opacity:.9; }

.toggle{ position:relative; width:42px; height:26px; display:inline-block; }
.toggle input{ opacity:0; width:0; height:0; }
.toggle span{ position:absolute; inset:0; background:#e6e8ea; border-radius:999px; transition:.2s; }
.toggle span::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.2s;
}
.toggle input:checked + span{ background:#2f5b3b; }
.toggle input:checked + span::after{ transform: translateX(16px); }

/* Revealed "has room" section */
.hasroom-fields{
  margin-top:10px; padding:14px; border:1px solid #e5e7eb; border-radius:12px; background:#f7faf8;
}
.hasroom-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .hasroom-grid{ grid-template-columns:1fr 1fr 1fr; } }
.hasroom-fields[hidden]{ display:none !important; }

/* Consent box */
.consent-box{
  margin-top: 8px; padding: 12px 14px; border: 1px solid #d9e7da;
  background: #f6faf7; border-radius: 12px;
}
.consent-box label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.consent-box input{ margin-top: 4px; }

/* Actions row (Cancel + Send) */
.inq-form .actions{ display:flex; gap:12px; margin-top:8px; }
.inq-form .actions .btn{ flex:1; min-height:44px; border-radius:12px; }
.btn.ghost{ background:#f8faf9; border:1px solid #e5e7eb; color:#1b1f23; }
.btn.ghost:hover{ background:#f3f6f4; }

/* ── Header Inquire pill (outside capsule, before .nav-icons) ────────────── */
#main-header{
  display: flex;
  align-items: center;
}
#inqHeaderBtn.inq-btn{
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9999px;
  font-weight: 700;
  background: #fff;
  color: var(--green);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  line-height: 32px;

  /* placement */
  margin-left: auto;
  margin-right: 12px;   /* gap before the capsule */
  order: 9;             /* just before the capsule */
}
.nav-icons{ order: 10; }
#inqHeaderBtn.inq-btn:hover,
#inqHeaderBtn.inq-btn:focus-visible{ filter: brightness(1.06); outline: none; }
@media (max-width: 420px){
  #inqHeaderBtn.inq-btn{ padding: 0 10px; font-size: 14px; }
}

/* Disabled state for Send Inquiry */
.inq-form .actions .btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(10%);
}

/* hide honeypot but keep it in the DOM for bots */
.hp{position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}





/* ==== Terms overlay (non-dialog) — styled like your previous dialog ==== */

/* sits above the inquiry dialog's content */
#inquireDialog .tc-overlay { z-index: 10000; }

.tc-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(110%);
}

.tc-overlay.is-open { display: flex; }

.tc-dialog {
  /* match previous dialog card */
  width: min(92vw, 720px);
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  padding: 22px;

  /* content flow */
  position: relative;
  overflow: auto;
}

/* header to match */
.tc-dialog h3 {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 18px;
  color: #111827;
}

/* scrollable body like .terms-dialog .terms-body */
.tc-body {
  margin: 8px 0 14px;
  max-height: calc(80vh - 110px);
  overflow: auto;
  line-height: 1.6;
}

/* actions row aligned right (same feel as before) */
.tc-dialog .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* close button styled like your dialog-close */
.tc-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: rgba(25, 24, 24, 0.1);
  color: #000;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* prevent background scroll while open */
body.modal-open { overflow: hidden; }

/* make the T&C link obviously clickable */
.terms-label a { text-decoration: underline; }

/* Terms modal: spacing, top divider, green button */
#termsOverlay .tc-dialog .tc-body{
  padding: 20px 24px 24px;
  line-height: 1.55;
}

#termsOverlay .tc-dialog .tc-body p{
  margin: 8px 0 18px;
}

/* divider above the first section heading (“1. Acceptance …”) */
#termsOverlay .tc-dialog .tc-body > h4:first-of-type{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}


/* Row that holds the button */
#termsOverlay .tc-dialog .actions{
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
}

/* Big rounded "I Agree" button */
#termsOverlay .tc-dialog .actions #tcAccept{
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;

  min-width: 220px;      /* similar width to your sample */
  height: 48px;          /* tall button */
  padding: 0 24px;       /* side padding */
  border-radius: 12px;   /* rounded corners */

  font-size: 1.rem;   /* ~18px */
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  cursor: pointer;
}

/* Nice states */
#termsOverlay .tc-dialog .actions #tcAccept:hover{
  filter: brightness(.95);
}
#termsOverlay .tc-dialog .actions #tcAccept:active{
  transform: translateY(1px);
}

/* Mobile: full-width button */
@media (max-width: 520px){
  #termsOverlay .tc-dialog .actions #tcAccept{
    width: 100%;
    min-width: 0;
  }
}


#termsOverlay .tc-dialog .actions button:hover{
  filter: brightness(.95);
}

/* ===== T&C spacing (headings, paragraphs, lists) ===== */

/* Base line-height */
#termsOverlay .tc-dialog .tc-body,
.terms-body{
  line-height: 1.6;
}

/* Headings */
#termsOverlay .tc-dialog .tc-body h4,
.terms-body h4{
  margin: 18px 0 8px;       /* top/bottom spacing for each section title */
}

/* Paragraphs */
#termsOverlay .tc-dialog .tc-body p,
.terms-body p{
  margin: 8px 0 16px;
}

/* Lists */
#termsOverlay .tc-dialog .tc-body ul,
.terms-body ul{
  margin: 8px 0 16px 1.25rem;  /* left indent + bottom space */
  padding-left: 0;              /* ensure consistent indent */
  list-style-position: outside;
}

#termsOverlay .tc-dialog .tc-body li,
.terms-body li{
  margin: 6px 0;               /* space between bullet items */
}

/* Optional: a touch of space after bold labels inside list items */
#termsOverlay .tc-dialog .tc-body li > strong,
.terms-body li > strong{
  margin-right: 4px;
}

/* === Alcantara Group section (text-only) === */
.ac-section { padding-top: 3.5rem; padding-bottom: 2.75rem; }
.ac-header { max-width: 980px; margin: 0 auto 2rem; text-align: center; }
.ac-title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); color: var(--ink); font-weight: 800; margin-bottom: .6rem; }
.ac-lead { color: #475569; line-height: 1.85; margin: .5rem auto; }

.ac-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.75rem;
  align-items: start;
  margin-top: 1.5rem;
}
.ac-sub { color: var(--green); font-weight: 800; margin: 0 0 .6rem; }

.ac-card {
  background: #f3f5f4;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  border-left: 5px solid var(--green);
}
.ac-vision blockquote {
  margin: .25rem 0 0;
  color: #334155;
  font-style: italic;
  line-height: 1.8;
}
.ac-mission { background: #e9f4ee; }
.ac-values { background: #eef2ef; }

.ac-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.ac-list li { line-height: 1.75; margin: .25rem 0; }

/* Stats strip */
.ac-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
  background: #f6f7f8;
  border-radius: 14px;
  padding: 1rem;
}
.ac-stat { text-align: center; padding: 1rem .5rem; }
.ac-stat .num { font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); color: #1d2a21; }
.ac-stat .label { font-weight: 700; color: var(--green); margin-top: .25rem; }
.ac-stat .sub { color: #6b7280; font-size: .9rem; }

/* Responsive tweaks */
@media (max-width: 900px){
  .ac-grid { grid-template-columns: 1fr; }
  .ac-header { text-align: left; }
}

/* === AG layout: match target image (text-only bullets) === */

/* Cards: soft panels, NO left border */
.ac-card{
  background:#f3f5f4;
  border-left:0 !important;        /* kill the tall green bar */
  border-radius:12px;
  padding:1.1rem 1.2rem;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
}
.ac-mission{ background:#e9f4ee; }
.ac-values{ background:#eef2ef; }

/* Lists: remove row boxes/dividers and use green dot bullets */
.ac-card .ac-list{
  margin:.25rem 0 0;
  padding-left:0;
  list-style:none;                 /* we’ll draw the bullet */
}
.ac-card .ac-list li{
  position:relative;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:.5rem 0 .5rem 1.35rem !important;  /* space for the dot */
  margin:.15rem 0 !important;
}
.ac-card .ac-list li + li{ border-top:0 !important; } /* kill separators */
.ac-card .ac-list li::before{
  content:"";
  position:absolute; left:0; top:.9em;
  width:.45rem; height:.45rem; border-radius:999px;
  background:var(--green);         /* green dot */
}

/* Quote: put the green bar ONLY on the quote itself */
.ac-vision blockquote{
  margin:.25rem 0 0;
  color:#334155;
  font-style:italic;
  line-height:1.8;
  border-left:4px solid var(--green);
  padding-left:.85rem;
}

/* Space between "Our Legacy" text and the Mission card */
.ac-left > .ac-mission{ 
  margin-top: 1.25rem;  /* tweak to taste: 1rem–1.75rem */
}


/* Slider: fix size based on first image */
.bi-image[data-images]{
  position: relative;
  aspect-ratio: 16/9;              /* safe fallback until JS sets the real ratio */
  overflow: hidden;                /* crop if next images are taller/wider */
}

.bi-image[data-images] img{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* fill the box, preserve ratio */
  display: block;
  transition: opacity .35s ease;
}


.ac-right > .ac-values{ margin-top: 1.25rem; }

/* keep top in view, crop from bottom */
.bi-image[data-images] img{
  object-position: top center;
}


/* Back arrow (left side) */
.bi-arrow--prev{
  left: 12px;
  right: auto;
}
/* --- Slider timing & easing (slower, smoother) --- */
.bi-image[data-images]{
  /* tweak these to taste */
  --slide-dur: .70s;                       /* was .38s */
  --slide-ease: cubic-bezier(.16,.84,.44,1);/* gentle ease-out */
  --fade-dur: .60s;                        /* fade timing */
}

/* make opacity fade match the new timing */
.bi-image[data-images] img{
  transition: opacity var(--fade-dur) var(--slide-ease);
  will-change: transform, opacity;
}

/* Next → slide in from right (longer & smoother) */
@keyframes ac-enter-next {
  from { transform: translateX(26px) scale(var(--img-scale, 1)); opacity: 0; }
  to   { transform: translateX(0)     scale(var(--img-scale, 1)); opacity: 1; }
}
.bi-image[data-images] img.enter-next{
  animation: ac-enter-next var(--slide-dur) var(--slide-ease) both;
}

/* Prev → slide in from left (longer & smoother) */
@keyframes ac-enter-prev {
  from { transform: translateX(-26px) scale(var(--img-scale, 1)); opacity: 0; }
  to   { transform: translateX(0)      scale(var(--img-scale, 1)); opacity: 1; }
}
.bi-image[data-images] img.enter-prev{
  animation: ac-enter-prev var(--slide-dur) var(--slide-ease) both;
}

/* Reduced motion: keep instant */
@media (prefers-reduced-motion: reduce){
  .bi-image[data-images] img.enter-next,
  .bi-image[data-images] img.enter-prev{
    animation: none !important;
    opacity: 1 !important;
    transform: scale(var(--img-scale, 1)) !important;
  }
}
/* Center the Alcantara CTA button under the stats */
.ac-cta{
  display:flex;
  justify-content:center;
  margin-top:1rem;
}

/* Public OK modal — center it like the others */
#site-alert{
  position: fixed;
  inset: 0;              /* center the dialog */
  margin: auto;
  width: min(92vw, 420px);
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;     /* no scrollbars */
}

#site-alert::backdrop{
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

#site-alert .tw-card{
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

#site-alert .tw-close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

#site-alert .tw-actions{ text-align: right; margin-top: 14px; }
#site-alert .tw-actions button{
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: #2f4b2f;
  color: #fff;
}
#site-alert .tw-actions button:hover{ filter: brightness(.95); }





#roomPanel .unit-extra .amenities{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e8ece8;
}

#roomPanel .unit-extra .amenities__title{
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 1.125rem;
  color: #111;
}

#roomPanel .unit-extra .amenities__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;          
  row-gap: 18px;         
}

#roomPanel .unit-extra .amenities__grid li{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  min-height: 0 !important;
}
#roomPanel .unit-extra .amenities__grid li::before,
#roomPanel .unit-extra .amenities__grid li::after{
  content: none !important;
  display: none !important;
}

#roomPanel .unit-extra .amenity .ic{
  width: 26px; 
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  font-size: 20px;          
  line-height: 1;
  color: #111;
}
#roomPanel .unit-extra .amenity .ic svg{
  width: 26px; 
  height: 26px; 
  stroke-width: 2;
}

#roomPanel .unit-extra .amenity span:last-child{
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
}

@media (max-width: 640px){
  #roomPanel .unit-extra .amenities__grid{ 
    grid-template-columns: 1fr 1fr; 
    column-gap: 24px;  /* Smaller gap for mobile */
  }
}

#roomPanel .unit-extra .desc-title{
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 1.125rem;
  color: #111;
}

#roomPanel .unit-extra .desc,
#roomPanel .room-info .desc{
  margin: 4px 0 18px;
  font-size: 1rem;         
  line-height: 1.7;        
  color: #222;
  white-space: pre-line;    
  text-wrap: pretty;        
  hyphens: auto;
}

#roomPanel .unit-extra .desc b,
#roomPanel .room-info .desc b,
#roomPanel .unit-extra .desc strong,
#roomPanel .room-info .desc strong{ font-weight: 700; }
#roomPanel .unit-extra .amenity.no-icon { padding-left: 26px; }

@media (min-width: 1061px){
  #roomPanel .room-panel__content .unit-extra{
    grid-column: 2 / -1;      
    margin-top: 10px;
    padding-inline: 24px;     
    width: 100%;
    max-width: none;
  }
  #roomPanel .unit-extra .desc{ line-height: 1.75; }
}


@media (min-width:1061px){
  #rooms .container{ --roomsTitle-h: 56px; }
  #rooms #roomsTitle{
    position: sticky;
    top: var(--sticky-offset);
    z-index: 700;
    background: #fff;
    padding: 8px 0;         
    margin: 0;
  }

  #rooms .filters-and-rooms .room-filters-wrapper {
    position: sticky !important;
    top: calc(var(--sticky-offset) + var(--roomsTitle-h) + 4px);
    z-index: 690;
  }

  #rooms .filters-and-rooms .room-filters-toggle {
    background: #f8f9fa;
  }
}

@media (max-width: 768px) {
  /* Make hero video fit width on mobile instead of height */
  section.hero-image {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .hero-media,
  #heroVideo {
    height: auto !important;
    object-fit: contain;
  }

  .room-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    min-width: 100%;
  }

  .clear-filters-btn {
    width: 100%;
    align-self: stretch;
  }
}

@media (min-width:1061px){
  :root{
    --sticky-gap: 40px;
  }
  #roomPanel .room-panel__content .room-info{
    position: sticky;
    top: calc(var(--sticky-offset) + var(--sticky-gap));
    max-height: none;
    overflow: visible;
  }
}

@media (min-width:1061px){
  .filters-and-rooms.is-split{
    grid-template-rows: auto 1fr;        
    align-items: start;
    align-content: start;
  }

  .filters-and-rooms.is-split .room-list{
    align-self: start !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    max-height: calc(100vh - var(--sticky-offset) - var(--filters-h));
  }

  .filters-and-rooms.is-split .room-list > .room-card:first-child{
    margin-top: 0 !important;
  }
}


@media (min-width:1061px){
  
  #rooms .filters-and-rooms.is-split .room-list{
    position: sticky;
    top: calc(var(--sticky-offset) + var(--roomsTitle-h) + var(--filters-h));
    margin-top: var(--list-gap) !important; /* <— THIS makes the gap */
    height: calc(100vh - var(--sticky-offset) - var(--roomsTitle-h) - var(--filters-h) - var(--list-gap));
    overflow-y: auto;
    
  }

  /* keep first card flush; doesn't affect the gap */
  #rooms .filters-and-rooms.is-split .room-list > .room-card:first-child{
    margin-top: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ Accordion
   ───────────────────────────────────────────────────────────────────────────── */

.faq-subtitle {
  color: #666;
  margin-top: -0.5rem;
  margin-bottom: 3rem;
}

.faq-category {
  max-width: 900px;
  margin: 0 auto 3rem auto;
}

.faq-category:last-child {
  margin-bottom: 0;
}

.faq-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e0e0e0;
}

.faq-category-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  margin: 0;
}

.faq-collapse-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: #555;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.faq-collapse-all:hover {
  background-color: #f5f5f5;
  border-color: #999;
  color: #333;
}

.faq-collapse-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-collapse-all.all-collapsed .faq-collapse-icon {
  transform: rotate(180deg);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.faq-item.is-active {
  border-color: #333;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 500;
  color: #333;
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: #f8f8f8;
}

.faq-question span {
  flex: 1;
}

.faq-icon {
  width: 22px;
  height: 22px;
  color: #666;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.faq-item.is-active .faq-icon {
  transform: rotate(180deg);
  color: #333;
}

.faq-answer {
  padding: 0 2rem 1.5rem 2rem;
  color: #555;
  line-height: 1.6;
  animation: faqSlideDown 0.3s ease;
}

.faq-answer[hidden] {
  display: none;
}

.faq-answer p {
  margin: 0;
}

@keyframes faqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



















/* ─────────────────────────────────────────────────────────────────────────────
   Capstone Note Capsule
   ───────────────────────────────────────────────────────────────────────────── */
.capstone-note {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .capstone-note {
    display: none;
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   Capstone Note Capsule end
   ───────────────────────────────────────────────────────────────────────────── */