/* ==========================================================================
   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.
   ========================================================================== */

: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;
}
body.w2e-chrome .w2e-header .w2e-brand img { max-height: 44px; width: auto; display: block; }
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;
}