/* ==========================================================================
   BNA WORLDWIDE — HOMEPAGE
   ========================================================================== */

.home main{ background:var(--navy-900); }

/* ---------------------------------- Scene: Hero ---------------------------------- */
.scene-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #0E1730 0%, var(--navy-900) 62%);
  color:var(--white);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.scene-hero .scene-visual{
  position:absolute; inset:0;
  overflow:hidden;
}
.scene-visual canvas{ position:absolute; inset:0; width:100%; height:100%; }
.scene-visual .stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 65% 12%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 80% 62%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 35% 78%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 92% 38%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 8% 65%, rgba(255,255,255,.4), transparent);
  background-repeat:no-repeat;
}
.scene-hero::after{
  /* legibility scrim so hero copy always reads cleanly over the globe */
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,11,26,.86) 0%, rgba(8,11,26,.6) 38%, rgba(8,11,26,.15) 62%, transparent 78%);
  z-index:1;
}

/* ---- Hero ambient waves + particles ---- */
.hero-ribbons{ position:absolute; inset:0; width:100%; height:100%; opacity:.6; z-index:0; }
.hero-ribbons .route{ animation:ribbonDrift 24s ease-in-out infinite; transform-origin:center; }
.hero-ribbons .route:nth-child(2){ animation-duration:30s; animation-direction:reverse; }
.hero-particles{ z-index:1; }
@media (prefers-reduced-motion: reduce){ .hero-ribbons .route{ animation:none; } }

/* ---- Hero globe (client-supplied image) + animated pin/route overlay ---- */
.hero-globe{
  position:absolute;
  top:50%; left:64%;
  width:min(42vw, 620px);
  transform:translate(-50%,-50%);
  animation:globeFloat 8s ease-in-out infinite;
}
.hero-globe-img{ width:100%; height:auto; display:block; filter:drop-shadow(0 40px 90px rgba(0,0,0,.55)); }
@keyframes globeFloat{
  0%,100%{ transform:translate(-50%,-50%) translateY(0); }
  50%{ transform:translate(-50%,-50%) translateY(-16px); }
}
.hero-globe-routes{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hero-globe-routes .route{
  fill:none; stroke:var(--sky-400); stroke-width:.35; opacity:.55;
  stroke-dasharray:2.2 1.4;
  animation:routeFlow 3.5s linear infinite;
}
@keyframes routeFlow{ to{ stroke-dashoffset:-18; } }

.hero-pin{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:.5rem; }
.hero-pin-dot{
  width:9px; height:9px; border-radius:50%; background:var(--sky-400);
  box-shadow:0 0 0 0 rgba(79,184,234,.65);
  animation:heroPinPulse 2.4s ease-out infinite;
  border:1.5px solid #fff;
  flex-shrink:0;
}
.hero-pin-hub .hero-pin-dot{ background:#fff; width:11px; height:11px; }
@keyframes heroPinPulse{
  0%{ box-shadow:0 0 0 0 rgba(79,184,234,.6); }
  70%{ box-shadow:0 0 0 14px rgba(79,184,234,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,184,234,0); }
}
.hero-pin-label{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.03em; color:#fff;
  background:rgba(8,11,26,.75); padding:.24rem .45rem; border-radius:var(--radius-sm);
  white-space:nowrap;
}
.hero-pin-hub .hero-pin-label{ font-weight:600; }

@media (max-width:960px){ .hero-globe{ left:78%; width:min(75vw,640px); } }
@media (max-width:780px){
  .hero-globe{ position:relative; top:auto; left:auto; transform:none; width:80vw; margin:2rem auto 0; }
  .hero-globe-img{ filter:drop-shadow(0 24px 50px rgba(0,0,0,.5)); }
  .hero-pin-label{ font-size:.62rem; }
}
@media (prefers-reduced-motion: reduce){
  .hero-globe, .hero-globe-routes .route, .hero-pin-dot{ animation:none; }
}
.hero-panel{
  position:relative; z-index:2;
  padding-inline:var(--page-pad-x);
  padding-block: 9rem 5rem;
  max-width:900px;
}
.hero-panel .eyebrow{ margin-bottom:1.5rem; }
.hero-title{
  font-size:var(--fs-hero);
  max-width:19ch;
  margin-bottom:1.75rem;
}
.hero-sub{
  font-size:var(--fs-body-lg);
  color:rgba(255,255,255,.7);
  max-width:42ch;
  margin-bottom:2.75rem;
}
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

@media (max-width: 780px){
  .hero-panel{ padding-block:7.5rem 4rem; }
  .hero-title{ font-size:clamp(2.1rem,7.5vw,3rem); max-width:16ch; }
}

/* ---------------------------------- Scene: Our Network (light) ---------------------------------- */
.scene-network{ background:var(--white); padding-block:calc(var(--section-pad-y) + 2rem) var(--section-pad-y); scroll-margin-top:120px; }
.network-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:var(--space-10); }
.network-feature-icon{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--sky-100); color:var(--sky-700); margin-bottom:1.1rem;
}
.network-stats{ display:flex; gap:var(--space-7); margin-bottom:2rem; }
.network-stat .stat-num{ font-size:clamp(1.6rem,1.6vw + 1rem,2.4rem); }
.network-stat .stat-label{ color:var(--ink-soft); }
@media (max-width:780px){ .network-features{ grid-template-columns:1fr; } }
.network-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-9); align-items:center; }
.network-copy h2{ font-size:var(--fs-display-lg); max-width:15ch; margin:1.1rem 0 1.5rem; }
.network-copy > p{ color:var(--ink-soft); font-size:var(--fs-body-lg); max-width:46ch; margin-bottom:2rem; }
.country-chips{ display:flex; flex-wrap:wrap; gap:.65rem; }
.country-chip{
  display:flex; align-items:center; gap:.55rem;
  border:1px solid var(--line-on-light);
  border-radius:var(--radius-pill);
  padding:.55rem 1rem .55rem .65rem;
  font-size:.85rem;
  color:var(--ink-soft);
  background:var(--paper);
  transition:border-color .3s, background .3s, transform .3s var(--ease-out);
}
.country-chip:hover{ border-color:var(--sky-500); background:var(--sky-100); transform:translateY(-2px); }
.country-chip .flag{ font-size:1.1rem; line-height:1; }
.country-chip.is-hub{ border-color:var(--sky-500); background:var(--sky-100); color:var(--navy-800); font-weight:600; }

.network-collage{
  position:relative;
  height:clamp(380px, 40vw, 540px);
}
.collage-lines{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.collage-photo{
  position:absolute; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:4px solid var(--white);
}
.collage-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.collage-photo-a{ top:0; left:2%; width:52%; height:56%; z-index:2; }
.collage-photo-b{ top:0; right:0; width:38%; height:32%; z-index:1; }
.collage-photo-c{ bottom:0; right:4%; width:58%; height:52%; z-index:2; }
.collage-badge{
  position:absolute; z-index:3;
  width:52px; height:52px; border-radius:50%;
  background:var(--white); box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--sky-600); border:1px solid var(--line-on-light);
}
.collage-badge-a{ top:32%; left:20%; }
.collage-badge-b{ bottom:16%; right:32%; color:var(--sky-500); }

@media (max-width:900px){
  .network-grid{ grid-template-columns:1fr; }
  .network-collage{ order:-1; height:clamp(320px,90vw,420px); margin-bottom:2rem; }
}

/* ------------------------------ Scene: Centre journey ---------------------- */
.scene-journey{ background:var(--navy-800); color:var(--white); padding-block:var(--space-9) var(--space-8); }
.journey-head{ padding-inline:var(--page-pad-x); margin-bottom:var(--space-7); }
.journey-head h2{ font-size:var(--fs-display-md); max-width:48ch; white-space:normal; }
@media (min-width:900px){ .journey-head h2{ white-space:nowrap; font-size:clamp(1.5rem, 1.7vw + 1rem, 2.1rem); } }

.journey-rail{
  display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding-inline:var(--page-pad-x); padding-bottom:2rem;
  scrollbar-width:none;
}
.journey-rail::-webkit-scrollbar{ display:none; }
.journey-card{
  flex:0 0 auto; width:min(70vw,460px); scroll-snap-align:start;
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/5;
  background:var(--charcoal-700);
}
.journey-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-premium); }
.journey-card:hover img{ transform:scale(1.06); }
.journey-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,11,26,.92) 0%, rgba(8,11,26,.35) 45%, rgba(8,11,26,.05) 70%);
}
.journey-card-meta{ position:absolute; left:0; right:0; bottom:0; padding:1.75rem; z-index:2; }
.journey-num{ font-family:var(--font-mono); color:var(--sky-400); font-size:.78rem; letter-spacing:.1em; }
.journey-card h3{ font-size:1.4rem; margin-top:.5rem; font-family:var(--font-display); }
.journey-card p{ font-size:.88rem; color:rgba(255,255,255,.65); margin-top:.5rem; max-width:30ch; }

.journey-nav{ display:flex; align-items:center; gap:.75rem; padding-inline:var(--page-pad-x); margin-top:1.5rem; }
.journey-nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-on-dark);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s;
  flex-shrink:0;
}
.journey-nav button:hover{ border-color:var(--sky-500); background:rgba(79,184,234,.1); }
.journey-dots{ display:flex; gap:.5rem; margin-left:.75rem; }
.journey-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--line-on-dark);
  transition:background .35s var(--ease-out), transform .35s var(--ease-out); flex-shrink:0;
}
.journey-dots span.is-active{ background:var(--sky-400); transform:scale(1.5); }

/* ------------------------------- Scene: Trusted by -------------------------- */
.scene-trust{ background:var(--white); padding-block:var(--space-9); }
.trust-head{ text-align:center; padding-inline:var(--page-pad-x); margin-bottom:var(--space-7); }
.trust-head h2{ font-size:var(--fs-display-md); max-width:26ch; margin-inline:auto; }
.logo-tile{
  display:flex; align-items:center; justify-content:center;
  height:64px; min-width:120px; padding-inline:1.5rem;
  filter:grayscale(1) opacity(.55);
  transition:filter .4s var(--ease-out), transform .4s var(--ease-out);
}
.logo-tile:hover{ filter:grayscale(0) opacity(1); transform:translateY(-2px); }
.logo-tile img{ max-height:100%; min-height:28px; width:auto; object-fit:contain; }
.trust-foot{ text-align:center; margin-top:var(--space-6); color:var(--ink-soft); font-size:.85rem; padding-inline:var(--page-pad-x); }

/* -------------------------- Scene: Why organisations ------------------------- */
.scene-orgs{ background:var(--paper); padding-block:var(--section-pad-y); }
.orgs-head{ text-align:center; max-width:640px; margin-inline:auto; margin-bottom:var(--space-8); }
.orgs-head h2{ font-size:var(--fs-display-lg); margin:1rem 0; }
.orgs-head p{ font-size:var(--fs-body-lg); color:var(--ink-soft); }

.orgs-sector-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.orgs-sector{ text-align:left; }
.orgs-sector-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--radius-md);
  background:var(--sky-100); color:var(--sky-700); margin-bottom:1.25rem;
}
.orgs-sector h3{ font-size:1.15rem; margin-bottom:.5rem; }
.orgs-sector p{ color:var(--ink-soft); font-size:.9rem; }

@media (max-width:900px){ .orgs-sector-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .orgs-sector-grid{ grid-template-columns:1fr; } }

/* -------------------------- Scene: Why candidates ---------------------------- */
.scene-candidates{ background:var(--navy-700); color:var(--white); padding-block:var(--section-pad-y); position:relative; overflow:hidden; }
.candidates-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--space-9); align-items:stretch; }
.candidates-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:100%; }
.candidates-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.candidates-copy{ display:flex; flex-direction:column; justify-content:center; }
.candidates-copy h2{ font-size:var(--fs-display-lg); max-width:14ch; margin-bottom:1.25rem; }
.candidates-copy > p{ color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); max-width:44ch; margin-bottom:2.25rem; }
.benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.benefit-card{ padding:1.5rem; }
.benefit-card .num{ font-family:var(--font-mono); font-size:.75rem; color:var(--sky-400); margin-bottom:.85rem; display:block; }
.benefit-card h3{ font-size:1.05rem; margin-bottom:.5rem; font-family:var(--font-display); }
.benefit-card p{ font-size:.86rem; color:rgba(255,255,255,.58); }
@media (max-width:960px){ .candidates-grid{ grid-template-columns:1fr; } .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .benefit-grid{ grid-template-columns:1fr; } }

/* ------------------------- Scene: Infrastructure hotspots --------------------- */
.scene-infra{ background:var(--paper); padding-block:var(--section-pad-y-lg); }
.infra-head{ max-width:34ch; }
.infra-head h2{ font-size:var(--fs-display-md); margin:1rem 0 1rem; }
.infra-head p{ color:var(--ink-soft); }
.infra-stats{ display:flex; flex-direction:column; flex-wrap:nowrap; gap:.6rem; margin-top:1.75rem; align-items:flex-start; }
.infra-stats span{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sky-700); background:var(--white); border:1px solid var(--line-on-light);
  padding:.5rem .9rem; border-radius:var(--radius-pill);
}

.infra-layout{ display:grid; grid-template-columns:.78fr 1.1fr .85fr; gap:var(--space-8); align-items:start; }
@media (max-width:1200px){ .infra-layout{ grid-template-columns:1fr; } .infra-head{ max-width:640px; } .infra-stats{ flex-direction:row; flex-wrap:wrap; } }
.hotspot-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; align-self:stretch; box-shadow:var(--shadow-lg); }
.hotspot-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hotspot-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,11,26,.15), rgba(8,11,26,.05) 30%, rgba(8,11,26,.4)); }
.hotspot-caption{
  position:absolute; left:1.25rem; bottom:1.25rem; z-index:3;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; color:#fff;
  background:rgba(8,11,26,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18); padding:.55rem .9rem; border-radius:var(--radius-pill);
}

.infra-list{ display:flex; flex-direction:column; position:relative; }
.infra-list::before{ content:''; position:absolute; top:1.6rem; bottom:1.6rem; left:2.35rem; width:1px; background:var(--line-on-light); z-index:0; }
.infra-item{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:1.25rem;
  padding:1.15rem 1rem; border-radius:var(--radius-md);
  transition:background .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .3s var(--ease-out);
  cursor:default;
}
.infra-item:hover, .infra-item.is-active{ background:var(--white); box-shadow:var(--shadow-md); transform:translateX(4px); }
.infra-num{
  flex-shrink:0; width:2.7rem; height:2.7rem; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--paper); border:1px solid var(--line-on-light);
  font-family:var(--font-mono); font-size:.78rem; color:var(--sky-700);
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.infra-item:hover .infra-num, .infra-item.is-active .infra-num{ background:var(--sky-500); color:#fff; border-color:var(--sky-500); transform:scale(1.08); }
.infra-item h3{ font-family:var(--font-display); font-size:1.08rem; margin-bottom:.35rem; }
.infra-item p{ color:var(--ink-soft); font-size:.9rem; }

.hotspot{
  position:absolute; z-index:3; transform:translate(-50%,-50%);
}
.hotspot-dot{
  width:14px; height:14px; border-radius:50%; background:var(--sky-500);
  box-shadow:0 0 0 0 rgba(79,184,234,.6);
  animation:hotspotPulse 2.6s ease-out infinite;
  cursor:pointer; border:2px solid #fff;
  transition:transform .3s var(--ease-out);
}
.hotspot-dot.is-active{ transform:scale(1.5); }
@keyframes hotspotPulse{
  0%{ box-shadow:0 0 0 0 rgba(79,184,234,.55); }
  70%{ box-shadow:0 0 0 16px rgba(79,184,234,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,184,234,0); }
}
.hotspot-tip{
  position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--navy-900); color:#fff; padding:.75rem 1rem; border-radius:var(--radius-sm);
  width:max-content; max-width:220px; font-size:.82rem;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
  box-shadow:var(--shadow-lg);
}
.hotspot-tip b{ display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--sky-400); text-transform:uppercase; margin-bottom:.3rem; }
.hotspot:hover .hotspot-tip, .hotspot:focus-within .hotspot-tip{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* --------------------------- Scene: Global presence --------------------------- */
.scene-global{ background:var(--navy-900); color:#fff; padding-block:var(--section-pad-y); position:relative; overflow:hidden; }
.global-head{ padding-inline:var(--page-pad-x); margin-bottom:var(--space-7); text-align:center; }
.global-head h2{ font-size:var(--fs-display-lg); max-width:20ch; margin-inline:auto; }
.country-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-on-dark-soft); border:1px solid var(--line-on-dark-soft); }
.country-card{ background:var(--navy-900); padding:2.25rem; position:relative; transition:background .4s var(--ease-out); }
.country-card:hover{ background:var(--navy-800); }
.country-card .flag{ width:2.75rem; height:auto; margin-bottom:1.25rem; display:block; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.country-card h3{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:.6rem; }
.country-card p{ font-size:.87rem; color:rgba(255,255,255,.58); margin-bottom:1.25rem; }
.country-card .tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sky-400); }
@media (max-width:860px){ .country-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .country-grid{ grid-template-columns:1fr; } }

/* --------------------------------- Scene: Stats -------------------------------- */
.scene-stats{ background:var(--navy-800); color:#fff; padding-block:var(--section-pad-y); position:relative; overflow:hidden; }
.stats-head{ margin-bottom:var(--space-7); text-align:center; }
.stats-head h2{ font-size:var(--fs-display-lg); margin-top:1rem; max-width:20ch; margin-inline:auto; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-dark-soft); border:1px solid var(--line-on-dark-soft); position:relative; z-index:2; border-radius:var(--radius-lg); overflow:hidden; }
.stats-grid .stat{
  background:var(--navy-800); padding:2.75rem 2rem; position:relative;
  transition:background .4s var(--ease-out);
}
.stats-grid .stat:hover{ background:var(--navy-700); }
.stats-grid .stat::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(220px circle at 30% 0%, rgba(79,184,234,.14), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease-out);
}
.stats-grid .stat:hover::before{ opacity:1; }
.stat-icon{ color:var(--sky-400); margin-bottom:1.25rem; position:relative; z-index:1; }
@media (max-width:860px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .stats-grid{ grid-template-columns:1fr; } }

/* ----------------------------------- Scene: CTA -------------------------------- */
/* .scene-cta now lives in components.css (shared site-wide) */

.scene-cta-ribbons{ isolation:isolate; }
.cta-ribbons{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.55;
}
.cta-ribbons .ribbon{ animation:ribbonDrift 22s ease-in-out infinite; transform-origin:center; }
.cta-ribbons .ribbon-2{ animation-duration:28s; animation-direction:reverse; }
.cta-ribbons .ribbon-3{ animation-duration:34s; }
@keyframes ribbonDrift{
  0%{ transform:translateY(0) scaleY(1); }
  50%{ transform:translateY(-22px) scaleY(1.06); }
  100%{ transform:translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .cta-ribbons .ribbon{ animation:none; }
}