/* Offshore Hub Design System v1
   Global desktop rules for typography, spacing, cards, buttons, filters and templates.
   Loaded last so it normalises older page-specific CSS without redesigning the site. */

:root{
  --oh-font-body: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --oh-font-heading: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --oh-bg-0:#01070d;
  --oh-bg-1:#020b14;
  --oh-bg-2:#061522;
  --oh-surface:rgba(5,18,31,.94);
  --oh-surface-strong:rgba(6,22,38,.96);
  --oh-surface-soft:rgba(8,27,44,.76);
  --oh-card:linear-gradient(180deg,rgba(7,22,36,.96),rgba(3,13,23,.96));
  --oh-card-hover:linear-gradient(180deg,rgba(9,30,48,.98),rgba(4,16,27,.98));
  --oh-line:rgba(0,153,230,.30);
  --oh-line-soft:rgba(81,150,205,.20);
  --oh-line-strong:rgba(0,174,255,.62);
  --oh-orange:#ff7a1a;
  --oh-orange-2:#ff9a3d;
  --oh-cyan:#00b8ff;
  --oh-green:#25f0aa;
  --oh-text:#f4f8ff;
  --oh-muted:#b7c7d8;
  --oh-faint:#7f94aa;

  --oh-radius-xs:8px;
  --oh-radius-sm:10px;
  --oh-radius-md:14px;
  --oh-radius-lg:18px;
  --oh-radius-xl:22px;

  --oh-space-1:6px;
  --oh-space-2:10px;
  --oh-space-3:14px;
  --oh-space-4:18px;
  --oh-space-5:24px;
  --oh-space-6:32px;
  --oh-space-7:44px;
  --oh-space-8:60px;

  --oh-shadow-card:0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035);
  --oh-shadow-soft:0 14px 34px rgba(0,0,0,.24);
  --oh-shadow-orange:0 10px 26px rgba(255,122,26,.20);
}

html,
body{
  font-family:var(--oh-font-body) !important;
  color:var(--oh-text);
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body,
button,
input,
select,
textarea{
  font-family:var(--oh-font-body) !important;
}

button,
a,
select,
input{
  -webkit-tap-highlight-color:transparent;
}

@media (min-width:901px){
  /* Real outer frame: the frame belongs to the page wrapper, not the header or footer. */
  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;
    border-left:1px solid rgba(0,174,255,.84) !important;
    border-right:1px solid rgba(0,174,255,.84) !important;
    border-top:0 !important;
    border-bottom:0 !important;
    background-image:
      linear-gradient(90deg,rgba(0,174,255,.90),rgba(0,198,255,.96) 18%,rgba(0,174,255,.76) 50%,rgba(0,198,255,.96) 82%,rgba(0,174,255,.90)),
      linear-gradient(90deg,rgba(0,174,255,.76),rgba(0,198,255,.86) 18%,rgba(0,174,255,.64) 50%,rgba(0,198,255,.86) 82%,rgba(0,174,255,.76)),
      linear-gradient(180deg,var(--oh-bg-1) 0%,var(--oh-bg-0) 100%) !important;
    background-size:100% 1px,100% 1px,100% 100% !important;
    background-position:top left,bottom left,center !important;
    background-repeat:no-repeat !important;
    box-shadow:0 28px 86px rgba(0,0,0,.50),0 0 22px rgba(0,137,216,.10) !important;
  }

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

  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,122,26,.56) !important;
    background:#02070d !important;
    box-shadow:0 18px 42px rgba(0,0,0,.30) !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{
    content:none !important;
    display:none !important;
  }

  html body .oh-mock-frame{
    border:0 !important;
    outline:0 !important;
    box-shadow:0 0 28px rgba(0,174,255,.13),0 0 60px rgba(0,0,0,.64) !important;
  }

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

  /* Page rhythm */
  .content,
  .main,
  .home-main,
  .news-main,
  .legal-main,
  .section,
  .oh-section{
    --oh-section-gap:var(--oh-space-7);
  }

  .main,
  .home-main,
  .news-main,
  .legal-main{
    gap:var(--oh-space-5) !important;
  }

  section,
  .box,
  .panel,
  .side-panel,
  .article-card,
  .legal-card,
  .feature-card,
  .sector-card,
  .story-card,
  .read-next-card,
  .profile-panel,
  .oh-news-lead,
  .oh-news-mini,
  .oh-news-side-card{
    scroll-margin-top:120px;
  }

  /* Typography rules */
  h1,
  h2,
  h3,
  h4,
  .box-title,
  .section-title,
  .article-title,
  .job-title,
  .oh-news-title,
  .oh-card-title{
    font-family:var(--oh-font-heading) !important;
    letter-spacing:-.035em;
    color:var(--oh-text);
  }

  .hero h1,
  .legal-hero h1,
  h1{
    font-size:clamp(48px,5vw,82px) !important;
    line-height:.96 !important;
    font-weight:850 !important;
    letter-spacing:-.055em !important;
    margin-bottom:var(--oh-space-4) !important;
  }

  h2,
  .section-title{
    font-size:clamp(28px,2.4vw,40px) !important;
    line-height:1.04 !important;
    font-weight:820 !important;
    margin:0 0 var(--oh-space-2) !important;
  }

  h3,
  .box-title,
  .article-card h3,
  .feature-card h3,
  .story-card h3,
  .oh-news-title{
    font-size:clamp(19px,1.35vw,24px) !important;
    line-height:1.16 !important;
    font-weight:790 !important;
    letter-spacing:-.025em !important;
  }

  h4,
  .card-title,
  .side-panel h4,
  .profile-panel h4{
    font-size:17px !important;
    line-height:1.22 !important;
    font-weight:760 !important;
    letter-spacing:-.018em !important;
  }

  p,
  .lead,
  .hero p,
  .legal-hero p,
  .article-card p,
  .feature-card p,
  .story-card p{
    color:rgba(230,239,250,.92) !important;
    line-height:1.58 !important;
  }

  .hero p,
  .legal-hero p{
    font-size:18px !important;
    max-width:680px;
  }

  .eyebrow,
  .label,
  .kicker,
  .box-label,
  .section-eyebrow,
  .live,
  .meta-label,
  .oh-news-kicker,
  .article-kicker{
    font-size:11px !important;
    line-height:1.1 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    color:var(--oh-orange-2) !important;
    font-weight:850 !important;
  }

  .eyebrow{margin-bottom:var(--oh-space-3) !important;}

  /* Hero template */
  .hero,
  .legal-hero{
    min-height:420px !important;
    border-top:0 !important;
    border-bottom:1px solid rgba(0,153,230,.24) !important;
  }

  .hero-inner,
  .legal-hero-inner{
    padding:64px 58px 58px !important;
    gap:var(--oh-space-7) !important;
  }

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

  body .hero::after,
  body .legal-hero::after{
    background:
      linear-gradient(90deg,rgba(2,8,14,.70) 0%,rgba(2,8,14,.50) 36%,rgba(2,8,14,.20) 68%,rgba(2,8,14,.06) 100%),
      linear-gradient(180deg,rgba(2,8,14,.02) 0%,rgba(1,7,13,.18) 100%) !important;
  }

  .features,
  .hero-badges,
  .hero-actions{
    gap:var(--oh-space-3) !important;
    flex-wrap:wrap;
  }

  .feat,
  .hero-badge{
    border:1px solid rgba(0,153,230,.26) !important;
    background:rgba(4,16,28,.46) !important;
    border-radius:var(--oh-radius-xs) !important;
    padding:8px 11px !important;
  }

  .feat .ic,
  .micon,
  .ico{
    border-color:rgba(255,122,26,.72) !important;
    color:var(--oh-orange-2) !important;
  }

  .stat-card,
  .hero-stat-card,
  .news-hero-card{
    border:1px solid rgba(0,153,230,.34) !important;
    border-radius:var(--oh-radius-lg) !important;
    background:linear-gradient(180deg,rgba(7,22,36,.86),rgba(4,14,24,.92)) !important;
    box-shadow:var(--oh-shadow-card) !important;
    padding:var(--oh-space-5) !important;
  }

  /* Consistent section headers */
  .box-head,
  .section-head,
  .panel-head,
  .article-head,
  .news-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--oh-space-4);
    padding:var(--oh-space-4) var(--oh-space-5) !important;
    border-bottom:1px solid rgba(81,150,205,.18) !important;
  }

  .box-title span,
  .section-title span,
  h1 span,
  h2 span,
  h3 span{
    color:var(--oh-orange) !important;
  }

  /* Cards */
  .box,
  .panel,
  .side-panel,
  .article-card,
  .legal-card,
  .toc,
  .feature-card,
  .sector-card,
  .story-card,
  .read-next-card,
  .profile-panel,
  .oh-news-lead,
  .oh-news-mini,
  .oh-news-side-card,
  .jobs-table{
    background:var(--oh-card) !important;
    border:1px solid var(--oh-line-soft) !important;
    border-radius:var(--oh-radius-lg) !important;
    box-shadow:var(--oh-shadow-card) !important;
    overflow:hidden;
  }

  .article-card:hover,
  .feature-card:hover,
  .sector-card:hover,
  .story-card:hover,
  .read-next-card:hover,
  .oh-news-lead:hover,
  .oh-news-mini:hover,
  .oh-news-side-card:hover,
  .job-row:hover,
  .cat:hover{
    background:var(--oh-card-hover) !important;
    border-color:rgba(0,174,255,.42) !important;
    transform:translateY(-1px);
  }

  .box,
  .panel,
  .side-panel,
  .article-card,
  .feature-card,
  .sector-card,
  .story-card,
  .read-next-card,
  .oh-news-lead,
  .oh-news-mini,
  .oh-news-side-card,
  .job-row,
  .cat{
    transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease !important;
  }

  /* Buttons: smaller, consistent, no weird icon-only conversion. */
  .cta,
  .searchbtn,
  .panel-btn,
  .hero .cta,
  .hero .searchbtn,
  .oh-mock-cta,
  .btn,
  .button,
  a.button,
  button.button,
  .share-btn,
  .side-link,
  .orange-link,
  .job-apply-btn,
  .modal-apply,
  .save-job-btn{
    font-family:var(--oh-font-body) !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.015em !important;
    border-radius:var(--oh-radius-sm) !important;
    min-height:38px !important;
    padding:11px 16px !important;
    gap:8px !important;
    text-transform:none !important;
  }

  .cta,
  .searchbtn,
  .oh-mock-cta,
  .job-apply-btn,
  .modal-apply,
  .btn-primary{
    background:linear-gradient(135deg,var(--oh-orange),#ff8a28) !important;
    color:#fff !important;
    border:1px solid rgba(255,154,61,.72) !important;
    box-shadow:var(--oh-shadow-orange) !important;
  }

  .cta:hover,
  .searchbtn:hover,
  .oh-mock-cta:hover,
  .job-apply-btn:hover,
  .modal-apply:hover,
  .btn-primary:hover{
    transform:translateY(-1px);
    filter:brightness(1.06);
  }

  .panel-btn,
  .btn-secondary,
  .save-job-btn,
  .side-link,
  .hero a:not(.cta):not(.oh-mock-cta){
    background:rgba(5,17,29,.72) !important;
    color:var(--oh-text) !important;
    border:1px solid rgba(255,122,26,.62) !important;
    box-shadow:none !important;
  }

  .orange-link,
  .text-link,
  .read-more{
    min-height:auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    color:var(--oh-orange-2) !important;
    box-shadow:none !important;
  }

  /* Tags, chips and metadata */
  .pill,
  .tag,
  .filter-chip,
  .catbadge,
  .newbadge,
  .badge,
  .source-tag,
  .article-tag,
  .news-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px !important;
    padding:5px 9px !important;
    border-radius:999px !important;
    border:1px solid rgba(81,150,205,.24) !important;
    background:rgba(5,17,29,.74) !important;
    color:#dce9f7 !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
  }

  .pill.active,
  .filter-chip.active,
  .newbadge,
  .catbadge{
    border-color:rgba(255,122,26,.50) !important;
    background:rgba(255,122,26,.13) !important;
    color:#fff !important;
  }

  .meta,
  .article-meta,
  .card-meta,
  .job-meta,
  .sub,
  .small,
  small{
    color:var(--oh-muted) !important;
    font-size:12px !important;
    line-height:1.45 !important;
  }

  /* Filter/toolbars */
  .filters,
  .news-toolbar,
  .news-command,
  .toolbar,
  .search-toolbar{
    background:linear-gradient(180deg,rgba(5,18,31,.94),rgba(3,13,23,.96)) !important;
    border:1px solid rgba(0,153,230,.22) !important;
    border-radius:var(--oh-radius-lg) !important;
    padding:var(--oh-space-4) var(--oh-space-5) !important;
    box-shadow:var(--oh-shadow-soft) !important;
  }

  .filter-row{
    gap:var(--oh-space-3) !important;
  }

  .field,
  .field input,
  .field select,
  input[type="search"],
  input[type="text"],
  select{
    min-height:38px !important;
    height:38px !important;
    border-radius:var(--oh-radius-sm) !important;
    border:1px solid rgba(81,150,205,.34) !important;
    background:#061522 !important;
    color:var(--oh-text) !important;
    font-size:13px !important;
    font-weight:720 !important;
  }

  .field{
    padding:0 12px !important;
  }

  /* Metrics should read as a calm status strip, not separate dashboard boxes. */
  .metrics,
  .metric-strip{
    background:linear-gradient(180deg,rgba(5,18,31,.96),rgba(3,13,23,.98)) !important;
    border-top:1px solid rgba(0,153,230,.22) !important;
    border-bottom:1px solid rgba(0,153,230,.22) !important;
  }

  .metric{
    min-height:66px !important;
    padding:12px 26px !important;
    gap:14px !important;
    border-right:1px solid rgba(81,150,205,.18) !important;
  }

  .metric small{
    font-size:10px !important;
    letter-spacing:.08em !important;
    color:#aebed0 !important;
  }

  .metric strong{
    font-size:24px !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
  }

  .micon,
  .metric .ico{
    width:30px !important;
    height:30px !important;
    border-radius:8px !important;
    font-size:14px !important;
  }

  /* Jobs table/list */
  .table{
    border-collapse:separate !important;
    border-spacing:0 8px !important;
    padding:0 14px 14px !important;
  }

  .table thead th{
    font-size:10px !important;
    letter-spacing:.11em !important;
    text-transform:uppercase !important;
    color:#9eb3c9 !important;
    border-bottom:0 !important;
    padding:12px 14px 6px !important;
  }

  .job-row{
    background:rgba(5,18,31,.72) !important;
    outline:1px solid rgba(81,150,205,.16) !important;
    border-radius:12px !important;
    cursor:pointer;
  }

  .job-row td{
    padding:15px 14px !important;
    border-top:1px solid rgba(81,150,205,.12) !important;
    border-bottom:1px solid rgba(81,150,205,.12) !important;
  }

  .job-row td:first-child{
    border-left:1px solid rgba(81,150,205,.12) !important;
    border-radius:12px 0 0 12px !important;
  }

  .job-row td:last-child{
    border-right:1px solid rgba(81,150,205,.12) !important;
    border-radius:0 12px 12px 0 !important;
  }

  button.job-title,
  .job-title.job-open{
    font-size:16px !important;
    font-weight:780 !important;
    letter-spacing:-.015em !important;
    color:var(--oh-text) !important;
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    min-height:auto !important;
    text-align:left !important;
  }

  /* Sidebar panels */
  .side .box,
  aside .box,
  .side-panel,
  .profile-panel.side-card{
    border-color:rgba(0,153,230,.22) !important;
  }

  .cat,
  .tool,
  .radar-item{
    min-height:44px !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    border:1px solid rgba(81,150,205,.16) !important;
    background:rgba(4,15,25,.50) !important;
  }

  /* News/article template */
  .article-body,
  .news-article-body,
  .legal-card{
    font-size:17px !important;
    line-height:1.72 !important;
  }

  .article-body p,
  .news-article-body p,
  .legal-card p{
    margin:0 0 1.15em !important;
    color:rgba(230,239,250,.93) !important;
  }

  .read-next,
  .related-news,
  .continue-reading{
    margin-top:var(--oh-space-7) !important;
  }

  .read-next-card,
  .related-card{
    min-height:100% !important;
  }

  /* Share controls */
  .share-row,
  .share-actions,
  .job-share-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px !important;
    align-items:center;
  }

  .share-btn,
  .share-actions a,
  .share-actions button,
  .job-share-row a,
  .job-share-row button{
    min-height:34px !important;
    padding:9px 11px !important;
    border-radius:9px !important;
    border:1px solid rgba(81,150,205,.26) !important;
    background:rgba(5,18,31,.72) !important;
    color:var(--oh-text) !important;
    box-shadow:none !important;
  }

  .share-btn:hover,
  .share-actions a:hover,
  .share-actions button:hover{
    border-color:rgba(255,122,26,.48) !important;
    color:#fff !important;
  }

  /* Header navigation treatment */
  .oh-mock-nav a{
    min-height:42px !important;
    padding:0 15px !important;
    border-radius:10px !important;
    font-size:13px !important;
    font-weight:800 !important;
  }

  .oh-mock-nav a.active{
    background:rgba(255,122,26,.13) !important;
    color:#fff !important;
    border:1px solid rgba(255,122,26,.24) !important;
  }

  .oh-mock-lang button{
    min-width:34px !important;
    width:34px !important;
    height:28px !important;
    padding:3px !important;
    border-radius:8px !important;
  }

  .oh-mock-live{
    min-height:36px !important;
    padding:8px 13px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }

  .oh-mock-cta{
    min-height:36px !important;
    padding:10px 15px !important;
    border-radius:10px !important;
  }

  /* Legal/simple pages */
  .legal-card,
  .legal-content,
  .content-card{
    max-width:1040px;
    margin-left:auto;
    margin-right:auto;
  }

  /* Avoid giant orange outlines everywhere. */
  .box,
  .panel,
  .article-card,
  .feature-card,
  .sector-card,
  .story-card,
  .read-next-card,
  .oh-news-lead,
  .oh-news-mini,
  .oh-news-side-card,
  .job-row{
    --line2:rgba(0,153,230,.28) !important;
    --line:rgba(81,150,205,.20) !important;
  }
}