/* -------------------------------------------------------
   SANFORGE STUDIO - CAREER PAGE
   Minimal, rounded "islands" that visually match contact.
   This stylesheet only affects the Career page.
------------------------------------------------------- */

.career-hero .about-hero-inner {
  max-width: 850px;
}

.career-openings {
  padding: 28px 0 110px;
}

.career-section-head {
  align-items: end;
}

.career-section-head > p {
  margin: 0;
  color: #777;
  font-size: 14px;
}

/* ROLE ISLANDS */
.career-job-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.career-job-card {
  position: relative;
  display: flex;
  min-height: 250px;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #262626;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(227, 0, 0, .06), transparent 34%),
    linear-gradient(145deg, #111 0%, #0d0d0d 100%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
  transition:
    transform .20s ease,
    border-color .20s ease,
    box-shadow .20s ease;
}

.career-job-card:hover {
  transform: translateY(-3px);
  border-color: #393939;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}

.career-job-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.career-job-card h3 {
  margin: 12px 0 10px;
  color: #fff;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.15;
}

.career-job-summary {
  max-width: 650px;
  margin: 0;
  color: #929292;
  font-size: 14px;
  line-height: 1.65;
}

.career-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 0 12px;
  border: 1px solid #343434;
  border-radius: 999px;
  color: #8d8d8d;
  background: #151515;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.career-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #575757;
}

.career-status.active {
  color: #fff;
  border-color: rgba(227, 0, 0, .42);
}

.career-status.active::before {
  background: #e30000;
  box-shadow: 0 0 12px rgba(227, 0, 0, .55);
}

.career-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.career-job-card .career-meta-row {
  margin-top: 22px;
}

.career-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid #2d2d2d;
  border-radius: 999px;
  background: #151515;
  color: #a2a2a2;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
}

.career-meta-pill i {
  margin-right: 6px;
  color: #707070;
  font-size: 10px;
}

.career-job-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 26px;
}

.career-job-card .button {
  min-width: 130px;
}

.career-job-card .button.secondary {
  border-radius: 999px;
}

.career-job-card .button.primary {
  border-radius: 999px;
}

.career-job-card .button:disabled {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}

.career-message-card {
  padding: 34px;
  border: 1px solid #262626;
  border-radius: 22px;
  background: #101010;
}

.career-message-card h3 {
  margin: 12px 0 8px;
  color: #fff;
}

.career-message-card p {
  margin: 0;
  color: #8d8d8d;
}

.career-message-card a {
  color: #e30000;
}

/* MODAL */
.career-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.career-modal.is-open {
  display: block;
}

.career-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(7px);
}

.career-modal-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1050px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: 24px;
  background: #0d0d0d;
  box-shadow: 0 35px 120px rgba(0, 0, 0, .68);
}

.career-modal-scroll {
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.career-modal-close {
  position: absolute;
  z-index: 10;
  top: 20px;
  right: 20px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #333;
  border-radius: 50%;
  background: #151515;
  color: #fff;
  cursor: pointer;
  transition: .18s ease;
}

.career-modal-close:hover {
  border-color: #e30000;
  background: #e30000;
}

.career-role-top {
  padding: 46px 54px 34px;
  border-bottom: 1px solid #252525;
  background:
    radial-gradient(circle at 100% 0%, rgba(227, 0, 0, .08), transparent 36%),
    #0d0d0d;
}

.career-role-heading h2 {
  max-width: 800px;
  margin: 10px 70px 18px 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
}

.career-role-content {
  padding: 42px 54px 54px;
}

.career-detail-section + .career-detail-section {
  margin-top: 31px;
}

.career-detail-section h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 20px;
}

.career-detail-section p,
.career-detail-section li {
  color: #a0a0a0;
  font-size: 14px;
  line-height: 1.75;
}

.career-detail-section ul {
  margin: 0;
  padding-left: 19px;
}

.career-application-state {
  margin-top: 34px;
  padding: 15px 18px;
  border: 1px solid #292929;
  border-radius: 14px;
  background: #131313;
  color: #808080;
  font-size: 13px;
}

.career-application-state.active {
  border-color: rgba(227, 0, 0, .35);
  color: #fff;
}

.career-role-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 18px;
}

.career-role-actions .button {
  border-radius: 999px;
}

.career-role-actions .button:disabled {
  opacity: .4;
  pointer-events: none;
}

/* APPLICATION - intentionally close to Contact page */
.career-apply-section {
  margin-top: 42px;
  padding-top: 42px;
  border-top: 1px solid #282828;
}

.career-apply-head {
  margin-bottom: 24px;
}

.career-apply-head h2 {
  margin: 8px 0 8px;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
}

.career-apply-head p {
  margin: 0;
  color: #888;
}

.career-form-wrap {
  padding: 28px;
  border: 1px solid #292929;
  border-radius: 22px;
  background:
    linear-gradient(145deg, #121212, #0e0e0e);
}

.career-form {
  display: grid;
  gap: 18px;
}

.career-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.career-form-field {
  display: grid;
  gap: 8px;
}

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

.career-form-field label {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.career-form-field label small {
  color: #6e6e6e;
  font-weight: 400;
}

.career-form-field input[type="text"],
.career-form-field input[type="email"],
.career-form-field input[type="url"],
.career-form-field input[type="file"],
.career-form-field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #303030;
  border-radius: 15px;
  background: #181818;
  color: #fff;
  font: inherit;
}

.career-form-field input[type="text"],
.career-form-field input[type="email"],
.career-form-field input[type="url"] {
  min-height: 52px;
  padding: 0 16px;
}

.career-form-field input[type="file"] {
  min-height: 54px;
  padding: 13px 14px;
}

.career-form-field textarea {
  min-height: 180px;
  padding: 15px 16px;
  resize: vertical;
}

.career-form-field input:focus,
.career-form-field textarea:focus {
  outline: none;
  border-color: #555;
  box-shadow: 0 0 0 3px rgba(255,255,255,.025);
}

.career-form-field input::placeholder,
.career-form-field textarea::placeholder {
  color: #737373;
}

.career-form-note {
  color: #707070;
  font-size: 11px;
  line-height: 1.5;
}

.career-terms {
  padding: 5px 0 2px;
}

.career-terms label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #8c8c8c;
  font-size: 12px;
  line-height: 1.55;
}

.career-terms input {
  margin-top: 3px;
  accent-color: #e30000;
}

.career-terms a {
  color: #fff;
  text-decoration: underline;
}

.career-terms a:hover {
  color: #e30000;
}

.career-form-actions .button {
  border-radius: 999px;
}

.career-form-actions .button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.career-form-status {
  min-height: 20px;
  font-size: 13px;
  font-weight: 600;
}

.career-form-status.success {
  color: #2cff7a;
}

.career-form-status.error {
  color: #ff4d4d;
}

.career-honeypot {
  position: absolute;
  left: -99999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body.career-modal-open {
  overflow: hidden;
}

/* ADMIN */
.career-admin-wrap {
  max-width: 1000px;
}

.career-admin-card {
  padding: 30px;
  border: 1px solid #292929;
  border-radius: 22px;
  background: #101010;
}

.career-admin-note,
.career-admin-message {
  padding: 15px 17px;
  border: 1px solid #292929;
  border-radius: 14px;
  background: #111;
  color: #8c8c8c;
  line-height: 1.6;
}

.career-admin-message.success {
  color: #2cff7a;
}

.career-admin-message.error {
  color: #ff4d4d;
}

.career-admin-divider {
  height: 1px;
  margin: 12px 0;
  background: #292929;
}

.career-admin-checkbox {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid #303030;
  border-radius: 15px;
  background: #181818;
  color: #fff;
}

.career-admin-checkbox input {
  accent-color: #e30000;
}

.career-admin-list {
  display: grid;
  gap: 14px;
  margin-top: 35px;
}

.career-admin-job {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 20px;
  border: 1px solid #292929;
  border-radius: 18px;
  background: #101010;
}

.career-admin-job strong {
  color: #fff;
}

.career-admin-job small {
  display: block;
  margin-top: 5px;
  color: #737373;
}

@media (max-width: 850px) {
  .career-job-grid {
    grid-template-columns: 1fr;
  }

  .career-form-row {
    grid-template-columns: 1fr;
  }

  .career-role-top,
  .career-role-content {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 560px) {
  .career-job-card {
    padding: 24px;
    border-radius: 18px;
  }

  .career-job-card-top {
    display: block;
  }

  .career-job-card-top .career-status {
    margin-top: 10px;
  }

  .career-job-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .career-job-card-actions .button {
    width: 100%;
  }

  .career-modal-window {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
    border-radius: 18px;
  }

  .career-modal-scroll {
    max-height: calc(100vh - 14px);
  }

  .career-role-top {
    padding-top: 36px;
  }

  .career-role-heading h2 {
    margin-right: 45px;
  }

  .career-form-wrap {
    padding: 20px;
  }

  .career-admin-job {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------------
   SEPARATE APPLICATION MODAL
------------------------------------------------------- */
.career-apply-modal-window {
  width: min(980px, calc(100vw - 36px));
}

.career-apply-modal-head {
  padding: 46px 54px 30px;
  border-bottom: 1px solid #252525;
  background:
    radial-gradient(circle at 100% 0%, rgba(227, 0, 0, .08), transparent 36%),
    #0d0d0d;
}

.career-apply-modal-head h2 {
  margin: 8px 60px 18px 0;
  color: #fff;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.05;
}

.career-applying-for {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(227, 0, 0, .32);
  border-radius: 999px;
  background: rgba(227, 0, 0, .06);
  color: #8d8d8d;
  font-size: 12px;
}

.career-applying-for strong {
  color: #fff;
  font-weight: 700;
}

.career-apply-modal-body {
  padding: 34px 54px 54px;
}

.career-apply-modal-body .career-form-wrap {
  margin: 0;
}

@media (max-width: 850px) {
  .career-apply-modal-head,
  .career-apply-modal-body {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 560px) {
  .career-apply-modal-head {
    padding-top: 36px;
  }

  .career-applying-for {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 16px;
  }
}


/* -------------------------------------------------------
   APPLICATION MODAL CLEANUP - v4
------------------------------------------------------- */

/* The large application title is now the selected job title. */
.career-apply-modal-head h2 {
  margin-bottom: 8px;
}

/* Plain subtitle: no red pill / border / capsule. */
.career-applying-text {
  margin: 0;
  color: #858585;
  font-size: 13px;
  line-height: 1.5;
}

.career-applying-text strong {
  color: #fff;
  font-weight: 700;
}

/* Remove the inner rounded form island completely. */
.career-apply-modal-body .career-form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.career-apply-modal-body .career-form-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Slightly more open spacing now that the inner card is gone. */
.career-apply-modal-body {
  padding-top: 38px;
}

@media (max-width: 560px) {
  .career-applying-text {
    font-size: 12px;
  }
}


/* -------------------------------------------------------
   MOTIVATION METHOD + FILE BUTTONS - v5
------------------------------------------------------- */

.career-motivation-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.career-choice-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.career-choice-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.career-choice-option span {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid #303030;
  border-radius: 999px;
  background: #181818;
  color: #9a9a9a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .18s ease;
}

.career-choice-option span:hover {
  border-color: #4a4a4a;
  color: #fff;
}

.career-choice-option input:checked + span {
  border-color: #e30000;
  background: #e30000;
  color: #fff;
  box-shadow: 0 10px 28px rgba(227, 0, 0, .18);
}

/* Native file field stays dark, but its action button matches Send Application. */
.career-form-field input[type="file"] {
  cursor: pointer;
  color: #9a9a9a;
}

.career-form-field input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: #e30000;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.career-form-field input[type="file"]::file-selector-button:hover {
  background: #ff1111;
}

/* WebKit fallback */
.career-form-field input[type="file"]::-webkit-file-upload-button {
  margin-right: 14px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: #e30000;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 560px) {
  .career-motivation-choice {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------------
   APPLICATION TITLE v6
------------------------------------------------------- */
.career-apply-modal-head h2 {
  max-width: 850px;
  margin-bottom: 0;
}


/* -------------------------------------------------------
   MOTIVATION VISIBILITY FIX - v7
------------------------------------------------------- */

.career-motivation-help {
  max-width: 760px;
  margin: 0 0 3px;
  color: #777;
  font-size: 12px;
  line-height: 1.6;
}

/* Explicitly beat .career-form-row { display:grid; } */
#motivationWriteRow[hidden],
#motivationUploadRow[hidden] {
  display: none !important;
}

#motivationWriteRow:not([hidden]),
#motivationUploadRow:not([hidden]) {
  display: grid;
}


/* -------------------------------------------------------
   VIEW-ROLE-ONLY CARD ACTIONS - v8
------------------------------------------------------- */

/* Applications are intentionally only available after opening the role details. */
.career-job-card-actions {
  justify-content: flex-start;
}

.career-job-card-actions .career-view-role {
  min-width: 160px;
}


/* -------------------------------------------------------
   APPLICATION RESULT SCREEN - v9
------------------------------------------------------- */

.career-application-result {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 54px 24px;
  text-align: center;
}

.career-application-result[hidden] {
  display: none !important;
}

.career-application-result .eyebrow {
  margin-top: 24px;
}

.career-application-result h2 {
  margin: 18px 0 10px;
  color: #fff;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.05;
}

.career-application-result p {
  max-width: 610px;
  margin: 0;
  color: #8e8e8e;
  font-size: 14px;
  line-height: 1.7;
}

.career-result-icon {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 40px;
  border: 2px solid currentColor;
}

.career-application-result.success .career-result-icon {
  color: #2cff7a;
  background: rgba(44, 255, 122, .06);
  box-shadow: 0 0 45px rgba(44, 255, 122, .12);
}

.career-application-result.error .career-result-icon {
  color: #ff4d4d;
  background: rgba(255, 77, 77, .06);
  box-shadow: 0 0 45px rgba(255, 77, 77, .12);
}

.career-result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

.career-result-actions .button {
  border-radius: 999px;
  min-width: 130px;
}

.career-form-status.sending {
  color: #8d8d8d;
}


/* -------------------------------------------------------
   APPLICATION STAGE REPLACEMENT - v10
------------------------------------------------------- */

/*
  The form and the success/error screen share one stage.
  Only ONE of them may exist visually at a time.
*/
.career-application-stage {
  width: 100%;
}

/* Important: career-form normally uses display:grid, so explicitly override it. */
#careerApplicationForm[hidden] {
  display: none !important;
}

#applicationResult[hidden] {
  display: none !important;
}

#careerApplicationForm:not([hidden]) {
  display: grid;
}

#applicationResult:not([hidden]) {
  display: flex;
}

/* Result state takes over the complete form area instead of appearing below it. */
.career-application-result {
  width: 100%;
  min-height: 560px;
  margin: 0;
  padding: 64px 24px;
  border: 0;
  background: transparent;
}

/* Give the success/error state a clear full-page feel inside the modal. */
.career-application-result.success {
  background:
    radial-gradient(circle at 50% 35%, rgba(44,255,122,.055), transparent 34%);
}

.career-application-result.error {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,77,77,.055), transparent 34%);
}

@media (max-width: 560px) {
  .career-application-result {
    min-height: 480px;
    padding: 48px 14px;
  }
}


/* -------------------------------------------------------
   RESULT BUTTON VISIBILITY FIX - v11
------------------------------------------------------- */

/* Success = Close only. Failure = Try Again + Close. */
#applicationRetry[hidden] {
  display: none !important;
}


/* -------------------------------------------------------
   RESULT SUBTITLE RESTORE - v12
------------------------------------------------------- */

.career-application-result .career-result-subtitle {
  display: block !important;
  max-width: 660px;
  margin: 0 auto 28px !important;
  color: #929292 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  text-align: center;
}

.career-application-result h2 + .career-result-subtitle {
  margin-top: 0 !important;
}


/* -------------------------------------------------------
   MATCHED SECTION SUBTEXT - v13
------------------------------------------------------- */

/* Keep the Current Opportunities subtext identical to the hero subtext. */
.career-matching-subtext {
  color: #8d8d8d !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
}

/* The opportunities count should keep the same typography even though it sits right-aligned. */
.career-section-head > .career-matching-subtext {
  margin: 0;
}


/* -------------------------------------------------------
   ROLE STATUS + APPLICATION PROCESS - v14
   Added on top of the user's current Career styling.
------------------------------------------------------- */

/* Card status: more like the rectangular OPEN reference instead of a rounded ACTIVE pill. */
.career-status {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 4px;
  background: transparent;
  color: #8d8d8d;
  border-color: #454545;
}

.career-status.active {
  color: #fff;
  border-color: #e30000;
  background: rgba(227, 0, 0, .025);
}

.career-status.active::before {
  background: #e30000;
}

/* Role modal heading: title + compact rectangular OPEN/CLOSED box. */
.career-role-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 70px 18px 0;
}

.career-role-title-line .career-role-heading h2,
.career-role-title-line h2 {
  margin: 0;
}

.career-role-status-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #e30000;
  border-radius: 2px;
  color: #fff;
  background: rgba(227, 0, 0, .025);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

.career-role-status-box.closed {
  border-color: #454545;
  color: #777;
  background: transparent;
}

/* Horizontal application / interview process. */
.career-process-section {
  margin-top: 42px;
  padding-top: 36px;
  border-top: 1px solid #252525;
}

.career-process-heading h3 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 20px;
}

.career-process-heading p {
  margin: 0;
  color: #7f7f7f;
  font-size: 12px;
  line-height: 1.6;
}

.career-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.career-process-track {
  position: absolute;
  top: 23px;
  left: calc(12.5% + 1px);
  right: calc(12.5% + 1px);
  height: 1px;
  background: linear-gradient(
    90deg,
    #e30000 0%,
    #e30000 18%,
    #343434 18%,
    #343434 100%
  );
}

.career-process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.career-process-node {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #3a3a3a;
  border-radius: 50%;
  background: #111;
  color: #777;
  font-size: 14px;
}

.career-process-step:first-of-type .career-process-node {
  border-color: #e30000;
  color: #fff;
  background: #e30000;
  box-shadow: 0 8px 25px rgba(227, 0, 0, .18);
}

.career-process-step strong {
  margin-top: 13px;
  color: #fff;
  font-size: 12px;
}

.career-process-step small {
  max-width: 150px;
  margin-top: 5px;
  color: #707070;
  font-size: 10px;
  line-height: 1.45;
}

/* Keep the availability panel wording visually secondary to the actual process. */
.career-application-state {
  margin-top: 38px;
}

@media (max-width: 700px) {
  .career-role-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-right: 44px;
  }

  .career-process {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 24px;
  }

  .career-process-track {
    top: 23px;
    bottom: 23px;
    left: 22px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      #e30000 0%,
      #e30000 10%,
      #343434 10%,
      #343434 100%
    );
  }

  .career-process-step {
    min-height: 78px;
    align-items: flex-start;
    padding-left: 68px;
    text-align: left;
  }

  .career-process-node {
    position: absolute;
    top: 0;
    left: 0;
  }

  .career-process-step strong {
    margin-top: 5px;
  }

  .career-process-step small {
    max-width: none;
  }
}


/* -------------------------------------------------------
   TABBED ROLE MODAL + VERTICAL PROCESS - v15
------------------------------------------------------- */

/* OPEN = green, CLOSED = blue, matching the status language used on the game cards. */
.career-status.open {
  color: #ffffff;
  border-color: #00a86b;
  background: rgba(0, 168, 107, .09);
}

.career-status.open::before {
  background: #00c77b;
  box-shadow: 0 0 12px rgba(0, 199, 123, .42);
}

.career-status.closed {
  color: #ffffff;
  border-color: #0b63d9;
  background: rgba(11, 99, 217, .10);
}

.career-status.closed::before {
  background: #1681ff;
  box-shadow: 0 0 12px rgba(22, 129, 255, .38);
}

.career-role-status-box.open {
  color: #ffffff;
  border-color: #00a86b;
  background: rgba(0, 168, 107, .09);
}

.career-role-status-box.closed {
  color: #ffffff;
  border-color: #0b63d9;
  background: rgba(11, 99, 217, .10);
}

/* Two clean tabs at the top of the role body. */
.career-role-tabs {
  display: flex;
  gap: 8px;
  margin: -10px 0 38px;
  padding-bottom: 14px;
  border-bottom: 1px solid #262626;
}

.career-role-tab {
  appearance: none;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #303030;
  border-radius: 999px;
  background: #141414;
  color: #7f7f7f;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.career-role-tab:hover {
  color: #ffffff;
  border-color: #494949;
}

.career-role-tab.active {
  color: #ffffff;
  border-color: #e30000;
  background: #e30000;
  box-shadow: 0 10px 30px rgba(227, 0, 0, .14);
}

.career-role-pane[hidden] {
  display: none !important;
}

.career-role-pane.active {
  display: block;
}

/*
  The Process tab is intentionally a fixed visual explanation.
  It does not depend on fields inside the job JSON.
*/
#roleProcessPane .career-process-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#roleProcessPane .career-process-heading {
  max-width: 720px;
  margin-bottom: 38px;
}

#roleProcessPane .career-process-heading .eyebrow {
  margin-bottom: 15px;
}

#roleProcessPane .career-process-heading h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 3.5vw, 40px);
}

#roleProcessPane .career-process-heading p {
  color: #8d8d8d;
  font-size: 14px;
  line-height: 1.7;
}

/* Vertical timeline. */
.career-process-vertical {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  padding: 2px 0 4px;
}

/* Base track. */
.career-process-vertical::before {
  content: "";
  position: absolute;
  top: 27px;
  bottom: 27px;
  left: 27px;
  width: 2px;
  background: #2e2e2e;
}

/* Animated SanForge-red sweep down the process. */
.career-process-vertical::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 27px;
  left: 27px;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, #e30000, #821010);
  box-shadow: 0 0 12px rgba(227, 0, 0, .16);
}

#roleProcessPane.animate-process .career-process-vertical::after {
  animation: careerProcessLine 1.15s cubic-bezier(.2,.75,.25,1) .12s forwards;
}

.career-process-vertical .career-process-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  min-height: 132px;
  align-items: start;
  padding: 0 0 28px;
  text-align: left;
  opacity: 1;
}

.career-process-vertical .career-process-node {
  position: relative;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid #3a3a3a;
  border-radius: 50%;
  background: #111;
  color: #777;
  font-size: 16px;
  transition: .25s ease;
}

#roleProcessPane.animate-process .career-process-step {
  animation: careerProcessStep .46s ease both;
  animation-delay: calc(.18s + (var(--step) * .18s));
}

#roleProcessPane.animate-process .career-process-node {
  animation: careerProcessNode .42s ease both;
  animation-delay: calc(.22s + (var(--step) * .18s));
}

.career-process-copy {
  max-width: 720px;
  padding: 2px 0 0;
}

.career-process-number {
  display: block;
  margin-bottom: 4px;
  color: #e30000;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.career-process-vertical .career-process-copy strong {
  display: block;
  margin: 0;
  color: #ffffff;
  font-size: 19px;
}

.career-process-vertical .career-process-copy p {
  max-width: 680px;
  margin: 8px 0 0;
  color: #8d8d8d;
  font-size: 13px;
  line-height: 1.65;
}

.career-process-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 10px;
  padding: 15px 17px;
  border: 1px solid #292929;
  border-radius: 14px;
  background: #131313;
  color: #777;
  font-size: 11px;
  line-height: 1.55;
}

.career-process-note i {
  margin-top: 2px;
  color: #e30000;
}

/* Do not show the old horizontal process styling inside the new tab. */
#roleProcessPane .career-process-track {
  display: none;
}

@keyframes careerProcessLine {
  from { height: 0; }
  to { height: calc(100% - 54px); }
}

@keyframes careerProcessStep {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes careerProcessNode {
  0% {
    border-color: #3a3a3a;
    color: #777;
    transform: scale(.88);
  }
  60% {
    border-color: #e30000;
    color: #ffffff;
    box-shadow: 0 0 0 5px rgba(227, 0, 0, .06);
  }
  100% {
    border-color: #4b4b4b;
    color: #ffffff;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #roleProcessPane.animate-process .career-process-vertical::after,
  #roleProcessPane.animate-process .career-process-step,
  #roleProcessPane.animate-process .career-process-node {
    animation: none !important;
  }

  .career-process-vertical::after {
    height: calc(100% - 54px);
  }
}

@media (max-width: 700px) {
  .career-role-tabs {
    margin-top: -2px;
  }

  .career-role-tab {
    flex: 1 1 0;
    padding: 0 12px;
  }

  .career-process-vertical .career-process-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 17px;
    min-height: 126px;
  }

  .career-process-vertical::before,
  .career-process-vertical::after {
    left: 23px;
  }

  .career-process-vertical .career-process-node {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }
}


/* -------------------------------------------------------
   MODAL SCROLLBAR + INTERACTIVE PROCESS - v16
------------------------------------------------------- */

/* Dark scrollbar that visually belongs to the modal. */
.career-modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #0d0d0d;
}

.career-modal-scroll::-webkit-scrollbar {
  width: 10px;
}

.career-modal-scroll::-webkit-scrollbar-track {
  background: #0d0d0d;
  border-left: 1px solid #1d1d1d;
}

.career-modal-scroll::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  background: #343434;
}

.career-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Disable the older automatic timeline animations. */
#roleProcessPane .career-process-vertical::after {
  display: none !important;
  animation: none !important;
}

#roleProcessPane.animate-process .career-process-step,
#roleProcessPane.animate-process .career-process-node {
  animation: none !important;
}

/* Larger interactive process. */
#roleProcessPane .career-process-vertical {
  position: relative;
  display: block;
  padding: 4px 0 8px;
}

/* Neutral line. */
#roleProcessPane .career-process-vertical::before {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 38px;
  left: 37px;
  width: 2px;
  background: #303030;
}

/* Dynamic red line controlled from JS. */
.career-process-progress {
  position: absolute;
  z-index: 1;
  left: 37px;
  width: 2px;
  height: 0;
  background: #e30000;
  box-shadow: 0 0 14px rgba(227, 0, 0, .22);
  transition:
    height .46s cubic-bezier(.22,.75,.24,1),
    top .28s ease;
  pointer-events: none;
}

#roleProcessPane .career-process-step {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 0;
  padding: 0 0 22px;
  opacity: 1;
  text-align: left;
}

.career-process-trigger {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 34px;
  gap: 22px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.career-process-trigger:focus-visible {
  outline: 1px solid #e30000;
  outline-offset: 8px;
  border-radius: 8px;
}

#roleProcessPane .career-process-node {
  position: relative;
  top: 0;
  left: 0;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid #414141;
  border-radius: 50%;
  background: #111;
  color: #8a8a8a;
  font-size: 20px;
  transition:
    color .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

.career-process-label {
  display: block;
}

.career-process-label .career-process-number {
  display: block;
  margin-bottom: 5px;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  transition: color .25s ease;
}

.career-process-label strong {
  display: block;
  margin: 0;
  color: #f2f2f2;
  font-size: 22px;
  line-height: 1.2;
  transition: color .25s ease;
}

.career-process-chevron {
  justify-self: end;
  color: #5f5f5f;
  font-size: 13px;
  transition:
    color .25s ease,
    transform .32s ease;
}

/* Only the selected stage reveals its information. */
.career-process-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-left: 96px;
  transition:
    grid-template-rows .38s cubic-bezier(.22,.75,.24,1),
    opacity .28s ease,
    margin-top .38s ease,
    margin-bottom .38s ease;
}

.career-process-details-inner {
  min-height: 0;
  overflow: hidden;
}

.career-process-details p {
  max-width: 760px;
  margin: 0;
  color: #979797;
  font-size: 14px;
  line-height: 1.7;
}

.career-process-step.selected .career-process-details {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Selected stage. */
.career-process-step.selected .career-process-node {
  border-color: #e30000;
  background: #e30000;
  color: #fff;
  box-shadow: 0 10px 32px rgba(227, 0, 0, .18);
  transform: scale(1.045);
}

.career-process-step.selected .career-process-number,
.career-process-step.completed .career-process-number {
  color: #e30000;
}

.career-process-step.selected .career-process-label strong {
  color: #fff;
}

.career-process-step.selected .career-process-chevron {
  color: #e30000;
  transform: rotate(180deg);
}

/* Earlier stages become subtly completed when looking further down the process. */
.career-process-step.completed .career-process-node {
  border-color: #a41010;
  color: #e30000;
  background: #151010;
}

/* Buttons remain accessible from the Process page too. */
.career-process-actions {
  margin-top: 24px;
  padding-top: 4px;
}

.career-process-actions .button:disabled {
  opacity: .4;
  pointer-events: none;
}

@media (max-width: 700px) {
  #roleProcessPane .career-process-vertical::before,
  .career-process-progress {
    left: 29px;
  }

  .career-process-trigger {
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    gap: 16px;
  }

  #roleProcessPane .career-process-node {
    width: 58px;
    height: 58px;
    font-size: 16px;
  }

  .career-process-label strong {
    font-size: 18px;
  }

  .career-process-details {
    margin-left: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-process-progress,
  .career-process-details,
  .career-process-node,
  .career-process-chevron {
    transition: none !important;
  }
}


/* -------------------------------------------------------
   PROCESS NODE SCALE + ICON FILL - v17
------------------------------------------------------- */

/*
  Keep each node centred on the same timeline axis.
  The trigger reserves 74px; inactive circles sit smaller inside that space.
*/
#roleProcessPane .career-process-node {
  width: 54px;
  height: 54px;
  margin-left: 10px;
  font-size: 17px;
  background: #101010;
  border-color: #3b3b3b;
  transform: scale(1);
  box-shadow: none;
  transition:
    width .30s cubic-bezier(.2,.8,.2,1),
    height .30s cubic-bezier(.2,.8,.2,1),
    margin-left .30s cubic-bezier(.2,.8,.2,1),
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .30s ease,
    transform .30s cubic-bezier(.2,.8,.2,1);
}

/*
  Inactive Font Awesome glyphs are visually unfilled/outlined.
  When selected, the glyph becomes solid white.
*/
#roleProcessPane .career-process-node > i {
  color: transparent;
  -webkit-text-stroke: 1.15px #858585;
  text-shadow: none;
  transition:
    color .22s ease,
    -webkit-text-stroke .22s ease,
    transform .30s cubic-bezier(.2,.8,.2,1);
}

/* Earlier stages: compact, with a subtle completed-red outline. */
#roleProcessPane .career-process-step.completed .career-process-node {
  width: 58px;
  height: 58px;
  margin-left: 8px;
  border-color: #8f1515;
  background: #141010;
  box-shadow: 0 0 18px rgba(227, 0, 0, .06);
}

#roleProcessPane .career-process-step.completed .career-process-node > i {
  color: transparent;
  -webkit-text-stroke: 1.15px #e30000;
}

/* Selected stage grows and fills completely. */
#roleProcessPane .career-process-step.selected .career-process-node {
  width: 74px;
  height: 74px;
  margin-left: 0;
  border-color: #e30000;
  background: #e30000;
  color: #fff;
  box-shadow:
    0 12px 34px rgba(227, 0, 0, .22),
    0 0 0 7px rgba(227, 0, 0, .055);
  transform: scale(1.04);
}

#roleProcessPane .career-process-step.selected .career-process-node > i {
  color: #ffffff;
  -webkit-text-stroke: 0 transparent;
  transform: scale(1.08);
}

/* Mobile keeps the same centre line while scaling smaller. */
@media (max-width: 700px) {
  #roleProcessPane .career-process-node {
    width: 42px;
    height: 42px;
    margin-left: 8px;
    font-size: 13px;
  }

  #roleProcessPane .career-process-step.completed .career-process-node {
    width: 46px;
    height: 46px;
    margin-left: 6px;
  }

  #roleProcessPane .career-process-step.selected .career-process-node {
    width: 58px;
    height: 58px;
    margin-left: 0;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #roleProcessPane .career-process-node,
  #roleProcessPane .career-process-node > i {
    transition:
      color .15s ease,
      background .15s ease,
      border-color .15s ease !important;
  }
}


/* -------------------------------------------------------
   CLICK-ONLY PROCESS SCALE - v18
------------------------------------------------------- */

/*
  Hover may hint that a stage is clickable, but it must never resize.
  Size changes now happen ONLY when the stage is selected by clicking.
*/
#roleProcessPane .career-process-step:not(.selected) .career-process-trigger:hover .career-process-node {
  border-color: #565656;
  background: #121212;
  transform: scale(1);
}

#roleProcessPane .career-process-step:not(.selected) .career-process-trigger:hover .career-process-node > i {
  -webkit-text-stroke-color: #a8a8a8;
}

/* Completed stages also keep their compact size on hover. */
#roleProcessPane .career-process-step.completed:not(.selected) .career-process-trigger:hover .career-process-node {
  width: 58px;
  height: 58px;
  margin-left: 8px;
  border-color: #a51a1a;
  background: #151010;
}

/* Mobile: absolutely no hover-driven sizing either. */
@media (max-width: 700px) {
  #roleProcessPane .career-process-step:not(.selected) .career-process-trigger:hover .career-process-node {
    width: 42px;
    height: 42px;
    margin-left: 8px;
  }

  #roleProcessPane .career-process-step.completed:not(.selected) .career-process-trigger:hover .career-process-node {
    width: 46px;
    height: 46px;
    margin-left: 6px;
  }
}


/* -------------------------------------------------------
   APPLICATION PROCESS LEVELS - v19
------------------------------------------------------- */

.career-process-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.career-process-heading-row > div:first-child {
  min-width: 0;
}

.career-process-tier {
  min-width: 126px;
  padding: 12px 15px;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  background: #121212;
  text-align: right;
  flex: 0 0 auto;
}

.career-process-tier span {
  display: block;
  color: #777;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.career-process-tier strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 13px;
}

/* Levels get slightly different visual intensity, but stay in the SanForge language. */
.career-process-tier[data-tier="1"] {
  border-color: #3f3f3f;
}

.career-process-tier[data-tier="2"] {
  border-color: #a11919;
  box-shadow: 0 0 24px rgba(227, 0, 0, .045);
}

.career-process-tier[data-tier="3"] {
  border-color: #e30000;
  background:
    radial-gradient(circle at 100% 0%, rgba(227,0,0,.10), transparent 55%),
    #121212;
  box-shadow: 0 0 28px rgba(227, 0, 0, .07);
}

.career-process-tier[data-tier="3"] span,
.career-process-tier[data-tier="3"] strong {
  color: #fff;
}

.career-process-route {
  display: inline-flex;
  margin: 18px 0 0 !important;
  padding: 8px 12px;
  border: 1px solid #2c2c2c;
  border-radius: 999px;
  background: #111;
  color: #777 !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .02em;
}

/*
  Dynamic steps are wrapped in #careerProcessSteps.
  Keep the existing timeline positioning intact.
*/
#careerProcessSteps {
  position: relative;
  z-index: 2;
}

/* Level 3 Assignment gets a subtle extra emphasis when selected. */
.career-process-tier[data-tier="3"] + .career-process-route {
  border-color: #3b2525;
}

@media (max-width: 700px) {
  .career-process-heading-row {
    flex-direction: column;
    gap: 16px;
  }

  .career-process-tier {
    min-width: 0;
    width: 100%;
    text-align: left;
  }

  .career-process-route {
    display: block;
    width: 100%;
    border-radius: 12px;
    line-height: 1.55 !important;
  }
}


/* -------------------------------------------------------
   PROCESS UI CLEANUP - v20
------------------------------------------------------- */

/*
  The process tier still comes from job JSON and still controls the steps,
  but the visitor does not see a LEVEL badge or route summary pill.
*/
.career-process-tier,
.career-process-route {
  display: none !important;
}

#roleProcessPane .career-process-heading {
  max-width: 760px;
  margin-bottom: 38px;
}

#roleProcessPane .career-process-heading h3 {
  margin-top: 14px;
}


/* -------------------------------------------------------
   ROLE CTA + MODAL DEPARTMENT TAG - v22
------------------------------------------------------- */

/* Match the neutral department/discipline pill used on the public job card. */
.career-modal-department-tag {
  background: #171717;
  border-color: #393939;
  color: #f0f0f0;
}

/* Explicitly ensure there is no eyebrow-style red dot in the modal department tag. */
.career-modal-department-tag::before {
  display: none !important;
}

/* The public View Role CTA now uses the same red primary-button language as the rest of the site. */
.career-job-card .career-view-role {
  border-color: #e30000;
  background: #e30000;
  color: #fff;
}

.career-job-card .career-view-role:hover {
  border-color: #ff1111;
  background: #ff1111;
}


/* -------------------------------------------------------
   TIER TAG - v23
------------------------------------------------------- */

/*
  Tier I / II / III is intentionally shown as a normal neutral metadata tag.
  It reflects the selected application-process difficulty from process_tier.
*/
.career-meta-pill .fa-layer-group {
  color: #777;
}


/* -------------------------------------------------------
   FEED TIER STATUS BOX - v24
------------------------------------------------------- */

.career-card-status-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.career-tier-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #474747;
  border-radius: 4px;
  background: rgba(255,255,255,.018);
  color: #d0d0d0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Keep Tier and OPEN/CLOSED visually equal in the feed. */
.career-card-status-group .career-status {
  min-height: 34px;
}

@media (max-width: 560px) {
  .career-card-status-group {
    margin-top: 10px;
    justify-content: flex-start;
  }
}


/* -------------------------------------------------------
   FINAL PROCESS NODE LINE END - v25
------------------------------------------------------- */

/*
  The timeline should visually stop at the centre of the final stage.
  There is nowhere for the process to continue after "Work", so hide
  the neutral/red track below the final node.
*/
#roleProcessPane #careerProcessSteps .career-process-step:last-child::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 35px;
  top: 37px;
  bottom: 0;
  width: 6px;
  background: #0d0d0d;
  pointer-events: none;
}

/* Keep the final icon itself above the line-cover. */
#roleProcessPane #careerProcessSteps .career-process-step:last-child .career-process-trigger,
#roleProcessPane #careerProcessSteps .career-process-step:last-child .career-process-details {
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  #roleProcessPane #careerProcessSteps .career-process-step:last-child::after {
    left: 27px;
    top: 29px;
  }
}


/* -------------------------------------------------------
   TIER BADGE REMOVAL - v27
------------------------------------------------------- */
.career-tier-box {
  display: none !important;
}


/* -------------------------------------------------------
   EMPTY / ERROR STATE CLEANUP - v28
------------------------------------------------------- */

/*
  Empty and error states should sit directly on the page background.
  No card/island, border, fill, rounded box, or shadow.
*/
.career-message-card {
  margin-top: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.career-message-card h3 {
  margin: 0 0 8px;
}

.career-message-card p {
  margin: 0;
  max-width: 720px;
}