/* Local replacements for layout work previously performed by Squarespace JS. */
html { scroll-behavior: smooth; }
.sqs-native-video { width: 100%; height: 100%; position: relative; }
.sqs-native-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sqs-block-video .sqs-native-video { aspect-ratio: 16 / 9; }
.sqs-block-video .sqs-video-wrapper { padding: 0 !important; }
.sqs-block-video .sqs-video-wrapper .sqs-native-video { position: absolute; inset: 0; }
.sqs-block-video .sqs-video-wrapper { aspect-ratio: 16 / 9; }
.section-background img { width: 100%; height: 100%; object-fit: cover; }
[data-animation-role], .preFade, .preScale, .preSlide { opacity: 1 !important; visibility: visible !important; }
.sqs-gallery-block-slider .sqs-gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; scrollbar-width: none; }
.sqs-gallery-block-slider .sqs-gallery > img { flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; object-fit: cover; scroll-snap-align: start; cursor: zoom-in; }
.sqs-gallery-block-slider { height: 100%; }
.gallery-reel { height: auto !important; }
.gallery-section .content-wrapper { opacity: 1 !important; }
.gallery-reel-wrapper { height: 50vh; overflow: hidden; }
.gallery-reel-list { display: flex !important; position: relative !important; width: 100% !important; height: 100%; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none !important; }
.gallery-reel-item { flex: 0 0 auto; position: relative !important; margin: 0; height: 100% !important; width: calc((50vh - 59px) * var(--photo-ratio, 1.5)) !important; transform: none !important; scroll-snap-align: center; }
.gallery-reel-item-wrapper, .gallery-reel-item-src { position: relative !important; height: 100%; width: auto !important; }
.gallery-reel-item-wrapper { z-index: 0 !important; }
.gallery-reel-item-src { display: block !important; opacity: 1 !important; }
.gallery-reel-item img { position: relative !important; width: auto !important; height: 100% !important; max-width: none; object-fit: contain; cursor: zoom-in; }
.gallery-reel-controls { position: relative !important; display: flex; justify-content: center; padding: 0; }
.user-items-list-section .section-background {
  background: linear-gradient(to bottom, #e6e3db 0%, #d9b7aa 60%, #d9b7aa 68%, #ddc3b8 80%, #e3dcd4 94%, #e5e3dc 100%) !important;
}
.accordion-item__dropdown { display: none; }
body .accordion-item.is-open .accordion-item__dropdown { display: block !important; height: auto; max-height: none !important; overflow: hidden; }
.accordion-item.is-expanded .arrow { transform: rotate(225deg); }
.local-gallery { position: relative; }
.local-gallery > .local-gallery-button { position: absolute; top: 50%; z-index: 5; border: 0; border-radius: 50%; background: #ffffffb8; color: #303636; width: 36px; height: 36px; cursor: pointer; }
.local-gallery-button.prev { left: 12px; }
.local-gallery-button.next { right: 12px; }
.local-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; padding: 0; background: #131716f5; color: white; }
.local-lightbox::backdrop { background: #131716; }
.local-lightbox .lightbox-stage { height: 100%; display: flex; align-items: center; justify-content: center; }
.local-lightbox img { max-width: 90vw; max-height: 88dvh; object-fit: contain; }
.local-lightbox button { position: absolute; border: 0; background: #ffffff1a; color: white; border-radius: 50%; width: 44px; height: 44px; font-size: 25px; cursor: pointer; }
.lightbox-close { right: 20px; top: 20px; }
.lightbox-prev { left: 16px; top: 50%; }
.lightbox-next { right: 16px; top: 50%; }
.lightbox-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font: 14px sans-serif; }
button:focus-visible, a:focus-visible { outline: 2px solid #bc785a; outline-offset: 5px; }
.mobile-amenities { display: none; }
@media (max-width: 767px) {
  [data-mobile-hidden] { display: none !important; }
  /* Match the hero's grid to its 16:9 video instead of leaving empty rows below. */
  .fluid-engine:has(video[data-desktop-src]) { grid-template-rows: 24px repeat(11, minmax(0, calc(100vw * 9 / 16 / 11))) !important; }
  .user-items-list-section .content-wrapper { width: 100% !important; padding: 0 !important; }
  .user-items-list-section .user-items-list { padding: 20px 24px !important; min-height: 0 !important; }
  .user-items-list-section .list-section-title { padding: 0 0 16px !important; font-size: clamp(24px, 7.5vw, 33px) !important; }
  .user-items-list-section .user-items-list-simple { padding: 0 !important; grid-template-columns: minmax(0, 1fr) !important; }
  .user-items-list-section .mobile-review-rotator { display: grid !important; gap: 0 !important; }
  .mobile-review-rotator > .list-item { grid-area: 1 / 1; width: 100%; min-width: 0; align-self: stretch; justify-content: center; visibility: hidden; pointer-events: none; }
  .mobile-review-rotator > .list-item.is-current { visibility: visible; pointer-events: auto; }
  html.has-reveal .mobile-review-rotator > .list-item { opacity: 1 !important; translate: none; }
  .mobile-review-rotator .list-item-content { width: 100% !important; display: flex; flex-direction: column; justify-content: center; }
  .mobile-review-rotator .list-item-content__text-wrapper { width: 100%; }
  .mobile-review-rotator .list-item-content__title { font-size: clamp(12.6px, 3.5vw, 14.7px) !important; line-height: 1.65 !important; max-width: none !important; }
  .mobile-review-rotator .list-item-content__description { margin-top: 18px !important; font-size: 14px !important; line-height: 1.7 !important; }
  body.header--menu-open { overflow: hidden; }
  body.header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; }
  .gallery-reel-controls, .local-gallery > .local-gallery-button { display: none !important; }
  .gallery-reel-item { width: calc(50vh * var(--photo-ratio, 1.5)) !important; }
  .amenity-source { display: none !important; }
  .mobile-amenities {
    display: grid; grid-column: 2 / -2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px; row-gap: 22px;
    margin: 0; padding: 12px 0 16px;
    list-style: none; width: 100%; min-width: 0; box-sizing: border-box;
    align-self: stretch;
  }
  .amenities-stella { grid-row: 16 / 19; }
  .amenities-lucia { grid-row: 17 / 20; }
  .amenity-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; min-height: 84px; min-width: 0; text-align: center; }
  .amenity-item img { display: block; flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; }
  .amenity-item span { display: block; max-width: 100%; font: 400 13px/1.45 'Almarai', sans-serif; color: #4b5151; }
}
@media (max-width: 767px) and (max-height: 650px) {
  .user-items-list-section .user-items-list { padding-top: 12px !important; padding-bottom: 12px !important; }
  .user-items-list-section .list-section-title { padding-bottom: 8px !important; }
  .mobile-review-rotator .list-item-content__description { margin-top: 8px !important; }
}
@media (min-width: 768px) { [data-desktop-hidden] { display: none !important; } }

/* One-shot, staggered reveals. Independent translate preserves existing transforms. */
html.has-reveal .reveal-target {
  transition: opacity 1400ms cubic-bezier(.25,.46,.45,.94), translate 1600ms cubic-bezier(.25,.46,.45,.94);
  transition-delay: var(--reveal-delay, 0ms);
}
html.has-reveal .reveal-target:not(.is-revealed) {
  opacity: 0 !important;
  translate: 0 12px;
}
html.has-reveal .reveal-target.is-revealed { opacity: 1 !important; translate: 0 0; }
html.has-reveal .accordion-item.reveal-target:not(.is-revealed) { translate: 0 8px; }
html.has-reveal .review-reveal {
  transition: none;
  translate: none;
}
html.has-reveal .review-reveal:not(.is-revealed) .list-item-content { opacity: 0; }
.review-stars { position: relative; display: inline-block; white-space: nowrap; }
.review-stars::after {
  content: attr(data-stars);
  position: absolute; inset: 0;
  color: transparent;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(123deg, transparent 45%, #ffffff0a 46%, #fff5e524 47%, #fff7e959 48%, #fff9eea6 49%, #fffdf4e0 50%, #fff9eea6 51%, #fff7e959 52%, #fff5e524 53%, #ffffff0a 54%, transparent 55%);
  background-size: 300% 100%; background-position: 30% 50%;
  background-clip: text; -webkit-background-clip: text;
}
.review-stars.is-wiping::after { animation: villa-star-light 3600ms linear both; }
@keyframes villa-star-light {
  0% { opacity: 0; background-position: 30% 50%; }
  15% { opacity: .85; }
  85% { opacity: .85; }
  100% { opacity: 0; background-position: 130% 50%; }
}

/* Scoped names prevent the copied blocks' global keyframes from colliding. */
body :is(.whatsapp-link, .email-link-static, .whatsapp-link-static, .instagram-link-static) {
  isolation: isolate;
  -webkit-backdrop-filter: blur(13px);
  transition: transform 950ms cubic-bezier(.25,.46,.45,.94), box-shadow 1100ms ease, background-color 1100ms ease;
  -webkit-tap-highlight-color: transparent;
}
body .whatsapp-link { animation: villa-button-breathe 12s ease-in-out infinite; }
body :is(.email-link-static, .whatsapp-link-static, .instagram-link-static) { flex-shrink: 0; width: max-content; max-width: none; white-space: nowrap; }
body :is(.email-icon-static, .whatsapp-icon-static, .instagram-icon-static) { flex: 0 0 73px; min-width: 73px; }
body :is(.whatsapp-link, .email-link-static, .whatsapp-link-static, .instagram-link-static) > :is(img, svg, span) { position: relative; z-index: 1; }
body :is(.shine, .shine-static, .instagram-shine-static) {
  position: absolute; inset: -50% auto auto -85%;
  width: 55%; height: 200%;
  background: linear-gradient(90deg, transparent, #ffffff60, transparent);
  filter: blur(9px);
  transform: translateX(0) skewX(-22deg);
  pointer-events: none;
  z-index: 0;
  animation: villa-button-sheen 13s cubic-bezier(.4,0,.2,1) infinite;
}
body .whatsapp-link-static .shine-static { animation-delay: 900ms; }
body .instagram-shine-static { animation-delay: 1800ms; }
@keyframes villa-button-sheen {
  0%, 58% { transform: translateX(0) skewX(-22deg); }
  88%, 100% { transform: translateX(460%) skewX(-22deg); }
}
@keyframes villa-button-breathe {
  0%, 65%, 100% { scale: 1; box-shadow: 0 9.6px 24px #00000026, 0 0 14px #d4967d59, inset 0 0 14px #ffffff26; }
  28%, 42% { scale: 1.018; box-shadow: 0 11px 28px #0000002b, 0 0 20px #d4967d70, inset 0 0 18px #ffffff33; }
}
body :is(.whatsapp-link, .email-link-static, .whatsapp-link-static, .instagram-link-static):active { transform: scale(.98); }
@media (hover: hover) {
  body :is(.whatsapp-link, .email-link-static, .whatsapp-link-static, .instagram-link-static):hover {
    transform: translateY(-1px) scale(1.018);
    background-color: #ffffff38;
    transition: transform 950ms cubic-bezier(.25,.46,.45,.94), box-shadow 1100ms ease, background-color 1100ms ease;
  }
  body .whatsapp-link-static:hover { box-shadow: 0 6px 28px #25d36666, inset 0 0 16px #ffffff26; }
  body .email-link-static:hover { box-shadow: 0 6px 28px #30363655, inset 0 0 16px #ffffff26; }
  body .instagram-link-static:hover { box-shadow: 0 6px 28px #e1306c66, inset 0 0 16px #ffffff26; }
}
body :is(.whatsapp-link, .email-link-static, .whatsapp-link-static, .instagram-link-static):focus-visible {
  background-color: #ffffff38;
  outline-offset: 7px;
}
/* The email reflection also has a CSS hover path, independent of pointer JS.
   Start the band at the edge so a brief hover still gives visible feedback. */
body .email-link-static::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #ffffff00 40%, #fff8efb3 49%, #ffffff00 58%, transparent 65%);
  background-size: 260% 100%; background-position: 170% 50%;
  transition: background-position 2100ms cubic-bezier(.25,.46,.45,.94);
}
body .email-link-static:hover::after, body .email-link-static:focus-visible::after { background-position: -70% 50%; }
body .email-icon-static { transition: color 1000ms ease, transform 1100ms ease; }
body button.email-link-static { border: 0; font: inherit; color: inherit; }
body .email-text-static { min-inline-size: 6ch; text-align: center; }
body button.email-link-static.is-copied { background-color: #c9dfce; box-shadow: 0 0 22px #457a5766, inset 0 0 16px #ffffff40; }
body button.email-link-static.is-copied :is(.email-text-static, .email-icon-static) { color: #235b38; }
body button.email-link-static.copy-failed { background-color: #edd0c9; }
.email-copy-dialog { width: min(390px, calc(100vw - 64px)); padding: 28px; border: 1px solid #d9b7aa80; border-radius: 18px; background: #e6e3db; color: #303636; box-shadow: 0 12px 60px #30363633; }
.email-copy-dialog::backdrop { background: #30363666; backdrop-filter: blur(4px); }
.email-copy-dialog h2 { margin: 0 0 14px; font-size: 24px; }
.email-copy-dialog p { font: 16px/1.5 'Almarai', sans-serif; }
.email-copy-dialog input { box-sizing: border-box; width: 100%; padding: 12px 10px; border: 1px solid #b37f6766; border-radius: 8px; background: #faf8f2; color: #303636; font: 16px/1.5 'Almarai', sans-serif; }
.email-copy-dialog button { margin-top: 18px; padding: 10px 24px; border: 0; border-radius: 24px; background: #d9b7aa; color: #303636; font: 16px/1.5 'Almarai', sans-serif; cursor: pointer; }
body .email-link-static:hover .email-icon-static, body .email-link-static:focus-visible .email-icon-static { color: #b37f67; transform: translateY(-2px) rotate(-4deg); }

/* Quiet feedback for FAQ rows and gallery controls, without moving their layout. */
body .accordion-item__title, body .accordion-item__description {
  font-family: var(--body-font-font-family, 'Almarai'), sans-serif;
  font-size: var(--base-font-size, 16px);
  font-weight: var(--body-font-font-weight, 400);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: var(--body-font-letter-spacing, 0);
  color: #303636;
}
body .accordion-item__title { font-weight: 700; }
.accordion-item__click-target { transition: color 800ms ease, background-color 800ms ease; }
.accordion-item__click-target:hover, .accordion-item__click-target:focus-visible { background-color: #d9b7aa12; }
.accordion-item .arrow { transition: transform 680ms cubic-bezier(.25,.46,.45,.94); }
.gallery-reel-item img, .sqs-gallery-block-slider .sqs-gallery > img { transition: filter 600ms ease; }
.gallery-reel-control-btn, .local-gallery-button, .local-lightbox button {
  transition: background-color 850ms ease, color 850ms ease, box-shadow 850ms ease, scale 850ms ease;
}
.is-sliding { scroll-snap-type: none !important; scroll-behavior: auto !important; }
.continuous-gallery { scroll-snap-type: none !important; scroll-behavior: auto !important; }
.refined-map { position: relative; width: 100%; height: 100%; min-height: 300px; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px #30363615; background: #e7e5df; }
.refined-map iframe { display: block; filter: saturate(.12) contrast(.92) brightness(1.04); }
.refined-map-link { position: absolute; top: 16px; left: 16px; padding: 10px 14px; border-radius: 24px; background: #e9e6def0; color: #303636; font: 12px/1.5 'Almarai', sans-serif; box-shadow: 0 2px 12px #30363612; transition: background 950ms ease, box-shadow 950ms ease; }
.refined-map-link:hover { background: #faf8f4; box-shadow: 0 4px 16px #30363620; }
@media (hover: hover) {
  .gallery-reel-control-btn:hover, .local-gallery-button:hover, .local-lightbox button:hover {
    background-color: #d9b7aa99;
    box-shadow: 0 4px 14px #30363615;
    scale: 1.045;
  }
  .gallery-reel-item img:hover, .sqs-gallery-block-slider .sqs-gallery > img:hover { filter: brightness(1.035); }
}
.gallery-reel-control-btn:active, .local-gallery-button:active, .local-lightbox button:active { scale: .96; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.has-reveal .reveal-target { translate: none !important; transition-property: opacity, filter; }
  body .whatsapp-link { animation: none; }
  body :is(.whatsapp-link, .email-link-static, .whatsapp-link-static, .instagram-link-static):hover { transform: none; }
}
