@charset "UTF-8";
/* RWD — the atlas
   ==========================================================================
   The portfolio as one screen you move around rather than a list you scroll.

   The reference was the Portland map from GTA III, and one thing survived the
   translation: the name of wherever you are, in the corner, changing as you
   travel. Everything else was tried and taken out again — the tinted two-tone
   ground, the pointer drift, the crosshair, the reticle. Each of them was the
   game rather than the idea, and on a page whose job is helping someone
   choose where to live, the game is a cost with no return.

   What is left is a plain map, the brand's furniture over it, and a project
   card as the pointer finds each pin.

   The tiles are OpenStreetMap’s own, drawn plain, exactly as the homepage
   footprint draws them. Labels are ours, so
   the only words on the map are places RWD builds in.

   The furniture is light: bone scrims, white chips and a bone card, over
   OpenStreetMap drawn plain. It began dark, which looked well but fought the
   map underneath it — a pale basemap with dark panels on top reads as two
   pages rather than one screen, and every other page on this site is bone.

   Scoped entirely to #page-atlas.
   ========================================================================= */

#page-atlas{
  --bone:#F3F0E9;
  --ink-0:#07070A;
  --ink-1:#100F0E;
  --bark:#2B211A;
  --gold:#B08D57;
  --gold-lt:#CBAE80;
  --paper-i:#F4F1EA;
  --mute-i:#9A938A;
  --rule-i:rgba(203,174,128,.22);
  --hdr:69px;

  position:relative;
  height:calc(100dvh - var(--hdr));
  min-height:520px;
  background:var(--bone);
  color:var(--say);
  overflow:hidden;
}

/* ---- The map ------------------------------------------------------------ */
#page-atlas .at-map{ position:absolute; inset:0; background:#EAE7DF }
#page-atlas .at-map .leaflet-container{ background:#EAE7DF; font-family:var(--lux-sans) }

/* OpenStreetMap's own tiles, exactly as the homepage footprint draws them —
   no filter. A tinted basemap made the city look like a mood board; the plain
   map is legible, familiar, and the thing a buyer is actually trying to read.
   The furniture over it carries the brand instead. */
#page-atlas .leaflet-control-attribution{
  background:rgba(255,255,255,.82); color:#5A554E;
  font:400 16px/1.5 var(--lux-sans); padding:3px 8px;
}
#page-atlas .leaflet-control-attribution a{ color:#6B5A3A }

/* ---- Corner readout -----------------------------------------------------
   The Portland device: wherever the view is, the nearest place RWD builds in
   is named here, with its distance.

   It used to read from a ring drawn dead centre. The ring went with the
   pointer-drift that gave it a reason to exist — on a map you drag, nobody is
   thinking about the centre of the screen, and a mark there that has to be
   explained is a mark that has not earned its place. The readout reads fine
   without one. */
#page-atlas .at-where{
  position:absolute; left:0; bottom:0; z-index:420; pointer-events:none;
  padding:clamp(18px,3vh,30px) clamp(22px,3.4vw,46px);
  background:linear-gradient(90deg,rgba(243,240,233,.94) 45%,rgba(243,240,233,0));
  max-width:min(560px,70vw);
}
#page-atlas .at-where-k{
  margin:0 0 6px;
  font:500 16px/1 var(--lux-sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}
#page-atlas .at-where-v{
  margin:0; font:400 clamp(28px,4vw,54px)/1 var(--lux); color:var(--ink-1);
}
#page-atlas .at-where-d{
  margin:8px 0 0;
  font:500 16px/1 var(--lux-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}

/* ---- Top bar ------------------------------------------------------------ */
#page-atlas .at-bar{
  position:absolute; left:0; right:0; top:0; z-index:420;
  display:flex; align-items:center; gap:clamp(12px,2vw,26px); flex-wrap:wrap;
  padding:clamp(12px,2vh,18px) clamp(18px,3vw,34px);
  background:linear-gradient(180deg,rgba(243,240,233,.95) 35%,rgba(243,240,233,0));
}
#page-atlas .at-title{
  margin:0; display:flex; align-items:baseline; gap:12px;
  font:500 16px/1 var(--lux-sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}
#page-atlas .at-title b{
  font:400 16px/1 var(--lux); letter-spacing:.02em; color:var(--ink-1);
}
#page-atlas .at-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-left:auto }
#page-atlas .at-chip{
  padding:8px 15px; background:rgba(255,255,255,.88); border:1px solid var(--rule);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:500 16px/1 var(--lux-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); cursor:pointer;
  transition:color .25s, border-color .25s, background .25s;
}
#page-atlas .at-chip:hover{ color:var(--ink-1); border-color:var(--gold) }
#page-atlas .at-chip[aria-pressed="true"]{
  background:var(--gold); border-color:var(--gold); color:var(--ink-1);
}
#page-atlas .at-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* ---- Markers ------------------------------------------------------------ */
#page-atlas .at-pin{ background:none; border:0 }
#page-atlas .at-pin svg{
  display:block; overflow:visible;
  filter:drop-shadow(0 3px 6px rgba(16,15,14,.42));
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
  transform-origin:50% 100%;
}
#page-atlas .at-pin:hover svg,
#page-atlas .at-pin.is-on svg{ transform:scale(1.16) }
#page-atlas .at-pin .at-ringc{ fill:#76BC21 }
#page-atlas .at-pin .at-body{ fill:var(--ink-1) }
/* Every pin is the same badge; only the border says which stage it is at.
   Red for ongoing, green for completed, white for coming soon — the same
   three as the status dot on the card. */
#page-atlas .at-pin.is-ongoing .at-ringc{ fill:#E53935 }
#page-atlas .at-pin.is-soon .at-ringc{ fill:#FFFFFF }
#page-atlas .at-pin.is-dim{ opacity:.22; pointer-events:none }

/* Below a certain zoom the city is a crowd of pins, so they stand small. */
#page-atlas .at-map.is-far .at-pin svg{ transform:scale(.62) }

/* Place labels, ours rather than the basemap's. */
#page-atlas .at-label{
  background:none; border:0; pointer-events:none; white-space:nowrap;
  font:500 16px/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-1);
  text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
#page-atlas .at-map.is-far .at-label{ display:none }

/* ---- Selected project --------------------------------------------------- */
#page-atlas .at-card{
  position:absolute; right:clamp(14px,2.4vw,30px); top:50%; z-index:430;
  width:min(360px,84vw); transform:translate(0,-50%);
  background:rgba(252,251,248,.96); border:1px solid var(--rule);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
          backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; translate:22px 0;
  transition:opacity .3s ease, translate .38s cubic-bezier(.22,.61,.36,1), visibility .3s;
}
#page-atlas .at-card.is-open{ opacity:1; visibility:visible; translate:0 0 }
#page-atlas .at-card-shot{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bark);
}
#page-atlas .at-card-shot img{ width:100%; height:100%; object-fit:cover }
#page-atlas .at-card-tag{
  position:absolute; left:0; top:0;
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  background:rgba(7,7,10,.82);
  font:500 16px/1 var(--lux-sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-i);
}
#page-atlas .at-card-tag i{ width:6px; height:6px; border-radius:50%; background:var(--gold) }
#page-atlas .at-card-tag.is-ongoing i{ background:#E53935 }
#page-atlas .at-card-tag.is-done i{ background:#76BC21 }
#page-atlas .at-card-tag.is-soon i{ background:#fff; box-shadow:0 0 0 1px rgba(16,15,14,.35) }
#page-atlas .at-card-in{ padding:clamp(18px,2.4vw,24px) }
#page-atlas .at-card-loc{
  margin:0 0 6px;
  font:500 16px/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
#page-atlas .at-card-in h2{
  margin:0; font:400 clamp(21px,2vw,27px)/1.14 var(--lux); color:var(--ink-1);
}
#page-atlas .at-card-say{
  margin:10px 0 0; font:400 italic 16px/1.55 var(--lux); color:var(--say);
}
#page-atlas .at-card-spec{
  margin:10px 0 0; font:400 16px/1.6 var(--lux-sans); color:var(--mute);
}
#page-atlas .at-card-meta{
  display:flex; flex-wrap:wrap; gap:5px 14px; margin:14px 0 0; padding-top:13px;
  border-top:1px solid var(--rule);
  font:500 16px/1.5 var(--lux-sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute);
}
#page-atlas .at-card-meta .at-rera{ color:var(--gold) }
#page-atlas .at-card-go{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding:14px 18px; background:var(--ink-1); color:var(--paper-i);
  font:500 16px/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase;
  transition:background .25s;
}
#page-atlas .at-card-go:hover{ background:var(--gold); color:var(--ink-1) }
#page-atlas .at-card-soon{
  margin:14px 0 0; padding-top:13px; border-top:1px solid var(--rule);
  font:400 16px/1.6 var(--lux-sans); color:var(--mute);
}
#page-atlas .at-card-x{
  position:absolute; right:0; top:0; z-index:2;
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(252,251,248,.9); border:0; color:var(--ink-1);
  font:400 18px/1 var(--lux-sans); cursor:pointer;
}
#page-atlas .at-card-x:hover{ color:var(--gold) }

@media (max-width:760px){
  #page-atlas .at-card{
    right:0; left:0; top:auto; bottom:0; width:auto; transform:none;
    translate:0 22px; border-inline:0; border-bottom:0;
  }
  #page-atlas .at-card.is-open{ translate:0 0 }
  #page-atlas .at-card-shot{ aspect-ratio:21/9 }
  #page-atlas .at-where{ bottom:auto; top:64px; background:none; padding-block:8px }
  #page-atlas .at-where-v{ font-size:clamp(22px,7vw,30px) }
}

/* ---- Zoom --------------------------------------------------------------- */
#page-atlas .leaflet-bottom.leaflet-right{ margin-bottom:34px }
#page-atlas .leaflet-control-zoom a{
  width:34px; height:34px; line-height:33px;
  background:rgba(255,255,255,.94); border:1px solid rgba(16,15,14,.16); color:var(--ink-1);
}
#page-atlas .leaflet-control-zoom a:hover{ background:var(--gold); color:var(--ink-1) }

/* ---- Hint --------------------------------------------------------------- */
#page-atlas .at-hint{
  position:absolute; right:clamp(14px,2.4vw,30px); bottom:clamp(14px,2vh,20px); z-index:410;
  margin:0; pointer-events:none;
  font:500 16px/1.6 var(--lux-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-1); text-align:right;
  text-shadow:0 0 4px #fff, 0 0 8px #fff;
  transition:opacity .5s;
}
#page-atlas .at-hint.is-gone{ opacity:0 }
@media (max-width:760px){ #page-atlas .at-hint{ display:none } }

/* The status badge when a card has no render to sit it on. */
#page-atlas .at-card-flag{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  font:500 16px/1 var(--lux-sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
}
#page-atlas .at-card-flag i{ width:6px; height:6px; border-radius:50%; background:var(--gold) }
#page-atlas .at-card-flag.is-ongoing i{ background:#E53935 }
#page-atlas .at-card-flag.is-done i{ background:#76BC21 }
#page-atlas .at-card-flag.is-soon i{ background:#fff; box-shadow:0 0 0 1px rgba(16,15,14,.35) }
#page-atlas .at-card:not(:has(.at-card-shot)) .at-card-x{ background:none }

/* ---- Hover card ---------------------------------------------------------
   What a pin says before you commit to opening it: the picture, what it is,
   where, and what it costs. A Leaflet tooltip, so it never catches the
   pointer and the pin underneath stays clickable. */
#page-atlas .at-tip{
  padding:0; border:1px solid var(--rule-i); border-radius:0;
  background:rgba(252,251,248,.97); color:var(--say);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
          backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.8);
  white-space:normal; width:250px;
}
/* Leaflet draws a little arrow with a border colour of its own; ours is dark,
   so it has to be told. */
#page-atlas .at-tip.leaflet-tooltip-top::before{ border-top-color:rgba(252,251,248,.97) }
#page-atlas .at-tip.leaflet-tooltip-bottom::before{ border-bottom-color:rgba(252,251,248,.97) }

#page-atlas .at-tip-shot{ aspect-ratio:16/10; overflow:hidden; background:var(--bark) }
#page-atlas .at-tip-shot img{ width:100%; height:100%; object-fit:cover; display:block }
#page-atlas .at-tip-body{ padding:13px 15px 15px }
#page-atlas .at-tip-tag{
  display:flex; align-items:center; gap:7px; margin:0 0 8px;
  font:500 16px/1 var(--lux-sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
}
#page-atlas .at-tip-tag i{ width:5px; height:5px; border-radius:50%; background:var(--gold) }
#page-atlas .at-tip-tag.is-ongoing i{ background:#E53935 }
#page-atlas .at-tip-tag.is-done i{ background:#76BC21 }
#page-atlas .at-tip-tag.is-soon i{ background:#fff; box-shadow:0 0 0 1px rgba(16,15,14,.35) }
#page-atlas .at-tip-name{
  margin:0; font:400 18px/1.18 var(--lux); color:var(--ink-1);
}
#page-atlas .at-tip-loc{
  margin:5px 0 0;
  font:500 16px/1 var(--lux-sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
}
#page-atlas .at-tip-spec{
  margin:9px 0 0; font:400 16px/1.5 var(--lux-sans); color:var(--mute);
}