@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;
}