/* ==========================================================================
   WHY BNA WORLDWIDE — page-specific composition
   Two long-form audience "tracks" (Organisations / Candidates) with a
   sticky left-hand label, pivoting around a full-bleed stat band, closed
   by a photographic facilities gallery with interactive hotspots.
   ========================================================================== */

/* ---------------------------------- Hero ---------------------------------- */
.wb-hero{
  background:var(--navy-900); color:#fff;
  padding-top:calc(var(--section-pad-y) + 4rem);
  padding-bottom:var(--space-8);
}
.wb-hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-8); align-items:end; }
.wb-hero-head{ max-width:56ch; }
.wb-hero-head h1{ font-size:var(--fs-hero); max-width:20ch; margin:1.5rem 0 1.5rem; }
.wb-hero-head p{ font-size:var(--fs-body-lg); color:rgba(255,255,255,.68); max-width:54ch; }
.wb-hero-band{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; }
.wb-hero-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .wb-hero-inner{ grid-template-columns:1fr; } }
@media (max-width:700px){ .wb-hero-band{ aspect-ratio:4/5; } }

/* ---------------------------------- Intro ---------------------------------- */
.wb-intro{ padding-block:var(--section-pad-y-lg); }
.wb-intro-inner{ max-width:860px; }
.wb-intro-inner h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:19ch; margin:1.5rem 0 1.75rem; }
.wb-intro-inner p{ font-size:var(--fs-body-lg); color:var(--ink-soft); max-width:70ch; }

/* ----------------------------- Audience tracks ----------------------------- */
.wb-track{ padding-block:var(--section-pad-y); }
.wb-track-grid{ display:grid; grid-template-columns:300px 1fr; gap:var(--space-9); align-items:start; }
.wb-track-label{ position:sticky; top:7.5rem; }
.wb-track-label .eyebrow{ margin-bottom:1.25rem; }
.wb-track-label h2{ font-family:var(--font-display); font-size:var(--fs-display-md); max-width:12ch; margin-bottom:1.25rem; }
.wb-track-label p{ color:var(--ink-soft); font-size:.95rem; max-width:28ch; }
.wb-track.on-dark .wb-track-label p{ color:rgba(255,255,255,.6); }

.wb-points{ border-top:1px solid var(--line-on-light); }
.wb-track.on-dark .wb-points{ border-top-color:var(--line-on-dark); }
.wb-point{
  display:grid; grid-template-columns:60px 1fr; gap:var(--space-5);
  padding-block:var(--space-7);
  border-bottom:1px solid var(--line-on-light);
  transition:padding-left .5s var(--ease-premium);
}
.wb-point:hover{ padding-left:.5rem; }
.wb-track.on-dark .wb-point{ border-bottom-color:var(--line-on-dark); }
.wb-point .idx{ font-family:var(--font-mono); color:var(--sky-600); font-size:.8rem; padding-top:.2rem; transition:color .4s var(--ease-out); }
.wb-track.on-dark .wb-point .idx{ color:var(--sky-400); }
.wb-point:hover .idx{ color:var(--sky-500); }
.wb-point h3{ font-family:var(--font-display); font-size:clamp(1.4rem, .7vw + 1.15rem, 1.85rem); margin-bottom:.65rem; }
.wb-point p{ color:var(--ink-soft); max-width:58ch; font-size:1.02rem; }
.wb-track.on-dark .wb-point p{ color:rgba(255,255,255,.62); }

.wb-track-photo{ margin-block:var(--space-7); border-radius:var(--radius-lg); overflow:hidden; position:relative; aspect-ratio:16/7; }
.wb-track-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (max-width:900px){
  .wb-track-grid{ grid-template-columns:1fr; }
  .wb-track-label{ position:relative; top:auto; margin-bottom:var(--space-6); }
}
@media (max-width:600px){
  .wb-point{ grid-template-columns:1fr; gap:.5rem; }
}

/* --------------------------------- Stat band -------------------------------- */
.wb-stats{ position:relative; background:var(--navy-900); color:#fff; padding-block:var(--space-9); overflow:hidden; }
.wb-stats-bg{ position:absolute; inset:0; z-index:0; }
.wb-stats-bg img{ width:100%; height:100%; object-fit:cover; opacity:.24; }
.wb-stats-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--navy-900) 0%, rgba(8,11,26,.7) 45%, var(--navy-900) 100%);
}
.wb-stats-head{ position:relative; z-index:2; text-align:center; margin-bottom:var(--space-8); }
.wb-stats-head .eyebrow{ justify-content:center; margin-bottom:1.25rem; }
.wb-stats-head h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:24ch; margin-inline:auto; }
.wb-stats-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-on-dark-soft); border:1px solid var(--line-on-dark-soft);
}
.wb-stats-grid .stat{ background:var(--navy-900); padding:2.5rem 2rem; }
@media (max-width:860px){ .wb-stats-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .wb-stats-grid{ grid-template-columns:1fr; } }

/* --------------------------------- Mosaic gallery ---------------------------- */
.wb-mosaic{ padding-block:var(--section-pad-y-lg); }
.wb-mosaic-head{ margin-bottom:var(--space-8); max-width:60ch; }
.wb-mosaic-head h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:22ch; margin-top:1.25rem; }
.wb-mosaic-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(180px, 15vw, 260px); gap:1rem; }
.wb-mosaic-grid .m-item{ position:relative; border-radius:var(--radius-md); overflow:hidden; }
.wb-mosaic-grid .m-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wb-mosaic-grid .m-item.tall{ grid-row:span 2; }
@media (max-width:900px){ .wb-mosaic-grid{ grid-template-columns:repeat(2,1fr); } .wb-mosaic-grid .m-item.tall{ grid-row:span 1; } }
@media (max-width:520px){ .wb-mosaic-grid{ grid-template-columns:1fr; grid-auto-rows:220px; } }

/* ------------------------------- Facilities / proof ---------------------------- */
.wb-proof{ padding-block:var(--section-pad-y); }
.wb-proof-head{ display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; margin-bottom:var(--space-7); }
.wb-proof-head h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:16ch; margin-top:1.25rem; }
.wb-proof-head p{ color:var(--ink-soft); max-width:36ch; }

.wb-hotspot-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/8.2; }
.wb-hotspot-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wb-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,.35)); }

.wb-hotspot{ position:absolute; z-index:3; transform:translate(-50%,-50%); }
.wb-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:wbHotspotPulse 2.6s ease-out infinite;
  cursor:pointer; border:2px solid #fff;
}
@keyframes wbHotspotPulse{
  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); }
}
.wb-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 .4s var(--ease-elastic);
  box-shadow:var(--shadow-lg);
}
.wb-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; }
.wb-hotspot:hover .wb-hotspot-tip, .wb-hotspot:focus-within .wb-hotspot-tip{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

.wb-proof-more{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--space-6); }

/* ----------------------------------- CTA -------------------------------------- */
.wb-cta{ background:var(--navy-900); color:#fff; padding-block:var(--section-pad-y-lg); text-align:center; position:relative; overflow:hidden; }
.wb-cta h2{ font-family:var(--font-display); font-size:var(--fs-display-xl); max-width:17ch; margin-inline:auto; margin-top:1.75rem; }
.wb-cta p{ color:rgba(255,255,255,.65); max-width:48ch; margin:1.5rem auto 0; font-size:var(--fs-body-lg); }
.wb-cta .cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.75rem; }