/* APX iPhone/mobile performance + menu v3 */
@media (max-width:1050px){
  .site-header{z-index:5000!important}
  .menu-toggle{
    display:flex!important; align-items:center!important; justify-content:center!important;
    width:44px!important; height:44px!important; padding:0!important;
    border:1px solid rgba(255,255,255,.38)!important; background:#071a13!important;
    position:relative!important; z-index:5002!important; cursor:pointer!important;
    touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important;
  }
  .menu-icon,.menu-icon:before,.menu-icon:after{
    display:block!important; width:20px!important; height:2px!important; border-radius:2px!important;
    background:#fff!important; content:""; position:absolute!important; left:50%!important;
    transform:translateX(-50%)!important; transition:transform .18s ease,opacity .12s ease!important;
  }
  .menu-icon{top:50%!important; margin-top:-1px!important}
  .menu-icon:before{top:-7px!important}
  .menu-icon:after{top:7px!important}
  .site-header.menu-open .menu-icon{background:transparent!important}
  .site-header.menu-open .menu-icon:before{top:0!important;transform:translateX(-50%) rotate(45deg)!important}
  .site-header.menu-open .menu-icon:after{top:0!important;transform:translateX(-50%) rotate(-45deg)!important}
  .site-header.menu-open>.main-nav{
    display:flex!important; position:fixed!important; z-index:5001!important;
    top:76px!important; left:0!important; right:0!important; bottom:0!important;
    width:auto!important; height:auto!important; margin:0!important;
    padding:12px 24px calc(24px + env(safe-area-inset-bottom))!important;
    background:#06140f!important; flex-direction:column!important; justify-content:flex-start!important;
    align-items:stretch!important; gap:0!important; overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important;
  }
  .site-header.menu-open>.main-nav>a{
    display:flex!important; align-items:center!important; width:100%!important; min-height:58px!important;
    padding:14px 0!important; margin:0!important; border-bottom:1px solid rgba(255,255,255,.13)!important;
    color:#fff!important; font-size:15px!important; line-height:1.2!important; letter-spacing:.1em!important;
    text-transform:uppercase!important; touch-action:manipulation!important;
  }
  .site-header.menu-open>.main-nav>a:after{display:none!important}
  body.menu-lock{overflow:hidden!important; overscroll-behavior:none!important}
}

@media (max-width:760px){
  html{scroll-behavior:auto!important}
  body{overflow-x:hidden!important}
  .topline{display:none!important}
  .site-header{
    height:76px!important; padding:0 18px!important; top:0!important;
    background:#06140f!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
    transform:none!important; will-change:auto!important;
  }
  .brand{gap:10px!important}
  .brand-emblem{width:44px!important;height:48px!important}
  .brand-wordmark{width:82px!important;height:auto!important}
  .main-nav,.header-cta{display:none!important}
  .site-header.menu-open>.main-nav{display:flex!important}

  /* Keep Safari out of expensive compositing paths. */
  .hero:after{filter:none!important}
  .hero:before,.hero:after,.hero-content,.hero-finale,.hero-finale-emblem,
  .equipment-visual--photo img,.equipment-card>button{
    transition:none!important; animation:none!important; will-change:auto!important;
  }
  .hero{
    height:100svh!important; min-height:640px!important; max-height:none!important;
    background-position:58% top!important;
  }
  .hero-video{
    top:76px!important; height:calc(100% - 76px)!important; object-position:58% top!important;
    transform:none!important; will-change:auto!important; -webkit-transform:none!important;
  }
  .hero-video-status i:after{animation-duration:1.6s!important}
  .hero-finale{
    left:14px!important; right:14px!important; width:auto!important; top:88px!important; bottom:14px!important;
    max-height:none!important; padding:22px 18px!important; transform:none!important; overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
    box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
  }
  .hero.story-ended .hero-finale{transform:none!important}
  .hero-finale h2{font-size:clamp(31px,9.4vw,42px)!important;line-height:.96!important}
  .hero-finale>p{margin-bottom:12px!important}
  .hero-finale>span{margin:10px 0 12px!important;font-size:11px!important;line-height:1.45!important}
  .hero-form-grid{grid-template-columns:1fr!important;gap:7px!important;margin-bottom:12px!important}
  .hero-form-grid label:last-child{grid-column:auto!important}
  .hero-form-grid input,.hero-form-grid select{height:34px!important;margin-top:2px!important;padding:4px 0!important;font-size:12px!important}
  .hero-finale .button{min-height:44px!important;padding:0 12px!important;font-size:8px!important}
  .hero-finale-emblem{display:none!important}

  /* Native touch: remove desktop hover/compositing effects. */
  .equipment-card:hover .equipment-visual--photo img{transform:none!important}
  .equipment-modal{align-items:end!important;padding:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(1,11,7,.92)!important}
  .equipment-dialog{grid-template-columns:1fr!important;max-height:94svh!important;box-shadow:none!important}
  .equipment-dialog-head{min-height:360px!important;padding:220px 24px 26px!important}
  .equipment-dialog-product{height:180px!important;top:18px!important;left:18px!important;right:18px!important}
  .equipment-order-emblem{height:86px!important;margin-top:12px!important}
  .equipment-order-form{padding:30px 22px 26px!important}
  .equipment-order-grid{grid-template-columns:1fr!important;gap:0!important}

  .section-pad{padding-left:18px!important;padding-right:18px!important}
  .button,a,button{touch-action:manipulation}
}

/* Extra iOS-only reductions. This class is set by apx-lite.js. */
html.ios .site-header,html.ios .hero-finale,html.ios .equipment-modal{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important
}
html.ios .hero:after{filter:none!important}
html.ios .hero-video{will-change:auto!important}
html.ios body{-webkit-font-smoothing:antialiased}

@media (max-width:390px){
  .site-header{padding:0 14px!important}
  .brand-wordmark{width:78px!important}
  .site-header.menu-open>.main-nav{padding-left:20px!important;padding-right:20px!important}
  .site-header.menu-open>.main-nav>a{min-height:54px!important;font-size:14px!important}
  .hero-finale{left:10px!important;right:10px!important;padding:18px 15px!important}
  .hero-finale h2{font-size:30px!important}
}

/* APX mobile finale v4 — static embossed background + transparent form.
   Header/menu rules above are intentionally left unchanged. */
@media (max-width:760px){
  .hero.story-ended{
    height:100svh!important;
    min-height:820px!important;
    max-height:none!important;
    background-color:#03130e!important;
    background-image:url('/apx-mobile-finale-bg.webp')!important;
    background-repeat:no-repeat!important;
    background-size:100% auto!important;
    background-position:center 76px!important;
    overflow:hidden!important;
  }

  /* Once the intro ends, show the supplied APX image itself — no stretching,
     blur or extra emblem layer. */
  .hero.story-ended .hero-video,
  .hero.story-ended .hero-video-status{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .hero.story-ended:before,
  .hero.story-ended:after{
    display:none!important;
    content:none!important;
  }
  .hero.story-ended .hero-finale-emblem{display:none!important}

  /* Place the existing form over the lower part of the image. The form panel
     itself is transparent; only the fields/text/button remain visible. */
  .hero.story-ended .hero-finale{
    display:block!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:absolute!important;
    top:max(360px,49svh)!important;
    left:20px!important;
    right:20px!important;
    bottom:auto!important;
    width:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
    transform:none!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .hero.story-ended .hero-finale>p{margin:0 0 14px!important}
  .hero.story-ended .hero-finale h2{
    margin:0!important;
    font-size:clamp(38px,11.4vw,48px)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
    text-shadow:0 1px 2px rgba(0,0,0,.22)!important;
  }
  .hero.story-ended .hero-finale>span{
    margin:14px 0 16px!important;
    font-size:12px!important;
    line-height:1.55!important;
    color:rgba(255,255,255,.66)!important;
  }
  .hero.story-ended .hero-form-grid{
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-bottom:16px!important;
  }
  .hero.story-ended .hero-form-grid label:last-child{grid-column:auto!important}
  .hero.story-ended .hero-form-grid input,
  .hero.story-ended .hero-form-grid select{
    height:42px!important;
    margin-top:3px!important;
    padding:7px 0!important;
    font-size:13px!important;
    background:transparent!important;
  }
  .hero.story-ended .hero-finale .button{
    min-height:54px!important;
    padding:0 16px!important;
    font-size:8px!important;
  }
}

@media (max-width:390px){
  .hero.story-ended{min-height:790px!important}
  .hero.story-ended .hero-finale{
    top:max(345px,48svh)!important;
    left:18px!important;
    right:18px!important;
  }
  .hero.story-ended .hero-finale h2{font-size:36px!important}
  .hero.story-ended .hero-finale>span{font-size:11px!important}
}