:root {
    --x3-orange: #FF6B00;
    --x3-orange-hover: #E86100;
    --x3-navy: #041D36;
    --x3-off-white: #F6F7F9;
    --x3-white: #FFFFFF;
    --x3-text: #041D36;
    --x3-text-muted: #66727D;
    --x3-border: #E1E5E9;
    --danger: #B42332;
    --danger-bg: #FFF3F3;
    --shadow: 0 16px 42px rgba(4, 29, 54, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--x3-text); background: var(--x3-off-white); font-family: Montserrat, Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
.shell { width: min(980px, calc(100% - 40px)); margin-inline: auto; }

.hero { position: relative; min-height: 360px; overflow: hidden; color: var(--x3-white); background: radial-gradient(circle at 84% 8%, rgba(255, 107, 0, .09), transparent 28%), var(--x3-navy); }
.hero::after { content: ""; position: absolute; width: 360px; height: 360px; right: -190px; bottom: -245px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255, 255, 255, .018); }
.hero-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 25%, #000); }
.hero-inner { position: relative; z-index: 1; padding-top: 20px; text-align: center; }
.brand-logo { display: block; width: 110px; height: auto; margin-inline: auto; }
.hero-content { padding: 24px 0 30px; }
.eyebrow, .panel-eyebrow, .salary-eyebrow { margin: 0; color: var(--x3-orange); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.accent-line { display: block; width: 32px; height: 2px; margin: 13px auto 18px; background: var(--x3-orange); }
h1 { max-width: 850px; margin: 0 auto; color: var(--x3-white); font-size: clamp(38px, 5vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; text-transform: uppercase; }
.hero-copy { max-width: 760px; margin: 18px auto 0; color: rgba(255, 255, 255, .68); font-size: 16px; line-height: 1.75; }

.application-area { padding: 90px 0; background: var(--x3-off-white); }
.application-form { overflow: hidden; border: 1px solid var(--x3-border); border-radius: 8px; background: var(--x3-white); box-shadow: var(--shadow); }
.form-intro { margin: 0 56px; padding: 54px 0 38px; border-bottom: 1px solid var(--x3-border); }
.form-intro h2 { margin: 10px 0 8px; font-size: clamp(27px, 3vw, 34px); font-weight: 500; letter-spacing: -.02em; }
.form-intro > p:last-child { margin: 0; color: var(--x3-text-muted); font-size: 14px; }
.form-section { margin: 0 56px; padding: 54px 0 28px; border-bottom: 1px solid var(--x3-border); }
.form-section:last-child { padding-bottom: 56px; border-bottom: 0; }
.section-heading { display: flex; align-items: flex-start; gap: 17px; margin-bottom: 34px; }
.section-heading > span { flex: 0 0 auto; padding-top: 3px; color: var(--x3-orange); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.section-heading h2 { margin: 0 0 5px; font-size: 20px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.section-heading p { margin: 0; color: var(--x3-text-muted); font-size: 13px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.field { min-width: 0; margin: 0 0 24px; }
label, legend { display: block; margin-bottom: 8px; color: var(--x3-navy); font-size: 14px; font-weight: 600; }
fieldset { min-width: 0; padding: 0; border: 0; }
.required { color: var(--x3-orange); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea { display: block; width: 100%; border: 1px solid var(--x3-border); border-radius: 6px; color: var(--x3-text); background: var(--x3-white); outline: none; transition: border-color .18s, box-shadow .18s, background-color .18s; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"] { height: 50px; padding: 0 15px; }
textarea { min-height: 146px; padding: 14px 15px; resize: vertical; }
textarea.textarea-small { min-height: 130px; }
input::placeholder, textarea::placeholder { color: #929BA3; }
input:focus, textarea:focus { border-color: var(--x3-orange); box-shadow: 0 0 0 3px rgba(255, 107, 0, .10); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 50, .10); }
.field-error { min-height: 18px; margin: 6px 0 0; color: var(--danger); font-size: 12px; font-weight: 500; }

.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; margin: 0; cursor: pointer; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span { display: flex; align-items: center; gap: 10px; min-width: 112px; height: 48px; padding: 0 17px; border: 1px solid var(--x3-border); border-radius: 6px; color: var(--x3-navy); background: var(--x3-white); transition: border-color .18s, background-color .18s; }
.choice span::before { content: ""; width: 16px; height: 16px; border: 1px solid #A7B0B8; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--x3-white); background: var(--x3-white); }
.choice input:checked + span { border-color: var(--x3-orange); background: rgba(255, 107, 0, .05); }
.choice input:checked + span::before { border-color: var(--x3-orange); background: var(--x3-orange); }
.choice input:focus-visible + span { outline: 3px solid rgba(255, 107, 0, .18); outline-offset: 2px; }
.conditional { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .22s ease, opacity .22s ease; }
.conditional > .field { min-height: 0; overflow: hidden; margin-bottom: 0; }
.conditional.is-visible { grid-template-rows: 1fr; opacity: 1; }
.conditional.is-visible > .field { margin-bottom: 24px; }

.salary-field { margin-top: 8px; padding: 22px 22px 4px; border-left: 3px solid var(--x3-orange); border-radius: 0 6px 6px 0; background: rgba(255, 107, 0, .05); }
.salary-eyebrow { display: block; margin-bottom: 9px; }
.salary-field legend { float: left; width: 100%; margin-bottom: 17px; font-weight: 500; line-height: 1.6; }
.salary-field .choice-row, .salary-field .field-error { clear: both; }
.upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 142px; padding: 24px; border: 1.5px dashed #B8C0C8; border-radius: 6px; background: #FCFCFD; text-align: center; cursor: pointer; transition: border-color .18s, background-color .18s; }
.upload-zone:hover, .upload-zone.is-dragging, .upload-zone.has-file { border-color: var(--x3-orange); background: rgba(255, 107, 0, .035); }
.upload-zone:focus-within { outline: 3px solid rgba(255, 107, 0, .15); outline-offset: 2px; }
.upload-zone.has-error { border-color: var(--danger); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { width: 30px; height: 30px; color: var(--x3-orange); }
.upload-icon svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.upload-copy strong { display: block; color: var(--x3-navy); font-size: 14px; overflow-wrap: anywhere; }
.upload-copy small { display: block; margin-top: 4px; color: var(--x3-text-muted); font-size: 12px; font-weight: 400; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; margin: 28px 0 0; padding: 18px; border: 1px solid var(--x3-border); border-radius: 6px; background: var(--x3-off-white); font-weight: 500; line-height: 1.55; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--x3-orange); }
.submit-row { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--x3-border); }
.submit-row > p { max-width: 360px; margin: 0; color: var(--x3-text-muted); font-size: 12px; }
.submit-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-width: 225px; height: 50px; padding: 0 24px; border: 0; border-radius: 6px; color: var(--x3-white); background: var(--x3-orange); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(255, 107, 0, .18); cursor: pointer; transition: transform .18s, box-shadow .18s, background-color .18s, opacity .18s; }
.submit-button:hover { background: var(--x3-orange-hover); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(255, 107, 0, .22); }
.submit-button:focus-visible { outline: 3px solid rgba(255, 107, 0, .25); outline-offset: 3px; }
.submit-button:disabled { opacity: .65; cursor: wait; transform: none; }
.submit-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.alert { margin: 32px 56px 0; padding: 15px 17px; border-radius: 6px; }
.alert-error { border: 1px solid #EAC3C7; color: #7F1D2D; background: var(--danger-bg); }
.error-summary p { margin: 3px 0 8px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: inherit; }
.honeypot { position: absolute; left: -10000px; }

.site-footer { padding: 30px 0; color: rgba(255, 255, 255, .58); background: var(--x3-navy); font-size: 11px; }
.footer-inner { display: flex; align-items: center; gap: 28px; }
.footer-inner p { margin: 0; }
.footer-inner p:first-of-type { flex: 1; }
.footer-inner i { margin: 0 5px; color: var(--x3-orange); font-style: normal; }
.footer-logo { width: 72px; margin: 0; }

.success-area { min-height: 410px; }
.success-wrap { max-width: 760px; text-align: center; }
.success-card { padding: 52px 44px; border: 1px solid var(--x3-border); border-radius: 8px; background: var(--x3-white); box-shadow: var(--shadow); }
.success-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border: 1px solid rgba(255, 107, 0, .28); border-radius: 50%; color: var(--x3-orange); background: rgba(255, 107, 0, .05); }
.success-icon svg { width: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.success-card h2 { margin: 10px 0 8px; font-size: 28px; font-weight: 500; }
.success-card > p:not(.panel-eyebrow) { max-width: 570px; margin: 0 auto; color: var(--x3-text-muted); font-size: 14px; }
.reference-block { max-width: 500px; margin: 28px auto 0; padding: 18px 20px; border-left: 3px solid var(--x3-orange); border-radius: 0 6px 6px 0; background: var(--x3-off-white); }
.reference-block span { display: block; margin-bottom: 5px; color: var(--x3-text-muted); font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.reference-block strong { display: block; color: var(--x3-navy); font-size: clamp(15px, 2.4vw, 19px); font-weight: 600; letter-spacing: .035em; overflow-wrap: anywhere; }

.status-page { display: grid; place-items: center; align-content: center; min-height: 100vh; padding: 30px; color: var(--x3-white); background: var(--x3-navy); text-align: center; }
.status-page .eyebrow { margin: 38px 0 12px; }
.status-page h1 { font-size: clamp(38px, 7vw, 54px); }
.status-page p:last-child { color: rgba(255,255,255,.65); }

@media (max-width: 768px) {
    .application-area { padding: 64px 0; }
    .field-grid { grid-template-columns: 1fr; }
    .form-intro, .form-section { margin-inline: 38px; }
    .alert { margin-inline: 38px; }
}
@media (max-width: 520px) {
    .shell { width: min(100% - 36px, 980px); }
    .hero { min-height: 0; }
    .hero-inner { padding-top: 16px; }
    .brand-logo { width: 90px; }
    .hero-content { padding: 20px 0 30px; }
    h1 { font-size: clamp(32px, 10.5vw, 42px); }
    .hero-copy { font-size: 14px; line-height: 1.65; }
    .application-area { padding: 46px 0; }
    .form-intro { margin-inline: 23px; padding: 35px 0 29px; }
    .form-intro h2 { font-size: 26px; }
    .form-section { margin-inline: 23px; padding: 39px 0 18px; }
    .form-section:last-child { padding-bottom: 28px; }
    .section-heading { gap: 12px; margin-bottom: 27px; }
    .section-heading h2 { font-size: 17px; }
    .section-heading p { font-size: 12px; }
    .field { margin-bottom: 21px; }
    .choice-row { flex-direction: column; }
    .choice { width: 100%; }
    .choice span { width: 100%; }
    .salary-field { padding: 19px 17px 2px; }
    .upload-zone { min-height: 136px; padding: 21px 16px; }
    .consent { padding: 15px; font-size: 13px; }
    .submit-row { align-items: stretch; flex-direction: column-reverse; gap: 15px; }
    .submit-row > p { text-align: center; }
    .submit-button { width: 100%; }
    .alert { margin: 22px 23px 0; }
    .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
    .footer-logo { width: 68px; margin-inline: auto; }
    .success-card { padding: 40px 22px; }
    .success-card h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
