/* generated by wp/build.py from site/styles.css: do not edit */
.area_wrap { position: relative; overflow: clip; }
.area_map { --area-ext: 100%; position: relative; inline-size: 100vw; margin-inline: calc(50% - 50vw); margin-block-end: calc(-2.5vw - var(--section-space)); aspect-ratio: 2 / 1; color: var(--Main-black); 
  &::before { content: ''; position: absolute; inset-block: calc(-1 * var(--area-ext)); inset-inline-start: 0; inline-size: calc(50vw - min(50vw, var(--site-max) / 2) + var(--site-margin) + 14vw); z-index: 2; pointer-events: none; background: linear-gradient(to left, var(--off-White) 0%, rgba(237, 232, 226, 0.85) 20%, rgba(237, 232, 226, 0.5) 50%, rgba(237, 232, 226, 0.15) 80%, rgba(237, 232, 226, 0) 100%); }
  &::after { content: ''; position: absolute; inset-block: calc(-1 * var(--area-ext)); inset-inline-end: 0; inline-size: calc(50vw - min(50vw, var(--site-max) / 2) + var(--site-margin) + 14vw); z-index: 2; pointer-events: none; background: linear-gradient(to right, var(--off-White) 0%, rgba(237, 232, 226, 0.85) 20%, rgba(237, 232, 226, 0.5) 50%, rgba(237, 232, 226, 0.15) 80%, rgba(237, 232, 226, 0) 100%); }
}
.area_map-layer { position: absolute; inset: 0; z-index: 1; transform-origin: 0 0; will-change: transform; }
.area_map-svg { overflow: visible; pointer-events: none; }
.area_map-svg { position: absolute; inset-inline: 0; inset-block-start: calc(-1 * var(--area-ext)); inline-size: 100%; block-size: calc(100% + 2 * var(--area-ext)); direction: ltr; }
.area_map-sea { fill: rgba(12, 10, 7, 0.07); }
.area_map-land { fill: var(--off-White); }
.area_map-label.is-region { font-size: 150px; letter-spacing: 0.3em; fill: rgba(12, 10, 7, 0.4); stroke: none; }
.area_map-water { fill: rgba(12, 10, 7, 0.07); }
.area_map-urban { fill: rgba(12, 10, 7, 0.025); }
.area_map-beach { fill: rgba(234, 189, 117, 0.26); }
.area_map-buildings { fill: rgba(12, 10, 7, 0.1); }
.area_map-pier { stroke: rgba(12, 10, 7, 0.14); stroke-width: 6; }
.area_map-road-line, .area_map-road-edge { stroke: rgba(12, 10, 7, 0.11); stroke-linecap: round; stroke-linejoin: round; }
.area_map-road-fill { stroke: var(--off-White); stroke-linecap: round; stroke-linejoin: round; }
.area_map-green { fill: rgba(234, 189, 117, 0.38); }
.area_map-district { fill: rgba(234, 189, 117, 0.6); }
.area_map-bridge { stroke: var(--Main-Gold); stroke-width: 10; stroke-dasharray: 28 20; }
.area_map-ring { stroke: var(--Main-black); stroke-opacity: 0.35; stroke-width: 4; stroke-dasharray: 14 14; }
.area_map-dot { fill: var(--Main-black); }
.area_map-star { fill: var(--Main-black); }
.area_map-label { font-family: 'Liebling'; font-weight: 500; font-size: 48px; letter-spacing: 0.06em; fill: var(--Main-black); paint-order: stroke; stroke: var(--off-White); stroke-width: 14px; stroke-linejoin: round; }
.area_map-mins { font-size: 34px; fill: var(--secondary-Brown); }
.area_map-label.is-water { font-size: 40px; letter-spacing: 0.22em; fill: rgba(12, 10, 7, 0.45); stroke: none; }
.area_map-label.is-district { font-size: 52px; letter-spacing: 0.2em; fill: var(--secondary-Brown); }
.area_map-text-m { display: none; }
.area_map-label.is-m { font-size: 58px; stroke-width: 16px; }
.area_map-mins.is-m { font-size: 42px; }
.area_map-label.is-water.is-m { font-size: 48px; }
.area_map-fade-top { position: absolute; inset-inline: 0; inset-block-start: calc(-1 * var(--area-ext)); block-size: calc(var(--area-ext) + 12%); z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--off-White) 0%, rgba(237, 232, 226, 0.9) 22%, rgba(237, 232, 226, 0.6) 50%, rgba(237, 232, 226, 0.2) 80%, rgba(237, 232, 226, 0) 100%); }
.area_map-fade-bottom { position: absolute; inset-inline: 0; inset-block-end: 2.5vw; block-size: 14%; z-index: 2; pointer-events: none; background: linear-gradient(to top, var(--off-White) 0%, rgba(237, 232, 226, 0.75) 30%, rgba(237, 232, 226, 0.3) 65%, rgba(237, 232, 226, 0) 100%); }
.area_pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.area_pin { position: absolute; inline-size: 0; block-size: 0; display: flex; justify-content: center; align-items: center; pointer-events: auto; }
.area_pin.is-colibri { inset-block-start: 39.04%; inset-inline-start: 37.43%; }
.area_pin.is-wynn { inset-block-start: 45.25%; inset-inline-start: 66.85%; }
.area_pin.is-golf { inset-block-start: 38.97%; inset-inline-start: 51.86%; }
.area_pin.is-mall { inset-block-start: 49.24%; inset-inline-start: 48.83%; }
.area_pin.is-freezone { inset-block-start: 52.86%; inset-inline-start: 44.85%; }
.area_pin.is-airport { inset-block-start: 9.97%; inset-inline-start: 11.80%; }
.area_pin.is-yacht { inset-block-start: 31.10%; inset-inline-start: 49.73%; }
.area_pin.is-academy { inset-block-start: 29.30%; inset-inline-start: 39.36%; }
.area_pin.is-jais { inset-block-start: 4.32%; inset-inline-start: 16.66%; }
.area_pin-btn {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 2.5em;
  block-size: 2.5em;
  padding: 0.625em;
  border-radius: 999px;
  background: var(--Main-Gold);
  color: var(--Main-black);
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
  &:hover { background: var(--Main-black); color: var(--Main-Gold); }
  
  &::after { content: ''; position: absolute; inset: -5px; border-radius: 999px; border: 5px solid rgba(12, 10, 7, 0.1); opacity: 0; pointer-events: none; will-change: opacity; }
}
.area_pin-icon { inline-size: 100%; block-size: 100%; }
.is-project { inline-size: 3.25em; block-size: 3.25em; padding: 0.8em; background: var(--Main-black); color: var(--Main-Gold); position: relative; &::before { content: ''; position: absolute; inset: -0.45em; border-radius: 999px; background: rgba(12, 10, 7, 0.12); z-index: -1; will-change: transform, opacity; } &:hover { background: var(--Main-Gold); color: var(--Main-black); } }
.area_modal { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.area_modal-side {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 28em;
  block-size: 100%;
  padding: var(--space-4);
  transform: translateX(100%) rotate(0.001deg); 
  transition: transform 0.65s;
}
.area_modal-tile {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 52em;
  background: var(--Main-black);
  color: var(--off-White);
  overflow: hidden;
}
.area_modal-top { position: absolute; inset-block-start: 1em; inset-inline-end: 1em; z-index: 2; }
.area_modal-close { display: flex; justify-content: center; align-items: center; inline-size: 2.5em; block-size: 2.5em; border-radius: 999px; background: var(--off-White); color: var(--Main-black); cursor: pointer; }
.area_close-icon { inline-size: 0.625em; }
.area_info-list { flex: 1; min-block-size: 0; display: grid; grid-template-columns: 1fr; overflow: hidden auto; scrollbar-width: none; }
.area_card { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-3); inline-size: 100%; padding: 1.5em; }
.area_card-visual { aspect-ratio: 3 / 2; inline-size: 100%; overflow: hidden; }
.area_card-img { inline-size: 100%; block-size: 100%; object-fit: cover; will-change: transform, clip-path; }
.area_card-label { font-family: 'Liebling'; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--Main-Gold); }
.area_card-title { color: var(--off-White); }
.area_card-text { font-family: 'Liebling'; font-weight: 400; font-size: var(--text-small); line-height: 1.5; color: rgba(237, 232, 226, 0.7); }
.area_card-facts { font-family: 'Liebling'; font-weight: 400; font-size: var(--text-small); line-height: 1.4; color: rgba(237, 232, 226, 0.7); border-block-start: 1px solid rgba(237, 232, 226, 0.14); }
.area_modal-controls { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.25em 1.25em; }
.area_nav-btn { display: flex; justify-content: center; align-items: center; inline-size: 2.75em; block-size: 2.75em; padding: 0.9em; border-radius: 999px; background: var(--Main-Gold); color: var(--Main-black); cursor: pointer; }
.area_nav-btn.is-prev { background: rgba(237, 232, 226, 0.1); color: var(--off-White); }
.area_nav-icon { inline-size: 100%; }
.area_modal-dots { display: flex; justify-content: center; align-items: center; gap: 0.25em; }
@media screen and (max-width: 767px) {
.area_map { --area-ext: 0%; inline-size: 330vw; margin-inline: calc(50% - 150vw) 0; margin-block: calc(32.5vw - var(--space-6)) calc(-2.5vw - var(--section-space)); rotate: 90deg; overflow: clip; mask-image: linear-gradient(to right, transparent 10%, #000 20%); &::before, &::after { display: none; } }
.area_pin { rotate: -90deg; }
.area_map-fade-top, .area_map-fade-bottom { display: none; }
.area_pin-btn { inline-size: 1.75em; block-size: 1.75em; padding: 0.45em; }
.is-project { inline-size: 2.25em; block-size: 2.25em; padding: 0.55em; }
.area_map-text { display: none; }
.area_map-text-m { display: inline; }
.area_modal-side { max-inline-size: 100%; padding: var(--space-3); }
}
.area_modal-side { transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1); }
.area_modal[data-hotspot-modal-status="active"] .area_modal-side { transform: translateX(0%) rotate(0.001deg); }
.area_pin-btn[data-active="true"] { background: var(--Main-black); color: var(--Main-Gold); outline: 2px solid var(--Main-Gold); outline-offset: 0.35em; }
.area_pin-btn::after { animation: area-pulse 2.8s ease-in-out infinite; }
.area_pin-btn[data-active="true"]::after, .is-project::after { animation: none; }
@keyframes area-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.is-project::before { animation: area-halo 2.8s ease-in-out infinite; }
@keyframes area-halo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.4; } }
.area_card-facts ul { list-style: none; margin: 0; padding: 0; }
.area_card-facts li { padding-block: 0.7em; border-block-end: 1px solid rgba(237, 232, 226, 0.14); }
.area_modal-dot { display: block; inline-size: 0.75em; block-size: 0.75em; border: 0.16em solid var(--Main-black); border-radius: 999px; background: currentColor; color: rgba(237, 232, 226, 0.3); cursor: pointer; }
.area_modal-dot[data-hotspot-control-status="active"] { color: var(--Main-Gold); }