/* Behaviour styles for the public site. The mirror injected these from
   includes/include.js at runtime; here they are a normal stylesheet loaded by
   layouts/default.vue. Timings/values are the ones measured off the live site. */

/* ---- slide-out menu ---- */
.slide-menu { transition: transform 340ms cubic-bezier(.65, 0, .35, 1) !important; }
.menu-overlay { transition: opacity 350ms ease !important; }
/* Locking the page while the menu is open must not change its width: this
   site draws a classic 0.6rem scrollbar (body::-webkit-scrollbar, plus
   scrollbar-width: thin), so overflow:hidden alone removes those 10px and
   every centred container jumps sideways by half of them. scrollbar-gutter
   keeps the space reserved while locked. It is applied only in this state,
   and only when the scrollbar really occupied width (the .lock-gutter
   class, set when the menu opens) — on a page too short to scroll, or with
   overlay scrollbars, reserving it would cause the same jump in reverse. */
html.menu-open, body.menu-open { overflow: hidden !important; }
html.lock-gutter { scrollbar-gutter: stable; }
.accordion-collapse { display: none; }
.accordion-collapse.show { display: block; }
.slide-menu li, .slide-menu .accordion-item { transition: opacity .45s ease, transform .45s ease; }
html.menu-open .slide-menu li, html.menu-open .slide-menu .accordion-item { opacity: 1 !important; transform: translateY(0) !important; }
html.menu-open .slide-menu > ul > .accordion > *:nth-child(1) { transition-delay: .10s; }
html.menu-open .slide-menu > ul > .accordion > *:nth-child(2) { transition-delay: .16s; }
html.menu-open .slide-menu > ul > .accordion > *:nth-child(3) { transition-delay: .22s; }
html.menu-open .slide-menu > ul > .accordion > *:nth-child(4) { transition-delay: .28s; }
html.menu-open .slide-menu > ul > .accordion > *:nth-child(5) { transition-delay: .34s; }
html.menu-open .slide-menu > ul > .accordion > *:nth-child(6) { transition-delay: .40s; }
html.menu-open .slide-menu > ul > .accordion > *:nth-child(7) { transition-delay: .46s; }

/* ---- ring cursor ---- */
.cursor { pointer-events: none; }
.cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 2147483647; pointer-events: none; will-change: transform; }
.cursor__ball circle { fill: transparent; }
@media (hover: hover) and (pointer: fine) {
  html.has-ring-cursor, html.has-ring-cursor body, html.has-ring-cursor a,
  html.has-ring-cursor a:hover, html.has-ring-cursor button { cursor: none; }
}

/* ---- select dropdowns (react-select look) ---- */
.rre-menu { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 11px 0 rgba(0,0,0,.1); z-index: 99999;
  font-size: 12px; color: #56575A; border-radius: 0; }
.rre-menu__list { padding: 4px 0; max-height: 300px; overflow-y: auto; }
.rre-menu__opt { padding: 8px 12px; font-size: 12px; line-height: 16px; cursor: pointer;
  font-family: "Avenir LT Pro", Arial, Helvetica, freesans, sans-serif; background: #fff; }
.rre-menu__opt:hover { background: #f5f5f5; }
.rre-menu__opt.is-selected { color: #F16A11; }
.rre-select-host { position: relative; }
.rre-no-results { padding: 40px 0; text-align: center; color: #56575A; font-size: 16px; }

/* ---- leadership bio panel ---- */
.rre-bio { position: fixed; inset: 0; z-index: 2147483000; background: #6f7072;
  display: none; opacity: 0; transition: opacity .35s ease; overflow-y: auto; }
.rre-bio.is-open { display: block; }
.rre-bio.is-shown { opacity: 1; }
.rre-bio__inner { max-width: 1360px; margin: 0 auto; padding: 96px 48px 64px;
  display: flex; gap: 56px; align-items: flex-start; }
.rre-bio__left { flex: 0 0 42%; max-width: 42%; }
.rre-bio__left img { width: 100%; display: block; }
.rre-bio__name { color: #fff; font-size: 26px; line-height: 1.3; margin: 20px 0 2px; font-weight: 500; }
.rre-bio__desig { color: rgba(255,255,255,.65); font-size: 15px; margin: 0; }
.rre-bio__text { flex: 1; color: #fff; font-size: 17px; line-height: 1.6; }
.rre-bio__text p { margin: 0 0 16px; color: #fff; }
.rre-bio__close { position: fixed; top: 38px; right: 46px; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  line-height: 1; cursor: pointer; background: none; z-index: 1; }
.rre-bio__close:hover { background: rgba(255,255,255,.12); }
/* Same scrollbar-gutter treatment as the menu lock above, so opening a bio
   does not shift the page sideways either. */
html.bio-open, html.bio-open body { overflow: hidden !important; }
.single-expert-item { cursor: pointer; }
@media (max-width: 900px) {
  .rre-bio__inner { flex-direction: column; gap: 28px; padding: 80px 22px 40px; }
  .rre-bio__left { flex: none; max-width: 100%; }
}

/* ---- YouTube modal (react-modal-video markup; styles come from the CSS bundle) ---- */
.modal-video { position: fixed; inset: 0; z-index: 1000000; background: rgba(0,0,0,.5); }

/* ---- keep page content below the fixed chrome ----
   The live site runs a smooth-scroller that puts a transform on #smooth-content,
   which makes it a stacking context and traps the page's z-indexes inside it
   (some are huge, e.g. the home banner arrows at z-index 99999999 !important).
   We have no smooth-scroller, so create that stacking context explicitly —
   otherwise those elements paint over the slide-out menu (z-index 9999) and the
   floating widgets. `isolation` is used rather than a transform so it does not
   become the containing block for the fixed parallax backgrounds. */
#smooth-content { isolation: isolate; }

/* ---- Projects sub-menu in the slide-out menu ----
   Three groups (Status / Category / Location), like RPL's Projects menu.
   The panel opens on hover; the "Projects" label itself is a link to the full
   listing, so it is an <a> — the mirror's CSS only styles <button> inside
   .accordion-header, hence the matching rules below. */
.slide-menu .accordion-header a.accordion-button {
  display: block; width: 100%; padding: 0; margin-bottom: 20px;
  background-color: transparent; border: 0; box-shadow: none;
  font-size: 20px; line-height: 28px;
  font-family: "Avenir LT Pro", "Euclid Square", Arial, Helvetica, freesans, sans-serif;
  color: rgb(245, 245, 245); text-align: left; position: relative; transition: color 0.6s;
}
.slide-menu .accordion-header a.accordion-button.collapsed { color: rgba(245, 245, 245, 0.5); }
/* padding/negative margin keeps the caret a comfortable tap target on touch,
   where there is no hover to open the panel with */
.slide-menu .accordion-header a.accordion-button img {
  position: absolute; right: -8px; top: 3px; padding: 8px; transform: rotate(180deg);
}
.slide-menu .accordion-header a.accordion-button.collapsed img { transform: rotate(0deg); }

/* Group toggles: Status / Category / Location — styled exactly like the
   "Projects" row above them (same size, weight, colour; no uppercase or
   letter-spacing), just indented and without its bottom margin. */
.slide-menu .accordion-body .accordion-item { transform: none; opacity: 1; }
.slide-menu .accordion-body .accordion-header { font-size: 20px; line-height: 28px; font-weight: 500; }
.slide-menu .accordion-body .accordion-header button {
  margin-bottom: 0; padding: 6px 0 6px 20px;
  font-size: 20px; line-height: 28px; font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: rgb(245, 245, 245);
}
.slide-menu .accordion-body .accordion-header button.collapsed { color: rgba(245, 245, 245, 0.5); }
.slide-menu .accordion-body .accordion-header button img { top: 14px; width: 9px; }
.slide-menu .accordion-body .accordion-body { margin-bottom: 0; }
.slide-menu .accordion-body .accordion-body ul { padding-top: 4px; padding-left: 36px; }
/* Items inside a group (Ongoing, Residential, Uttara …) are the small text —
   the size the group labels used to be. The <h5> carries the theme's own
   20px, so it is what has to be overridden. */
.slide-menu .accordion-body .accordion-body ul li a,
.slide-menu .accordion-body .accordion-body ul li a h5 {
  font-size: 15px; line-height: 20px; letter-spacing: 0.5px;
}
.slide-menu .accordion-body .accordion-body ul li:not(:nth-last-child(1)) { margin-bottom: 10px; }

/* The panel centres its list vertically, so a growing sub-menu would carry the
   items ABOVE Projects upwards too. While the sub-menu is open the list is
   pinned to the offset it had when collapsed (--menu-anchor, measured in
   SiteHeader.vue), so only what sits below Projects moves. */
.slide-menu > ul.is-anchored {
  align-self: flex-start;
  padding-top: var(--menu-anchor, 0px);
}
/* Expanding a group can make the menu taller than the screen, so the list
   scrolls inside the panel. The list scrolls rather than the panel itself
   because the panel's background (.bg-noise) is absolutely positioned inside
   it — scrolling the panel would drag that background off with the content. */
.slide-menu > ul {
  max-height: 100%;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(245, 245, 245, 0.35) transparent;
}
.slide-menu > ul::-webkit-scrollbar { width: 6px; }
.slide-menu > ul::-webkit-scrollbar-thumb { background: rgba(245, 245, 245, 0.35); border-radius: 3px; }
.slide-menu > ul::-webkit-scrollbar-track { background: transparent; }

/* The panel reserves 140px above and below the menu. On a short window that is
   most of the height, so a sub-menu has nowhere to open and rows fall off the
   bottom. Give it back below 760px tall — where the mirror's spacing cannot
   fit anyway. */
@media (max-height: 760px) {
  .emXdLR .slide-menu { padding-top: 60px; padding-bottom: 60px; }
}

/* ---- parity with the live site's React slider ---- */
/* Live runs react-slick, which never adds .slick-dotted (slick.css gives that a
   30px bottom margin) and writes style="display: block" on the dots list. jQuery
   slick does neither, so a slider with dots sat 30px lower and spaced its dots
   differently. Match react-slick. */
.slick-dotted.slick-slider { margin-bottom: 0; }
.slick-slider .slick-dots { display: block !important; }

/* ---- footer credit ---- */
/* Our credit line has two links with a bare "&" between them (live has one
   link). That "&" took the row's 16px/24px dark text — oversized next to the
   12px links, and 8px taller than live's row — and the flex row swallowed the
   spaces around it. Give it the links' type and a small gap. */
.footer__copyright > div > div { font-size: 12px; line-height: 16px; color: rgba(25, 24, 24, 0.5); column-gap: 0.3em; }

/* ---- project pages on phones: callback bar instead of the floating pill ---- */
/* Live's styled-components rules for the bar under the project banner, copied
   from its runtime stylesheet (the mirror was captured at desktop width, so they
   were never extracted). */
.iSLZRA .mobile-nav { background-color: rgb(241, 106, 17); z-index: 2147483647; width: 100%; height: 60px; display: flex; justify-content: space-between; align-items: center; padding-left: 20px; padding-right: 20px; }
.iSLZRA .pinned { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; }
.iSLZRA p { font-size: 12px; line-height: 16px; font-family: "Avenir LT Pro 65"; color: rgb(255, 255, 255); }
/* Live renders the bar below 767px and the floating pill from 768px up — at
   exactly 767px, neither. The landowner page keeps its pill at every width. */
@media (min-width: 767px) { .iSLZRA { display: none; } }
@media (max-width: 767px) { .izqnk--project { display: none !important; } }

/* ---- cursor over links (live's behaviour) ---- */
/* Live animates the circle with GSAP: scale .7 about the circle's top-left
   corner (3,3), fill #f7f8fa, stroke width 0, 0.3s — and back on leave. */
.bEbcip .cursor__ball circle {
  transform-origin: 3px 3px;
  transition: transform 0.3s ease-out, fill 0.3s ease-out, stroke-width 0.3s ease-out;
}
.bEbcip .cursor__ball.is-link circle { transform: scale(0.7); fill: #f7f8fa; stroke-width: 0; }

/* ---- amenities: rule off empty tiles ---- */
/* Fewer amenities than fill the 5 x 2 grid leaves part of the box empty. Live
   centres the short block (slick.css centres the track) and leaves the rest
   unruled; the client wants it drawn like Dokhinaloy instead — tiles from the
   left, every empty tile outlined. The lines are painted behind the slides at
   slick's measured tile size (set by onFeatureSlick on the project page), so
   they coincide with the real slide borders and only show where there is no
   slide: one vertical line at each tile's right edge, one rule between rows. */
.ktqWZw .slick-track { margin-left: 0; }
.ktqWZw .slick-list {
  --amenity-line: rgba(178, 168, 159, 0.5);
  background-image:
    linear-gradient(to left, var(--amenity-line) 1px, transparent 1px),
    linear-gradient(to bottom,
      transparent calc(var(--amenity-tile-h, 50%) - 1px),
      var(--amenity-line) calc(var(--amenity-tile-h, 50%) - 1px),
      var(--amenity-line) var(--amenity-tile-h, 50%),
      transparent var(--amenity-tile-h, 50%));
  background-size: var(--amenity-tile-w, 20%) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-clip: padding-box;
}