#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; }
/* The SEO wheel tile is a link to its service page; it must look like the others. */
.wi { text-decoration: none; }

/* Footer links wrap as whole labels on narrow screens instead of breaking mid-label. */
.footer-links { flex-wrap: wrap; justify-content: center; gap: 0 1.6rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }

/* Footer services row: one link per service page, added as each page ships. */
.footer-services { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.6rem; padding-bottom: 1.1rem; margin-bottom: .4rem; border-bottom: 1px solid var(--border); }
.footer-services-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--amber); }
.footer-services a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text, #f0ede8); text-decoration: none; transition: color .2s; }
.footer-services a:hover { color: var(--amber); }
@media (max-width: 768px) { .footer-services { justify-content: center; } }

/* 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;
}

/* The ticker is decorative motion: let people stop it by hovering or keyboard focus (WCAG 2.2.2). */
#ticker:hover .ticker-track,
#ticker:focus-within .ticker-track { animation-play-state: paused; }