/* /careers — employer brand and vacancy state. Everything stays scoped. */
.career {
  --career-navy: var(--c-band);
  --career-navy-deep: var(--c-band-deep);
  background: var(--c-surface);
  color: var(--c-body);
}
.career h1,
.career h2,
.career h3,
.career p { margin-block-start: 0; }
.career-kicker {
  margin-block-end: var(--s-2);
  color: var(--c-green);
  font-size: var(--t-sm);
  font-weight: 700;
}

/* hero */
.career-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-block-size: 570px;
  background: linear-gradient(125deg, var(--career-navy-deep), var(--career-navy) 62%, var(--c-primary-deep));
  color: #fff;
}
.career-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 26, 56, 0.12), rgba(9, 26, 56, 0.78)),
    url("../../uploads/poster/companyBuilding.webp") center / cover no-repeat;
  opacity: 0.22;
}
[dir="rtl"] .career-hero::before {
  background: linear-gradient(-90deg, rgba(9, 26, 56, 0.12), rgba(9, 26, 56, 0.78)),
    url("../../uploads/poster/companyBuilding.webp") center / cover no-repeat;
}
.career-hero__inner {
  min-block-size: 570px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.7fr);
  align-items: center;
  gap: clamp(40px, 8vw, 120px);
  padding-block: var(--s-16);
}
.career-crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-10);
  color: rgba(255,255,255,.62);
  font-size: var(--t-sm);
}
.career-crumb a { color: inherit; }
.career-crumb svg { inline-size: 13px; block-size: 13px; transform: rotate(-90deg); }
[dir="ltr"] .career-crumb svg { transform: rotate(90deg); }
.career-hero h1 {
  /* max-inline-size: 16ch; */
  margin-block-end: var(--s-5);
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}
[dir="rtl"] .career-hero h1 { letter-spacing: 0; }
.career-hero__lede {
  max-inline-size: 58ch;
  margin-block-end: var(--s-8);
  color: rgba(255,255,255,.76);
  font-size: var(--t-md);
  line-height: 2;
}
.career-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 48px;
  padding-inline: var(--s-6);
  border-radius: 999px;
  background: var(--c-green);
  color: #fff;
  font-weight: 700;
}
.career-hero__cta:hover { background: var(--c-primary); color: #fff; }
.career-hero__cta svg { inline-size: 18px; block-size: 18px; }
.career-hero__art {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  max-inline-size: 390px;
  justify-self: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.09), rgba(255,255,255,.02) 62%, transparent 63%);
}
.career-hero__art::before,
.career-hero__art::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
}
.career-hero__art::before { inset: 12%; }
.career-hero__art::after { inset: 25%; }
.career-hero__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.career-hero__orb--one { inline-size: 280px; block-size: 280px; inset: -150px auto auto -80px; background: rgba(52,155,71,.16); }
.career-hero__orb--two { inline-size: 360px; block-size: 360px; inset: auto -180px -220px auto; background: rgba(15,127,184,.2); }

/* shared section heads */
.career-values,
.career-roles { padding-block: var(--s-20); }
.career-section-head {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(300px,1fr);
  gap: var(--s-12);
  align-items: end;
  margin-block-end: var(--s-10);
}
.career-section-head h2,
.career-fields h2,
.career-process h2 {
  margin: 0;
  color: var(--c-ink);
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
}
.career-section-head > p,
.career-fields__intro > p:last-child {
  margin: 0;
  color: var(--c-muted);
  line-height: var(--lh-body);
}

/* values */
.career-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin: 0;
  padding: 0;
}
.career-value {
  position: relative;
  overflow: hidden;
  min-block-size: 245px;
  padding: var(--s-8);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-surface);
}
.career-value::after {
  content: "";
  position: absolute;
  inline-size: 120px;
  block-size: 120px;
  inset-inline-end: -55px;
  inset-block-end: -55px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  opacity: .7;
}
.career-value__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: var(--s-6);
  border-radius: 14px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.career-value__icon svg { inline-size: 24px; block-size: 24px; }
.career-value h3 { margin-block-end: var(--s-3); color: var(--c-ink); font-size: var(--t-md); }
.career-value p { margin: 0; color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-body); }

/* real holding sectors */
.career-fields { padding-block: var(--s-16); background: var(--c-paper); }
.career-fields__inner { display: grid; grid-template-columns: minmax(260px,.55fr) minmax(0,1fr); gap: var(--s-16); align-items: center; }
.career-fields__intro h2 { margin-block-end: var(--s-5); }
.career-fields__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-3); margin: 0; padding: 0; }
.career-field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 70px;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-surface);
}
.career-field span { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 10px; background: var(--c-green-soft); color: var(--c-green); flex: none; }
.career-field svg { inline-size: 21px; block-size: 21px; }
.career-field b { color: var(--c-ink); font-size: var(--t-sm); }

/* vacancy state */
.career-section-head--roles { grid-template-columns: 1fr auto; align-items: center; }
.career-roles__count { display: grid; place-items: center; inline-size: 58px; block-size: 58px; border-radius: 50%; background: var(--career-navy); color: #fff; font-size: var(--t-lg); font-weight: 700; }
.career-empty {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: var(--s-6);
  padding: clamp(28px,4vw,50px);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c-paper), var(--c-surface));
}
.career-empty__icon { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 18px; background: var(--c-primary-soft); color: var(--c-primary); }
.career-empty__icon svg { inline-size: 30px; block-size: 30px; }
.career-empty h3 { margin-block-end: var(--s-2); color: var(--c-ink); font-size: var(--t-md); }
.career-empty p { margin: 0; color: var(--c-muted); line-height: var(--lh-body); }

/* process */
.career-process { padding-block: var(--s-20); background: var(--career-navy-deep); color: #fff; }
.career-process__head { margin-block-end: var(--s-10); }
.career-process h2 { color: #fff; }
.career-process__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-8); margin: 0; padding: 0; counter-reset: none; }
.career-step { position: relative; padding-block-start: var(--s-6); border-block-start: 1px solid rgba(255,255,255,.18); }
.career-step__n { display: block; margin-block-end: var(--s-5); color: var(--c-on-dark-accent); font-size: var(--t-sm); font-weight: 700; }
.career-step h3 { margin-block-end: var(--s-3); color: #fff; font-size: var(--t-md); }
.career-step p { margin: 0; color: rgba(255,255,255,.65); font-size: var(--t-sm); line-height: var(--lh-body); }

@media (max-width: 900px) {
  .career-hero__inner { grid-template-columns: 1fr; min-block-size: 0; }
  .career-hero__art { display: none; }
  .career-section-head,
  .career-fields__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .career-values__grid { grid-template-columns: 1fr; }
  .career-value { min-block-size: 0; }
}
@media (max-width: 680px) {
  .career-hero { min-block-size: 0; }
  .career-hero__inner { padding-block: var(--s-12); }
  .career-crumb { margin-block-end: var(--s-8); }
  .career-hero h1 { font-size: 2.35rem; }
  .career-values,
  .career-roles,
  .career-process { padding-block: var(--s-12); }
  .career-fields__grid,
  .career-process__grid { grid-template-columns: 1fr; }
  .career-empty { grid-template-columns: 1fr; align-items: start; }
  .career-empty .btn { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .career-hero__cta { transition: none; }
}