/* 5PACE v29 — phone sections. Everything is inside max-width:820px; desktop is untouched.
   The page moves section by section (AIT-VISTA film scenes + Mission, Features, Roadmap, Team, Articles, Contact).
   A section taller than the screen becomes its own native scroller (momentum and all): you read it freely,
   and at its end the next swipe carries you to the next section. */
@media (max-width:820px){
  html.native-scroll.m29 #features,html.native-scroll.m29 #roadmap,html.native-scroll.m29 #team,
  html.native-scroll.m29 #offer,html.native-scroll.m29 #articles,html.native-scroll.m29 #contact{
    box-sizing:border-box;height:100svh!important;min-height:0!important;max-height:100svh;overflow-y:auto;overflow-x:hidden;
  }
  html.m29 .m29-scroll{height:100svh!important;min-height:0!important;max-height:100svh;overflow-y:auto!important;overflow-x:hidden;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start!important;
    }
  /* ids: outranks the v28 "chapters hug their content" padding */
  html.m29 #features.m29-scroll,html.m29 #roadmap.m29-scroll,html.m29 #team.m29-scroll,html.m29 #articles.m29-scroll{padding-bottom:calc(var(--bar) + 52px + env(safe-area-inset-bottom))!important}
  html.m29 .m29-scroll::-webkit-scrollbar{display:none}
  html.m29 .m29-scroll>*{flex-shrink:0}

  /* the Contact bar is an overlay at all times (film, chapters, Contact) */
  html.m29 .mbar,html.m29 .mbar.away{opacity:1;transform:none;pointer-events:auto}
  /* film captions + the scroll cue sit above the bar */
  html.m29 .cp:not(#capH) .cw{padding-bottom:calc(var(--bar) + 46px + env(safe-area-inset-bottom))}
  html.m29 .nextarrow{bottom:calc(var(--bar) + 4px + env(safe-area-inset-bottom))}
  /* the footer's last line clears the bar */
  html.m29 .site-footer{padding-bottom:calc(var(--bar) + 18px + env(safe-area-inset-bottom))!important}

  /* phone menu = the phone sections (Mission lives inside AIT-VISTA); numbers follow the visible items */
  html.m29 #mmenu ul{counter-reset:m29}
  html.m29 #mmenu li.m29-hide{display:none}
  html.m29 #mmenu li a{counter-increment:m29}
  html.m29 #mmenu li a small{font-size:0!important;letter-spacing:0}
  html.m29 #mmenu li a small::after{content:counter(m29,decimal-leading-zero);font:500 11px var(--font-mono);letter-spacing:.14em}
  html.m29 #mmenu li a.on{color:#ADD8E6}

  /* side dots: one per phone section, a little more air between them */
  html.m29 .dots{gap:4px}
  html.m29 .dots button{height:22px}
}
@media (max-width:820px){
  /* the always-on bar keeps one line on the narrowest phones */
  html.m29 .mbar .btn{white-space:nowrap}
}
@media (max-width:359px){
  html.m29 .mbar{padding-left:14px;gap:8px}
  html.m29 .mbar span{font-size:9.5px;letter-spacing:.08em}
  html.m29 .mbar .btn{padding:10px 16px}
}
@media (max-width:820px) and (max-height:620px){
  /* very short phones: the hero subtitle needs the arrow's lane (the swipe still steps the film) */
  html.m29 .nextarrow{display:none}
}