/* ============================================================
   v2 HOMEPAGE OVERLAY — keeps the v3 layout/markup intact and
   layers a full-screen interactive particle field behind it.
   Strips section backgrounds so the field reads across the whole
   screen; adds no washes behind copy. Colors/typography unchanged.
   ============================================================ */

/* The brand background + particle field are both fixed and full-viewport. */
html, body { background: transparent !important; }

.v2-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  /* Top wash pulled UP + dimmed so it no longer pools over the footer B (which
     forms high in the viewport) and recolors it blue. The blue glow now lives
     BELOW the B as a brighter floor pool (bottom radial), so the B reads as a
     light mark sitting above the glow rather than bathed in it. */
  background:
    radial-gradient(120% 74% at 50% -18%, rgba(45, 109, 217, 0.055), transparent 50%),
    radial-gradient(115% 90% at 50% 120%, rgba(45, 109, 217, 0.18), transparent 60%),
    var(--blue-charcoal, #010311);
}
.v2-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}
.v2-field canvas { display: block; }

/* Lift every content layer above the field. */
#nav,
.hero,
.doors,
.four-pillars,
.why-we-exist,
.closing-zone,
.footer { position: relative; z-index: 2; }

/* Strip the opaque/gradient section backgrounds so the field shows through
   across the entire screen (this is the "no background behind copy" + "field
   everywhere" ask). Door cards / pillars keep their own surfaces. */
.hero,
.doors,
.four-pillars,
.why-we-exist,
.closing,
.closing-zone,
.footer { background: transparent !important; }

/* The hero's own grid + orb backdrops are replaced by the particle field. */
.hero .grid-bg,
.hero .gradient-orb { display: none !important; }

/* The GPU particle cloud IS the B at both ends — it reforms into the B at the
   bottom (the footer B), so both static DOM B images are hidden. */
.hero-beacon.as-closing,
.closing .closing-mark-block { display: none !important; }

/* THE static blue glow behind the footer B: the v3 closing-section glow
   (.closing::before — a 66vw×88vh radial at rgba(45,109,217,0.8)). The particle
   B sits right in it → that's the "blue glow on the B". Remove it entirely. */
.closing::before { display: none !important; background: none !important; }
/* More vertical breathing room around the footer B (the closing section was
   short, so the B felt cramped between the routing card and the footer). */
.closing { min-height: 43vh !important; padding-top: 100px !important; padding-bottom: 125px !important; }

/* The v3 footer glow (.footer::before) sits in front of the particle B and
   recolors it blue. Drop it — the particle B + the fixed bg glow (which sits
   truly behind everything) provide the light. */
.footer::before { display: none !important; }

/* Kill the v3 hero ::before radial tint — it showed as a hard seam. */
.hero::before { background: none !important; }

/* ── Layout: left / right / center with OUR cards ───────────────
   Each section's content holds one side; the particle composition owns the
   other (offset opposite, set in MorphField COMP). Alternating sides give the
   page rhythm. Cards / borders / tokens unchanged — only placement. */

/* Hero — copy left, particle B right. */
.hero .hero-inner {
  align-items: flex-start; text-align: left;
  margin-left: auto; margin-right: auto; max-width: 820px;
}
.hero .hero-inner .hero-pill { margin-left: 0; }
.hero .hero-ctas { justify-content: flex-start; }

/* Portfolio — copy right, shape left. Stack all cards into one full-width
   column (was .door-grid.is-2; the className is now bare .door-grid after the
   3rd card was added, so this matches it and forces a single column). */
#portfolio .container { max-width: 800px; margin-left: auto; margin-right: auto; }
#portfolio .door-grid { grid-template-columns: 1fr; gap: 22px; }
#portfolio .door-inner { min-height: auto; }
/* In-dev card is message-only (no stats/cta), so it must size to its own
   content instead of inheriting the .door min-height:520px (styles.css) sized
   for the tall product cards. Width is unaffected — it stays full-width via the
   single-column grid. Scoped to .is-indev so the two product cards keep 520px. */
#portfolio .door.is-indev { min-height: auto; }
#portfolio .section-eyebrow, #portfolio .section-title,
#portfolio .section-lede, #portfolio .portfolio-aside { text-align: left; }
#portfolio .section-eyebrow { justify-content: flex-start; }

/* Operate — copy left, shape right. */
#operate .container { max-width: 800px; margin-left: auto; margin-right: auto; }
#operate .pillar-intro, #operate .section-cta { text-align: left; }
#operate .pillar-intro .section-eyebrow { justify-content: flex-start; }

/* Why — copy left (mirrors #operate's left pin), restoring operate → mission →
   why alternation. why-grid is display:block + funnel hidden below, so there is
   no graphic column to misposition when the margin flips. */
#why .container.why-grid { display: block; max-width: 800px; margin-left: auto; margin-right: auto; }
#why .why-graphic { display: none !important; }
#why .why-copy { text-align: left; }
#why .why-copy .section-eyebrow { justify-content: flex-start; }
#why .why-copy .section-cta { text-align: left; }

/* Mission teaser — copy right, opposite the operate section above it (operate
   sits left), so the page alternates operate → mission. Mirrors #why's
   right-margin + max-width; single-column container (no why-grid graphic col). */
#mission .container { max-width: 800px; margin-left: auto; margin-right: auto; }
#mission .why-copy { text-align: left; }
#mission .section-eyebrow { justify-content: flex-start; }
#mission .section-cta { text-align: left; }

/* Routing — centered (offset right by the alternating block below). */
#routing .container { max-width: 800px; margin-left: auto; margin-right: auto; }
#routing .door-grid { grid-template-columns: 1fr; gap: 20px; }
#routing .section-eyebrow, #routing .section-title { text-align: left; margin-left: 0; margin-right: auto; }
#routing .section-eyebrow { justify-content: flex-start; }

/* ZH Standard + Enterprise — the two inserted beats. Same centered-column base
   as #mission; the ±140px block shift is applied in the alternating block below
   (zh-standard right, enterprise left). Text stays LEFT-aligned because these
   hold long-form copy — so they are deliberately NOT added to the right-align
   header rule the short right-lean sections use. */
#zh-standard .container, #enterprise .container { max-width: 800px; margin-left: auto; margin-right: auto; }
#zh-standard .why-copy, #enterprise .why-copy { text-align: left; }
#zh-standard .section-eyebrow, #enterprise .section-eyebrow { justify-content: flex-start; }
#zh-standard .section-cta, #enterprise .section-cta { text-align: left; }

/* ── ALTERNATING OFFSET (desktop ≥1200px) — Home parallel to the interior pages.
   Columns are centered (above); a ±140px translateX nudges sections L/R so the
   page alternates hero(L) portfolio(R) operate(L) mission(R) why(L) routing(R)
   — every section participates, no centered-hero→leaning jump, and it fixes the
   old bottom-of-page break (why + routing were both pinned left). Constant 140px
   nudge: even the widest column (hero 820px) never reaches the gutter at
   1280/1440/1920. Gated ≥1200px so the ≤1024px mobile centering is untouched. */
@media (min-width: 1200px) {
  /* lean LEFT — hero + odd content sections */
  .hero .hero-inner,
  #operate .container,
  #portfolio .container,
  #why .container { transform: translateX(-140px); }

  /* lean RIGHT — even content sections */
  #zh-standard .container,
  #enterprise .container,
  #mission .container,
  #routing .container { transform: translateX(140px); }

  /* Refined Option A — right-align the header copy of the right-lean sections
     (eyebrow + title + short .section-lede) to mirror the left sections. Card
     grids (.door-grid) and body stay normal. */
  #mission .section-eyebrow, #routing .section-eyebrow {
    justify-content: flex-end !important;
  }
  #mission .section-title, #mission .section-lede,
  #routing .section-title, #routing .section-lede { text-align: right !important; }
}

/* Mobile + tablet — collapse the side columns to a centered single column.
   Raised to ≤1024 (was ≤900): on tablet the desktop split left the hero copy
   mis-aligned with the particle B pushed off the right edge. Tablet now centres,
   with the B sitting in the eyebrow→copy gap. Desktop (>1024) is unchanged. */
@media (max-width: 1024px) {
  .hero .hero-inner,
  #zh-standard .container, #enterprise .container,
  #portfolio .container, #operate .container,
  #why .container.why-grid, #mission .container, #routing .container {
    max-width: 620px; margin-left: auto; margin-right: auto;
  }
  .hero .hero-inner { align-items: center; text-align: center; }
  .hero .hero-ctas { justify-content: center; }
  #portfolio .section-eyebrow, #portfolio .section-title, #portfolio .section-lede,
  #portfolio .portfolio-aside, #why .why-copy, #why .why-copy .section-cta { text-align: left; margin-left: 0; }
  #portfolio .section-eyebrow, #why .why-copy .section-eyebrow { justify-content: flex-start; }
  /* Nav fits 5 links (Home + 4) + CTA + wordmark without crowding in the
     961–1024 band (links only hide ≤960). Tighten the gap + gutter. */
  #nav.nav { padding-left: 24px !important; padding-right: 24px !important; }
  #nav .nav-links { gap: 14px !important; }
}

/* ── Motion (Emil Kowalski rules) ──────────────────────────────
   Every pressable gives instant scale feedback with a strong custom ease-out;
   hover effects are gated to fine pointers; reduced-motion drops movement. */
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-cta,
.door-cta,
.btn-primary,
.btn-ghost {
  transition: transform 160ms var(--ease-out-strong),
    background-color 200ms var(--ease-out-strong),
    border-color 200ms var(--ease-out-strong),
    color 200ms var(--ease-out-strong);
}
.nav-cta:active,
.door-cta:active,
.btn-primary:active,
.btn-ghost:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta, .door-cta, .btn-primary, .btn-ghost { transition: none; }
  .nav-cta:active, .door-cta:active, .btn-primary:active, .btn-ghost:active { transform: none; }
}

/* Bigger button labels (keep the existing padding/margins around them). */
/* Nav CTA compact again (smaller than the page CTAs, "like it was"); the page
   CTAs — hero + section links — read a touch bigger. */
/* EVERY pill button == the nav "Investor inquiries" size, site-wide, with the
   label optically centred (it was sitting high). */
.nav-cta, .btn-primary, .btn-ghost {
  font-size: var(--fs-cta) !important; padding: 11px 22px !important;
  text-transform: uppercase !important; /* hero CTAs were lowercase → looked smaller than the UPPERCASE nav button */
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important; letter-spacing: 0.16em !important;
}

/* ── Hero fits the fold ─────────────────────────────────────────
   Top-anchor the copy (so it sits UP, just below the nav) + a smaller headline
   and tighter rhythm, so the pill, headline, lede, CTAs AND the scroll cue all
   land within the first screen on load. */
/* The nav is in-flow (~86px) and pushes the hero down, so a full 100vh hero
   spilled its bottom (and the scroll cue) below the fold. Size the hero to the
   space BELOW the nav so nav + hero == one screen and the cue stays in view. */
.hero { align-items: flex-start !important; min-height: calc(100vh - 86px) !important; padding-top: 72px !important; padding-bottom: 56px !important; }
.hero h1 { font-size: clamp(44px, 6.4vw, 100px) !important; margin-top: 32px !important; margin-bottom: 20px !important; } /* big on wide screens, scales down responsively; margin-top adds breathing room below the de-boxed eyebrow pill */
.hero .hero-pill { margin-bottom: 20px !important; align-items: center !important; line-height: 1 !important; max-width: 960px !important; flex-wrap: nowrap !important; }
/* Optically centre the eyebrow caps on the dot (line-height left descender slack
   so the uppercase text read high). Each label is nowrap so the longer eyebrow
   ("THE INTEGRITY LAYER FOR AI™") drops to its own line as a unit instead of
   breaking before "AI™". */
.hero .hero-pill > span:not(.dot) { line-height: 1 !important; display: inline-flex; align-items: center; white-space: nowrap; }
.hero p.lede { margin-bottom: 0 !important; }
.hero .hero-ctas { margin-top: 28px !important; }
.hero .scroll-cue { bottom: 26px; }

/* ── Nav: sticky + shrinks on scroll ──────────────────────────── */
#nav {
  position: sticky !important; top: 0;
  z-index: 100 !important; /* above every section so nothing scrolls over it */
  transition: padding .26s var(--ease-out-strong), background .26s ease, backdrop-filter .26s ease;
}
#nav.is-scrolled {
  padding-top: 12px !important; padding-bottom: 12px !important;
  background: rgba(1, 3, 17, 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(160, 200, 255, 0.12);
}

/* ── Arrow boxes: solid dark-blue fill on hover (was too low-contrast) ── */
.door .door-cta .arrow {
  background: rgba(12, 28, 70, 0.55) !important;
  border-color: rgba(150, 190, 255, 0.45) !important;
}
.door:hover .door-cta .arrow {
  background: #173a86 !important;
  border-color: rgba(180, 210, 255, 0.95) !important;
  color: #fff !important;
}

/* ── Number eyebrow → heading gap (Portfolio "Company 0x" + routing "0x") ── */
.door .door-num { margin-bottom: 18px !important; }

/* ── "Why this work" eyebrow: add the right-side dash (every other section has both) ── */
.why-we-exist .section-eyebrow::after {
  content: ""; width: 40px; height: 1px; background: currentColor; display: inline-block;
}

/* ── Footer: wider content + a thin divider line above it ─────── */
.footer::before {
  content: "" !important; display: block !important;
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,200,255,0.28), transparent);
  z-index: 6; pointer-events: none;
}
.footer .footer-inner, .footer .footer-bottom { max-width: 1440px !important; }

/* ── Blue-gradient "breaks" over the dark, carried down the whole page ──
   (the fixed field only lit the very top/bottom; add gentle mid accents). */
.v2-bg {
  /* Dark-BLUE base (was near-black) + gentle top/bottom ambient. The per-graphic
     "break" glow is now drawn in the canvas, tracking each shape. */
  background: #020409 !important; /* FLAT near-black navy — removed the static radial glow blob entirely */
}

/* ── MOBILE RESPONSIVENESS ──────────────────────────────────────
   On narrow screens the engine centres every shape (no more left/right
   bleed) and forms the footer B in the closing zone above the footer.
   These rules occlude the field behind the footer copy, soften it behind
   the now-centred body copy, and stack the pillar cards. */

/* The stacked footer is tall — make it solid so the fixed particle B can
   never bleed through over the footer copy (the "B over the footer" bug). */
@media (max-width: 1024px) {
  .footer { background: #020409 !important; }
}

@media (max-width: 1024px) {
  /* No global overlay (it dulled the graphics). Instead the particles are fewer
     + smaller on phones (engine), and each card carries a ~50% fill so the copy
     stands out and the glow behind it is minimised. */
  .door, .pillar { background: rgba(3, 7, 18, 0.5) !important; }

  /* Hero: eyebrow at the top, a gap where the centred mark sits, then the
     heading + lede + CTAs below it. */
  .hero { padding-top: 44px !important; }
  .hero .hero-pill { margin-bottom: 34vh !important; }
  /* MOBILE-ONLY hero eyebrow: two stacked lines with a thin rule between, no dot.
     (Desktop / tablet keep the original horizontal pill — homepage is locked.) */
  .hero .hero-pill { flex-direction: column !important; gap: 8px !important; }
  .hero .hero-pill .dot { display: none !important; }
  .hero .hero-pill .sep {
    align-self: stretch; height: 1px; margin: 1px 0;
    background: rgba(160, 200, 255, 0.32);
    font-size: 0 !important; /* hide the "/" glyph, keep the element as the rule */
  }
  /* The tall mobile hero pushes the CTAs down to where the absolute scroll cue
     sits, so they overlap — drop the cue on mobile (scrolling is obvious on touch). */
  .hero .scroll-cue { display: none !important; }

  /* "How we operate" cards: copy spans the FULL card width with the graphic
     stacked ON TOP. The pillar SVG is first in the DOM, so switching it from
     absolute to static lifts it above the number/heading/body — the
     industry-standard stacked card. */
  #operate .pillar-graphic {
    position: static !important;
    right: auto !important; top: auto !important; transform: none !important;
    width: 88px !important; height: 88px !important;
    opacity: 0.9 !important; margin: 0 0 18px !important;
  }
  #operate .pillar > .num,
  #operate .pillar > h3,
  #operate .pillar > p { max-width: 100% !important; }
  #operate .pillar { padding: 30px 26px !important; }
}

/* Mobile CTA fit — long CTA labels (20px, 0.16em tracking) were clipping on
   phones. The buttons are inline-flex with no width cap, so white-space:normal
   alone can't wrap them — they grow to full single-line width and overflow the
   viewport. max-width:100% constrains them to the container so the label wraps;
   line-height is relaxed so wrapped lines aren't clipped. Trimmed padding too.
   No font-size or desktop change. */
@media (max-width: 600px) {
  .nav-cta, .btn-primary, .btn-ghost {
    white-space: normal !important;
    max-width: 100% !important;
    padding: 11px 16px !important;
    line-height: 1.2 !important;
    text-align: center;
  }
  .door-cta { white-space: normal !important; max-width: 100% !important; }
}