/* Dream Job final UI alignment.
   Purpose: one clean mockup-style banner system and clear icon controls. */

/* -----------------------------
   Unified Page Banner System
------------------------------ */
body[data-page="jobs"] .jobs-search-hero,
body[data-page="blog"] .page-hero,
body[data-page="about"] .page-hero,
body[data-page="contact"] .page-hero,
body:has(#employer-signup) .page-hero,
body:has(#candidate-entry) .page-hero {
  position: relative !important;
  min-height: clamp(430px, 54vh, 560px) !important;
  display: grid !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: #10243b !important;
  background-size: cover !important;
  background-position: center !important;
}

body:has(#employer-signup) .page-hero {
  background-image: url("/assets/hero-2.jpg") !important;
}

body:has(#candidate-entry) .page-hero {
  background-image: url("/assets/hero-1.jpg") !important;
}

body[data-page="about"] .page-hero {
  background-image: url("/assets/hero-5.jpg") !important;
}

body[data-page="contact"] .page-hero {
  background-image: url("/assets/hero-2.jpg") !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-bg,
body[data-page="blog"] .page-hero > .page-hero-bg-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-bg img,
body[data-page="blog"] .page-hero > .page-hero-bg-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.06) contrast(1.04) brightness(.92) !important;
}

body[data-page="jobs"] .jobs-search-hero::after,
body[data-page="blog"] .page-hero::after,
body[data-page="about"] .page-hero::after,
body[data-page="contact"] .page-hero::after,
body:has(#employer-signup) .page-hero::after,
body:has(#candidate-entry) .page-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(98deg, rgba(16, 36, 59, .62) 0%, rgba(16, 36, 59, .36) 46%, rgba(16, 36, 59, .10) 100%),
    radial-gradient(circle at 18% 52%, rgba(111, 183, 227, .16), transparent 34%) !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-content,
body[data-page="blog"] .page-hero-shell,
body[data-page="about"] .page-hero-shell,
body[data-page="contact"] .page-hero-shell,
body:has(#employer-signup) .page-hero-shell,
body:has(#candidate-entry) .page-hero-shell {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 48px, 1180px) !important;
  max-width: 1180px !important;
  min-height: clamp(430px, 54vh, 560px) !important;
  margin: 0 auto !important;
  padding: clamp(92px, 12vh, 132px) 0 clamp(80px, 10vh, 116px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-content::before,
body[data-page="jobs"] .jobs-find-hero::before,
body[data-page="jobs"] .page-hero-shell::before,
body[data-page="blog"] .page-hero-shell::before,
body[data-page="about"] .page-hero-shell::before,
body[data-page="contact"] .page-hero-shell::before {
  content: none !important;
  display: none !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-content > *,
body[data-page="blog"] .page-hero-shell > *,
body[data-page="about"] .page-hero-shell > *,
body[data-page="contact"] .page-hero-shell > *,
body:has(#employer-signup) .page-hero-shell > *,
body:has(#candidate-entry) .page-hero-shell > * {
  max-width: 760px !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-content h1,
body[data-page="blog"] .page-hero-shell h1,
body[data-page="about"] .page-hero-shell h1,
body[data-page="contact"] .page-hero-shell h1,
body:has(#employer-signup) .page-hero-shell h1,
body:has(#candidate-entry) .page-hero-shell h1 {
  color: #f8fbfe !important;
  -webkit-text-fill-color: #f8fbfe !important;
  margin: 0 0 16px !important;
  font-size: clamp(40px, 5vw, 68px) !important;
  line-height: 1.02 !important;
  text-shadow: 0 18px 42px rgba(0, 0, 0, .38) !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-content p:not(.eyebrow),
body[data-page="blog"] .page-hero-shell p:not(.eyebrow),
body[data-page="about"] .page-hero-shell p:not(.eyebrow),
body[data-page="contact"] .page-hero-shell p:not(.eyebrow),
body:has(#employer-signup) .page-hero-shell p:not(.eyebrow),
body:has(#candidate-entry) .page-hero-shell p:not(.eyebrow),
body[data-page="blog"] .page-lede,
body[data-page="about"] .page-lede,
body[data-page="contact"] .page-lede {
  color: rgba(248, 251, 254, .94) !important;
  -webkit-text-fill-color: rgba(248, 251, 254, .94) !important;
  margin: 0 !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.72 !important;
  text-shadow: 0 12px 28px rgba(0, 0, 0, .30) !important;
}

body[data-page="jobs"] .jobs-search-hero .eyebrow,
body[data-page="blog"] .page-hero-shell .eyebrow,
body[data-page="about"] .page-hero-shell .eyebrow,
body[data-page="contact"] .page-hero-shell .eyebrow,
body:has(#employer-signup) .page-hero-shell .eyebrow,
body:has(#candidate-entry) .page-hero-shell .eyebrow {
  width: auto !important;
  min-height: 34px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
  background: rgba(248, 251, 254, .92) !important;
  border: 1px solid rgba(248, 251, 254, .72) !important;
  box-shadow: 0 14px 34px rgba(16, 36, 59, .18) !important;
  letter-spacing: .22em !important;
  white-space: nowrap !important;
}

body[data-page="jobs"] .premium-search.jobs-hero-search-overlay {
  position: relative !important;
  z-index: 4 !important;
  margin-top: -42px !important;
  margin-bottom: 34px !important;
}

body[data-page="jobs"] .jobs-search-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
  align-items: stretch !important;
}

/* Complete banner coverage: job detail, role pages, guides, policies, and other inner pages. */
body:not([data-page="home"]) .page-hero,
body:not([data-page="home"]) .job-detail-hero,
body:not([data-page="home"]) .role-landing-hero,
body:not([data-page="home"]) .jobify-hero {
  position: relative !important;
  min-height: clamp(430px, 54vh, 560px) !important;
  display: grid !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #10243b url("/assets/hero-2.jpg") center/cover no-repeat !important;
}

body:not([data-page="home"]) .page-hero-bg-image,
body:not([data-page="home"]) .job-detail-hero-bg-image,
body:not([data-page="home"]) .role-landing-media,
body:not([data-page="home"]) .jobify-hero-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body:not([data-page="home"]) .page-hero-bg-image,
body:not([data-page="home"]) .job-detail-hero-bg-image,
body:not([data-page="home"]) .role-landing-media img,
body:not([data-page="home"]) .jobify-hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.06) contrast(1.04) brightness(.92) !important;
}

body:not([data-page="home"]) .page-hero::after,
body:not([data-page="home"]) .job-detail-hero::after,
body:not([data-page="home"]) .role-landing-hero::after,
body:not([data-page="home"]) .jobify-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(98deg, rgba(16, 36, 59, .62) 0%, rgba(16, 36, 59, .36) 46%, rgba(16, 36, 59, .10) 100%),
    radial-gradient(circle at 18% 52%, rgba(111, 183, 227, .16), transparent 34%) !important;
}

body:not([data-page="home"]) .page-hero-shell,
body:not([data-page="home"]) .job-detail-hero-shell,
body:not([data-page="home"]) .role-landing-shell,
body:not([data-page="home"]) .jobify-hero-shell {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 48px, 1180px) !important;
  max-width: 1180px !important;
  min-height: clamp(430px, 54vh, 560px) !important;
  margin: 0 auto !important;
  padding: clamp(92px, 12vh, 132px) 0 clamp(80px, 10vh, 116px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body:not([data-page="home"]) .job-detail-hero-copy,
body:not([data-page="home"]) .role-landing-copy,
body:not([data-page="home"]) .jobify-hero-copy {
  max-width: 760px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not([data-page="home"]) .page-hero-shell > *,
body:not([data-page="home"]) .job-detail-hero-copy > *,
body:not([data-page="home"]) .role-landing-copy > *,
body:not([data-page="home"]) .jobify-hero-copy > * {
  max-width: 760px !important;
}

body:not([data-page="home"]) .page-hero h1,
body:not([data-page="home"]) .job-detail-hero h1,
body:not([data-page="home"]) .role-landing-hero h1,
body:not([data-page="home"]) .jobify-hero h1 {
  color: #f8fbfe !important;
  -webkit-text-fill-color: #f8fbfe !important;
  margin: 0 0 16px !important;
  font-size: clamp(40px, 5vw, 68px) !important;
  line-height: 1.02 !important;
  text-shadow: 0 18px 42px rgba(0, 0, 0, .38) !important;
}

body:not([data-page="home"]) .page-hero p:not(.eyebrow),
body:not([data-page="home"]) .job-detail-hero p:not(.eyebrow),
body:not([data-page="home"]) .role-landing-hero p:not(.eyebrow),
body:not([data-page="home"]) .jobify-hero p:not(.eyebrow),
body:not([data-page="home"]) .page-lede,
body:not([data-page="home"]) .jobify-hero-lede {
  color: rgba(248, 251, 254, .94) !important;
  -webkit-text-fill-color: rgba(248, 251, 254, .94) !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.72 !important;
  text-shadow: 0 12px 28px rgba(0, 0, 0, .30) !important;
}

body:not([data-page="home"]) .page-hero .eyebrow,
body:not([data-page="home"]) .job-detail-hero .eyebrow,
body:not([data-page="home"]) .role-landing-hero .eyebrow,
body:not([data-page="home"]) .jobify-hero .eyebrow {
  width: auto !important;
  min-height: 34px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
  background: rgba(248, 251, 254, .92) !important;
  border: 1px solid rgba(248, 251, 254, .72) !important;
  box-shadow: 0 14px 34px rgba(16, 36, 59, .18) !important;
  letter-spacing: .22em !important;
  white-space: nowrap !important;
}

/* -----------------------------
   Admin Header + Control Polish
------------------------------ */
.admin-shell .admin-top {
  align-items: flex-start !important;
  gap: 24px !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(248, 251, 254, .98), rgba(245, 248, 252, .94)),
    radial-gradient(circle at 12% 18%, rgba(111, 183, 227, .18), transparent 34%) !important;
  border: 1px solid rgba(216, 227, 236, .95) !important;
  box-shadow: 0 18px 45px rgba(16, 36, 59, .10) !important;
}

.admin-shell .admin-title {
  color: #10243b !important;
  line-height: 1.05 !important;
}

.admin-shell .hero-actions,
.admin-shell .admin-control-room-nav,
.admin-shell .admin-review-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.admin-shell .button,
.admin-shell .admin-control-room-nav a,
.admin-shell .kpi,
.admin-shell .pill,
.admin-shell .status,
.admin-shell .media-pill {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-shell .kpi {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 20px !important;
  border-radius: 22px !important;
}

.admin-shell .card,
.admin-shell .panel,
.admin-shell .table-card {
  border-radius: 22px !important;
  border: 1px solid rgba(216, 227, 236, .95) !important;
  box-shadow: 0 12px 30px rgba(16, 36, 59, .08) !important;
}

/* -----------------------------
   Clear Share + Social Icons
------------------------------ */
.premium-social-links,
.socials,
.share-row,
.job-card-share-actions,
.article-share .share-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.premium-social-links a,
.socials a,
.share-row a,
.share-row button,
.job-card-share-actions a,
.job-card-share-actions button,
.job-card-more-share summary,
.article-share .share-row a,
.article-share .share-row button {
  min-width: 42px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #f8fbfe !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
  border: 1px solid rgba(216, 227, 236, .98) !important;
  box-shadow: 0 10px 22px rgba(16, 36, 59, .12) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.premium-social-links a,
.socials a {
  width: 42px !important;
  padding: 0 !important;
}

.premium-social-icon,
.premium-social-icon svg,
.share-platform-icon,
.share-platform-icon svg,
.share-row svg,
.job-card-share-actions svg,
.article-share svg {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}

.premium-social-links svg *,
.socials svg *,
.share-platform-icon *,
.share-row svg *,
.job-card-share-actions svg *,
.article-share svg * {
  stroke: currentColor !important;
}

.premium-social-links svg [fill="currentColor"],
.socials svg [fill="currentColor"],
.share-platform-icon svg [fill="currentColor"],
.share-row svg [fill="currentColor"],
.job-card-share-actions svg [fill="currentColor"],
.article-share svg [fill="currentColor"] {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.share-row a:hover,
.share-row button:hover,
.job-card-share-actions a:hover,
.job-card-share-actions button:hover,
.job-card-more-share summary:hover,
.premium-social-links a:hover,
.socials a:hover {
  background: #10243b !important;
  color: #f8fbfe !important;
  -webkit-text-fill-color: #f8fbfe !important;
  transform: translateY(-2px) !important;
}

/* -----------------------------
   Mobile Tightening
------------------------------ */
@media (max-width: 768px) {
  body[data-page="jobs"] .jobs-search-hero,
  body[data-page="blog"] .page-hero,
  body[data-page="about"] .page-hero,
  body[data-page="contact"] .page-hero,
  body:not([data-page="home"]) .page-hero,
  body:not([data-page="home"]) .job-detail-hero,
  body:not([data-page="home"]) .role-landing-hero,
  body:not([data-page="home"]) .jobify-hero,
  body:has(#employer-signup) .page-hero,
  body:has(#candidate-entry) .page-hero {
    min-height: 430px !important;
  }

  body[data-page="jobs"] .jobs-search-hero .hero-content,
  body[data-page="blog"] .page-hero-shell,
  body[data-page="about"] .page-hero-shell,
  body[data-page="contact"] .page-hero-shell,
  body:not([data-page="home"]) .page-hero-shell,
  body:not([data-page="home"]) .job-detail-hero-shell,
  body:not([data-page="home"]) .role-landing-shell,
  body:not([data-page="home"]) .jobify-hero-shell,
  body:has(#employer-signup) .page-hero-shell,
  body:has(#candidate-entry) .page-hero-shell {
    width: min(100% - 32px, 1180px) !important;
    min-height: 430px !important;
    padding: 82px 0 76px !important;
  }

  body[data-page="jobs"] .jobs-search-hero .hero-content h1,
  body[data-page="blog"] .page-hero-shell h1,
  body[data-page="about"] .page-hero-shell h1,
  body[data-page="contact"] .page-hero-shell h1,
  body:not([data-page="home"]) .page-hero h1,
  body:not([data-page="home"]) .job-detail-hero h1,
  body:not([data-page="home"]) .role-landing-hero h1,
  body:not([data-page="home"]) .jobify-hero h1,
  body:has(#employer-signup) .page-hero-shell h1,
  body:has(#candidate-entry) .page-hero-shell h1 {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.05 !important;
  }

  body[data-page="jobs"] .premium-search.jobs-hero-search-overlay {
    margin-top: -28px !important;
  }

  body[data-page="jobs"] .jobs-search-panel {
    grid-template-columns: 1fr !important;
  }

  .share-row a,
  .share-row button,
  .job-card-share-actions a,
  .job-card-share-actions button,
  .job-card-more-share summary,
  .article-share .share-row a,
  .article-share .share-row button {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    background: #f8fbfe !important;
    color: #10243b !important;
    -webkit-text-fill-color: #10243b !important;
  }

  .share-platform-text,
  .share-row .share-platform-text,
  .job-card-share-actions .share-platform-text,
  .article-share .share-platform-text,
  .job-card-more-share summary span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }
}

/* -----------------------------
   Homepage-Style Full Banner Effect
   Full cinematic banner for all inner pages, matching the homepage carousel feel.
------------------------------ */
@keyframes dreamjobBannerDrift {
  0% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.08) translate3d(-1.4%, -.8%, 0);
  }
  100% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
}

@keyframes dreamjobBackgroundDrift {
  0% {
    background-size: 104%;
    background-position: center center;
  }
  50% {
    background-size: 112%;
    background-position: 48% 47%;
  }
  100% {
    background-size: 104%;
    background-position: center center;
  }
}

body:not([data-page="home"]) .page-hero,
body:not([data-page="home"]) .job-detail-hero,
body:not([data-page="home"]) .role-landing-hero,
body:not([data-page="home"]) .jobify-hero,
body[data-page="jobs"] .jobs-search-hero {
  min-height: 82vh !important;
  min-height: 82svh !important;
  height: auto !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  animation: dreamjobBackgroundDrift 18s ease-in-out infinite !important;
}

body:not([data-page="home"]) .page-hero-bg-image,
body:not([data-page="home"]) .job-detail-hero-bg-image,
body:not([data-page="home"]) .role-landing-media img,
body:not([data-page="home"]) .jobify-hero-media img,
body[data-page="jobs"] .jobs-search-hero .hero-bg img {
  transform-origin: center !important;
  will-change: transform !important;
  animation: dreamjobBannerDrift 18s ease-in-out infinite !important;
}

body:not([data-page="home"]) .page-hero::after,
body:not([data-page="home"]) .job-detail-hero::after,
body:not([data-page="home"]) .role-landing-hero::after,
body:not([data-page="home"]) .jobify-hero::after,
body[data-page="jobs"] .jobs-search-hero::after,
body[data-page="jobs"] .hero.compact.jobs-search-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(94deg, rgba(16, 36, 59, .76) 0%, rgba(16, 36, 59, .54) 42%, rgba(16, 36, 59, .24) 100%),
    radial-gradient(circle at 18% 46%, rgba(111, 183, 227, .22), transparent 34%),
    linear-gradient(180deg, rgba(16, 36, 59, .26), transparent 34%, rgba(16, 36, 59, .30)) !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

body:not([data-page="home"]) .page-hero-shell,
body:not([data-page="home"]) .job-detail-hero-shell,
body:not([data-page="home"]) .role-landing-shell,
body:not([data-page="home"]) .jobify-hero-shell,
body[data-page="jobs"] .jobs-search-hero .hero-content {
  min-height: 82vh !important;
  min-height: 82svh !important;
  padding: clamp(118px, 14vh, 156px) 0 clamp(96px, 12vh, 136px) !important;
}

body:not([data-page="home"]) .page-hero h1,
body:not([data-page="home"]) .job-detail-hero h1,
body:not([data-page="home"]) .role-landing-hero h1,
body:not([data-page="home"]) .jobify-hero h1,
body[data-page="jobs"] .jobs-search-hero h1 {
  max-width: 820px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(44px, 5.8vw, 76px) !important;
  line-height: .98 !important;
  text-shadow:
    0 4px 10px rgba(0, 0, 0, .76),
    0 20px 48px rgba(0, 0, 0, .46) !important;
}

body:not([data-page="home"]) .page-hero p:not(.eyebrow),
body:not([data-page="home"]) .job-detail-hero p:not(.eyebrow),
body:not([data-page="home"]) .role-landing-hero p:not(.eyebrow),
body:not([data-page="home"]) .jobify-hero p:not(.eyebrow),
body[data-page="jobs"] .jobs-search-hero p:not(.eyebrow) {
  max-width: 720px !important;
  color: rgba(255, 255, 255, .97) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .97) !important;
  text-shadow:
    0 3px 8px rgba(0, 0, 0, .76),
    0 16px 34px rgba(0, 0, 0, .44) !important;
}

@media (max-width: 768px) {
  body:not([data-page="home"]) .page-hero,
  body:not([data-page="home"]) .job-detail-hero,
  body:not([data-page="home"]) .role-landing-hero,
  body:not([data-page="home"]) .jobify-hero,
  body[data-page="jobs"] .jobs-search-hero,
  body:not([data-page="home"]) .page-hero-shell,
  body:not([data-page="home"]) .job-detail-hero-shell,
  body:not([data-page="home"]) .role-landing-shell,
  body:not([data-page="home"]) .jobify-hero-shell,
  body[data-page="jobs"] .jobs-search-hero .hero-content {
    min-height: 72vh !important;
    min-height: 72svh !important;
  }

  body:not([data-page="home"]) .page-hero-shell,
  body:not([data-page="home"]) .job-detail-hero-shell,
  body:not([data-page="home"]) .role-landing-shell,
  body:not([data-page="home"]) .jobify-hero-shell,
  body[data-page="jobs"] .jobs-search-hero .hero-content {
    width: min(100% - 32px, 1180px) !important;
    padding: 96px 0 78px !important;
  }

  body:not([data-page="home"]) .page-hero h1,
  body:not([data-page="home"]) .job-detail-hero h1,
  body:not([data-page="home"]) .role-landing-hero h1,
  body:not([data-page="home"]) .jobify-hero h1,
  body[data-page="jobs"] .jobs-search-hero h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.03 !important;
  }
}

/* =============================================================
   ABSOLUTE LAST LIVE FIX - DO NOT ADD RULES AFTER THIS BLOCK
   Fixes:
   1) Header visible, never hidden.
   2) All inner banners use animated cinematic image layer.
   3) Mobile share icons draw visibly even if original SVG is hidden.
============================================================= */
@keyframes djpFinalBannerPan {
  0% {
    transform: scale(1.03) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.11) translate3d(-1.6%, -1%, 0);
  }
  100% {
    transform: scale(1.03) translate3d(0, 0, 0);
  }
}

body {
  --djp-banner-image: url("/assets/hero-2.jpg");
}

body[data-page="jobs"] {
  --djp-banner-image: url("/assets/hero-4.jpg");
}

body:has(#employer-signup),
body:has(#offline-hiring-services) {
  --djp-banner-image: url("/assets/hero-2.jpg");
}

body:has(#candidate-entry),
body:has(#candidate-dashboard),
body:has(.candidate-dashboard) {
  --djp-banner-image: url("/assets/hero-1.jpg");
}

body[data-page="about"] {
  --djp-banner-image: url("/assets/hero-5.jpg");
}

body[data-page="contact"] {
  --djp-banner-image: url("/assets/hero-6.jpg");
}

body[data-page="blog"] {
  --djp-banner-image: url("/assets/hero-3.jpg");
}

.top-trust-strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 70 !important;
}

.site-header,
.site-header:hover,
.site-header:focus-within,
body:has(.site-header:hover) .site-header,
body:has(.site-header:focus-within) .site-header,
body:has(.top-trust-strip:hover) .site-header,
body:has(.top-trust-strip:focus-within) .site-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 999 !important;
}

body::before {
  content: none !important;
  display: none !important;
}

body:not([data-page="home"]) .page-hero,
body:not([data-page="home"]) .job-detail-hero,
body:not([data-page="home"]) .role-landing-hero,
body:not([data-page="home"]) .jobify-hero,
body[data-page="jobs"] .jobs-search-hero,
body[data-page="jobs"] .hero.compact.jobs-search-hero {
  position: relative !important;
  min-height: 82vh !important;
  min-height: 82svh !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #10243b !important;
}

body:not([data-page="home"]) .page-hero::before,
body:not([data-page="home"]) .job-detail-hero::before,
body:not([data-page="home"]) .role-landing-hero::before,
body:not([data-page="home"]) .jobify-hero::before,
body[data-page="jobs"] .jobs-search-hero::before,
body[data-page="jobs"] .hero.compact.jobs-search-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -5% !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background-image: var(--djp-banner-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  transform-origin: center center !important;
  animation: djpFinalBannerPan 18s ease-in-out infinite !important;
  will-change: transform !important;
}

body:not([data-page="home"]) .page-hero-bg-image,
body:not([data-page="home"]) .job-detail-hero-bg-image,
body:not([data-page="home"]) .role-landing-media img,
body:not([data-page="home"]) .jobify-hero-media img,
body[data-page="jobs"] .jobs-search-hero .hero-bg img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.08) contrast(1.05) brightness(.98) !important;
  transform-origin: center center !important;
  animation: djpFinalBannerPan 18s ease-in-out infinite !important;
  will-change: transform !important;
}

body:not([data-page="home"]) .page-hero::after,
body:not([data-page="home"]) .job-detail-hero::after,
body:not([data-page="home"]) .role-landing-hero::after,
body:not([data-page="home"]) .jobify-hero::after,
body[data-page="jobs"] .jobs-search-hero::after,
body[data-page="jobs"] .hero.compact.jobs-search-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(94deg, rgba(16, 36, 59, .76) 0%, rgba(16, 36, 59, .54) 42%, rgba(16, 36, 59, .24) 100%),
    radial-gradient(circle at 18% 46%, rgba(111, 183, 227, .22), transparent 34%),
    linear-gradient(180deg, rgba(16, 36, 59, .26), transparent 34%, rgba(16, 36, 59, .30)) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not([data-page="home"]) .page-hero-shell,
body:not([data-page="home"]) .job-detail-hero-shell,
body:not([data-page="home"]) .role-landing-shell,
body:not([data-page="home"]) .jobify-hero-shell,
body[data-page="jobs"] .jobs-search-hero .hero-content,
body[data-page="jobs"] .jobs-search-hero .jobs-find-hero {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 48px, 1180px) !important;
  max-width: 1180px !important;
  min-height: 82vh !important;
  min-height: 82svh !important;
  margin: 0 auto !important;
  padding: clamp(118px, 14vh, 156px) 0 clamp(96px, 12vh, 136px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not([data-page="home"]) .page-hero h1,
body:not([data-page="home"]) .job-detail-hero h1,
body:not([data-page="home"]) .role-landing-hero h1,
body:not([data-page="home"]) .jobify-hero h1,
body[data-page="jobs"] .jobs-search-hero h1 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 4px 10px rgba(0, 0, 0, .76),
    0 20px 48px rgba(0, 0, 0, .46) !important;
}

body:not([data-page="home"]) .page-hero p:not(.eyebrow),
body:not([data-page="home"]) .job-detail-hero p:not(.eyebrow),
body:not([data-page="home"]) .role-landing-hero p:not(.eyebrow),
body:not([data-page="home"]) .jobify-hero p:not(.eyebrow),
body[data-page="jobs"] .jobs-search-hero p:not(.eyebrow) {
  color: rgba(255, 255, 255, .97) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .97) !important;
  text-shadow:
    0 3px 8px rgba(0, 0, 0, .76),
    0 16px 34px rgba(0, 0, 0, .44) !important;
}

.share-platform-icon {
  position: relative !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.share-platform-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.share-platform-icon svg {
  opacity: 0 !important;
}

.share-platform-icon-whatsapp::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11.6a6.9 6.9 0 0 1-10.5 5.9l-3 .6.7-2.8A6.9 6.9 0 1 1 19 11.6Z' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 9.2c.5 1.5 1.7 3.1 3.9 4.3.7.4 1.3.1 1.9-.8' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.share-platform-icon-linkedin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='3.2' fill='none' stroke='%2310243B' stroke-width='2.2'/%3E%3Ccircle cx='8' cy='8.2' r='1.2' fill='%2310243B'/%3E%3Cpath d='M8 11v5.1M11.6 11v5.1M11.6 12.2c.6-.8 1.5-1.2 2.5-1.2 1.7 0 2.7 1.1 2.7 3v2.1' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.share-platform-icon-copy::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 14.8 7.9 16.1a3.1 3.1 0 0 1-4.4-4.4l2.7-2.7a3.1 3.1 0 0 1 4.4 0' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8 9.2 16.1 7.9a3.1 3.1 0 0 1 4.4 4.4l-2.7 2.7a3.1 3.1 0 0 1-4.4 0' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.8 15.2 15.2 8.8' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

@media (max-width: 768px) {
  .top-trust-strip {
    display: none !important;
  }

  .site-header,
  .site-header:hover,
  .site-header:focus-within,
  body:has(.site-header:hover) .site-header,
  body:has(.site-header:focus-within) .site-header {
    position: sticky !important;
    top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body:not([data-page="home"]) .page-hero,
  body:not([data-page="home"]) .job-detail-hero,
  body:not([data-page="home"]) .role-landing-hero,
  body:not([data-page="home"]) .jobify-hero,
  body[data-page="jobs"] .jobs-search-hero,
  body:not([data-page="home"]) .page-hero-shell,
  body:not([data-page="home"]) .job-detail-hero-shell,
  body:not([data-page="home"]) .role-landing-shell,
  body:not([data-page="home"]) .jobify-hero-shell,
  body[data-page="jobs"] .jobs-search-hero .hero-content {
    min-height: 72vh !important;
    min-height: 72svh !important;
  }
}

/* FINAL SHARE ICON VISIBILITY FIX - keep last.
   Draws the icon inside the icon span so mobile never shows blank circles. */
.share-platform-icon {
  position: relative !important;
  width: 21px !important;
  min-width: 21px !important;
  height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
}

.share-platform-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.share-platform-icon-whatsapp::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11.6a6.9 6.9 0 0 1-10.5 5.9l-3 .6.7-2.8A6.9 6.9 0 1 1 19 11.6Z' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 9.2c.5 1.5 1.7 3.1 3.9 4.3.7.4 1.3.1 1.9-.8' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.share-platform-icon-linkedin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='3.2' fill='none' stroke='%2310243B' stroke-width='2.2'/%3E%3Ccircle cx='8' cy='8.2' r='1.2' fill='%2310243B'/%3E%3Cpath d='M8 11v5.1M11.6 11v5.1M11.6 12.2c.6-.8 1.5-1.2 2.5-1.2 1.7 0 2.7 1.1 2.7 3v2.1' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.share-platform-icon-copy::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 14.8 7.9 16.1a3.1 3.1 0 0 1-4.4-4.4l2.7-2.7a3.1 3.1 0 0 1 4.4 0' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8 9.2 16.1 7.9a3.1 3.1 0 0 1 4.4 4.4l-2.7 2.7a3.1 3.1 0 0 1-4.4 0' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.8 15.2 15.2 8.8' fill='none' stroke='%2310243B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.share-platform-icon svg {
  opacity: 0 !important;
}

.share-row a,
.share-row button,
.job-card-share-actions a,
.job-card-share-actions button,
.article-share .share-row a,
.article-share .share-row button {
  background: #f8fbfe !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
  border-color: rgba(216, 227, 236, .98) !important;
}

@media (max-width: 768px) {
  .share-platform-icon {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
  }
}

/* FINAL HOMEPAGE CAROUSEL LIGHTENING - homepage only. */
body[data-page="home"] .master-hero::after,
body[data-page="home"] .hero::after,
body[data-page="home"] .jobify-hero::after,
body[data-page="home"] .master-hero-carousel::after,
body[data-page="home"] .hero-bg::after {
  background:
    linear-gradient(94deg, rgba(16, 36, 59, .48) 0%, rgba(16, 36, 59, .25) 45%, rgba(16, 36, 59, .05) 100%),
    radial-gradient(circle at 18% 46%, rgba(111, 183, 227, .16), transparent 34%) !important;
}

body[data-page="home"] .master-hero-carousel img,
body[data-page="home"] .hero-bg-slide img,
body[data-page="home"] .slide img,
body[data-page="home"] .hero-bg img {
  filter: saturate(1.08) contrast(1.03) brightness(1.08) !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-page="home"]) .page-hero,
  body:not([data-page="home"]) .job-detail-hero,
  body:not([data-page="home"]) .role-landing-hero,
  body:not([data-page="home"]) .jobify-hero,
  body[data-page="jobs"] .jobs-search-hero,
  body:not([data-page="home"]) .page-hero-bg-image,
  body:not([data-page="home"]) .job-detail-hero-bg-image,
  body:not([data-page="home"]) .role-landing-media img,
  body:not([data-page="home"]) .jobify-hero-media img,
  body[data-page="jobs"] .jobs-search-hero .hero-bg img {
    animation: none !important;
  }
}

/* -----------------------------
   Final Approval Overrides
   Header must remain visible. Every inner page gets cinematic banner treatment.
------------------------------ */
.top-trust-strip {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 60 !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 999 !important;
}

.site-header:hover,
.site-header:focus-within,
body:has(.site-header:hover) .site-header,
body:has(.site-header:focus-within) .site-header,
body:has(.top-trust-strip:hover) .site-header,
body:has(.top-trust-strip:focus-within) .site-header {
  top: 0 !important;
  transform: none !important;
}

body::before {
  content: none !important;
  display: none !important;
}

body[data-page="jobs"] .jobs-search-hero {
  background-image: url("/assets/hero-4.jpg") !important;
}

body:has(#employer-signup) .page-hero,
body:has(#offline-hiring-services) .page-hero {
  background-image: url("/assets/hero-2.jpg") !important;
}

body:has(#candidate-entry) .page-hero,
body:has(#candidate-dashboard) .page-hero {
  background-image: url("/assets/hero-1.jpg") !important;
}

body[data-page="about"] .page-hero {
  background-image: url("/assets/hero-5.jpg") !important;
}

body[data-page="contact"] .page-hero {
  background-image: url("/assets/hero-6.jpg") !important;
}

body[data-page="blog"] .page-hero {
  background-image: url("/assets/hero-3.jpg") !important;
}

body:not([data-page="home"]) .job-detail-hero {
  background-image: url("/assets/hero-6.jpg") !important;
}

body:not([data-page="home"]) .role-landing-hero,
body:not([data-page="home"]) .jobify-hero {
  background-image: url("/assets/hero-4.jpg") !important;
}

body:not([data-page="home"]) .page-hero,
body:not([data-page="home"]) .job-detail-hero,
body:not([data-page="home"]) .role-landing-hero,
body:not([data-page="home"]) .jobify-hero,
body[data-page="jobs"] .jobs-search-hero {
  min-height: 82vh !important;
  min-height: 82svh !important;
  background-color: #10243b !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  animation: dreamjobBackgroundDrift 18s ease-in-out infinite !important;
}

body:not([data-page="home"]) .page-hero::after,
body:not([data-page="home"]) .job-detail-hero::after,
body:not([data-page="home"]) .role-landing-hero::after,
body:not([data-page="home"]) .jobify-hero::after,
body[data-page="jobs"] .jobs-search-hero::after,
body[data-page="jobs"] .hero.compact.jobs-search-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(94deg, rgba(16, 36, 59, .76) 0%, rgba(16, 36, 59, .54) 42%, rgba(16, 36, 59, .24) 100%),
    radial-gradient(circle at 18% 46%, rgba(111, 183, 227, .22), transparent 34%),
    linear-gradient(180deg, rgba(16, 36, 59, .26), transparent 34%, rgba(16, 36, 59, .30)) !important;
}

body:not([data-page="home"]) .page-hero-bg-image,
body:not([data-page="home"]) .job-detail-hero-bg-image,
body[data-page="jobs"] .jobs-search-hero .hero-bg img {
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.08) contrast(1.05) brightness(.98) !important;
  animation: dreamjobBannerDrift 18s ease-in-out infinite !important;
}

body:not([data-page="home"]) .page-hero-shell,
body:not([data-page="home"]) .job-detail-hero-shell,
body:not([data-page="home"]) .role-landing-shell,
body:not([data-page="home"]) .jobify-hero-shell,
body[data-page="jobs"] .jobs-search-hero .hero-content {
  min-height: 82vh !important;
  min-height: 82svh !important;
  width: min(100% - 48px, 1180px) !important;
  padding: clamp(118px, 14vh, 156px) 0 clamp(96px, 12vh, 136px) !important;
  position: relative !important;
  z-index: 2 !important;
}

body:not([data-page="home"]) .page-hero h1,
body:not([data-page="home"]) .job-detail-hero h1,
body:not([data-page="home"]) .role-landing-hero h1,
body:not([data-page="home"]) .jobify-hero h1,
body[data-page="jobs"] .jobs-search-hero h1 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 4px 10px rgba(0, 0, 0, .76),
    0 20px 48px rgba(0, 0, 0, .46) !important;
}

body:not([data-page="home"]) .page-hero p:not(.eyebrow),
body:not([data-page="home"]) .job-detail-hero p:not(.eyebrow),
body:not([data-page="home"]) .role-landing-hero p:not(.eyebrow),
body:not([data-page="home"]) .jobify-hero p:not(.eyebrow),
body[data-page="jobs"] .jobs-search-hero p:not(.eyebrow) {
  color: rgba(255, 255, 255, .97) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .97) !important;
  text-shadow:
    0 3px 8px rgba(0, 0, 0, .76),
    0 16px 34px rgba(0, 0, 0, .44) !important;
}

.share-row a,
.share-row button,
.job-card-share-actions a,
.job-card-share-actions button,
.article-share .share-row a,
.article-share .share-row button {
  background: #f8fbfe !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
  border: 1px solid rgba(216, 227, 236, .98) !important;
}

.share-platform-icon,
.share-platform-icon svg,
.share-row svg,
.job-card-share-actions svg,
.article-share svg {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #10243b !important;
  stroke: #10243b !important;
  fill: none !important;
}

.share-platform-icon *,
.share-row svg *,
.job-card-share-actions svg *,
.article-share svg * {
  stroke: #10243b !important;
}

.share-platform-icon svg [fill="currentColor"],
.share-row svg [fill="currentColor"],
.job-card-share-actions svg [fill="currentColor"],
.article-share svg [fill="currentColor"] {
  fill: #10243b !important;
  stroke: #10243b !important;
}

@media (max-width: 768px) {
  body:not([data-page="home"]) .page-hero,
  body:not([data-page="home"]) .job-detail-hero,
  body:not([data-page="home"]) .role-landing-hero,
  body:not([data-page="home"]) .jobify-hero,
  body[data-page="jobs"] .jobs-search-hero,
  body:not([data-page="home"]) .page-hero-shell,
  body:not([data-page="home"]) .job-detail-hero-shell,
  body:not([data-page="home"]) .role-landing-shell,
  body:not([data-page="home"]) .jobify-hero-shell,
  body[data-page="jobs"] .jobs-search-hero .hero-content {
    min-height: 72vh !important;
    min-height: 72svh !important;
  }

  .site-header,
  .site-header:hover,
  .site-header:focus-within {
    position: sticky !important;
    top: 0 !important;
    transform: none !important;
  }
}

/* -----------------------------
   Absolute Final Jobs Banner
   Must look image-first like homepage: no dark patch, no text box.
------------------------------ */
body[data-page="jobs"] .jobs-search-hero,
body[data-page="jobs"] .hero.compact.jobs-search-hero {
  position: relative !important;
  min-height: clamp(430px, 54vh, 560px) !important;
  display: grid !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  isolation: isolate !important;
  background: #10243b !important;
}

body[data-page="jobs"] .jobs-search-hero::before,
body[data-page="jobs"] .jobs-search-hero::after,
body[data-page="jobs"] .hero.compact.jobs-search-hero::before,
body[data-page="jobs"] .hero.compact.jobs-search-hero::after,
body[data-page="jobs"] .jobs-find-hero::before,
body[data-page="jobs"] .jobs-find-hero::after,
body[data-page="jobs"] .jobs-search-hero .hero-content::before,
body[data-page="jobs"] .jobs-search-hero .hero-content::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  background: transparent !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.08) contrast(1.04) brightness(1) !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-content,
body[data-page="jobs"] .jobs-search-hero .jobs-find-hero {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 48px, 1180px) !important;
  max-width: 1180px !important;
  min-height: clamp(430px, 54vh, 560px) !important;
  margin: 0 auto !important;
  padding: clamp(92px, 12vh, 132px) 0 clamp(80px, 10vh, 116px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-page="jobs"] .jobs-search-hero .hero-content > *,
body[data-page="jobs"] .jobs-search-hero .jobs-find-hero > * {
  max-width: 760px !important;
}

body[data-page="jobs"] .jobs-search-hero h1 {
  color: #f8fbfe !important;
  -webkit-text-fill-color: #f8fbfe !important;
  font-size: clamp(40px, 5vw, 68px) !important;
  line-height: 1.02 !important;
  margin: 0 0 16px !important;
  text-shadow:
    0 4px 12px rgba(0, 0, 0, .54),
    0 18px 42px rgba(0, 0, 0, .36) !important;
}

body[data-page="jobs"] .jobs-search-hero p:not(.eyebrow) {
  color: #f8fbfe !important;
  -webkit-text-fill-color: #f8fbfe !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.72 !important;
  text-shadow:
    0 3px 10px rgba(0, 0, 0, .58),
    0 12px 28px rgba(0, 0, 0, .34) !important;
}

body[data-page="jobs"] .jobs-search-hero .eyebrow {
  width: auto !important;
  min-height: 34px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
  background: rgba(248, 251, 254, .92) !important;
  border: 1px solid rgba(248, 251, 254, .72) !important;
  box-shadow: 0 14px 34px rgba(16, 36, 59, .18) !important;
  letter-spacing: .22em !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  body[data-page="jobs"] .jobs-search-hero,
  body[data-page="jobs"] .hero.compact.jobs-search-hero,
  body[data-page="jobs"] .jobs-search-hero .hero-content,
  body[data-page="jobs"] .jobs-search-hero .jobs-find-hero {
    min-height: 430px !important;
  }

  body[data-page="jobs"] .jobs-search-hero .hero-content,
  body[data-page="jobs"] .jobs-search-hero .jobs-find-hero {
    width: min(100% - 32px, 1180px) !important;
    padding: 82px 0 76px !important;
  }

  body[data-page="jobs"] .jobs-search-hero h1 {
    font-size: clamp(32px, 10vw, 44px) !important;
  }
}

/* -----------------------------
   Final Live Header + Banner Pass
   Header hides until top/header hover. Banners use full-image mockup treatment.
------------------------------ */
:root {
  --dj-trust-strip-height: 36px;
  --dj-header-peek: 12px;
}

.top-trust-strip,
.site-header {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), top .34s cubic-bezier(.4, 0, .2, 1), opacity .24s ease !important;
}

.top-trust-strip {
  top: 0 !important;
  transform: translateY(-100%) !important;
  opacity: 0 !important;
}

.site-header {
  top: 0 !important;
  transform: translateY(calc(-100% + var(--dj-header-peek))) !important;
  box-shadow: 0 14px 36px rgba(16, 36, 59, .12) !important;
}

.site-header:hover,
.site-header:focus-within,
body:has(.top-trust-strip:hover) .site-header,
body:has(.top-trust-strip:focus-within) .site-header,
body:has(.site-header:hover) .site-header,
body:has(.site-header:focus-within) .site-header {
  top: var(--dj-trust-strip-height) !important;
  transform: translateY(0) !important;
}

.top-trust-strip:hover,
.top-trust-strip:focus-within,
body:has(.site-header:hover) .top-trust-strip,
body:has(.site-header:focus-within) .top-trust-strip {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 18px !important;
  z-index: 999 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(16, 36, 59, .18), transparent) !important;
}

body:not([data-page="home"]) .page-hero,
body:not([data-page="home"]) .job-detail-hero,
body:not([data-page="home"]) .role-landing-hero,
body:not([data-page="home"]) .jobify-hero,
body[data-page="jobs"] .jobs-search-hero {
  min-height: clamp(460px, 58vh, 620px) !important;
  background-color: #10243b !important;
}

body:not([data-page="home"]) .page-hero::after,
body:not([data-page="home"]) .job-detail-hero::after,
body:not([data-page="home"]) .role-landing-hero::after,
body:not([data-page="home"]) .jobify-hero::after,
body[data-page="jobs"] .jobs-search-hero::after,
body[data-page="jobs"] .hero.compact.jobs-search-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(96deg, rgba(16, 36, 59, .52) 0%, rgba(16, 36, 59, .28) 44%, rgba(16, 36, 59, .06) 100%),
    radial-gradient(circle at 18% 44%, rgba(111, 183, 227, .18), transparent 32%) !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

body[data-page="jobs"] .jobs-search-hero::before,
body[data-page="jobs"] .hero.compact.jobs-search-hero::before,
body[data-page="jobs"] .jobs-find-hero::before,
body[data-page="jobs"] .jobs-find-hero::after,
body[data-page="jobs"] .jobs-search-hero .hero-content::before,
body[data-page="jobs"] .jobs-search-hero .hero-content::after {
  content: none !important;
  display: none !important;
}

body:not([data-page="home"]) .page-hero-shell,
body:not([data-page="home"]) .job-detail-hero-shell,
body:not([data-page="home"]) .role-landing-shell,
body:not([data-page="home"]) .jobify-hero-shell,
body[data-page="jobs"] .jobs-search-hero .hero-content {
  min-height: clamp(460px, 58vh, 620px) !important;
  padding: clamp(104px, 13vh, 146px) 0 clamp(86px, 10vh, 122px) !important;
}

body:not([data-page="home"]) .page-hero h1,
body:not([data-page="home"]) .job-detail-hero h1,
body:not([data-page="home"]) .role-landing-hero h1,
body:not([data-page="home"]) .jobify-hero h1,
body[data-page="jobs"] .jobs-search-hero h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow:
    0 3px 8px rgba(0, 0, 0, .70),
    0 16px 38px rgba(0, 0, 0, .42) !important;
}

body:not([data-page="home"]) .page-hero p:not(.eyebrow),
body:not([data-page="home"]) .job-detail-hero p:not(.eyebrow),
body:not([data-page="home"]) .role-landing-hero p:not(.eyebrow),
body:not([data-page="home"]) .jobify-hero p:not(.eyebrow),
body[data-page="jobs"] .jobs-search-hero p:not(.eyebrow) {
  color: rgba(255, 255, 255, .96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .96) !important;
  text-shadow:
    0 2px 7px rgba(0, 0, 0, .72),
    0 12px 28px rgba(0, 0, 0, .42) !important;
}

.site-footer .premium-social-links,
.site-footer .socials,
footer .premium-social-links,
footer .socials {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.site-footer .premium-social-links a,
.site-footer .socials a,
footer .premium-social-links a,
footer .socials a {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fbfe !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
  border: 1px solid rgba(216, 227, 236, .95) !important;
  box-shadow: 0 14px 28px rgba(16, 36, 59, .18) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-footer .premium-social-links svg,
.site-footer .socials svg,
footer .premium-social-links svg,
footer .socials svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  color: #10243b !important;
  stroke: #10243b !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-footer .premium-social-links svg *,
.site-footer .socials svg *,
footer .premium-social-links svg *,
footer .socials svg * {
  stroke: #10243b !important;
}

.site-footer .premium-social-links svg [fill="currentColor"],
.site-footer .socials svg [fill="currentColor"],
footer .premium-social-links svg [fill="currentColor"],
footer .socials svg [fill="currentColor"] {
  fill: #10243b !important;
  stroke: #10243b !important;
}

@media (max-width: 768px) {
  .top-trust-strip {
    display: none !important;
  }

  .site-header,
  .site-header:hover,
  .site-header:focus-within,
  body:has(.site-header:hover) .site-header,
  body:has(.site-header:focus-within) .site-header {
    top: 0 !important;
    transform: translateY(calc(-100% + 16px)) !important;
  }

  .site-header:hover,
  .site-header:focus-within {
    transform: translateY(0) !important;
  }

  body:not([data-page="home"]) .page-hero,
  body:not([data-page="home"]) .job-detail-hero,
  body:not([data-page="home"]) .role-landing-hero,
  body:not([data-page="home"]) .jobify-hero,
  body[data-page="jobs"] .jobs-search-hero,
  body:not([data-page="home"]) .page-hero-shell,
  body:not([data-page="home"]) .job-detail-hero-shell,
  body:not([data-page="home"]) .role-landing-shell,
  body:not([data-page="home"]) .jobify-hero-shell,
  body[data-page="jobs"] .jobs-search-hero .hero-content {
    min-height: 440px !important;
  }
}

/* =============================================================
   ULTIMATE FINAL LIVE OVERRIDE - keep this block last.
   Approved behavior:
   - Header visible, not hidden.
   - All non-home banners full cinematic like homepage carousel.
   - Different banner images for key pages.
   - Share icons visible, not white/blank circles.
============================================================= */
.top-trust-strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 70 !important;
}

.site-header,
.site-header:hover,
.site-header:focus-within,
body:has(.site-header:hover) .site-header,
body:has(.site-header:focus-within) .site-header,
body:has(.top-trust-strip:hover) .site-header,
body:has(.top-trust-strip:focus-within) .site-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 999 !important;
}

body::before {
  content: none !important;
  display: none !important;
}

body[data-page="jobs"] .jobs-search-hero,
body[data-page="jobs"] .hero.compact.jobs-search-hero {
  background-image: url("/assets/hero-4.jpg") !important;
}

body:has(#employer-signup) .page-hero,
body:has(#offline-hiring-services) .page-hero {
  background-image: url("/assets/hero-2.jpg") !important;
}

body:has(#candidate-entry) .page-hero,
body:has(#candidate-dashboard) .page-hero,
body:has(.candidate-dashboard) .page-hero {
  background-image: url("/assets/hero-1.jpg") !important;
}

body[data-page="about"] .page-hero {
  background-image: url("/assets/hero-5.jpg") !important;
}

body[data-page="contact"] .page-hero {
  background-image: url("/assets/hero-6.jpg") !important;
}

body[data-page="blog"] .page-hero {
  background-image: url("/assets/hero-3.jpg") !important;
}

body:not([data-page="home"]) .job-detail-hero {
  background-image: url("/assets/hero-6.jpg") !important;
}

body:not([data-page="home"]) .role-landing-hero,
body:not([data-page="home"]) .jobify-hero {
  background-image: url("/assets/hero-4.jpg") !important;
}

body:not([data-page="home"]) .page-hero,
body:not([data-page="home"]) .job-detail-hero,
body:not([data-page="home"]) .role-landing-hero,
body:not([data-page="home"]) .jobify-hero,
body[data-page="jobs"] .jobs-search-hero,
body[data-page="jobs"] .hero.compact.jobs-search-hero {
  position: relative !important;
  min-height: 82vh !important;
  min-height: 82svh !important;
  height: auto !important;
  display: grid !important;
  align-items: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: #10243b !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  animation: dreamjobBackgroundDrift 18s ease-in-out infinite !important;
}

body:not([data-page="home"]) .page-hero-bg-image,
body:not([data-page="home"]) .job-detail-hero-bg-image,
body:not([data-page="home"]) .role-landing-media img,
body:not([data-page="home"]) .jobify-hero-media img,
body[data-page="jobs"] .jobs-search-hero .hero-bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.08) contrast(1.05) brightness(.98) !important;
  transform-origin: center center !important;
  will-change: transform !important;
  animation: dreamjobBannerDrift 18s ease-in-out infinite !important;
}

body:not([data-page="home"]) .page-hero::before,
body:not([data-page="home"]) .job-detail-hero::before,
body:not([data-page="home"]) .role-landing-hero::before,
body:not([data-page="home"]) .jobify-hero::before,
body[data-page="jobs"] .jobs-search-hero::before,
body[data-page="jobs"] .hero.compact.jobs-search-hero::before,
body[data-page="jobs"] .jobs-find-hero::before,
body[data-page="jobs"] .jobs-find-hero::after,
body[data-page="jobs"] .jobs-search-hero .hero-content::before,
body[data-page="jobs"] .jobs-search-hero .hero-content::after {
  content: none !important;
  display: none !important;
}

body:not([data-page="home"]) .page-hero::after,
body:not([data-page="home"]) .job-detail-hero::after,
body:not([data-page="home"]) .role-landing-hero::after,
body:not([data-page="home"]) .jobify-hero::after,
body[data-page="jobs"] .jobs-search-hero::after,
body[data-page="jobs"] .hero.compact.jobs-search-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(94deg, rgba(16, 36, 59, .76) 0%, rgba(16, 36, 59, .54) 42%, rgba(16, 36, 59, .24) 100%),
    radial-gradient(circle at 18% 46%, rgba(111, 183, 227, .22), transparent 34%),
    linear-gradient(180deg, rgba(16, 36, 59, .26), transparent 34%, rgba(16, 36, 59, .30)) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not([data-page="home"]) .page-hero-shell,
body:not([data-page="home"]) .job-detail-hero-shell,
body:not([data-page="home"]) .role-landing-shell,
body:not([data-page="home"]) .jobify-hero-shell,
body[data-page="jobs"] .jobs-search-hero .hero-content,
body[data-page="jobs"] .jobs-search-hero .jobs-find-hero {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 48px, 1180px) !important;
  max-width: 1180px !important;
  min-height: 82vh !important;
  min-height: 82svh !important;
  margin: 0 auto !important;
  padding: clamp(118px, 14vh, 156px) 0 clamp(96px, 12vh, 136px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not([data-page="home"]) .page-hero h1,
body:not([data-page="home"]) .job-detail-hero h1,
body:not([data-page="home"]) .role-landing-hero h1,
body:not([data-page="home"]) .jobify-hero h1,
body[data-page="jobs"] .jobs-search-hero h1 {
  max-width: 820px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(44px, 5.8vw, 76px) !important;
  line-height: .98 !important;
  text-shadow:
    0 4px 10px rgba(0, 0, 0, .76),
    0 20px 48px rgba(0, 0, 0, .46) !important;
}

body:not([data-page="home"]) .page-hero p:not(.eyebrow),
body:not([data-page="home"]) .job-detail-hero p:not(.eyebrow),
body:not([data-page="home"]) .role-landing-hero p:not(.eyebrow),
body:not([data-page="home"]) .jobify-hero p:not(.eyebrow),
body[data-page="jobs"] .jobs-search-hero p:not(.eyebrow) {
  max-width: 720px !important;
  color: rgba(255, 255, 255, .97) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .97) !important;
  text-shadow:
    0 3px 8px rgba(0, 0, 0, .76),
    0 16px 34px rgba(0, 0, 0, .44) !important;
}

.share-row a::before,
.share-row button::before,
.job-card-share-actions a::before,
.job-card-share-actions button::before,
.article-share .share-row a::before,
.article-share .share-row button::before,
.share-row a::after,
.share-row button::after,
.job-card-share-actions a::after,
.job-card-share-actions button::after,
.article-share .share-row a::after,
.article-share .share-row button::after {
  content: none !important;
  display: none !important;
}

.share-row a,
.share-row button,
.job-card-share-actions a,
.job-card-share-actions button,
.article-share .share-row a,
.article-share .share-row button {
  min-width: 42px !important;
  min-height: 42px !important;
  background: #f8fbfe !important;
  color: #10243b !important;
  -webkit-text-fill-color: #10243b !important;
  border: 1px solid rgba(216, 227, 236, .98) !important;
  box-shadow: 0 10px 22px rgba(16, 36, 59, .12) !important;
}

.share-platform-icon,
.share-platform-icon svg,
.share-row svg,
.job-card-share-actions svg,
.article-share svg {
  position: relative !important;
  display: inline-flex !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #10243b !important;
  stroke: #10243b !important;
  fill: none !important;
  clip: auto !important;
}

.share-platform-icon *,
.share-row svg *,
.job-card-share-actions svg *,
.article-share svg * {
  stroke: #10243b !important;
}

.share-platform-icon svg [fill="currentColor"],
.share-row svg [fill="currentColor"],
.job-card-share-actions svg [fill="currentColor"],
.article-share svg [fill="currentColor"] {
  fill: #10243b !important;
  stroke: #10243b !important;
}

@media (max-width: 768px) {
  .top-trust-strip {
    display: none !important;
  }

  .site-header,
  .site-header:hover,
  .site-header:focus-within,
  body:has(.site-header:hover) .site-header,
  body:has(.site-header:focus-within) .site-header {
    position: sticky !important;
    top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body:not([data-page="home"]) .page-hero,
  body:not([data-page="home"]) .job-detail-hero,
  body:not([data-page="home"]) .role-landing-hero,
  body:not([data-page="home"]) .jobify-hero,
  body[data-page="jobs"] .jobs-search-hero,
  body[data-page="jobs"] .hero.compact.jobs-search-hero,
  body:not([data-page="home"]) .page-hero-shell,
  body:not([data-page="home"]) .job-detail-hero-shell,
  body:not([data-page="home"]) .role-landing-shell,
  body:not([data-page="home"]) .jobify-hero-shell,
  body[data-page="jobs"] .jobs-search-hero .hero-content {
    min-height: 72vh !important;
    min-height: 72svh !important;
  }

  body:not([data-page="home"]) .page-hero-shell,
  body:not([data-page="home"]) .job-detail-hero-shell,
  body:not([data-page="home"]) .role-landing-shell,
  body:not([data-page="home"]) .jobify-hero-shell,
  body[data-page="jobs"] .jobs-search-hero .hero-content {
    width: min(100% - 32px, 1180px) !important;
    padding: 96px 0 78px !important;
  }

  body:not([data-page="home"]) .page-hero h1,
  body:not([data-page="home"]) .job-detail-hero h1,
  body:not([data-page="home"]) .role-landing-hero h1,
  body:not([data-page="home"]) .jobify-hero h1,
  body[data-page="jobs"] .jobs-search-hero h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.03 !important;
  }
}