/* ========================================================================== 
   RECRUITMENT / CAREER HUB
   ========================================================================== */

.recruitment-page {
  /* Keep local aliases semantic, but source every shared value from reset.css. */
  --career-ink: var(--color-text-strong);
  --career-body: var(--color-text-body);
  --career-muted: var(--color-text-muted);
  --career-placeholder: var(--color-text-placeholder);
  --career-line: var(--color-control-border);
  --career-primary-line: var(--color-primary-line);
  --career-blue: var(--brand-color-1);
  --career-blue-hover: var(--color-primary-hover);
  --career-orange: var(--brand-color-2);
  --career-soft-blue: var(--color-primary-soft);
  --career-soft-orange: var(--color-warning-bg);
  --career-surface: var(--color-surface);
  --career-surface-subtle: var(--color-surface-subtle);
  --career-radius: var(--radius-dialog);
  --career-radius-lg: var(--border-radius-3xl);
  font-family: var(--font-family-base);
  color: var(--career-ink);
  /* One continuous canvas for hero, openings and recruitment process. */
  background: linear-gradient(180deg, var(--career-surface-subtle) 0%, var(--career-surface) 42%, var(--color-primary-soft) 100%);
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
}

.recruitment-page .breadcrumb-nav {
  /* Keep the spacing inside the hero; a top margin here can collapse outside
     the section and create a blank band below the sticky header. */
  margin: 0;
  padding: 14px 0 0;
}

.recruitment-page .breadcrumb {
  margin-bottom: 0;
}

.recruitment-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 6px 12px;
  border: 1px solid rgba(var(--brand-color-1-rgb), 0.18);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--career-surface) 90%, transparent);
  color: var(--career-blue);
  font-size: 1.16rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.recruitment-eyebrow .js-svg-inject,
.recruitment-eyebrow svg {
  width: 15px;
  height: 15px;
}

.recruitment-eyebrow--soft {
  border-color: rgba(var(--brand-color-1-rgb), 0.14);
  background: var(--career-soft-blue);
}

.recruitment-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-pill);
  font-size: 1.42rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.recruitment-button:hover,
.recruitment-button:focus-visible {
  color: inherit;
  transform: translateY(-1px);
}

.recruitment-button .js-svg-inject,
.recruitment-button svg {
  width: 17px;
  height: 17px;
}

.recruitment-button--primary {
  background: var(--career-blue);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(var(--brand-color-1-rgb), .2);
}

.recruitment-button--primary:hover,
.recruitment-button--primary:focus-visible {
  background: var(--career-blue-hover);
  color: var(--white);
  box-shadow: 0 16px 30px rgba(var(--brand-color-1-rgb), .26);
}

.recruitment-button--accent {
  background: var(--career-orange);
  color: var(--white);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--career-orange) 25%, transparent);
}

.recruitment-button--accent:hover,
.recruitment-button--accent:focus-visible {
  background: color-mix(in srgb, var(--career-orange) 88%, var(--black));
  color: var(--white);
}

.recruitment-button--secondary {
  border-color: var(--color-primary-border);
  background: var(--career-surface);
  color: var(--career-blue);
}

.recruitment-button--secondary:hover,
.recruitment-button--secondary:focus-visible {
  border-color: var(--career-blue);
  background: var(--career-soft-blue);
  color: var(--career-blue);
}

.recruitment-button--full {
  width: 100%;
}

.recruitment-button:focus-visible,
.recruitment-job-card a:focus-visible,
.recruitment-related-card a:focus-visible,
.recruitment-pagination a:focus-visible,
.recruitment-consent a:focus-visible {
  outline: 3px solid rgba(var(--brand-color-1-rgb), .3);
  outline-offset: 3px;
}

/* Landing hero */
.recruitment-hero {
  position: relative;
  padding: 0 0 34px;
  background:
    radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--career-orange) 16%, transparent), transparent 25%),
    radial-gradient(circle at 5% 55%, rgba(var(--brand-color-1-rgb), .14), transparent 35%);
}

.recruitment-hero::before {
  /* The complete ring stays inside the hero instead of bleeding into header. */
  width: 260px;
  height: 260px;
  position: absolute;
  top: 64px;
  right: -64px;
  border: 1px solid rgba(var(--brand-color-1-rgb), .12);
  border-radius: var(--border-radius-circle);
  box-shadow: 0 0 0 32px rgba(var(--brand-color-1-rgb), .035), 0 0 0 64px rgba(var(--brand-color-1-rgb), .018);
  content: "";
  pointer-events: none;
}

.recruitment-hero .container {
  position: relative;
  z-index: 1;
}

.recruitment-detail-hero__shell > *,
.recruitment-process__grid > *,
.recruitment-application__grid > *,
.recruitment-section-heading > * {
  min-width: 0;
}

.recruitment-hero__shell {
  min-height: 285px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  /* Share the same left/right grid line as the breadcrumb and search bar. */
  padding: 46px 0 72px;
}

.recruitment-hero__copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 920px;
}

.recruitment-hero__copy h1 {
  max-width: 920px;
  margin: 14px 0;
  color: var(--career-ink);
  font-size: clamp(3.25rem, 4.7vw, 5.4rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  text-wrap: balance;
}

.recruitment-hero__copy p {
  max-width: 720px;
  margin: 0;
  color: var(--career-body);
  font-size: 1.64rem;
  line-height: 1.7;
}

.recruitment-hero__metric {
  min-width: 166px;
  min-height: 164px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 20px;
  border: 1px solid var(--career-line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--career-surface) 88%, transparent);
  box-shadow: 0 22px 42px rgba(var(--brand-color-1-rgb), .1);
  text-align: center;
}

.recruitment-hero__metric > .js-svg-inject,
.recruitment-hero__metric > svg {
  width: 25px;
  height: 25px;
  margin-bottom: 4px;
  color: var(--career-orange);
}

.recruitment-hero__metric strong {
  color: var(--career-blue);
  font-size: 4.2rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -.05em;
  line-height: 1;
}

.recruitment-hero__metric span:last-child {
  color: var(--career-muted);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.recruitment-filter {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, .72fr) auto;
  gap: 10px;
  margin: -49px auto 0;
  padding: 11px;
  border: 1px solid var(--career-line);
  border-radius: var(--border-radius-xl);
  background: var(--career-surface);
  box-shadow: 0 20px 42px rgba(var(--brand-color-1-rgb), .14);
}

.recruitment-filter__keyword {
  min-height: 49px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-lg);
  background: var(--career-surface-subtle);
  color: var(--career-muted);
}

.recruitment-filter__keyword:focus-within {
  border-color: rgba(var(--brand-color-1-rgb), .45);
  box-shadow: 0 0 0 3px rgba(var(--brand-color-1-rgb), .1);
}

.recruitment-filter__keyword .js-svg-inject,
.recruitment-filter__keyword svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.recruitment-filter input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--career-ink);
  font: inherit;
  font-size: 1.42rem;
}

.recruitment-filter input::placeholder {
  color: var(--career-placeholder);
}

.recruitment-filter__select.site-select {
  min-height: 49px;
  font-size: 1.42rem;
}

.recruitment-filter__select.site-select.is-open {
  z-index: 2;
}

.recruitment-filter .recruitment-button {
  min-height: 49px;
  white-space: nowrap;
}

/* Job listing */
.recruitment-openings {
  padding: 68px 0 78px;
}

.recruitment-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.recruitment-section-heading > div > span,
.recruitment-section-heading > div > div {
  display: block;
  margin-bottom: 5px;
  color: var(--career-blue);
  font-size: 1.16rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.recruitment-section-heading h2 {
  margin: 0;
  color: var(--career-ink);
  font-size: clamp(2.5rem, 3.2vw, 3.4rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

.recruitment-section-heading > p {
  margin: 0 0 3px;
  color: var(--career-muted);
  font-size: 1.5rem;
  text-align: right;
}

.recruitment-job-list {
  display: grid;
  gap: 14px;
}

.recruitment-job-card {
  padding: 23px 25px 20px;
  border: 1px solid var(--career-line);
  border-radius: var(--career-radius);
  background: var(--career-surface);
  box-shadow: 0 8px 19px rgba(var(--brand-color-1-rgb), .035);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.recruitment-job-card:hover {
  border-color: var(--career-primary-line);
  box-shadow: 0 18px 32px rgba(var(--brand-color-1-rgb), .09);
  transform: translateY(-2px);
}

.recruitment-job-card--featured {
  border-color: var(--color-primary-border);
  background: linear-gradient(100deg, var(--career-surface) 0%, var(--career-surface-subtle) 100%);
}

.recruitment-job-card__head {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recruitment-job-card__department,
.recruitment-job-card__featured {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--career-muted);
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .025em;
  text-transform: uppercase;
}

.recruitment-job-card__featured {
  padding: 4px 8px;
  border-radius: var(--border-radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.recruitment-job-card__featured .js-svg-inject,
.recruitment-job-card__featured svg {
  width: 14px;
  height: 14px;
}

.recruitment-job-card h3 {
  margin: 9px 0 10px;
  font-size: 2.05rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -.018em;
  line-height: 1.25;
}

.recruitment-job-card h3 a {
  color: var(--career-ink);
  text-decoration: none;
}

.recruitment-job-card h3 a:hover {
  color: var(--career-blue);
}

.recruitment-job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
}

.recruitment-job-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--career-muted);
  font-size: 1.3rem;
  line-height: 1.45;
}

.recruitment-job-card__meta .js-svg-inject,
.recruitment-job-card__meta svg {
  width: 16px;
  height: 16px;
  color: var(--career-blue);
}

.recruitment-job-card__summary {
  max-width: 900px;
  margin: 14px 0 17px;
  color: var(--career-body);
  font-size: 1.38rem;
  line-height: 1.62;
}

.recruitment-job-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-150);
}

.recruitment-job-card__footer > div {
  display: grid;
  gap: 3px;
}

.recruitment-job-card__footer strong {
  color: var(--color-primary-text);
  font-size: 1.45rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-job-card__footer span {
  color: var(--career-muted);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-job-card__link,
.recruitment-related-card > a,
.recruitment-section-heading > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--career-blue);
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.recruitment-job-card__link .js-svg-inject,
.recruitment-job-card__link svg,
.recruitment-related-card > a .js-svg-inject,
.recruitment-related-card > a svg,
.recruitment-section-heading > a .js-svg-inject,
.recruitment-section-heading > a svg {
  width: 16px;
  height: 16px;
  transition: transform .18s ease;
}

.recruitment-job-card__link:hover .js-svg-inject,
.recruitment-job-card__link:hover svg,
.recruitment-related-card > a:hover .js-svg-inject,
.recruitment-related-card > a:hover svg,
.recruitment-section-heading > a:hover .js-svg-inject,
.recruitment-section-heading > a:hover svg {
  transform: translateX(3px);
}

.recruitment-empty {
  max-width: 680px;
  display: grid;
  justify-items: center;
  margin: 20px auto 0;
  padding: 48px 38px;
  border: 1px dashed var(--color-primary-border);
  border-radius: var(--career-radius);
  background: var(--career-surface);
  text-align: center;
}

.recruitment-empty > .js-svg-inject,
.recruitment-empty > svg {
  width: 38px;
  height: 38px;
  color: var(--career-blue);
}

.recruitment-empty h3 {
  margin: 14px 0 7px;
  color: var(--career-ink);
  font-size: 2.2rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-empty p {
  max-width: 540px;
  margin: 0;
  color: var(--career-muted);
  font-size: 1.4rem;
  line-height: 1.62;
}

.recruitment-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 21px;
}

.recruitment-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 28px;
}

.recruitment-pagination a,
.recruitment-pagination span {
  min-width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--career-line);
  border-radius: var(--border-radius-md);
  background: var(--career-surface);
  color: var(--career-muted);
  font-size: 1.28rem;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.recruitment-pagination span {
  min-width: 18px;
  border: 0;
  background: transparent;
}

.recruitment-pagination a:hover,
.recruitment-pagination a.is-active {
  border-color: var(--career-blue);
  background: var(--career-blue);
  color: var(--white);
}

.recruitment-pagination .js-svg-inject,
.recruitment-pagination svg {
  width: 16px;
  height: 16px;
}

/* Process */
.recruitment-process {
  padding: 70px 0;
  background: transparent;
}

.recruitment-process__grid {
  display: grid;
  grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 70px;
}

.recruitment-process__intro h2 {
  max-width: 390px;
  margin: 13px 0 12px;
  color: var(--career-ink);
  font-size: clamp(2.7rem, 3.5vw, 3.8rem);
  font-weight: var(--font-weight-bold);
}

.recruitment-process__intro p {
  max-width: 500px;
  margin: 0 0 21px;
  color: var(--career-body);
  font-size: 1.45rem;
  line-height: 1.65;
}

.recruitment-process__steps {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recruitment-process__steps li,
.recruitment-application__steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.recruitment-process__steps li {
  padding: 18px 20px;
  border: 1px solid var(--career-line);
  border-radius: var(--border-radius-xl);
  background: color-mix(in srgb, var(--career-surface) 88%, transparent);
}

.recruitment-process__steps li > span,
.recruitment-application__steps li > span {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-circle);
  background: var(--career-blue);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-process__steps strong,
.recruitment-application__steps strong {
  display: block;
  margin: 1px 0 3px;
  color: var(--career-ink);
  font-size: 1.55rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-process__steps p,
.recruitment-application__steps p {
  margin: 0;
  color: var(--career-muted);
  font-size: 1.5rem;
  line-height: 1.5;
}

/* Detail */
.recruitment-page--detail {
  padding-top: 1px;
}

.recruitment-detail-hero {
  padding: 18px 0 0;
}

.recruitment-detail-hero__shell {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 43px 5.5%;
  border-radius: var(--career-radius-lg);
  background:
    radial-gradient(circle at 85% 0, color-mix(in srgb, var(--career-orange) 23%, transparent), transparent 30%),
    linear-gradient(125deg, var(--blue-900) 0%, var(--brand-color-1-dark) 58%, var(--blue-600) 100%);
  box-shadow: 0 25px 50px rgba(var(--brand-color-1-rgb), .18);
}

.recruitment-detail-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--white) 26%, transparent);
  border-radius: var(--border-radius-pill);
  color: var(--color-primary-line);
  font-size: 1.16rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.recruitment-detail-hero__kicker .js-svg-inject,
.recruitment-detail-hero__kicker svg {
  width: 15px;
  height: 15px;
}

.recruitment-detail-hero h1 {
  max-width: 820px;
  margin: 13px 0 11px;
  color: var(--white);
  font-size: clamp(3rem, 4vw, 4.7rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.035em;
  line-height: 1.1;
}

.recruitment-detail-hero p {
  max-width: 735px;
  margin: 0;
  color: color-mix(in srgb, var(--white) 83%, transparent);
  font-size: 1.52rem;
  line-height: 1.65;
}

.recruitment-detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

.recruitment-detail-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, var(--white) 90%, transparent);
  font-size: 1.3rem;
  font-weight: var(--font-weight-semibold);
}

.recruitment-detail-hero__meta .js-svg-inject,
.recruitment-detail-hero__meta svg {
  width: 17px;
  height: 17px;
  color: var(--brand-color-1-light);
}

.recruitment-detail-hero .recruitment-button {
  flex: 0 0 auto;
  min-width: 166px;
}

.recruitment-detail-content {
  padding: 42px 0 72px;
}

.recruitment-detail-content__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 325px);
  align-items: start;
  gap: 32px;
}

.recruitment-detail-content__article {
  min-width: 0;
}

.recruitment-rich-content {
  min-width: 0;
  margin-bottom: 34px;
}

.recruitment-rich-content:last-child {
  margin-bottom: 0;
}

.recruitment-rich-content h2 {
  margin: 0 0 15px;
  color: var(--career-ink);
  font-size: 2.45rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -.025em;
  line-height: 1.22;
}

.recruitment-rich-content h3,
.recruitment-rich-content h4 {
  margin: 22px 0 8px;
  color: var(--career-ink);
  font-size: 1.8rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.recruitment-rich-content p,
.recruitment-rich-content li,
.recruitment-rich-content blockquote,
.recruitment-rich-content td,
.recruitment-rich-content th {
  color: var(--career-body);
  font-size: 1.48rem;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

.recruitment-rich-content p {
  margin: 0 0 12px;
}

.recruitment-rich-content ul,
.recruitment-rich-content ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 23px;
}

.recruitment-rich-content li::marker {
  color: var(--career-blue);
}

.recruitment-rich-content a {
  color: var(--career-blue);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.recruitment-rich-content blockquote {
  margin: 18px 0;
  padding: 13px 18px;
  border-left: 4px solid var(--career-orange);
  background: var(--color-warning-bg);
}

.recruitment-rich-content table {
  display: block;
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.recruitment-rich-content :is(img, video, iframe) {
  max-width: 100%;
  height: auto;
}

.recruitment-rich-content iframe {
  width: 100%;
  min-height: 220px;
  border: 0;
}

.recruitment-rich-content pre {
  max-width: 100%;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--career-line);
  border-radius: var(--border-radius-lg);
  background: var(--career-surface-subtle);
  color: var(--career-body);
  font: inherit;
  line-height: 1.6;
}

.recruitment-rich-content th,
.recruitment-rich-content td {
  padding: 9px 12px;
  border: 1px solid var(--career-line);
  text-align: left;
}

.recruitment-rich-content th {
  color: var(--career-ink);
  background: var(--blue-25);
  font-weight: var(--font-weight-bold);
}

.recruitment-rich-content--empty {
  padding: 25px;
  border: 1px dashed var(--color-primary-border);
  border-radius: var(--border-radius-xl);
  background: var(--career-surface-subtle);
}

.recruitment-apply-card {
  position: sticky;
  top: 18px;
  padding: 21px;
  border: 1px solid var(--career-line);
  border-radius: var(--career-radius);
  background: var(--career-surface);
  box-shadow: 0 16px 30px rgba(var(--brand-color-1-rgb), .09);
}

.recruitment-apply-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 17px;
}

.recruitment-apply-card__head > .js-svg-inject,
.recruitment-apply-card__head > svg {
  width: 37px;
  height: 37px;
  padding: 9px;
  border-radius: var(--radius-control-sm);
  background: var(--career-soft-blue);
  color: var(--career-blue);
}

.recruitment-apply-card__head span:not(.js-svg-inject) {
  display: block;
  color: var(--career-muted);
  font-size: 1.12rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.recruitment-apply-card__head strong {
  display: block;
  margin-top: 3px;
  color: var(--career-ink);
  font-size: 1.7rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-apply-card__facts {
  display: grid;
  gap: 0;
  margin: 0 0 19px;
}

.recruitment-apply-card__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--gray-150);
}

.recruitment-apply-card__facts dt {
  color: var(--career-muted);
  font-size: 1.23rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-apply-card__facts dd {
  margin: 0;
  color: var(--career-ink);
  font-size: 1.23rem;
  font-weight: var(--font-weight-bold);
  text-align: right;
  overflow-wrap: anywhere;
}

.recruitment-apply-card > p {
  margin: 14px 0 5px;
  color: var(--career-muted);
  font-size: 1.14rem;
  line-height: 1.5;
}

.recruitment-apply-card > small {
  color: var(--career-placeholder);
  font-size: 1.1rem;
}

.recruitment-related {
  padding: 58px 0 73px;
  border-top: 1px solid var(--gray-150);
  background: var(--color-primary-soft);
}

.recruitment-section-heading > a {
  margin-bottom: 5px;
}

.recruitment-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.recruitment-related-card {
  display: flex;
  flex-direction: column;
  min-height: 192px;
  padding: 20px;
  border: 1px solid var(--career-line);
  border-radius: var(--border-radius-xl);
  background: var(--career-surface);
}

.recruitment-related-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--career-muted);
  font-size: 1.12rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .035em;
  text-transform: uppercase;
}

.recruitment-related-card__eyebrow .js-svg-inject,
.recruitment-related-card__eyebrow svg {
  width: 14px;
  height: 14px;
}

.recruitment-related-card h3 {
  margin: 11px 0 8px;
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.32;
}

.recruitment-related-card h3 a {
  color: var(--career-ink);
  text-decoration: none;
}

.recruitment-related-card h3 a:hover {
  color: var(--career-blue);
}

.recruitment-related-card p {
  margin: 0 0 15px;
  color: var(--career-muted);
  font-size: 1.24rem;
  line-height: 1.5;
}

.recruitment-related-card > a {
  margin-top: auto;
}

/* Application form */
.recruitment-page--apply {
  min-height: calc(100vh - 80px);
}

.recruitment-application {
  padding: 28px 0 74px;
}

.recruitment-application__grid {
  display: grid;
  grid-template-columns: minmax(245px, .69fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 56px;
}

.recruitment-application__intro {
  padding: 28px 0;
}

.recruitment-application__intro h1 {
  max-width: 440px;
  margin: 14px 0 12px;
  color: var(--career-ink);
  font-size: clamp(3rem, 4vw, 4.4rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.04em;
  line-height: 1.1;
}

.recruitment-application__intro > p {
  max-width: 480px;
  margin: 0;
  color: var(--career-body);
  font-size: 1.49rem;
  line-height: 1.68;
}

.recruitment-application__steps {
  display: grid;
  gap: 22px;
  margin: 31px 0 0;
  padding: 0;
  list-style: none;
}

.recruitment-application__steps li > span {
  background: var(--career-soft-blue);
  color: var(--career-blue);
}

.recruitment-application__form-card {
  padding: 30px;
  border: 1px solid var(--career-line);
  border-radius: var(--radius-card);
  background: var(--career-surface);
  box-shadow: 0 24px 48px rgba(var(--brand-color-1-rgb), .1);
}

.recruitment-application__form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.recruitment-application__form-head > .js-svg-inject,
.recruitment-application__form-head > svg {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: var(--border-radius-lg);
  background: var(--career-soft-orange);
  color: var(--career-orange);
}

.recruitment-application__form-head h2 {
  margin: 0 0 3px;
  color: var(--career-ink);
  font-size: 2.3rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -.025em;
}

.recruitment-application__form-head p {
  margin: 0;
  color: var(--career-muted);
  font-size: 1.24rem;
}

.recruitment-application__form-head b,
.recruitment-form-field b {
  color: var(--color-danger-text);
}

.recruitment-form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid var(--color-danger-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-danger-bg-subtle);
  color: var(--color-danger-text);
}

.recruitment-form-notice.is-success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.recruitment-form-notice .js-svg-inject,
.recruitment-form-notice svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.recruitment-form-notice p {
  margin: 0;
  font-size: 1.33rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.recruitment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.recruitment-form-field {
  min-width: 0;
}

.recruitment-form-field--wide {
  grid-column: 1 / -1;
}

.recruitment-form-field > label:first-child {
  display: block;
  margin: 0 0 7px;
  color: var(--career-body);
  font-size: 1.33rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-form-field input:not([type="file"]),
.recruitment-form-field select,
.recruitment-form-field textarea {
  width: 100%;
  border: 1px solid var(--career-line);
  border-radius: var(--radius-control-sm);
  outline: 0;
  background: var(--career-surface);
  color: var(--career-ink);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1.45;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.recruitment-form-field input:not([type="file"]),
.recruitment-form-field select {
  height: 45px;
  padding: 0 12px;
}

.recruitment-form-field textarea {
  min-height: 118px;
  padding: 11px 12px;
  resize: vertical;
}

.recruitment-form-field input:not([type="file"]):focus,
.recruitment-form-field select:focus,
.recruitment-form-field textarea:focus {
  border-color: var(--career-blue);
  box-shadow: 0 0 0 3px rgba(var(--brand-color-1-rgb), .12);
}

.recruitment-cv-upload {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px dashed var(--career-line);
  border-radius: var(--radius-control);
  background: var(--career-surface-subtle);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.recruitment-cv-upload:hover,
.recruitment-cv-upload:focus-within {
  border-color: var(--career-blue);
  background: var(--career-soft-blue);
}

.recruitment-cv-upload > .js-svg-inject,
.recruitment-cv-upload > svg {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  color: var(--career-blue);
}

.recruitment-cv-upload > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.recruitment-cv-upload strong {
  color: var(--career-body);
  font-size: 1.36rem;
  font-weight: var(--font-weight-bold);
}

.recruitment-cv-upload small {
  color: var(--career-muted);
  font-size: 1.17rem;
  line-height: 1.4;
}

.recruitment-cv-upload__button {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid var(--color-primary-border);
  border-radius: var(--border-radius-md);
  background: var(--career-surface);
  color: var(--career-blue);
  font-size: 1.18rem;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

#recruitment-cv {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#recruitment-cv:focus + * {
  outline: 3px solid rgba(var(--brand-color-1-rgb), .3);
}

.recruitment-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 20px 0 18px;
  color: var(--career-muted);
  font-size: 1.22rem;
  line-height: 1.52;
}

.recruitment-consent input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--career-blue);
}

.recruitment-consent a {
  color: var(--career-blue);
  font-weight: var(--font-weight-bold);
}

.recruitment-form-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  margin: 13px 0 0;
  color: var(--career-muted);
  font-size: 1.13rem;
  line-height: 1.45;
  text-align: center;
}

.recruitment-form-note .js-svg-inject,
.recruitment-form-note svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--color-success-text);
}

.recruitment-honeypot {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Laptop: retain the desktop composition while reducing fixed empty space. */
@media (max-width: 1199.98px) {
  .recruitment-hero__shell {
    gap: clamp(24px, 4vw, 40px);
  }

  .recruitment-detail-hero__shell {
    padding: 40px clamp(24px, 4vw, 48px);
  }
}

/* Tablet: give content, forms and rich job details enough readable width. */
@media (max-width: 991.98px) {
  .recruitment-hero__shell {
    min-height: 260px;
    gap: clamp(24px, 4vw, 36px);
    padding: 40px 0 64px;
  }

  .recruitment-hero__metric {
    min-width: 148px;
    min-height: 148px;
  }

  .recruitment-filter {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) minmax(200px, .72fr);
  }

  .recruitment-filter .recruitment-button {
    min-width: 16rem;
    grid-column: 1 / -1;
    justify-self: end;
  }

  .recruitment-process__grid,
  .recruitment-application__grid,
  .recruitment-detail-content__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .recruitment-application__intro {
    padding: 0;
  }

  .recruitment-application__form-card {
    padding: 26px;
  }

  .recruitment-apply-card {
    position: static;
  }

  .recruitment-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone: stack controls, retain 48px touch targets and avoid clipped content. */
@media (max-width: 767.98px) {
  .recruitment-page .breadcrumb-nav {
    padding-top: 12px;
  }

  .recruitment-hero {
    padding-bottom: 24px;
  }

  .recruitment-hero__shell {
    min-height: 0;
    display: block;
    padding: 32px 0 70px;
  }

  .recruitment-hero__copy h1 {
    font-size: clamp(2.65rem, 8.5vw, 3.35rem);
  }

  .recruitment-hero__copy p {
    font-size: clamp(1.35rem, 4vw, 1.5rem);
  }

  .recruitment-hero__metric {
    width: min(100%, 15.2rem);
    min-width: 0;
    min-height: 12.6rem;
    margin-top: 20px;
  }

  .recruitment-hero__metric strong {
    font-size: 3.5rem;
  }

  .recruitment-filter {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: -43px;
    padding: 8px;
    border-radius: var(--border-radius-xl);
  }

  .recruitment-filter__keyword,
  .recruitment-filter__select.site-select,
  .recruitment-filter .recruitment-button {
    min-height: 48px;
  }

  .recruitment-filter .recruitment-button {
    width: 100%;
    min-width: 0;
    grid-column: auto;
    justify-self: stretch;
  }

  .recruitment-openings {
    padding: 51px 0 55px;
  }

  .recruitment-section-heading {
    display: block;
    margin-bottom: 19px;
  }

  .recruitment-section-heading > p {
    margin-top: 8px;
    text-align: left;
  }

  .recruitment-section-heading > a {
    margin-top: 11px;
  }

  .recruitment-job-card {
    padding: 19px 18px 17px;
  }

  .recruitment-job-card__head {
    min-height: 0;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .recruitment-job-card__featured {
    flex: 0 0 auto;
  }

  .recruitment-job-card h3 {
    font-size: 1.86rem;
  }

  .recruitment-job-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .recruitment-pagination {
    flex-wrap: wrap;
  }

  .recruitment-pagination a,
  .recruitment-pagination span {
    min-width: 42px;
    height: 42px;
  }

  .recruitment-pagination span {
    min-width: 18px;
  }

  .recruitment-process {
    padding: 51px 0;
  }

  .recruitment-process__grid,
  .recruitment-application__grid,
  .recruitment-detail-content__grid {
    gap: 25px;
  }

  .recruitment-detail-hero {
    padding-top: 12px;
  }

  .recruitment-detail-hero__shell {
    display: block;
    padding: 30px 20px;
    border-radius: var(--career-radius);
  }

  .recruitment-detail-hero h1,
  .recruitment-application__intro h1 {
    font-size: clamp(2.55rem, 8vw, 3.15rem);
  }

  .recruitment-detail-hero .recruitment-button {
    width: 100%;
    margin-top: 23px;
  }

  .recruitment-detail-content {
    padding: 33px 0 51px;
  }

  .recruitment-related {
    padding: 45px 0 52px;
  }

  .recruitment-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .recruitment-application {
    padding: 17px 0 51px;
  }

  .recruitment-application__form-card {
    padding: 21px 17px;
    border-radius: var(--border-radius-xl);
  }

  .recruitment-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .recruitment-form-field--wide {
    grid-column: auto;
  }

  .recruitment-form-field input:not([type="file"]),
  .recruitment-form-field select {
    min-height: 48px;
    height: auto;
  }
}

/* Compact phones: preserve breathing room without hiding important controls. */
@media (max-width: 479.98px) {
  .recruitment-hero__shell {
    padding-top: 27px;
    padding-bottom: 64px;
  }

  .recruitment-detail-hero__shell {
    padding: 24px 16px;
  }

  .recruitment-job-card,
  .recruitment-application__form-card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .recruitment-empty {
    padding: 32px 18px;
  }

  .recruitment-empty__actions .recruitment-button {
    width: 100%;
  }

  .recruitment-cv-upload {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: start;
  }

  .recruitment-cv-upload__button {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }

  .recruitment-form-note {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruitment-page *,
  .recruitment-page *::before,
  .recruitment-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}