/* U_NetLine mobile UX v2 */
html{scroll-behavior:smooth}
img{max-width:100%;height:auto}

@media (max-width: 900px){
  body{overflow-x:hidden}

  header .container,
  .header .container,
  .site-header .container{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  nav,
  .nav,
  #mainNav{
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    white-space:nowrap;
    gap:6px!important;
    padding-bottom:4px;
  }
  nav::-webkit-scrollbar,
  .nav::-webkit-scrollbar,
  #mainNav::-webkit-scrollbar{display:none}

  nav a,
  .nav a,
  #mainNav a{
    flex:0 0 auto;
    min-height:42px;
    display:inline-flex;
    align-items:center;
  }

  .hero,
  .hero-grid,
  .hero-inner,
  .hero-content{
    grid-template-columns:1fr!important;
  }

  .hero{
    padding-top:34px!important;
    padding-bottom:38px!important;
  }

  .hero h1{
    font-size:clamp(38px,11vw,58px)!important;
    line-height:.98!important;
    letter-spacing:-2px!important;
  }

  .hero p{
    font-size:16px!important;
    line-height:1.6!important;
  }

  .hero-actions,
  .hero-buttons,
  .cta-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .hero-actions .btn,
  .hero-buttons .btn,
  .cta-row .btn{
    width:100%!important;
    justify-content:center!important;
    min-height:48px!important;
  }

  .gallery-grid,
  .life-grid,
  .showcase-grid,
  .masonry-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-auto-rows:auto!important;
    gap:12px!important;
  }

  .gallery-grid > *,
  .life-grid > *,
  .showcase-grid > *,
  .masonry-grid > *{
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:220px!important;
    aspect-ratio:4/3;
  }

  .gallery-grid img,
  .life-grid img,
  .showcase-grid img,
  .masonry-grid img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  section{scroll-margin-top:84px}
}

@media (max-width: 620px){
  .container{
    width:auto!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .hero-actions,
  .hero-buttons,
  .cta-row{
    grid-template-columns:1fr!important;
  }

  .gallery-grid,
  .life-grid,
  .showcase-grid,
  .masonry-grid{
    grid-template-columns:1fr!important;
  }

  .gallery-grid > *,
  .life-grid > *,
  .showcase-grid > *,
  .masonry-grid > *{
    min-height:210px!important;
    max-height:310px!important;
    aspect-ratio:16/10;
    border-radius:20px!important;
  }

  .gallery-grid h3,
  .gallery-grid h2,
  .life-grid h3,
  .showcase-grid h3{
    font-size:20px!important;
    line-height:1.1!important;
  }

  .gallery-grid p,
  .life-grid p,
  .showcase-grid p{
    font-size:14px!important;
    line-height:1.45!important;
  }

  .btn{
    min-height:48px;
    padding:12px 16px!important;
  }

  h2{font-size:clamp(28px,9vw,40px)!important}

  .back-to-top,
  #backToTop{
    width:46px!important;
    height:46px!important;
    right:14px!important;
    bottom:14px!important;
  }
}