/* ============================================================
   Board Infinity homepage — standalone Netlify preview
   Tokens: Color Palette.pdf (brand 6 #0075EB fill / brand 7
   #006BD6 text-legal / navy #00173D / accents #F46C40 #7F56D9).
   Semantic green/amber appear ONLY as real success/caution.
   ============================================================ */
:root{
  --blue:#0075EB; --blue-txt:#006BD6; --blue-hov:#0075EB; --blue-deep:#004CA3;
  --blue-0:#F5FAFF; --blue-1:#E6F3FF; --blue-2:#BDDEFF; --blue-3:#8AC4FF; --blue-4:#57ABFF;
  --navy:#00173D; --navy-2:#002B6B;
  --a1:#F46C40; --a1-txt:#A8351B; --a1-1:#FFF6F0; --a1-3:#FFD4BD; --a1-4:#FFB694;
  --a2:#7F56D9; --a2-1:#F4EBFF; --a2-3:#D6BBFB; --a2-4:#B692F6; --a2-8:#53389E;
  --ok:#06C170; --ok-txt:#036A3E; --ok-1:#E6F9F1; --ok-2:#B2ECD3;
  --amber-3:#FFDD80; --amber-2:#FFEBA8;
  --ink:#141414; --text:#262626; --text-2:#595959; --line:#D9D9D9; --line-2:#F0F0F0;
  --paper:#FFFFFF; --paper-2:#FAFAFA; --surface:#FAFDFF;
  --on-navy:#B7CEEA; --on-navy-2:#8FAACD; --on-navy-a:#6FB0FF;
  --sh-sm:0 1px 3px rgba(0,23,61,.07),0 1px 2px rgba(0,23,61,.05);
  --sh-md:0 6px 20px -6px rgba(0,23,61,.14);
  --sh-lg:0 28px 64px -20px rgba(0,23,61,.22);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px;
  --max:1200px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--font);font-size:16px;line-height:1.65;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
ul{list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3{line-height:1.15;color:var(--navy);letter-spacing:-.025em}
:focus-visible{outline:3px solid var(--blue-txt);outline-offset:2px;border-radius:4px}
/* reveal - fail-open: .rv alone is fully visible; JS adds .off then .in */
.rv{transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.off{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none}
/* buttons - no drop shadows per design review */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;
  line-height:1;border-radius:var(--r-md);border:1.5px solid transparent;padding:15px 26px;white-space:nowrap;
  transition:background .18s,border-color .18s,transform .18s}
.btn-p{background:var(--blue);color:#fff}
.btn-p:hover{background:var(--blue);transform:translateY(-1px)}
.btn-g{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-g:hover{border-color:var(--blue-txt);color:var(--blue-txt)}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}
/* section scaffolding */
.sec{padding:84px 0}
.kick{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.kick::before{content:"";width:28px;height:2px;background:var(--blue-txt);border-radius:2px}
.kick.c{justify-content:center}.kick.c::before{display:none}
.h2{font-size:clamp(29px,3.6vw,46px);font-weight:800}
.sub{font-size:17px;color:var(--text-2);max-width:660px;margin-top:16px}
.ctr{text-align:center}.ctr .sub{margin-left:auto;margin-right:auto}
.on-d .kick{color:var(--on-navy-a)}.on-d .kick::before{background:var(--on-navy-a)}
.on-d .h2{color:#fff}.on-d .sub{color:var(--on-navy)}
/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:72px 0 84px;
  background:radial-gradient(1100px 520px at 8% -12%,var(--blue-1) 0%,transparent 58%),
             radial-gradient(820px 430px at 100% 4%,var(--a2-1) 0%,transparent 60%),var(--surface)}
.hx{display:grid;grid-template-columns:1.04fr .96fr;gap:58px;align-items:center}
.badge{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--blue-2);
  border-radius:999px;padding:9px 18px;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue-txt);box-shadow:var(--sh-sm);margin-bottom:24px}
.hero h1{font-size:clamp(38px,4.9vw,64px);font-weight:800;letter-spacing:-.032em;line-height:1.04}
.grad{background:linear-gradient(96deg,var(--blue-txt) 8%,var(--blue) 46%,var(--a2) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.grad{color:var(--blue-txt)}}
.hero .sub{font-size:clamp(16.5px,1.4vw,19px);margin:22px 0 30px;max-width:540px}
.hero .sub b{color:var(--navy);font-weight:800}
.hctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.htrust{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line-2)}
.htrust img{height:26px;width:auto;filter:grayscale(1);opacity:.8}
.htrust p{font-size:13px;font-weight:600;color:var(--text-2)}
.htrust p b{color:var(--navy)}
/* hero visual: illustration in a frame + floating proof */
.hv{position:relative}
.hv-card{border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-lg)}
.hv-card img{width:100%;height:auto;display:block;background:var(--blue-0)}
.hv-cap{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--navy);color:#fff;
  font-size:13.5px;font-weight:700}
.hv-cap i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 4px rgba(6,193,112,.25)}
.pill{position:absolute;z-index:3;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-md);border:1px solid var(--line-2)}
.pill-offers{top:-16px;right:-12px;overflow:hidden;text-align:center}
.pill-offers b{display:block;background:var(--blue-txt);color:#fff;font-size:15px;font-weight:800;padding:9px 20px}
.pill-offers span{display:block;font-size:11.5px;font-weight:600;color:var(--text-2);padding:7px 14px}
.pill-rate{left:-30px;bottom:18%;min-width:250px;padding:14px 18px}
.pill-rate .r{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.pill-rate em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.pill-rate b{font-size:26px;font-weight:800;color:var(--blue-txt);letter-spacing:-.02em}
.pill-rate .bar{height:6px;border-radius:99px;background:var(--line-2);margin:9px 0 7px;overflow:hidden}
.pill-rate .bar i{display:block;height:100%;width:90%;border-radius:99px;background:linear-gradient(90deg,var(--blue-txt),var(--blue-4))}
.pill-rate small{font-size:11.5px;color:var(--text-2);font-weight:600}
@media(max-width:980px){.hx{grid-template-columns:1fr;gap:44px}.pill{display:none}}
/* ---- accreditation (v7 pattern) ---- */
.trust{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:52px 0}
.trust-h{text-align:center;margin-bottom:30px}
.trust-h h2{font-size:clamp(19px,2.1vw,25px);font-weight:800}
.trust-h p{font-size:14.5px;color:var(--text-2);margin-top:9px}
.trust-h p b{color:var(--blue-txt)}
.trust-sep{display:flex;align-items:center;gap:16px;margin:38px 0 26px}
.trust-sep::before,.trust-sep::after{content:"";flex:1;height:1px;background:var(--line-2)}
.trust-sep span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.accr{background:#fff}
.accr-in{display:flex;align-items:center;gap:18px;padding:24px 28px;max-width:var(--max);margin:0 auto;flex-wrap:wrap;justify-content:space-between}
.accr .lbl{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);flex-shrink:0}
.accr-b{display:flex;gap:10px;flex-wrap:wrap}
.ab{display:flex;flex-direction:column;align-items:center;text-align:center;padding:15px 14px 13px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--blue-0);width:178px;min-height:120px;
  transition:border-color .2s,transform .2s}
.ab:hover{border-color:var(--blue-2);transform:translateY(-2px)}
.ab img{height:auto;width:auto;max-height:44px;max-width:140px;object-fit:contain;margin:0 auto 10px}
.ab .a{font-size:21px;font-weight:900;color:var(--navy);height:44px;display:flex;align-items:center;margin-bottom:10px}
.ab .b{font-size:12px;font-weight:700;color:var(--text-2);line-height:1.45}
@media(max-width:900px){.accr-in{justify-content:center}}
/* ---- logo wall ---- */
.wall{padding:56px 0 30px;text-align:center}
.wall .cap{font-size:12.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:32px}
.wall .cap b{color:var(--blue-txt)}
.lgs{display:flex;align-items:center;gap:0 56px;flex-wrap:nowrap;padding-right:56px}
.lgs span{display:flex;align-items:center;height:82px;flex:0 0 auto}
.lgs img{max-height:74px;max-width:190px;width:auto;height:auto;object-fit:contain;
  filter:none;opacity:1;transition:transform .2s}
.lgs span:hover img{transform:scale(1.06)}
/* continuous logo marquee - real logos, in colour, always moving */
.mq{position:relative;overflow:hidden;padding:4px 0}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,#fff 12%,rgba(255,255,255,0))}
.mq::after{right:0;background:linear-gradient(270deg,#fff 12%,rgba(255,255,255,0))}
.mq-track{display:flex;width:max-content;animation:mq-run 42s linear infinite}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
@keyframes mq-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}.mq{overflow-x:auto}}
@media(max-width:700px){.lgs{gap:0 32px;padding-right:32px}.lgs span{height:58px}
  .lgs img{max-height:52px;max-width:140px}.mq::before,.mq::after{width:44px}}
/* ---- outcome band ---- */
.oband{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 70%,var(--navy) 130%);
  border-radius:var(--r-xl);padding:48px 44px;position:relative;overflow:hidden}
.oband::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-260px;right:-130px;
  background:radial-gradient(circle,rgba(0,117,235,.4),transparent 66%);pointer-events:none}
.ob{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.ob>div{border-left:2px solid rgba(255,255,255,.16);padding-left:22px}
/* dividers sit BETWEEN the stats, never before the first or dangling after the last */
.ob>div:first-child{border-left:0;padding-left:0}
.ob b{display:block;font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.ob span{display:block;font-size:13px;color:var(--on-navy);margin-top:8px;line-height:1.45}
@media(max-width:1000px){.ob{grid-template-columns:repeat(3,1fr);gap:24px}
  .ob>div{border-left:2px solid rgba(255,255,255,.16);padding-left:22px}
  .ob>div:nth-child(3n+1){border-left:0;padding-left:0}}
@media(max-width:680px){.ob{grid-template-columns:1fr 1fr;gap:22px}.oband{padding:30px 24px}
  .ob>div{border-left:2px solid rgba(255,255,255,.16);padding-left:22px}
  .ob>div:nth-child(odd){border-left:0;padding-left:0}}
/* ---- ecosystem tabs ---- */
.eco{border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;overflow:hidden;box-shadow:var(--sh-md);margin-top:38px}
.eco-t{display:flex;overflow-x:auto;border-bottom:1px solid var(--line-2);background:var(--paper-2);scrollbar-width:thin}
.eco-t button{flex:none;padding:18px 22px;font-size:13.5px;font-weight:700;color:var(--text-2);background:none;
  border:0;border-bottom:3px solid transparent;white-space:nowrap;transition:color .16s,border-color .16s}
.eco-t button:hover{color:var(--navy)}
.eco-t button[aria-selected="true"]{color:var(--blue-txt);border-bottom-color:var(--blue-txt);background:#fff}
.eco-p{display:none;padding:44px}
.eco-p[data-on]{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start;min-height:430px}
.eco-badge{display:inline-flex;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);background:var(--blue-1);border:1px solid var(--blue-2);border-radius:999px;padding:5px 13px;margin-bottom:15px}
.eco-l h3{font-size:clamp(23px,2.5vw,31px);font-weight:800;margin-bottom:13px}
.eco-l p{font-size:15.5px;color:var(--text-2);line-height:1.62;margin-bottom:6px}
.eco-facts{display:grid;gap:9px;margin:18px 0 22px}
.eco-facts li{display:flex;gap:10px;font-size:14px;color:var(--text-2)}
.eco-facts i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--ok-1);color:var(--ok-txt);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:900;margin-top:2px}
.eco-ctas{display:flex;flex-wrap:wrap;gap:10px}
.eco-ctas .btn{flex:1 1 0;min-width:170px;max-width:240px;padding:13px 18px;font-size:14px}
.eco-chips{display:flex;flex-wrap:wrap;gap:7px}
.eco-chips span{font-size:12.5px;font-weight:600;color:var(--text-2);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:6px 13px}
.eco-lab{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2);margin:20px 0 10px}
.eco-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.eco-stats div{border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--paper-2);padding:16px}
.eco-stats .si{display:flex;width:30px;height:30px;border-radius:9px;background:var(--blue-1);color:var(--blue-txt);
  align-items:center;justify-content:center;margin-bottom:9px}
.eco-stats .si svg{width:16px;height:16px}
.eco-stats b{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.05}
.eco-stats span{display:block;font-size:11.5px;color:var(--text-2);margin-top:4px}
.eco-brand{display:flex;align-items:center;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-md);
  background:var(--paper-2);margin-bottom:16px}
.eco-brand img{height:46px;width:auto}
.eco-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.eco-flow span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--blue-deep);
  background:var(--blue-1);border:1px solid var(--blue-2);border-radius:999px;padding:7px 15px}
.eco-flow span svg{width:15px;height:15px}
.eco-flow i{font-style:normal;color:var(--text-2);font-weight:700}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tile{padding:15px 17px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--paper-2)}
.tile b{display:block;font-size:14px;font-weight:800;color:var(--navy);margin-bottom:3px}
.tile span{font-size:12.5px;color:var(--text-2);line-height:1.45}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.pc{display:flex;flex-direction:column;gap:9px;padding:19px;border:1px solid var(--line-2);border-radius:var(--r-md);
  background:#fff;transition:transform .18s,box-shadow .18s,border-color .18s}
.pc:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--blue-2)}
.pc img{width:40px;height:40px;object-fit:contain}
.pc b{font-size:15px;font-weight:800;color:var(--navy)}
.pc span{font-size:12.5px;color:var(--text-2);line-height:1.5;flex:1}
.pc.w{grid-column:span 2;flex-direction:row;align-items:center;gap:15px}
@media(max-width:900px){.eco-p[data-on]{grid-template-columns:1fr;gap:28px}.eco-p{padding:24px}
  .tiles,.pcards{grid-template-columns:1fr}.pc.w{grid-column:span 1;flex-direction:column}.eco-stats{grid-template-columns:1fr 1fr}}
/* ---- hero dashboard (custom, replaces the stock image) ---- */
.dash{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:22px 24px 24px;position:relative}
.d-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.d-top b{font-size:14.5px;font-weight:800;color:var(--navy);flex:1}
.d-sub{font-size:11px;font-weight:600;color:var(--text-2);margin-top:9px;letter-spacing:.02em}
.d-chip{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--blue-txt);background:var(--blue-1);
  border:1px solid var(--blue-2);border-radius:6px;padding:3px 8px}
.d-clab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.d-delta{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--ok-txt);
  background:var(--ok-1);border-radius:6px;padding:4px 9px}
.d-ring{display:flex;align-items:center;gap:13px;margin-top:16px;padding:14px;border-radius:var(--r-md);
  background:var(--blue-0);border:1px solid var(--blue-1)}
.d-ring .r{width:48px;height:48px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--blue-txt) 0 92%,var(--blue-2) 92% 100%)}
.d-ring .r::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.d-ring .r b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:var(--navy);z-index:1}
.d-ring .t b{display:block;font-size:13.5px;font-weight:800;color:var(--navy)}
.d-ring .t span{display:block;font-size:11.5px;color:var(--text-2);margin-top:2px}
.d-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(6,193,112,.22)}
.d-live{font-size:9.5px;font-weight:900;letter-spacing:.14em;color:var(--ok-txt);background:var(--ok-1);
  border-radius:5px;padding:3px 8px}
.d-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.d-stats div{background:var(--blue-0);border:1px solid var(--blue-1);border-radius:var(--r-md);padding:12px 14px}
.d-stats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--blue-txt);line-height:1}
.d-stats div:nth-child(2) b{color:var(--a2)}
.d-stats div:nth-child(3) b{color:var(--a1-txt)}
.d-stats span{display:block;font-size:11px;font-weight:600;color:var(--text-2);margin-top:5px}
.d-lab{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:12px}
.d-bars{display:flex;align-items:flex-end;gap:18px;height:120px;padding:0 4px}
.d-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.d-bar i{display:block;width:100%;height:var(--h);border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,var(--blue-3),var(--blue-1))}
.d-bar.on i{background:linear-gradient(180deg,var(--blue),var(--blue-4))}
.d-bar em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--text-2)}
.d-bar b{font-size:12px;font-weight:800;color:var(--navy)}
.d-bar.on b{color:var(--blue-txt)}
.d-rows{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.d-row{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;color:var(--text)}
.d-row>span:nth-child(2){flex:1}
.d-row b{font-size:11px;font-weight:800;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em}
.d-row .ok{width:20px;height:20px;border-radius:50%;background:var(--ok-1);color:var(--ok-txt);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex:none}
.d-row .run{width:20px;height:20px;border-radius:50%;border:2px solid var(--blue-3);border-top-color:var(--blue-txt);flex:none}
.d-row .up{width:20px;height:20px;border-radius:50%;background:var(--a2-1);color:var(--a2-8);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex:none}
/* services map */
.svc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.svc-col{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm)}
.svc-h{display:flex;align-items:center;gap:12px;font-size:16.5px;font-weight:800;color:var(--navy);
  padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--line-2);min-height:74px}
.svc-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.svc-ic svg{width:19px;height:19px}
.svc{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:var(--r-sm);font-size:14.5px;
  font-weight:600;color:var(--text);transition:background .15s,color .15s}
.svc:hover{background:var(--blue-0);color:var(--blue-txt)}
.svc em{font-style:normal;margin-left:auto;color:var(--blue-txt);font-weight:800;white-space:nowrap;
  opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.svc:hover em{opacity:1;transform:none}
.svc small{display:block;font-size:12px;font-weight:500;color:var(--text-2)}
@media(max-width:960px){.svc-g{grid-template-columns:1fr}}
/* slim banners (courses + coaching are pointers, not B2C pitches) */
.slim{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-radius:var(--r-lg);padding:26px 30px;color:#fff;position:relative;overflow:hidden}
.slim .t{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.slim .t img{height:26px;filter:brightness(0) invert(1)}
.slim h3{font-size:clamp(18px,2vw,23px);font-weight:800;color:#fff;letter-spacing:-.018em}
.slim p{font-size:14px;color:var(--on-navy);margin-top:4px}
.slim .go{flex:none;font-size:14.5px;font-weight:800;color:#fff;border:1.5px solid rgba(255,255,255,.42);
  border-radius:10px;padding:12px 20px;white-space:nowrap;transition:background .18s}
.slim:hover .go{background:rgba(255,255,255,.12)}

/* --- site navbar, lifted from the shared stylesheet --- */
/* nav */ .nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 28px;height:66px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16.5px;color:var(--ink);white-space:nowrap}
.logo img{width:32px;height:32px;border-radius:50%}
.nav-links{display:flex;gap:2px;flex:1;justify-content:center;align-items:center}
.nav-links>div{position:relative;display:flex;align-items:center}
.nav-links a,.nav-links button{display:block;font-size:14.5px;font-weight:600;color:var(--text-2);
  padding:9px 13px;border-radius:var(--r-sm);background:none;border:0;transition:color .15s,background .15s}
/* Top-level items only (direct children — dropdown links keep their own rules). A <button> does NOT inherit font-family, so the menu buttons were rendering in the browser's default UI font while the plain links used Inter: same px, two different typefaces and two different baselines. Fixed height + inline-flex pins every item to one line. */ .nav-links>div>a,.nav-links>div>button{display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1;letter-spacing:inherit;
  height:38px;padding:0 13px;white-space:nowrap;cursor:pointer}
.nav-links a:hover,.nav-links button:hover{color:var(--ink);background:var(--paper-2)}
.dd{position:absolute;top:100%;left:0;min-width:270px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:10px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:all .18s}
.nav-links>div:hover .dd,.nav-links>div:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{padding:9px 12px;font-size:13.5px;border-radius:var(--r-sm)}
.dd .dd-h{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding:10px 12px 4px}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:auto}
/* Everything in the bar sits on the same 38px height and the same 14.5px type as the menu items. Login had no desktop rule at all, so it fell back to 16px body text and read as a different family of control. */ .nav-cta{gap:6px}
.nav-cta .login{display:inline-flex;align-items:center;height:38px;padding:0 13px;
  font-size:14.5px;font-weight:600;color:var(--text-2);border-radius:var(--r-sm)}
.nav-cta .login:hover{color:var(--ink);background:var(--paper-2)}
.nav-cta .btn{height:38px;padding:0 18px;font-size:14.5px;font-weight:700;line-height:1}
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:26px;box-shadow:var(--sh-sm);
  transition:box-shadow .25s,transform .25s,border-color .25s}
.card:hover{box-shadow:var(--sh-md);transform:translateY(-3px);border-color:var(--blue-line)}
.card h3{font-size:17px;margin-bottom:8px;letter-spacing:-.015em}
.card p{font-size:14px;line-height:1.6;color:var(--text-2)}
.card .k{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-txt);margin-bottom:12px}
a.card{display:block}
.card .go{margin-top:14px}
/* ---- v10 chrome: utility bar + mega menu + wordmark ---- */ .utilbar{background:var(--canvas);color:rgba(255,255,255,.72)}
.logo img{width:76px;height:auto;border-radius:0;display:block}
.wm-inv{filter:brightness(0) invert(1);opacity:.92}
.mi{position:relative}
.mi .car{font-size:13px;opacity:.9}
.mega{position:fixed;top:66px;left:50%;transform:translate(-50%,8px);display:grid;grid-template-columns:1fr 1.3fr 1.2fr;gap:8px;
  width:min(1080px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-lg);
  padding:18px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:200}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mi:hover .mega,.mi:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mcol a{display:block;padding:7px 10px;font-size:13px;font-weight:600;color:var(--text-2);border-radius:var(--r-sm)}
.mcol a:hover,.dd a:hover{background:var(--blue-bg,var(--blue-0,#F5FAFF));color:var(--blue-txt)}.mcol a:focus-visible,.dd a:focus-visible{background:var(--blue-bg,var(--blue-0,#F5FAFF));color:var(--blue-txt);outline:2px solid var(--blue);outline-offset:-2px}
.mcol a em{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--blue-txt)}
.mfeat{background:var(--canvas);border-radius:var(--r-md);padding:6px}
.mfeat .dd-h{color:rgba(255,255,255,.5)}
.mfeat a{color:rgba(255,255,255,.85)}
.mfeat a:hover{background:rgba(255,255,255,.08);color:#fff}
.mfeat a b{display:block;font-size:12.5px;color:#fff}
.mfeat a span{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,.6)}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:8px;cursor:pointer;border:1px solid var(--line);border-radius:var(--r-sm)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block;height:2px;background:var(--ink);border-radius:2px}
.mnav-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:8px;z-index:300}
.mnav-panel a{display:block;padding:11px 14px;font-size:14px;font-weight:600;color:var(--text);border-radius:var(--r-sm)}
.mnav-panel a:hover{background:var(--blue-bg);color:var(--blue-txt)}
/* exact-v10 nav */ .dd{min-width:300px}
/* One type scale for every menu item, mega column or simple dropdown. These were 13px/600 in .mcol and 14px/700 in .dd, so Solutions and Resources looked like two different menus. Padding still differs — the dropdowns are roomier. */ .dd a,.mcol a{font-size:13.5px;font-weight:600;color:var(--text-2)}
.dd a{display:block;padding:9px 12px}
.dd a em,.mcol a em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--text-3);margin-top:1px}
.dd-sub{font-size:12px;color:var(--blue-txt);font-weight:600;padding:0 12px 8px}
/* Mega/dropdown lead-in: the SERVICE NAME is the heading (big, blue) and the category label sits under it as a small caps kicker. .dd-h had no rule inside .mega, so those labels were rendering at full body size and out-ranking the names they were meant to label. */ .dd-lead{display:block;color:var(--blue) !important;font-weight:800 !important;
  font-size:16px !important;line-height:1.22;letter-spacing:-.012em;padding:7px 10px 2px !important;margin:0}
.dd .dd-lead{padding:7px 12px 2px !important}
.mcol .dd-h,.mega .dd-h{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);padding:0 10px 9px;margin:0}
.dd .dd-h{padding:0 12px 9px}
.mcol .dd-sub{font-size:11.5px;color:var(--text-3);font-weight:600;padding:0 10px 9px;margin:0}
.mcol .dd-sep{margin-top:14px;border-top:1px solid var(--line-2);padding-top:13px !important}
.mfeat .dd-h{padding:2px 10px 10px}
.bmark{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-txt);
  border:1px solid var(--blue-line);background:var(--blue-bg);border-radius:26px;padding:2px 9px;margin-left:6px;vertical-align:2px}
.ext{color:var(--blue-txt);font-size:12px}
.mega{grid-template-columns:1fr 1.4fr 1.3fr;max-height:calc(100vh - 82px);overflow:auto;overscroll-behavior:contain}
.mcol a{padding:8px 10px}
.mfeat{padding:12px}
.mfeat a i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-line);margin-bottom:2px}
.mfeat a{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);margin-bottom:8px;padding:12px}
/* ---- courses ---- */ .cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.cat-nav a{border:1px solid var(--line);border-radius:26px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--text-2);background:#fff}
.cat-nav a:hover{border-color:var(--blue-txt);color:var(--blue-txt);background:var(--blue-bg)}
[class*=ac-] .card:hover,[class*=ac-] .trk>div:hover{border-color:var(--ac-line)}
/* ---------- proof-before-pitch logo wall ---------- */ .lwall{margin-top:40px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:26px 30px;box-shadow:var(--sh-sm)}
/* ---------- sticky in-page nav for long pages ---------- */ .jump{position:sticky;top:66px;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.jump nav{max-width:var(--max);margin:0 auto;padding:0 28px;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none}
.jump nav::-webkit-scrollbar{display:none}
/* The wordmark asset is black type with a blue infinity mark. On navy that reads as "only the blue bit is visible", so it is inverted to solid white here rather than via the .wm-inv class - the verbatim pages get this stylesheet but not the main one, and were rendering the raw logo. */ .f-brand img{height:44px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
/* button rules scoped to the bar so page buttons keep their own styling */
.nav .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;
  line-height:1;border-radius:var(--r-md);border:1px solid transparent;padding:15px 26px;white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}
.nav .btn:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 3px var(--blue-soft)}
.nav .btn-primary{background:var(--blue);color:#fff}
.nav .btn-primary:hover{background:var(--blue-hov);transform:translateY(-1px)}
.nav .btn-ghost{background:var(--paper);color:var(--text);border-color:var(--line)}
.nav .btn-ghost:hover{border-color:var(--blue-txt);color:var(--blue-txt);background:var(--blue-bg)}
.nav .btn .arr{transition:transform .18s}
.nav .btn:hover .arr{transform:translateX(3px)}
@media(max-width:920px){.nav-links{display:none}}
@media(max-width:920px){.mega{display:none}}
@media(max-width:920px){.mnav{display:block}.nav-cta .login{display:none}}

/* one icon per service in the Training & placement panel, at panel scale */
.hub-prods .hp-ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;margin-top:1px}
.hub-prods .hp-ic svg{width:17px;height:17px}
.hub-prods--n .hp{align-items:flex-start;gap:11px}
/* the ring advances on its own; this marks the engine it is resting on */
.hub-n.is-auto .pl{box-shadow:0 0 0 3px rgba(0,117,235,.20),var(--sh-sm)}
.eco-auto{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:12.5px;
  color:var(--text-2)}
.eco-auto b{font-weight:700;color:var(--navy)}
.eco-dots{display:flex;gap:6px}
.eco-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block;
  transition:background .25s,transform .25s}
.eco-dots i.on{background:var(--blue);transform:scale(1.4)}
@media(prefers-reduced-motion:reduce){.hub-n.is-auto .pl{box-shadow:var(--sh-sm)}}


/* the institution wall, one component on every page that has one (16 Sep 2026) */
.iw2{margin-top:26px}
.iw2-z{position:relative;background:linear-gradient(180deg,#F5FAFF,#FFFFFF);
  border:1px solid #E6F3FF;border-radius:22px;padding:30px 24px 24px;margin-bottom:34px}
.iw2-z:last-child{margin-bottom:0}
.iw2-k{position:absolute;top:-13px;left:26px;background:#fff;border:1px solid #BDDEFF;
  border-radius:999px;padding:6px 16px;font-size:13px;font-weight:800;color:#006BD6;
  letter-spacing:.01em;white-space:nowrap;line-height:1.2}
/* flex, not grid, so a row that is not a full eight CENTRES its remainder.
   The groups are 20 and 4, which in an 8-column grid left four tiles jammed
   left and a half-empty row - it read as broken rather than as a short row. */
.iw2-g{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.iw2-c{flex:0 0 calc((100% - 7 * 14px) / 8)}
.iw2-c{display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid #F0F0F0;border-radius:12px;height:104px;padding:16px;
  box-shadow:0 1px 3px rgba(0,23,61,.07),0 1px 2px rgba(0,23,61,.05);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.iw2-c:hover{transform:translateY(-3px);border-color:#BDDEFF;
  box-shadow:0 10px 26px -16px rgba(0,23,61,.34)}
.iw2-c img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:1080px){.iw2-c{flex:0 0 calc((100% - 3 * 14px) / 4)}}
@media(max-width:560px){.iw2-c{flex:0 0 calc((100% - 2 * 14px) / 3);height:84px;padding:11px}
  .iw2-k{left:16px;font-size:12px;white-space:normal}}
/* the section label the client asked to enlarge, in each family's own class */
.trust-sep span{font-size:17px!important;letter-spacing:.055em!important;color:#001B3F!important}
.a-lw-k{font-size:17px!important;font-weight:800!important;color:#001B3F!important}


@media (max-width:640px){
/* 1. min-width:auto blow-out - see cause (1) in the module docstring. */
.aiv,.aiv__l,.aiv__r,.aiv__v,.aiv__srcs,
.market-grid,.chart-card,.cred,.cr,.eco,.eco-r{min-width:0}
.aiv__l>*,.aiv__r>*,.chart-card>*{min-width:0;max-width:100%}

/* 2. /about/ credential cards: three hard columns, no breakpoint. */
.cred{grid-template-columns:1fr!important}

/* 3. /about/ institution wall: six hard columns, no breakpoint - the crests
      came out about 53px wide. Three across matches the step the homepage's own
      wall takes at this width. */
.iwall{grid-template-columns:repeat(3,1fr)!important}

/* 4. /about/ hero photograph, bled with width:122% and negative margins. */
.hv img,.ab-ph img{width:100%!important;max-width:100%!important;margin:0!important}

/* 5. CTA rows wrap rather than overflow. */
.hctas,.cb-ctas,.acts,.dp-hero__cta,.aiv__cta{flex-wrap:wrap}
.btn,.btn-sm{max-width:100%}

/* 6. The sticky mobile CTA bar sets .btn{flex:1} but not min-width:0, so a long
      label ("Book a free consultation") held the bar wider than the screen.
      Buttons also set white-space:nowrap, which is right on a desktop row and
      wrong once the button is allowed to shrink. */
.mcta .btn{min-width:0}
.btn,.mcta .btn{white-space:normal}
.mcta .btn{line-height:1.2;text-align:center}

/* 7. The credentials strip. 11 Sep 2026: the NASSCOM mark was pushing 11px past
      the viewport on every page that carries the strip - /aptitude-training/ and
      all six service pages - giving the whole document a horizontal scroll. Same
      min-width:auto blow-out as cause (1): the grid had collapsed correctly, the
      card just would not narrow past its content.
      The real cause is specificity, not width: the strip is pinned by a
      DOUBLED-class rule, .accr-b.accr-b{grid-template-columns:repeat(4,...)},
      while the page's own responsive steps are written as plain .accr-b - one
      class lower, so they never win and the strip stayed four columns at 375px,
      giving each card 75px with 18px of side padding. These restate the steps at
      the same doubled specificity. The per-logo caps (img[src*="nasscom"] and
      friends) likewise out-rank a plain .ab img selector, so the image cap is
      matched on specificity too.
      !important because this sheet is NOT last in the head: a later-injected
      style block carries the four-column rule, so an equal-specificity override
      loses on order. Same reason .iwall and .cred above use it. */
.accr-b.accr-b{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.accr-b,.accr-b .ab{min-width:0}
.accr-b .ab img[src]{max-width:100%}

/* 8. Charts and wide media stay inside their card. */
.chart-card svg,.chart-card canvas,.chart-card table{max-width:100%;height:auto}

/* 9. Safety net. Avatars size themselves with object-fit, so they are excluded
      rather than squashed. */
img:not([class*="av"]):not(.tm-av){max-width:100%}
}
@media (max-width:420px){
.iwall{grid-template-columns:repeat(2,1fr)!important}
.accr-b.accr-b{grid-template-columns:1fr!important}
.mcta{padding-left:10px;padding-right:10px;gap:8px}
.mcta .btn{padding-left:10px;padding-right:10px;font-size:13px}
}

.nv-bm{display:inline-block;width:auto;height:auto;flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:inherit;color:var(--blue-txt,#0075EB);border:1px solid var(--blue-line,#99CCFF);background:var(--blue-bg,#F5FAFF);border-radius:26px;padding:2px 9px;margin-left:7px;vertical-align:middle;overflow:visible}

/* The container was already the right width - 1144px, exactly the institution
   wall's measure, with the same 148px each side at 1440px. The dead space the
   client first reported came from `.ab{width:178px}`: four fixed cards plus gaps
   used 742px inside it, so ~200px sat empty at each end.
   So the ONLY structural change needed is to let the four cards share the row.
   The cards keep their own border, radius and background - the first attempt
   replaced them with one edge-to-edge bordered container, and that read as a
   white slab stretching the page rather than a component sitting inside the
   site's margins. */
/* WIDTH. On most pages .accr-b sits inside a .wrap and inherits the site's
   content measure. On the HOMEPAGE it does not - its ancestor is the full-bleed
   .trust section - so once the cards were allowed to stretch, the strip ran
   1440px wide with ZERO margin while the institution wall beside it sat at
   1144px. That is the asymmetry the client reported. Pinning the measure here
   makes every page match the wall: 1144px, 148px each side at 1440px. */
/* .accr-b is doubled to raise specificity to (0,2,0). /aptitude-training/ sets
   `.trust .accr-b{max-width:1200px}` in its own second-pass sheet, which would
   otherwise outrank a single class and leave that one page 56px wider than the
   other twelve. */
.accr-b.accr-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  justify-content:initial;max-width:1144px;margin-left:auto;margin-right:auto}
.accr-b .ab{width:auto;min-height:0;padding:20px 18px}

/* Logo sizes are normalised BY ASPECT, not by a single max-height. Measured in
   the wide columns, CII covered 8812px2 against NSDC's 2704 - 3.3x the visual
   area - which is what read as "not symmetric" once the cards got wider. A
   square mark has to be taller than a 4:1 wordmark to carry the same weight.
   Same technique the /about/ credential cards already use (img[src*="nsdc"]). */
.accr-b .ab img{max-height:52px;max-width:150px}
.accr-b .ab img[src*="nsdc"]{max-height:66px;max-width:80px}
.accr-b .ab img[src*="nasscom"]{max-height:58px;max-width:120px}
.accr-b .ab img[src*="cii"]{max-height:46px;max-width:150px}

/* three items, so go straight to one column - a 2+1 row would put the
   asymmetry back that this strip has been rewritten twice to remove. */
@media(max-width:900px){.accr-b{grid-template-columns:1fr}}


/* 27 Oct 2026: ISO / DPDP / GDPR seals, same badges and wording as the InfyLearn product pages */
.bi-badge{display:block;flex:none}
.bi-badge text{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-anchor:middle}
.bi-badge .b1{font-size:24px;font-weight:900;letter-spacing:-.02em}
.bi-badge .b1--s{font-size:21px}
.bi-badge .b2{font-size:11px;font-weight:800;letter-spacing:.04em}
.bi-badge .b3{font-size:7.4px;font-weight:800;letter-spacing:.16em}
.bi-trust{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px 22px}
.bi-trust li{display:flex;align-items:center;gap:9px;text-align:left;font-size:12px;color:#595959;line-height:1.35}
.bi-trust b{display:block;font-size:12.5px;font-weight:800;color:#00173D;white-space:nowrap}
.bi-trust .bi-seal{display:block;flex:none;width:52px;height:52px}
.bi-secsl{padding:0 0 84px;background:#fff}
.bi-seals{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));align-items:center;gap:16px;padding:30px;border-radius:26px;color:#fff;
  background:radial-gradient(500px 300px at 50% 0%,rgba(0,117,235,.3),transparent 70%),linear-gradient(150deg,#002B6B,#00173D)}
.bi-seals-t h2{margin:0 0 8px;font-size:26px;line-height:1.2;color:#fff;letter-spacing:-.02em;font-weight:800}
.bi-seals-t p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72)}
.bi-who{display:inline-flex;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:rgba(0,117,235,.16);border:1px solid rgba(0,117,235,.4);color:#8CC8FF;margin-bottom:14px}
.bi-sealc{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 10px 20px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.bi-sealc .bi-badge{width:118px;height:118px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.bi-sealc b{margin-top:16px;font-size:15.5px;color:#fff}
.bi-sealc span{margin-top:3px;font-size:13px;font-weight:700;color:#8CC8FF}
/* 27 Oct: first screen = headline, CTAs and seal row; the numbers card starts just below the fold */
@media (min-width:1001px){.nh .nhx{min-height:min(calc(100vh - 118px),860px)}}
.nh .nh-stats{margin-top:34px}
@media (max-width:760px){.nh .nh-stats{margin-top:40px}}
@media (max-width:1080px){.bi-seals{grid-template-columns:repeat(3,minmax(0,1fr))}.bi-seals-t{grid-column:1/-1}}
@media (max-width:760px){
  .bi-trust{gap:12px 16px}
  .bi-secsl{padding:0 0 56px}
  .bi-seals{grid-template-columns:minmax(0,1fr);padding:22px}
  .bi-sealc{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;text-align:left;padding:14px}
  .bi-sealc .bi-badge{grid-row:1/3;width:72px;height:72px}
  .bi-sealc b{align-self:end;margin:0}.bi-sealc span{align-self:start;margin:0}
}


.f-seals{display:grid;gap:10px;margin-top:2px}
.f-seals-b{display:flex;gap:12px}
.f-seals .bi-seal{display:block;width:48px;height:48px;flex:none}
.f-seals p{margin:0;color:#8FA9C9;font-size:12.5px;line-height:1.55;max-width:330px}


/* ============ five doors (dark band) ============ */
.doors-b{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,#001029 100%);padding:84px 0;position:relative;overflow:hidden}
.doors-b::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;top:-260px;right:-140px;
  background:radial-gradient(circle,rgba(0,117,235,.28),transparent 68%)}
.doors-b::after{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:56px 56px}
.doors-b .wrap{position:relative;z-index:1}
.doors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:40px}
.door{display:flex;flex-direction:column;gap:10px;padding:24px 20px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:background .2s,border-color .2s,transform .2s}
.door:hover{background:rgba(255,255,255,.11);border-color:rgba(111,176,255,.5);transform:translateY(-4px)}
.door .who{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-3);
  min-height:13px}
/* reserve two heading lines so every card's body copy starts on the same line */
.door h3{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.014em;line-height:1.28;min-height:2.56em}
.door p{font-size:13.5px;color:var(--on-navy);flex:1}
.door .go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:14px;font-weight:800;color:#fff;
  padding:9px 16px;border:1.5px solid rgba(255,255,255,.42);border-radius:10px;white-space:nowrap;transition:background .18s,border-color .18s}
.door:hover .go{background:rgba(255,255,255,.14);border-color:#fff}
@media(max-width:1080px){.doors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.doors{grid-template-columns:1fr}}

/* ============ Career Readiness System ============ */
.crs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:48px;position:relative}
.crs .st{text-align:center;padding:0 12px;position:relative}
.crs .st::after{content:"";position:absolute;left:calc(50% + 40px);right:calc(-50% + 40px);top:31px;border-top:2px dashed var(--blue-2)}
.crs .st:last-child::after{display:none}
.crs .ic{width:62px;height:62px;margin:0 auto;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;z-index:1}
.crs .ic svg{width:24px;height:24px}
.crs .st:nth-child(1) .ic{background:linear-gradient(135deg,#006BD6,#57ABFF)}
.crs .st:nth-child(2) .ic{background:linear-gradient(135deg,#7F56D9,#B692F6)}
.crs .st:nth-child(3) .ic{background:linear-gradient(135deg,#A8351B,#F46C40)}
.crs .st:nth-child(4) .ic{background:linear-gradient(135deg,#002B6B,#0075EB)}
.crs .st:nth-child(5) .ic{background:linear-gradient(135deg,#004CA3,#8AC4FF)}
.crs .no{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-txt);margin:18px 0 6px}
.crs h3{font-size:17px;font-weight:800;margin-bottom:8px}
.crs p{font-size:13px;color:var(--text-2);line-height:1.5}
.crs-note{margin-top:40px;background:var(--blue-0);border:1px solid var(--blue-2);border-radius:var(--r-md);
  padding:20px 28px;text-align:center;font-size:14.5px;color:var(--text-2)}
.crs-note b{color:var(--navy)}
@media(max-width:900px){.crs{grid-template-columns:1fr 1fr;gap:30px 12px}.crs .st::after{display:none}}
@media(max-width:520px){.crs{grid-template-columns:1fr}}

/* screen-reader-only label */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ ECOSYSTEM - hub and spokes ============ */
.hub{display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center;margin-top:44px}
.hub-ring{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto 34px;overflow:visible}
.hub-orbit{position:absolute;inset:11%;border:1.5px dashed var(--blue-2);border-radius:50%}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:146px;height:146px;
  border-radius:50%;background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-lg);z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:16px;text-align:center}
.hub-core img{width:88px;height:auto}
.hub-core b{font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.hub-n{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  gap:8px;width:124px;z-index:2;background:none;border:0;padding:0}
.hub-n .pl{width:96px;height:96px;border-radius:50%;background:var(--pl,#fff);border:2px solid var(--pb,var(--line-2));
  box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;padding:13px;overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.hub-n .pl img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}
/* square-canvas marks get lifted; wide wordmarks get capped so they clear the circle */
.hub-n .pl img[src*="bi-mark"]{transform:scale(1.26)}
.hub-n .pl img[src*="infytalent"]{max-width:70px}
.hub-n .pl img[src*="infylearn"]{max-width:66px}
.hub-n .pl img[src*="coursera"]{max-width:62px;max-height:26px}
.hub-n .pl img[src*="leadup"]{max-width:62px;max-height:30px}
.hub-n .pl img[src*="production-icon"]{max-height:42px}
.hub-n .lb{font-size:11.5px;font-weight:800;color:var(--text-2);line-height:1.25;text-align:center;
  transition:color .2s}
.hub-n:hover .pl{transform:scale(1.06)}
.hub-n[data-i="0"]{--pl:#FFFFFF;--pb:var(--line)}
.hub-n[data-i="1"]{--pl:#FFFFFF;--pb:var(--line)}
.hub-n[data-i="2"]{--pl:#FFFFFF;--pb:var(--line)}
.hub-n[data-i="2"]{--pl:#FFFFFF;--pb:var(--line)}
.hub-n[data-i="2"]{--pl:#FFFFFF;--pb:var(--line)}
.hub-n[data-i="3"]{--pl:#FFFFFF;--pb:var(--line)}
.hub-n[aria-selected="true"] .pl{border-color:var(--blue-txt);box-shadow:0 0 0 4px var(--blue-1),var(--sh-md);transform:scale(1.06)}
.hub-n[aria-selected="true"] .lb{color:var(--navy)}
/* the detail panel */
.hub-pane{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:32px;
  box-shadow:var(--sh-sm);min-height:430px}
.hub-p{display:none}
.hub-p.on{display:block;animation:hubIn .28s ease both}
@keyframes hubIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hub-p .mark{display:flex;align-items:center;height:38px;margin-bottom:16px}
.hub-p .mark img{max-height:100%;max-width:230px;width:auto;height:auto;object-fit:contain}
.hub-p .mark .mk-w{font-size:25px;font-weight:900;letter-spacing:-.025em;color:var(--navy);margin-left:9px}
.hub-p .eye{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-txt)}
.hub-p h3{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.25;margin-top:7px}
.hub-p .tx{font-size:14.5px;color:var(--text-2);line-height:1.62;margin-top:11px}
.hub-p .nums{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.hub-p .nums div{flex:1 1 110px;background:var(--blue-0);border:1px solid var(--blue-1);border-radius:12px;padding:13px 15px}
.hub-p .nums b{display:block;font-size:22px;font-weight:900;color:var(--navy);line-height:1;letter-spacing:-.02em}
.hub-p .nums span{display:block;font-size:11px;color:var(--text-2);margin-top:5px;font-weight:600;line-height:1.3}
.hub-p .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.hub-p .chips span{font-size:11.5px;font-weight:700;color:var(--navy);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 11px}
.hub-p .go{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--blue-txt);
  margin-top:20px;text-decoration:none}
.hub-p .go:hover{gap:11px}
/* the five InfyLearn products, with their own marks */
.hub-prods{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.hub-prods .hp{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:12px}
.hub-prods .hp img{width:26px;height:26px;flex:none;object-fit:contain}
.hub-prods .hp b{display:block;font-size:13px;font-weight:800;color:var(--navy);line-height:1.2}
.hub-prods .hp small{display:block;font-size:11px;color:var(--text-2);margin-top:3px;line-height:1.35}
.hub-prods .hp.full{grid-column:span 2}
@media(max-width:960px){
  .hub{grid-template-columns:1fr;gap:26px}
  .hub-ring{display:none}
  .hub-tabs{display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px}
  .hub-pane{min-height:0;padding:24px}
  .hub-prods{grid-template-columns:1fr}.hub-prods .hp.full{grid-column:span 1}
}
/* mobile selector, hidden on desktop where the ring does the job */
.hub-tabs{display:none;margin-bottom:4px}
.hub-tabs button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 6px;background:#fff;
  border:1px solid var(--line-2);border-radius:12px;-webkit-appearance:none;appearance:none}
.hub-tabs button img{height:22px;width:auto;max-width:100%;object-fit:contain}
.hub-tabs button span{font-size:10.5px;font-weight:800;color:var(--text-2);line-height:1.2;text-align:center}
.hub-tabs button[aria-selected="true"]{border-color:var(--blue-txt);box-shadow:0 0 0 3px var(--blue-1)}
/* ============ WHY US comparison ============ */
.cmp{margin-top:40px;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-sm)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:16px 20px;text-align:left;font-size:14px;border-bottom:1px solid var(--line-2)}
.cmp thead th{background:var(--paper-2);font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);vertical-align:bottom;padding-top:18px;padding-bottom:14px}
.cmp thead th span{display:block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.02em;
  text-transform:none;opacity:.8}
/* Board Infinity is the first and the loudest column */
.cmp thead th.us{background:var(--blue-txt);color:#fff;letter-spacing:.06em;font-size:13px}
.cmp thead th.us span{color:#DCEBFF;opacity:1}
.cmp tbody th{font-weight:700;color:var(--navy);width:26%}
.cmp td{color:var(--text-2);width:24.6%}
.cmp td.us{background:var(--blue-0);color:var(--navy);font-weight:700;
  border-left:2px solid var(--blue-txt);border-right:2px solid var(--blue-txt)}
.cmp tr:last-child td.us{border-bottom:2px solid var(--blue-txt)}
.cmp tbody tr:hover td:not(.us),.cmp tbody tr:hover th{background:var(--paper-2)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp tr:last-child td.us{border-bottom:2px solid var(--blue-txt)}
.cmp .yes{color:var(--ok-txt);font-weight:900;margin-right:7px}
.cmp .no{color:var(--text-2);font-weight:900;margin-right:7px;opacity:.55}
.cmp-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:12.5px;color:var(--text-2)}
.cmp-legend b{color:var(--navy)}
@media(max-width:820px){.cmp{overflow-x:auto}.cmp table{min-width:760px}}

/* ============ ENGAGEMENT model ============ */
.eng{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
.en{position:relative;padding:26px 22px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.en .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  font-size:13.5px;font-weight:900;color:#fff;margin-bottom:14px}
.en:nth-child(1) .n{background:var(--blue-txt)} .en:nth-child(2) .n{background:var(--a2)}
.en:nth-child(3) .n{background:var(--a1-txt)} .en:nth-child(4) .n{background:var(--navy-2)}
.en h3{font-size:17px;font-weight:800;margin-bottom:7px}
.en p{font-size:13.5px;color:var(--text-2);line-height:1.55}
.en .when{display:block;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2)}
@media(max-width:1000px){.eng{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.eng{grid-template-columns:1fr}}

/* ============ CASE cards v2 — data-led, no stock photos ============ */
.cs2{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.cc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .2s}
.cc:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.cc .hd{padding:24px 26px 20px;color:#fff;position:relative;overflow:hidden}
.cc.c1 .hd{background:linear-gradient(140deg,var(--navy) 0%,var(--blue-txt) 130%)}
.cc.c2 .hd{background:linear-gradient(140deg,#2C1C5F 0%,var(--a2) 130%)}
.cc.c3 .hd{background:linear-gradient(140deg,#5C1309 0%,var(--a1) 140%)}
.cc .hd::after{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.3px,transparent 1.3px);background-size:15px 15px}
.cc .hd .tag{position:relative;display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;background:rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.cc .hd b{position:relative;display:block;font-size:clamp(34px,3.8vw,46px);font-weight:800;letter-spacing:-.034em;line-height:1}
.cc .hd span{position:relative;display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.9);margin-top:7px}
/* mini before/after chart, drawn in CSS */
.cc .mini{display:flex;align-items:flex-end;gap:10px;height:64px;padding:18px 26px 0}
.cc .mb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.cc .mb i{display:block;width:100%;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--line)}
.cc .mb.on i{background:var(--blue-3)}
.cc.c2 .mb.on i{background:var(--a2-4)} .cc.c3 .mb.on i{background:var(--a1-4)}
.cc .mb em{font-style:normal;font-size:10px;font-weight:700;color:var(--text-2)}
.cc .bd{padding:16px 26px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.cc .bd h3{font-size:17px;font-weight:800;line-height:1.3}
.cc .bd p{font-size:13.5px;color:var(--text-2);flex:1;line-height:1.55}
.cc .bd .mt{display:flex;flex-wrap:wrap;gap:6px}
.cc .bd .mt span{font-size:11px;font-weight:700;color:var(--text-2);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:999px;padding:4px 10px}
.cc .bd .go{font-size:13.5px;font-weight:800;color:var(--blue-txt);white-space:nowrap}
@media(max-width:960px){.cs2{grid-template-columns:1fr}}

/* ============ TESTIMONIALS v2 — featured + stacked ============ */
.tst{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:42px}
.tf{background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 60%,#001029 100%);border-radius:var(--r-lg);
  padding:38px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column}
.tf::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;top:-200px;right:-140px;
  background:radial-gradient(circle,rgba(0,117,235,.32),transparent 68%)}
.tf>*{position:relative}
.tf .mk{font-size:56px;line-height:.8;color:var(--on-navy-a);opacity:.5;font-weight:800;margin-bottom:6px}
.tf blockquote{font-size:clamp(18px,1.9vw,23px);font-weight:600;line-height:1.5;color:#fff;letter-spacing:-.012em;flex:1}
.tf .metric{display:inline-flex;align-items:baseline;gap:9px;margin:22px 0 20px;padding:12px 16px;
  border-radius:var(--r-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.tf .metric b{font-size:26px;font-weight:800;color:var(--on-navy-a);letter-spacing:-.02em}
.tf .metric span{font-size:12.5px;color:var(--on-navy)}
.tf .wh{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.tf .wh img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:center 22%;flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.tf .wh b{display:block;font-size:15px;font-weight:800;color:#fff}
.tf .wh span{display:block;font-size:12.5px;color:var(--on-navy)}
.tcol{display:grid;gap:22px}
.tc{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;gap:14px;position:relative;border-left:4px solid var(--blue-2)}
.tc:nth-child(2){border-left-color:var(--a2-3)}
.tc .st{color:#8A4900;font-size:13px;letter-spacing:2px}
.tc blockquote{font-size:14.5px;line-height:1.62;color:var(--navy);flex:1}
.tc .wh{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line-2)}
.tc .wh img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 22%;flex:none}
.tc .wh b{display:block;font-size:13.5px;font-weight:800;color:var(--navy)}
.tc .wh span{display:block;font-size:12px;color:var(--text-2)}
@media(max-width:960px){.tst{grid-template-columns:1fr}}

/* ============ coaching banner (bigger, card-led) ============ */
.co2{background:linear-gradient(150deg,#07204A 0%,var(--navy-2) 46%,#2C1C5F 130%);position:relative;overflow:hidden;padding:76px 0}
.co2::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;top:-300px;right:-200px;
  background:radial-gradient(circle,rgba(127,86,217,.34),transparent 66%)}
.co2-g{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
.co2 h2{font-size:clamp(30px,3.7vw,46px);font-weight:800;color:#fff;line-height:1.08;letter-spacing:-.028em}
.co2 h2 em{font-style:italic;color:var(--a2-4)}
.co2 .lede{font-size:16.5px;color:var(--on-navy);margin:20px 0 26px;max-width:520px;line-height:1.62}
.co2 .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.co2 .chips span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#DCE9F8;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px 15px}
.co2 .chips i{color:var(--ok);font-style:normal;font-weight:900}
.co2 .acts{display:flex;flex-wrap:wrap;gap:12px}
.co2 .acts .b2{background:transparent;color:#fff;border-color:rgba(255,255,255,.36)}
.co2 .acts .b2:hover{border-color:#fff}
/* the coach card grid — cards, as asked */
.cch{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cch .c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:18px}
.cch .c img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 22%;margin-bottom:12px}
.cch .c b{display:block;font-size:14.5px;font-weight:800;color:#fff}
.cch .c span{display:block;font-size:12px;color:var(--on-navy-2);margin-top:3px}
.cch .c .dom{display:inline-block;margin-top:11px;font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--a2-4);background:rgba(127,86,217,.2);border-radius:999px;padding:4px 10px}
.cch .full{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:16px 18px}
.cch .full b{font-size:14px;font-weight:800;color:#fff}
.cch .full span{display:block;font-size:12px;color:var(--on-navy-2);margin-top:2px}
.cch .full em{font-style:normal;flex:none;font-size:13px;font-weight:800;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);border-radius:9px;padding:9px 15px;white-space:nowrap}
@media(max-width:980px){.co2-g{grid-template-columns:1fr;gap:38px}}
@media(max-width:520px){.cch{grid-template-columns:1fr}.cch .full{grid-column:span 1;flex-direction:column;align-items:flex-start}}

/* ============ FAQ ============ */
.faq{max-width:880px;margin:40px auto 0}
.faq details{border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;margin-bottom:12px;box-shadow:var(--sh-sm)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-weight:700;font-size:15.5px;color:var(--navy);padding:19px 22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--blue-txt);flex:none;transition:transform .18s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px;color:var(--text-2);font-size:14.5px;line-height:1.65}

/* ============ report band — one line ============ */
.rep3{position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;
  align-items:center;background:linear-gradient(125deg,var(--navy) 0%,var(--navy-2) 62%,#0A3E8C 132%);
  border-radius:var(--r-xl);padding:42px 46px;margin-top:34px;box-shadow:var(--sh-lg)}
.rep3::before{content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:56px 56px}
.rep3>*{position:relative;z-index:1}
.rep3 .chip{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-navy-a);background:rgba(87,171,255,.14);
  border:1px solid rgba(87,171,255,.3);border-radius:999px;padding:7px 14px;margin-bottom:16px}
.rep3 h3{font-size:clamp(21px,2.4vw,29px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.2}
.rep3 .rp-sub{font-size:14.5px;color:var(--on-navy);margin-top:10px;line-height:1.6;max-width:54ch}
.rep3 ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:22px 0 24px}
.rep3 ul li{position:relative;padding-left:27px;font-size:13.5px;color:#E8F1FC;font-weight:600;line-height:1.45}
.rep3 ul li::before{content:"\2713";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;
  background:rgba(6,193,112,.18);color:#5FE3A8;font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center}
.rep3 form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rep3 input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:12px;
  padding:14px 16px;font-family:inherit;font-size:14.5px;color:#fff;min-width:240px;flex:1 1 240px}
.rep3 input::placeholder{color:var(--on-navy-2)}
.rep3 input:focus{outline:2px solid var(--blue-4);outline-offset:1px}
.rep3 button{background:#fff;color:var(--navy);border:0;border-radius:12px;padding:15px 24px;
  font-family:inherit;font-size:14.5px;font-weight:800;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.rep3 button:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(0,0,0,.55)}
.rep3 .rp-fine{font-size:12px;color:var(--on-navy-2);margin-top:13px}
/* the report cover mock, so the band is not just a form on a slab */
.rp-cov{justify-self:center;width:100%;max-width:288px;aspect-ratio:1/1.24;background:#fff;
  border-radius:14px;box-shadow:0 30px 60px -18px rgba(0,0,0,.55);padding:24px 22px;
  display:flex;flex-direction:column;transform:rotate(-2.2deg);transition:transform .3s}
.rep3:hover .rp-cov{transform:rotate(0deg) translateY(-4px)}
.rp-cov .rp-k{font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-txt)}
.rp-cov .rp-t{font-size:19px;font-weight:900;color:var(--navy);letter-spacing:-.02em;line-height:1.18;margin-top:9px}
.rp-cov .rp-r{font-size:10.5px;color:var(--text-2);margin-top:7px;font-weight:600}
.rp-cov .rp-bars{display:flex;align-items:flex-end;gap:9px;flex:1;min-height:84px;margin:18px 0 14px}
.rp-cov .rp-bars i{flex:1;border-radius:5px 5px 2px 2px;background:var(--blue-2)}
.rp-cov .rp-bars i:nth-child(2){background:var(--blue-3)}
.rp-cov .rp-bars i:last-child{background:var(--blue-txt)}
.rp-cov .rp-n{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line-2);
  padding-top:13px}
.rp-cov .rp-n b{display:block;font-size:17px;font-weight:900;color:var(--navy);line-height:1}
.rp-cov .rp-n span{display:block;font-size:9.5px;color:var(--text-2);margin-top:4px;font-weight:600;line-height:1.3}
@media(max-width:900px){.rep3{grid-template-columns:1fr;padding:32px 26px;gap:30px}
  .rep3 ul{grid-template-columns:1fr}.rp-cov{transform:none;max-width:252px}}

/* ============ final CTA ============ */
.fin{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy) 100%);position:relative;
  overflow:hidden;padding:86px 0;text-align:center}
.fin::before{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px}
.fin .wrap{position:relative}
.fin h2{font-size:clamp(29px,3.9vw,48px);font-weight:800;color:#fff;line-height:1.1}
.fin p{font-size:16.5px;color:var(--on-navy);max-width:600px;margin:20px auto 32px}
.fin .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.fin .w{background:#fff;color:var(--navy)}
.fin .o{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.fin .o:hover{border-color:#fff}
.fin .steps{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:38px;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.14)}
.fin .steps div{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--on-navy)}
.fin .steps i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-style:normal;font-size:11px;font-weight:900;flex:none}

/* ============ footer CTA band ============ */
.ftcta{background:#071322;color:#fff;padding:66px 0 60px;position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08)}
.ftcta::before{content:"";position:absolute;inset:0;opacity:.055;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:104px 104px}
.ftcta .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ftcta .ft-pill{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:#8AC4FF;border:1px solid rgba(138,196,255,.38);border-radius:999px;padding:9px 17px}
.ftcta .ft-pill i{width:7px;height:7px;border-radius:50%;background:#57ABFF;flex:none}
.ftcta h2{font-size:clamp(28px,3.8vw,44px);font-weight:900;letter-spacing:-.035em;line-height:1.15;
  margin-top:20px;color:#fff}
.ftcta h2 span{background:linear-gradient(96deg,#57ABFF,#B692F6);-webkit-background-clip:text;background-clip:text;color:transparent}
.ftcta .wbtn{display:inline-flex;align-items:center;gap:11px;background:#fff;color:#071322;border-radius:16px;
  padding:19px 30px;font-size:16px;font-weight:800;white-space:nowrap;transition:transform .16s,box-shadow .16s}
.ftcta .wbtn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.ftcta .wbtn svg{width:19px;height:19px}

/* ============ footer ============ */
footer.ft{background:#071322;color:#8FA6BC;padding:58px 0 30px}
.ft-g{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:36px 26px;margin-bottom:44px}
footer.ft h4{color:#fff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.11em;margin-bottom:18px}
footer.ft ul{display:grid;gap:13px;list-style:none}
footer.ft a{color:#C7D6E5;font-size:14.5px;text-decoration:none;line-height:1.4}
footer.ft a:hover{color:#fff}
footer.ft .brand img{width:132px;filter:brightness(0) invert(1)}
footer.ft .brand>p{font-size:14px;margin-top:18px;max-width:340px;line-height:1.65;color:#8FA6BC}
.ft-row{display:flex;align-items:flex-start;gap:13px;margin-top:22px;font-size:14px;line-height:1.6;color:#C7D6E5}
.ft-row svg{width:18px;height:18px;flex:none;margin-top:2px;color:#8FA6BC}
.ft-row a{font-size:14px}
.ft-soc{display:flex;gap:11px;margin-top:26px}
.ft-soc a{width:42px;height:42px;border-radius:11px;background:#12253A;display:flex;align-items:center;
  justify-content:center;color:#fff;transition:background .18s}
.ft-soc a:hover{background:#1D3B5C}
.ft-soc svg{width:17px;height:17px}
.ft-b{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13.5px;color:#8FA6BC}
.ft-b .lk{display:flex;gap:26px}
@media(max-width:1080px){.ft-g{grid-template-columns:1.4fr repeat(3,1fr)}}
@media(max-width:760px){.ft-g{grid-template-columns:1fr 1fr}.ftcta .wrap{flex-direction:column;align-items:flex-start}}

/* --- ecosystem: one plate treatment, and square marks sized to match wordmarks --- */
.hub-n .pl{background:#fff;border:1px solid var(--line)}
.hub-n:hover .pl{border-color:var(--blue-2)}
.hub-n[aria-selected="true"] .pl{background:#fff;border:2px solid var(--blue-txt)}
.hub-tabs button img{max-height:22px;max-width:56px;width:auto;height:auto;object-fit:contain}
/* square-canvas marks (icon only) need a bigger box than a wide wordmark */
.hub-p .mark{height:44px}
.hub-p .mark img{max-height:44px}
.hub-p .mark img[src*="nexus"]{max-height:44px;max-width:44px}
.hub-p .mark img[src*="infytalent"]{max-height:36px;max-width:210px}
.hub-p .mark img[src*="infylearn"]{max-height:38px}
.hub-p .mark img[src*="coursera"]{max-height:30px}
.hub-p .mark img[src*="leadup"]{max-height:34px}

/* --- hero visual: the reference artwork ------------------------------------
   Taken from the supplied reference render, so it carries exactly the cards in
   that reference and no others: no Career Services card. It is placed with no
   frame, no border, no radius and no shadow - the reference has no outline, and
   the artwork's own pale ground is feathered at the edges so it dissolves into
   the hero instead of showing a rectangle. */
.hero .hx{grid-template-columns:.86fr 1.14fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(34px,4.05vw,53px)}
.hero .sub{max-width:520px}
.dband{display:block;line-height:0;background:#fff}
.dband img{width:100%;height:auto;display:block}
.hero-art{width:100%;height:auto;display:block;border:0;border-radius:0;box-shadow:none;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 7%,#000 100%),
                     linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 6%,#000 94%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 7%,#000 100%),
                     linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 6%,#000 94%,rgba(0,0,0,0) 100%);
          mask-composite:intersect}
@media(max-width:980px){
  .hero .hx{grid-template-columns:1fr;gap:36px}
  .hero-art{max-width:560px;margin:0 auto;
    -webkit-mask-image:none;mask-image:none}
}


/* 9 Sep 2026, client: "instead of three, keep only two, which are the case
   studies", and make the component better.

   The PDF banner added earlier the same day is gone. It only ever existed
   because .cs2 was hard-coded to three columns and the third cell would have
   been blank with two real studies in it; the honest fix is two columns, so
   that is what this does. The gated report is still reachable - #report is its
   own section further down the page with its own heading.

   The chart replaces three unlabelled stubs with the studies' actual published
   figures, printed above each bar: 214/241/301 for the growth curve and
   630/152/127 for the contest funnel. Bars are to scale against the largest
   value in their own card, which is why study-b's descend - it is a funnel.
   The bar is absolutely positioned inside .pf-t so its percentage height
   resolves against a definite box; as a flex child it would not.

   On imagery, 15 Sep 2026: the client supplied a banner per card, so each
   header is now that artwork rather than a CSS gradient. The students in them
   are stock, NOT the anonymised partners - the caption under the strip still
   says the institutions asked to stay anonymous, and the tag chip stays on top
   of the image because it is the only place the sector and region are stated.
   WARNING: the headline figures (301, 214, 2023, 2025, 127) are RASTERISED
   into these WebPs. If any of those numbers change, the image has to be
   re-exported - editing the alt text is not enough. */
.cs2{grid-template-columns:repeat(2,1fr);gap:26px}
/* The banner is a normal block image, not an absolutely-positioned fill: that
   way .hd takes its height from the artwork and needs no aspect-ratio, so an
   unsupported property cannot collapse the header to nothing. */
.cc .hd.hd-img{padding:0;background:none}
.cc .hd.hd-img img{display:block;width:100%;height:auto}
.cc .hd.hd-img .tag{position:absolute;top:14px;left:16px;margin:0;z-index:1;
  background:rgba(8,22,64,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* 12 Oct 2026: the banners are the client's photographs now - bright, busy
   skies and campus stone - so the translucent-white chip had nothing to sit
   on. A dark chip keeps the sector/region legible on any photo. */
@media(max-width:880px){.cs2{grid-template-columns:1fr}}
.cc .pf-ch{display:flex;align-items:flex-end;gap:16px;height:150px;padding:24px 26px 0}
.cc .pf-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
.cc .pf-b em{font-style:normal;font-size:13px;font-weight:800;color:var(--text-2);line-height:1}
.cc .pf-b .pf-t{position:relative;flex:1;width:100%}
.cc .pf-b i{position:absolute;left:0;right:0;bottom:0;height:var(--h);min-height:5px;
  border-radius:6px 6px 2px 2px;background:var(--line)}
.cc .pf-b u{text-decoration:none;font-size:10.5px;font-weight:700;color:var(--text-2)}
.cc .pf-b.on em{font-size:15.5px;color:var(--navy)}
.cc.c1 .pf-b.on i{background:var(--blue-3)}
.cc.c2 .pf-b.on i{background:var(--a2-4)}
/* the recruiter strip, boxed the same way the institution crests are */
.pf-hire{margin-top:34px;text-align:center}
.pf-note{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2)}
.pf-lg{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.pf-lg>span{display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-md);height:76px;min-width:158px;padding:14px}
.pf-lg img{max-height:38px;max-width:100%;width:auto;height:auto;object-fit:contain}
.pf-w{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.pf-cav{font-size:12.5px;color:var(--text-2);margin-top:14px}
@media(max-width:620px){.pf-lg>span{min-width:132px;height:66px}.pf-lg img{max-height:30px}}


/* ===== /career-coaching/ hero, 16 Sep 2026: logos orbiting the BI mark =====
   Own namespace (.cwo-) so none of it can reach the rest of the page, and so
   the navy .cbanner rules it replaces simply go unused. */
.cwo{position:relative;overflow:hidden;padding:54px 0 58px;
  background:linear-gradient(180deg,#F4F8FF 0%,#FBFCFE 42%,#fff 100%)}
/* the faint grid from the reference, and a wash under the constellation */
.cwo::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,rgba(0,43,107,.05) 1px,transparent 1px),
                   linear-gradient(rgba(0,43,107,.05) 1px,transparent 1px);
  background-size:76px 76px}
.cwo::after{content:"";position:absolute;width:760px;height:760px;border-radius:50%;
  right:-140px;top:-190px;pointer-events:none;
  background:radial-gradient(circle,rgba(0,117,235,.11),rgba(127,86,217,.06) 46%,transparent 68%)}
.cwo-x{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:26px;align-items:center}
/* the tag, lifted from /aptitude-training/'s .badge so the two pages write it
   the same way. Values are literal because this page's stylesheet carries none
   of the aptitude page's tokens - it is on a different token lineage, so
   inheriting the class name would have rendered an unstyled pill. */
.cwo-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
  background:#fff;border:1px solid #BDDEFF;border-radius:999px;padding:9px 18px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-txt,#006BD6);
  box-shadow:0 1px 3px rgba(0,23,61,.07),0 1px 2px rgba(0,23,61,.05)}
.cwo-badge i{width:7px;height:7px;border-radius:50%;background:var(--blue,#0075EB);
  flex:none}
.cwo h1,.cwo h2{font-size:clamp(30px,3.1vw,43px);line-height:1.1;letter-spacing:-.032em;
  font-weight:800;color:var(--ink,#0F1B3D);margin:0;max-width:430px}
.cwo h1 em,.cwo h2 em{font-style:normal;color:#0075EB}
.cwo-lede{margin-top:18px;max-width:430px;font-size:16px;line-height:1.66;
  color:var(--text-2,#4D5B77)}
.cwo-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cwo-ctas .btn{display:inline-flex;align-items:center;gap:9px;
  border-radius:12px;padding:14px 22px;font-size:15px;font-weight:700;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
.cwo-ctas .btn-p{background:var(--blue,#0075EB);color:#fff;
  box-shadow:0 10px 26px -10px rgba(0,117,235,.5)}
.cwo-ctas .btn-p:hover{background:var(--blue-hov,#006BD6);transform:translateY(-1px)}
.cwo-ctas .btn .arr{transition:transform .16s}
.cwo-ctas .btn-p:hover .arr{transform:translateX(3px)}
.cwo-ctas .b2{background:#fff;color:var(--blue-txt,#006BD6);
  border:1px solid var(--line-2,#E4E8F0)}
.cwo-ctas .b2:hover{border-color:var(--blue-soft,#8AC4FF);background:#F7FBFF}
/* four boxes, 2x2, in the copy column */
.cwo-chips{list-style:none;margin:24px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:440px}
.cwo-chips li{display:flex;align-items:center;gap:11px;min-width:0;
  background:#fff;border:1px solid #E4E8F0;border-radius:14px;padding:11px 13px;
  box-shadow:0 1px 3px rgba(0,23,61,.07),0 1px 2px rgba(0,23,61,.05)}
.bx-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;
  place-items:center;color:#fff}
.bx-ic svg{width:17px;height:17px}
.bx-tx{min-width:0}
.bx-tx b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink,#0F1B3D);line-height:1.15}
.bx-tx span{display:block;font-size:11.5px;color:var(--text-2,#4D5B77);
  margin-top:2px;line-height:1.25}
/* ---- the constellation ---------------------------------------------------
   The stage is WIDER than its column and pushed right, which is what fills the
   empty corner the client pointed at; .cwo has overflow:hidden so the outer
   ring is cropped by the hero edge rather than by the grid column. */
.cwo-art{position:relative;
  min-height:calc(812px * var(--sc) + 18px)}
/* -34%, not -46%: at -46% the outer ring reached x=599 and the lede runs to
   x=582, so a chip crossed the paragraph every few seconds. Pushing the centre
   right also puts the field into the empty corner, which is what was asked for. */
.cwo{--sc-w:.9;--sc-h:1;--sc:min(var(--sc-w),var(--sc-h));--sx:48px}
.cwo-stage{position:absolute;left:50%;top:50%;width:812px;height:812px;
  margin-left:var(--sx);
  transform:translate(-50%,-50%) scale(var(--sc));
  transform-origin:50% 50%}
.cwo-glow{position:absolute;left:50%;top:50%;width:330px;height:330px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(0,117,235,.22),rgba(0,117,235,.06) 52%,
             transparent 70%)}
.cwo-dash{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;
  border:1px dashed rgba(0,43,107,.13)}
@keyframes cwoSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.cwo-orb{position:absolute;inset:0;animation:cwoSpin var(--sp) linear infinite}
.cwo-orb--rev{animation-direction:reverse}
/* placement */
.cwo-n{position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--a)) translate(var(--r))}
/* static cancel of the placement angle - NOT animated, see the note in build.py */
.cwo-c{position:absolute;left:0;top:0;width:var(--s);height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform:rotate(calc(-1 * var(--a)))}
/* the chip itself, counter-spinning at the ring's own duration so it stays upright */
.cwo-i{position:relative;display:grid;place-items:center;width:100%;height:100%;
  border-radius:50%;background:#fff;border:1px solid rgba(0,43,107,.08);
  box-shadow:0 10px 26px -14px rgba(3,20,56,.28),0 2px 6px -3px rgba(3,20,56,.10);
  animation:cwoSpin var(--sp) linear infinite reverse}
.cwo-orb--rev .cwo-i{animation-direction:normal}
.cwo-i img{max-width:var(--lw,78px);max-height:var(--lh,36px);width:auto;height:auto;
  object-fit:contain;display:block}
.cwo-n{--lw:78px;--lh:36px}
/* a coloured-box mark gets its own ground as the chip colour, and the art is
   still CONTAINED - cropping it to fill ate the wordmark */
.cwo-i--box{background:var(--bg,#fff);border-color:transparent;overflow:hidden}
.cwo-i--box img{max-width:var(--lw,78px);
  max-height:calc(var(--s,88px) * .62)}
.cwo-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:172px;height:172px;border-radius:50%;background:#fff;display:grid;
  place-items:center;
  box-shadow:0 0 0 1px rgba(0,43,107,.07),0 0 0 12px rgba(0,117,235,.06),
             0 26px 60px -26px rgba(3,20,56,.36)}
.cwo-hub img{width:108px;height:auto;display:block}
.cwo-stage:hover .cwo-orb,.cwo-stage:hover .cwo-i{animation-play-state:paused}
@media(min-width:1600px){.cwo .wrap{max-width:1300px}}
@media(min-width:1840px){.cwo .wrap{max-width:1400px}.cwo{--sx:70px}}
@media(max-width:1420px){.cwo{--sc-w:.84;--sx:30px}}
@media(max-width:1300px){.cwo{--sc-w:.78;--sx:18px}}
@media(max-width:1180px){
  .cwo{--sc-w:.72;--sx:8px}
  .cwo-x{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:18px}
  .cwo h1,.cwo h2,.cwo-lede{max-width:390px}
}
@media(max-width:1040px){
  .cwo{--sc-w:.64;--sx:0px}
  .cwo-x{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:14px}
  .cwo h1,.cwo h2,.cwo-lede{max-width:360px}
}
@media(max-width:940px){
  .cwo{--sc-w:.62;--sx:0px}
  .cwo-x{grid-template-columns:1fr;gap:6px}
  .cwo h1,.cwo h2,.cwo-lede{max-width:none}
  .cwo-chips{max-width:none}
}
@media(max-width:600px){
  .cwo{padding:34px 0 34px;--sc-w:.42}
  .cwo-chips{grid-template-columns:1fr;gap:10px}
}
@media(min-width:941px) and (max-height:1040px){.cwo{--sc-h:.94}}
@media(min-width:941px) and (max-height:980px){.cwo{--sc-h:.86}}
@media(min-width:941px) and (max-height:920px){.cwo{--sc-h:.79}}
@media(min-width:941px) and (max-height:860px){.cwo{--sc-h:.72}}
@media(min-width:941px) and (max-height:800px){.cwo{--sc-h:.65}}
@media(min-width:941px) and (max-height:740px){.cwo{--sc-h:.58}}
@media(min-width:941px) and (max-height:680px){.cwo{--sc-h:.52}}
@media(min-width:941px) and (max-height:620px){.cwo{--sc-h:.46}}
@media(min-width:941px) and (max-height:900px){.cwo{padding:34px 0 36px}}
@media(min-width:941px) and (max-height:760px){.cwo{padding:24px 0 26px}}
@media(prefers-reduced-motion:reduce){
  .cwo-orb,.cwo-i{animation:none!important}
}


/* 10 Sep 2026. The testimonial band returns, this time on real evidence: five
   signed experience certificates / feedback letters from the institutions
   themselves. The stock-portrait version removed on 9 Sep is in
   preserved/home-testimonials.html and is NOT what this is.

   One card per institution, as instructed, and no years anywhere - the letters
   are dated but the client does not want the dates on the page.

   Why the quotes differ in wording from each other: three of the five letters
   (Calcutta, Jammu, Nagpur) are near word-for-word the same template, so a
   straight lift would have printed the same sentence three times. Each card
   therefore takes a DIFFERENT sentence from its OWN letter. Nothing is invented
   and nothing is moved between institutions; see the mapping in the handover
   note. Light joining only ("and", trimming the legal entity name).

   18 Sep 2026, client: "the blue line is coming, remove that from all
   testimonials - that is not required." That was .tv-x, the cohort scope line
   at the foot of each card ("MBA first-year and final-year students" and so
   on). Both the spans and the rule are gone; the quote, the institution and the
   role remain.

   The crest is the imagery. Four are the crests already on the server; IIM
   Jammu has none yet, so that card falls back to a type lockup in the same
   44px slot rather than shipping a broken image or a stand-in mark. */
/* 16 Sep 2026: five cards wrapping onto two rows took most of a screen.
   They roll instead. The track holds the five cards TWICE and travels
   exactly -50%, so the second copy is under the cursor at the moment the
   animation restarts and the seam is invisible. The duplicate is
   aria-hidden, so the quotes are announced once. */
#voices .tv-rail{margin-top:38px;display:flex;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#voices .tv{display:flex;flex:none;gap:20px;padding-right:20px;
  animation:tvRoll 56s linear infinite}
#voices .tv-rail:hover .tv,#voices .tv-rail:focus-within .tv{animation-play-state:paused}
@keyframes tvRoll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){#voices .tv{animation:none}
  #voices .tv-rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
#voices .tv-c{flex:0 0 330px;display:flex;flex-direction:column;gap:16px;
  margin:0;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:26px 26px 24px;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s}
#voices .tv-c:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
#voices .tv-m{display:flex;align-items:center;height:46px}
#voices .tv-cr{max-height:46px;max-width:170px;width:auto;height:auto;object-fit:contain}
#voices .tv-txt{display:inline-flex;align-items:center;font-size:14px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  border-left:3px solid var(--blue-3);padding-left:11px}
#voices .tv-q{margin:0;font-size:15px;line-height:1.62;color:var(--text);flex:1}
#voices .tv-f{display:flex;flex-direction:column;gap:3px;
  border-top:1px solid var(--line-2);padding-top:14px}
#voices .tv-f b{font-size:14px;font-weight:800;color:var(--navy);line-height:1.35}
#voices .tv-r{font-size:12.5px;color:var(--text-2)}
#voices .tv-note{text-align:center;font-size:12.5px;color:var(--text-2);margin-top:26px}
@media(max-width:760px){#voices .tv-c{flex:0 0 82vw}}

.rep3 form input{flex:1 1 200px;min-width:0}.rep3 form button{flex:1 1 100%}
footer{--canvas:#07111F;--blue:#0075EB;--max:1200px}footer,footer *{box-sizing:border-box}footer{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;text-align:left;letter-spacing:normal;line-height:1.5}footer h2,footer h3,footer p,footer a,footer span,footer div,footer nav{font-family:inherit}footer a,footer a:hover{text-decoration:none}footer ul{list-style:none;margin:0;padding:0}/* ---------- footer (Sample A, approved 10 Aug 2026) ---------- */
footer{background:var(--canvas);color:#A8BEDC;font-size:14px;position:relative}
footer a{color:inherit}
footer a:hover{color:#fff}
.f-in{max-width:var(--max);margin:0 auto;padding:0 28px}
.f-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:78px 78px}
/* 9 Sep 2026, client: no rule between the CTA band and the logo below it. */
.f-cta{position:relative;padding:52px 0 46px}
.f-cta .f-in{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* 9 Sep 2026, client: take the colours of the .ftcta band that sat above this
   one (blue tag, blue-to-purple headline) and keep THIS band's sizing. Only
   the four colour values move; every size, weight and spacing is untouched. */
.f-chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#8AC4FF;border:1px solid rgba(138,196,255,.38);background:rgba(87,171,255,.1);
  border-radius:999px;padding:6px 14px;margin-bottom:16px}
.f-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#57ABFF}
.f-cta h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.028em;line-height:1.14;
  color:#fff;margin:0}
.f-cta h2 em{font-style:normal;background:linear-gradient(96deg,#57ABFF,#B692F6);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.f-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--canvas);font-weight:800;
  font-size:14.5px;border-radius:11px;padding:13px 22px;white-space:nowrap;
  transition:transform .16s,box-shadow .16s}
.f-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0,0,0,.5);color:var(--canvas)}
.f-btn svg{width:18px;height:18px;flex:none}
.f-main{position:relative;display:grid;grid-template-columns:1.3fr 3fr;gap:52px;padding:52px 0 42px}
.f-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 26px}
.f-brand{display:flex;flex-direction:column;gap:18px}
/* The wordmark asset is black type with a blue infinity mark. On navy that
   reads as "only the blue bit is visible", so it is inverted to solid white
   here rather than via the .wm-inv class - the verbatim pages get this
   stylesheet but not the main one, and were rendering the raw logo. */
.f-brand img{height:44px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
.f-tag{color:#8FA9C9;font-size:14px;max-width:330px;margin:0;line-height:1.6}
.f-row{display:flex;gap:11px;align-items:flex-start;color:#A8BEDC;font-size:13.5px;line-height:1.55}
.f-row svg{flex:none;width:16px;height:16px;margin-top:3px;color:#C2E0FF}
.f-soc{display:flex;gap:9px}
.f-soc a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#C3D9F0;
  transition:background .16s,border-color .16s,color .16s,transform .16s}
.f-soc a:hover{background:var(--blue);border-color:var(--blue-txt);color:#fff;transform:translateY(-2px)}
.f-soc svg{width:16px;height:16px}
footer h3{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8FA9C9;margin:0 0 15px}
.f-col{display:grid;gap:5px;align-content:start}
.f-sub{display:block;margin:12px 0 2px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#7FA8D4}   /* was 11: the link padding above now carries the rhythm */
.f-col a{color:#C3D9F0;font-size:14px;width:fit-content;transition:color .15s;
  padding:3px 0}   /* 22px -> 28px: SC 2.5.8 needs 24 */
.f-base{border-top:1px solid rgba(255,255,255,.11);display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;padding:20px 0;font-size:13px;color:#7E93B2}
.f-legal{display:flex;gap:22px;flex-wrap:wrap}
.f-legal a,.f-row a{padding:3px 0;display:inline-block}   /* 21px -> 27px, SC 2.5.8 */
@media(max-width:1000px){.f-main{grid-template-columns:1fr;gap:34px}.f-cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.f-in{padding:0 22px}.f-cols{grid-template-columns:1fr 1fr}}


/* 31 Aug 2026 — founder review.
   1. The institution strip no longer scrolls. A marquee only pays off with a
      handful of logos: a visitor has to wait for the loop to see the rest, and
      we have more coming, so it hid the very proof it was showing. Static rows
      instead: 14 crests as 7 x 2, dropping to 5 then 3 columns as the viewport
      narrows, so nothing shrinks to illegibility and nothing is hidden behind a
      scroll the visitor would have to wait out. */
.mq-static{animation:none!important;width:100%!important}
.mq-static .lgs{display:grid;grid-template-columns:repeat(7,1fr);
  gap:26px clamp(10px,1.6vw,24px);width:100%;padding-right:0;align-items:center;
  justify-items:center}
.mq-static .lgs span{height:72px;width:100%;justify-content:center}
/* Normalise by aspect, not by height. A 2.4:1 wordmark and a square crest at the
   same max-height read as wildly different sizes, and max-width keeps a gutter so
   the widest mark can never reach its cell edge. */
.mq-static .lgs img{max-width:92%;object-fit:contain}
.mq-static .lgs img.lg-sq{max-height:64px}
.mq-static .lgs img.lg-md{max-height:56px}
.mq-static .lgs img.lg-wd{max-height:42px}
@media(max-width:1080px){.mq-static .lgs{grid-template-columns:repeat(5,1fr)}}
@media(max-width:760px){.mq-static .lgs{grid-template-columns:repeat(3,1fr);gap:22px 14px}
  .mq-static .lgs img.lg-sq{max-height:46px}
  .mq-static .lgs img.lg-md{max-height:40px}
  .mq-static .lgs img.lg-wd{max-height:30px}}
/* 2. The Coursera node sat in a ring of our OWN brands, so the logo alone read
      as ours. The Coursera mark stays primary and a small Board Infinity badge
      overlaps the plate. .pl clips its children, so it needs overflow visible. */
.hub-n .pl-co{overflow:visible;position:relative}
.pl-bi{position:absolute;right:-3px;bottom:-3px;width:36px;height:36px;
  border-radius:50%;background:#fff;border:1px solid var(--line-2);
  box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;
  padding:7px}
.pl-bi img{max-width:100%;max-height:100%;width:auto;height:auto}
/* 3. Institutions now sit above the credentials block, so the strip label is the
      first thing in the section and needs its own top breathing room. */
.trust .trust-sep{margin-top:0}
.trust .trust-h{margin-top:54px}
/* 4. The card heading now follows the lockup directly, with no eyebrow between. */
.hub-p .mark+h3{margin-top:14px}

/* ===== new hero (nh-) — scoped so nothing here can reach the rest of the page */
/* Background matched to the design so the right-hand image has no visible edge.
   The image's own edges are: lavender-white along the top and sides
   (#F2F3FD..#FBF8FD) and PURE WHITE along the bottom, because the bottom of the
   crop is the white desk. So the section fades vertically to white — which is what
   the design does too — and carries the same lavender wash to the right. */
.nh{position:relative;overflow:hidden;padding:30px 0 0;
  background:radial-gradient(1150px 640px at 86% 14%,#F8F6FD 0%,transparent 66%),
             radial-gradient(950px 520px at 4% 0%,#F1F5FE 0%,transparent 60%),
             linear-gradient(180deg,#F9F8FD 0%,#FCFCFE 56%,#FFFFFF 100%)}
.nhx{display:grid;grid-template-columns:.86fr 1.14fr;gap:34px;align-items:center}
.nh .badge{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--blue-2);border-radius:999px;padding:9px 18px;font-size:11.5px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-txt);
  box-shadow:var(--sh-sm);margin-bottom:18px}
.nh .badge .spk{color:var(--a2);font-size:13px;line-height:1}
/* the headline wraps as drawn on desktop; below 760px let it flow */
@media(max-width:760px){.nh h1 .d-br{display:none}}
.nh h1{font-size:clamp(38px,4.9vw,63px);font-weight:800;letter-spacing:-.034em;
  line-height:1.06;color:var(--navy)}
.nh h1 .grad{background:linear-gradient(96deg,var(--blue) 4%,var(--blue) 38%,var(--a2) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap}
/* below ~700px the column is narrower than the word, so let it break again rather
   than overflow the viewport */
@media(max-width:700px){.nh h1 .grad{white-space:normal}}
.nh .sub{font-size:clamp(16px,1.35vw,18px);margin:18px 0 26px;max-width:470px;
  color:var(--text-2);line-height:1.62}
.nh .sub b{color:var(--blue-txt);font-weight:800}
.nh .hctas{display:flex;flex-wrap:wrap;gap:13px}
.nh .btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;
  border-radius:var(--r-md);padding:15px 26px;border:1px solid transparent}
.nh .btn-p{background:var(--blue);color:#fff;box-shadow:0 8px 22px -8px rgba(0,117,235,.55)}
.nh .btn-g{background:#fff;color:var(--blue-txt);border-color:var(--blue-2)}
.nh .btn .arr{font-size:15px;line-height:1}

/* ---- the right-hand visual: one image, exactly as designed ---- */
/* The founder's re-supplied hero image (1448x1086). Unlike the first upload this
   one is framed edge to edge, so it is NOT cropped: it is upscaled 2x with an
   unsharp pass -> 2896x2172, which is ~2x the 740px display width and therefore
   still sharp on a retina screen. It then gets a feathered alpha ramp on all four
   sides (180 left/right, 170 top, 230 bottom at 2x — the bottom is flat desk
   white, so it can dissolve over a longer distance). That ramp is why there is no
   square edge: the image fades into the section background instead of ending on a
   boundary. Do not add a border, radius or shadow — either would draw the
   rectangle back on. */
.nh .wrap{max-width:1320px}
.nh-orb{position:relative;width:100%;max-width:640px;margin:0 auto;
  aspect-ratio:1448/1086;container-type:inline-size}
.nh-visual{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}

/* ---- the six capability cards, redrawn as live text ---- */
/* The labels inside the artwork were pixels from a 1448px-wide screenshot shown
   at ~640px, so they were soft at any pixel density. These re-draw them as real
   text and real SVG, which is the only way the type can be genuinely crisp.
   2 Sep 2026: the labels were ALSO STILL IN THE ARTWORK, so the same six words
   existed twice - the raster pair hidden under the live pair. On the user's
   instruction ("delete the earlier one") the six card graphics were inpainted
   out of the WebP by tools/hero_strip_labels.py, which is re-runnable and
   prints the boxes it clears. The file is served as hero-visual-V2.webp: /logos/
   carries cache-control max-age=2592000, so re-uploading the same filename left
   every visitor who had already loaded the labelled copy seeing BOTH sets for a
   month. Bump the version suffix whenever this artwork changes.
   These cards are the only labels now.
   Each card is CENTRED on the box the artwork drew and carries that box as
   min-width/min-height, so it lands exactly where the drawn card was. The type
   is 9.3px/1.45cqw, which is the size the artwork set it at: at 11px the three
   longest labels pushed their card wider than the drawn box.
   Colours are sampled off the artwork itself, not chosen, so the cards read
   exactly as drawn. Sizes are given twice: a px value for browsers without
   container queries, then the cqw equivalent, so the cards track the image as it
   scales instead of bursting out of it. */
.nh-c{position:absolute;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-sizing:border-box;
  gap:4px;gap:.62cqw;
  padding:7px 9px;padding:1.1cqw 1.4cqw;
  background:#fff;border-radius:13px;border-radius:2cqw;
  box-shadow:0 7px 20px -7px rgba(0,23,61,.22),0 1px 3px rgba(0,23,61,.07);
  font-size:9.3px;font-size:1.45cqw;
  font-weight:700;line-height:1.24;letter-spacing:-.004em;color:#101130;
  text-align:center;white-space:nowrap}
.nh-c svg{width:29px;height:29px;width:4.6cqw;height:4.6cqw;display:block;flex:none}  /* the design's icons fill ~39% of the card width, not the ~29% a 22px mark gives */
/* These are now the ONLY labels on the ring — the artwork no longer carries its
   own (see the note above). Do not add a rule that hides them at any width: at
   560px this used to fall back to the baked-in labels, and with those gone the
   same rule would leave six empty white cards. */

/* ---- stat bar ---- */
.nh-stats{margin-top:34px;background:#fff;border:1px solid var(--line-2);
  border-radius:20px;box-shadow:0 14px 40px -18px rgba(0,23,61,.18);
  display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:4}
.nh-stats>div{display:flex;align-items:center;gap:15px;padding:24px 26px;
  border-right:1px solid var(--line-2)}
.nh-stats>div:last-child{border-right:0}
.nh-stats .ic{width:46px;height:46px;border-radius:50%;flex:none;display:grid;
  place-items:center}
.nh-stats b{display:block;font-size:clamp(21px,2vw,27px);font-weight:800;
  letter-spacing:-.028em;color:var(--navy);line-height:1.1}
.nh-stats span{display:block;font-size:13px;color:var(--text-2);margin-top:2px}
.nh-btm{height:44px}

@media(max-width:1000px){
  .nhx{grid-template-columns:1fr;gap:34px}
  .orb{max-width:460px}
  .nh-stats{grid-template-columns:repeat(2,1fr)}
  .nh-stats>div:nth-child(2){border-right:0}
  .nh-stats>div:nth-child(1),.nh-stats>div:nth-child(2){border-bottom:1px solid var(--line-2)}
}
@media(max-width:620px){
  .nh{padding:26px 0 0}
  .oc{min-width:0;padding:8px 10px}
  .oc b{font-size:10.5px}
  .nh-stats{grid-template-columns:1fr}
  .nh-stats>div{border-right:0;border-bottom:1px solid var(--line-2)}
  .nh-stats>div:last-child{border-bottom:0}
}

/* ---- 9 Sep 2026, client: put the /coaches/ 1:1-coaching hero on the
   homepage as it is, in place of the .co2 banner, with both CTAs going to
   /coaches/. The .co2 rules above are now dead but left in place rather
   than cut out of the donor's stylesheet with a second exact-match edit.
   Adapted from coaches-page/build.py: h1 -> h2 (the homepage already has
   one h1), and .btn-primary/.btn-ghost -> the homepage's own .btn-p/.b2. ---- */
.cbanner{position:relative;overflow:hidden;padding:66px 0 74px;
  background:radial-gradient(1100px 620px at 88% 0%,#3B2E86 0%,transparent 58%),
             radial-gradient(900px 560px at 62% 108%,#123C8C 0%,transparent 60%),
             linear-gradient(118deg,#0A1F52 0%,#0D2A63 46%,#1B2B7A 100%)}
.cbanner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(900px 520px at 78% 8%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(900px 520px at 78% 8%,#000 0%,transparent 78%)}
.cbanner .wrap{position:relative;z-index:1}
.cbx{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.cb-kick{display:flex;align-items:center;gap:12px;color:#C9B8F5;font-size:12px;
  font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.cb-kick i{width:34px;height:3px;border-radius:2px;background:#8AC4FF;flex:none}
.cbanner h2{color:#fff;font-size:clamp(2rem,3.9vw,3.2rem);line-height:1.09;
  letter-spacing:-.03em;margin:20px 0 0;max-width:20ch}
/* client, 9 Sep 2026: "make 1:1 coaching our blue, the Book-a-Call colour".
   The CTA's own #006BD6 is a FILL behind white text and measures 2.65:1 as text
   on this hero ground (#0B2358-#102A64) - under even the 3:1 large-text floor.
   #1F8FFF is the nearest legible step of the same brand ramp: 4.18:1 on the
   lightest part of the gradient, 4.61:1 on the darkest. Do not darken it back
   toward the button colour without re-measuring against the gradient. */
.cbanner h2 em{font-style:italic;color:#1F8FFF}
.cb-lede{color:#B9C9E8;font-size:16.5px;line-height:1.65;max-width:52ch;margin-top:20px}
.cb-chips{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin-top:26px;max-width:560px}
.cb-chips li{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:11px 14px;
  font-size:14px;color:#DCE9FA;min-width:0}
.cb-chips li svg{color:#06C170;flex:none}
.cb-chips li b{font-weight:800;color:#fff;white-space:nowrap}
.cb-chips li span{color:#B9C9E8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}

/* the 2x2 of real coaches */
.cbv{min-width:0}
.cbv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cbv-card{background:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:18px;min-width:0;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.cbv-av{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:#FAFAFA;color:#006BD6;
  font-weight:800;font-size:16px}
.cbv-av img{width:100%;height:100%;object-fit:cover;display:block}
.cbv-card b{display:block;color:#141414;font-size:15px;letter-spacing:-.01em;margin-top:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbv-role{display:block;color:#595959;font-size:12.5px;margin-top:4px;height:32px;
  line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
/* the pill carries the EMPLOYER now, not the domain. It was set as an
   uppercase 10.5px micro-label with .08em tracking, which suits "FINANCE" but
   turns "Boston Consulting Group" into an unreadable strip - so sentence case,
   no tracking, and it truncates instead of wrapping the card taller. */
.cbv-dom{display:flex;width:100%;align-items:center;gap:9px;margin-top:12px;
  background:#FAFAFA;border:1px solid #EBEBEB;
  border-radius:10px;padding:7px 10px;font-size:11.5px;font-weight:700;
  letter-spacing:normal;color:#141414;max-width:100%;min-width:0}
.cbv-dom span{overflow:visible;text-overflow:clip;white-space:normal;min-width:0;
  line-height:1.25}
.cbv-dom img{width:26px;height:26px;object-fit:contain;flex:none;
  background:#fff;border-radius:6px;padding:2px}


@media(min-width:981px) and (max-width:1120px){
  .cbv-card{padding:15px}
  .cbv-dom{font-size:10.5px;padding:6px 9px;gap:7px}
  .cbv-dom img{width:22px;height:22px}}
@media(max-width:980px){.cbx{grid-template-columns:1fr;gap:40px}}
@media(max-width:560px){.cb-chips{grid-template-columns:1fr}
  .cbv-grid{grid-template-columns:1fr}}
/* The secondary button's white-on-navy treatment lived in `.co2 .acts .b2`,
   which the banner swap orphaned - there is NO bare `.b2` rule on this page, so
   "Explore Coaches" fell back to .btn's near-black and vanished into the navy.
   Same declarations, rescoped to the new banner. Measured after: #fff on the
   gradient, and a visible 1px border. */
.cbanner .cb-ctas .b2{background:transparent;color:#fff;border-color:rgba(255,255,255,.36)}
.cbanner .cb-ctas .b2:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* 9 Sep 2026 - client: bi-logo-boxes.
   The institution crests sat bare on white while the accreditation strip
   directly below them was already in bordered cards, so the top half of the
   section read as unfinished. This gives the crests the SAME treatment the
   /about/ wall uses (.iwall there): white fill, a 1px --line-2 border, --r-md
   radius and a fixed-height box, so crests of very different aspect ratios
   still line up on a shared baseline. Both tokens resolve identically on the
   two pages (--line-2 #F0F0F0, --r-md 12px), so the walls match without any
   value being copied across.
   The markup is untouched: this wall is already <span><img></span>, the same
   shape .iwall styles on /about/.
   The .mq edge fades are switched off. They existed to soften a *scrolling*
   marquee's ends; the wall has been static since 31 Aug, and over boxes they
   would lay 44-80px of white across the first and last box of each row. There
   is exactly one .mq element on this page. */
.mq::before,.mq::after{content:none}
.mq-static .lgs{gap:10px}
.mq-static .lgs span{background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-md);height:104px;width:100%;padding:14px;
  display:flex;align-items:center;justify-content:center}
.mq-static .lgs img,.mq-static .lgs img.lg-sq,.mq-static .lgs img.lg-md,
.mq-static .lgs img.lg-wd{max-height:70px;max-width:100%;width:auto;height:auto;
  object-fit:contain}
@media(max-width:1080px){.mq-static .lgs span{height:96px;padding:12px}
  .mq-static .lgs img,.mq-static .lgs img.lg-sq,.mq-static .lgs img.lg-md,
  .mq-static .lgs img.lg-wd{max-height:60px}}
@media(max-width:760px){.mq-static .lgs{gap:10px}
  .mq-static .lgs span{height:82px;padding:10px}
  .mq-static .lgs img,.mq-static .lgs img.lg-sq,.mq-static .lgs img.lg-md,
  .mq-static .lgs img.lg-wd{max-height:48px}}
/* 9 Sep 2026 - the three service group icons. The shared icon helper writes
   an inline width:100%;height:100% on the svg, which beats the stylesheet
   rule .svc-ic svg{width:19px} and made the glyph fill the 40px tile edge to
   edge. Every other icon on the site sits at about half its tile (the hero
   stat band is 23px in a 46px circle). !important is the only way to beat an
   inline style without re-emitting the markup. */
.svc-ic svg{width:19px!important;height:19px!important}
/* 9 Sep 2026 - a marker before every row of the services map. Columns 1 and 2
   get a dot in their own header-tile accent; column 3 gets the real product
   mark, because those rows ARE the products. .svc is already a flex row with a
   10px gap and align-items:center, so the marker needs no layout of its own. */
.svc-b{flex:none;align-self:flex-start;margin-top:8px;width:7px;height:7px;border-radius:50%;background:currentColor}
.svc-b--1{color:#006BD6}
.svc-b--2{color:#7F56D9}
.svc-lg{flex:none;align-self:flex-start;width:26px;height:26px;object-fit:contain;border-radius:7px}
/* 9 Sep 2026 - the ecosystem panels. Every panel except InfyLearn listed its
   capabilities as bare one-word chips with no explanation, and three padded the
   stat row with words dressed as numbers (Live, Scored, Global, Open). They now
   use the named-card pattern the client approved on the InfyLearn panel. No
   per-item logo exists outside InfyLearn, so the icon slot is a dot. Coursera
   keeps its chips: those are course DOMAINS and a gloss on each would have to be
   invented. */
.hub-prods--n .hp i.d{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--blue-txt)}
/* the rows are flex with align-items:center, so on a two-line row the marker
   drifted down beside the DESCRIPTION. Both markers align to the top now and
   sit against the title, which is what they label. */

/* ===== 11 Sep 2026 review =================================================== */
/* 1. The labels were the real complaint, and the cause was SIZE, not weight:
      the base rule had dropped to 1.45cqw, which renders at 9.3px against a
      29px icon. Up to 1.94cqw (12.4px) and 800 weight, with the card widened to
      match so "Assessments" still sits on one line. These rules live at the end
      of the cascade, which is what lets them beat the base .nh-c block. */
.nh-c{font-size:12.4px;font-size:1.94cqw;font-weight:700}
.nh-c b{font-weight:800;letter-spacing:0}
/* 1c. 15 Sep 2026: the connector node under each card is removed at the
       request of the client - the cards now sit on the arc with no dot. The
       rule below also neutralises any dot a donor snapshot still carries. */
.nh-c::after{content:none!important;display:none!important}
/* 2. Career Readiness System stage icons, to match the "What we deliver"
      group icons. The glyphs carry an inline style="width:100%;height:100%",
      which beat .crs .ic svg{width:24px} and let a 1.9px stroke scale to a
      62px box - so they read as heavy filled shapes, not line icons. Sized to
      the same glyph:tile ratio .svc-ic uses (19/40), i.e. 29px in 62px, with
      the stroke left native so the weight matches too. */
.crs .ic svg{width:29px!important;height:29px!important}
/* 3. The four engagement phases now carry an icon instead of a bare 1-2-3-4.
      18px in the 34px chip - a touch above the 0.475 ratio the bigger tiles
      use, because line detail falls apart below that at this size. The order
      still reaches screen readers through the .sr "Phase N" label. */
.en .n svg{width:18px;height:18px}
/* 5. The service lists. 18 Sep 2026, client: the coloured dot bullets are
      gone and every row carries a FILLED icon in a tinted tile -
      "use filled icons not just outline icons, i need filled". 26px with a
      7px radius, the box the InfyLearn product marks in column three
      already use (.svc-lg), so the three columns stay aligned. Column one
      is the navbar Career Outcomes group; column two is Consulting and
      career coaching. Both approved off the Netlify comparison. */
.svc-ic2{flex:none;align-self:flex-start;width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center}
.svc-ic2 svg{width:15px;height:15px}
.svc-ic svg{width:20px!important;height:20px!important}
/* 4. The booking modal now carries the full enquiry form, so it needs a select
      control, a required marker, and a little more width for the two-up rows. */
/* scoped above the phone breakpoint: the bottom-sheet rule sits EARLIER in
   this sheet, so an unscoped .bkm width here would override it. */
@media(min-width:561px){.bkm{width:min(600px,calc(100vw - 28px))}}
.bkm__g i{font-style:normal;color:#B42318;margin-left:3px}
.bkm__g select{width:100%;margin-top:6px;font:inherit;font-size:14.5px;color:var(--navy);
  background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;
  transition:border-color .16s,box-shadow .16s}
.bkm__g select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,117,235,.16)}

/* ===== 16 Sep 2026 review ===== */
/* 5. The four hero stat marks were flat fills while every other icon family on
      the page is a gradient, so they read as a different system. Same four
      hues, same 135deg ramp. !important because the fills are inline styles. */
.nh-stats>div:nth-child(1) .ic{background:linear-gradient(135deg,#006BD6,#57ABFF)!important}
.nh-stats>div:nth-child(2) .ic{background:linear-gradient(135deg,#7F56D9,#B692F6)!important}
.nh-stats>div:nth-child(3) .ic{background:linear-gradient(135deg,#0FA5A0,#09C4BF)!important}
.nh-stats>div:nth-child(4) .ic{background:linear-gradient(135deg,#A8351B,#F46C40)!important}
/* 6. The green belongs to MEASURE, not to a position. 18 Sep 2026 the client
      swapped the last two stages, so Measure is 4th and Place is 5th; the
      teal-to-mint moves with Measure and Place takes back the navy-to-blue
      that stage 4 used to carry. */
.crs .st:nth-child(4) .ic{background:linear-gradient(135deg,#0FA5A0,#5FE3A8)}
.crs .st:nth-child(5) .ic{background:linear-gradient(135deg,#002B6B,#0075EB)}
/* 7. The case-study bars were --line grey. Each card now charts in its own
      family, with the highlighted bar at full strength so the read is clear. */
.cc.c1 .pf-b i{background:var(--blue-2)}
.cc.c1 .pf-b.on i{background:var(--blue)}
.cc.c2 .pf-b i{background:var(--a2-3)}
.cc.c2 .pf-b.on i{background:var(--a2)}
/* 8. The closing section sat navy directly under the navy report card and
      above the navy footer - three dark blocks running together. It goes light,
      which also gives the primary CTA somewhere to be blue. */
.fin{background:linear-gradient(180deg,var(--paper-2) 0%,#FFFFFF 100%);
  border-top:1px solid var(--line-2)}
.fin::before{background-image:linear-gradient(rgba(0,23,61,.5) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,23,61,.5) 1px,transparent 1px);opacity:.045}
.fin h2{color:var(--navy)}
.fin p{color:var(--text-2)}
.fin .w{background:var(--blue);color:#fff}
.fin .w:hover{background:var(--blue-txt)}
.fin .o{background:#fff;color:var(--navy);border-color:var(--line)}
.fin .o:hover{border-color:var(--blue);color:var(--blue-txt)}
/* 9. The ecosystem card grew and shrank as you moved between tabs. All six
      panels now share ONE grid cell, so the pane is always as tall as the
      tallest panel at that width - a fixed px min-height cannot do this,
      because the tallest panel rewraps as the viewport narrows. Hidden panels
      use visibility, which keeps them out of the accessibility tree. */
.hub-pane{display:grid}
.hub-p{display:block!important;grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none}
.hub-p.on{visibility:visible;opacity:1;pointer-events:auto}
/* 1b. The artwork still carries a blanked placeholder plate, its soft shadow and
       two painted connector dots under every card. The card was wide enough but
       ~2% too SHORT, so the plate showed above and below and the dots peeked out
       - the "box behind the box" and the inconsistent circles. Sizing every card
       to cover the full plate (+-185px x, +-190px y at the 2896px master) hides
       all three and makes the six identical, which is the consistency asked for.
       !important because the per-card minimums are inline styles. */
.nh-c{min-width:15.6%!important;min-height:18.6%!important}
/* 2. The connector dots the client flagged are painted into
      hero-visual-v2.webp, not drawn in SVG - CSS cannot reach them. Needs an
      edit to the artwork; reported rather than faked. */
/* 3. "Five doors": the five card CTAs were 141-191px wide because each sized to
      its own label. Equal width, as asked. */
.doors-b .door .go{width:100%;justify-content:center}
/* 4. The comparison table's ticks were green; green and amber are semantic on
      this site, so the primary blue instead. */
#why .yes{color:var(--blue)}
/* 5. The coach cards sat on a 50%-black shadow against a dark navy band, which
      read as a hard edge beside the card rather than a lift. */
#coaching .cbv-card{box-shadow:0 10px 26px -16px rgba(0,0,0,.34)}
/* 6. "Own your placement number": everything after the two buttons goes - the
      divider, the three numbered steps and the 48-hour line - and the section
      loses the deep bottom padding that left a band of empty blue above the
      footer. */
#book .steps,#book .fine{display:none}
#book{padding:86px 0 64px}

/* ---- Book a call modal ---------------------------------------------------- */
/* 11 Sep 2026: "when I click Book a Call, the modal should open then and there,
   it should not redirect below". The dialog is opened by script; with JS off the
   anchors keep their native jump to #book, so the path never breaks. */
/* margin:auto is what centres a <dialog>; the page's global reset sets
   margin:0 on everything, which pinned it to the top-left corner. */
.bkm{border:0;padding:0;background:transparent;margin:auto;
  width:min(540px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:visible}
.bkm::backdrop{background:rgba(0,19,51,.62);backdrop-filter:blur(4px)}
.bkm__c{background:#fff;border-radius:20px;overflow:hidden;position:relative;
  box-shadow:0 34px 80px -30px rgba(0,19,51,.6)}
.bkm__x{position:absolute;top:12px;right:12px;z-index:2;margin:0}
.bkm__x button{appearance:none;border:0;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  transition:background .16s}
.bkm__x button:hover{background:rgba(255,255,255,.34)}
.bkm__hd{background:linear-gradient(150deg,#001B3F,#00173D);color:#fff;padding:26px 26px 22px}
.bkm__k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8AC4FF;margin:0 0 8px}
/* the page's own h3 rule is navy, which is invisible on this navy header */
.bkm__hd h3{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.22;
  margin:0;color:#fff}
.bkm__s{font-size:14px;line-height:1.6;color:rgba(255,255,255,.78);margin:10px 0 0}
.bkm__bd{padding:22px 26px 26px;max-height:calc(100vh - 300px);overflow:auto}
.bkm__g{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bkm__g label{display:block;font-size:12.5px;font-weight:700;color:var(--navy)}
.bkm__g label.full{grid-column:1/-1}
.bkm__g label span{font-weight:500;color:var(--text-2)}
.bkm__g input,.bkm__g textarea{width:100%;margin-top:6px;font:inherit;font-size:14.5px;
  color:var(--navy);background:#fff;border:1px solid var(--line-2);border-radius:10px;
  padding:11px 13px;transition:border-color .16s,box-shadow .16s}
.bkm__g input:focus,.bkm__g textarea:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,117,235,.16)}
.bkm__g textarea{resize:vertical;min-height:74px}
/* .btn-primary on this page is scoped to anchors, so a <button> fell back to
   the browser's grey default. Styled explicitly here. */
.bkm__go{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:18px;border:0;cursor:pointer;font:inherit;font-size:15px;
  font-weight:800;color:#fff;background:var(--blue);border-radius:12px;padding:14px 22px;
  transition:background .16s,transform .16s}
.bkm__go:hover{background:var(--blue-txt);transform:translateY(-1px)}
.bkm__go[disabled]{opacity:.65;cursor:default;transform:none}
.bkm__fine{margin:12px 0 0;font-size:12px;color:var(--text-2);text-align:center}
.bkm__done{display:none;text-align:center;padding:14px 4px 6px}
.bkm__done h4{font-size:19px;font-weight:800;color:var(--navy);margin:14px 0 6px}
.bkm__done p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin:0}
.bkm__tick{display:grid;place-items:center;width:52px;height:52px;margin:0 auto;
  border-radius:50%;background:var(--blue);color:#fff;font-size:26px;font-weight:800}
.bkm__err{margin:12px 0 0;font-size:13px;color:#B42318;text-align:center;display:none}
/* Phone: a bottom sheet rather than a floating card - easier to reach, and it
   never fights the on-screen keyboard. */
@media(max-width:560px){
  .bkm{width:100vw;max-width:100vw;max-height:94vh;margin:0 auto auto;
    position:fixed;left:0;right:0;bottom:0;top:auto}
  .bkm__c{border-radius:20px 20px 0 0}
  .bkm__hd{padding:22px 18px 18px}
  .bkm__hd h3{font-size:19px}
  .bkm__bd{padding:18px 18px 22px;max-height:calc(94vh - 200px)}
  .bkm__g{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:no-preference){
  .bkm[open]{animation:bkmIn .22s cubic-bezier(.2,.8,.3,1)}
  @keyframes bkmIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1}}
}

/* one kicker format site-wide - see tools/nav_links.py */
.eyebrow,.kicker,.eye{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px}
.eyebrow::before,.kicker::before,.eye::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px;flex:none}
.kicker::after{display:none}


.bkc{position:fixed;inset:0;z-index:1300;display:none;align-items:flex-start;
  justify-content:center;padding:34px 20px;overflow:auto;background:rgba(4,10,20,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bkc.on{display:flex}
.bkc__d{position:relative;width:min(560px,100%);background:#fff;border-radius:20px;
  box-shadow:0 40px 90px -24px rgba(0,23,61,.5);padding:30px 30px 28px;margin:auto}
.bkc__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid #E3E9F2;background:#fff;color:#334;font-size:19px;line-height:1;
  cursor:pointer;display:grid;place-items:center}
.bkc__x:hover{background:#F4F7FB}
.bkc__k{font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:#006BD6}
.bkc__d h2{margin:8px 0 0;font-size:23px;font-weight:800;letter-spacing:-.025em;
  color:#00173D;line-height:1.2}
.bkc__d>p.bkc__s{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#5A6577}
.bkc-f{margin-top:20px;display:grid;gap:13px}
.bkc-2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.bkc-l{display:block}
.bkc-l>span{display:block;font-size:12.5px;font-weight:800;color:#00173D;
  margin-bottom:5px}
.bkc-l>span i{font-style:normal;color:#006BD6;margin-left:3px}
.bkc-l input,.bkc-l select,.bkc-l textarea{width:100%;font:inherit;font-size:14.5px;
  color:#141414;background:#F8FAFC;border:1px solid #E3E9F2;border-radius:10px;
  padding:11px 13px;box-sizing:border-box}
.bkc-l input:focus,.bkc-l select:focus,.bkc-l textarea:focus{outline:none;
  border-color:#0075EB;background:#fff;box-shadow:0 0 0 3px rgba(0,117,235,.14)}
.bkc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bkc-go{margin-top:4px;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;width:100%;font-size:15px;font-weight:700;color:#fff;background:#0075EB;
  border:0;border-radius:10px;padding:14px 22px;cursor:pointer}
.bkc-go:hover{filter:brightness(.94)}
.bkc-n{margin-top:2px;font-size:12px;color:#77839A}
@media(max-width:560px){.bkc-2{grid-template-columns:1fr}.bkc__d{padding:26px 20px 24px}}