#masthead,#masthead *,.site-header,.site-header *,.entry-title,.page-header,.ast-page-title-bar,.ast-breadcrumbs-wrapper,h1.entry-title,.site-footer,.site-footer *,#colophon,#colophon *,.ast-footer-copyright{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;}.ast-above-header-wrap{display:none!important;}body,html,#page,.site{background:#050507!important;}


:root {
  --bdm-container: min(1440px, calc(100vw - 48px));
  --bg: #0a0f1f;
  --bg2: #0d1426;
  --amber: #FF8C00;
  --amber2: #FFA500;
  --amber3: #FF6B00;
  --amberDim: rgba(255,140,0,0.08);
  --amberGlow: rgba(255,140,0,0.15);
  --white: #F0EDE8;
  --muted: rgba(240,237,232,0.45);
  --dimmer: rgba(240,237,232,0.2);
  --border: rgba(255,140,0,0.12);
  --borderHover: rgba(255,140,0,0.35);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* ---- Shared brand foundation (sampled from the real logo assets) ----
     Blue matches the established --bdm-blue (#2E8BFF) used later in this
     file and in compound.css. Navy sampled from brand-mark-neon.png
     background corners (avg ~#09132D). */
  --bdm-bg-deep: #050810;
  --bdm-bg: #0a0f1f;
  --bdm-surface: #10182e;
  --bdm-surface-raised: #161f3a;
  --bdm-white: #F0EDE8;
  --bdm-muted: rgba(240,237,232,0.5);
  --bdm-orange: #FF8C00;
  --bdm-blue: #2E8BFF;
  --bdm-blue-bright: #6FD8FF;
  --bdm-border: rgba(150,180,255,0.14);
  --bdm-glow-orange: rgba(255,140,0,0.35);
  --bdm-glow-blue: rgba(46,139,255,0.35);
  --bdm-cyan: #58C9FF;
  --bdm-glass: rgba(12, 14, 24, 0.72);
  --bdm-glass-strong: rgba(9, 11, 19, 0.88);
  --bdm-line: rgba(255, 255, 255, 0.085);
  --bdm-shadow-contact: 0 8px 18px rgba(0, 0, 0, 0.30);
  --bdm-shadow-depth: 0 24px 70px rgba(0, 0, 0, 0.42);
  --bdm-shadow-atmosphere: 0 0 90px rgba(46, 139, 255, 0.055);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
html {
  scroll-behavior: smooth;
  background: var(--bg) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--bdm-orange) var(--bdm-bg-deep);
  scrollbar-gutter: stable;
  /* Disables Android Chrome/Edge's automatic text-size inflation ("font
     boosting"), which scales certain text up based on column-width
     heuristics that desktop DevTools device emulation does not reproduce --
     one of the concrete reasons real-device rendering and F12 emulation can
     disagree on exactly the same CSS. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Branded scrollbar (Chromium / Safari). Firefox uses the standard
   properties on html above. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track {
  background: var(--bdm-bg-deep);
  border-left: 1px solid rgba(46,139,255,.16);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bdm-orange), var(--bdm-blue));
  border-radius: 999px;
  border: 2px solid var(--bdm-bg-deep);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--amber2), var(--bdm-blue-bright));
  box-shadow: 0 0 6px rgba(255,140,0,.45);
}

body {
  background: var(--bg) !important;
  color: var(--white) !important;
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Force WP theme override */
.wp-site-blocks, .entry-content, .wp-block-post-content, main, #primary, #content, #page, .site, .site-content { background: var(--bg) !important; }


/* ── SCANLINE OVERLAY ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 999;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  pointer-events: none;
}

/* ── NOISE OVERLAY ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 998;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

/* ── NAV ── */
/* position/left/right/z-index are locked with !important so no future
   breakpoint-scoped rule can silently detach the header from the viewport
   or pull it into another element's flex/grid flow; `top` stays unlocked
   since body.admin-bar below legitimately needs to shift it. */
nav {
  position: fixed !important; top: 0; left: 0 !important; right: 0 !important; z-index: 100 !important;
  padding: 1.5rem 4rem;
  display: flex; justify-content: space-between; align-items: center;
  transition: all .5s;
}
/* WordPress admin toolbar is also position:fixed at top:0 for logged-in
   users; without this our nav sits underneath it instead of below it. */
body.admin-bar nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar nav { top: 46px; }
}
nav.stuck {
  background: rgba(5,5,7,0.92);
  backdrop-filter: blur(24px);
  padding: 1rem 4rem;
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--white);
  text-transform: uppercase;
}
.nav-logo em { color: var(--amber); font-style: normal; }
.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(240,237,232,.68);
  text-decoration: none;
  transition: color .25s;
}
.nav-links a:hover { color: var(--amber); }
.nav-cta {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--amber);
  padding: .55rem 1.4rem;
  text-decoration: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: all .25s;
}

/* ── HERO ── */
#hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(6.5rem, 14vh, 9rem) 2rem clamp(3rem, 7vh, 4.5rem);
  position: relative; overflow: hidden;
}

.hero-container {
  position: relative; z-index: 2;
  width: 100%;
  max-width: min(1440px, calc(100vw - 64px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.hero-content { min-width: 0; }
.hero-visual-col {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* animated grid */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,140,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  transform-origin: center center;
  animation: gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse {
  0%, 100% { opacity: .6; background-size: 80px 80px; }
  50% { opacity: 1; background-size: 82px 82px; }
}

/* radial glow */
.hero-glow {
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,0,0.12) 0%, transparent 65%);
  top: -200px; right: -200px;
  animation: glowDrift 12s ease-in-out infinite;
}
@keyframes glowDrift {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(-60px, 80px); }
}
.hero-glow2 {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,0,0.08) 0%, transparent 70%);
  bottom: -100px; left: 10%;
  animation: glowDrift 15s ease-in-out infinite reverse;
}

/* horizontal scan line */
.hero-scan {
  position: absolute;
  left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: .4;
  animation: scanDown 6s linear infinite;
}
@keyframes scanDown {
  0% { top: 0%; opacity: 0; }
  10% { opacity: .4; }
  90% { opacity: .4; }
  100% { top: 100%; opacity: 0; }
}

/* corner marks */
.corner {
  position: absolute;
  width: 40px; height: 40px;
}
.corner::before, .corner::after {
  content: ''; position: absolute;
  background: var(--amber); opacity: .5;
}
.corner::before { width: 100%; height: 1px; top: 0; left: 0; }
.corner::after { width: 1px; height: 100%; top: 0; left: 0; }
.c-tl { top: 6rem; left: 4rem; }
.c-tr { top: 6rem; right: 4rem; transform: scaleX(-1); }
.c-bl { bottom: 6rem; left: 4rem; transform: scaleY(-1); }
.c-br { bottom: 6rem; right: 4rem; transform: scale(-1); }

.hero-status {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 2rem;
  opacity: 0; animation: fadeIn .6s .2s forwards;
}
.hero-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fadeIn { to { opacity: 1; } }

.hero-title {
  font-family: var(--font-display);
  /* Upper bound lowered from 8rem so the two-line headline fits its column
     without clipping. At 1920 the old clamp resolved to 120px, where the text
     measured 974px inside an 836px box and .hero-title's overflow:hidden simply
     cut it off -- "Your Company." was already being clipped there before the
     lines were merged. Nothing changes at 1440 and below. */
  font-size: clamp(3.5rem, min(8.5vw, 10vh), 6.1rem);
  line-height: .92;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
}
.hero-title .line { white-space: nowrap; }
.hero-title .line {
  display: block; overflow: hidden;
  opacity: 0; transform: translateY(100%);
  animation: lineReveal .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-title .line:nth-child(1) { animation-delay: .3s; }
.hero-title .line:nth-child(2) { animation-delay: .45s; }
.hero-title .line:nth-child(3) { animation-delay: .6s; }
@keyframes lineReveal { to { opacity: 1; transform: translateY(0); } }

.hero-sub-row {
  display: flex; flex-direction: column; gap: 1.25rem;
  align-items: flex-start;
  margin-top: 2.25rem;
  opacity: 0; animation: fadeIn .8s 1s forwards;
}
.hero-desc {
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 300;
  color: rgba(240,237,232,.78); line-height: 1.8;
  max-width: 480px;
}
.hero-cta-group { display: flex; gap: 1rem; align-items: center; }
.btn-primary {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bg); background: var(--amber);
  padding: .9rem 2rem;
  text-decoration: none;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: all .3s; display: inline-block;
}
.btn-primary:hover { background: var(--amber2); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,140,0,0.3); }
.btn-ghost {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--borderHover);
  padding: .9rem 2rem; text-decoration: none;
  transition: all .3s; display: inline-block;
}
.btn-ghost:hover { background: var(--amberDim); transform: translateY(-2px); }

.hero-metrics {
  display: flex; flex: 0 0 auto;
  position: relative;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(9,11,19,.82));
  box-shadow: var(--bdm-shadow-contact, 0 8px 18px rgba(0,0,0,.3));
  backdrop-filter: blur(10px);
}
.hero-metrics::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--bdm-blue, #2E8BFF), var(--amber) 60%, var(--amber3));
  opacity: .9;
}
.hero-metrics::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--bdm-spot-x, 50%) var(--bdm-spot-y, 50%), rgba(46,139,255,.12), transparent 55%);
  opacity: 0;
  transition: opacity .3s;
}
.hero-metrics:hover::after { opacity: 1; }
.hero-metric {
  flex: 1 1 0;
  text-align: center;
  padding: 1.1rem 1.1rem;
  border-right: 1px solid rgba(255,255,255,.1);
}
.hero-metric:last-child { border-right: none; }
.hero-metric-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--amber); line-height: 1;
  text-shadow: 0 0 24px rgba(255,140,0,0.35);
  animation: statGlow 4s ease-in-out infinite;
}
.hero-metric-label {
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(240,237,232,.62); margin-top: .35rem; max-width: 110px;
  margin-inline: auto;
  line-height: 1.45;
}

/* Short "laptop height" viewports (e.g. 1280x720, 1366x768): the fixed nav
   has no reserved clearance above the hero, and the headline/CTA stack can
   exceed the viewport at these heights unless spacing is tightened. */
@media (max-height: 820px) and (min-width: 901px) {
  #hero { padding: 6.5rem 2rem 3rem; }
  .hero-title { font-size: clamp(3rem, min(8vw, 8.5vh), 6.5rem); }
  .hero-status { margin-bottom: 1rem; }
  .hero-sub-row { margin-top: 1.5rem; gap: 1.1rem; }
}

/* ── TICKER ── */
#ticker {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden; position: relative;
  background: rgba(255,140,0,0.03);
}
.ticker-track {
  display: flex; gap: 0; white-space: nowrap;
  animation: tickerRoll 30s linear infinite;
}
.ticker-item {
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 0 3rem;
  display: flex; align-items: center; gap: 1rem;
  line-height: 1;
}
.ticker-item em { color: var(--amber); font-style: normal; }
.ticker-sep { color: var(--amber); opacity: .4; }
@keyframes tickerRoll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── GROW STRIP / TYPEWRITER CTA ── */
.grow-strip {
  padding: 6rem 4rem; text-align: center;
  position: relative; overflow: hidden;
  /* Darker and calmer than the sitewide --bg navy: a near-black vertical
     gradient with only a whisper of blue-black lift at the center, sitting
     on top of the existing #grow-strip{background-color:rgba(5,5,7,.955)
     !important} rule declared later in this file (that !important always
     wins the base tint; these gradients paint over it). No visible gray
     wash, no large color clouds -- this replaces the previous ambient-smoke
     approach with restrained, static depth. */
  background-image:
    radial-gradient(ellipse 55% 70% at 50% 45%, rgba(12,17,26,.28), transparent 72%),
    linear-gradient(180deg, #07090d 0%, #05070a 55%, #08090d 100%);
}
.grow-strip-bg {
  position: absolute; inset: 0; pointer-events: none;
  /* Top handoff: a static, faint cyan-to-amber residue confined to the
     section's own top edge (max 120px) -- not a repeating cloud -- so the
     hero's energy reads as having settled into darkness here, rather than
     the same atmosphere continuing. Layered over the existing faint grid
     texture. */
  background-image:
    linear-gradient(180deg, rgba(88,201,255,.05) 0%, rgba(255,140,0,.035) 55%, transparent 100%),
    linear-gradient(rgba(255,140,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.04) 1px, transparent 1px);
  background-size: 100% 120px, 60px 60px, 60px 60px;
  background-position: top, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
}
.grow-strip-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.grow-strip-eyebrow {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.grow-strip-rule { display: block; width: 40px; height: 1px; background: var(--amber); }
.grow-strip-headline {
  --grow-strip-size: clamp(2.5rem, 6vw, 6rem);
  font-family: var(--font-display); font-size: var(--grow-strip-size);
  line-height: .95; letter-spacing: .01em; color: var(--white);
  /* Reserve both lines up front so the typewriter caret never shifts the
     layout as the phrase types and deletes. */
  min-height: calc(2 * var(--grow-strip-size) * .95);
}
.grow-strip-line { display: block; }
.grow-strip-dynamic { color: var(--amber); white-space: nowrap; word-break: keep-all; overflow-wrap: normal; hyphens: none; }
.grow-strip-sub {
  font-family: var(--font-body); font-size: .95rem; color: var(--muted);
  margin-top: 2rem; line-height: 1.8; max-width: 500px; margin-left: auto; margin-right: auto;
}
.grow-strip-actions { margin-top: 3rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── GROW STRIP: ATMOSPHERE + FRAME (visual refinement, additive only) ──
   Every element below is decorative (pointer-events:none, negative or
   zero z-index) and sits behind .grow-strip-inner's real content, which
   already renders on top by source order. Nothing here touches wording,
   #typewriter-line's text/timing, the reveal timeline, the CTAs' labels
   or links, or the section's height -- confirmed no JS file changed and
   no DOM structure changed for this pass. */

/* Restrained glass/optical field: cool on one side, warm on the other,
   reduced further from the previous pass so it reads as a whisper of
   depth rather than a cloud competing with the text. No bright frosted
   glass, no backdrop-filter. Static -- no animation on this element. */
#grow-strip::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 3vw, 42px);
  pointer-events: none;
  z-index: 0;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 42% 68% at 22% 52%, rgba(88,201,255,.035), transparent 72%),
    radial-gradient(ellipse 44% 70% at 78% 48%, rgba(255,140,0,.045), transparent 74%),
    linear-gradient(180deg, rgba(8,11,18,.14), rgba(5,7,12,.04));
  border: 1px solid rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015), 0 30px 90px rgba(0,0,0,.22);
}
/* Soft horizon glow along the section's lower edge -- kept, per approval. */
#grow-strip::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 0; height: 1px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,.28), rgba(88,201,255,.14), transparent);
  box-shadow: 0 0 24px 1px rgba(255,140,0,.10);
}

/* Corner calibration ticks -- smaller, and only two, not a repeat of the
   hero's four-corner frame. Anchored to .grow-strip-inner (the eyebrow
   itself stays unpositioned). Kept, per approval, as "minimal
   corner/calibration details". */
.grow-strip-eyebrow::before,
.grow-strip-eyebrow::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid rgba(255,140,0,.3);
  pointer-events: none;
}
.grow-strip-eyebrow::before { top: -14px; left: -6px; border-width: 1px 0 0 1px; }
.grow-strip-eyebrow::after  { bottom: -14px; right: -6px; border-width: 0 1px 1px 0; }

/* Eyebrow rules: gradient fade toward the text instead of a flat bar, one
   side carrying a restrained cyan lean. Kept, per approval. The separate
   micro-particle dot previously added at each rule's outer end is removed
   (not on the approved keep-list, and one fewer moving-adjacent accent). */
.grow-strip-eyebrow .grow-strip-rule:first-child { background: linear-gradient(90deg, rgba(88,201,255,.55), var(--amber)); }
.grow-strip-eyebrow .grow-strip-rule:last-child  { background: linear-gradient(90deg, var(--amber), rgba(88,201,255,.4)); }

/* Typewriter line: restrained amber-to-gold gradient fill + a very soft
   edge glow. Text content and timing are entirely untouched -- this only
   changes how the existing text paints. filter:drop-shadow is a
   different property than the text-shadow the scroll-reveal timeline
   animates on this same element, so the two never collide, and the
   caret (#typewriter-line::after) sets its own opaque color, so it is
   unaffected by this element's color:transparent. */
#typewriter-line {
  background: linear-gradient(90deg, #ff8a00 0%, #ffad22 50%, #ff7a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,140,0,.14));
}
/* Thin energy baseline settled under the whole dynamic-headline area
   (fixed width, not measured per-phrase -- a per-frame text-width
   measurement is exactly what this project avoids). */
.grow-strip-headline { position: relative; }
.grow-strip-headline::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: min(46%, 220px); height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,140,0,.4), transparent);
  opacity: .55;
}

/* CTA group: a soft glass plate behind both buttons, plus a restrained
   warm/cool lean on each button's own resting shadow. Resting state
   only -- no new hover behaviour, .btn-primary/.btn-ghost hover rules
   are untouched, and this is scoped to #grow-strip so the identical
   classes in the hero are unaffected. */
.grow-strip-actions { position: relative; z-index: 1; }
.grow-strip-actions::before {
  content: "";
  position: absolute;
  inset: -14px -18px;
  z-index: -1;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(5,7,12,.12));
  border: 1px solid rgba(255,255,255,.03);
  pointer-events: none;
}
#grow-strip .btn-primary { box-shadow: 0 10px 34px -8px rgba(255,140,0,.4); }
#grow-strip .btn-ghost   { box-shadow: 0 0 0 1px rgba(88,201,255,.10) inset; }

@media (max-width: 900px) {
  /* Mobile: drop the nonessential calibration accents (corner ticks), keep
     the top handoff/field/baseline/typewriter treatments (lightweight, and
     they aid rather than hurt legibility). Also caps the CTA plate's inset
     so it cannot push the group past the section's own side padding into
     horizontal overflow. */
  .grow-strip-eyebrow::before,
  .grow-strip-eyebrow::after { display: none; }

  #grow-strip::before { inset: 10px; border-radius: 12px; }
  .grow-strip-actions::before { inset: -10px -8px; }
}

/* ── SECTIONS ── */
section { padding: 10rem 4rem; position: relative; }

.s-label {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--amber); display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
.s-label::before {
  content: '';
  display: block; width: 40px; height: 1px;
  background: var(--amber);
}
.s-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  line-height: .92; letter-spacing: .01em;
  margin-bottom: 2rem;
}
.s-title em { color: var(--amber); font-style: normal; }
.expertise-intro { font-size: .95rem; color: var(--muted); line-height: 1.8; max-width: 500px; margin-bottom: 2.5rem; }
/* Moved off an inline style: as inline CSS it beat every media query, so
   phones were stuck with 10rem/4rem desktop padding. */
.expertise-section { background: var(--bg2); padding: 7rem 4rem 7.5rem; position: relative; overflow: hidden; }
.expertise-inner { position: relative; max-width: 1200px; margin: 0 auto; }
/* Scoped heading treatment: the shared .s-title clamp (up to 7.5rem) was
   sized for shorter headings elsewhere on the page. At this section's phrase
   length it grew wide enough, relative to the 1200px inner cap, to force
   Chrome's per-letter flicker spans (.wd-letter, display:inline-block) to
   wrap mid-word. The clamp below keeps "Your Digital Growth Engine" on one
   line at every tested desktop width (1920/1440/1280) with room to spare, so
   it never needs to wrap. The two phrases are real spans (not a mid-heading
   <br>) so the mobile rule below can move only the second phrase down. */
.expertise-title { font-size: clamp(2.5rem, 3.6vw, 3.6rem); margin-bottom: 1rem; }
.expertise-title-main { color: var(--white); }
.expertise-title-accent { color: var(--amber); }

/* Protected phrases: never break mid-word or mid-phrase (MEASURE, GROWTH STORY, GROW PROFITABLY, etc.) */
.bdm-protect {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* ── RESULTS ── */
#results {
  background: var(--bg);
  overflow: hidden;
}
.results-inner { max-width: 1400px; margin: 0 auto; }
.stats-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 6rem;
}
.stat-box {
  background: var(--bg);
  padding: 3rem 2rem;
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(40px);
  transition: opacity .6s, transform .6s, background .3s;
}
.stat-box.reveal { opacity: 1; transform: translateY(0); }
.stat-box:hover { background: var(--amberDim); }
.stat-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0; transition: opacity .3s;
}
.stat-box:hover::before { opacity: 1; }
.stat-number {
  font-family: var(--font-display); font-size: 5rem;
  line-height: 1; color: var(--amber);
  text-shadow: 0 0 40px rgba(255,140,0,0.25);
  margin-bottom: .5rem;
}
.stat-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }

/* proof cards */
.proof-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.proof-card {
  border: 1px solid var(--border);
  padding: 2rem;
  position: relative; overflow: visible;
  transition: all .4s;
  opacity: 0; transform: translateX(-50px);
}
.proof-card:nth-child(even) { transform: translateX(50px); }
.proof-card.reveal { opacity: 1; transform: translateX(0); }
.proof-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--amberDim); opacity: 0;
  transition: opacity .3s;
}
.proof-card:hover::before { opacity: 1; }
.proof-card:hover { border-color: var(--borderHover); }
.proof-metric {
  font-family: var(--font-display); font-size: 3rem;
  color: var(--amber); margin-bottom: .5rem; line-height: 1;
  overflow: visible; white-space: nowrap;
}
.proof-desc { font-size: .85rem; color: var(--muted); line-height: 1.7; }
.proof-tag {
  font-family: var(--font-mono); font-size: .55rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--border);
  padding: .25rem .7rem; display: inline-block; margin-bottom: 1rem;
  white-space: normal; line-height: 1.4;
}

/* ── WHY ── */
#why { background: var(--bg2); overflow: hidden; }
.why-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8rem; align-items: center; max-width: 1400px; margin: 0 auto;
}

/* The shared .s-title clamp (up to 7.5rem) was sized for a full-width
   column; this section's text column is only ~500-640px (half of 1400px
   minus the 8rem gap), so at that size "Direct Work. No Agency Layers."
   had nowhere to go but an ugly, oversized wrap. This keeps it a clean
   2-line break at every tested desktop width. The em is forced to its
   own line (scoped to #why only -- the shared .s-title em elsewhere stays
   inline) so the break is always exactly "Direct Work." / "No Agency
   Layers.", never a random wrap that could land anywhere in between. */
#why .s-title {
  font-size: clamp(2.2rem, 3.2vw, 3.6rem);
  max-width: 480px;
}
#why .s-title em { display: block; }
.why-visual { position: relative; height: 600px; }
/* animated terminal-style card stack */
.term-window {
  position: absolute;
  background: rgba(9,9,16,0.95);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  transition: all .5s;
  opacity: 0; transform: translateY(30px);
  overflow: hidden;
}
.term-window.reveal { opacity: 1; transform: none; }
.term-window::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at var(--bdm-spot-x, 50%) var(--bdm-spot-y, 50%), rgba(46,139,255,.10), transparent 58%);
  opacity: 0;
  transition: opacity .3s;
}
.term-window:hover::after { opacity: 1; }
.term-bar {
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .4rem;
}
.term-dot { width: 7px; height: 7px; border-radius: 50%; }
.term-dot.r { background: #ff5f56; }
.term-dot.y { background: #ffbd2e; }
.term-dot.g { background: #27c93f; }
.term-body { padding: 1rem 1.2rem; }
.term-line { font-size: .7rem; line-height: 2; color: var(--muted); }
.term-line .cmd { color: var(--amber); }
.term-line .ok { color: #27c93f; }
.term-line .val { color: var(--white); }

.tw1 { width: 320px; top: 0; left: 0; transition-delay: .1s; }
.tw2 { width: 280px; top: 130px; left: 60px; transition-delay: .25s; z-index: 1; }
.tw3 { width: 300px; top: 280px; left: 20px; transition-delay: .4s; }
.tw4 { width: 260px; top: 400px; left: 80px; transition-delay: .55s; z-index: 1; }

.why-pts { list-style: none; display: flex; flex-direction: column; gap: 0; }
.why-pt {
  padding: 2rem 0; border-bottom: 1px solid var(--border);
  display: flex; gap: 2rem; align-items: flex-start;
  opacity: 0; transform: translateX(40px);
  transition: opacity .5s, transform .5s, border-color .3s;
}
.why-pt.reveal { opacity: 1; transform: translateX(0); }
.why-pt:hover { border-color: rgba(255,140,0,.35); }
.why-pt:nth-child(1) { transition-delay: .05s; }
.why-pt:nth-child(2) { transition-delay: .15s; }
.why-pt:nth-child(3) { transition-delay: .25s; }
.why-pt:nth-child(4) { transition-delay: .35s; }
.why-pt-num {
  font-family: var(--font-display); font-size: 2rem;
  color: var(--amber); opacity: .3; line-height: 1; min-width: 44px;
}
.why-pt-title {
  font-family: var(--font-display); font-size: 1.5rem;
  letter-spacing: .02em; margin-bottom: .4rem;
  transition: color .3s;
}
.why-pt:hover .why-pt-title { color: var(--amber); }
.why-pt:hover .why-pt-num { opacity: .7; }
.why-pt-num { transition: opacity .3s; }
.why-pt-body { font-size: .85rem; color: var(--muted); line-height: 1.75; }

/* ── PROCESS ── */
#process { background: var(--bg); }
.process-inner { max-width: 1400px; margin: 0 auto; }
.process-track {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative; margin-top: 5rem;
}
.process-track::before {
  content: '';
  position: absolute; top: 3rem; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), var(--amber), transparent);
  opacity: .2;
}
.process-step {
  padding: 2rem 2rem 3rem;
  border-right: 1px solid var(--border);
  position: relative;
  opacity: 0; transform: translateY(30px);
  transition: opacity .5s, transform .5s, background .3s, border-color .3s;
  cursor: none;
  overflow: hidden;
}
.process-step:last-child { border-right: none; }
.process-step.reveal { opacity: 1; transform: translateY(0); }
.process-step:nth-child(1) { transition-delay: .05s; }
.process-step:nth-child(2) { transition-delay: .15s; }
.process-step:nth-child(3) { transition-delay: .25s; }
.process-step:nth-child(4) { transition-delay: .35s; }

/* glow sweep on hover */
.process-step::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,140,0,0.07) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.process-step:hover::before { opacity: 1; }
/* top accent bar */
.process-step::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.process-step:hover::after { transform: scaleX(1); }

.process-step:hover { border-color: rgba(255,140,0,0.3); background: rgba(255,140,0,0.03); }
.process-step:hover .ps-num { opacity: .35; }
.process-step:hover .ps-title { color: var(--amber); }
.process-step:hover .ps-dot {
  box-shadow: 0 0 20px 4px rgba(255,140,0,0.7);
  transform: translateX(-50%) scale(1.4);
}

.ps-num {
  font-family: var(--font-display); font-size: 4rem;
  color: var(--amber); opacity: .15; line-height: 1;
  margin-bottom: 1.5rem;
  transition: opacity .3s;
}
.ps-dot {
  position: absolute; top: 2.7rem; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255,140,0,0.6);
  transition: box-shadow .3s, transform .3s;
}
.ps-title {
  font-family: var(--font-display); font-size: 1.6rem;
  letter-spacing: .02em; margin-bottom: .8rem;
  transition: color .3s;
}
.ps-body { font-size: .82rem; color: var(--muted); line-height: 1.75; }

/* ── MORE SERVICES ── */
#more { background: var(--bg2); }
.more-inner { max-width: 1400px; margin: 0 auto; }
.more-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  margin-top: 4rem;
}
.more-item {
  background: var(--bg2);
  padding: 2rem;
  position: relative; overflow: hidden;
  transition: background .3s;
  opacity: 0; transform: translateY(20px);
  transition: background .3s, opacity .5s, transform .5s;
}
.more-item.reveal { opacity: 1; transform: translateY(0); }
.more-item:hover { background: rgba(255,140,0,0.04); }
.more-item::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  background: var(--amber); transform: scaleY(0); transform-origin: top;
  transition: transform .3s;
}
.more-item:hover::after { transform: scaleY(1); }
.more-item-title { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .02em; margin-bottom: .3rem; transition: color .3s; }
.more-item:hover .more-item-title { color: var(--amber); }
.more-item-price { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em; color: var(--amber); margin-bottom: .5rem; }
.more-item-desc { font-size: .8rem; color: var(--muted); line-height: 1.6; }

/* ── CTA ── */
#cta {
  background: var(--bg);
  text-align: center;
  padding: clamp(8rem, 11vw, 11rem) 4rem;
  position: relative; overflow: hidden;
}
.cta-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,140,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cta-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 800px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,140,0,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 900px; margin: 0 auto; }
/* Previous clamp (up to 10rem) forced "Let's Build Your Next" to wrap on
   its own into 2 lines inside the 900px .cta-inner column, and the em's
   forced display:block then added a mandatory 3rd line for "Growth
   Story." regardless of width -- producing an unbalanced 3-line break
   with "Next" isolated alone. Reduced clamp + removed the forced block
   lets the whole phrase wrap naturally at real word boundaries, holding
   a clean 2-line break at every tested desktop width. .bdm-protect (see
   markup) keeps "Growth Story." itself from splitting across those 2
   lines. */
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.2vw, 5.5rem);
  line-height: 1.02; letter-spacing: .01em;
  margin-bottom: 2rem;
}
.cta-title em { color: var(--amber); font-style: normal; }
.cta-sub { font-size: 1rem; color: var(--muted); line-height: 1.8; max-width: 500px; margin: 0 auto 3rem; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; }

/* ── FOOTER ── */
footer {
  background: var(--bg2);
  padding: 3rem 4rem;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
  flex-wrap: wrap; gap: 1rem;
}
.footer-logo { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-logo em { color: var(--amber); font-style: normal; }
.footer-copy { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; color: var(--muted); }
.footer-links { display: flex; gap: 2rem; }
.footer-links a { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--amber); }

/* ── PARALLAX DATA ATTRS ── */
[data-parallax] { will-change: transform; }

/* ── SCROLL REVEAL ── */
.reveal-target {
  opacity: 0; transform: translateY(50px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-target.revealed { opacity: 1; transform: translateY(0); }

/* ── PARALLAX DEPTH ORBS (global, fixed to page flow) ── */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  filter: blur(60px);
}
.orb-a { width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,140,0,0.07) 0%, transparent 70%); }
.orb-b { width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,80,0,0.06) 0%, transparent 70%); }
.orb-c { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,160,0,0.09) 0%, transparent 70%); }
.orb-d { width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,100,0,0.1) 0%, transparent 70%); }

/* ── HERO MOUSE PARALLAX LAYERS ── */
#hero-mouse-deep  { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
#hero-mouse-mid   { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
#hero-mouse-near  { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

/* floating amber lines in hero */
.hero-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,0.4), transparent);
  will-change: transform;
}
.hero-line-v {
  position: absolute;
  width: 1px;
  background: linear-gradient(0deg, transparent, rgba(255,140,0,0.3), transparent);
  will-change: transform;
}

/* ── PARTICLE CANVAS ── */
#particle-canvas {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
}

/* ── SECTION PARALLAX BACKGROUNDS ── */
.section-parallax-bg {
  position: absolute; inset: -20%; pointer-events: none;
  will-change: transform;
}

/* ── PARALLAX TEXT DRIFT ── */
[data-parallax-text] {
  will-change: transform;
  display: block;
}

/* ── TILT CARDS ── */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .1s ease-out;
}

/* ── SCROLL VELOCITY SKEW ── */
.skew-on-scroll {
  will-change: transform;
  transition: transform .4s cubic-bezier(.17,.67,.83,.67);
}

/* ── FLYING MARKETING ICONS ── */
#icon-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.fly-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255,140,0,0.18);
  background: rgba(9,9,16,0.82);
  backdrop-filter: blur(6px);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
  opacity: 0;
  cursor: none;
  box-shadow: 0 0 0 0 rgba(255,140,0,0);
  transition: box-shadow .3s, border-color .3s;
}
.fly-icon svg {
  display: block;
  flex-shrink: 0;
}
/* pulse ring that fires periodically */
.fly-icon.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 1px solid rgba(255,140,0,0.5);
  animation: iconPulseRing .8s ease-out forwards;
}
@keyframes iconPulseRing {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.5); opacity: 0;  }
}
/* data burst line — short amber streak that shoots out */
.fly-icon .burst {
  position: absolute;
  width: 40px; height: 1px;
  background: linear-gradient(90deg, var(--amber), transparent);
  transform-origin: left center;
  opacity: 0;
  animation: burstLine .5s ease-out forwards;
}
@keyframes burstLine {
  0%   { opacity: .8; transform: scaleX(0) rotate(var(--a)); }
  60%  { opacity: .6; transform: scaleX(1) rotate(var(--a)); }
  100% { opacity: 0;  transform: scaleX(1.4) rotate(var(--a)) translateX(10px); }
}
/* stat badge that pops up from icon */
.fly-icon .stat-pop {
  position: absolute;
  top: -28px; left: 50%; transform: translateX(-50%);
  background: var(--amber);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  animation: statPop .6s cubic-bezier(.16,1,.3,1) forwards;
  pointer-events: none;
}
@keyframes statPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.7); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.9); }
}
/* orbit path indicator — tiny dashed circle that appears briefly */
.fly-icon.show-orbit::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(255,140,0,0.2);
  animation: orbitFade 1.5s ease-out forwards;
}
@keyframes orbitFade {
  0%   { opacity: 0; transform: scale(.6) rotate(0deg); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2) rotate(60deg); }
}


/* nav CTA — always dark text, never unreadable */


/* ══════════════════════════════════
   ENHANCEMENTS — GLOWS, LIVE EFFECTS
══════════════════════════════════ */

/* ═══════════════════════════════════════
   CYBORG + FIXES + BIDIRECTIONAL PARALLAX
═══════════════════════════════════════ */

/* Scroll progress bar */
#scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9997;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--amber3), var(--amber), var(--amber2));
  width: 100%;
  box-shadow: 0 0 8px rgba(255,140,0,0.6);
  pointer-events: none;
}

/* Ambient glow */
#ambient-glow {
  position: fixed; width: 600px; height: 600px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,140,0,0.04) 0%, transparent 70%);
  filter: blur(60px);
  transform: translate(-50%, -50%);
  will-change: top, left;
  transition: top 1.2s ease, left 1.2s ease;
}

/* Technical scroll-progress rail — decorative only, desktop/fine-pointer
   only. Not a replacement for the native (or branded) scrollbar. */
.bdm-progress-rail {
  display: none;
  position: fixed;
  top: 96px;
  right: 20px;
  bottom: 48px;
  width: 34px;
  z-index: 40;
  pointer-events: none;
}
@media (min-width: 1201px) and (pointer: fine) {
  .bdm-progress-rail { display: block; }
}
.bdm-progress-track {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: auto;
}
.bdm-progress-track::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,139,255,.15), rgba(255,140,0,.08));
}
.bdm-progress-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  transform-origin: top center;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--bdm-blue-bright), var(--bdm-blue) 45%, var(--bdm-orange) 100%);
  box-shadow: 0 0 8px rgba(46,139,255,.35);
  will-change: transform;
}
.bdm-progress-nodes { position: absolute; inset: 0; }
.bdm-progress-node {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: auto;
}
.bdm-progress-node i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(240,237,232,.28);
  border: 1px solid rgba(255,255,255,.2);
  transition: background .3s, box-shadow .3s, transform .3s;
}
.bdm-progress-node em {
  position: absolute;
  right: 16px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(240,237,232,.65);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .25s, transform .25s;
  background: rgba(5,6,11,.88);
  padding: .25rem .55rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.08);
}
.bdm-progress-rail:hover .bdm-progress-node em,
.bdm-progress-node.is-active em { opacity: 1; transform: translateX(0); }
.bdm-progress-node.is-active i {
  background: var(--bdm-orange);
  box-shadow: 0 0 10px rgba(255,140,0,.6), 0 0 16px rgba(46,139,255,.3);
  transform: scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .bdm-progress-node i,
  .bdm-progress-node em,
  .bdm-progress-fill { transition: none; }
}

/* HUD corners */
.hud-corner {
  position: fixed; pointer-events: none; z-index: 50;
  font-family: var(--font-mono); font-size: .5rem;
  letter-spacing: .15em; color: rgba(255,140,0,0.22); line-height: 2;
}
#hud-tl { top: 1.2rem; left: 1.2rem; }
#hud-br { bottom: 1.2rem; right: 1.2rem; text-align: right; }
.hud-line { display: block; }
.hud-blink { animation: blink 2s infinite; }

/* Glitch scan bar */
#glitch-scan {
  position: fixed; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,.5), rgba(66,245,197,.4), rgba(255,140,0,.5), transparent);
  pointer-events: none; z-index: 997; top: 50%; opacity: 0;
  box-shadow: 0 0 6px rgba(255,140,0,0.4);
}

/* Data stream */
#data-stream {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.ds-col {
  position: absolute; top: -200px; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,140,0,0.25) 50%, transparent 100%);
  animation: dsfall linear infinite;
}
@keyframes dsfall { to { top: 110vh; } }

/* Page loader */
#page-loader.done { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .4s, visibility .4s; }
#page-loader {
  position: fixed; inset: 0; background: var(--bg); z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  transition: opacity .3s ease .7s, visibility .3s ease .7s;
}
.loader-logo { font-family: var(--font-display); font-size: 2.5rem; color: var(--white); }
.loader-logo em { color: var(--amber); font-style: normal; }
.loader-bar-wrap { width: 200px; height: 2px; background: rgba(255,255,255,0.08); }
.loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--amber3), var(--amber2)); box-shadow: 0 0 8px rgba(255,140,0,.6); transition: width .7s cubic-bezier(.16,1,.3,1); }
.loader-text { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---- Hero-fingerprint intro (globally enabled -- see
   $bdm_intro_global_enabled in templates/render.php; ?introtest=1 still
   forces a replay). See templates/intro-test.php and
   templates/intro-test-bootstrap.php. Markup is server-rendered and
   present in the initial HTML, so the fingerprint and its ridge
   animation exist and animate from first paint with zero dependency on
   the deferred GSAP/ScrollTrigger/homepage.js chain, which is what
   caused the ~1.8s flash in the pre-approval version: init() only
   ran after DOMContentLoaded, which was itself blocked behind that whole
   external script chain. html.bdm-introtest is still added by the
   existing inline script in render.php for CSS scoping; the loader and
   real hero visual are hidden the same way as before, pre-paint. ---- */
html.bdm-introtest #page-loader { display: none; }
html.bdm-introtest.js-reveal .bdm-hero-visual-field { opacity: 0; }

:root {
  --bdm-intro-showcase-ms: 1700ms;
  --bdm-intro-travel-ms: 650ms;
  --bdm-intro-handoff-ms: 100ms;
}
@media (max-width: 900px) {
  :root {
    --bdm-intro-showcase-ms: 1050ms;
    --bdm-intro-travel-ms: 500ms;
    --bdm-intro-handoff-ms: 90ms;
  }
}

#bdm-intro-overlay {
  display: none;
}
html.bdm-introtest #bdm-intro-overlay {
  display: flex;
  position: fixed; inset: 0; z-index: 10060;
  align-items: center; justify-content: center;
  background: var(--bg);
  pointer-events: none;
}
.bdm-intro-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 3.4vw, 30px);
}
.bdm-intro-fp {
  position: relative;
  width: min(34vw, 58vh, 420px);
  aspect-ratio: 1;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.bdm-intro-fp .bdm-cyber-mark {
  position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain;
  filter: saturate(1.02) contrast(1.02) brightness(.92) drop-shadow(0 6px 8px rgba(0,0,0,.28));
}
.bdm-intro-fp .bdm-led-path-overlay {
  position: absolute; inset: 2%; width: 96%; height: 96%;
  overflow: visible;
  pointer-events: none;
}
/* .bdm-led-ridge / .bdm-led-paths--cyan/orange keyframes are defined once,
   earlier in this file, for the real hero artwork -- reused unchanged. */
@media (prefers-reduced-motion: reduce) {
  .bdm-intro-fp .bdm-led-ridge { animation: none; }
}
/* Phase B: pauses (not resets) the 146 paths' dash-offset animation for
   the travel+handoff window, preserving whatever cyan/orange state was
   already visible. Keeps the outer transform decoupled from continuous
   SVG repaint while .bdm-intro-fp is moving/scaling. */
.bdm-intro-fp--traveling .bdm-led-ridge { animation-play-state: paused !important; }

.bdm-intro-status {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: min(240px, 52vw);
  opacity: 0;
  animation: bdmIntroStatusFade var(--bdm-intro-showcase-ms) ease-in-out both;
}
@keyframes bdmIntroStatusFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
.bdm-intro-bar-track {
  position: relative;
  width: 100%; height: 2px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
.bdm-intro-bar-fill {
  position: absolute; inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #58D5FF, #FFF0C9, #FF9A22);
  box-shadow: 0 0 6px rgba(88,213,255,.45), 0 0 6px rgba(255,154,34,.4);
  animation: bdmIntroBarFill var(--bdm-intro-showcase-ms) cubic-bezier(.22,1,.36,1) both;
}
@keyframes bdmIntroBarFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.bdm-intro-bar-label {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .bdm-intro-status,
  .bdm-intro-bar-fill { animation: none; opacity: 0; }
}

/* Pauses only the real artwork's ambient float for the intro's duration,
   so the destination rect measured immediately before travel can't have
   drifted since the showcase began. Mouse-parallax (a separate, JS-driven
   transform) is deliberately left untouched -- pausing it would mean
   reaching into the shared pointer-tracking code, which this test must
   not modify -- so the residual exposure is bounded to the travel
   animation's own ~500-650ms, not the multi-second showcase. */
.bdm-intro-freeze-bob .bdm-cyber-object { animation-play-state: paused !important; }

/* Glitch effect on hero title amber word */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; color: var(--amber);
}
.glitch::before {
  text-shadow: -2px 0 rgba(66,245,197,0.7);
  clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
  animation: glitchA 5s infinite; opacity: 0;
}
.glitch::after {
  text-shadow: 2px 0 rgba(255,107,0,0.7);
  clip-path: polygon(0 65%, 100% 65%, 100% 85%, 0 85%);
  animation: glitchB 5s infinite; opacity: 0;
}
@keyframes glitchA {
  0%,93%,100% { opacity:0; transform:translate(0); }
  94% { opacity:1; transform:translate(-3px,1px); }
  96% { opacity:1; transform:translate(2px,-1px); }
  98% { opacity:0; }
}
@keyframes glitchB {
  0%,90%,100% { opacity:0; transform:translate(0); }
  91% { opacity:1; transform:translate(3px,1px); }
  93% { opacity:1; transform:translate(-2px,-1px); }
  95% { opacity:0; }
}

/* Nav CTA — always readable */
.nav-cta, .nav-cta:visited, .nav-cta:hover, .nav-cta:focus { color: #080808 !important; }
.nav-cta:hover { background: var(--amber2) !important; }

/* Stat number glow when visible */
.stat-box.reveal .stat-number {
  animation: statGlow 3s ease-in-out infinite;
}
@keyframes statGlow {
  0%,100% { text-shadow: 0 0 15px rgba(255,140,0,.2); }
  50%     { text-shadow: 0 0 35px rgba(255,140,0,.5), 0 0 70px rgba(255,140,0,.12); }
}

/* Hero amber word shimmer */
.hero-title .line:nth-child(2) em { animation: amberShimmer 5s ease-in-out infinite; }
@keyframes amberShimmer {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255,140,0,.5)); }
}

/* CTA title glow */
.cta-title em { animation: ctaGlow 3s ease-in-out infinite; }
@keyframes ctaGlow {
  0%,100% { text-shadow: 0 0 25px rgba(255,140,0,.15); }
  50%     { text-shadow: 0 0 50px rgba(255,140,0,.45), 0 0 90px rgba(255,140,0,.1); }
}


/* Ticker amber words glow */
.ticker-item em { text-shadow: 0 0 8px rgba(255,140,0,.35); }

/* Btn primary shimmer sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg); animation: btnShimmer 3.5s ease-in-out infinite;
}
@keyframes btnShimmer { 0%,100%{left:-100%} 50%{left:120%} }

/* Proof card hover left bar */
.proof-card { position: relative; }
.proof-card::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--amber), var(--accent2, #42f5c5));
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.proof-card:hover::after { transform: scaleY(1); }
.proof-card:hover .proof-metric { text-shadow: 0 0 20px rgba(66,245,197,.35); }

/* Mouse spotlight on interactive cards */
.more-item, .stat-box, .proof-card, .process-step {
  transition: background .15s;
}

/* Section title underline sweep on reveal */
.s-title { position: relative; }
.s-title::after {
  content: ''; position: absolute; bottom: -8px; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--amber), transparent);
  box-shadow: 0 0 6px rgba(255,140,0,.4);
  transition: width 1s cubic-bezier(.16,1,.3,1);
}
.s-title.revealed::after { width: 35%; }

/* Process step hover */
.process-step:hover .ps-title { color: var(--amber); text-shadow: 0 0 18px rgba(255,140,0,.3); }
.process-step:hover .ps-dot { box-shadow: 0 0 20px rgba(255,140,0,1), 0 0 40px rgba(255,140,0,.4); }
.process-step::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.process-step:hover::after { transform: scaleX(1); }

/* Why pt hover */
.why-pt:hover .why-pt-title { color: var(--amber); }
.why-pt:hover .why-pt-num { text-shadow: 0 0 18px rgba(255,140,0,.5); }

/* More item title hover */
.more-item-title { transition: color .3s; }
.more-item:hover .more-item-title { color: var(--amber); }

/* Hex grid on why section */
#why { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M14 0L28 8v16L14 32 0 24V8Z' fill='none' stroke='rgba(255,140,0,0.025)' stroke-width='1'/%3E%3C/svg%3E"); background-size: 28px 49px; }

/* Hero pills */
.hero-pills {
  display: flex; flex-wrap: wrap; gap: .65rem;
  align-items: center;
}
.hero-pill {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.7); border: 1px solid rgba(255,255,255,.14);
  padding: .45rem .9rem; white-space: nowrap;
}
.hero-pill--amber {
  color: var(--amber);
  border-color: rgba(255,140,0,.35);
}
.word-reveal span { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.word-reveal.wrev-visible span { opacity: 1; transform: translateY(0); }

/* Scramble text */
.s-label { transition: opacity .4s, transform .4s; }

/* Depth strips between sections */
.depth-strip { position: relative; height: 2px; overflow: hidden; background: linear-gradient(90deg, transparent, rgba(255,140,0,.2), rgba(255,140,0,.5), rgba(255,140,0,.2), transparent); }
.depth-strip::after {
  content: ''; position: absolute; top: -1px; width: 80px; height: 4px;
  background: var(--amber); box-shadow: 0 0 18px 4px rgba(255,140,0,.6);
  animation: stripScan 4s linear infinite;
}
@keyframes stripScan { 0%{left:-80px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:100%;opacity:0} }

/* ── PLATFORMS SECTION: channel distribution matrix ── */
.platforms-section {
  padding: 5rem 4rem 5.5rem;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
/* Restrained backdrop: central darkening, one warm edge, one cool edge, a
   faint signal-grid texture. Static -- no drift, no cloud, no blur. The
   wheel already carries the page's atmosphere; this section stays systematic. */
.platforms-section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(16,23,40,.5), transparent 72%),
    radial-gradient(ellipse 40% 55% at 4% 65%, rgba(255,140,0,.045), transparent 68%),
    radial-gradient(ellipse 40% 55% at 96% 30%, rgba(88,201,255,.045), transparent 68%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(180deg, #070a11 0%, #050710 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 58px 58px, 58px 58px, 100% 100%;
}
.platforms-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }
.platforms-head { text-align: center; margin-bottom: 1.75rem; }
/* .s-label carries a shared transition:opacity/transform used elsewhere;
   here opacity/transform are owned entirely by the GSAP scrub reveal below,
   so the CSS transition is switched off to stop the two from fighting over
   the same frame. */
.platforms-label { justify-content: center; transition: none; }
.platforms-sub {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin-top: .5rem;
  transition: none;
}
/* Real grid: 4 columns x 2 rows, identical gaps, both rows centered as one
   block -- no orphaned eighth tile, no per-tile margins. */
.platforms-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  width: min(100%, 1040px);
  margin-inline: auto;
}

/* ── PLATFORM TILES ── */
.platform-pill {
  display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
  min-height: 68px;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.62);
  padding: 1rem 1.15rem;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(18,24,39,.8), rgba(8,11,18,.9));
  border: 1px solid rgba(255,140,0,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 6px 0 16px -12px rgba(88,201,255,.14),
    inset -6px 0 16px -12px rgba(255,140,0,.14),
    0 12px 26px -10px rgba(0,0,0,.45);
  /* --bdm-lift-y (hover) and --bdm-tilt-x/--bdm-tilt-y (pointermove, see
     initPlatformTilt() in homepage.js) compose into one transform instead
     of the two fighting over the property directly. */
  --bdm-lift-y: 0px;
  --bdm-tilt-x: 0deg;
  --bdm-tilt-y: 0deg;
  transform: translateY(var(--bdm-lift-y)) perspective(700px) rotateX(var(--bdm-tilt-x)) rotateY(var(--bdm-tilt-y));
  transition: border-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.platform-pill svg { flex-shrink: 0; transition: filter .3s; }
.platform-pill span { line-height: 1.3; }
.platform-pill:hover {
  border-color: rgba(255,140,0,.4); color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 6px 0 18px -10px rgba(88,201,255,.2),
    inset -6px 0 18px -10px rgba(255,140,0,.26),
    0 16px 32px -10px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,140,0,.14);
  --bdm-lift-y: -3px;
}
.platform-pill:hover svg { filter: brightness(1.25); }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .platform-pill { will-change: transform; transition: border-color .3s, color .3s, box-shadow .3s, transform .25s cubic-bezier(.22,1,.36,1); }
}
@media (prefers-reduced-motion: reduce) {
  .platform-pill { transition: border-color .3s, color .3s, box-shadow .3s; }
  .platform-pill:hover { --bdm-lift-y: 0px; }
}

/* ── MILESTONES ── */
.milestones-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--border); max-width: 1400px; margin: 3rem auto 0; }
.milestone-item { padding: 2.5rem 2rem; border-right: 1px solid var(--border); text-align: center; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s, background .3s; }
.milestone-item:last-child { border-right: none; }
.milestone-item.reveal { opacity: 1; transform: translateY(0); }
.milestone-item:hover { background: var(--amberDim); }
.milestone-num { font-family: var(--font-display); font-size: 3.5rem; color: var(--amber); line-height: 1; text-shadow: 0 0 30px rgba(255,140,0,.3); animation: statGlow 3s ease-in-out infinite; }
.milestone-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; line-height: 1.6; }

/* ── SCREENSHOTS ── */
.screenshots-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; max-width: 1400px; margin: 3rem auto 0; }
.screenshot-card { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s, border-color .3s; }
.screenshot-card.reveal { opacity: 1; transform: translateY(0); }
.screenshot-card:hover { border-color: rgba(255,140,0,.35); }
.sc-placeholder { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg,var(--dim) 0%,rgba(255,140,0,.06) 100%); display: flex; align-items: center; justify-content: center; }
.sc-caption { padding: .8rem 1rem; font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.sc-caption em { color: var(--amber); font-style: normal; }

@media (max-width:900px) {
  .milestones-grid { grid-template-columns: 1fr 1fr; }
  .milestone-item:nth-child(2) { border-right: none; }
  .milestone-num { font-size: 2.8rem; }
  .screenshots-grid { grid-template-columns: 1fr 1fr; }
  /* Tablet/mobile: 2 columns x 4 rows -- deliberate, not a leftover wrap. */
  .platforms-row { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 420px; }
  .platform-pill { font-size: .64rem; padding: .85rem 1rem; min-height: 60px; }
}
@media (max-width:480px) {
  .screenshots-grid { grid-template-columns: 1fr; }
  .milestones-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width:340px) {
  /* Below the width where two columns keep "Google Maps"/"YouTube Ads"/
     "TikTok Ads" comfortably readable, fall back to a single column. */
  .platforms-row { grid-template-columns: 1fr; max-width: 260px; }
}

/* ── WATCH DOGS LETTER FLIP ── */
.wd-letter.wd-flip {
  animation: wdFlip .2s steps(3) forwards;
}
@keyframes wdFlip {
  0%   { transform: scaleX(1)    skewY(0deg);   filter: brightness(1); color: inherit; }
  33%  { transform: scaleX(-1)   skewY(-5deg);  filter: brightness(2.5) blur(.4px); color: var(--amber2); }
  66%  { transform: scaleX(-1)   skewY(3deg);   filter: brightness(1.8); color: var(--amber); }
  100% { transform: scaleX(1)    skewY(0deg);   filter: brightness(1); color: inherit; }
}
.wd-letter.wd-flip::after {
  content: attr(data-char);
  position: absolute; left: 0; top: 0; pointer-events: none;
  transform: scaleX(-1);
  color: rgba(66,245,197,.55);
  clip-path: polygon(0 15%, 100% 15%, 100% 50%, 0 50%);
  animation: wdGhost .25s ease-out forwards;
}
@keyframes wdGhost {
  0%   { opacity:1; transform:scaleX(-1) translateX(4px); }
  70%  { opacity:.6; }
  100% { opacity:0; transform:scaleX(-1) translateX(10px); }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  /* NAV */
  nav { padding: 1rem 1.5rem; }
  nav.stuck { padding: .8rem 1.5rem; }
  .nav-links { display: none; }
  .hud-corner { display: none; }
  .c-tr, .c-br, .c-bl { display: none; }
  /* .c-tl is the only corner left visible on mobile (paired against the
     eyebrow alone, not the other three corners), so nudging it here has no
     effect on desktop's symmetric 4-corner frame. */
  .c-tl { top: calc(6rem + 2px); }

  /* ---------------------------------------------------------------------
     HERO -- root cause of the reported inconsistency was twofold:

     1) #hero used `min-height: 100svh` + flexbox `justify-content` to
        vertically CENTER (desktop) / bottom-anchor (mobile) its content
        inside a viewport-height box. Vertical position was therefore a
        function of exactly how each browser computes and updates the
        small-viewport-height value as its own dynamic address-bar/toolbar
        collapses -- a real, documented area of divergence between
        Chromium-based mobile browsers (Chrome Android vs Edge Android can
        report a different toolbar height/timing despite sharing an engine),
        and one that desktop DevTools device emulation does not reproduce at
        all (it has no dynamic toolbar to collapse). That is the "differs
        between real Chrome, real Edge, and DevTools" symptom, and also the
        "excessive empty space above content on some browsers" symptom --
        both trace to content position being computed FROM the viewport
        rather than from the page's own flow.
        Fixed by decoupling position from viewport height entirely: height
        is auto (grows with content), min-height is a floor only, and
        content starts from a fixed top offset (nav height + safe-area +
        a small clamp) instead of centering/bottom-anchoring.

     2) .hero-visual-col was `position: absolute; inset: 0`, overlaid
        UNDER the text via z-index rather than participating in layout.
        That is why the fingerprint could touch/cross "Digitally Marked." --
        it was never actually below it in flow, just visually behind it.
        Fixed by giving it a real row in normal flow, reordered visually
        (via `order`, DOM/SEO order is untouched) to sit between the eyebrow
        and the headline, exactly as spec'd.

     A single composition is used across the whole <=900px range rather
     than adding a second "wide mobile/tablet" two-column variant: the
     two-column form was offered as optional ("may be used"), and one
     consistent, already-compliant stacked order removes an entire class of
     additional overlap/breakpoint surface for no requirement it doesn't
     already satisfy.
     --------------------------------------------------------------------- */
  #hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;      /* floor only -- no longer the positioning mechanism */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: calc(48px + env(safe-area-inset-top, 0px) + clamp(1.5rem, 5vw, 2.75rem));
    padding-inline: clamp(20px, 5.5vw, 28px);
    padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
  }
  .hero-container {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;        /* readability cap; #hero's own padding handles edge safety */
    margin-inline: auto;
  }
  .hero-container::before { display: none; }

  /* Promotes .hero-content's children to be direct flex items of
     .hero-container (a pure rendering change -- the DOM/SEO document order
     is completely unaffected), so the visual can be reordered to sit
     between the eyebrow and the headline via `order` alone. */
  .hero-content { display: contents; }
  .hero-status  { order: 1; margin-bottom: clamp(18px, 4vw, 28px); min-width: 0; }
  .hero-visual-col { order: 2; margin-bottom: clamp(18px, 5vw, 32px); min-width: 0; }
  .hero-title   { order: 3; min-width: 0; }
  .hero-sub-row { order: 4; min-width: 0; }

  /* Real flow, no overlay: centered, modest, and physically incapable of
     touching the headline now that it is a separate block above it. */
  .hero-visual-col {
    position: relative;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  .hero-visual-col .bdm-hero-visual-field {
    width: clamp(88px, 20vw, 150px);
  }

  /* Hero title. Measured from real rendered line boxes (not a text-only
     estimate) at every required width: the largest font-size at which both
     lines are exactly one line each is 36/40/45px at 360/390/430. Sized to
     ~90% of that fitted threshold for headroom, and `normal` rather than
     `nowrap` so a fallback face before the display font swaps in degrades
     to a wrap instead of being sliced by the overflow-x guard. */
  .hero-title {
    font-size: clamp(2rem, 9.4vw, 3.4rem);
    line-height: .96;
    word-break: keep-all;
    overflow-wrap: normal;
    max-width: 100%;
    margin-bottom: clamp(24px, 6vw, 38px);
  }
  .hero-title .line { white-space: normal; overflow: visible; }

  /* Sub-row: one column, spacing now owned entirely by margin-bottom on
     each child below (a single deliberate scale) rather than a `gap` that
     forced every pair to the same distance. */
  .hero-sub-row {
    gap: 0;
    align-items: flex-start;
    margin-top: 0;
    max-width: 100%;
  }
  .hero-desc {
    font-size: .9rem; max-width: 100%; line-height: 1.7;
    margin-bottom: clamp(28px, 7vw, 42px);
  }

  /* Pills row — proper wrap */
  .hero-pills { gap: .55rem; margin-bottom: clamp(22px, 5vw, 32px); }
  .hero-pill { font-size: .5rem; padding: .34rem .7rem; }

  /* Metrics — compact three-column grid instead of hidden */
  .hero-metrics { width: 100%; margin-bottom: clamp(28px, 7vw, 44px); }
  .hero-metric { flex: 1 1 0; padding: .75rem .5rem; min-width: 0; }
  .hero-metric-num { font-size: 1.5rem; }
  .hero-metric-label { font-size: .44rem; max-width: none; }

  /* Buttons — full width stack, big touch targets */
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: .85rem;
  }
  .btn-primary, .btn-ghost {
    width: 100%;
    text-align: center;
    padding: 1rem 1.5rem;
    font-size: .75rem;
    clip-path: none;
    border-radius: 4px;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  /* Sections */
  section { padding: 5rem 1.5rem; }
  /* These three carry their own class-level padding, which outranks the
     plain `section` rule above — without restating them here phones kept
     64px side padding and lost a third of the usable width. */
  .expertise-section { padding: 3.5rem 1.25rem 4rem; }
  /* One intentional break, at the phrase boundary only. display:block on the
     second span always starts a fresh line, regardless of width, so there is
     never a mid-word split -- unlike a font-size fight against wrapping. */
  .expertise-title { font-size: clamp(2rem, 9vw, 2.75rem); margin-bottom: 1rem; }
  .expertise-title-accent { display: block; }
  .expertise-intro { margin-bottom: 1.75rem; }
  .platforms-section { padding: 3.5rem 1.25rem 4rem; }
  .platforms-head { margin-bottom: 1.5rem; }
  .grow-strip { padding: 5rem 1.5rem; }
  .why-layout { grid-template-columns: 1fr; gap: 3rem; }
  .why-visual { display: none; }

  /* The dynamic typewriter line is nowrap (so a protected phrase never
     splits); at the desktop floor of 2.5rem the longest phrase overflowed
     a 360px screen and was clipped by body's overflow-x guard. */
  .grow-strip-headline { --grow-strip-size: clamp(1.75rem, 7.4vw, 3.25rem); }

  /* Stats — single column centered */
  .stats-row {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .stat-box { padding: 1.8rem 2rem; text-align: center; }
  .stat-number { font-size: 3.5rem; }
  .stat-label { font-size: .7rem; }

  /* Proof cards — single column centered */
  .proof-row {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .proof-card { padding: 1.8rem; overflow: visible; }
  .proof-metric {
    font-size: 2.4rem;
    white-space: nowrap;
    overflow: visible;
  }
  .proof-tag { font-size: .55rem; white-space: normal; line-height: 1.4; }

  /* Combined achievement panel */
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    text-align: center;
  }

  /* Process */
  .process-track { grid-template-columns: 1fr 1fr; }
  .ps-num { font-size: 2.5rem; }

  /* More grid: real mobile/tablet rules now live in the #more-scoped,
     ID-specificity block near the section's own CSS -- see below. This
     bare-class rule was being silently shadowed by the unconditional
     desktop !important rule regardless of source order. */

  /* CTA */
  #cta { padding: 6rem 1.5rem; }
  .cta-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .cta-btns { flex-direction: column; gap: .75rem; }
  .cta-btns .btn-primary, .cta-btns .btn-ghost, .cta-btns .btn-outline {
    width: 100%; text-align: center; justify-content: center;
    display: flex; clip-path: none; border-radius: 4px;
    padding: 1rem 1.5rem;
  }

  /* Footer */
  footer { flex-direction: column; text-align: center; padding: 2rem 1.5rem; gap: 1rem; }
  .footer-links { justify-content: center; }

  /* Why section */
  .why-pts { gap: 0; }
  .why-pt { padding: 1.5rem 0; }

  /* Ticker */
  .ticker-item { padding: 0 1.5rem; font-size: .68rem; letter-spacing: .1em; }
}

/* Extra small screens */
@media (max-width: 480px) {
  /* .hero-title deliberately NOT restated here. It previously carried its own
     15vw formula, which overrode the ≤900px rule and reintroduced the very
     overflow that rule exists to prevent. The ≤900px clamp is viewport-based
     and already scales correctly all the way down to 320px. */
  .stats-row { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr; }
  .s-title { font-size: clamp(2rem, 9vw, 3rem); }
}

/* ── TYPEWRITER STRIP ── */
#typewriter-line::after {
  content: '|';
  color: var(--amber);
  animation: blink 1s infinite;
  margin-left: 2px;
}

/* ── EXPERTISE ATMOSPHERE (continuity wash, dark → richest near the wheel → dark) ── */
.expertise-section::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 62%, rgba(88,201,255,.05), transparent 68%),
    radial-gradient(ellipse 46% 40% at 54% 66%, rgba(255,140,0,.045), transparent 66%),
    linear-gradient(180deg, rgba(5,8,15,.4) 0%, rgba(5,8,15,0) 22%, rgba(5,8,15,0) 78%, rgba(5,8,15,.35) 100%);
  opacity: 0;
  animation: bdmExpertiseFadeIn 1.4s ease-out both;
}

/* ── EXPERTISE WHEEL ── */
.wheel-container { display: flex; justify-content: center; align-items: center; padding: 0; margin-top: -1rem; }
/* Relocated from the removed #services section -- same wording, destination
   and .btn-primary style, just repositioned beneath the wheel. */
.expertise-cta { display: flex; justify-content: center; margin-top: 3rem; position: relative; z-index: 1; }
.wheel-ring { position: relative; width: 560px; height: 560px; flex-shrink: 0; }
.wheel-ring::before {
  content: "";
  position: absolute; inset: 10%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,140,0,.10) 0deg 1.2deg,
    transparent 1.2deg 45deg
  );
  opacity: .6;
  pointer-events: none;
  animation: wSpin 44s linear infinite;
}
/* Glass chamber: sits behind the tick ring, SVG, center panel and icons. Sized
   beyond .wheel-ring via percentage inset so it scales automatically with the
   ring's own 640px → 320px mobile resize, no separate breakpoint math needed. */
.wheel-ring::after {
  content: "";
  position: absolute; inset: -9%;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 30%, rgba(88,201,255,.05), transparent 55%),
    radial-gradient(circle at 74% 68%, rgba(255,140,0,.045), transparent 58%),
    radial-gradient(circle, rgba(13,19,36,.7) 0%, rgba(8,12,22,.42) 62%, transparent 100%);
  border: 1px solid rgba(255,255,255,.03);
  box-shadow:
    -26px 6px 70px -30px rgba(88,201,255,.14),
    26px -6px 70px -30px rgba(255,140,0,.16),
    inset 0 1px 0 rgba(255,255,255,.02),
    0 50px 110px -30px rgba(0,0,0,.55);
  opacity: 0;
  animation: bdmExpertiseFadeIn 1.1s ease-out .15s both;
}
.wheel-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: wSpin 40s linear infinite; }
@keyframes wSpin { to { transform: rotate(360deg); } }
@keyframes bdmExpertiseFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bdmWheelSmokeDriftA {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(4%, -5%) scale(1.08); }
}
@keyframes bdmWheelSmokeDriftB {
  0% { transform: translate(0,0) scale(1.05); }
  100% { transform: translate(-5%, 4%) scale(.96); }
}
/* Fixed geometry, permanently: width and height are both constant so the
   circle never resizes between services or on hover -- only the text inside
   cross-fades. Flexbox centers content of any length inside that constant
   box; overflow:hidden is a safety net, not the sizing mechanism. */
.wheel-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 228px; height: 228px; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem; overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,15,30,.92) 0%, rgba(11,16,32,.68) 60%, rgba(9,13,26,.2) 85%, transparent 100%);
  border: 1px solid rgba(255,140,0,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -22px 46px rgba(46,139,255,.1),
    inset 10px 0 30px rgba(88,201,255,.05),
    inset -10px 0 30px rgba(255,140,0,.06),
    0 0 60px rgba(255,140,0,.13),
    0 18px 46px -14px rgba(0,0,0,.5);
}
.wheel-center-title {
  font-family: var(--font-display); font-size: 2.35rem; color: var(--amber);
  letter-spacing: .05em; text-shadow: 0 0 30px rgba(255,140,0,.5); transition: color .4s, text-shadow .4s;
}
.wheel-center-desc { font-size: .72rem; color: var(--muted); line-height: 1.55; margin-top: .5rem; transition: color .4s; }
.wheel-icons { position: absolute; inset: 0; }
/* Contained atmosphere: two soft blurred blobs behind the center panel and
   icons, never behind-turned-into-a-blob thanks to the tight 44% cap and the
   glass chamber above absorbing their edges. Percentage box == auto mobile scale. */
.wheel-icons::before,
.wheel-icons::after {
  content: "";
  position: absolute;
  width: 44%; height: 44%;
  border-radius: 42% 58% 55% 45% / 55% 45% 58% 42%;
  filter: blur(38px);
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.wheel-icons::before {
  top: 20%; left: 14%;
  background: radial-gradient(circle, rgba(88,201,255,.15) 0%, rgba(46,139,255,.07) 55%, transparent 78%);
  animation: bdmWheelSmokeDriftA 30s ease-in-out infinite alternate, bdmExpertiseFadeIn 1.3s ease-out .35s both;
}
.wheel-icons::after {
  bottom: 18%; right: 16%;
  background: radial-gradient(circle, rgba(255,173,34,.19) 0%, rgba(255,140,0,.09) 55%, transparent 78%);
  animation: bdmWheelSmokeDriftB 34s ease-in-out infinite alternate, bdmExpertiseFadeIn 1.3s ease-out .5s both;
}
.wi {
  position: absolute; width: 80px; height: 80px;
  border: 1px solid var(--border); background: rgba(15,22,45,.65);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  cursor: none; transition: all .3s;
  top: 50%; left: 50%;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 18px rgba(46,139,255,.05), 0 3px 10px -4px rgba(0,0,0,.35);
  transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-228px) rotate(calc(-1 * var(--angle)));
}
.wi::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--bdm-spot-x, 50%) var(--bdm-spot-y, 50%), rgba(255,140,0,.18), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.wi:hover::before, .wi.active::before { opacity: 1; }
.wi svg { width: 23px; height: 23px; color: var(--muted); transition: color .3s; }
.wi span { font-family: var(--font-mono); font-size: .46rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.wi:hover, .wi.active {
  background: rgba(15,22,45,.92); border-color: var(--amber);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(255,140,0,.3), 0 8px 24px rgba(0,0,0,.35);
  transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-228px) rotate(calc(-1 * var(--angle))) scale(1.15);
}
.wi.active { border-color: var(--amber); }
.wi:hover svg, .wi.active svg { color: var(--amber); }
.wi:hover span, .wi.active span { color: var(--amber); }
/* Slightly stronger signal on the active icon only -- hover keeps the shared value above. */
.wi.active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 34px rgba(255,140,0,.38), 0 8px 26px rgba(0,0,0,.4);
}

/* ── HEX NETWORK ── */
.hex-network { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items: center; max-width: 1000px; margin: 0 auto; }
.hex-col { display: flex; flex-direction: column; gap: 1.2rem; }
.hex-node {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem;
  border: 1px solid var(--border); background: var(--bg2); cursor: none; transition: all .3s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  opacity: 0; transform: translateX(-40px);
}
.hex-col-right .hex-node { clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); transform: translateX(40px); flex-direction: row-reverse; }
.hex-col-right .hex-node span { text-align: right; }
.hex-node.reveal { opacity: 1; transform: translateX(0); transition: opacity .6s, transform .6s; }
.hex-node:hover, .hex-node.hn-active { border-color: var(--amber); background: var(--amberDim); box-shadow: 0 0 20px rgba(255,140,0,.15); }
.hex-node svg { width: 24px; height: 24px; color: var(--muted); flex-shrink: 0; transition: color .3s; }
.hex-node:hover svg, .hex-node.hn-active svg { color: var(--amber); }
.hex-node span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.hex-node:hover span, .hex-node.hn-active span { color: var(--white); }
.hex-center-col { display: flex; align-items: center; justify-content: center; }
.hex-core {
  width: 140px; height: 140px; background: var(--bg2); border: 1px solid rgba(255,140,0,.35);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; align-items: center; justify-content: center;
  animation: hexPulse 3s ease-in-out infinite;
}
@keyframes hexPulse {
  0%,100% { box-shadow: 0 0 40px rgba(255,140,0,.15); }
  50% { box-shadow: 0 0 60px rgba(255,140,0,.35); }
}
.hex-core-inner { text-align: center; padding: 1rem; }

@media (max-width: 900px) {
  .wheel-ring { width: 320px; height: 320px; }
  /* Fixed height alongside the fixed width -- same anti-resize rule as desktop. */
  .wheel-center { width: 150px; height: 180px; padding: .85rem .65rem; }
  .wheel-center-title { font-size: 1.6rem; }
  .wheel-center-desc { font-size: .68rem; }
  .wi { width: 54px; height: 54px; border-radius: 12px; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-130px) rotate(calc(-1 * var(--angle))); }
  .wi:hover, .wi.active { transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-130px) rotate(calc(-1 * var(--angle))) scale(1.15); }
  .wheel-icons::before { background: radial-gradient(circle, rgba(88,201,255,.10) 0%, rgba(46,139,255,.05) 55%, transparent 78%); filter: blur(22px); }
  .wheel-icons::after  { background: radial-gradient(circle, rgba(255,173,34,.13) 0%, rgba(255,140,0,.06) 55%, transparent 78%); filter: blur(22px); }
  .hex-network { grid-template-columns: 1fr; }
  .hex-center-col { order: -1; }
  .hex-node, .hex-col-right .hex-node { clip-path: none; flex-direction: row; }
  .hex-col-right .hex-node span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .expertise-section::before,
  .wheel-ring::before,
  .wheel-ring::after,
  .wheel-icons::before,
  .wheel-icons::after {
    animation: none !important;
    opacity: 1 !important;
  }
}


/* ==========================================================================\n   B-DIGITAL MARK — FINAL PREMIUM POLISH OVERRIDES\n   Purpose: remove game-like clutter, add premium cursor, glass hierarchy,\n   balanced grids, availability section, accessible vector arrows, and\n   responsive centring. Keep this block at the END of the homepage stylesheet.\n   ========================================================================== */

/* Remove the game/HUD layer while keeping the site cinematic. */
.hud-corner,
#glitch-scan,
#data-stream,
#icon-field,
.hero-scan,
.glitch::before,
.glitch::after,
.wd-letter::after { display: none !important; }

body::before { display: none !important; }
body::after { opacity: 0.014 !important; z-index: 3 !important; }

/* Native cursor throughout — the hero ink field is a background layer, not a
   cursor graphic, so the real cursor is never hidden. */
body,
body * { cursor: auto !important; }
a, button, [role="button"], summary { cursor: pointer !important; }
input, textarea, select, [contenteditable="true"] { cursor: text !important; }

/* ---- Hero glass veil ----
   An optical layer between the fluid and the foreground. Pure CSS gradients
   plus a very faint mesh; deliberately NO backdrop-filter, so it costs
   essentially nothing at runtime.

   Stacking is written out explicitly rather than left to DOM order. The fluid
   canvas already sits at z-index 1 and #particle-canvas at 1 as well, while the
   grid, glows, scan line, parallax layers and corners were all on the auto
   level -- which meant the fluid painted OVER them. The required order is
   background -> fluid -> veil -> decorative foreground -> content, so each band
   now gets its own explicit value:

     1  #bdm-ink-field          (in the fine-pointer block below)
     2  .bdm-hero-glass-veil
     3  grid / particles / glows / scan / parallax layers / corners
     4  .hero-container         (logo + copy)  */
.bdm-hero-glass-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 72% at 27% 46%,
      rgba(4,8,16,.28) 0%,
      rgba(4,8,16,.16) 45%,
      transparent 76%),
    radial-gradient(ellipse 48% 70% at 76% 48%,
      rgba(8,11,18,.08) 0%,
      transparent 74%),
    linear-gradient(180deg,
      rgba(5,8,15,.18) 0%,
      rgba(5,8,15,.10) 42%,
      rgba(5,8,15,.28) 100%);
}

/* Refined mesh surface. Kept far below the existing hero grid in strength so
   the two never read as competing grids. */
.bdm-hero-glass-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120,175,220,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,155,35,.014) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .42;
}

/* Static optical highlight. Never animated. */
.bdm-hero-glass-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 12%,
    rgba(255,255,255,.018) 34%,
    transparent 52%);
  opacity: .7;
}

/* Decorative foreground: above the veil, below the content. */
#hero > #particle-canvas,
#hero > .hero-grid,
#hero > .hero-glow,
#hero > .hero-glow2,
#hero > .hero-scan,
#hero > #hero-mouse-deep,
#hero > #hero-mouse-mid,
#hero > #hero-mouse-near,
#hero > .corner {
  z-index: 3;
}
#hero > .hero-container { z-index: 4; }

/* ---- Hero ink field ----
   Pointer-stirred WebGL fluid. It lives inside #hero, so #hero's own
   background (rgba(5,5,7,.957)) and its decorative layers paint BELOW it while
   .hero-container (z-index 2) paints ABOVE it: the fluid reads over the section
   art and never touches text, buttons, metrics, nav or the logo.

   Hidden by default and only revealed for fine-pointer desktop with no
   reduced-motion preference. The script applies the same gate and additionally
   removes itself without WebGL2, so non-supporting visitors get the plain page.

   screen blend: the dye is light on a near-black section, so screen keeps it
   glowing rather than sitting on top as an opaque object. */
#bdm-ink-field { display: none; }

@media (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  #bdm-ink-field {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
  }
}

/* Accessible, non-emoji arrow icon. */
.bdm-arrow-icon {
  display: inline-block;
  width: .92em;
  height: .92em;
  flex: 0 0 auto;
  color: currentColor;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn-primary,
.btn-ghost,
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}

/* Strong, consistent keyboard focus. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

/* Magnetic buttons use CSS variables instead of replacing transforms. */
.btn-primary,
.btn-ghost,
.nav-cta {
  --bdm-mag-x: 0px;
  --bdm-mag-y: 0px;
  transform: translate3d(var(--bdm-mag-x), var(--bdm-mag-y), 0);
  will-change: transform;
}
.btn-primary:hover,
.btn-ghost:hover { transform: translate3d(var(--bdm-mag-x), calc(var(--bdm-mag-y) - 2px), 0); }

/* Professional card spotlight: one lightweight overlay, no JS-written backgrounds. */
.more-item,
.stat-box,
.proof-card,
.process-step,
.bdm-availability-card,
.hero-metrics,
.wi,
.term-window {
  --bdm-spot-x: 50%;
  --bdm-spot-y: 50%;
}

.more-item::before,
.stat-box::after,
.proof-card .bdm-card-light,
.process-step .bdm-card-light,
.bdm-availability-card::before {
  pointer-events: none;
}

/* Global section rhythm — still cinematic, without giant dead gaps. */
section { scroll-margin-top: 78px; }
#results,
#why,
#process,
#more { padding-block: clamp(5rem, 9vw, 9rem); }

/* Remove accidental duplicate separators and blank Gutenberg paragraph. */
.depth-strip + .depth-strip { display: none !important; }
.wp-block-paragraph:empty,
.entry-content > p:empty { display: none !important; }

/* Results: reduce duplication by visually prioritising the verified summary. */
#results .stats-row { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   MORE SERVICES — balanced 3-column rows + 50/50 final row, layered glass
   -------------------------------------------------------------------------- */
#more {
  background:
    radial-gradient(circle at 18% 10%, rgba(46,139,255,.05), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,140,0,.055), transparent 30%),
    var(--bg2);
}

#more .more-inner > .s-label,
#more .more-inner > .s-title,
#more .more-inner > .more-intro { text-align: center; }
#more .more-inner > .s-label { justify-content: center; }
#more .more-inner > .s-label::before { display: none; }
/* The shared .s-title clamp (up to 7.5rem) was sized for shorter phrases;
   at "Where We Take Your Brand Further" length it forced an oversized,
   awkwardly-balanced wrap even at 920px. This keeps it a clean 2-line
   break at every tested desktop width. */
#more .more-inner > .s-title {
  max-width: 780px;
  margin-inline: auto;
  font-size: clamp(2rem, 3.6vw, 3.8rem);
}
#more .more-intro {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(240,237,232,.62);
  font-size: .95rem;
  line-height: 1.7;
}

/* Desktop grid: unchanged mechanism (6 tracks, items span 2 -> 3 per row,
   last 2 items span 3 -> a 50/50 final row). #more-scoped from here on so
   every tier below shares the same specificity family and none of them can
   be silently shadowed by another regardless of source order. */
#more .more-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  background: transparent !important;
  border: 0 !important;
  margin-top: 3rem !important;
}

#more .more-item {
  grid-column: span 2;
  min-height: 188px;
  padding: 1.65rem 1.65rem 1.55rem;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(11,13,22,.76) 44%, rgba(6,7,12,.90)),
    var(--bg2);
  box-shadow: var(--bdm-shadow-contact), 0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter: blur(10px);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s, background .35s;
}

#more .more-item:nth-last-child(-n+2) { grid-column: span 3; }
#more .more-item:hover {
  transform: translateY(-5px);
  border-color: rgba(255,140,0,.28);
  background:
    radial-gradient(circle at var(--bdm-spot-x) var(--bdm-spot-y), rgba(255,140,0,.075), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(11,13,22,.80) 44%, rgba(6,7,12,.93));
  box-shadow: var(--bdm-shadow-contact), var(--bdm-shadow-depth), var(--bdm-shadow-atmosphere), 0 1px 0 rgba(255,255,255,.06) inset;
}
#more .more-item::after { border-radius: 12px 0 0 12px; }
#more .more-item-title { font-size: 1.25rem; line-height: 1.15; margin-bottom: .5rem; }
#more .more-item-price { line-height: 1.5; margin-bottom: .7rem; }
#more .more-item-desc { color: rgba(240,237,232,.59); font-size: .83rem; line-height: 1.62; max-width: 54ch; }

/* Tablet: 2 per row, only where content genuinely fits. */
@media (max-width: 1100px) and (min-width: 601px) {
  #more .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #more .more-item,
  #more .more-item:nth-last-child(-n+2) { grid-column: auto; }
}

/* Mobile: exactly one card per row, centered, full readable width, normal
   horizontal text. No fixed narrow widths, no inherited desktop column
   spans, no letter-by-letter wrapping. */
@media (max-width: 600px) {
  #more .more-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    gap: 16px !important;
    margin-top: 2.25rem !important;
  }
  #more .more-item,
  #more .more-item:nth-last-child(-n+2) {
    grid-column: auto;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    min-width: 0;
    height: auto;
    min-height: auto;
    padding: 1.4rem 1.35rem;
  }
  #more .more-item-title,
  #more .more-item-price,
  #more .more-item-desc {
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    max-width: none;
  }
  #more .more-item-title { margin-bottom: .4rem; }
  #more .more-item-price { margin-bottom: .6rem; }
}

/* --------------------------------------------------------------------------
   LIMITED AVAILABILITY — premium glass, credible scarcity
   -------------------------------------------------------------------------- */
#availability {
  padding: clamp(6.5rem, 9vw, 9rem) 4rem;
  background:
    radial-gradient(circle at 22% 12%, rgba(46,139,255,.07), transparent 30%),
    radial-gradient(circle at 78% 16%, rgba(255,140,0,.075), transparent 32%),
    var(--bg);
  overflow: hidden;
}

.bdm-availability-shell {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.085);
  background:
    linear-gradient(150deg, rgba(255,255,255,.055), rgba(9,11,19,.76) 38%, rgba(5,6,11,.91)),
    var(--bdm-glass);
  box-shadow:
    var(--bdm-shadow-contact),
    var(--bdm-shadow-depth),
    0 0 110px rgba(46,139,255,.055),
    0 1px 0 rgba(255,255,255,.065) inset;
  backdrop-filter: blur(14px);
}

.bdm-availability-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255,177,75,.52), rgba(255,255,255,.08) 30%, rgba(88,201,255,.38) 70%, rgba(255,140,0,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.bdm-availability-header { text-align: center; max-width: 760px; margin: 0 auto 2.4rem; }
.bdm-availability-header .s-label { justify-content: center; margin-bottom: 1rem; }
.bdm-availability-header .s-label::before { display: none; }
.bdm-availability-title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 6.5rem);
  line-height: .9;
  letter-spacing: .015em;
  margin-bottom: 1.15rem;
}
.bdm-availability-title em { display: block; color: var(--amber); font-style: normal; }
.bdm-availability-intro { color: rgba(240,237,232,.64); line-height: 1.75; max-width: 680px; margin: 0 auto; }

.bdm-availability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.bdm-availability-card {
  position: relative;
  min-height: 255px;
  display: flex;
  flex-direction: column;
  padding: 1.65rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(150deg, rgba(255,255,255,.048), rgba(12,14,24,.76) 43%, rgba(7,8,14,.93));
  box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.05) inset;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s;
}
.bdm-availability-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--bdm-spot-x) var(--bdm-spot-y), rgba(255,140,0,.12), transparent 50%);
  opacity: 0;
  transition: opacity .3s;
}
.bdm-availability-card:hover { transform: translateY(-6px); border-color: rgba(255,140,0,.30); box-shadow: var(--bdm-shadow-contact), var(--bdm-shadow-depth); }
.bdm-availability-card:hover::before { opacity: 1; }
.bdm-availability-card--seo {
  border-color: rgba(255,140,0,.22);
  box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 0 46px rgba(255,140,0,.07), 0 1px 0 rgba(255,255,255,.055) inset;
}
.bdm-availability-card--ads::before { background: radial-gradient(circle at var(--bdm-spot-x) var(--bdm-spot-y), rgba(46,139,255,.14), transparent 50%); }

.bdm-availability-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.bdm-availability-service { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: .025em; }
.bdm-availability-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .12em;
  color: rgba(240,237,232,.64);
  text-transform: uppercase;
  white-space: nowrap;
}
.bdm-availability-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px rgba(255,140,0,.65); }
.bdm-availability-card--ads .bdm-availability-dot { background: var(--bdm-blue); box-shadow: 0 0 12px rgba(46,139,255,.64); }
.bdm-availability-card--web .bdm-availability-dot { background: rgba(240,237,232,.48); box-shadow: 0 0 10px rgba(240,237,232,.20); }
/* Premium slot badge: the remaining-slot count is the single most
   commercially important signal on this card, so it gets its own large
   display-face number instead of reading as plain uppercase mono text
   identical in weight to everything else on the card. */
.bdm-availability-count {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: 1.1rem;
}

.bdm-availability-count-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--amber);
  text-shadow: 0 0 28px rgba(255,140,0,.4);
}

.bdm-availability-card--ads .bdm-availability-count-num {
  color: #72B8FF;
  text-shadow: 0 0 28px rgba(46,139,255,.4);
}

.bdm-availability-count-label {
  font-family: var(--font-mono);
  font-size: .64rem;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,237,232,.62);
}

.bdm-availability-count-label--solo {
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--amber);
  max-width: none;
}

.bdm-availability-card--web .bdm-availability-count-label--solo { color: rgba(240,237,232,.72); }
.bdm-availability-copy { position: relative; z-index: 1; color: rgba(240,237,232,.60); font-size: .86rem; line-height: 1.7; }
.bdm-availability-actions { text-align: center; margin-top: 2rem; }
.bdm-availability-note { margin-top: 1rem; color: rgba(240,237,232,.36); font-family: var(--font-mono); font-size: .56rem; line-height: 1.6; letter-spacing: .08em; }

/* CTA vertical spacing now lives on the base #cta rule above. Setting it
   again here defeated the mobile override (equal specificity, later in the
   file wins regardless of the media query), forcing 128px block padding on
   phones instead of the intended 96px. */

/* Responsive hierarchy */
@media (max-width: 1100px) {
  .bdm-availability-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bdm-availability-card:last-child { grid-column: 1 / -1; max-width: 620px; width: 100%; justify-self: center; }
}

@media (max-width: 900px) {
  #availability { padding: 5.5rem 1.5rem; }
  .bdm-availability-shell { padding: 1.5rem; border-radius: 16px; }
  .bdm-availability-grid { grid-template-columns: 1fr; }
  .bdm-availability-card:last-child { grid-column: auto; max-width: none; }
  /* #more grid/item responsive rules now live exclusively in the
     #more-scoped tablet/mobile tiers above -- see the tier comments near
     #more .more-grid's desktop rule. */
  #more .more-inner > .s-label,
  #more .more-inner > .s-title,
  #more .more-inner > .more-intro { text-align: center; }
  .s-label { justify-content: center; }
  .s-label::before { display: none; }
  .s-title { text-align: center; }
}

@media (max-width: 560px) {
  .bdm-availability-title { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .bdm-availability-top { flex-direction: column; align-items: flex-start; }
  .bdm-availability-card { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .hero-grid,
  .hero-glow,
  .hero-glow2,
  .hero-metric-num,
  .stat-box.reveal .stat-number,
  .cta-title em,
  .btn-primary::after,
  .depth-strip::after { animation: none !important; }
}





/* ==========================================================================
   RESULTS V2 — selected performance outcomes, not a client-count showcase
   ========================================================================== */
#results {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(46,139,255,.075), transparent 28%),
    radial-gradient(circle at 8% 88%, rgba(255,140,0,.075), transparent 30%),
    var(--bg);
}

.results-shell {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.results-head {
  max-width: 900px;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}

/* Scoped down from the shared .s-title clamp (up to 7.5rem), which was
   sized for shorter phrases elsewhere and forced this heading to wrap to
   two lines inside the 900px .results-head column at every desktop width.
   This keeps "Results You Can Verify." on one line at 1920/1440/1280. */
.results-head .s-title {
  max-width: 980px;
  margin-bottom: 1.25rem;
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
}

.results-lead {
  max-width: 720px;
  color: rgba(240,237,232,.64);
  font-size: clamp(.95rem, 1.25vw, 1.08rem);
  line-height: 1.8;
}

/* Proof strip removed entirely -- it repeated the same x5/x7/3M+ idea a
   second time after the section's own proof heading, which read as
   duplication rather than reinforcement. The section now goes straight
   from the lead paragraph into the story cards, which carry the numbers
   that matter (average position 3.7, product/brand term, etc.) in
   context instead. #results .results-portfolio-note keeps its own
   visible-by-default / js-reveal-gated rule below (no longer paired with
   the strip). */
#results .results-portfolio-note {
  opacity: 1;
  transform: none;
}
html.js-reveal #results .results-portfolio-note {
  opacity: 0;
  transform: translateY(24px);
}
html.js-reveal #results .results-portfolio-note.revealed {
  opacity: 1;
  transform: translateY(0);
}

.results-stories {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.results-stories-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.5rem;
}

/* em was display:block, forcing "Stories." onto its own line regardless
   of available width. Reduced clamp + inline em keeps the full phrase on
   one line at 1920/1440/1280 within this column's share of the grid. */
.results-stories-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 3rem);
  line-height: 1;
  letter-spacing: .02em;
}

.results-stories-title em {
  color: var(--amber);
  font-style: normal;
}

.results-stories-copy {
  max-width: 640px;
  justify-self: end;
  color: rgba(240,237,232,.58);
  font-size: clamp(.78rem, 1vw, .88rem);
  line-height: 1.6;
}

@media (min-width: 761px) {
  .results-stories-copy { white-space: nowrap; }
}

.result-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Promoted to the section's primary visual focus (see homepage.php) --
   larger, and given a share of the materiality upgrade the removed metric
   cards used to carry. Hover interaction below is untouched on purpose. */
#results .result-story-card {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 2.7vw, 2.4rem);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.06), rgba(8,9,16,.86) 42%, rgba(4,5,7,.96));
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 24px 60px -32px rgba(0,0,0,.9);
  overflow: hidden;
}

/* Same visible-by-default / js-reveal-gated fallback pattern as the shell
   above -- .proof-card{opacity:0} is a sitewide rule shared by other
   sections, so it is left untouched; this #results-scoped override cancels
   it here specifically, on ID specificity, without affecting proof-cards
   elsewhere. */
#results .result-story-card {
  opacity: 1;
  transform: none;
}
html.js-reveal #results .result-story-card {
  opacity: 0;
  transform: translateX(-40px);
}
html.js-reveal #results .result-story-card.revealed {
  opacity: 1;
  transform: translateX(0);
}

#results .result-story-card:hover {
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 26px 56px -30px rgba(0,0,0,.92);
}

#results .result-story-card::before {
  background:
    radial-gradient(circle at var(--bdm-spot-x, 50%) var(--bdm-spot-y, 50%), rgba(46,139,255,.10), transparent 58%);
}

/* proof-tag now leads each card (market/category), .result-story-index
   follows as a second, more specific label -- reordered from the previous
   index-first layout in homepage.php. */
#results .result-story-card .proof-tag {
  width: fit-content;
  margin: 0 0 1rem;
  border-color: rgba(255,140,0,.20);
  background: rgba(255,140,0,.045);
}

.result-story-index {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.6rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240,237,232,.48);
}

.result-story-index::before {
  content: "";
  width: 14px;
  height: 1px;
  background: rgba(255,140,0,.5);
}

.result-story-title {
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.7vw, 2.65rem);
  line-height: 1.02;
  letter-spacing: .02em;
  color: var(--white);
}

.result-story-outcome-label {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,237,232,.4);
}

.result-story-outcome {
  display: inline-block;
  width: fit-content;
  margin-bottom: 1.2rem;
  padding: .3em .65em;
  border: 1px solid rgba(255,140,0,.24);
  border-radius: 4px;
  background: rgba(255,140,0,.08);
  font-family: var(--font-mono);
  font-size: .6rem;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
}

#results .result-story-card .proof-desc {
  margin-top: auto;
  font-size: .89rem;
  line-height: 1.72;
  color: rgba(240,237,232,.6);
}

.results-portfolio-note {
  max-width: 850px;
  margin: 2.75rem auto 0;
  text-align: center;
}

.results-portfolio-note p {
  margin-bottom: 1.4rem;
  color: rgba(240,237,232,.48);
  font-size: .82rem;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .result-story-grid { grid-template-columns: 1fr; }
  #results .result-story-card { min-height: 320px; }
}

@media (max-width: 760px) {
  .results-head { text-align: center; margin-left: auto; margin-right: auto; }
  .results-head .s-label { justify-content: center; }
  .results-head .s-label::before { display: none; }
  .results-lead { margin: 0 auto; }
  .results-stories-head { grid-template-columns: 1fr; text-align: center; }
  .results-stories-copy { justify-self: center; }
  #results .result-story-card { text-align: left; }
}





/* ==========================================================================
   ALIVE LAYER V3
   Restores controlled cyber-letter motion, global star drift, whole-site
   liquid cursor visibility, and efficient section parallax without bringing
   back the noisy HUD / glitch-stream clutter.
   ========================================================================== */

/* The liquid cursor's z-index, halo size, and blanket cursor:none scope are
   defined once in the main cursor block earlier in this file. */

/* Fixed starfield beneath translucent section surfaces. */
#bdm-starfield {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: .82;
}

body {
  position: relative;
  isolation: isolate;
}

#ticker,
.depth-strip,
section,
footer {
  position: relative;
  z-index: 1;
}

/* Let the star layer breathe through the dark surfaces without reducing text contrast. */
#hero,
#results,
#milestones,
#process,
#cta,
#grow-strip {
  background-color: rgba(5,5,7,.955) !important;
}

#expertise,
#platforms,
#why,
#more {
  background-color: rgba(9,9,16,.95) !important;
}

#availability {
  background-color: rgba(5,5,7,.93) !important;
}

/* Controlled cyber-letter motion: one character at a time, never a full-word glitch. */
/* Keeps a word's .wd-letter spans (display:inline-block, so each is its
   own line-break opportunity) from being split apart mid-word -- see
   wrapTextNode() in homepage.js. Plain inline, not inline-block, so the
   real line-break opportunities at the spaces between words are untouched. */
.wd-word {
  white-space: nowrap;
}

.wd-letter {
  position: relative;
  display: inline-block;
  transform-origin: 50% 58%;
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
}

.wd-letter.wd-flip {
  animation: bdmLetterSignal .34s steps(4, end) both;
}

.wd-letter.wd-flip::after {
  display: block !important;
  content: attr(data-char);
  position: absolute;
  inset: 0;
  color: var(--bdm-cyan);
  opacity: 0;
  pointer-events: none;
  text-shadow:
    -2px 0 rgba(46,139,255,.55),
    2px 0 rgba(255,140,0,.52);
  clip-path: inset(22% 0 48% 0);
  animation: bdmLetterGhost .34s ease-out both;
}

@keyframes bdmLetterSignal {
  0%   { transform: translate3d(0,0,0) rotateY(0) skewX(0); filter: none; opacity: 1; }
  24%  { transform: translate3d(-1px,0,0) rotateY(62deg) skewX(-8deg); filter: brightness(1.9); color: var(--amber2); }
  52%  { transform: translate3d(2px,-1px,0) rotateY(-28deg) skewX(5deg); filter: brightness(1.35) drop-shadow(0 0 7px rgba(255,140,0,.38)); color: var(--bdm-cyan); }
  76%  { transform: translate3d(-1px,1px,0) rotateY(10deg) skewX(-2deg); filter: brightness(1.15); }
  100% { transform: translate3d(0,0,0) rotateY(0) skewX(0); filter: none; opacity: 1; }
}

@keyframes bdmLetterGhost {
  0%   { opacity: 0; transform: translate3d(-3px,0,0); }
  28%  { opacity: .72; transform: translate3d(3px,-1px,0); }
  72%  { opacity: .25; transform: translate3d(-2px,1px,0); }
  100% { opacity: 0; transform: translate3d(7px,0,0); }
}

/* Efficient layered parallax uses a custom property so reveal animations remain intact. */
.bdm-parallax-layer {
  --bdm-depth-y: 0px;
  translate: 0 var(--bdm-depth-y);
  will-change: translate;
}

@supports not (translate: 0 1px) {
  .bdm-parallax-layer {
    transform: translate3d(0, var(--bdm-depth-y), 0);
  }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  #bdm-starfield { opacity: .42; }
  .bdm-parallax-layer {
    translate: none !important;
    transform: none !important;
  }
  .wd-letter.wd-flip,
  .wd-letter.wd-flip::after {
    animation: none !important;
  }
}


/* ==========================================================================
   BATCH 1 — nav logo lockup, Hero brand visual, loader neon mark, cursor boost
   ========================================================================== */

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.nav-logo:hover,
.nav-logo:focus-visible { opacity: .82; }
.nav-logo-mark {
  display: block;
  height: 40px;
  width: auto;
  flex: 0 0 auto;
  transition: filter .25s ease;
}
.nav-logo:hover .nav-logo-mark {
  filter: drop-shadow(0 0 10px rgba(255,140,0,.35));
}
.nav-logo-word {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.nav-logo-word-brand {
  background: linear-gradient(90deg, var(--bdm-blue-bright), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-logo-word-mark { color: var(--white); opacity: .92; }

@media (max-width: 900px) {
  .nav-logo-mark { height: 32px; }
  .nav-logo-word { font-size: 16px; }
}

/* ---- Hero brand visual: atmospheric background layer, no visible panel ----
   Aggressively masked so no square/rectangular edge of the source image is
   ever visible, at any viewport. It reads as ambient light and depth behind
   the headline/metrics, never as a pasted-on photo panel. */
#hero { position: relative; }

/* Restrained glow bridging the two columns so the headline, the metrics
   module and the brand object read as one composition rather than two
   unrelated halves. */
.hero-container::before {
  content: "";
  position: absolute;
  left: 42%;
  top: 62%;
  width: 46%;
  height: 40%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(46,139,255,.10) 0%, rgba(255,140,0,.07) 45%, transparent 72%);
  filter: blur(30px);
}

.bdm-hero-visual-field {
  position: relative;
  --bdm-hero-visual-x: 0px;
  --bdm-hero-visual-y: 0px;
  transform: translate3d(var(--bdm-hero-visual-x), var(--bdm-hero-visual-y), 0);
  width: clamp(300px, 30vw, 540px);
  aspect-ratio: 1;
  pointer-events: none;
  will-change: transform;
}

/* Disabled: the source artwork already carries its own baked blue/orange
   illumination, so a separate large animated halo behind it only reads as
   an oversized atmospheric cloud competing with the real glow. Element is
   left in the markup (unused/inert) rather than removed from PHP, since
   nothing else references it. */
.bdm-fp-ambient,
.bdm-fp-ambient::after {
  display: none !important;
}

/* ---- 2060 cyber object ----
   One real artwork (hero-mark-2060.jpg — the illuminated fingerprint capsule
   with the B-mark) blended into the hero atmosphere with a tight elliptical
   mask so no image boundary is ever visible, plus two orbiting light nodes.
   No extra JS loops — everything below is compositor-friendly CSS animation
   with reduced-motion and mobile guards. */
.bdm-cyber-object {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: bdmCyberFloat 9s ease-in-out infinite;
}
@keyframes bdmCyberFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* The artwork itself: hero-mark-2060-transparent-clean.png. Direct
   pixel measurement of the original transparent export showed the
   left/right/top edges were already sharp (0-2px feather, no baked-in
   haze), but a genuine soft black shadow extended ~90-100px below the
   capsule in the alpha channel. That file was re-processed losslessly
   (alpha values only; zero RGB/position/size change) to steepen that
   one falloff into a compact ~10-15px contact shadow — no crop, no
   resize, no recolor. Its own alpha now defines the capsule boundary,
   so no radial mask is needed here — and the LED passes below now carry
   real per-hue masks cut from this same artwork, so the old shared
   elliptical --bdm-cyber-mask approximation is gone entirely.

   The prior filter's two side drop-shadows (cyan/orange, offset 1px)
   were removed: applied across this artwork's dense multi-ridge alpha
   silhouette, drop-shadow() blurs and duplicates the ENTIRE shape
   rather than producing a clean rim highlight, and the many parallel
   ridge lines' individual shadows visually merged into a soft gray/cyan
   haze on the left and a muddier tone on the right — confirmed by direct
   alpha inspection to be 100% filter-caused, not present in the source.
   The remaining shadow is reduced in spread/opacity so it no longer
   compounds with the (now compact) baked-in contact shadow below. */
.bdm-cyber-mark {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  z-index: 1;
  object-fit: contain;
  /* Slight brightness trim only — a small amount of headroom for the travelling
     pulse to read against. This replaces the black dimming beds: those darkened
     every ridge to make a wide gradient visible, which is not needed once the
     highlight is a narrow dash on the ridge itself. */
  filter:
    saturate(1.02) contrast(1.02) brightness(.92)
    drop-shadow(0 6px 8px rgba(0,0,0,.28));
}

/* ---- Fingerprint LED path overlay ----
   Light now travels ALONG the ridges, not across the picture.

   Every previous attempt animated background-position behind a raster mask. That
   is a screen-space transform: one rectangular gradient crosses many ridges at
   once according to where they happen to sit on screen, and it has no access to
   the direction, curvature or topology of any individual ridge. It can only ever
   look like a light sweeping over the fingerprint. No amount of opacity, width or
   easing changes that, because the geometry is not represented anywhere.

   The overlay is real geometry instead: ridge centerlines traced from the
   approved masks (see bdm-homepage-tools/led-mask-generator/trace.js) as open
   SVG paths in the artwork's own 1024x1024 space, animated with stroke-dashoffset
   so the dash physically follows each path's curvature and bends with it.

   Centerlines, not traced outlines: outlining a thick raster stroke would give a
   closed loop per ridge and two dash edges chasing each other around it.

   pathLength="100" normalises every path, so one dasharray gives the same pulse
   proportion whether a ridge is 40px or 700px long. Per-ridge negative delays
   (set in the SVG) stagger activation into a cascade rather than one synchronised
   band. Cyan runs 7.6s, orange 9.1s -- unequal so their peaks never lock.

   The dimming beds are gone. A narrow bright dash on a dark ridge does not need
   the whole fingerprint darkened to register; only a slight brightness trim on
   the base artwork remains, on .bdm-cyber-mark above. */
.bdm-led-path-overlay {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;              /* let the blurred glow spill past the viewBox */
}

.bdm-led-ridge {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* constant screen width at any hero size */
  stroke-dasharray: 9 91;              /* one ~9% pulse, 91% dark */
  stroke-dashoffset: 100;
  animation: bdmLedPathTravel var(--led-duration, 8s) linear infinite;
  animation-delay: var(--led-delay, 0s);
}
.bdm-led-ridge--core { stroke-width: 2.2; opacity: .95; }
.bdm-led-ridge--glow { stroke-width: 5;   opacity: .38; filter: blur(1.4px); }

@keyframes bdmLedPathTravel {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: -100; }
}

.bdm-led-paths--cyan .bdm-led-ridge--core   { stroke: #DDF9FF; }
.bdm-led-paths--cyan .bdm-led-ridge--glow   { stroke: #58D5FF; }
.bdm-led-paths--orange .bdm-led-ridge--core { stroke: #FFF0C9; }
.bdm-led-paths--orange .bdm-led-ridge--glow { stroke: #FF9A22; }

/* Only the gold breathing layer still uses the div/mask approach: it does not
   travel, so it has no geometry to follow. */
.bdm-led-pass {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* Gold B: never travels, only breathes, and must not compete with the ridge
   pulses. Screen blend since this one really is meant to add a little light to
   an already-lit letterform. */
.bdm-led-pass--gold {
  -webkit-mask: url("../images/hero-led-gold-mask.png") center / 100% 100% no-repeat;
          mask: url("../images/hero-led-gold-mask.png") center / 100% 100% no-repeat;
  background-image: radial-gradient(ellipse 62% 58% at 50% 46%,
    rgba(255,226,160,.72) 0%,
    rgba(255,196,96,.44) 45%,
    rgba(255,170,64,.16) 72%,
    transparent 100%);
  background-size: 130% 130%;
  background-position: 50% 50%;
  mix-blend-mode: screen;
  opacity: .18;
  animation: bdmGoldBreath 6.5s ease-in-out infinite;
}
@keyframes bdmGoldBreath {
  0%, 100% { opacity: .12; }
  50%      { opacity: .26; }
}

/* Two orbiting light nodes riding an invisible carrier ring — one blue,
   one orange, opposite phases. No ring/track/border is drawn behind them;
   only the two dots themselves are visible. */
.bdm-led-orbit {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 88%;
  aspect-ratio: 1;
  /* Top of the stack, above the beds and passes (it precedes them in markup). */
  z-index: 4;
  transform: translate(-50%,-50%);
  pointer-events: none;
  animation: bdmLedSpin 22s linear infinite;
  will-change: transform;
}
@keyframes bdmLedSpin {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
.bdm-led-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: calc(50% - 4px);
}
.bdm-led-node--blue {
  top: -4px;
  background: radial-gradient(circle at 35% 30%, #fff, #8CD6FF 40%, #2E8BFF);
  box-shadow: 0 0 10px rgba(88,201,255,.9), 0 0 22px rgba(46,139,255,.5);
}
.bdm-led-node--orange {
  bottom: -4px;
  background: radial-gradient(circle at 35% 30%, #fff, #FFC478 40%, #FF8C00);
  box-shadow: 0 0 10px rgba(255,177,75,.9), 0 0 22px rgba(255,140,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  .bdm-cyber-object { animation: none !important; }
  .bdm-led-orbit { animation: none !important; }
  /* A stopped pulse is just a bright dash parked mid-ridge, which reads as a
     rendering fault. Drop the overlay and hand back the artwork's own
     brightness instead. */
  .bdm-led-path-overlay { display: none !important; }
  .bdm-cyber-mark { filter: saturate(1.02) contrast(1.02) drop-shadow(0 6px 8px rgba(0,0,0,.28)) !important; }
  .bdm-led-pass--gold {
    animation: none !important;
    opacity: .16;
  }
}

@media (max-width: 1200px) {
  .bdm-hero-visual-field { opacity: .85; width: clamp(260px, 34vw, 400px); }
}
@media (max-width: 900px) {
  /* Width/position for .bdm-hero-visual-field itself now lives with the
     rest of the mobile hero restructure above (.hero-visual-col .bdm-hero-
     visual-field), since it is a real flow element now, not an absolute
     overlay sized to dodge overlapping text. Only the non-geometric
     mobile-cost trims stay here. */
  .bdm-hero-visual-field { opacity: .85; transform: none; }
  .bdm-cyber-object { animation: none; }
  .bdm-led-orbit { animation: none; opacity: .4; }
  /* Same reasoning as reduced-motion: ~150 animated strokes would cost
     paint for detail nobody can resolve at this size. */
  .bdm-led-path-overlay { display: none; }
  .bdm-cyber-mark { filter: saturate(1.02) contrast(1.02) drop-shadow(0 6px 8px rgba(0,0,0,.28)); }
  .bdm-led-pass--gold { animation: none; opacity: .14; }
}

/* ---- Loader neon mark ---- */
.loader-brand-mark {
  display: block;
  width: clamp(84px, 13vw, 132px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 14px;
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 90%);
  mask-image: radial-gradient(circle, #000 60%, transparent 90%);
  opacity: .96;
}