/* ==========================================================================
   perf.css — loaded LAST. Nothing here changes the design; it only fixes the
   issues PageSpeed flagged: layout shift, non-composited animations, icon
   dependency, contrast, and tag swaps made for heading-order accessibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. INLINE ICONS  (replaces the Iconify web-component runtime)
   -------------------------------------------------------------------------- */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none}
.tc .ico,.inp-box .ico{color:var(--primary-color);font-size:13px;margin-right:3px;margin-bottom:-3px}
.bottomfix a .ico{display:block;font-size:20px;margin:0 auto}
.fix_icons .fico .ico{font-size:25px}
.whts .ico{font-size:40px}
#btnClose .ico{font-size:30px}
#btnClose{background:none;border:0;padding:0;line-height:1}

/* --------------------------------------------------------------------------
   2. LAYOUT SHIFT  (CLS was 0.259 mobile / 0.526 desktop)
   Reserve the space each block will occupy before JS/images/fonts arrive.
   -------------------------------------------------------------------------- */
.banner-main-div{min-height:calc(100vh - 10px);background:#101010}
.owl-preinit{display:flex;overflow:hidden}
.owl-preinit>.item{flex:0 0 100%;max-width:100%}
.owl-preinit>.item:not(:first-child){display:none}
#banner-slider,#banner-slider .item{min-height:500px}
.gallery_image img{width:100%;height:100%;object-fit:cover}
.brand img{height:auto}
.amenities_wrap img{width:60px;height:60px}
.floor_plan_image{aspect-ratio:4/3}
.floor_plan_image img{width:100%;height:100%}
.highlights_left img{aspect-ratio:4/3}
.location_map img{aspect-ratio:4/3}
.dwnload{width:16px;height:16px}
/* the fixed navbar has a known height, so the hero never jumps */
.navbar{min-height:68px}

@media(max-width:767px){
  .banner-main-div{min-height:230px}
  #banner-slider,#banner-slider .item{min-height:220px}
}

/* --------------------------------------------------------------------------
   3. NON-COMPOSITED ANIMATIONS  (13 were flagged: they ran on the main thread)
   All rewritten to transform/opacity only — now GPU composited.
   -------------------------------------------------------------------------- */

/* .orange-bar used a 4-stop gradient of the SAME colour, so the animation was
   invisible while still repainting forever. Turned off, look is identical. */
.orange-bar{
  animation:none!important;
  background:var(--primary-color)!important;
  background-image:none!important;
  filter:none!important;
}

/* button sheen: was animating `left`, now a translated gradient */
.btn--glow{overflow:hidden;position:relative;isolation:isolate}
.btn--glow:before{
  content:'';position:absolute;inset:0;width:100%;height:100%;
  box-shadow:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translate3d(-120%,0,0);
  animation:button-glow 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes button-glow{
  0%{transform:translate3d(-120%,0,0)}
  50%,100%{transform:translate3d(120%,0,0)}
}

/* call icon pulse: was animating box-shadow spread */
.fix_icons .fico{animation:none;position:relative}
.fix_icons .fico:before{
  content:'';position:absolute;inset:0;border-radius:5px;
  border:2px solid var(--primary-color);
  animation:pulse-ring 2s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.65}
  100%{transform:scale(1.75);opacity:0}
}

/* download arrow bob: was animating `position`/`bottom` */
.dwnload{animation:UpDown1 1s ease-in-out infinite;position:static!important;bottom:auto!important}
@keyframes UpDown1{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-3px,0)}
}

/* respect users who ask for less motion */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --------------------------------------------------------------------------
   4. DELAYED POPUP — opacity transition instead of jQuery fadeIn
   -------------------------------------------------------------------------- */
.backgroundOverlay,.delayedPopupWindow{
  display:block;opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.backgroundOverlay.is-open,.delayedPopupWindow.is-open{opacity:1;visibility:visible}
.backgroundOverlay.is-open{opacity:.85}

/* --------------------------------------------------------------------------
   5. HEADING ORDER FIX — tags swapped to <p>, styling kept byte-identical
   (PageSpeed: "Heading elements are not in a sequentially-descending order")
   -------------------------------------------------------------------------- */
p.common_sub_head_blk{margin:0 0 10px}

.eyebrow{color:#ffffffd6;margin:0;font-size:14px}                 /* was .highlight_wrap h6 */
.form-title{color:#212529;font-size:20px;font-weight:800;margin:0}/* was .form-head h5 */
.enquiry_heading{font-size:25px;font-weight:600;color:#2d2d2d;text-transform:none;width:330px;margin:0 auto 10px}
.price_amount{font-size:32px;font-weight:800;color:#fff;margin:0 0 .5rem}
.price_type{color:#fff;font-size:14px;text-transform:uppercase;line-height:20px;min-height:40px;margin-bottom:20px}
.price_size{margin:0;color:#fff;font-size:14px;font-weight:500;border:1px solid #ffffff29;padding:7px 15px;border-radius:50px;background:#333}
.fp_label{margin:0;color:#fff;font-size:16px}
.amenity_label{font-size:14px;color:#ffff;margin:0;font-weight:700}
.amenities_wrap:hover .amenity_label{color:#fff;transition:all .5s linear}

@media(max-width:574px){
  .enquiry_heading{width:100%}
  .price_type{font-size:16px}
  .amenity_label{font-size:14px}
}
@media(min-width:575px) and (max-width:767px){
  .enquiry_heading{width:100%}
  .price_type{font-size:16px}
  .amenity_label{font-size:14px}
}
@media(min-width:768px) and (max-width:1199px){
  .amenity_label{font-size:14px;min-height:46px;display:flex;align-items:center;justify-content:center}
}

/* --------------------------------------------------------------------------
   6. CONTRAST  (flagged: "Background and foreground colors do not have a
   sufficient contrast ratio"). Same hues, higher alpha.
   -------------------------------------------------------------------------- */
.ftr_top p{color:#FFFFFFD9}
.copy_right p{color:#FFFFFFD9}
.copy_right a{color:#fff}
.service-form-div form input::placeholder,
.service-form-div form textarea::placeholder{color:#6b6c6d}
.mainsectionrt span{color:#000000c7}

/* --------------------------------------------------------------------------
   7. FOCUS VISIBILITY (keyboard users) — the global `* { outline:none }`
   in style.css removed every focus ring.
   -------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary-color);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   8. TEXT RENDERING — avoid a repaint storm while the webfont swaps in
   -------------------------------------------------------------------------- */
body{text-rendering:optimizeSpeed}
/* skip rendering work for far-below-the-fold blocks until they're near the viewport */
footer{content-visibility:auto;contain-intrinsic-size:auto 600px}