/* ==========================================================================
   Type theme: one clean grotesque for everything, inspired by fäm Properties.
   Their face, Plain, is commercial; Geist (SIL OFL) is the free stand-in with
   the same medium weight and tight tracking. Loaded after styles.css.
   ========================================================================== */
@font-face{ font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/Geist.woff2') format('woff2'); }

:root{
  --serif:   'Geist', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Geist', 'Helvetica Neue', Arial, sans-serif;
}

/* headlines: medium weight, title case, tight, like the reference */
.display, .h1, .h2{ font-weight: 500; }
.display{ font-size: clamp(44px, 6.4vw, 74px); line-height: 1.04; letter-spacing: -0.03em; }
.h1{ font-size: clamp(32px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -0.028em; }
.h2{ font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.025em; }
.h3{ font-weight: 500; letter-spacing: -0.015em; }

.launch-name, .community-offplan{ font-weight: 500; letter-spacing: -0.02em; }

/* body and UI: regular and medium only, never heavy */
body{ font-size: 16px; line-height: 26px; letter-spacing: -0.003em; }
.intro{ letter-spacing: -0.01em; }
.btn, .chip, .site-nav a, .launch-cta, .social a, .wa-float, .faq-item summary{ font-weight: 500; }
.site-nav a{ font-size: 15px; }

/* the hero label reads as a quiet line, not shouting capitals */
.hero .eyebrow{ text-transform: none; letter-spacing: .04em; font-size: 15px; font-weight: 500; }
.hero .eyebrow::before{ display: none; }

/* area band: medium caps, a touch tighter */
.marquee-item{ font-weight: 500; letter-spacing: .16em; }

/* pieces added after the sample was made */
.hero-slogan{ font-style: normal; font-weight: 400; letter-spacing: -0.015em; }
.mm-links a{ font-weight: 500; letter-spacing: -0.025em; }
.about-copy .h2{ letter-spacing: -0.028em; }
.pin .p-label{ font-weight: 500; }
.tower-stage, .partners-title, .map-note{ font-weight: 500; }

/* hero photo: the tower sits right, the evening sky on the left carries the heading */
.hero-media img{ object-position: 55% 55%; }
@media (max-width: 700px){ .hero-media img{ object-position: 50% 50%; } }
/* golden-hour skyline: navy behind the words, warm light left visible on the right */
.hero-scrim{
  background:
    linear-gradient(90deg, rgba(1,27,58,.88) 0%, rgba(1,27,58,.72) 36%, rgba(1,27,58,.28) 64%, rgba(1,27,58,.08) 100%),
    linear-gradient(180deg, rgba(1,27,58,.15) 0%, rgba(1,27,58,0) 35%, rgba(1,27,58,.45) 100%);
}
@media (max-width: 939px){
  .hero-scrim{ background: linear-gradient(180deg, rgba(1,27,58,.2) 0%, rgba(1,27,58,.55) 45%, rgba(1,27,58,.9) 100%); }
}

/* ==========================================================================
   Hero design options (review only: add ?hero=1..4 to the address)
   ========================================================================== */
.hero-visual{ position: absolute; inset: 0; }
.hero-slide, .hero-ring, .hero-feature, .hero-short, .hero-switch{ display: none; }
html[data-hero] .hero-switch{
  display: flex; gap: 4px; position: fixed; left: 12px; bottom: 12px; z-index: 70;
  padding: 5px; border-radius: 22px; background: rgba(1,27,58,.86); backdrop-filter: blur(10px);
}
.hero-switch a{ min-width: 36px; height: 34px; display: grid; place-items: center; padding: 0 10px; border-radius: 17px;
  color: #fff; text-decoration: none; font: 600 13px/1 var(--display); }
html:not([data-hero]) .hero-switch a:first-child,
html[data-hero="1"] .hero-switch a:nth-child(2), html[data-hero="2"] .hero-switch a:nth-child(3),
html[data-hero="3"] .hero-switch a:nth-child(4), html[data-hero="4"] .hero-switch a:nth-child(5){ background: var(--sand); color: var(--ink); }

/* phones: every option swaps the long paragraph for one short line */
@media (max-width: 700px){
  html[data-hero] .hero-intro{ display: none; }
  html[data-hero] .hero-short{ display: block; margin: 0 0 var(--s6); font-size: 17px; line-height: 1.5; max-width: 34ch; }
  html[data-hero] .hero-ctas{ flex-wrap: nowrap; gap: 8px; margin-top: 0; }
  html[data-hero] .hero-ctas .btn{ padding: 13px 16px; font-size: 14px; white-space: nowrap; }
  html[data-hero] .hero .display{ font-size: clamp(38px, 11vw, 52px); }
}

/* ---- 1. Glass card: the photo shows, the words sit on frosted glass ---- */
html[data-hero="1"] .hero{ min-height: min(92svh, 860px); padding: var(--s24) 0 var(--s8); }
html[data-hero="1"] .hero-scrim{ background: linear-gradient(180deg, rgba(1,27,58,.05) 0%, rgba(1,27,58,.1) 50%, rgba(1,27,58,.55) 100%); }
html[data-hero="1"] .hero-body{
  width: auto; max-width: 660px; margin: 0 var(--gutter);
  padding: var(--s8); border-radius: 20px;
  background: rgba(1,27,58,.42); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
html[data-hero="1"] .hero-short{ color: rgba(255,255,255,.88); }
@media (min-width: 701px){ html[data-hero="1"] .hero-body{ margin-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); } }
@media (max-width: 700px){ html[data-hero="1"] .hero-body{ padding: var(--s6); margin: 0 12px; } }

/* ---- 2. Photo on top, words below on white ---- */
html[data-hero="2"] .hero{ background: var(--white); display: grid; grid-template-columns: 1fr; gap: var(--s8); align-items: center; min-height: 0; padding: var(--s4) 0 var(--s12); }
html[data-hero="2"] .hero-visual{ position: relative; inset: auto; height: 46svh; min-height: 280px; margin: 0 12px; border-radius: 22px; overflow: hidden; }
html[data-hero="2"] .hero-scrim{ display: none; }
html[data-hero="2"] .hero .display{ color: var(--navy); }
html[data-hero="2"] .hero-short, html[data-hero="2"] .hero-intro{ color: var(--slate); }
html[data-hero="2"] .btn-ghost-light{ color: var(--navy); border-color: rgba(0,53,119,.35); }
@media (min-width: 901px){
  html[data-hero="2"] .hero{ grid-template-columns: 1fr 1.05fr; padding: var(--s12) var(--gutter) var(--s16); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; }
  html[data-hero="2"] .hero-visual{ order: 2; height: min(72svh, 640px); margin: 0; }
  html[data-hero="2"] .hero-body{ padding: 0; }
}

/* ---- 3. Brand circle: the skyline inside Coligo's open gold circle ---- */
html[data-hero="3"] .hero{ display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s6); min-height: 0; padding: var(--s12) 0 var(--s16); background: radial-gradient(120% 80% at 50% 20%, #0A3F86 0%, var(--navy) 45%, var(--ink) 100%); }
html[data-hero="3"] .hero-visual{ position: relative; inset: auto; width: min(68vw, 400px); aspect-ratio: 1; }
html[data-hero="3"] .hero-media{ border-radius: 50%; overflow: hidden; inset: 7%; }
html[data-hero="3"] .hero-ring{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html[data-hero="3"] .hero-ring path{ fill: none; stroke: var(--sand); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: ring-draw 1.8s cubic-bezier(.6,0,.2,1) .3s forwards; }
@keyframes ring-draw{ to{ stroke-dashoffset: 0; } }
html[data-hero="3"] .hero-scrim{ display: none; }
html[data-hero="3"] .hero-short, html[data-hero="3"] .hero-intro{ margin-left: auto; margin-right: auto; }
html[data-hero="3"] .hero-ctas{ justify-content: center; }
@media (min-width: 901px){
  html[data-hero="3"] .hero{ grid-template-columns: 1.1fr .9fr; text-align: left; justify-items: start; padding: var(--s16) var(--gutter); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; }
  html[data-hero="3"] .hero-visual{ order: 2; justify-self: center; width: min(40vw, 480px); }
  html[data-hero="3"] .hero-intro{ margin-left: 0; }
  html[data-hero="3"] .hero-ctas{ justify-content: flex-start; }
  html[data-hero="3"] .hero-body{ padding: 0; }
}

/* ---- 4. Slideshow with a featured-project card ---- */
html[data-hero="4"] .hero{ min-height: min(92svh, 860px); padding-bottom: var(--s8); flex-direction: column; justify-content: flex-end; align-items: stretch; }
html[data-hero="4"] .hero-slide{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
html[data-hero="4"] .hero-media > picture img, html[data-hero="4"] .hero-slide{ transform: scale(1.12); }
html[data-hero="4"] .hero-media .is-on{ opacity: 1; transform: scale(1); transition: opacity 1.2s ease, transform 7s linear; z-index: 1; }
html[data-hero="4"] .hero-media > picture img{ transition: opacity 1.2s ease, transform 7s linear; }
html[data-hero="4"] .hero-media > picture img:not(.is-on){ opacity: 0; }
html[data-hero="4"] .hero-scrim{ z-index: 1; background: linear-gradient(180deg, rgba(1,27,58,.15) 0%, rgba(1,27,58,.25) 40%, rgba(1,27,58,.85) 100%); }
html[data-hero="4"] .hero-feature{
  display: grid; gap: 6px; position: relative; z-index: 2;
  margin: var(--s6) var(--gutter) 0; padding: var(--s6); max-width: 380px;
  border-radius: 16px; text-decoration: none; color: #fff;
  background: rgba(1,27,58,.5); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.hf-label{ font: 600 11px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.hf-name{ font: 500 24px/1.2 var(--display); letter-spacing: -0.02em; }
.hf-meta{ font-size: 14px; color: rgba(255,255,255,.75); }
.hf-cta{ margin-top: 6px; font: 600 14px/1 var(--display); }
.hf-bars{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.hf-bars i{ display: block; height: 2px; background: rgba(255,255,255,.28); position: relative; overflow: hidden; }
.hf-bars i::after{ content: ""; position: absolute; inset: 0; background: var(--sand); transform: scaleX(0); transform-origin: left; }
.hf-bars i.done::after{ transform: scaleX(1); }
.hf-bars i.run::after{ animation: hf-fill 5.5s linear forwards; }
@keyframes hf-fill{ to{ transform: scaleX(1); } }
@media (min-width: 941px){
  html[data-hero="4"] .hero{ display: grid; grid-template-columns: 1fr auto; align-items: end; }
  html[data-hero="4"] .hero-feature{ margin: 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 0 0; width: 340px; }
}
@media (max-width: 700px){ html[data-hero="4"] .hero-feature{ margin: var(--s6) 12px 0; max-width: none; } }
/* dark options: the short line reads light; design 4 keeps words above the sliding photos */
html[data-hero="3"] .hero-short, html[data-hero="4"] .hero-short{ color: rgba(255,255,255,.86); }
html[data-hero="4"] .hero-body{ position: relative; z-index: 2; }

/* ==========================================================================
   Hero options 5–8
   ========================================================================== */
.hero-3d, .hero-collage, .hero-word{ display: none; }
.hero-switch a{ min-width: 30px; padding: 0 8px; }
html[data-hero="5"] .hero-switch a:nth-child(6), html[data-hero="6"] .hero-switch a:nth-child(7),
html[data-hero="7"] .hero-switch a:nth-child(8), html[data-hero="8"] .hero-switch a:nth-child(9){ background: var(--sand); color: var(--ink); }

/* ---- 5. Cinematic pan: the skyline drifts like a film opening ---- */
html[data-hero="5"] .hero{ min-height: calc(100svh - 76px); align-items: center; justify-content: center; text-align: center; padding: var(--s16) 0; }
html[data-hero="5"] .hero-media{ inset: 0 -35% 0 0; animation: hero-pan 38s ease-in-out infinite alternate; }
@keyframes hero-pan{ from{ transform: translateX(0); } to{ transform: translateX(-24%); } }
html[data-hero="5"] .hero-scrim{ background: radial-gradient(120% 90% at 50% 50%, rgba(1,27,58,.35) 0%, rgba(1,27,58,.62) 60%, rgba(1,27,58,.9) 100%); }
html[data-hero="5"] .hero .display{ font-size: clamp(46px, 8.4vw, 112px); letter-spacing: -0.04em; margin-left: auto; margin-right: auto; }
html[data-hero="5"] .hero-intro, html[data-hero="5"] .hero-short{ margin-left: auto; margin-right: auto; color: rgba(255,255,255,.86); }
html[data-hero="5"] .hero-ctas{ justify-content: center; }

/* ---- 6. 3D skyline: dark towers with glowing gold edges ---- */
html[data-hero="6"] .hero{ min-height: calc(100svh - 76px); background: radial-gradient(110% 80% at 70% 30%, #0B3C80 0%, #022657 45%, var(--ink) 100%); }
html[data-hero="6"] .hero-visual, html[data-hero="6"] .hero-scrim{ display: none; }
html[data-hero="6"] .hero-3d{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-hero="6"] .hero-body{ position: relative; z-index: 2; }
html[data-hero="6"] .hero-short{ color: rgba(255,255,255,.86); }
html[data-hero="6"] .hero::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(1,27,58,.75) 0%, rgba(1,27,58,.25) 45%, rgba(1,27,58,0) 70%);
}
@media (max-width: 700px){ html[data-hero="6"] .hero::after{ background: linear-gradient(180deg, rgba(1,27,58,0) 20%, rgba(1,27,58,.85) 75%); } }

/* ---- 7. Photo mosaic on navy: an even grid, one gap size, aligned edges ---- */
html[data-hero="7"] .hero{
  min-height: calc(100svh - 76px); align-items: center;
  background: radial-gradient(90% 70% at 78% 30%, #0D4590 0%, var(--navy) 42%, var(--ink) 100%);
}
html[data-hero="7"] .hero-visual, html[data-hero="7"] .hero-scrim{ display: none; }
html[data-hero="7"] .hero-short{ color: rgba(255,255,255,.86); }
html[data-hero="7"] .hero-body{ position: relative; z-index: 2; }
html[data-hero="7"] .hero-collage{
  display: grid; position: absolute; pointer-events: none;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 14px;
  right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  top: 50%; transform: translateY(-50%);
  width: min(48vw, 640px); aspect-ratio: 1 / 1;
}
/* the mosaic: tall city left, penthouse across the top, pool tall right, skyline across the bottom */
.hc1{ grid-column: 1;     grid-row: 1 / 3; }
.hc2{ grid-column: 2 / 4; grid-row: 1; }
.hc5{ grid-column: 2;     grid-row: 2; }
.hc3{ grid-column: 3;     grid-row: 2 / 4; }
.hc4{ grid-column: 1 / 3; grid-row: 3; }
.hc{
  position: relative; display: block; overflow: hidden; border-radius: 16px;
  box-shadow: 0 24px 50px rgba(0,8,24,.45), 0 0 0 1px rgba(255,255,255,.1);
  opacity: 0; transform: translateY(24px);
  animation: hc-in .9s cubic-bezier(.2,.8,.2,1) forwards;
}
/* one photo, sliced: every pane shows its own window onto the same picture (sizes set in main.js).
   Each pane is a card: sunset on the front, the night skyline on the back. */
.hc{ overflow: visible; background: none; perspective: 1400px; box-shadow: none; }
.hc-in{
  position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.65,0,.25,1);
}
.hc.is-night .hc-in{ transform: rotateY(180deg); }
.hc-face{
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background-repeat: no-repeat;
  box-shadow: 0 24px 50px rgba(0,8,24,.45), 0 0 0 1px rgba(255,255,255,.1);
}
.hc-day{ transform: rotateY(0deg) translateZ(1px); opacity: 1; transition: opacity 0s .55s; }
.hc-night{ opacity: 0; transition: opacity 0s .55s; }
/* failsafe for browsers that ignore backface-visibility: swap faces at the flip's halfway point */
.hc.is-night .hc-day{ opacity: 0; }
.hc.is-night .hc-night{ opacity: 1; }
.hc-day{ background-image: var(--img); background-size: var(--bw, 100%) var(--bh, 100%); background-position: var(--bx, 0) var(--by, 0); }
.hc-night{ background-image: var(--img2); background-size: var(--nw, 100%) var(--nh, 100%); background-position: var(--nx, 0) var(--ny, 0); transform: rotateY(180deg) translateZ(1px); }
@media (max-width: 940px){ .hc-face{ box-shadow: 0 14px 30px rgba(0,8,24,.4), 0 0 0 1px rgba(255,255,255,.08); } }
@media (prefers-reduced-motion: reduce){ .hc-in, .hc-face{ transition: none; } }
.hc1{ animation-delay: .1s; } .hc2{ animation-delay: .2s; } .hc5{ animation-delay: .3s; } .hc3{ animation-delay: .4s; } .hc4{ animation-delay: .5s; }
@keyframes hc-in{ to{ opacity: 1; transform: none; } }
@keyframes hc-zoom{ from{ transform: scale(1.04); } to{ transform: scale(1.14); } }
@media (min-width: 941px){
  html[data-hero="7"] .hero-body > *{ max-width: 430px; }
  /* wide screens: a landscape mosaic that fills the space right of the words */
  html[data-hero="7"] .hero-collage{
    grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px;
    right: 24px; width: min(calc(100vw - 560px - max(var(--gutter), (100vw - var(--maxw)) / 2)), 1100px);
    aspect-ratio: 16 / 10;
  }
  html[data-hero="7"] .hc1{ grid-column: 1;     grid-row: 1 / 3; }
  html[data-hero="7"] .hc2{ grid-column: 2 / 4; grid-row: 1; }
  html[data-hero="7"] .hc5{ grid-column: 4;     grid-row: 1; }
  html[data-hero="7"] .hc3{ grid-column: 2;     grid-row: 2; }
  html[data-hero="7"] .hc4{ grid-column: 3 / 5; grid-row: 2; }
}

/* phones and tablets: a compact mosaic above the words, heading visible on the first screen */
@media (max-width: 940px){
  html[data-hero="7"] .hero{ display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 16px 0 var(--s12); }
  html[data-hero="7"] .hero-collage{
    order: -1; position: relative; right: auto; top: auto; transform: none;
    width: calc(100% - 32px); max-width: 600px; aspect-ratio: 4 / 3; margin: 0 auto var(--s8); gap: 8px;
  }
  .hc{ border-radius: 12px; box-shadow: 0 14px 30px rgba(0,8,24,.4), 0 0 0 1px rgba(255,255,255,.08); }
}
/* ---- 8. The word DUBAI filled with the moving skyline ---- */
html[data-hero="8"] .hero{ min-height: calc(100svh - 76px); background: var(--ink); flex-direction: column; justify-content: center; align-items: stretch; padding: var(--s12) 0; }
html[data-hero="8"] .hero-visual, html[data-hero="8"] .hero-scrim{ display: none; }
html[data-hero="8"] .hero-word{
  display: block; margin: 0 0 var(--s4); text-align: center;
  font: 700 clamp(96px, 27vw, 420px)/0.82 var(--display); letter-spacing: -0.05em;
  color: transparent;
  background: url(photos/hero-skyline-wide.jpg) 0% 55% / cover;
  -webkit-background-clip: text; background-clip: text;
  animation: word-pan 24s ease-in-out infinite alternate;
}
@keyframes word-pan{ from{ background-position: 0% 55%; } to{ background-position: 100% 45%; } }
html[data-hero="8"] .hero-body{ text-align: center; }
html[data-hero="8"] .hero .display{ font-size: clamp(30px, 4vw, 52px); margin-left: auto; margin-right: auto; }
html[data-hero="8"] .hero .display br{ display: none; }
html[data-hero="8"] .hero-intro, html[data-hero="8"] .hero-short{ margin-left: auto; margin-right: auto; color: rgba(255,255,255,.8); }
html[data-hero="8"] .hero-ctas{ justify-content: center; }
@media (max-width: 700px){ html[data-hero="8"] .hero .display br{ display: inline; } }

@media (prefers-reduced-motion: reduce){
  html[data-hero="5"] .hero-media, html[data-hero="8"] .hero-word{ animation: none; }
}
/* option 8: the word leads, the words follow */
html[data-hero="8"] .hero-word{ order: -1; }
@media (max-width: 700px){ html[data-hero="8"] .hero-word{ font-size: 31vw; margin-bottom: var(--s6); } }
/* small laptops: slimmer text column so the picture keeps its size */
@media (min-width: 941px) and (max-width: 1239px){
  html[data-hero="7"] .hero-body > *{ max-width: 350px; }
  html[data-hero="7"] .hero .display{ font-size: clamp(40px, 4.6vw, 56px); }
  html[data-hero="7"] .hero-collage{ width: calc(100vw - 440px - var(--gutter)); }
}