/* Offshore Hub Desktop Completion v8
   Frame + header/hero consistency:
   - one outer page frame, not a boxed header/footer
   - top/bottom lines run straight to the same side frame
   - identical desktop header height across pages
   - identical hero height rhythm across desktop pages
*/
@media (min-width: 901px){
  :root{
    --oh-v8-cyan: rgba(0,150,215,.92);
    --oh-v8-cyan-soft: rgba(0,150,215,.42);
    --oh-v8-orange: rgba(255,106,0,.72);
    --oh-header-h: 154px;
    --oh-hero-h: 455px;
  }

  html, body{
    background:#01060b!important;
  }

  /* One continuous outer frame. No header/footer boxes decide the frame anymore. */
  body .page,
  body.home-index .page,
  body.jobs-page .page,
  body.news-page .page,
  body.about-page .page,
  body.contact-page .page,
  body.legal-page .page,
  body .site-shell{
    position:relative!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:
      linear-gradient(var(--oh-v8-cyan),var(--oh-v8-cyan)) top left / 100% 1px no-repeat,
      linear-gradient(var(--oh-v8-cyan),var(--oh-v8-cyan)) bottom left / 100% 1px no-repeat,
      linear-gradient(var(--oh-v8-cyan),var(--oh-v8-cyan)) top left / 1px 100% no-repeat,
      linear-gradient(var(--oh-v8-cyan),var(--oh-v8-cyan)) top right / 1px 100% no-repeat,
      rgba(2,12,21,.98)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 32px 100px rgba(0,0,0,.58),
      0 0 40px rgba(0,120,255,.11)!important;
  }

  /* Old vertical pseudo-lines are removed so the frame is not doubled. */
  body .page::before,
  body .page::after,
  body .site-shell::before,
  body .site-shell::after{
    content:none!important;
    display:none!important;
  }

  /* Header uses a fixed height on every desktop page. */
  body header.oh-mock-header,
  body .oh-mock-header,
  body .page > header.topnav,
  body .site-shell > header.topnav{
    height:var(--oh-header-h)!important;
    min-height:var(--oh-header-h)!important;
    max-height:var(--oh-header-h)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#02070d!important;
    overflow:hidden!important;
    position:relative!important;
    box-shadow:none!important;
  }

  /* Explicit top line across the full page width. It connects to the side lines. */
  body header.oh-mock-header::before,
  body .oh-mock-header::before,
  body .page > header.topnav::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:0!important;
    height:1px!important;
    background:var(--oh-v8-cyan)!important;
    box-shadow:0 0 14px rgba(0,150,215,.30)!important;
    z-index:8!important;
    pointer-events:none!important;
  }

  body header.oh-mock-header::after,
  body .oh-mock-header::after,
  body .page > header.topnav::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:1px!important;
    background:linear-gradient(90deg,var(--oh-v8-cyan-soft),var(--oh-v8-orange),var(--oh-v8-cyan-soft))!important;
    z-index:8!important;
    pointer-events:none!important;
  }

  body .oh-mock-header .oh-mock-frame,
  body .page .oh-mock-frame,
  body .page > header.topnav,
  body .site-shell > header.topnav{
    height:var(--oh-header-h)!important;
    min-height:var(--oh-header-h)!important;
    max-height:var(--oh-header-h)!important;
    margin:0!important;
    padding:0 30px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:hidden!important;
    box-shadow:none!important;
    outline:0!important;
    align-items:center!important;
  }

  /* Decorative header image stays decorative only, never the page frame. */
  body .oh-header-frame-img{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:calc(100% - 46px)!important;
    height:calc(var(--oh-header-h) - 28px)!important;
    max-width:none!important;
    min-width:0!important;
    object-fit:fill!important;
    transform:translate(-50%,-50%)!important;
    opacity:.96!important;
    z-index:0!important;
    pointer-events:none!important;
  }

  body .oh-mock-brand,
  body .oh-mock-nav,
  body .oh-mock-actions,
  body .topnav .brand,
  body .topnav .navlinks,
  body .topnav .head-actions{
    position:relative!important;
    z-index:2!important;
  }

  /* Same hero height/rhythm on all desktop pages. */
  body .page > section.hero,
  body .page .hero,
  body.home-index .page > section.hero,
  body.jobs-page .page > section.hero,
  body.news-page .page > section.hero,
  body.about-page .page > section.hero,
  body.contact-page .page > section.hero{
    height:var(--oh-hero-h)!important;
    min-height:var(--oh-hero-h)!important;
    max-height:var(--oh-hero-h)!important;
    margin:0!important;
    border-top:0!important;
    border-bottom:1px solid rgba(0,150,215,.42)!important;
    overflow:hidden!important;
  }

  body .hero-inner{
    height:100%!important;
    min-height:0!important;
    padding-top:48px!important;
    padding-bottom:48px!important;
    align-items:center!important;
  }

  body .hero h1{
    font-size:clamp(46px,4.5vw,76px)!important;
    line-height:.98!important;
  }

  body .hero p{
    max-width:760px!important;
  }

  /* Footer is inside the outer frame, not a separate cyan box. */
  body .footer,
  body .bottom,
  body .bottom.oh-footer-credit{
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body .footer{
    border-top:1px solid rgba(0,150,215,.28)!important;
  }
  body .bottom,
  body .bottom.oh-footer-credit{
    border-bottom:0!important;
  }
}

@media (min-width:901px) and (max-width:1400px){
  :root{
    --oh-header-h: 142px;
    --oh-hero-h: 430px;
  }
  body .oh-mock-header .oh-mock-frame,
  body .page .oh-mock-frame,
  body .page > header.topnav,
  body .site-shell > header.topnav{
    padding-left:22px!important;
    padding-right:22px!important;
  }
  body .oh-header-frame-img{
    width:calc(100% - 34px)!important;
    height:calc(var(--oh-header-h) - 24px)!important;
  }
}