/* CLS + mobile stability patch v34
   Keeps original header design, keeps bottom nav visible on desktop/mobile,
   and lets the first hero <picture> image render for better mobile LCP.
*/
html, body { overflow-x: hidden; }
img, picture, video, canvas, svg { max-width: 100%; }


/* LCP hero image: keep the actual image visible so fetchpriority/preload can help. */
.hero-slide.active picture,
.hero-slide.active img {
  display: block !important;
}

/* Hero/image stability */
.hero { min-height: 600px; contain: layout paint; }
.hero-video,
.hero-slides,
.hero-slide,
.hero-slide picture,
.hero-slide img { min-height: 600px; }

.home-feature-promo-image { aspect-ratio: 3 / 2; }
.home-feature-promo-image img { width: 100%; height: 100%; object-fit: cover; }
.knowledge-image { aspect-ratio: 3 / 2; height: auto !important; }
.knowledge-image img { width: 100%; height: 100%; object-fit: cover; }
.property-image img { aspect-ratio: 3 / 2; object-fit: contain; }

/* Bottom nav stays on desktop and mobile */
body { padding-bottom: 78px; }
.bottom-nav {
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 70px !important;
  height: auto !important;
  padding: 12px 8px !important;
  box-sizing: border-box !important;
  z-index: 10000 !important;
}
.bottom-nav a { min-width: 0 !important; flex: 1 1 auto !important; white-space: nowrap !important; }

@media (min-width: 769px) {
  /* Restore desktop header to the original sticky/auto-height behavior */
  .header {
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .header .nav-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 70px !important;
    padding-bottom: 78px !important;
    overflow-x: hidden;
  }

  /* Previous mobile header size kept stable */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    overflow: visible !important;
    z-index: 10000 !important;
  }
  .header .nav-container {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  .hero {
    height: 640px !important;
    min-height: 640px !important;
    max-height: 640px !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }
  .hero-video,
  .hero-slides,
  .hero-slide,
  .hero-slide picture,
  .hero-slide img {
    height: 640px !important;
    min-height: 640px !important;
    max-height: 640px !important;
  }
  .hero-slide img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }
  .hero-content { min-height: 170px !important; }

  /* Removed from view to prevent mobile CLS; header remains unchanged */
  .hero-mobile-brand {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .home-feature-promo,
  .property-card,
  .service-card,
  .knowledge-card,
  .contact-item,
  .contact-social { contain: layout paint !important; }
}