/* ---------- Self-hosted fonts (was fonts.googleapis.com) ---------- Google's CSS was render-blocking AND cross-origin: the browser had to fetch and parse it before it could even REQUEST the woff2 files from a second origin. That two-hop waterfall put document.fonts.ready at ~1.5s, which gated the whole opening — the walk can't start until the fonts are real (SplitText measures glyphs, so fallback metrics give a wrong hero reveal). Inter and Space Grotesk are VARIABLE fonts — one file each covers every weight we use. Do not switch these to per-weight statics: that was 327KB across 11 files instead of 98KB across 4. Preloaded in . */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/vendor/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/vendor/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/vendor/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/vendor/fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/vendor/fonts/inter-300-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/vendor/fonts/inter-300-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/space-grotesk-300-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/space-grotesk-300-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ FLUXSER — Financial Services Shared stylesheet for every page of the site. Palette: void / ice / pulse cyan / magenta (rare) One easing everywhere: cubic-bezier(0.16, 1, 0.3, 1) ============================================================ */ /* ---------- Tokens ---------- */ :root { --void: #04060a; --ice: #eef2f7; --pulse: #5be9ff; --magenta: #ff3d8a; --ice-muted: rgba(238, 242, 247, 0.78); --ice-faint: rgba(238, 242, 247, 0.5); --hairline: rgba(238, 242, 247, 0.12); --glass: rgba(14, 18, 26, 0.55); --glow: #5be9ff; --font-display: "Space Grotesk", "Inter", sans-serif; --font-body: "Inter", sans-serif; --font-mono: "IBM Plex Mono", monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); --r-card: 10px; --r-btn: 8px; --container: 1240px; --gutter: clamp(24px, 5vw, 64px); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: dark; -webkit-text-size-adjust: 100%; } body { background: var(--void); color: var(--ice); font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.65; min-height: 100vh; overflow-x: hidden; } @media (max-width: 900px) { body { font-size: 17px; } } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; } ::selection { background: rgba(91, 233, 255, 0.25); color: var(--ice); } :focus-visible { outline: 1px solid var(--pulse); outline-offset: 3px; } /* Emphasis is never italic — pulse cyan, weight 300 */ em { font-style: normal; color: var(--pulse); font-weight: 300; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 2000; padding: 10px 16px; border-radius: var(--r-btn); background: var(--pulse); color: #05161d; font-size: 13px; font-weight: 500; transform: translateY(-64px); transition: transform 0.4s var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* ============================================================ FIXED LAYERS (behind content) ============================================================ */ #entity { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } #scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 85% at 50% 28%, color-mix(in srgb, var(--glow) 9%, transparent) 0%, transparent 62%), radial-gradient(140% 120% at 50% 55%, transparent 52%, rgba(2, 3, 6, 0.78) 100%); } #grain { position: fixed; inset: -140px; z-index: 2; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 300px 300px; animation: grain-shift 0.9s steps(9) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 11% { transform: translate(-2%, -3%); } 22% { transform: translate(3%, -1%); } 33% { transform: translate(-3%, 2%); } 44% { transform: translate(2%, 3%); } 55% { transform: translate(-1%, -2%); } 66% { transform: translate(3%, 1%); } 77% { transform: translate(-2%, 3%); } 88% { transform: translate(1%, -3%); } 100% { transform: translate(0, 0); } } /* ============================================================ HUD — chronometer + telemetry (below main content) ============================================================ */ .hud { position: fixed; bottom: 26px; z-index: 3; display: flex; flex-direction: column; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; pointer-events: none; transition: opacity 0.9s var(--ease); } .hud.is-hidden { opacity: 0; } .hud-left { left: 30px; } .hud-right { right: 30px; text-align: right; } .hud-epoch { color: var(--pulse); } .hud-time, .hud-coords { color: var(--ice-faint); } .hud-status { color: var(--ice-faint); } .hud-status-dot { transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease); } .hud-right.is-disturbed .hud-status-dot { color: var(--magenta); text-shadow: 0 0 10px rgba(255, 61, 138, 0.8); } /* ============================================================ MAIN CONTENT sits above HUD and fixed layers ============================================================ */ main, .footer { position: relative; z-index: 4; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(20px, 3.5vw, 44px); background: linear-gradient(180deg, rgba(4, 6, 10, 0.72) 0%, rgba(4, 6, 10, 0) 100%); } .nav-logo { display: flex; flex-direction: column; line-height: 1.1; } .nav-logo-mark { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.14em; } .nav-logo-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ice-faint); } .nav-links { display: flex; gap: clamp(18px, 2.6vw, 36px); } .nav-links a { font-size: 16px; font-weight: 400; color: var(--ice-muted); transition: color 0.5s var(--ease); position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--pulse); transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease); } .nav-links a:hover { color: var(--ice); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-actions { display: flex; align-items: center; gap: 14px; } .sound-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ice-faint); border: 1px solid var(--hairline); border-radius: var(--r-btn); padding: 7px 11px; transition: color 0.5s var(--ease), border-color 0.5s var(--ease); } .chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ice-faint); transition: background-color 0.4s var(--ease); } .sound-chip.is-on { color: var(--ice-muted); border-color: rgba(91, 233, 255, 0.3); } .sound-chip.is-on .chip-dot { background: var(--pulse); animation: pulse-dot 2.4s var(--ease) infinite; } .sound-chip:hover { color: var(--ice-muted); border-color: rgba(238, 242, 247, 0.28); } .nav-burger { display: none; position: relative; width: 40px; height: 36px; border: 1px solid var(--hairline); border-radius: var(--r-btn); flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-burger span { display: block; width: 16px; height: 1px; background: var(--ice); transition: transform 0.5s var(--ease); } .nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; padding: 96px var(--gutter) 48px; background: rgba(4, 6, 10, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); } .mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .mobile-menu > a { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: -0.01em; color: var(--ice); } .mobile-menu-cta { margin-top: 18px; font-family: var(--font-body); font-size: 14px; font-weight: 500; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; border-radius: var(--r-btn); font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease), color 0.6s var(--ease), box-shadow 0.6s var(--ease); will-change: transform; } .btn-primary { background: var(--pulse); color: #05161d; } .btn-primary:hover { box-shadow: 0 0 28px rgba(91, 233, 255, 0.35); } .btn-ghost { border: 1px solid var(--hairline); color: var(--ice); } .btn-ghost:hover { border-color: rgba(91, 233, 255, 0.45); color: var(--pulse); } .btn-glass { background: var(--glass); border: 1px solid var(--hairline); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ice); font-size: 13px; padding: 11px 18px; } .btn-glass:hover { border-color: rgba(91, 233, 255, 0.45); } .btn-block { width: 100%; } /* ============================================================ EPOCH RAIL (right edge, home only) ============================================================ */ .rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 16px; padding-right: 22px; } .rail-item { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 2px 0; } .rail-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice-faint); opacity: 0; transform: translateX(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.5s var(--ease); } .rail-dash { width: 18px; height: 1px; background: var(--hairline); transition: width 0.6s var(--ease), background-color 0.6s var(--ease), box-shadow 0.6s var(--ease); } .rail-item:hover .rail-label { opacity: 1; transform: translateX(0); } .rail-item:hover .rail-dash { background: var(--ice-faint); } .rail-item.is-active .rail-label { opacity: 1; transform: translateX(0); color: var(--ice); } .rail-item.is-active .rail-dash { width: 36px; background: var(--pulse); box-shadow: 0 0 10px rgba(91, 233, 255, 0.8); } /* ============================================================ PRELOADER ============================================================ */ #preloader { position: fixed; inset: 0; z-index: 999; background: var(--void); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .js:not(.reduced) #preloader { display: flex; } .preloader-count { display: flex; align-items: baseline; gap: 16px; font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 17vw, 12rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .preloader-suffix { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ice-faint); } .preloader-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ice-faint); } .preloader-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--hairline); } .preloader-bar span { display: block; width: 100%; height: 1px; background: var(--pulse); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px rgba(91, 233, 255, 0.7); } /* ============================================================ CUSTOM CURSOR ============================================================ */ /* The custom cyan dot was lerped toward the real pointer, so the visible cursor trailed the mouse and felt slow. We now use the native OS cursor (zero latency, hardware-composited) and never draw the dot. */ .cursor { display: none; position: fixed; top: 0; left: 0; z-index: 1000; width: 8px; height: 8px; border-radius: 50%; background: var(--pulse); box-shadow: 0 0 12px rgba(91, 233, 255, 0.9), 0 0 34px rgba(91, 233, 255, 0.45); pointer-events: none; opacity: 0; margin: -4px 0 0 -4px; transition: width 0.4s var(--ease), height 0.4s var(--ease), margin 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.4s var(--ease); } .cursor.is-on { opacity: 1; } .cursor.is-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: transparent; border: 1px solid var(--pulse); box-shadow: 0 0 18px rgba(91, 233, 255, 0.35); } @media (pointer: fine) { /* native cursor everywhere; interactive controls get the pointer hand */ .js:not(.reduced) button, .js:not(.reduced) [data-magnetic], .js:not(.reduced) .sound-chip { cursor: pointer; } } @media (pointer: coarse) { .cursor { display: none; } } /* Burst discoverability hint — trails the pointer over empty sky */ .cursor-hint { position: fixed; top: 0; left: 0; z-index: 999; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice-muted); /* keep it legible when it drifts across the bright brand mark */ text-shadow: 0 1px 8px rgba(4, 6, 10, 0.95), 0 0 3px rgba(4, 6, 10, 0.9); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease); } .cursor-hint.is-on { opacity: 1; } @media (pointer: coarse) { .cursor-hint { display: none; } } /* ============================================================ TYPOGRAPHY PATTERNS ============================================================ */ .kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--pulse); margin-bottom: clamp(20px, 3vh, 36px); } .section-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.04; letter-spacing: -0.02em; } .section-title .tl { display: block; } .section-note, .section-body { font-size: 19px; font-weight: 300; color: var(--ice-muted); max-width: 66ch; margin-top: clamp(20px, 3vh, 32px); } .display-line { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } .mono-caption { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice-faint); margin-top: 14px; } /* ============================================================ SECTIONS — the walk ============================================================ */ .section { position: relative; min-height: 100vh; display: flex; align-items: center; padding-block: clamp(110px, 16vh, 190px); } /* Content sections get dwell time for the WebGL forms */ #rhythm, #quote, #insights, #trust { min-height: 130vh; } /* ---------- 0 · HERO ---------- */ .hero { flex-direction: column; justify-content: center; text-align: center; /* reserve room for the absolute hero-meta bar on short viewports */ padding-bottom: clamp(150px, 20vh, 210px); } .hero-inner { display: flex; flex-direction: column; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ice-muted); margin-bottom: clamp(18px, 3vh, 30px); } .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pulse); animation: pulse-dot 2.4s var(--ease) infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(91, 233, 255, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(91, 233, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 233, 255, 0); } } .brand-mark { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 15.5vw, 15rem); line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; } .hero-subtitle { font-family: var(--font-mono); font-weight: 400; font-size: clamp(13px, 1.5vw, 15px); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice-muted); max-width: 72ch; line-height: 2; margin-top: clamp(18px, 3vh, 30px); } .hero-body { font-size: 19px; color: var(--ice-muted); max-width: 66ch; margin-top: clamp(16px, 2.6vh, 26px); } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(28px, 4.5vh, 44px); } .hero-meta { position: absolute; left: 0; right: 0; bottom: 30px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; padding-inline: clamp(24px, 3.5vw, 48px); text-align: left; } .hero-meta-col { display: flex; flex-direction: column; gap: 4px; } .hero-meta-right { text-align: right; } .hero-meta-cue { align-items: center; text-align: center; gap: 12px; } .meta-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ice-faint); } .meta-strong { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; color: var(--ice-muted); } .meta-faint { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ice-faint); } .cue-line { width: 1px; height: 44px; background: linear-gradient(180deg, var(--pulse), transparent); animation: cue-drop 2.2s var(--ease) infinite; transform-origin: top; } @keyframes cue-drop { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(18px); opacity: 0; } } /* ---------- 1 · STATEMENT ---------- */ .statement-inner { display: flex; flex-direction: column; } .statement-lines { display: flex; flex-direction: column; gap: clamp(6px, 1vh, 14px); } .pain-list { margin-top: clamp(36px, 6vh, 64px); display: flex; flex-direction: column; gap: 8px; } .pain-list li { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.14em; color: var(--ice-faint); } .pain-list li::before { content: "·"; margin-right: 12px; color: var(--ice-faint); } /* Short viewports (150%-scaled laptops, landscape phones): the statement is pinned for +130%, so the whole block must fit above the fold while held */ @media (max-height: 700px) { .statement { padding-block: clamp(44px, 8vh, 110px); } .statement .display-line { font-size: clamp(1.7rem, 4.4vw, 3.2rem); } .statement .kicker { margin-bottom: 16px; } .statement .pain-list { margin-top: clamp(16px, 3vh, 36px); } } /* ---------- 2 · SERVICES — pinned horizontal gallery ---------- */ .section-head { margin-bottom: clamp(48px, 8vh, 88px); } .services { flex-direction: column; justify-content: center; align-items: stretch; } .services .section-head { margin-bottom: clamp(28px, 5vh, 52px); } .services-gallery { width: 100%; } .services-track { display: flex; gap: clamp(18px, 2vw, 28px); width: max-content; padding-inline: var(--gutter); will-change: transform; } .services-track .service-card { flex: none; width: clamp(300px, 30vw, 420px); } .services-progress { height: 1px; background: var(--hairline); margin: clamp(24px, 4.5vh, 44px) var(--gutter) 0; } .services-progress span { display: block; height: 1px; background: var(--pulse); box-shadow: 0 0 8px rgba(91, 233, 255, 0.7); transform: scaleX(0); transform-origin: left; } /* while pinned, the whole gallery — head, track, progress bar — must fit inside one viewport (the pin exists only at min-width 881px) */ @media (min-width: 881px) and (max-height: 1000px) { .services { padding-block: clamp(40px, 6vh, 90px); } .services .section-title { font-size: clamp(2rem, 3.6vh, 3.4rem); } .services .section-head { margin-bottom: clamp(18px, 3vh, 32px); } .services .section-note { margin-top: 14px; } .services-track .service-card { width: clamp(280px, 38vh, 420px); } .services-progress { margin-top: clamp(14px, 2.5vh, 28px); } } /* the hub page reuses the home cards as a two-column grid */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 28px); } .glass { background: var(--glass); border: 1px solid var(--hairline); border-radius: var(--r-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .service-card { display: block; overflow: hidden; transition: border-color 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease); } .service-card:hover { border-color: rgba(91, 233, 255, 0.35); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; } /* hover zoom transition only once the GSAP wipe has finished (or never runs) — a live transition would fight the wipe tween frame by frame */ .card-media img.is-wiped, html:not(.js) .card-media img, .reduced .card-media img { transition: transform 1.2s var(--ease); } .service-card:hover .card-media img { transform: scale(1.05); } /* Duotone treatment for every photograph; hover de-greyscales card images */ .duotone img { filter: grayscale(0.35) contrast(1.06) brightness(0.82); transition: filter 0.8s var(--ease); } .service-card:hover .card-media img { filter: grayscale(0) contrast(1.03) brightness(0.92); } .media-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(175deg, rgba(91, 233, 255, 0.14) 0%, rgba(4, 6, 10, 0.1) 45%, rgba(4, 6, 10, 0.55) 100%); } .card-body { padding: 22px 24px 28px; } .card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .card-num { font-family: var(--font-mono); font-size: 13px; color: var(--pulse); letter-spacing: 0.14em; } .card-tag { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice-faint); } .card-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.01em; transition: color 0.5s var(--ease); } .card-blurb { font-size: 17px; color: var(--ice-muted); margin-top: 10px; max-width: 46ch; } /* ---------- 3 · FEATURED / RHYTHM ---------- */ .featured-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .stats { margin-top: clamp(32px, 5vh, 52px); border-top: 1px solid var(--hairline); } .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--hairline); } .stat dt { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ice-faint); } .stat dd { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.1em; color: var(--ice-muted); } .figure-frame { position: relative; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--hairline); } .ratio-4x5 { aspect-ratio: 4 / 5; } .ratio-16x9 { aspect-ratio: 16 / 9; } .figure-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .featured-figure { max-width: 460px; justify-self: end; width: 100%; } /* over-scan: the photograph is 115% of its frame and pans −12% on scroll */ .featured-figure .figure-frame img { height: 115%; } /* ---------- 4 · QUOTE ---------- */ .quote-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: center; } /* "Twelve months of books," must never wrap mid-phrase: the container query caps the heading so the phrase always fits its column on one line. Measured: the phrase renders at 11.4722em (Space Grotesk 500, −0.02em tracking) → cap = 100 ÷ 11.4722 × 0.97 = 8.46cqw */ .quote-lead { container-type: inline-size; } .quote-lead .section-title { font-size: min(clamp(42px, 6vw, 88px), 8.46cqw); } .quote-figure { margin-top: clamp(36px, 6vh, 60px); max-width: 520px; } .quote-card { padding: clamp(28px, 3vw, 40px); background: rgba(14, 18, 26, 0.65); /* legibility: raised from the 0.55 glass */ } .quote-card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.02em; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); } .quote-rows { margin-bottom: 28px; } .quote-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--hairline); } .quote-row dt { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice-faint); white-space: nowrap; } .quote-row dd { font-size: 15px; color: var(--ice-muted); text-align: right; } /* ---------- 5 · INSIGHTS — subtle glass panels ---------- */ .insight-list { display: flex; flex-direction: column; gap: 12px; } .insight-row { display: grid; grid-template-columns: 180px 1.15fr 1.3fr auto; align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: 24px 28px; background: rgba(4, 6, 10, 0.55); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); border: 1px solid rgba(238, 242, 247, 0.07); border-radius: var(--r-card); transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease), transform 0.6s var(--ease); } .insight-row:hover { border-color: rgba(91, 233, 255, 0.28); background: rgba(10, 20, 24, 0.62); /* faint cyan cast without losing the dark backing */ box-shadow: 0 0 26px rgba(91, 233, 255, 0.12); transform: translateX(6px); } .insight-meta { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice-faint); } .insight-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.01em; transition: color 0.5s var(--ease); } .insight-row:hover .insight-name { color: var(--pulse); } .insight-desc { font-size: 15px; color: var(--ice-muted); } .insight-arrow { font-family: var(--font-display); font-size: 1.2rem; color: var(--ice-faint); transition: transform 0.6s var(--ease), color 0.6s var(--ease); } .insight-row:hover .insight-arrow { transform: translateX(6px); color: var(--pulse); } /* ---------- 6 · MANIFESTO / TRUST ---------- */ .manifesto { text-align: center; } .manifesto-inner { display: flex; flex-direction: column; align-items: center; } .manifesto-lines { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 20px); /* full width, or text-wrap:balance shrink-wraps the lines inside the centered flex column */ width: 100%; } .manifesto-lines .display-line { width: 100%; } .manifesto .display-line { font-size: clamp(1.9rem, 4.6vw, 3.7rem); } .manifesto-credit { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--ice-faint); margin-top: clamp(40px, 7vh, 72px); } /* ---------- 7 · BEGIN / FINAL ---------- */ .begin { flex-direction: column; justify-content: center; } .begin-inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .begin-head { display: flex; flex-direction: column; align-items: center; } .begin-head .section-body { margin-inline: auto; } .begin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(28px, 4.5vh, 44px); } .who-for { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); width: 100%; margin-top: clamp(64px, 11vh, 110px); text-align: left; } .who-card { display: block; padding: 26px 26px 30px; transition: border-color 0.6s var(--ease), transform 0.6s var(--ease); } .who-card:hover { border-color: rgba(91, 233, 255, 0.35); transform: translateY(-4px); } .who-tag { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pulse); margin-bottom: 14px; } .who-blurb { font-size: 17px; color: var(--ice-muted); } .faq-teaser { width: 100%; max-width: 760px; margin-top: clamp(56px, 9vh, 96px); text-align: left; border-top: 1px solid var(--hairline); } .faq-line { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; padding: 18px 0; border-bottom: 1px solid var(--hairline); } .faq-q { font-family: var(--font-display); font-weight: 500; font-size: 17px; white-space: nowrap; } .faq-a { font-size: 16px; color: var(--ice-muted); text-align: right; max-width: 52ch; } .faq-all { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pulse); margin-top: 22px; transition: opacity 0.5s var(--ease); } .faq-all:hover { opacity: 0.7; } /* ============================================================ SUBPAGE SHELL — every non-home page ============================================================ */ .subpage main { padding-top: 96px; } .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice-faint); padding-top: 22px; } .breadcrumb a { color: var(--ice-faint); transition: color 0.5s var(--ease); } .breadcrumb a:hover { color: var(--ice); } .breadcrumb [aria-current] { color: var(--ice-muted); } .page-hero { padding: clamp(64px, 12vh, 130px) 0 clamp(44px, 8vh, 84px); } .page-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 20ch; } .page-lead { font-size: 19px; font-weight: 300; color: var(--ice-muted); max-width: 66ch; margin-top: clamp(20px, 3vh, 32px); } /* service-page content blocks */ .svc-block { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--hairline); padding: clamp(40px, 7vh, 64px) 0; } .svc-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--pulse); padding-top: 6px; } .svc-body { font-size: 18px; font-weight: 300; color: var(--ice-muted); max-width: 62ch; } .svc-body a { color: var(--pulse); transition: opacity 0.5s var(--ease); } .svc-body a:hover { opacity: 0.75; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; } .chip { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: var(--ice-muted); background: var(--glass); border: 1px solid var(--hairline); border-radius: var(--r-btn); padding: 10px 15px; white-space: nowrap; } .svc-faq { width: 100%; } .svc-faq details { border-bottom: 1px solid var(--hairline); } .svc-faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ice); padding: 18px 0; } .svc-faq summary::-webkit-details-marker { display: none; } .svc-faq summary::after { content: '+'; font-family: var(--font-mono); font-size: 14px; color: var(--pulse); transition: transform 0.5s var(--ease); } .svc-faq details[open] summary::after { transform: rotate(45deg); } /* the FAQ page: one long column of honest answers */ .faq-wrap { max-width: 860px; } .faq-wrap summary { font-size: 18px; padding: 22px 0; } .faq-wrap details p { font-size: 18px; line-height: 1.7; } .svc-faq details p { font-size: 18px; color: var(--ice-muted); max-width: 60ch; padding: 0 0 20px; } .related-link { display: inline-flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ice); transition: color 0.5s var(--ease); } .related-link:hover { color: var(--pulse); } .related-link .insight-arrow { font-size: 1rem; } /* who-we-serve: size/stage cards, persona rows, related-service chips */ .who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); } @media (max-width: 700px) { .who-grid { grid-template-columns: 1fr; } } .svc-note { font-size: 16px; color: var(--ice-muted); max-width: 60ch; margin-top: 22px; } .persona-list { border-top: 1px solid var(--hairline); } .persona-list li { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice-muted); padding: 13px 0; border-bottom: 1px solid var(--hairline); } a.chip { transition: border-color 0.5s var(--ease), color 0.5s var(--ease); } a.chip:hover { border-color: rgba(91, 233, 255, 0.45); color: var(--ice); } /* about: engagement timeline, trust display, where-we-are card */ .timeline { border-top: 1px solid var(--hairline); } .timeline-row { display: grid; grid-template-columns: 140px 1fr; gap: clamp(16px, 2.4vw, 36px); padding: 20px 0; border-bottom: 1px solid var(--hairline); } .timeline-key { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pulse); padding-top: 3px; } .timeline-copy { font-size: 17px; color: var(--ice-muted); max-width: 58ch; } @media (max-width: 700px) { .timeline-row { grid-template-columns: 1fr; gap: 6px; } } .trust-head { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 2.1rem); letter-spacing: 0.04em; margin-bottom: 18px; } .svc-body .btn { margin-top: 26px; } .cta-title--long { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 500; max-width: 44ch; text-wrap: balance; } /* insight articles: prose column, pull-quote, cross-CTA */ .article-body { max-width: 65ch; } .article-body p { font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--ice-muted); margin-bottom: 22px; } .article-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.01em; margin: 46px 0 18px; } .article-body ul { margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; } .article-body li { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ice-muted); padding-left: 22px; position: relative; } .article-body li::before { content: '·'; position: absolute; left: 4px; color: var(--pulse); } .article-body a { color: var(--pulse); transition: opacity 0.5s var(--ease); } .article-body a:hover { opacity: 0.75; } .pull-quote { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 30px 0; margin: 44px 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.3vw, 1.65rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ice); text-wrap: balance; } .cta-band .chip-row { justify-content: center; } /* contact: the consultation form (the quote card's frosted material) */ .contact-form { max-width: 720px; padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice-faint); } .form-field input, .form-field textarea { background: rgba(4, 6, 10, 0.5); border: 1px solid var(--hairline); border-radius: var(--r-btn); padding: 13px 15px; color: var(--ice); font-family: var(--font-body); font-weight: 300; font-size: 16px; transition: border-color 0.4s var(--ease); } .form-field textarea { min-height: 120px; resize: vertical; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: rgba(91, 233, 255, 0.45); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--ice-faint); } .form-field .is-invalid { border-color: rgba(255, 61, 138, 0.55); } .hp-field { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); } .contact-form .btn { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; } .form-success { font-size: 18px; color: var(--ice); padding: 24px 0; } .form-error { font-size: 14px; color: var(--magenta); } .form-error + .form-error { display: none; } .contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); max-width: 720px; margin-top: clamp(28px, 4vh, 44px); } @media (max-width: 700px) { .contact-cards { grid-template-columns: 1fr; } } .contact-card { padding: 26px; } .contact-card .who-tag { margin-bottom: 12px; } .contact-card p { font-size: 16px; color: var(--ice-muted); } .contact-card a { color: var(--pulse); } /* legal pages */ .legal-flag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--magenta); border: 1px solid rgba(255, 61, 138, 0.25); border-radius: var(--r-btn); padding: 12px 16px; display: inline-block; margin-bottom: 36px; } .legal-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice-faint); margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hairline); } /* CTA band (service pages) + closing band (hub) */ .cta-band { border-top: 1px solid var(--hairline); padding: clamp(64px, 12vh, 120px) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } .cta-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.02em; } .cta-note { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice-faint); } .closing-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 4.4vw, 3.2rem); letter-spacing: 0.06em; } @media (max-width: 880px) { .svc-block { grid-template-columns: 1fr; gap: 16px; } .svc-label { padding-top: 0; } } /* ============================================================ FOOTER (reused on every page) ============================================================ */ .footer { border-top: 1px solid var(--hairline); padding: clamp(64px, 10vh, 96px) 0 36px; background: linear-gradient(180deg, rgba(2, 3, 6, 0) 0%, rgba(2, 3, 6, 0.65) 100%); } .footer-inner { display: grid; grid-template-columns: 1.3fr 1.8fr 1fr 1.2fr; gap: clamp(32px, 4vw, 56px); } .footer-logo { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: 0.14em; } .footer-logo-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ice-faint); margin-top: 4px; } .footer-loc { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ice-faint); margin-top: 22px; max-width: 42ch; line-height: 1.9; } .footer-mail, .footer-tel { margin-top: 6px; } .footer-loc a { color: var(--ice-muted); transition: color 0.5s var(--ease); } .footer-loc a:hover { color: var(--pulse); } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-head { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ice-faint); margin-bottom: 8px; } .footer-col a { font-size: 15px; color: var(--ice-muted); transition: color 0.5s var(--ease); width: fit-content; } .footer-col a:hover { color: var(--ice); } /* SERVICES has grown to eighteen links — flow them into balanced columns beneath a full-width heading instead of one tall single-file list */ .footer-col--wide { display: block; columns: 150px 2; column-gap: clamp(24px, 3vw, 40px); } .footer-col--wide .footer-head { column-span: all; } .footer-col--wide a { display: block; width: fit-content; margin-bottom: 10px; break-inside: avoid; } .footer-legal { margin-top: clamp(48px, 8vh, 72px); padding-top: 24px; border-top: 1px solid var(--hairline); } .footer-legal p { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ice-faint); line-height: 2; } .footer-legal a { color: var(--ice-muted); transition: color 0.5s var(--ease); } .footer-legal a:hover { color: var(--ice); } /* scroll-velocity glitch: 240ms RGB-split on display headings */ .is-glitch { text-shadow: 2px 0 rgba(91, 233, 255, 0.8), -2px 0 rgba(255, 61, 138, 0.8); transform: skewX(-1.2deg); } /* ============================================================ ANIMATION INITIAL STATES (JS-enhanced only) ============================================================ */ /* :not(.is-revealed)/:not(.is-wiped) — JS clears its inline transforms on complete (so CSS :hover transforms work again) and must not re-trigger these */ .js:not(.reduced) [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(28px); } .js:not(.reduced) [data-split] { visibility: hidden; } .js:not(.reduced) .brand-mark { visibility: hidden; } .js:not(.reduced) .hero-fade { opacity: 0; transform: translateY(24px); } .js:not(.reduced) [data-wipe]:not(.is-wiped) { clip-path: inset(0 0 100% 0); transform: scale(1.25); } /* ============================================================ REDUCED MOTION — everything visible, nothing moves ============================================================ */ .reduced #grain, .reduced .pulse-dot, .reduced .cue-line { animation: none; } .reduced .hud { transition: none; } @media (prefers-reduced-motion: reduce) { html:not(.js) * { animation: none !important; transition: none !important; } } /* ============================================================ LEGIBILITY LAYER — the copy always wins over the entity ============================================================ */ /* one scrim utility, applied by selector so every page inherits it */ .copy-scrim, .statement-lines, .manifesto-lines, .section-body, .section-note, .page-lead, .svc-block, .article-body, .faq-wrap, .contact-form, .contact-card, .footer-inner { background: rgba(4, 6, 10, 0.55); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); border: 1px solid rgba(238, 242, 247, 0.07); border-radius: 14px; padding: 28px 32px; } @supports not (backdrop-filter: blur(1px)) { .copy-scrim, .statement-lines, .manifesto-lines, .section-body, .section-note, .page-lead, .svc-block, .article-body, .faq-wrap, .contact-form, .contact-card, .footer-inner { background: rgba(4, 6, 10, 0.82); } } @media (max-width: 900px) { .copy-scrim, .statement-lines, .manifesto-lines, .section-body, .section-note, .page-lead, .svc-block, .article-body, .faq-wrap, .contact-form, .contact-card, .footer-inner { padding: 20px 22px; } } /* boxed svc-blocks stack with breathing room instead of hairline dividers */ .svc-block { margin-bottom: 16px; } /* pinned statement on short viewports: slimmer scrim padding keeps the whole block above the fold */ @media (max-height: 700px) { .statement-lines { padding: 16px 20px; } } /* giant display type floats — a radial halo behind the block, no box */ .hero-inner, .section-head, .begin-head, .featured-copy, .quote-copy, .manifesto-inner, .page-hero .container { position: relative; } .hero-inner::before, .section-head::before, .begin-head::before, .featured-copy::before, .quote-copy::before, .manifesto-inner::before, .page-hero .container::before { content: ''; position: absolute; inset: -16% -18%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(4, 6, 10, 0.72), transparent 72%); } .brand-mark, .section-title, .display-line, .page-h1, .cta-title, .closing-title, .trust-head { text-shadow: 0 2px 24px rgba(4, 6, 10, 0.9), 0 0 90px rgba(4, 6, 10, 0.7); } /* the scroll-velocity glitch must still beat the halo shadow (cascade) */ .is-glitch { text-shadow: 2px 0 rgba(91, 233, 255, 0.8), -2px 0 rgba(255, 61, 138, 0.8); transform: skewX(-1.2deg); } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 881px) { .mobile-menu { display: none; } } @media (max-width: 1100px) { .rail { display: none; } .hud { display: none; } } @media (max-width: 900px) { .section-note, .section-body, .page-lead, .hero-body { font-size: 17px; } .featured-inner { grid-template-columns: 1fr; } .featured-figure { justify-self: start; } .nav-logo-sub { display: none; } } @media (max-width: 960px) { .quote-inner { grid-template-columns: 1fr; } .insight-row { grid-template-columns: 1fr auto; grid-template-areas: "meta arrow" "name arrow" "desc arrow"; row-gap: 8px; } .insight-meta { grid-area: meta; } .insight-name { grid-area: name; } .insight-desc { grid-area: desc; } .insight-arrow { grid-area: arrow; } .who-for { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 880px) { .nav-links { display: none; } .nav-burger { display: flex; } .sound-chip { display: none; } .services-grid { grid-template-columns: 1fr; } /* no horizontal pin on mobile — the track stacks vertically */ .services-track { flex-direction: column; width: auto; } .services-track .service-card { width: 100%; } .services-progress { display: none; } .hero-meta { grid-template-columns: 1fr; gap: 18px; text-align: left; } .hero-meta-right { text-align: left; } .hero-meta-cue { display: none; } .faq-line { flex-direction: column; gap: 6px; } .faq-q { white-space: normal; } .faq-a { text-align: left; } } @media (max-width: 560px) { .nav-cta { display: none; } .footer-inner { grid-template-columns: 1fr; } }