/* Off-plan department.
 *
 * List-first: a grid of project cards is the browse surface, and the map is a
 * mode you switch into. An always-on map took half the screen to show pins that
 * mostly cluster in the same six communities, while the facts an agent actually
 * compares — price and payment plan — were pushed into a side panel.
 *
 * Light, on the site's own tokens. The department earns its identity from the
 * banner and the layout, not from inverting the palette.
 */

/* ---------- banner ---------- */
.ophero {
  padding: 30px var(--pad) 26px;
  border-bottom: 1px solid var(--line-2);
  background:
    radial-gradient(900px 340px at 8% -40%, rgba(255,122,82,.20), transparent 62%),
    radial-gradient(720px 300px at 92% -50%, rgba(108,76,241,.20), transparent 58%);
}
/* Headline left, WhatsApp right. The banner is the whole point of the page for
   an overseas buyer, so it sits beside the pitch rather than below the fold. */
.ophero-in {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 34px; align-items: center;
}
@media (max-width: 940px) { .ophero-in { grid-template-columns: 1fr; gap: 22px; } }

.ophero h1 {
  font-family: var(--f-d); color: #fff;
  font-size: clamp(23px, 3vw, 34px); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.08; margin: 0; max-width: 24ch;
}
.ophero #heroSub { margin: 9px 0 0; font-size: 14px; color: var(--ink-3); max-width: 60ch; }
.ophero #heroSub.hidden { display: none; }

/* Services, not features: one row, dot-separated, with the commission lead
   carrying the only colour so it reads first. */
.perks {
  list-style: none; margin: 15px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px;
}
.perks li {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 6px 12px; border-radius: 99px;
  background: rgba(243,238,250,.06); border: 1px solid var(--line-2);
}
.perks li.lead {
  background: rgba(63,199,155,.14); border-color: rgba(63,199,155,.32); color: var(--emerald-lt);
}
.perks li.lead b { font-family: var(--f-d); font-size: 14.5px; letter-spacing: -.02em; }

.ophero .stats { display: flex; gap: 24px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- WhatsApp banner ---------- */
.wabox {
  border-radius: 18px; padding: 22px 22px 20px;
  background: linear-gradient(158deg, rgba(37,211,102,.16), rgba(37,211,102,.05) 62%, transparent);
  border: 1px solid rgba(37,211,102,.32);
  box-shadow: 0 16px 44px rgba(0,0,0,.3);
}
.wa-ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: #25d366; color: #06301a; margin-bottom: 13px;
}
.wabox b {
  display: block; font-family: var(--f-d); font-size: 19px; font-weight: 700;
  letter-spacing: -.025em; color: #fff; margin-bottom: 7px;
}
.wabox p { margin: 0 0 15px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.wa-btn {
  display: flex; align-items: center; justify-content: center; height: 46px;
  border-radius: 12px; background: #25d366; color: #06301a;
  font-family: var(--f-b); font-size: 14.5px; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 26px rgba(37,211,102,.28); transition: all .2s var(--ease);
}
.wa-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wa-tel { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.ophero .stat b { display: block; font-family: var(--f-d); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.ophero .stat span { font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- shell ---------- */
/* The whole department runs on the plum palette, not just the filter rail.
   Declared once here so every surface inside inherits — cards, the area
   navigator, the results bar — rather than each being restyled to match.
   Plum rather than near-black: dark enough to be its own place, warm enough
   not to read as a different product. */
body.offplan-page {
  --ink: #f3eefa;
  --ink-2: #bcb1cd;
  --ink-3: #8f83a5;
  --paper: #241634;
  --paper-2: #1c1028;
  --card: #2f1f43;
  --line: rgba(243,238,250,.16);
  --line-2: rgba(243,238,250,.085);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --sh-2: 0 12px 38px rgba(0,0,0,.45);
  /* The base coral loses contrast against plum; this is the same hue lifted. */
  --coral: #ff7a52;
  --coral-d: #ff9068;

  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(255,122,82,.10), transparent 58%),
    radial-gradient(1000px 620px at 92% 2%, rgba(108,76,241,.13), transparent 55%),
    linear-gradient(180deg, #2a1a3d 0%, #201430 100%);
  background-attachment: fixed;
}

/* The shared header ships light. Repainting it here rather than forking the
   component keeps one header across the site while letting the department own
   its own colour — otherwise it sat as a white band on top of a plum page. */
body.offplan-page header.hd {
  background: rgba(28,16,40,.88) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
body.offplan-page header.hd .nv a { color: var(--ink-2); }
body.offplan-page header.hd .nv a:hover { background: rgba(243,238,250,.08); color: #fff; }
body.offplan-page header.hd .nv a.on { background: rgba(243,238,250,.14); color: #fff; }
body.offplan-page header.hd .lg-t { color: #fff; }
body.offplan-page header.hd .hd-tel { color: var(--ink-2); }
/* Keeps its coral fill — the rules above must not repaint the one item that
   is meant to stand out. */
body.offplan-page header.hd .nv a.nv-op,
body.offplan-page header.hd .nv a.nv-op.on { background: var(--coral); color: #fff; }

.dept { display: grid; grid-template-columns: 292px 1fr; align-items: start; }

/* A warmer, lighter shade of the same plum rather than another dark panel —
   the rail sat darker than the page, which read as a shadow rather than a
   surface. Mauve keeps it in the palette while clearly separating it. */
.rail {
  --card: #3b2a51;
  --line: rgba(243,238,250,.2);
  --line-2: rgba(243,238,250,.11);
  --ink-2: #cabfd9;
  --ink-3: #a294b6;

  position: sticky; top: var(--nav); height: calc(100vh - var(--nav));
  overflow-y: auto; color: var(--ink);
  background: linear-gradient(175deg, #3d2c54 0%, #33244799 100%);
  border-right: 1px solid rgba(243,238,250,.14);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.18);
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: rgba(243,238,250,.2); border-radius: 9px; }
.rail-hd {
  position: sticky; top: 0; z-index: 3;
  background: #3d2c54;
  padding: 15px 18px 13px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between;
}
.rail-hd b { font-size: 14px; letter-spacing: -.01em; color: #fff; }
.rail-hd button {
  height: 29px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink-2); font-family: var(--f-b);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .18s;
}
.rail-hd button:hover { color: #fff; border-color: var(--coral); background: rgba(244,99,58,.18); }

.fg { padding: 15px 18px; border-bottom: 1px solid var(--line-2); }
.fg:last-child { border-bottom: 0; }
.fg h5 {
  font-size: 10.5px; font-weight: 700; margin: 0 0 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inp, .sel {
  width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(0,0,0,.2); font-family: var(--f-b);
  font-size: 13px; color: var(--ink);
}
.inp::placeholder { color: var(--ink-3); }
.inp:focus, .sel:focus { outline: none; border-color: var(--coral); background: rgba(0,0,0,.3); }
.sel {
  appearance: none; cursor: pointer; padding-right: 28px;
  background: rgba(0,0,0,.2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' stroke='%23a294b6' stroke-width='1.7' fill='none' stroke-linecap='round'/></svg>") no-repeat right 10px center;
}
/* Native option lists take the system palette, not the parent's. */
.sel option { background: #3b2a51; color: #f3eefa; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
  background: transparent; font-family: var(--f-b); font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; transition: all .18s;
}
.chip:hover { border-color: var(--coral); color: #fff; }
.chip[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }
.cb { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.cb input { width: 16px; height: 16px; accent-color: var(--coral); cursor: pointer; flex: none; }
/* Typeahead: the list is a child of the field's wrapper, so it is always
   directly under the input and travels with the rail as it scrolls. */
.ta { position: relative; }
.ta-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  max-height: 264px; overflow-y: auto; padding: 5px;
  background: #46345f; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.ta-list::-webkit-scrollbar { width: 5px; }
.ta-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
.ta-opt {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: var(--f-b); font-size: 13px; color: var(--ink);
}
.ta-opt:hover, .ta-opt[aria-selected="true"] { background: rgba(244,99,58,.22); }
.ta-opt span { font-weight: 600; }
.ta-opt em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

.picked { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.picked:empty { margin-top: 0; }
.pk {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px;
  border-radius: 99px; background: var(--coral); color: #fff; font-size: 12.5px; font-weight: 600;
}
.pk button {
  width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(255,255,255,.22);
  color: #fff; cursor: pointer; line-height: 1; font-size: 13px; padding: 0;
}

/* ---------- results ---------- */
.main { min-width: 0; }
.mbar {
  display: flex; align-items: center; gap: 10px; padding: 14px var(--pad);
  border-bottom: 1px solid var(--line-2); position: sticky; top: var(--nav);
  z-index: 4; background: rgba(32,20,48,.86); backdrop-filter: blur(12px);
}
.mbar .cnt { font-size: 13.5px; font-weight: 700; }
.mbar .sp { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.vbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.22);
  font-family: var(--f-b); font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.vbtn:hover { border-color: var(--coral); color: var(--coral); }
.vbtn[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #1a0d07; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; padding: 20px var(--pad) 60px; }

/* Map mode swaps the card grid for the area navigator: browsing by district is
   what a map is for, and a one-column card list beside it was reading the same
   information twice. Grid mode keeps the cards and hides both. */
.main.map .split2 { display: grid; grid-template-columns: 268px 1fr; }
.main.map .grid { display: none; }
.main:not(.map) .split2 { display: block; }
.main:not(.map) #mapwrap,
.main:not(.map) .anav { display: none; }
#mapwrap { height: calc(100vh - var(--nav) - 65px); position: sticky; top: calc(var(--nav) + 65px); }
#map { width: 100%; height: 100%; background: var(--paper-2); }

/* ---------- area navigator ---------- */
.anav {
  height: calc(100vh - var(--nav) - 65px); position: sticky; top: calc(var(--nav) + 65px);
  display: flex; flex-direction: column;
  background: rgba(28,16,40,.55); border-right: 1px solid var(--line-2);
}
.anav-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border-bottom: 1px solid var(--line-2);
}
.anav-hd b { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.anav-hd button {
  height: 25px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; font-family: var(--f-b); font-size: 11px; font-weight: 700;
  color: var(--ink-2); cursor: pointer;
}
.anav-hd button:hover { border-color: var(--coral); color: var(--coral); }

/* Its own scroll, separate from the filter rail and the map. */
.anav-list { flex: 1; overflow-y: auto; padding: 8px; }
.anav-list::-webkit-scrollbar { width: 5px; }
.anav-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }

/* ~2cm bands, photo behind the name. Areas holding no stock get a tinted
   gradient rather than a borrowed photograph from somewhere else. */
/* ~2cm bands. Photo behind the name where we hold stock in that area; a tinted
   gradient where we do not, rather than a borrowed photograph of somewhere
   else. Hue is derived from the slug so each district keeps its own tint
   between visits instead of the column reading as one flat block. */
.ab {
  position: relative; display: block; width: 100%; height: 78px; margin-bottom: 8px;
  border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; text-align: left;
  background:
    linear-gradient(125deg, hsl(var(--h, 268) 34% 26%), hsl(calc(var(--h, 268) + 18) 40% 16%));
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ab:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.ab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(20,12,28,.9) 26%, rgba(20,12,28,.28) 100%);
}
.ab .t { position: absolute; inset: 0; z-index: 1; padding: 11px 13px; display: flex; flex-direction: column; justify-content: center; }
.ab .n { font-family: var(--f-d); font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.18; }
.ab .c { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.66); margin-top: 4px; }
.ab .c b { color: var(--coral); }
.ab[aria-pressed="true"] { outline: 2px solid var(--coral); outline-offset: -2px; }
.ab[aria-pressed="true"] .c b { color: #fff; }
/* Areas we hold nothing in are still navigable, just quieter. */
.ab.empty { height: 62px; opacity: .78; }
.ab.empty .n { font-size: 12.5px; }

.anav-group {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 4px 7px;
}

/* Attribution, collapsed by default. Required by CC BY / BY-SA and too long to
   sit against each band. */
.pcred { margin: 14px 2px 6px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.pcred summary {
  cursor: pointer; list-style: none; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.pcred summary::-webkit-details-marker { display: none; }
.pcred summary:hover { color: var(--coral); }
.pcred ul { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 6px; }
.pcred li { font-size: 10.5px; line-height: 1.4; color: var(--ink-3); }
.pcred li span { display: block; color: var(--ink-2); font-weight: 600; }
.pcred li a { color: var(--ink-3); text-decoration: underline; }
.pcred li a:hover { color: var(--coral); }
.pcred p { font-size: 10.5px; color: var(--ink-3); margin: 10px 0 0; line-height: 1.45; }

@media (max-width: 980px) {
  .main.map .split2 { grid-template-columns: 1fr; }
  .anav { height: auto; max-height: 320px; position: static; border-right: 0; border-bottom: 1px solid var(--line-2); }
}

/* ---------- card ---------- */
.pc {
  display: block; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card);
  overflow: hidden; text-decoration: none; color: inherit; transition: all .22s var(--ease);
}
.pc:hover { border-color: var(--coral); box-shadow: var(--sh-2); transform: translateY(-2px); }
.pc.on { border-color: var(--coral); box-shadow: 0 12px 34px rgba(255,122,82,.26); }
.pc .im { position: relative; aspect-ratio: 16/10; background: var(--paper-2); }
.pc .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pills { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-radius: 7px;
  padding: 4px 9px; font-size: 11px; font-weight: 700; color: #241634; letter-spacing: -.01em;
}
.pill.new { background: var(--mint); color: #04291d; }
.pill.eoi { background: var(--amber); color: #3a1f00; }
/* Developer mark, bottom-left of the image — the shorthand an agent scans for. */
.devmark {
  position: absolute; left: 10px; bottom: 10px; height: 34px; min-width: 34px; padding: 0 8px;
  display: grid; place-items: center; border-radius: 8px; background: rgba(20,16,25,.86);
  color: #fff; font-family: var(--f-d); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.pc .bd { padding: 12px 14px 13px; }
.pc h4 { font-family: var(--f-d); font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 3px;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .sub { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--line-2);
}
.split > div + div { border-left: 1px solid var(--line-2); padding-left: 13px; }
.split .lbl { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-bottom: 3px; }
.split .val { font-family: var(--f-d); font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.split .val.pend { font-family: var(--f-b); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.tag.pr { background: var(--coral); border-color: var(--coral); color: #1a0d07; }

/* Renamed off the bare .empty: it also matched .ab.empty in the area
   navigator, and 60px of padding forced those bands to 120px tall. */
.noresults { grid-column: 1/-1; text-align: center; padding: 60px 20px; }
.noresults h3 { font-family: var(--f-d); font-size: 18px; margin: 0 0 8px; letter-spacing: -.02em; }
.noresults p { font-size: 13.5px; color: var(--ink-3); line-height: 1.62; margin: 0 auto; max-width: 320px; }

/* Developer pin. A white disc so a dark wordmark reads, ringed in coral so it
   is findable against both the light basemap and the dark page around it. */
/* The node MapLibre owns. It writes `transform` here to place the marker, so
   nothing in this rule may set transform, transition it, or change the box —
   a hover scale here replaced the position and threw the pin across the map,
   and a transition animated every reposition so the pins slid on every zoom. */
.mpin-anchor {
  width: 28px; height: 28px; line-height: 0; cursor: pointer;
}

/* The disc itself, free to be styled and scaled because the map never touches
   it. box-sizing is explicit: without it 28px + padding + border measured 40,
   which is both bigger than intended and a size the map had already
   positioned against. */
.mpin {
  box-sizing: border-box;
  width: 28px; height: 28px; padding: 3px; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; box-shadow: 0 0 0 2px #ff7a52, 0 2px 8px rgba(0,0,0,.32);
  display: grid; place-items: center;
  transition: transform .14s ease;
  transform-origin: 50% 50%;
}
.mpin-anchor:hover { z-index: 2; }
.mpin-anchor:hover .mpin { transform: scale(1.18); }
.mpin img {
  /* Fixed box rather than max-width: the logo arrives after the marker is
     placed, and letting it resize the element made every pin jump on load and
     again on each zoom.
   *
   * Inset rather than filling the disc. A logo pushed to the edges fights the
   * circle it sits in and the pins stop reading as one family; held back to
   * ~72% it sits as a mark inside the ring, and a wordmark and a monogram end
   * up the same visual weight. */
  width: 72%; height: 72%; object-fit: contain; display: block; pointer-events: none;
}
/* No logo on file: one capital, same disc, so the set stays consistent. */
.mpin.nologo { background: #241634; box-shadow: 0 0 0 2px #ff7a52, 0 2px 8px rgba(0,0,0,.32); }
.mpin.nologo span { font-family: var(--f-d); font-size: 13px; font-weight: 700; color: #fff;
                    line-height: 1; letter-spacing: 0; }

/* MapLibre renders popups into its own container outside the page's variable
   scope, so these carry literal colours rather than inheriting the palette. */
.maplibregl-popup-content {
  border-radius: 13px; padding: 0; overflow: hidden; width: 232px; font-family: var(--f-b);
  background: #2f1f43; border: 1px solid rgba(243,238,250,.16); color: #f3eefa;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.maplibregl-popup-tip { border-top-color: #2f1f43 !important; border-bottom-color: #2f1f43 !important; }
.maplibregl-popup-content img { width: 100%; height: 118px; object-fit: cover; display: block; }
.maplibregl-popup-content .pp { padding: 10px 12px 12px; }
.maplibregl-popup-content h4 { font-family: var(--f-d); font-size: 14px; margin: 0 0 2px; letter-spacing: -.02em; color: #fff; }
.maplibregl-popup-content .s { font-size: 11.5px; color: #8f83a5; }
.maplibregl-popup-content a { color: #ff7a52; font-size: 12.5px; font-weight: 700; text-decoration: none; display: inline-block; margin-top: 7px; }
.maplibregl-ctrl-group { background: #2f1f43 !important; border: 1px solid rgba(243,238,250,.16); }
.maplibregl-ctrl-group button + button { border-top-color: rgba(243,238,250,.16); }
.maplibregl-ctrl-group button span { filter: invert(1); }

@media (max-width: 980px) {
  .dept { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .main.map .split2 { grid-template-columns: 1fr; }
  .main.map .grid { height: auto; }
  #mapwrap { height: 62vh; position: static; }
}