/* The page is a map, not a document: it never scrolls and it always covers the window.
   body carried h-[100dvh] while the map inside used h-screen (100vh); the two agree in a
   plain window and part company the moment a browser reports a different dynamic height,
   which leaves a strip of background under the map. Pinning both to the same real unit and
   locking the scroll removes the possibility rather than the symptom. */
html,body{margin:0;background:#0b1622;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;height:100%}
main.z-10{position:fixed;inset:0;height:100%}
main.z-10 > .relative{height:100%}
#openseadragon-viewer{background:#0b1622}
.openseadragon-container{background:#0b1622 !important}
.marker-container{position:absolute}
.marker-container svg{overflow:visible}
#markers{overflow:visible}
#loader{background:#0b1622}
.no-scrollbar::-webkit-scrollbar{display:none}
body.ui-hidden header,
body.ui-hidden #zoomrail,
body.ui-hidden #filters,
body.ui-hidden #markers{opacity:0;pointer-events:none;transition:opacity .3s}

/* --- house style overrides on top of Aldar's compiled CSS --- */

/* Explore stays the light blue from the approved composite, not Aldar's orange */
button[data-explore]{background-color:#86c8ee !important;border-radius:8px}
button[data-explore] span{color:#0e2a3c !important;font-weight:500}
button[data-explore]:hover{background-color:#9ed4f2 !important}

/* area cards and their panels get real rounded corners */
.marker-container .rounded-sm{border-radius:12px}
.marker-container .w-56{border-radius:14px}
.marker-container .rounded-sm > .inline-flex{border-radius:10px}

/* Rules for the classes this clone adds. Aldar's compiled CSS only carries the utilities
   Aldar itself uses, so anything new has to bring its own rule or it silently does nothing
   (the unit card lost its background this way). */
.bg-\[\#161616\]\/95{background-color:rgba(22,22,22,.95)}
.bg-white\/5{background-color:rgba(255,255,255,.05)}
.backdrop-blur-lg{backdrop-filter:blur(16px)}
.aspect-square{aspect-ratio:1/1}
.pb-5{padding-bottom:1.25rem}
.-right-2{right:-.5rem}
.min-h-\[280px\]{min-height:280px}
.max-h-\[88vh\]{max-height:88vh}
.max-h-\[92vh\]{max-height:92vh}
.w-\[min\(900px\2c 92vw\)\]{width:min(900px,92vw)}
.w-\[min\(1200px\2c 94vw\)\]{width:min(1200px,94vw)}

/* An area card sizes to its own name. The 14rem floor this used to carry was set with
   min-width, which beats a max-width, and is why every card was 224px wide whatever it said. */
.marker-container .w-56{width:144px !important;min-width:0;white-space:nowrap}
.marker-container .w-56 p{white-space:nowrap}

/* --- the shell, to Modon's measurements ----------------------------------
   Every number here was read off Modon's own world with scripts/spec2.js rather than
   eyeballed from a screenshot: bar 10px inset / 68 high / radius 8 / #151515, crumbs
   14px 700 with 24px arrow gaps, tool labels 12px #979797, amenity chips centred at
   58 high on #2F2F2F. Written as real rules because the four bundles above are Aldar's
   compiled Tailwind and an invented arbitrary-value class matches nothing. */

@font-face{font-family:"Suisse Int'l";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/fonts/Suisse/SuisseIntl-Regular-WebM.woff2") format("woff2")}
@font-face{font-family:"Suisse Int'l";font-weight:500;font-style:normal;font-display:swap;
  src:url("/assets/fonts/Suisse/SuisseIntl-Medium.woff2") format("woff2")}
@font-face{font-family:"Suisse Int'l";font-weight:600;font-style:normal;font-display:swap;
  src:url("/assets/fonts/Suisse/SuisseIntl-SemiBold-WebM.woff2") format("woff2")}
@font-face{font-family:"Suisse Int'l";font-weight:700;font-style:normal;font-display:swap;
  src:url("/assets/fonts/Suisse/SuisseIntl-Bold.woff2") format("woff2")}

#topbar{position:fixed;top:10px;left:10px;right:10px;height:68px;z-index:60;
  display:flex;align-items:stretch;background:#151515;border-radius:8px;
  font-family:"Suisse Int'l",sans-serif;color:#f7fcff;pointer-events:auto}

#brandmark{display:flex;align-items:center;padding:0 24px;flex:0 0 auto}
#brandmark img{width:96px;height:auto;display:block}

/* icon over a 12px label, the way every tool in Modon's bar is built */
#topbar .barbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-width:60px;padding:0 9px;border:0;background:transparent;cursor:pointer;
  user-select:none;flex:0 0 auto;border-radius:8px;color:#979797;
  transition:color .18s,background .18s}
#topbar .barbtn svg{width:22px;height:22px;fill:currentColor;display:block}
#topbar .barbtn span{font-size:12px;line-height:9px;font-weight:400;white-space:nowrap}
#topbar .barbtn:hover{color:#f7fcff}
#topbar .barbtn[aria-pressed="true"]{color:#f7fcff;background:#2f2f2f}
#topbar .barbtn[hidden]{display:none}
#topbar .barbtn[disabled]{opacity:.35;cursor:default}
#topbar .barbtn[disabled]:hover{color:#979797;background:transparent}

#crumbs{display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow:hidden;padding:0 8px}
#crumbs .crumb{font-size:14px;font-weight:700;line-height:38px;color:#979797;white-space:nowrap;
  padding:0 8px;border:0;background:none;cursor:pointer;overflow:hidden;text-overflow:ellipsis;
  font-family:inherit;transition:color .18s}
#crumbs .crumb:hover{color:#f7fcff}
#crumbs .crumb.here{color:#f7fcff;cursor:default}
#crumbs .sep{flex:0 0 auto;width:24px;height:14px;color:#979797;fill:currentColor}
/* the unit finder: four dependent choices in the rail, not a second search box */
.finder{display:flex;flex-direction:column;gap:10px}
.fsel{display:flex;flex-direction:column;gap:4px}
.fsel>span{color:#86c8ee;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.fsel select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#f7fcff;font-family:inherit;font-size:13px;
  appearance:none;cursor:pointer}
.fsel select:focus-visible{outline:2px solid #86c8ee;outline-offset:1px}
.fsel option{background:#161616;color:#f7fcff}
.fcount{color:#979797;font-size:11px}
.flist{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow-y:auto}
.flist::-webkit-scrollbar{display:none}
.flist button{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 9px;border:0;border-radius:6px;background:rgba(255,255,255,.05);cursor:pointer;
  color:#f7fcff;font-family:inherit;font-size:11px;text-align:left}
.flist button:hover,.flist button:focus-visible{background:rgba(134,200,238,.16)}
.flist .fmeta{color:#979797;flex:0 0 auto}

#crumbs .crumb-more{letter-spacing:1px}
#crumbs .crumb-more[aria-expanded="true"]{color:#f7fcff}
#crumbmenu{position:fixed;z-index:210;display:flex;flex-direction:column;min-width:170px;
  padding:4px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(20,20,20,.97);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
#crumbmenu button{padding:8px 11px;border:0;border-radius:6px;background:none;cursor:pointer;
  color:#d8d8d8;font-family:inherit;font-size:13px;font-weight:600;text-align:left;
  white-space:nowrap}
#crumbmenu button:hover,#crumbmenu button:focus-visible{background:rgba(134,200,238,.16);color:#fff}

#toolcluster{display:flex;align-items:stretch;flex:0 0 auto;padding-right:10px}

/* the amenity row is centred under the bar, not flush left */
/* same trap as the sibling row: a centred overflowing flex row hides its left end where no
   scroll can reach it */
#chipbar{position:fixed;top:98px;left:0;right:0;z-index:50;display:flex;justify-content:safe center;
  flex-wrap:nowrap;gap:12px;padding:0 16px;overflow-x:auto;pointer-events:none;
  font-family:"Suisse Int'l",sans-serif}
#chipbar::-webkit-scrollbar{display:none}
#chipbar .chip{pointer-events:auto;flex:0 0 auto;height:58px;padding:0 16px;display:inline-flex;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;
  border-radius:8px;background:#2f2f2f;color:#f1efe9;font-size:13px;font-weight:400;
  font-family:inherit;line-height:1;cursor:pointer;user-select:none;
  transition:background .18s,color .18s}
#chipbar .chip svg{width:20px;height:20px;fill:currentColor;display:block}
#chipbar .chip:hover{background:#3d3d3d}
#chipbar .chip.on{background:#f1efe9;color:#151515}

/* everything that used to start at the top of the screen starts under the bar */
#leftpanels{top:98px}
body.has-chips #leftpanels{top:172px}
/* The rail has to move for the chip bar too. Both sat at top:98px and the rail is z-index 55
   against the bar's 50, so with any tool open it covered the right hand chips and took their
   clicks: 344px of rail over a 1600px bar, with railhead answering elementFromPoint where
   Marsa Yacht Club was painted. Only the left panels were being pushed down. */
body.has-chips #rail{top:172px;max-height:calc(100vh - 196px)}
/* bottom-6 is another utility the bundles never emitted: the slot sat at y=0, under the bar */
#compass-slot{position:fixed;left:24px;bottom:24px;top:auto;z-index:50;pointer-events:none}
#compass svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
/* the tools moved into the bar, so the buttons that floated over the map are duplicates */
#sidebar-toggle-button{display:none !important}

/* All projects / Gallery / Favourites / Views share one right rail. Modon's is 344 wide
   sitting 22 from the right edge with cards 375 tall; measured, not guessed. */
#rail{position:fixed;top:98px;right:22px;width:344px;max-height:calc(100vh - 122px);z-index:55;
  display:flex;flex-direction:column;background:#151515;border-radius:8px;overflow:hidden;
  font-family:"Suisse Int'l",sans-serif;color:#f7fcff;pointer-events:auto}
.railhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  font-size:14px;font-weight:700;border-bottom:1px solid #2f2f2f;flex:0 0 auto}
.railhead button{width:28px;height:28px;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#979797}
.railhead button:hover{color:#f7fcff}
.railhead svg{width:16px;height:16px;fill:currentColor}
.railbody{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.railbody::-webkit-scrollbar{display:none}
.railempty{color:#979797;font-size:13px;padding:8px 4px}

.rcard{background:#1f1f1f;border-radius:8px;overflow:hidden;cursor:pointer;border:0;padding:0;
  text-align:left;width:100%;display:block;font-family:inherit;transition:background .18s;
  /* the rail is a flex column: without this the cards shrink to a 4px strip and clip */
  flex:0 0 auto}
.rcard:hover{background:#2f2f2f}
.rcard img,.rcard-blank{width:100%;height:196px;object-fit:cover;display:block;background:#2a2a2a}
/* a view whose backplate is a video publishes no still, so the card names the place
   instead of showing a grey void */
.rcard-blank{display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(160deg,#20303c,#141c24)}
.rcard-blank span{color:#7fa6bd;font-size:15px;font-weight:600;line-height:1.2;
  font-family:"Suisse Int'l",sans-serif}
.rcard-slim img,.rcard-slim .rcard-blank{display:none}
.rcard-txt{padding:14px 16px 16px}
.rcard-sub{font-size:11px;color:#979797;margin:0 0 6px;text-transform:capitalize}
.rcard-txt h4{font-size:16px;font-weight:700;margin:0 0 12px;color:#f7fcff}
.rcard-cta{font-size:12px;font-weight:500;padding:8px 16px;border-radius:6px;border:0;cursor:pointer;
  background:#86c8ee;color:#0e2a3c;font-family:inherit}
.rcard-cta:hover{background:#9ed4f2}
.favadd{width:100%;flex:0 0 auto;padding:10px;border-radius:6px;border:1px solid #2f2f2f;background:#1f1f1f;
  color:#f7fcff;font-size:13px;cursor:pointer;font-family:inherit}
.favadd:hover{border-color:#86c8ee}

.gtile{border:0;padding:0;background:#1f1f1f;border-radius:8px;overflow:hidden;cursor:pointer;
  display:block;width:100%;font-family:inherit;flex:0 0 auto}
.gtile img{width:100%;height:150px;object-fit:cover;display:block}
.gtile span{display:block;padding:8px 10px;font-size:12px;color:#979797;text-align:left}
.gtile:hover span{color:#f7fcff}

@media (max-width:900px){
  #rail{top:76px;right:8px;left:8px;width:auto;max-height:calc(100vh - 96px)}
}

/* --- the unit table -------------------------------------------------------
   One searchable, unbounded list behind all five developers' panels. Before this every
   list stopped at 300 or 400 rows with nothing to page past, and the bar's fifth tool was
   called Search unit with no box to type in anywhere in the product. */

.ulist{display:flex;flex-direction:column;gap:6px;min-height:0}
.usearch{display:flex;align-items:center;gap:8px;padding:0 10px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);flex:0 0 auto}
.usearch:focus-within{border-color:#86c8ee}
.usearch > svg{width:14px;height:14px;fill:#979797;flex:0 0 auto}
.usearch input{flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  color:#f7fcff;font-size:12px;font-family:inherit;padding:0}
.usearch input::placeholder{color:#7c7c7c}
.usearch button{width:18px;height:18px;border:0;padding:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.usearch button svg{width:11px;height:11px;fill:#979797}
.usearch button:hover svg{fill:#f7fcff}
.usearch .ucount{font-size:11px;color:#7c7c7c;flex:0 0 auto;font-variant-numeric:tabular-nums}
.urows{display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:38vh;min-height:0}
.urows::-webkit-scrollbar{display:none}
.umore{margin-top:4px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:7px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#f7fcff;font-size:11px;font-family:inherit;cursor:pointer}
.umore:hover{border-color:#86c8ee;background:rgba(134,200,238,.1)}
.umore span{color:#7c7c7c;font-variant-numeric:tabular-nums}
.uempty{color:#979797;font-size:11px;padding:10px 4px;margin:0}
/* a project with 30 types used to hide 22 of them behind a clipped row; three rows show,
   the rest scroll, and the fade says there is more */
.chipwrap{max-height:96px;overflow-y:auto;padding-bottom:2px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 10px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 10px),transparent)}
.chipwrap::-webkit-scrollbar{display:none}

.segmented{display:inline-flex;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.segmented button{border:0;background:transparent;color:#979797;font-family:inherit;font-size:12px;
  padding:4px 12px;cursor:pointer;line-height:18px}
.segmented button[aria-pressed="true"]{background:#86c8ee;color:#0e2a3c;font-weight:500}

/* a floorplan is a button, because it opens the zoomable one */
.planbtn{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.05)}
.planbtn img{width:100%;height:100%;max-height:420px;object-fit:contain;display:block}
.planhint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;
  align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.7);
  backdrop-filter:blur(10px);color:#f7fcff;font-size:11px;font-family:"Suisse Int'l",sans-serif;
  opacity:0;transition:opacity .18s;pointer-events:none}
.planbtn:hover .planhint{opacity:1}

.utags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.utag{font-size:10px;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:4px;
  background:rgba(134,200,238,.16);color:#86c8ee;font-family:"Suisse Int'l",sans-serif}

/* --- what a unit card can do ----------------------------------------------
   Shortlist, Share and Request a callback, identical on all five developers. */
.cardacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cact{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#f7fcff;
  font-family:"Suisse Int'l",sans-serif;font-size:12px;cursor:pointer;line-height:1}
.cact svg{width:14px;height:14px;fill:currentColor}
.cact:hover{border-color:#86c8ee}
.cact.on{background:rgba(134,200,238,.16);border-color:#86c8ee;color:#86c8ee}
.cact-go{background:#86c8ee;border-color:#86c8ee;color:#0e2a3c;font-weight:500}
.cact-go:hover{background:#9ed4f2}

#callback{position:fixed;inset:0;z-index:190;display:flex;align-items:center;justify-content:center}
.cbveil{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.cbcard{position:relative;width:min(420px,92vw);max-height:92vh;overflow-y:auto;
  background:#161616;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px;
  display:flex;flex-direction:column;gap:12px;font-family:"Suisse Int'l",sans-serif}
.cbhead{display:flex;align-items:center;justify-content:space-between}
.cbhead h3{margin:0;font-size:17px;font-weight:600;color:#f7fcff}
.cbhead button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cbabout{margin:0;font-size:12px;color:#b4b4b4}
.cbabout strong{color:#f7fcff;font-weight:500}
.cbcard label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#979797}
.cbcard input,.cbcard textarea{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  border-radius:8px;padding:9px 11px;color:#f7fcff;font-size:13px;font-family:inherit;outline:none;
  resize:vertical}
.cbcard input:focus,.cbcard textarea:focus{border-color:#86c8ee}
.cbrow{display:flex;gap:8px;margin-top:2px}
.cbgo,.cbwa{flex:1 1 0;text-align:center;padding:10px;border-radius:8px;font-size:13px;
  font-family:inherit;cursor:pointer;text-decoration:none;line-height:1.2}
.cbgo{border:0;background:#86c8ee;color:#0e2a3c;font-weight:500}
.cbgo:hover{background:#9ed4f2}
.cbwa{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#f7fcff}
.cbwa:hover{border-color:#86c8ee}
.cbnote{margin:0;font-size:10.5px;line-height:1.5;color:#7c7c7c}

/* --- the plot tooltip -----------------------------------------------------
   Every masterplan on the five sites answers a hover with a card on the shape. */
#plottip{position:fixed;z-index:120;display:none;pointer-events:none;
  padding:8px 11px;border-radius:8px;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);font-family:"Suisse Int'l",sans-serif;
  box-shadow:0 6px 22px rgba(0,0,0,.45);max-width:260px}
#plottip strong{display:block;font-size:13px;font-weight:600;color:#f7fcff;line-height:1.3}
#plottip span{display:block;font-size:11px;color:#b4b4b4;margin-top:2px;text-transform:capitalize}
#plottip .tipmoney{color:#f7fcff;font-variant-numeric:tabular-nums;text-transform:none}
#plottip em{display:inline-block;margin-top:5px;font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px}
#plottip .tip-avail{background:rgba(63,185,80,.22);color:#5ed36f}
#plottip .tip-res{background:rgba(210,153,34,.22);color:#e0b03a}
#plottip .tip-sold{background:rgba(255,255,255,.12);color:#b4b4b4}

/* Modon's phone header, measured at 430: Back @126, the current crumb @170, Menu @378.
   Everything else steps into the sidebar rather than off the product. */
#topbar .barbtn[data-tool="menu"]{display:none}
.mtool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:10px 4px;border:1px solid #2f2f2f;border-radius:8px;background:#1f1f1f;color:#f7fcff;
  font-family:"Suisse Int'l",sans-serif;font-size:11px;cursor:pointer}
.mtool svg{width:20px;height:20px;fill:currentColor}
.mtool[aria-pressed="true"]{border-color:#86c8ee}
.mtool[disabled]{opacity:.35;cursor:default}

@media (max-width:640px){
  #topbar .barbtn{display:none}
  #topbar .barbtn[data-tool="menu"],
  #topbar #btn-back{display:flex}
  #crumbs .crumb:not(.here),#crumbs .sep{display:none}
  #crumbs .crumb.here{font-size:15px}
}

body.ui-hidden #topbar,
body.ui-hidden #chipbar{opacity:0;pointer-events:none;transition:opacity .3s}

@media (max-width:900px){
  #topbar{height:56px;top:8px;left:8px;right:8px}
  #chipbar{top:76px}
  #leftpanels{top:76px}
  body.has-chips #leftpanels{top:146px}
  body.has-chips #rail{top:146px;max-height:calc(100vh - 166px)}
  #brandmark{padding:0 12px}
  #brandmark img{width:80px}
  #topbar .barbtn{min-width:42px;padding:0 6px;gap:0}
  #topbar .barbtn span{display:none}
  #crumbs{padding:0 4px}
  #crumbs .crumb{font-size:13px;padding:0 5px}
  #crumbs .sep{width:16px}
  #chipbar{justify-content:flex-start}
}
@media (max-width:640px){
  #brandmark{display:none}
}

.favrow{display:flex;align-items:center;gap:8px}
.favdrop{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.14);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto}
.favdrop svg{width:11px;height:11px;fill:#979797}
.favdrop:hover{border-color:#86c8ee}
.favdrop:hover svg{fill:#f7fcff}

/* --- Al Jubail's masterplan layers ----------------------------------------
   The island publishes a 23 row legend, 76 amenity pins, 5 land-use masks, road and
   entrance overlays, 3 masterplan 360s and a number on every released plot. */

#jubail-zones .jnums text{fill:#fff;font-family:"Suisse Int'l",sans-serif;font-size:7px;
  font-weight:500;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:1.6px}
.jpins{position:absolute;inset:0;pointer-events:none}
.jpin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  border:2px solid #fff;background:var(--pin,#86c8ee);display:flex;align-items:center;
  justify-content:center;cursor:pointer;pointer-events:auto;padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform .15s}
.jpin:hover{transform:translate(-50%,-50%) scale(1.18)}
.jpin img{width:19px;height:19px;object-fit:contain;display:block}
.jpin-360{background:rgba(0,0,0,.72)}

.jlegend{margin-top:4px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.jlegend summary{font-size:11px;color:#979797;cursor:pointer;list-style:none;
  font-family:"Suisse Int'l",sans-serif}
.jlegend summary::-webkit-details-marker{display:none}
.jlegend summary:hover{color:#f7fcff}
.jlegrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px;max-height:210px;
  overflow-y:auto}
.jlegrid::-webkit-scrollbar{display:none}
.jleg{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:6px;border:0;
  background:rgba(255,255,255,.04);color:#7c7c7c;font-size:10.5px;font-family:inherit;
  cursor:pointer;text-align:left;line-height:1.25}
.jleg img{width:14px;height:14px;object-fit:contain;flex:0 0 auto;opacity:.5}
.jlegdot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.jleg.on{background:rgba(134,200,238,.14);color:#f7fcff}
.jleg.on img{opacity:1}
.jleg span{min-width:0;overflow-wrap:anywhere;line-height:1.2}

/* the floorplan sheet, drawn at the PNG's own pixel size and scaled once by CSS so the
   dimension rules, the metre numbers and the room chips ride with it */
.jplan{position:relative;background:rgba(255,255,255,.04);min-height:280px;padding:12px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.jplan-none{color:#7c7c7c;font-size:13px;padding:40px}
.jsheet{position:relative;container-type:inline-size;transform-origin:center;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  height:min(56vh,520px);width:auto;max-width:100%;flex:0 0 auto}
.jline{position:absolute;background:rgba(255,255,255,.55);pointer-events:none}
.jnum{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:500;
  font-family:"Suisse Int'l",sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;
  white-space:nowrap}
.jroom{position:absolute;transform:translate(-50%,-50%);border:0;background:rgba(0,0,0,.6);
  color:#f7fcff;font-family:"Suisse Int'l",sans-serif;padding:3px 9px;border-radius:6px;
  white-space:nowrap;line-height:1.2;text-transform:capitalize;cursor:default}
.jroom-go{cursor:pointer;background:rgba(134,200,238,.82);color:#0e2a3c;font-weight:500}
.jroom-go:hover{background:#86c8ee}
.jplanzoom{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.7);backdrop-filter:blur(10px);color:#f7fcff;font-size:11px;
  font-family:"Suisse Int'l",sans-serif;cursor:pointer}
.jplanzoom:hover{border-color:#86c8ee}
.jsheet.jmir{transform:scaleX(-1)}
.jsheet.jmir .jnum{transform:translate(-50%,-50%) scaleX(-1)}
.jsheet.jmir .jroom{transform:translate(-50%,-50%) scaleX(-1)}

.jnum-plot{position:absolute;transform:translate(-50%,-50%);color:#fff;font-size:10px;
  font-weight:500;font-family:"Suisse Int'l",sans-serif;white-space:nowrap;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}

/* --- Burtville floor plates ------------------------------------------------ */
.bstats{display:flex;gap:14px;margin:2px 0 10px}
.bstats div{display:flex;flex-direction:column;gap:1px}
.bstats strong{color:#f7fcff;font-size:16px;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums}
.bstats span{color:#979797;font-size:10px;text-transform:uppercase;letter-spacing:.04em}

#plan-hot text.proom{fill:#fff;font-family:"Suisse Int'l",sans-serif;font-size:13px;
  text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:3px;
  pointer-events:none}
.planlegend{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:14px;
  padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);font-family:"Suisse Int'l",sans-serif;font-size:11px;
  color:#f7fcff}
.planlegend span{display:inline-flex;align-items:center;gap:6px}
.planlegend i{width:9px;height:9px;border-radius:2px;display:block}
.planlegend button{border:1px solid rgba(255,255,255,.16);background:transparent;color:#979797;
  font-family:inherit;font-size:11px;padding:3px 10px;border-radius:999px;cursor:pointer}
.planlegend button.on{background:#86c8ee;border-color:#86c8ee;color:#0e2a3c}
#plan-hot text.proom{display:none}
#plan-hot.hot-zoom text.proom{display:block}

/* --- Bloom Living ---------------------------------------------------------
   A community aerial with thirteen district outlines and their cards, then each
   district's own render, then Toledo's masterplan with its released plots. */
.bpanel{width:20rem;padding:16px 20px 20px;border-radius:4px;
  border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.8);backdrop-filter:blur(16px);
  display:flex;flex-direction:column}
.bptitle{color:#fff;font-size:16px;font-weight:500;margin:0}
.bprule{height:1px;background:#86c8ee;margin:8px 0}
.bpabout{color:#d4d4d4;font-size:12px;line-height:1.45;margin:0}
.bdlist{display:flex;flex-direction:column;gap:3px;margin-top:12px;max-height:52vh;overflow-y:auto}
.bdlist::-webkit-scrollbar{display:none}
.bdrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
  border:0;border-radius:7px;background:rgba(255,255,255,.05);cursor:pointer;font-family:inherit;
  text-align:left}
.bdrow:hover{background:rgba(134,200,238,.14)}
.bdname{color:#f7fcff;font-size:13px}
.bdmeta{color:#8f8f8f;font-size:11px;flex:0 0 auto}
.btypes{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:46vh;overflow-y:auto}
.btypes::-webkit-scrollbar{display:none}
.btype{border:0;padding:0;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05);
  cursor:pointer;text-align:left;font-family:inherit}
.btype:hover{background:rgba(134,200,238,.14)}
.btype img{width:100%;height:74px;object-fit:cover;display:block}
.btype-blank{height:74px;display:flex;align-items:center;justify-content:center;color:#666;
  font-size:10px}
.btype-txt{padding:7px 8px;display:flex;flex-direction:column;gap:2px}
.btype-txt b{color:#f7fcff;font-size:12px;font-weight:500;overflow-wrap:anywhere;line-height:1.25}
.btype-txt span{color:#979797;font-size:10px;text-transform:capitalize}

/* Bloom's twelve other Abu Dhabi developments, read as a list because Bloom gives them
   a render and a handover stage but no plot this composite could place. */
.bpsec{margin:14px 0 6px;padding-top:11px;border-top:1px solid rgba(134,200,238,.25);
  color:#86c8ee;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.bpsec span{color:#8f8f8f;letter-spacing:0}
.bportlist{display:flex;flex-direction:column;gap:4px;max-height:44vh;overflow-y:auto}
.bportlist::-webkit-scrollbar{display:none}
.bport{display:flex;align-items:center;gap:9px;padding:0;border:0;border-radius:8px;
  overflow:hidden;background:rgba(255,255,255,.05);cursor:pointer;text-align:left;
  font-family:inherit}
.bport:hover{background:rgba(134,200,238,.14)}
.bport img{width:58px;height:44px;object-fit:cover;display:block;flex:0 0 auto}
.bport-txt{display:flex;flex-direction:column;gap:2px;padding:5px 8px 5px 0;min-width:0}
.bport-txt b{color:#f7fcff;font-size:12px;font-weight:500;line-height:1.25}
.bport-txt span{color:#979797;font-size:10px}

.bcard{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;
  pointer-events:auto;transition:transform .18s;transform-origin:center}
.bcard img{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.bcard:hover{filter:brightness(1.15)}
.bbadge{position:absolute;transform:translate(-50%,-50%);padding:2px 7px;border-radius:4px;
  background:rgba(0,0,0,.66);color:#f7fcff;font-size:10px;font-family:"Suisse Int'l",sans-serif;
  pointer-events:none;white-space:nowrap}
/* these are full colour badges, not line icons: inverting them made a white glyph on a
   white disc and destroyed every one of them */
#chipbar .chip img{width:20px;height:20px;object-fit:contain;display:block}

/* --- the phone -------------------------------------------------------------
   Every developer panel is authored at 20 to 21 rem and #leftpanels is inset 6.5 rem for
   the zoom rail, which puts its right edge past a 390 wide screen. On a phone the panels
   are the page, so they take the width and stack instead of sitting side by side. */
@media (max-width:640px){
  #leftpanels{left:8px !important;right:8px;flex-direction:column;gap:8px;
    max-height:calc(100dvh - 6rem);overflow-y:auto;padding-bottom:12px}
  #leftpanels::-webkit-scrollbar{display:none}
  #leftpanels > div{max-width:100%;max-height:none !important;overflow:visible !important}
  #leftpanels > div > div{width:auto !important;max-width:100%}
  #leftpanels .bpanel{width:auto}
  .urows{max-height:34vh}
  .btypes{grid-template-columns:1fr 1fr;max-height:38vh}
  .bdlist{max-height:40vh}
  /* the legend is a two column grid inside a panel that is now the width of the phone */
  .jlegrid{grid-template-columns:1fr 1fr;max-height:34vh}
  .jleg{min-width:0}
  /* the zoom rail would sit on top of the panels at this width */
  #zoomrail{right:10px;top:auto;bottom:96px;transform:none}
  #plottip{display:none !important}
  .cardacts{gap:6px}
  .cact{padding:8px 11px;font-size:11px}
  .planlegend{left:10px;right:10px;bottom:10px;justify-content:center;flex-wrap:wrap}
}

/* the phone sheet: the panels live at the bottom and can be put away */
#sheet-handle{display:none}
@media (max-width:640px){
  #leftpanels{top:auto !important;bottom:8px;left:8px !important;right:8px;
    max-height:min(56dvh,520px);border-radius:14px;background:rgba(0,0,0,.5);
    backdrop-filter:blur(8px);transition:max-height .22s ease}
  body.sheet-down #leftpanels{max-height:46px;overflow:hidden}
  #sheet-handle{display:flex;align-items:center;gap:10px;width:100%;flex:0 0 auto;
    position:sticky;top:0;z-index:2;padding:12px 14px 10px;border:0;cursor:pointer;
    background:linear-gradient(rgba(10,10,10,.92),rgba(10,10,10,.72));
    font-family:"Suisse Int'l",sans-serif;color:#f7fcff;font-size:12px;
    border-radius:14px 14px 0 0}
  #sheet-handle .grip{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
  #sheet-handle .lbl{color:#979797}
  body.sheet-down #sheet-handle{border-radius:14px}
  /* the watermark and the compass belong to the map, and the map is behind the sheet */
  .visible.z-50.fixed.bottom-0.right-0{display:none}
  #compass-slot{bottom:auto;top:76px;left:auto;right:12px}
  #zoomrail{bottom:auto;top:150px}
}

.gtile-vid img{background:#101010}
.playbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;
  border-radius:50%;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.5)}
.playbadge::after{content:"";position:absolute;left:10px;top:7px;border-left:8px solid #fff;
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.gtile-vid{position:relative}
.gtile-vid::after{content:"";position:absolute;left:50%;top:56px;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.5)}
.gtile-vid::before{content:"";position:absolute;left:calc(50% + 3px);top:56px;
  transform:translate(-50%,-50%);z-index:1;border-left:11px solid #fff;
  border-top:8px solid transparent;border-bottom:8px solid transparent}
/* the description is the developer's own copy, scrolled rather than cut */
.mabout{max-height:8.5rem;overflow-y:auto}
.mabout::-webkit-scrollbar{display:none}

/* the walkthrough's station plan: a compact reference, not a grey panel */
.vrplan{background:rgba(255,255,255,.05);max-height:150px;display:flex;align-items:center;
  justify-content:center;padding:6px}
.vrplan svg{max-height:138px;width:auto}
#vr-rooms{max-height:112px;overflow-y:auto}
#vr-rooms::-webkit-scrollbar{display:none}

/* the plan viewer's own options: the interior scheme and the handing */
.planopts{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap;
  justify-content:flex-end;max-width:min(420px,60vw)}
.planopts button{padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.7);backdrop-filter:blur(10px);color:#f7fcff;font-size:11px;
  font-family:"Suisse Int'l",sans-serif;cursor:pointer}
.planopts button:hover{border-color:#86c8ee}
.planopts button.on{background:#86c8ee;border-color:#86c8ee;color:#0e2a3c;font-weight:500}

/* the floor tabs used to sit under the plate legend, which hid the first five or six */
.plantabs{position:absolute;left:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:6px;
  max-width:min(760px,64vw);max-height:112px;overflow-y:auto}
.plantabs::-webkit-scrollbar{display:none}
.plantabs-legend{bottom:64px}

/* the first paint says what it is doing rather than showing a flat colour */
#loader-box{display:flex;flex-direction:column;align-items:center;gap:18px}
#loader-box img{width:190px;height:auto;display:block;opacity:.95}
#loader-note{margin:0;color:#7c7c7c;font-size:12px;font-family:"Suisse Int'l",sans-serif;
  letter-spacing:.02em}
#plan-hot text.proom{font-size:var(--roomsize,13px)}

/* the cluster range Modon prints over each block: "MM01-MM04", "P31-P34" */
.mlabel{position:absolute;transform:translate(-50%,-50%);padding:3px 9px;border-radius:6px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);color:#f7fcff;font-size:11px;
  font-weight:500;font-family:"Suisse Int'l",sans-serif;white-space:nowrap;pointer-events:none;
  letter-spacing:.01em}
.jpin-modon{background:rgba(20,20,20,.82);border-color:rgba(255,255,255,.85);width:26px;height:26px}
.jpin-modon img{width:15px;height:15px}

/* the one control Hide UI leaves behind, so the only way back is not a reload. It sits where
   Hide UI itself sits, at the top right: putting the restore control at the bottom of the
   screen made a visitor look for it in a place the toolbar has never occupied. */
/* Sits under the Hide UI control it replaces: same right edge, same vertical centre.
   The pill is 142px against a 60px circle, so matching CENTRES would push it off the
   viewport; the right edge is the edge a visitor actually reads as "the same place". */
#unhide{position:fixed;right:20px;top:24px;z-index:80;display:inline-flex;align-items:center;
  gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.72);backdrop-filter:blur(12px);color:#f7fcff;font-size:12px;
  font-family:"Suisse Int'l",sans-serif;cursor:pointer;opacity:.55;transition:opacity .2s}
#unhide:hover{opacity:1;border-color:#86c8ee}
#unhide[hidden]{display:none}
body.ui-hidden #unhide{display:inline-flex}

/* the apartment number on a Burtville plate, and the area name on Jubail's aerial */
#plan-hot text.punit{fill:#fff;font-family:"Suisse Int'l",sans-serif;
  font-size:calc(var(--roomsize,13px) * .85);font-weight:600;text-anchor:middle;
  dominant-baseline:central;paint-order:stroke;stroke:rgba(0,0,0,.7);stroke-width:3px}
.jarea{position:absolute;transform:translate(-50%,-50%);padding:5px 13px;border-radius:999px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);
  color:#f7fcff;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  font-family:"Suisse Int'l",sans-serif;white-space:nowrap;pointer-events:auto;cursor:pointer;
  transition:background .18s,border-color .18s}
.jarea:hover{background:rgba(0,0,0,.75);border-color:#86c8ee}
.jarea.on{background:#86c8ee;border-color:#86c8ee;color:#0e2a3c}

/* Aldar's bottom sibling switcher: the 24 buildings of a community, in its own order */
/* safe center, not center: a centred flex row that overflows pushes its overflow out BOTH
   sides, and scrollLeft cannot go negative, so the chips past the left edge were unreachable
   by any means. Gardenia Bay has 24 buildings and three of them could not be clicked at all.
   safe falls back to flex-start the moment the content stops fitting. */
#viewnav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:safe center;
  gap:8px;padding:14px 18px;overflow-x:auto;scrollbar-width:none;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0))}
#viewnav::-webkit-scrollbar{display:none}
.vchip{pointer-events:auto;flex:0 0 auto;height:34px;padding:0 15px;border-radius:999px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(20,20,20,.82);backdrop-filter:blur(10px);color:#f1efe9;
  border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:500;white-space:nowrap;
  font-family:"Suisse Int'l",sans-serif;cursor:pointer;transition:background .18s,border-color .18s}
.vchip:hover{background:rgba(60,60,60,.9)}
.vchip.on{border-color:#e8734a;color:#fff}
.vchip em{font-style:normal;font-size:10px;opacity:.6;line-height:1}
body.ui-hidden #viewnav{opacity:0;pointer-events:none;transition:opacity .3s}
@media (max-width:720px){#viewnav{justify-content:flex-start;padding:10px 12px}
  .vchip{height:30px;padding:0 12px;font-size:11.5px}}
body.has-viewnav #compass-slot{bottom:74px}

/* Aldar's own plot layer over a cluster render */
#flat-ovl{pointer-events:none;z-index:20}
#flat-ovl .ovlplot{pointer-events:auto;cursor:pointer;stroke-width:1.1;
  transition:fill .14s,stroke .14s}
#flat-ovl .ovlplot:hover{fill:rgba(134,200,238,.34);stroke:#cfe9fb;stroke-width:1.8}

/* Modon prints an amenity's name beside its glyph, on the side the record names */
.jpin-modon.lab{overflow:visible}
.jpin-modon.lab b{position:absolute;font-weight:500;font-size:11px;letter-spacing:.02em;
  color:#f4fbff;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.85);pointer-events:none;
  font-family:"Suisse Int'l",sans-serif}
.jpin-modon.lab-right b{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.jpin-modon.lab-left b{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.jpin-modon.lab-top b{bottom:calc(100% + 4px);left:50%;transform:translateX(-50%)}
.jpin-modon.lab-bottom b{top:calc(100% + 4px);left:50%;transform:translateX(-50%)}
.jarea{border-color:color-mix(in srgb,var(--jc,#86c8ee) 55%,transparent)}
.jarea.on{background:var(--jc,#86c8ee);border-color:var(--jc,#86c8ee)}
.jarea i{font-style:normal;display:inline-block;margin-right:6px;width:15px;height:15px;
  line-height:15px;border-radius:50%;background:var(--jc,#86c8ee);color:#08202e;font-size:10px;
  font-weight:700;text-align:center;vertical-align:-2px}
.jarea.on i{background:rgba(0,0,0,.35);color:#fff}

/* Al Jubail calls this panel Map Filters and groups it into two sections with swatches */
.jlegsec{margin:12px 2px 6px;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.jleg{position:relative}
.jleg[style*="--jsw"]::after{content:"";position:absolute;left:6px;top:50%;width:8px;height:8px;
  margin-top:-4px;border-radius:2px;background:var(--jsw)}
.jleg[style*="--jsw"]{padding-left:22px}
.jlegall{width:100%;justify-content:center;margin-bottom:4px}
.jparks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;padding:2px 0 6px 22px}
.jpark{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);color:#dceaf3;font-size:10.5px;cursor:pointer}
.jpark:hover{background:rgba(255,255,255,.16)}
.jpark.on{background:#86c8ee;border-color:#86c8ee;color:#0e2a3c}
text.jmask{fill:#fff;font-family:"Suisse Int'l",sans-serif;font-size:11px;font-weight:500;
  text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:3px;pointer-events:none}

/* Aldar's mall floor waypoints, with the disc its own artwork carries */
.fhot{display:flex;flex-direction:column;align-items:center;gap:3px}
.fhot img{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.fhotlab{font-family:"Suisse Int'l",sans-serif;font-size:11px;font-weight:500;color:#fff;
  white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* Burtville prints the range each gardens block holds, over the block */
text.pcluster{fill:#fff;font-family:"Suisse Int'l",sans-serif;font-weight:600;
  font-size:calc(var(--roomsize,13px) * 1.15);text-anchor:middle;paint-order:stroke;
  stroke:rgba(0,0,0,.8);stroke-width:4px;pointer-events:none}
.planpins{position:absolute;inset:0;pointer-events:none}
.planpins .jpin{pointer-events:auto}

/* Burtville's plate carries its own amenity, circulation and view layer */
.plabel{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;
  gap:5px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);color:#f4fbff;font-size:11px;font-weight:500;
  font-family:"Suisse Int'l",sans-serif;white-space:nowrap;cursor:pointer;pointer-events:auto;
  transition:background .18s}
.plabel:hover{background:rgba(0,0,0,.82);border-color:#86c8ee}
.plabel.is360{border-color:rgba(134,200,238,.5)}
.pview{position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}

/* Burtville's own map: its artwork layer and its MAP FILTERS card */
.part{position:absolute;pointer-events:none;max-width:none}
.part.hit{pointer-events:auto;cursor:pointer;transition:filter .18s}
.part.hit:hover{filter:brightness(1.25) drop-shadow(0 0 8px rgba(134,200,238,.7))}
.bfilters{position:absolute;left:16px;top:96px;z-index:60;width:210px;padding:10px 12px 12px;
  border-radius:12px;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);color:#f1efe9;
  font-family:"Suisse Int'l",sans-serif;pointer-events:auto}
.bfilters summary{cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;list-style:none;margin-bottom:8px}
.bfrow{display:flex;gap:6px;margin-bottom:8px}
.bfrow button{flex:1;padding:4px 0;border-radius:7px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);color:#dceaf3;font-size:10.5px;cursor:pointer}
.bfrow button:hover{background:rgba(255,255,255,.18)}
.bfcat{display:flex;align-items:center;gap:8px;width:100%;padding:5px 7px;margin-bottom:3px;
  border-radius:8px;background:transparent;border:1px solid transparent;color:#9fb3bf;
  font-size:12px;cursor:pointer;transition:background .16s,color .16s}
.bfcat img{width:17px;height:17px;object-fit:contain;opacity:.55}
.bfcat:hover{background:rgba(255,255,255,.08)}
.bfcat.on{background:rgba(134,200,238,.14);border-color:rgba(134,200,238,.4);color:#fff}
.bfcat.on img{opacity:1}

/* the island's own way into Nawayef Souq */
.jpin-souq{width:auto;height:auto;padding:6px 13px;border-radius:999px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);
  color:#f4fbff;font-size:12px;font-weight:600;white-space:nowrap;
  font-family:"Suisse Int'l",sans-serif;transition:background .18s,border-color .18s}
.jpin-souq:hover{background:#86c8ee;border-color:#86c8ee;color:#0e2a3c}

/* Burtville's tower elevation: pick a floor off the building */
#towerwrap{z-index:10}
/* The elevation fills the window. It was letterboxed inside its own box, which left the
   render small with dark bars either side, and the mask is authored xMidYMid slice, which is
   cover, so cover is also the framing the hit regions were registered against. */
#towerbox{position:absolute;inset:0;line-height:0}
#towerbox video,#towerbox img{width:100%;height:100%;object-fit:cover;display:block}
.towersvg{width:100%;height:100%;display:block}
.tfloorg path{fill:rgba(134,200,238,0);stroke:rgba(255,255,255,0);stroke-width:2px;
  cursor:pointer;transition:fill .18s,stroke .18s}
.tfloorg.on path{fill:rgba(134,200,238,.34);stroke:#cfe9fb}
.towerfloors{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:4px;max-height:80vh;overflow-y:auto;
  scrollbar-width:none;padding:8px;border-radius:12px;background:rgba(0,0,0,.6);
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12)}
.towerfloors::-webkit-scrollbar{display:none}
.towerfloors button{min-width:44px;padding:5px 10px;border-radius:7px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);color:#e9f3f8;font-size:12px;font-weight:500;cursor:pointer;
  font-family:"Suisse Int'l",sans-serif;transition:background .16s}
.towerfloors button:hover:not([disabled]){background:#86c8ee;color:#0e2a3c;border-color:#86c8ee}
.towerfloors button[disabled]{opacity:.32;cursor:default}
.jpin-modon .pdot{display:block;width:11px;height:11px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 1px 4px rgba(0,0,0,.6)}
.cswatch{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;
  vertical-align:0;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.jarea.here{box-shadow:0 0 0 2px var(--jc,#86c8ee),0 3px 14px rgba(0,0,0,.5)}
[data-jchip="zone"].here{outline:2px solid #86c8ee;outline-offset:1px}

/* a Burtville landmark opens its own photo card, and hovering a project dims the rest */
.lmcard{position:absolute;left:16px;bottom:16px;z-index:70;width:270px;border-radius:14px;
  overflow:hidden;background:rgba(0,0,0,.82);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);color:#f1efe9;
  font-family:"Suisse Int'l",sans-serif;pointer-events:auto}
.lmcard img{display:block;width:100%;height:132px;object-fit:cover}
.lmbody{padding:11px 13px 13px}
.lmbody b{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px}
.lmbody p{font-size:11.5px;line-height:1.45;color:#a9bcc7;margin:0}
.lmroutes{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.lmroutes button{padding:4px 9px;border-radius:999px;background:rgba(134,200,238,.16);
  border:1px solid rgba(134,200,238,.4);color:#cfe9fb;font-size:10.5px;cursor:pointer}
.lmroutes button:hover{background:#86c8ee;color:#0e2a3c}
.lmclose{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.2);cursor:pointer}
.jpins.dimming .part:not(.hit):not(.lmpath){opacity:.22;transition:opacity .2s}
.jpins.dimming .jpin{opacity:.22;transition:opacity .2s}
.lmpath{pointer-events:none;z-index:5}
[data-bplot].bpicked{stroke-width:2.4px !important}

/* Aldar's on-map Filters card, on its own published category axis */
.afilters{width:16rem;padding:11px 13px 12px;border-radius:6px;
  background:rgba(0,0,0,.78);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);color:#fff;font-family:"Suisse Int'l",sans-serif}
.afilters summary{cursor:pointer;font-size:13px;font-weight:500;list-style:none;
  display:flex;align-items:center;gap:8px;margin-bottom:8px}
.afilters summary::after{content:"";margin-left:auto;width:7px;height:7px;
  border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg) translateY(-2px)}
.afilters[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.acat{display:flex;align-items:center;width:100%;padding:5px 8px;margin-bottom:2px;
  border-radius:4px;background:transparent;border:1px solid transparent;color:#a3a3a3;
  font-size:12px;cursor:pointer;transition:background .16s,color .16s}
.acat span{margin-left:auto;color:#fff;font-weight:500}
.acat:hover{background:rgba(255,255,255,.07)}
.acat.on{background:rgba(134,200,238,.14);border-color:rgba(134,200,238,.4);color:#fff}
body.ui-hidden #aldarfilters{opacity:0;pointer-events:none;transition:opacity .3s}
/* a gallery video is a poster with a small mark, not Chrome's own giant play button */
.vplay{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.3);pointer-events:none}
.vplay::after{content:"";width:0;height:0;margin-left:2px;
  border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

/* The Map Filters body is ONE column with no scroll of its own: the inventory panel around it
   already scrolls, and a second scroll region inside it clipped ten of the twenty three
   filters where nothing could reach them. Each section grid must not carry its own 210px cap
   either, or the sections clip against each other for the same reason. */
.jlegbody .jlegrid.open{max-height:none;overflow:visible}

/* Utilities the markup asks for that Aldar's compiled bundle does not contain.
   A class that is not in the bundle styles nothing and fails silently, which is how the
   title pill on every 360 and every floorplan ended up with ten pixels of vertical padding
   and none at all horizontally: px-3.5 was doing nothing and py-2.5 was doing its half.
   Only utilities the markup actually uses are defined here, with Tailwind's own values. */
.px-3\.5{padding-left:14px;padding-right:14px}
.p-2\.5{padding:10px}
.px-0\.5{padding-left:2px;padding-right:2px}
.mt-2\.5{margin-top:10px}
.text-base{font-size:16px;line-height:24px}
.border-white\/5{border-color:rgba(255,255,255,.05)}
.m-auto{margin:auto}
.select-none{user-select:none;-webkit-user-select:none}
.max-w-none{max-width:none}
.min-w-0{min-width:0}
.whitespace-normal{white-space:normal}
.overflow-visible{overflow:visible}
.origin-center{transform-origin:center}
.grow-0{flex-grow:0}
.font-normal{font-weight:400}
.flex-row{flex-direction:row}
.box-border{box-sizing:border-box}
.border-solid{border-style:solid}
.pointer-events-auto{pointer-events:auto}
.px-0{padding-left:0;padding-right:0}
.py-0{padding-top:0;padding-bottom:0}

/* The sibling row scrolls sideways with a hidden scrollbar, so the edges say there is more.
   Without this the only cue that Gardenia Bay has 24 buildings is that one is cut in half. */
/* NOT position:relative here: the row is position:fixed at the bottom and a later bare
   position rule silently reset it to static, which moved the whole switcher to the top of
   the page. The pseudo elements anchor to the fixed box perfectly well. */
#viewnav::before,#viewnav::after{content:"";position:absolute;top:0;bottom:0;width:56px;
  pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
#viewnav::before{left:0;background:linear-gradient(to right,rgba(0,0,0,.8),rgba(0,0,0,0))}
#viewnav::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.8),rgba(0,0,0,0))}
#viewnav.more-l::before{opacity:1}
#viewnav.more-r::after{opacity:1}

/* The title card sits above the media, not under it. On a tower elevation the render is
   centred and its left edge ran over the card, cutting "Bab Al Qasr Resort 19" to "Bab Al Qa".
   The CLOSE button had the same problem and was never given the same cure: #towerwrap at 10
   beat its auto z-index, so the elevation painted straight over the only way out and the
   screen was a dead end. Both corners are lifted now. */
#planview > .absolute.top-4.left-4,
#planview > button[data-planclose]{z-index:30}
#towerwrap{z-index:10}
/* the Filters card is a panel in the left column, not a floating box over one */
#aldarfilters{pointer-events:auto}
#aldarfilters .afilters{width:16rem}

/* An area card is a label on the map, not a poster: at 224px with a 20px title, six of them
   over Abu Dhabi covered the ground they are pointing at. The four bundles are Aldar's
   compiled Tailwind, so this is a real rule rather than a smaller w- class that would not
   exist in them. */
/* An area card is a label on the map, at the equal 144px size that was signed off. The
   markers themselves keep Aldar's own styling: the white place pill and the category pin
   artwork are the developer's, not ours. */
.areacard{width:144px;padding:5px 7px;gap:3px}
.areacard p{font-size:13px;line-height:1.25;margin:0 2px}
.areacard > div > div{margin-top:0;padding:1px 0}
.areacard button{padding:2px 4px}
.areacard button span{font-size:10px}

/* A floating panel is draggable by its own title row. */
#rail .railhead,#aldarfilters .afilters > summary,#jubail > div > div:first-child,
#burtville > div > div:first-child,#bloom > div > div:first-child,#modon > div > div:first-child,
#unitlist > div > div:first-child,#parking > div > div:first-child,
#inventory > div > div:first-child{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
#aldarfilters .afilters > summary,
#burtville > div > p.text-white.text-base.font-medium,
#modon > div > p.text-white.text-base.font-medium,
#bloom > div > p.text-white.text-base.font-medium{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
[data-moved="1"]{z-index:60}

/* Aldar's island outlines are off: the traced edge does not follow the coast on Saadiyat or
   Yas, so it reads as a mistake rather than a boundary. Hidden rather than deleted, because
   the marker still carries the hover link from its area card and removing it would take that
   with it. One line to bring them back. */
/* Only the island OUTLINES go, not every overlay. cardOverlay is the marker's own flag for
   "this shape belongs to an area card", which is exactly the 14 island tracings; the other
   74 are landmarks and project artwork, and blanket-hiding the kind took Sheikh Zayed Grand
   Mosque, Etihad Towers, Emirates Palace and Qasr Al Hosn off the map with them. */
[data-kind="Project_Overlay"][data-card-overlay="1"]{display:none !important}