/* =========================================================
   MJE V125 — TRUE MOBILE HEADER + HERO POLISH
   2026-09-04

   This file intentionally loads after every legacy inline
   style block. Desktop remains unchanged.
   ========================================================= */

.kicker-mobile,
.mobile-language-panel{
  display:none;
}

@media (max-width:900px){
  html{
    scroll-padding-top:72px;
  }

  /* Reduce the oversized mobile crop without changing the artwork. */
  body::before{
    background-color:#02040b !important;
    background-position:center 44px !important;
    background-repeat:no-repeat !important;
    background-size:auto clamp(620px,78svh,700px) !important;
  }

  /* One clean row: centered logo with the menu anchored right. */
  .site-header{
    min-height:66px !important;
    padding:0 !important;
    background:rgba(2,7,13,.965) !important;
    border-bottom:1px solid rgba(226,189,85,.18) !important;
    backdrop-filter:blur(9px) !important;
    -webkit-backdrop-filter:blur(9px) !important;
  }
  .site-header .container.nav,
  .site-header .nav{
    width:100% !important;
    max-width:none !important;
    height:66px !important;
    min-height:66px !important;
    margin:0 !important;
    padding:6px 12px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 48px !important;
    grid-template-areas:"brand menu" !important;
    align-items:center !important;
    column-gap:10px !important;
    overflow:visible !important;
  }
  .site-header .mj-logo-system-header{
    display:none !important;
  }
  .site-header .logo{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    width:auto !important;
    max-width:calc(100% - 72px) !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center !important;
  }
  .site-header .logo-img{
    display:block !important;
    width:clamp(190px,56vw,220px) !important;
    max-width:220px !important;
    height:auto !important;
    max-height:54px !important;
    object-fit:contain !important;
    mix-blend-mode:screen !important;
    filter:contrast(1.08) saturate(1.06) drop-shadow(0 0 9px rgba(226,174,61,.28)) !important;
  }
  .site-header .mobile-native-menu{
    grid-column:2 !important;
    grid-row:1 !important;
    display:block !important;
    position:relative !important;
    margin:0 !important;
    padding:0 !important;
    justify-self:end !important;
    z-index:3 !important;
  }
  .site-header .mje-clean-menu-toggle{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    padding:5px 3px !important;
    border:1px solid rgba(104,232,255,.42) !important;
    border-radius:14px !important;
    background:linear-gradient(145deg,rgba(5,18,29,.96),rgba(5,8,13,.98)) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    color:#efc96d !important;
    font-size:9px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }
  .site-header .mje-clean-menu-toggle .native-menu-bars,
  .site-header .mje-clean-menu-toggle .native-menu-bars i{
    width:21px !important;
  }

  /* The desktop selector no longer consumes a second header row. */
  .site-header > .container.nav > .language-toggle{
    display:none !important;
  }
  .site-header > .container.nav > .neon-btn{
    display:none !important;
  }

  /* Stable full-width mobile menu with language controls inside it. */
  .site-header .mobile-native-links{
    position:fixed !important;
    top:72px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:calc(100dvh - 84px) !important;
    padding:10px !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    border:1px solid rgba(226,189,85,.34) !important;
    border-radius:16px !important;
    background:rgba(3,8,14,.985) !important;
    box-shadow:0 22px 55px rgba(0,0,0,.58) !important;
  }
  .site-header .mobile-native-links > a{
    min-height:42px !important;
    padding:10px 12px !important;
    display:flex !important;
    align-items:center !important;
    border-radius:10px !important;
  }
  .mobile-language-panel{
    display:block !important;
    margin-top:7px !important;
    padding:12px 2px 2px !important;
    border-top:1px solid rgba(226,189,85,.22) !important;
  }
  .mobile-language-title{
    display:block !important;
    margin:0 0 8px 3px !important;
    color:#e8c76d !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
  }
  .mobile-language-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .mobile-language-grid > button{
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 5px !important;
    border:1px solid rgba(226,189,85,.34) !important;
    border-radius:10px !important;
    background:rgba(226,189,85,.07) !important;
    color:#f7f1df !important;
    font:800 11px/1.1 Montserrat,Arial,sans-serif !important;
  }
  .mobile-language-grid > button.active{
    background:linear-gradient(135deg,#ffe29a,#dca73e) !important;
    color:#07101f !important;
  }
  .mobile-more-languages{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:9px !important;
    min-height:40px !important;
    padding:5px 7px 5px 11px !important;
    border:1px solid rgba(104,232,255,.28) !important;
    border-radius:10px !important;
    background:rgba(0,200,255,.055) !important;
    color:#e6f8ff !important;
    font-size:11px !important;
    font-weight:800 !important;
  }
  .mobile-more-languages select{
    width:100% !important;
    min-width:0 !important;
    min-height:32px !important;
    padding:5px 28px 5px 9px !important;
    border:0 !important;
    border-radius:8px !important;
    background:#091522 !important;
    color:#f8dc91 !important;
    font:800 11px/1 Montserrat,Arial,sans-serif !important;
  }

  /* Match the page offset to the true one-row header. */
  .page,
  #home.page{
    padding-top:66px !important;
  }

  /* Shorter, clearer first screen while preserving the artwork. */
  #home .hero{
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:78px 0 26px !important;
    overflow:visible !important;
  }
  #home .hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    height:auto !important;
    background:linear-gradient(180deg,rgba(1,4,12,.03),rgba(1,4,12,.22) 34%,rgba(1,4,12,.72) 100%) !important;
    pointer-events:none !important;
    z-index:0 !important;
  }
  #home .hero > .container{
    position:relative !important;
    z-index:1 !important;
    width:calc(100% - 24px) !important;
    max-width:560px !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
  }
  #home .hero > .container > .hero-content.mje-conversion-hero,
  #home .hero-content{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 5px !important;
    transform:none !important;
    text-align:center !important;
  }
  #home .hero .kicker{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    margin:0 auto 12px !important;
    padding:6px 10px !important;
    font-size:9px !important;
    line-height:1.2 !important;
    letter-spacing:.055em !important;
    white-space:nowrap !important;
  }
  #home .hero .kicker-desktop{
    display:none !important;
  }
  #home .hero .kicker-mobile{
    display:inline !important;
  }
  #home .hero h1.hero-two-line-title{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 11px !important;
    padding:0 !important;
    font-size:clamp(27px,8.3vw,34px) !important;
    line-height:1.04 !important;
    letter-spacing:-.025em !important;
    white-space:normal !important;
    text-align:center !important;
  }
  #home .hero h1.hero-two-line-title > .safe-hero-line,
  #home .hero h1.hero-two-line-title > .safe-trust-line{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    white-space:nowrap !important;
    line-height:1.04 !important;
  }
  #home .hero .hero-copy-desktop{
    display:none !important;
  }
  #home .hero .hero-copy-mobile,
  #home .hero > .container > .hero-content.mje-conversion-hero > p.hero-copy-mobile{
    display:block !important;
    max-width:344px !important;
    margin:0 auto 14px !important;
    font-size:14px !important;
    line-height:1.45 !important;
    color:#f4f7ff !important;
    text-align:center !important;
  }
  #home .hero .cta-row{
    width:min(100%,344px) !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  #home .hero .cta-row .neon-btn{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:44px !important;
    margin:0 !important;
    padding:8px 12px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }

  /* Keep the owl visible and deliberately inset from the phone edge. */
  .mj-companion-logo-floating{
    right:12px !important;
    bottom:14px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    padding:2px !important;
  }
  .mj-orb-wrap{
    right:12px !important;
    bottom:14px !important;
  }
  .mj-orb-wrap .bot-orb{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    font-size:21px !important;
  }
  .mj-orb-label{
    display:none !important;
  }
  .mj-assistant-panel{
    left:10px !important;
    right:10px !important;
    bottom:62px !important;
    width:auto !important;
    max-width:none !important;
  }
}

@media (max-width:430px){
  .site-header,
  .site-header .container.nav,
  .site-header .nav{
    height:64px !important;
    min-height:64px !important;
  }
  .site-header .container.nav,
  .site-header .nav{
    grid-template-columns:minmax(0,1fr) 46px !important;
    padding:5px 10px !important;
  }
  .site-header .logo-img{
    width:clamp(184px,55vw,214px) !important;
    max-width:214px !important;
    max-height:52px !important;
  }
  .site-header .mje-clean-menu-toggle{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    border-radius:13px !important;
  }
  .site-header .mobile-native-links{
    top:70px !important;
    max-height:calc(100dvh - 82px) !important;
  }
  .page,
  #home.page{
    padding-top:64px !important;
  }
  #home .hero{
    padding-top:68px !important;
    padding-bottom:22px !important;
  }
  #home .hero .kicker{
    font-size:8.5px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  #home .hero h1.hero-two-line-title{
    font-size:clamp(27px,8.1vw,33px) !important;
  }
  #home .hero .hero-copy-mobile,
  #home .hero > .container > .hero-content.mje-conversion-hero > p.hero-copy-mobile,
  #home .hero .cta-row{
    max-width:326px !important;
  }
}

@media (max-width:350px){
  .site-header .logo-img{
    width:180px !important;
    max-width:180px !important;
  }
  #home .hero .kicker{
    width:100% !important;
    white-space:normal !important;
  }
  #home .hero h1.hero-two-line-title{
    font-size:27px !important;
  }
  #home .hero h1.hero-two-line-title > .safe-hero-line,
  #home .hero h1.hero-two-line-title > .safe-trust-line{
    white-space:normal !important;
  }
}