/* KOKIO Home mobile horizontal journey. Native touch scrolling owns movement; GSAP only decorates panel content. */
@media(max-width:767px){
  body.page-id-15{--kokio-mobile-header-h:72px;--kokio-mobile-panel-h:calc(100svh - var(--kokio-mobile-header-h));}

  body.page-id-15 #brx-content{
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:100%!important;
    height:var(--kokio-mobile-panel-h)!important;
    min-height:var(--kokio-mobile-panel-h)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x pan-y;
    background:#030507!important;
  }
  body.page-id-15 #brx-content::-webkit-scrollbar{display:none}

  /* Retire the old vertical phone rail: the glowing bottom rail owns progress now. */
  body.page-id-15 .km-scroll-signal{display:none!important}

  /* Capability rail is redundant in the swipe version; hero signals already communicate the same idea. */
  body.page-id-15 #brxe-hm1501{display:none!important}

  body.page-id-15 #brx-content>section:not(#brxe-hm1501){
    position:relative!important;
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  body.page-id-15 #brx-content>section:not(#brxe-hm1501)>.brxe-container{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.page-id-15 #brxe-hm1001,
  body.page-id-15 #brxe-hm5001{
    display:flex!important;
    align-items:center!important;
  }

  body.page-id-15 #brxe-hm1001{padding-top:34px!important;padding-bottom:34px!important}
  body.page-id-15 #brxe-hm2001,
  body.page-id-15 #brxe-hm3001,
  body.page-id-15 #brxe-hm4001{padding-top:46px!important;padding-bottom:72px!important}
  body.page-id-15 #brxe-hm5001{padding-top:46px!important;padding-bottom:68px!important}

  body.page-id-15 #brxe-hm1002,
  body.page-id-15 #brxe-hm5002{min-height:0!important}

  body.page-id-15.kokio-mobile-home-at-end #brx-content{overscroll-behavior-y:auto}
  body.page-id-15.kokio-mobile-home-at-end #brxe-hm5001{overscroll-behavior-y:auto}

  /* Glowing horizontal journey progress. */
  .kokio-mobile-home-progress{
    position:fixed;
    left:16px;
    right:16px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    z-index:9992;
    height:2px;
    pointer-events:none;
    background:#241719;
    opacity:1;
    transition:opacity .22s ease;
  }
  .kokio-mobile-home-progress:before{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:14px;
    transform:translateY(-2px);
    background:linear-gradient(to top,rgba(143,17,23,.14),transparent 82%);
  }
  .kokio-mobile-home-progress-fill{
    position:absolute;
    inset:0;
    transform:scaleX(.2);
    transform-origin:left center;
    background:linear-gradient(90deg,#451015 0%,#8F1117 24%,#EC1E24 62%,#FF4A4F 84%,#FFF4CB 100%);
    box-shadow:0 0 10px rgba(236,30,36,.52),0 0 24px rgba(255,74,79,.24);
    will-change:transform;
  }
  .kokio-mobile-home-progress-fill:after{
    content:"";
    position:absolute;
    right:-15px;
    top:50%;
    width:34px;
    height:10px;
    transform:translateY(-50%);
    background:radial-gradient(circle,rgba(255,244,203,.72) 0%,rgba(255,74,79,.32) 35%,transparent 72%);
    filter:blur(2px);
  }
  body.page-id-15.kokio-mobile-home-footer-view .kokio-mobile-home-progress{opacity:0}
}

@media(max-width:390px){
  body.page-id-15 #brx-content>section:not(#brxe-hm1501)>.brxe-container{width:calc(100% - 28px)!important}
  body.page-id-15 #brxe-hm2001,
  body.page-id-15 #brxe-hm3001,
  body.page-id-15 #brxe-hm4001{padding-top:40px!important;padding-bottom:66px!important}
  .kokio-mobile-home-progress{left:14px;right:14px}
}

@media(prefers-reduced-motion:reduce){
  body.page-id-15 #brx-content{scroll-behavior:auto!important}
  .kokio-mobile-home-progress{transition:none!important}
}