/* ---------- Base ---------- */ :root { --bg: #111113; --bg-alt: #161618; --card: #1a1a1d; --border: #2a2a2d; --red: #cc1f1f; --red-glow: #ff3030; --text: #f2f2f0; --text-dim: #9a9a9d; --text-faint: #5c5c60; --font: "Helvetica Neue", Arial, sans-serif; --nlp-green: #9dfb4c; --nlp-green-dim: rgba(157, 251, 76, 0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x lives on , not — this matters more than it looks. Per the CSS spec, setting overflow-x to anything other than "visible" forces the paired overflow-y to compute as "auto" on THAT SAME element, no matter what overflow-y is explicitly set to. Put that on and you get a second, independent scroll box nested inside 's own — two overlapping scrollbars, and position:sticky elements (like .site-header) losing track of which scroll context they're supposed to follow, which is what was causing the header/hero to appear "pinned" while the page scrolled underneath it on mobile. Putting it on instead means the auto-promotion happens on the one true root scroller, with nothing left to nest inside it. */ html { scroll-behavior: smooth; overflow-x: hidden; } html, body { background: var(--bg); } body { color: var(--text); font-family: var(--font); line-height: 1.6; width: 100%; text-shadow: 0 6px 24px rgba(0, 0, 0, 0.85); } a { color: inherit; text-decoration: none; } .kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: 1.05rem; color: var(--red-glow); margin-bottom: 14px; font-weight: 600; } .dot { color: var(--red-glow); } /* ---------- Scroll Reveal (used on inner pages) ---------- */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .fade-up { opacity: 0; animation: fadeUp 0.9s ease forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseGlow { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.18); } } /* ---------- Page shell (no-scroll landing layout) ---------- */ .page-shell { display: flex; flex-direction: column; /* iOS's collapsible browser toolbar (address bar, and on some browsers a second bottom bar) means the actually-visible viewport is smaller than 100vh whenever that chrome is showing. .page-shell's children (header/main/footer) don't flex-grow, so on any page short enough for that inflated 100vh to exceed their real combined height, the flex container's own box still stretches to fill it — leaving real, genuinely-scrollable blank space below the footer that doesn't rubber-band back (confirmed on a real iPhone). Tried CSS's 100dvh unit first, which is meant to solve exactly this — but it didn't fix it on Chrome for iOS, so this uses --vh instead: a custom property js/main.js keeps in sync with window.innerHeight, the one viewport measurement every browser gets right regardless of unit-support quirks. 100vh stays as the very first declaration purely as a fallback for the (very rare) case JS is disabled. */ min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; width: 100%; background: rgba(17, 17, 19, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); flex-shrink: 0; } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; padding: 0 5vw; } .header-inner .logo { justify-self: start; } .header-inner .main-nav { justify-self: center; } /* Wraps