/* Careers and application form. Uses the site's existing local font and palette. */
.careers { padding: 68px 0 88px; background: #f8faff; scroll-margin-top: 80px; }
.careers-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.careers-eyebrow { color: #2672c2; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px; }
.careers-intro h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.18; color: #172d47; margin: 0 0 18px; }
.careers-intro h2 span { display: block; color: #237ac9; }
.careers-intro__text { color: #66758a; max-width: 540px; font-size: 16px; line-height: 1.65; }
.careers-count { display: inline-flex; flex-shrink: 0; align-items: center; gap: 9px; color: #586c81; font-size: 13px; padding: 9px 14px; border: 1px solid #dce5ef; border-radius: 24px; margin-bottom: 4px; }
.careers-count > span { width: 6px; height: 6px; background: #2f9281; border-radius: 50%; }
.careers .spoiler_list.vacancies { margin: 0; display: grid; gap: 18px; }
.careers .spoiler_list.vacancies > li { background: #fff; border: 1px solid #dce6f0; border-radius: 18px; padding: 28px 32px 24px; color: #1d344c; font-size: 16px; box-shadow: 0 4px 16px #24486f03; }
.careers .spoiler_list.vacancies > li.active { background: #fff; border-color: #a9cbed; }
.vacancy-kicker { display: flex; align-items: center; gap: 12px; color: #6f8ca9; font-size: 11px; font-weight: 600; letter-spacing: .06em; margin: 0 0 14px; }
.vacancy-kicker span { border-left: 1px solid #dce6f0; padding-left: 12px; letter-spacing: .02em; color: #7f8d9d; font-weight: 400; }
.careers h2.vacancy { padding: 0; margin: 0 0 12px; text-align: left; font-size: 23px; font-weight: 500; line-height: 1.35; color: #183451; }
.careers h2.vacancy::after { content: none; }
.vacancy-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.vacancy-toggle__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; background: #f1f6fd; color: #237ac9; border-radius: 50%; font-size: 22px; font-weight: 400; line-height: 1; }
.careers .salary.steel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; position: static; padding: 0; margin: 0 0 23px; }
.careers .salary .conditions { float: none; width: auto; text-align: left; font-size: 13px; color: #7a8799; line-height: 1.5; }
.careers .salary .sum { float: none; margin: 0; color: #233d57; font-size: 17px; font-weight: 500; }
.careers .vacancy_details { display: block; background: #f7faff; border-radius: 10px; padding: 20px 24px; margin-bottom: 24px; color: #40566d; font-size: 15px; line-height: 1.85; }
.careers .vacancy_details[hidden] { display: none; }
.careers .vacancy-contact { padding: 20px 0 0; border-top: 1px solid #edf1f5; display: flex; gap: 12px; flex-wrap: wrap; text-align: left; }
.vacancy-apply, .careers .vacancy-contact__telegram { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s; }
.vacancy-apply { background: #1676cb; color: #fff; border: 1px solid #1676cb; }
.vacancy-apply > span { font-size: 20px; line-height: 1; font-weight: 400; }
.vacancy-apply:hover { background: #0c62ad; border-color: #0c62ad; }
.careers .vacancy-contact__telegram { background: #fff; color: #46708e; border: 1px solid #dbe5ed; }
.careers .vacancy-contact__telegram:hover { color: #155e9d; background: #f0f7fe; border-color: #b9d4ec; }
.careers .vacancy-contact__telegram svg { width: 17px; height: 17px; }
.careers button:focus-visible, .careers a:focus-visible, .application-dialog button:focus-visible, .application-dialog summary:focus-visible { outline: 3px solid #72a9de; outline-offset: 4px; }
body.application-open { overflow: hidden; }
.application-dialog { position: fixed; inset: 0; margin: auto; padding: 0; width: min(640px, calc(100% - 32px)); max-width: 640px; max-height: calc(100dvh - 40px); border: 0; border-radius: 20px; background: #fff; color: #21374f; box-shadow: 0 24px 100px #06234438; overflow-y: auto; overscroll-behavior: contain; }
.application-dialog::backdrop { background: #0c233b94; backdrop-filter: blur(5px); }
.application-body { padding: 34px 36px 26px; }
.application-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f2f5f8; color: #77899b; font-size: 26px; font-weight: 300; cursor: pointer; line-height: 1; }
.application-close:hover { color: #224564; background: #e8eef5; }
.application-dialog .careers-eyebrow { font-size: 10px; margin-bottom: 10px; padding-right: 20px; }
.application-dialog h2 { color: #1b334e; font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 10px; }
.application-description { color: #7a8899; font-size: 14px; line-height: 1.6; margin-bottom: 22px; max-width: 450px; }
.application-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.application-field label { font-size: 12px; color: #3e536b; font-weight: 500; line-height: 1.5; }
.application-field label > span:not(.field-optional) { color: #1e7bc9; }
.application-field .field-optional { color: #929daa; font-size: 10px; font-weight: 400; margin-left: 3px; }
.application-field input, .application-field textarea, .application-field select { width: 100%; min-height: 46px; padding: 12px 13px; border: 1px solid #dce3ec; border-radius: 8px; background: #fff; color: #243c54; font-family: inherit; font-size: 14px; line-height: 1.5; outline: none; transition: border-color .15s, box-shadow .15s; }
.application-field textarea { resize: vertical; }
.application-field input::placeholder, .application-field textarea::placeholder { color: #98a3b0; opacity: 1; }
.application-field input:focus, .application-field textarea:focus, .application-field select:focus { border-color: #3089d5; box-shadow: 0 0 0 3px #328ddd13; }
.application-vacancy { padding: 13px 15px; border: 1px solid #e1ecf7; border-radius: 10px; background: #f5f9fe; margin-bottom: 19px; gap: 4px; }
.application-vacancy label { color: #73869a; font-size: 11px; font-weight: 400; }
.application-vacancy select { font-size: 13px; font-weight: 500; min-height: 34px; padding: 5px 22px 5px 0; border: 0; background-color: transparent; text-overflow: ellipsis; }
.application-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.application-extra { margin: 20px 0; }
.application-extra summary { color: #2a78b7; font-size: 13px; cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; }
.application-extra summary::-webkit-details-marker { display: none; }
.application-extra summary > span { font-size: 19px; line-height: 1; }
.application-extra[open] summary { margin-bottom: 14px; }
.application-extra[open] summary > span { transform: rotate(45deg); }
.application-extra .application-field + .application-field { margin-top: 14px; }
.application-consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 11px; color: #7b8898; line-height: 1.65; }
.application-consent input { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px; accent-color: #1979cc; }
.application-consent input:focus-visible { outline: 2px solid #267fc7; outline-offset: 3px; }
.application-submit { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin-top: 20px; padding: 12px 20px; border-radius: 8px; border: 0; background: #1676cb; color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s; }
.application-submit:hover { background: #0c62ad; }
.application-submit:disabled, .application-close:disabled { cursor: wait; opacity: .65; }
.application-note { margin-top: 10px; font-size: 10px; color: #8b97a4; text-align: center; line-height: 1.6; }
.application-field-error { color: #b73838; font-size: 11px; line-height: 1.5; }
.application-field-error:empty { display: none; }
.application-field [aria-invalid="true"] { border-color: #d97575; background-color: #fffafa; }
.application-status { margin-top: 16px; padding: 12px 14px; background: #fff4f1; color: #9b4334; border: 1px solid #f0d6cd; border-radius: 8px; font-size: 13px; line-height: 1.6; }
.application-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.application-success { padding: 56px 40px 40px; text-align: center; }
.application-success__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e8f5ef; color: #329574; font-size: 30px; margin: 0 auto 24px; }
.application-success p:not(.careers-eyebrow) { margin: 18px 0 28px; color: #758497; font-size: 14px; line-height: 1.7; }
.application-success strong { font-weight: 500; color: #3e5772; }
.application-dialog [hidden] { display: none !important; }
@media (max-width: 700px) {
  .careers { padding: 42px 0 52px; }
  .careers-intro { display: block; margin-bottom: 25px; }
  .careers-intro__text { font-size: 14px; }
  .careers-count { margin-top: 20px; font-size: 12px; }
  .careers .spoiler_list.vacancies > li { padding: 23px 20px 20px; border-radius: 14px; }
  .careers h2.vacancy { font-size: 19px; }
  .vacancy-toggle { gap: 16px; }
  .careers .vacancy_details { padding: 16px; font-size: 14px; }
  .careers .vacancy-contact { gap: 9px; padding-top: 18px; }
  .vacancy-apply, .careers .vacancy-contact__telegram { width: 100%; }
  .application-body { padding: 30px 22px 22px; }
  .application-dialog h2 { font-size: 25px; }
  .application-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .application-field input, .application-field textarea, .application-field select { font-size: 16px; }
  .application-vacancy select { font-size: 14px; }
  .application-grid { gap: 16px 12px; }
  .application-success { padding: 50px 24px 28px; }
}
@media (max-width: 420px) {
  .application-grid { grid-template-columns: 1fr; gap: 12px; }
  .application-dialog h2 { font-size: 23px; }
  .application-description { font-size: 13px; }
  .application-dialog .careers-eyebrow { font-size: 9px; }
  .application-close { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .careers *, .application-dialog * { transition: none !important; }
}