/* =============================================================
   HZL Microsite — Business Snapshot
   Cinematic scroll section: wireframe-terrain bg (parallax zoom),
   shrinking video hero, About-style headline, Performance-style
   horizontal operations slider with count-up.
   ============================================================= */

.bs{
  --display:'proxima-nova-condensed','proxima-nova','Arial Narrow',sans-serif;
  --body:'proxima-nova',system-ui,sans-serif;
  --teal-300:#4fe0cf;
}

/* ── Section: tall scroll track ──────────────────────────────── */
/* z-index:1 — sits below the About section (z-index:2) so About's
   full-screen video slides over BS during the handoff transition.   */
.bs{position:relative;height:500vh;background:#03040a;color:#fff;z-index:1;margin-top:-100vh}
.bs__sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;opacity:0;
  /* transparent — lets .bs background (#03040a) show through,
     matching the About sticky's bottom-fade target colour.          */
  background:transparent;
}
/* wireframe-terrain background image (scroll-scrubbed parallax zoom) */
.bs__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block;will-change:transform}
.bs__bg-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 56% 46% at 50% 44%, rgba(8,8,26,0.62) 0%, transparent 64%),
    linear-gradient(180deg, rgba(8,8,26,0.50) 0%, transparent 24%, transparent 68%, rgba(6,6,20,0.55) 100%);
}

/* ── Video frame: full-section → shrinks to a centred card ───── */
.bs__video-wrap{
  position:absolute;left:50%;top:50%;
  width:100%;height:100%;
  border-radius:0;overflow:hidden;
  transform:translate(-50%,-50%);
  box-shadow:0 40px 120px rgba(0,0,0,0.6),0 0 0 1px rgba(120,170,255,0.12);
  z-index:3;will-change:transform,border-radius;
}
.bs__video{width:100%;height:100%;object-fit:cover;display:block}
.bs__video-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,4,10,0.10) 0%,transparent 35%,transparent 60%,rgba(3,4,10,0.55) 100%);pointer-events:none}

/* ── Stage 1: eyebrow + headline (About-style) ───────────────── */
.bs__stage1{position:absolute;left:0;right:0;top:58%;text-align:center;z-index:4;padding:0 24px}
.bs__eyebrow{
  display:block;font-family:var(--display);
  font-size:16px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:#7fb942;margin-bottom:18px;will-change:opacity,transform;
}
.bs__headline{
  font-family:var(--display);
  font-size:35px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;line-height:1.18;
  color:rgba(238,242,246,0.95);will-change:opacity,transform;
}

/* ── Stage 2: operations — Performance-style horizontal slider ── */
.bs__ops{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px}
.bs__ops-eyebrow{
  position:absolute;top:13%;left:0;right:0;text-align:center;
  font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#7fb942;
  will-change:opacity,transform;
}
/* Edge-fade mask: hides partial slide content during horizontal pan
   so numbers/text never appear split or clipped mid-transition.     */
.bs__slider{
  width:100%;max-width:1100px;overflow:hidden;
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.bs__track{display:flex;width:100%;will-change:transform}
.bs__slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px}
.bs__slide-cat{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--teal-300);margin-bottom:20px}
.bs__slide-figure{display:flex;align-items:baseline;justify-content:center;line-height:1;margin-bottom:18px}
.bs__slide-value{font-family:var(--display);font-size:clamp(4rem,11vw,11rem);font-weight:800;color:#fff;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:0.88}
.bs__slide-unit{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,3.4rem);font-weight:300;color:rgba(238,242,246,0.82);margin-left:0.12em;line-height:1}
.bs__slide-sub{font-family:var(--body);font-size:clamp(15px,1.4vw,19px);color:rgba(238,242,246,0.82);letter-spacing:0.02em}

/* progress dots */
.bs__dots{position:absolute;bottom:16%;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:9px;z-index:6}
.bs__dot{width:7px;height:7px;border-radius:50%;background:rgba(238,242,246,0.22);transition:background .3s,transform .3s}
.bs__dot.is-active{background:#7fb942;transform:scale(1.5)}

/* Inline CTA on last slide (below 653.80 MW) */
.bs__slide-cta{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:2rem;
  padding:.65rem 1.4rem;border-radius:999px;
  background:linear-gradient(135deg,rgba(79,224,207,.15) 0%,rgba(127,185,66,.12) 100%);
  border:1px solid rgba(79,224,207,.45);
  color:rgba(238,242,246,.90);
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  pointer-events:auto;
  transition:background .25s,border-color .25s,color .25s;
}
.bs__slide-cta:hover{
  background:linear-gradient(135deg,rgba(79,224,207,.28) 0%,rgba(127,185,66,.22) 100%);
  border-color:rgba(79,224,207,.75);color:#fff;
}
.bs__slide-cta-icon{display:flex;align-items:center}
.bs__slide-cta:hover .bs__slide-cta-icon{transform:translateX(3px);transition:transform .22s}

/* Old bottom CTA wrap — replaced by inline slide CTA */
.bs__cta-wrap{display:none}
@keyframes bsShimmer{0%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}100%{background-position:0 0,0% 50%}}
.bs__cta{
  display:inline-flex;align-items:center;gap:.6em;padding:.8em 1.8em;border-radius:999px;border:1.5px solid transparent;
  background:linear-gradient(#03040a,#03040a) padding-box,
    linear-gradient(135deg,#0060a3 0%,#4fe0cf 30%,#fff 50%,#7fb942 70%,#0060a3 100%) border-box;
  background-size:100%,300% 300%;animation:bsShimmer 3s ease-in-out infinite;
  font-family:var(--display);font-size:0.82rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#fff;text-decoration:none;cursor:pointer;
}
.bs__cta-arrow{transition:transform .25s}
.bs__cta:hover .bs__cta-arrow{transform:translateX(5px)}

.bs__hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:7;font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4);animation:bsBlink 2.2s ease-in-out infinite}
@keyframes bsBlink{0%,100%{opacity:.4}50%{opacity:.85}}

@media (max-width:680px){
  .bs__headline{font-size:22px}
  .bs__slide-cat{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  .bs__cta{animation:none}
  .bs__hint{animation:none}
}

/* ── Mobile: show ALL four operations numbers at once (2×2 grid) instead of
   the one-at-a-time carousel. JS disables slide-paging at the same 640px. ── */
@media (max-width:640px){
  .bs__slider{max-width:100%;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .bs__track{display:grid;grid-template-columns:1fr 1fr;gap:26px 12px;width:100%;transform:none!important;will-change:auto}
  .bs__slide{flex:none;opacity:1!important;padding:0 4px}
  .bs__slide-cat{font-size:10px;letter-spacing:0.1em;margin-bottom:7px}
  .bs__slide-figure{margin-bottom:4px}
  .bs__slide-value{font-size:clamp(30px,9vw,42px);line-height:0.9}
  .bs__slide-unit{font-size:13px}
  .bs__slide-sub{font-size:11px;line-height:1.25}
  .bs__slide-cta{display:none}   /* avoid 4 duplicate "Explore More" buttons in the grid */
  .bs__dots{display:none}        /* no carousel → no progress dots */
  /* Restore ONE section CTA below the grid (per-slide CTAs hidden above). Force
     it visible — the JS otherwise keeps it at opacity 0 until the scroll end. */
  .bs__cta-wrap{display:flex!important;justify-content:center;opacity:1!important;transform:none!important;margin-top:26px;pointer-events:auto}
}