/* Offshore Hub shared header v18
   Correct fix:
   - Uses the uploaded header as a real image layer, not distorted CSS background
   - Preserves logo quality/aspect ratio
   - Keeps normal page width
   - Spreads language/live/CTA across the right-side area */
@media (min-width:901px){
  body.home-index .page,
  .page{
    width:min(1768px, calc(100vw - 36px)) !important;
    max-width:1768px !important;
    margin:18px auto 20px !important;
    border:1px solid rgba(0,137,216,.72) !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }

  .site-shell{
    width:min(1768px, calc(100vw - 36px)) !important;
    max-width:1768px !important;
    margin:18px auto 20px !important;
  }

  .oh-mock-header{
    position:relative !important;
    z-index:40 !important;
    padding:0 !important;
    margin:0 !important;
    background:#02070d !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,106,0,.86) !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .topnav,
  .oh-mock-frame{
    position:relative !important;
    isolation:isolate !important;
    display:grid !important;
    grid-template-columns: clamp(390px, 25.5vw, 455px) minmax(560px, 1.25fr) minmax(520px, .95fr) !important;
    align-items:center !important;
    gap:14px !important;
    width:100% !important;
    height:156px !important;
    min-height:156px !important;
    margin:0 !important;
    padding:0 34px !important;
    border:0 !important;
    border-radius:0 !important;
    background:#02070d !important;
    box-shadow:none !important;
    overflow:hidden !important;
    clip-path:none !important;
  }

  .topnav:before,
  .topnav:after,
  .oh-mock-frame:before,
  .oh-mock-frame:after{
    display:none !important;
    content:none !important;
    background:none !important;
  }

  .oh-header-frame-img{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    min-width:100% !important;
    transform:translate(-50%, -50%) !important;
    object-fit:contain !important;
    z-index:0 !important;
    pointer-events:none !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
  }

  .topnav > *:not(.oh-header-frame-img),
  .oh-mock-frame > *:not(.oh-header-frame-img){
    position:relative !important;
    z-index:2 !important;
  }

  /* The visual logo is part of the real image layer. This remains a clickable hit-area only. */
  .topnav .brand,
  .oh-mock-brand{
    display:block !important;
    width:clamp(400px, 28vw, 500px) !important;
    min-width:0 !important;
    height:124px !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    text-decoration:none !important;
    overflow:hidden !important;
  }

  .topnav .brand > *,
  .oh-mock-brand > *{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .oh-mock-brand:after{display:none !important;}

  .navlinks,
  .oh-mock-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-evenly !important;
    width:100% !important;
    height:60px !important;
    min-height:60px !important;
    gap:0 !important;
    padding:0 18px !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    clip-path:none !important;
    overflow:visible !important;
    transform:translateY(2px) !important;
  }

  .navlinks a,
  .oh-mock-nav a{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:52px !important;
    gap:9px !important;
    padding:0 17px !important;
    margin:0 !important;
    color:#eef4fb !important;
    font-size:13.5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    background:transparent !important;
    border-right:1px solid rgba(125,150,175,.30) !important;
    box-shadow:none !important;
  }

  .navlinks a:last-child,
  .oh-mock-nav a:last-child{border-right:0 !important;}

  .navlinks a.active,
  .navlinks a:hover,
  .oh-mock-nav a.active,
  .oh-mock-nav a:hover{
    color:#ff8a22 !important;
    background:rgba(255,106,0,.10) !important;
  }

  .navlinks a.active:after,
  .navlinks a:hover:after,
  .oh-mock-nav a.active:after,
  .oh-mock-nav a:hover:after{
    content:'' !important;
    position:absolute !important;
    left:50% !important;
    bottom:-9px !important;
    transform:translateX(-50%) !important;
    width:42px !important;
    height:3px !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,transparent,#ff6a00 18%,#ff9a2f 52%,transparent) !important;
    box-shadow:0 0 14px rgba(255,106,0,.72) !important;
  }

  .oh-mock-nav svg{width:19px !important;height:19px !important;}

  .head-actions,
  .oh-mock-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-evenly !important;
    gap:16px !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 34px 0 18px !important;
    transform:translate(-8px, 2px) !important;
  }

  .lang-switch,
  .oh-mock-lang{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    height:44px !important;
    min-height:44px !important;
    padding:4px !important;
    border:1px solid rgba(0,174,255,.68) !important;
    border-radius:10px !important;
    background:rgba(4,12,20,.94) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    flex:0 0 auto !important;
  }

  .lang-switch button,
  .oh-mock-lang button{
    height:32px !important;
    min-width:37px !important;
    padding:0 10px !important;
    border:0 !important;
    border-radius:8px !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:900 !important;
    background:transparent !important;
  }

  .lang-switch button.active,
  .lang-switch button:hover,
  .oh-mock-lang button.active,
  .oh-mock-lang button:hover{
    background:linear-gradient(180deg,#ff8d24,#ff6900) !important;
    color:#fff !important;
    box-shadow:0 0 12px rgba(255,106,0,.34) !important;
  }

  .live-pill,
  .oh-mock-live{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 17px !important;
    border:1px solid rgba(0,174,255,.72) !important;
    border-radius:10px !important;
    background:rgba(4,12,20,.94) !important;
    box-shadow:none !important;
    white-space:nowrap !important;
    font-size:13.5px !important;
    line-height:1 !important;
    flex:0 0 auto !important;
  }

  .live-pill b,
  .oh-mock-live b{font-size:14px !important;}

  .live-pill span.green,
  .oh-mock-live span{font-size:13.5px !important;font-weight:900 !important;}

  .cta,
  .oh-mock-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 22px !important;
    border-radius:10px !important;
    font-size:13.5px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    box-shadow:0 0 16px rgba(255,106,0,.28) !important;
    flex:0 0 auto !important;
  }

  .topnav + .hero,
  .oh-mock-header + .hero{margin-top:0 !important;}
}

@media (max-width:1300px) and (min-width:901px){
  .topnav,
  .oh-mock-frame{
    grid-template-columns:330px minmax(430px,1.1fr) minmax(410px,.9fr) !important;
    height:148px !important;
    min-height:148px !important;
    padding:0 24px !important;
    gap:8px !important;
  }

  .topnav .brand,
  .oh-mock-brand{
    width:340px !important;
    height:118px !important;
  }

  .navlinks,
  .oh-mock-nav{
    padding-left:20px !important;
  }

  .navlinks a,
  .oh-mock-nav a{
    padding:0 12px !important;
    font-size:13px !important;
  }

  .head-actions,
  .oh-mock-actions{
    min-width:350px !important;
    width:100% !important;
    min-width:0 !important;
    gap:10px !important;
    padding-right:10px !important;
    transform:translate(-6px, 2px) !important;
  }

  .live-pill,
  .oh-mock-live{padding:0 12px !important;}

  .cta,
  .oh-mock-cta{padding:0 16px !important;}
}


/* v18 shared size sync: same header and hero sizes across pages */
@media (min-width:901px){
  .topnav,
  .oh-mock-frame{
    height:156px !important;
    min-height:156px !important;
  }

  .hero{
    min-height:520px !important;
  }

  .hero-inner{
    min-height:520px !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 320px !important;
    gap:60px !important;
    align-items:center !important;
    padding:44px 54px 40px !important;
  }

  .stat-card{
    align-self:center !important;
    justify-self:end !important;
  }
}

@media (max-width:1100px){
  .hero{
    min-height:620px !important;
  }

  .hero-inner{
    min-height:620px !important;
  }
}

@media (max-width:800px){
  .topnav,
  .oh-mock-frame{
    height:auto !important;
    min-height:0 !important;
  }

  .hero{
    min-height:360px !important;
  }

  .hero-inner{
    min-height:360px !important;
    padding:24px !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
}