/* ==========================================================================
   Welcome2Emirates brand layer

   Scoped deliberately. Rules that could affect the seven Elementor pages are
   confined to .w2e-chrome (property pages only) or to Estatik's own classes.
   The existing Additional CSS and every Elementor layout are left alone.
   ========================================================================== */

/* One of the scripts on the site drops a one-pixel measuring div just outside
   the viewport, which is enough to give every page a sideways scrollbar. Clip
   stops it without turning the body into a scrolling box the way hidden would,
   and this sheet loads everywhere, so no page is left with the stray pixel. */
html,
body {
  overflow-x: clip;
}

:root {
  --w2e-navy:       #00335A;
  --w2e-ink:        #0F1A22;
  --w2e-ink-2:      #16232D;
  --w2e-gold:       #C99A49;
  --w2e-gold-deep:  #A87D33;
  --w2e-gold-soft:  #E3C68A;
  --w2e-paper:      #FFFFFF;
  --w2e-bone:       #F4F6F8;
  --w2e-hairline:   #DFE3E8;
  --w2e-text:       #1A2027;
  --w2e-text-mute:  #545E68;
  --w2e-text-faint: #6B7480;
  --w2e-serif:      'Playfair Display', Georgia, 'Times New Roman', serif;
  --w2e-sans:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --w2e-r:          2px;
  --w2e-ease:       cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Header and footer, property pages only
   -------------------------------------------------------------------------- */

body.w2e-chrome .w2e-header {
  background: var(--w2e-navy);
  color: #FFFFFF;
}

body.w2e-chrome .w2e-header .w2e-header__inner {
  max-width: 1460px;
  margin-inline: auto;
  padding: 0 clamp(1.15rem, 4vw, 3.5rem);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

body.w2e-chrome .w2e-header .w2e-brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  flex: none;
}
/* The lockup is a tall tower over two lines of type, and the type is the part
   that has to be readable. At 68px the tower eats three quarters of the height
   and the words underneath come out around eight pixels tall - present, but not
   legible. The height is set from the type, not from the drawing. */
body.w2e-chrome .w2e-header .w2e-brand img { height: clamp(76px, 7.4vw, 104px); max-width: 40vw; width: auto; display: block; object-fit: contain; padding: 6px 0; }
body.w2e-chrome .w2e-header .w2e-brand__word { font-family: var(--w2e-serif); font-style: italic; font-size: 1.5rem; font-weight: 600; }
body.w2e-chrome .w2e-header .w2e-brand__sub {
  font-family: var(--w2e-sans);
  font-size: .625rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-top: .3em;
  opacity: .82;
}

/* One line at desktop. Below 1024 it becomes the drawer rather than wrapping. */
body.w2e-chrome .w2e-header .w2e-nav { display: flex; align-items: center; gap: clamp(.85rem, 1.6vw, 1.75rem); }
body.w2e-chrome .w2e-header .w2e-nav a {
  position: relative;
  font-family: var(--w2e-sans);
  font-size: .9rem;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  padding-block: .45em;
  opacity: .86;
  transition: opacity .18s var(--w2e-ease);
}
body.w2e-chrome .w2e-header .w2e-nav a:hover, body.w2e-chrome .w2e-header .w2e-nav a[aria-current="page"] { opacity: 1; }
body.w2e-chrome .w2e-header .w2e-nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--w2e-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--w2e-ease);
}
body.w2e-chrome .w2e-header .w2e-nav a:hover::after, body.w2e-chrome .w2e-header .w2e-nav a[aria-current="page"]::after { transform: scaleX(1); }

body.w2e-chrome .w2e-header .w2e-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: inherit; padding: 0;
}
.w2e-burger span { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; }
.w2e-burger span::before, .w2e-burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .32s var(--w2e-ease);
}
.w2e-burger span::before { top: -7px; }
.w2e-burger span::after { top: 7px; }
.w2e-burger[aria-expanded="true"] span { background: transparent; }
.w2e-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.w2e-burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

.w2e-drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--w2e-ink);
  padding: 6rem clamp(1.15rem, 5vw, 2.5rem) 2.5rem;
  overflow-y: auto;
}
.w2e-drawer[hidden] { display: none; }
.w2e-drawer nav { display: flex; flex-direction: column; }
body.w2e-chrome .w2e-drawer nav a {
  font-family: var(--w2e-serif);
  font-size: clamp(1.5rem, 7vw, 2rem);
  color: #FFFFFF;
  text-decoration: none;
  padding-block: .45em;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.w2e-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 300;
  background: var(--w2e-ink); color: #FFFFFF;
  padding: .75rem 1.25rem; border-radius: var(--w2e-r);
  font-family: var(--w2e-sans); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.w2e-skip:focus { top: 1rem; }

body.w2e-chrome .w2e-footer {
  background: var(--w2e-ink);
  color: rgba(255,255,255,.75);
  font-family: var(--w2e-sans);
  padding: clamp(3rem, 6vw, 5rem) 0 1.5rem;
}
.w2e-footer__inner {
  max-width: 1460px; margin-inline: auto;
  padding: 0 clamp(1.15rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
}
body.w2e-chrome .w2e-footer .w2e-footer__brand { font-family: var(--w2e-serif); font-size: 1.55rem; color: #FFFFFF; margin: 0 0 .5rem; }
.w2e-footer__brand em { font-style: italic; color: var(--w2e-gold-soft); }
body.w2e-chrome .w2e-footer .w2e-footer__note { margin: 0; max-width: 34ch; font-size: .95rem; }
body.w2e-chrome .w2e-footer h2 {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin: 0 0 1rem; font-weight: 600;
}
.w2e-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
body.w2e-chrome .w2e-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
body.w2e-chrome .w2e-footer a:hover { color: #FFFFFF; }
body.w2e-chrome .w2e-footer address { font-style: normal; line-height: 1.8; font-size: .95rem; }
body.w2e-chrome .w2e-footer .w2e-footer__bottom {
  max-width: 1460px; margin-inline: auto;
  padding: 1.5rem clamp(1.15rem, 4vw, 3.5rem) 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .875rem; color: rgba(255,255,255,.5);
}

@media (max-width: 1024px) {
  body.w2e-chrome .w2e-header .w2e-nav { display: none; }
  body.w2e-chrome .w2e-header .w2e-burger { display: inline-flex; }
  body.w2e-chrome .w2e-footer__inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {
  body.w2e-chrome .w2e-footer__inner { grid-template-columns: minmax(0,1fr); }
}

/* --------------------------------------------------------------------------
   Estatik interface, brought onto the brand.

   Estatik keeps the data, the search and the filtering. Only its appearance
   changes: the coral accent, the pill controls and the plugin-default card
   are what make the listing page read as a plugin rather than as this company.
   -------------------------------------------------------------------------- */

body.w2e-estatik .es-listing-wrapper,
body.w2e-estatik .es-single-property { font-family: var(--w2e-sans); color: var(--w2e-text); }

/* The coral search button is the single loudest off-brand element. */
body.w2e-estatik .es-search__submit,
body.w2e-estatik button.es-search-submit,
body.w2e-estatik .es-btn--primary,
body.w2e-estatik .es-button--primary {
  background: var(--w2e-navy) !important;
  border-color: var(--w2e-navy) !important;
  color: #FFFFFF !important;
  border-radius: var(--w2e-r) !important;
  box-shadow: none !important;
}
body.w2e-estatik .es-search__submit:hover,
body.w2e-estatik button.es-search-submit:hover { background: var(--w2e-ink) !important; border-color: var(--w2e-ink) !important; }

/* Filter controls: square, hairline, brand type. */
body.w2e-estatik .es-dropdown__toggle,
body.w2e-estatik .es-field input,
body.w2e-estatik .es-field select,
body.w2e-estatik .es-search input[type="text"],
body.w2e-estatik .es-search input[type="search"] {
  border-radius: var(--w2e-r) !important;
  border-color: var(--w2e-hairline) !important;
  font-family: var(--w2e-sans) !important;
  color: var(--w2e-text) !important;
  min-height: 48px;
}
body.w2e-estatik .es-dropdown__toggle:hover { border-color: var(--w2e-text-mute) !important; }

/* Cards */
body.w2e-estatik .es-listing__item,
body.w2e-estatik .es-listing-item {
  border-radius: var(--w2e-r) !important;
  border: 1px solid var(--w2e-hairline) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color .32s var(--w2e-ease), box-shadow .32s var(--w2e-ease), transform .32s var(--w2e-ease);
}
body.w2e-estatik .es-listing__item:hover,
body.w2e-estatik .es-listing-item:hover {
  border-color: #C9CFD6 !important;
  box-shadow: 0 2px 6px rgba(15,26,34,.07), 0 12px 32px rgba(15,26,34,.10) !important;
  transform: translateY(-3px);
}

body.w2e-estatik .es-listing__image img,
body.w2e-estatik .es-listing-item img { transition: transform .6s var(--w2e-ease); }
body.w2e-estatik .es-listing__item:hover img { transform: scale(1.04); }

/* Price in the display face, so the number carries the weight it should. */
body.w2e-estatik .es-price,
body.w2e-estatik .es-listing__price,
body.w2e-estatik .es-property-price {
  font-family: var(--w2e-serif) !important;
  color: var(--w2e-text) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

/* The favourite heart and Save search are account features this site has no
   accounts for, so they are removed rather than left as dead controls. */
body.w2e-estatik .es-listing__favorite,
body.w2e-estatik .es-favorite,
body.w2e-estatik .es-save-search,
body.w2e-estatik [class*="save-search"] { display: none !important; }

/* Nothing may scroll sideways. */
body.w2e-estatik .es-listing,
body.w2e-estatik .es-listing-wrapper { max-width: 100%; overflow-x: hidden; }
body.w2e-estatik img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Listing card refinements, with the real Estatik class names.
   -------------------------------------------------------------------------- */

/* The wishlist heart is an account feature and this site has no accounts,
   so it is a control that leads nowhere. */
body.w2e-estatik .es-control__item--wishlist,
body.w2e-estatik .es-btn__wishlist,
body.w2e-estatik .js-es-wishlist { display: none !important; }

/* Card title in the display face, so the project name carries the card
   rather than the price shouting over it. */
body.w2e-estatik .es-listing__title,
body.w2e-estatik .es-listing__title a,
body.w2e-estatik h2.es-listing__title {
  font-family: var(--w2e-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--w2e-text) !important;
}

/* Listings with no photograph yet.

   Estatik's default is a grey diamond wallpaper (thumb.svg) that reads as a
   broken image. Until a real photograph exists for these projects the slot
   gets a quiet brand treatment instead: no invented picture, no stock
   substitute, just a surface that does not look like a fault.

   Estatik positions this element absolutely, so position is left alone here.
   Overriding it collapsed the card to zero height. */
body.w2e-estatik .es-listing__image__background[style*="thumb.svg"] {
  background-image: none !important;
  background-color: var(--w2e-navy) !important;
}

body.w2e-estatik .es-listing__image:has(.es-listing__image__background[style*="thumb.svg"]) {
  position: relative;
}

body.w2e-estatik .es-listing__image:has(.es-listing__image__background[style*="thumb.svg"])::after {
  content: 'Photography on request';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.15rem;
  font-family: var(--w2e-sans);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .60);
  pointer-events: none;
  z-index: 2;
}

/* Filter controls: square, hairline, brand type. */
body.w2e-estatik .es-search__address input,
body.w2e-estatik .es-search-nav__content input,
body.w2e-estatik .es-dropdown__toggle,
body.w2e-estatik .es-search-nav .es-btn--bordered {
  border-radius: var(--w2e-r) !important;
  font-family: var(--w2e-sans) !important;
}

/* The sort control and layout switcher belong to the same family as the rest. */
body.w2e-estatik .es-control--layouts .es-control__item {
  border-radius: var(--w2e-r) !important;
}

/* ==========================================================================
   Homepage polish

   Scoped to body.home so nothing here can reach another page. These are
   corrections to what the audit showed on the rendered page, not a rebuild:
   the layout, the copy and the section order are the existing ones.
   ========================================================================== */

/* The hero photograph is bright on the right hand side, where the sun sits.
   The original single overlay left the headline and the standfirst sitting on
   a light sky. A directional scrim protects the left column where the type
   actually is, and keeps the picture legible on the right. */
body.home .w2e-hero-overlay {
  background:
    linear-gradient(to right, rgba(6, 14, 22, .82) 0%, rgba(6, 14, 22, .55) 38%, rgba(6, 14, 22, .12) 68%, rgba(6, 14, 22, .28) 100%),
    linear-gradient(to bottom, rgba(6, 14, 22, .55) 0%, rgba(6, 14, 22, .10) 30%, rgba(6, 14, 22, .35) 100%) !important;
}

/* Navigation: underlining every item is heavy and reads as unstyled link
   default rather than as a designed nav. The rule appears on hover and on the
   current page instead. */
body.home .w2e-nav a,
body.home .w2e-hero a.w2e-cta {
  text-decoration: none !important;
}
body.home .w2e-nav a {
  position: relative;
  padding-bottom: .35em;
}
body.home .w2e-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--w2e-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--w2e-ease);
}
body.home .w2e-nav a:hover::after,
body.home .w2e-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Calls to action: one solid primary in the brand accent, one quiet ghost.
   Gold #C99A49 against ink #0F1A22 is 7.4:1, comfortably past AA. */
body.home .w2e-hero .w2e-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .95em 1.9em;
  border-radius: var(--w2e-r);
  font-family: var(--w2e-sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
  background: var(--w2e-gold);
  color: var(--w2e-ink);
  border: 1px solid var(--w2e-gold);
  transition: background .18s var(--w2e-ease), border-color .18s var(--w2e-ease), transform .18s var(--w2e-ease);
}
body.home .w2e-hero .w2e-cta:hover { background: #D6AA5F; border-color: #D6AA5F; }
body.home .w2e-hero .w2e-cta:active { transform: translateY(1px); }

body.home .w2e-hero .w2e-cta.ghost {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .45);
}
body.home .w2e-hero .w2e-cta.ghost:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .85);
}

/* Community photographs are only 540px wide in the library, so they are
   asked to cover a large card. Centring the crop and letting the card carry
   its own dark floor keeps the label readable rather than stretching detail
   that is not there. */
body.home .w2e-comm-card {
  background-size: cover !important;
  background-position: center !important;
}