body{margin:0;background:#ffffff}
a{color:#0053E2}a:hover{color:#0043B8}
.h-hero-text{position:relative;z-index:1;max-width:820px}
.h-globe{position:absolute;right:-180px;top:40px;width:820px;height:820px;pointer-events:none}
.h-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #D9E6FC;background:#ffffff}
.h-cells > *{border-right:1px solid #D9E6FC}
.h-cells > *:last-child{border-right:0}
.h-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.h-t3{grid-column:span 2}.h-t2{grid-column:span 3}
.h-tile{position:relative;overflow:hidden;min-height:300px;border:1px solid rgba(219,234,254,.35);background:transparent;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;transition:border-color .2s ease}
.h-tile:hover{border-color:#D9E6FC}
.h-tile svg.art{position:absolute;inset:0;width:100%;height:100%}
.h-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:center}
.h-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid #001A4D}
.h-routes > *{padding:28px 28px 32px 0;border-right:1px solid #D9E6FC;margin-right:28px}
.h-routes > *:last-child{border-right:0;margin-right:0}
.h-contents{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:899px){
  .h-globe{right:-320px;top:auto;bottom:-260px;width:620px;height:620px;opacity:.45}
  .h-cells,.h-routes,.h-split{grid-template-columns:minmax(0,1fr)}
  .h-cells > *{border-right:0;border-bottom:1px solid #D9E6FC}
  .h-cells > *:last-child{border-bottom:0}
  .h-routes > *{border-right:0;margin-right:0;border-bottom:1px solid #D9E6FC}
  .h-tiles{grid-template-columns:minmax(0,1fr)}
  .h-t3,.h-t2{grid-column:1 / -1}
  .h-contents{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.h-tile{transition:none}}


/* Deep blue replaced with #0053E2 */
.gi-footer{background:#0053E2}

/* Footer logo: slow spin, swings into place and brightens on hover (as on the previous site) */
.gi-footer__watermark{transform:translate(20px,20px) rotate(-15deg);animation:gi-footer-spin 90s linear infinite;transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease}
.gi-footer:hover .gi-footer__watermark{opacity:.14;transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 0 40px rgba(255,194,32,.35))}
@keyframes gi-footer-spin{from{rotate:0deg}to{rotate:360deg}}
.gi-footer__glow{position:absolute;top:0;left:0;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,32,.28) 0%,rgba(255,194,32,0) 70%);opacity:0;transition:opacity .8s ease;pointer-events:none;z-index:0;transform:translate(-400px,-400px)}
.gi-footer:hover .gi-footer__glow{opacity:1}
.gi-footer > .gi-container{position:relative;z-index:1}
@media (hover:none){.gi-footer__glow{display:none}}
@media (prefers-reduced-motion:reduce){.gi-footer__watermark{animation:none;transition:none}.gi-footer__glow{display:none}}

/* One blue: the design system's accent now matches the page blue #0053E2 */
.gi-dark{--gi-focus:#D9E6FC}
/* Area tiles: outlined panels on the blue, lighten on hover; keep titles on one baseline */
.h-tile:hover{background:rgba(255,255,255,.06)}
.h-tile p{min-height:3.1em}

/* column back to the design system default: 1280px, 48px gutters (16px on phones) */
/* Hero: height follows its content (no forced full-screen height, so no empty band) */
#top .h-contents{margin-top:56px !important}
#top > .gi-container{padding-top:clamp(56px,7vw,104px) !important;padding-bottom:40px !important}
#top > .gi-container > p{margin-top:48px !important}
@media (min-width:900px){
  /* globe: centred on the hero text, all of Africa in view, only the far right edge cropped */
  /* globe as in the approved design: 800px, cropped off the right edge of the screen, starting below the header */
}