:root{
  /* Ultra-luxury palette */
  --navy-0:#030714;
  --navy-1:#050b1a;
  --navy-2:#071229;
  --ink:#05050a;
  --text:#e9ecf3;
  --muted:rgba(233,236,243,0.74);
  --muted-2:rgba(233,236,243,0.58);
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.06);
  --gold:#c9a86a;
  --burgundy:#6c1b2e; /* دم الغزال */
  --radius:14px;
  --shadow: 0 18px 60px rgba(0,0,0,0.42);

  /* spacing scale */
  --s1:10px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:48px;
  --s6:72px;
  --s7:100px;
  --s8:140px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at 70% 10%, rgba(7,18,41,0.85), transparent 60%),
              radial-gradient(900px 700px at 15% 20%, rgba(5,11,26,0.95), transparent 60%),
              linear-gradient(180deg, var(--navy-0), var(--navy-1));
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
}

/* Anchor offset for fixed header */
[id]{ scroll-margin-top: 110px; }

/* Page intro sections (e.g., contact page) */
.page-intro{ padding-top: calc(var(--s8) + 70px); }

h1,h2,h3{
  font-family:'Playfair Display', serif;
  margin:0 0 var(--s2) 0;
}

p{ margin:0 0 var(--s2) 0; }

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

::selection{ background: rgba(108,27,46,0.45); }

/* Layout */
.section{
  padding: var(--s8) 10%;
}
section{ padding: var(--s8) 10%; }

@media (max-width: 900px){
  section{ padding: 110px 7%; }
}
@media (max-width: 560px){
  section{ padding: 90px 6%; }
}

/* Header */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s4);
  padding: 18px 10%;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(3,7,20,0.55);
  backdrop-filter: blur(14px);
  transition: transform 420ms ease, background 420ms ease, border-color 420ms ease;
}

.site-header.is-scrolled{
  background: rgba(3,7,20,0.68);
  border-bottom-color: rgba(255,255,255,0.08);
}

.site-header.is-hidden{
  transform: translateY(0%);
}

.brand{
  font-family:'Playfair Display', serif;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size: 0.92rem;
}

.site-nav{
  display:flex;
  gap: 22px;
  align-items:center;
}
.nav-link{
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  opacity:0.70;
  position:relative;
  padding: 8px 0;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:2px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,106,0.35), transparent);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform 360ms ease;
}
.nav-link:hover{ opacity:1; }
.nav-link:hover::after{ transform: scaleX(1); }

.header-cta{
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding: 10px 14px;
  border: 1px solid rgba(201,168,106,0.35);
  border-radius: 999px;
  background: rgba(201,168,106,0.06);
  transition: transform 360ms ease, background 360ms ease, border-color 360ms ease;
  white-space:nowrap;
}
.header-cta:hover{
  transform: translateY(-1px);
  background: rgba(201,168,106,0.10);
  border-color: rgba(201,168,106,0.55);
}

@media (max-width: 920px){
  .site-nav{ display:none; }
}

/* Hero */
.hero{
  position:relative;
  /* Stabilise iOS Safari viewport changes (address bar collapse) */
  height: calc(var(--vh, 1vh) * 92);
  min-height: 720px;
  padding: 0;
  overflow:hidden;
  /* Immediate render (no city flash) */
  background:
    radial-gradient(1200px 800px at 70% 10%, rgba(7,18,41,0.85), transparent 60%),
    radial-gradient(900px 700px at 15% 20%, rgba(5,11,26,0.95), transparent 60%),
    linear-gradient(180deg, var(--navy-0), var(--navy-1));
}

/* Pro placeholder (Bugatti-style): subtle living navy + grain, hides when video is ready */
.hero-placeholder{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:1;
  transition: opacity 1400ms ease;
  /* Display the hero poster image while the video loads. The gradients are layered
     beneath the image to provide subtle depth and prevent harsh edges on wide
     screens. Using cover ensures the image fills the container without
     distortion, and centering keeps the focal point visible across
     aspect ratios. */
  background:
    url('../images/hero-poster.jpg') center center/cover no-repeat,
    radial-gradient(900px 600px at 18% 25%, rgba(7,18,41,0.70), transparent 60%),
    radial-gradient(800px 520px at 78% 20%, rgba(5,11,26,0.85), transparent 58%),
    linear-gradient(180deg, rgba(3,7,20,0.92), rgba(3,7,20,0.72));
}
.hero-placeholder::before{
  content:'';
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 30% 40%, rgba(201,168,106,0.08), transparent 55%);
  /* Disable motion on initial load (no jitter/zoom). */
  animation: none;
  opacity:0.9;
}
.hero-placeholder::after{
  content:'';
  position:absolute;
  inset:0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.08"/></svg>');
  opacity:0.75;
  mix-blend-mode: overlay;
}
.hero-placeholder.is-hidden{ opacity:0; }

/*
  Mobile rendering: avoid perceived zoom/crop and reduce iOS/Safari visual jitter
  by using "contain" for both poster and video (requested).
*/
@media (max-width: 768px) {
  .hero {
    background: #000;
  }
  .hero-placeholder {
    background:
      url('../images/hero-poster.jpg') center center/contain no-repeat,
      radial-gradient(900px 600px at 18% 25%, rgba(7,18,41,0.70), transparent 60%),
      radial-gradient(800px 520px at 78% 20%, rgba(5,11,26,0.85), transparent 58%),
      linear-gradient(180deg, rgba(3,7,20,0.92), rgba(3,7,20,0.72));
    background-color: #000;
  }

  /* iOS Safari: show full frame (no crop) and avoid any perceived zoom. */
  .hero-video {
    object-fit: contain;
    object-position: center center;
    transform: none !important;
  }
}

@keyframes heroBreathe{
  from{ transform:scale(1); }
  to{ transform:scale(1.04); }
}

/*
  The video is wrapped in a container to allow layering of
  interactive controls. The wrapper ensures relative positioning
  while the video itself stretches to cover the entire area. A
  subtle scale animation creates a cinematic feel without being
  distracting. When the video is visible the opacity will be
  animated in via JavaScript on loadeddata/canplay events.
*/
.hero-video-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: right center;
  display:block;
  pointer-events:none;
  filter: saturate(1.05) contrast(1.05);
  opacity:0;
  transition: opacity 1400ms ease;
  /* Keep the hero video stable (no zoom) to avoid perceived layout shift. */
  animation: none;
}
.hero-video.is-visible{ opacity:1; }

/* Play button overlay. It only appears when autoplay is blocked and
   gracefully disappears once the user starts playback. */
.play-button{
  position:absolute;
  inset:0;
  margin:auto;
  width:90px;
  height:90px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.35);
  color:var(--text);
  font-size:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(6px);
  transition: background 240ms ease, transform 240ms ease;
  z-index:3;
}
.play-button:hover{
  background: rgba(0,0,0,0.55);
  transform: scale(1.05);
}

/* Cinematic slow zoom keyframes */
@keyframes cinematicZoom{
  from{ transform: scale(1.04); }
  to{ transform: scale(1); }
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  /* Darker overlay to improve contrast and text legibility */
  /*
    Lighten the overlay to improve visibility of the underlying video
    and avoid an overly dark hero section. We reduce the alpha values
    of both gradient layers. These adjustments make the overlay
    translucent enough to see the moving video while still maintaining
    sufficient contrast for legible text.
  */
  /*
    Further lighten the overlay to prevent the hero section from
    appearing too dark. The alpha values have been reduced even more
    to allow the video and background imagery to shine through while
    still providing enough contrast for the text.
  */
  /* Subtle dark gradient overlay improves contrast for the hero text without
     obscuring the video. Pointer events are disabled to ensure clicks
     pass through to the play button or other controls. The z-index is
     kept lower than the hero text so the content remains visible. */
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(3,7,20,0.10) 0%, rgba(3,7,20,0.04) 42%, rgba(3,7,20,0.0) 70%),
    linear-gradient(180deg, rgba(3,7,20,0.08) 0%, rgba(3,7,20,0.24) 88%);
}
.hero-inner{
  /* Position the hero text absolutely over the video so it always
     overlays the moving background. A higher z-index ensures the
     content is rendered above the video and any overlay. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 10%;
  padding-bottom: 12vh;
  z-index: 3;
}


/* Mobile hero fallback: iOS blocks background autoplay; keep it premium and stable */
@media (max-width: 768px){
  .hero{
    /* Provide a slightly shorter hero on tablets and small laptops to
       avoid extreme vertical cropping on tall mobile devices. The
       minimum height is reduced, and the height relative to the
       viewport is lowered to reveal more of the page content below.
       The poster image is centred so the main architectural features
       remain visible on varying aspect ratios. */
    min-height: 600px;
    height: calc(var(--vh, 1vh) * 78);
    background: url('../images/hero-poster.jpg') center center/cover no-repeat;
  }
  /* Do not hide the video or placeholder on small screens; allowing
     playback on mobile devices if desired. The play button remains
     visible to give users manual control. */
  .play-button{ display:flex; }
}

.hero-content{
  max-width: 760px;
}

.hero-eyebrow{
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  /* Increase opacity for better readability against a lighter overlay */
  /* Increase opacity for clarity against the lighter overlay */
  opacity:0.95;
  margin-bottom: 14px;
}

.hero-content h1{
  font-size: clamp(2.8rem, 5.8vw, 4.8rem);
  letter-spacing: 0.08em;
}

.power-statement{
  margin-top: 10px;
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Make the power statement more legible */
  opacity: 0.96;
}

/* Apply subtle text-shadow to hero text for improved contrast on video */
.hero-content h1,
.hero-content p,
.hero-eyebrow {
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero-sub{
  margin-top: 10px;
  color: var(--muted);
  font-size: 1.06rem;
  line-height:1.8;
  /* Increase opacity for subtitle text for clarity */
  opacity: 0.96;
}
.hero-locations{
  display:inline-block;
  margin-top: 16px;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform:uppercase;
  /* Increase opacity further for better clarity of location list */
  opacity:0.92;
}

/* Discover AVESIRA should sit lower */
.hero-cta{
  margin-top: 28px;
}

.cta-link{
  font-size:0.78rem;
  letter-spacing:0.26em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap: 12px;
  opacity:0.82;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201,168,106,0.40);
  transition: opacity 360ms ease, transform 360ms ease, border-color 360ms ease;
}
.cta-link::after{
  content:'↘';
  opacity:0.7;
  transform: translateY(-1px);
}
.cta-link:hover{
  opacity:1;
  transform: translateY(-1px);
  border-color: rgba(108,27,46,0.55);
}

@media (max-width: 900px){
  .hero-inner{ padding: 0 7%; padding-bottom: 11vh; }
  .hero{ min-height: 640px; }
}

@media (max-width: 560px){
  .hero{
    /* On very narrow screens prioritise readability by reducing the
       vertical space used by the hero. Lower the height relative to
       the viewport and reduce the minimum height to avoid the image
       appearing excessively cropped. The poster is centred to keep
       key architectural elements in view. */
    height: 80vh;
    min-height: 560px;
    background: url('../images/hero-poster.jpg') center center/cover no-repeat;
  }
  /* On small screens we still display the hero placeholder and video so users
     can enjoy the moving background. Do not force them to display:none
     as was previously done. The play button remains visible for manual control. */
  /* .hero-placeholder and .hero-video remain visible by default */
  /* Keep the play button visible on small devices to allow manual playback */
  .play-button{ display:flex; }
}


/* Dubai Pulse */
.pulse-strip{
  padding: 22px 10%;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(5,11,26,0.94), rgba(3,7,20,0.94));
}
.pulse-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}
.pulse-inner .dot{
  width:6px; height:6px;
  border-radius:50%;
  background: rgba(201,168,106,0.95);
  box-shadow: 0 0 12px rgba(201,168,106,0.30);
}
.pulse-divider{
  width: 18px;
  height: 1px;
  background: rgba(201,168,106,0.35);
  opacity: 0.9;
}
.pulse-sub{ opacity: 0.65; }

@media (max-width: 900px){
  .pulse-strip{ padding: 20px 7%; }
}
@media (max-width: 560px){
  .pulse-inner{ font-size: 0.66rem; letter-spacing:0.18em; }
}

/* Section kicker */
.section-kicker{
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  opacity:0.60;
  margin-bottom: 14px;
}

/* About */
.about h2{ margin-bottom: var(--s3); }
.about p{
  color: var(--muted);
  line-height:1.95;
  max-width: 980px;
}
.about strong{ color: var(--text); }

/* Philosophy */
.philosophy{
  padding-top: 54px;
  padding-bottom: 54px;
  text-align:center;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: rgba(7,18,41,0.22);
}
.philosophy p{
  margin:0;
  font-size:0.80rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  opacity:0.74;
}

/* Statement */
.statement{
  text-align:center;
  padding-top: 92px;
  padding-bottom: 92px;
}
.statement p:first-child{
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height:1.7;
  opacity:0.90;
}
.cta-sub{
  margin-top: 16px;
  font-size:0.82rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.62;
}

/* Values */
.values-strip{
  padding-top: 52px;
  padding-bottom: 52px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.values{
  text-align:center;
  font-size:0.82rem;
  letter-spacing:0.26em;
  text-transform:uppercase;
  opacity:0.72;
}

/* Services */
.services ul{
  list-style:none;
  margin: 18px 0 0 0;
  padding: 0;
  max-width: 1100px;
}
.services li{
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.services li strong{
  font-weight: 600;
}
.service-sub{
  display:block;
  margin-top: 8px;
  color: var(--muted);
  line-height:1.8;
}

/* Cities */
.cities h2{ margin-bottom: 26px; }
.cities-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 26px;
}

@media (max-width: 1100px){
  .cities-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 560px){
  /*
    Mobile: present the "Where We Operate" cards horizontally (swipe)
    instead of stacking vertically.
  */
  .cities-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 18px;
    padding-bottom: 10px;
    position: relative;
    /* Reserve space for the scroll cue so it never overlaps card content. */
    padding-right: 64px;
    /* Subtle cue that the row continues (no text prompt) */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
  }

  /* Clear swipe indicator (matches Market Insight cue). */
  .cities-grid::after{
    content:'›';
    position:absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width:48px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 48px;
    color: rgba(255,255,255,0.55);
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.65));
    pointer-events:none;
  }
  .cities-grid > .city{
    flex: 0 0 86vw;
    min-height: 420px;
    scroll-snap-align: start;
  }
}

.city{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius);
  min-height: 440px;
  padding: 28px;
  border: none;
  box-shadow: 0 20px 70px rgba(0,0,0,0.35);
  transform: translateZ(0);
  transition: transform 520ms ease, border-color 520ms ease, box-shadow 520ms ease;
}

.city::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.80) 100%);
  opacity: 1;
  z-index: 1;
  transition: opacity .4s ease;
}



.city > *{ position:relative; z-index:2; }

.city h3{
  margin-bottom: 12px;
  letter-spacing: 0.02em;

  text-shadow: 0 10px 30px rgba(0,0,0,.65);
  position: relative;
  z-index: 2;
}


.city p{ color: var(--muted); line-height:1.8; 
  text-shadow: 0 8px 22px rgba(0,0,0,.6);
  position: relative;
  z-index: 2;
}

.city-sub{ color: var(--muted-2); font-size:0.92rem; }
.flag{ opacity:0.72; margin-right: 10px; }

.city:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 90px rgba(0,0,0,0.48);
}


/* City background placeholders (user will replace images) */
.city-dubai{ background: url('../images/dubai.jpg') center/cover no-repeat; }
.city-london{ background: url('../images/london.jpg') center/cover no-repeat; }
.city-milan{ background: url('../images/milan.jpg') center/cover no-repeat; }
.city-monaco{ background: url('../images/monaco.jpg') center/cover no-repeat; }

/* Private clients */
.private p{ color: var(--muted); line-height:1.95; max-width: 980px; }
.engage-list{
  list-style:none;
  padding:0;
  margin: 34px 0 0 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 22px;
}
@media (max-width: 1100px){
  .engage-list{ grid-template-columns: 1fr; }
}
.engage-list li{
  padding: 18px 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(7,18,41,0.22), rgba(5,11,26,0.14));
}

/* Founder */
.founder p{ color: var(--muted); line-height:1.9; max-width: 860px; }

/* Contact block on home */
.contact-block{
  border-top: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(7,18,41,0.22), rgba(3,7,20,0.92));
}
.contact-copy{ color: var(--muted); line-height:1.95; max-width: 980px; }

.contact-actions{
  margin-top: 26px;
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  align-items:center;
}

.button-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,106,0.45);
  background: rgba(201,168,106,0.10);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.70rem;
  transition: transform 360ms ease, background 360ms ease, border-color 360ms ease;
}
.button-primary:hover{
  transform: translateY(-1px);
  background: rgba(201,168,106,0.14);
  border-color: rgba(108,27,46,0.52);
}

.button-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  letter-spacing: 0.10em;
  font-size: 0.78rem;
  color: var(--muted);
  transition: border-color 360ms ease, transform 360ms ease;
}
.button-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(201,168,106,0.30);
}

.contact-note{
  margin-top: 14px;
  color: var(--muted-2);
  font-size: 0.86rem;
}

/* Contact page */
.page-header{ /* kept for compatibility if needed */
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 18px 10%;
  display:flex;
  justify-content: space-between;
  align-items:center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(3,7,20,0.55);
  backdrop-filter: blur(14px);
}

.contact-form{ padding-top: 86px; }
.contact-form form{
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 24px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(7,18,41,0.20), rgba(5,11,26,0.12));
}

/* Form layout: make it feel like a single, coherent panel (not stacked blocks) */
.contact-form form > :nth-child(1){ grid-column: 1 / 2; }
.contact-form form > :nth-child(2){ grid-column: 2 / 3; }
.contact-form form > :nth-child(3){ grid-column: 1 / -1; }
.contact-form form > :nth-child(4){ grid-column: 1 / -1; }
.contact-form form > :nth-child(5){ grid-column: 1 / -1; }
.contact-form form > :nth-child(6){ grid-column: 1 / -1; }

.contact-form input,
.contact-form textarea{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  padding: 16px 16px;
  border-radius: 12px;
  outline:none;
  transition: border-color 260ms ease, background 260ms ease;
}

.contact-form textarea{ min-height: 160px; resize: vertical; }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(201,168,106,0.42);
  background: rgba(255,255,255,0.04);
}

.contact-form button{
  margin-top: 8px;
  padding: 15px 16px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,106,0.50);
  background: rgba(201,168,106,0.12);
  color: var(--text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  cursor:pointer;
  transition: transform 360ms ease, background 360ms ease, border-color 360ms ease;
}
.contact-form button:hover{
  transform: translateY(-1px);
  background: rgba(201,168,106,0.16);
  border-color: rgba(108,27,46,0.55);
}

.form-note{ text-align:center; color: var(--muted-2); font-size:0.86rem; margin-top: 12px; }
.contact-alt{ max-width: 620px; margin: 38px auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; }
.contact-alt p{ color: var(--muted); }

@media (max-width: 640px){
  .contact-form form{ grid-template-columns: 1fr; }
  .contact-form form > :nth-child(1),
  .contact-form form > :nth-child(2){ grid-column: 1 / -1; }
}

/* Footer */
footer{
  padding: 62px 10%;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(3,7,20,0.95), rgba(0,0,0,0.96));
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1.4fr 1fr;
  gap: 28px;
  align-items:end;
}

/* Executive footer layout: legal left, brand centered, address/contact right */
.footer-grid--executive{
  grid-template-columns: 1fr 1.15fr 1fr;
}

/* Baseline alignment across columns */
.footer-grid--executive .footer-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.footer-legal-col{ text-align:left; }
.footer-brand-col{ text-align:center; }
.footer-right-col{ text-align:left; direction:ltr; }
.footer-title{
  font-family:'Playfair Display', serif;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size: 0.92rem;
  margin-bottom: 8px;
  transform: translateY(-6px);
}
.footer-address{ color: var(--muted); line-height:1.85; margin:0; }
.footer-contact{ margin:0; color: var(--muted); }
.footer-link{ opacity:0.86; letter-spacing:0.12em; text-transform:uppercase; font-size:0.76rem; }
.footer-link:hover{ opacity:1; }
.footer-legal{ margin:0; color: var(--muted-2); font-size: 0.86rem; }
.footer-signature{ margin:0; color: var(--muted-2); letter-spacing:0.14em; font-size:0.78rem; line-height:1.7; }

@media (max-width: 980px){
  footer{ padding: 54px 7%; }
  .footer-grid{ grid-template-columns: 1fr; }
  /* Ensure legal/copyright is the LAST block on small screens */
  .footer-brand-col{ order: 1; }
  .footer-right-col{ order: 2; }
  .footer-legal-col{ order: 3; }
}

/* Reveal animations */
.reveal{ opacity: 0; transform: translateY(34px); }
.reveal.active{ opacity: 1; transform: translateY(0); transition: opacity 1.1s ease, transform 1.1s ease; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .reveal.active{ transition:none; }
  .nav-link::after{ transition:none; }
  .cta-link, .header-cta, .button-primary, .button-ghost, .city{ transition:none; }
}

/* Mobile navigation toggle button */
.menu-toggle{
  display:none;
  width:34px;
  height:28px;
  position:relative;
  border:none;
  background:transparent;
  cursor:pointer;
  outline:none;
  z-index:60;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: var(--text);
  border-radius:1px;
  transition: transform 360ms ease, opacity 360ms ease;
}
.menu-toggle::before{ top:6px; }
.menu-toggle span{ top:13px; }
.menu-toggle::after{ top:20px; }
.menu-toggle.open::before{ transform: translateY(7px) rotate(45deg); }
.menu-toggle.open::after{ transform: translateY(-7px) rotate(-45deg); }
.menu-toggle.open span{ opacity:0; }

@media (max-width: 920px){
  .menu-toggle{ display:block; }
  .site-nav{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap: 14px;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background: rgba(3,7,20,0.96);
    padding: 20px 10%;
    border-top: 1px solid var(--line);
    z-index:55;
  }
  .site-nav.open{ display:flex; }
  .header-cta{ display:none; }
}

/* Weather section styling */
/*
 * Live weather section
 *
 * Reduce the vertical padding on this section so it sits closer to the
 * Dubai Pulse strip above it. A smaller top and bottom padding reduces
 * the perceived distance without collapsing the layout.  The background
 * remains semi–transparent to distinguish the section from the surrounding
 * content but allows more of the underlying video to peek through.
 */
.weather-section{
  /* use a smaller padding to bring the section closer to the Dubai Pulse strip
     and reduce vertical whitespace, especially on mobile. */
  padding: var(--s3) 10%;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(5,11,26,0.80), rgba(3,7,20,0.80));
  text-align:center;
}
/*
 * Heading for the live weather/time area
 *
 * By default our h2 headings are large and would dwarf the Dubai Pulse strip.  To
 * keep the typography balanced we explicitly size and style this heading to
 * match the smaller headline used in the pulse strip (0.72rem) while
 * allowing a slight bump in size for emphasis.  Uppercasing and letter‑
 * spacing ties the style back to the pulse strip and section kicker while
 * preserving readability.
 */
.weather-section h2{
  margin-bottom: var(--s2);
  /* Match the typography of the Dubai Pulse strip: slightly smaller headline
     with generous letter spacing. */
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.82;
}
.weather-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: var(--s3);
  margin-top: var(--s3);
}
.weather-widget{
  min-height:260px;
  position:relative;
}
.weather-widget iframe,
.weather-widget .weatherwidget-io{
  width:100%;
  height:100%;
  border:none;
}

/* ------------------------------------------------------------------
 * Ticker section styling
 *
 * The ticker displays live weather and local time as a horizontally
 * scrolling news strip. It sits after the capital presence section
 * and uses a continuous leftward animation. Users can pause the
 * animation by hovering over the text. The styling echoes the
 * Dubai Pulse strip with uppercase letters and generous spacing.
 */
.ticker-section{
  padding: var(--s3) 10%;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(5,11,26,0.80), rgba(3,7,20,0.80));
  text-align: center;
  overflow:hidden;
}
.ticker-wrapper{
  overflow:hidden;
}
.ticker-content{
  /* Use a flex container with duplicated runs for a seamless loop. */
  display:flex;
  align-items:center;
  width: max-content;
  white-space: nowrap;
  font-size: 0.84rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity:0.86;
  /* Longer duration + seamless keyframes reduce perceived stutter. */
  animation: ticker-slide 55s linear infinite;
  will-change: transform;
}
/* Keep the ticker continuously moving (no hover-pause) to avoid perceived stutter. */
@keyframes ticker-slide{
  /* With two identical runs in .ticker-content, translate by half width. */
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Keep numeric widths stable so updating seconds doesn't cause jitter. */
.ticker-time,
.ticker-temp{
  display:inline-block;
  font-variant-numeric: tabular-nums;
}
.ticker-time{ width: 8.5ch; }
.ticker-temp{ width: 7ch; }

/* Runs are duplicated in markup to create a continuous marquee. */
.ticker-run{
  display:flex;
  align-items:center;
  padding-right: 2.2rem;
}

/*
  Spacing fix: prevent the last digit of the seconds from visually colliding
  with the bullet separator (•) while the ticker scrolls.
  We add explicit breathing room around each item and separator.
*/
.ticker-item{
  margin-right: 1.1rem;
}

.ticker-sep{
  display:inline-block;
  margin: 0 1.1rem 0 0;
  line-height: 1;
  opacity: 0.75;
}
/* New weather cards for live weather and time */
.weather-card{
  background: linear-gradient(180deg, rgba(5,11,26,0.70), rgba(3,7,20,0.70));
  padding: var(--s3);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  text-align: center;
  min-height: 200px;
}
.weather-card h3{
  font-size: 1.2rem;
  margin: 0 0 6px 0;
}
.weather-card .live-time{
  display:inline-block;
  margin-left: 6px;
  font-size: 0.78rem;
  color: var(--muted-2);
}
.weather-card .weather-temp{
  margin-top: 8px;
  font-size: 1.6rem;
  color: var(--gold);
}
.weather-card .weather-wind{
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--muted-2);
}

/* Market section styling */
.market-section{
  /* Use a more modest top/bottom padding now that the market section appears near the top of the page. */
  padding: var(--s4) 10%;
  border-bottom: 1px solid var(--line-2);
  text-align: center;
  /* Lighten market section background */
  background: linear-gradient(180deg, rgba(5,11,26,0.78), rgba(3,7,20,0.78));
}
.market-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}

/* On very narrow screens we still want multiple cards per row where possible.
   Reduce the minimum width of the market tiles so two items can fit on
   mid‑sized phones (e.g. 360–480 px). 180 px was chosen to ensure the
   content remains legible while allowing wrapping. */
@media (max-width: 560px) {
  /*
    Mobile: present Market Insight tiles horizontally (swipe)
    so the section feels less "tall".
  */
  .market-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap: var(--s3);
    padding-bottom: var(--s2);
    scroll-snap-type:x mandatory;
    /* Subtle cue that the row continues (no text prompt) */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
  }

  /* Reserve space for the scroll cue so it never overlaps the copy. */
  .market-grid{ position:relative; padding-right: 64px; }
  .market-grid::after{
    content:'›';
    position:absolute;
    top:0;
    right:0;
    height:100%;
    width:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    line-height:1;
    color: rgba(255,255,255,0.75);
    background: linear-gradient(90deg, rgba(3,7,20,0) 0%, rgba(3,7,20,0.75) 70%, rgba(3,7,20,0.92) 100%);
    pointer-events:none;
  }
  .market-item{
    flex: 0 0 84vw;
    max-width: 84vw;
    scroll-snap-align: start;
  }
}
.market-item{
  background: linear-gradient(180deg, rgba(5,11,26,0.68), rgba(3,7,20,0.68));
  padding: var(--s3);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  position: relative;
  min-height: 170px;

  /* Micro‑interaction: cards lift slightly on hover. This subtle effect adds a
     feeling of responsiveness without being distracting. */
  transition: transform 350ms ease;
}

.market-item:hover{
  transform: translateY(-4px) scale(1.02);
}

@media (prefers-reduced-motion: reduce){
  .market-item{
    transition: none;
  }
  .market-item:hover{
    transform: none;
  }
}
.market-item h3{
  margin: 0 0 8px 0;
  font-size: 1.2rem;
}
.market-value{
  font-size: 1.6rem;
  color: var(--gold);
  margin: 0;
}
.market-trend{
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  font-size: 1.4rem;
  color: var(--gold);
}
.market-trend.down{
  color: var(--burgundy);
  transform: rotate(180deg);
}

/* Real estate market details (size & volume) */
.market-details{
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--muted-2);
  line-height: 1.4;
}
.market-details span{
  display: block;
}

/* Stock market section styling */
.stock-section{
  padding: var(--s6) 10%;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(5,11,26,0.78), rgba(3,7,20,0.78));
  text-align: center;
}
.stock-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}
.stock-card{
  background: linear-gradient(180deg, rgba(5,11,26,0.68), rgba(3,7,20,0.68));
  padding: var(--s3);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  min-height: 170px;
  position: relative;
}
.stock-card h3{
  margin: 0 0 8px 0;
  font-size: 1.2rem;
}
.stock-index{
  font-size: 1.4rem;
  color: var(--gold);
  margin: 0;
}
.stock-change{
  font-size: 1rem;
  margin-top: 6px;
  color: var(--gold);
}
.stock-change.negative{
  color: var(--burgundy);
}

/* Contact form fields grouping */
.contact-form .form-field{
  display:flex;
  flex-direction:column;
}
.contact-form .form-field label{
  margin-bottom:4px;
  font-size:0.68rem;
  color: var(--muted);
}

/* Pulse live animation */
@keyframes pulseBlink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.4; }
}
.pulse-inner .dot{
  animation: pulseBlink 1.6s infinite ease-in-out;
}

/* Screen reader only text */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border:0;
}

/* Top offset for anchored sections due to fixed header */
:target{ scroll-margin-top: 88px; }

/* FORCE: no glass/blur on city cards */
.city{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Footer address block (shift right) */
@media (min-width: 981px){
  .footer-right-col{
    justify-self:end;
    padding-left: 60px;
  }
}

/* Footer legal links under copyright */
.footer-legal-links{
  margin: 8px 0 0 0;
  color: var(--muted-2);
  font-size: 0.80rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-legal-links .footer-divider{
  display:inline-block;
  margin: 0 8px;
  opacity: 0.6;
}


/* ------------------------------------------------------------------
 * Video modal (mobile hero playback)
 */
.video-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.video-modal__inner{
  width: min(980px, 100%);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(3,7,20,0.98);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  position: relative;
}
.video-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: var(--text);
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.video-modal__video{
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------------
 * TradingView ticker tape container
 */
.tradingview-widget-container{
  width: 100%;
}
.tradingview-widget-container__widget{
  width: 100%;
}


/* ------------------------------------------------------------------
 * Mobile video modal (hero play button)
 * Allows manual playback on browsers that block background video.
 */
.video-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}
.video-modal__inner{
  width: min(980px, 100%);
  background: rgba(5,11,26,0.92);
  border: 1px solid rgba(201,168,106,0.18);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.video-modal__bar{
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(201,168,106,0.12);
}
.video-modal__close{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.video-modal__video{
  width: 100%;
  height: auto;
  max-height: 74vh;
  display: block;
  background: #000;
}

/* ------------------------------------------------------------------
 * TradingView stock ticker section
 */
.stock-ticker-section .tradingview-widget-container{
  margin-top: 10px;
}
.stock-ticker-section .tradingview-widget-container,
.stock-ticker-section .tradingview-widget-container__widget{
  width: 100%;
}


/* --- Fix: classes used by main.js video modal --- */
.video-modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  appearance: none;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  z-index: 1;
}
.video-modal-inner{
  width: min(980px, 100%);
  background: rgba(5,11,26,0.92);
  border: 1px solid rgba(201,168,106,0.18);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.video-modal-video{
  width: 100%;
  height: auto;
  max-height: 74vh;
  display: block;
  background: #000;
}

/* --- Fix: TradingView widget sizing inside the stock ticker section --- */
#stockTicker .tradingview-widget-container{
  margin-top: 10px;
}
#stockTicker .tradingview-widget-container,
#stockTicker .tradingview-widget-container__widget{
  width: 100%;
}

/* --- Fix: TradingView widget sizing inside the data ticker section --- */
#dataTicker .tradingview-widget-container{
  margin-top: 10px;
}
#dataTicker .tradingview-widget-container,
#dataTicker .tradingview-widget-container__widget{
  width: 100%;
}

/* Monaco video break section */
/* Monaco image break section – allow the full image to display without cropping */
.monaco-video-section {
  /* Display the Monaco skyline image as a full-width background that maintains its original aspect ratio. */
  position: relative;
  width: 100%;
  /* Maintain the aspect ratio of the image (height / width = 0.6667). This ensures the full image shows without cropping. */
  padding-bottom: 66.67%;
  background-image: url('../images/monaco_break.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin-top: 5rem;
}


/* Edition signature */
.edition-tag{
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:.75;
  font-size:12px;
  letter-spacing:.08em;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.edition-tag:hover{opacity:.95;}
.edition-tag .brand{font-weight:500;}
.edition-tag .edition{font-weight:400;}