/* ==========================================================
   V57 - HERO / IMAGE LAYOUT FIX
   Keeps all hero media and floating solution cards inside the
   visible frame at normal desktop zoom, without stretching images.
   ========================================================== */
html,body{max-width:100%;overflow-x:clip!important}

.hero{
  width:100%!important;
  overflow:hidden!important;
}

.hero .container{
  width:min(1500px,calc(100% - 48px))!important;
  max-width:1500px!important;
  min-height:440px!important;
  height:auto!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  align-items:stretch!important;
}

.hero-copy{
  min-width:0!important;
  align-self:center!important;
  padding:34px 28px 34px 0!important;
}

.hero-media{
  position:relative!important;
  min-width:0!important;
  min-height:440px!important;
  height:auto!important;
  margin:0!important;
  overflow:hidden!important;
}

.hero-media>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  min-height:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}

.hero-media:before{
  pointer-events:none!important;
}

/* Floating solution cards must remain fully inside the image */
.hero-solutions.tech-timeline{
  position:absolute!important;
  left:auto!important;
  right:20px!important;
  top:auto!important;
  bottom:18px!important;
  width:min(310px,calc(100% - 40px))!important;
  max-width:310px!important;
  max-height:calc(100% - 36px)!important;
  margin:0!important;
  padding:0!important;
  z-index:5!important;
  box-sizing:border-box!important;
}

.hero-solution.tech-card{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Keep all content images proportional; never stretch width/height independently */
.category-image,
.ref-card-media,
.news-ref-media,
.project-media,
.subpage-media,
.about-ref-image{
  overflow:hidden!important;
}

.category-image img,
.ref-card img,
.news-ref-card img,
.project-card img,
.subpage-media img,
.about-ref-image img,
.company-story-grid img,
.contact-visual-grid img,
.operations-grid img,
.service-hero-visual img,
.detail-hero img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Laptop/tablet: stack hero instead of letting overlay run off-screen */
@media (max-width:1199px){
  .hero .container{
    width:min(1100px,calc(100% - 36px))!important;
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .hero-copy{
    padding:30px 0 26px!important;
    max-width:820px!important;
  }
  .hero-media{
    min-height:420px!important;
    margin:0!important;
  }
  .hero-solutions.tech-timeline{
    right:18px!important;
    bottom:18px!important;
    width:min(300px,calc(100% - 36px))!important;
  }
}

/* Mobile: image stays proportional and cards move below it */
@media (max-width:767px){
  .hero .container{
    width:calc(100% - 28px)!important;
  }
  .hero-media{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }
  .hero-media>img{
    position:relative!important;
    inset:auto!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    object-fit:cover!important;
  }
  .hero-solutions.tech-timeline{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:10px 0 0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .tech-timeline .timeline-rail,
  .tech-card .timeline-node{
    display:none!important;
  }
}

@media (max-width:520px){
  .hero-solutions.tech-timeline{
    grid-template-columns:1fr!important;
  }
}