/* ======================================================================
   VisionForgeX — Careers (/careers/)
   ----------------------------------------------------------------------
   Loaded on that page only, after site.css, and built from its tokens.

   THE IDEA. Two things matter here and everything else stays out of
   their way: the list of roles, set like a ledger (one heavy rule on top,
   one line per role, the title large enough to be read from across the
   room), and the form, which is the Contact form's own (same fields,
   same bar across the top that warms up as it is filled in) with one
   part made for this page: the place the CV goes.

   Nothing here animates in. The only motion is in answer to the person:
   the drop area when a file is over it, the bar as fields are filled,
   the button while the file travels.

   NAMING. As in site.css: no class contains "ad", "ads" or "banner" as a
   word.
   ====================================================================== */

/* ---------- the list ---------- */
.cr-hero{padding-bottom:clamp(28px,5vh,56px)}
.cr-hero .lede{max-width:56ch}
.cr-back-row{margin-top:10px}
.cr-roles{padding-bottom:clamp(64px,11vh,128px)}
.cr-roles-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding-bottom:16px;border-bottom:2px solid var(--bone)}
.cr-count{color:var(--mist);font-weight:600;font-variant-numeric:tabular-nums}
.cr-list li{border-bottom:1px solid var(--rule)}
.cr-role{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.7fr) auto;gap:8px 28px;align-items:baseline;padding:clamp(22px,3.4vh,32px) 14px;margin-inline:-14px;border-radius:14px;color:inherit;text-decoration:none;transition:background-color .2s}
.cr-role:hover{background:var(--ink-2)}
.cr-role-main{display:grid;gap:6px;min-width:0}
.cr-role-main b{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.1;font-weight:800;font-stretch:118%;letter-spacing:-.014em;color:var(--bone);text-wrap:balance}
.cr-role-main span{color:var(--mist);line-height:1.45;max-width:52ch}
.cr-role-fact{color:var(--mist);font-size:.9688rem}
.cr-role-go{color:var(--brand-ink);font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.28em;transition:text-decoration-color .2s}
.cr-role:hover .cr-role-go{text-decoration-color:currentColor}
.cr-none{display:grid;gap:10px;padding:clamp(32px,6vh,56px) 0;border-bottom:1px solid var(--rule);color:var(--mist)}
.cr-none .d3{color:var(--bone)}
.cr-open{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(28px,5vh,44px)}
.cr-open p{color:var(--mist);max-width:52ch}
.cr-open b{color:var(--bone);font-weight:700}
.cr-open-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

/* ---------- how we hire: four steps, in the order they happen ---------- */
.cr-how{padding-block:clamp(64px,11vh,128px);border-top:1px solid var(--rule);background:var(--ink-1)}
.cr-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:step;margin-top:clamp(32px,6vh,56px)}
.cr-steps li{position:relative;counter-increment:step;padding:44px 28px 0 0}
.cr-steps li::before{content:counter(step);position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bone);color:#fff;font-size:.875rem;font-weight:800;font-variant-numeric:tabular-nums}
.cr-steps li::after{content:"";position:absolute;left:30px;right:0;top:14.5px;height:1px;background:var(--rule-2)}
.cr-steps li:last-child::after{display:none}
.cr-steps li:last-child::before{background:var(--brand-btn)}
.cr-steps b{display:block;margin-bottom:8px;font-size:1.15rem;font-weight:800;font-stretch:112%;color:var(--bone)}
.cr-steps span{display:block;color:var(--mist);font-size:.9688rem;line-height:1.5}

/* ---------- one job ---------- */
.cr-job{padding-top:calc(var(--hdr) + clamp(32px,7vh,80px))}
.cr-preview{margin-bottom:24px;padding:12px 16px;border:1px solid #E2A100;border-radius:12px;background:#FFF7E0;color:#5C3D00;font-weight:600}
.cr-crumb{margin-bottom:20px;font-size:.9375rem;font-weight:600}
.cr-job-head .lede{margin-top:16px;max-width:60ch}
.cr-facts{display:flex;flex-wrap:wrap;margin-top:clamp(24px,4vh,36px);border-block:1px solid var(--rule)}
.cr-facts div{padding:16px 28px 16px 0;margin-right:28px;border-right:1px solid var(--rule)}
.cr-facts div:last-child{border-right:0;margin-right:0}
.cr-facts dt{color:var(--dim);font-size:.8438rem;font-weight:600;margin-bottom:2px}
.cr-facts dd{color:var(--bone);font-weight:700}
.cr-job-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:clamp(32px,6vw,104px);align-items:start;padding-block:clamp(36px,7vh,72px) clamp(56px,10vh,112px)}
.cr-job-body{max-width:44rem;min-width:0;color:#3B3549}
.cr-job-body section + section{margin-top:clamp(28px,5vh,44px)}
.cr-job-body h2{margin-bottom:14px;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.15;font-weight:800;font-stretch:116%;letter-spacing:-.012em;color:var(--bone)}
.cr-job-body p{margin-bottom:14px}
.cr-job-body ul{display:grid;gap:10px}
.cr-job-body li{position:relative;padding-left:22px;line-height:1.55}
.cr-job-body li::before{content:"";position:absolute;left:2px;top:.64em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.cr-job-side{position:sticky;top:calc(var(--hdr) + 28px);display:grid;gap:12px;padding:22px;border:1px solid var(--rule);border-radius:20px;background:#fff;box-shadow:0 30px 70px -40px rgba(var(--shadow),.35)}
.cr-job-side p{margin-top:4px;color:var(--mist);font-size:.9063rem;line-height:1.5}

/* ---------- the application ---------- */
.cr-apply{padding-block:clamp(56px,10vh,120px) clamp(64px,12vh,140px);border-top:1px solid var(--rule);background:var(--ink-1);scroll-margin-top:var(--hdr)}
.cr-apply-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,104px);align-items:start}
.cr-apply-copy{position:sticky;top:calc(var(--hdr) + 48px);display:grid;gap:16px}
.cr-next{margin-top:clamp(8px,2vh,20px);border-top:1px solid var(--rule)}
.cr-next li{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:4px 18px;padding:14px 0;border-bottom:1px solid var(--rule)}
.cr-next b{font-weight:700;color:var(--bone)}
.cr-next span{color:var(--mist)}
.cr-form{animation:none}
.cr-apply .form-shell{animation:none}

/* where the CV goes */
.cr-cv{position:relative}
.cr-cv-label{display:block;margin-bottom:9px;font-size:.9375rem;font-weight:700;color:var(--bone)}
/* (.field label and .field label span in site.css style a field's caption; this label is the drop area itself, so those are undone here) */
.cr-cv label.cr-drop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 18px;margin:0;padding:20px;border:1.5px dashed var(--rule-2);border-radius:16px;background:var(--ink-1);font-size:1rem;font-weight:400;cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.cr-cv .cr-drop span{margin-left:0;font-weight:inherit;color:inherit}
.cr-drop svg{width:44px;height:44px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.cr-cv .cr-drop-text{display:grid;gap:3px;min-width:0}
.cr-drop-text b{font-weight:700;color:var(--bone);overflow-wrap:anywhere}
.cr-cv .cr-drop .cr-drop-or{font-weight:500;color:var(--mist)}
.cr-cv .cr-drop-text > span{color:var(--mist);font-size:.9063rem}
.cr-cv .cr-drop .cr-drop-btn{padding:11px 16px;border:1px solid var(--rule-2);border-radius:10px;background:#fff;color:var(--bone);font-size:.9375rem;font-weight:700;white-space:nowrap}
.cr-drop:hover,.cr-drop.is-over{border-color:var(--brand);background:var(--brand-soft)}
.cr-drop.is-over{box-shadow:0 0 0 4px rgba(141,93,217,.16)}
.cr-drop.is-over svg{transform:translateY(-3px)}
.cr-cv.has-file .cr-drop{border-style:solid;border-color:rgba(141,93,217,.6);background:#fff}
.cr-cv.is-bad .cr-drop{border-color:var(--h4);box-shadow:0 0 0 4px rgba(255,107,94,.16)}
.cr-cv .cr-file{position:absolute;left:20px;top:44px;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none}
.cr-cv:focus-within .cr-drop{outline:2px solid var(--brand-ink);outline-offset:3px}
.cr-cv-clear{appearance:none;margin-top:10px;padding:0;border:0;background:none;color:var(--brand-ink);font:inherit;font-size:.9063rem;font-weight:600;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.cr-counter{margin-top:6px;text-align:right;color:var(--dim);font-size:.8438rem;font-variant-numeric:tabular-nums}

/* the one tick */
.cr-agree label.cr-tick{display:flex;align-items:flex-start;gap:12px;margin:0;font-size:.9375rem;font-weight:400;line-height:1.5;color:var(--mist);cursor:pointer}
.cr-tick input{appearance:none;-webkit-appearance:none;flex:0 0 auto;display:grid;place-items:center;width:22px;min-height:0;height:22px;margin:1px 0 0;padding:0;border:1.5px solid var(--rule-2);border-radius:6px;background:#fff;cursor:pointer;transition:background-color .15s,border-color .15s}
.cr-tick input::after{content:"";width:11px;height:6px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .18s var(--spring)}
.cr-tick input:checked{background:var(--brand-btn);border-color:var(--brand-btn)}
.cr-tick input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.cr-tick input:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px;box-shadow:none}
.cr-agree.is-bad .cr-tick input{border-color:var(--h4);box-shadow:0 0 0 4px rgba(255,107,94,.16)}
.cr-agree .cr-tick span{margin:0;color:inherit;font-weight:inherit}
.cr-form textarea[rows="3"]{min-height:104px}

/* while the file travels, the button fills from the left */
.cr-form .btn[data-busy]{pointer-events:none;background:linear-gradient(90deg,var(--brand-deep) calc(var(--up,0) * 100%),var(--brand-btn) calc(var(--up,0) * 100%))}
.cr-ref{color:var(--mist)}
.cr-ref b{margin-left:.5em;padding:5px 12px;border-radius:8px;background:var(--ink-2);border:1px solid var(--rule);color:var(--bone);font-weight:800;font-stretch:108%;letter-spacing:.04em;white-space:nowrap}

/* ---------- narrower screens ---------- */
@media (max-width:1040px){
  .cr-role{grid-template-columns:minmax(0,1fr) auto;gap:6px 20px}
  .cr-role-main{grid-column:1 / -1}
  .cr-role-fact{grid-column:1;font-size:.9375rem}
  .cr-role-go{grid-column:2;grid-row:2 / span 3;align-self:end}
  .cr-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .cr-steps li:nth-child(2)::after{display:none}
  .cr-job-grid{grid-template-columns:1fr}
  .cr-job-side{position:static;order:-1;grid-template-columns:auto auto 1fr;align-items:center}
  .cr-job-side p{margin:0}
  .cr-apply-grid{grid-template-columns:1fr}
  .cr-apply-copy{position:static}
}
@media (max-width:640px){
  .cr-steps{grid-template-columns:1fr;row-gap:0}
  .cr-steps li{padding:0 0 26px 46px}
  .cr-steps li:last-child{padding-bottom:0}
  .cr-steps li::after,.cr-steps li:nth-child(2)::after{display:block;left:14.5px;right:auto;top:30px;bottom:0;width:1px;height:auto}
  .cr-steps li:last-child::after{display:none}
  .cr-facts div{flex:1 1 40%;margin-right:0;border-right:0;padding-right:16px}
  .cr-job-side{grid-template-columns:1fr}
  .cr-next li{grid-template-columns:1fr}
  .cr-cv label.cr-drop{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .cr-cv .cr-drop .cr-drop-btn{grid-column:1 / -1;text-align:center}
  .cr-cv .cr-drop .cr-drop-or{display:none}
  .cr-open{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .cr-drop,.cr-drop svg,.cr-tick input,.cr-tick input::after{transition:none}
}
@media print{
  .hdr,.ftr,.wash,.skip,.cr-job-side,.cr-apply{display:none !important}
  body::before{display:none}
  .cr-job{padding-top:0}
}