/* =========================================================
   Black Lion Digital — Direction C ("Apex Precision")
   Dark war-room / mission-control system built on the real
   BLD palette (#e3ba1c gold, #000/#010101 black, white, #f2f2f2)
   and real BLD type (Poppins, Montserrat) plus JetBrains Mono
   as a functional HUD/data face.
   ========================================================= */

:root{
  --gold: #e3ba1c;
  --gold-bright: #f5cf3d;
  --gold-dim: #7a6415;
  --black: #050505;
  --black-2: #0c0c0d;
  --black-3: #131314;
  --hair: rgba(227,186,28,0.18);
  --hair-strong: rgba(227,186,28,0.4);
  --ink: #000000;
  --white: #ffffff;
  --grey: #f2f2f2;
  --text-dim: rgba(255,255,255,0.62);
  --text-dimmer: rgba(255,255,255,0.4);

  /* Light-theme surface + text tokens. The --black/--text-dim family above
     is kept verbatim, unchanged, for the single deliberate dark contrast
     beat inside .apex — everything else in the page now reads from these. */
  --surface: #ffffff;
  --surface-2: #f6f4ee;
  --ink-dim: #4a4a4a;
  --ink-dimmer: #6e6e6e;
  --hair-lt: rgba(5,5,5,0.10);
  --hair-strong-lt: rgba(5,5,5,0.24);

  --font-display: "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;
  --font-alt: "Montserrat", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --container: 1240px;
  --radius: 2px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  background: var(--surface);
}

body{
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}

p{ margin: 0; }

.mono{ font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* ---------- Accessibility ---------- */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 20px;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus{
  left: 12px;
  top: 12px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}
/* The one dark section keeps the original bright-on-black focus ring —
   var(--ink) would be invisible against .apex's near-black background. */
.apex a:focus-visible,
.apex button:focus-visible{
  outline-color: var(--gold-bright);
}

/* ---------- Custom cursor reticle (desktop, fine pointer only) ----------
   Was mix-blend-mode:difference, a dark-background trick: white minus gold
   renders as a blue-ish invert, which reads as off-brand and inconsistent
   the moment most of the page is light. Solid ink now, everywhere, with a
   soft white halo (drop-shadow, not a blend mode) so the ring stays visible
   over the one section that's still dark (.apex). */
.reticle{
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  z-index: 9999;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.85));
  transition: width .18s var(--ease), height .18s var(--ease), opacity .18s;
  opacity: 0;
  display: none;
}
.reticle::before, .reticle::after{
  content: "";
  position: absolute;
  background: var(--ink);
}
.reticle::before{ top: 50%; left: -6px; width: 4px; height: 1px; transform: translateY(-50%); }
.reticle::after{ top: -6px; left: 50%; width: 1px; height: 4px; transform: translateX(-50%); }
@media (hover:hover) and (pointer:fine){
  .reticle{ display: block; }
}
@media (prefers-reduced-motion: reduce){
  .reticle{ display: none !important; }
}

/* ---------- Grain overlay ---------- */
.grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--hair-strong-lt);
  box-shadow: 0 8px 24px rgba(5,5,5,0.06);
}
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo-mark img{ height: 40px; width: auto; }
.main-nav{
  display: flex;
  gap: 28px;
  margin-right: auto;
  margin-left: 40px;
}
.main-nav a{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dimmer);
  position: relative;
  padding: 4px 0;
  transition: color .2s;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .25s var(--ease);
}
.main-nav a:hover, .main-nav a:focus-visible{ color: var(--ink); }
.main-nav a:hover::after, .main-nav a:focus-visible::after{ width: 100%; }

.nav-toggle{
  display: none;
  background: none;
  border: 1px solid var(--hair-lt);
  width: 42px; height: 42px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
.nav-toggle span{
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .25s;
}
.nav-toggle span:nth-child(1){ top: 15px; }
.nav-toggle span:nth-child(2){ top: 20px; }
.nav-toggle span:nth-child(3){ top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

.mobile-nav{
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 24px;
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid var(--hair-strong-lt);
}
.mobile-nav a{
  padding: 14px 4px;
  border-bottom: 1px solid rgba(5,5,5,0.08);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-nav .btn{ margin-top: 14px; text-align: center; justify-content: center; }
.mobile-nav.open{ display: flex; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  min-height: 44px;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary{
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.btn-primary:hover{ background: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright), 0 8px 20px rgba(227,186,28,0.28); transform: translateY(-1px); }
.btn-ghost{
  border-color: var(--hair-strong-lt);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-dim); }
/* .apex keeps its original dark-mode ghost button: white border/text that
   brightens to gold, since gold-dim would go near-invisible on near-black. */
.apex .btn-ghost{
  border-color: var(--hair-strong);
  color: var(--white);
}
.apex .btn-ghost:hover{ border-color: var(--gold); color: var(--gold-bright); }
/* Headings here had no explicit color and relied on inheriting body's text
   color, which was white under the old dark theme. Now that body defaults
   to ink, that inheritance would render these near-black on near-black —
   confirmed near-invisible on screenshot, fixed by pinning them explicitly. */
.apex h2,
.apex-stage h3{ color: var(--white); }
.btn-dark{
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}
.btn-dark:hover{ background: #1a1a1a; }
.btn-nav{ padding: 11px 20px; }
.btn-block{ width: 100%; justify-content: center; }
.arrow{ display: inline-block; transition: transform .2s var(--ease); }
.btn:hover .arrow, .text-link:hover .arrow{ transform: translateX(4px); }

.text-link{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.text-link:hover{ border-color: var(--gold); }

.section-head{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 56px;
}
.section-head h2{
  font-size: clamp(32px, 4.4vw, 52px);
  max-width: 720px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 140px 24px 100px;
}
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Replaces the removed hero-beam-a.jpg (a dark/black-background beam image
   that cannot work on a light hero). A pure-CSS "target glow" wash instead,
   sitting under the radar canvas — same HUD/mission-control feel, re-grounded
   for light rather than regenerated. */
.hero-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(227,186,28,0.18) 0%, rgba(227,186,28,0.06) 45%, rgba(227,186,28,0) 75%);
}
#radarCanvas{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 1;
}
.hero-vignette{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0.92) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 65%, var(--surface) 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  max-width: 880px;
}
.hero-h1{
  font-size: clamp(40px, 7vw, 88px);
  color: var(--ink);
}
.hero-h1 .line{ display: block; }
.hero-gold{ color: var(--gold-dim); }
.strike-wrap{ position: relative; display: inline-block; }
.strike-line{
  position: absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) .9s;
}
.hero.in-view .strike-line{ transform: scaleX(1); }
.strike-word{ opacity: 0.55; transition: opacity .6s ease 1.6s; }
.hero.in-view .strike-word{ opacity: 0.4; }

.hero-sub{
  margin-top: 30px;
  max-width: 560px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-dim);
  font-weight: 300;
}
.hero-ctas{
  margin-top: 44px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-hud{
  position: absolute;
  right: 24px;
  bottom: 100px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold-dim);
}
.hud-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 2px rgba(227,186,28,0.6);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce){ .hud-dot{ animation: none; } }

.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  width: 26px; height: 44px;
  border: 1px solid var(--hair-strong-lt);
  border-radius: 14px;
  background: none;
  z-index: 2;
  cursor: pointer;
}
.scroll-cue span{
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{
  0%{ top: 8px; opacity: 1; }
  70%{ opacity: 0.2; }
  100%{ top: 24px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .scroll-cue span{ animation: none; top: 8px; } }

@media (max-width: 640px){
  .hero-hud{ display: none; }
}

/* =========================================================
   PROOF MONUMENT
   ========================================================= */
.proof{
  position: relative;
  padding: 90px 24px 70px;
  border-top: 1px solid var(--hair-lt);
  border-bottom: 1px solid var(--hair-lt);
  background: var(--surface-2);
}
.proof-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat{
  border-left: 1px solid var(--hair-lt);
  padding-left: 22px;
}
.stat-num{
  font-size: clamp(38px, 4.4vw, 58px);
  color: var(--gold-dim);
  font-weight: 600;
  display: inline;
}
.stat-decor{
  font-family: var(--font-mono);
  font-size: clamp(38px, 4.4vw, 58px);
  color: var(--gold-dim);
  font-weight: 600;
}
.stat-label{
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-dim);
  max-width: 20ch;
}
.proof-microline{
  text-align: center;
  margin-top: 50px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dimmer);
}

/* =========================================================
   POSITIONING
   ========================================================= */
.positioning{
  padding: 130px 24px;
  background: var(--surface);
}
.positioning-inner{
  max-width: 900px;
  margin: 0 auto;
}
.positioning-h2{
  font-size: clamp(32px, 5vw, 56px);
  margin-bottom: 30px;
}
.cross-out{
  position: relative;
  color: var(--ink-dimmer);
}
.cross-out::after{
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 50%;
  height: 2px;
  background: var(--ink-dimmer);
}
.gold-underline{
  color: var(--gold-dim);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}
.positioning-body{
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--ink-dim);
  max-width: 62ch;
  margin-bottom: 34px;
}

/* =========================================================
   SERVICES BENTO
   ========================================================= */
.services{ padding: 60px 24px 130px; }
.bento{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair-lt);
  border: 1px solid var(--hair-lt);
}
.bento-card{
  background: var(--surface);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transition: background .3s ease;
}
.bento-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(227,186,28,0.09) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.bento-card:hover{ background: var(--surface-2); }
.bento-card:hover::before{ transform: translateX(20%); }
.card-index{
  font-size: 12px;
  color: var(--gold-dim);
  margin-bottom: 22px;
}
.bento-card:hover .card-index{ color: var(--ink); }
.bento-card h3{
  font-size: 21px;
  margin-bottom: 14px;
}
.bento-card p{
  font-size: 14.5px;
  color: var(--ink-dim);
  flex-grow: 1;
  margin-bottom: 20px;
}
.card-link{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.bento-card:hover .card-link .arrow{ transform: translateX(4px); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{
  padding: 110px 24px;
  background: var(--surface-2);
  border-top: 1px solid var(--hair-lt);
  border-bottom: 1px solid var(--hair-lt);
  text-align: center;
}
.testimonial-stage{
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  min-height: 220px;
}
.testimonial{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.testimonial.active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.testimonial p{
  font-family: var(--font-alt);
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  position: relative;
}
.testimonial p::before{
  content: "\201C";
  color: var(--gold-dim);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.32em;
  margin-right: 4px;
  display: inline-block;
}
.testimonial cite{
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.testimonial cite span{ color: var(--ink-dimmer); }
.testimonial-dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 46px;
}
.dot{
  width: 34px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}
.dot::before{
  content: "";
  width: 34px; height: 2px;
  background: var(--hair-strong-lt);
  transition: background .3s;
}
.dot.active::before{ background: var(--gold); }

/* =========================================================
   CASE STUDIES
   ========================================================= */
.case-studies{ padding: 130px 24px; }
.case-grid{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hair-lt);
  border: 1px solid var(--hair-lt);
}
.case-card{
  background: var(--surface);
  padding: 40px;
  position: relative;
  transition: background .3s;
}
.case-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.case-card:hover{ background: var(--surface-2); }
.case-card:hover::before{ transform: scaleX(1); }
.case-client{
  font-size: 12px;
  color: var(--gold-dim);
  margin-bottom: 16px;
}
.case-headline{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 26px;
}
.case-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.case-stats > div{ min-width: 120px; }
.case-stats span{
  display: block;
  font-size: 24px;
  color: var(--gold-dim);
}
.case-stats small{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-dim);
  max-width: 22ch;
  line-height: 1.4;
}
.case-cta{
  max-width: var(--container);
  margin: 44px auto 0;
  padding: 0 0;
  text-align: right;
}

/* =========================================================
   APEX ACQUISITION SYSTEM
   ========================================================= */
.apex{
  position: relative;
  padding: 140px 24px;
  background: var(--black-2);
  overflow: hidden;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.apex-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.apex-bg img{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.apex-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--black-2) 0%, rgba(12,12,13,0.55) 40%, var(--black-2) 100%);
}
.apex-inner{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.apex h2{
  font-size: clamp(32px, 4.6vw, 54px);
  margin-bottom: 22px;
}
.apex-intro{
  max-width: 680px;
  margin: 0 auto 70px;
  color: var(--text-dim);
  font-size: 17px;
}
.apex-chart-wrap{ position: relative; margin-bottom: 60px; text-align: left; }
.apex-chart{
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -40px;
  /* the peak node sits ON the viewBox edge (cx=1000, r=9): without this,
     half the circle is clipped and it reads as a rendering bug */
  overflow: visible;
}
.apex-baseline{ stroke: var(--hair-strong); stroke-width: 1; }
.apex-line{
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1900;
  stroke-dashoffset: 1900;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.apex.in-view .apex-line{ stroke-dashoffset: 0; }
.apex-node{
  fill: var(--black-2);
  stroke: var(--gold);
  stroke-width: 2;
  opacity: 0;
  transition: opacity .4s ease;
}
.apex.in-view .apex-node{ opacity: 1; transition-delay: 1.2s; }
.apex-peak{
  fill: var(--gold);
  opacity: 0;
  transition: opacity .4s ease;
}
.apex.in-view .apex-peak{ opacity: 1; transition-delay: 1.9s; }
.apex-stages{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 20px;
}
.stage-num{
  display: block;
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 14px;
}
.apex-stage h3{
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 600;
}
.apex-stage p{
  font-size: 14px;
  color: var(--text-dim);
}
.apex > .btn{ position: relative; z-index: 1; }

/* =========================================================
   LOGO WALL
   ========================================================= */
.logo-wall{
  padding: 80px 0;
  background: var(--surface-2);
}
.logo-track{
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logo-set{
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 0 12px;
  animation: scrollLogos 32s linear infinite;
  vertical-align: top;
}
@keyframes scrollLogos{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .logo-set{ animation: none; }
  .logo-track{ overflow-x: auto; white-space: nowrap; }
  /* avoid showing a redundant duplicate row when there is no scroll motion */
  .logo-set[aria-hidden="true"]{ display: none; }
}
.logo-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  min-width: 190px;
  padding: 16px 30px;
  border: 1px solid var(--hair-lt);
  border-radius: var(--radius);
  /* Filled neutral chip, not transparent-on-page: the client logo set is a
     mix of dark and light-only artwork (SAGE's is white-on-transparent), so
     a mid-tone card is what keeps every logo visible without editing any
     asset — a pure white chip would make the white logo disappear. */
  background: #f7f5ec;
  transition: border-color .3s, background .3s;
}
.logo-item:hover{
  border-color: var(--hair-strong-lt);
  background: #efece0;
}
.logo-set img{
  height: 48px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.88;
  transition: opacity .3s, filter .3s;
}
.logo-item:hover img{
  filter: none;
  opacity: 1;
}
/* SAGE's supplied asset (SAGE-Wht-Logo-1024x1024.png) is a white mark on a
   transparent ground — the one logo in this set with no dark pixels at all,
   so the generic grayscale treatment above (and "filter:none" on hover)
   renders it essentially invisible against a light chip. Inverted instead,
   at rest and on hover, so it reads as a dark badge like every other logo
   here. No other logo in the set needs this; the source PNG is untouched. */
.logo-set img[src*="SAGE-Wht-Logo"],
.logo-set img[src*="thomas-solar"]{
  filter: invert(1) grayscale(1) contrast(1.15);
  opacity: 0.88;
}
.logo-item:hover img[src*="SAGE-Wht-Logo"],
.logo-item:hover img[src*="thomas-solar"]{
  filter: invert(1);
  opacity: 1;
}

/* =========================================================
   ACQUISITION AUDIT (light contrast beat)
   ========================================================= */
.audit{
  background: var(--white);
  color: var(--ink);
  padding: 130px 24px;
}
.audit-inner{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.aeo-block{
  font-size: 13px;
  color: #555;
  max-width: 640px;
  margin: 44px auto 0;
  line-height: 1.6;
  font-family: var(--font-alt);
}
.audit h2{
  color: var(--ink);
  font-size: clamp(32px, 4.4vw, 50px);
  margin-bottom: 22px;
}
.audit-body{
  color: #333;
  font-size: 17px;
  max-width: 56ch;
  margin: 0 auto 36px;
}
.audit-slots{
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.slot{
  width: 26px; height: 10px;
  border: 1px solid var(--ink);
  border-radius: 1px;
}
.slot.filled{ background: var(--ink); }
.audit-slots small{
  margin-left: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #555;
}

/* =========================================================
   LION'S SHARE
   ========================================================= */
.lions-share{
  background: var(--surface-2);
  padding: 110px 24px;
  text-align: center;
}
.lions-share-inner{ max-width: 620px; margin: 0 auto; }
.lions-share h2{ font-size: clamp(28px, 3.8vw, 42px); margin-bottom: 18px; }
.lions-share p{ color: var(--ink-dim); font-size: 16px; margin-bottom: 32px; }

/* =========================================================
   FINAL CTA + FORM
   ========================================================= */
.final-cta{
  background: var(--surface);
  padding: 120px 24px;
  border-top: 1px solid var(--hair-lt);
}
.final-cta-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.final-cta-copy h2{
  font-size: clamp(32px, 4.6vw, 50px);
  margin-bottom: 22px;
}
.final-cta-copy p{
  color: var(--ink-dim);
  font-size: 17px;
  max-width: 46ch;
}
.final-form{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.final-form label{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.final-form label.full{ grid-column: 1 / -1; }
.final-form input,
.final-form textarea{
  background: var(--surface-2);
  border: 1px solid var(--hair-strong-lt);
  color: var(--ink);
  padding: 14px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border-radius: var(--radius);
  min-height: 44px;
  transition: border-color .2s;
}
.final-form textarea{ min-height: 100px; resize: vertical; }
.final-form input:focus, .final-form textarea:focus{
  border-color: var(--gold);
  outline: none;
}
.final-form input::placeholder, .final-form textarea::placeholder{ color: var(--ink-dimmer); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--surface-2);
  border-top: 1px solid var(--hair-lt);
  padding: 50px 24px 40px;
  text-align: center;
}
.footer-logo{
  height: 44px;
  width: auto;
  margin: 0 auto 18px;
  opacity: 0.85;
}
.footer-contact{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--ink-dimmer);
}
.footer-contact a{
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  padding: 6px 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.footer-contact a:hover{ color: var(--ink); border-color: var(--gold); }
.footer-sign{
  font-family: var(--font-alt);
  font-style: italic;
  color: var(--ink-dim);
  font-size: 14px;
  margin-bottom: 10px;
}
.footer-note{
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-dimmer);
}

/* =========================================================
   Reveal-on-scroll baseline states
   ========================================================= */
[data-reveal], [data-reveal-lines] .line, [data-split-reveal]{
  opacity: 0;
  transform: translateY(18px);
}
.revealed[data-reveal],
[data-reveal-lines] .line.revealed,
[data-split-reveal].revealed{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-lines] .line, [data-split-reveal]{
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .proof-inner{ grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .bento{ grid-template-columns: repeat(2, 1fr); }
  .case-grid{ grid-template-columns: 1fr; }
  .apex-stages{ grid-template-columns: 1fr; gap: 28px; }
  .final-cta-inner{ grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 860px){
  .main-nav{ display: none; }
  .header-inner .btn-nav{ display: none; }
  .nav-toggle{ display: block; margin-left: auto; }
}

@media (max-width: 640px){
  .bento{ grid-template-columns: 1fr; }
  .proof-inner{ grid-template-columns: 1fr 1fr; }
  .field-row{ grid-template-columns: 1fr; }
  .case-card{ padding: 30px 24px; }
  .services, .case-studies, .apex, .final-cta, .positioning, .audit, .lions-share{ padding-left: 20px; padding-right: 20px; }
  .header-inner{ padding: 14px 16px; }
  .hero{ padding-left: 20px; padding-right: 20px; }
}

/* =========================================================
   SHOWCASE LAYER — particle lion, marquees, kinetic type,
   apex cinema, card glow. Everything below is progressive
   enhancement on top of the base page.
   ========================================================= */

html{ scroll-padding-top: 84px; }

/* ---------- Hero static fallback lion ----------
   Shows the real BLD lion mark, faint, right of the headline whenever the
   WebGL particle build never mounts (reduced motion, no WebGL, slow mount).
   The particle system fades it out the moment it takes over the same spot. */
.hero-fallback{
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 4%;
  width: min(38vw, 480px);
  aspect-ratio: 552 / 228;
  transform: translateY(-58%);
  background: url("../assets/img/Black-Lion-Digital-Logo.png") no-repeat top center / 100% auto;
  opacity: 0.14;
  pointer-events: none;
  transition: opacity 1s ease;
}
.hero.webgl-on .hero-fallback{ opacity: 0; }
@media (max-width: 768px){
  .hero-fallback{
    top: 16%;
    right: 50%;
    transform: translateX(50%);
    width: min(60vw, 300px);
    opacity: 0.1;
  }
}

/* ---------- Hero 3D stage ---------- */
.hero-stage{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease .1s;
}
.hero-stage.mounted{ opacity: var(--stage-o, 0.9); }
.hero-stage canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.hero.webgl-on #radarCanvas{ opacity: 0.45; transition: opacity 1s ease; }
.hero-content{ z-index: 2; }

/* ---------- Marquee dividers ---------- */
.marquee{
  overflow: hidden;
  padding: 30px 0 36px;
  background: var(--surface);
  border-top: 1px solid var(--hair-lt);
  border-bottom: 1px solid var(--hair-lt);
}
.marquee-track{
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}
.mq-item{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(5,5,5,0.5);
}
.mq-item em{
  font-style: normal;
  color: var(--gold);
  /* gold fill alone measures 1.86:1 on white — decorative and aria-hidden,
     but the dim-gold edge keeps the word defined at any glance distance */
  -webkit-text-stroke: 1px var(--gold-dim);
}
.marquee-gold{
  background: var(--gold);
  border-color: var(--gold);
}
.marquee-gold .mq-item{
  color: var(--ink);
  -webkit-text-stroke: 0;
}
/* static fallback (no GSAP / reduced motion): let it sit still, clipped */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ transform: none !important; }
}

/* ---------- Gold head rules ---------- */
.head-rule{
  display: block;
  width: 88px;
  height: 3px;
  margin-top: 22px;
  background: var(--gold);
  transform-origin: left;
}

/* ---------- Character-split headings ---------- */
[data-chars] .w{
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
[data-chars] .ch{
  display: inline-block;
  will-change: transform;
}

/* ---------- Apex cinema block ---------- */
.apex{ padding: 0 0 130px; }
.apex-hero{
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.apex-media{
  position: absolute;
  inset: 0;
  background: var(--black-2);
}
.apex-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
.apex-media-shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5,5,5,0.93) 0%, rgba(5,5,5,0.6) 42%, rgba(5,5,5,0.05) 72%),
    linear-gradient(to bottom, rgba(12,12,13,0.4) 0%, transparent 22%, transparent 72%, var(--black-2) 100%);
}
.apex-hero-inner{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 150px 24px 130px;
  width: 100%;
}
.apex-kicker{
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin-bottom: 20px;
}
.apex-hero h2{
  text-align: left;
  max-width: 560px;
  margin-bottom: 0;
}
.apex-hero .apex-intro{
  text-align: left;
  margin: 24px 0 0;
  max-width: 520px;
}
.apex-system{ padding: 96px 24px 0; }

/* scrub-driven chart: kill the class-transition fallback when GSAP owns it */
html.gsap .apex-line{ transition: none; }
html.gsap .apex-node,
html.gsap .apex-peak{ transition: opacity .35s ease; }

/* ---------- Card cursor glow (GSAP tilt adds --mx/--my) ---------- */
html.gsap .case-card,
html.gsap .bento-card{
  background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(227,186,28,0.10), transparent 65%);
}

@media (max-width: 768px){
  .apex-hero{ min-height: 0; }
  .apex-hero-inner{ padding: 110px 24px 90px; }
  .apex-video{ object-position: 78% center; }
  .apex-media-shade{
    background:
      linear-gradient(100deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.68) 55%, rgba(5,5,5,0.3) 100%),
      linear-gradient(to bottom, rgba(12,12,13,0.5) 0%, transparent 25%, transparent 70%, var(--black-2) 100%);
  }
  .apex-system{ padding-top: 70px; }
  .marquee{ padding: 20px 0 26px; }
}