/* ─────────────────────────────────────────────────────────────
   VA4U careers — shared styles
   Same tokens as the profile builder so the whole thing reads
   as one system.
   ───────────────────────────────────────────────────────────── */
:root{
  --brand:#00AB6C;
  --brand-dark:#00794C;
  --brand-text:#00754A;
  --brand-tint:#EFFAF5;
  --brand-line:#D3EDE1;

  --ink:#111315;
  --body:#3D4448;
  --muted:#8A9096;
  --paper:#FFFFFF;
  --wash:#F6F8F7;
  --rule:#E3E7E4;
  --field:#F7F9F8;

  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1140px;
  --radius:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-weight:400;
  color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;margin:0;font-weight:600;letter-spacing:-.015em}
p{margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-text);margin-bottom:14px;
}
.lede{font-size:17px;font-weight:300;line-height:1.65;color:var(--body)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:8px;border:1.5px solid transparent;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;
  text-decoration:none;transition:background .16s,border-color .16s,transform .1s,color .16s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{border-color:var(--rule);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-text)}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-light:hover{background:rgba(255,255,255,.24)}
.btn-sm{padding:9px 16px;font-size:13.5px}

/* ── Header ──────────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
}
.site-head .wrap{display:flex;align-items:center;gap:28px;height:72px}
.site-head img{height:34px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-size:14.5px;font-weight:500;color:var(--body)}
.nav a:hover{color:var(--brand-text);text-decoration:none}
.navcta{display:flex;gap:10px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  border-radius:7px;padding:8px 11px;font-size:16px;cursor:pointer}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(0,171,108,.13), transparent 60%),
    linear-gradient(180deg,#FBFDFC,var(--paper));
  padding:76px 0 0;
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,4.4vw,54px);letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--brand-text)}
.hero .lede{margin:22px 0 30px;font-size:18px;max-width:30em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--muted);font-weight:300}

/* Signature: same visual language as the screening strip on the resume */
.proof{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:60px 0 0;border-top:3px solid var(--brand);
  background:var(--brand-tint);border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;
}
.proof div{padding:22px 24px;border-right:1px solid var(--brand-line)}
.proof div:last-child{border-right:0}
.proof dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-text);margin-bottom:8px}
.proof dd{margin:0;font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.proof dd small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);
  letter-spacing:0;margin-top:3px}

/* Hero card — a miniature of the profile they'll build */
.card-stack{position:relative}
.mini{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(17,30,25,.06),0 18px 50px rgba(17,30,25,.11);
  overflow:hidden;
}
.mini-top{padding:16px 20px;border-bottom:2px solid var(--brand);display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.mini-top img{height:22px}
.mini-top span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mini-body{padding:20px}
.mini-name{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.mini-role{font-size:13px;font-weight:500;color:var(--brand-text);margin:3px 0 14px}
.mini-strip{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--brand-line);
  border-top:2px solid var(--brand);margin-bottom:14px}
.mini-strip div{background:var(--brand-tint);padding:9px 11px}
.mini-strip b{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-text);font-weight:600;margin-bottom:3px}
.mini-strip span{font-size:12px;font-weight:500;color:var(--ink)}
.mini-tags{display:flex;flex-wrap:wrap;gap:5px}
.mini-tags i{font-style:normal;font-size:11px;font-weight:500;background:var(--brand-tint);
  color:var(--brand-text);padding:4px 8px;border-radius:4px}
.mini-cap{margin-top:14px;font-size:11.5px;color:var(--muted);font-weight:300;line-height:1.5}

/* ── Sections ────────────────────────────────────────────── */
section{padding:84px 0}
section.tint{background:var(--wash)}
.sec-head{max-width:640px;margin-bottom:46px}
.sec-head h2{font-size:clamp(26px,3vw,36px)}
.sec-head .lede{margin-top:16px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px;transition:border-color .16s,box-shadow .16s,transform .16s;
}
.card h3{font-size:18px;margin-bottom:10px}
.card p{font-size:14.5px;font-weight:300;line-height:1.65}
.card .ico{
  width:42px;height:42px;border-radius:10px;background:var(--brand-tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  color:var(--brand-text);
}
.card .ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Numbered "before you apply" list */
.knows{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.know{background:var(--paper);padding:30px}
.know b{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:14px;font-weight:600;margin-bottom:14px;
}
.know h3{font-size:17px;margin-bottom:9px}
.know p{font-size:14px;font-weight:300;line-height:1.65}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.step{padding:0 20px;position:relative}
.step:first-child{padding-left:0}
.step:last-child{padding-right:0}
.step::before{
  content:"";position:absolute;top:17px;left:0;right:0;height:2px;
  background:var(--brand-line);z-index:0;
}
.step:first-child::before{left:17px}
.step:last-child::before{right:calc(100% - 17px)}
.step i{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  font-style:normal;font-size:14px;font-weight:600;margin-bottom:18px;
}
.step h3{font-size:16.5px;margin-bottom:8px}
.step p{font-size:14px;font-weight:300;line-height:1.6}

/* ── Job list ────────────────────────────────────────────── */
.jobs{display:flex;flex-direction:column;gap:12px}
.job-row{
  display:flex;align-items:center;gap:22px;padding:22px 26px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .16s,box-shadow .16s,transform .16s;text-decoration:none;
}
.job-row:hover{border-color:var(--brand);box-shadow:0 6px 20px rgba(0,120,76,.09);
  transform:translateY(-1px);text-decoration:none}
.job-row .jmain{flex:1;min-width:0}
.job-row h3{font-size:18px;margin-bottom:6px}
.job-row .jmeta{display:flex;flex-wrap:wrap;gap:0 16px;font-size:13.5px;
  color:var(--muted);font-weight:300}
.job-row .jmeta b{color:var(--brand-text);font-weight:600}
.job-row .jgo{color:var(--brand-text);font-size:14px;font-weight:600;white-space:nowrap}
.pill{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;background:var(--brand-tint);color:var(--brand-text);
  padding:4px 10px;border-radius:20px;margin-bottom:9px;
}
.empty-state{
  text-align:center;padding:60px 24px;border:1px dashed var(--rule);
  border-radius:var(--radius);background:var(--wash);
}
.empty-state b{display:block;font-size:18px;color:var(--ink);font-weight:600;margin-bottom:8px}
.empty-state p{font-size:14.5px;font-weight:300;max-width:34em;margin:0 auto 18px}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{max-width:780px}
details{border-bottom:1px solid var(--rule)}
details summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:16.5px;font-weight:500;color:var(--ink);
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:300;color:var(--brand);line-height:1;
}
details[open] summary::after{content:"\2212"}
details .ans{padding:0 40px 22px 0;font-size:14.5px;font-weight:300;line-height:1.7}

/* ── CTA band ────────────────────────────────────────────── */
.band{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:#fff;padding:70px 0;text-align:center;
}
.band h2{color:#fff;font-size:clamp(26px,3.2vw,36px)}
.band p{margin:16px auto 28px;max-width:36em;font-size:16.5px;font-weight:300;
  color:rgba(255,255,255,.9)}
.band .btn-primary{background:#fff;color:var(--brand-dark)}
.band .btn-primary:hover{background:#F0FAF6}

/* ── Footer ──────────────────────────────────────────────── */
.site-foot{background:#0E1614;color:#A9B5B0;padding:60px 0 28px;font-size:14px;font-weight:300}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.site-foot img{height:34px;margin-bottom:16px}
.site-foot h4{color:#fff;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:16px}
.site-foot a{color:#A9B5B0;display:block;padding:5px 0}
.site-foot a:hover{color:var(--brand);text-decoration:none}
.foot-base{border-top:1px solid #243029;padding-top:22px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#7D8C86}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .card-stack{max-width:440px}
  .grid-3,.steps{grid-template-columns:1fr 1fr}
  .step::before{display:none}
  .step{padding:0}
  .steps{gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .burger{display:block}
  .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--rule)}
  .nav.open a{padding:12px 0;border-bottom:1px solid var(--rule)}
  .navcta .btn:not(.btn-primary){display:none}
}
@media (max-width:680px){
  section{padding:58px 0}
  .hero{padding:48px 0 0}
  .proof{grid-template-columns:1fr 1fr;border-radius:var(--radius)}
  .proof div:nth-child(2){border-right:0}
  .proof div:nth-child(-n+2){border-bottom:1px solid var(--brand-line)}
  .grid-3,.grid-2,.knows,.steps{grid-template-columns:1fr}
  .job-row{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}