/*
 * Offshore Hub visual system v4
 * Shared palette and components for public desktop and mobile pages.
 * One maritime palette, one surface hierarchy, one component language.
 */

:root {
  --v4-deep: #242b2d;
  --v4-deep-2: #30383a;
  --v4-deep-3: #444e4f;
  --v4-canvas: #b8bfbd;
  --v4-band: #c3cac6;
  --v4-paper: #d6dbd6;
  --v4-paper-2: #cbd2cd;
  --v4-field: #e0e4de;
  --v4-ink: #252e2e;
  --v4-copy: #46544e;
  --v4-muted: #526059;
  --v4-line: #a8b2ab;
  --v4-line-strong: #89988e;
  --v4-orange: #e68a45;
  --v4-orange-dark: #823d18;
  --v4-orange-soft: #d7c6ad;
  --v4-teal: #52685b;
  --v4-teal-soft: #bdcbbf;
  --v4-live: #226144;
  --v4-live-soft: #b9d0ba;
  --v4-on-dark: #e4e8e2;
  --v4-muted-on-dark: #bbc5bd;
  --v4-shadow: 0 4px 12px rgba(25, 35, 29, .07);
  --v4-shadow-hover: 0 8px 20px rgba(25, 35, 29, .12);
  --oh-navy: var(--v4-deep);
  --oh-navy-raised: var(--v4-deep-2);
  --oh-navy-soft: var(--v4-deep-3);
  --oh-canvas: var(--v4-canvas);
  --oh-panel: var(--v4-band);
  --oh-card: var(--v4-paper);
  --oh-ink: var(--v4-ink);
  --oh-copy-dark: var(--v4-copy);
  --oh-line: var(--v4-line);
  --oh-line-dark: var(--v4-deep-3);
  --oh-signal: var(--v4-orange);
  --oh-signal-dark: var(--v4-orange-dark);
  --oh-secondary: var(--v4-teal);
}

html,
html body {
  background: var(--v4-canvas) !important;
  color: var(--v4-ink) !important;
}

html body :is(.page, .site-shell) {
  background: var(--v4-canvas) !important;
  border-color: var(--v4-line-strong) !important;
  box-shadow: 0 0 42px rgba(11, 43, 54, .12) !important;
}

/* Brand chrome */
html body :is(.oh-real-header, .oh-real-header-inner) {
  background: var(--v4-deep) !important;
  border-color: var(--v4-deep-3) !important;
}

html body .oh-real-header :is(a, button) {
  color: var(--v4-on-dark) !important;
}

html body .oh-real-header .active,
html body .oh-real-header [aria-current="page"] {
  color: #fff !important;
}

html body :is(.hero.jobs-as-news-hero, .newsroom-hero-v1.jobs-as-news-hero, .article-publication-hero.jobs-as-news-hero) {
  border-color: var(--v4-deep-3) !important;
}

html body .hero .stat-card,
html body :is(.hero-live-card, .hero-market-card, .hero-side-card, .newsroom-hero-side-v1) {
  background: var(--v4-deep) !important;
  border-color: var(--v4-deep-3) !important;
  box-shadow: 0 22px 48px rgba(3, 20, 27, .34) !important;
}

html body.jobs-page .job-row.job-tile.sector-offshore .tile-visual {
  background-image: url('/assets/Hero/hero3_zoomout.png') !important;
}

/* Shared secondary-page surfaces use the same readable palette. */
html body.contact-page #contact-form .contact-layout > aside.box {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
}
html body.contact-page .company-info-badge {
  color: var(--v4-live) !important;
  background: var(--v4-live-soft) !important;
}
html body:is(.about-page, .contact-page) .page main.main :is(.company-info-card, .company-info-item, .contact-layout > .box, .why-clean, .quick-search) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
  box-shadow: none !important;
}
html body:is(.about-page, .contact-page) .page main.main :is(.box-title, h2, h3, strong, b, label) {
  color: var(--v4-ink) !important;
}
html body:is(.about-page, .contact-page) .page main.main :is(p, .source-row span, .company-info-item small) {
  color: var(--v4-copy) !important;
}
html body:is(.about-page, .contact-page) .page main.main :is(input, select, .quick-pills a) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
}
html body:is(.about-page, .contact-page) .page main.main .box {
  box-shadow: none !important;
}
html body.about-page .page main.main .copy-layout {
  align-items: start !important;
}

/* Dedicated mobile routes share the desktop surface tokens. */
html:has(.mobile-app), html body:has(.mobile-app), html body .mobile-app {
  background: var(--v4-canvas) !important;
  color: var(--v4-ink) !important;
}
html body .mobile-app :is(.card, .static-info-box, .mobile-news-card-v90, .detail-body, .mobile-drawer, .filter-panel) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html body .mobile-app :is(.card, .static-info-box, .mobile-news-card-v90, .detail-body) :is(h2, h3, strong, b, .job-title) {
  color: var(--v4-ink) !important;
}
html body .mobile-app :is(.card, .static-info-box, .mobile-news-card-v90, .detail-body) :is(p, li, small, .job-meta, .job-company) {
  color: var(--v4-copy) !important;
}
html body .mobile-app :is(input, select, textarea, .badge.subtle) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
}
html body .mobile-app :is(.topbar, .bottom-nav) {
  background: var(--v4-deep) !important;
  border-color: var(--v4-deep-3) !important;
}
html body .mobile-app :is(.btn.primary, .post-job-btn, .bottom-nav__item.active, .badge.orange) {
  background: var(--v4-orange) !important;
  color: var(--v4-deep) !important;
}
html body .mobile-app .bottom-nav__item { color: var(--v4-muted-on-dark) !important; }
html body .mobile-app .static-card { line-height: 1.65 !important; }
html body[data-page] .mobile-app :is(.mobile-job-card-v83, .mobile-job-card-v83 .job-main, .mobile-info-grid-v83 > div, .snapshot-card, .mobile-contact-form) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
  box-shadow: none !important;
}
html body[data-page] .mobile-app :is(.mobile-job-card-v83, .mobile-snapshot-clean, .mobile-contact-form, .static-info-box, .section-head--jobslist) :is(h2, h3, .job-title, b, strong, a, label, .jobs-count, .jobs-count__value) {
  color: var(--v4-ink) !important;
}
html body[data-page] .mobile-app :is(.mobile-job-card-v83, .mobile-snapshot-clean, .mobile-contact-form, .static-info-box) :is(p, small, .sub, .snapshot-label, .mobile-info-grid-v83 span) {
  color: var(--v4-copy) !important;
}
html body[data-page] .mobile-app #contactForm {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  box-shadow: none !important;
}
html body[data-page] .mobile-app #contactForm .mobile-form-field > span {
  color: var(--v4-ink) !important;
}
html body[data-page] .mobile-app .mobile-card-action-v83 > span {
  color: var(--v4-orange-dark) !important;
}

html body.news-dashboard-page .page .newsroom-story-card-v1 small,
html body.news-dashboard-page .page .newsroom-story-card-v1 small :is(b, em),
html body.news-dashboard-page .page .newsroom-filter-v1 label,
html body.news-dashboard-page .page .newsroom-filter-v1 label span,
html body.news-dashboard-page .page .newsroom-topic-bar-v1 {
  color: var(--v4-copy) !important;
}
html body.news-dashboard-page .page .newsroom-topic-bar-v1 a {
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
}
html body.news-dashboard-page .page .newsroom-story-card-v1 p {
  min-height: 64px !important;
}

/* Statistics are a clean transition from hero to content. */
html body .page section.metrics.oh-metric-strip {
  min-height: 72px !important;
  background: var(--v4-paper) !important;
  border-block: 1px solid var(--v4-line-strong) !important;
  box-shadow: 0 7px 22px rgba(18, 52, 63, .07) !important;
}

html body .oh-metric-strip .metric {
  min-height: 72px !important;
  padding: 13px 22px !important;
  background: transparent !important;
  border-right: 1px solid var(--v4-line) !important;
}

html body .page section.metrics.oh-metric-strip .metric small {
  color: var(--v4-muted) !important;
  letter-spacing: 0 !important;
}

html body .page section.metrics.oh-metric-strip .metric strong,
html body .page section.metrics.oh-metric-strip .metric .metric-detail {
  color: var(--v4-ink) !important;
}

html body .page section.metrics.oh-metric-strip .metric strong.green,
html body .page section.metrics.oh-metric-strip .metric:nth-child(2) strong {
  color: var(--v4-live) !important;
}

html body .oh-metric-strip .metric .micon {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  background: var(--v4-orange-soft) !important;
  border: 1px solid var(--v4-orange-soft) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

html body .oh-metric-strip .metric .micon::before {
  width: 16px !important;
  height: 16px !important;
  background-color: var(--v4-orange-dark) !important;
}

/* A ticker is navigation/status chrome and may stay dark. */
html body :is(.oh-news-strip.home-news-marquee, .jobs-news-ticker.jobs-latest-marquee, .news-breaking) {
  min-height: 46px !important;
  background: var(--v4-deep-2) !important;
  border-color: var(--v4-deep-3) !important;
  color: var(--v4-on-dark) !important;
  box-shadow: none !important;
}

html body :is(.oh-news-strip.home-news-marquee, .jobs-news-ticker.jobs-latest-marquee, .news-breaking) :is(a, span, b, strong, small) {
  color: var(--v4-muted-on-dark) !important;
}

html body :is(.oh-news-strip.home-news-marquee, .jobs-news-ticker.jobs-latest-marquee, .news-breaking) :is(.label, .ticker-label, .jobs-news-label, .orange-link) {
  color: var(--v4-orange) !important;
}

html body .jobs-news-ticker.jobs-latest-marquee .jobs-news-label span {
  color: #52d6aa !important;
}

/* Page canvas and shared typography */
html body :is(.main, .oh-page-side-layout, .newsroom-v1, .article-publication-shell, .post-job-layout, .legal-wrap) {
  background: var(--v4-canvas) !important;
  color: var(--v4-ink) !important;
}

html body :is(.home-index, .about-page, .contact-page) .oh-main-column > :is(.home-block, .page-shell) {
  border-bottom-color: var(--v4-line) !important;
}

html body :is(.section-intro, .box-head, .read-next-head) :is(h1, h2, h3, h4) {
  color: var(--v4-ink) !important;
}

html body :is(.section-intro, .box-head, .read-next-head) p,
html body .jobs-board-sub {
  color: var(--v4-copy) !important;
}

html body :is(.eyebrow, .eyebrow.compact, .box-title) {
  color: var(--v4-teal) !important;
  letter-spacing: 0 !important;
}

html body :is(.eyebrow, .eyebrow.compact, .box-title) span {
  color: var(--v4-orange-dark) !important;
}

html body .orange-link,
html body .tile-open {
  color: var(--v4-orange-dark) !important;
}

/* Shared surfaces */
html body :is(.box, .info-card, .why-clean, .quick-search, .company-info-card, .post-job-panel, .legal-card, .article-publication-main, .newsroom-filter-v1, .newsroom-list-head-v1, .newsroom-topic-bar-v1) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
  box-shadow: var(--v4-shadow) !important;
}

html body :is(.box, .info-card, .why-clean, .quick-search, .company-info-card, .post-job-panel, .legal-card, .article-publication-main, .newsroom-filter-v1, .newsroom-list-head-v1, .newsroom-topic-bar-v1) :is(h1, h2, h3, h4, b, strong, label) {
  color: var(--v4-ink) !important;
}

html body :is(.box, .info-card, .why-clean, .quick-search, .company-info-card, .post-job-panel, .legal-card, .article-publication-main, .newsroom-filter-v1, .newsroom-list-head-v1, .newsroom-topic-bar-v1) :is(p, li, small) {
  color: var(--v4-copy) !important;
}

html body :is(.page-shell, .home-block) {
  background: transparent !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
}

/* Home sections */
html body.jobs-page .page main.main.jobs-mock-layout,
html body.jobs-page.home-index .page main.main.jobs-mock-layout {
  background: var(--v4-canvas) !important;
}
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile.is-preview-hidden {
  display: none !important;
}
html body.jobs-page.home-index .page main.main .index-news-card {
  display: flex !important;
  flex-direction: column !important;
}
html body.jobs-page.home-index .page main.main .index-news-image {
  width: 100% !important;
  flex: none !important;
}
html body.jobs-page.home-index .page main.main :is(.why-clean, .quick-search) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  box-shadow: none !important;
}
html body.jobs-page.home-index .page main.main :is(.why-clean, .quick-search) :is(.box-title, label, b, h2) {
  color: var(--v4-ink) !important;
}
html body.jobs-page.home-index .page main.main .quick-search :is(input, .quick-pills a) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
}
html body.home-index .sector-block {
  background: transparent !important;
  color: var(--v4-ink) !important;
}

html body.home-index .sector-block .section-intro :is(h2, h3) {
  color: var(--v4-ink) !important;
}

html body.home-index .sector-block .section-intro p {
  color: var(--v4-copy) !important;
}

html body.home-index .sector-card {
  border-color: var(--v4-line-strong) !important;
  box-shadow: 0 14px 30px rgba(18, 52, 63, .15) !important;
}

html body.home-index .sector-card :is(h3, p) {
  color: var(--v4-on-dark) !important;
}

html body.home-index .live-jobs-list,
html body.home-index .index-news-latest {
  background: transparent !important;
}

html body .why-news-clean {
  align-items: stretch !important;
}

html body .why-news-clean > :is(.why-clean, .quick-search) {
  border-top: 3px solid var(--v4-teal) !important;
}

html body .why-news-clean > .quick-search {
  border-top-color: var(--v4-orange) !important;
}

html body .why-grid > div {
  background: var(--v4-paper-2) !important;
  border-color: var(--v4-line) !important;
}

/* Buttons */
html body :is(.cta, .searchbtn, .studio-submit) {
  background: var(--v4-orange) !important;
  color: var(--v4-deep) !important;
  border-color: var(--v4-orange) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 18px rgba(242, 112, 36, .22) !important;
}

html body :is(.cta, .searchbtn, .studio-submit):hover {
  background: var(--v4-orange) !important;
  border-color: var(--v4-orange) !important;
}

html body :is(.ghost-btn, .btn.secondary, .panel-btn, .preview-nav-btn) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
  box-shadow: none !important;
}

/* Job search studio: one calm tool, no black bars. */
html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio {
  padding: 18px 20px !important;
  background: var(--v4-paper) !important;
  border: 1px solid var(--v4-line-strong) !important;
  border-left: 4px solid var(--v4-teal) !important;
  border-radius: 5px !important;
  box-shadow: var(--v4-shadow) !important;
}

html body.jobs-page .jobs-search-studio :is(.jobs-studio-toolbar, .jobs-studio-foot) {
  margin: 0 !important;
  padding: 0 0 16px !important;
  background: transparent !important;
  border-color: var(--v4-line) !important;
}

html body.jobs-page .jobs-search-studio .jobs-studio-foot {
  padding: 16px 0 0 !important;
}

html body.jobs-page .jobs-search-studio .studio-tab {
  min-height: 38px !important;
  background: var(--v4-paper-2) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
  border-radius: 4px !important;
}

html body.jobs-page .jobs-search-studio .studio-tab.is-active {
  background: var(--v4-deep-2) !important;
  color: #fff !important;
  border-color: var(--v4-deep-2) !important;
}

html body.jobs-page .jobs-search-studio :is(.studio-field > span, legend, .studio-popular > b) {
  color: var(--v4-muted) !important;
}

html body.jobs-page .jobs-search-studio :is(input, select) {
  background: var(--v4-field) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
}

html body.jobs-page .jobs-search-studio .studio-rotation button,
html body.jobs-page .jobs-search-studio .studio-popular .pill {
  background: var(--v4-paper-2) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
}

html body.jobs-page .jobs-search-studio .studio-rotation button.is-active,
html body.jobs-page .jobs-search-studio .studio-popular .pill.active {
  background: var(--v4-orange) !important;
  color: var(--v4-deep) !important;
  border-color: var(--v4-orange) !important;
}

/* Job board and cards */
html body.jobs-page .page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board,
html body.jobs-page.home-index .page main.main.jobs-mock-layout .home-jobs-card-board {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.jobs-page .jobs-card-board > .box-head,
html body.home-index .home-jobs-card-board > .box-head {
  border-color: var(--v4-line) !important;
}

html body.jobs-page .page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile,
html body.home-index main.main.jobs-mock-layout .home-jobs-card-list .job-row.job-tile {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
  border-radius: 5px !important;
  box-shadow: var(--v4-shadow) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-card-board .jobs-grid-board .job-row.job-tile:hover,
html body.home-index main.main.jobs-mock-layout .home-jobs-card-list .job-row.job-tile:hover {
  border-color: var(--v4-teal) !important;
  box-shadow: var(--v4-shadow-hover) !important;
  transform: translateY(-3px) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-top {
  background: var(--v4-paper-2) !important;
  border-color: var(--v4-line) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile :is(.tile-source, .tile-company) {
  color: var(--v4-copy) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-new {
  background: var(--v4-live-soft) !important;
  color: var(--v4-live) !important;
  border-color: #a7d4c3 !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-title {
  color: var(--v4-ink) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-role {
  background: var(--v4-teal-soft) !important;
  color: var(--v4-copy) !important;
  border-color: var(--v4-line) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-desc {
  color: var(--v4-copy) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-meta {
  border-color: var(--v4-line) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-meta .meta-pill b {
  color: var(--v4-copy) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-bottom {
  background: var(--v4-paper-2) !important;
  border-color: var(--v4-line) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-category {
  color: var(--v4-teal) !important;
}

html body:is(.jobs-page, .home-index) .job-row.job-tile .tile-open {
  background: transparent !important;
  color: var(--v4-orange-dark) !important;
  border-color: var(--v4-orange-soft) !important;
}

html body.jobs-page .pager,
html body.home-index .home-job-preview-nav {
  background: var(--v4-paper) !important;
  border-color: var(--v4-line) !important;
  box-shadow: var(--v4-shadow) !important;
}

html body.jobs-page .pager :is(a, span),
html body.home-index .home-job-preview-nav :is(button, span) {
  color: var(--v4-ink) !important;
}

html body.jobs-page .pager a,
html body.home-index .home-job-preview-nav button {
  background: var(--v4-paper-2) !important;
  border-color: var(--v4-line-strong) !important;
}

html body.jobs-page .pager a.active,
html body.home-index .home-job-preview-nav button.active {
  background: var(--v4-orange) !important;
  color: var(--v4-deep) !important;
  border-color: var(--v4-orange) !important;
}

/* News cards */
html body :is(.newsroom-story-card-v1, .index-news-card, .read-next-card) {
  background: var(--v4-paper) !important;
  border-color: var(--v4-line-strong) !important;
  box-shadow: var(--v4-shadow) !important;
}

html body :is(.newsroom-story-card-v1, .index-news-card, .read-next-card):hover {
  border-color: var(--v4-teal) !important;
  box-shadow: var(--v4-shadow-hover) !important;
}

html body :is(.newsroom-story-card-v1, .index-news-card, .read-next-card) > div,
html body :is(.index-news-body, .read-next-body) {
  background: var(--v4-paper) !important;
}

html body :is(.newsroom-story-card-v1, .index-news-card, .read-next-card) :is(h2, h3, h4) {
  color: var(--v4-ink) !important;
}

html body :is(.newsroom-story-card-v1, .index-news-card, .read-next-card) p {
  color: var(--v4-copy) !important;
}

/* About, contact, forms and legal reading */
html body :is(.about-page, .contact-page) .info-card {
  background: var(--v4-paper) !important;
  border-color: var(--v4-line) !important;
  border-top-color: var(--v4-teal) !important;
}

html body :is(.about-page, .contact-page) .info-card:nth-child(2) {
  border-top-color: var(--v4-orange) !important;
}

html body :is(.about-page, .contact-page) .info-card:nth-child(3) {
  border-top-color: #9a7b4f !important;
}

html body.contact-page .contact-company-info,
html body :is(.about-page, .contact-page) .home-cta,
html body.news-article-page .home-cta {
  background: var(--v4-band) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
  box-shadow: none !important;
}

html body :is(.contact-company-info, .home-cta) :is(h2, h3, h4, b, strong) {
  color: var(--v4-ink) !important;
}

html body :is(.contact-company-info, .home-cta) p {
  color: var(--v4-copy) !important;
}

html body :is(.contact-layout, .copy-layout) > .box,
html body.post-job-page .post-job-panel {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
}

html body :is(input, select, textarea) {
  background: var(--v4-field) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
}

html body :is(input, select, textarea):focus {
  border-color: var(--v4-teal) !important;
  box-shadow: 0 0 0 3px rgba(62, 116, 125, .14) !important;
}

html body.legal-page :is(.toc, .legal-side-rail),
html body.news-article-page .article-publication-side {
  background: var(--v4-band) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
}

html body.legal-page :is(.toc, .legal-side-rail) :is(a, h2, h3, b, strong),
html body.news-article-page .article-publication-side :is(a, h2, h3, b, strong) {
  color: var(--v4-ink) !important;
}

/* Job modal is part of the product, not a separate dark application. */
html body:is(.jobs-page, .home-index) #jobModal .job-modal-card,
html body:is(.jobs-page, .home-index) #jobModal :is(.profile-modal-inner, .profile-modal-main) {
  background: var(--v4-paper-2) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
}

html body:is(.jobs-page, .home-index) #jobModal :is(.profile-modal-head, .profile-info-grid, .profile-panel, .side-card, .profile-actions) {
  background: var(--v4-paper) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line) !important;
}

html body:is(.jobs-page, .home-index) #jobModal :is(h2, h3, b, strong, .profile-main-val, .quick-row span:last-child) {
  color: var(--v4-ink) !important;
}

html body:is(.jobs-page, .home-index) #jobModal :is(p, li, .profile-desc, .profile-sub-val, .profile-label, .quick-row span:first-child) {
  color: var(--v4-copy) !important;
}

html body:is(.jobs-page, .home-index) #jobModal .job-sidebar {
  background: var(--v4-band) !important;
  border-color: var(--v4-line) !important;
}

/* Footer */
html body .oh-reference-footer {
  background: var(--v4-deep-2) !important;
  border-color: var(--v4-deep-3) !important;
  box-shadow: none !important;
}

html body .oh-reference-footer :is(h2, h3, h4, b, strong, a, .footer-title) {
  color: var(--v4-on-dark) !important;
}

html body .oh-reference-footer :is(p, span, small) {
  color: var(--v4-muted-on-dark) !important;
}

html body .oh-reference-footer input {
  background: var(--v4-field) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
}

@media (max-width: 900px) {
  html body .oh-metric-strip .metric {
    border-bottom: 1px solid var(--v4-line) !important;
  }

  html body.jobs-page .jobs-search-studio {
    padding: 16px !important;
  }
}

@media (max-width: 560px) {
  html body .oh-metric-strip .metric {
    min-height: 62px !important;
    border-right: 0 !important;
  }
}

/* Specificity locks for legacy job styles. These are the only intentional locks. */
html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio .jobs-studio-toolbar,
html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio .jobs-studio-foot {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  background: transparent !important;
  border-color: var(--v4-line) !important;
}

html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio .studio-rotation button {
  background: var(--v4-paper-2) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
  box-shadow: none !important;
}

html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio .studio-rotation button.is-active {
  background: var(--v4-orange) !important;
  color: var(--v4-deep) !important;
  border-color: var(--v4-orange) !important;
}

html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio .searchbtn.studio-submit,
html body :is(.home-cta, .post-job-panel, .contact-form) :is(.cta, .searchbtn) {
  color: var(--v4-deep) !important;
}

html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio .jobs-studio-toolbar {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 16px !important;
}

html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio .jobs-studio-foot {
  margin-bottom: 0 !important;
  padding-top: 16px !important;
  padding-bottom: 0 !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile .tile-top,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile .tile-top {
  background: var(--v4-paper-2) !important;
  border-color: var(--v4-line) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile :is(.tile-logo, .tile-logo.has-image),
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile :is(.tile-logo, .tile-logo.has-image) {
  background: var(--v4-deep) !important;
  border-color: var(--v4-deep-3) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile :is(.tile-source, .tile-company),
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile :is(.tile-source, .tile-company) {
  color: var(--v4-copy) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile .tile-title,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile .tile-title {
  flex-basis: auto !important;
  height: auto !important;
  min-height: 48px !important;
  color: var(--v4-ink) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile .tile-role,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile .tile-role {
  background: var(--v4-teal-soft) !important;
  color: var(--v4-copy) !important;
  border-color: var(--v4-line) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile p.tile-desc,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile p.tile-desc {
  min-height: 42px !important;
  margin-top: 10px !important;
  color: var(--v4-copy) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile .tile-meta,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile .tile-meta {
  border-color: var(--v4-line) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile .tile-meta .meta-pill b,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile .tile-meta .meta-pill b {
  color: var(--v4-copy) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile .tile-bottom,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile .tile-bottom {
  background: var(--v4-paper-2) !important;
  border-color: var(--v4-line) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile .tile-category,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile .tile-category {
  color: var(--v4-teal) !important;
}

html body.jobs-page main.main.jobs-mock-layout .jobs-left-column .jobs-card-board .jobs-grid-board .job-row.job-tile .tile-open,
html body.jobs-page.home-index main.main.jobs-mock-layout .home-jobs-card-board .home-jobs-card-list .job-row.job-tile .tile-open {
  color: var(--v4-orange-dark) !important;
  background: transparent !important;
  border-color: var(--v4-orange-soft) !important;
}

@media (max-width: 600px) {
  html body.jobs-page #jobs-list .jobs-left-column > #jobs-filters.jobs-search-studio .jobs-studio-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.jobs-page #jobs-filters.jobs-search-studio .studio-field {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
  html body.jobs-page #jobs-filters.jobs-search-studio :is(input, select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

html body .home-cta.home-cta,
html body.jobs-page.home-index .home-cta,
html body.about-page .home-cta,
html body.contact-page .home-cta,
html body.news-page .home-cta {
  background: var(--v4-teal-soft) !important;
  color: var(--v4-ink) !important;
  border-color: var(--v4-line-strong) !important;
  box-shadow: none !important;
}

html body .home-cta.home-cta :is(h2, h3, p),
html body.jobs-page.home-index .home-cta :is(h2, p),
html body.about-page .home-cta :is(h2, p),
html body.contact-page .home-cta :is(h2, p),
html body.news-page .home-cta :is(h2, p) {
  color: var(--v4-ink) !important;
}