:root{
  --blue:#0075EB;           /* fills + large display only - 3.44:1, illegal for text */
  --blue-txt:#006BD6;       /* brand 7, 5.2:1 - links, labels, buttons with white text */
  --accent2:#7F56D9;        /* decorative rotation, 5.0:1 as text */
  --accent1:#F46C40;        /* decorative, large/non-text only */
  --accent1-txt:#A8351B;    /* accent 1 step 8, 6.6:1 */
  --success-txt:#036A3E;    /* success 9, 6.7:1 - real success signals only */
 --blue-hov:#0075EB; --blue-act:#0073E5;
  --blue-bg:#F5FAFF; --blue-bg-2:#E6F3FF; --blue-line:#99CCFF; --blue-soft:#C2E0FF;
  --success:#05C170; --success-bg:#E6F9F1; --warning:#FCA106; --warning-bg:#FFFAE6;
  --ink:#141414; --text:#262626; --text-2:#595959; --text-3:#595959; --muted:#BFBFBF;
  --line:#D9D9D9; --line-2:#EBEBEB; --paper:#FFFFFF; --paper-2:#FAFAFA;
  --canvas:#07111F; --canvas-2:#0F1B3D;
  --r-sm:8px; --r-md:10px; --r-lg:16px;
  --sh-sm:0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.06);
  --sh-md:0 4px 16px rgba(0,0,0,.08);
  --sh-lg:0 24px 64px -16px rgba(7,17,31,.18);
  --max:1200px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* type scale - 23 distinct sizes and 6 weights had accumulated across the page */
  --t-xs:12px; --t-sm:13.5px; --t-md:15px; --t-lg:17px; --t-xl:20px;
  --t-2xl:24px; --t-3xl:30px; --t-4xl:38px; --t-5xl:48px;
}
/* Inter was declared everywhere but never actually LOADED: these pages skip
   wp_head, so the theme's enqueued @font-face never reached them and every page
   silently fell back to the visitor's system font. The woff2 the theme already
   self-hosts is one variable file covering 100-900. */
@font-face{font-family:'Inter';src:url('/wp-content/themes/bi-child/assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);font-size:16px;line-height:1.65;color:var(--text-2);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--blue-soft)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3{color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.num{font-variant-numeric:tabular-nums}
.kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-txt)}
.kicker .idx{color:var(--text-3);font-weight:600;letter-spacing:.08em}
.kicker::after{content:"";flex:1;height:1px;background:var(--line-2);transform:translateY(-4px)}
.sec-h{font-size:clamp(1.8rem,3.1vw,2.6rem);max-width:800px}
.sec-h em{font-style:normal;color:var(--blue-txt)}
.sec-sub{font-size:16.5px;color:var(--text-2);max-width:640px;margin-top:14px}
.sec{padding:88px 0;position:relative}
@media(max-width:760px){.sec{padding:60px 0}}
.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}
.btn:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 3px var(--blue-soft)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hov);transform:translateY(-1px)}  /* CTA shadow removed */
.btn-primary:active{background:var(--blue-act)}
.btn-ghost{background:var(--paper);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue-txt);color:var(--blue-txt);background:var(--blue-bg)}
.btn-dark-ghost{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.22)}
.btn-dark-ghost:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;color:var(--blue-txt)}
.link:hover{color:var(--blue-act)}

/* 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}
@media(max-width:920px){.nav-links{display:none}}

/* breadcrumbs + hero */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--text-3);margin-bottom:26px}
.crumbs a{color:var(--blue-txt);font-weight:600}
.crumbs a:hover{text-decoration:underline}
.hero-p{position:relative;padding:72px 0 80px;border-bottom:1px solid var(--line-2);overflow:clip;
  background:radial-gradient(820px 420px at 82% -12%,rgba(20,138,255,.09),transparent 62%),linear-gradient(180deg,#FBFDFF,#fff 75%)}
.hero-p::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(20,138,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,138,255,.045) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(680px 420px at 78% 4%,#000 25%,transparent 72%);
  -webkit-mask-image:radial-gradient(680px 420px at 78% 4%,#000 25%,transparent 72%)}
.hero-p .wrap{position:relative}
.role-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-txt);background:var(--blue-bg);border:1px solid var(--blue-soft);
  border-radius:26px;padding:6px 14px;margin-bottom:20px}
.hero-p h1{font-size:clamp(2.1rem,3.9vw,3.3rem);letter-spacing:-.03em;max-width:19em;margin-bottom:18px;text-wrap:balance}
.hero-p h1 em{font-style:normal;color:var(--blue-txt)}
.hero-p .lede{font-size:17.5px;line-height:1.6;max-width:37rem;margin-bottom:30px}
.hero-p .lede strong{color:var(--text);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.hero-chips{display:flex;flex-wrap:wrap;gap:9px}
.hchip{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--line);background:#fff;
  border-radius:26px;padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.hchip b{color:var(--ink);font-weight:800;font-size:14px}

/* generic cards & grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.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}

/* module list (what's included) */
.mods{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:42px}
@media(max-width:760px){.mods{grid-template-columns:1fr}}
.mod{display:flex;gap:14px;border:1px solid var(--line-2);border-left:3px solid var(--blue);
  border-radius:var(--r-md);background:#fff;padding:18px 20px}
.mod b{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
.mod p{font-size:13.5px;color:var(--text-2);line-height:1.55}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:860px){.stats{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm)}
.stat b{display:block;font-size:clamp(2.2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-bottom:8px}
.stat b .unit{font-size:.55em;color:var(--text-3)}
.stat h3{font-size:15.5px;margin-bottom:5px}
.stat p{font-size:13.5px;color:var(--text-3);line-height:1.55}

/* vertical toggle (mgmt/eng) */
.vtog{display:inline-flex;border:1px solid var(--line);border-radius:26px;background:#fff;padding:4px;margin:34px 0 0}
.vtog label{padding:9px 22px;border-radius:22px;font-size:13.5px;font-weight:700;color:var(--text-2);cursor:pointer;transition:all .18s}
#v-m,#v-e{position:absolute;opacity:0;pointer-events:none}
#v-m:checked~.vtog-wrap .vtog label[for=v-m],#v-e:checked~.vtog-wrap .vtog label[for=v-e]{background:var(--blue);color:#fff}
#v-m:checked~.vtog-wrap .v-eng,#v-e:checked~.vtog-wrap .v-mgmt{display:none}

/* FAQ */
.faq{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  cursor:pointer;padding:22px 26px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--text-3);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 26px 24px;font-size:14.5px;line-height:1.65;color:var(--text-2);max-width:60rem}

/* method mini */
.mrail{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
@media(max-width:960px){.mrail{grid-template-columns:1fr;gap:12px}}
.mstep{border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--paper-2);padding:18px}
.mstep.hot{border-color:var(--blue-txt);background:var(--blue-bg)}
.mstep i{display:block;font-style:normal;font-size:11px;font-weight:800;color:var(--blue-txt);margin-bottom:8px}
.mstep b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.mstep p{font-size:12px;color:var(--text-3);line-height:1.5}

/* quote */
.quote{border-top:2px solid var(--ink);padding-top:24px;margin-top:48px;max-width:720px}
.quote .mark{font-size:40px;font-weight:800;line-height:.5;color:var(--blue-txt);display:block;margin-bottom:16px}
.quote blockquote{font-size:18px;line-height:1.55;color:var(--text);font-weight:500;margin-bottom:18px}
.quote figcaption b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.quote figcaption span{font-size:12.5px;color:var(--text-3)}

/* story */
.story-num{font-size:clamp(3rem,7vw,5rem);font-weight:800;letter-spacing:-.04em;color:var(--blue-txt);line-height:1}
.story-sec{margin-top:52px}
.story-sec h2{font-size:1.5rem;margin-bottom:14px}
.story-sec p,.story-sec li{font-size:15.5px;line-height:1.7;color:var(--text-2);max-width:46rem}
.story-sec ul{padding-left:22px;margin-top:10px}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 0}
@media(max-width:760px){.results{grid-template-columns:1fr}}
.res{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:var(--paper-2)}
.res b{display:block;font-size:1.9rem;font-weight:800;color:var(--blue-txt);letter-spacing:-.02em}
.res span{font-size:12.5px;color:var(--text-3)}

/* related rail */
.rel{background:var(--paper-2);border-top:1px solid var(--line-2)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:860px){.rel-grid{grid-template-columns:1fr}}

/* CTA band + footer */
.final{padding:88px 0}
.final-in{position:relative;border-radius:20px;overflow:clip;background:var(--canvas);padding:72px 56px}
@media(max-width:760px){.final-in{padding:52px 28px}}
.final-in::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 380px at 82% 15%,rgba(20,138,255,.22),transparent 65%)}
.final-in::after{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px}
.final h2{position:relative;color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.03em;max-width:16em;margin-bottom:14px}
.final p{position:relative;color:rgba(255,255,255,.7);font-size:16px;max-width:36em;margin-bottom:30px}
.final .ctas{position:relative;display:flex;flex-wrap:wrap;gap:12px}
.final .fine{position:relative;margin-top:20px;font-size:12.5px;color:rgba(255,255,255,.5)}
@media(max-width:1020px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* reveals - fail-open (see homepage) */
.rv{transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.off{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none}

/* ---- v10 chrome: utility bar + mega menu + wordmark ---- */
.utilbar{background:var(--canvas);color:rgba(255,255,255,.72)}
.utilbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;font-size:12px;font-weight:600}
.utilbar a{color:rgba(255,255,255,.72);margin-right:18px;transition:color .2s}
.utilbar a:hover{color:#fff}
.u-tag{letter-spacing:.06em;font-size:11px}
@media(max-width:760px){.u-tag{display:none}}
.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)}
@media(max-width:920px){.mega{display:none}}
.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)}
@media(max-width:920px){.mnav{display:block}.nav-cta .login{display:none}}
/* 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}
/* v10 hero look */
.hl{background:linear-gradient(180deg,transparent 62%,var(--blue-bg-2) 62%)}
.hv-badge i{background:var(--canvas-2)}
.pr-card{position:absolute;bottom:8%;left:-4%;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-md);padding:14px 18px;min-width:200px}
.pr-card .pr-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.pr-card .pr-top em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pr-card .pr-top b{font-size:19px;font-weight:800;color:var(--blue-txt)}
.pr-card .pr-bar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-bottom:7px}
.pr-card .pr-bar i{display:block;height:100%;width:90%;border-radius:99px;background:var(--blue)}
.pr-card span{font-size:11.5px;font-weight:600;color:var(--text-2)}
.chip-pill{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;border-radius:26px;
  padding:7px 15px;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(20,138,255,.35)}
/* courses catalog - decluttered */
.crow-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.crow-head h2{font-size:1.35rem;letter-spacing:-.02em}
.crow-head .cnt{font-size:12.5px;font-weight:700;color:var(--text-3)}
.course-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:0}
@media(max-width:1020px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.course-grid{grid-template-columns:1fr}}
a.ccard{padding:16px;gap:7px}
.ccard .ctype{font-size:10px;color:var(--text-3);letter-spacing:.09em}
.ccard .ctype .pillx{background:var(--paper-2);border:1px solid var(--line-2);color:var(--text-3)}
.ccard h3{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.ccard .cmeta{font-size:11.5px}
.ccard .cmeta .star{color:var(--warning);font-weight:700}
.cmore{margin-top:14px}
.cmore summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--line);
  border-radius:26px;padding:9px 18px;font-size:13px;font-weight:700;color:var(--text-2);background:#fff}
.cmore summary:hover{border-color:var(--blue-txt);color:var(--blue-txt);background:var(--blue-bg)}
.cmore summary::-webkit-details-marker{display:none}
.cmore[open] summary{margin-bottom:14px}
/* course page: preview + coach */
.preview-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(140deg,var(--canvas),var(--canvas-2));
  min-height:250px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.preview-card .play{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.preview-card:hover .play{transform:scale(1.08);background:var(--blue)}
.preview-card .play::after{content:"";display:block;width:0;height:0;border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.preview-card .pv-cap{position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
.coach-card{display:grid;grid-template-columns:88px 1fr;gap:22px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sh-sm);padding:28px;align-items:start}
@media(max-width:640px){.coach-card{grid-template-columns:1fr}}
.coach-card .cavat{width:88px;height:88px;font-size:30px}
.coach-card h3{font-size:18px;margin-bottom:4px}
.coach-card .crole{font-size:12.5px;font-weight:700;color:var(--blue-txt);margin-bottom:10px}
.coach-card ul{list-style:none;display:grid;gap:8px;margin-top:10px}
.coach-card li{display:flex;gap:9px;font-size:13.5px;color:var(--text-2)}
.coach-card li svg{flex:none;margin-top:3px;color:var(--success)}

/* ---- v10 homepage sections ---- */
.hero-v10{position:relative;padding:76px 0 84px;border-bottom:1px solid var(--line-2);overflow:clip;
  background:radial-gradient(820px 420px at 80% -10%,rgba(20,138,255,.10),transparent 62%),linear-gradient(180deg,#FBFDFF,#fff 75%)}
.hero-v10::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(20,138,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,138,255,.045) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(700px 460px at 74% 6%,#000 28%,transparent 74%);
  -webkit-mask-image:radial-gradient(700px 460px at 74% 6%,#000 28%,transparent 74%)}
.hv-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
@media(max-width:1020px){.hv-grid{grid-template-columns:1fr}}
.hv-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:26px;
  padding:8px 16px 8px 8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin-bottom:26px}
.hv-badge i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--canvas);color:#fff;font-style:normal;font-size:13px}
.hv-badge em{font-style:normal;color:var(--blue-txt)}
.hero-v10 h1{font-size:clamp(2.4rem,4.4vw,3.75rem);letter-spacing:-.033em;margin-bottom:22px;text-wrap:balance}
.hero-v10 h1 .accent{color:var(--blue-txt)}
.hero-v10 .hv-sub{font-size:18px;line-height:1.6;max-width:33rem;margin-bottom:32px}
.hero-v10 .hv-sub strong{color:var(--text);font-weight:600}
.hv-visual{position:relative}
.hv-visual img{width:100%;height:auto;border-radius:var(--r-lg)}
.hv-chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-md);padding:10px 14px}
.hv-chip b{display:block;font-size:15px;font-weight:800;color:var(--ink);line-height:1.1}
.hv-chip em{font-style:normal;font-size:11px;color:var(--text-3)}
.hv-chip.a{top:-16px;right:-8px}
.hv-chip.b{bottom:-16px;left:-8px}
@media(max-width:560px){.hv-chip{display:none}}
.accred-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:0}
@media(max-width:960px){.accred-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.accred-row{grid-template-columns:repeat(2,1fr)}}
.acc-card{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:16px 14px;text-align:center}
.acc-card img{height:26px;width:auto;margin:0 auto 8px}
.acc-card b{display:block;font-size:12.5px;color:var(--ink)}
.acc-card span{font-size:11px;color:var(--text-3);line-height:1.4;display:block}
.eco6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
@media(max-width:960px){.eco6{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.eco6{grid-template-columns:1fr}}
.svc-depth{margin-top:48px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.svc-depth details{border-bottom:1px solid var(--line-2)}
.svc-depth details:last-child{border-bottom:0}
.svc-depth summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:22px 26px;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.015em}
.svc-depth summary::-webkit-details-marker{display:none}
.svc-depth summary .cnt{font-size:12px;font-weight:700;color:var(--blue-txt);background:var(--blue-bg);border-radius:26px;padding:5px 13px}
.svc-depth .svc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 26px 24px}
@media(max-width:860px){.svc-depth .svc-grid{grid-template-columns:1fr}}
.svc-depth .svc-grid a{display:block;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper-2);
  padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--text)}
.svc-depth .svc-grid a:hover{border-color:var(--blue-txt);background:var(--blue-bg);color:var(--blue-txt)}
.svc-depth .svc-grid a em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--text-3);margin-top:2px}
.lead-panel{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-md);margin-top:48px}
@media(max-width:900px){.lead-panel{grid-template-columns:1fr}}

/* ---- 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)}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media(max-width:960px){.course-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.course-grid{grid-template-columns:1fr}}
a.ccard{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:18px;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .2s,border-color .2s}
a.ccard:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--blue-line)}
.ccard .ctype{display:flex;gap:6px;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-txt)}
.ccard .ctype .pillx{background:var(--blue-bg);border-radius:26px;padding:3px 10px}
.ccard .ctype .pillg{background:var(--success-bg);color:var(--success);border-radius:26px;padding:3px 10px}
.ccard h3{font-size:15px;letter-spacing:-.01em;line-height:1.35}
.ccard .cmeta{margin-top:auto;font-size:12px;color:var(--text-3);display:flex;gap:10px;align-items:center}
.cmodes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:860px){.cmodes{grid-template-columns:1fr}}
.cmode{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:28px;box-shadow:var(--sh-sm);position:relative}
.cmode.hot{border-color:var(--blue-line);background:linear-gradient(180deg,var(--blue-bg),#fff 60%)}
.cmode .tagm{position:absolute;top:-11px;left:24px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue);color:#fff;border-radius:26px;padding:4px 12px}
.cmode h3{font-size:19px;margin-bottom:10px}
.cmode ul{list-style:none;display:grid;gap:9px;margin:14px 0 20px}
.cmode li{display:flex;gap:9px;font-size:13.5px;color:var(--text-2)}
.cmode li svg{flex:none;margin-top:3px;color:var(--success)}
.coach-band{display:grid;grid-template-columns:64px 1fr;gap:18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);padding:22px;margin-top:44px;align-items:center}
.coach-band .cavat{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--canvas));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px}

/* ---------- deep course pages: hero grid + sticky enroll card, skills, 1-on-1 band ---------- */
.chero{display:grid;grid-template-columns:1fr 350px;gap:56px;align-items:start}
@media(max-width:960px){.chero{grid-template-columns:1fr}}
.cmeta-row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:13.5px;color:var(--text-2)}
.cmeta-row b{color:var(--ink);font-weight:800}
.cmeta-row .star{color:var(--warning)}
.enroll-card{position:sticky;top:90px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-md);padding:26px;display:flex;flex-direction:column;gap:0}
@media(max-width:960px){.enroll-card{position:static}}
.enroll-card .ec-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.enroll-card ul{list-style:none;display:grid;gap:10px;margin:2px 0 20px}
.enroll-card li{display:flex;gap:9px;font-size:13.5px;color:var(--text-2)}
.enroll-card li svg{flex:none;margin-top:3px;color:var(--success)}
.enroll-card .btn{width:100%;justify-content:center}
.enroll-card .ec-alt{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--text-3);text-align:center}
.enroll-card .ec-alt a{color:var(--blue-txt);font-weight:700}
.skill-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.skill-tags span{border:1px solid var(--line);background:var(--paper-2);border-radius:26px;padding:7px 15px;
  font-size:13px;font-weight:600;color:var(--text-2)}
.syl{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.syl details{border-bottom:1px solid var(--line-2)}
.syl details:last-child{border-bottom:0}
.syl summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 26px;font-weight:700;font-size:15.5px}
.syl summary::-webkit-details-marker{display:none}
.syl summary .sno{flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue-bg);border:1px solid var(--blue-line);
  color:var(--blue-txt);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.syl summary .sdur{margin-left:auto;font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap}
.syl summary::after{content:"+";font-size:20px;font-weight:400;color:var(--text-3);transition:transform .2s}
.syl details[open] summary::after{transform:rotate(45deg)}
.syl .sbody{padding:0 26px 24px 76px;font-size:14px;line-height:1.65;color:var(--text-2)}
.syl .sbody .build{display:block;margin-top:10px;font-size:13.5px;color:var(--ink)}
@media(max-width:640px){.syl .sbody{padding-left:26px}}
.oo-band{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;margin-top:54px;
  border-radius:var(--r-lg);padding:34px 38px;color:#fff;
  background:linear-gradient(120deg,var(--canvas),var(--canvas-2))}
@media(max-width:760px){.oo-band{grid-template-columns:1fr}}
.oo-band h3{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:8px;color:#fff}
.oo-band p{font-size:14px;color:rgba(255,255,255,.78);max-width:56ch}
.oo-band .btn{white-space:nowrap}
.cert-card{display:grid;grid-template-columns:1fr 200px;gap:30px;align-items:center;margin-top:44px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-sm);padding:32px 36px}
@media(max-width:700px){.cert-card{grid-template-columns:1fr}}
.cert-visual{border:1px solid var(--line);border-radius:10px;background:var(--paper-2);padding:18px;text-align:center}
.cert-visual i{font-style:normal;font-size:26px;color:var(--blue-txt)}
.cert-visual b{display:block;font-size:12px;margin-top:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* ---------- program pages: tracks, data tables, illustration bands ---------- */
.trk{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px;margin-top:44px}
.trk>div{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:22px;box-shadow:var(--sh-sm);
  transition:box-shadow .25s,border-color .25s}
.trk>div:hover{box-shadow:var(--sh-md);border-color:var(--blue-line)}
.trk h3{font-size:14px;letter-spacing:.02em;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--line-2)}
.trk h3 i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-txt);margin-bottom:6px}
.trk ul{list-style:none;display:grid;gap:9px}
.trk li{display:flex;gap:9px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.trk li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--blue-line);margin-top:8px}

.dtab{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-sm);overflow-x:auto;overscroll-behavior-x:contain}
table.dt{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px}
table.dt.wide{min-width:900px}
table.dt th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);background:var(--paper-2);padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
table.dt td{padding:15px 18px;border-bottom:1px solid var(--line-2);color:var(--text-2);line-height:1.55;vertical-align:top}
table.dt tr:last-child td{border-bottom:0}
table.dt tbody tr:hover{background:var(--blue-bg)}
table.dt td b{color:var(--ink);font-weight:700}
table.dt td:first-child{color:var(--text)}
.dnote{font-size:13px;color:var(--text-3);margin-top:16px;max-width:78ch;line-height:1.6}
.dscroll{font-size:11.5px;color:var(--text-3);margin-top:10px;letter-spacing:.04em}
@media(min-width:900px){.dscroll{display:none}}

.ill{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 20px;
  background:linear-gradient(180deg,var(--blue-bg),#fff 70%);box-shadow:var(--sh-sm);overflow-x:auto}
.ill .ill-t{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-txt);margin-bottom:18px}
.ill svg{width:100%;height:auto;max-width:100%}
.hero-ill{margin-top:40px}
.ill-lg{display:flex;gap:20px;margin-top:14px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
.ill-lg span{display:inline-flex;align-items:center;gap:7px}
.ill-lg i{width:11px;height:11px;border-radius:3px;display:inline-block}

.flag{display:flex;gap:14px;align-items:flex-start;margin-top:40px;padding:20px 22px;border-radius:var(--r-lg);
  border:1px solid var(--warning);background:var(--warning-bg)}
.flag b{display:block;color:var(--ink);font-size:14px;margin-bottom:5px}
.flag p{font-size:13.5px;color:var(--text-2);line-height:1.6}
.flag .fi{flex:none;width:22px;height:22px;border-radius:50%;background:var(--warning);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}

.stagerail{margin-top:48px;display:grid;gap:18px}
.stg{display:grid;grid-template-columns:210px 1fr;gap:26px;padding:26px 0;border-top:1px solid var(--line-2)}
.stg:first-child{border-top:0;padding-top:0}
.stg .sh i{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-txt);margin-bottom:7px}
.stg .sh b{display:block;font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.stg .sh span{display:block;font-size:12.5px;color:var(--text-3);margin-top:6px}
.stg .sl{display:grid;gap:12px}
.stg .sl a{display:block;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:18px 20px;
  box-shadow:var(--sh-sm);transition:box-shadow .22s,transform .22s,border-color .22s}
.stg .sl a:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--blue-line)}
.stg .sl b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:5px}
.stg .sl p{font-size:13.5px;color:var(--text-2);line-height:1.55}
@media(max-width:800px){.stg{grid-template-columns:1fr;gap:16px;padding:22px 0}}

/* ---------- accent system: each journey stage gets one of the brand ramps.
   Every component below reads var(--ac*), so a single wrapper class re-skins
   a whole page without touching component CSS. All values come from the
   designer's Ant Design brand kit - nothing invented. ---------- */
.ac-blue{--ac:#0075EB;--ac-hov:#3D9EFF;--ac-bg:#F5FAFF;--ac-bg2:#E6F3FF;--ac-line:#99CCFF;--ac-ink:#0073E5}
.ac-green{--ac:#05C170;--ac-hov:#38CD8D;--ac-bg:#F7FDFA;--ac-bg2:#E6F9F1;--ac-line:#8CE2BD;--ac-ink:#05B066}
.ac-amber{--ac:#FCA106;--ac-hov:#FFB92E;--ac-bg:#FFFDF5;--ac-bg2:#FFFAE6;--ac-line:#FFD080;--ac-ink:#D68100}
.ac-coral{--ac:#D13845;--ac-hov:#DE5F66;--ac-bg:#FFF5F5;--ac-bg2:#FFF1F0;--ac-line:#F7BBBA;--ac-ink:#AB2635}
[class*=ac-] .kicker,[class*=ac-] .role-tag,[class*=ac-] .sec-h em,[class*=ac-] .link{color:var(--ac)}
[class*=ac-] .role-tag{background:var(--ac-bg2);border-color:var(--ac-line)}
[class*=ac-] .hero-p{background:radial-gradient(820px 420px at 82% -12%,color-mix(in srgb,var(--ac) 11%,transparent),transparent 62%),linear-gradient(180deg,var(--ac-bg),#fff 75%)}
[class*=ac-] .card:hover,[class*=ac-] .trk>div:hover{border-color:var(--ac-line)}
[class*=ac-] .trk li::before{background:var(--ac-line)}
[class*=ac-] table.dt tbody tr:hover{background:var(--ac-bg)}
[class*=ac-] .hero-p h1 em{color:var(--ac)}

/* ---------- 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)}
.lwall .lw-h{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);text-align:center;margin-bottom:20px}
.lwall ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px 46px}
.lwall li{display:flex;align-items:center}
.lwall img{height:52px;width:auto;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.lwall li:hover img{filter:none;opacity:1}
.lwall .lw-f{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);text-align:center;
  font-size:13px;color:var(--text-2)}
.lwall .lw-f b{color:var(--ink)}
@media(max-width:640px){.lwall ul{gap:22px 28px}.lwall img{height:40px}}

/* ---------- annotated product-UI shot: the UI is the evidence ---------- */
.shot{margin-top:44px;display:grid;grid-template-columns:1.45fr 1fr;gap:34px;align-items:start}
@media(max-width:900px){.shot{grid-template-columns:1fr;gap:24px}}
.shot .sfig{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);overflow:hidden;box-shadow:var(--sh-lg)}
.shot .sfig img{width:100%;height:auto;display:block}
.shot .sfig figcaption{font-size:11.5px;color:var(--text-3);padding:10px 14px;border-top:1px solid var(--line-2);
  background:#fff}
.shot .pin{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--ac,#0075EB);color:#fff;
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ac,#0075EB) 26%,transparent),0 2px 8px rgba(0,0,0,.28)}
.shot ol{list-style:none;display:grid;gap:16px;counter-reset:pin}
.shot ol li{display:grid;grid-template-columns:26px 1fr;gap:13px;counter-increment:pin}
.shot ol li::before{content:counter(pin);width:26px;height:26px;border-radius:50%;
  background:var(--ac-bg2,#E6F3FF);color:var(--ac-ink,#0073E5);font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.shot ol b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.shot ol p{font-size:13.5px;color:var(--text-2);line-height:1.55}
.shot .s-lede{font-size:15px;color:var(--text-2);margin-bottom:22px;line-height:1.6}

/* ---------- product tour: cross-fading real UI frames (no filming needed) ---------- */
.tour{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--sh-lg)}
.tour .tstage{position:relative;height:clamp(300px,40vw,470px);
  background:linear-gradient(180deg,var(--ac-bg,#F5FAFF),#fff)}
.tour figure{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  padding:20px 20px 46px;opacity:0}
.tour figure:first-of-type{opacity:1}
.tour figure img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-sm);box-shadow:0 8px 28px -10px rgba(7,17,31,.3);background:#fff}
.tour figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 18px;background:#fff;
  border-top:1px solid var(--line-2);font-size:13px;color:var(--text-2);text-align:center}
.tour figcaption b{color:var(--ink)}
.tour .tdots{display:flex;gap:7px;justify-content:center;padding:12px;background:#fff;border-top:1px solid var(--line-2)}
.tour .tdots i{width:22px;height:3px;border-radius:2px;background:var(--line);display:block}
@media (prefers-reduced-motion:no-preference){
  .tour[data-frames="3"] figure{animation:tfade 18s infinite}
  .tour[data-frames="3"] figure:nth-of-type(2){animation-delay:6s}
  .tour[data-frames="3"] figure:nth-of-type(3){animation-delay:12s}
  .tour[data-frames="3"] .tdots i{animation:tdot 18s infinite}
  .tour[data-frames="3"] .tdots i:nth-child(2){animation-delay:6s}
  .tour[data-frames="3"] .tdots i:nth-child(3){animation-delay:12s}
  @keyframes tfade{0%{opacity:0}2%{opacity:1}31%{opacity:1}34%{opacity:0}100%{opacity:0}}
  @keyframes tdot{0%{background:var(--line)}2%{background:var(--ac,#0075EB)}31%{background:var(--ac,#0075EB)}34%{background:var(--line)}100%{background:var(--line)}}
}

/* ---------- horizontal scroll rails ---------- */
.railwrap{margin-top:44px;position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,272px);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:4px 4px 18px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rcard{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:20px;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:9px;
  transition:box-shadow .25s,transform .25s,border-color .25s}
.rcard:hover{box-shadow:var(--sh-md);transform:translateY(-3px);border-color:var(--ac-line,#99CCFF)}
.rcard .rk{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-ink,#0073E5);
  background:var(--ac-bg2,#E6F3FF);border-radius:26px;padding:4px 11px;align-self:flex-start}
.rcard h3{font-size:15.5px;line-height:1.3}
.rcard .rrole{font-size:13px;color:var(--text-2);line-height:1.5}
.rcard .rrec{margin-top:auto;padding-top:11px;border-top:1px solid var(--line-2);font-size:12px;color:var(--text-3)}
.rcard .rrec b{color:var(--text-2);font-weight:600}
.railhint{font-size:11.5px;color:var(--text-3);letter-spacing:.04em;margin-top:2px}

/* ---------- at-a-glance summary: understand the page in five seconds ---------- */
.glance{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;box-shadow:var(--sh-sm)}
.glance>div{padding:20px 22px;border-left:1px solid var(--line-2)}
.glance>div:first-child{border-left:0}
.glance .gi{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.glance .gi svg{color:var(--ac,#0075EB);flex:none}
.glance b{display:block;font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.glance span{display:block;font-size:12.5px;color:var(--text-2);margin-top:4px}
@media(max-width:860px){.glance{grid-template-columns:1fr 1fr}.glance>div:nth-child(3){border-left:0}
  .glance>div:nth-child(n+3){border-top:1px solid var(--line-2)}}
@media(max-width:480px){.glance{grid-template-columns:1fr}.glance>div{border-left:0;border-top:1px solid var(--line-2)}
  .glance>div:first-child{border-top:0}}

/* ---------- 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}
.jump a{flex:none;font-size:13px;font-weight:600;color:var(--text-2);padding:14px 13px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.jump a:hover{color:var(--ac,#0075EB);border-bottom-color:var(--ac-line,#99CCFF)}
.sec{scroll-margin-top:120px}

/* ---------- icon chips: colour + shape, so a grid isn't a wall of text ---------- */
.ico{width:38px;height:38px;border-radius:11px;background:var(--ac-bg2,#E6F3FF);color:var(--ac-ink,#0073E5);
  display:flex;align-items:center;justify-content:center;flex:none;margin-bottom:14px}
.ico svg{width:20px;height:20px}
.trk h3 .ico{width:30px;height:30px;border-radius:9px;margin:0 0 10px}
.trk h3 .ico svg{width:16px;height:16px}
/* ---------- 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}
.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}
.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}}


@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}

.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}


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

/* ---- banner ------------------------------------------------------------------
   Rebuilt 9 Sep 2026 to the design the client sent: navy running to indigo rather
   than to black, a ruled kicker, an italic accent in the headline, four ticked
   chips, and a 2x2 of real coaches with a demo strip beneath them. The previous
   background ran navy -> #071322 (near-black), which is what the client meant by
   "the color of the background is a bit different". */
.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 h1{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 h1 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}
.cbanner .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.cbanner .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* the 2x2 of real coaches, then the demo strip */
.cbv{min-width:0}
.cbv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* 9 Sep 2026, client: "we can make it white or some other colour so that the
   logos can be visible clearly and the company logo can be a bit bigger". The
   card was a 5.5%-white wash on navy with the employer mark at 17px inside a
   purple pill - the marks read as grey smudges at that size and ground. Card is
   now solid white, so a full-colour employer logo sits on the ground it was
   drawn for, and the mark is 26px. */
.cbv-card{background:#fff;border:1px solid var(--line-2);
  border-radius:16px;padding:18px;min-width:0;box-shadow:var(--sh-sm)}
.cbv-av{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:var(--paper-2);color:var(--blue-txt);
  font-weight:800;font-size:16px}
.cbv-av img{width:100%;height:100%;object-fit:cover;display:block}
.cbv-card b{display:block;color:var(--ink);font-size:15px;letter-spacing:-.01em;margin-top:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbv-role{display:block;color:var(--text-2);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:inline-flex;align-items:center;gap:9px;margin-top:12px;
  background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:20px;padding:5px 12px 5px 6px;font-size:11.5px;font-weight:700;
  letter-spacing:normal;color:var(--ink);max-width:100%;min-width:0}
.cbv-dom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* 26px, up from 17px, and on white rather than the tinted pill - several marks
   (Axis Bank, Accenture) are dark-on-transparent and vanished on the tint. */
.cbv-dom img{width:26px;height:26px;object-fit:contain;flex:none;
  background:#fff;border-radius:6px;padding:2px}

/* ---- the numbers band, in the homepage's .oband format on the client's request.
   Those class names are not in this donor's stylesheet, so the rule set is
   restated here with literal token values rather than the --navy-2/--r-xl/
   --on-navy variables the homepage has. ---- */
.obwrap{padding:34px 0 10px}
.oband{background:linear-gradient(135deg,#00173D 0%,#002B6B 70%,#00173D 130%);
  border-radius:24px;padding:44px 42px;position:relative;overflow:hidden}
.oband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(100deg,transparent,#000 70%);
  -webkit-mask-image:linear-gradient(100deg,transparent,#000 70%)}
.ob{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ob>div{border-left:2px solid rgba(255,255,255,.16);padding-left:24px}
.ob>div:first-child{border-left:0;padding-left:0}
.ob b{display:block;font-size:clamp(30px,3.2vw,44px);font-weight:800;letter-spacing:-.03em;
  color:#fff;line-height:1}
.ob span{display:block;font-size:13px;color:#B7CEEA;margin-top:9px;line-height:1.45}

/* ---- domain browser: tiles, not pills ---- */
.dtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  margin-top:30px}
.dtile{font:inherit;text-align:left;cursor:pointer;display:grid;
  grid-template-columns:38px 1fr;gap:12px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  transition:border-color .15s,box-shadow .15s,background .15s,transform .15s}
.dtile:hover{border-color:var(--blue-line);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.dt-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--blue-bg-2);color:var(--blue-txt);flex:none}
.dt-tx{min-width:0}
.dt-tx b{display:block;font-size:14px;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-tx i{display:block;font-style:normal;font-size:12px;color:var(--text-3);margin-top:2px}
.dtile.on{background:var(--blue);border-color:var(--blue);box-shadow:var(--sh-md)}
.dtile.on .dt-ic{background:rgba(255,255,255,.2);color:#fff}
.dtile.on .dt-tx b{color:#fff}
.dtile.on .dt-tx i{color:rgba(255,255,255,.78)}
.dtile:focus-visible{outline:2px solid var(--blue-txt);outline-offset:2px}

/* ---- filter bar ---- */
.cfilter{position:sticky;top:66px;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);padding:14px 0}
.cf-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cf-search{flex:1 1 280px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:26px;padding:11px 17px;background:#fff;color:var(--text-2);max-width:380px}
.cf-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg-2)}
.cf-search input{border:0;outline:0;font:inherit;font-size:14px;color:var(--text);
  background:transparent;width:100%}
.cf-sel select{font:inherit;font-size:13.5px;font-weight:600;color:var(--text-2);
  background:#fff;border:1px solid var(--line);border-radius:26px;padding:11px 15px;
  cursor:pointer}
.cf-sel select:focus-visible{outline:2px solid var(--blue-txt);outline-offset:2px}
.cf-count{font-size:13.5px;color:var(--text-2);font-weight:700;margin-left:auto}

/* ---- cards: identical fields, four spaced blocks ---- */
/* minmax(0,1fr), NOT 1fr. `1fr` is minmax(AUTO,1fr): the column cannot shrink
   below its content's min-content width, so one long unbreakable line (an
   education string set nowrap) pushed its column to 560px while its neighbours
   sat at 471px. That is why the grid overflowed the page by 302px and the third
   card was cut off, AND why rows kept coming out different heights - unequal
   column widths wrap the text differently. Every child that holds text also needs
   min-width:0 for the same reason, or the flex item refuses to shrink. */
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin-top:30px}
/* min-height, not auto: within a grid row the cards stretch to match, but ACROSS
   rows they varied 303-323px because education wraps to two lines for some
   coaches and eight have no previous employer. The client asked for equal cards,
   so the floor is set just above the tallest measured card and every one lands on
   the same height. Re-measure if a field is added. */
.ccard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:22px;
  transition:box-shadow .18s,transform .18s,border-color .18s}
.ccard:hover{box-shadow:var(--sh-md);border-color:var(--blue-soft);transform:translateY(-2px)}
.ccard[hidden]{display:none}
/* 9 Sep 2026, client: "there is a lot of space between their name and their
   designation". The cause was not a margin - it was that h3, .crole, .cc-co and
   .cc-meta each RESERVED a fixed height so every card came out identical, so a
   one-line name still occupied two lines and left a hole above the role. All
   those reservations are gone below; cards in a row still match because a CSS
   grid stretches them, and the clamps keep the variation between rows small.
   The avatar is also centred against the text now instead of top-aligned, which
   was adding its own optical gap. */
.cc-id{display:grid;grid-template-columns:84px minmax(0,1fr);gap:15px;
  align-items:center}
/* 84px, not 56: the cards carry real photographs now, and at 56 a face is a
   thumbnail. The monogram fallback uses the same box so the grid does not move. */
.cavat{width:84px;height:84px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:26px;
  background:linear-gradient(140deg,#002B6B,#0075EB)}
.cavat-img{background:var(--paper-2);overflow:hidden}
.cavat-img img{width:100%;height:100%;object-fit:cover;display:block}
.cc-who{min-width:0}
/* The name and the role are the only blocks that can wrap, and a single two-line
   role was stretching its whole grid row - which is why row 1 kept coming out
   taller than row 2. Both now RESERVE two lines whether or not they use them, so
   the card height is the same at every column width, not just at 1440. */
/* The name block is a fixed two lines. The LinkedIn icon used to sit INLINE in
   it for a reason worth keeping: as a flex sibling it wrapped onto its own line
   behind a long name and made those cards 9px taller than the rest. It is its
   own row now, below the employer, so that cannot recur. */
/* CLASS COLLISION, and the real cause of the gap the client kept reporting
   between the name and the designation. The donor stylesheet ships its own
   .ccard (a course card) with TWO of its own `.ccard h3` rules, one of them
   `min-height:2.7em` - about 44px. Ours wins on font-size because it comes
   later, but it never reset min-height, so every name sat in a 44px box and a
   one-line name left ~20px of air under it. Reset explicitly, and do not
   assume a later rule "replaces" the earlier one; it only overrides the
   properties it names.
   No line clamp either: the client asked that a long name wrap to two lines
   in full rather than be cut, so display goes back to block and the donor's
   -webkit-box clamp is switched off. */
/* 11 Sep 2026: the reserved heights are back. They were removed when the card
   carried employer, years and education, which balanced it; the new roster sheet
   has only a name and a designation, and designations run from "CHRO" to "Head of
   B2B Account Management & Cross Border Product", so cards measured 227 and 232px
   in the same grid. Name and role each RESERVE two lines and clamp to two, which
   is what keeps every card identical at every width. */
.ccard h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;height:43px;
  font-size:17px;line-height:1.28;letter-spacing:-.018em;
  font-weight:700;color:var(--ink);margin:0}
/* the mark carries its own container, so no background box here - that box was
   what made it read as an approximation of the logo rather than the logo. */
.cli{align-items:center;justify-content:center;width:17px;height:17px;
  color:#0A66C2;flex:none;transition:color .15s}
.cli:hover{color:#004182}
.cli:focus-visible{outline:2px solid var(--blue-txt);outline-offset:2px}
.crole{font-size:13px;font-weight:500;color:var(--text-2);margin-top:2px;line-height:1.42;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:37px}
/* employer row. The initial tile is a placeholder for the employer logo: the
   sheet's 32 employers have no logo set, and Wikipedia returns office photos for
   most of them, so a real logo file per employer has to be supplied. Drop files
   into logos/ keyed by company and this becomes an <img> with no layout change. */
/* client: "just after the designation, maybe the company logo can come". It
   now sits directly under it - 13px instead of a 31px rule-plus-margin gap -
   and the row is vertically centred rather than top-aligned. */
/* ---- CTA colour ------------------------------------------------------
   16 Sep 2026, client: "For the CTA color, you can just check that it should be
   our primary color only." The donor stylesheet's --blue is the RETIRED #0075EB,
   so every .btn-primary on this page was rendering in it. Set to the brand
   primary #0075EB with #006BD6 on hover. Scoped inside <main>, so the navbar's
   own Book a Call button - which is site-wide furniture, not this page's CTA -
   is untouched. */
main .btn-primary{background:#0075EB;border-color:#0075EB;color:#fff}
main .btn-primary:hover{background:#006BD6;border-color:#006BD6}

/* ---- the employer row -------------------------------------------------
   One bordered box per card ("some border should come, like a box, and then the
   logo should appear inside that", client 10 Sep), with the domain pill opposite.
   FIXED height, not min-height: a two-line company name inside the box was the
   last thing that could make one card taller than the card beside it. */
.cc-co{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:13px;
  border-top:1px solid var(--line-2);min-width:0;height:46px;box-sizing:content-box}
.cc-lgbox{display:flex;align-items:center;gap:9px;height:44px;padding:0 12px;
  min-width:0;max-width:calc(100% - 118px);
  background:#fff;border:1px solid var(--line-2);border-radius:11px;
  box-shadow:0 1px 2px rgba(15,27,61,.05)}
/* a wordmark gets the whole box: it already spells the company, so a name beside
   it reads as a placeholder. Pixels, not percentages - a percentage max-height
   inside a flex box does not resolve against anything useful. */
.cc-lgbox-w{padding:0 14px}
.cc-lgbox img{max-height:24px;max-width:132px;width:auto;height:auto;
  object-fit:contain;display:block;flex:none}
.cc-lgbox-w img{max-width:150px}
/* an icon mark does not name anybody, so the name sits beside it */
.cc-lgtx{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.22;
  letter-spacing:-.008em;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard:hover .cc-lgbox{border-color:var(--blue-soft)}
/* The years chip was a second blue element on a row that already had a blue
   monogram tile - the pill is neutral, so the row reads employer-first. */
.cpill{border:1px solid var(--line-2);background:var(--paper-2);border-radius:20px;
  padding:3px 9px;font-size:11.5px;font-weight:700;color:var(--text-2);white-space:nowrap;
  margin-left:auto;flex:none}
/* the domain is on EVERY card now, not just the ones with no employer */
.cc-co-dom{gap:8px}
.cpill-dom{background:var(--blue-bg-2);border-color:var(--blue-soft);
  color:var(--blue-txt);font-size:11.5px;padding:5px 11px;letter-spacing:.005em}
.cc-co-dom .cpill-dom{margin-left:0;font-size:12px;padding:5px 12px}
/* the card's only action: the LinkedIn mark on its own, as asked */
.cc-li{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-top:14px;border-radius:10px;
  border:1px solid var(--line-2);background:#fff;text-decoration:none;
  transition:border-color .16s,background .16s,transform .16s}
.cc-li svg{width:18px;height:18px;color:#0A66C2}
.cc-li:hover{border-color:#8AC4FF;background:#F5FAFF;transform:translateY(-1px)}
.cc-li:focus-visible{outline:2px solid #006BD6;outline-offset:2px}
.cc-meta{list-style:none;display:grid;gap:7px;margin-top:13px}
.cc-meta li{display:flex;gap:8px;font-size:12.5px;color:var(--text-2);line-height:1.5;
  min-width:0}
.cc-meta li svg{flex:none;margin-top:2px;color:var(--blue-hov)}
.cc-meta li b{color:var(--text);font-weight:700}
/* The client asked for long text to BREAK onto another line rather than be cut.
   So each line wraps, but to a fixed number of lines that is reserved whether or
   not it is used: one for the previous employer (company names are short), two for
   education (some are 60 characters). The block reserves all three lines, so the
   eight coaches with no previous employer still produce an identical card. */
/* no min-height any more - see the note on .cc-id. */
.cc-meta li span{min-width:0;overflow-wrap:anywhere}
/* education wraps in full too - it was clamped to two lines and the longest
   ones ended mid-word. */
.cc-meta li span{display:block;overflow:visible}
.cc-act{margin-top:auto;padding-top:16px}
.cc-act .btn{padding:11px 20px;font-size:13.5px}
.cempty{margin-top:34px;padding:40px;border:1px dashed var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);text-align:center;font-size:15px;color:var(--text-2)}
.cnote{border:1px solid var(--warning);background:var(--warning-bg);border-radius:var(--r-lg);
  padding:18px 22px;margin-top:26px;font-size:14.5px;color:var(--text);line-height:1.6}

/* ---- 1:1 band -----------------------------------------------------------
   16 Sep 2026, client: "I did not like the background image as well. The
   background color is different from the other homepage background colors. Add
   the background color in that format only, and this component we can make
   better."
   So the navy gradient and the dotted overlay are gone. The band is now the
   page's own light surface - white card on the section tint, the same treatment
   as the stat band and the coach cards - with ink text instead of white. The
   dot pattern used a mask-image, which is also the thing the client rejected on
   the logo wall, so it is not coming back. The points become a two-column
   checklist, which is what makes the left half read as a list of what you get
   rather than a paragraph. */
.oneone{position:relative;border-radius:var(--r-xl);margin-top:16px;
  padding:34px 36px;background:#fff;border:1px solid var(--line-2);
  box-shadow:var(--sh-md);color:var(--text)}
.oo-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 430px;
  gap:34px;align-items:center}
.oneone h2{color:var(--ink);font-size:clamp(1.45rem,2.3vw,1.95rem);
  letter-spacing:-.028em;line-height:1.16}
.oneone h2 em{font-style:normal;color:var(--blue-txt)}
.oneone p{color:var(--text-2);font-size:15.5px;line-height:1.62;margin-top:12px;
  max-width:54ch}
.oo-pts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;margin-top:20px}
.oo-pts li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;
  color:var(--text);font-weight:600;line-height:1.35;min-width:0}
.oo-pts svg{color:#0075EB;flex:none;margin-top:2px}

/* ---- the booking form, inside the 1:1 band ---- */
.oo-form{background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:24px;min-width:0}
.oo-form h3{font-size:17px;color:var(--ink);letter-spacing:-.015em}
.oo-form>p{font-size:13.5px;color:var(--text-2);margin-top:6px;line-height:1.55}
.bkf{margin-top:18px;display:grid;gap:13px}
.bkf-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.bkf label{display:grid;gap:6px;min-width:0}
.bkf label span{font-size:12.5px;font-weight:700;color:var(--text-2)}
.bkf label span em{font-style:normal;font-weight:600;color:var(--text-3)}
/* Every select is full width now. "Consulting & Strategy" and the longest coach
   name are both wider than a half-row select inside this card, and a native
   select cannot ellipsis its own selected value - it simply clips it, which is
   the break the client saw. A real chevron replaces the OS one so the value has
   the full width minus the arrow, and text-overflow covers the long options. */
.bkf input,.bkf select{font:inherit;font-size:14.5px;color:var(--text);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;
  min-width:0;text-overflow:ellipsis}
.bkf select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D5B77' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  background-size:17px 17px}
.bkf input:focus,.bkf select:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-bg-2)}
.bkf input[aria-invalid=true]{border-color:var(--error,#D13845)}
.bkf-go{margin-top:4px;justify-content:center}
.bkf-note{font-size:13px;font-weight:700;margin-top:2px;min-height:1em}
.bkf-note.ok{color:var(--success-txt)}
.bkf-note.err{color:#AB2635}
/* .oneone p sets the band's light-blue body colour and beats a bare .bkf-fine on
   specificity, so inside the white form card the fine print was rendering pale
   blue on white. Scoped to .oo-form to win, and to keep the note colours too. */
.oo-form .bkf-fine{font-size:12px;color:var(--text-3);line-height:1.5;margin-top:0}
.oo-form .bkf-note{color:var(--text-2)}
.oo-form .bkf-note.ok{color:var(--success-txt)}
.oo-form .bkf-note.err{color:#AB2635}
@media(max-width:520px){.bkf-row{grid-template-columns:1fr}}

/* ---- logo wall ---- */
/* Each mark now sits in its own bordered box. Bare logos on white read as a loose
   scatter because the marks differ so much in ink weight and aspect (a 9:1 Bain
   wordmark next to a square ITC crest); a box of fixed size gives every one the
   same footprint and puts them on a real grid. */
.lgwall{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;margin-top:30px;align-items:stretch}
.lgwall li{height:78px;width:100%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;
  transition:border-color .18s,box-shadow .18s}
.lgwall li:hover{border-color:var(--blue-soft);box-shadow:var(--sh-sm)}
.lgwall img{max-width:88%;object-fit:contain;filter:grayscale(1);opacity:.72;
  transition:filter .18s,opacity .18s}
.lgwall li:hover img{filter:none;opacity:1}
.lgwall img.lg-sq{max-height:46px}
.lgwall img.lg-md{max-height:36px}
.lgwall img.lg-wd{max-height:24px}


/* ---- section tint, so consecutive white sections do not run together ---- */
.sec-tint{background:var(--paper-2)}
.wrap-narrow{max-width:880px}

/* ---- logo wall: full colour, on the client's instruction, and sitting
   directly under the hero rather than late in the page ---- */
.wall-k{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);text-align:center}
.lgwall img{filter:none;opacity:1}
.lgwall li:hover img{transform:scale(1.04)}
.lgwall img{transition:transform .18s}

/* ---- employer mark on the card ---- */
.cc-colg-img{background:#fff;padding:2px;overflow:hidden}
.cc-colg-img img{width:100%;height:100%;object-fit:contain;display:block}

/* ---- coach photo in the banner cluster ---- */
.cbv-av{overflow:hidden;background:var(--paper-2)}
.cbv-av img{width:100%;height:100%;object-fit:cover;display:block}
.cbv-ini{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.cbv-tx i{display:flex;align-items:center;gap:6px}
.cbv-co{width:26px;height:26px;object-fit:contain;flex:none}

/* ---- the four-stage rail that replaced the four loose boxes ---- */
.strail{list-style:none;counter-reset:none;margin-top:40px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.strail-i{position:relative;padding:0 22px 0 0}
.strail-i::before{content:"";position:absolute;left:19px;right:-19px;top:19px;height:2px;
  background:linear-gradient(90deg,var(--blue-soft),var(--blue-bg-2))}
.strail-i:last-child::before{display:none}
.strail-n{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--blue);
  color:#fff;font-weight:800;font-size:15px;box-shadow:0 0 0 5px var(--paper)}
.strail-i b{display:block;font-size:16px;color:var(--ink);margin-top:18px;
  letter-spacing:-.015em}
.strail-i p{font-size:14px;color:var(--text-2);line-height:1.6;margin-top:8px;
  padding-right:8px}

/* ---- FAQ, centred ---- */
.faq-head{text-align:center}
.faq-head .sec-h{margin:0 auto}
.faq-head .sec-sub{margin:12px auto 0}
.faq-c{margin-top:30px}
.faq-c summary{text-align:left}

@media(max-width:900px){.strail{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .strail-i:nth-child(2)::before{display:none}}
@media(max-width:620px){.strail{grid-template-columns:1fr;gap:22px}
  .strail-i::before{display:none}.strail-i{padding-right:0}
  .sb-in{grid-template-columns:1fr;gap:22px;padding:24px 0}}
@media(max-width:1080px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dtiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lgwall{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* This used to drop the employer mark to 14px at the tightest hero width. The
   client has since asked for the mark BIGGER, so the type gives way instead:
   the logo holds at 22px and a long employer name ellipses. */
@media(min-width:981px) and (max-width:1120px){
  .cbv-card{padding:15px}
  .cbv-dom{font-size:10.5px;padding:4px 9px 4px 5px;gap:6px}
  .cbv-dom img{width:22px;height:22px}}
@media(max-width:980px){.cbx{grid-template-columns:1fr;gap:40px}
  .oo-in{grid-template-columns:1fr}
  .ob{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .ob>div:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:560px){.cb-chips{grid-template-columns:1fr}
  .cbv-grid{grid-template-columns:1fr}
  .ob{grid-template-columns:1fr;gap:20px}
  .ob>div{border-left:0;padding-left:0}
  .oband{padding:28px 24px}}
@media(max-width:760px){.cgrid{grid-template-columns:minmax(0,1fr)}
  .dtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lgwall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .oneone{padding:30px 26px}}
@media(max-width:620px){.cfilter{top:58px}.cf-count{margin-left:0}
  .lgwall img.lg-sq{max-height:42px}.lgwall img.lg-md{max-height:34px}
  .lgwall img.lg-wd{max-height:24px}}

/* ---- /coaches/ hero, round 3 ----------------------------------------------
   9 Sep 2026. The client chose option 01 off the review page
   (coaches-hero-options/), with five changes, all of them applied here:
     * the caption paragraph under the employer logos is GONE, and every logo
       is now a tile carrying the company NAME with it
     * more of the top employers on show (nine, up from eight)
     * option 03's subheading, which the client preferred to 01's
     * the "Start with a single session" footnote is GONE
     * "Industry experts" set in the site's headline gradient
   The hero is /case-studies/'s, component for component, so this page opens
   the way the service pages do. Those components are NOT in this page's donor
   stylesheet, so they are ported here from the live /case-studies/ sheet -
   and with them the eleven tokens they lean on that this page never declared.
   Without those tokens .cs-hl h1 renders on a missing --navy and the panel
   loses its ground, and neither failure raises anything. They are declared on
   .cs-hero itself so they cannot leak into the rest of the page. */
.cs-hero{--navy:#00173D;--navy-2:#002B6B;--on-navy:#B7CEEA;--on-navy-2:#8FAACD;
  --blue-0:#F5FAFF;--blue-2:#BDDEFF;--blue-3:#8AC4FF;--a2:#7F56D9;
  --ok:#06C170;--ok-1:#E6F9F1;--r-xl:24px;
  position:relative;overflow:hidden;padding-bottom:64px;
  background:linear-gradient(180deg,#fff 0%,var(--blue-0) 62%,#fff 100%)}
.cs-hero::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;
  top:-540px;right:-260px;pointer-events:none;
  background:radial-gradient(circle,rgba(0,117,235,.14),transparent 66%)}
.cs-hx{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;
  align-items:center}
.cs-hero .cs-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;
  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:0 2px 10px -5px rgba(0,23,61,.16)}
.cs-hero .cs-badge i{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.cs-hl h1{font-size:clamp(30px,3.5vw,46px);font-weight:800;letter-spacing:-.032em;
  line-height:1.07;margin:14px 0 0;color:var(--navy)}
/* The site's headline gradient, on the client's instruction that "industry
   experts" carry it. The stops are the HOMEPAGE's RESOLVED hexes, not var()s:
   this page's --blue is #0075EB where the homepage's is #0075EB, so tokens here
   would have drawn a visibly different ramp from the one being pointed at. */
.cs-hl h1 .grad{background:linear-gradient(96deg,#006BD6 8%,#0075EB 46%,#7F56D9 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cs-hl .lede{margin-top:18px;max-width:47ch;font-size:16.5px;line-height:1.65;
  color:var(--text-2)}
.cs-hero .hero-ctas{margin-top:28px;margin-bottom:0}
/* ---- the navy employer panel ---- */
.csh-art{position:relative;padding:8px 0 10px}
.csh-panel{position:relative;border-radius:var(--r-xl);padding:26px 26px 28px;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 62%,#07204A 130%);
  box-shadow:0 34px 70px -26px rgba(0,23,61,.55);overflow:hidden}
.csh-panel::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  top:-280px;right:-170px;pointer-events:none;
  background:radial-gradient(circle,rgba(0,117,235,.5),transparent 64%)}
.csh-panel::after{content:"";position:absolute;inset:0;opacity:.075;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:52px 52px}
.csh-in{position:relative}
.csh-ph{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px}
.csh-ph b{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:9px}
.csh-ph b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(6,193,112,.22);flex:none}
/* ---- the hero constellation -------------------------------------------
   The nine-tile panel is replaced by the SAME rolling logo cluster that is now
   on /career-coaching/ (client, 16 Sep: "just the right-side icons of the
   company, as added in one-on-one coaching, are added on this page also"). The
   markup comes from career-hero-orbit/build.py; what follows is only the theme,
   because that hero is white and this one is navy:
   The theme matches the coaching page's because THIS hero is light too - only
   the panel card it replaces was navy - so the rings are ink-on-white and the
   chips keep a hairline edge. Copying the navy treatment made both invisible.
   Geometry is untouched: two rings, 10 + 18 chips, the gap is wider than the sum
   of the chip radii so no two chips can ever overlap. Scale is smaller here
   because the hero column is narrower than the coaching page's. */
.coh-art{position:relative;min-height:calc(812px * var(--sc) + 16px);
  --sc-w:.62;--sc-h:1;--sc:min(var(--sc-w),var(--sc-h))}
.coh-art .cwo-art{position:static;min-height:0}
.coh-art .cwo-stage{position:absolute;left:50%;top:50%;width:812px;height:812px;
  transform:translate(-50%,-50%) scale(var(--sc));transform-origin:50% 50%}
.coh-art .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,.20),rgba(0,117,235,.06) 52%,
             transparent 70%)}
.coh-art .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)}}
.coh-art .cwo-orb{position:absolute;inset:0;animation:cwoSpin var(--sp) linear infinite}
.coh-art .cwo-orb--rev{animation-direction:reverse}
.coh-art .cwo-n{position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--a)) translate(var(--r))}
.coh-art .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)))}
.coh-art .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}
.coh-art .cwo-orb--rev .cwo-i{animation-direction:normal}
.coh-art .cwo-i img{max-width:var(--lw,78px);max-height:var(--lh,36px);width:auto;
  height:auto;object-fit:contain;display:block}
.coh-art .cwo-i--box{background:var(--bg,#fff);border-color:transparent;
  overflow:hidden}
.coh-art .cwo-i--box img{max-width:var(--lw,78px);
  max-height:calc(var(--s,88px) * .62)}
.coh-art .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)}
.coh-art .cwo-hub img{width:108px;height:auto;display:block}
.coh-art .cwo-stage:hover .cwo-orb,.coh-art .cwo-stage:hover .cwo-i{
  animation-play-state:paused}
@media(max-width:1180px){.coh-art{--sc-w:.54}}
@media(max-width:980px){.coh-art{--sc-w:.6}}
@media(max-width:600px){.coh-art{--sc-w:.42}}
@media(min-width:981px) and (max-height:860px){.coh-art{--sc-h:.56}}
@media(min-width:981px) and (max-height:760px){.coh-art{--sc-h:.50}}
@media(prefers-reduced-motion:reduce){
  .coh-art .cwo-orb,.coh-art .cwo-i{animation:none!important}
}

/* ---- the stat band: the homepage .nh-stats row, four brand-gradient discs ---- */
.cs-band{position:relative;margin-top:44px;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-xl);box-shadow:var(--sh-md);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.cs-band>div{display:flex;align-items:center;gap:15px;padding:24px 26px;
  border-right:1px solid var(--line-2)}
.cs-band>div:last-child{border-right:0}
.cs-band .ic{width:46px;height:46px;border-radius:50%;flex:none;display:grid;
  place-items:center;color:#fff}
.cs-band .ic svg{width:22px;height:22px}
.cs-band>div:nth-child(1) .ic{background:linear-gradient(135deg,#006BD6,#57ABFF)}
.cs-band>div:nth-child(2) .ic{background:linear-gradient(135deg,#002B6B,#0075EB)}
.cs-band>div:nth-child(3) .ic{background:linear-gradient(135deg,#7F56D9,#B692F6)}
.cs-band>div:nth-child(4) .ic{background:linear-gradient(135deg,#A8351B,#F46C40)}
.cs-band b{display:block;font-size:clamp(21px,2vw,27px);font-weight:800;
  letter-spacing:-.028em;color:var(--navy);line-height:1.1;
  font-variant-numeric:tabular-nums}
.cs-band span{display:block;font-size:12.5px;color:var(--text-2);margin-top:3px;
  line-height:1.35}
@media(max-width:1080px){.cs-band{grid-template-columns:repeat(2,1fr)}
  .cs-band>div:nth-child(2){border-right:0}
  .cs-band>div:nth-child(1),.cs-band>div:nth-child(2){border-bottom:1px solid var(--line-2)}}
@media(max-width:980px){.cs-hx{grid-template-columns:1fr;gap:38px}
  .csh-art{padding:20px 0 6px}}
@media(max-width:620px){.cs-band{grid-template-columns:1fr}
  .cs-band>div{border-right:0;border-bottom:1px solid var(--line-2)}
  .cs-band>div:last-child{border-bottom:0}
  .csh-art{padding:0}
  .xp-g{grid-template-columns:repeat(2,1fr)}}

/* 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}