/* VAV mobile-only QA pass 5 — 2026-09-16. Desktop intentionally untouched. */
@media (max-width:900px){
  /* Hero: keep current top composition, enlarge hoodie + approved glass down to the scene edge. */
  .hero-product{
    width:132%!important;
    height:88%!important;
    right:-37%!important;
    top:24%!important;
    object-position:center!important;
  }
  .hero-media-backdrop{inset:7% -46% -19% -5%!important}
  .hero-media::after{inset:10% -49% -22% -13%!important}

  /* Production: desktop timeline grammar translated into a horizontal mobile timeline. */
  .production-section[data-vav-sequence] .flow-menu{
    left:18px!important;
    right:18px!important;
    bottom:4.8%!important;
    height:78px!important;
    min-height:78px!important;
    padding:25px 0 0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    scroll-snap-type:none!important;
  }
  .production-section[data-vav-sequence] .flow-menu::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    left:23px!important;
    right:23px!important;
    top:47px!important;
    bottom:auto!important;
    width:auto!important;
    height:1px!important;
    background:rgba(255,255,255,.34)!important;
  }
  .production-section[data-vav-sequence] .flow-item{
    position:relative!important;
    z-index:2!important;
    flex:0 0 46px!important;
    min-width:46px!important;
    width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
    border:1px solid rgba(255,255,255,.62)!important;
    border-radius:50%!important;
    background:#090a0a!important;
    color:rgba(255,255,255,.68)!important;
    opacity:1!important;
    box-shadow:none!important;
    transform:none!important;
    transition:background-color 240ms ease,border-color 240ms ease,color 240ms ease,transform 320ms cubic-bezier(.16,1,.3,1)!important;
  }
  .production-section[data-vav-sequence] .flow-item::before{display:none!important}
  .production-section[data-vav-sequence] .flow-item::after{
    content:attr(data-flow-title)!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:-24px!important;
    width:max-content!important;
    max-width:132px!important;
    transform:translateX(-50%) translateY(3px)!important;
    opacity:0!important;
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    text-transform:uppercase!important;
    color:#fff!important;
    pointer-events:none!important;
    transition:opacity 220ms ease,transform 320ms cubic-bezier(.16,1,.3,1)!important;
  }
  .production-section[data-vav-sequence] .flow-item.is-active{
    background:#fff!important;
    border-color:#fff!important;
    color:#111!important;
    transform:scale(1.08)!important;
  }
  .production-section[data-vav-sequence] .flow-item.is-active::after{
    opacity:1!important;
    transform:translateX(-50%) translateY(0)!important;
  }
  .production-section[data-vav-sequence] .flow-static{
    display:block!important;
    width:auto!important;
    padding:0!important;
    font-size:0!important;
    line-height:1!important;
    text-align:center!important;
  }
  .production-section[data-vav-sequence] .flow-number{
    display:block!important;
    font-size:9px!important;
    line-height:1!important;
    color:inherit!important;
  }
  .production-section[data-vav-sequence] .flow-title{display:none!important}

  /* Services: same horizontal line + circular stages, no raw rectangular pills. */
  .services-section[data-vav-sequence] .services-list{
    left:18px!important;
    right:18px!important;
    bottom:4.8%!important;
    width:auto!important;
    height:78px!important;
    min-height:78px!important;
    padding:25px 0 0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    scroll-snap-type:none!important;
  }
  .services-section[data-vav-sequence] .services-list::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    left:23px!important;
    right:23px!important;
    top:47px!important;
    bottom:auto!important;
    width:auto!important;
    height:1px!important;
    background:rgba(9,9,9,.24)!important;
  }
  .services-section[data-vav-sequence] .services-list article{
    position:relative!important;
    z-index:2!important;
    flex:0 0 46px!important;
    min-width:46px!important;
    width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
    border:1px solid rgba(9,9,9,.38)!important;
    border-radius:50%!important;
    background:#f0f1ef!important;
    color:rgba(9,9,9,.58)!important;
    opacity:1!important;
    box-shadow:none!important;
    transform:none!important;
    transition:background-color 240ms ease,border-color 240ms ease,color 240ms ease,transform 320ms cubic-bezier(.16,1,.3,1)!important;
  }
  .services-section[data-vav-sequence] .services-list article::after{display:none!important}
  .services-section[data-vav-sequence] .services-list article>span{
    display:block!important;
    font-size:9px!important;
    line-height:1!important;
    color:inherit!important;
  }
  .services-section[data-vav-sequence] .services-list article h3{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:-24px!important;
    width:max-content!important;
    max-width:145px!important;
    margin:0!important;
    transform:translateX(-50%) translateY(3px)!important;
    opacity:0!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:500!important;
    letter-spacing:.01em!important;
    text-transform:uppercase!important;
    color:#111!important;
    pointer-events:none!important;
    transition:opacity 220ms ease,transform 320ms cubic-bezier(.16,1,.3,1)!important;
  }
  .services-section[data-vav-sequence] .services-list article p{display:none!important}
  .services-section[data-vav-sequence] .services-list article.is-active{
    background:#111!important;
    border-color:#111!important;
    color:#fff!important;
    transform:scale(1.08)!important;
  }
  .services-section[data-vav-sequence] .services-list article.is-active h3{
    opacity:1!important;
    transform:translateX(-50%) translateY(0)!important;
  }

  /* Assortment: keep wheel/product untouched, only lower the selected item copy + CTA. */
  .assortment-section .preview-copy{
    top:65%!important;
  }
}

@media (max-width:420px){
  .hero-product{width:138%!important;height:90%!important;right:-41%!important;top:23%!important}
  .hero-media-backdrop{inset:7% -51% -21% -7%!important}
  .hero-media::after{inset:10% -54% -24% -15%!important}
  .production-section[data-vav-sequence] .flow-menu,
  .services-section[data-vav-sequence] .services-list{left:14px!important;right:14px!important}
  .production-section[data-vav-sequence] .flow-item,
  .services-section[data-vav-sequence] .services-list article{flex-basis:42px!important;min-width:42px!important;width:42px!important;height:42px!important;min-height:42px!important}
  .production-section[data-vav-sequence] .flow-menu::before,
  .services-section[data-vav-sequence] .services-list::before{left:21px!important;right:21px!important;top:45px!important}
  .assortment-section .preview-copy{top:66%!important}
}