:root{
  --navy:#0c3552;
  --navy2:#082c45;
  --white:#f8f6f1;
  --muted:#c8d2da;
  --cyan:#2d96c7;
  --cream:#fff4df;
  --max:1320px;

  --font-en:"Montserrat",Arial,sans-serif;
  --font-ar-title:"Noto Sans Arabic",Arial,sans-serif;
  --font-ar-body:"Noto Naskh Arabic","Noto Sans Arabic",Arial,sans-serif;
}

/* =========================
   Reset
========================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:var(--font-en);
  /* font-weight:300; */
  line-height:1.55;
}

html[lang="en"] body{
  font-family:var(--font-en);
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] p,
html[lang="en"] a,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] label{
  font-family:var(--font-en);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .section-title,
html[lang="ar"] .home-title,
html[lang="ar"] .eyebrow,
html[lang="ar"] .phase-mark,
html[lang="ar"] .nav-links,
html[lang="ar"] .outline-btn,
html[lang="ar"] .search-btn{
  font-family:var(--font-ar-title);
}

html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] .body-copy,
html[lang="ar"] .phase-copy,
html[lang="ar"] .lifestyle-overlay p,
html[lang="ar"] .filter-item,
html[lang="ar"] .custom-select-menu,
html[lang="ar"] .footer-links,
html[lang="ar"] .footer-brand,
html[lang="ar"] .copyright{
  font-family:var(--font-ar-body);
}

html[lang="ar"]{
  direction:rtl;
}

html[lang="ar"] body{
  direction:rtl;
  text-align:right;
}

html[lang="ar"] .partner-row,
html[lang="ar"] .filter-bar,
html[lang="ar"] .home-two-images,
html[lang="ar"] .image-grid,
html[lang="ar"] .split{
  direction:rtl;
}

html[lang="ar"] .custom-select-button{
  text-align:right;
}

html[lang="ar"] .custom-select-menu{
  right:0;
  left:auto;
  text-align:right;
}

html[lang="ar"] .image-card .label,
html[lang="ar"] .wide-card .label{
  right:25px;
  left:auto;
}

html[lang="ar"] .masterplan-overlay{
  justify-content:flex-start;
  text-align:right;
}

html[lang="ar"] .masterplan-overlay-content{
  transform:translateX(25px);
}

html[lang="ar"] .masterplan-hover:hover .masterplan-overlay-content,
html[lang="ar"] .masterplan-hover:focus-within .masterplan-overlay-content{
  transform:translateX(0);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  color:inherit;
}

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

video{
  display:block;
  max-width:none;
}

.container{
  width:min(var(--max),calc(100% - 160px));
  margin-inline:auto;
}

.serif{
  font-family:var(--font-en);
  font-weight:500;
}

html[lang="ar"] .serif{
  font-family:var(--font-ar-title);
  font-weight:500;
}

/* =========================
   Header
========================= */

.site-header{
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  right:0;
  width:100%;
  /* padding:32px 0; */
  background:transparent;

  transition:
    background-color .35s ease,
    padding .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

.site-header .container{
  width:min(var(--max),calc(100% - 160px));
  margin-left:auto;
  margin-right:auto;
  /* margin-top: 20px; */
}

/* Scrolled header */
.site-header.header-scrolled{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  /* padding:18px 0; */
  background:var(--navy2);
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  animation:headerSlideDown .4s ease forwards;
}

@keyframes headerSlideDown{
  from{
    transform:translateY(-100%);
  }

  to{
    transform:translateY(0);
  }
}

.nav{
  display:flex;
  flex-direction:row;
  align-items:center;
  width:100%;
  gap:38px;
  direction:ltr;
}

.brand{
  display:block;
  flex:0 0 130px;
  width:130px;
  font-size:0;
  line-height:0;
}

.brand img{
  width:100%;
  height:auto;
  object-fit:contain;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:15px;
  letter-spacing:.04em;
}

.nav-links a{
  transition:opacity .25s ease;
}

.nav-links a:hover,
.nav-links a.active{
  opacity:.7;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:17px;
  margin-left:auto;
  font-size:14px;
}

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

/* Keep header positions identical in English and Arabic */
html[lang="ar"] .site-header .nav{
  flex-direction:row;
  direction:ltr;
}

html[lang="ar"] .site-header .nav-links{
  flex-direction:row;
  direction:ltr;
}

html[lang="ar"] .site-header .nav-links a{
  direction:rtl;
  unicode-bidi:plaintext;
  font-family:var(--font-ar-title);
}

html[lang="ar"] .site-header .nav-actions{
  flex-direction:row;
  direction:ltr;
  margin-left:auto;
  margin-right:0;
}

html[lang="ar"] .site-header .lang,
html[lang="ar"] .site-header .lang a{
  direction:ltr;
  font-family:var(--font-en);
}

html[lang="ar"] .site-header .outline-btn{
  direction:rtl;
  unicode-bidi:plaintext;
  font-family:var(--font-ar-title);
}

.lang a{
  transition:opacity .25s ease;
}

.lang a:hover{
  opacity:.7;
}

.outline-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.8);
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;
}

.outline-btn:hover{
  background:var(--white);
  color:var(--navy2);
  border-color:var(--white);
}

.outline-btn.selected{
  background-color:var(--white);
  color:var(--navy2);
  border-color:var(--white);
}

/* =========================
   Focus States
========================= */

.custom-select-button:focus-visible,
.search-btn:focus-visible,
.masterplan-link:focus-visible,
.outline-btn:focus-visible,
.nav-links a:focus-visible,
.discover-more:focus-visible,
.lifestyle-card:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:3px;
}

/* =========================
   Shared Hero
========================= */

.hero{
  position:relative;
  min-height:700px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}

.hero:not(.home-hero)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,30,51,.08) 35%,
    rgba(8,44,69,.98) 100%
  );
}

.hero-content{
  position:relative;
  z-index:2;
  padding-top:250px;
}

.hero h1{
  margin:0 0 8px;
  font-size:42px;
  line-height:1.15;
  letter-spacing:.01em;
}

.eyebrow{
  font-size:17px;
  letter-spacing:.025em;
}

.about-hero{
  background-image:url("../images/about-hero.webp");
}

.phase-hero{
  align-items:center;
  text-align:center;
  background-image:
    linear-gradient(
      rgba(8,44,69,.42),
      rgba(8,44,69,.78)
    ),
    url("../images/phase-hero.webp");
}

/* =========================
   Home Video Hero
========================= */

.home-hero{
  position:relative;
  min-height:700px;
  height:100svh;
  max-height:900px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--navy2);
}

.home-hero .hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
}

.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.home-hero .hero-content{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 160px));
  margin-inline:auto;
  padding-top:220px;
  padding-bottom:50px;
}

.home-title{
  max-width:650px;
  font-size:46px!important;
  line-height:1.12;
}

/* =========================
   Hero Partner Logos
========================= */

.partner-row{
  display:grid;
  grid-template-columns:220px 1fr 220px;
  align-items:end;
  gap:30px;
  margin-top:70px;
  font-size:13px;
}

.partner-block-left,
.partner-block-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  text-align:center;
}

.partner-block-left small,
.partner-block-right small{
  display:block;
  margin-bottom:8px;
}

.partner-logo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px;
  height:72px;
  overflow:visible;
}

.partner-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  margin:0;
  object-fit:contain;
}

.partner-logo-mag{
  width:82px;
}

.partner-logo-adports{
  width:190px;
}

.discover-more{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  transition:opacity .25s ease;
}

.discover-more:hover{
  opacity:.75;
}

.scroll-cue{
  margin-top:15px;
  font-size:24px;
  line-height:1;
  text-align:center;
}

/* =========================
   General Sections
========================= */

.section{
  padding:80px 0;
}

.center-copy{
  max-width:1050px;
  margin-inline:auto;
  text-align:center;
}

.section-title{
  margin:0 0 48px;
  font-size:52px;
  line-height:1.15;
}

.body-copy{
  color:var(--muted);
  font-size:23px;
  line-height:1.65;
}

.body-copy p{
  margin:0 0 30px;
}

.body-copy p:last-child{
  margin-bottom:0;
}

.split{
  display:grid;
  grid-template-columns:.72fr 1.35fr;
  gap:80px;
  align-items:start;
}

.split h2{
  margin:0;
  font-size:46px;
  line-height:1.25;
}

.split p{
  margin:0;
  color:var(--muted);
  font-size:20px;
}

/* =========================
   Cards and Images
========================= */

.image-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
}

.image-card,
.wide-card{
  position:relative;
}

.image-card .label,
.wide-card .label{
  position:absolute;
  top:25px;
  left:25px;
  z-index:2;
  padding:10px 20px;
  background:#fff;
  color:#133a55;
  font-size:17px;
}

.image-card .label{
  min-width:230px;
}

.wide-card{
  margin-top:54px;
}

.wide-card .label{
  min-width:250px;
}

.large-media{
  margin-top:70px;
}

/* =========================
   Lifestyle Image Cards
========================= */

.home-two-images{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:38px;
  margin:70px 0;
}

.lifestyle-card{
  position:relative;
  height:520px;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  outline:none;
}

.lifestyle-card img{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  transition:
    transform .65s ease,
    filter .65s ease;
}

.lifestyle-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  padding:0 28px 28px;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,30,51,0) 30%,
    rgba(5,30,51,.12) 50%,
    rgba(5,30,51,.88) 100%
  );
}

.lifestyle-overlay p{
  margin:0;
  max-width:270px;
  color:#fff;
  font-size:19px;
  line-height:1.3;
  opacity:.82;
  transform:translateY(16px);
  transition:
    transform .45s ease,
    opacity .45s ease;
}

.lifestyle-card:hover img,
.lifestyle-card:focus img,
.lifestyle-card:focus-visible img{
  transform:scale(1.06);
  filter:brightness(.84);
}

.lifestyle-card:hover .lifestyle-overlay p,
.lifestyle-card:focus .lifestyle-overlay p,
.lifestyle-card:focus-visible .lifestyle-overlay p{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   Phase
========================= */

.phase-copy{
  max-width:1120px;
  margin:0 auto 65px;
  color:var(--muted);
  text-align:center;
  font-size:22px;
}

.phase-mark{
  margin:20px 0 35px;
  text-align:center;
}

.phase-mark span{
  display:block;
  margin-bottom:24px;
  color:var(--white);
  font-size:24px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.12em;
}

.riviera-logo{
  display:block;
  width:min(100%,300px);
  height:auto;
  margin:0 auto;
  object-fit:contain;
}

/* =========================
   Property Search
========================= */

.filter-bar{
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:1fr 1fr .9fr;
  width:100%;
  margin-top:30px;
  background:var(--cyan);
}

.filter-item{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-width:0;
  padding:18px 28px;
  border-right:1px solid rgba(255,255,255,.55);
}

.filter-item label{
  color:#fff;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.custom-select{
  position:relative;
  width:100%;
  min-width:0;
}

.custom-select-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  width:100%;
  min-height:36px;
  margin:0;
  padding:6px 10px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.custom-select-value{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:14px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.custom-select-arrow{
  flex:0 0 auto;
  color:#fff;
  font-size:18px;
  line-height:1;
  transition:transform .2s ease;
}

.custom-select.open .custom-select-arrow{
  transform:rotate(180deg);
}

.custom-select-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:999;
  display:none;
  width:100%;
  min-width:190px;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(12,53,82,.18);
  background:var(--cream);
  color:var(--navy);
  list-style:none;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}

.custom-select.open .custom-select-menu{
  display:block;
}

.custom-select-menu li{
  display:block;
  width:100%;
  margin:0;
  padding:10px 14px;
  background:var(--cream);
  color:var(--navy);
  font-size:14px;
  line-height:1.3;
  list-style:none;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background-color .18s ease,
    color .18s ease;
}

.custom-select-menu li::marker{
  content:"";
}

.custom-select-menu li:hover,
.custom-select-menu li:focus,
.custom-select-menu li.selected{
  background:var(--cyan);
  color:#fff;
  outline:none;
}

.search-btn{
  min-height:48px;
  margin:14px;
  padding:10px 24px;
  border:0;
  border-radius:0;
  background:var(--cream);
  color:#2483b1;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.search-btn:hover{
  background:#fff;
  color:var(--navy2);
}

/* =========================
   Masterplan Hover
========================= */

.masterplan-hover{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
}

.masterplan-hover img{
  display:block;
  width:100%;
  min-height:420px;
  height:auto;
  object-fit:cover;
  object-position:center;
  transition:
    transform .6s ease,
    filter .6s ease;
}

.masterplan-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  padding:7%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(248,246,241,.96) 0%,
    rgba(248,246,241,.86) 36%,
    rgba(248,246,241,.25) 68%,
    rgba(248,246,241,0) 100%
  );
  transition:
    opacity .4s ease,
    visibility .4s ease;
}

.masterplan-overlay-content{
  max-width:390px;
  transform:translateX(-25px);
  transition:transform .5s ease;
}

.masterplan-overlay h3{
  margin:0;
  color:var(--navy2);
  font-family:var(--font-en);
  font-size:clamp(28px,3.2vw,56px);
  font-weight:400;
  line-height:.97;
  letter-spacing:-.02em;
}

html[lang="ar"] .masterplan-overlay h3{
  font-family:var(--font-ar-title);
}

.masterplan-link{
  display:inline-flex;
  margin-top:28px;
  padding-bottom:5px;
  border-bottom:1px solid var(--navy2);
  color:var(--navy2);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:opacity .25s ease;
}

.masterplan-link:hover{
  opacity:.65;
}

.masterplan-hover:hover img,
.masterplan-hover:focus-within img{
  transform:scale(1.04);
  filter:brightness(.92);
}

.masterplan-hover:hover .masterplan-overlay,
.masterplan-hover:focus-within .masterplan-overlay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.masterplan-hover:hover .masterplan-overlay-content,
.masterplan-hover:focus-within .masterplan-overlay-content{
  transform:translateX(0);
}

/* =========================
   Google Map
========================= */

.map-container{
  position:relative;
  width:100%;
  height:520px;
  overflow:hidden;
}

.map-container iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* =========================
   Footer
========================= */

.footer{
  padding:36px 0 52px;
}

.footer-inner{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:end;
}

.footer-links{
  color:var(--muted);
  font-size:14px;
  line-height:2;
}

.footer-links a{
  transition:color .25s ease;
}

.footer-links a:hover{
  color:var(--white);
}

.social{
  display:flex;
  align-items:center;
  justify-content:start;
  gap:16px;
}
html[lang="ar"] .footer-grid-new .social{
  justify-content:end;
}

.social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.social a:hover{
  opacity:.75;
  transform:translateY(-2px);
}

.social img{
  display:block;
  width:40px;
  height:40px;
  object-fit:contain;
}

.copyright{
  margin-top:20px;
  color:var(--muted);
  text-align:center;
  font-size:12px;
  letter-spacing:.18em;
}

.footer-brand{
  color:var(--muted);
  text-align:right;
  font-size:14px;
}

/* =========================
   Tablet
========================= */

@media(max-width:900px){

  .container,
  .home-hero .hero-content,
  .site-header .container{
    width:calc(100% - 40px);
  }

  .site-header{
    padding:22px 0;
  }

  .site-header.header-scrolled{
    padding:14px 0;
  }

  .nav{
    flex-wrap:wrap;
    gap:15px;
  }

  .nav-links{
    order:3;
    display:flex;
    width:100%;
    justify-content:center;
    gap:22px;
    padding-top:10px;
    font-size:13px;
  }

  .nav-actions{
    margin-left:auto;
  }

  .nav-actions .lang{
    display:none;
  }

  .outline-btn{
    padding:8px;
    font-size:11px;
  }

  .brand{
    flex-basis:88px;
    width:88px;
  }

  .hero{
    min-height:660px;
  }

  .home-hero{
    min-height:620px;
    height:100svh;
    max-height:820px;
  }

  .home-hero .hero-content{
    padding-top:150px;
    padding-bottom:42px;
  }

  .hero h1,
  .home-title{
    font-size:34px!important;
  }

  .eyebrow{
    font-size:14px;
  }

  .partner-row{
    grid-template-columns:145px 1fr 145px;
    gap:18px;
    margin-top:45px;
  }

  .partner-logo-box{
    width:145px;
    height:58px;
  }

  .partner-logo-mag{
    width:68px;
  }

  .partner-logo-adports{
    width:132px;
  }

  .section{
    padding:70px 0;
  }

  .section-title{
    font-size:34px;
  }

  .body-copy{
    font-size:18px;
  }

  .split{
    grid-template-columns:1fr;
    gap:25px;
  }

  .split h2{
    font-size:34px;
  }

  .split p{
    font-size:18px;
  }

  .image-grid{
    grid-template-columns:1fr;
  }

  .home-two-images{
    grid-template-columns:1fr;
    gap:24px;
  }

  .lifestyle-card{
    height:440px;
  }

  .lifestyle-overlay{
    padding:0 24px 24px;
  }

  .lifestyle-overlay p{
    font-size:17px;
  }

  .phase-copy{
    margin-bottom:45px;
    font-size:18px;
  }

  .phase-mark{
    margin:15px 0 30px;
  }

  .phase-mark span{
    margin-bottom:18px;
    font-size:18px;
  }

  .riviera-logo{
    width:min(100%,300px);
  }

  .filter-bar{
    grid-template-columns:1fr;
    overflow:visible;
  }

  .filter-item{
    display:block;
    padding:20px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.5);
  }

  .filter-item label{
    display:block;
    margin-bottom:10px;
  }

  .custom-select{
    width:100%;
  }

  .custom-select-button{
    width:100%;
    min-height:44px;
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.5);
    background:rgba(255,255,255,.06);
  }

  .custom-select-menu{
    position:absolute;
    top:calc(100% + 5px);
    left:0;
    right:0;
    width:100%;
    min-width:100%;
  }

  .custom-select-menu li{
    padding:12px 14px;
    font-size:15px;
  }

  .search-btn{
    width:calc(100% - 28px);
    min-height:58px;
    margin:14px;
    font-size:17px;
  }

  .masterplan-overlay{
    align-items:flex-end;
    padding:30px 24px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:linear-gradient(
      0deg,
      rgba(248,246,241,.95) 0%,
      rgba(248,246,241,.75) 42%,
      rgba(248,246,241,0) 78%
    );
  }

  .masterplan-overlay-content{
    max-width:300px;
    transform:none;
  }

  .masterplan-overlay h3{
    font-size:30px;
    line-height:1;
  }

  .masterplan-link{
    margin-top:18px;
  }

  .map-container{
    height:420px;
  }

  .footer-inner{
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
  }

  .footer-brand{
    text-align:center;
  }
}

/* =========================
   Small Mobile
========================= */

@media(max-width:600px){

  .container,
  .home-hero .hero-content,
  .site-header .container{
    width:calc(100% - 28px);
  }

  .site-header{
    padding:18px 0;
  }

  .site-header.header-scrolled{
    padding:12px 0;
  }

  .brand{
    flex-basis:76px;
    width:76px;
  }

  .nav-links{
    gap:14px;
    font-size:11px;
    letter-spacing:.02em;
  }

  .nav-links a{
    white-space:nowrap;
  }

  .outline-btn{
    padding:7px 9px;
    font-size:10px;
  }

  .hero{
    min-height:620px;
  }

  .home-hero{
    min-height:600px;
    height:100svh;
    max-height:760px;
  }

  .home-hero .hero-content{
    padding-top:130px;
    padding-bottom:30px;
  }

  .home-title{
    font-size:30px!important;
  }

  .eyebrow{
    max-width:95%;
    font-size:12px;
    line-height:1.5;
  }

  .partner-row{
    grid-template-columns:92px 1fr 92px;
    gap:8px;
    margin-top:38px;
    font-size:9px;
  }

  .partner-logo-box{
    width:92px;
    height:48px;
  }

  .partner-logo-mag{
    width:55px;
  }

  .partner-logo-adports{
    width:90px;
  }

  .partner-block-left small,
  .partner-block-right small{
    margin-bottom:5px;
    white-space:nowrap;
  }

  .discover-more{
    font-size:9px;
  }

  .scroll-cue{
    margin-top:8px;
    font-size:20px;
  }

  .section{
    padding:55px 0;
  }

  .section-title{
    font-size:30px;
  }

  .split h2{
    font-size:30px;
  }

  .split p{
    font-size:17px;
  }

  .phase-copy{
    margin-bottom:35px;
    font-size:16px;
  }

  .phase-mark{
    margin:10px 0 25px;
  }

  .phase-mark span{
    margin-bottom:14px;
    font-size:15px;
    letter-spacing:.1em;
  }

  .riviera-logo{
    width:min(100%,240px);
  }

  .image-card .label,
  .wide-card .label{
    top:14px;
    left:14px;
    min-width:auto;
    padding:8px 14px;
    font-size:14px;
  }

  .home-two-images{
    gap:20px;
    margin:45px 0;
  }

  .lifestyle-card{
    height:350px;
  }

  .lifestyle-overlay{
    padding:0 18px 20px;
  }

  .lifestyle-overlay p{
    max-width:220px;
    font-size:15px;
  }

  .large-media{
    margin-top:45px;
  }

  .filter-item{
    padding:18px;
  }

  .custom-select-button{
    min-height:46px;
  }

  .custom-select-value{
    font-size:15px;
  }

  .custom-select-menu li{
    min-height:46px;
    padding:12px 14px;
  }

  .masterplan-hover img{
    min-height:360px;
  }

  .masterplan-overlay{
    padding:24px 18px;
  }

  .masterplan-overlay-content{
    max-width:250px;
  }

  .masterplan-overlay h3{
    font-size:26px;
  }

  .masterplan-link{
    margin-top:14px;
    font-size:11px;
  }

  .map-container{
    height:320px;
  }

  .social{
    gap:13px;
  }

  .social a{
    width:25px;
    height:25px;
  }

  .social img{
    width:25px;
    height:25px;
  }
}

/* =========================
   Touch Devices
========================= */

@media(hover:none) and (pointer:coarse){

  .masterplan-overlay{
    align-items:flex-end;
    padding:30px 24px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:linear-gradient(
      0deg,
      rgba(248,246,241,.96) 0%,
      rgba(248,246,241,.78) 42%,
      rgba(248,246,241,0) 80%
    );
  }

  .masterplan-overlay-content{
    max-width:320px;
    transform:none;
  }

  .masterplan-overlay h3{
    font-size:clamp(25px,7vw,34px);
    line-height:1;
  }

  .masterplan-link{
    margin-top:16px;
  }

  .lifestyle-overlay p{
    opacity:1;
    transform:none;
  }
}

/* =========================
   Reduced Motion
========================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  .home-hero .hero-video{
    display:none;
  }

  .home-hero{
    background-image:url("../images/home-hero.jpg");
    background-size:cover;
    background-position:center;
  }

  .masterplan-hover img,
  .lifestyle-card img{
    transform:none!important;
    filter:none!important;
  }

  .masterplan-overlay-content,
  .lifestyle-overlay p{
    transform:none!important;
  }
}

/* ==================================================
   CURRENT WEBSITE PAGES — STAGING STYLE COMPATIBILITY
================================================== */

:root{
  --mz-ink:var(--navy);
  --mz-blue:var(--navy2);
  --mz-cyan:var(--cyan);
  --mz-cream:var(--cream);
  --mz-paper:var(--navy);
  --mz-border:rgba(255,255,255,.22);
}

body,
.inner-main,
.home-page{
  background:var(--navy);
  color:var(--white);
}

/* Interior header */
.inner-page .site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  background:transparent;
  border:0;
}

/* Important: this must come after the rule above */
.inner-page .site-header.header-scrolled{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  background:var(--navy2);
  border:0;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}

.inner-page .site-header .nav-links,
.inner-page .site-header .lang,
.inner-page .site-header .outline-btn{
  color:var(--white);
}

.inner-page .site-header .outline-btn{
  border-color:rgba(255,255,255,.8);
}

/* Shared new-page sections */
.mz-section{
  padding:80px 0;
}

/* =========================
   Section Backgrounds
========================= */

.mz-section-light{
  background:#ffffff;
  color:var(--navy);
}

.mz-section-cream{
  background:var(--cream);
  color:var(--navy);
}

.mz-section-navy{
  background:var(--navy);
  color:var(--white);
}

/* Light / cream section typography */
.mz-section-light p,
.mz-section-cream p,
.mz-section-light .lead-copy,
.mz-section-cream .lead-copy,
.mz-section-light .body-light,
.mz-section-cream .body-light{
  color:var(--navy);
}

.mz-section-light h1,
.mz-section-light h2,
.mz-section-light h3,
.mz-section-light h4,
.mz-section-light h5,
.mz-section-light h6,
.mz-section-light .display-title,
.mz-section-cream h1,
.mz-section-cream h2,
.mz-section-cream h3,
.mz-section-cream h4,
.mz-section-cream h5,
.mz-section-cream h6,
.mz-section-cream .display-title{
  color:var(--navy);
}

.mz-section-light .kicker,
.mz-section-cream .kicker{
  color:var(--navy);
  opacity:.72;
}

/* Navy section typography */
.mz-section-navy p,
.mz-section-navy .lead-copy,
.mz-section-navy .body-light{
  color:var(--muted);
}

.mz-section-navy h1,
.mz-section-navy h2,
.mz-section-navy h3,
.mz-section-navy h4,
.mz-section-navy h5,
.mz-section-navy h6,
.mz-section-navy .display-title{
  color:var(--white);
}

.mz-section-navy .kicker{
  color:var(--muted);
  opacity:1;
}

.mz-section + .mz-section{
  border-top:1px solid rgba(255,255,255,.08);
}

.kicker{
  margin:0 0 12px;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.kicker.light{
  color:var(--muted);
}

.display-title{
  margin:0;
  color:var(--white);
  font-family:var(--font-en);
  font-size:clamp(34px,4vw,52px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:.01em;
}

html[lang="ar"] .display-title{
  font-family:var(--font-ar-title);
  line-height:1.35;
}

.lead-copy,
.body-light,
.mz-section p,
.feature-rows p,
.editorial-card p,
.location-grid p,
.location-intro p,
.phase-lead{
  color:var(--muted);
}

.lead-copy{
  margin:0;
  font-size:20px;
  line-height:1.7;
}

.body-light{
  font-size:17px;
  line-height:1.7;
}

.mz-intro-grid{
  display:grid;
  grid-template-columns:.72fr 1.35fr;
  gap:80px;
  align-items:start;
}

.mz-intro-grid.compact{
  margin-top:44px;
}

.mz-media-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
  margin-top:70px;
}

.mz-media-split img{
  width:100%;
  height:460px;
  object-fit:cover;
}

.contact-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.contact-chips a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.8);
  color:var(--white);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.contact-chips a:hover{
  background:var(--white);
  color:var(--navy2);
}

.marine-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  align-items:center;
}

.marine-grid img{
  width:100%;
  height:430px;
  object-fit:cover;
}

.text-link{
  display:inline-block;
  margin-top:22px;
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
  color:var(--white);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.fact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:26px;
  border-top:1px solid rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.35);
}

.fact-grid > div{
  padding:28px 20px;
  border-right:1px solid rgba(255,255,255,.35);
  text-align:center;
}

.fact-grid > div:last-child{
  border-right:0;
}

.fact-grid strong{
  display:block;
  color:var(--white);
  font-size:32px;
  font-weight:500;
  line-height:1;
}

.fact-grid span{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.editorial-grid{
  display:grid;
  gap:54px;
}

.editorial-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}

.editorial-card.reverse img{
  order:2;
}

.editorial-card img{
  width:100%;
  height:360px;
  object-fit:cover;
}

.editorial-card h3,
.feature-rows h2{
  margin:0 0 16px;
  color:var(--white);
  font-family:var(--font-en);
  font-size:36px;
  font-weight:500;
  line-height:1.08;
}

html[lang="ar"] .editorial-card h3,
html[lang="ar"] .feature-rows h2{
  font-family:var(--font-ar-title);
}

.cta-band{
  text-align:center;
}

.cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:24px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  padding:12px 20px;
  border:1px solid rgba(255,255,255,.65);
  color:var(--white);
  font-size:11px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.btn-cyan,
.btn-navy{
  border-color:var(--cyan);
  background:var(--cyan);
  color:#fff;
}

.btn-green{
  border-color:var(--cyan);
  background:transparent;
  color:var(--white);
}

.btn-outline{
  border:1px solid rgba(255,255,255,.7);
  background:transparent;
  color:var(--white);
}

.btn-outline-dark{
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
}

.btn-outline:hover{
  background:var(--white);
  border-color:var(--white);
  color:var(--navy2);
}

.btn-outline-dark:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--white);
}

.btn:hover{
  background:var(--cream);
  border-color:var(--cream);
  color:var(--navy2);
}

/* Interior page banner */
.page-banner{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:470px;
  padding:180px 0 70px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--navy2) 0%,var(--navy) 100%);
  color:var(--white);
}

.page-banner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,30,51,.05),
    rgba(8,44,69,.35)
  );
}

.page-banner .container{
  position:relative;
  z-index:2;
}

.page-banner h1{
  margin:0 0 14px;
  color:var(--white);
  font-family:var(--font-en);
  font-size:clamp(40px,5vw,62px);
  font-weight:500;
  line-height:1.05;
}

.page-banner p{
  max-width:900px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

html[lang="ar"] .page-banner h1{
  font-family:var(--font-ar-title);
}

.wide-feature{
  display:block;
  width:88%;
  max-width: 1320px;
  object-fit:cover;
}

.dark-img{
  margin-top:50px;
}

.feature-rows{
  display:grid;
  gap:60px;
  margin-top:60px;
}

.feature-rows article{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.feature-rows article.reverse img{
  order:-1;
}

.feature-rows img{
  width:100%;
  height:340px;
  object-fit:cover;
}

.map-stack{
  display:grid;
  gap:36px;
}

.map-stack figure{
  margin:0;
  padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.map-stack img{
  width:100%;
  /* max-height:720px; */
  object-fit:contain;
  /* background:var(--cream); */
}

.map-stack figcaption{
  padding-top:12px;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
}

.expertise-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:34px 0;
  border-top:1px solid rgba(255,255,255,.35);
  border-left:1px solid rgba(255,255,255,.35);
}

.expertise-grid span{
  padding:24px;
  border-right:1px solid rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.35);
  color:var(--white);
  font-size:13px;
  font-weight:500;
  text-align:center;
}

.location-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.location-grid > img{
  max-height:520px;
  object-fit:contain;
  background:var(--cream);
}

.location-grid > img{
  max-height:520px;
  object-fit:contain;
  background:var(--cream);
}

.distance-list{
  margin:26px 0 0;
  padding-inline-start:22px;
  color:var(--muted);
  line-height:2;
}

/* Phase page */
.phase-intro{
  min-height:520px;
  padding-top:190px;
  padding-bottom:70px;
  background:linear-gradient(180deg,var(--navy2),var(--navy));
}

.phase-intro .display-title{
  margin-bottom:18px;
}

.riviera-logo-new{
  width:min(340px,80%);
  height:auto;
  margin:0 0 24px;
  object-fit:contain;
}

.phase-lead{
  max-width:1000px;
}

.phase-visual img{
  display:block;
  width:100%;
  max-height:620px;
  object-fit:cover;
}

.phase-rows .riviera-mark{
  width:260px;
  height:auto;
  margin-bottom:20px;
  object-fit:contain;
}

.outlined{
  border-top:1px solid var(--cyan);
  border-bottom:1px solid var(--cyan);
}

/* Search */
.filter-bar{
  margin:0 0 50px;
  background:var(--cyan);
}

.search-btn{
  background:var(--cream);
  color:#2483b1;
}

.custom-select-menu{
  background:var(--cream);
  color:var(--navy);
}

/* Footer */
.footer-grid-new{
  display:grid;
  grid-template-columns:1fr 180px 1fr;
  gap:40px;
  align-items:center;
}

.footer-nav{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}

.footer-logo img{
  width:150px;
  margin:auto;
}


.footer-rule{
  margin-top:28px;
  border-top:1px solid rgba(255,255,255,.18);
}

.footer .copyright{
  margin-top:18px;
}

/* Arabic content direction only */
html[lang="ar"] .mz-intro-grid,
html[lang="ar"] .marine-grid,
html[lang="ar"] .editorial-card,
html[lang="ar"] .feature-rows article,
html[lang="ar"] .location-grid,
html[lang="ar"] .location-intro{
  direction:rtl;
}

@media(max-width:900px){

  .mz-section{
    padding:70px 0;
  }

  .mz-intro-grid,
  .marine-grid,
  .location-intro,
  .location-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .mz-media-split{
    grid-template-columns:1fr;
  }

  .mz-media-split img,
  .marine-grid img{
    height:360px;
  }

  .fact-grid{
    grid-template-columns:1fr 1fr;
  }

  .fact-grid > div:nth-child(2){
    border-right:0;
  }

  .fact-grid > div:nth-child(-n+2){
    border-bottom:1px solid rgba(255,255,255,.35);
  }

  .editorial-card,
  .feature-rows article{
    grid-template-columns:1fr;
    gap:28px;
  }

  .editorial-card.reverse img,
  .feature-rows article.reverse img{
    order:0;
  }

  .expertise-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-grid-new{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-nav{
    align-items:center;
  }

  .footer-grid-new .social{
    justify-content:center;
  }

  .page-banner{
    min-height:420px;
    padding-top:170px;
  }
}

@media(max-width:600px){

  .mz-section{
    padding:55px 0;
  }

  .display-title{
    font-size:34px;
  }

  .lead-copy{
    font-size:17px;
  }

  .page-banner{
    min-height:390px;
    padding:150px 0 50px;
  }

  .page-banner h1{
    font-size:38px;
  }

  .fact-grid strong{
    font-size:25px;
  }

  .fact-grid span{
    font-size:9px;
  }

  .editorial-card img,
  .feature-rows img{
    height:260px;
  }

  .editorial-card h3,
  .feature-rows h2{
    font-size:29px;
  }

  .expertise-grid{
    grid-template-columns:1fr;
  }

  .btn{
    width:100%;
    min-width:0;
  }

  .footer-logo img{
    width:125px;
  }

  .phase-intro{
    min-height:460px;
    padding-top:150px;
  }
}

/* ==================================================
   GUINNESS WORLD RECORD SECTION
================================================== */

.record-section{
  position:relative;
  overflow:hidden;
  padding:80px 0 55px;
  background:var(--navy2);
  color:var(--white);
}

.record-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(1180px,calc(100% - 80px));
  margin-inline:auto;
}

.record-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:38px;
  width:100%;
}

.record-logo{
  display:block;
  flex:0 0 145px;
  width:145px;
  height:145px;
  object-fit:contain;
}

.record-title{
  margin:0;
  color:#00b9eb;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(40px,4vw,60px);
  font-weight:400;
  line-height:1.04;
  text-align:center;
  text-transform:uppercase;
}

.record-title strong{
  font-weight:700;
}

.record-copy{
  max-width:1160px;
  margin:30px auto 0;
  color:var(--white)!important;
  font-family:var(--font-en);
  font-size:20px;
  font-weight:300;
  line-height:1.8;
  text-align:center;
}

.record-qr{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-top:38px;
  color:var(--white);
  text-decoration:none;
  transition:opacity .25s ease;
}

.record-qr:hover{
  opacity:.75;
}

.record-qr img{
  display:block;
  flex:0 0 105px;
  width:105px;
  height:105px;
  max-width:105px;
  object-fit:contain;
}

.record-qr span{
  color:rgba(255,255,255,.85);
  font-family:var(--font-en);
  font-size:20px;
  font-weight:300;
  line-height:1.45;
  text-align:left;
}

html[lang="ar"] .record-heading{
  direction:rtl;
}

html[lang="ar"] .record-title{
  font-family:var(--font-ar-title);
  line-height:1.4;
}

html[lang="ar"] .record-copy{
  font-family:var(--font-ar-body);
  line-height:2;
}

html[lang="ar"] .record-qr{
  direction:rtl;
}

html[lang="ar"] .record-qr span{
  font-family:var(--font-ar-body);
  text-align:right;
}

/* ==================================================
   HOME HERO — CONTACT CHIPS POSITION + SVG ICONS
================================================== */

.home-hero .contact-chips{
  position:absolute;
  z-index:6;
  right:5%;
  bottom:35%;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:10px;
  width:150px;
  margin:0;
}

.home-hero .contact-chips a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-width:0;
  min-height:46px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(8,44,69,.15);
  color:var(--white);
  font-size:11px;
  font-weight:400;
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}

.home-hero .contact-chips a:hover{
  background:var(--white);
  color:var(--navy2);
  border-color:var(--white);
}

.home-hero .contact-chips .contact-icon{
  display:block;
  flex:0 0 16px;
  width:16px;
  height:16px;
  max-width:16px;
  max-height:16px;
}

.home-hero .contact-chips .contact-icon-whatsapp{
  flex-basis:17px;
  width:17px;
  height:17px;
  max-width:17px;
  max-height:17px;
}

.home-hero .contact-chips a span{
  display:block;
  line-height:1;
}

html[lang="ar"] .home-hero .contact-chips{
  left:15%;
  right:auto;
  direction:rtl;
}

/* ==================================================
   INFO HOME — CONTACT CHIPS POSITION + SVG ICONS
================================================== */

.container .contact-chips{
  position:absolute;
  z-index:6;
  right:5%;
  bottom:10%;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:10px;
  width:150px;
  margin:0;
}

.container .contact-chips a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-width:0;
  min-height:46px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(8,44,69,.15);
  color:var(--white);
  font-size:11px;
  font-weight:400;
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}

.container .contact-chips a:hover{
  background:var(--white);
  color:var(--navy2);
  border-color:var(--white);
}

.container .contact-chips .contact-icon{
  display:block;
  flex:0 0 16px;
  width:16px;
  height:16px;
  max-width:16px;
  max-height:16px;
}

.container .contact-chips .contact-icon-whatsapp{
  flex-basis:17px;
  width:17px;
  height:17px;
  max-width:17px;
  max-height:17px;
}

.container .contact-chips a span{
  display:block;
  line-height:1;
}

html[lang="ar"] .container .contact-chips{
  left:5%;
  bottom:10%;
  right:auto;
  direction:rtl;
}

@media(max-width:900px){
  .record-section{
    padding:65px 0 50px;
  }
  .record-layout{
    width:calc(100% - 40px);
  }
  .record-heading{
    gap:25px;
  }
  .record-logo{
    flex-basis:115px;
    width:115px;
    height:115px;
  }
  .record-title{
    font-size:38px;
  }
  .record-copy{
    margin-top:28px;
    font-size:17px;
    line-height:1.7;
  }
  .record-qr{
    margin-top:32px;
  }
  .record-qr img{
    flex-basis:90px;
    width:90px;
    height:90px;
    max-width:90px;
  }
  .record-qr span{
    font-size:17px;
  }
  .home-hero .contact-chips{
    right:6%;
    bottom:18%;
    width:135px;
  }
  html[lang="ar"] .home-hero .contact-chips{
    left:6%;
    right:auto;
  }
  .home-hero .contact-chips a{
    min-height:44px;
    padding:8px 12px;
    font-size:10px;
  }
  .home-hero .contact-chips .contact-icon{
    flex-basis:14px;
    width:14px;
    height:14px;
    max-width:14px;
    max-height:14px;
  }
  .home-hero .contact-chips .contact-icon-whatsapp{
    flex-basis:15px;
    width:15px;
    height:15px;
    max-width:15px;
    max-height:15px;
  }
}

@media(max-width:600px){
  .record-section{
    padding:50px 0 40px;
  }
  .record-layout{
    width:calc(100% - 28px);
  }
  .record-heading,
  html[lang="ar"] .record-heading{
    flex-direction:column;
    gap:18px;
  }
  .record-logo{
    flex-basis:auto;
    width:95px;
    height:95px;
  }
  .record-title{
    font-size:29px;
    line-height:1.08;
  }
  .record-copy{
    margin-top:24px;
    font-size:15px;
    line-height:1.75;
  }
  .record-qr{
    gap:14px;
    margin-top:28px;
  }
  .record-qr img{
    flex-basis:76px;
    width:76px;
    height:76px;
    max-width:76px;
  }
  .record-qr span{
    font-size:14px;
    line-height:1.4;
  }
  .home-hero .contact-chips,
  html[lang="ar"] .home-hero .contact-chips{
    left:14px;
    right:14px;
    bottom:82px;
    width:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .home-hero .contact-chips a{
    width:100%;
    min-height:44px;
    padding:8px 10px;
    font-size:10px;
    gap:6px;
  }
  .home-hero .contact-chips .contact-icon{
    flex-basis:13px;
    width:13px;
    height:13px;
    max-width:13px;
    max-height:13px;
  }
  .home-hero .contact-chips .contact-icon-whatsapp{
    flex-basis:14px;
    width:14px;
    height:14px;
    max-width:14px;
    max-height:14px;
  }
}
/* ==================================================
   PROJECT FACTS
================================================== */

.facts-section{
  padding:40px 0 0;
  background:#fff;
}

.facts-section .container{
  width:min(var(--max),calc(100% - 110px));
}

.facts-panel{
  position:relative;
  overflow:hidden;

  padding:48px 32px 0;

  background:var(--cream);
  color:var(--navy);

  border:1px solid #2d8cae;
  border-bottom:0;
}


/* =========================
   Heading
========================= */

.facts-kicker{
  margin:0 0 30px;

  color:var(--navy)!important;

  font-family:var(--font-en);
  font-size:14px;
  font-weight:600;
  line-height:1;

  letter-spacing:.01em;
  text-transform:uppercase;
}


/* =========================
   Facts
========================= */

.fact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  margin:0;

  border-top:1px solid #3b91ad;
}

.fact-item{
  min-height:180px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:25px 22px;

  border-right:1px solid rgba(45,140,174,.55);

  text-align:center;
}

.fact-item:last-child{
  border-right:0;
}

.fact-item strong{
  display:block;

  margin:0;

  color:var(--navy);

  font-family:var(--font-en);
  font-size:34px;
  font-weight:400;
  line-height:1.1;
}

.fact-item span{
  display:block;

  margin-top:12px;

  color:var(--navy);

  font-family:var(--font-en);
  font-size:12px;
  font-weight:400;
  line-height:1.35;

  letter-spacing:0;
  text-transform:uppercase;
}


/* =========================
   Amenity icons
========================= */

.facts-amenities{
  position:relative;
  z-index:3;

  display:grid;
  grid-template-columns:repeat(6,1fr);
  align-items:start;

  gap:15px;

  padding:20px 30px 8px;
}

.fact-amenity{
  display:flex;
  flex-direction:column;
  align-items:center;

  min-width:0;

  text-align:center;
}

.fact-amenity img{
  display:block;

  width:150px;
  height:150px;

  margin:0 auto 10px;

  object-fit:contain;
}

.fact-amenity span{
  color:#526979;

  font-family:var(--font-en);
  font-size:9px;
  font-weight:400;
  line-height:1.25;

  text-transform:uppercase;
  white-space:nowrap;
}


/* =========================
   Landmark image
========================= */

.facts-landmark{
  position:relative;

  height:290px;

  margin:0 -32px;

  overflow:hidden;
}

.facts-landmark img{
  position:absolute;

  left:0;
  bottom:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:left 65%;

  opacity:1;
}

/* only soften the TOP edge */
.facts-landmark::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;
  pointer-events:none;

  background:linear-gradient(
    180deg,
    var(--cream) 0%,
    rgba(255,244,223,.82) 8%,
    rgba(255,244,223,.35) 22%,
    rgba(255,244,223,0) 44%
  );
}


/* ==================================================
   ARABIC
================================================== */

html[lang="ar"] .facts-kicker{
  font-family:var(--font-ar-title);
  text-align:right;
}

html[lang="ar"] .fact-grid,
html[lang="ar"] .facts-amenities{
  direction:rtl;
}

html[lang="ar"] .fact-item strong{
  font-family:var(--font-ar-title);
}

html[lang="ar"] .fact-item span,
html[lang="ar"] .fact-amenity span{
  font-family:var(--font-ar-body);
}

html[lang="ar"] .fact-item{
  border-right:0;
  border-left:1px solid rgba(45,140,174,.55);
}

html[lang="ar"] .fact-item:last-child{
  border-left:0;
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

  .facts-section .container{
    width:calc(100% - 40px);
  }

  .facts-panel{
    padding:38px 24px 0;
  }

  .fact-grid{
    grid-template-columns:1fr 1fr;
  }

  .fact-item{
    min-height:145px;
  }

  .fact-item:nth-child(2){
    border-right:0;
  }

  .fact-item:nth-child(-n+2){
    border-bottom:1px solid rgba(45,140,174,.55);
  }

  .facts-amenities{
    grid-template-columns:repeat(3,1fr);
    gap:25px 14px;

    padding:28px 15px 20px;
  }

  .facts-landmark{
    height:260px;
    margin-inline:-24px;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

  .facts-section{
    padding-top:20px;
  }

  .facts-section .container{
    width:calc(100% - 28px);
  }

  .facts-panel{
    padding:28px 17px 0;
  }

  .facts-kicker{
    margin-bottom:22px;
    font-size:12px;
  }

  .fact-grid{
    grid-template-columns:1fr;
  }

  .fact-item{
    min-height:auto;

    padding:20px 8px;

    border-right:0;
    border-bottom:1px solid rgba(45,140,174,.55);
  }

  .fact-item:last-child{
    border-bottom:0;
  }

  .fact-item strong{
    font-size:27px;
  }

  .fact-item span{
    margin-top:7px;
    font-size:11px;
  }

  .facts-amenities{
    grid-template-columns:repeat(2,1fr);

    gap:22px 10px;

    padding:25px 4px 18px;
  }

  .fact-amenity img{
    width:44px;
    height:44px;
  }

  .fact-amenity span{
    font-size:8px;
    white-space:normal;
  }

  .facts-landmark{
    height:220px;
    margin-inline:-17px;
  }
}

/* ==================================================
   DEVELOPMENT PLAN FEATURES
================================================== */

.development-features-section{
  position:relative;
  padding:65px 0 80px;

  background:
    linear-gradient(
      180deg,
      #0c3552 0%,
      #0a314c 100%
    );

  color:var(--white);
}

.development-features-copy{
  max-width:900px;
  margin-bottom:48px;
}

.development-features-title{
  max-width:900px;
  margin:0 0 18px;

  color:var(--white);

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,3.6vw,52px);
  font-weight:400;
  line-height:1.02;

  text-transform:uppercase;
}

.development-features-copy p{
  max-width:950px;
  margin:0;

  color:var(--white)!important;

  font-family:var(--font-en);
  font-size:15px;
  font-weight:300;
  line-height:1.75;
}


/* ==================================================
   UNESCO / MARINE RESERVE CARD
================================================== */

.marine-feature-card{
  position:relative;

  width:min(760px,100%);
  margin-inline:auto;

  min-height:720px;

  overflow:hidden;

  background:var(--navy2);
}

.marine-feature-image{
  display:block;

  width:100%;
  height:720px;

  object-fit:cover;
  object-position:center;
}

.marine-feature-card::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:linear-gradient(
    180deg,
    rgba(6,40,63,0) 35%,
    rgba(6,40,63,.18) 52%,
    rgba(6,40,63,.88) 100%
  );
}

.marine-feature-overlay{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:2;

  padding:0 45px 42px;

  color:#fff;
}

.unesco-logo{
  display:block;

  width:145px;
  height:auto;

  margin-bottom:22px;

  object-fit:contain;
}

.marine-feature-overlay h3{
  max-width:650px;

  margin:0 0 15px;

  color:#fff;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(26px,2.5vw,38px);
  font-weight:400;
  line-height:1.08;

  text-transform:uppercase;
}

.marine-feature-overlay p{
  max-width:650px;

  margin:0;

  color:#fff!important;

  font-size:14px;
  line-height:1.65;
}


/* ==================================================
   ARABIC
================================================== */

html[lang="ar"] .development-features-copy{
  margin-left:auto;
  margin-right:0;
  text-align:right;
}

html[lang="ar"] .development-features-title{
  font-family:var(--font-ar-title);
  line-height:1.45;
}

html[lang="ar"] .development-features-copy p{
  font-family:var(--font-ar-body);
  line-height:2;
}

html[lang="ar"] .marine-feature-overlay{
  text-align:right;
}

html[lang="ar"] .marine-feature-overlay h3{
  font-family:var(--font-ar-title);
  line-height:1.45;
}

html[lang="ar"] .marine-feature-overlay p{
  font-family:var(--font-ar-body);
  line-height:1.9;
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

  .development-features-section{
    padding:55px 0 65px;
  }

  .development-features-copy{
    margin-bottom:38px;
  }

  .development-features-title{
    font-size:38px;
  }

  .development-features-copy p{
    font-size:14px;
  }

  .marine-feature-card,
  .marine-feature-image{
    height:620px;
    min-height:620px;
  }

  .marine-feature-overlay{
    padding:0 32px 32px;
  }

  .unesco-logo{
    width:125px;
  }

  .marine-feature-overlay h3{
    font-size:30px;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

  .development-features-section{
    padding:45px 0 55px;
  }

  .development-features-title{
    font-size:30px;
  }

  .development-features-copy{
    margin-bottom:30px;
  }

  .development-features-copy p{
    font-size:13px;
    line-height:1.7;
  }

  .marine-feature-card,
  .marine-feature-image{
    height:520px;
    min-height:520px;
  }

  .marine-feature-overlay{
    padding:0 20px 24px;
  }

  .unesco-logo{
    width:105px;
    margin-bottom:16px;
  }

  .marine-feature-overlay h3{
    font-size:24px;
  }

  .marine-feature-overlay p{
    font-size:12px;
    line-height:1.55;
  }
}

/* ==================================================
   MARSA ZAYED EDITORIAL VISION
================================================== */

.vision-top,
.vision-editorial{
  background:#fff;
  color:var(--navy);
}


/* =========================
   Top image strip
========================= */

.vision-top{
  padding:42px 0 18px;
}

.vision-top-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.vision-top-grid img{
  display:block;
  width:100%;
  height:310px;
  object-fit:cover;
}


/* =========================
   Editorial rows
========================= */

.vision-editorial{
  padding:20px 0 55px;
}

.vision-row{
  position:relative;

  display:grid;
  align-items:center;

  max-width:1050px;

  margin-inline:auto;
  padding:42px 0;

  border-bottom:1px solid #345a70;
}


/* Row 01 */

.vision-row-01{
  grid-template-columns:240px 1fr;
  gap:35px;
}

.vision-row-01 .vision-description{
  grid-column:1 / -1;

  max-width:970px;

  margin:8px 0 0;
  padding-left:10px;
}


/* Row 02 */

.vision-row-02{
  grid-template-columns:1.15fr .72fr;
  gap:52px;
}


/* =========================
   Number
========================= */

.vision-number{
  display:block;

  margin-bottom:6px;

  color:#7b909e;

  font-size:10px;
  font-weight:400;
  line-height:1;
}


/* =========================
   Heading
========================= */

.vision-copy h2{
  margin:0;

  color:var(--navy2);

  font-family:Georgia,"Times New Roman",serif;
  font-size:31px;
  font-weight:400;
  line-height:1.02;

  text-transform:uppercase;
}


/* =========================
   Copy
========================= */

.vision-copy p,
.vision-description{
  color:#748995!important;

  font-family:var(--font-en);
  font-size:12px;
  font-weight:300;
  line-height:1.75;
}

.vision-copy p{
  margin:20px 0 0;
}


/* =========================
   Images
========================= */

.vision-image img{
  display:block;

  width:100%;
  height:285px;

  object-fit:cover;
}

.vision-row-02 .vision-image img{
  height:345px;
}


/* ==================================================
   ARABIC
================================================== */

html[lang="ar"] .vision-row{
  direction:rtl;
}

html[lang="ar"] .vision-copy h2{
  font-family:var(--font-ar-title);
  line-height:1.45;
}

html[lang="ar"] .vision-copy p,
html[lang="ar"] .vision-description{
  font-family:var(--font-ar-body);
  line-height:2;
}

html[lang="ar"] .vision-row-01 .vision-description{
  padding-left:0;
  padding-right:10px;
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

  .vision-top-grid{
    gap:12px;
  }

  .vision-top-grid img{
    height:250px;
  }

  .vision-row-01,
  .vision-row-02{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }

  .vision-copy h2{
    font-size:27px;
  }

  .vision-row-01 .vision-description{
    grid-column:1 / -1;
  }

  .vision-image img,
  .vision-row-02 .vision-image img{
    height:270px;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

  .vision-top{
    padding-top:24px;
  }

  .vision-top-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .vision-top-grid img{
    height:175px;
  }

  .vision-editorial{
    padding-top:12px;
  }

  .vision-row,
  .vision-row-01,
  .vision-row-02{
    grid-template-columns:1fr;
    gap:18px;

    padding:30px 0;
  }

  .vision-row-01 .vision-description{
    grid-column:auto;

    margin-top:0;
    padding:0;
  }

  .vision-row-02 .vision-image{
    order:1;
  }

  .vision-row-02 .vision-copy{
    order:2;
  }

  .vision-copy h2{
    font-size:25px;
  }

  .vision-copy p,
  .vision-description{
    font-size:12px;
  }

  .vision-image img,
  .vision-row-02 .vision-image img{
    height:235px;
  }
}

/* ==================================================
   MARSA ZAYED VISION — REFERENCE MATCH
================================================== */

.vision-top,
.vision-editorial,
.closer-look-section{
  background:#fff;
  color:var(--navy2);
}

.vision-editorial{
  padding:20px 0 30px;
}

.vision-row{
  display:grid;
  align-items:center;
  max-width:1050px;
  margin-inline:auto;
  padding:38px 0;
  border-bottom:1px solid #234c65;
}

/* Row 01 */
.vision-row-01{
  grid-template-columns:300px 1fr;
  gap:36px;
}

.vision-row-01 .vision-description{
  grid-column:1 / -1;
  margin:8px 0 0;
  padding:0 8px;
}

/* Row 02 */
.vision-row-02{
  grid-template-columns:1.08fr .72fr;
  gap:48px;
}

/* Row 03 */
.vision-row-03{
  grid-template-columns:.72fr 1.08fr;
  gap:48px;
}

.vision-number{
  display:block;
  margin-bottom:5px;
  color:#879ba7;
  font-size:10px;
  line-height:1;
}

.vision-copy h2{
  margin:0;
  color:#173e59;
  font-family:Georgia,"Times New Roman",serif;
  font-size:31px;
  font-weight:400;
  line-height:1.03;
  text-transform:uppercase;
}

.vision-copy p,
.vision-description{
  color:#738794!important;
  font-family:var(--font-en);
  font-size:12px;
  font-weight:300;
  line-height:1.75;
}

.vision-copy p{
  margin:18px 0 0;
}

.vision-image img{
  display:block;
  width:100%;
  height:285px;
  object-fit:cover;
}

.vision-row-02 .vision-image img{
  height:340px;
}

.vision-row-03 .vision-image img{
  height:340px;
}

/* ==================================================
   CLOSER LOOK
================================================== */

.closer-look-section{
  padding:0 0 60px;
}

.closer-look-section .container{
  max-width:1050px;
}

.closer-look-title{
  margin:0 0 24px;
  padding-top:30px;
  border-top:1px solid #234c65;

  color:#173e59;
  font-family:Georgia,"Times New Roman",serif;
  font-size:31px;
  font-weight:400;
  line-height:1.1;
  text-align:center;
  text-transform:uppercase;
}

.closer-look-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.closer-look-grid img{
  display:block;
  width:100%;
  height:250px;
  object-fit:cover;
}

.closer-look-grid .closer-wide{
  grid-column:1 / -1;
  height:385px;
}

/* ==================================================
   ARABIC
================================================== */

html[lang="ar"] .vision-row{
  direction:rtl;
}

html[lang="ar"] .vision-copy h2,
html[lang="ar"] .closer-look-title{
  font-family:var(--font-ar-title);
  line-height:1.45;
}

html[lang="ar"] .vision-copy p,
html[lang="ar"] .vision-description{
  font-family:var(--font-ar-body);
  line-height:2;
}

/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

  .vision-row-01,
  .vision-row-02,
  .vision-row-03{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }

  .vision-copy h2{
    font-size:27px;
  }

  .vision-image img,
  .vision-row-02 .vision-image img,
  .vision-row-03 .vision-image img{
    height:270px;
  }

  .closer-look-title{
    font-size:27px;
  }

  .closer-look-grid img{
    height:220px;
  }

  .closer-look-grid .closer-wide{
    height:320px;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

  .vision-row,
  .vision-row-01,
  .vision-row-02,
  .vision-row-03{
    grid-template-columns:1fr;
    gap:18px;
    padding:28px 0;
  }

  .vision-row-01 .vision-description{
    grid-column:auto;
    margin:0;
    padding:0;
  }

  .vision-row-02 .vision-image{
    order:1;
  }

  .vision-row-02 .vision-copy{
    order:2;
  }

  .vision-copy h2{
    font-size:24px;
  }

  .vision-copy p,
  .vision-description{
    font-size:12px;
  }

  .vision-image img,
  .vision-row-02 .vision-image img,
  .vision-row-03 .vision-image img{
    height:235px;
  }

  .closer-look-title{
    font-size:24px;
    text-align:left;
  }

  html[lang="ar"] .closer-look-title{
    text-align:right;
  }

  .closer-look-grid{
    gap:10px;
  }

  .closer-look-grid img{
    height:170px;
  }

  .closer-look-grid .closer-wide{
    height:240px;
  }
}

/* ==================================================
   VISION / EDITORIAL — FULL WHITE BACKGROUND
================================================== */

.vision-top,
.vision-editorial,
.closer-look-section{
  background:#fff !important;
  color:var(--navy2);
}

/* prevent inherited navy backgrounds */
.vision-top .container,
.vision-editorial .container,
.closer-look-section .container,
.vision-row,
.vision-top-grid,
.closer-look-grid{
  background:#fff;
}

/* headings */
.vision-copy h2,
.closer-look-title{
  color:#173e59;
}

/* body copy */
.vision-copy p,
.vision-description{
  color:#738794 !important;
}

/* numbering */
.vision-number{
  color:#879ba7;
}

/* divider lines */
.vision-row,
.closer-look-title{
  border-color:#234c65;
}

/* remove the generic section divider from this area */
.vision-top + .vision-editorial,
.vision-editorial + .closer-look-section{
  border-top:0 !important;
}

/* ==================================================
   VISION ROW 03 — FULL WIDTH WHITE BACKGROUND
================================================== */

.vision-row-03{
  position:relative;
  z-index:1;
  background:#fff;
}

/* extend white background outside the container */
.vision-row-03::before{
  content:"";
  position:absolute;

  top:0;
  bottom:0;

  left:50%;
  width:100vw;

  transform:translateX(-50%);

  background:#fff;

  z-index:-1;
}

/* keep row content above background */
.vision-row-03 .vision-copy,
.vision-row-03 .vision-image{
  position:relative;
  z-index:2;
}

/* make sure parent doesn't cut full-width background */
.vision-editorial,
.vision-editorial .container{
  overflow:visible;
}

/* ==================================================
   FOOTER — SOCIAL ICONS 2 COLUMNS × 3 ROWS
================================================== */

.footer-grid-new{
  display:grid;
  grid-template-columns:1fr 180px 1fr;
  gap:40px;
  align-items:center;
}

/* Navigation */
.footer-nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}

/* Logo */
.footer-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer-logo img{
  display:block;
  width:150px;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}

/* Social icons */
.footer-grid-new .social{
  display:grid !important;
  grid-template-columns:repeat(2, 28px);
  grid-template-rows:repeat(3, 28px);

  justify-content: end;
  align-content:center;

  gap:18px 22px;

  width:auto;
  margin:0;
}
/* Arabic */
html[lang="ar"] .footer-grid-new .social{
  justify-content:start;
}

.footer-grid-new .social a{
  display:flex;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  padding:0;
  margin:0;
}

.footer-grid-new .social img{
  display:block;

  width:24px;
  height:24px;

  max-width:24px;
  max-height:24px;

  object-fit:contain;
}

.footer-grid-new .social a:hover{
  opacity:.7;
  transform:translateY(-2px);
}


/* ==================================================
   ARABIC
   Keep physical footer positions same as English
================================================== */

html[lang="ar"] .footer-grid-new{
  direction:rtl;
}

html[lang="ar"] .footer-nav{
  direction:rtl;
  text-align:right;
}

html[lang="ar"] .footer-nav a{
  font-family:var(--font-ar-title);
}

html[lang="ar"] .footer-grid-new .social{
  direction:ltr;
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

  .footer-grid-new{
    grid-template-columns:1fr 130px 1fr;
    gap:24px;
  }

  .footer-logo img{
    width:120px;
  }

  .footer-grid-new .social{
    grid-template-columns:repeat(2, 25px);
    grid-template-rows:repeat(3, 25px);
    gap:15px 18px;

    justify-content:end;
  }

  .footer-grid-new .social a{
    width:25px;
    height:25px;
  }

  .footer-grid-new .social img{
    width:22px;
    height:22px;
    max-width:22px;
    max-height:22px;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

  .footer-grid-new{
    grid-template-columns:1fr 90px 1fr;
    gap:12px;
  }

  .footer-nav{
    gap:9px;
    font-size:9px;
  }

  .footer-logo img{
    width:85px;
  }

  .footer-grid-new .social{
    grid-template-columns:repeat(2, 22px);
    grid-template-rows:repeat(3, 22px);

    gap:11px 14px;

    justify-content:end;
  }

  .footer-grid-new .social a{
    width:22px;
    height:22px;
  }

  .footer-grid-new .social img{
    width:19px;
    height:19px;

    max-width:19px;
    max-height:19px;
  }
}

/* ==================================================
   RESPONSIVE TYPOGRAPHY
================================================== */

/* Main headings */
h1,
.home-title,
.display-title,
.page-banner h1,
.development-features-title,
.vision-copy h2,
.closer-look-title{
  font-size:clamp(30px, 2.2vw, 58px);
}

/* Section headings */
.section-title,
.split h2,
.editorial-card h3,
.feature-rows h2{
  font-size:clamp(26px, 2.2vw, 46px);
}

/* Main body copy */
.body-copy,
.lead-copy,
.phase-copy{
  font-size:clamp(17px, 1.15vw, 23px);
}

/* Normal paragraphs */
p,
.vision-copy p,
.vision-description,
.body-light,
.development-features-copy p,
.marine-feature-overlay p{
  font-size:clamp(14px, .95vw, 18px);
}

/* Navigation */
.nav-links{
  font-size:clamp(12px, .85vw, 16px);
}

.nav-actions{
  font-size:clamp(12px, .8vw, 15px);
}

/* Footer */
.footer-nav{
  font-size:clamp(11px, .8vw, 14px);
}

.copyright{
  font-size:clamp(10px, .7vw, 13px);
}

/* Project facts */
.fact-item strong{
  font-size:clamp(28px, 2.2vw, 38px);
}

.fact-item span,
.fact-amenity span{
  font-size:clamp(10px, .75vw, 14px);
}

/* ==================================================
   HOME HERO — MOBILE CONTACT BUTTON FIX
================================================== */

@media(max-width:600px){

  /* Reserve space at the bottom of the hero */
  .home-hero .hero-content{
    padding-bottom:145px;
  }

  .home-hero .contact-chips,
  html[lang="ar"] .home-hero .contact-chips{
    position:absolute;

    left:14px;
    right:14px;
    bottom:42px;

    width:auto;
    margin:0;

    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;

    z-index:8;
  }

  .home-hero .contact-chips a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-width:0;
    height:38px;
    min-height:38px;

    padding:6px 8px;

    gap:5px;

    font-size:8px;
    line-height:1;
    letter-spacing:.02em;

    white-space:nowrap;
  }

  .home-hero .contact-chips a span{
    display:block;
    overflow:hidden;
    line-height:1;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .home-hero .contact-chips .contact-icon{
    flex:0 0 11px;

    width:11px;
    height:11px;

    max-width:11px;
    max-height:11px;
  }

  .home-hero .contact-chips .contact-icon-whatsapp{
    flex:0 0 12px;

    width:12px;
    height:12px;

    max-width:12px;
    max-height:12px;
  }

  /* Arabic only changes text direction */
  html[lang="ar"] .home-hero .contact-chips a{
    direction:rtl;
  }
}

/* ==================================================
   HERO CONTACT CHIPS — BELOW 1400PX
================================================== */

@media(max-width:1400px){

  .home-hero .hero-content{
    padding-bottom:130px;
  }

  .home-hero .contact-chips,
  html[lang="ar"] .home-hero .contact-chips{
    position:absolute;

    left:50%;
    right:auto;
    bottom:42px;

    transform:translateX(-50%);

    width:min(420px, calc(100% - 40px));

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;

    margin:0;

    z-index:8;
  }

  .home-hero .contact-chips a{
    width:100%;
    min-width:0;
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    padding:8px 12px;

    font-size:10px;
    line-height:1;

    white-space:nowrap;
  }

  .home-hero .contact-chips .contact-icon{
    flex:0 0 13px;

    width:13px;
    height:13px;

    max-width:13px;
    max-height:13px;
  }

  .home-hero .contact-chips .contact-icon-whatsapp{
    flex:0 0 14px;

    width:14px;
    height:14px;

    max-width:14px;
    max-height:14px;
  }

  html[lang="ar"] .home-hero .contact-chips a{
    direction:rtl;
  }
}

@media(max-width:600px){

  .home-hero .hero-content{
    padding-bottom:120px;
  }

  .home-hero .contact-chips,
  html[lang="ar"] .home-hero .contact-chips{
    width:calc(100% - 28px);
    bottom:34px;
    gap:8px;
  }

  .home-hero .contact-chips a{
    min-height:38px;
    padding:6px 8px;
    font-size:8px;
  }
}

/* ==================================================
   FINAL MZ SECTION COLOR SAFEGUARD
   Keeps semantic section classes authoritative.
================================================== */

.mz-section-light{
  background:#fff;
  color:var(--navy);
}

.mz-section-cream{
  background:var(--cream);
  color:var(--navy);
}

.mz-section-navy{
  background:var(--navy);
  color:var(--white);
}

.mz-section-light p,
.mz-section-light .lead-copy,
.mz-section-light .body-light,
.mz-section-light .kicker,
.mz-section-cream p,
.mz-section-cream .lead-copy,
.mz-section-cream .body-light,
.mz-section-cream .kicker{
  color:var(--navy);
}

.mz-section-light h1,
.mz-section-light h2,
.mz-section-light h3,
.mz-section-light h4,
.mz-section-light h5,
.mz-section-light h6,
.mz-section-light .display-title,
.mz-section-cream h1,
.mz-section-cream h2,
.mz-section-cream h3,
.mz-section-cream h4,
.mz-section-cream h5,
.mz-section-cream h6,
.mz-section-cream .display-title{
  color:var(--navy);
}

.mz-section-navy p,
.mz-section-navy .lead-copy,
.mz-section-navy .body-light,
.mz-section-navy .kicker{
  color:var(--muted);
}

.mz-section-navy h1,
.mz-section-navy h2,
.mz-section-navy h3,
.mz-section-navy h4,
.mz-section-navy h5,
.mz-section-navy h6,
.mz-section-navy .display-title{
  color:var(--white);
}

/* ==================================================
   FINAL PROJECT FACTS - COMPACT ICON SCALE
   Applies to markup:
   <div class="fact-grid dark"><div>...</div></div>
================================================== */

.fact-grid.dark{
  align-items:stretch;
}

.fact-grid.dark > div{
  min-width:0;
  padding:24px 18px 22px;
}

.fact-grid.dark > div > strong{
  font-size:30px;
  line-height:1.05;
}

.fact-grid.dark > div > span{
  margin-top:7px;
  font-size:10px;
  line-height:1.35;
}

.fact-grid.dark > div > img{
  display:block;
  width:auto !important;
  height:155px !important;
  max-width:72% !important;
  max-height:155px !important;
  margin:14px auto 0;
  object-fit:contain;
}

/* Slightly wider artwork can still fit without becoming dominant */
.fact-grid.dark > div:first-child > img,
.fact-grid.dark > div:last-child > img{
  max-width:78% !important;
}

/* Tablet */
@media(max-width:900px){

  .fact-grid.dark > div{
    padding:22px 14px 20px;
  }

  .fact-grid.dark > div > strong{
    font-size:27px;
  }

  .fact-grid.dark > div > img{
    height:125px !important;
    max-height:125px !important;
    max-width:68% !important;
  }
}

/* Small mobile */
@media(max-width:600px){

  .fact-grid.dark > div{
    padding:20px 12px;
  }

  .fact-grid.dark > div > strong{
    font-size:24px;
  }

  .fact-grid.dark > div > span{
    font-size:9px;
  }

  .fact-grid.dark > div > img{
    height:105px !important;
    max-height:105px !important;
    max-width:62% !important;
    margin-top:12px;
  }
}

/* ==================================================
   DEVELOPER SECTION
================================================== */

.phase-intro .developer-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 250px;
    gap:90px;
    align-items:stretch;
}


/* LEFT */

.phase-intro .developer-content{
    min-width:0;
}

.phase-intro .developer-content .phase-lead{
    max-width:none;
}


/* RIGHT */

.phase-intro .developer-side{
    display:grid;
    grid-template-rows:1fr auto 1fr;
    min-height:100%;
}


/* TOP EMPTY / FUTURE AREA */

.phase-intro .developer-side-top{
    min-height:110px;
}


/* LOGO + ACTIONS */

.phase-intro .developer-side-main{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}


/* LOGO */

.phase-intro .developer-logo{
    display:block;
    width:190px;
    max-width:100%;
    height:auto;
    margin:0 auto 28px;
    object-fit:contain;
}


/* BUTTONS */

.phase-intro .developer-actions{
    display:flex;
    flex-direction:column;
    width:150px;
    gap:12px;
    margin:0 auto 28px;
}

.phase-intro .developer-actions .btn{
    width:100%;
    min-width:0;
    min-height:51px;
}


/* BOTTOM EMPTY / FUTURE AREA */

.phase-intro .developer-side-bottom{
    min-height:110px;
    margin:0 auto 28px;
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

    .phase-intro .developer-layout{
        grid-template-columns:1fr;
        gap:45px;
    }

    .phase-intro .developer-side{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .phase-intro .developer-side-top,
    .phase-intro .developer-side-bottom{
        display:none;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

    .phase-intro .developer-logo{
        width:160px;
        margin-bottom:22px;
    }

    .phase-intro .developer-actions{
        width:100%;
        max-width:260px;
    }

}

/* ==================================================
   GLOBAL EXPERTISE
================================================== */

.expertise-title{
    margin:0 0 38px;
    font-size:30px;
    text-transform:uppercase;
}


/* GRID */

.expertise-grid.expertise-grid-detailed{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    margin:0;

    border-top:1px solid rgba(255,255,255,.35);
    border-bottom:1px solid rgba(255,255,255,.35);
}


/* ITEM */

.expertise-grid-detailed .expertise-box{
    min-height:240px;

    display:flex;
    flex-direction:column;

    padding:28px 22px 30px;

    border-right:1px solid rgba(255,255,255,.35);
}


/* LAST COLUMN */

.expertise-grid-detailed .expertise-box:nth-child(3n){
    border-right:0;
}


/* MIDDLE HORIZONTAL LINE */

.expertise-grid-detailed .expertise-box:nth-child(-n+3){
    border-bottom:1px solid rgba(255,255,255,.35);
}


/* TITLE */

.expertise-grid-detailed h3{
    margin:0;

    color:var(--white);

    font-family:var(--font-en);

    font-size:29px;
    font-weight:500;
    line-height:1.15;

    text-transform:uppercase;
}


/* DETAIL */

.expertise-grid-detailed p{
    margin:auto 0 0;

    max-width:230px;

    color:var(--muted);

    font-size:14px;
    line-height:1.3;
}


/* ARABIC */

html[lang="ar"] .expertise-grid-detailed h3{
    font-family:var(--font-ar-title);
}

html[lang="ar"] .expertise-grid-detailed p{
    font-family:var(--font-ar-body);
}


/* TABLET */

@media(max-width:900px){

    .expertise-grid.expertise-grid-detailed{
        grid-template-columns:repeat(2,1fr);
    }

    .expertise-grid-detailed .expertise-box{
        min-height:210px;
    }

    .expertise-grid-detailed .expertise-box{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.35);
    }

    .expertise-grid-detailed .expertise-box:nth-child(odd){
        border-right:1px solid rgba(255,255,255,.35);
    }

    .expertise-grid-detailed .expertise-box:nth-last-child(-n+2){
        border-bottom:0;
    }

}


/* MOBILE */

@media(max-width:600px){

    .expertise-title{
        font-size:25px;
    }

    .expertise-grid.expertise-grid-detailed{
        display:block;
    }

    .expertise-grid-detailed .expertise-box{
        min-height:150px;

        padding:24px 5px;

        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.35);
    }

    .expertise-grid-detailed .expertise-box:last-child{
        border-bottom:0;
    }

    .expertise-grid-detailed h3{
        font-size:24px;
    }

    .expertise-grid-detailed p{
        margin-top:35px;
        max-width:100%;
    }

}

/* ==================================================
   GLOBAL EXPERTISE - CENTERED / ZOOMED
================================================== */

.expertise-grid.expertise-grid-detailed{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    margin:0;

    border-top:1px solid rgba(255,255,255,.35);
    border-bottom:1px solid rgba(255,255,255,.35);
}


/* ITEM */

.expertise-grid-detailed .expertise-box{
    min-height:270px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    padding:34px 26px;

    border-right:1px solid rgba(255,255,255,.35);
}


/* LAST COLUMN */

.expertise-grid-detailed .expertise-box:nth-child(3n){
    border-right:0;
}


/* MIDDLE HORIZONTAL LINE */

.expertise-grid-detailed .expertise-box:nth-child(-n+3){
    border-bottom:1px solid rgba(255,255,255,.35);
}


/* TITLE */

.expertise-grid-detailed h3{
    margin:0 0 34px;

    color:var(--white);

    font-family:var(--font-en);
    font-size:34px;
    font-weight:500;
    line-height:1.08;

    text-transform:uppercase;
}


/* DETAIL */

.expertise-grid-detailed p{
    margin:0;

    max-width:270px;

    color:var(--muted);

    font-size:16px;
    line-height:1.35;
}


/* FIRST BOX - MAG DETAIL A LITTLE LARGER */

.expertise-grid-detailed .expertise-box:first-child p{
    font-size:18px;
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

    .expertise-grid.expertise-grid-detailed{
        grid-template-columns:repeat(2,1fr);
    }

    .expertise-grid-detailed .expertise-box{
        min-height:230px;
        padding:30px 22px;
    }

    .expertise-grid-detailed h3{
        font-size:30px;
        margin-bottom:28px;
    }

    .expertise-grid-detailed p{
        font-size:15px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

    .expertise-grid.expertise-grid-detailed{
        display:block;
    }

    .expertise-grid-detailed .expertise-box{
        min-height:180px;

        justify-content:center;

        padding:28px 18px;

        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.35);
    }

    .expertise-grid-detailed .expertise-box:last-child{
        border-bottom:0;
    }

    .expertise-grid-detailed h3{
        font-size:26px;
        margin-bottom:22px;
    }

    .expertise-grid-detailed p{
        max-width:100%;
        font-size:14px;
    }

}

/* ==================================================
   VISION ROWS
================================================== */

.feature-rows.vision-row{
    display:grid;
    gap:0;
    margin-top:0;
}


/* EACH ROW */

.feature-rows.vision-row article{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;

    min-height:360px;
    padding:60px 0;

    border-bottom:1px solid rgba(12,53,82,.55);
}


/* TITLE */

.feature-rows.vision-row article h2{
    margin:0;

    color:var(--navy);

    font-family:var(--font-en);
    font-size:48px;
    font-weight:400;
    line-height:1.08;

    letter-spacing:.01em;
    text-transform:uppercase;
}


/* DESCRIPTION */

.feature-rows.vision-row article p{
    margin:0;

    max-width:620px;

    color:var(--navy);

    font-family:var(--font-en);
    font-size:19px;
    font-weight:400;
    line-height:1.48;
}


/* OPTIONAL REVERSE ROW */

.feature-rows.vision-row article.reverse > div{
    order:2;
}

.feature-rows.vision-row article.reverse > p{
    order:1;
}


/* ==================================================
   ARABIC
================================================== */

html[lang="ar"] .feature-rows.vision-row article h2{
    font-family:var(--font-ar-title);
}

html[lang="ar"] .feature-rows.vision-row article p{
    font-family:var(--font-ar-body);
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

    .feature-rows.vision-row article{
        grid-template-columns:1fr;
        gap:28px;

        min-height:auto;

        padding:48px 0;
    }

    .feature-rows.vision-row article h2{
        font-size:38px;
    }

    .feature-rows.vision-row article p{
        max-width:100%;
        font-size:17px;
    }

    .feature-rows.vision-row article.reverse > div,
    .feature-rows.vision-row article.reverse > p{
        order:initial;
    }
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

    .feature-rows.vision-row article{
        gap:20px;
        padding:36px 0;
    }

    .feature-rows.vision-row article h2{
        font-size:30px;
    }

    .feature-rows.vision-row article p{
        font-size:16px;
        line-height:1.6;
    }
}

.feature-rows.vision-row{
    border-bottom:0 !important;
}

.feature-rows.vision-row article:last-child{
    border-bottom:0 !important;
}

/* ==================================================
   CTA - CONVERSATION
================================================== */

.cta-actions.navy{
    padding:90px 60px;

    background:var(--navy);
    color:var(--white);

    text-align:center;
}

.cta-actions.navy .display-title{
    max-width:900px;
    margin:0 auto 20px;

    color:var(--white);

    font-size:46px;
    font-weight:400;
    line-height:1.1;
}

.cta-actions.navy > p{
    max-width:650px;
    margin:0 auto;

    color:rgba(255,255,255,.78);

    font-size:17px;
    line-height:1.6;
}


/* BUTTON AREA */

.cta-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    /* margin-top:38px; */
}

.cta-buttons .btn{
    min-width:260px;
    min-height:58px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
}


/* CYAN */

.cta-buttons .btn-cyan{
    background:var(--cyan);
    border:1px solid var(--cyan);
    color:var(--white);
}


/* NAVY / OUTLINE */

.cta-buttons .btn-navy{
    background:transparent;
    border:1px solid rgba(255,255,255,.7);
    color:var(--white);
}


/* HOVER */

.cta-buttons .btn-cyan:hover{
    background:transparent;
    color:var(--white);
}

.cta-buttons .btn-navy:hover{
    background:var(--white);
    border-color:var(--white);
    color:var(--navy);
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:700px){

    .cta-actions.navy{
        padding:65px 24px;
    }

    .cta-actions.navy .display-title{
        font-size:32px;
    }

    .cta-actions.navy > p{
        font-size:16px;
    }

    .cta-buttons{
        flex-direction:column;
        width:100%;
        margin-top:30px;
    }

    .cta-buttons .btn{
        width:100%;
        min-width:0;
        max-width:360px;
    }
}

/* ==================================================
   CTA CENTERED LAYOUT
================================================== */

.cta-actions.navy{
    text-align:center;
}


/* TITLE */

.cta-actions.navy .display-title{
    max-width:980px;
    margin:0 auto 24px;
}


/* PARAGRAPH */

.cta-actions.navy > p{
    max-width:760px;
    margin:0 auto 34px;

    text-align:center;
}


/* BUTTONS STACKED */

.cta-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:14px;

    width:100%;
}


/* EACH BUTTON */

.cta-buttons .btn{
    width:100%;
    max-width:520px;
    min-height:58px;
}/* ==================================================
   MARSA ZAYED MAP - FINAL OVERRIDES
================================================== */

.location-map-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.45fr) minmax(300px, .55fr);
    gap:50px;
    align-items:center;
}

.location-map-column{
    min-width:0;
}

#projectMap{
    position:relative;
    width:100%;
    height:600px;
    min-height:600px;
    background:#eef1f2;
    z-index:1;
}


/* ==================================================
   HIDE LEAFLET ROUTING INSTRUCTION BOX
================================================== */

.leaflet-routing-container{
    display:none !important;
}


/* ==================================================
   POPUP
================================================== */

#projectMap .leaflet-popup-content-wrapper{
    border-radius:0;
    box-shadow:0 8px 30px rgba(0,0,0,.16);
}

#projectMap .leaflet-popup-content{
    margin:16px 20px;
    min-width:160px;
}

.mz-popup{
    color:var(--navy);
}

.mz-popup strong{
    display:block;
    margin-bottom:5px;

    color:var(--navy);

    font-size:14px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.mz-popup span{
    color:rgba(12,53,82,.68);

    font-size:12px;
}


/* ==================================================
   ROUTE INFORMATION
================================================== */

.location-route-info{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    margin-top:9px;

    color:rgba(12,53,82,.60);

    font-size:12px;
    line-height:1.4;

    letter-spacing:.04em;
    text-transform:uppercase;
}

.location-route-info .route-distance{
    display:inline;
    margin:0;

    color:var(--cyan);

    font-size:14px;
    font-weight:600;
}

.location-route-info .route-time{
    display:inline;

    color:var(--navy);

    font-size:13px;
    font-weight:500;
}

.location-route-info .route-separator{
    display:inline;

    margin:0 7px;

    color:rgba(12,53,82,.45);
}


/* ==================================================
   CUSTOM MAP MARKERS
================================================== */

.mz-map-marker-wrapper{
    background:none !important;
    border:0 !important;
}

.mz-map-marker{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    border-radius:50%;

    box-shadow:0 3px 12px rgba(0,0,0,.25);
}

.mz-map-marker span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#fff;
}

.project-marker{
    background:var(--cyan);
    border:4px solid rgba(255,255,255,.95);
}

.destination-marker{
    background:var(--navy);
    border:3px solid rgba(255,255,255,.95);
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

    .location-map-layout{
        grid-template-columns:1fr;
        gap:32px;
    }

    #projectMap{
        height:500px;
        min-height:500px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:600px){

    #projectMap{
        height:420px;
        min-height:420px;
    }

}

/* ==================================================
   BLUE SHORES CONTAINER
================================================== */

.location-intro{
    display:block;

    width:88%;
    max-width:1320px;

    margin:0 auto;
}


/* IMAGE */

.location-intro-map{
    display:block;

    width:100%;
    height:auto;

    margin:0 auto 32px;

    object-fit:contain;
}


/* COPY */

.location-intro-copy{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:100px;
    align-items:start;

    width:100%;
    max-width:980px;

    margin:0 auto;
}

/* ==================================================
   INTERACTIVE MASTERPLAN
================================================== */

.masterplan-map{
    position:relative;

    width:88%;
    max-width:1600px;

    margin:70px auto 0;
}


/* IMAGE */

.masterplan-map-image{
    display:block;

    width:100%;
    height:auto;
}


/* SVG OVERLAY */

.masterplan-map-overlay{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;
}


/* ==================================================
   HOTSPOTS
================================================== */

.map-zone{
    cursor:pointer;

    pointer-events:all;
}


.map-hotspot{
    fill:#21324a;

    stroke:#fff;
    stroke-width:2;

    opacity:.95;

    transition:
        transform .25s ease,
        fill .25s ease;
}


.map-hotspot-number{
    fill:#fff;

    font-size:18px;
    font-family:Arial,sans-serif;

    pointer-events:none;
}


/* RIVIERA */

.map-hotspot-riviera{
    fill:#9b6434;
}


/* ==================================================
   HIGHLIGHT AREA
================================================== */

.map-highlight{
    fill:rgba(45,150,199,.20);

    stroke:#2d96c7;
    stroke-width:3;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .25s ease;
}


.map-highlight-riviera{
    fill:rgba(155,100,52,.20);
    stroke:#9b6434;
}


/* HOVER */

.map-zone:hover .map-highlight{
    opacity:1;
}


/* SELECTED */

.map-zone.active .map-highlight{
    opacity:1;
}


.map-zone.active .map-hotspot{
    fill:#2d96c7;
}


.map-zone[data-zone="5"].active .map-hotspot{
    fill:#9b6434;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:900px){

    .masterplan-map{
        width:94%;
    }

}


@media(max-width:600px){

    .masterplan-map{
        width:100%;
        margin-top:40px;
    }

}

/* ==================================================
   CLICKABLE LEGEND
================================================== */

.legend-click{
    fill:transparent;
    cursor:pointer;
    pointer-events:all;
}

.legend-click:hover{
    fill:rgba(45,150,199,.08);
}

.legend-click.active{
    fill:rgba(45,150,199,.14);
}

.legend-click[data-zone="5"]:hover,
.legend-click[data-zone="5"].active{
    fill:rgba(155,100,52,.12);
}

/* ==================================================
   GENERIC CONTACT CHIPS
================================================== */

.contact-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}


/* ==================================================
   HOME HERO - DESKTOP
================================================== */

.home-hero .contact-chips{
    position:absolute;

    z-index:6;

    left:auto;
    right:5%;
    bottom:35%;

    transform:none;

    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;

    gap:10px;

    width:150px;

    margin:0;
}


/* Arabic desktop */

html[lang="ar"] .home-hero .contact-chips{
    left:5%;
    right:auto;

    transform:none;

    direction:rtl;
}


/* ==================================================
   HOME HERO - <= 1400px
================================================== */

@media(max-width:1400px){

    .home-hero .contact-chips,
    html[lang="ar"] .home-hero .contact-chips{
        position:absolute;

        left:50%;
        right:auto;

        bottom:42px;

        transform:translateX(-50%);

        width:min(
            420px,
            calc(100% - 40px)
        );

        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:10px;

        margin:0;

        z-index:8;
    }

}


/* ==================================================
   HOME HERO - <= 900px
================================================== */

@media(max-width:900px){

    .home-hero .contact-chips,
    html[lang="ar"] .home-hero .contact-chips{
        left:50%;
        right:auto;

        bottom:32px;

        transform:translateX(-50%);

        width:min(
            380px,
            calc(100% - 40px)
        );

        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);
    }

}


/* ==================================================
   HOME HERO - <= 600px
================================================== */

@media(max-width:600px){

    .home-hero .contact-chips,
    html[lang="ar"] .home-hero .contact-chips{
        left:50%;
        right:auto;

        bottom:24px;

        transform:translateX(-50%);

        width:calc(100% - 28px);

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:8px;
    }

}

/* ==================================================
   LOCATION BANNER CONTACT CHIPS
   SAME RESPONSIVE BEHAVIOR AS HOME HERO
================================================== */

.location-banner{
  position:relative;
}


/* ==================================================
   DESKTOP
================================================== */

.location-banner .contact-chips{
  position:absolute;

  right:5%;
  left:auto;
  bottom:10%;

  z-index:8;

  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;

  gap:10px;

  width:150px;

  margin:0;
}


.location-banner .contact-chips a{
  width:100%;
  min-width:0;
  min-height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  padding:10px 16px;

  border:1px solid rgba(255,255,255,.8);
  background:rgba(8,44,69,.15);

  color:var(--white);

  font-size:11px;
  font-weight:400;
  line-height:1;
  letter-spacing:.05em;

  text-align:center;
  text-transform:uppercase;

  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}


.location-banner .contact-chips .contact-icon{
  display:block;
  flex:0 0 16px;

  width:16px;
  height:16px;

  max-width:16px;
  max-height:16px;
}


.location-banner .contact-chips .contact-icon-whatsapp{
  flex:0 0 17px;

  width:17px;
  height:17px;

  max-width:17px;
  max-height:17px;
}


.location-banner .contact-chips a span{
  display:block;
  line-height:1;
}


/* Arabic desktop */

html[lang="ar"] .location-banner .contact-chips{
  left:5%;
  right:auto;

  direction:rtl;
}


/* ==================================================
   LOCATION BANNER - <= 1400px
================================================== */

@media(max-width:1400px){

  .location-banner{
    padding-bottom:130px;
  }


  .location-banner .contact-chips,
  html[lang="ar"] .location-banner .contact-chips{
    position:absolute;

    left:50%;
    right:auto;
    bottom:42px;

    transform:translateX(-50%);

    width:min(
      420px,
      calc(100% - 40px)
    );

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin:0;

    z-index:8;

    direction:ltr;
  }


  .location-banner .contact-chips a{
    width:100%;
    min-width:0;
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    padding:8px 12px;

    font-size:10px;
    line-height:1;

    white-space:nowrap;
  }


  .location-banner .contact-chips .contact-icon{
    flex:0 0 13px;

    width:13px;
    height:13px;

    max-width:13px;
    max-height:13px;
  }


  .location-banner .contact-chips .contact-icon-whatsapp{
    flex:0 0 14px;

    width:14px;
    height:14px;

    max-width:14px;
    max-height:14px;
  }


  html[lang="ar"] .location-banner .contact-chips a{
    direction:rtl;
  }

}


/* ==================================================
   LOCATION BANNER - <= 600px
================================================== */

@media(max-width:600px){

  .location-banner{
    padding-bottom:120px;
  }


  .location-banner .contact-chips,
  html[lang="ar"] .location-banner .contact-chips{
    left:50%;
    right:auto;

    bottom:34px;

    transform:translateX(-50%);

    width:calc(100% - 28px);

    gap:8px;
  }


  .location-banner .contact-chips a{
    min-height:38px;

    padding:6px 8px;

    font-size:8px;
  }

}

/* ==================================================
   DEVELOPER INTRO LAYOUT
================================================== */

.developer-layout{
    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        260px;

    column-gap:110px;

    align-items:stretch;
}


/* LEFT COPY */

.developer-main{
    min-width:0;
    max-width:980px;
}


/* RIGHT PANEL */

.developer-side{
    display:flex;
    flex-direction:column;
    align-items:center;

    min-height:100%;

    padding:20px 0 24px;
}


/* LOGO */

.developer-side-top{
    width:100%;

    display:flex;
    justify-content:center;
}

.developer-logo{
    display:block;

    width:170px;
    max-width:100%;
    height:auto;

    margin:0 auto;

    object-fit:contain;
}


/* EMPTY FLEX AREA */

.developer-side-main{
    flex:1;
    min-height:140px;
}


/* ACTIONS */

.developer-side-bottom{
    width:100%;
}

.developer-actions{
    display:flex;
    flex-direction:column;

    width:170px;

    margin:0 auto;

    gap:14px;
}

.developer-actions .btn{
    width:100%;
    min-width:0;
    min-height:50px;

    padding:10px 12px;

    font-size:10px;
}


/* ==================================================
   TABLET / MOBILE
================================================== */

@media(max-width:1000px){

    .developer-layout{
        grid-template-columns:1fr;

        row-gap:45px;
    }

    .developer-main{
        max-width:none;
    }

    .developer-side{
        display:grid;

        grid-template-columns:auto 1fr;

        gap:35px;

        align-items:center;

        padding:0;
    }

    .developer-logo{
        width:130px;
    }

    .developer-side-main{
        display:none;
    }

    .developer-actions{
        width:100%;
        max-width:420px;

        display:grid;
        grid-template-columns:1fr 1fr;

        gap:10px;

        margin:0;
    }

}

/* ==================================================
   DEVELOPER DESKTOP
================================================== */

.developer-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    column-gap:90px;
    align-items:stretch;
}

.developer-main{
    min-width:0;
    max-width:980px;
}

.developer-side{
    display:flex;
    flex-direction:column;
    align-items:center;

    min-height:100%;

    padding:20px 0 24px;
}

.developer-side-top{
    width:100%;

    display:flex;
    justify-content:center;
}

.developer-logo{
    display:block;

    width:170px;
    max-width:100%;
    height:auto;

    margin:0 auto;

    object-fit:contain;
}

.developer-side-main{
    flex:1;
    min-height:140px;
}

.developer-side-bottom{
    width:100%;
    margin-top:auto;
}

.developer-actions{
    display:flex;
    flex-direction:column;

    width:170px;

    margin:0 auto;

    gap:10px;
}

.developer-actions .btn{
    width:100%;
    min-width:0;
    min-height:48px;

    padding:10px 12px;

    font-size:10px;
}


/* ==================================================
   DEVELOPER <= 1000PX
   SAME BEHAVIOUR AS PHASE 01
================================================== */

@media(max-width:1000px){

    .developer-layout{
        display:block;
    }

    .developer-main{
        width:100%;
        max-width:none;
    }

    .developer-side{
        display:block;

        width:100%;
        min-height:0;

        margin-top:34px;
        padding:0;

        text-align:center;
    }

    .developer-side-top{
        width:100%;

        margin:0 auto 30px;
    }

    .developer-logo{
        width:150px;
        max-width:45%;
    }

    .developer-side-main{
        display:none;
    }

    .developer-side-bottom{
        width:100%;
        margin:0;
    }

    .developer-actions.contact-chips{
        position:static;

        left:auto;
        right:auto;
        bottom:auto;

        transform:none;

        width:min(420px, calc(100% - 40px));

        display:grid;
        grid-template-columns:1fr 1fr;

        gap:10px;

        margin:0 auto;
    }

    .developer-actions.contact-chips .btn{
        width:100%;
        min-width:0;
        min-height:42px;

        padding:8px 12px;

        font-size:10px;
    }

}


/* ==================================================
   DEVELOPER <= 600PX
================================================== */

@media(max-width:600px){

    .developer-side{
        margin-top:28px;
    }

    .developer-side-top{
        margin-bottom:24px;
    }

    .developer-logo{
        width:135px;
        max-width:50%;
    }

    .developer-actions.contact-chips{
        width:calc(100% - 28px);

        grid-template-columns:1fr 1fr;

        gap:8px;
    }

    .developer-actions.contact-chips .btn{
        min-height:38px;

        padding:6px 8px;

        font-size:8px;
    }

}

/* =========================================================
   FINAL HEADER / MOBILE NAVIGATION / PROJECTS DROPDOWN
   Keep this section at the absolute end of styles.css
========================================================= */

/* Hamburger hidden on desktop */
.nav-toggle{
    display:none;
    width:42px;
    height:42px;
    padding:9px;
    border:1px solid rgba(255,255,255,.65);
    background:transparent;
    color:var(--white);
    cursor:pointer;
}

.nav-toggle span{
    display:block;
    width:100%;
    height:1px;
    margin:5px 0;
    background:var(--white);
    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* =========================================================
   PROJECTS DROPDOWN — SHARED
========================================================= */

.menu-dropdown{
    position:relative;
    display:flex;
    align-items:center;
}

.menu-dropdown-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:inherit;
    font:inherit;
    letter-spacing:inherit;
    cursor:pointer;
}

.menu-dropdown-toggle.active{
    color:#fff !important;
}

.menu-dropdown-toggle::after{
    content:"";
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;
    margin-top:-4px;
    transform:rotate(45deg);
    transition:transform .25s ease;
}


/* =========================================================
   DESKTOP PROJECTS DROPDOWN
========================================================= */

@media (min-width:901px){

    .menu-dropdown .sub-menu{
        position:absolute;
        /* top:calc(100% + 10px); */
        top:100%;
        left:0;
        right:auto;
        z-index:99999;

        display:block;
        width:max-content;
        min-width:170px;

        margin:0;
        padding:8px 0;

        background:var(--navy2);
        border:1px solid rgba(255,255,255,.15);
        box-shadow:0 12px 28px rgba(0,0,0,.22);

        opacity:0;
        visibility:hidden;
        transform:translateY(6px);
        pointer-events:none;

        transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease;
    }

    .menu-dropdown:hover .sub-menu,
    .menu-dropdown:focus-within .sub-menu{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .menu-dropdown:hover .menu-dropdown-toggle::after,
    .menu-dropdown:focus-within .menu-dropdown-toggle::after{
        transform:rotate(225deg);
    }

    .menu-dropdown .sub-menu a{
        display:block;
        width:100%;
        padding:10px 15px;
        border:0;
        background:transparent !important;
        color:#fff !important;
        font-size:13px;
        line-height:1.4;
        white-space:nowrap;
        transition:opacity .2s ease;
    }

    .menu-dropdown .sub-menu a:hover,
    .menu-dropdown .sub-menu a.active{
        opacity:.7;
    }

    html[lang="ar"] .menu-dropdown .sub-menu{
        left:auto;
        right:0;
        text-align:right;
    }
}


/* =========================================================
   TABLET / MOBILE HEADER
========================================================= */

@media (max-width:900px){

    .site-header{
        z-index:99999;
    }

    .site-header .nav{
        position:relative;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:center;
        width:100%;
        gap:12px;
    }

    .site-header .brand{
        order:1;
        flex:0 0 88px;
        width:88px;
    }

    .site-header .nav-toggle{
        order:2;
        display:block !important;
        position:relative;
        z-index:100002;

        flex:0 0 42px;
        width:42px;
        height:42px;

        margin-left:auto;
        padding:9px;

        border:1px solid rgba(255,255,255,.65);
        background:transparent;
    }

    .site-header .nav-actions{
        order:3;
        flex:0 0 auto;
        margin-left:0;
    }

    .site-header .nav-actions .lang{
        display:none;
    }

    /* Main mobile navigation is hidden until JS adds .is-open */
    .site-header #main-navigation,
    .site-header .nav-links{
        position:absolute !important;
        top:calc(100% + 12px);
        left:0 !important;
        right:0 !important;

        z-index:100001;

        display:none !important;
        width:100%;

        margin:0;
        padding:16px 20px;

        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:0 !important;

        background:var(--navy2);

        border:1px solid rgba(255,255,255,.12);
        border-top:1px solid rgba(255,255,255,.15);

        box-shadow:0 18px 45px rgba(0,0,0,.35);
    }

    .site-header #main-navigation.is-open,
    .site-header .nav-links.is-open{
        display:flex !important;
    }

    /* Normal navigation links */
    .site-header #main-navigation > a,
    .site-header .nav-links > a{
        display:block;
        width:100%;

        padding:13px 0;

        border-bottom:1px solid rgba(255,255,255,.12);

        color:#fff;

        font-size:14px;
        line-height:1.4;
        text-align:left;

        white-space:normal;
    }

    .site-header #main-navigation > a:last-child,
    .site-header .nav-links > a:last-child{
        border-bottom:0;
    }

    /* Hamburger -> X */
    .site-header .nav-toggle.is-open span:nth-child(1){
        transform:translateY(6px) rotate(45deg);
    }

    .site-header .nav-toggle.is-open span:nth-child(2){
        opacity:0;
    }

    .site-header .nav-toggle.is-open span:nth-child(3){
        transform:translateY(-6px) rotate(-45deg);
    }


    /* =====================================================
       PROJECTS MOBILE DROPDOWN
    ===================================================== */

    .site-header #main-navigation .menu-dropdown,
    .site-header .nav-links .menu-dropdown,
    .site-header .nav-links .nav-dropdown{
        position:relative;
        display:block;
        width:100%;
    }

    .site-header #main-navigation .menu-dropdown-toggle,
    .site-header .nav-links .menu-dropdown-toggle,
    .site-header .nav-links .nav-dropdown-toggle{
        display:flex;
        width:100%;

        align-items:center;
        justify-content:space-between;
        gap:12px;

        margin:0;
        padding:13px 0;

        border:0;
        border-bottom:1px solid rgba(255,255,255,.12);

        background:transparent;
        color:#fff;

        font-size:14px;
        line-height:1.4;
        text-align:left;

        cursor:pointer;
    }

    /* Submenu hidden until .is-open */
    .site-header #main-navigation .menu-dropdown .sub-menu,
    .site-header .nav-links .menu-dropdown .sub-menu,
    .site-header .nav-links .nav-dropdown .nav-dropdown-menu{
        position:static !important;

        display:none !important;

        width:100%;
        min-width:0;

        margin:0;
        padding:5px 0 6px 18px;

        border:0;

        background:rgba(255,255,255,.045);

        box-shadow:none;

        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        pointer-events:auto !important;
    }

    .site-header #main-navigation .menu-dropdown.is-open .sub-menu,
    .site-header .nav-links .menu-dropdown.is-open .sub-menu,
    .site-header .nav-links .nav-dropdown.is-open .nav-dropdown-menu{
        display:block !important;
    }

    .site-header #main-navigation .menu-dropdown.is-open .menu-dropdown-toggle::after,
    .site-header .nav-links .menu-dropdown.is-open .menu-dropdown-toggle::after{
        transform:rotate(225deg);
    }

    .site-header #main-navigation .menu-dropdown .sub-menu a,
    .site-header .nav-links .menu-dropdown .sub-menu a,
    .site-header .nav-links .nav-dropdown .nav-dropdown-menu a{
        display:block;

        width:100%;

        padding:11px 14px;

        border:0;

        background:transparent !important;
        color:#fff !important;

        font-size:12px;
        line-height:1.4;

        opacity:.8;

        white-space:normal;
    }

    .site-header #main-navigation .menu-dropdown .sub-menu a:hover,
    .site-header #main-navigation .menu-dropdown .sub-menu a.active,
    .site-header .nav-links .menu-dropdown .sub-menu a:hover,
    .site-header .nav-links .menu-dropdown .sub-menu a.active,
    .site-header .nav-links .nav-dropdown .nav-dropdown-menu a:hover,
    .site-header .nav-links .nav-dropdown .nav-dropdown-menu a.active{
        opacity:1;
    }


    /* =====================================================
       ARABIC MOBILE HEADER
    ===================================================== */

    html[lang="ar"] .site-header .nav-links,
    html[lang="ar"] .site-header #main-navigation{
        align-items:stretch !important;
        text-align:right;
    }

    html[lang="ar"] .site-header #main-navigation > a,
    html[lang="ar"] .site-header .nav-links > a,
    html[lang="ar"] .site-header .menu-dropdown-toggle,
    html[lang="ar"] .site-header .nav-dropdown-toggle{
        text-align:right;
    }

    html[lang="ar"] .site-header #main-navigation .menu-dropdown .sub-menu,
    html[lang="ar"] .site-header .nav-links .menu-dropdown .sub-menu,
    html[lang="ar"] .site-header .nav-links .nav-dropdown .nav-dropdown-menu{
        padding-left:0;
        padding-right:18px;
        text-align:right;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:600px){

    .site-header .brand{
        flex:0 0 72px;
        width:72px;
    }

    .site-header .nav-toggle{
        flex:0 0 38px;
        width:38px;
        height:38px;
        padding:8px;
    }

    .site-header .nav-actions .outline-btn{
        padding:7px 8px;
        font-size:9px;
    }

    .site-header #main-navigation,
    .site-header .nav-links{
        top:calc(100% + 8px);
        padding:12px 16px;
    }

    .site-header #main-navigation > a,
    .site-header .nav-links > a,
    .site-header #main-navigation .menu-dropdown-toggle,
    .site-header .nav-links .menu-dropdown-toggle{
        padding:11px 0;
        font-size:13px;
    }
}


/* =========================================================
   NEWS PAGE
========================================================= */

.news-page .site-header,
.news-page .site-header.header-scrolled,
.news-detail-page .site-header,
.news-detail-page .site-header.header-scrolled{
    background:var(--navy) !important;
}

.news-filter-btn{
    margin:0;
    min-width:110px;
    min-height:52px;
    padding:12px 20px;

    border:1px solid var(--navy);

    background:var(--white);
    color:var(--navy);

    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.news-filter-btn:hover{
    background:var(--cyan);
    border-color:var(--cyan);
    color:#fff;
}

.news-filter-btn.active{
    background:var(--navy);
    border-color:var(--navy);
    color:#fff;
}
/* =========================================================
   FINAL MOBILE PROJECTS DROPDOWN FIX
========================================================= */

@media (max-width:900px){

    #projects-dropdown{
        position:relative !important;
        display:block !important;
        width:100% !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;
    }


    /* PROJECTS BUTTON */

    #projects-dropdown > .menu-dropdown-toggle{
        position:relative !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        width:100% !important;
        min-height:44px !important;

        margin:0 !important;
        padding:12px 0 !important;

        border:0 !important;
        border-bottom:1px solid rgba(255,255,255,.12) !important;

        background:transparent !important;
        color:#fff !important;

        font:inherit !important;
        font-size:14px !important;
        line-height:1.4 !important;

        text-align:left !important;

        cursor:pointer !important;

        opacity:1 !important;
        visibility:visible !important;

        z-index:2 !important;
    }


    /* ARROW */

    #projects-dropdown > .menu-dropdown-toggle::after{
        content:"" !important;

        display:block !important;

        width:7px !important;
        height:7px !important;

        flex:0 0 7px !important;

        margin-left:12px !important;
        margin-right:4px !important;
        margin-top:-4px !important;

        border-right:1px solid #fff !important;
        border-bottom:1px solid #fff !important;

        transform:rotate(45deg) !important;

        transition:transform .25s ease !important;
    }


    #projects-dropdown.is-open
    > .menu-dropdown-toggle::after{
        transform:rotate(225deg) !important;
        margin-top:4px !important;
    }


    /* =====================================================
       SUBMENU CLOSED
    ===================================================== */

    #projects-dropdown > .sub-menu{
        position:static !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:none !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:auto !important;

        margin:0 !important;
        padding:4px 0 5px 18px !important;

        overflow:visible !important;

        background:rgba(255,255,255,.055) !important;

        border:0 !important;

        box-shadow:none !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;

        pointer-events:auto !important;

        z-index:auto !important;
    }


    /* =====================================================
       SUBMENU OPEN
    ===================================================== */

    #projects-dropdown.is-open > .sub-menu{
        display:block !important;
        height:auto !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;

        pointer-events:auto !important;
    }


    /* SUBMENU LINK */

    #projects-dropdown > .sub-menu > a{
        position:relative !important;

        display:block !important;

        width:100% !important;

        margin:0 !important;
        padding:12px 14px !important;

        border:0 !important;

        background:transparent !important;
        color:#fff !important;

        font-size:12px !important;
        line-height:1.5 !important;

        text-decoration:none !important;

        opacity:.82 !important;
        visibility:visible !important;

        pointer-events:auto !important;
    }


    #projects-dropdown > .sub-menu > a:hover,
    #projects-dropdown > .sub-menu > a.active{
        color:#fff !important;
        opacity:1 !important;
    }


    /* ARABIC */

    html[lang="ar"]
    #projects-dropdown
    > .menu-dropdown-toggle{
        text-align:right !important;
    }

    html[lang="ar"]
    #projects-dropdown
    > .sub-menu{
        padding-left:0 !important;
        padding-right:18px !important;
        text-align:right !important;
    }

}

/* Success Contact */
.contact-alert{
    margin-bottom:28px;
    padding:16px 20px;

    font-size:14px;
    line-height:1.6;

    border:1px solid rgba(12,53,82,.15);
}

.contact-alert-success{
    background:#edf6ef;
    color:#285c35;
    border-color:#b9d8c0;
}

.contact-alert-error{
    background:#fff0f0;
    color:#8a3030;
    border-color:#e2bbbb;
}

/* =========================================================
   REQUEST CALL BACK BUTTON
   ========================================================= */

.callback-action {
    position: relative;
    z-index: 2;

    margin-top: 10px;
}

.callback-btn {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 16px;

    border:
        1px solid
        rgba(67, 196, 232, .35);

    border-radius: 14px;

    background:
        rgba(67, 196, 232, .10);

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.callback-btn:hover {
    transform: translateY(-2px);

    background:
        rgba(67, 196, 232, .18);

    border-color:
        rgba(67, 196, 232, .65);
}

.callback-phone-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(67, 196, 232, .15);

    color:
        #43c4e8;
}

.callback-phone-icon svg {
    width: 16px;
    height: 16px;
}

.callback-arrow {
    margin-left: auto;

    font-size: 18px;

    color:
        rgba(255,255,255,.6);
}


/* =========================================================
   CALLBACK MODAL
   ========================================================= */

.callback-modal {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.callback-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.callback-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(3, 18, 28, .76);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.callback-modal-card {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 520px;

    padding: 34px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #173e56,
            #0b2e45
        );

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.5);

    transform: translateY(18px) scale(.98);

    transition:
        transform .3s ease;
}

.callback-modal.is-open
.callback-modal-card {
    transform:
        translateY(0)
        scale(1);
}

.callback-close {
    position: absolute;

    top: 16px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    color: #ffffff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.callback-close:hover {
    background:
        rgba(255,255,255,.15);
}

.callback-modal-header {
    display: flex;
    align-items: center;

    gap: 14px;

    padding-right: 40px;
}

.callback-modal-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(67,196,232,.14);

    color:
        #43c4e8;
}

.callback-modal-icon svg {
    width: 22px;
    height: 22px;
}

.callback-kicker {
    margin: 0 0 4px;

    color: #43c4e8;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .20em;
}

.callback-modal-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    font-weight: 500;
}

.callback-intro {
    margin: 20px 0 24px;

    color:
        rgba(255,255,255,.68);

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   CALLBACK FORM
   ========================================================= */

.callback-form {
    display: grid;

    gap: 16px;
}

.callback-field {
    display: grid;

    gap: 7px;
}

.callback-field label {
    color:
        rgba(255,255,255,.82);

    font-size: 12px;
    font-weight: 600;
}

.callback-field label span {
    color: #43c4e8;
}

.callback-field input,
.callback-field textarea {
    width: 100%;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 12px;

    outline: none;

    background:
        rgba(255,255,255,.06);

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.callback-field input {
    height: 50px;

    padding:
        0 15px;
}

.callback-field textarea {
    min-height: 100px;

    padding:
        13px 15px;

    resize: vertical;
}

.callback-field input::placeholder,
.callback-field textarea::placeholder {
    color:
        rgba(255,255,255,.35);
}

.callback-field input:focus,
.callback-field textarea:focus {
    border-color:
        #43c4e8;

    background:
        rgba(255,255,255,.09);

    box-shadow:
        0 0 0 3px
        rgba(67,196,232,.10);
}


/* =========================================================
   SUBMIT
   ========================================================= */

.callback-submit {
    width: 100%;
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-top: 4px;

    border: 0;
    border-radius: 12px;

    background:
        #ffffff;

    color:
        #092d43;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}

.callback-submit:hover {
    background:
        #43c4e8;

    transform:
        translateY(-2px);
}


/* =========================================================
   MODAL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .callback-modal {
        padding: 14px;
    }

    .callback-modal-card {
        padding:
            28px 20px;

        border-radius:
            20px;
    }

    .callback-modal-header h2 {
        font-size:
            22px;
    }

}
/* =========================================================
   PROPERTY FILTER
   ========================================================= */

.property-filter-bar {
    width: 100%;
    margin: 0 auto 48px;
    padding: 16px;

    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(220px, 1fr)
        auto;

    align-items: end;
    gap: 12px;

    background: #ffffff;

    border: 1px solid rgba(9,48,74,.10);
    border-radius: 14px;

    box-shadow:
        0 8px 30px rgba(9,48,74,.06);
}

.property-filter-bar .filter-item {
    position: relative;
    min-width: 0;
}

.property-filter-bar .filter-item label {
    display: block;

    margin: 0 0 8px;

    color: #09304a;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.property-filter-bar .custom-select {
    position: relative;
    width: 100%;
}

.property-filter-bar .custom-select-button {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 0 16px;

    border: 1px solid rgba(9,48,74,.14);
    border-radius: 9px;

    background: #ffffff;
    color: #09304a;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
    text-align: left;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.property-filter-bar .custom-select-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #09304a !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-filter-bar
.custom-select-button:hover {
    border-color: #43c4e8;
}

.property-filter-bar
.custom-select-button[aria-expanded="true"] {
    border-color: #43c4e8;

    box-shadow:
        0 0 0 3px rgba(67,196,232,.10);
}

.property-filter-bar
.custom-select-chevron {
    color: #43c4e8;

    font-size: 18px;

    transition:
        transform .2s ease;
}

.property-filter-bar
.custom-select.open
.custom-select-chevron {
    transform: rotate(180deg);
}

.property-filter-bar
.custom-select-menu {
    position: absolute;

    top: calc(100% + 7px);
    left: 0;
    right: 0;

    z-index: 200;

    margin: 0;
    padding: 6px;

    list-style: none;

    background: #ffffff;

    border: 1px solid rgba(9,48,74,.10);
    border-radius: 9px;

    box-shadow:
        0 20px 45px rgba(9,48,74,.14);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-5px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}

.property-filter-bar
.custom-select.open
.custom-select-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.property-filter-bar
.custom-select-menu li {
    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 9px 12px;

    border-radius: 6px;

    color: #536874;

    font-size: 12px;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.property-filter-bar
.custom-select-menu li:hover {
    background: rgba(67,196,232,.08);
    color: #09304a;
}

.property-filter-bar
.custom-select-menu li.selected {
    background: #09304a;
    color: #ffffff;
}

.property-filter-bar
.search-btn {
    min-height: 50px;

    padding: 0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    border: 1px solid #09304a;
    border-radius: 9px;

    background: #09304a;
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;

    white-space: nowrap;
    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.property-filter-bar
.search-btn:hover {
    background: #43c4e8;
    border-color: #43c4e8;
    color: #061825;

    transform: translateY(-1px);
}


/* =========================================================
   UNIT DESIGN POPUP
   ========================================================= */

.unit-design-modal {
    position: fixed;
    inset: 0;

    z-index: 9999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.unit-design-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.unit-design-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(4,21,32,.84);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.unit-design-card {
    position: relative;
    z-index: 2;

    width: min(1120px, calc(100vw - 48px));

    max-height:
        calc(100dvh - 48px);

    overflow-y: auto;

    padding: 30px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #123a54,
            #082a40
        );

    box-shadow:
        0 40px 120px rgba(0,0,0,.52);

    transform:
        translateY(18px)
        scale(.98);

    transition:
        transform .3s
        cubic-bezier(.22,.8,.25,1);
}

.unit-design-modal.is-open
.unit-design-card {
    transform:
        translateY(0)
        scale(1);
}

.unit-design-close {
    position: absolute;

    top: 17px;
    right: 17px;

    z-index: 10;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.09);
    color: #ffffff;

    font-size: 25px;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .25s ease;
}

.unit-design-close:hover {
    background: rgba(255,255,255,.17);

    transform: rotate(90deg);
}

.unit-design-heading {
    padding-right: 55px;
    margin-bottom: 20px;
}

.unit-design-kicker {
    display: block;

    margin-bottom: 6px;

    color: #43c4e8;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .20em;
}

.unit-design-heading h2 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size:
        clamp(28px, 4vw, 45px);

    line-height: 1;
    font-weight: 500;
}

.unit-design-heading p {
    margin: 0;

    color: rgba(255,255,255,.58);

    font-size: 13px;
}

.unit-design-image-container {
    width: 100%;

    min-height: 450px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow: hidden;

    border-radius: 14px;

    background: #ffffff;
}

.unit-design-image-container img {
    display: block;

    width: 100%;
    max-width: 960px;
    max-height: 67vh;

    object-fit: contain;
}

.unit-design-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;
}

.unit-design-footer > span {
    color: rgba(255,255,255,.42);

    font-size: 9px;

    letter-spacing: .15em;
}

.unit-enquire-btn {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 0 20px;

    border-radius: 8px;

    background: #ffffff;
    color: #09304a;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .09em;

    transition:
        background .2s ease,
        color .2s ease;
}

.unit-enquire-btn:hover {
    background: #43c4e8;
    color: #061825;
}


/* TABLET */

@media (max-width: 900px) {

    .property-filter-bar {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .property-filter-bar
    .search-btn {
        grid-column: 1 / -1;

        width: 100%;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .property-filter-bar {
        grid-template-columns: 1fr;

        padding: 13px;
        margin-bottom: 30px;
    }

    .property-filter-bar
    .search-btn {
        grid-column: auto;
    }

    .unit-design-modal {
        padding: 12px;
    }

    .unit-design-card {
        width: 100%;

        max-height:
            calc(100dvh - 24px);

        padding: 22px 15px;

        border-radius: 17px;
    }

    .unit-design-heading {
        padding-right: 45px;
    }

    .unit-design-heading h2 {
        font-size: 28px;
    }

    .unit-design-image-container {
        min-height: 300px;

        padding: 10px;
    }

    .unit-design-image-container img {
        max-height: 58vh;
    }

    .unit-design-footer {
        align-items: stretch;

        flex-direction: column;
    }

    .unit-design-footer > span {
        text-align: center;
    }

    .unit-enquire-btn {
        width: 100%;
    }

}

/* =========================================================
   UNIT DESIGN SLIDER
========================================================= */

.unit-design-slider {
    width: 100%;
}


.unit-design-image-container {
    position: relative;

    width: 100%;
    min-height: 450px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 20px;

    border-radius: 14px;

    background: #ffffff;
}


.unit-design-image-container img {
    display: block;

    width: 100%;
    max-width: 960px;

    max-height: 67vh;

    object-fit: contain;

    opacity: 0;

    transform: scale(.985);

    transition:
        opacity .3s ease,
        transform .4s ease;
}


.unit-design-image-container img.is-visible {
    opacity: 1;

    transform: scale(1);
}


/* =========================================================
   ARROWS
========================================================= */

.unit-slider-arrow {
    position: absolute;

    top: 50%;

    z-index: 5;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border: 0;

    border-radius: 50%;

    background:
        rgba(9, 48, 74, .88);

    color: #ffffff;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .18);

    transition:
        background .2s ease,
        transform .2s ease;
}


.unit-slider-arrow:hover {
    background: #43c4e8;

    color: #061825;
}


.unit-slider-prev {
    left: 18px;
}


.unit-slider-next {
    right: 18px;
}


/* =========================================================
   COUNTER
========================================================= */

.unit-slider-counter {
    position: absolute;

    right: 16px;
    bottom: 14px;

    z-index: 5;

    min-width: 54px;

    padding:
        7px 11px;

    border-radius: 20px;

    background:
        rgba(9, 48, 74, .86);

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;

    text-align: center;

    letter-spacing: .08em;
}


/* =========================================================
   CAPTION
========================================================= */

.unit-slider-caption {
    margin-top: 13px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 500;

    text-align: center;
}


/* =========================================================
   DOTS
========================================================= */

.unit-slider-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 14px;
}


.unit-slider-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .28);

    cursor: pointer;

    transition:
        width .25s ease,
        border-radius .25s ease,
        background .25s ease;
}


.unit-slider-dot.active {
    width: 24px;

    border-radius: 10px;

    background: #43c4e8;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .unit-design-image-container {
        min-height: 300px;

        padding: 10px;
    }


    .unit-design-image-container img {
        max-height: 58vh;
    }


    .unit-slider-arrow {
        width: 38px;
        height: 38px;

        font-size: 27px;
    }


    .unit-slider-prev {
        left: 8px;
    }


    .unit-slider-next {
        right: 8px;
    }


    .unit-slider-counter {
        right: 9px;
        bottom: 9px;
    }

}
/* =========================================================
   FOOTER BOTTOM / LEGAL LINKS
========================================================= */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding-top: 20px;
}

.footer-bottom .copyright {
    margin: 0;

    color: var(--muted);

    text-align: left;

    font-size: 12px;
    letter-spacing: .12em;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    color: var(--muted);

    font-size: 12px;
}

.footer-legal a {
    color: inherit;
    transition:
        color .25s ease,
        opacity .25s ease;
}

.footer-legal a:hover {
    color: var(--white);
}

.footer-legal-separator {
    opacity: .4;
}


/* Arabic */

html[lang="ar"] .footer-bottom {
    direction: rtl;
}

html[lang="ar"] .footer-bottom .copyright {
    text-align: right;
}

html[lang="ar"] .footer-legal {
    direction: rtl;
}


/* Mobile */

@media (max-width: 700px) {

    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        gap: 12px;

        text-align: center;
    }

    .footer-bottom .copyright {
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
    }

}

/* =========================================================
   MARSA ZAYED LEGAL CONTENT
   Privacy Policy + Terms & Conditions
   Scoped only to legal content
========================================================= */

.legal-content-section {
    position: relative;
    padding: 70px 0 100px;
    background: #f5f3ee;
}

.legal-content-section .legal-content {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 70px 70px;
    background: #ffffff;
    color: var(--navy);
    border: 1px solid rgba(12,53,82,.08);
    box-shadow: 0 18px 50px rgba(8,44,69,.06);
}

.legal-content-section .legal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--navy);
}

.legal-content-section .legal-policy-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin: 0 0 30px;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(12,53,82,.10);
}

.legal-content-section .legal-policy-type {
    color: var(--cyan);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.legal-content-section .legal-policy-meta strong {
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
}

.legal-content-section .legal-intro {
    max-width: 900px;
    margin: 0 0 50px;
    color: var(--navy);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.7;
}

.legal-content-section .legal-section {
    position: relative;
    margin: 0;
    padding: 38px 0;
    background: transparent;
    border-top: 1px solid rgba(12,53,82,.09);
}

.legal-content-section .legal-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.legal-content-section .legal-section h2 {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 22px;
    padding: 0;
    color: var(--navy);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.legal-content-section .legal-section h2 > span {
    flex: 0 0 auto;
    min-width: 28px;
    color: var(--cyan);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.legal-content-section .legal-section p {
    max-width: 930px;
    margin: 0 0 17px;
    padding: 0;
    color: #536874;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
}

.legal-content-section .legal-section p:last-child { margin-bottom: 0; }
.legal-content-section .legal-section strong { color: var(--navy); font-weight: 600; }

.legal-content-section .legal-section ul {
    max-width: 920px;
    margin: 22px 0 26px;
    padding: 0;
    list-style: none;
}

.legal-content-section .legal-section li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 24px;
    color: #536874;
    font-size: 14px;
    line-height: 1.8;
}

.legal-content-section .legal-section li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 2px;
    width: 5px;
    height: 5px;
    background: var(--cyan);
}

.legal-content-section .legal-content a {
    color: var(--cyan);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.legal-content-section .legal-content a:hover { color: var(--navy2); text-decoration: underline; }

.legal-content-section .legal-notice {
    max-width: 920px;
    margin: 26px 0;
    padding: 22px 26px;
    background: rgba(45,150,199,.06);
    border-left: 3px solid var(--cyan);
}

.legal-content-section .legal-notice p { margin: 0; color: #365766; font-size: 14px; line-height: 1.8; }

.legal-content-section .legal-section.legal-contact {
    margin-top: 25px;
    padding: 35px 40px;
    background: var(--navy);
    border-top: 0;
}

.legal-content-section .legal-section.legal-contact h2 { color: var(--white); }
.legal-content-section .legal-section.legal-contact h2 > span { color: var(--cyan); }
.legal-content-section .legal-section.legal-contact p { color: var(--muted); }
.legal-content-section .legal-section.legal-contact strong { color: var(--white); }
.legal-content-section .legal-section.legal-contact a { color: var(--white); }
.legal-content-section .legal-section.legal-contact a:hover { color: var(--cyan); }

html[lang="ar"] .legal-content-section .legal-content,
html[dir="rtl"] .legal-content-section .legal-content { direction: rtl; text-align: right; }

html[lang="ar"] .legal-content-section .legal-section li,
html[dir="rtl"] .legal-content-section .legal-section li { padding-left: 0; padding-right: 24px; }

html[lang="ar"] .legal-content-section .legal-section li::before,
html[dir="rtl"] .legal-content-section .legal-section li::before { left: auto; right: 2px; }

html[lang="ar"] .legal-content-section .legal-notice,
html[dir="rtl"] .legal-content-section .legal-notice { border-left: 0; border-right: 3px solid var(--cyan); }

@media (max-width: 900px) {
    .legal-content-section { padding: 50px 0 75px; }
    .legal-content-section .legal-content { padding: 48px 45px 55px; }
    .legal-content-section .legal-intro { font-size: 20px; }
}

@media (max-width: 600px) {
    .legal-content-section { padding: 30px 0 55px; }
    .legal-content-section .legal-content { width: calc(100% - 24px); margin: 0 auto; padding: 38px 23px 42px; }
    .legal-content-section .legal-policy-meta { display: block; }
    .legal-content-section .legal-policy-meta strong { display: block; margin-top: 9px; }
    .legal-content-section .legal-intro { margin-bottom: 36px; font-size: 18px; line-height: 1.7; }
    .legal-content-section .legal-section { padding: 30px 0; }
    .legal-content-section .legal-section h2 { gap: 10px; font-size: 20px; }
    .legal-content-section .legal-section p,
    .legal-content-section .legal-section li { font-size: 13px; }
    .legal-content-section .legal-section.legal-contact { padding: 28px 24px; }
}

/* =========================================================
   COOKIE CONSENT BANNER
   ========================================================= */

.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 999999;

    background: rgba(15, 24, 38, 0.97);
    color: #ffffff;

    padding: 20px 30px;

    box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform: translateY(0);
    opacity: 1;

    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.cookie-consent.cookie-consent--hidden {
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cookie-consent__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}

.cookie-consent__content {
    flex: 1;
}

.cookie-consent__content p {
    margin: 0;

    font-size: 14px;
    line-height: 1.75;

    color: rgba(255, 255, 255, 0.88);
}

.cookie-consent__content a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-consent__content a:hover {
    opacity: 0.8;
}

.cookie-consent__actions {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;
}

.cookie-btn {
    min-height: 46px;
    padding: 11px 20px;

    border-radius: 4px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* Reject */
.cookie-btn--reject {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.cookie-btn--reject:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #ffffff;
}

/* Accept */
.cookie-btn--accept {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #0f1826;
}

.cookie-btn--accept:hover {
    background: #e9e9e9;
    border-color: #e9e9e9;
}

.cookie-btn:active {
    transform: translateY(1px);
}

/* Tablet / Mobile */
@media (max-width: 900px) {

    .cookie-consent {
        padding: 20px;
    }

    .cookie-consent__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .cookie-consent__actions {
        width: 100%;
    }

    .cookie-btn {
        flex: 1;
    }
}

@media (max-width: 560px) {

    .cookie-consent {
        padding: 18px 16px;
    }

    .cookie-consent__content p {
        font-size: 13px;
        line-height: 1.65;
    }

    .cookie-consent__actions {
        flex-direction: column-reverse;
        gap: 9px;
    }

    .cookie-btn {
        width: 100%;
    }
}
/* =========================================================
   CUSTOMISE BUTTON
========================================================= */

.cookie-btn--customise {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.55);
}

.cookie-btn--customise:hover {
    background: rgba(255,255,255,.08);
    border-color: #ffffff;
}


/* =========================================================
   COOKIE PREFERENCES MODAL
========================================================= */

.cookie-preferences {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}

.cookie-preferences.is-open {
    display: flex;
}

.cookie-preferences__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
}

.cookie-preferences__modal {
    position: relative;
    z-index: 2;

    width: calc(100% - 32px);
    max-width: 1000px;
    max-height: 90vh;

    background: #ffffff;
    color: #222;

    border-radius: 4px;

    display: flex;
    flex-direction: column;

    box-shadow: 0 20px 70px rgba(0,0,0,.3);
}

.cookie-preferences__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px;

    border-bottom: 1px solid #ededed;
}

.cookie-preferences__header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.cookie-preferences__close {
    border: 0;
    background: transparent;

    font-size: 28px;
    color: #7b8796;

    cursor: pointer;
}

.cookie-preferences__body {
    padding: 20px;
    overflow-y: auto;
}

.cookie-preferences__intro p {
    margin: 0 0 20px;

    font-size: 16px;
    line-height: 1.7;
}

.cookie-pref-category {
    border-top: 1px solid #ededed;
}

.cookie-pref-category__head {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.cookie-pref-category__expand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0;

    border: 0;
    background: none;

    font-size: 17px;
    color: #222;

    cursor: pointer;
}

.cookie-pref-chevron {
    display: inline-block;

    font-size: 22px;

    transition: transform .25s ease;
}

.cookie-pref-category__expand[aria-expanded="true"]
.cookie-pref-chevron {
    transform: rotate(90deg);
}

.cookie-always-active {
    color: #039600;
    font-weight: 700;
}

.cookie-pref-category__content {
    display: none;

    padding: 0 27px 22px;
}

.cookie-pref-category__content.is-open {
    display: block;
}

.cookie-pref-category__content p {
    margin: 0;

    font-size: 15px;
    line-height: 1.7;
}


/* SWITCH */

.cookie-switch {
    position: relative;

    width: 55px;
    height: 30px;

    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-switch__slider {
    position: absolute;
    inset: 0;

    background: #d2d8d5;

    border-radius: 30px;

    cursor: pointer;

    transition: .25s;
}

.cookie-switch__slider:before {
    content: "";

    position: absolute;

    width: 24px;
    height: 24px;

    left: 3px;
    top: 3px;

    background: #ffffff;

    border-radius: 50%;

    transition: .25s;
}

.cookie-switch input:checked + .cookie-switch__slider {
    background: #1f67df;
}

.cookie-switch input:checked + .cookie-switch__slider:before {
    transform: translateX(25px);
}


/* FOOTER */

.cookie-preferences__footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    padding: 18px 20px;

    border-top: 1px solid #ededed;
}

.cookie-pref-action {
    min-height: 54px;

    border: 0;
    border-radius: 2px;

    background: #2167df;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.cookie-pref-action:hover {
    background: #1958c3;
}

body.cookie-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {

    .cookie-preferences__modal {
        width: calc(100% - 20px);
        max-height: 94vh;
    }

    .cookie-preferences__footer {
        grid-template-columns: 1fr;
    }

}
.contact-consent-notice {
    margin-top: 12px;
    margin-left: 34px;

    font-size: 13px;
    line-height: 1.7;

    color: var(--navy);
}

html[dir="rtl"] .contact-consent-notice {
    margin-left: 0;
    margin-right: 34px;
}

/* =========================================================
   FOOTER DISCLAIMER
========================================================= */

.footer-disclaimer {
    padding-top: 28px;
    padding-bottom: 24px;
}

.footer-disclaimer__title {
    margin: 0 0 8px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

    color: #ffffff;
}

.footer-disclaimer__text {
    margin: 0;

    max-width: 1200px;

    font-size: 11px;
    line-height: 1.75;

    color: rgba(255, 255, 255, 0.62);
}

html[dir="rtl"] .footer-disclaimer {
    text-align: right;
}

@media (max-width: 768px) {

    .footer-disclaimer {
        padding-top: 22px;
        padding-bottom: 20px;
    }

    .footer-disclaimer__text {
        font-size: 10.5px;
        line-height: 1.7;
    }
}