/* ══ APPLICATION FORM ══ */
.apply-shell{ max-width:840px; margin:0 auto; }
/* This panel is thousands of px tall, so it skips the shared .panel hover
   lift/shadow-transition (fine on a small card, a visible repaint cost on
   something this size) and the scroll-gated .reveal fade (which stayed
   invisible until 15% of it had scrolled into view, reading as "stuck
   loading"). It renders at full opacity immediately; only its inner
   sections animate in. */
.apply-panel{ padding:clamp(1.6rem,4vw,3rem); transition:none; position:relative; overflow:hidden; }
.apply-panel:hover{ transform:none; box-shadow:0 1px 2px rgba(20,22,28,.05), 0 12px 30px rgba(20,22,28,.07); border-color:var(--border); }
.apply-panel::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--accent-hot),var(--accent),var(--accent-deep)); }

/* ══ HEADER ══ */
.apply-header{ margin-bottom:1.3rem; padding-right:2.4rem; }
.apply-header .eyebrow{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.5rem; }
.apply-header h2{ font-size:1.5rem; margin-bottom:.4rem; }
.apply-header p{ color:var(--ink-soft); font-size:.9rem; }

/* ══ STEP NAV (pill tabs) ══ */
.apply-steps{
  position:sticky; top:0; z-index:50;
  display:flex; flex-wrap:wrap; gap:.6rem;
  background:var(--surface);
  padding:.9rem 0 1.3rem; margin-bottom:1.4rem;
  border-bottom:1px solid var(--border);
}
.apply-step-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem 1.05rem .55rem .55rem; border-radius:2.5rem;
  border:1.5px solid var(--border); background:var(--surface-2); color:var(--ink-soft);
  font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.03em;
  cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.apply-step-pill-num{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--surface); color:var(--ink-soft); font-size:.72rem;
}
.apply-step-pill:hover{ border-color:var(--accent); color:var(--accent-ink); }
.apply-step-pill.is-active{ background:linear-gradient(135deg,var(--accent-hot),var(--accent)); border-color:transparent; color:#fff; }
.apply-step-pill.is-active .apply-step-pill-num{ background:rgba(255,255,255,.28); color:#fff; }
.apply-step-pill.is-done{ border-color:var(--accent); color:var(--accent-ink); }
.apply-step-pill.is-done .apply-step-pill-num{ background:rgba(255,106,31,.14); color:var(--accent-ink); }
@media(max-width:640px){
  .apply-steps{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .apply-steps::-webkit-scrollbar{ display:none; }
  .apply-step-pill{ flex-shrink:0; }
}

@keyframes formBlockIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.form-block{ padding-bottom:2.2rem; margin-bottom:2.2rem; border-bottom:1px solid var(--border); animation:formBlockIn .5s ease both; }
.form-block:last-of-type{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
@media (prefers-reduced-motion: reduce){ .form-block{ animation:none; } }
.form-block-head{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.form-block-head .icon-wrap{
  flex-shrink:0; width:48px; height:48px; border-radius:1rem; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, var(--surface-2), var(--surface)); border:1px solid var(--border);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.form-block-head .icon-wrap svg{ width:24px; height:24px; }
.form-block:hover .form-block-head .icon-wrap{ transform:scale(1.08) rotate(-4deg); border-color:var(--accent); box-shadow:0 8px 20px rgba(255,106,31,.22); }
.form-block-head .eyebrow{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.4rem; }
.form-block-head h3{ font-size:1.28rem; margin-bottom:.35rem; }
.form-block-head p{ color:var(--ink-soft); font-size:.86rem; }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.5rem; }
@media(max-width:640px){ .field-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column:1/-1; }
.field + .field-grid, .field-grid + .field{ margin-top:1.3rem; }
.form-block .field-grid + .field-grid{ margin-top:1.3rem; }

.field label{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.field label .req{ color:var(--accent-ink); }
.field label .opt{ color:var(--ink-soft); font-weight:500; text-transform:none; letter-spacing:0; font-size:.72rem; }

.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=number], .field select, .field textarea{
  font-family:var(--font-body); font-size:var(--field-font-size); color:var(--ink);
  padding:.75rem .9rem; border:1.5px solid var(--border); border-radius:.6rem;
  background:var(--surface); transition:border-color .2s ease, box-shadow .2s ease; width:100%;
}
.field textarea{ resize:vertical; min-height:88px; font-family:var(--font-body); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,106,31,.15); }
.field input:hover:not(:focus), .field select:hover:not(:focus), .field textarea:hover:not(:focus):not([readonly]){ border-color:var(--accent-hot); }
.field select{ cursor:pointer; }
/* Native <input type=date> renders mm/dd/yyyy or dd/mm/yyyy purely off OS/browser
   locale, the lang attribute doesn't override it in Chromium, so there's no
   reliable way to force DD/MM/YYYY that way. Three explicit selects in DD/MM/YYYY
   order sidestep the ambiguity entirely; a hidden field carries the ISO value. */
.dob-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.dob-row select{ width:auto; min-width:78px; text-align:center; }
.dob-row select#dobYear{ min-width:96px; }
.field textarea[readonly]{ background:var(--surface-2); color:var(--ink-soft); }
.field input[type=file]{
  font-family:var(--font-body); font-size:.86rem; padding:.7rem .8rem; color:var(--ink-soft);
  border:1.5px dashed var(--border); border-radius:.6rem; background:var(--surface-2);
  transition:border-color .2s ease, background .2s ease;
}
.field input[type=file]:hover{ border-color:var(--accent); background:rgba(255,106,31,.07); cursor:pointer; }
.field .hint{ font-size:.76rem; color:var(--ink-soft); }

/* ══ FRESHER / EXPERIENCED TOGGLE ══ */
.segmented-toggle{
  position:relative; display:inline-flex; padding:.3rem; border-radius:2.5rem;
  background:var(--surface-2); border:1.5px solid var(--border); width:max-content; max-width:100%;
}
.segmented-toggle input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.segmented-toggle label{
  position:relative; z-index:1; padding:.6rem 1.6rem; border-radius:2rem; cursor:pointer;
  font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; min-width:112px; user-select:none;
  transition:color .3s ease;
}
.segmented-toggle label:hover{ color:var(--ink); }
.segmented-toggle input:checked + label{ color:#fff; }
.segmented-toggle input:checked + label:hover{ color:#fff; }
.segmented-toggle input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; }
.segmented-thumb{
  position:absolute; top:.3rem; left:.3rem; height:calc(100% - .6rem); width:calc(50% - .3rem);
  border-radius:2rem; background:linear-gradient(135deg,var(--accent-hot),var(--accent));
  box-shadow:0 6px 16px rgba(255,106,31,.32); opacity:0; z-index:0;
  transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .25s ease;
}
.segmented-toggle.is-fresher .segmented-thumb, .segmented-toggle.is-experienced .segmented-thumb{ opacity:1; }
.segmented-toggle.is-experienced .segmented-thumb{ transform:translateX(100%); }
/* label's min-width:112px is a hard floor that doesn't shrink, on phones
   under ~370px wide the two labels (224px+) no longer fit the modal's
   available width and were spilling past the toggle; let them share the
   full-width pill equally instead, with the long word wrapping if needed. */
@media(max-width:480px){
  .segmented-toggle{ width:100%; }
  .segmented-toggle label{ min-width:0; flex:1 1 0; padding:.6rem .8rem; overflow-wrap:break-word; }
}

.field.experienced-only{
  overflow:hidden; max-height:120px; opacity:1; margin-top:0;
  transition:max-height .35s ease, opacity .3s ease, margin-top .3s ease, visibility 0s linear 0s;
}
.field.experienced-only.is-collapsed{
  max-height:0; opacity:0; margin-top:0; visibility:hidden; pointer-events:none;
  transition:max-height .35s ease, opacity .3s ease, margin-top .3s ease, visibility 0s linear .35s;
}

.choice-row{ display:flex; flex-wrap:wrap; gap:.6rem .7rem; }
.choice-pill{ display:flex; align-items:center; gap:.5rem; padding:.65rem 1.05rem; border:1.5px solid var(--border); border-radius:2rem; font-size:.86rem; cursor:pointer; background:var(--surface); transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.choice-pill input{ accent-color:var(--accent); }
.choice-pill:hover{ border-color:var(--accent); color:var(--accent-ink); transform:translateY(-2px); box-shadow:0 8px 18px rgba(255,106,31,.18); }
.choice-pill.is-checked{ border-color:var(--accent); background:rgba(255,106,31,.1); color:var(--accent-ink); font-weight:700; transform:translateY(-1px); }
.choice-pill.is-checked::after{ content:'✓'; color:var(--accent); font-weight:800; }
.choice-pill.is-checked:hover{ transform:translateY(-2px); }

.shift-field{
  display:flex; flex-direction:column; gap:.5rem; grid-column:1/-1;
  max-height:0; opacity:0; margin-top:0; overflow:hidden; visibility:hidden;
  transition:max-height .35s ease, opacity .3s ease, margin-top .3s ease, visibility 0s linear .35s;
}
.shift-field.show{
  max-height:140px; opacity:1; margin-top:.3rem; visibility:visible;
  transition:max-height .35s ease, opacity .3s ease .05s, margin-top .3s ease;
}

.consent-block{ display:flex; flex-direction:column; gap:.9rem; }
.consent-item{
  display:flex; align-items:flex-start; gap:.7rem; font-size:.86rem; color:var(--ink-soft); line-height:1.55; cursor:pointer;
  padding:.5rem .6rem; margin:-.5rem -.6rem; border-radius:.6rem; transition:background .2s ease, color .2s ease;
}
.consent-item:hover{ background:var(--surface-2); color:var(--ink); }
.consent-item input{ margin-top:.25rem; accent-color:var(--accent); flex-shrink:0; }
/* Beats the more specific ".field label" uppercase/mono styling when a .consent-item
   checkbox sits inside a .field wrapper (e.g. the "same as current address" toggle). */
.field .consent-item{ font-family:var(--font-body); font-size:.85rem; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--ink-soft); }

.form-submit{ text-align:center; margin-top:.5rem; }
.form-submit .btn{ border:none; cursor:pointer; }
.form-submit .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.form-note{ font-size:.78rem; color:var(--ink-soft); text-align:center; margin-top:1.1rem; }
.form-error{ display:none; text-align:center; margin-top:1.1rem; font-size:.86rem; color:var(--accent-deep); font-weight:600; }

.form-success{ display:none; text-align:center; padding:2.4rem 1rem 1rem; }
.form-success.show{ display:block; }
.form-success .icon-wrap{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.3rem; background:radial-gradient(circle at 30% 20%, var(--surface-2), var(--surface)); border:1px solid var(--border); }
.form-success h3{ font-size:1.5rem; margin-bottom:.7rem; }
.form-success p{ color:var(--ink-soft); max-width:46ch; margin:0 auto 1.6rem; }

/* ══ APPLICATION FORM MODAL ══ */
.apply-modal-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; background:rgba(10,12,18,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.apply-modal-overlay.active{ opacity:1; visibility:visible; }
.apply-modal{
  position:relative; width:100%; max-width:900px; max-height:90vh;
  display:flex; flex-direction:column; border-radius:1.25rem; overflow:hidden;
  background:var(--surface); box-shadow:0 40px 90px rgba(15,23,42,.4);
  transform:translateY(24px) scale(.97); opacity:0;
  transition:transform .4s cubic-bezier(.16,.84,.44,1), opacity .4s ease;
}
.apply-modal-overlay.active .apply-modal{ transform:translateY(0) scale(1); opacity:1; }
.apply-modal-close{
  position:absolute; top:.9rem; right:.9rem; z-index:5; width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink-soft);
  font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(20,22,28,.15); transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.apply-modal-close:hover{ color:var(--accent-ink); border-color:var(--accent); transform:rotate(90deg); }
.apply-modal-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:clamp(1.2rem,4vw,2rem); }
.apply-modal .apply-shell{ margin:0; }
@media (prefers-reduced-motion: reduce){ .apply-modal-overlay, .apply-modal, .apply-modal-close{ transition:none !important; } }

/* ══ STEP FOOTER (Back / Step X of N / Continue) ══ */
.apply-footer{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-shrink:0;
  padding:1rem clamp(1.2rem,4vw,2rem); border-top:1px solid var(--border); background:var(--surface);
}
.apply-footer-step{ font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.05em; color:var(--ink-soft); }
.apply-footer-back{
  display:inline-flex; align-items:center; gap:.4rem; padding:.75rem 1.3rem; border-radius:.7rem;
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
  font-family:var(--font-mono); font-size:.8rem; font-weight:700; letter-spacing:.03em;
  cursor:pointer; transition:border-color .2s ease, color .2s ease, opacity .2s ease;
}
.apply-footer-back:hover:not(:disabled){ border-color:var(--accent); color:var(--accent-ink); }
.apply-footer-back:disabled{ opacity:.4; cursor:not-allowed; }
.apply-footer-next{ border:none; cursor:pointer; min-width:180px; justify-content:center; }
@media(max-width:560px){
  .apply-footer{ flex-wrap:wrap; }
  .apply-footer-step{ order:3; width:100%; text-align:center; }
}

/* ══ CTA BAND ══ */
.cta-band{ position:relative; z-index:1; margin:0 auto; padding:0 1.75rem 6rem; max-width:1180px; }
.cta-inner{
  border-radius:1.6rem; padding:4rem 2.5rem; text-align:center; overflow:hidden; position:relative;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(255,106,31,.4), transparent 55%),
    radial-gradient(ellipse at 50% 130%, rgba(255,194,75,.25), transparent 45%),
    #0A0B0E;
  --ink:#EEEAE1; --border:#262A34; --surface:#14161C;
}
.cta-inner h2{ color:#EEEAE1; font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1rem; }
.cta-inner p{ color:#9C9A90; max-width:52ch; margin:0 auto 2rem; font-size:1.05rem; }
.cta-btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* Extracted inline styles */
.careers-il-1 { transition-delay:.05s }
.careers-il-2 { transition-delay:.1s }
.careers-il-3 { transition-delay:.04s }
.careers-il-4 { transition-delay:.08s }
.careers-il-5 { transition-delay:.12s }
.careers-il-6 { transition-delay:.16s }
.careers-il-7 { transition-delay:.2s }
.careers-il-8 { transition-delay:.24s }
.careers-il-9 { transition-delay:.28s }
.careers-il-10 { margin-top:.8rem; }
.careers-il-11 { transition-delay:.06s }
.careers-il-12 { transition-delay:.12s }
.careers-il-13 { animation-delay:.03s }
.careers-il-14 { font-size:.82rem; }
.careers-il-15 { animation-delay:.08s }
.careers-il-16 { animation-delay:.13s }
.careers-il-17 { animation-delay:.18s }
.careers-il-18 { animation-delay:.23s }
.careers-il-19 { animation-delay:.28s }
.careers-il-20 { animation-delay:.33s }
.careers-il-21 { animation-delay:.38s }
.careers-il-22 { max-width:26ch; }
.careers-il-23 { margin-left:auto;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }