/* Homepage hero, full-screen light (2026-11-02): the existing pale cartographic Pakistan map now fills the whole first
   screen (header to fold), headline large on the left, frosted fact bar along the bottom. Homepage only. */
.inv-hub section.hp-hero{
  background:#F6F9F9!important;
  min-height:calc(100svh - 80px);
  padding:48px 0 0!important;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;isolation:isolate;border:0;
}
.hp-hero::before{
  content:"";position:absolute;top:0;bottom:0;left:-26%;right:0;width:auto;height:auto;z-index:-2;
  background:url(/assets/img/hero/hero-banner.jpg) 50% center/cover no-repeat;
  filter:invert(1) hue-rotate(180deg) saturate(.8) brightness(1.04) contrast(.95);
  opacity:.3;
  -webkit-mask-image:none;mask-image:none;
  transform-origin:70% 50%;
}
.hp-hero::after{content:none}

.hp-hero > .inv-hero-grid{flex:1;align-content:center;grid-template-columns:minmax(0,1fr);padding-top:8px;padding-bottom:8px}
.hp-hero .inv-hero-copy{max-width:720px}
.hp-hero h1{font-size:clamp(2.2rem,4.1vw,3.6rem);line-height:1.06;letter-spacing:-.025em;margin:18px 0 18px;color:#0f2238}
.inv-hub .inv-hero.hp-hero h1 .hl{color:var(--teal-deep);background:none}
.hp-hero .hp-tagline{font-size:clamp(1.1rem,1.7vw,1.4rem);margin:0 0 12px}
.hp-hero .inv-lede{color:#2f3b4a;font-weight:500;font-size:clamp(.98rem,1.25vw,1.08rem);line-height:1.6;max-width:620px;margin:0}
.hp-hero .inv-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.hp-hero .pill{border-radius:4px;box-shadow:none;color:#fff}
.hp-hero .pill-teal{background:var(--teal-deep);border:1px solid var(--teal-deep)}
.hp-hero .pill-teal:hover{background:var(--teal);border-color:var(--teal)}
.hp-hero .pill-charcoal{background:#23272D;border:1px solid #23272D}
.hp-hero .pill-charcoal:hover{background:#3a4048;border-color:#3a4048}

.hp-hero .hp-factbar{margin-top:40px;border-radius:0;background:rgba(255,255,255,.7)}
.hp-hero .hp-factbar span{display:none}
.hp-hero .hp-factbar b{font-family:var(--sans);font-weight:600;font-size:.86rem;margin:0}
.hp-hero .hp-factbar div{padding:13px 22px}

@media (min-width:1081px){
  .inv-hub section.hp-hero{padding-top:56px!important}
}
@media (max-width:900px){
  .inv-hub section.hp-hero{padding-top:36px!important;min-height:calc(100svh - 72px)}
  .hp-hero::before{left:0;background-position:78% center;opacity:.28}
  .hp-hero h1{font-size:clamp(2.3rem,10vw,3.1rem)}
  .hp-hero .hp-factbar{margin-top:32px}
}

/* Map first for 1 second, then a slower staggered text reveal.
   Finite CSS animations keep the hero usable without JavaScript. */
@media (prefers-reduced-motion:no-preference){
  .hp-hero::before{animation:hpHeroMapSettle 1s cubic-bezier(.22,1,.36,1) both}
  .hp-hero h1{animation:hpHeroTitleIn 1.4s 1s cubic-bezier(.22,1,.36,1) both}
  .hp-hero .hp-tagline,
  .hp-hero .inv-lede,
  .hp-hero .inv-cta,
  .hp-hero .hp-factbar{
    animation:hpHeroContentIn 1s cubic-bezier(.22,1,.36,1) both;
  }
  .hp-hero .hp-tagline{animation-delay:1.25s}
  .hp-hero .inv-lede{animation-delay:1.45s}
  .hp-hero .inv-cta{animation-delay:1.65s}
  .hp-hero .hp-factbar{animation-delay:1.85s}
  /* A keyboard user can reach the actions before their entrance has finished. */
  .hp-hero:focus-within :is(h1,.hp-tagline,.inv-lede,.inv-cta,.hp-factbar){animation:none}
}
@keyframes hpHeroMapSettle{
  0%{opacity:.12;transform:scale(1.12) translate3d(-1%,0,0)}
  30%{opacity:.48}
  65%{opacity:.48}
  100%{opacity:.3;transform:none}
}
@keyframes hpHeroTitleIn{
  from{opacity:0;transform:translate3d(0,36px,0)}
  to{opacity:1;transform:none}
}
@keyframes hpHeroContentIn{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:none}
}
/* Keep the smaller mobile crop especially steady. */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .hp-hero::before{animation-name:hpHeroMapSettleMobile}
}
@keyframes hpHeroMapSettleMobile{
  0%{opacity:.12;transform:scale(1.07)}
  30%{opacity:.44}
  65%{opacity:.44}
  100%{opacity:.28;transform:none}
}