/* 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]:not(.place-badge){background-color:#86c8ee !important;border-radius:8px}
button[data-explore]:not(.place-badge) span{color:#0e2a3c !important;font-weight:500}
button[data-explore]:not(.place-badge):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}
}
.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. */
.portfolio-logo{width:64px;height:32px;object-fit:contain;object-position:left center;margin-bottom:14px}
.portfolio-meta{color:#a9afb8;font-size:12px;margin:8px 0 14px}
.portfolio-panel .bpabout{margin:12px 0;line-height:1.7}
.ramhan-guide summary{cursor:pointer;color:#f3f8f9;font-size:13px;font-weight:600;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.ramhan-guide summary::-webkit-details-marker{display:none}
.ramhan-guide summary::after{content:'+';font-size:18px;font-weight:400}
.ramhan-guide[open] summary::after{content:'−'}
.ramhan-guide summary:focus-visible{outline:2px solid #d0e8eb;outline-offset:5px;border-radius:3px}
.ramhan-guide .portfolio-link{margin-top:7px;padding:10px 12px}
.portfolio-link{display:block;width:100%;box-sizing:border-box;text-align:left;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#b9e3fc;text-decoration:none}
.portfolio-link:hover{color:white}
.portfolio-drawings small{display:block;color:#9daab6;font-size:11px;margin-top:5px}
.project-marker{pointer-events:none!important}
.project-marker .map-pin{pointer-events:none}
.project-marker .project-filled{pointer-events:auto}
.marker-container[data-kind="IFrame"]{pointer-events:none!important}
.marker-container[data-kind="IFrame"] .map-pin{pointer-events:none}
.location-badge{pointer-events:auto}
.portfolio-link:focus-visible{outline:2px solid #86c8ee;outline-offset:2px}
.embedded-tour{height:100%;display:flex;flex-direction:column;background:#07131b}
.embedded-tour-header{display:flex;align-items:center;gap:12px;padding:10px 14px;color:white}
.embedded-tour-header>span{flex:1;min-width:0;font-size:13px;line-height:1.4}
.embedded-tour-header>a{font-size:12px;color:#b9e3fc;white-space:nowrap}
.embedded-tour-header>button{width:44px;height:44px;flex-shrink:0;font-size:28px;border-radius:50%;background:#20333e}
.embedded-tour iframe{display:block;width:100%;flex:1;min-height:0;border:0}
.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), (pointer:coarse) and (max-height:480px){
  #leftpanels{left:8px !important;right:8px;flex-direction:column;gap:8px;
    max-height:calc(100vh - 6rem);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), (pointer:coarse) and (max-height:480px){
  #leftpanels{top:auto !important;bottom:8px;left:8px !important;right:8px;
    max-height:min(56vh,520px);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}

/* The atlas shell shares one palette and one control rhythm. Location artwork is
   deliberately twice the project icon size; neither shrinks with the map zoom. */
:root{--atlas-panel:rgba(13,25,32,.96);--atlas-line:rgba(198,218,228,.18);
  --atlas-text:#f4f7f8;--atlas-muted:#adbdc6;--atlas-accent:#a9d7e9}
.place-badge{display:flex;align-items:center;justify-content:center;gap:7px;
  border:0;padding:0;background:none;color:var(--atlas-text);cursor:pointer;
  font-family:"Suisse Int'l",sans-serif;min-height:44px;touch-action:manipulation}
.location-badge{flex-direction:column;gap:2px;min-width:76px}
.place-icon{position:relative;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:34px;height:34px;border-radius:12px;
  background:var(--atlas-panel);border:1px solid var(--atlas-line);
  box-shadow:0 3px 12px rgba(0,0,0,.25);color:var(--atlas-accent)}
.location-badge .place-icon{width:44px;height:44px;border-radius:14px;
  border-color:rgba(169,215,233,.7);background:rgba(13,32,43,.96);
  box-shadow:0 4px 18px rgba(0,0,0,.3),inset 0 0 0 4px rgba(169,215,233,.06)}
.location-badge .place-icon > svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5}
.place-icon img{position:absolute;width:80%;height:80%;object-fit:contain}
.place-icon.has-art > :not(img){visibility:hidden}
.place-name{display:block;padding:6px 10px;border-radius:8px;background:var(--atlas-panel);
  border:1px solid var(--atlas-line);font-size:12px;line-height:1.25;font-weight:500;
  white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.location-badge .place-name{font-size:12px;line-height:1;padding:2px 8px;
  font-weight:600;letter-spacing:.015em}
/* Supplied wordmarks need a light plate and enough horizontal space to read.
   Artwork keeps its original colours and aspect ratio; aria-label names the button. */
.brand-badge .place-icon.has-art{background:#f8faf9;border-color:rgba(255,255,255,.8);
  box-shadow:0 4px 14px rgba(0,0,0,.23);border-radius:14px}
.brand-badge.location-badge .place-icon{width:76px;height:48px}
.brand-badge.location-badge.tall-brand .place-icon{height:76px}
.brand-badge.location-badge.wide-brand .place-icon{width:144px}
.brand-badge.project-badge .place-icon{width:56px;height:30px}
.brand-badge .place-icon img{width:86%;height:82%}
.brand-badge .place-name{display:none}
.brand-badge.location-badge .place-name{display:block}
[data-code="alghadeer"] .place-icon{overflow:hidden}
[data-code="alghadeer"] .place-icon img{width:90px;height:90px;max-width:none;max-height:none;
  top:-4px;left:calc(50% - 45px)}
.brand-badge:hover .place-icon.has-art,.brand-badge:focus-visible .place-icon.has-art{background:#fff}
.place-badge:hover .place-icon,.place-badge:focus-visible .place-icon{border-color:#d9f1fb;
  background:#244655;box-shadow:0 0 0 3px rgba(169,215,233,.18)}
.place-badge:hover .place-name{background:#244655}
/* One type scale and silhouette across every developer. Passive project names
   are quieter and smaller than district names; only filled names are controls. */
.place-badge.project-badge{position:relative;display:flex;align-items:center;gap:7px;
  min-width:0;min-height:26px;height:26px;box-sizing:border-box;padding:0 9px;
  border:1px solid rgba(201,223,230,.65);border-radius:8px;
  color:#f5f8f8;background:linear-gradient(160deg,rgba(39,68,79,.97),rgba(10,33,45,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(4,18,27,.2);
  transition:background .16s,border-color .16s;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.project-badge .place-name{position:static;display:block;transform:none;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;white-space:nowrap;
  font-size:10px;line-height:14px;font-weight:500;letter-spacing:0;color:inherit;
  pointer-events:none!important;text-shadow:0 1px 1px rgba(0,17,32,.25)}
.project-action{font:400 11px/1 sans-serif;opacity:.8;pointer-events:none}
.project-badge.project-filled:hover,.project-badge.project-filled:focus-visible{
  background:linear-gradient(160deg,#476570,#1d3b4b);border-color:#e5f4f8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 6px rgba(4,18,27,.25)}
.project-badge.project-filled:focus-visible{outline:2px solid #f3faff;outline-offset:3px}
.project-badge.project-filled:active{background:#102c3b}
.project-badge.project-filled:hover .place-name{background:none}
.place-badge.project-ghost{cursor:default;min-height:18px;height:18px;padding:0 6px;
  gap:0;border-radius:5px;border-color:rgba(231,240,243,.5);color:#f4f7f8;
  background:rgba(31,48,56,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.12)}
.project-ghost .place-name{font-size:9px;line-height:12px;font-weight:500}
[data-code="algurm"] .project-ghost{position:relative;top:-18px;left:-16px}

/* A stable project drawer appears after the area camera has settled. */
#area-project-menu{position:fixed;right:12px;width:340px;z-index:65;display:flex;
  flex-direction:column;overflow:hidden;background:#091e25;border:1px solid #ffffff26;
  border-radius:16px;box-shadow:0 16px 48px #06101666;color:#f7faf9;
  animation:area-panel-in .2s ease-out}
#area-project-menu[hidden]{display:none}
.area-menu-nav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 0}
.area-menu-nav button{min-height:44px;border:0;background:none;color:#c0cdcf;cursor:pointer}
.area-menu-back{display:flex;align-items:center;gap:10px;font-size:12px;padding:0 8px}
.area-menu-close{width:44px;border-radius:50%;font-size:26px;line-height:1}
.area-menu-nav button:hover{color:#fff;background:#ffffff0d;border-radius:10px}
.area-menu-head{flex:none;padding:16px 24px 20px;border-bottom:1px solid #ffffff20}
.area-menu-head small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a6b9bc}
.area-menu-head h2{margin:8px 0 0;font-size:26px;line-height:1.15;font-weight:500;letter-spacing:-.025em}
.area-menu-count{margin:10px 0 0;font-size:12px;color:#a6b9bc}
.area-menu-overview{display:flex;justify-content:space-between;align-items:center;flex:none;
  min-height:46px;margin:16px;padding:10px 16px;border:1px solid #f4f5f0;border-radius:10px;
  background:#f4f5f0;color:#10272e;font-size:12px;font-weight:600;text-decoration:none}
.area-menu-overview:hover{background:#fff;box-shadow:0 3px 10px #0003}
.area-menu-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 16px;scrollbar-width:thin}
.area-menu-list>p{padding:16px 8px;font-size:13px;line-height:1.5;color:#bdccce}
.area-project-link{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 8px;
  text-decoration:none;color:inherit;border-bottom:1px solid #ffffff18;transition:background .15s}
.area-project-link:last-child{border-bottom:0}
.area-project-link:hover{background:#ffffff09}
.area-project-link>span:last-child{display:grid;place-items:center;flex:none;width:28px;height:28px;
  border:1px solid #ffffff2c;border-radius:50%;color:#dce7e7;transition:background .15s,color .15s}
.area-project-link:hover>span:last-child{background:#f4f5f0;color:#12272d}
.area-project-logo{display:flex;align-items:center;justify-content:center;width:78px;height:42px;flex:none}
.area-project-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.area-project-link.text-only{min-height:68px}
.area-project-name{flex:1;min-width:0;font-size:13px;line-height:1.4;font-weight:500}
#area-project-menu :is(a,button):focus-visible{outline:2px solid #b9dde6;outline-offset:-2px;border-radius:8px}
@keyframes area-panel-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:640px){
  #area-project-menu{right:8px;width:min(320px,78vw);border-radius:14px}
  .area-menu-head{padding:12px 18px 18px}.area-menu-head h2{font-size:23px}
  .area-menu-list{padding:0 10px}.area-project-link{gap:10px;min-height:72px}
  .area-project-logo{width:62px;height:36px}.area-project-name{font-size:12px}
  .area-menu-overview{margin:12px;gap:12px}
}
.passive-project,.passive-project *{pointer-events:none!important;cursor:default!important}
.experience-arrow{float:right;color:var(--atlas-muted)}
.document-card{padding:16px;border:1px solid var(--atlas-line);border-radius:12px;background:rgba(255,255,255,.035)}
#rail:has(.document-card){background:rgba(12,28,38,.985)}
.document-card h3{margin:0;color:#f5f9fc;font-size:14px;line-height:1.5;font-weight:500}
.document-card p{margin:6px 0 14px;color:var(--atlas-muted);font-size:11px}
.document-actions{display:flex;gap:8px}
.document-actions a{display:flex;align-items:center;justify-content:center;flex:1;min-height:44px;
  border:1px solid var(--atlas-line);border-radius:8px;font-size:12px;color:#dfedf6;text-decoration:none}
.document-actions a[download]{background:#a9d7e9;color:#10232e;border-color:#a9d7e9;font-weight:600}
.document-actions a:hover{filter:brightness(1.1)}
.brochure-download{display:block;padding:12px;color:#b9e3fc;font-size:12px;text-align:right}
.plan-download{position:absolute;right:68px;top:16px;display:flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 14px;border-radius:10px;background:#142a36;color:white;font-size:12px}
.brand-badge.location-badge.light-ink .place-icon.has-art{background:rgba(12,28,39,.96);
  border-color:rgba(200,226,242,.56);box-shadow:0 3px 12px rgba(0,0,0,.22)}
.brand-badge.location-badge.light-ink .place-icon img{width:86%;height:82%}
.brand-badge.project-badge.light-ink .place-icon.has-art{background:#112c40;box-shadow:none}
.map-area-label{display:block;padding:4px 7px;border:1px solid rgba(219,231,239,.6);
  border-radius:6px;background:rgba(12,27,38,.28);color:#f2f6f9;
  font:500 10px/1.2 "Suisse Int'l",sans-serif;letter-spacing:.025em;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 4px rgba(0,0,0,.14);
  text-shadow:0 1px 3px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.map-direction-label{display:flex;align-items:center;justify-content:space-between;gap:8px;width:88px;color:#fff;white-space:nowrap;
  font:600 13px/1.2 "Suisse Int'l",sans-serif;text-shadow:0 2px 4px #071a22}
.map-direction-label > svg{width:24px;height:24px;flex:none;transform:rotate(45deg)}
.map-direction-label[data-direction="dubai"] > svg{transform:rotate(-45deg)}
[data-code^="ramhan:community:"] .map-area-label{background:#fff;color:#102a32;
  border:0;font-size:11px;font-weight:600;text-shadow:none;box-shadow:0 2px 8px #09232a33}
.ramhan-community{display:flex;align-items:center;gap:7px;min-height:30px;cursor:pointer;pointer-events:auto}
.ramhan-community svg,.ramhan-community-list svg,.ramhan-villa svg{width:13px;height:13px;flex:none}
[data-code^="ramhan:community:"] .ramhan-community.selected{outline:2px solid #102a32;outline-offset:2px}
.ramhan-community:focus-visible,.ramhan-community-list button:focus-visible,.ramhan-villa:focus-visible{outline:2px solid #b7e8ed;outline-offset:3px}
.ramhan-panel{width:224px;padding:14px}
.ramhan-panel h2,.ramhan-detail h2{margin:0 0 8px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:#f6fafb}
.ramhan-panel>p,.ramhan-detail>p{font-size:12px;line-height:1.55;color:#bdccd0;margin:0 0 14px}
.ramhan-community-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.ramhan-community-list button{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:34px;padding:7px 9px;border:1px solid #bcd6de38;border-radius:7px;font-size:12px;color:#f7fafb;background:#ffffff08;cursor:pointer}
.ramhan-community-list button:hover,.ramhan-villa:hover{background:#ffffff18;border-color:#bcd6de80}
.ramhan-community-list button[aria-pressed="true"]{background:#e8f4f5;border-color:#e8f4f5;color:#12303a}
.ramhan-panel>.portfolio-link{padding:10px 12px}
#leftpanels .ramhan-panel .ramhan-guide{width:auto;padding:12px 0 0;margin-top:12px;border-top:1px solid #bcd6de30}
.ramhan-detail{padding:4px 0 12px}
.ramhan-back{display:inline-flex;align-items:center;min-height:36px;margin-bottom:12px;padding:0 8px;border:1px solid #bcd6de40;border-radius:7px;font-size:12px;color:#dfedf0;cursor:pointer}
.ramhan-community-photo{display:block;width:100%;height:230px;object-fit:cover;border-radius:9px;margin-bottom:16px}
.ramhan-detail>.ramhan-eyebrow{margin-bottom:5px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#a7c9ce}
.ramhan-detail>.ramhan-source-note{font-size:11px;line-height:1.55;color:#9eafb5;margin-top:16px}
.ramhan-detail .portfolio-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;padding:12px;border-radius:8px}
.ramhan-detail .portfolio-link svg{width:15px;height:15px}
.ramhan-bedrooms{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 15px}
.ramhan-bedrooms button{min-height:34px;padding:6px 10px;border:1px solid #bcd6de40;border-radius:7px;font-size:11px;cursor:pointer}
.ramhan-bedrooms button[aria-pressed="true"]{color:#12303a;background:#e8f4f5;border-color:#e8f4f5}
.ramhan-plan-list{display:grid;gap:8px}
.ramhan-villa{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:1px solid #bcd6de30;border-radius:9px;text-align:left;cursor:pointer}
.ramhan-villa>img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:5px}
.ramhan-villa>span{flex:1;min-width:0}.ramhan-villa strong{display:block;font-size:14px;font-weight:600}
.ramhan-villa small{display:block;margin-top:5px;font-size:11px;color:#b5c7cc;line-height:1.5}
.ramhan-plan-preview{display:block;width:100%;background:#fff;color:#122c33;border-radius:9px;overflow:hidden;cursor:zoom-in}
.ramhan-plan-preview img{display:block;width:100%;height:auto}.ramhan-plan-preview span{display:block;padding:10px;font-size:12px;font-weight:600}
.aldar-unit-spec{gap:12px}.aldar-unit-spec>span:last-child{min-width:0;text-align:right;overflow-wrap:anywhere}
@media(max-width:640px){.ramhan-community{min-height:34px}.ramhan-community-photo{height:190px}
  .ramhan-community-list button,.ramhan-back,.ramhan-bedrooms button{min-height:40px}
  #rail:has(.ramhan-detail){top:auto!important;bottom:max(8px,env(safe-area-inset-bottom));max-height:55dvh}
  .aldar-unit-layout{grid-template-columns:minmax(0,1fr)!important}
  .aldar-unit-layout>.planbtn{height:210px;min-height:0}
  .aldar-unit-spec{font-size:13px;padding:7px 0}}
.modon-landmark{position:absolute;z-index:25;pointer-events:none}
.landmark-leader{position:absolute;overflow:visible;pointer-events:none}
.landmark-leader path{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round}
.landmark-leader circle{fill:#fff}
.landmark-art{position:absolute;display:grid;place-items:center;width:56px;height:56px;
  transform:translate(-50%,-50%);filter:drop-shadow(0 1px 3px #071a2240)}
.landmark-art img{display:block;width:100%;height:100%;object-fit:contain}
.landmark-sport,.landmark-fallback{border-radius:50%;border:1px solid #ffffff66;
  background:#8889;color:#fff;padding:8px}
.landmark-sport{pointer-events:auto;cursor:pointer}
.landmark-sport:hover{background:#516e78e6;border-color:#fff}
.landmark-sport:focus-visible{outline:2px solid #fff;outline-offset:4px}
.landmark-fallback{font-size:10px;line-height:1.2;text-align:center}
.landmark-compact .landmark-art{width:26px;height:26px}
@media(max-width:640px){.landmark-art{width:48px;height:48px}.map-direction-label{font-size:11px}}
@media(prefers-reduced-motion:reduce){
  .place-badge.project-badge{transition:none}
}
.marker-container:has(.place-badge):hover,.marker-container:has(.place-badge):focus-within{z-index:45}
.marker-container[data-kind="IFrame"]{z-index:60!important}
.marker-container[data-kind="Zone_Outline"][data-base-map="true"]{display:none!important}
#topbar{background:var(--atlas-panel);border:1px solid var(--atlas-line);border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.2)}
#brandmark{border-right:1px solid var(--atlas-line);margin:12px 0;padding:0 20px}
#topbar .barbtn{color:var(--atlas-muted);border-radius:10px;margin:5px 0}
#topbar .barbtn span{line-height:1.15;font-size:11px}
#topbar .barbtn[aria-pressed="true"]{background:rgba(169,215,233,.12);color:#d9f1fb}
#topbar .barbtn:hover:not([disabled]){background:rgba(169,215,233,.08);color:#fff}
#topbar .barbtn[hidden]{display:none !important}
#topbar .barbtn[disabled]{display:none}
#aldarfilters .afilters{background:var(--atlas-panel);border:1px solid var(--atlas-line);
  border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.2)}
#rail{background:var(--atlas-panel);border:1px solid var(--atlas-line);border-radius:16px;
  box-shadow:0 12px 38px rgba(0,0,0,.28)}
.railhead{padding:12px 16px;border-color:var(--atlas-line);font-weight:500;font-size:15px}
.railhead button{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.04)}
.railbody{gap:14px;padding:14px;overscroll-behavior:contain}
.rcard{border:1px solid var(--atlas-line);border-radius:12px;background:#172a34}
.rcard[hidden]{display:none}
.rcard:hover{background:#1d3541}
.rcard img,.rcard-blank{height:168px}
.rcard-txt{padding:14px 16px}
.rcard-sub{color:var(--atlas-muted);font-size:11px;letter-spacing:.04em}
.rcard-txt h4{font-size:18px;font-weight:500;line-height:1.3}
.rcard-cta{min-height:40px;background:var(--atlas-accent);border-radius:8px;padding:9px 16px}
.project-search{padding:12px 16px 0;flex:0 0 auto}
.project-search label{display:block;font-size:12px;color:var(--atlas-muted);margin-bottom:7px}
.project-search input{width:100%;min-height:44px;padding:10px 12px;border-radius:9px;
  border:1px solid var(--atlas-line);background:#0d1d27;color:var(--atlas-text);font:inherit;font-size:14px}
.project-search input::placeholder{color:#95abb7}
.project-search p{margin:8px 0 0;color:var(--atlas-muted);font-size:12px}
#zoomrail{gap:8px}
#zoomrail button{width:44px;height:44px;min-width:44px;min-height:44px;
  background:var(--atlas-panel);border:1px solid var(--atlas-line);border-radius:12px;
  padding:8px;opacity:1;box-shadow:0 3px 12px rgba(0,0,0,.15)}
#zoomrail button svg{width:26px;height:26px}
#zoomrail #reset-button{margin-top:6px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid #bde9fb;outline-offset:3px}
@media (max-width:640px), (pointer:coarse) and (max-height:480px){
  .location-badge{min-width:64px;gap:2px}
  .location-badge .place-icon{width:36px;height:36px;border-radius:12px}
  .location-badge .place-icon > svg{width:20px;height:20px}
  .location-badge .place-name{font-size:11px;padding:3px 7px}
  .brand-badge.location-badge .place-icon{width:64px;height:40px;border-radius:10px}
  .brand-badge.location-badge.tall-brand .place-icon{height:64px}
  [data-code="alghadeer"] .place-icon img{width:75px;height:75px;left:calc(50% - 37.5px)}
  .brand-badge.location-badge.wide-brand .place-icon{width:128px}
  .plan-download{top:68px;right:16px;min-height:44px}
  .rcard-cta{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .marker-container *,#topbar *,#rail *{animation:none !important;transition:none !important}
}

/* 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}


/* Brochure rail. A .gtile is a picture tile with an image inside it; these are text links,
   so they need their own height rather than the aspect box the gallery tile assumes. */
.brotile { display:flex; flex-direction:column; gap:2px; align-items:flex-start;
           justify-content:center; min-height:52px; padding:10px 12px; text-decoration:none; }
.brotile > span:first-child { color:#fff; font-size:12px; line-height:1.3; }
.brosize { color:#86c8ee; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }

/* A finger covers about 44 px wherever it is aimed, and this chrome was authored for a cursor:
   measured on an iPhone 14 Pro the zoom rail was 34x34, the view chips 30 tall and the filter
   rows 30, so a miss landed on the map behind and moved it instead. Floors, not fixed heights,
   so anything already large enough does not move, and it is keyed on the pointer rather than
   the width because a tablet has the same thumb as a phone. */
@media (pointer:coarse){
  #zoomrail button{min-width:44px;min-height:44px}
  .vchip{min-height:44px}
  .acat{min-height:44px}
  .cact{min-height:44px}
  #topbar .barbtn{min-width:44px}
  .towerfloors button{min-height:44px}
  /* the handle is the only way back to the panels once the sheet opens closed, so it is the
     one control that cannot be a 40 px strip. The collapsed height follows it. */
  #sheet-handle{min-height:44px}
  body.sheet-down #leftpanels{max-height:48px}
}

/* The view chips are fixed to the bottom at z-50 and the sheet lives at z-40 eight pixels off
   the same edge, so on any route that has chips the Details handle was under them: probed on an
   iPhone, elementFromPoint at the middle of the handle returned a chip, and Al Reem's 4,974
   characters of panel had no way in. It only became reachable-looking when the sheet opened
   expanded, which is the thing that was hiding the map. */
@media (max-width:640px), (pointer:coarse) and (max-height:480px){
  body.has-viewnav #leftpanels{bottom:76px}
}

/* A phone on its side is 320 px tall, and the 44 px floor above turned the zoom rail into a
   198 px stack pinned at top:150, which put the reset button 28 px off the bottom of the
   screen. Measured at 568x320, not guessed. There is no room for the compass, the rail and the
   sheet down that edge, and the compass is the one that is decoration, so it steps out and the
   rail goes back to being centred, which clears the sheet at 264. */
/* The rail keeps its column, measured rather than estimated: on a 393 px phone it spans x=329
   to 383, so the rightmost 74 px of the screen belong to it and 76 is that plus a hair. Short
   screens need it in both states, because the rail is centred there and crosses the collapsed
   sheet's row. Everything else needs it only while the sheet is OPEN: in portrait the sheet
   grows up to y=214 and the zoom-out button sits at 214 to 258, so the right end of a full
   width handle was under a button that paints above it. Collapsed, the handle keeps the width. */
@media (pointer:coarse) and (max-height:480px){
  #leftpanels{right:76px}
}
@media (max-width:640px), (pointer:coarse) and (max-height:480px){
  body:not(.sheet-down) #leftpanels{right:76px}
  /* inert is Safari 15.5 and Chrome 102. Older WebViews take the property as an expando and
     keep every clipped control in the tab order, and the collapse is now automatic, so that
     would be new. `display:none` rather than `visibility:hidden`, because visibility is
     INHERITED AND OVERRIDABLE: the inventory paints its own `.visible` class on rows, the
     compiled bundle defines that as visibility:visible, and the floor plate buttons under it
     stayed in the tab order while the sheet said it was shut. display does not inherit that
     way and there is nothing under here to lay out while it is closed. */
  body.sheet-down #leftpanels > :not(#sheet-handle){display:none !important}
}
@media (pointer:coarse) and (max-height:400px){
  #compass-slot{display:none}
  #zoomrail{top:50%;bottom:auto;transform:translateY(-50%);gap:12px}
}

/* The open sheet stops below the amenity chips, and it has to be GEOMETRY rather than stacking.
   #chipbar is z-50 on the body while #leftpanels sits inside an ancestor that is itself a z-10
   stacking context, so raising the sheet to z-60 changes nothing at all: the whole subtree still
   paints under z-50. Measured at 932x430 with amenities on, elementFromPoint at the middle of
   the handle returned a chip's label, not the handle. So the sheet is capped to end above the
   chip row instead. 134 is the row's bottom in this layout, 8 the gap, and the last term is
   whichever floor the sheet is sitting on: 8 normally, 76 when the view chips are there too. */
@media (max-width:640px), (pointer:coarse) and (max-height:480px){
  #chipbar{top:76px}
  /* `:not(.sheet-down)` because this rule comes after the collapse and would otherwise beat it:
     the first version left the sheet 157 px tall while claiming to be shut. */
  body.has-chips:not(.sheet-down) #leftpanels{max-height:min(56vh,520px,calc(100vh - 150px));
                                              max-height:min(56dvh,520px,calc(100dvh - 150px))}
  body.has-chips.has-viewnav:not(.sheet-down) #leftpanels{
    max-height:min(56vh,520px,calc(100vh - 218px));
    max-height:min(56dvh,520px,calc(100dvh - 218px))}
}

/* Nothing is draggable in sheet mode, so nothing there should still be claiming the gesture.
   The title rows carry touch-action:none for the drag they no longer start, which on a phone
   means an upward swipe that begins on the Inventory title does not scroll the sheet: the
   browser hands the touch to a handler that returns immediately. */
@media (max-width:640px), (pointer:coarse) and (max-height:480px){
  #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,
  #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{touch-action:pan-y;cursor:default}
}

/* Abu Dhabi Universe: one quiet glass system for navigation and project discovery. */
:root{--atlas-panel:rgba(12,28,36,.94);--atlas-line:rgba(198,222,232,.18);--atlas-accent:#b7d7df;
  --atlas-muted:#a5b8bf;--atlas-text:#f4f6f4;--atlas-radius:16px}
#topbar{border-radius:18px;background:linear-gradient(110deg,rgba(10,27,35,.96),rgba(19,38,47,.94));
  box-shadow:0 8px 28px rgba(0,16,24,.18);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
#brandmark img{width:90px}
#crumbs .crumb{font-size:12px;font-weight:500;letter-spacing:.01em}
#crumbs .crumb.here{font-size:14px;font-weight:500}
#crumbs .sep{width:16px;opacity:.55}
#topbar .barbtn{gap:5px;padding:0 10px;min-width:56px;border-radius:11px}
#topbar .barbtn svg{width:19px;height:19px}
#topbar .barbtn span{font-size:10px}
#topbar .barbtn[aria-pressed="true"]{background:rgba(190,220,231,.12);box-shadow:inset 0 0 0 1px rgba(190,220,231,.12)}
#rail{border-radius:18px;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 16px 50px rgba(1,15,22,.28)}
.railhead{padding:10px 16px;min-height:58px;font-size:14px;letter-spacing:.01em}
.railhead button{background:rgba(211,231,239,.05);border-radius:50%;width:36px;height:36px}
.railbody{padding:14px;gap:10px}
.rcard{background:rgba(230,243,250,.035);border-radius:13px;box-shadow:none}
.rcard-txt h4{font-size:16px;line-height:1.3;margin-bottom:10px}
.rcard-sub{font-size:10px;letter-spacing:.035em}
.rcard-cta{background:#c0dbe2;color:#102a35;border:1px solid rgba(255,255,255,.28);border-radius:8px;font-size:11px}
#rail:has(.atlas-rail-filters) .rcard{display:grid;grid-template-columns:86px 1fr;min-height:112px}
#rail:has(.atlas-rail-filters) .rcard[hidden]{display:none}
#rail:has(.atlas-rail-filters) .rcard>img,#rail:has(.atlas-rail-filters) .rcard-blank{width:86px;height:100%;min-height:112px}
#rail:has(.atlas-rail-filters) .rcard-txt{padding:12px}
#rail:has(.atlas-rail-filters) .rcard-cta{min-height:30px;padding:5px 10px}
#rail:has(.atlas-rail-filters) .rcard-txt h4{font-size:13px;margin-bottom:9px}
#leftpanels .bpanel,#modon>div,#burtville>div,#jubail>div,#unitlist>div,#inventory>div,#parking>div{
  border:1px solid var(--atlas-line);border-radius:16px;background:var(--atlas-panel)!important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 12px 35px rgba(0,16,25,.15)}
#leftpanels .bpanel{width:288px;padding:18px}
#leftpanels .ramhan-guide{width:224px;padding:14px 16px}
#leftpanels .bpabout{font-size:12px;line-height:1.65;color:#c2ced2}
#leftpanels hr{border-color:var(--atlas-line)}
#leftpanels p.text-base{font-size:17px;font-weight:500;letter-spacing:.01em}
#modon>div>img:first-child,#burtville>div>img:first-child{border-radius:10px;max-height:160px;object-fit:cover}
#leftpanels input[type="search"],#leftpanels input[type="text"]{border-radius:8px;border-color:var(--atlas-line);background:rgba(2,17,25,.3)}
.portfolio-link{font-size:12px;line-height:1.4;min-height:44px;border-color:var(--atlas-line);color:#d0e4eb}
.portfolio-link:hover{background:rgba(211,231,239,.055)}
.portfolio-meta{font-size:11px;color:var(--atlas-muted)}
#viewnav{gap:7px;padding:12px 20px;background:linear-gradient(transparent,rgba(7,21,28,.16))}
.vchip{height:32px;padding:0 13px;border-radius:9px;border:1px solid rgba(216,234,241,.22);
  background:rgba(13,31,40,.9);font-size:11px;font-weight:500;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.vchip.on{background:#d5e5e9;border-color:#e8f2f5;color:#15313c}
.vchip:hover{background:#36515e}
#chipbar .chip{border:1px solid var(--atlas-line);border-radius:11px;background:rgba(13,31,40,.92);font-size:11px}
#chipbar .chip.on{background:#d5e5e9;color:#15313c}
#zoomrail{gap:6px}
#zoomrail button{background:rgba(11,30,39,.94);border:1px solid rgba(207,229,239,.25);border-radius:11px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
#zoomrail button svg{width:22px;height:22px}
#zoomrail #reset-button{margin-top:5px}
#sheet-handle{background:#0c1d27!important;color:#e1edf1;font-size:13px}
#sheet-handle .grip{background:#8ea5af}
#sidebar{background:rgba(9,26,35,.98)!important}
.mtool{background:rgba(204,230,240,.05);border-color:var(--atlas-line);border-radius:12px;color:#d4e6ed}
.mtool[aria-pressed="true"]{background:rgba(182,218,231,.14);border-color:#a9cddc}
.project-action{display:flex;align-items:center;gap:4px;color:#c4dce6;opacity:1}
.project-action svg{width:12px;height:12px}
.place-badge.capability-documents{background:linear-gradient(155deg,rgba(75,96,111,.96),rgba(42,61,75,.97));border-color:rgba(218,231,240,.64)}
.place-badge.capability-zoom{background:rgba(13,32,43,.5);border-color:rgba(203,228,240,.8);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.place-badge.capability-details{background:rgba(28,52,62,.94);border-color:rgba(199,221,228,.5)}
.atlas-filters{width:274px;padding:17px;background:var(--atlas-panel);border:1px solid var(--atlas-line);
  border-radius:16px;color:var(--atlas-text);font-family:"Suisse Int'l",sans-serif;box-sizing:border-box}
.atlas-filter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}
.atlas-eyebrow{display:block;color:#99b8c4;text-transform:uppercase;letter-spacing:.16em;font-size:9px;line-height:1.5;margin-bottom:5px}
.atlas-filter-head h3{font-size:17px;font-weight:500;margin:0;letter-spacing:-.01em}
.atlas-filter-head button{font-size:10px;color:#c0dce8;padding:6px;border:0;background:transparent;border-radius:6px}
.atlas-field{display:block;min-width:0;margin-bottom:12px}
.atlas-field>span,.atlas-price legend,.atlas-price label>span{display:block;color:#adbec6;font-size:10px;margin-bottom:6px}
.atlas-field input,.atlas-field select,.atlas-price input{width:100%;min-width:0;height:38px;padding:0 10px;border:1px solid rgba(200,225,237,.18);
  border-radius:8px;background:rgba(1,16,24,.35);color:#eef6f8;font:400 11px/1.3 "Suisse Int'l",sans-serif;box-sizing:border-box}
.atlas-field select{padding-right:20px;cursor:pointer}
.atlas-field option{background:#17323f;color:#f4f8fa}
.atlas-field input::placeholder,.atlas-price input::placeholder{color:#7f98a5}
.atlas-facets{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.atlas-price{border:0;padding:0;margin:0 0 10px;min-width:0}
.atlas-price>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atlas-price label{min-width:0}
.atlas-price label>span{font-size:9px;color:#849fae}
.atlas-check{display:flex;align-items:flex-start;gap:7px;font-size:10px;line-height:1.5;color:#a1b7c2;margin-bottom:14px}
.atlas-check input{accent-color:#adcfdf;margin:1px 0 0;width:13px;height:13px;flex:0 0 auto}
.atlas-filter-note{font-size:9px;line-height:1.5;color:#8aa1ad;margin:0 0 12px}
.atlas-filter-status{font-size:11px;line-height:1.5;color:#d4e7ee;padding-top:12px;border-top:1px solid var(--atlas-line);margin:0}
.atlas-filter-status.is-error{color:#ffb9a8}
.atlas-rail-filters{width:auto;padding:12px 16px;border:0;border-bottom:1px solid var(--atlas-line);border-radius:0;box-shadow:none;flex:0 0 auto}
.atlas-rail-filters>details>summary{list-style:none;cursor:pointer;font-size:11px;color:#bedae5}
.atlas-rail-filters>details>summary::after{content:"+";float:right}
.atlas-rail-filters>details[open]>summary{margin-bottom:14px}
.atlas-rail-filters>details[open]>summary::after{content:"−"}
.atlas-rail-filters>details[open]{max-height:48vh;overflow-y:auto}
.project-information h2{font-size:24px;line-height:1.2;letter-spacing:-.025em;font-weight:500;margin:7px 0 22px}
.project-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin:0 0 22px}
.project-facts dt{font-size:10px;line-height:1.4;color:#91adba;margin-bottom:5px}
.project-facts dd{font-size:12px;line-height:1.5;color:#e0edf2;margin:0;overflow-wrap:anywhere}
.project-information section{padding:18px 0;border-top:1px solid var(--atlas-line)}
.project-information section h3{font-size:13px;font-weight:500;margin:0 0 12px}
.project-information section p{font-size:12px;line-height:1.7;color:#c2d4dd;margin:5px 0}
.commercial-reference{margin-top:14px;padding:16px;border:1px solid var(--atlas-line);border-radius:10px;background:rgba(157,205,229,.035)}
.commercial-reference h4{font-size:13px;font-weight:500;margin:0 0 14px;color:#e0edf2}
.commercial-reference .project-facts{margin-bottom:12px}
.project-information .commercial-source{font-size:10px;color:#92abb8;margin-top:12px}
.commercial-reference a{display:inline-flex;align-items:center;min-height:44px;font-size:11px;line-height:1.5;color:#a0c5d8;text-decoration:underline;text-underline-offset:3px}
.information-date{font-size:10px;line-height:1.6;color:#92abb8;background:rgba(157,205,229,.05);padding:12px;border-radius:9px;margin:6px 0 20px}
.information-documents{display:flex;flex-direction:column;gap:8px}
.information-documents a{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--atlas-line);border-radius:10px;color:#deedf4;text-decoration:none;font-size:12px;line-height:1.4}
.information-documents a:hover{background:rgba(185,222,239,.07);border-color:#688e9f}
.information-documents svg{width:20px;height:20px;flex:0 0 auto;color:#a7c9d9}
.information-documents small{display:block;font-size:10px;color:#8eabba;margin-top:4px}
.information-sources{font-size:11px;color:#b9d3df}
.information-sources summary{padding:10px 0;cursor:pointer}
.information-sources a{display:block;padding:6px 0;color:#a0c5d8;overflow-wrap:anywhere}
.info-table{overflow-x:auto}
.info-table table{width:100%;border-collapse:collapse;text-align:left;font-size:10px}
.info-table th{font-weight:500;color:#91afbd;padding:8px 6px}
.info-table td{padding:9px 6px;border-top:1px solid var(--atlas-line);color:#d4e4ec}
@media(min-width:901px){#leftpanels{left:22px!important;gap:12px}#modon>div,#burtville>div{width:288px!important;padding:16px!important}}
@media(max-width:900px){#topbar .barbtn{min-width:44px;padding:0 6px}#topbar .barbtn span{display:none}}
@media(max-width:640px),(pointer:coarse) and (max-height:480px){
  #leftpanels{background:rgba(12,29,39,.97)!important;border:1px solid rgba(209,232,244,.2);border-radius:18px;box-shadow:0 8px 35px rgba(0,0,0,.18);scroll-padding-top:56px}
  #leftpanels .atlas-filters{width:100%;border:0;border-radius:0;background:transparent;padding:12px 16px 18px}
  #leftpanels .bpanel,#modon>div,#burtville>div,#jubail>div,#unitlist>div,#inventory>div,#parking>div{width:100%!important;border:0;border-radius:0;background:transparent!important;box-shadow:none}
  #topbar .barbtn[data-tool="menu"]{display:flex}#crumbs .crumb.here{font-size:15px}
  .atlas-field input,.atlas-field select,.atlas-price input{height:44px;font-size:12px}
  .atlas-filter-head button{min-height:44px}.atlas-check{min-height:28px;font-size:11px}
  .vchip{min-height:44px}#rail:has(.atlas-rail-filters) .rcard-cta{min-height:44px}
}
/* Dense projects open as a list instead of overlapping name buttons. */
.project-marker.is-grouped .place-badge{visibility:hidden!important;pointer-events:none!important}
.project-group{position:absolute;transform:translate(-50%,-50%);z-index:48;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;gap:7px;width:104px;height:32px;
  border:1px solid rgba(206,235,236,.55);border-radius:10px;color:#f4fbfc;
  background:rgba(13,38,48,.96);box-shadow:0 3px 12px #00182055;font-family:inherit;font-size:11px;font-weight:600;line-height:1;white-space:nowrap}
.project-group svg{width:15px;height:15px;flex:none}
.project-group[hidden]{display:none}
.project-group:hover,.project-group:focus-visible{background:#255363;outline:2px solid #b6dde5;outline-offset:2px}
.nearby-projects{display:grid;gap:8px;padding:2px}
.nearby-project{display:flex;text-align:left;justify-content:space-between;align-items:center;gap:16px;
  width:100%;padding:16px;border:1px solid #ffffff20;border-radius:12px;background:#ffffff07;color:#eff8fb}
.nearby-project:hover,.nearby-project:focus-visible{background:#ffffff14;border-color:#b6dde5}
.nearby-project strong{display:block;font-size:14px;line-height:1.4}
.nearby-project small{display:block;color:#a4bac4;font-size:11px;margin-top:6px}
.nearby-project svg{width:18px;height:18px;flex:none}
.brand-badge.location-badge .place-icon{width:64px;height:42px;border-radius:12px}
.location-badge{min-width:64px}
@media(max-width:640px){.brand-badge.location-badge .place-icon{width:58px;height:38px}}
.rcard[hidden]{display:none!important}
.atlas-fit{width:100%;padding:11px 12px;border:1px solid #9ac5cc60;border-radius:9px;color:#ebf8fb;background:#49788530;font-size:12px}
.atlas-fit:hover,.atlas-fit:focus-visible{background:#49788570}

.portfolio-link small{display:block;font-size:10px;color:#a6bbc5;margin-top:5px}
#sidebar{width:400px;max-width:100%;box-shadow:-16px 0 60px #0006;border-left:1px solid var(--atlas-line);display:flex;flex-direction:column}
#sidebar.hidden{display:none}
#sidebar-backdrop{background:#00121ab3;backdrop-filter:blur(5px)}
.atlas-menu-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:25px 22px 20px;border-bottom:1px solid var(--atlas-line)}
.atlas-menu-head h2{margin:6px 0 0;font-size:20px;font-weight:500;color:#f4f8fa}
#sidebar-close{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--atlas-line);border-radius:50%;background:#ffffff07;color:white;flex:none}
#sidebar-close svg{width:20px;height:20px;fill:currentColor}
.atlas-menu-body{overflow-y:auto;overscroll-behavior:contain;padding:20px 16px 28px;min-height:0}
#mobiletools>div{padding:0}
#mobiletools>div>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#mobiletools .mtool{border:1px solid var(--atlas-line);border-radius:12px;background:#ffffff06;min-height:86px;gap:10px;font-size:12px;padding:12px 8px}
#mobiletools .mtool svg{width:22px;height:22px}
.atlas-menu-settings{margin-top:26px;border-top:1px solid var(--atlas-line);padding-top:20px}
.atlas-menu-settings h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--atlas-muted);padding:0 8px 10px}
.atlas-preference{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:16px;min-height:54px;width:100%;padding:12px 8px;font-size:13px;color:#eaf5f8;border-bottom:1px solid #ffffff0d}
.atlas-preference small{display:block;font-size:11px;color:var(--atlas-muted);margin-top:5px}
.atlas-preference input{width:21px;height:21px;accent-color:#b7d7df}
.atlas-preference svg{width:18px;height:18px;fill:currentColor}
.atlas-preference .segmented{margin:0}

/* The same ink, ivory and round action detail across the map controls. */
button,a[role="button"]{font-family:"Suisse Int'l",sans-serif;touch-action:manipulation}
#topbar .barbtn{border:1px solid transparent;border-radius:10px;padding:6px 9px;gap:5px;
  color:#e5eeed;transition:background .15s,color .15s,border-color .15s;box-shadow:none}
#topbar .barbtn span{font-size:11px;font-weight:500}
#topbar .barbtn:hover:not([disabled]),#topbar .barbtn[aria-pressed="true"]{
  background:#f4f5f0;color:#12272c;border-color:#f4f5f0;box-shadow:none}
#topbar .barbtn svg{fill:currentColor}
#zoomrail button,#sidebar-close,.railhead button{border-radius:12px;box-shadow:0 3px 12px #061b2433;
  background:#102a32;border:1px solid #ffffff30;color:#fff}
#zoomrail button:hover,#sidebar-close:hover,.railhead button:hover{background:#28444b;border-color:#b8ccce}
.place-badge.project-filled,.project-group{border-radius:9px;background:#102a32;
  border:1px solid #ffffff40;color:#fff;box-shadow:0 3px 10px #05141940;
  font-weight:500;min-height:28px;height:28px;padding:0 8px;gap:6px;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.project-filled .place-name{font-size:11px;line-height:16px;letter-spacing:0;text-shadow:none}
.project-filled .project-action{display:grid;place-items:center;width:19px;height:19px;
  border:1px solid #ffffff38;border-radius:50%;font-size:11px;opacity:1}
.place-badge.project-filled:hover,.place-badge.project-filled:focus-visible,.project-group:hover{
  background:#25434c;border-color:#c4d8d9;box-shadow:0 5px 14px #05141955}
.project-group svg{width:14px;height:14px}
.project-group-arrow{margin-left:3px;color:#b8ced1}
.project-group-arrow svg,.area-project-arrow svg{display:block;width:14px;height:14px}
.rcard-cta,.portfolio-link,.document-actions a,.atlas-fit,.nearby-project,
#mobiletools .mtool,.vchip,.chip{border-radius:10px;box-shadow:none;transition:background .15s,border-color .15s}
.rcard-cta{background:#f4f5f0;color:#152d33;border:1px solid #f4f5f0;font-weight:600;padding:10px 14px}
.rcard-cta:hover{background:#fff;box-shadow:0 3px 10px #0002}
.portfolio-link,#mobiletools .mtool{background:#102a32;border:1px solid #ffffff30}
.portfolio-link:hover,#mobiletools .mtool:hover,.atlas-fit:hover{background:#29474f;border-color:#b7cbca}
.place-badge.location-badge{flex-direction:row;gap:0;padding:0 6px 0 0;border-radius:9px;
  background:#fff;border:1px solid #ffffffc9;box-shadow:0 3px 10px #071a2245;
  width:108px;min-width:108px;min-height:32px;height:32px;transition:box-shadow .16s,border-color .16s,transform .16s}
.location-badge .place-name{display:block;flex:1;min-width:0;text-align:center;white-space:normal;color:#10191d;background:transparent;border:0;
  box-shadow:none;padding:0 5px;font-size:11px;line-height:14px;font-weight:600;letter-spacing:0}
.area-action{display:grid;place-items:center;width:24px;height:20px;flex:none;
  border-left:1px solid #15272c21;padding-left:6px;color:#fff}
.area-action svg{width:18px;height:18px;background:#102a32;border-radius:50%;padding:3px;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.location-badge:hover,.location-badge:focus-visible{background:#fff;border-color:#153c46;
  box-shadow:0 0 0 2px #fff,0 7px 18px #071a2266;transform:translateY(-2px)}
.location-badge:focus-visible{outline:2px solid #102a32;outline-offset:4px}
.location-badge:active{transform:translateY(1px);box-shadow:0 1px 3px #071a2255}
.location-badge[aria-expanded="true"],.location-badge[data-area-state="moving"]{
  background:#fff;border-color:#102a32;box-shadow:0 0 0 2px #fff,0 5px 14px #071a2255}
.location-badge:hover .place-name,.location-badge:focus-visible .place-name{background:transparent}
[data-code="saadiyat"] .location-badge{position:relative;left:-18px}
[data-code="ramhan"] .location-badge{position:relative;top:-16px}
[data-code="district:bateen"] .map-area-label{position:relative;top:18px}
#topbar button:focus-visible,#zoomrail button:focus-visible,.rcard-cta:focus-visible,
.portfolio-link:focus-visible,.chip:focus-visible,.vchip:focus-visible,#mobiletools .mtool:focus-visible{
  outline:2px solid #d0e8eb;outline-offset:3px}
#area-explore-hint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:49;
  max-width:calc(100vw - 112px);padding:10px 16px;border:1px solid #ffffff38;border-radius:24px;
  background:#102a32ed;color:#f4f5f0;font-size:12px;line-height:1.4;text-align:center;
  pointer-events:none;box-shadow:0 3px 14px #05141933}
#area-explore-hint[hidden],.area-exploring #area-explore-hint,.ui-hidden #area-explore-hint{display:none}
body:has(#rail:not(:empty)) #area-explore-hint,body:has(#sidebar:not(.hidden)) #area-explore-hint{display:none}
@media(max-width:640px){
  #topbar .barbtn{min-width:44px;padding:8px}
  .place-badge.location-badge{padding:0 6px 0 0}
  .location-badge .place-name{font-size:11px;line-height:15px}
  .area-action{width:24px;padding-left:6px}
  .place-badge.project-filled,.project-group{min-height:32px;height:32px}
  #area-explore-hint{bottom:80px;font-size:11px;padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){
  #area-project-menu{animation:none}
  .place-badge,.area-action svg,#topbar .barbtn{transition:none}
}

.area-exploring #zoomrail{right:calc(var(--area-drawer-space,364px) + 4px)}
@media(max-width:640px){.area-exploring #zoomrail{left:12px;right:auto}}

@media(max-width:640px),(pointer:coarse) and (max-height:480px){
  body:not(.sheet-down) #area-explore-hint{display:none}
}
@media(max-height:480px){
  .area-menu-nav{padding:4px 12px 0}.area-menu-nav button{min-height:36px}
  .area-menu-head{padding:6px 18px 12px}.area-menu-head small{display:none}
  .area-menu-head h2{font-size:20px;margin:0}.area-menu-count{margin-top:6px}
  .area-menu-overview{min-height:40px;margin:8px 12px}
}

/* Phone discovery keeps the map usable and the main actions within reach. */
#mobile-areas,.sheet-filter-icon{display:none}
.atlas-filter-footer{display:grid;gap:12px}
#mobile-areas:focus-visible,#sheet-handle:focus-visible{outline:2px solid #d0e8eb;outline-offset:-4px}
.area-picker-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.area-picker-list button{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:56px;padding:12px;border:1px solid #ffffff35;border-radius:12px;
  background:#ffffff08;color:#f4f7f6;text-align:left;font-size:14px;line-height:1.3;cursor:pointer}
.area-picker-list button:hover,.area-picker-list button:focus-visible{background:#24444d;outline:2px solid #c1dfe3;outline-offset:1px}
@media(max-width:640px),(pointer:coarse) and (max-height:480px){
  #topbar{top:max(8px,env(safe-area-inset-top));padding-right:4px}
  #compass-slot{top:76px;right:14px}
  #compass,#compass svg{width:36px;height:36px}
  #zoomrail{top:auto;bottom:calc(78px + env(safe-area-inset-bottom));right:12px;transform:none;gap:6px}
  #zoomrail button{width:44px;height:44px;min-width:44px;min-height:44px}
  #leftpanels{bottom:max(8px,env(safe-area-inset-bottom));right:8px;
    max-height:min(76dvh,calc(100dvh - 88px));padding-bottom:8px;overscroll-behavior:contain}
  body:not(.sheet-down) #leftpanels{right:8px}
  body.sheet-down #leftpanels{max-height:48px;padding-bottom:0}
  #sheet-handle{height:48px;min-height:48px;padding:0 16px;font-size:14px}
  #sheet-handle .lbl{color:#e6f0f0}
  #sheet-handle::after{content:"";margin-left:auto;width:8px;height:8px;border-top:1.5px solid #c2d3d5;
    border-right:1.5px solid #c2d3d5;transform:rotate(-45deg)}
  body:not(.sheet-down) #sheet-handle::after{transform:rotate(135deg)}
  .atlas-overview #sheet-handle .grip{display:none}
  .atlas-overview .sheet-filter-icon{display:block;fill:currentColor;width:19px;height:19px;flex:none}
  .atlas-overview.sheet-down #leftpanels{right:calc(50% + 4px)}
  .atlas-overview #mobile-areas:not([hidden]){position:fixed;display:flex;align-items:center;gap:10px;
    right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:calc(50% - 12px);height:48px;
    padding:0 16px;z-index:54;border:1px solid #ffffff35;border-radius:16px;
    background:#102a32;color:#edf5f4;font-size:14px;cursor:pointer}
  #mobile-areas svg{width:19px;height:19px;flex:none}
  #mobile-areas>span:last-child{margin-left:auto;font-size:20px}
  body:not(.sheet-down) #mobile-areas,body:has(#rail:not(:empty)) #mobile-areas,
  .area-exploring #mobile-areas,.ui-hidden #mobile-areas{display:none!important}
  body:has(#rail:not(:empty)) #leftpanels,.area-exploring #leftpanels{visibility:hidden;pointer-events:none}
  body:not(.sheet-down) #zoomrail,body:not(.sheet-down) #compass-slot,
  body:has(#rail:not(:empty)) #zoomrail{visibility:hidden;pointer-events:none}
  #leftpanels .atlas-filters{padding:12px 16px 20px}
  .atlas-filter-head h3{font-size:20px}
  .atlas-field>span,.atlas-price legend,.atlas-price label>span{font-size:12px;line-height:1.4;color:#bdced1}
  .atlas-field input,.atlas-field select,.atlas-price input{min-height:48px;height:48px;font-size:16px}
  .atlas-facets{gap:12px}
  .atlas-check{font-size:12px;line-height:1.5;gap:10px;align-items:center;min-height:44px}
  .atlas-check input{width:20px;height:20px;margin:0}
  .atlas-filter-note,.atlas-filter-status{font-size:12px;line-height:1.5}
  .atlas-fit{min-height:48px;font-size:14px}
  #leftpanels .atlas-filter-footer{position:sticky;bottom:0;z-index:2;margin:0 -16px -20px;
    padding:10px 16px 12px;background:#11252e;box-shadow:0 -10px 20px #0b1c2455;gap:8px}
  #leftpanels .atlas-filter-status{padding-top:0;border-top:0}
  .area-menu-nav button,.railhead button{min-height:44px;min-width:44px}
  .area-project-name{font-size:14px}
  .area-menu-count{font-size:13px}
  .area-menu-head h2{font-size:22px}
  #area-explore-hint{bottom:72px;padding:8px 12px;font-size:11px;width:max-content;max-width:calc(100vw - 112px)}
  .place-badge.location-badge{position:relative}
  .place-badge.location-badge::before{content:"";position:absolute;inset:-6px 0}
}
@media(max-width:640px) and (max-height:560px),(pointer:coarse) and (max-height:480px){
  #compass-slot,#area-explore-hint{display:none}
  #zoomrail{bottom:72px;gap:4px}
  #leftpanels{max-height:calc(100dvh - 84px)}
}

/* Supplied square AD Atlas artwork retains its transparent background. */
#brandmark{margin:0;padding:0 12px}
#brandmark img{width:58px;height:58px;object-fit:contain}
.map-brand-logo{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 1px 3px #001820aa)}
#loader-box>img{width:164px;height:164px;object-fit:contain}
#site-credit{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:51;
  color:rgba(233,243,242,.24);font-size:8px;line-height:8px;letter-spacing:.04em;
  white-space:nowrap;pointer-events:none}
body.ui-hidden #site-credit{opacity:0}
@media(max-width:640px),(pointer:coarse) and (max-height:480px){
  #brandmark{padding:0 8px}
  #brandmark img{width:48px;height:48px}
}
.priced-home-types{display:grid;gap:10px}
.priced-home-types article{padding:14px;border:1px solid var(--atlas-line);border-radius:10px}
.priced-home-types h4{margin:0 0 12px;font-size:13px;line-height:1.5;font-weight:500;color:#f2f7f8}
.priced-home-types dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.priced-home-types dt{font-size:10px;color:#a5b8bf;margin-bottom:4px}
.priced-home-types dd{font-size:12px;color:#f2f7f8;margin:0}
.payment-schedule{list-style:none;margin:0 0 18px;padding:0}
.payment-schedule li{display:flex;justify-content:space-between;gap:16px;font-size:12px;padding:10px 0;border-bottom:1px solid var(--atlas-line)}
.payment-schedule strong{font-weight:500;color:#f2f7f8}
.information-amenities{padding-left:18px;margin:0;font-size:12px;line-height:1.7;color:#c2d4dd}

.project-export-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.project-export-actions button,.comparison-toolbar button{min-height:36px;border:1px solid var(--atlas-line);border-radius:8px;padding:8px 12px;background:#17363f;color:#f3f7f7;font-family:inherit;font-size:11px;font-weight:500;line-height:1.4;cursor:pointer}
.project-export-actions button[aria-pressed="true"]{background:#dce9e6;color:#102a32}
.export-status{width:100%;font-size:11px;line-height:1.5;color:#c2d4dd;margin:0}
.export-status:empty{display:none}
#rail:has(.project-comparison){width:min(1040px,calc(100vw - 48px))}
.project-comparison{min-width:0}
.comparison-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.comparison-toolbar p{margin:0 auto 0 0;font-size:13px;color:#c2d4dd}
.comparison-toolbar button:disabled{opacity:.45;cursor:default}
.comparison-picker{margin:14px 0;border:1px solid var(--atlas-line);border-radius:10px;padding:12px}
.comparison-picker summary{font-size:13px;cursor:pointer}
.comparison-picker>label{display:block;font-size:11px;color:#adbec6;margin-top:12px}
.comparison-picker input[type="search"]{display:block;box-sizing:border-box;width:100%;height:42px;margin:6px 0 10px;padding:0 12px;background:#0a2029;color:#f3f7f7;border:1px solid var(--atlas-line);border-radius:8px;font:inherit;font-size:14px}
.comparison-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 12px;max-height:230px;overflow:auto}
.comparison-options>label{display:flex;gap:10px;padding:10px 6px;align-items:center;cursor:pointer;font-size:12px;line-height:1.5}
.comparison-options>label[hidden]{display:none}
.comparison-options input{width:18px;height:18px;flex:none;accent-color:#b7d7df}
.comparison-options small{display:block;font-size:10px;color:#adbec6}
.comparison-table{width:100%;overflow:auto;margin-top:16px;border:1px solid var(--atlas-line);border-radius:10px}
.comparison-table table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.6;text-align:left}
.comparison-table th,.comparison-table td{padding:13px;vertical-align:top;min-width:170px;border-bottom:1px solid var(--atlas-line);white-space:pre-line}
.comparison-table th:first-child{position:sticky;left:0;min-width:110px;width:120px;background:#102a33;color:#b8cdd4;z-index:1}
.comparison-table thead th{background:#17363f;font-weight:500}
.comparison-table a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.comparison-table button{float:right;width:28px;height:28px;border:1px solid var(--atlas-line);background:transparent;border-radius:50%;color:#fff;cursor:pointer}
.comparison-note{font-size:11px;line-height:1.7;color:#a5b8bf;margin-top:14px}
.cardacts{flex-wrap:wrap}
@media(max-width:640px){
  #rail:has(.project-comparison){width:calc(100vw - 16px)}
  .project-export-actions button,.comparison-toolbar button{min-height:44px;font-size:12px}
  .comparison-picker input[type="search"]{font-size:16px}
  .comparison-table th,.comparison-table td{min-width:150px;padding:10px;font-size:12px}
  .comparison-table th:first-child{min-width:90px;width:90px}
  .comparison-options{grid-template-columns:1fr}
}

/* Shared application surfaces in the supplied AD Atlas blue and silver palette. */
.ramhan-enter-interior { display:grid; grid-template-columns:1fr 20px; align-items:center; gap:6px; width:100%; padding:15px 16px; margin:20px 0; border:1px solid #54dbff; border-radius:6px; background:#0a2540; color:#edf5fc; text-align:left; cursor:pointer; }
.ramhan-enter-interior span { font-size:15px; font-weight:500; }
.ramhan-enter-interior svg { width:18px; height:18px; }
.ramhan-enter-interior small { grid-column:1/-1; font-size:10px; color:#adc2d5; }
.ramhan-enter-interior:hover { background:#123d5e; }
.ramhan-interior-note { position:absolute; bottom:18px; right:20px; max-width:370px; margin:0; border-radius:6px; padding:10px 12px; background:#0a2540e8; color:#edf5fc; font-size:11px; line-height:1.5; }
.ramhan-interior-note summary { cursor:pointer; }
.ramhan-interior-note p { margin:10px 0 0; max-width:300px; }
@media(max-width:640px) { .ramhan-interior-note { top:76px; bottom:auto; right:12px; left:12px; max-width:none; font-size:10px; } }
:root {
  --adu-ink:#152c43; --adu-deep:#0a2540; --adu-paper:#f3f7fb;
  --adu-muted:#566d82; --adu-rule:#cbd9e5; --adu-accent:#067397;
  --adu-glow:#54dbff; --atlas-text:#edf5fc;
  --adu-shadow:0 14px 45px #04152733;
  --atlas-panel:#091f34f5; --atlas-accent:#a3eaff;
  --atlas-muted:#adc2d5; --atlas-line:#a9cbe329;
}
body #topbar {
  border-radius:10px; background:linear-gradient(115deg,#081a2ef7,#123854f7);
  border:1px solid #88dfff38; box-shadow:0 6px 24px #04152730;
}
body #brandmark { border-color:#9ed8f232; }
body #topbar .barbtn { border-radius:6px; color:#edf5fc; }
body #topbar .barbtn { flex-direction:row; gap:7px; min-width:44px; padding:8px 11px; margin-block:12px; }
body #topbar .barbtn span { font-size:12px; font-weight:400; }
body #topbar .barbtn svg { width:16px; height:16px; }
body #topbar .barbtn[data-tool="menu"] { display:flex; }
body #topbar .barbtn:is([data-tool="gallery"],[data-tool="favourites"],[data-tool="amenities"],[data-tool="share"],[data-tool="hide"]) { display:none; }
body #topbar .barbtn:hover:not([disabled]),body #topbar .barbtn[aria-pressed="true"] {
  background:#f3f7fb; border-color:#f3f7fb; color:var(--adu-ink);
}
body #crumbs .crumb.here { color:#a3eaff; }
body #membership-entry { border-color:#62cfee66; border-radius:6px; color:#edf5fc; }
body #rail { background:var(--adu-paper); color:var(--adu-ink); border-color:#fff9; border-radius:12px; box-shadow:var(--adu-shadow); }
body .railhead { min-height:56px; border-bottom:1px solid var(--adu-rule); font-size:16px; letter-spacing:-.02em; }
body .railhead button { background:transparent; color:var(--adu-ink); border:1px solid var(--adu-rule); box-shadow:none; border-radius:50%; }
body .railhead button svg { fill:currentColor; }
body .railhead button:hover { background:#e5eef6; border-color:#94b4cb; }
body .railbody { padding:18px; }
body #rail h2,body #rail h3,body #rail h4 { color:var(--adu-ink); }
body #rail h2 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.035em; }
body #rail :is(.ramhan-detail,.project-information)>h2 { font-size:30px; margin:8px 0 18px; }
body #rail :is(.ramhan-detail,.project-information) p { color:var(--adu-muted); }
body #rail :is(.ramhan-eyebrow,.project-eyebrow) { color:#067397; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
body #rail :is(.ramhan-source-note,.ramhan-plot-help,.comparison-note,.export-status,.railempty,.commercial-source) { color:var(--adu-muted); }
body #rail .ramhan-source-note { font-size:11px; line-height:1.55; margin:16px 0; }
body #rail :is(.ramhan-back,.ramhan-source-switch,.portfolio-link,.project-export-actions button,.comparison-toolbar button,.document-actions a) {
  color:var(--adu-ink); border:1px solid var(--adu-rule); background:transparent; border-radius:6px;
  min-height:40px; padding:10px 12px; font-size:12px;
}
body #rail :is(.portfolio-link,.document-actions a):hover,
body #rail :is(.ramhan-source-switch,.project-export-actions button,.comparison-toolbar button):hover:not(:disabled) {
  background:#e5eef6; border-color:#94b4cb;
}
body #rail .ramhan-back { padding:5px 0; border:0; min-height:32px; }
body #rail :is(.ramhan-source-switch[aria-pressed="true"],[data-compare-project][aria-pressed="true"]) { color:white; background:var(--adu-deep); border-color:var(--adu-deep); }
body #rail :is(.portfolio-link small,.project-facts dt,.priced-home-types dt,.project-search label,.project-search p,.comparison-picker>label,.comparison-options small) { color:var(--adu-muted); }
body #rail :is(.project-facts dd,.priced-home-types dd,.payment-schedule strong) { color:var(--adu-ink); }
body #rail :is(.project-information section,.payment-schedule li,.comparison-picker) { border-color:var(--adu-rule); }
body #rail :is(.information-amenities,.comparison-toolbar p) { color:var(--adu-muted); }
body #rail :is(input[type="search"],input[type="text"],input[type="number"],select) {
  color:var(--adu-ink); background:#fff; border:1px solid #cbd9e5; border-radius:6px;
  min-height:44px; font-family:inherit; padding:10px 12px; max-width:100%;
}
body #rail :is(input,select)::placeholder { color:#566d82; }
body #rail :is(.ramhan-plot-search,.atlas-rail-filters label) { color:var(--adu-muted); }
body #rail .ramhan-plot-count { font-size:11px; color:#566d82; letter-spacing:.035em; margin:20px 0 10px; }
body #rail .ramhan-plot-list { gap:0; border-top:1px solid var(--adu-rule); }
body #rail .ramhan-plot-list button {
  color:var(--adu-ink); background:transparent; border:0; border-bottom:1px solid var(--adu-rule);
  border-radius:0; min-height:48px; padding:11px 2px; grid-template-columns:76px 1fr 18px;
}
body #rail .ramhan-plot-list button:hover { background:#e5eef6; }
body #rail .ramhan-plot-list button strong { font-weight:500; }
body #rail .ramhan-plot-list span { color:var(--adu-muted); }
body #rail :is(.ramhan-unit-nav,.ramhan-plan-variants) button {
  background:#e5eef6; color:var(--adu-ink); border-color:#cbd9e5; border-radius:6px;
}
body #rail :is(.ramhan-plot-source-preview,.ramhan-reference-render) { background:#e5eef6; border-color:var(--adu-rule); color:var(--adu-ink); border-radius:8px; }
body #rail :is(.ramhan-plot-source-preview,.ramhan-reference-render) span { color:var(--adu-ink); }
body #rail .ramhan-source-reference summary { color:var(--adu-muted); }
body #rail .ramhan-source-reference { border-top:1px solid var(--adu-rule); padding-top:8px; }
body #rail .ramhan-design-facts { padding:15px 0; border-block:1px solid var(--adu-rule); color:var(--adu-ink); }
body #rail .ramhan-plan-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:20px 0 12px; }
body #rail .ramhan-plan-heading h3 { margin:0; color:var(--adu-ink); font:400 20px/1.2 Georgia,serif; }
body #rail .ramhan-plan-heading span { color:var(--adu-muted); font-size:10px; }
body #rail :is(.ramhan-design-choice,.ramhan-floor-choice) { display:flex; gap:5px; margin-bottom:8px; }
body #rail :is(.ramhan-design-choice,.ramhan-floor-choice) button { flex:1; border:1px solid var(--adu-rule); padding:9px 10px; border-radius:5px; font-size:11px; color:var(--adu-ink); background:transparent; }
body #rail :is(.ramhan-design-choice,.ramhan-floor-choice) button[aria-pressed="true"] { background:var(--adu-deep); color:white; border-color:var(--adu-deep); }
body #rail .ramhan-floor-preview { display:block; width:100%; padding:0; border:1px solid var(--adu-rule); border-radius:8px; overflow:hidden; background:#fff; cursor:pointer; }
body #rail .ramhan-floor-preview img { display:block; width:100%; height:auto; max-height:360px; object-fit:contain; }
body #rail .ramhan-floor-preview>span { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; color:var(--adu-ink); background:#e5eef6; font-size:12px; }
body #rail .ramhan-floor-preview svg { width:16px; height:16px; }
body #rail .ramhan-finish-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
body #rail .ramhan-finish-choices button { padding:0; text-align:left; border:1px solid var(--adu-rule); border-radius:7px; overflow:hidden; background:#e5eef6; color:var(--adu-ink); }
body #rail .ramhan-finish-choices button:hover { border-color:#94b4cb; background:#dceaf5; }
body #rail .ramhan-finish-choices img { display:block; width:100%; aspect-ratio:1.4; object-fit:cover; }
body #rail .ramhan-finish-choices span { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:10px; font-size:12px; }
body #rail .ramhan-finish-choices svg { width:14px; height:14px; }
body #rail .rcard { background:#fff; border-color:var(--adu-rule); border-radius:8px; overflow:hidden; }
body #rail .rcard:hover { background:#e5eef6; }
body #rail .rcard-sub { color:var(--adu-muted); }
body #rail .rcard-cta { color:white; background:var(--adu-deep); border-color:var(--adu-deep); border-radius:5px; }
body #rail .rcard-cta:hover { background:#123d5e; }
body #rail .comparison-table { border-color:var(--adu-rule); border-radius:8px; }
body #rail .comparison-table :is(th,td) { color:var(--adu-ink); border-color:var(--adu-rule); }
body #rail .comparison-table th:first-child { background:#e5eef6; color:#566d82; }
body #rail .comparison-table thead th { background:#e5eef6; }
body #rail .comparison-table :is(a,button) { color:var(--adu-ink); border-color:var(--adu-rule); }
body #rail .comparison-options input { accent-color:var(--adu-deep); }
body #leftpanels :is(.bpanel),body :is(#modon,#burtville,#bloom,#jubail,#unitlist,#inventory,#parking)>div {
  background:#091f34f5; border:1px solid #91bbda3b; border-radius:10px; box-shadow:var(--adu-shadow);
}
body #leftpanels .ramhan-panel { padding:18px 16px; }
body .ramhan-community-heading h2 { font:400 21px/1.2 Georgia,serif; letter-spacing:-.025em; }
body .ramhan-panel>p { color:#adc2d5; font-size:11px; line-height:1.6; }
body .ramhan-community-list { display:flex; flex-direction:column; gap:0; }
body .ramhan-community-list button {
  display:flex; justify-content:space-between; align-items:center; border:0; border-bottom:1px solid #b9d5ec1a;
  border-radius:0; padding:10px 8px; min-height:38px; background:transparent; color:#edf5fc; font-size:12px;
}
body .ramhan-community-list button:hover { background:#ffffff0b; }
body .ramhan-community-list button[aria-pressed="true"] { background:var(--adu-paper); color:var(--adu-ink); box-shadow:inset 3px 0 var(--adu-accent); border-radius:5px; }
body .ramhan-community-list button small { font-size:10px; opacity:.65; font-variant-numeric:tabular-nums; }
body .ramhan-community-heading button { border-color:#99c9e750; border-radius:4px; }
body .ramhan-community-heading button[aria-pressed="true"] { background:#e5eef6; color:var(--adu-ink); }
body :is(#leftpanels,#mobiletools) .portfolio-link { border-radius:5px; border-color:#99c9e740; background:#061b2e44; }
body #leftpanels :is(button,select,input) { accent-color:var(--adu-accent); }
body #zoomrail { gap:4px; }
body #zoomrail button { color:var(--adu-ink); background:var(--adu-paper); border:1px solid #fff8; border-radius:7px; box-shadow:0 3px 14px #04152728; }
body #zoomrail button svg { fill:currentColor; }
body #zoomrail button:hover { background:#e5eef6; border-color:#94b4cb; }
body .jpin:not(.jpin-souq) { width:26px; height:26px; border:1px solid #dcecfaaa; background:var(--adu-deep); box-shadow:0 2px 6px #04152738; }
body .jpin:not(.jpin-souq) img { width:19px; height:19px; }
body .jpin:not(.jpin-souq):hover { border-color:var(--adu-accent); }
body .place-badge.location-badge { background:#fff; border-radius:6px; width:104px; min-width:104px; height:32px; border-color:#fff9; box-shadow:0 4px 12px #04152738; }
body .location-badge .place-name { color:#152c43; font-size:11px; font-weight:500; }
body .area-action { border-color:#91a9bf5e; color:var(--adu-ink); }
body .area-action svg { background:transparent; padding:1px; border-radius:0; width:16px; height:16px; }
body :is(.place-badge.project-filled,.project-group) { background:#0c2b47f5; border-color:#8ec6e470; border-radius:5px; box-shadow:0 3px 10px #04152744; }
body .project-filled .project-action { border:0; border-radius:0; color:#a3eaff; }
body #sidebar { background:#081d32fa; border-color:#a4c9e642; }
body #mobiletools .mtool { background:#ffffff07; border-color:#a4c9e63b; border-radius:7px; }
body :is(.chip,.vchip,.atlas-fit,.nearby-project) { border-radius:5px; }
body #chipbar .chip,body .vchip { background:var(--adu-deep); color:#edf5fc; border-color:#a4c9e64d; }
body #chipbar .chip.on,body .vchip.on { background:var(--adu-paper); color:var(--adu-ink); border-color:#94b4cb; }
body #chipbar .chip:hover,body .vchip:hover { background:#123d5e; color:white; }
body #compass svg { filter:drop-shadow(0 2px 5px #04152740); }
body .cbcard { background:var(--adu-paper); color:var(--adu-ink); border-color:#fff8; border-radius:14px; box-shadow:var(--adu-shadow); }
body .cbhead h3 { color:var(--adu-ink); font:400 26px/1.2 Georgia,serif; }
body .cbhead { gap:10px; }
body .cbhead h3 { min-width:0; }
body .cbhead button { flex:0 0 36px; }
body .cbcard :is(label,.cbabout,.cbnote) { color:var(--adu-muted); }
body .cbabout strong { color:var(--adu-ink); }
body .cbcard :is(input,textarea) { background:#fff; color:var(--adu-ink); border-color:var(--adu-rule); border-radius:6px; min-height:44px; }
body .cbcard :is(input,textarea):focus { border-color:var(--adu-accent); }
body .cbhead button { color:var(--adu-ink); border-color:var(--adu-rule); width:36px; height:36px; }
body .cbhead button svg { fill:currentColor; }
body .cbgo { background:var(--adu-deep); color:white; border-color:var(--adu-deep); border-radius:6px; }
body .cbwa { background:transparent; color:var(--adu-ink); border-color:var(--adu-rule); border-radius:6px; }
body #ramhan-scene-nav { border-radius:7px; background:var(--adu-paper); box-shadow:0 5px 20px #04152722; }
body #ramhan-scene-nav select { background:#e5eef6; color:var(--adu-ink); }
body .membership-dialog { background:var(--adu-paper); border-color:#fff; border-radius:14px; font-family:"Suisse Int'l",sans-serif; }
body .membership-dialog h1 { font-family:Georgia,serif; font-weight:400; font-size:32px; }
body .membership-kicker { color:#067397; }
body .membership-primary { background:var(--adu-deep); border-radius:6px; }
body .membership-form input { border-color:var(--adu-rule); border-radius:6px; background:#fff; }
body #unitcard>.relative { background:var(--adu-paper)!important; color:var(--adu-ink); border:1px solid #fff9; border-radius:14px; box-shadow:var(--adu-shadow); }
body #unitcard>.relative :is(.text-white,.text-black) { color:var(--adu-ink); }
body #unitcard>.relative :is(.text-neutral-400,.text-neutral-300,.text-neutral-500) { color:var(--adu-muted); }
body #unitcard>.relative>.flex:first-child .text-xl { font:400 27px/1.2 Georgia,serif; }
body #unitcard :is([data-close],[data-jfloor],.cardacts button,.cardacts a) { color:var(--adu-ink); border-color:var(--adu-rule); border-radius:6px; }
body #unitcard :is([data-vropen],[data-avr],[data-bvr],[data-planopen]:not(.planbtn)) { color:white!important; background:var(--adu-deep)!important; border:1px solid var(--adu-deep); border-radius:6px; min-height:44px; }
body #unitcard :is([data-vropen],[data-avr],[data-bvr],[data-planopen]:not(.planbtn)):hover { background:#123d5e!important; }
body #unitcard [data-bbal] { color:var(--adu-ink)!important; background:#e5eef6!important; border:1px solid var(--adu-rule); border-radius:6px; min-height:44px; }
body #unitcard [data-close] { background:#e5eef6; color:var(--adu-ink); }
body #unitcard [data-close] svg { fill:currentColor; }
body #unitcard :is([data-jfloor],[data-bfloor],[data-tfloor],[data-floor]) { background:#e5eef6!important; color:var(--adu-ink)!important; border:1px solid #cbd9e5!important; border-radius:5px; min-height:36px; padding:7px 12px; }
body #unitcard :is([data-jfloor],[data-bfloor],[data-tfloor],[data-floor]).text-black { background:var(--adu-deep)!important; color:white!important; border-color:var(--adu-deep)!important; }
body #unitcard .jplanzoom { border-radius:5px; background:var(--adu-deep); color:white; }
body #unitcard :is(.utag,.jplan-none) { color:var(--adu-muted); background:#e5eef6; }
body #vr :is([data-vrclose],[data-vrfloor],[data-vrroom]) { border-radius:6px; }
body #vr .vrplan { border-radius:6px; }
body #vr>.absolute.top-4>div { background:#0a2540eb!important; border:1px solid #b3d8ef36; border-radius:8px; }
body #vr>.absolute.bottom-4>.rounded-xl { background:#f3f7fbf5!important; color:var(--adu-ink); border:1px solid #fff8; box-shadow:var(--adu-shadow); border-radius:9px; padding:14px; }
body #vr>.absolute.bottom-4>.rounded-xl>.text-white { color:var(--adu-muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
body #vr #vr-rooms { gap:6px; }
body #vr #vr-rooms { max-height:145px; overflow-y:auto; overscroll-behavior:contain; }
body #vr #vr-plan-toggle { margin-top:10px; padding:8px 0; width:100%; text-align:left; border:0; border-top:1px solid var(--adu-rule); background:transparent; color:var(--adu-muted); font-size:11px; cursor:pointer; }
body #vr #vr-plan-toggle::after { content:'＋'; float:right; }
body #vr #vr-plan-toggle[aria-expanded="true"]::after { content:'−'; }
body #vr #vr-plan[hidden] { display:none; }
body #vr :is([data-vrroom],[data-vrfloor],[data-vrfinish]) { color:var(--adu-ink)!important; background:var(--adu-paper)!important; border:1px solid var(--adu-rule)!important; padding:9px 11px; font-size:11px; min-height:36px; }
body #vr :is([data-vrroom],[data-vrfloor],[data-vrfinish]).text-black { color:white!important; background:var(--adu-deep)!important; border-color:var(--adu-deep)!important; }
body #vr #vr-plan { background:#e5eef6; max-height:230px; overflow:hidden; }
body #vr #vr-plan svg { max-height:230px; }
body #vr [data-vrclose],body #planview [data-planclose] { background:var(--adu-paper)!important; color:var(--adu-ink); border:1px solid #cbd9e5; border-radius:50%; }
body :is(#vr [data-vrclose],#planview [data-planclose]) svg { fill:currentColor; }
body #planview :is([data-plantab],[data-planscheme],[data-planmirror],[data-planrooms]) { background:var(--adu-paper)!important; color:var(--adu-ink)!important; border:1px solid var(--adu-rule)!important; border-radius:5px; padding:8px 12px; min-height:36px; }
body #planview :is([data-plantab],[data-planscheme],[data-planmirror],[data-planrooms]):is(.text-black,.on,[aria-pressed="true"]) { color:white!important; background:var(--adu-deep)!important; border-color:var(--adu-deep)!important; }
body #planview>.absolute.top-4.left-4 { max-width:calc(100% - 88px); background:#0a2540ed!important; border:1px solid #b3d8ef36; border-radius:8px; }
body #planview .plan-controls { display:contents; }
body #planview .plan-controls>.planlegend { padding:3px; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
body .ramhan-room-entry { width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:white; cursor:pointer; }
body .ramhan-room-entry::before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:28px; height:28px; border:2px solid #fff; border-radius:50%; background:var(--adu-deep); box-shadow:0 2px 10px #04152755; }
body .ramhan-room-entry svg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; fill:currentColor; }
body .ramhan-room-entry span { position:absolute; bottom:calc(100% + 5px); white-space:nowrap; background:var(--adu-deep); color:white; padding:5px 8px; border-radius:4px; font-size:11px; opacity:0; pointer-events:none; }
body .ramhan-room-entry:is(:hover,:focus-visible) span { opacity:1; }
@media(pointer:coarse) { body .ramhan-room-entry { width:44px; height:44px; } }
body #site-credit a { background:#0a2540df; border-color:#9dcce950; }
body #site-credit span { opacity:.35; }
body :is(button,a,input,select,summary):focus-visible { outline:2px solid #067397; outline-offset:3px; }
/* Silver surfaces and cyan interaction accents keep the brand consistent across drawers. */
body #membership-entry { background:#3ccfff0b; }
body #membership-entry:hover { background:#3ccfff20; border-color:var(--adu-glow); }
body .place-badge.location-badge { background:linear-gradient(145deg,#fff,#edf5fc); border-color:#d8e8f5; }
body .place-badge.location-badge:is(:hover,:focus-visible,[aria-expanded="true"],[data-area-state="moving"]) { border-color:var(--adu-accent); box-shadow:0 0 0 2px #fff,0 5px 16px #061a3040; }
body .place-badge.location-badge:is(:hover,:focus-visible) .area-action { color:var(--adu-accent); }
body :is(.place-badge.project-filled,.project-group):hover { background:#164564; border-color:var(--adu-glow); }
body .project-group-arrow { color:var(--atlas-accent); }
body #area-project-menu { background:#091f34fa; border-color:var(--atlas-line); color:var(--atlas-text); }
body #area-project-menu :is(.area-menu-nav button,.area-menu-count,.area-menu-head small) { color:var(--atlas-muted); }
body #area-project-menu .area-menu-overview { background:var(--adu-paper); color:var(--adu-ink); border-color:var(--adu-rule); }
body #area-project-menu .area-project-link:hover { background:#54dbff0d; }
body #area-project-menu .area-project-link>span:last-child { color:var(--atlas-accent); border-color:var(--atlas-line); }
body #area-project-menu .area-project-link:hover>span:last-child { background:var(--adu-paper); color:var(--adu-accent); }
body #area-explore-hint { background:#0a2540ed; color:var(--atlas-text); border-color:#a4c9e650; }
body #leftpanels .atlas-filter-footer { background:#091f34; box-shadow:0 -10px 20px #04152755; }
body .atlas-field option { background:#0a2540; color:var(--atlas-text); }
body #leftpanels :is(.atlas-field>span,.atlas-price legend,.atlas-price label>span,.atlas-check,.atlas-filter-note) { color:var(--atlas-muted); }
body #leftpanels .atlas-filter-head button { color:var(--atlas-accent); }
body #leftpanels :is(.atlas-field input,.atlas-field select,.atlas-price input) { background:#06182b80; border-color:#91bbda50; color:var(--atlas-text); }
body #leftpanels :is(.atlas-field input,.atlas-price input)::placeholder { color:#9ab3c9; }
body .atlas-fit { background:#54dbff10; color:var(--atlas-text); border-color:#7bdcff50; }
body .atlas-fit:hover { background:#54dbff20; border-color:var(--adu-glow); }
body .atlas-preference input,body #leftpanels :is(input,select) { accent-color:var(--adu-glow); }
body #sidebar-close:hover,body #mobiletools .mtool:hover { background:#54dbff18; border-color:#54dbff70; }
body #rail .atlas-rail-filters>details>summary { color:var(--adu-muted); }
body :is(#topbar,#leftpanels,#sidebar,#area-project-menu) :is(button,a,input,select,summary):focus-visible { outline-color:var(--adu-glow); }
body .ramhan-enter-interior { border-color:#6cdcff70; box-shadow:inset 0 1px #b9efff24; }
body.atlas-overview #mobile-areas:not([hidden]) { background:var(--adu-deep); color:var(--atlas-text); border-color:#9dcce950; }
@media(max-width:640px) {
  body #topbar { border-radius:0 0 10px 10px; }
  body #topbar .barbtn { margin-block:5px; padding:7px; }
  body #topbar .barbtn svg { width:20px; height:20px; }
  body #topbar .barbtn[data-tool="menu"] span { display:none; }
  body #brandmark { padding-inline:8px; }
  body #brandmark img { width:48px; height:48px; }
  body #crumbs .crumb.here { white-space:normal; text-overflow:clip; overflow:visible; font-size:12px; line-height:1.15; padding-inline:4px; }
  body #membership-entry { padding:7px; font-size:10px; }
  body .cbhead h3 { font-size:22px; }
  body #rail { border-radius:16px 16px 8px 8px; }
  body #rail .railbody { padding:16px; }
  body #rail :is(input[type="search"],input[type="text"],select) { font-size:16px; }
  body #rail :is(.ramhan-detail,.project-information)>h2 { font-size:26px; }
  body #rail .ramhan-unit-detail>h2 { display:block; font-size:23px; margin:6px 0 10px; }
  body #rail .ramhan-plot-list { max-height:none; overflow:visible; }
  body #rail :is(button,.portfolio-link,.document-actions a) { min-height:44px; }
  body #rail .ramhan-unit-detail>.ramhan-back { display:inline-flex; min-height:32px; border:0; padding:4px 0; margin-bottom:2px; }
  body .ramhan-community-list button { min-height:44px; }
  body #sheet-handle { background:var(--adu-deep)!important; border-color:#9dcce950; }
  body .jpin:not(.jpin-souq) { width:24px; height:24px; }
  body #rail .ramhan-community-detail>.ramhan-back { display:none; }
  body #rail .ramhan-community-detail .ramhan-plot-count { margin:0 0 12px; }
  body #rail .ramhan-community-detail .ramhan-plot-search { margin:10px 0; }
  body #mobile-areas { color:var(--adu-ink); background:var(--adu-paper); border-color:#fff8; border-radius:8px; }
  body #unitcard>.relative { padding:18px; max-height:94dvh; width:calc(100vw - 16px); }
  body #unitcard>.relative>div.grid { grid-template-columns:minmax(0,1fr)!important; }
  body #unitcard button { min-height:44px; }
  body #planview :is(button[data-planclose],[data-plantab],[data-planscheme],[data-planmirror],[data-planrooms]) { min-height:44px; }
  body #planview button[data-planclose] { min-width:44px; }
  body #planview .plan-controls { display:flex; flex-direction:column; gap:8px; position:absolute; left:16px; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); pointer-events:none; }
  body #planview .plan-controls>:is(.plantabs,.planopts,.planlegend) { position:static; max-width:100%; pointer-events:auto; }
  body #planview .plantabs { max-width:calc(100vw - 32px); max-height:none; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding:3px; }
  body #planview .plantabs button { flex-shrink:0; white-space:nowrap; }
  body #planview .plan-controls>.planopts { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:3px; }
  body #planview .planopts button { flex-shrink:0; white-space:nowrap; }
  body #planview .plan-controls>.planlegend { align-self:flex-start; }
  body #vr>.absolute.bottom-4 { left:10px; bottom:10px; width:min(285px,calc(100vw - 20px))!important; }
  body #vr #vr-plan,body #vr #vr-plan svg { max-height:165px; }
  body #vr #vr-rooms { max-height:100px; }
  body #vr #vr-plan-toggle { min-height:36px; }
  body #vr :is([data-vrroom],[data-vrfloor],[data-vrfinish]) { min-height:44px; }
}
@media(prefers-reduced-motion:no-preference) {
  body :is(#rail,#unitcard>.relative,.membership-dialog) { animation:adu-surface-in .22s ease-out; }
  @keyframes adu-surface-in { from { opacity:0; translate:0 6px; } to { opacity:1; translate:0 0; } }
}