/* BP Early Careers · durable skills screener, measured with IMPACTER Pathway (sample) */
:root{
  --ink:#0E2418; --ink-2:#2D3F33; --ink-3:#5B6B60; --ink-4:#8A978E;
  --paper:#FAFAF6; --s1:#F3F4EE; --s2:#ECEEE5; --s3:#E1E4D8; --white:#fff;
  --g-deep:#073B1F; --g-900:#0A4A27; --g-700:#0B6B33; --g-500:#009900; --lime:#99CC00; --yellow:#FFE600;
  --line:rgba(14,36,24,.10);
  /* level ramp: Foundational → Exemplary */
  --l1:#E6E9DC; --l2:#CFE3A0; --l3:#86C043; --l4:#2E8B3A; --l5:#0B5A2B;
  /* competency hues */
  --c-CL:#0B7A43; --c-MR:#C08A00; --c-TP:#2B6E91; --c-LL:#6E9A12; --c-OP:#B9532C; --c-TC:#7A58A8;
  --sh-sm:0 2px 14px rgba(10,46,26,.06); --sh-md:0 10px 34px rgba(10,46,26,.08); --sh-lg:0 24px 70px rgba(10,46,26,.12);
  --r:16px; --ease:cubic-bezier(.2,.8,.2,1);
  --display:"Plus Jakarta Sans",system-ui,sans-serif; --body:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body);font-feature-settings:"tnum" 1,"lnum" 1;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--g-700);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font:800 11.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--g-700)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;margin:0;color:var(--ink)}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1;font-weight:800}
h3{font-size:20px;line-height:1.25;font-weight:750}
p{margin:0}
.lede{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:62ch}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(250,250,246,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:68px}
.top .bp{height:44px;width:auto}
.top .sep{width:1px;height:30px;background:var(--line)}
.top .unit{display:flex;flex-direction:column;line-height:1.2}
.top .unit b{font:750 14.5px/1.2 var(--display);letter-spacing:-.01em}
.top .unit span{font-size:12.5px;color:var(--ink-3)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--s2);color:var(--ink-3);font:700 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.top nav{margin-left:auto;display:flex;gap:4px}
.top nav a{padding:8px 14px;border-radius:999px;font:650 14px/1 var(--display);color:var(--ink-2)}
.top nav a:hover{background:var(--s2);text-decoration:none}
.top nav a.on{background:var(--ink);color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--g-deep);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;right:-220px;top:-260px;width:820px;height:820px;border-radius:50%;
  background:repeating-conic-gradient(from 8deg,rgba(255,230,0,.10) 0 7deg,transparent 7deg 18deg,rgba(153,204,0,.08) 18deg 25deg,transparent 25deg 36deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%)}
.hero::after{content:"";position:absolute;right:170px;top:150px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,230,0,.55),rgba(255,230,0,0) 70%)}
.hero .wrap{position:relative;z-index:1;padding-top:84px;padding-bottom:72px}
.hero .eyebrow{color:var(--yellow)}
.hero h1{color:#fff;font-size:clamp(38px,5.6vw,68px);line-height:1.02;font-weight:800;letter-spacing:-.035em;max-width:15ch;margin:18px 0 22px}
.hero .lede{color:rgba(255,255,255,.80);font-size:19px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:56px;border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.08)}
.kpi{background:rgba(7,59,31,.55);padding:22px 24px}
.kpi .n{font:800 40px/1 var(--display);letter-spacing:-.03em;color:#fff}
.kpi .n small{font-size:18px;color:rgba(255,255,255,.55);font-weight:700;margin-left:4px}
.kpi .l{margin-top:10px;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.72)}

/* ---------- sections ---------- */
section{padding:96px 0}
section.tint{background:var(--s1)}
.sh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:end;margin-bottom:44px}
.sh .eyebrow{margin-bottom:14px;display:block}
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh-sm)}

/* level chips */
.lv{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:700 12px/1 var(--display);white-space:nowrap}
.lv[data-n="1"]{background:var(--l1);color:var(--ink-2)}
.lv[data-n="2"]{background:var(--l2);color:#2E4410}
.lv[data-n="3"]{background:var(--l3);color:#173108}
.lv[data-n="4"]{background:var(--l4);color:#fff}
.lv[data-n="5"]{background:var(--l5);color:#fff}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding:56px 0 40px;font-size:14px}
footer .row{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px}
footer .lock{display:flex;align-items:center;gap:14px}
footer .lock .chip{background:transparent;padding:0;display:flex;align-items:center;gap:14px}
footer .lock img{height:40px;width:auto}
footer .lock .chip img.tall{height:46px}
footer .meas{font:700 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
footer a{color:var(--yellow)}
footer .fine{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:rgba(255,255,255,.5)}

/* tooltip */
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.45;box-shadow:var(--sh-lg);max-width:290px;opacity:0;transform:translateY(4px);transition:opacity .14s var(--ease),transform .14s var(--ease)}
.tip.on{opacity:1;transform:none}
.tip b{font-family:var(--display)}
.tip .mut{color:rgba(255,255,255,.62)}

@media (max-width:900px){
  .wrap{padding:0 16px}
  .top .wrap{height:60px;gap:12px}
  .top .bp{height:36px}
  .top .unit span,.top .sep{display:none}
  .top nav a{padding:7px 10px;font-size:13px}
  .hero .wrap{padding-top:56px;padding-bottom:48px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi .n{font-size:32px}
  section{padding:64px 0}
  .sh{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .lede{font-size:16.5px}
}
@media (max-width:520px){
  .top .unit{display:none}
  .top .tag{display:none}
}