/* Spectra: Careers. The page is one application form -- roles live in roles.json, not markup, so the CMS
   can add or remove them without a code change. Reads css/site.css for tokens, fonts, header, focus ring
   and the shared .cta button (reused here as the submit button, unchanged). One interaction device: the
   thin spectrum line that runs along a field's bottom edge while it's focused -- nothing else moves. */

#main{padding-top:calc(var(--head) + var(--sat) + 8px)}

/* ---------- hero ---------- */
.cr-hero{max-width:none;margin:0;padding:clamp(28px,5.5vh,56px) calc(max(0px,(100% - 640px)/2) + var(--gut) + var(--sar)) clamp(24px,4vh,40px) calc(max(0px,(100% - 640px)/2) + var(--gut) + var(--sal))}   /* full width so the light can use it; the text column is unchanged */
.cr-kicker{margin:0 0 clamp(14px,2.4vh,22px);color:var(--soft)}
.cr-live{margin:0;color:var(--ink);font-family:var(--serif);font-stretch:118%;font-weight:800;
  font-size:clamp(24px,4.2vw,40px);line-height:1.15;letter-spacing:-.005em;max-width:22ch}

/* ---------- open positions ---------- */
.cr-positions{max-width:640px;margin:0 auto;padding:0 calc(var(--gut) + var(--sar)) clamp(40px,7vh,72px) calc(var(--gut) + var(--sal))}
.cr-h{margin:0 0 clamp(14px,2.4vh,22px);color:var(--soft)}
.cr-none{margin:0;color:var(--soft);font-size:15px;line-height:1.5;max-width:44ch}
.cr-none + .cr-noscript{margin-top:8px}

.cr-dept-group{display:flex;flex-direction:column;gap:12px}
.cr-dept-group + .cr-dept-group{margin-top:clamp(20px,3.5vh,32px)}
.cr-dept{margin:0;color:var(--dim);font-family:var(--mono);font-stretch:62%;font-weight:700;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.cr-roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cr-role{position:relative}

/* row: same visual language as the form fields -- raise bg, hairline border, sharp corner */
.cr-role-btn{appearance:none;width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--raise);border:1px solid var(--line);border-radius:2px;color:var(--ink);font:inherit;
  padding:14px 16px;cursor:pointer}
.cr-role-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cr-role-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.cr-role-title{font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.cr-role-meta{font-size:13px;color:var(--soft);line-height:1.3}
.cr-role-icon{flex:0 0 auto;width:18px;height:18px;position:relative}
.cr-role-icon::before,.cr-role-icon::after{content:"";position:absolute;left:50%;top:50%;background:var(--soft);
  transform:translate(-50%,-50%);transition:transform .18s var(--ease)}
.cr-role-icon::before{width:12px;height:1px}
.cr-role-icon::after{width:1px;height:12px}
.cr-role[data-open="true"] .cr-role-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}

/* the one device, reused: a spectrum line under an open (or focused) row */
.cr-role::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.cr-role:focus-within::after,.cr-role[data-open="true"]::after{transform:scaleX(1)}

.cr-role-body{padding:14px 16px 16px;border:1px solid var(--line);border-top:none}
.cr-role-desc{margin:0}
.cr-role-desc p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--soft)}
.cr-role-desc p:last-child{margin-bottom:0}
.cr-role-desc ul{margin:0 0 12px;padding-left:18px;font-size:14px;line-height:1.55;color:var(--soft)}
.cr-role-desc ul:last-child{margin-bottom:0}
.cr-role-desc li{margin:0 0 4px}
.cr-role-apply{margin-top:4px;min-height:44px;padding:0 20px;font-size:14px}

/* ---------- form shell ---------- */
.cr-apply{max-width:640px;margin:0 auto;padding:0 calc(var(--gut) + var(--sar)) clamp(56px,9vh,96px) calc(var(--gut) + var(--sal))}
.cr-form{display:flex;flex-direction:column;gap:22px}

/* honeypot: kept in normal flow (not display:none) so form-filling bots still find and fill it, but
   moved off screen and out of the tab order / AT tree so no real visitor ever meets it */
.cr-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- fields ---------- */
.cr-field{position:relative;display:flex;flex-direction:column;gap:8px}
.cr-field label{font-size:14px;color:var(--soft);letter-spacing:.01em}
.cr-optional{color:var(--dim);font-weight:400}

.cr-field input[type="text"],
.cr-field input[type="tel"],
.cr-field input[type="email"],
.cr-field input[type="url"],
.cr-field select,
.cr-field textarea{
  appearance:none;-webkit-appearance:none;width:100%;min-height:48px;padding:12px 14px;
  background:var(--raise);border:1px solid var(--line);border-radius:2px;
  color:var(--ink);font:inherit;font-size:16px;line-height:1.4}
.cr-field textarea{min-height:104px;resize:vertical}
.cr-field select{background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 15px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.cr-field input::placeholder,.cr-field textarea::placeholder{color:var(--dim)}
.cr-field input:focus-visible,.cr-field select:focus-visible,.cr-field textarea:focus-visible{outline:none}

/* the one device: a spectrum line under the field, on while it holds focus */
.cr-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.cr-field:focus-within::after{transform:scaleX(1)}
.cr-field:focus-within input,.cr-field:focus-within select,.cr-field:focus-within textarea{border-color:var(--dim)}

.cr-cv .cr-or{margin:0;font-size:13px;color:var(--dim)}

.cr-count{margin:0;text-align:right;font-size:12px;color:var(--dim)}

/* consent: a full-row 44px+ tap target, checkbox included */
.cr-check{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;color:var(--ink);font-size:15px;line-height:1.4}
.cr-check input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;
  border:1px solid var(--line);background:var(--raise);border-radius:2px;position:relative;cursor:pointer}
.cr-check input[type="checkbox"]:checked{background:var(--ink);border-color:var(--ink)}
.cr-check input[type="checkbox"]:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cr-consent{position:relative;padding-bottom:2px}
.cr-consent::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.cr-consent:focus-within::after{transform:scaleX(1)}

/* ---------- errors + messages ---------- */
.cr-err{margin:0;font-size:13px;line-height:1.4;color:#ff8a73}
.cr-field.has-error input,.cr-field.has-error select,.cr-field.has-error textarea{border-color:#ff8a73}
.cr-noscript{margin:-6px 0 0;font-size:13px;line-height:1.5;color:var(--soft)}
.cr-form-msg{margin:0;padding:12px 14px;background:var(--raise);border:1px solid #ff8a73;border-radius:2px;
  font-size:14px;line-height:1.5;color:#ff8a73}

/* ---------- submit: the shared .cta button, full width on the form ---------- */
.cr-submit{width:100%;min-height:52px;font-size:16px;margin-top:4px}
.cr-submit[disabled]{opacity:.55;pointer-events:none}

/* ---------- success ---------- */
.cr-success{max-width:52ch;padding:28px 0 0}
.cr-success-line{margin:0;font-family:var(--serif);font-stretch:118%;font-weight:800;color:var(--ink);
  font-size:clamp(22px,3.4vw,30px);line-height:1.25}

@media (prefers-reduced-motion:reduce){
  .cr-field::after,.cr-consent::after,.cr-role::after,.cr-role-icon::before,.cr-role-icon::after{transition:none}
}

/* current-page nav link, matching visit/css/visit.css's rule so this file works standalone too */
.sfoot .sf-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:3px}

/* ---------- 2026-09-30: the background field of light (js/lightfield.js). Sits behind everything, never takes clicks. ---------- */
.cr-lightfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#main{position:relative;z-index:1}

/* the one-line pitch above the open positions: same big-line voice as the About vision (sans 300, tight, large),
   lit by js/type-fx.js data-fx="sweep" as it scrolls in */
.cr-pitch{max-width:640px;margin:0 auto;padding:clamp(20px,5vh,56px) calc(var(--gut) + var(--sar)) clamp(36px,7vh,72px) calc(var(--gut) + var(--sal));
  font-family:var(--sans);font-weight:300;font-size:clamp(34px,7.2vw,60px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}