/* Offshore Hub Background Uniform v3
   Consistent desktop background, full-width page frame lines and lighter hero image treatment. */
@media (min-width:901px){
  :root{
    --oh-uniform-body:#01070d;
    --oh-uniform-shell:#020b14;
    --oh-uniform-shell-2:#010810;
    --oh-uniform-panel:rgba(4,16,28,.94);
    --oh-uniform-panel-2:rgba(2,10,18,.97);
    --oh-uniform-line:rgba(0,137,216,.36);
  }

  html,
  body,
  body.home-index,
  body.jobs-page,
  body.news-page,
  body.about-page,
  body.contact-page,
  body.legal-page{
    background-color:var(--oh-uniform-body) !important;
    background-image:linear-gradient(180deg,#01070d 0%,#020b14 46%,#01070d 100%) !important;
    background-attachment:fixed !important;
  }

  /* Old side-ad guide pseudo elements and page-specific body glows made the gutters
     look different from page to page. Remove them and use only the body base above. */
  body::before,
  body::after{
    content:none !important;
    display:none !important;
    background:none !important;
    opacity:0 !important;
  }

  .page,
  .site-shell,
  body .page,
  body .site-shell,
  body.home-index .page,
  body.jobs-page .page,
  body.news-page .page,
  body.about-page .page,
  body.contact-page .page,
  body.legal-page .page{
    background:linear-gradient(180deg,var(--oh-uniform-shell) 0%,var(--oh-uniform-shell-2) 100%) !important;
    border-top:1px solid rgba(0,137,216,.82) !important;
    border-bottom:1px solid rgba(0,137,216,.82) !important;
    border-left:0 !important;
    border-right:0 !important;
    box-shadow:
      0 28px 86px rgba(0,0,0,.50),
      0 0 0 1px rgba(0,137,216,.18) inset,
      0 0 18px rgba(0,137,216,.10) !important;
  }

  header.oh-mock-header,
  header.oh-mock-header .oh-mock-frame,
  .topnav,
  body .oh-mock-header,
  body .oh-mock-frame{
    background:#02070d !important;
  }

  /* Unify all hero bands. Images can still be different, but the visible colour
     tone is now Offshore Hub navy/black instead of page-specific orange/brown/blue. */
  .hero,
  .legal-hero,
  body .hero,
  body .legal-hero,
  body.home-index .hero,
  body.jobs-page .hero,
  body.news-page .hero,
  body.about-page .hero,
  body.contact-page .hero,
  body.legal-page .legal-hero{
    background:#020912 !important;
    border-top-color:rgba(255,106,0,.42) !important;
    border-bottom-color:rgba(0,137,216,.24) !important;
    isolation:isolate !important;
  }

  .hero::before,
  .legal-hero::before,
  body .hero::before,
  body .legal-hero::before,
  body.home-index .hero::before,
  body.jobs-page .hero::before,
  body.news-page .hero::before,
  body.about-page .hero::before,
  body.contact-page .hero::before,
  body.legal-page .legal-hero::before{
    opacity:.95 !important;
    filter:brightness(.78) contrast(1.06) saturate(.90) hue-rotate(-2deg) !important;
    mix-blend-mode:normal !important;
  }

  .hero:hover::before,
  .legal-hero:hover::before,
  body .hero:hover::before,
  body .legal-hero:hover::before{
    opacity:.97 !important;
    filter:brightness(.82) contrast(1.07) saturate(.95) hue-rotate(-2deg) !important;
  }

  .hero::after,
  .legal-hero::after,
  body .hero::after,
  body .legal-hero::after,
  body.home-index .hero::after,
  body.jobs-page .hero::after,
  body.news-page .hero::after,
  body.about-page .hero::after,
  body.contact-page .hero::after,
  body.legal-page .legal-hero::after{
    background:
      linear-gradient(90deg,rgba(2,8,14,.90) 0%,rgba(2,8,14,.74) 34%,rgba(2,8,14,.46) 66%,rgba(2,8,14,.26) 100%),
      linear-gradient(180deg,rgba(2,8,14,.04) 0%,rgba(1,7,13,.46) 100%),
      radial-gradient(900px 360px at 74% 18%,rgba(0,137,216,.10),transparent 66%),
      radial-gradient(780px 380px at 92% 38%,rgba(255,106,0,.09),transparent 70%) !important;
  }

  /* Keep cards, strips and sections on the same dark panel tone even if older inline
     page styles try to inject warmer gradients. */
  .metrics,
  .metric-strip,
  .filters,
  .news-command,
  .news-toolbar,
  .box,
  .panel,
  .side-panel,
  .article-card,
  .legal-card,
  .toc,
  .feature-card,
  .sector-card,
  .story-card,
  .read-next-card,
  .oh-news-lead,
  .oh-news-mini,
  .oh-news-side-card,
  .jobs-table,
  .footer,
  body .metrics,
  body .filters,
  body .news-toolbar,
  body .box,
  body .panel,
  body .side-panel,
  body .article-card,
  body .footer{
    background-color:var(--oh-uniform-panel) !important;
  }

  .metrics,
  .metric-strip,
  .filters,
  .news-command,
  .news-toolbar,
  .box,
  .panel,
  .side-panel,
  .article-card,
  .legal-card,
  .toc,
  .feature-card,
  .story-card,
  .read-next-card,
  .oh-news-lead,
  .oh-news-mini,
  .oh-news-side-card,
  .jobs-table,
  .footer{
    background-image:linear-gradient(180deg,var(--oh-uniform-panel),var(--oh-uniform-panel-2)) !important;
    border-color:rgba(0,137,216,.26) !important;
  }

  .bottom,
  body .bottom{
    background:#01070d !important;
    border-color:rgba(0,137,216,.18) !important;
  }
}


/* v3 frame correction: the outer cyan frame should run across the full page at top and bottom,
   while the existing pseudo-elements keep the left/right vertical strokes. */
@media (min-width:901px){
  body .page,
  body .site-shell,
  body.home-index .page,
  body.jobs-page .page,
  body.news-page .page,
  body.about-page .page,
  body.contact-page .page,
  body.legal-page .page{
    border-top:1px solid rgba(0,137,216,.82) !important;
    border-bottom:1px solid rgba(0,137,216,.82) !important;
  }

  body .page::before,
  body .page::after,
  body .site-shell::before,
  body .site-shell::after{
    top:0 !important;
    bottom:0 !important;
    background:rgba(0,137,216,.86) !important;
  }

  body .hero::before,
  body .legal-hero::before{
    opacity:.95 !important;
    filter:brightness(.78) contrast(1.06) saturate(.90) hue-rotate(-2deg) !important;
  }

  body .hero:hover::before,
  body .legal-hero:hover::before{
    opacity:.97 !important;
    filter:brightness(.82) contrast(1.07) saturate(.95) hue-rotate(-2deg) !important;
  }

  body .hero::after,
  body .legal-hero::after{
    background:
      linear-gradient(90deg,rgba(2,8,14,.90) 0%,rgba(2,8,14,.74) 34%,rgba(2,8,14,.46) 66%,rgba(2,8,14,.26) 100%),
      linear-gradient(180deg,rgba(2,8,14,.04) 0%,rgba(1,7,13,.46) 100%),
      radial-gradient(900px 360px at 74% 18%,rgba(0,137,216,.10),transparent 66%),
      radial-gradient(780px 380px at 92% 38%,rgba(255,106,0,.09),transparent 70%) !important;
  }
}

/* v4 correction: stronger continuous outer frame and lighter hero image treatment.
   Keeps the common Offshore Hub base background, but lets the actual hero photos be visible. */
@media (min-width:901px){
  body .page,
  body .site-shell,
  body.home-index .page,
  body.jobs-page .page,
  body.news-page .page,
  body.about-page .page,
  body.contact-page .page,
  body.legal-page .page{
    position:relative !important;
    border:1px solid rgba(0,137,216,.78) !important;
    border-radius:0 !important;
    box-shadow:
      inset 0 1px 0 rgba(0,137,216,.42),
      inset 0 -1px 0 rgba(0,137,216,.42),
      0 28px 86px rgba(0,0,0,.50),
      0 0 0 1px rgba(0,137,216,.10) inset,
      0 0 18px rgba(0,137,216,.10) !important;
  }

  body .page::before,
  body .site-shell::before{
    left:-1px !important;
    width:1px !important;
    top:0 !important;
    bottom:0 !important;
    background:rgba(0,137,216,.86) !important;
  }

  body .page::after,
  body .site-shell::after{
    right:-1px !important;
    width:1px !important;
    top:0 !important;
    bottom:0 !important;
    background:rgba(0,137,216,.86) !important;
  }

  body .hero,
  body .legal-hero{
    overflow:hidden !important;
    background:#020912 !important;
  }

  body .hero::before,
  body .legal-hero::before{
    opacity:1 !important;
    filter:brightness(.98) contrast(1.04) saturate(1.02) !important;
  }

  body .hero:hover::before,
  body .legal-hero:hover::before{
    opacity:1 !important;
    filter:brightness(1.02) contrast(1.05) saturate(1.04) !important;
  }

  body .hero::after,
  body .legal-hero::after{
    background:
      linear-gradient(90deg,rgba(2,8,14,.74) 0%,rgba(2,8,14,.52) 34%,rgba(2,8,14,.24) 66%,rgba(2,8,14,.08) 100%),
      linear-gradient(180deg,rgba(2,8,14,.02) 0%,rgba(1,7,13,.24) 100%),
      radial-gradient(900px 360px at 74% 18%,rgba(0,137,216,.06),transparent 66%),
      radial-gradient(780px 380px at 92% 38%,rgba(255,106,0,.06),transparent 70%) !important;
  }

  body .hero h1,
  body .hero p,
  body .hero .eyebrow,
  body .legal-hero h1,
  body .legal-hero p,
  body .legal-hero .eyebrow{
    text-shadow:0 3px 18px rgba(0,0,0,.72),0 1px 2px rgba(0,0,0,.65) !important;
  }

  /* Remove remaining warm page edge glows from older styles while keeping a very subtle navy depth. */
  html,
  body,
  body.home-index,
  body.jobs-page,
  body.news-page,
  body.about-page,
  body.contact-page,
  body.legal-page{
    background-color:#01070d !important;
    background-image:
      radial-gradient(1000px 520px at 50% 0%,rgba(0,137,216,.055),transparent 72%),
      linear-gradient(180deg,#01070d 0%,#020b14 48%,#01070d 100%) !important;
  }
}

/* v5 frame alignment: one continuous outer frame from top to footer.
   This is intentionally loaded last and overrides the older v39/v4 frame helpers. */
@media (min-width:901px){
  body .page,
  body .site-shell,
  body.home-index .page,
  body.jobs-page .page,
  body.news-page .page,
  body.about-page .page,
  body.contact-page .page,
  body.legal-page .page{
    position:relative !important;
    border:0 !important;
    border-radius:0 !important;
    outline:1px solid rgba(0,137,216,.82) !important;
    outline-offset:0 !important;
    overflow:hidden !important;
    box-shadow:
      0 28px 86px rgba(0,0,0,.50),
      inset 0 1px 0 rgba(0,137,216,.80),
      inset 0 -1px 0 rgba(0,137,216,.80),
      inset 1px 0 0 rgba(0,137,216,.86),
      inset -1px 0 0 rgba(0,137,216,.86),
      0 0 18px rgba(0,137,216,.12) !important;
  }

  body .page::before,
  body .site-shell::before,
  body.home-index .page::before,
  body.jobs-page .page::before,
  body.news-page .page::before,
  body.about-page .page::before,
  body.contact-page .page::before,
  body.legal-page .page::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:1px !important;
    z-index:9998 !important;
    background:rgba(0,137,216,.90) !important;
    box-shadow:0 0 10px rgba(0,137,216,.30) !important;
    pointer-events:none !important;
  }

  body .page::after,
  body .site-shell::after,
  body.home-index .page::after,
  body.jobs-page .page::after,
  body.news-page .page::after,
  body.about-page .page::after,
  body.contact-page .page::after,
  body.legal-page .page::after{
    content:"" !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:1px !important;
    z-index:9998 !important;
    background:rgba(0,137,216,.90) !important;
    box-shadow:0 0 10px rgba(0,137,216,.30) !important;
    pointer-events:none !important;
  }

  body .page > header.oh-mock-header,
  body .site-shell > header.oh-mock-header{
    position:relative !important;
    border-top:0 !important;
  }

  body .page > header.oh-mock-header::before,
  body .site-shell > header.oh-mock-header::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    height:1px !important;
    z-index:9999 !important;
    background:rgba(0,137,216,.92) !important;
    box-shadow:0 0 10px rgba(0,137,216,.32) !important;
    pointer-events:none !important;
  }

  body .page > .bottom,
  body .site-shell > .bottom,
  body .page > .oh-footer-credit,
  body .site-shell > .oh-footer-credit,
  body .page > footer.footer,
  body .site-shell > footer.footer,
  body .page > footer.site-footer,
  body .site-shell > footer.site-footer{
    position:relative !important;
  }

  body .page > .bottom::after,
  body .site-shell > .bottom::after,
  body .page > .oh-footer-credit::after,
  body .site-shell > .oh-footer-credit::after,
  body .page > footer.footer::after,
  body .site-shell > footer.footer::after,
  body .page > footer.site-footer::after,
  body .site-shell > footer.site-footer::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:1px !important;
    z-index:9999 !important;
    background:rgba(0,137,216,.88) !important;
    box-shadow:0 0 10px rgba(0,137,216,.28) !important;
    pointer-events:none !important;
  }

  /* Hero should be readable, but the image must still be visible. */
  body .hero::before,
  body .legal-hero::before{
    opacity:1 !important;
    filter:brightness(1.06) contrast(1.03) saturate(1.05) !important;
  }

  body .hero:hover::before,
  body .legal-hero:hover::before{
    opacity:1 !important;
    filter:brightness(1.10) contrast(1.04) saturate(1.08) !important;
  }

  body .hero::after,
  body .legal-hero::after{
    background:
      linear-gradient(90deg,rgba(2,8,14,.68) 0%,rgba(2,8,14,.46) 34%,rgba(2,8,14,.18) 66%,rgba(2,8,14,.04) 100%),
      linear-gradient(180deg,rgba(2,8,14,.00) 0%,rgba(1,7,13,.18) 100%),
      radial-gradient(900px 360px at 74% 18%,rgba(0,137,216,.04),transparent 66%),
      radial-gradient(780px 380px at 92% 38%,rgba(255,106,0,.045),transparent 70%) !important;
  }
}

/* v6 frame alignment correction: the visible top/bottom frame must belong to the
   outer page itself, not the decorative header image. This keeps the footer fix,
   but moves the top stroke to the absolute page edge so it runs from side line
   to side line. */
@media (min-width:901px){
  html body .page,
  html body .site-shell,
  html body.home-index .page,
  html body.jobs-page .page,
  html body.news-page .page,
  html body.about-page .page,
  html body.contact-page .page,
  html body.legal-page .page{
    position:relative !important;
    overflow:hidden !important;
    border-top:0 !important;
    border-bottom:0 !important;
    border-left:1px solid rgba(0,137,216,.88) !important;
    border-right:1px solid rgba(0,137,216,.88) !important;
    outline:0 !important;
    box-shadow:
      0 28px 86px rgba(0,0,0,.50),
      inset 1px 0 0 rgba(0,137,216,.72),
      inset -1px 0 0 rgba(0,137,216,.72),
      0 0 18px rgba(0,137,216,.12) !important;
  }

  html body .page::before,
  html body .site-shell::before,
  html body.home-index .page::before,
  html body.jobs-page .page::before,
  html body.news-page .page::before,
  html body.about-page .page::before,
  html body.contact-page .page::before,
  html body.legal-page .page::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:auto !important;
    width:auto !important;
    height:1px !important;
    z-index:2147483000 !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,
      rgba(0,137,216,.90),
      rgba(0,194,255,.98) 18%,
      rgba(0,137,216,.88) 50%,
      rgba(0,194,255,.98) 82%,
      rgba(0,137,216,.90)) !important;
    box-shadow:0 0 12px rgba(0,174,255,.36) !important;
  }

  html body .page::after,
  html body .site-shell::after,
  html body.home-index .page::after,
  html body.jobs-page .page::after,
  html body.news-page .page::after,
  html body.about-page .page::after,
  html body.contact-page .page::after,
  html body.legal-page .page::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:auto !important;
    height:1px !important;
    z-index:2147483000 !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,
      rgba(0,137,216,.86),
      rgba(0,194,255,.94) 18%,
      rgba(0,137,216,.82) 50%,
      rgba(0,194,255,.94) 82%,
      rgba(0,137,216,.86)) !important;
    box-shadow:0 0 12px rgba(0,174,255,.30) !important;
  }

  /* Remove the previous header-only top stroke. It made the line look boxed inside
     the header instead of connected to the real outer frame. */
  html body .page > header.oh-mock-header::before,
  html body .site-shell > header.oh-mock-header::before{
    content:none !important;
    display:none !important;
  }

  html body .page > header.oh-mock-header,
  html body .site-shell > header.oh-mock-header{
    border-top:0 !important;
  }
}

/* v7 final outer-frame correction:
   Use ONE real outer border on the page shell. Do not draw extra top/bottom
   strokes on the header or footer, because those make the line look boxed.
   The frame now belongs only to the outer .page/.site-shell and runs full width
   from left frame edge to right frame edge at both top and bottom. */
@media (min-width:901px){
  html body .page,
  html body .site-shell,
  html body.home-index .page,
  html body.jobs-page .page,
  html body.news-page .page,
  html body.about-page .page,
  html body.contact-page .page,
  html body.legal-page .page{
    position:relative !important;
    overflow:hidden !important;
    border:1px solid rgba(0,174,255,.82) !important;
    outline:0 !important;
    border-radius:0 !important;
    box-shadow:
      0 28px 86px rgba(0,0,0,.50),
      0 0 18px rgba(0,137,216,.12) !important;
  }

  /* Stop using the page pseudo-elements for frame lines. Reusing ::before and
     ::after caused either top/bottom OR side lines to be overwritten, which is
     why the frame kept looking boxed or disconnected. The real border above is
     now the only outer frame. */
  html body .page::before,
  html body .page::after,
  html body .site-shell::before,
  html body .site-shell::after,
  html body.home-index .page::before,
  html body.home-index .page::after,
  html body.jobs-page .page::before,
  html body.jobs-page .page::after,
  html body.news-page .page::before,
  html body.news-page .page::after,
  html body.about-page .page::before,
  html body.about-page .page::after,
  html body.contact-page .page::before,
  html body.contact-page .page::after,
  html body.legal-page .page::before,
  html body.legal-page .page::after{
    content:none !important;
    display:none !important;
  }

  /* Remove header-only and footer-only frame strokes. These were the boxed
     lines the user saw. Header/footer may keep their own subtle section border,
     but not a fake outer-frame line. */
  html body .page > header.oh-mock-header::before,
  html body .page > header.oh-mock-header::after,
  html body .site-shell > header.oh-mock-header::before,
  html body .site-shell > header.oh-mock-header::after,
  html body .page > .bottom::before,
  html body .page > .bottom::after,
  html body .site-shell > .bottom::before,
  html body .site-shell > .bottom::after,
  html body .page > .oh-footer-credit::before,
  html body .page > .oh-footer-credit::after,
  html body .site-shell > .oh-footer-credit::before,
  html body .site-shell > .oh-footer-credit::after,
  html body .page > footer.footer::before,
  html body .page > footer.footer::after,
  html body .site-shell > footer.footer::before,
  html body .site-shell > footer.footer::after,
  html body .page > footer.site-footer::before,
  html body .page > footer.site-footer::after,
  html body .site-shell > footer.site-footer::before,
  html body .site-shell > footer.site-footer::after{
    content:none !important;
    display:none !important;
  }

  html body .page > header.oh-mock-header,
  html body .site-shell > header.oh-mock-header{
    border-top:0 !important;
  }

  /* Keep footer inside the page frame instead of drawing a second boxed cyan
     frame around it. */
  html body .footer,
  html body footer.footer,
  html body footer.site-footer,
  html body .bottom,
  html body .oh-footer-credit{
    box-shadow:none !important;
  }
}

/* v8 actual frame fix:
   The visible outer cyan frame belongs only to the page wrapper.
   Header/footer no longer draw their own boxed borders. */
@media (min-width:901px){
  html body .page,
  html body .site-shell,
  html body.home-index .page,
  html body.jobs-page .page,
  html body.news-page .page,
  html body.about-page .page,
  html body.contact-page .page,
  html body.legal-page .page{
    position:relative !important;
    overflow:hidden !important;
    border:1px solid rgba(0,174,255,.86) !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:
      0 28px 86px rgba(0,0,0,.50),
      0 0 18px rgba(0,137,216,.12) !important;
  }

  /* Do not let old page pseudo elements replace the real frame. */
  html body .page::before,
  html body .page::after,
  html body .site-shell::before,
  html body .site-shell::after{
    content:none !important;
    display:none !important;
  }

  /* The header graphic was still drawing a smaller cyan box inside the page.
     Keep the command-header look, but remove the inner top/bottom frame so the
     only full-width frame line is the outer page border. */
  html body .oh-mock-header,
  html body .page > .oh-mock-header,
  html body .site-shell > .oh-mock-header{
    border-top:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,106,0,.78) !important;
    box-shadow:0 18px 52px rgba(0,0,0,.38) !important;
  }

  html body .oh-mock-header::before,
  html body .oh-mock-header::after,
  html body .page > .oh-mock-header::before,
  html body .page > .oh-mock-header::after,
  html body .site-shell > .oh-mock-header::before,
  html body .site-shell > .oh-mock-header::after{
    content:none !important;
    display:none !important;
  }

  html body .oh-mock-frame{
    border-top:0 !important;
    border-bottom:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    box-shadow:
      0 0 34px rgba(0,174,255,.18),
      0 0 70px rgba(0,0,0,.68) !important;
  }

  /* Remove the old one-pixel inset strokes that visually recreated the box. */
  html body .oh-mock-frame,
  html body .oh-mock-brand{
    outline:0 !important;
  }

  html body .oh-mock-brand{
    border-bottom:0 !important;
  }

  /* Footer should sit inside the page frame, not have its own cyan rectangle. */
  html body .footer,
  html body footer.footer,
  html body footer.site-footer{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    border-top:1px solid rgba(0,137,216,.26) !important;
  }

  html body .bottom,
  html body .oh-footer-credit{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  html body .footer::before,
  html body .footer::after,
  html body footer.footer::before,
  html body footer.footer::after,
  html body footer.site-footer::before,
  html body footer.site-footer::after,
  html body .bottom::before,
  html body .bottom::after,
  html body .oh-footer-credit::before,
  html body .oh-footer-credit::after{
    content:none !important;
    display:none !important;
  }
}