.hub-page{background:#f3f6fb;color:#10233f}
.hub-hero{display:block;margin:18px auto 0;width:min(1440px,calc(100% - 36px));padding:0;min-height:0;border-radius:20px;background:#eef6ff;overflow:hidden;box-shadow:0 12px 36px rgba(16,35,63,0.08)}
.hub-hero img{display:block;width:100%;height:clamp(220px,24vw,420px);object-fit:cover;object-position:center center}
.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}
.hub-board{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;width:min(1440px,calc(100% - 36px));margin:22px auto 48px}
.hub-side,.hub-main{background:#fff;border:1px solid #e6edf5;border-radius:18px;box-shadow:0 10px 30px rgba(16,42,84,.05)}
.hub-side{padding:18px 12px 14px;align-self:start;position:sticky;top:104px}
.hub-side h2{margin:2px 12px 12px;font-size:20px;color:#17325c}
.hub-side button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:transparent;color:#24395c;text-align:left;font:600 14px/1.35 inherit;padding:11px 12px;border-radius:10px;cursor:pointer}
.hub-side button span{flex:1}
.hub-side button i{font-style:normal;color:#9aa8ba;font-size:16px}
.hub-side button[aria-current="true"]{background:#1f74ea;color:#fff}
.hub-side button[aria-current="true"] i{color:#fff}
.hub-main{padding:22px 22px 28px}
.hub-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:18px}
.hub-main h2{margin:0 0 6px;font-size:clamp(22px,2vw,28px);color:#17325c}
.hub-head p{margin:0;color:#7b8ba0;font-size:13px;max-width:420px;text-align:right;line-height:1.45}
.hub-panel{display:none}
.hub-panel.is-active{display:block}
.hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hub-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:148px;padding:18px 12px;border:1px solid #e7eef6;border-radius:16px;background:#fff;text-align:center;color:#17325c;box-shadow:0 6px 16px rgba(20,48,90,.04)}
.hub-card strong{font-size:14px;font-weight:650;line-height:1.35}
.hub-mark{height:46px;display:flex;align-items:center;justify-content:center}
.hub-mark img{height:40px;width:auto;max-width:120px;object-fit:contain}
.word{font-weight:800;letter-spacing:-.3px;font-size:20px}
.word small{display:block;font-size:11px;font-weight:700;letter-spacing:.2px}
.word.ondc{color:#1a73e8}
.word.glow{color:#1f7a45}
.word.bb{color:#e11d48}
.word.train{color:#0f3d8c}
.word.care{color:#12315f}
.word.research{color:#0e7490}
.hub-site-footer{background:#fff;border-top:1px solid #e6edf5;padding:28px 0 18px}
.hub-site-footer .about-footer{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:24px;width:min(1440px,calc(100% - 36px));margin:0 auto}
.hub-site-footer img{height:42px;width:auto}
.hub-site-footer a,.hub-site-footer p{display:block;color:#52657f;text-decoration:none;margin:6px 0;font-size:14px}
.hub-site-footer b{color:#17325c}
.about-footer-bar{display:flex;justify-content:space-between;gap:12px;width:min(1440px,calc(100% - 36px));margin:18px auto 0;padding-top:14px;border-top:1px solid #e6edf5;color:#7b8ba0;font-size:13px}
html.dark-mode .hub-page,body.dark-mode.hub-page{background:#07111d;color:#e7eef8}
html.dark-mode .hub-side h2,body.dark-mode .hub-side h2,html.dark-mode .hub-main h2,body.dark-mode .hub-main h2,html.dark-mode .hub-card,body.dark-mode .hub-card{color:#eef4ff}
html.dark-mode .hub-side,body.dark-mode .hub-side,html.dark-mode .hub-main,body.dark-mode .hub-main,html.dark-mode .hub-card,body.dark-mode .hub-card,html.dark-mode .hub-site-footer,body.dark-mode .hub-site-footer{background:#0e1b2c;border-color:#1d334d}
html.dark-mode .hub-side button,body.dark-mode .hub-side button{color:#d5e2f2}
@media(max-width:1100px){.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hub-board{grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:860px){
  .hub-site-footer .about-footer,.about-footer-bar{display:flex;flex-direction:column}
  .hub-hero,.hub-board{width:calc(100% - 20px)}
  .hub-hero{padding:0}
  .hub-board{grid-template-columns:1fr}
  .hub-side{position:static}
  .hub-head{flex-direction:column;align-items:flex-start}
  .hub-head p{text-align:left}
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){.hub-grid{grid-template-columns:1fr}}

/* Live typography keeps the banner copy sharp at every density. */
.hub-hero{position:relative}
.hub-hero-copy{position:absolute;z-index:1;left:5%;top:50%;transform:translateY(-50%);width:53%;color:#052c4d}
.hub-hero-copy h1{font-size:clamp(36px,5.8vw,84px);line-height:1.08;margin:0 0 22px;font-weight:800;letter-spacing:-2px}
.hub-hero-copy h1 span{color:#f56600}
.hub-hero-copy p{font-size:clamp(14px,1.6vw,23px);line-height:1.5;margin:0;color:#173345}
@media(max-width:600px){.hub-hero-copy{left:6%;width:85%;top:22px;transform:none}.hub-hero-copy h1{font-size:38px;margin-bottom:10px}.hub-hero-copy p{max-width:280px;font-size:15px}.hub-hero img{height:340px;object-position:67% center}.hub-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(#e9f8ff 0%,#e9f8ffdd 32%,transparent 66%);pointer-events:none}}