/* M3 TECHNOLOGY V6.2 — hero refinement + mobile polish */

/* Desktop hero: smoother transition and more intentional product framing */
.project-hero-art img{
  object-position:64% center !important;
  transform:scale(1.015) !important;
  transform-origin:center right !important;
}
.project-hero-art::before{
  width:38% !important;
  background:linear-gradient(90deg,
    #04142a 0%,
    rgba(4,20,42,.98) 18%,
    rgba(4,20,42,.80) 48%,
    rgba(4,20,42,.30) 78%,
    rgba(4,20,42,0) 100%) !important;
  z-index:2 !important;
}

/* Keep header compact and balanced */
.header-wa-icon{
  width:44px !important;
  height:44px !important;
  flex-basis:44px !important;
}
.header-wa-icon .wa-svg{
  width:21px !important;
  height:21px !important;
}

/* Mobile: preserve the same identity instead of collapsing into a generic header */
@media(max-width:760px){
  .project-topline{
    display:none !important;
  }
  .project-header{
    min-height:68px !important;
  }
  .project-nav,
  .product-project-header .project-nav{
    min-height:68px !important;
    grid-template-columns:42px 1fr 42px 42px !important;
    gap:10px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .project-logo img,
  .project-logo{
    max-height:42px !important;
  }
  .mobile-menu-btn,
  .mobile-search-btn,
  .mobile-wa-btn{
    width:40px !important;
    height:40px !important;
    border-radius:11px !important;
  }
  .mobile-wa-btn{
    background:rgba(4,28,39,.76) !important;
    border:1px solid rgba(37,211,102,.50) !important;
    box-shadow:none !important;
  }

  /* Hero becomes a deliberate two-part mobile composition */
  .project-hero{
    min-height:auto !important;
  }
  .project-hero-inner{
    display:flex !important;
    flex-direction:column !important;
  }
  .project-hero-copy{
    padding:42px 22px 28px !important;
    position:relative !important;
    z-index:4 !important;
  }
  .project-hero-copy h1{
    font-size:clamp(38px,11vw,54px) !important;
    line-height:.98 !important;
    letter-spacing:-1.8px !important;
    max-width:560px !important;
  }
  .project-hero-copy p{
    font-size:15px !important;
    line-height:1.55 !important;
    max-width:520px !important;
  }
  .project-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .project-hero-actions .btn{
    min-height:46px !important;
    padding:0 12px !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
  .project-hero-art{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:280px !important;
    overflow:hidden !important;
    background:#061a33 !important;
  }
  .project-hero-art img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:71% center !important;
    transform:scale(1.04) !important;
  }
  .project-hero-art::before{
    width:20% !important;
    background:linear-gradient(90deg,#04142a,rgba(4,20,42,0)) !important;
  }

  /* Catalog spacing */
  .catalog-section{
    padding-top:54px !important;
    padding-bottom:60px !important;
  }
  .catalog-head{
    gap:20px !important;
  }
  .catalog-head .search{
    width:100% !important;
    max-width:none !important;
  }
  .chips{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-bottom:5px !important;
    scrollbar-width:none !important;
  }
  .chips::-webkit-scrollbar{display:none !important}
  .chip{white-space:nowrap !important}

  /* About + contact: tighter and cleaner */
  .about-section{
    padding:58px 0 !important;
  }
  .contact-card{
    margin-top:44px !important;
    margin-bottom:44px !important;
    padding:30px 24px !important;
  }

  /* Product page mobile: keep gallery compact and readable */
  .product-detail,
  .product-main{
    gap:24px !important;
  }
  .product-gallery-main{
    min-height:330px !important;
  }
}

/* Smaller phones */
@media(max-width:430px){
  .project-hero-copy{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .project-hero-copy h1{
    font-size:39px !important;
  }
  .project-hero-actions{
    grid-template-columns:1fr !important;
  }
  .project-hero-art{
    height:245px !important;
  }
}