/* ============================================================
   SKYWALK — Design Tokens
   Aesthetic: Quiet Luxury
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Color */
  --c-black:        #0B0C0E;
  --c-charcoal:      #16181C;
  --c-charcoal-2:    #1D2024;
  --c-hair:          rgba(237,237,237,0.09);
  --c-hair-strong:   rgba(237,237,237,0.18);
  /* Shared photographic treatment. A light contrast lift with colour left
     close to natural — the previous per-element values desaturated and
     dimmed everything, which made dusty site photography look muddy. */
  --img-fx: contrast(1.07) saturate(1.02) brightness(.99);
  --img-fx-hover: contrast(1.1) saturate(1.08) brightness(1.03);
  --c-text:          #EDEDED;
  --c-text-muted:    #9A9DA3;
  --c-blue:          #3cadf1;      /* Picton Blue — official brand */
  --c-blue-dim:      rgba(60,173,241,0.14);
  --c-gold:          #C9A24B;      /* subtle accent, used sparingly */
  --c-gold-dim:      rgba(201,162,75,0.14);

  /* Type */
  --f-display: 'Poppins', sans-serif;
  --f-body:    'Poppins', sans-serif;
  --f-mono:    'Poppins', sans-serif;

  /* Layout */
  --nav-h: 84px;
  --wrap: 1360px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--c-black); }
/* Any element used as an in-page anchor target (#portal, #vip, #masterplan, etc.)
   reserves clearance so the fixed header never covers it when jumped to,
   whether via in-page nav or a deep link from another page. */
[id]{ scroll-margin-top:calc(var(--nav-h) + 24px); }
body{
  margin:0;
  background:var(--c-black);
  color:var(--c-text);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--c-blue); color:var(--c-black); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,64px); }
section{ position:relative; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-blue); display:flex; align-items:center; gap:12px; margin-bottom:20px; font-weight:500;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--c-blue); }
.eyebrow.gold{ color:var(--c-gold); }
.eyebrow.gold::before{ background:var(--c-gold); }

h1,h2,h3,h4{ font-family:var(--f-display); margin:0; letter-spacing:-.01em; }
.h-hero{ font-weight:700; font-size:clamp(38px,6vw,84px); line-height:1.02; letter-spacing:-.02em; }
.h-section{ font-weight:600; font-size:clamp(30px,4.2vw,54px); line-height:1.06; }
.h-sub{ font-weight:500; font-size:clamp(18px,2vw,24px); }
.lede{ font-size:clamp(15px,1.4vw,18px); color:var(--c-text-muted); max-width:640px; font-weight:300; }
.p{ font-size:15px; color:var(--c-text-muted); font-weight:300; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  padding:16px 32px; border:1px solid var(--c-hair-strong); background:none; color:var(--c-text);
  display:inline-flex; align-items:center; gap:10px; transition:all .3s var(--ease);
}
.btn-primary{ background:var(--c-blue); border-color:var(--c-blue); color:var(--c-black); }
.btn-primary:hover{ background:transparent; color:var(--c-blue); }
.btn-ghost:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.btn:disabled{ opacity:.35; pointer-events:none; }
.btn-lg{ padding:22px 44px; font-size:13px; letter-spacing:.14em; }

/* ============================================================
   1. HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500; height:var(--nav-h);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
  padding:0 clamp(20px,4vw,56px);
  background:rgba(11,12,14,.5); backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.solid{
  background:rgba(11,12,14,.86); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--c-hair); box-shadow:0 12px 40px rgba(0,0,0,.25);
}

/* Mobile menu toggle */
.mm-lang-toggle {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  margin-bottom: 8px;
}

.logo-mark{ display:flex; align-items:center; }
.logo-type{ display:flex; flex-direction:column; line-height:1.15; }
.logo-type .l1{ font-family:var(--f-display); font-weight:300; font-size:16px; letter-spacing:.24em; text-transform:uppercase; color:var(--c-text); }
.logo-type .l2{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-blue); margin-top:3px; font-weight:400; }

.nav-links{ display:flex; gap:22px; justify-content:center; }
.nav-links a{
  font-family:var(--f-mono); font-size: 13px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-muted);
  position:relative; padding:8px 0; transition:color .25s ease; display:flex; align-items:center; gap:5px;
}
.nav-links a::after{ content:''; position:absolute; left:0; bottom:2px; height:1px; width:0; background:var(--c-blue); transition:width .3s var(--ease); }
.nav-links a:hover{ color:var(--c-text); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--c-blue); }
.nav-links a.active::after{ width:100%; background:var(--c-blue); }
.nav-links .caret{ font-size:9px; opacity:.6; transition:transform .25s ease; }

.has-dropdown{ position:relative; }
.has-dropdown .dropdown, .menu-item-has-children .sub-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--c-black); border:1px solid var(--c-hair-strong); min-width:180px; padding:6px 0;
  opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease; box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.has-dropdown:hover .dropdown, .menu-item-has-children:hover .sub-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.has-dropdown:hover .caret{ transform:rotate(180deg); }
.dropdown li, .sub-menu li{ list-style:none; }
.dropdown a, .sub-menu a{ display:block; padding:11px 20px; font-size:10.5px; white-space:nowrap; }
.dropdown a::after, .sub-menu a::after{ display:none; }
.dropdown a:hover, .sub-menu a:hover{ background:rgba(60,173,241,.08); color:var(--c-blue); }

.nav-right{ display:flex; align-items:center; gap:18px; justify-self:end; }
.nav-secondary{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-muted);
  padding:8px 0; transition:color .25s ease;
}
.nav-secondary:hover{ color:var(--c-text); }
.nav-cta{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  padding:11px 20px; border:1px solid var(--c-blue); color:var(--c-blue); transition:all .25s ease;
}
.nav-cta:hover{ background:var(--c-blue); color:var(--c-black); }
.nav-burger{ display:none; }

@media (max-width:1080px){
  .nav-links{ display:none; }
  .nav-secondary{ display:none; }
  .site-header{ grid-template-columns:auto 1fr auto; }
  .nav-burger{ display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; justify-self:end; }
  .nav-burger span{ width:22px; height:1px; background:var(--c-text); }
}

/* On a phone the header column left for the CTA is only ~85px wide, so
   "Find Your Space" was breaking across two lines (three on portal-hub) and
   turning into a tall bordered block that swallowed a third of the header.
   Everything here buys that button enough width to sit on one line: a shorter
   bar, a smaller wordmark, tighter gaps, and no wrapping. */
@media (max-width:760px){
  :root{ --nav-h:66px; }
  .site-header{ gap:10px; padding:0 16px; }
  .logo-type .l1{ font-size:13px; letter-spacing:.17em; }
  .logo-type .l2{ font-size:7px; letter-spacing:.12em; margin-top:2px; }
  .nav-right{ gap:4px; }
  .nav-cta{
    font-size:8.5px; letter-spacing:.06em; padding:9px 11px;
    white-space:nowrap; line-height:1; position:relative;
  }
  /* The button is deliberately small so it fits the bar — this invisible
     margin brings the touchable area up to the ~44px thumbs actually need. */
  .nav-cta::after{ content:''; position:absolute; inset:-8px -6px; }
  .nav-burger{ padding:10px 4px; }
}
/* Very narrow phones — drop the CTA's letter-spacing rather than let it wrap. */
@media (max-width:360px){
  .nav-cta{ font-size:8px; letter-spacing:.03em; padding:9px 8px; }
  .logo-type .l1{ font-size:12px; letter-spacing:.14em; }
}

.mobile-menu{
  position:fixed; inset:0; z-index:600; background:var(--c-black);
  display:flex; flex-direction:column; justify-content:center; gap:14px; padding:40px; overflow-y:auto;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--f-display); font-weight:600; font-size:21px; }
.mm-group-label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-muted);
  margin-top:6px; padding-bottom:4px; border-bottom:1px solid var(--c-hair);
}
.mm-group-label:first-of-type{ margin-top:0; }
.mobile-menu .mm-close{
  position:absolute; top:18px; right:12px; background:none; border:none; color:var(--c-text); font-size:30px;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center; line-height:1;
}
/* Every menu row gets a real touch height, and the conversion action is
   styled as a button rather than sitting in the list looking like one more
   navigation link. */
.mobile-menu a{ padding:6px 0; }
.mobile-menu .mm-cta{
  margin-top:10px; padding:15px 22px; border:1px solid var(--c-blue); color:var(--c-blue);
  text-align:center; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  font-family:var(--f-mono); font-weight:500;
}
.mobile-menu .mm-cta:active{ background:var(--c-blue); color:var(--c-black); }

/* ============================================================
/* ============================================================
   2. HERO
   ============================================================ */
.hero{
  min-height:max(100vh,680px); min-height:max(100dvh,680px); position:relative; display:flex; align-items:stretch;
  overflow:hidden; background:
    radial-gradient(ellipse 900px 600px at 78% 18%, rgba(60,173,241,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 85%, rgba(201,162,75,.06), transparent 60%),
    var(--c-black);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-slide{ opacity:0; transition:opacity 1.4s ease; }
.hero-slide.show{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
}
.hero-media::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,12,14,.45) 0%, rgba(11,12,14,.35) 35%, var(--c-black) 96%),
    radial-gradient(ellipse 900px 600px at 50% 45%, rgba(11,12,14,0) 0%, rgba(11,12,14,.35) 100%);
}
.hero-svg-bg{ position:absolute; inset:0; z-index:0; opacity:.9; }
.hero-svg-bg svg{ width:100%; height:100%; }
.hero-svg-bg .skyline-line{ fill:none; stroke:rgba(237,237,237,.09); stroke-width:1; }
.hero-svg-bg .skyline-fill{ fill:rgba(60,173,241,.04); }
.hero-svg-bg .accent-line{ fill:none; stroke:var(--c-blue); stroke-width:1; opacity:.5; stroke-dasharray:4 6; }
.hero-svg-bg .gold-dot{ fill:var(--c-gold); }
.hero-inner{
  position:relative; z-index:1; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding-top:calc(var(--nav-h) + 40px); padding-bottom:clamp(64px,9vw,120px);
}
.hero-eyebrow{ font-family:var(--f-mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--c-blue); margin-bottom:26px; }
.hero-inner .hero-sub{ margin-top:26px; max-width:560px; font-size:clamp(15px,1.3vw,17px); color:#c7c9cd; font-weight:300; }
.hero-inner .hero-sub b{ color:var(--c-text); font-weight:500; }
.hero-cta-row{ display:flex; gap:16px; margin-top:42px; flex-wrap:wrap; justify-content:center; }
.hero-scroll{
  position:absolute; right:clamp(20px,4vw,56px); bottom:40px; z-index:1;
  display:flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-text-muted);
}
.hero-scroll .line{ width:1px; height:46px; background:linear-gradient(var(--c-text-muted), transparent); }

/* ============================================================
   3. STATS
   ============================================================ */
/* ============================================================
   PAGE BACKDROP
   A single fixed video behind the homepage, revealed a little at
   a time. Opacity is driven from JS per section; everything here
   is the frame it sits in.

   The scrim is doing most of the work. Moving imagery behind body
   copy is much harder to read than a still image, so the video is
   held under a heavy vertical gradient and never rises above 13%
   — quiet enough that it reads as depth rather than as a video
   someone left playing.
   ============================================================ */
.page-backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.1s cubic-bezier(.22,1,.36,1);
  will-change:opacity;
}
/* Two stacked layers so one clip can fade up while the other fades out.
   Whichever is .is-next sits at zero. */
.page-backdrop video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.55) contrast(.92);
  transform:scale(1.06);
  opacity:1; transition:opacity 1.2s ease;
}
.page-backdrop video.is-next{ opacity:0; }
/* Same gradient the stats backdrop uses, so the two read as one idea
   rather than two different treatments. */
.page-backdrop::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--c-black) 0%, rgba(11,12,14,.74) 34%, rgba(11,12,14,.74) 66%, var(--c-black) 100%);
}
/* Content sits above it. Sections keep transparent backgrounds, which is what
   lets the layer show through at all — visibility is controlled purely by the
   layer's own opacity, so a section at 0 is indistinguishable from solid black. */
.page-backdrop ~ section,
.page-backdrop ~ .hero{ position:relative; z-index:1; }

@media (prefers-reduced-motion:reduce){
  .page-backdrop{ display:none; }
}

/* THE TINT WAS STILL SWALLOWING IT.
   .partners and .progress-teaser set an opaque charcoal background, so the
   fixed backdrop sat behind a solid wall. Dropping that to 88% opacity did
   not fix it, because the two opacities multiply: a layer at 10% seen through
   a 12% opening is about 1% — technically present, invisible in practice.
   That is why Progress & Announcements still looked grey and dead.

   Those backgrounds are now removed entirely while the backdrop is running.
   The tint existed to separate these sections from their neighbours; with a
   moving image behind them they are distinct without it, and the backdrop's
   own scrim keeps the section dark enough for the copy.

   .stats loses its masterplan still for the same reason — two backgrounds
   stacked at low opacity turn into grey mud rather than either one reading
   clearly. The video replaces it while the backdrop is on; with the backdrop
   off, the still and the charcoal both come back untouched. */
.has-backdrop .partners,
.has-backdrop .progress-teaser{ background:transparent; }
.has-backdrop .stats-bg{ display:none; }

.stats{ padding:110px 0; border-bottom:1px solid var(--c-hair); position:relative; overflow:hidden; }
.stats-bg{ position:absolute; inset:0; z-index:0; }
.stats-bg img{
  width:100%; height:100%; object-fit:cover; opacity:.16; filter:saturate(.7);
  animation:statsBgDrift 26s ease-in-out infinite alternate;
}
@keyframes statsBgDrift{
  from{ transform:scale(1) translate(0,0); }
  to{ transform:scale(1.12) translate(-1.5%,-1.5%); }
}
.stats-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--c-black) 0%, rgba(11,12,14,.75) 40%, var(--c-black) 100%);
}
.stats .wrap{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  .stats-bg img{ animation:none; }
}
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); margin-top:56px; }
.stat-cell{
  background:radial-gradient(circle at 20% 0%, rgba(60,173,241,.05), transparent 60%), rgba(11,12,14,.75);
  padding:34px 22px; text-align:left; backdrop-filter:blur(2px);
}
.stat-num{ font-family:var(--f-display); font-weight:700; font-size:clamp(26px,2.6vw,38px); color:var(--c-text); }
.stat-num sup{ font-size:.4em; color:var(--c-blue); margin-left:2px; }
.stat-label{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-muted); margin-top:10px; }
@media (max-width:900px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   4. LOCATION / MAP
   ============================================================ */
.location{ padding:140px 0; border-bottom:1px solid var(--c-hair); background:var(--c-charcoal); }
.loc-grid{ display:grid; grid-template-columns:1fr; margin-top:48px; }
.loc-copy{ max-width:640px; }
.loc-copy .lede{ margin-bottom:26px; }
.loc-address{
  font-family:var(--f-mono); font-size:12.5px; color:var(--c-text-muted); line-height:1.9;
  border-left:1px solid var(--c-blue); padding-left:18px; margin-top:30px;
}
.map-stage{ position:relative; aspect-ratio:1/1; background:var(--c-black); border:1px solid var(--c-hair-strong); overflow:hidden; margin-top:44px; }
.map-stage svg{ width:100%; height:100%; display:block; }
.map-stage-photo{ aspect-ratio:16/9; }
.map-stage-photo img{ filter:brightness(.88) saturate(.82); width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.04); }
/* The pin/label already printed on the map image is the visible marker —
   .map-node is an invisible hotspot placed exactly over it. Hovering/focusing
   reveals a soft ring + tooltip so it reads as clickable without adding a
   second, misaligned marker on top of the artwork. */
.map-node{
  cursor:pointer; position:absolute; width:2.3%; aspect-ratio:1/1; margin-left:-1.15%; margin-top:-1.15%;
  border-radius:50%; display:block;
}
.map-node::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:transparent; box-shadow:0 0 0 0 rgba(60,173,241,0);
  transition:background .2s ease, box-shadow .2s ease;
}
.map-node:hover::after, .map-node:focus-visible::after{
  background:rgba(60,173,241,.16); box-shadow:0 0 0 5px rgba(60,173,241,.14);
}
/* Sonar ring — traces the pin's own circular outline in brand blue
   (rather than a small dot sitting on top of the icon), so it reads
   as "this pin is interactive" without covering the icon inside it.
   Reuses the exact blue already used for the SKYWALK marker and
   route line, so it feels native to the map rather than bolted on. */
.pulse-dot{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:2px solid var(--c-blue); box-shadow:0 0 0 2px rgba(11,12,14,.35), 0 0 10px 1px rgba(60,173,241,.5);
}
.pulse-dot::after{
  content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--c-blue);
  animation:sonarPulse 2.2s ease-out infinite;
}
@keyframes sonarPulse{
  0%{ transform:scale(1); opacity:.9; }
  100%{ transform:scale(1.9); opacity:0; }
}
/* Instructional badge — pinned above the most prominent node (Sphinx
   Airport) with a gentle bounce so it reads as a hint, not a label. */
.tap-hint{
  position:absolute; z-index:6; transform:translate(-15%,-115%); pointer-events:none;
  background:var(--c-black); color:var(--c-text); font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:7px 12px; border:1px solid var(--c-hair-strong);
  white-space:nowrap; animation:tapHintBounce 2.2s ease-in-out infinite;
}
.tap-hint::after{
  content:''; position:absolute; top:100%; left:15%; margin-left:-4px;
  border:4px solid transparent; border-top-color:var(--c-black);
}
@keyframes tapHintBounce{
  0%, 100%{ transform:translate(-15%,-115%); }
  50%{ transform:translate(-15%, calc(-115% - 7px)); }
}
@media (prefers-reduced-motion: reduce){
  .pulse-dot::after{ animation:none; opacity:0; }
  .tap-hint{ animation:none; }
}
.map-tooltip{
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,calc(-100% - 14px));
  background:var(--c-black); border:1px solid var(--c-hair-strong); padding:10px 16px; white-space:nowrap;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.03em; color:var(--c-text); z-index:5;
  transition:opacity .2s ease;
}
.map-tooltip.show{ opacity:1; }
.map-tooltip b{ color:var(--c-blue); display:block; font-size:11.5px; margin-bottom:2px; }

.map-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:28px; }
.map-hint{ font-family:var(--f-mono); font-size:11.5px; color:var(--c-text-muted); }

/* Plain wrapper on desktop — becomes a horizontal scroller on phones so the
   map can stay at a legible scale instead of being crushed to screen width. */
.map-scroll{ position:relative; }
.map-swipe-hint{ display:none; }

/* ------------------------------------------------------------
   PROXIMITY LIST — every destination pinned on the map, as rows
   that go straight to live Google Maps directions. Phones only:
   on desktop, hovering a pin already shows the same thing. Built
   from the map hotspots themselves in js/script.js.
   ------------------------------------------------------------ */
/* DRIVE TIMES — shown at every width.
   This list was display:none above 900px, so on desktop the drive times were
   reachable only by hovering twelve pins one at a time. That is the single
   most-wanted fact on the page, and it was the one thing you could not simply
   read. It is a grid on desktop and a stack on a phone. */
.loc-proximity{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:26px;
  /* Hairlines are drawn per cell rather than by the container's background.
     Thirteen destinations across three columns leaves two empty cells in the
     last row, and a container background paints those as solid grey blocks
     that read as a rendering fault. */
  background:transparent;
}
.loc-proximity a{ outline:1px solid var(--c-hair); }
@media (max-width:1100px){ .loc-proximity{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .loc-proximity{ grid-template-columns:1fr; } }
.loc-proximity a{
  background:var(--c-black); display:flex; align-items:center; gap:14px; padding:15px 18px;
  text-decoration:none; transition:background .2s ease;
}
.loc-proximity a:hover{ background:var(--c-charcoal); }
.loc-proximity a:hover .lp-go{ color:var(--c-blue); }
.loc-proximity a:active{ background:var(--c-charcoal); }
.loc-proximity .lp-name{ flex:1; min-width:0; font-family:var(--f-display); font-weight:500; font-size:14px; color:var(--c-text); }
.loc-proximity .lp-eta{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--c-blue); white-space:nowrap; }
.loc-proximity .lp-go{ color:var(--c-text-muted); font-size:15px; }

@keyframes pulse{
  0%{ opacity:.55; transform:scale(1); }
  100%{ opacity:0; transform:scale(3.6); }
}

/* ============================================================
   3b. ABOUT SKYWALK DEVELOPMENTS
   ============================================================ */
.about-dev{ padding:140px 0; border-bottom:1px solid var(--c-hair); background:var(--c-black); }
.about-dev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); margin-top:52px; }
.about-photo-band{ margin-top:52px; aspect-ratio:21/9; overflow:hidden; border:1px solid var(--c-hair-strong); }
.about-photo-band img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.about-photo-band:hover img{ transform:scale(1.05); }

.about-hero-shot{ margin-top:52px; position:relative; aspect-ratio:16/8; overflow:hidden; border:1px solid var(--c-hair-strong); }
.about-hero-shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.about-hero-shot:hover img{ transform:scale(1.04); }
.about-hero-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(11,12,14,.75) 0%, rgba(11,12,14,0) 35%);
}
.ahs-caption{
  position:absolute; left:28px; bottom:22px; z-index:1; font-family:var(--f-display); font-weight:600;
  font-size:clamp(16px,2vw,24px); color:var(--c-text); letter-spacing:.01em;
}

/* Interactive gallery — click a thumbnail, the big image crossfades to it */
.about-gallery{ margin-top:1px; }
.ag-main{ aspect-ratio:16/8; overflow:hidden; border:1px solid var(--c-hair-strong); position:relative; }
.ag-main img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .3s ease; }
.ag-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--c-hair); border:1px solid var(--c-hair-strong); border-top:none; }
.ag-thumb{
  aspect-ratio:16/9; background-size:cover; background-position:center; border:none; cursor:pointer;
  position:relative; filter:grayscale(.7) brightness(.6); transition:filter .3s ease;
}
.ag-thumb::after{ content:''; position:absolute; inset:0; border:2px solid var(--c-blue); opacity:0; transition:opacity .3s ease; }
.ag-thumb:hover{ filter:grayscale(.3) brightness(.8); }
.ag-thumb.active{ filter:none; }
.ag-thumb.active::after{ opacity:1; }
.about-dev-block{ background:var(--c-charcoal); padding:34px 36px; }
.adb-label{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-blue); margin-bottom:14px; }
.about-dev-block p{ font-size:15px; color:var(--c-text-muted); font-weight:300; line-height:1.7; margin:0; }

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); margin-top:1px; }
.value-card{
  background:var(--c-black); padding:30px 26px; border:1px solid transparent; border-top:2px solid transparent;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.value-card:hover{ border-top-color:var(--c-blue); background:var(--c-charcoal); transform:translateY(-4px); }
.value-card .v-num{
  font-family:var(--f-mono); font-size:11px; color:var(--c-gold); letter-spacing:.06em;
  display:inline-block; transition:transform .3s var(--ease), color .3s ease;
}
.value-card:hover .v-num{ transform:scale(1.3); color:var(--c-blue); }
.value-card h3{ font-family:var(--f-display); font-weight:600; font-size:15px; margin:14px 0 10px; line-height:1.3; }
.value-card p{ font-size:12.5px; color:var(--c-text-muted); font-weight:300; line-height:1.6; margin:0; }

@media (max-width:900px){
  .about-dev-grid{ grid-template-columns:1fr; }
  .ag-thumbs{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   4b. REGIONAL VISION — Egypt \u2192 KSA \u2192 Morocco
   ============================================================ */
.regional{ padding:140px 0; border-bottom:1px solid var(--c-hair); background:var(--c-black); position:relative; overflow:hidden; }
.regional-grid{ display:grid; grid-template-columns:.62fr 1.38fr; gap:60px; align-items:center; margin-top:48px; }
.regional-map-stage{
  position:relative; aspect-ratio:1100/616; background:var(--c-charcoal); border:1px solid var(--c-hair-strong);
  box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden;
}
.regional-map-stage img{ width:100%; height:100%; object-fit:cover; display:block; }

.region-pin{ position:absolute; display:block; width:0; height:0; text-decoration:none; cursor:pointer; }
.region-pin.hotspot-only{
  width:36px; height:36px; margin-left:-18px; margin-top:-18px; border-radius:50%; border:none; background:none; padding:0;
  transition:background .2s ease, box-shadow .2s ease;
}
.region-pin.hotspot-only:hover, .region-pin.hotspot-only.active{ background:rgba(60,173,241,.16); box-shadow:0 0 0 5px rgba(60,173,241,.14); }

.region-pin-card{
  position:absolute; z-index:2; width:240px; background:var(--c-charcoal); border:1px solid var(--c-hair-strong);
  box-shadow:0 20px 50px rgba(0,0,0,.4); padding:20px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.region-pin-card.show{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .2s ease, transform .2s ease; }
.rpc-close{ position:absolute; top:8px; right:8px; background:none; border:none; color:var(--c-text-muted); font-size:16px; cursor:pointer; line-height:1; padding:4px; }
.rpc-close:hover{ color:var(--c-text); }
.rpc-status{ font-family:var(--f-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-blue); margin-bottom:6px; }
.rpc-name{ font-family:var(--f-display); font-weight:600; font-size:16px; color:var(--c-text); margin-bottom:8px; }
.rpc-blurb{ font-family:var(--f-body); font-weight:300; font-size:12.5px; line-height:1.5; color:var(--c-text-muted); margin-bottom:16px; }
#regionalPinCard .btn{ display:block; text-align:center; padding:10px 14px; font-size:11px; }
.region-pin .dot{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:var(--c-blue); box-shadow:0 0 0 2px rgba(11,12,14,.7); transition:transform .2s ease; }
.region-pin.pipeline .dot{ background:none; border:1.6px solid #9A9DA3; width:8px; height:8px; }
.region-pin:hover .dot{ transform:translate(-50%,-50%) scale(1.35); }
.region-pin.pipeline:hover .dot{ border-color:var(--c-blue); }
.region-pin .halo{
  position:absolute; left:0; top:0; width:9px; height:9px; transform:translate(-50%,-50%); border-radius:50%;
  background:var(--c-blue); animation:pulse 2.8s ease-out infinite;
}
.region-label{
  position:absolute; left:0; bottom:14px; transform:translateX(-50%); white-space:nowrap;
  background:rgba(11,12,14,.78); border:1px solid var(--c-hair-strong); padding:7px 12px; text-align:center;
  display:flex; flex-direction:column; gap:2px; backdrop-filter:blur(3px); transition:border-color .2s ease, background .2s ease;
}
.region-pin:hover .region-label{ border-color:var(--c-blue); background:rgba(11,12,14,.92); }
.region-label b{ font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--c-text); }
.region-label span{ font-family:var(--f-mono); font-size:10px; color:var(--c-text-muted); letter-spacing:.02em; }
.region-pin:hover .region-label span{ color:var(--c-blue); }
.region-pin.align-right .region-label{ transform:translateX(-15%); }

/* --- Regional map: city names as HTML, not pixels --------------------
   These replace the labels that were painted into regional-map.jpg, which
   could not be translated and went soft whenever the render was scaled.
   Anchored top-left at the coordinates the printed labels occupied, so each
   name still sits beside its own glow dot. Sized against the stage width so
   they keep their proportion to the map at any breakpoint. */
.regional-map-stage{ container-type:inline-size; }
.rm-label{
  position:absolute; z-index:1; display:flex; flex-direction:column; gap:2px;
  white-space:nowrap; pointer-events:none; text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.rm-label b{
  font-family:var(--f-display); font-weight:700; font-size:clamp(11px,2.1cqw,23px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--c-text); line-height:1;
}
.rm-label span{
  font-family:var(--f-display); font-weight:300; font-size:clamp(8px,1.4cqw,15px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-muted); line-height:1;
}
/* Arabic does not take uppercase or wide tracking — both are Latin
   typographic devices and Cairo renders them as broken-looking spacing. */
[dir="rtl"] .rm-label b,
[dir="rtl"] .rm-label span{ text-transform:none; letter-spacing:normal; }
[dir="rtl"] .rm-label{ align-items:flex-start; }

.region-legend{ margin-top:52px; display:flex; flex-direction:column; gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); }
.region-row{ background:var(--c-black); padding:24px 26px; display:flex; align-items:center; gap:20px; transition:background .2s ease; }
.region-row:hover{ background:var(--c-charcoal); }
.region-index{ font-family:var(--f-display); font-weight:700; font-size:22px; color:var(--c-hair-strong); width:34px; flex:0 0 auto; }
.region-row.is-live .region-index{ color:var(--c-blue); }
/* min-width:0 is the fix for the whole family of "a flex item pushed its
   neighbour out of the box" bugs: a flex item will not shrink below its
   content unless told to. Without it "Casablanca, Morocco" forced this row
   wider than its column and shoved the status tag past the edge — by 35px in
   English and 59px in Arabic at tablet width, where the longer Arabic strings
   make it worse. The tag is also allowed to wrap onto its own line if a row
   ever gets genuinely too narrow for both. */
.region-body{ flex:1; min-width:0; }
.region-row{ flex-wrap:wrap; row-gap:12px; }
.region-tag{ white-space:nowrap; }
.region-body .r-name{ font-family:var(--f-display); font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:.02em; }
.region-body .r-city{ font-family:var(--f-mono); font-size:11.5px; color:var(--c-text-muted); margin-top:4px; }
.region-tag{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; flex:0 0 auto; border:1px solid var(--c-hair-strong); color:var(--c-text-muted); }
.region-row.is-live .region-tag{ border-color:var(--c-blue); color:var(--c-blue); }
/* Stacks at 1080 rather than 900. Between those widths the map and the list
   shared the row, which left each region row about 280px wide — enough to
   wrap "SKYWALK Saudi Arabia" onto three lines in Arabic and squeeze the
   status tag onto its own. Full width from here down. */
@media (max-width:1080px){ .regional-grid{ grid-template-columns:1fr; } }

/* ============================================================
   5. MASTERPLAN EXPLORER
   ============================================================ */
.masterplan{ padding:140px 0 100px; border-bottom:1px solid var(--c-hair); }
.mp-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:52px; }
.mp-stage{
  position:relative; border:1px solid var(--c-hair-strong); aspect-ratio:2200/1912; overflow:hidden;
  background:var(--c-charcoal);
}
.mp-view{ position:absolute; inset:0; width:100%; height:100%; }
.mp-view.micro{ opacity:0; visibility:hidden; }

.mp-macro-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mp-phases-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.phase-block{
  fill:rgba(11,12,14,.32); stroke:rgba(237,237,237,.5); stroke-width:.35; vector-effect:non-scaling-stroke;
  cursor:pointer; transition:fill .3s ease, stroke .3s ease;
}
.phase-block:hover{ fill:rgba(60,173,241,.22); stroke:var(--c-blue); }
.phase-block.active{ fill:rgba(60,173,241,.28); stroke:var(--c-blue); }
.phase-block.locked:hover{ fill:rgba(60,173,241,.22); stroke:var(--c-blue); }

.mp-phase-labels{ position:absolute; inset:0; pointer-events:none; }
.phase-label{
  position:absolute; transform:translate(-50%,-50%); text-align:center; pointer-events:none;
  background:rgba(11,12,14,.7); border:1px solid var(--c-hair-strong); padding:8px 14px; backdrop-filter:blur(3px);
  display:flex; flex-direction:column; gap:3px; white-space:nowrap;
}
.phase-label .p-num{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.09em; color:var(--c-blue); text-transform:uppercase; }
.phase-label .p-name{ font-family:var(--f-display); font-weight:600; font-size:13.5px; }
.phase-label .p-tag{ font-family:var(--f-mono); font-size:9px; color:var(--c-text-muted); letter-spacing:.04em; }
.phase-label.locked .p-num{ color:var(--c-text-muted); }

.phase-tooltip{
  position:absolute; z-index:6; pointer-events:none; opacity:0; transform:translateY(6px);
  background:var(--c-black); border:1px solid var(--c-hair-strong); padding:16px 20px; width:230px;
  font-size:12.5px; color:var(--c-text-muted); transition:opacity .25s ease, transform .25s ease;
}
.phase-tooltip.show{ opacity:1; transform:translateY(0); }
.phase-tooltip b{ display:block; font-family:var(--f-display); font-weight:600; color:var(--c-text); font-size:14px; margin-bottom:6px; }
.phase-tooltip .gold-note{ color:var(--c-gold); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.03em; display:block; margin-top:8px; }

.mp-back{
  position:absolute; top:20px; left:20px; z-index:7; opacity:0; visibility:hidden;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(11,12,14,.85); border:1px solid var(--c-hair-strong); padding:10px 18px; color:var(--c-text);
  transition:all .3s ease; display:flex; align-items:center; gap:8px;
}
.mp-back:hover{ border-color:var(--c-blue); color:var(--c-blue); }

.mp-micro-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.building-grid{ position:absolute; inset:0; }
.b-unit{
  position:absolute; width:34px; height:34px; margin-left:-17px; margin-top:-17px; border-radius:50%;
  background:rgba(60,173,241,.16); border:1.5px solid var(--c-blue); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .25s ease, transform .2s ease;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.03em; color:var(--c-text);
  animation:bUnitPulse 2.4s ease-in-out infinite;
}
.b-unit:hover{ background:var(--c-blue); color:var(--c-black); transform:scale(1.15); animation:none; }
@keyframes bUnitPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(60,173,241,.35); } 50%{ box-shadow:0 0 0 6px rgba(60,173,241,0); } }
.b-unit .b-hint{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase;
  background:var(--c-blue); color:var(--c-black); padding:6px 10px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.b-unit:hover .b-hint{ opacity:1; }

.mp-legend{ display:flex; gap:28px; margin-top:26px; flex-wrap:wrap; }
.mp-legend span{ font-family:var(--f-mono); font-size:11px; color:var(--c-text-muted); display:flex; align-items:center; gap:8px; }
.mp-legend i{ width:10px; height:10px; display:inline-block; border:1px solid var(--c-hair-strong); }

/* ------------------------------------------------------------
   PHASE LIST — the touch counterpart to the labels drawn on the
   render. Hidden on desktop, where hovering a phase already
   shows everything in the tooltip. On a phone the render only
   carries a numbered marker per phase, and this list is where
   the names, statuses and figures actually live. Each row opens
   the same detail card a click on the phase outline opens.
   ------------------------------------------------------------ */
.mp-phase-list{ display:none; margin-top:1px; background:var(--c-hair); border:1px solid var(--c-hair-strong); }
.mp-phase-row{
  width:100%; text-align:left; background:var(--c-black); border:0; cursor:pointer;
  display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:1px;
  transition:background .2s ease;
}
.mp-phase-row:last-child{ margin-bottom:0; }
.mp-phase-row:active{ background:var(--c-charcoal); }
.mp-phase-row .r-num{
  flex:0 0 auto; width:28px; height:28px; border:1px solid var(--c-hair-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:12px; color:var(--c-text-muted);
}
.mp-phase-row.is-open .r-num{ border-color:var(--c-blue); color:var(--c-blue); }
.mp-phase-row .r-body{ flex:1; min-width:0; }
.mp-phase-row .r-name{ display:block; font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--c-text); }
.mp-phase-row .r-tag{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-text-muted); margin-top:4px; }
.mp-phase-row.is-open .r-tag{ color:var(--c-blue); }
.mp-phase-row .r-go{ flex:0 0 auto; color:var(--c-text-muted); font-size:16px; }

/* Keeps a wide label from running past the edge of the frame and being
   sliced in half by the stage's overflow:hidden. */
.phase-label{ max-width:min(240px, 44%); }

/* ============================================================
   6. TENANT ECOSYSTEM
   ============================================================ */
.ecosystem{
  position:relative; padding:140px 0; overflow:hidden; border-bottom:1px solid var(--c-hair);
  background:radial-gradient(ellipse 800px 500px at 85% 20%, rgba(201,162,75,.05), transparent 60%), var(--c-black);
}
.eco-head{ position:relative; z-index:1; }
.eco-water{ position:relative; z-index:1; margin-top:14px; font-family:var(--f-mono); font-size:12px; color:var(--c-gold); letter-spacing:.04em; }
.tenant-head{ margin-top:90px; }
.tenant-grid{
  position:relative; z-index:1; margin-top:32px; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--c-hair); border-left:1px solid var(--c-hair);
}
.tenant-cell{
  border-right:1px solid var(--c-hair); border-bottom:1px solid var(--c-hair);
  padding:22px 20px; font-family:var(--f-display); font-weight:500; font-size:15px;
  color:var(--c-text-muted); transition:color .3s ease, background .3s ease; cursor:default;
  position:relative; display:flex; align-items:center; justify-content:center; gap:12px; min-height:116px;
  overflow:hidden; /* the enlarged hover logo is clipped to stay inside THIS cell, never spilling into others */
}
/* Logos are supplied as dark artwork meant for white backgrounds, so they are
   flipped to a uniform white treatment to sit on the black grid. Hover
   BRIGHTENS that treatment rather than removing it: dropping the filter
   revealed the original near-black artwork against a near-black cell, which
   made logos look like they had vanished or smeared into their neighbours.
   The size is also held constant — growing a 600px-wide PNG on hover was
   upscaling the bitmap past its natural resolution, which is what made them
   look pixelated. */
.tenant-cell img{
  max-height:64px; max-width:85%; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1) invert(1) brightness(1.6); opacity:.72;
  transition:filter .3s ease, opacity .3s ease;
  position:relative; z-index:1;
}
.tenant-cell:hover img{ filter:grayscale(1) invert(1) brightness(2); opacity:1; }
/* Badges are logos supplied with their own solid background — inverting one
   turns it into a black or white block, so they keep their original colours. */
.tenant-cell img.is-badge{ filter:none; opacity:.9; max-height:64px; border-radius:4px; }
.tenant-cell:hover img.is-badge{ filter:none; opacity:1; }
.tenant-cell span.t-name{ line-height:1.3; }
.tenant-cell::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--c-blue);
  transform:scaleY(0); transform-origin:bottom; transition:transform .3s var(--ease);
}
.tenant-cell:hover{ color:var(--c-text); background:rgba(60,173,241,.06); }
.tenant-cell:hover::before{ transform:scaleY(1); }
@media (max-width:900px){ .tenant-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tenant-grid{ grid-template-columns:1fr; } }

.anchor-grid{ position:relative; z-index:1; margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); }
.anchor-card{ background:var(--c-black); transition:transform .3s var(--ease); }
.anchor-card:hover{ transform:translateY(-4px); }
.anchor-media{ aspect-ratio:4/3; overflow:hidden; }
.anchor-media img{ width:100%; height:100%; object-fit:cover; filter:var(--img-fx); transition:transform .5s var(--ease); }
.anchor-card:hover .anchor-media img{ transform:scale(1.05); }
.anchor-body{ padding:24px 22px; }
.anchor-body h3{ font-family:var(--f-display); font-weight:600; font-size:17px; margin:0 0 6px; }
.anchor-body p{ font-size:13px; color:var(--c-text-muted); font-weight:300; margin:0; }
.anchor-more{ position:relative; z-index:1; margin-top:24px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--c-text-muted); text-transform:uppercase; }
.tenant-more{ margin-top:24px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--c-text-muted); text-transform:uppercase; text-align:center; }

.facilities-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--c-hair); border:1px solid var(--c-hair-strong); margin-top:48px; }
.facility-item{
  background:var(--c-black); padding:26px 22px; display:flex; align-items:center; gap:16px;
  transition:background .25s ease; font-family:var(--f-display); font-weight:500; font-size:13.5px; color:var(--c-text);
}
.facility-item:hover{ background:var(--c-charcoal); }
/* Hairline SVG icons — same drawing rules as the contact route icons and the
   portal tiles (1px strokes, no fills, brand blue). Emoji were used here
   originally; they render as a different picture on every operating system,
   which is not something a brand can control. */
.fi-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:26px; height:26px; }
.fi-icon svg{
  width:22px; height:22px; display:block;
  fill:none; stroke:var(--c-blue); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
}
.facility-item:hover .fi-icon svg{ stroke:var(--c-text); }
@media (max-width:900px){ .facilities-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .facilities-grid{ grid-template-columns:1fr; } }
@media (max-width:900px){ .anchor-grid{ grid-template-columns:1fr; } }

/* ============================================================
   7. PARTNERS
   ============================================================ */
.partners{ padding:140px 0; border-bottom:1px solid var(--c-hair); background:var(--c-charcoal); }
.tab-row{ display:flex; gap:8px; margin-top:44px; flex-wrap:wrap; }
.tab-btn{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--c-hair-strong); background:none; color:var(--c-text-muted); transition:all .25s ease;
}
.tab-btn:hover{ color:var(--c-text); }
.tab-btn.active{ background:var(--c-blue); border-color:var(--c-blue); color:var(--c-black); }
.partner-panel{ display:none; margin-top:44px; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); }
.partner-panel.active{ display:grid; }
.partner-logo{
  background:var(--c-black); padding:24px 20px; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:.02em; color:var(--c-text-muted);
  min-height:132px; transition:color .25s ease, background .25s ease; overflow:hidden;
}
.partner-logo:hover{ color:var(--c-text); background:var(--c-charcoal-2); }
/* The logo files are now normalised to white artwork on transparency at build
   time (see normalise_logos.py), so no invert is needed here — and must not
   be applied, since inverting an already-white logo turns it black and it
   disappears against the panel. Presence is controlled by opacity alone.
   Size is held steady on hover so the bitmap is never scaled past its
   natural resolution, which is what made them look pixelated before. */
.partner-logo img{
  max-width:80%; max-height:56px; width:auto; height:auto; object-fit:contain;
  opacity:.62; transition:opacity .3s ease;
}
.partner-logo:hover img{ opacity:1; }

/* --- Logos supplied below the size the grid wants ---------------------
   Three files arrived as small web thumbnails and no higher-resolution
   originals exist: AIMEX (112x66 after trimming), KH Marmo (66x104) and
   Leads (200x200).

   To be precise about the fault: nothing was being enlarged past its native
   size. The problem is PIXEL DENSITY on a retina screen. At the standard
   56px cap, AIMEX rendered 95 CSS pixels wide from 112 real ones — about
   1.2x. A 2x display wants 2.0x, so it drew each source pixel across nearly
   two device pixels and the logo looked soft.

   Capping those two at roughly half their own pixel height puts them at
   exactly 2.0x, which is sharp. The cost is that they sit smaller than
   their neighbours in the row. That is the honest trade: a small sharp logo
   reads better than a large soft one. Raise these the day vector artwork
   arrives, or delete the rule entirely.

   Still below 2x and left alone deliberately, because the size penalty
   would be worse than the softness: Korra (1.43x) and Elecon (1.16x). Both
   are simple marks that survive it. Vector files would fix them too.

   The alpha channel of all five was also unsharp-masked. These are white
   silhouettes — all the detail is in alpha, so sharpening the RGB of a flat
   white image would have done nothing. */
.partner-logo img[src$="aimex.png"]{ max-height:33px; }
.partner-logo img[src$="kh-marmo.png"]{ max-height:52px; }
/* Leads is 200x200, so density is not its problem — its wordmark is simply
   tiny within the artwork. Given a little more height it at least becomes
   readable. */
.partner-logo img[src$="leads.png"]{ max-height:66px; }
@media (max-width:900px){ .partner-panel.active{ grid-template-columns:repeat(2,1fr); } }

/* --- Hospitality panel: a single partner, given the room it deserves ---
   The grid rules above assume a row of peers. This panel has one partner, so
   it opts out of the grid entirely rather than leaving three empty cells. */
.partner-panel.is-feature{ grid-template-columns:1fr; background:none; border:0; }
.partner-panel.is-feature.active{ display:block; }
.signia-feature{
  margin:0; display:grid; grid-template-columns:.85fr 1.15fr; align-items:stretch; gap:1px;
  background:var(--c-hair); border:1px solid var(--c-hair-strong);
}
.signia-mark{
  background:var(--c-black); display:flex; align-items:center; justify-content:center;
  padding:56px 44px; position:relative; overflow:hidden;
}
.signia-mark::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 420px 300px at 50% 45%, rgba(201,162,75,.10), transparent 65%);
}
.signia-mark img{
  position:relative; max-width:330px; width:100%; height:auto; display:block;
  opacity:.95; transition:opacity .35s ease;
}
.signia-feature:hover .signia-mark img{ opacity:1; }
.signia-copy{ background:var(--c-charcoal); padding:48px 46px; display:flex; flex-direction:column; gap:16px; }
.signia-copy h3{
  font-family:var(--f-display); font-weight:300; font-size:clamp(21px,2.2vw,29px);
  line-height:1.3; margin:0; color:var(--c-text); letter-spacing:-.01em;
}
.signia-copy p{ font-size:14px; line-height:1.85; color:var(--c-text-muted); font-weight:300; margin:0; max-width:52ch; }
.signia-facts{
  list-style:none; margin:14px 0 0; padding:22px 0 0; border-top:1px solid var(--c-hair);
  display:flex; gap:44px; flex-wrap:wrap;
}
.signia-facts li{ display:flex; flex-direction:column; gap:6px; }
.signia-facts b{ font-family:var(--f-display); font-weight:200; font-size:30px; color:var(--c-blue); line-height:1; }
.signia-facts span{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-muted);
}
/* GK Hospitality beneath the Signia feature — a smaller, secondary billing,
   because an F&B operator and the Phase 2 hospitality anchor are not peers. */
.signia-sibling{
  display:grid; grid-template-columns:280px 1fr; align-items:center; gap:1px;
  background:var(--c-hair); border:1px solid var(--c-hair-strong); border-top:0;
}
.signia-sibling .partner-logo{ min-height:110px; }
.signia-sibling p{
  background:var(--c-charcoal); margin:0; padding:26px 30px;
  font-size:13.5px; line-height:1.8; color:var(--c-text-muted); font-weight:300; height:100%;
  display:flex; align-items:center;
}
@media (max-width:900px){ .signia-sibling{ grid-template-columns:1fr; } }

@media (max-width:900px){
  .signia-feature{ grid-template-columns:1fr; }
  .signia-mark{ padding:44px 30px; }
  .signia-mark img{ max-width:260px; }
  .signia-copy{ padding:34px 26px; }
  .signia-facts{ gap:28px; }
}

/* ============================================================
   7b. TEASER SECTIONS (homepage — link out to dedicated pages)
   ============================================================ */
.teaser{ padding:90px 0; border-bottom:1px solid var(--c-hair); }
.teaser-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.teaser.reverse .teaser-grid{ direction:rtl; }
.teaser.reverse .teaser-grid > *{ direction:ltr; }
.teaser-media{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--c-hair-strong); }
.teaser-media img{ width:100%; height:100%; object-fit:cover; object-position:center center; filter:var(--img-fx); transition:transform .6s var(--ease); }
.teaser-media:hover img{ transform:scale(1.04); }
/* A map is information, not scenery — cropping it to the 4:3 photo frame cut
   New Cairo off the right-hand edge and sliced the SKYWALK badge in half.
   This keeps the whole thing visible at its own 16:9 proportions. */
.teaser-media.is-map{ aspect-ratio:16/9; background:var(--c-black); }
.teaser-media.is-map img{ object-fit:contain; filter:none; }
.teaser-media.is-map:hover img{ transform:none; }
.teaser-copy .lede{ margin:18px 0 28px; }
.teaser-list{ display:flex; gap:22px; flex-wrap:wrap; margin:0 0 28px; padding:0; list-style:none; }
.teaser-list li{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--c-text-muted); }
.teaser-list li b{ color:var(--c-text); font-weight:500; }
@media (max-width:900px){
  .teaser-grid{ grid-template-columns:1fr; gap:28px; }
  .teaser.reverse .teaser-grid{ direction:ltr; }
  .teaser{ padding:64px 0; }
}

/* ============================================================
   8. VIP FORM + PORTAL
   ============================================================ */
.portal-hub-hero{ padding:calc(var(--nav-h) + 90px) 0 70px; border-bottom:1px solid var(--c-hair); }

/* ============================================================
   COUNTDOWN PAGE
   ============================================================ */
/* ============================================================
   UPDATES PAGE
   ============================================================ */
/* ============================================================
   PROGRESS TEASER — render-vs-reality compare slider
   ============================================================ */
.progress-teaser{ padding:90px 0; border-bottom:1px solid var(--c-hair); background:var(--c-charcoal); }
.progress-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.progress-copy .lede{ margin:18px 0 26px; }
.compare-slider{
  position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--c-hair-strong); user-select:none; cursor:ew-resize;
  /* pan-y keeps vertical page scrolling working over the image while letting
     the horizontal drag be captured — without this the browser claims the
     whole gesture and the comparison can't be dragged on a phone at all. */
  touch-action:pan-y;
}
/* The BEFORE image (the render) is the base layer, so it fills the frame and
   is what shows on the left, under the "Render" label. The AFTER image
   (reality) is clipped from the LEFT edge, so it occupies everything to the
   RIGHT of the handle, under the "Reality" label.

   This was previously clipped the other way — inset(0 50% 0 0) — which put
   the "after" image on the left. The result was the reality photograph
   sitting under the label reading "Render" and vice versa: the slider worked
   mechanically but showed each image on the wrong side of its own caption. */
.compare-before{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.compare-after-wrap{ position:absolute; inset:0; clip-path:inset(0 0 0 50%); }
.compare-after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Stop the browser's native image drag-and-drop from hijacking the gesture. */
.compare-slider img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
.compare-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--c-blue); transform:translateX(-50%);
  pointer-events:none;
}
.compare-handle span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%;
  background:var(--c-blue); display:flex; align-items:center; justify-content:center;
}
/* The character itself rather than a unicode escape — this was written as
   '\\2194', where the doubled backslash made CSS render the literal text
   "2194" inside the drag handle instead of a left-right arrow. */
.compare-handle span::before{ content:'\2194'; color:var(--c-black); font-size:16px; }
.compare-label{
  position:absolute; bottom:14px; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(11,12,14,.75); color:var(--c-text); padding:6px 12px; pointer-events:none;
}
.compare-label.left{ left:14px; }
.compare-label.right{ right:14px; }
@media (max-width:900px){ .progress-grid{ grid-template-columns:1fr; gap:30px; } }

.page-hero-simple{ padding:calc(var(--nav-h) + 90px) 0 60px; border-bottom:1px solid var(--c-hair); }

.updates-gallery{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); }
.update-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.update-photo img{ width:100%; height:100%; object-fit:cover; filter:var(--img-fx); }
.update-tag{
  position:absolute; left:14px; bottom:14px; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--c-blue); color:var(--c-black); padding:6px 12px; font-weight:500;
}
.update-tag.gold{ background:var(--c-gold); }
@media (max-width:900px){ .updates-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .updates-gallery{ grid-template-columns:1fr; } }

/* --- Updates feed ------------------------------------------------
   One list carries both quarterly construction reports and
   announcements; the filter bar narrows it to either.
   ----------------------------------------------------------------- */
.news-filters{ display:flex; gap:1px; background:var(--c-hair); border:1px solid var(--c-hair-strong); margin-top:40px; }
.news-filter{
  flex:1; background:var(--c-black); border:0; cursor:pointer; padding:14px 18px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-text-muted); transition:color .2s ease, background .2s ease;
}
.news-filter:hover{ color:var(--c-text); }
.news-filter.is-active{ color:var(--c-blue); background:var(--c-charcoal); }


.countdown-section{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 60px) 0 60px; background:var(--c-black); position:relative; overflow:hidden;
}
.countdown-bg{ position:absolute; inset:0; z-index:0; }
.countdown-bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; filter:saturate(.8); }
.countdown-bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 900px 600px at 50% 20%, rgba(60,173,241,.1), transparent 60%),
             linear-gradient(180deg, rgba(11,12,14,.75) 0%, rgba(11,12,14,.92) 100%);
}
.countdown-wrap{ position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center; }
.countdown-timer{ display:flex; justify-content:center; gap:1px; background:var(--c-hair); border:1px solid var(--c-hair-strong); margin:48px auto; max-width:520px; }
.cd-unit{ flex:1; min-width:0; background:var(--c-charcoal); padding:26px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.cd-num{ font-family:var(--f-display); font-weight:700; font-size:clamp(28px,5vw,44px); color:var(--c-blue); font-variant-numeric:tabular-nums; }
.cd-label{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-muted); }
.notify-form{ display:flex; gap:12px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.notify-form input{
  flex:1; min-width:220px; background:var(--c-charcoal); border:1px solid var(--c-hair-strong); color:var(--c-text);
  padding:15px 18px; font-family:var(--f-body); font-size:14.5px; font-weight:300;
}
.notify-form input:focus{ outline:none; border-color:var(--c-blue); }
.countdown-note{ margin-top:28px; font-family:var(--f-mono); font-size:12px; color:var(--c-text-muted); }
#notifyStatus{ margin-top:16px; }
@media (max-width:600px){
  .cd-unit{ padding:18px 6px; }
  .countdown-timer{ margin:32px auto; }
}

.vip{ padding:140px 0; border-bottom:1px solid var(--c-hair); }
.vip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; margin-top:52px; }
.vip-copy .lede{ margin-bottom:30px; }

.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-muted); margin-bottom:10px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--c-charcoal); border:1px solid var(--c-hair-strong); color:var(--c-text);
  padding:15px 16px; font-family:var(--f-body); font-size:14.5px; transition:border-color .2s ease; font-weight:300;
}
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--c-blue) 50%), linear-gradient(135deg, var(--c-blue) 50%, transparent 50%); background-position:calc(100% - 22px) center, calc(100% - 16px) center; background-size:6px 6px; background-repeat:no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--c-blue); }
/* Contact — General Inquiry.
   The form carries six controls and the block beside it carries two short
   lines, so an even-ish split wasted the page on white space and squeezed the
   inputs. Weighted heavily toward the form. */
.contact-general-grid{
  display:grid; grid-template-columns:0.72fr 1.9fr; gap:44px; align-items:flex-start;
}
@media (max-width:980px){
  .contact-general-grid{ grid-template-columns:1fr; gap:34px; }
}

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.reveal-fields{ max-height:0; overflow:hidden; opacity:0; transition:max-height .5s var(--ease), opacity .4s ease; }
.reveal-fields.open{ max-height:900px; opacity:1; }
.form-status{ margin-top:16px; font-family:var(--f-mono); font-size:12px; color:var(--c-blue); display:none; }
.form-status.show{ display:block; }

.portal-stack{ display:flex; flex-direction:column; gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); }
.portal-row{ background:var(--c-black); padding:26px 24px; display:flex; align-items:center; gap:20px; transition:background .2s ease; }
.portal-row:hover{ background:var(--c-charcoal); }
.portal-icon{ width:52px; height:52px; flex:0 0 auto; border:1px solid var(--c-hair-strong); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:10.5px; color:var(--c-blue); font-weight:600; }
.portal-body{ flex:1; min-width:0; }
.portal-body h4{ font-family:var(--f-display); font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px; }
.portal-body p{ font-size:12.5px; color:var(--c-text-muted); }
.portal-link{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--c-hair-strong); padding:10px 16px; white-space:nowrap; transition:all .2s ease; flex:0 0 auto; }
.portal-link:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.portal-note{ margin-top:18px; padding:16px 20px; border:1px dashed var(--c-hair-strong); font-size:12px; color:var(--c-text-muted); }

@media (max-width:900px){ .vip-grid{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }

/* ============================================================
   MOBILE — masterplan, location map, touch targets
   ============================================================ */
@media (max-width:760px){
  .prelude-word{ font-size:clamp(32px,11vw,56px); }
  .h-hero{ font-size:clamp(30px,9vw,44px); }
  .hero{ min-height:620px; }
  .hero-inner{ padding-top:calc(var(--nav-h) + 24px); }
  .hero-scroll{ display:none; } /* saves vertical space on short mobile viewports */

  .location{ padding:80px 0; }
  .about-dev{ padding:80px 0; }
  .values-grid{ grid-template-columns:1fr; }
  .loc-grid{ grid-template-columns:1fr; gap:32px; margin-top:32px; }
  .loc-address{ margin-top:22px; }
  /* .map-stage-photo aspect-ratio intentionally NOT overridden here — keeping it
     fixed at 16:9 across all breakpoints is what keeps the pin percentages locked
     to the correct spot on the image at every screen size. */

  /* The stage keeps the render's own 2200x1912 proportions at EVERY width.
     It used to be forced to 3/4 on mobile, which meant object-fit:cover
     cropped the render while the phase polygons — positioned as percentages
     of the stage box, not the image — stayed where they were. The outlines
     drifted off the buildings they were meant to be tracing. Matching the
     ratio to the artwork is what keeps them locked on. */
  .mp-stage{ aspect-ratio:2200/1912; }

  /* Full name-and-status labels are far too wide for a phone: four of them
     overlapped each other and the right-hand one ran off the edge of the
     frame and got cut in half. On mobile each phase is marked with just its
     number, and the names, statuses and figures move into a tappable list
     directly underneath the render where they have room to be read. */
  .phase-label{
    width:30px; height:30px; padding:0; border-radius:50%;
    align-items:center; justify-content:center; gap:0;
    background:rgba(11,12,14,.82);
  }
  .phase-label .p-word,
  .phase-label .p-name,
  .phase-label .p-tag{ display:none; }
  .phase-label .p-num{ font-size:12.5px; letter-spacing:0; line-height:1; }
  .phase-label:not(.locked){ border-color:var(--c-blue); box-shadow:0 0 0 3px rgba(60,173,241,.14); }

  .mp-phase-list{ display:block; }
  .phase-tooltip{ display:none; } /* supplementary on hover only — the list below carries the detail on touch */

  .b-unit{ width:30px; height:30px; margin-left:-15px; margin-top:-15px; }
  .b-unit .b-hint{ display:none; } /* no hover on touch — tap opens the info card directly */

  /* The map is drawn wider than the screen and swiped sideways. Fitting all of
     Cairo into 375px made the printed place names unreadable, and the pin
     rings — which had been inflated to 9% of the frame to stay tappable —
     ended up as huge blue circles swamping the artwork they were meant to sit
     inside. At this width the pins go back to tracing the printed markers
     exactly as they do on desktop. */
  .map-scroll{
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .map-scroll::-webkit-scrollbar{ display:none; }
  .map-scroll .map-stage{ width:215%; }

  .map-node{ width:2.6%; margin-left:-1.3%; margin-top:-1.3%; }
  /* Invisible padding around the ring so the tap target clears the ~44px
     minimum without the visible ring having to grow to match. */
  .map-node::before{ content:''; position:absolute; inset:-12px; border-radius:50%; }
  .tap-hint{ font-size:8.5px; padding:5px 9px; }

  .map-swipe-hint{
    display:block; margin-top:12px; font-family:var(--f-mono); font-size:10.5px;
    letter-spacing:.04em; color:var(--c-text-muted);
  }
  .map-tooltip{ display:none; } /* tap opens Google Maps directly instead */

  .region-label{ padding:5px 8px; }
  .region-label b{ font-size:11px; }
  .region-label span{ display:none; } /* status line dropped on small screens — badges would overlap otherwise, city name still reads clearly */

  .stats-grid{ grid-template-columns:1fr; }
  .mp-legend{ flex-direction:column; gap:10px; }
  .map-actions{ flex-direction:column; align-items:flex-start; gap:12px; }

  .partner-panel.active{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ padding:64px 0 36px; }
.footer-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:36px; padding-bottom:36px; border-bottom:1px solid var(--c-hair); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--c-hair-strong);
  display:flex; align-items:center; justify-content:center; color:var(--c-text-muted);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-social a:hover{ color:var(--c-blue); border-color:var(--c-blue); background:rgba(60,173,241,.08); }
.footer-social svg{ width:16px; height:16px; }
.footer-links{ display:flex; gap:30px; flex-wrap:wrap; }
.footer-links a{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-muted); }
.footer-links a:hover{ color:var(--c-blue); }
.footer-bottom{ margin-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--f-mono); font-size:10.5px; color:var(--c-text-muted); }

/* Footer on a phone: the links were 16px-tall targets crammed into a wrapping
   row, which is close to impossible to hit accurately. Two clean columns with
   real vertical padding instead, and the wordmark/social row stacked rather
   than fighting for the same line. */
@media (max-width:760px){
  .site-footer{ padding:48px 0 28px; }
  .footer-top{ flex-direction:column; align-items:flex-start; gap:26px; padding-bottom:28px; }
  .footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; width:100%; }
  .footer-links a{ display:block; padding:11px 0; font-size:11px; }
  .footer-links li{ list-style:none; border-bottom:1px solid var(--c-hair); }
  .footer-social a{ width:42px; height:42px; }
  .footer-bottom{ margin-top:22px; flex-direction:column; gap:10px; line-height:1.7; }
}
.footer-staff-link{ color:var(--c-text-muted); opacity:.7; transition:opacity .2s ease, color .2s ease; }
.footer-staff-link:hover{ opacity:1; color:var(--c-blue); }

/* ============================================================
   FINAL CTA — the homepage's closing section, driving to vip.html
   ============================================================ */
.final-cta{ position:relative; padding:180px 0; overflow:hidden; text-align:center; border-bottom:1px solid var(--c-hair); }
.final-cta-media{ position:absolute; inset:0; z-index:0; }
.final-cta-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.final-cta-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--c-black) 0%, rgba(11,12,14,.72) 30%, rgba(11,12,14,.72) 70%, var(--c-black) 100%);
}
.final-cta-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; }
.final-cta-inner .eyebrow{ justify-content:center; }
.final-cta-inner .h-section{ margin-top:6px; }
.final-cta-inner .lede{ margin:22px auto 40px; }
@media (max-width:760px){
  .final-cta{ padding:120px 0; }
}

/* ============================================================
   Utility
   ============================================================ */
.reveal-el{ opacity:0; transform:translateY(24px); }
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:600; background:var(--c-blue); transform-origin:left center; transform:scaleX(0); }
.split-mask{ overflow:hidden; }

/* ============================================================
   VIP INQUIRY PAGE — split screen + multi-step wizard
   ============================================================ */
.vip-split{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; min-height:100dvh; }

.vip-visual{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; background:var(--c-black); }
/* Anchored above centre: the gold wordmark sits in the upper third of the
   photograph, and a centred cover crop pushed it off the top of a short
   window. The source is deliberately narrower than this column so cover
   trims top and bottom rather than the sides — trimming the sides is what
   clipped the final K off SKYWALK. */
.vip-visual img{ width:100%; height:100%; object-fit:cover; object-position:50% 34%; display:block; }
.vip-visual-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,12,14,.2) 0%, rgba(11,12,14,.55) 75%, rgba(11,12,14,.85) 100%);
}
.vip-visual-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:56px; z-index:1;
}
.vip-visual-overlay .logo-type{ display:flex; flex-direction:column; margin-bottom:26px; }
.vip-visual-overlay .l1{ font-family:var(--f-display); font-weight:300; font-size:20px; letter-spacing:.24em; text-transform:uppercase; color:var(--c-text); }
.vip-visual-overlay .l2{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-blue); margin-top:4px; }
.vip-visual-overlay p{ font-family:var(--f-display); font-weight:300; font-style:italic; font-size:clamp(17px,1.8vw,22px); color:var(--c-text); max-width:440px; line-height:1.5; }

.vip-form-panel{
  display:flex; align-items:center; padding:calc(var(--nav-h) + 60px) clamp(28px,6vw,90px) 60px;
  min-height:100vh; min-height:100dvh;
}
.vip-wizard{ width:100%; max-width:520px; margin:0 auto; }

.vip-progress{ display:flex; gap:6px; margin-bottom:44px; }
.vp-step{
  flex:1; display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--c-text-muted); padding-bottom:12px;
  border-bottom:2px solid var(--c-hair-strong); transition:color .3s ease, border-color .3s ease;
}
.vp-step i{
  font-style:normal; width:20px; height:20px; border-radius:50%; border:1px solid var(--c-hair-strong);
  display:flex; align-items:center; justify-content:center; font-size:10px; flex:0 0 auto;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.vp-step.active, .vp-step.done{ color:var(--c-text); border-color:var(--c-blue); }
.vp-step.active i, .vp-step.done i{ background:var(--c-blue); border-color:var(--c-blue); color:var(--c-black); }
.vp-step span{ display:none; }
@media (min-width:600px){ .vp-step span{ display:inline; } }
.vp-step b{ font-weight:500; white-space:nowrap; }
@media (max-width:599px){ .vp-step b{ display:none; } }

.vip-step{ display:none; }
.vip-step.active{ display:block; animation:vipStepIn .5s var(--ease); }
@keyframes vipStepIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.vip-step .eyebrow{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-blue); margin-bottom:14px; }
.vip-step .h-sub{ margin-bottom:10px; }
.vip-step .field-hint{ font-family:var(--f-body); font-weight:300; font-size:13.5px; color:var(--c-text-muted); margin-bottom:26px; }

.intent-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.intent-card{
  grid-column:span 1; text-align:left; background:var(--c-charcoal); border:1px solid var(--c-hair-strong);
  padding:22px 20px; cursor:pointer; display:flex; flex-direction:column; gap:6px; transition:border-color .25s ease, background .25s ease, transform .2s ease;
}
.intent-card:hover{ border-color:var(--c-blue); background:var(--c-charcoal-2); transform:translateY(-2px); }
.intent-card.selected{ border-color:var(--c-blue); background:rgba(60,173,241,.1); }
.ic-title{ font-family:var(--f-display); font-weight:600; font-size:15.5px; color:var(--c-text); }
.ic-sub{ font-family:var(--f-mono); font-size:10.5px; color:var(--c-text-muted); }

.vip-nav{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:30px; }

.vip-loading{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:60px 0; text-align:center; }
.vip-loading span{ font-family:var(--f-mono); font-size:12px; color:var(--c-text-muted); letter-spacing:.04em; }
.vip-spinner{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--c-hair-strong); border-top-color:var(--c-blue);
  animation:vipSpin .8s linear infinite;
}
@keyframes vipSpin{ to{ transform:rotate(360deg); } }

.vip-result{ display:none; }
.vip-result.show{ display:block; animation:vipStepIn .5s var(--ease); }
.vip-result-number{ display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.vip-result-number span{ font-family:var(--f-display); font-weight:700; font-size:clamp(48px,7vw,72px); color:var(--c-blue); line-height:1; }
.vip-result-number small{ font-family:var(--f-mono); font-size:14px; color:var(--c-text-muted); text-transform:uppercase; letter-spacing:.06em; }

@media (max-width:900px){
  .vip-split{ grid-template-columns:1fr; }
  .vip-visual{ position:relative; height:46vh; min-height:320px; }
  .vip-form-panel{ min-height:0; padding:52px 24px 70px; }
  .intent-grid{ grid-template-columns:1fr; }
}

.contact-method-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.contact-method-grid-2{ grid-template-columns:repeat(2,1fr); }
.contact-method-card{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--c-charcoal); border:1px solid var(--c-hair-strong); padding:16px 10px; cursor:pointer;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em; color:var(--c-text-muted);
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.contact-method-card input{ position:absolute; opacity:0; pointer-events:none; }
.contact-method-card:hover{ border-color:var(--c-blue); color:var(--c-text); }
.contact-method-card:has(input:checked){ border-color:var(--c-blue); background:rgba(60,173,241,.1); color:var(--c-text); }

/* Custom calendar picker for "Preferred Day" — the visible input is
   readonly (no typing a date), the only way to set a value is picking
   a real day from this dropdown. A hidden field carries the ISO value
   that actually gets submitted. */
#vMeetingDate{ cursor:pointer; }
#vMeetingDate:read-only{ background:var(--c-charcoal); }
.mini-calendar{
  position:absolute; top:100%; left:0; margin-top:8px; z-index:20; width:300px;
  background:var(--c-charcoal-2); border:1px solid var(--c-hair-strong); box-shadow:0 20px 50px rgba(0,0,0,.5);
  padding:16px; display:none;
}
.mini-calendar.show{ display:block; }
.mc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mc-head span{ font-family:var(--f-display); font-weight:600; font-size:13.5px; color:var(--c-text); }
.mc-nav{
  background:none; border:1px solid var(--c-hair-strong); color:var(--c-text-muted); width:28px; height:28px;
  cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.mc-nav:hover:not(:disabled){ border-color:var(--c-blue); color:var(--c-blue); }
.mc-nav:disabled{ opacity:.3; cursor:default; }
.mc-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.mc-weekdays span{ text-align:center; font-family:var(--f-mono); font-size:9.5px; color:var(--c-text-muted); text-transform:uppercase; }
.mc-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.mc-day{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:none; border:none;
  color:var(--c-text); font-family:var(--f-body); font-size:12.5px; cursor:pointer; border-radius:50%;
  transition:background .2s ease, color .2s ease;
}
.mc-day:hover:not(:disabled){ background:rgba(60,173,241,.16); }
.mc-day.selected{ background:var(--c-blue); color:var(--c-black); font-weight:600; }
.mc-day:disabled{ color:var(--c-hair-strong); cursor:default; }
.mc-day.empty{ visibility:hidden; cursor:default; }

.meeting-request{
  display:flex; align-items:flex-start; gap:12px; margin-top:26px; padding:18px 20px;
  border:1px dashed var(--c-hair-strong); cursor:pointer; transition:border-color .25s ease, background .25s ease;
}
.meeting-request:has(input:checked){ border-color:var(--c-blue); border-style:solid; background:rgba(60,173,241,.08); }
.meeting-request input{ position:absolute; opacity:0; pointer-events:none; }
.mr-box{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px; border:1.5px solid var(--c-hair-strong); position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.meeting-request input:checked ~ .mr-box{ background:var(--c-blue); border-color:var(--c-blue); }
.meeting-request input:checked ~ .mr-box::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid var(--c-black); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.mr-text{ font-family:var(--f-body); font-weight:400; font-size:13.5px; color:var(--c-text); line-height:1.5; }

@media (max-width:520px){
  .contact-method-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   LUXURY PRELOADER — first-visit only, homepage
   ============================================================ */
#luxury-preloader{
  position:fixed; inset:0; z-index:9999; background:var(--c-black); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:transform 1s cubic-bezier(.65,0,.35,1);
}
#luxury-preloader.hide{ transform:translateY(-100%); }
.preloader-media{ position:absolute; inset:0; }
.preloader-media img, .preloader-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.preloader-scrim{ position:absolute; inset:0; background:rgba(11,12,14,.55); }
.preloader-word{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.preloader-word .l1{
  font-family:var(--f-display); font-weight:300; font-size:clamp(28px,5vw,48px);
  letter-spacing:.32em; text-transform:uppercase; color:var(--c-text); padding-left:.32em;
  opacity:0; transform:translateY(8px); animation:preloaderWordIn .7s .15s ease forwards;
}
/* The brand's signature accent strip — a vertical bar, matching the real
   architectural light strips on the buildings and the sales-kit brand
   sheet — opens into a small sky photo with a few birds crossing it,
   the sky then washes to solid brand blue, and it closes back down to
   the plain vertical strip under the wordmark. */
.preloader-panel{
  width:6px; height:74px; margin:22px auto; position:relative; overflow:hidden;
  background:var(--c-blue); border-radius:2px;
  transition:width 1s cubic-bezier(.65,0,.35,1), height .6s cubic-bezier(.65,0,.35,1), border-radius .7s ease;
  opacity:0; animation:preloaderWordIn .7s .5s ease forwards;
}
.preloader-panel.open{ width:230px; height:130px; border-radius:6px; }
.preloader-sky, .preloader-blue{ position:absolute; inset:0; }
.preloader-sky{
  background:url('../assets/images/preloader-sky.jpg') center / cover no-repeat;
}
.preloader-blue{
  background:var(--c-blue); opacity:1; transition:opacity .6s ease;
}
/* .open alone reveals the sky (blue fades out); .open.wash washes back
   to solid blue over it, just before the panel closes back to a strip. */
.preloader-panel.open .preloader-blue{ opacity:0; }
.preloader-panel.open.wash .preloader-blue{ opacity:1; }
.bird{ position:absolute; width:14px; height:7px; top:40%; left:-12%; opacity:0; }
.preloader-panel.open .bird{ animation:birdFly 1.1s ease-in-out forwards; }
.bird.b1{ top:28%; animation-delay:.1s; }
.bird.b2{ top:55%; animation-delay:.35s; width:10px; height:5px; }
.bird.b3{ top:42%; animation-delay:.6s; width:10px; height:5px; }
@keyframes birdFly{
  0%{ opacity:0; transform:translateX(0); }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translateX(320px); }
}
.preloader-word .l2{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--c-blue); padding-left:.24em;
  opacity:0; animation:preloaderWordIn .7s .55s ease forwards;
}
@keyframes preloaderWordIn{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .preloader-word .l1, .preloader-word .l2, .preloader-panel{ animation:none; opacity:1; transform:none; }
  .preloader-panel{ width:6px; height:74px; }
  .bird{ display:none; }
}

/* ============================================================
   AI CONCIERGE — floating chat widget, injected on every page
   ============================================================ */
#skywalkConcierge{ position:fixed; right:24px; bottom:24px; z-index:800; }
.concierge-bubble{
  width:58px; height:58px; border-radius:50%; background:var(--c-blue); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--c-black);
  box-shadow:0 10px 30px rgba(60,173,241,.35); transition:transform .2s ease;
}
.concierge-bubble:hover{ transform:scale(1.06); }
.concierge-bubble svg{ width:24px; height:24px; position:absolute; transition:opacity .2s ease, transform .2s ease; }
.concierge-bubble .ci-close{ opacity:0; transform:rotate(-45deg); }
#skywalkConcierge.open .concierge-bubble .ci-chat{ opacity:0; transform:rotate(45deg); }
#skywalkConcierge.open .concierge-bubble .ci-close{ opacity:1; transform:rotate(0); }

.concierge-panel{
  position:absolute; right:0; bottom:76px; width:340px; max-width:calc(100vw - 48px); height:440px; max-height:70vh;
  background:var(--c-charcoal); border:1px solid var(--c-hair-strong); box-shadow:0 30px 80px rgba(0,0,0,.5);
  display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(16px) scale(.97);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
#skywalkConcierge.open .concierge-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); transition:opacity .25s ease, transform .25s ease; }

.concierge-head{ padding:18px 20px; border-bottom:1px solid var(--c-hair-strong); background:var(--c-black); }
.concierge-title{ font-family:var(--f-display); font-weight:600; font-size:14.5px; color:var(--c-text); }
.concierge-sub{ font-family:var(--f-mono); font-size:10px; color:var(--c-blue); margin-top:3px; letter-spacing:.03em; }

.concierge-body{ flex:1; min-width:0; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px; }
.c-msg{ max-width:85%; padding:10px 14px; font-family:var(--f-body); font-weight:300; font-size:13px; line-height:1.5; }
.c-msg.bot{ align-self:flex-start; background:var(--c-black); border:1px solid var(--c-hair-strong); color:var(--c-text); }
.c-msg.user{ align-self:flex-end; background:var(--c-blue); color:var(--c-black); }
.c-msg.typing{ font-family:var(--f-mono); letter-spacing:.1em; color:var(--c-text-muted); }

.concierge-input-row{ display:flex; border-top:1px solid var(--c-hair-strong); }
.concierge-input-row input{
  flex:1; background:none; border:none; padding:14px 16px; color:var(--c-text); font-family:var(--f-body); font-size:13px;
}
.concierge-input-row input:focus{ outline:none; }
.concierge-input-row button{
  width:48px; border:none; background:none; color:var(--c-blue); font-size:16px; cursor:pointer; transition:color .2s ease;
}
.concierge-input-row button:hover{ color:var(--c-text); }

@media (max-width:480px){
  #skywalkConcierge{ right:16px; bottom:16px; }
  .concierge-panel{ width:calc(100vw - 32px); }
}

/* ============================================================
   PHASE FEATURES MODAL — masterplan.html
   ============================================================ */
.phase-modal{
  position:fixed; inset:0; z-index:700; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
}
.phase-modal.show{ opacity:1; visibility:visible; transition:opacity .3s ease; }
.phase-modal-backdrop{ position:absolute; inset:0; background:rgba(11,12,14,.8); backdrop-filter:blur(4px); }
.phase-modal-card{
  position:relative; z-index:1; background:var(--c-charcoal); border:1px solid var(--c-hair-strong);
  max-width:460px; width:100%; padding:40px; box-shadow:0 40px 100px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.98); transition:transform .35s var(--ease);
}
.phase-modal.show .phase-modal-card{ transform:translateY(0) scale(1); }
.phase-modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; background:none; border:1px solid var(--c-hair-strong);
  color:var(--c-text-muted); font-size:18px; line-height:1; cursor:pointer; transition:color .2s ease, border-color .2s ease;
}
.phase-modal-close:hover{ color:var(--c-blue); border-color:var(--c-blue); }
.pm-tag{
  display:inline-block; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-gold); border:1px solid rgba(201,162,75,.4); padding:5px 12px; margin-bottom:18px;
}
.pm-tag:empty{ display:none; }
.pm-logo{ max-width:200px; max-height:60px; object-fit:contain; margin-bottom:20px; display:block; filter:grayscale(1) invert(1) brightness(1.6); }
.phase-modal-card h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(22px,2.4vw,28px); color:var(--c-text); margin-bottom:22px; }
.pm-features{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.pm-features li{
  font-family:var(--f-body); font-weight:300; font-size:14.5px; color:#c7c9cd; line-height:1.5;
  padding-left:20px; position:relative;
}
.pm-features li::before{
  content:''; position:absolute; left:0; top:8px; width:7px; height:7px; background:var(--c-blue); border-radius:50%;
}
@media (max-width:520px){
  .phase-modal-card{ padding:30px 24px; }
}


/* ============================================================
   MASTERPLAN INTRO
   Full-screen aerial shown once per session before the explorer.
   Kept as a plain overlay rather than something the page waits on,
   so if anything fails the masterplan is still right there beneath it.
   ============================================================ */
.mp-intro{
  position:fixed; inset:0; z-index:700; background:var(--c-black);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
}
.mp-intro[hidden]{ display:none; }
.mp-intro.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.mp-intro-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* The aerial descends toward the site, so a slow push-in keeps the
     motion going right up to the moment the masterplan appears. */
  transform:scale(1.04);
}

/* On a portrait screen, filling the viewport with a 16:9 clip crops about
   three quarters of the picture away — the viewer gets a narrow vertical
   slice through the middle of the shot and the aerial reads as unwatchable.
   In portrait the whole frame is shown instead, centred on black, which is
   the same background the overlay already uses so it reads as intentional
   rather than letterboxed. The push-in is dropped too, since it would crop
   back into the frame we just made room for. */
@media (max-aspect-ratio: 1/1){
  .mp-intro-video{ object-fit:contain; transform:none; }
  .mp-intro-veil{ background:none; }
}
/* Vignette so the skip control stays legible over a bright aerial. */
.mp-intro-veil{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
.mp-intro-skip{
  position:absolute; bottom:38px; right:38px; z-index:2;
  background:rgba(11,12,14,.55); border:1px solid rgba(255,255,255,.35); color:#fff;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 22px; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .25s ease, border-color .25s ease;
}
.mp-intro-skip:hover{ background:var(--c-blue); border-color:var(--c-blue); color:var(--c-black); }
.mp-intro-skip span{ margin-left:6px; }
.mp-intro-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.14); z-index:2; }
.mp-intro-bar i{ display:block; height:100%; width:0; background:var(--c-blue); }
@media (max-width:760px){
  .mp-intro-skip{ bottom:24px; right:20px; padding:12px 18px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
  .mp-intro-video{ transform:none; }
}

/* ============================================================
   NO-GSAP FALLBACK
   Applied by js/no-gsap-fallback.js when the animation library
   fails to load. Without these rules every .reveal-el would stay
   at opacity:0 forever and the site would render as a blank
   black page. Animations are lost; the content is not.
   ============================================================ */
.no-gsap .reveal-el{ opacity:1 !important; transform:none !important; }
.no-gsap #luxury-preloader,
.no-gsap .mp-intro{ display:none !important; }
.no-gsap .hero-slide{ opacity:0; }
.no-gsap .hero-slide:first-child{ opacity:1; }

/* ============================================================
   FORM CONSENT
   Unticked by default and marked required — a pre-ticked box is
   not valid consent under Egypt's PDPL or the GDPR. Laid out so
   the whole row is clickable and the focus ring is clearly
   visible for keyboard users.
   ============================================================ */
/* The role a specific application is for. Shown only once "Apply for this
   Role" has been clicked on a listing; a genuine general application never
   sees this. Gold rather than blue so it reads as a confirmation, not as
   another form field. */
.applying-for-banner{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px;
  background:rgba(201,162,75,.08); border:1px solid rgba(201,162,75,.3);
  padding:12px 16px; margin-bottom:20px;
  font-size:13px; color:var(--c-text-muted);
}
.applying-for-banner b{ color:var(--c-text); font-weight:600; }
.applying-for-banner button{
  margin-inline-start:auto; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; text-decoration:underline;
  color:var(--c-blue);
}
.applying-for-banner button:hover{ color:#6CC3F6; }

.consent-row{
  display:flex; align-items:flex-start; gap:11px; margin:18px 0 4px; cursor:pointer;
  padding:12px 14px; border:1px solid var(--c-hair-strong); background:rgba(255,255,255,.02);
}
.consent-row input[type="checkbox"]{
  flex:0 0 auto; width:17px; height:17px; margin-top:1px; accent-color:var(--c-blue); cursor:pointer;
}
.consent-row span{
  font-size:12.5px; line-height:1.65; color:var(--c-text-muted); font-weight:300;
}
.consent-row a{ color:var(--c-blue); text-decoration:underline; }
.consent-row:hover{ border-color:var(--c-hair-strong); background:rgba(255,255,255,.04); }
.consent-row input[type="checkbox"]:focus-visible{ outline:2px solid var(--c-blue); outline-offset:3px; }

/* ============================================================
   KEYBOARD FOCUS
   A single visible focus style across every interactive element.
   Without this, anyone navigating by keyboard cannot tell where
   they are on the page.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--c-blue);
  outline-offset:3px;
  border-radius:1px;
}
/* Skip link — first stop for keyboard and screen-reader users. */
/* Hidden by clipping, not by parking it at left:-9999px.
   The offset version worked in English and quietly broke Arabic: in an RTL
   document the inline start edge is on the RIGHT, so a box sitting 9,999px
   to the LEFT is 9,999px past the scrollable edge. That gave every Arabic
   page about 10,000px of empty horizontal scroll — the page could be dragged
   sideways into nothing, and anything relying on scroll position landed in
   the void. Clipping takes the element out of layout entirely, so it costs
   no width in either direction. */
.skip-link{
  position:absolute; top:0; inset-inline-start:0; z-index:900;
  width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
  background:var(--c-blue); color:var(--c-black); padding:12px 20px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}
.skip-link:focus{
  width:auto; height:auto; overflow:visible; clip:auto; clip-path:none;
}

/* Legal tables scroll sideways on a phone rather than forcing the whole
   page wider than the screen. */
@media (max-width:760px){
  .legal-body table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .legal-body td, .legal-body th{ white-space:normal; min-width:110px; }
}

/* Legal links sit on their own quiet row beneath the copyright line, rather
   than among the footer navigation — they are compliance links, not places
   we want visitors to go. */
.footer-legal{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--c-hair);
  display:flex; flex-wrap:wrap; gap:22px;
}
.footer-legal a{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-text-muted); transition:color .2s ease;
}
.footer-legal a:hover{ color:var(--c-blue); }
@media (max-width:760px){
  .footer-legal{ gap:0 20px; margin-top:12px; padding-top:12px; }
  .footer-legal a{ padding:9px 0; font-size:10.5px; }
}

/* ============================================================
   PARALLAX IMAGES
   An image that fills its frame exactly cannot be moved without
   exposing a gap at one edge, so anything opted into parallax is
   given extra height and pulled up by half the surplus. The frame
   already clips, so the overspill is never seen — it is simply
   travel for the image to move within.
   ============================================================ */
[data-parallax]{
  height:118% !important;
  top:-9%;
  position:relative;
  will-change:transform;
}
/* The CSS hover-zoom on these frames is removed because GSAP writes an inline
   transform for the parallax, which would override it and silently kill the
   effect. The zoom is re-applied through GSAP instead (see script.js), where
   both transforms compose on the same element. */
.teaser-media:hover img[data-parallax],
.anchor-card:hover .anchor-media img[data-parallax]{ transform:none; }

@media (prefers-reduced-motion:reduce){
  [data-parallax]{ height:100% !important; top:0; transform:none !important; }
}
/* Parallax stays off on phones: it is disabled in script.js there, so the
   images must sit flush in their frames rather than offset by -9%. */
@media (max-width:760px){
  [data-parallax]{ height:100% !important; top:0; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   Accept and Reject are deliberately identical in size, weight and
   prominence. A reject that is smaller, greyer or harder to find is
   treated by regulators as no consent having been given at all.
   ============================================================ */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:800;
  background:var(--c-charcoal); border-top:1px solid var(--c-hair-strong);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.cc-banner.show{ transform:translateY(0); }
.cc-inner{
  max-width:var(--wrap, 1280px); margin:0 auto; padding:20px 40px;
  display:flex; align-items:center; gap:34px;
}
.cc-copy{ flex:1; min-width:0; }
.cc-copy b{
  display:block; font-family:var(--f-display); font-weight:600; font-size:14px;
  color:var(--c-text); margin-bottom:5px;
}
.cc-copy p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--c-text-muted); font-weight:300; }
.cc-copy a{ color:var(--c-blue); text-decoration:underline; }
.cc-actions{ display:flex; gap:10px; flex:0 0 auto; }
.cc-btn{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:13px 26px; cursor:pointer; border:1px solid var(--c-hair-strong);
  background:transparent; color:var(--c-text); transition:all .25s ease; min-width:118px;
}
.cc-reject:hover{ border-color:var(--c-text); }
.cc-accept{ background:var(--c-blue); border-color:var(--c-blue); color:var(--c-black); font-weight:500; }
.cc-accept:hover{ filter:brightness(1.1); }
.cc-btn:focus-visible{ outline:2px solid var(--c-blue); outline-offset:3px; }

@media (max-width:760px){
  .cc-inner{ flex-direction:column; align-items:stretch; gap:16px; padding:20px; }
  .cc-actions{ gap:10px; }
  .cc-btn{ flex:1; min-width:0; padding:14px 10px; }
}
@media (prefers-reduced-motion:reduce){
  .cc-banner{ transition:none; }
}

/* While the consent bar is up, push the page content clear of it so nothing
   ends up permanently hidden behind a fixed element. */
body.cc-open{ padding-bottom:var(--cc-h, 96px); }

/* ============================================================
   NEWSLETTER PANEL
   Sits on imagery behind a heavy scrim, inside a bordered panel —
   the same framing language as the rest of the site. The earlier
   version was bare text and an unstyled input on flat black,
   which looked like an unfinished form.
   ============================================================ */
.newsletter-section{ position:relative; padding:110px 0; overflow:hidden; border-top:1px solid var(--c-hair); }
.newsletter-bg{ position:absolute; inset:0; z-index:0; }
.newsletter-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.newsletter-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--c-black) 0%, rgba(11,12,14,.86) 40%, rgba(11,12,14,.9) 100%);
}
.newsletter-panel{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
  background:rgba(20,22,25,.72); backdrop-filter:blur(10px);
  border:1px solid var(--c-hair-strong); padding:52px 56px;
}
/* Accent rule down the leading edge, matching the phase and status cards. */
.newsletter-panel::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--c-blue);
}
.newsletter-copy h2{
  font-family:var(--f-display); font-weight:700; font-size:32px; line-height:1.12;
  color:var(--c-text); margin:14px 0 0;
}
.newsletter-copy p{ margin:16px 0 0; font-size:14px; line-height:1.8; color:var(--c-text-muted); font-weight:300; }

.nl-field{ display:flex; gap:0; border:1px solid var(--c-hair-strong); background:var(--c-black); }
.nl-field input[type="email"]{
  flex:1; min-width:0; background:transparent; border:0; color:var(--c-text);
  padding:17px 18px; font-family:var(--f-display); font-size:14.5px;
}
.nl-field input[type="email"]::placeholder{ color:#5c6167; }
.nl-field input[type="email"]:focus{ outline:none; }
.nl-field:focus-within{ border-color:var(--c-blue); }
.nl-field .btn{ border-radius:0; padding:17px 30px; flex:0 0 auto; }
.newsletter-form .consent-row{ margin-top:16px; background:transparent; }
.newsletter-form .form-status{ margin-top:14px; }

@media (max-width:980px){
  .newsletter-panel{ grid-template-columns:1fr; gap:34px; padding:42px 34px; }
  .newsletter-copy h2{ font-size:26px; }
}
@media (max-width:600px){
  .newsletter-section{ padding:72px 0; }
  .newsletter-panel{ padding:32px 22px; }
  .nl-field{ flex-direction:column; border:0; gap:10px; background:transparent; }
  .nl-field input[type="email"]{ border:1px solid var(--c-hair-strong); background:var(--c-black); width:100%; }
  .nl-field .btn{ width:100%; justify-content:center; }
}

/* Visually hidden but still announced by screen readers. Used for the
   newsletter email label, whose visible cue is the placeholder. */
.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;
}

/* ============================================================
   UPDATES — THE TIMELINE
   One spine, one column of dates, one column of cards. Every
   entry hangs off the same two positions all the way down, which
   is what makes six years read as a single record rather than as
   a set of boxes.

   This replaces a year accordion with a twelve-month axis and a
   sideways rail — three mechanisms to learn, and an axis that
   printed every month whether anything happened in it or not.
   ============================================================ */
.timeline-feed{ margin-top:30px; }

/* Jump bar. The only navigation: six buttons, always visible. */
.tl-jumpbar{
  position:sticky; top:var(--nav-h); z-index:5;
  display:flex; gap:2px; padding:14px 0 14px;
  background:linear-gradient(180deg, var(--c-black) 72%, transparent);
  border-bottom:1px solid var(--c-hair);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tl-jump{
  flex:0 0 auto; background:none; border:1px solid transparent; cursor:pointer;
  padding:7px 16px; color:var(--c-text-muted);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  transition:color .25s ease, border-color .25s ease;
}
.tl-jump:hover{ color:var(--c-text); }
.tl-jump.is-current{ color:var(--c-blue); border-color:rgba(60,173,241,.35); }

/* The spine. One line, drawn once, running the whole record. */
.tl{ position:relative; padding-top:10px; }
.tl::before{
  content:''; position:absolute; top:0; bottom:0; left:139px; width:1px;
  background:linear-gradient(180deg, transparent, var(--c-hair-strong) 40px,
             var(--c-hair-strong) calc(100% - 40px), transparent);
}

.tl-year[hidden]{ display:none; }

.tl-ymark{
  display:grid; grid-template-columns:120px 40px 1fr; align-items:baseline;
  gap:0; margin:54px 0 26px;
}
.tl-ymark b{
  grid-column:1 / 3; font-family:var(--f-display); font-weight:200;
  font-size:clamp(34px,4vw,54px); line-height:1; color:var(--c-blue);
  letter-spacing:.01em; font-variant-numeric:tabular-nums;
}
.tl-ymark span{
  font-family:var(--f-display); font-weight:300; font-size:15px;
  color:var(--c-text-muted); line-height:1.5;
}
.tl-year:first-child .tl-ymark{ margin-top:14px; }

.tl-row{
  display:grid; grid-template-columns:120px 40px 1fr; align-items:start;
  padding:0 0 30px;
}
.tl-row[hidden]{ display:none; }

/* The date column is fixed width and right-aligned against the spine, so
   every date in six years sits on the same vertical edge. */
.tl-when{
  display:flex; flex-direction:column; align-items:flex-end; gap:7px;
  padding-top:6px; text-align:right;
}
.tl-when b{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--c-text); font-weight:400; white-space:nowrap;
}

.tl-node{ position:relative; height:100%; }
.tl-node i{
  position:absolute; left:19px; top:11px; width:9px; height:9px; border-radius:50%;
  background:var(--c-text-muted); box-shadow:0 0 0 5px var(--c-black);
  transition:transform .3s var(--ease), background .3s ease;
}
.tl-row[data-category="construction"] .tl-node i{ background:var(--c-blue); }
.tl-row[data-category="announcement"] .tl-node i{ background:var(--c-gold); }
.tl-row:hover .tl-node i{ transform:scale(1.35); }

.tl-card{
  display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:start;
  padding-left:26px;
}
.tl-shot{ display:block; overflow:hidden; background:var(--c-black); aspect-ratio:4/3; }
.tl-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:var(--img-fx); transition:transform .7s var(--ease), filter .4s ease;
}
.tl-row:hover .tl-shot img{ transform:scale(1.04); filter:var(--img-fx-hover); }
/* A text-only post keeps the same left edge as every card that has a photo. */
.tl-card:not(:has(.tl-shot)){ grid-template-columns:1fr; }

.tl-text{ display:block; padding-top:2px; }
.tl-text h3{
  font-family:var(--f-display); font-weight:600; font-size:clamp(17px,1.7vw,21px);
  line-height:1.35; margin:0 0 12px; color:var(--c-text);
}
.tl-text p{
  font-size:14px; line-height:1.85; color:var(--c-text-muted);
  font-weight:300; margin:0; max-width:58ch;
}

@media (max-width:900px){
  /* The spine moves to the edge and the date sits above its own card, which
     keeps the alignment readable once there is no room for two columns. */
  .tl::before{ left:5px; }
  .tl-ymark{ grid-template-columns:1fr; margin:40px 0 20px; padding-left:30px; }
  .tl-ymark b{ grid-column:1; }
  .tl-row{ grid-template-columns:30px 1fr; padding-bottom:26px; }
  .tl-when{
    grid-column:2; grid-row:1; flex-direction:row; align-items:center;
    justify-content:flex-start; text-align:left; gap:12px; padding:0 0 10px;
  }
  .tl-node{ grid-column:1; grid-row:1 / span 2; }
  .tl-node i{ left:1px; top:6px; }
  .tl-card{ grid-column:2; grid-row:2; grid-template-columns:1fr; gap:14px; padding-left:0; }
  .tl-shot{ aspect-ratio:16/10; }
}

/* ============================================================
   HOMEPAGE — LATEST UPDATES
   Replaces the render/reality comparison slider. That module needed
   a pair of shots where the built result flatters the render, and
   no such pair exists in the archive; this puts the three most
   recent posts from the same feed in the space instead.
   ============================================================ */
.home-news{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--c-hair); border:1px solid var(--c-hair); margin-top:44px;
}
.hn-card{
  background:var(--c-black); display:flex; flex-direction:column; text-decoration:none;
  color:inherit; transition:background .3s ease;
}
.hn-card:hover{ background:var(--c-charcoal); }
.hn-media{ display:block; aspect-ratio:16/10; overflow:hidden; }
.hn-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:var(--img-fx); transition:transform .6s var(--ease);
}
.hn-card:hover .hn-media img{ transform:scale(1.05); }
.hn-body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 26px; }
.hn-body .news-meta{ display:flex; align-items:center; gap:12px; }
.hn-title{ font-family:var(--f-display); font-weight:600; font-size:16px; line-height:1.4; color:var(--c-text); }
.hn-text{
  font-size:13px; line-height:1.75; color:var(--c-text-muted); font-weight:300;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:900px){ .home-news{ grid-template-columns:1fr; } }

/* Line-by-line headline reveals. The mask is what makes each line appear to
   rise from behind a solid edge rather than simply fading. */
.ln-mask{
  display:block; overflow:hidden;
  /* Breathing room so ascenders and descenders are never clipped by the
     reveal mask. The negative margin cancels it, so spacing is unchanged. */
  /* 0.22em clears Poppins' full glyph box (about 1.35em) against a
     1.02 line-height. Measured, not guessed: at 0.12em the hero was
     still clipping by 5px. */
  padding:0.22em 0.06em; margin:-0.22em -0.06em;
}
.ln{ display:block; will-change:transform; }
.ln-w{ display:inline-block; }
@media (prefers-reduced-motion:reduce){
  .ln{ transform:none !important; }
}

/* ============================================================
   FACILITIES — FEATURED PHOTOGRAPHS
   Only four of the twelve systems have real photography, so the
   photographs sit in their own strip above the complete icon
   list rather than being mixed into it. Four photos scattered
   among eight icons reads as missing assets; four photos above
   a full list reads as deliberate.
   ============================================================ */
/* Seven equal tiles. The seventh used to run full width as a band, which made
   EV charging four times the size of every other system on the page and read
   as a feature rather than one item in a list. It is now the same size as the
   rest and centred in the last row, so the row is deliberate rather than a
   gap. The hairline grid is drawn per tile instead of by the container's
   background, otherwise the two empty cells beside it would paint as blocks. */
.fac-featured{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:transparent; margin-top:48px;
}
.fac-shot{ outline:1px solid var(--c-hair); outline-offset:0; }
.fac-shot:last-child{ grid-column:2 / 3; }
.fac-shot{ position:relative; margin:0; overflow:hidden; background:var(--c-black); }
.fac-shot img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  filter:var(--img-fx); transition:filter .45s var(--ease), transform .6s var(--ease);
}
.fac-shot:hover img{ filter:var(--img-fx-hover); transform:scale(1.04); }
.fac-shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--c-text);
  background:linear-gradient(180deg, transparent, rgba(11,12,14,.92));
}
@media (max-width:900px){
  /* Two columns and seven tiles leaves the last one alone again — at this
     width it simply runs the full row rather than being centred in it. */
  .fac-featured{ grid-template-columns:repeat(2,1fr); margin-top:36px; }
  .fac-shot:last-child{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .fac-featured{ grid-template-columns:1fr 1fr; }
  .fac-shot figcaption{ font-size:9px; padding:26px 10px 10px; letter-spacing:.05em; }
}


/* ============================================================
   ANIMATION HELPERS (Black Flag / LSCE style)
   ============================================================ */
.clip-wrap {
  overflow: hidden;
  position: relative;
  padding: 6px 0; /* Prevent Arabic ascenders/descenders from being clipped */
}
.clip-wrap .clip-inner {
  display: block;
  transform: translateY(120%);
  will-change: transform;
}
.reveal-img-wrap {
  overflow: hidden;
  position: relative;
  clip-path: inset(100% 0 0 0); /* Bottom-to-top wipe */
  will-change: clip-path;
  border-radius: 2px; /* Smooth the edge — removes the hard line artifact */
}
.reveal-img-wrap img, .reveal-img-wrap video {
  transform: scale(1.12);
  transform-origin: center center;
  will-change: transform;
}
/* Remove borders from images inside overlap/fullwidth layouts */
.teaser-overlap .teaser-media,
.teaser-fullwidth .teaser-media {
  border: none;
}
.teaser-overlap,
.teaser-fullwidth {
  border-bottom: none;
}
/* ============================================================
   IMPRESSIVE LAYOUT MODIFIERS (Overlap & Fullwidth)
   ============================================================ */
@media (min-width: 900px) {
  .teaser-overlap .teaser-grid {
    grid-template-columns: 6fr 10fr; /* text 6, image 10 */
    gap: 0;
  }
  .teaser-overlap.reverse .teaser-grid {
    grid-template-columns: 10fr 6fr; /* image 10, text 6 */
    direction: ltr; /* Override default reverse RTL */
  }
  
  .teaser-overlap .teaser-copy {
    background: var(--c-bg); 
    padding: 80px;
    margin-right: -120px; /* pull right over image */
    margin-left: 0;
    z-index: 10;
    position: relative;
    border: none;
    box-shadow: 20px 20px 80px rgba(0,0,0,0.4);
  }
  .teaser-overlap.reverse .teaser-copy {
    margin-right: 0;
    margin-left: -120px; /* pull left over image */
    grid-row: 1;
    grid-column: 2; /* put text on the right */
    box-shadow: -20px 20px 80px rgba(0,0,0,0.4);
  }
  .teaser-overlap.reverse .teaser-media {
    grid-row: 1;
    grid-column: 1; /* put image on the left */
  }
}

.teaser-fullwidth {
  padding: 0;
}
.teaser-fullwidth .wrap {
  max-width: 100%;
  padding: 0;
}
.teaser-fullwidth .teaser-grid {
  display: block;
  position: relative;
}
.teaser-fullwidth .teaser-media {
  aspect-ratio: auto;
  height: 80vh;
  border: none;
}
.teaser-fullwidth .teaser-copy {
  position: absolute;
  top: 50%;
  left: 8vw;
  transform: translateY(-50%);
  background: rgba(11,12,14,0.85);
  backdrop-filter: blur(20px);
  padding: 80px;
  max-width: 500px;
  z-index: 10;
  border: none;
}
@media (max-width: 900px) {
  .teaser-fullwidth .teaser-copy {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    max-width: 100%;
    border: none;
    padding: 40px 20px;
  }
  .teaser-fullwidth .teaser-media {
    height: 50vh;
  }
}
/* ============================================================
   CONSTRUCTION TIMELINE — horizontal scroll gallery
   ============================================================ */
.timeline-section {
  padding: 120px 0 80px;
  border-bottom: none;
  overflow: hidden;
}
.timeline-section .wrap {
  margin-bottom: 60px;
}
.timeline-track {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--c-blue) rgba(255,255,255,0.06);
  padding: 0 clamp(20px, 4vw, 80px);
  cursor: grab;
}
.timeline-track:active {
  cursor: grabbing;
}
.timeline-track::-webkit-scrollbar {
  height: 4px;
}
.timeline-track::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
}
.timeline-track::-webkit-scrollbar-thumb {
  background: var(--c-blue);
  border-radius: 2px;
}
.timeline-rail {
  display: flex;
  gap: 24px;
  padding-bottom: 24px;
  width: max-content;
}
.timeline-card {
  flex: 0 0 auto;
  width: 380px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
}
.timeline-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: var(--img-fx);
  transition: transform 0.6s var(--ease);
}
.timeline-card:hover img {
  transform: scale(1.04);
}
.timeline-date {
  display: block;
  padding: 14px 20px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  border-top: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 900px) {
  .timeline-card {
    width: 280px;
  }
  .timeline-card img {
    height: 200px;
  }
  .timeline-section {
    padding: 80px 0 60px;
  }
}
/* (Removed: leftover declarations from the old construction gallery, whose
   selectors had been deleted. They broke CSS parsing for the rules after them.) */

/* ---- Page endings: two actions side by side (primary + secondary) ---- */
.final-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }
.final-cta-inner .final-cta-actions{ margin-top:4px; }

/* ---- Compact ending for text pages (legal) ---- */
.next-step{ border-top:1px solid var(--c-hair); padding:64px 0; }
.next-step-inner{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.next-step-heading{ font-size:clamp(22px, 2.4vw, 30px); font-weight:400; margin:0 0 6px; }
.next-step .final-cta-actions{ justify-content:flex-start; }
.final-cta-extra{ margin-top:22px; font-size:14px; }
.final-cta-extra a{ color:var(--c-muted, #9aa0a6); border-bottom:1px solid currentColor; padding-bottom:2px; }
.final-cta-extra a:hover{ color:var(--c-blue); }
.final-cta-inner .final-cta-actions,
.next-step .final-cta-actions{ display:flex; }
.final-cta-actions .btn-lg{ padding:20px 30px; }
@media (max-width:560px){ .final-cta-actions .btn{ width:100%; justify-content:center; } }

/* ---- Photo heroes (careers, procurement): real site photography behind the
   heading, under a dark scrim so the type stays readable. ---- */
.photo-hero{ position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + 140px) !important; padding-bottom:110px !important; }
.photo-hero-media{ position:absolute; inset:0; z-index:0; }
.photo-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:var(--img-fx); }
.photo-hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,13,.72) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,.92) 100%); }
.photo-hero > .wrap{ position:relative; z-index:1; }
.photo-hero .lede{ color:var(--c-text); max-width:640px; }

/* ---- Supporting photo beside a form ---- */
.page-figure{ margin:34px 0 0; border:1px solid var(--c-hair-strong); background:var(--c-charcoal); }
.page-figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:var(--img-fx); }
.page-figure figcaption{ padding:12px 16px; font-size:12px; line-height:1.5; color:var(--c-text-muted); }
.proc-notes .page-figure{ margin-top:0; }
.applying-for-banner[hidden]{ display:none !important; }
/* Photo heroes: darken only the side the text sits on, so the photo reads. */
.photo-hero-media::after{
  background:
    linear-gradient(90deg, rgba(10,11,13,.88) 0%, rgba(10,11,13,.6) 42%, rgba(10,11,13,.12) 100%),
    linear-gradient(180deg, rgba(10,11,13,.35) 0%, rgba(10,11,13,0) 30%, rgba(10,11,13,0) 70%, rgba(10,11,13,.9) 100%);
}

/* ============================================================
   IMAGE MOTION (see js/motion.js, section 4)
   GSAP owns the transform of every managed image, so no CSS may
   transition it — a CSS transition re-eases each GSAP frame and makes
   pictures feel rubbery. Only the colour treatment eases here, slowly.
   ============================================================ */
.lux-frame{ overflow:hidden; }
.lux-frame img, .lux-frame video{
  transition:filter 1.4s cubic-bezier(.19,1,.22,1) !important;
  will-change:transform;
}
.lux-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:#0b0c0e; opacity:0;
}
.lux-frame figcaption{ z-index:2; }
/* Hero slides dissolve into one another instead of switching. */
.hero-slide{ transition:opacity 2.6s cubic-bezier(.45,0,.2,1); }
/* Gallery thumbnails warm up slowly instead of snapping. */
.ag-thumb{ transition:filter 1.1s cubic-bezier(.19,1,.22,1) !important; }
@media (prefers-reduced-motion:reduce){
  .lux-veil{ display:none; }
  .hero-slide{ transition:opacity .01s; }
}

/* No masks on images: the old bottom-up wipe read as a slide transition. */
.reveal-img-wrap{ clip-path:none !important; }
.reveal-img-wrap img, .reveal-img-wrap video{ transform:none; }
.lux-veil{ display:none !important; }
.lux-frame{ background:#0b0c0e; }

/* ============================================================
   MENU (tools/build-nav.py)
   Each dropdown item says what is on the page, so a visitor can
   choose without clicking around to find out.
   ============================================================ */
.has-dropdown .dropdown{ min-width:270px; padding:8px 0; }
.dropdown a{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:5px; padding:13px 22px; white-space:normal; }
.dropdown .dd-title{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-text); }
.dropdown .dd-desc{
  font-family:var(--f-body, inherit); font-size:12px; line-height:1.4; letter-spacing:0;
  text-transform:none; color:var(--c-text-muted);
}
.dropdown a:hover .dd-title, .dropdown a.active .dd-title{ color:var(--c-blue); }
.dropdown a.active{ background:rgba(60,173,241,.06); }

/* Footer: the same groups as the menu, as columns — one map of the site. */
.footer-nav{ display:grid; grid-template-columns:repeat(4, minmax(150px, auto)); gap:28px 56px; }
.footer-col-title{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-text); margin-bottom:16px;
}
.footer-col .footer-links{ display:flex; flex-direction:column; gap:11px; }
@media (max-width:900px){ .footer-nav{ grid-template-columns:repeat(2, minmax(140px, 1fr)); } }
/* Four items in the bar: give them room to breathe. */
.nav-links{ gap:40px; }
@media (max-width:1180px){ .nav-links{ gap:28px; } }

/* Quieter menu: no arrows, no descriptions, more air. */
.nav-links{ gap:46px; }
.has-dropdown .dropdown{ min-width:220px; padding:14px 0; }
.dropdown a{ padding:11px 28px; }
.dropdown .dd-title{ font-size:10.5px; letter-spacing:.16em; color:var(--c-text-muted); }
.dropdown a:hover .dd-title, .dropdown a.active .dd-title{ color:var(--c-text); }
.dropdown a:hover{ background:transparent; }
.dropdown a.active{ background:transparent; }
.dropdown a.active .dd-title{ color:var(--c-blue); }
@media (max-width:1180px){ .nav-links{ gap:32px; } }

/* ============================================================
   THE ELEMENTS THAT DEFINE SKYWALK (ecosystem.html)
   Editorial rows: one element at a time, large image, short text,
   generous space between. Alternates sides; stacks on phones.
   ============================================================ */
.elements-list{ position:relative; z-index:1; margin-top:clamp(72px, 9vw, 120px);
  display:flex; flex-direction:column; gap:clamp(96px, 11vw, 168px); }
.element-row{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(40px, 6vw, 104px); align-items:center; }
.element-row:nth-child(even){ grid-template-columns:minmax(0,4fr) minmax(0,7fr); }
.element-row:nth-child(even) .element-media{ order:2; }
.element-media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:#0b0c0e; }
.element-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:var(--img-fx); }
.element-index{ display:flex; align-items:center; gap:16px; margin-bottom:30px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; color:var(--c-gold); }
.element-index::after{ content:""; width:48px; height:1px; background:var(--c-gold); opacity:.6; }
.element-text h3{ font-family:var(--f-display); font-weight:500; font-size:clamp(28px, 3vw, 42px);
  line-height:1.1; letter-spacing:-.01em; margin:0 0 22px; }
.element-text p{ font-size:15px; line-height:1.85; font-weight:300; color:var(--c-text-muted); margin:0; max-width:400px; }
@media (max-width:900px){
  .element-row, .element-row:nth-child(even){ grid-template-columns:1fr; gap:30px; }
  .element-row:nth-child(even) .element-media{ order:0; }
  .elements-list{ gap:80px; }
}

/* ============================================================
   FACILITIES (ecosystem.html): small thumbnails beside plain labels.
   The systems matter, the plant-room photographs do not, so the
   pictures are kept as small as they can be while still reading.
   ============================================================ */
.fac-featured{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important; gap:0 !important;
  border-top:1px solid var(--c-hair); margin-top:56px; }
.fac-shot, .fac-shot:last-child{ grid-column:auto !important; outline:none !important;
  display:flex; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--c-hair); background:transparent; }
.fac-shot img{ width:64px !important; height:64px; aspect-ratio:1/1 !important; flex:0 0 64px; object-fit:cover; }
.fac-shot:hover img{ transform:none !important; }
.fac-shot figcaption{ position:static !important; background:none !important; padding:0 !important;
  font-family:var(--f-body, inherit); font-size:14px !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--c-text-muted); line-height:1.4; }
.fac-featured .fac-shot:nth-child(odd){ padding-inline-end:28px; }

/* ============================================================
   LIFE AT SKYWALK (ecosystem.html) — chapters
   ============================================================ */
.life-intro{ padding:calc(var(--nav-h) + 110px) 0 40px; }
.life-intro .h-section{ font-size:clamp(40px, 5.4vw, 76px); line-height:1.02; }
.life-intro .lede{ margin-top:24px; max-width:620px; }
.chapter-nav{ display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:56px; padding-top:28px; border-top:1px solid var(--c-hair); }
.chapter-nav a{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-text-muted); transition:color .6s ease; }
.chapter-nav a:hover{ color:var(--c-text); }

.life-chapter{ padding:clamp(110px, 12vw, 180px) 0 0; scroll-margin-top:calc(var(--nav-h) + 10px); }
.life-chapter:last-of-type{ padding-bottom:clamp(110px, 12vw, 180px); }
.chapter-head{ max-width:680px; margin-bottom:clamp(64px, 7vw, 100px); }
.chapter-num{ display:flex; align-items:center; gap:14px; margin-bottom:26px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-gold); }
.chapter-num span:first-child::after{ content:""; display:inline-block; width:36px; height:1px; background:var(--c-gold); opacity:.6; margin-inline-start:14px; vertical-align:middle; }
.chapter-head .lede{ margin-top:22px; }
.life-chapter .elements-list{ margin-top:0; }

/* Grouped line-up */
.tenant-group + .tenant-group{ margin-top:64px; }
.tenant-group-title{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-text); margin-bottom:18px; }
.tenant-group .tenant-grid{ margin-top:0; }

/* Facilities inside Work */
.fac-head{ margin-top:clamp(80px, 9vw, 120px); }
.fac-head + .fac-featured{ margin-top:22px; }

/* Day to night: an unhurried editorial sequence, captions beneath */
.dn-gallery{ display:grid; grid-template-columns:repeat(12, 1fr); gap:clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px); }
.dn-shot{ margin:0; }
.dn-shot.md-a{ grid-column:span 7; }
.dn-shot.md-b{ grid-column:span 5; align-self:end; }
.dn-frame{ position:relative; overflow:hidden; aspect-ratio:4/3; background:#0b0c0e; }
.dn-shot.md-b .dn-frame{ aspect-ratio:4/5; }
.dn-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:var(--img-fx); }
.dn-shot figcaption{ margin-top:16px; font-size:13px; color:var(--c-text-muted); }
@media (max-width:760px){
  .dn-gallery{ grid-template-columns:1fr; gap:48px; }
  .dn-shot.md-a, .dn-shot.md-b{ grid-column:auto; }
  .dn-shot.md-b .dn-frame{ aspect-ratio:4/3; }
}

/* ============================================================
   SKYWALK DEVELOPMENTS (about.html) — calm editorial
   ============================================================ */
.about-lux-hero{ padding:calc(var(--nav-h) + 120px) 0 90px; }
.about-lux-title{ font-family:var(--f-display); font-weight:500; font-size:clamp(44px, 6vw, 88px); line-height:1.02; letter-spacing:-.02em; margin:0; }
.about-lux-hero .lede{ margin-top:28px; max-width:600px; }
.about-lux-link{ margin-top:40px; background:none; border:0; padding:0 0 4px; cursor:pointer;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-text);
  border-bottom:1px solid var(--c-gold); }
.about-lux-image .about-hero-shot{ margin:0; aspect-ratio:21/9; max-height:82vh; overflow:hidden; border:0; }
.about-lux-image .about-hero-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-narrow{ max-width:860px; }
.about-lux-statements{ padding:clamp(110px, 12vw, 170px) 0 0; }
.about-statement + .about-statement{ margin-top:clamp(80px, 9vw, 120px); }
.as-label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-gold); margin-bottom:24px; }
.as-text{ font-family:var(--f-display); font-weight:300; font-size:clamp(22px, 2.4vw, 32px); line-height:1.5; color:var(--c-text); margin:0; }
.about-lux-vision{ padding:clamp(120px, 13vw, 190px) 0; text-align:center; }
.about-lux-vision .about-narrow{ margin:0 auto; }
.about-vision-quote{ margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(30px, 3.8vw, 54px); line-height:1.25; letter-spacing:-.01em; }
.about-pair-grid{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(24px, 4vw, 56px); align-items:start; }
.about-pair-grid .about-photo-band{ margin:0; overflow:hidden; border:0; }
.about-pair-grid .ap-a{ aspect-ratio:4/3; }
.about-pair-grid .ap-b{ aspect-ratio:4/5; margin-top:clamp(80px, 10vw, 160px); }
.about-pair-grid img{ width:100%; height:100%; object-fit:cover; display:block; filter:var(--img-fx); }
.about-lux-values{ padding:clamp(120px, 13vw, 180px) 0; }
.av-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(56px, 6vw, 88px) clamp(48px, 7vw, 120px); margin-top:48px; }
.av-num{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--c-gold); margin-bottom:18px; }
.av-item h3{ font-family:var(--f-display); font-weight:500; font-size:clamp(22px, 2vw, 28px); line-height:1.2; margin:0 0 14px; }
.av-item p{ font-size:15px; line-height:1.8; font-weight:300; color:var(--c-text-muted); margin:0; max-width:420px; }
@media (max-width:760px){
  .about-pair-grid, .av-grid{ grid-template-columns:1fr; }
  .about-pair-grid .ap-b{ margin-top:0; }
  .about-lux-image .about-hero-shot{ aspect-ratio:4/3; }
}
.dn-shot.md-full{ grid-column:1 / -1; }
.dn-shot.md-full .dn-frame{ aspect-ratio:21/9; }
@media (max-width:760px){ .dn-shot.md-full .dn-frame{ aspect-ratio:4/3; } }
.life-pair{ margin-bottom:clamp(80px, 9vw, 120px); }
/* A tenant's own mark, shown quietly under the chapter text. */
.chapter-logo{ margin-top:30px; }
.chapter-logo img{ height:40px; width:auto; opacity:.9; }
@media (max-width:760px){ .chapter-logo img{ height:32px; } }

/* A partner brand's own mark standing in for the row's title: the logo
   IS the heading here, so it gets the heading's size and spacing, and the
   text heading stays for screen readers and search engines. */
.vis-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.element-logo{ display:block; height:86px; width:auto; margin:0 auto 26px 0; opacity:.95; }
@media (max-width:760px){ .element-logo{ height:64px; } }

/* ============================================================
   PHASE 1 BUILDINGS (js/masterplan-buildings.js)
   Quiet numbered markers; gold = Retail & F&B, white = Retail +
   Offices & Clinics. The legend lights one kind and dims the other.
   ============================================================ */
.bld-marker{
  position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(11,12,14,.78); backdrop-filter:blur(3px);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.02em; color:var(--c-text);
  border:1px solid rgba(237,237,237,.75);
  transition:transform .5s cubic-bezier(.19,1,.22,1), opacity .5s ease, background .4s ease, border-color .4s ease;
}
.bld-marker.bld-retail{ border-color:var(--c-gold); color:var(--c-gold); }
.bld-marker:hover, .bld-marker:focus-visible{ transform:scale(1.18); background:var(--c-black); outline:none; }
.bld-marker.is-dim{ opacity:.18; }
.bld-marker.is-lit{ transform:scale(1.12); box-shadow:0 0 0 6px rgba(201,162,75,.14); }
.bld-marker.bld-mixed.is-lit{ box-shadow:0 0 0 6px rgba(237,237,237,.12); }

.bld-legend{
  position:absolute; left:20px; bottom:20px; z-index:7; display:flex; flex-wrap:wrap; gap:6px;
  background:rgba(11,12,14,.82); backdrop-filter:blur(4px); border:1px solid var(--c-hair-strong); padding:6px;
}
.bld-legend button{
  display:flex; align-items:center; gap:8px; padding:9px 14px; background:transparent; border:1px solid transparent;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-muted);
  cursor:pointer; transition:color .4s ease, border-color .4s ease;
}
.bld-legend button:hover{ color:var(--c-text); }
.bld-legend button.is-on{ color:var(--c-text); border-color:var(--c-hair-strong); }
.bld-legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; border:1px solid; }
.bld-legend .dot.retail{ border-color:var(--c-gold); background:rgba(201,162,75,.3); }
.bld-legend .dot.mixed{ border-color:rgba(237,237,237,.8); background:rgba(237,237,237,.15); }
.bld-hint{
  position:absolute; right:20px; bottom:26px; z-index:7; pointer-events:none;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-muted);
  background:rgba(11,12,14,.7); padding:8px 12px;
}

/* The card: floor by floor */
.bld-floor{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:14px 0; border-top:1px solid var(--c-hair); list-style:none; }
.bld-floor:last-child{ border-bottom:1px solid var(--c-hair); }
.bf-floor{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-gold); padding-top:2px; }
.bf-use{ font-size:14.5px; line-height:1.6; color:var(--c-text); }
#bmFeatures{ padding:0; margin:0 0 28px; gap:0; }

/* Find Your Space: the building note */
.vip-building-note{
  margin:0 0 26px; padding:14px 18px; border:1px solid var(--c-hair-strong); border-inline-start:2px solid var(--c-gold);
  font-size:13.5px; line-height:1.6; color:var(--c-text-muted);
}
.intent-card[hidden]{ display:none !important; }

@media (max-width:760px){
  .bld-marker{ width:24px; height:24px; margin:-12px 0 0 -12px; font-size:8.5px; }
  .bld-legend{ left:10px; right:10px; bottom:10px; }
  .bld-legend button{ padding:7px 9px; font-size:9px; }
  .bld-hint{ display:none; }
  .bld-floor{ grid-template-columns:1fr; gap:6px; }
}
.pm-features .bld-floor::before{ display:none !important; content:none; }
.pm-features .bld-floor{ padding-inline-start:0; }