/* NextGen public portal — shared styles.
   One stylesheet for the careers and credit pages. No framework, no build step:
   this site is deliberately plain files so that mynextgenportal.com cannot
   serve a 2.0 page — the code simply is not here. */
:root{
  --ground:#F7F5F5; --ground-tint:#FBF9F9; --surface:#FFFFFF;
  --ink:#17171A; --ink-soft:#3D3D44; --muted:#6E6A6C; --faint:#9A9497;
  --line:#E5E0E1; --line-strong:#D3CCCE;
  --accent:#A61D22; --accent-hover:#8E181C; --accent-tint:#FAEDED; --accent-ink:#FFFFFF;
  --field:#FFFFFF; --ok:#1C7A46; --bad:#B3261E;
  --shadow:0 1px 2px rgba(23,23,26,.05), 0 8px 24px rgba(23,23,26,.06);
  --shadow-lift:0 2px 4px rgba(23,23,26,.06), 0 14px 34px rgba(23,23,26,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1115; --ground-tint:#12151A; --surface:#191D24;
    --ink:#F3F4F6; --ink-soft:#D2D6DD; --muted:#9AA0AA; --faint:#6F757F;
    --line:#272C35; --line-strong:#39404B;
    --accent:#E0474C; --accent-hover:#EF5A5F; --accent-tint:#2A1417; --accent-ink:#FFFFFF;
    --field:#12151A; --ok:#4ADE80; --bad:#F2726B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1115; --ground-tint:#12151A; --surface:#191D24;
  --ink:#F3F4F6; --ink-soft:#D2D6DD; --muted:#9AA0AA; --faint:#6F757F;
  --line:#272C35; --line-strong:#39404B;
  --accent:#E0474C; --accent-hover:#EF5A5F; --accent-tint:#2A1417; --accent-ink:#FFFFFF;
  --field:#12151A; --ok:#4ADE80; --bad:#F2726B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;
  background:radial-gradient(1100px 460px at 50% -160px, var(--ground-tint), transparent 70%), var(--ground);
  color:var(--ink); font-family:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:0 24px 80px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 24px}
/* The real NextGen mark (badge + wordmark), not a redrawn approximation.
   It is a single flat red on transparent, so dark mode lifts it rather than
   swapping in a second file — the brand red reads as muddy on a dark ground. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);min-width:0}
.brand img{height:30px;width:auto;display:block;flex-shrink:0}
@media (max-width:620px){.brand img{height:25px}}
.brand span{
  font-family:Archivo,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  padding-left:11px;border-left:1px solid var(--line-strong);align-self:center;
}
@media (max-width:520px){.brand span{display:none}}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand img{filter:brightness(1.45) saturate(1.05)}
}
:root[data-theme="dark"] .brand img{filter:brightness(1.45) saturate(1.05)}
.pill{font-family:Archivo,sans-serif;font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted)}
.bar-right{display:flex;align-items:center;gap:8px}
.tbtn{font:inherit;font-size:13px;cursor:pointer;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted)}
.tbtn:hover{color:var(--ink);border-color:var(--muted)}

h1{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(2.05rem,5vw,2.95rem);line-height:1.07;letter-spacing:-.028em;margin:12px 0 16px;text-wrap:balance;max-width:18ch}
.lede{font-size:1.0625rem;color:var(--ink-soft);max-width:56ch;margin:0 0 28px}
.lede em{font-style:normal;color:var(--accent);font-weight:600}

.roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.roles-hint{font-size:.8125rem;color:var(--faint);margin:0 0 26px}
@media (max-width:620px){.roles{grid-template-columns:1fr}}
.role{display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.role:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.role.sel{border-color:var(--accent);background:var(--accent-tint)}
.role-pick{text-align:left;font:inherit;cursor:pointer;background:none;border:0;padding:15px 17px 13px;flex:1;color:inherit}
.role .t{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.9375rem;color:var(--ink);margin-bottom:2px}
.role .s{display:block;font-size:.8125rem;color:var(--muted)}
.role-check{float:right;color:var(--accent);font-size:.75rem;font-family:Archivo,sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;visibility:hidden}
.role.sel .role-check{visibility:visible}
.role-desc{font-family:Archivo,sans-serif;font-size:.8125rem;font-weight:600;cursor:pointer;text-align:left;background:none;border:0;border-top:1px solid var(--line);color:var(--accent);padding:9px 17px;display:flex;align-items:center;gap:6px}
.role.sel .role-desc{border-top-color:var(--line-strong)}
.role-desc:hover{background:var(--ground-tint)}
.role-desc svg{flex-shrink:0}

.scrim{position:fixed;inset:0;z-index:40;background:rgba(15,17,21,.52);display:flex;justify-content:flex-end}
.jd{background:var(--surface);width:min(620px,100%);height:100%;overflow-y:auto;box-shadow:var(--shadow-lift);border-left:1px solid var(--line)}
@media (max-width:620px){.scrim{align-items:flex-end}.jd{height:92%;border-left:0;border-radius:18px 18px 0 0}}
.jd-top{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line);padding:16px 26px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.jd-top h2{margin:0;font-size:1.2rem}
.jd-top .tag{display:block;font-size:.8125rem;color:var(--muted);margin-top:2px}
.jd-x{font:inherit;font-size:20px;line-height:1;cursor:pointer;background:none;border:1px solid var(--line-strong);border-radius:9px;color:var(--muted);width:34px;height:34px;flex-shrink:0}
.jd-x:hover{color:var(--ink);border-color:var(--muted)}
.jd-body{padding:22px 26px 30px}
@media (max-width:620px){.jd-top,.jd-body,.jd-apply{padding-left:18px;padding-right:18px}}
.jd-body h3{font-family:Archivo,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin:26px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.jd-body h3:first-child{margin-top:0}
.jd-body p{font-size:.9375rem;color:var(--ink-soft);margin:0 0 12px}
.jd-body ul{margin:0;padding-left:20px}
.jd-body li{font-size:.9375rem;color:var(--ink-soft);margin-bottom:8px}
.jd-meta{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.jd-meta b{font-family:Archivo,sans-serif;color:var(--ink-soft)}
.jd-meta div{margin-bottom:5px}
.jd-apply{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:14px 26px;display:flex;gap:12px;align-items:center;justify-content:flex-end}

.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.steps{display:flex;gap:6px}
.seg{height:4px;flex:1;background:var(--line);transition:background .2s}
.seg.on{background:var(--accent)}
.card-body{padding:26px 26px 28px}
@media (max-width:620px){.card-body{padding:22px 18px 24px}}
.eyebrow{font-family:Archivo,sans-serif;font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
h2{font-family:Archivo,sans-serif;font-weight:600;font-size:1.35rem;letter-spacing:-.015em;margin:0 0 4px}
h3.sec{font-family:Archivo,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin:28px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.hint{font-size:.9375rem;color:var(--muted);margin:0 0 22px}

.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (max-width:620px){.grid{grid-template-columns:1fr}.f{grid-column:1/-1!important}}
.f{display:flex;flex-direction:column;gap:6px}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:1/-1}
label{font-size:.8125rem;font-weight:600;color:var(--ink-soft);font-family:Archivo,sans-serif}
label .req{color:var(--accent);margin-left:2px}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],select,textarea{
  font:inherit;font-size:.9375rem;color:var(--ink);background:var(--field);
  border:1px solid var(--line-strong);border-radius:10px;padding:11px 12px;width:100%;appearance:none;
}
textarea{resize:vertical;min-height:88px}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) 51%,calc(100% - 14px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input.bad,select.bad{border-color:var(--bad)}
.sub{font-size:.75rem;color:var(--faint)}
.prefix{position:relative}
.prefix span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:.9375rem}
.prefix input{padding-left:26px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.875rem;cursor:pointer;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--field);color:var(--ink-soft)}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.chip.sm{padding:6px 12px;font-size:.8125rem}
.yn{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--field)}
.yn p{margin:0;font-size:.9375rem;color:var(--ink-soft)}
.yn .pair{display:flex;gap:6px;flex-shrink:0}

.rows{display:flex;flex-direction:column;gap:10px}
.rowbox{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--ground-tint)}
.addrow{font:inherit;font-size:.875rem;cursor:pointer;align-self:flex-start;background:none;border:1px dashed var(--line-strong);border-radius:10px;padding:9px 14px;color:var(--muted)}
.addrow:hover{border-color:var(--accent);color:var(--accent)}
.rmrow{font:inherit;font-size:.75rem;cursor:pointer;background:none;border:0;color:var(--faint);padding:2px}
.rmrow:hover{color:var(--bad)}

.drop{border:1.5px dashed var(--line-strong);border-radius:12px;padding:22px;text-align:center;background:var(--field);cursor:pointer;display:block}
.drop:hover{border-color:var(--accent)}
.drop b{display:block;font-family:Archivo,sans-serif;font-size:.9375rem;color:var(--ink);margin-bottom:2px}
.drop span{font-size:.8125rem;color:var(--muted)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.consent{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--field)}
.consent input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--accent)}
.consent label{font-weight:400;font-family:inherit;font-size:.875rem;color:var(--ink-soft)}

.actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.ghost{font:inherit;font-size:.9375rem;cursor:pointer;background:none;border:0;color:var(--muted);padding:10px 2px}
.ghost:hover{color:var(--ink)}
.cta{font-family:Archivo,sans-serif;font-weight:600;font-size:.9375rem;cursor:pointer;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:12px 24px;transition:background .15s}
.cta:hover{background:var(--accent-hover)}
.cta[disabled]{opacity:.55;cursor:progress}
.err{margin-top:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--bad);background:var(--accent-tint);color:var(--bad);font-size:.875rem}
.foot{margin-top:26px;font-size:.8125rem;color:var(--faint);max-width:62ch}
.foot b{color:var(--muted);font-weight:600}

.done{text-align:center;padding:44px 26px 48px}
.tick{width:54px;height:54px;border-radius:50%;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.done h2{font-size:1.5rem;margin-bottom:8px}
.done p{color:var(--muted);max-width:46ch;margin:0 auto 8px}
.ref{display:inline-block;margin-top:16px;font-family:ui-monospace,Menlo,monospace;font-size:.875rem;color:var(--ink-soft);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:7px 14px}
.skel{height:76px;border-radius:14px;background:linear-gradient(90deg,var(--line) 25%,var(--ground-tint) 50%,var(--line) 75%);background-size:200% 100%;animation:sh 1.3s linear infinite}
@keyframes sh{to{background-position:-200% 0}}


/* ---------------------------------------------------------------------------
   iOS
   Safari zooms the whole page whenever you focus a form control whose font is
   under 16px, and the visitor then has to pinch back out — on every field, on
   every form. Our controls were 15px, so this hit every input. Meeting the
   16px floor on small screens is the entire fix; nothing else about the layout
   changes. (Tested on emulated iPhone SE, 12 and 14 Pro Max.)

   Touch targets are raised to Apple's 44px minimum in the same breakpoint.
   "Full description" was a 34px strip, which is a miss on a moving bus.
--------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}

@media (max-width:820px){
  input[type=text],input[type=tel],input[type=email],input[type=date],
  input[type=number],select,textarea{font-size:16px}

  .chip{font-size:15px;padding:11px 16px;min-height:44px}
  .chip.sm{font-size:14px;padding:10px 15px;min-height:40px}
  .role-desc{padding:13px 17px;min-height:46px}
  .role-pick{padding:16px 17px 14px}
  .addrow{padding:12px 16px;min-height:44px}
  .rmrow{padding:9px 6px;min-height:38px}
  .cta{padding:14px 24px;min-height:48px;font-size:1rem}
  .ghost{padding:14px 4px;min-height:44px;font-size:1rem}
  .tbtn{padding:9px 14px;min-height:40px}
  .jd-x{width:42px;height:42px}
  .consent input{width:20px;height:20px}
  .drop{padding:26px 18px}
  /* a form field under a thumb wants a little more room than one under a mouse */
  input[type=text],input[type=tel],input[type=email],input[type=date],
  input[type=number],select{padding:13px 12px}
}