/* ============================================================
   careers.css — Design Pioneers careers pages
   Used by apply.php and thanks.php

   Tokens below are copied verbatim from index.html so the
   careers pages inherit the site's design system exactly.
   If the site's tokens change, mirror them here.
   ============================================================ */

:root{
  --ink:#071620;
  --ink-2:#0a1e2b;
  --panel:#0c2534;
  --panel-2:#0e2c3d;
  --line:#173a4f;
  --line-soft:#12303f;
  --cyan:#4fd1ff;
  --cyan-bright:#8ceaff;
  --steel:#a9c2d1;
  --text:#dbe8ef;
  --muted:#7f9dae;
  --muted-2:#5f7d8e;
  --danger:#ff6b6b;
  --maxw:820px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--ink);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Ambient blueprint grid — same treatment as the main site */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(79,209,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,209,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 72%);
  z-index:0;pointer-events:none;
}

h1,h2,h3{font-family:"Space Grotesk",sans-serif;letter-spacing:-.01em}
a{color:var(--cyan);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--cyan-bright)}
img{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.rel{position:relative;z-index:1}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"//";color:var(--muted-2);font-weight:400}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:1000;
  background:rgba(7,22,32,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 28px;
}
.brand img{height:62px;width:auto}
.nav-back{
  font-family:"JetBrains Mono",monospace;font-size:12.5px;
  color:var(--muted);letter-spacing:.04em;
}
.nav-back:hover{color:var(--cyan)}

/* ---------- page head ---------- */
.page-head{position:relative;padding:64px 0 8px;overflow:hidden}
.page-head .glow{
  position:absolute;top:-60%;right:-10%;width:60vw;height:60vw;max-width:700px;max-height:700px;
  background:radial-gradient(circle,rgba(79,209,255,.14),transparent 62%);
  z-index:0;pointer-events:none;filter:blur(6px);
}
.page-head h1{
  font-size:clamp(32px,5vw,50px);font-weight:700;line-height:1.05;
  margin:20px 0 14px;letter-spacing:-.02em;
}
.page-head h1 .hl{color:var(--cyan)}
.page-head .lead{color:var(--muted);font-size:17px;max-width:620px}

.page-head .wrap{position:relative}
.datum{position:absolute;width:26px;height:26px;border:1.5px solid var(--cyan);opacity:.5;z-index:2}
.datum.tl{top:-26px;left:28px;border-right:none;border-bottom:none}
.datum.br{bottom:-18px;right:28px;border-left:none;border-top:none}

/* ---------- spec panel ---------- */
.spec{
  background:linear-gradient(180deg,var(--panel) 0%,var(--ink-2) 100%);
  border:1px solid var(--line-soft);border-radius:14px;
  padding:32px 30px;margin:40px 0 8px;position:relative;overflow:hidden;
}
.spec::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
}
.spec h2{font-size:19px;font-weight:600;margin:16px 0 16px}
.spec ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.spec li{
  font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--steel);
  padding-left:18px;position:relative;letter-spacing:.01em;line-height:1.6;
}
.spec li::before{content:"+";position:absolute;left:0;color:var(--cyan)}
.spec .note{
  color:var(--muted);font-size:14.5px;margin-top:20px;
  border-top:1px solid var(--line-soft);padding-top:18px;
}

/* ---------- section rule ---------- */
.dim{display:flex;align-items:center;gap:16px;margin:52px 0 26px}
.dim::after{content:"";height:1px;background:var(--line-soft);flex:1}
.dim .snum{
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--cyan);
  letter-spacing:.1em;
}
.dim h3{font-size:17px;font-weight:600;white-space:nowrap}

/* ---------- fields ---------- */
.field{margin-bottom:24px}
label{display:block;font-weight:500;font-size:15px;margin-bottom:8px}
.req{color:var(--cyan);font-family:"JetBrains Mono",monospace}
.hint{
  font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted-2);
  letter-spacing:.02em;margin:0 0 9px;line-height:1.6;
}

input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:15px;
  color:var(--text);background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:8px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:hover,select:hover,textarea:hover{border-color:var(--line)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(79,209,255,.13);
}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f9dae' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  padding-right:40px;
}
textarea{min-height:130px;resize:vertical;line-height:1.6}

.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:0}}

/* ---------- checkbox chips ---------- */
.checks{display:flex;flex-wrap:wrap;gap:10px}
.checks label{
  display:flex;align-items:center;gap:9px;margin:0;cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:400;
  color:var(--steel);background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:8px;padding:11px 16px;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.checks label:hover{border-color:var(--line);color:var(--text)}
.checks label:has(input:checked){border-color:var(--cyan);color:var(--cyan);background:rgba(79,209,255,.07)}
.checks input{accent-color:var(--cyan);margin:0;cursor:pointer}

/* ---------- file input ---------- */
.filebox{
  border:1px dashed var(--line);border-radius:10px;
  background:var(--ink-2);padding:20px;
  transition:border-color .2s var(--ease);
}
.filebox:hover{border-color:var(--cyan)}
.filebox input[type=file]{font:inherit;font-size:14px;color:var(--muted);width:100%}
.filebox input[type=file]::file-selector-button{
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13.5px;
  background:var(--cyan);color:var(--ink);border:0;border-radius:6px;
  padding:9px 18px;margin-right:14px;cursor:pointer;
  transition:box-shadow .2s var(--ease);
}
.filebox input[type=file]::file-selector-button:hover{box-shadow:0 6px 20px rgba(79,209,255,.28)}
.counter{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted-2);margin-top:7px}

/* ---------- errors ---------- */
.errbox{
  border:1px solid rgba(255,107,107,.4);border-left:2px solid var(--danger);
  background:rgba(255,107,107,.07);border-radius:10px;
  padding:18px 22px;margin-bottom:30px;
}
.errbox strong{display:block;font-family:"Space Grotesk",sans-serif;font-size:15px;margin-bottom:8px}
.errbox ul{margin:0;padding-left:18px;color:var(--muted);font-size:14.5px}
.errbox li{margin-bottom:4px}

/* ---------- button ---------- */
.btn{
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;
  padding:16px 30px;border-radius:8px;cursor:pointer;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.btn-primary{background:var(--cyan);color:var(--ink);width:100%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(79,209,255,.3)}
.btn-primary:disabled{background:var(--line);color:var(--muted);transform:none;box-shadow:none;cursor:progress}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn svg{width:16px;height:16px}

.privacy{
  font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted-2);
  margin-top:16px;text-align:center;letter-spacing:.02em;
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- confirmation ---------- */
.confirm-band{
  background:
    radial-gradient(circle at 15% 0%,rgba(79,209,255,.12),transparent 55%),
    var(--ink-2);
  border:1px solid var(--line-soft);border-radius:20px;
  padding:56px 44px;position:relative;overflow:hidden;margin-top:40px;
}
.confirm-band h1{font-size:clamp(28px,4vw,40px);font-weight:600;margin:16px 0 14px}
.confirm-band .lead{color:var(--muted);font-size:16px;max-width:560px}
.next-steps{margin-top:36px;border-top:1px solid var(--line-soft);padding-top:28px}
.next-steps h2{font-size:17px;font-weight:600;margin-bottom:20px}
.step-row{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.step-row:last-child{border-bottom:none}
.step-row .n{
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--cyan);
  letter-spacing:.1em;flex:0 0 28px;padding-top:3px;
}
.step-row p{color:var(--muted);font-size:14.5px}
.step-row strong{color:var(--text);font-weight:600}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);padding:40px 0 44px;margin-top:72px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot img{height:56px}
.foot a{color:var(--muted);font-size:14px}
.foot a:hover{color:var(--cyan)}
.foot-copy{
  color:var(--muted-2);font-size:12px;font-family:"JetBrains Mono",monospace;
  margin-top:24px;letter-spacing:.02em;
}

@media(max-width:640px){
  .wrap{padding:0 20px}
  .spec{padding:26px 22px}
  .confirm-band{padding:40px 24px}
  .brand img{height:52px}
  .datum{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}