/* ==========================================================================
   Coligo Real Estate — prototype stylesheet
   All colour, type and spacing values are taken from
   Coligo Brand Guidelines v1.0. Nothing here invents a value.
   ========================================================================== */

:root{
  /* core (fixed, from the logo) */
  --navy:   #003577;
  --grey:   #A6A6A6;   /* graphic use only — never text on white */
  /* extended (proposed palette, section 03) */
  --ink:    #011B3A;
  --slate:  #5B6675;
  --sand:   #C6A15B;
  --mist:   #EEF1F5;
  --white:  #FFFFFF;
  --signal: #0B4FA8;   /* digital only: links and interactive states */

  /* type */
  --serif:   'DM Serif Display', Georgia, 'Times New Roman', serif;   /* headlines */
  --display: 'Inter', 'Segoe UI', Arial, sans-serif;                 /* labels, buttons, UI */
  --body:    'Inter', 'Segoe UI', Arial, sans-serif;

  /* spacing: multiples of 4px */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;

  --gutter: clamp(24px, 5vw, 72px);
  --maxw: 1280px;
  --radius: 4px;               /* buttons: 4px, never fully rounded */
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 104px; }

body{
  margin: 0;
  background: var(--white);
  color: var(--ink);                     /* body copy is Ink, never navy tints, never grey */
  font-family: var(--body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-x: hidden;
}

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

a{ color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
.rcard:focus-visible{
  outline: 2px solid var(--signal); outline-offset: 3px;
}

.wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.measure{ max-width: 62ch; }             /* 55–75 characters */
.wide-only{ display: none; }
@media (min-width: 800px){ .wide-only{ display: inline; } }

/* --------------------------------------------------------------------------
   Type levels. Never more than three on one asset.
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.20em;               /* +20% */
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 var(--s4);
}
.eyebrow.sand{ color: var(--sand); }

.display, .h1, .h2, .h3{
  margin: 0 0 var(--s6);
  text-wrap: balance;
}
/* headlines in the serif, at its single weight: never synthesise a bold */
.display, .h1, .h2{ font-family: var(--serif); font-weight: 400; }
.display{ font-size: clamp(44px, 7vw, 76px); line-height: 1.02; letter-spacing: -0.015em; }
.h1{ font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.01em; }
.h2{ font-size: clamp(30px, 4vw, 42px); line-height: 1.12; letter-spacing: -0.01em; }
.h3{ font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 26px; letter-spacing: -0.015em; margin-bottom: var(--s3); }

.intro{ font-size: 19px; line-height: 30px; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 var(--s6); }
.legal{ font-size: 11px; line-height: 17px; color: var(--slate); }

/* --------------------------------------------------------------------------
   Buttons and fields
   -------------------------------------------------------------------------- */
.btn{
  display: inline-block;
  font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 15px var(--s6);
  border: 0; border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background: var(--navy); color: var(--white); }
.btn-primary:hover{ background: var(--ink); }
.btn-sand{ background: var(--sand); color: var(--ink); }
.btn-sand:hover{ background: #b8924e; }
.btn-ghost{
  background: transparent; color: var(--ink);
  border: 1px solid var(--grey); padding: 12px var(--s4); font-size: 13px;
}
.btn-ghost:hover{ border-color: var(--navy); color: var(--navy); }

.field{ display: grid; gap: 6px; min-width: 0; }
.field > span{
  font-family: var(--display); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.field select, .field input{
  font-family: var(--body); font-size: 15px; line-height: 22px;
  padding: 11px var(--s3);
  border: 1px solid #D3DAE4;
  border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  min-width: 0; width: 100%;
}

/* --------------------------------------------------------------------------
   The arc — the single graphic device. Stroke only, never filled,
   cropped by an edge, one per layout.
   -------------------------------------------------------------------------- */
.arc{
  position: fixed; top: 50%; right: -48vmin;
  width: 112vmin; height: 112vmin;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 30;                           /* over section grounds, under the header */
  overflow: visible;
}
.arc circle{ fill: none; stroke-linecap: butt; }
.arc-track{ stroke: var(--navy); stroke-opacity: .10; stroke-width: 1.1; }
.arc-progress{
  stroke: var(--navy); stroke-opacity: .26; stroke-width: 1.1;
  transition: stroke .5s ease, stroke-opacity .5s ease;
}
/* arc-dark, not on-navy: `.on-navy` is a section class and must not cascade to body */
body.arc-dark .arc-track{ stroke: var(--sand); stroke-opacity: .16; }
body.arc-dark .arc-progress{ stroke: var(--sand); stroke-opacity: .42; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s8);
  padding: var(--s2) var(--gutter);
  background: var(--white);
  border-bottom: 1px solid var(--mist);
}
.brand img{ width: 96px; }                /* above the 90px full-lockup minimum */
.site-nav{ display: none; gap: var(--s8); margin-left: auto; }
.site-nav a{
  font-family: var(--display); font-weight: 600; font-size: 14px;
  color: var(--ink); text-decoration: none;
}
.site-nav a:hover{ color: var(--signal); }
.header-cta{ margin-left: auto; font-size: 14px; padding: 12px var(--s4); }
@media (min-width: 900px){ .site-nav{ display: flex; } .header-cta{ margin-left: 0; } }
@media (max-width: 560px){ .header-cta{ display: none; } }

/* --------------------------------------------------------------------------
   HERO — search first, over photography, on a navy scrim
   -------------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: min(78svh, 720px);
  display: flex; align-items: flex-end;
  padding: var(--s24) 0 var(--s16);
  overflow: hidden;
  background: var(--navy);
  z-index: 2;
}
/* The scrim above the photograph carries the 55% navy the book requires. */
.hero-media{
  position: absolute; inset: 0;
  background: linear-gradient(148deg, #05265a 0%, #003577 46%, #012a60 100%);
}
.hero-media img{
  /* 20% taller than the hero so the parallax drift never shows an edge */
  position: absolute; left: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover; object-position: center 62%;
  will-change: transform;
}
/* scaffolding label for the empty image slot — cornered so it never lands
   on the headline the way a centred one does */
.media-note{
  position: absolute; top: var(--s4); right: var(--gutter);
  margin: 0; max-width: 46%; text-align: right;
  font-family: var(--display); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
/* Section 05: text over photography sits on a navy overlay of at least 55%.
   Weighted toward the text column so the picture still breathes on the right. */
.hero-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(1,27,58,.86) 0%, rgba(1,27,58,.70) 38%,
                           rgba(0,53,119,.34) 72%, rgba(0,53,119,.26) 100%),
    linear-gradient(180deg, rgba(0,53,119,.30) 0%, rgba(1,27,58,.52) 100%);
}
@media (max-width: 939px){
  /* narrow layouts put copy across the full width, so the scrim must too */
  .hero-scrim{
    background: linear-gradient(180deg, rgba(1,27,58,.58) 0%, rgba(1,27,58,.80) 100%);
  }
}
.hero-body{ position: relative; width: 100%; }
.hero .display{ color: var(--white); }
.hero-intro{ color: rgba(255,255,255,.84); max-width: 56ch; }
.hero-slogan{
  margin: calc(var(--s6) * -1 + 6px) 0 var(--s6);
  font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3;
  color: var(--sand);
}

.hero-search{
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3);
  background: var(--white);
  padding: var(--s4);
  border-radius: var(--radius);
  max-width: 560px;
}
.hero-search .field{ flex: 1 1 240px; }
.hero-search .btn{ flex: 0 0 auto; padding: 13px var(--s6); }

/* --------------------------------------------------------------------------
   SEARCH — map and list, in step
   -------------------------------------------------------------------------- */
.search{ padding: var(--s24) 0 var(--s16); position: relative; background: var(--white); }
.search-head{
  display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: end; justify-content: space-between;
}
.search-head .h2{ margin-bottom: 0; }
.search-note{ margin: 0; font-size: 13px; line-height: 20px; color: var(--slate); }

.filters{
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  margin-top: var(--s6);
  padding: var(--s4) var(--gutter);
}
.filters .btn-ghost{ justify-self: start; }
.field-sort{ grid-column: span 2; }
@media (max-width: 720px){ .field-sort{ grid-column: auto; } }

.split{
  display: grid; gap: var(--s6);
  grid-template-columns: 1fr;
  margin-top: var(--s6);
}
@media (min-width: 1000px){
  .split{ grid-template-columns: minmax(380px, 460px) 1fr; align-items: start; }
}

/* --- results list --- */
.results{ display: grid; gap: var(--s3); align-content: start; }
@media (min-width: 1000px){
  .results{
    height: 74svh; min-height: 560px;
    overflow-y: auto; overscroll-behavior: contain;
    padding-right: var(--s3);
  }
}
.results-empty{ margin: 0; padding: var(--s8) 0; color: var(--slate); }

.rcard{
  display: grid; grid-template-columns: 164px 1fr; gap: var(--s4);
  border: 1px solid var(--mist);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--s3);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.rcard:hover{ border-color: #D3DAE4; }
.rcard.is-active{ border-color: #D3DAE4; border-left-color: var(--sand); background: #FBFCFD; }
@media (max-width: 480px){ .rcard{ grid-template-columns: 1fr; } }

.rcard-media{
  position: relative; aspect-ratio: 4 / 3;
  background: var(--mist); border-radius: 2px;
  overflow: hidden; cursor: zoom-in;
}
.rcard-media.is-empty{
  display: grid; place-content: center; text-align: center; padding: var(--s2); cursor: default;
}
.rcard-media.is-empty span{
  font-family: var(--display); font-weight: 600; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--slate);
}
.rcard-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.rcard:hover .rcard-media img{ transform: scale(1.045); }

.photo-count{
  position: absolute; right: 5px; bottom: 5px;
  background: rgba(1,27,58,.78); color: var(--white);
  font-family: var(--display); font-weight: 600; font-size: 9px;
  letter-spacing: .1em; padding: 3px 6px; border-radius: 2px;
}
/* every placeholder says so, on the image, unmissably */
.photo-flag{
  position: absolute; left: 5px; top: 5px;
  background: rgba(1,27,58,.78); color: var(--sand);
  font-family: var(--display); font-weight: 600; font-size: 8px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 2px;
}
.card-flag{
  display: inline-block; margin: 0 0 6px;
  background: var(--navy); color: var(--sand);
  font-family: var(--display); font-weight: 600; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 2px;
}
.rcard-body{ min-width: 0; }
.rcard-price{
  margin: 0 0 2px;
  font-family: var(--display); font-weight: 800;
  font-size: 22px; line-height: 1.1; letter-spacing: -0.03em; color: var(--navy);
}
.rcard-title{ margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.rcard-title em{ display: block; font-style: normal; font-size: 12px; color: var(--slate); }
.rcard-meta{ margin: var(--s2) 0 0; font-size: 12px; line-height: 18px; color: var(--slate); }

/* gross struck through, net standing: the whole argument, on every card */
.yields{ display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.yields i{
  display: block; font-style: normal;
  font-family: var(--display); font-weight: 600; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--slate);
}
/* the line-through goes on the figure only — a struck-through label reads as
   a mistake, and text-decoration on the parent cannot be removed by a child */
.y-gross b{
  font-family: var(--display); font-weight: 600; font-size: 15px;
  color: var(--slate); text-decoration: line-through;
  text-decoration-color: var(--grey); text-decoration-thickness: 1px;
}
.y-sep{ width: 14px; height: 1px; background: var(--grey); }
.y-net b{
  font-family: var(--display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; color: var(--navy);
}
.rcard-charge{ margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--slate); }

.working-toggle{
  margin-top: var(--s3);
  background: none; border: 0; padding: 0;
  font-family: var(--display); font-weight: 600; font-size: 12px;
  color: var(--signal); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.working{ margin-top: var(--s3); border-top: 1px solid var(--mist); }
.working div{
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: 7px 0; border-bottom: 1px solid var(--mist);
  font-size: 12px; line-height: 18px;
}
.working em{ display: block; font-style: normal; color: var(--slate); font-size: 11px; }
.working b{ font-family: var(--display); font-weight: 700; color: var(--navy); white-space: nowrap; }
.working-total{ border-bottom: 0 !important; }
.working-total span{ font-weight: 600; }
.rcard .legal{ margin: var(--s3) 0 0; }

/* --- viewer: map or massing model --- */
.viewer{ position: relative; z-index: 31; }
@media (min-width: 1000px){ .viewer{ position: sticky; top: 96px; } }
.viewer-switch{ display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.chip{
  font-family: var(--display); font-weight: 600; font-size: 13px;
  padding: 10px var(--s4);
  border: 1px solid var(--mist); border-radius: var(--radius);
  background: var(--mist); color: var(--ink); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover{ border-color: var(--navy); }
.chip.is-active{ background: var(--navy); color: var(--white); border-color: var(--navy); }

.viewer-stage{ position: relative; }
.viewer-pane{ display: none; }
.viewer-pane.is-active{ display: block; }

.map, .model-canvas-wrap{
  height: 74svh; min-height: 560px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--mist);
}
@media (max-width: 999px){ .map, .model-canvas-wrap{ height: 60svh; min-height: 380px; } }
#massing{ display: block; width: 100%; height: 100%; }

/* OSM raster tiles are far too colourful for this palette */
.coligo-tiles{ filter: grayscale(1) contrast(.86) brightness(1.08); }
.coligo-pin img{ display: block; }
.leaflet-container{ font-family: var(--body); background: var(--mist); }

.map-status{
  position: absolute; left: var(--s3); bottom: var(--s3); margin: 0;
  background: var(--white); border: 1px solid var(--mist);
  border-radius: var(--radius); padding: 8px var(--s3);
  font-size: 11px; line-height: 17px; color: var(--slate);
  z-index: 500; max-width: calc(100% - var(--s6));
}

.model-tip{
  position: absolute; pointer-events: none;
  background: var(--navy); color: var(--white);
  padding: var(--s3) var(--s4); border-radius: var(--radius);
  font-size: 13px; line-height: 20px;
  box-shadow: 0 8px 24px rgba(1,27,58,.22);
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap; z-index: 3;
}
.model-tip strong{
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em;
}
.model-tip .tip-sand{ color: var(--sand); }
.model-fallback{
  position: absolute; inset: 0; display: grid; place-content: center;
  margin: 0; padding: var(--s6); text-align: center; color: var(--slate); font-size: 15px;
}
.model-canvas-wrap{ position: relative; }
.model-legal, .search-legal{ margin: var(--s3) 0 0; }
.search-legal{ margin-top: var(--s6); }

/* --------------------------------------------------------------------------
   Communities
   -------------------------------------------------------------------------- */
.communities{ padding: var(--s24) 0; position: relative; background: var(--white); }
.community-grid{
  display: grid; gap: var(--s4);
  grid-template-columns: 1fr;
  margin-top: var(--s8);
}
@media (min-width: 640px){ .community-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .community-grid{ grid-template-columns: repeat(3, 1fr); } }
.community-media{
  position: relative; display: block;
  margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s6);
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.community-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.community-card:hover .community-media img{ transform: scale(1.04); }

.community-card{
  text-align: left; cursor: pointer;
  background: var(--mist); border: 1px solid var(--mist);
  border-radius: var(--radius); padding: var(--s6);
  overflow: hidden;
  font-family: var(--body); color: var(--ink);
  transition: border-color .18s ease, background-color .18s ease;
}
.community-card:hover{ border-color: var(--navy); background: var(--white); }
.community-name{
  margin: 0;
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.community-yield{
  margin: var(--s2) 0 0;
  font-family: var(--display); font-weight: 800;
  font-size: 44px; line-height: 1; letter-spacing: -0.035em; color: var(--navy);
}
.community-yield .pct{ font-size: .55em; }
.community-label{ margin: 6px 0 0; font-size: 12px; line-height: 18px; color: var(--slate); }
.community-note{ margin: var(--s4) 0 0; font-size: 14px; line-height: 22px; }
.community-meta{ margin: var(--s4) 0 0; font-size: 12px; line-height: 18px; color: var(--slate); }
.community-offplan{
  margin: var(--s2) 0 0;
  font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15;
  letter-spacing: -0.005em; color: var(--navy);
}
.community-card .community-meta{ color: var(--signal); font-family: var(--display); font-weight: 600; }

/* --------------------------------------------------------------------------
   Photo viewer
   -------------------------------------------------------------------------- */
.lightbox{
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  padding: var(--s6);
  background: rgba(1,27,58,.94);
}
.lb-figure{
  margin: 0; max-width: min(1100px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column; gap: var(--s3);
}
.lb-figure img{
  max-width: 100%; max-height: 74vh;
  object-fit: contain; border-radius: var(--radius);
  margin-inline: auto;
}
.lb-figure figcaption{
  font-size: 13px; line-height: 20px; color: rgba(255,255,255,.78); text-align: center;
}
.lb-close{
  position: absolute; top: var(--s4); right: var(--s6);
  background: none; border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius);
  color: var(--white); cursor: pointer; padding: 9px var(--s4);
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
}
.lb-close:hover{ border-color: var(--sand); color: var(--sand); }
.lb-nav{
  flex: 0 0 auto;
  background: none; border: 0; color: var(--white);
  font-size: 40px; line-height: 1; cursor: pointer; padding: var(--s3);
  opacity: .7;
}
.lb-nav:hover{ opacity: 1; color: var(--sand); }
@media (max-width: 640px){
  .lb-nav{ position: absolute; bottom: var(--s6); }
  .lb-prev{ left: var(--s6); } .lb-next{ right: var(--s6); }
}

/* --------------------------------------------------------------------------
   Navy sections
   -------------------------------------------------------------------------- */
section.on-navy{ background: var(--navy); color: var(--white); position: relative; z-index: 2; }
section.on-navy .h1, section.on-navy .h2, section.on-navy .h3{ color: var(--white); }
section.on-navy .intro{ color: rgba(255,255,255,.82); }
section.on-navy .eyebrow{ color: rgba(255,255,255,.7); }
section.on-navy .eyebrow.sand{ color: var(--sand); }

.statement{ padding: var(--s32) 0; }
.statement .intro{ max-width: 58ch; }

/* --------------------------------------------------------------------------
   Pillars
   -------------------------------------------------------------------------- */
.pillars{ padding: var(--s24) 0 var(--s32); background: var(--white); position: relative; z-index: 2; }
.pillar-grid{
  display: grid; gap: var(--s12);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--s8);
}
.pillar p{ margin: 0; max-width: 42ch; }
.pillar-num{
  font-family: var(--display); font-weight: 800; font-size: 15px;
  letter-spacing: .04em; color: var(--sand);
  margin: 0 0 var(--s3) !important;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--mist);
}

/* --------------------------------------------------------------------------
   Ask
   -------------------------------------------------------------------------- */
.ask{ padding: var(--s32) 0; }
.ask-inner{ display: grid; gap: var(--s16); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px){ .ask-inner{ grid-template-columns: 1.1fr .9fr; gap: var(--s24); } }
.ask-form{ display: grid; gap: var(--s4); }
.ask-form label{
  display: grid; gap: 6px;
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sand);
}
.ask-form input{
  font-family: var(--body); font-size: 16px; line-height: 24px;
  padding: 13px var(--s4);
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius);
  background: rgba(255,255,255,.06); color: var(--white);
}
.ask-form input::placeholder{ color: rgba(255,255,255,.5); }
.ask-form .btn{ justify-self: start; margin-top: var(--s2); }
.form-note{ margin: 0; font-size: 13px; line-height: 20px; color: var(--sand); min-height: 20px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{ background: var(--mist); padding: var(--s16) 0; position: relative; z-index: 2; }
.footer-inner{ display: grid; gap: var(--s8); align-items: start; }
@media (min-width: 800px){ .footer-inner{ grid-template-columns: 200px 1fr; gap: var(--s16); } }
.footer-logo{ width: 124px; }
.footer-cols{ display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-cols p{ margin: 0; font-size: 14px; line-height: 22px; color: var(--ink); }
.photo-credits{ grid-column: 1 / -1; margin-top: var(--s2); }
.photo-credits summary{
  cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
}
.photo-credits ul{
  margin: var(--s3) 0 0; padding: 0; list-style: none;
  display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.photo-credits b{ font-weight: 600; color: var(--ink); }
.photo-credits a{ color: var(--slate); text-decoration: underline; }
.photo-credits a:hover{ color: var(--signal); }

/* --------------------------------------------------------------------------
   Hero calls to action
   -------------------------------------------------------------------------- */
.hero-ctas{ display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.btn-ghost-light{
  background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.5);
}
.btn-ghost-light:hover{ border-color: var(--sand); color: var(--sand); }

/* --------------------------------------------------------------------------
   Net yield calculator
   -------------------------------------------------------------------------- */
.calc{ padding: var(--s24) 0; background: var(--white); position: relative; z-index: 2; }
.calc-head{
  display: grid; gap: var(--s4) var(--s16); align-items: end;
  grid-template-columns: 1fr; margin-bottom: var(--s12);
}
@media (min-width: 940px){ .calc-head{ grid-template-columns: 1.2fr 1fr; } }
.calc-head .h2, .calc-head .intro{ margin-bottom: 0; }

.calc-grid{ display: grid; gap: var(--s8); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px){ .calc-grid{ grid-template-columns: minmax(300px, 400px) 1fr; gap: var(--s16); } }

.calc-form{
  display: grid; gap: var(--s4);
  background: var(--mist); border-radius: var(--radius); padding: var(--s6);
}
.calc-form input{ font-variant-numeric: lining-nums tabular-nums; }
.calc-form input:focus, .calc-form select:focus{ outline: 2px solid var(--signal); outline-offset: 1px; }
.calc-assume{ margin: 0; }

.calc-figures{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.calc-fig-label{
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.calc-fig-num{
  margin: var(--s2) 0 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(48px, 8vw, 88px); line-height: 1; letter-spacing: -0.04em;
}
.calc-fig-num .pct{ font-size: .45em; letter-spacing: 0; margin-left: 2px; }
.calc-fig-num.is-gross{ color: var(--grey); }
.calc-fig-num.is-net{ color: var(--navy); }
.calc-fig-note{ margin: var(--s2) 0 0; font-size: 14px; color: var(--slate); }

/* the bar is the gross figure; sand is what the costs take, navy is what is left */
.calc-bar{
  display: flex; height: 14px; margin: var(--s8) 0 var(--s6);
  background: var(--mist); border-radius: 2px; overflow: hidden;
}
.calc-bar-net{ background: var(--navy); width: 0; }
.calc-bar-cuts{ background: var(--sand); width: 0; }

.calc-working{ margin-top: 0; }
.calc-working div{ font-size: 14px; line-height: 20px; padding: 10px 0; }
.calc-working em{ font-size: 12px; }
.calc-gap{
  margin: var(--s6) 0 0; padding-left: var(--s4);
  border-left: 3px solid var(--sand);
  font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--ink);
}
.calc-legal{ margin-top: var(--s12); }

/* --------------------------------------------------------------------------
   Shared section head
   -------------------------------------------------------------------------- */
.section-head{
  display: grid; gap: var(--s4) var(--s16); align-items: end;
  grid-template-columns: 1fr; margin-bottom: var(--s8);
}
@media (min-width: 940px){ .section-head{ grid-template-columns: 1.2fr 1fr; } }
.section-head .h2, .section-head .intro{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Launches
   -------------------------------------------------------------------------- */
.launches{ padding: var(--s24) 0; background: var(--white); position: relative; z-index: 2; }
.launch-filter{ display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s8); }
.launch-grid{
  display: grid; gap: var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .launch-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--s8) var(--s6); } }
.launch-card{
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease;
}
.launch-card:hover{ border-color: #D3DAE4; }
.launch-card[hidden]{ display: none !important; }
.launch-media{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.launch-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.launch-card:hover .launch-media img{ transform: scale(1.05); }
.stage{
  position: absolute; top: var(--s3); left: var(--s3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 2px;
  background: rgba(1,27,58,.82); color: var(--white);
  font-family: var(--display); font-weight: 600; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
}
.stage::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sand); }
.stage.is-launching::before{ animation: pulse 1.8s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(198,161,91,.7); }
  100%{ box-shadow: 0 0 0 8px rgba(198,161,91,0); }
}
.launch-body{ padding: var(--s6); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.launch-place{
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.launch-name{ margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--ink); letter-spacing: -0.005em; }
.launch-line{ margin: 0; font-size: 14px; line-height: 22px; color: var(--ink); }
.launch-cta{
  margin-top: auto; padding-top: var(--s4);
  align-self: flex-start;
  background: none; border: 0; padding-left: 0; padding-right: 0; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--signal);
}
.launch-cta span{ display: inline-block; transition: transform .2s ease; }
.launch-cta:hover span{ transform: translateX(4px); }
.launch-legal{ margin-top: var(--s8); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about{ padding: var(--s24) 0 var(--s16); background: var(--mist); position: relative; z-index: 2; }
.about-inner{ display: grid; gap: var(--s12); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px){ .about-inner{ grid-template-columns: .9fr 1.1fr; gap: var(--s24); } }
.about-copy .h2{ margin-bottom: var(--s6); }
.about-body{ margin: 0 0 var(--s8); max-width: 52ch; color: var(--slate); }

/* photo slider: stacked slides, cross-fade with a slow zoom, linear progress bars */
.about-slider{ position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy); }
.about-slides{ position: relative; aspect-ratio: 4 / 3; }
.about-slide{ position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.about-slide.is-active{ opacity: 1; z-index: 1; }
.about-slide img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s linear; }
.about-slide.is-active img{ transform: scale(1); }
.about-slide figcaption{
  position: absolute; left: var(--s6); bottom: 52px; z-index: 2;
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white); text-shadow: 0 1px 12px rgba(1,27,58,.5);
  opacity: 0; transform: translateY(10px); transition: opacity .6s ease .35s, transform .6s ease .35s;
}
.about-slide.is-active figcaption{ opacity: 1; transform: none; }
.about-slides::after{
  content: ""; position: absolute; inset: 55% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(1,27,58,.62));
}
.about-bars{
  position: absolute; left: var(--s6); right: var(--s6); bottom: var(--s6); z-index: 3;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.about-bar{ height: 18px; padding: 8px 0; border: 0; background: none; cursor: pointer; }
.about-bar span{ display: block; height: 2px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.about-bar span::after{
  content: ""; position: absolute; inset: 0; background: var(--sand);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
.about-bar.is-done span::after{ --p: 1; }

/* developer partners */
.partners{ margin-top: var(--s16); }
.partners-title{
  margin: 0 0 var(--s6); text-align: center;
  font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.partner-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: #DCE2EA; border: 1px solid #DCE2EA; border-radius: var(--radius); overflow: hidden;
}
.partner-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1100px){ .partner-grid{ grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.partner{
  display: grid; place-items: center; min-height: 92px; padding: var(--s3);
  background: var(--mist); transition: background-color .3s ease;
}
.partner:hover{ background: var(--white); }
/* official logos, shown in one brand-neutral grey and turning navy on hover.
   The logo file is used as a mask, so white, black and gold files all match. */
.plogo{
  display: block; width: calc(118px * var(--s, 1)); height: calc(38px * var(--s, 1)); max-width: 100%;
  background-color: #8A94A2;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
  transition: background-color .3s ease, transform .3s ease;
}
.partner:hover .plogo{ background-color: var(--navy); transform: scale(1.04); }
@media (max-width: 719px){ .partner{ min-height: 64px; padding: 8px; } .plogo{ width: calc(64px * var(--s, 1)); height: calc(24px * var(--s, 1)); } }

/* --------------------------------------------------------------------------
   Custom cursor (desktop with a mouse, motion allowed)
   -------------------------------------------------------------------------- */
.cursor-dot, .cursor-ring{
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  border-radius: 50%; opacity: 0; will-change: transform;
}
.cursor-dot{ width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--sand); }
.cursor-ring{
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1.5px solid var(--sand);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white);
  transition: width .3s ease, height .3s ease, margin .3s ease, background-color .3s ease, border-color .3s ease;
}
.cursor-ring span{ opacity: 0; transition: opacity .2s ease; }
html.has-cursor .cursor-dot, html.has-cursor .cursor-ring{ opacity: 1; }
html.has-cursor.cursor-hidden .cursor-dot, html.has-cursor.cursor-hidden .cursor-ring{ opacity: 0; }
html.has-cursor.cursor-link .cursor-ring{ width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(198,161,91,.14); }
html.has-cursor.cursor-view .cursor-ring{
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  background: rgba(1,27,58,.78); border-color: rgba(1,27,58,.78);
}
html.has-cursor.cursor-view .cursor-ring span{ opacity: 1; }
html.has-cursor.cursor-view .cursor-dot{ opacity: 0; }
/* on navy sections the ring stays readable */
html.has-cursor.cursor-dark .cursor-ring{ border-color: var(--sand); }

/* --------------------------------------------------------------------------
   Journey — how off-plan works
   -------------------------------------------------------------------------- */
.journey{ padding: var(--s32) 0; }
.journey-inner{ display: grid; gap: var(--s16); grid-template-columns: 1fr; }
@media (min-width: 940px){
  .journey-inner{ grid-template-columns: .9fr 1.1fr; gap: var(--s24); align-items: start; }
  .journey-intro{ position: sticky; top: 140px; }
}
.journey-steps{ position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--s12); }
.journey-line{
  position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: rgba(255,255,255,.14);
}
.journey-line-fill{
  position: absolute; inset: 0; background: var(--sand);
  transform-origin: top; transform: scaleY(1);
}
.jstep{ position: relative; padding-bottom: var(--s16); }
.jstep:last-child{ padding-bottom: 0; }
.jstep::before{
  content: ""; position: absolute; left: calc(var(--s12) * -1 + 4px); top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy); border: 2px solid var(--sand);
  transition: background-color .3s ease, transform .3s ease;
}
.jstep.is-on::before{ background: var(--sand); transform: scale(1.15); }
.jstep .h3{ color: var(--white); margin-bottom: var(--s3); }
.jstep p{ margin: 0; color: rgba(255,255,255,.82); max-width: 52ch; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{ padding: var(--s24) 0 var(--s32); background: var(--white); position: relative; z-index: 2; }
.faq-inner{ display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 940px){ .faq-inner{ grid-template-columns: .8fr 1.2fr; gap: var(--s24); } }
.faq-item{ border-bottom: 1px solid var(--mist); }
.faq-item:first-child{ border-top: 1px solid var(--mist); }
.faq-item summary{
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--s6); align-items: center;
  padding: var(--s6) 0;
  font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--ink);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: ""; flex: 0 0 auto; width: 12px; height: 12px;
  border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s ease;
}
.faq-item[open] summary::after{ transform: rotate(225deg) translate(-3px, -3px); }
.faq-item summary:hover{ color: var(--navy); }
.faq-body{ overflow: hidden; }
.faq-body p{ margin: 0 0 var(--s6); max-width: 62ch; color: var(--ink); }

/* pillars carry a sand rule instead of a number */
.pillar .h3{ padding-top: var(--s4); border-top: 2px solid var(--sand); display: inline-block; }

/* select inside the navy form */
.ask-form select{
  font-family: var(--body); font-size: 16px; line-height: 24px;
  padding: 13px var(--s4);
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius);
  background: rgba(255,255,255,.06); color: var(--white);
}
.ask-form select option{ color: var(--ink); }

/* --------------------------------------------------------------------------
   Gallery — native sideways scroll by default; main.js pins it on desktop.
   -------------------------------------------------------------------------- */
.gallery{ background: var(--mist); position: relative; z-index: 2; overflow: hidden; }
.gallery-pin{ padding: var(--s24) 0; }
.gallery-head{
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s12);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--s8);
}
.gallery-head .h2{ margin-bottom: 0; }
.gallery-track{
  display: flex; gap: var(--s6);
  padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar{ display: none; }
.gpanel{ flex: 0 0 auto; width: min(78vw, 520px); margin: 0; scroll-snap-align: center; }
.gpanel:nth-child(even){ width: min(64vw, 400px); margin-top: var(--s12); }
.gpanel-media{
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 2px; background: var(--navy);
}
.gpanel-media img{
  position: absolute; top: 0; left: -10%;
  width: 120%; height: 100%; max-width: none; object-fit: cover;
}
.gpanel figcaption{
  margin-top: var(--s3);
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.gpanel figcaption b{ color: var(--sand); margin-right: var(--s2); }
/* pinned mode: the track is moved by transform, not scrolled */
.gallery.is-pinned{
  /* fills the screen under the sticky header, so nothing shows below it while pinned */
  min-height: calc(100svh - var(--header-h, 98px));
  display: flex; flex-direction: column; justify-content: center;
}
.gallery.is-pinned .gallery-pin{ padding: var(--s8) 0 var(--s12); }
.gallery.is-pinned .gallery-head{ margin-bottom: var(--s6); }
.gallery.is-pinned .gallery-track{ overflow: visible; scroll-snap-type: none; width: max-content; }
.gallery.is-pinned .gpanel-media{ height: min(44svh, 520px); aspect-ratio: auto; }
.gallery.is-pinned .gpanel{ width: auto; }
.gallery.is-pinned .gpanel .gpanel-media{ width: calc(min(44svh, 520px) * .8); }
.gallery.is-pinned .gpanel:nth-child(3n+1) .gpanel-media{ width: calc(min(44svh, 520px) * 1.25); }

/* SplitText line masks must not clip descenders */
.split-line{ padding-bottom: .08em; margin-bottom: -.08em; }

/* cards that tilt need a 3D context and stay crisp while moving */
.community-card, .launch-card{ transform-style: preserve-3d; will-change: transform; }

/* --------------------------------------------------------------------------
   Motion details
   -------------------------------------------------------------------------- */

/* area names band: two identical sets so the loop is seamless */
.marquee{
  position: relative; z-index: 2; overflow: hidden;
  background: var(--white); border-bottom: 1px solid var(--mist);
  padding: 15px 0;
}
.marquee-track{ display: flex; width: max-content; will-change: transform; }
.marquee-set{ display: flex; align-items: center; flex: 0 0 auto; }
.marquee-item{
  font-family: var(--display); font-weight: 500;
  font-size: 12px; line-height: 1;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--slate); white-space: nowrap; padding: 0 var(--s6);
}
.marquee-dot{ width: 3px; height: 3px; border-radius: 50%; background: var(--sand); flex: 0 0 auto; }

/* the mark's open circle behind the positioning statement */
.statement{ overflow: hidden; }
.statement .wrap{ position: relative; z-index: 1; }
.statement-arc{
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: min(70vw, 680px); height: auto; pointer-events: none;
}
.statement-arc path{
  fill: none; stroke: var(--sand); stroke-width: 1.2; stroke-linecap: round; opacity: .55;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
}
@media (max-width: 800px){ .statement-arc{ right: -30%; width: 110vw; opacity: .6; } }

/* a short gold line draws in before each section label */
.eyebrow{ display: flex; align-items: center; gap: 12px; }
.eyebrow::before{
  content: ""; height: 1px; width: 28px; flex: 0 0 auto;
  background: currentColor; opacity: .7;
  transform-origin: left; transform: scaleX(var(--rule, 1));
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.eyebrow.sand::before{ background: var(--sand); opacity: 1; }
.motion .eyebrow{ --rule: 0; }
.motion .eyebrow.is-in{ --rule: 1; }

/* pillar rules draw left to right instead of simply being there */
.pillar .h3{ border-top: 0; position: relative; }
.pillar .h3::before{
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--sand);
  transform-origin: left; transform: scaleX(var(--rule, 1));
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .15s;
}
.motion .pillar .h3{ --rule: 0; }
.motion .pillar.is-in .h3{ --rule: 1; }

/* a light sweeps across the main buttons on hover */
.btn-sand, .btn-primary{ position: relative; overflow: hidden; isolation: isolate; }
.btn-sand::after, .btn-primary::after{
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.btn-sand:hover::after, .btn-primary:hover::after{ left: 120%; }

/* header lifts off the page once you scroll */
.site-header{ transition: box-shadow .35s ease; }
.site-header .brand img{ transition: transform .35s ease; transform-origin: left center; }
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(1,27,58,.08); }
.site-header.is-scrolled .brand img{ transform: scale(.86); }

/* form fields: a gold underline grows while you type */
.ask-form input, .ask-form select{
  background-image: linear-gradient(var(--sand), var(--sand));
  background-repeat: no-repeat; background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size .45s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}
.ask-form input:focus, .ask-form select:focus{ background-size: 100% 2px; border-color: var(--sand); outline: none; }

/* --------------------------------------------------------------------------
   Social links (footer)
   -------------------------------------------------------------------------- */
.social{ display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; }
.social a{
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 9px 14px 9px 10px;
  border: 1px solid #D3DAE4; border-radius: 22px;
  color: var(--navy); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.social svg{ width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.social a:hover{ background: var(--navy); border-color: var(--navy); color: var(--white); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   WhatsApp — floating, bottom right, above everything but the photo viewer
   -------------------------------------------------------------------------- */
.wa-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px 0 14px;
  border-radius: 23px; gap: 8px;
  background: #25D366; color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 20px rgba(1,27,58,.24);
  transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease;
}
.wa-float svg{ width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.wa-float:hover{ background: #1ebe5b; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(1,27,58,.34); }
.wa-float:focus-visible{ outline: 2px solid var(--navy); outline-offset: 3px; }
/* a soft ring every few seconds, so it is noticed without nagging */
.wa-float::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: wa-ring 3.2s ease-out 2s infinite;
  pointer-events: none;
}
@keyframes wa-ring{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  40%, 100%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}
/* icon only on phones */
@media (max-width: 640px){
  .wa-float{ width: 50px; height: 50px; padding: 0; justify-content: center; right: 16px; bottom: 16px; }
  .wa-float svg{ width: 26px; height: 26px; }
  .wa-label{ display: none; }
}

/* --------------------------------------------------------------------------
   Apple-style craft pass (apple-design skill)
   -------------------------------------------------------------------------- */

/* Response: feedback on press, instantly. No grey tap flash, no tap delay. */
a, button, summary, select, input{ -webkit-tap-highlight-color: transparent; }
.btn, .chip, .launch-cta, .social a, .community-card, .faq-item summary, .wa-float{ touch-action: manipulation; }
.btn:active, .chip:active, .social a:active{ transform: scale(.97); transition: transform 100ms ease-out; }
.community-card:active{ transform: scale(.985); transition: transform 100ms ease-out; }
.wa-float:active{ transform: scale(.94); transition: transform 100ms ease-out; }

/* Materials: the header is a translucent layer the page scrolls beneath */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header{
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: rgba(1,27,58,.06);
  }
  /* stage badges over photos read as glass, not a flat box */
  .stage{
    background: rgba(1,27,58,.5);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid rgba(255,255,255,.18);
  }
}
@media (prefers-reduced-transparency: reduce){
  .site-header{ background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .stage{ background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more){
  .site-header{ background: var(--white); border-bottom: 1px solid var(--ink); }
  .stage{ background: var(--ink); border-color: var(--white); }
}

/* Wayfinding: the nav shows where you are */
.site-nav a{ position: relative; padding: 6px 0; transition: color .2s ease; }
.site-nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sand);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.site-nav a.is-current{ color: var(--navy); }
.site-nav a.is-current::after{ transform: scaleX(1); }

/* Feedback: fields say what is missing as you go, not only on submit */
.ask-form input[aria-invalid="true"]{ border-color: #F2A7A7; }
.ask-form label:has(input[aria-invalid="true"])::after{
  content: "Please fill this in";
  font-family: var(--body); font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none;
  color: #F7C3C3;
}

/* Touch screens have no hover: never leave a card stuck mid-zoom after a tap */
@media (hover: none){
  .launch-card:hover .launch-media img, .community-card:hover .community-media img{ transform: none; }
  .social a:hover{ transform: none; background: transparent; color: var(--navy); border-color: #D3DAE4; }
  .wa-float:hover{ transform: none; }
}

/* FAQ chevron turns back the moment a close starts */
.faq-item.is-closing summary::after{ transform: rotate(45deg) translate(-3px, -3px); }

/* form spam trap, kept off screen rather than display:none so bots still see it */
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note a{ color: var(--sand); }

/* --------------------------------------------------------------------------
   Smooth scroll (Lenis)
   -------------------------------------------------------------------------- */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }

/* --------------------------------------------------------------------------
   Rising tower beside "How off-plan works"
   -------------------------------------------------------------------------- */
.tower-wrap{ margin-top: var(--s12); max-width: 240px; }
@media (max-width: 939px){ .tower-wrap{ max-width: 200px; } }
.tower{ display: block; width: 100%; height: auto; overflow: visible; }
.t-ground{ stroke: rgba(255,255,255,.28); stroke-width: 1; }
.t-found{ fill: var(--sand); }
.t-slab{ fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.42); stroke-width: 1; }
.t-win{ fill: rgba(255,255,255,.12); }
.t-crown{ fill: none; stroke: var(--sand); stroke-width: 1.2; stroke-linejoin: round; }
.t-crane line{ stroke: var(--sand); stroke-width: 2; stroke-linecap: round; }
.t-crane .t-hook{ stroke-width: 1; opacity: .8; }
.tower-stage{
  margin: var(--s3) 0 0;
  font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--sand);
}

/* --------------------------------------------------------------------------
   Communities: sticky map beside a deck of stacking cards
   -------------------------------------------------------------------------- */
.comm-layout{ display: grid; gap: var(--s12); grid-template-columns: 1fr; margin-top: var(--s8); align-items: start; }
@media (min-width: 1000px){
  .comm-layout{ grid-template-columns: .9fr 1.1fr; gap: var(--s12); }
  .comm-map-wrap{ position: sticky; top: 130px; }
}
.dubai-map{ display: block; width: 100%; height: auto; border-radius: var(--radius); background: #D6E1ED; border: 1px solid #D3DCE7; }
.map-note{ margin: var(--s2) 0 0; font-size: 11px; color: var(--slate); }
.m-land{ fill: #F6F8FA; }
.m-coast{ fill: none; stroke: var(--navy); stroke-width: 1.2; stroke-linejoin: round; }
.m-palm{ fill: none; stroke: var(--navy); stroke-width: 1; opacity: .55; }
.m-road{ fill: none; stroke: #B9C3D0; stroke-width: 1.2; stroke-dasharray: 4 4; }
.m-creek{ fill: none; stroke: #9DB0C7; stroke-width: 3; stroke-linecap: round; }
.m-sea-label{ font-family: var(--display); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; fill: #8FA1B6; }
.pin{ cursor: pointer; }
.pin .p-ring{ fill: none; stroke: var(--sand); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin .p-core{ fill: var(--navy); stroke: var(--white); stroke-width: 2; transition: fill .3s ease; }
.pin .p-label{
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .02em; fill: var(--ink);
  paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round;
  transition: fill .3s ease;
}
.pin.is-active .p-core{ fill: var(--sand); }
.pin.is-active .p-label{ fill: var(--navy); }
.pin.is-active .p-ring{ animation: pin-ring 1.6s ease-out infinite; }
@keyframes pin-ring{ 0%{ opacity: .9; transform: scale(1); } 100%{ opacity: 0; transform: scale(3); } }

.community-stack{ display: grid; gap: var(--s6); }
.community-stack .community-card{
  position: sticky; top: calc(96px + var(--i, 0) * 14px);
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--mist); box-shadow: 0 -10px 30px rgba(1,27,58,.07);
  transform-origin: top center;
}
.community-stack .community-card.is-active{ border-color: var(--sand); }
.cc-body{ display: block; }
@media (min-width: 640px){
  .community-stack .community-card{ grid-template-columns: 44% 1fr; column-gap: var(--s6); align-items: center; min-height: 250px; }
  .community-stack .community-media{ margin: calc(var(--s6) * -1) 0 calc(var(--s6) * -1) calc(var(--s6) * -1); aspect-ratio: auto; height: calc(100% + var(--s12)); border-radius: var(--radius) 0 0 var(--radius); }
}
@media (min-width: 1000px){ .community-stack .community-card{ top: calc(130px + var(--i, 0) * 14px); } }

/* --------------------------------------------------------------------------
   Project cards: a second photo wipes across on hover
   -------------------------------------------------------------------------- */
.launch-media .l-alt{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s cubic-bezier(.7,0,.2,1);
}
.launch-media .stage{ z-index: 2; }
@media (hover: hover){ .launch-card:hover .l-alt{ clip-path: inset(0 0 0 0); } }

/* --------------------------------------------------------------------------
   Mobile pass
   -------------------------------------------------------------------------- */

/* menu button: two lines that fold into a cross */
.menu-toggle{
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; z-index: 51;
}
.menu-toggle span{
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), top .35s cubic-bezier(.2,.7,.2,1);
}
.menu-toggle span:first-child{ top: 17px; }
.menu-toggle span:last-child{ top: 25px; }
.menu-toggle[aria-expanded="true"] span:first-child{ top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child{ top: 21px; transform: rotate(-45deg); }
@media (max-width: 899px){ .menu-toggle{ display: block; } }

.mobile-menu{
  position: fixed; inset: 0; z-index: 39;                 /* under the header, so the cross stays tappable */
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h, 76px) + var(--s8)) var(--gutter) var(--s12);
  background: var(--navy);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s cubic-bezier(.7,0,.2,1);
}
.mobile-menu[hidden]{ display: none !important; }
.mobile-menu.is-open{ clip-path: inset(0 0 0 0); }
.mm-links{ display: grid; gap: var(--s2); }
.mm-links a{
  font-family: var(--serif); font-size: 36px; line-height: 1.25; color: var(--white); text-decoration: none;
  padding: 6px 0; opacity: 0; transform: translateY(18px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), color .2s ease;
}
.mm-links a:active, .mm-links a:hover{ color: var(--sand); }
.mobile-menu.is-open .mm-links a{ opacity: 1; transform: none; }
.mobile-menu.is-open .mm-links a:nth-child(1){ transition-delay: .18s; }
.mobile-menu.is-open .mm-links a:nth-child(2){ transition-delay: .23s; }
.mobile-menu.is-open .mm-links a:nth-child(3){ transition-delay: .28s; }
.mobile-menu.is-open .mm-links a:nth-child(4){ transition-delay: .33s; }
.mobile-menu.is-open .mm-links a:nth-child(5){ transition-delay: .38s; }
.mm-foot{ display: grid; gap: var(--s4); justify-items: start; }
.mm-wa{ color: var(--sand); font-family: var(--display); font-weight: 600; font-size: 16px; text-decoration: none; padding: 10px 0; }
.mm-contact{ margin: 0; font-size: 15px; line-height: 1.9; }
.mm-contact a{ color: rgba(255,255,255,.8); text-decoration: none; }
html.menu-open, html.menu-open body{ overflow: hidden; }
/* the header stays white above the open menu, so the logo and the cross read clearly */
html.menu-open .site-header{ background: var(--white); box-shadow: none; }

/* the big scroll-progress circle crowds text on a phone */
@media (max-width: 799px){ .arc{ display: none; } }

/* thumb-sized tap targets */
@media (max-width: 899px){
  .chip{ min-height: 44px; }
  .launch-cta{ padding-top: 14px; padding-bottom: 10px; min-height: 44px; }
  .about-bar{ height: 32px; padding: 15px 0; }
  .about-bars{ bottom: 10px; }
  .footer-cols a{ display: inline-block; padding: 7px 0; }
  .social a{ min-height: 44px; }
  .stage{ font-size: 11px; }
}

/* the map needs bigger labels when it is only a phone wide */
.pin .p-short{ display: none; }
@media (max-width: 699px){
  .pin .p-long{ display: none; }
  .pin .p-short{ display: inline; }
  .pin .p-label{ font-size: 22px; }
  .m-sea-label{ font-size: 18px; }
  .pin .p-core{ r: 9; }
}

/* --------------------------------------------------------------------------
   Partner logos: one slow continuous strip, paused on hover
   -------------------------------------------------------------------------- */
.partner-marquee{
  position: relative; overflow: hidden;
  border-top: 1px solid #DCE2EA; border-bottom: 1px solid #DCE2EA;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partner-track{ display: flex; width: max-content; animation: partner-loop 70s linear infinite; }
.partner-marquee:hover .partner-track{ animation-play-state: paused; }
.partner-set{ display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.partner-set .partner{ min-height: 104px; padding: 0 34px; background: transparent; }
.partner-set .partner:hover{ background: transparent; }
@keyframes partner-loop{ to{ transform: translateX(-50%); } }
@media (max-width: 719px){
  .partner-track{ animation-duration: 45s; }
  .partner-set .partner{ min-height: 80px; padding: 0 20px; }
  .partner-set .plogo{ width: calc(96px * var(--s, 1)); height: calc(32px * var(--s, 1)); }
}

/* --------------------------------------------------------------------------
   WhatsApp nudge: a one-time bubble beside the button
   -------------------------------------------------------------------------- */
.wa-nudge{
  position: fixed; right: 20px; bottom: 78px; z-index: 61;
  display: flex; align-items: flex-start; gap: var(--s2);
  max-width: 260px; padding: 14px 14px 14px 16px;
  background: var(--white); color: var(--ink);
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 14px 36px rgba(1,27,58,.18), 0 2px 6px rgba(1,27,58,.08);
  transform-origin: bottom right;
  opacity: 0; transform: translateY(10px) scale(.92);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.wa-nudge[hidden]{ display: none !important; }
.wa-nudge.is-in{ opacity: 1; transform: none; }
.wa-nudge::after{
  content: ""; position: absolute; right: 18px; bottom: -6px; width: 12px; height: 12px;
  background: var(--white); transform: rotate(45deg); border-radius: 2px;
}
.wa-nudge p{ margin: 0; font-size: 14px; line-height: 20px; }
.wa-nudge b{ color: #128C4B; font-weight: 600; }
.wa-nudge-close{
  flex: 0 0 auto; width: 28px; height: 28px; margin: -6px -6px 0 0;
  border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--slate);
}
@media (max-width: 640px){ .wa-nudge{ right: 16px; bottom: 76px; max-width: calc(100vw - 96px); } }
html.menu-open .wa-nudge{ display: none; }

/* --------------------------------------------------------------------------
   Reduced motion — the page must read fully with no animation at all.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .jstep::before{ background: var(--sand); }
  .wa-float::after{ animation: none; }
  .btn-sand::after, .btn-primary::after{ display: none; }
  .about-slide img{ transform: none !important; }
  .mobile-menu, .mm-links a{ transition: none !important; }
  .partner-track{ animation: none; width: auto; }
  .partner-set[aria-hidden="true"]{ display: none; }
  .partner-set{ flex-wrap: wrap; justify-content: center; }
  .partner-marquee{ -webkit-mask-image: none; mask-image: none; }
  .pin.is-active .p-ring{ animation: none; }
  .launch-media .l-alt{ transition: none; }
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* clickable photos show a hand even without the cursor ring */
.launch-media, .about-slides{ cursor: pointer; }

/* tablets show the header button and the menu toggle side by side */
@media (min-width: 560px) and (max-width: 899px){ .menu-toggle{ margin-left: var(--s2); } }
/* the open menu has its own WhatsApp link */
html.menu-open .wa-float{ opacity: 0; pointer-events: none; }