/* ─────────────────────────────────────────
SELF-HOSTED FONTS (latin + latin-ext)
Replaces the remote Google Fonts . Files live in
/fonts/woff2/. unicode-range splits are preserved so the
browser only fetches latin-ext when those glyphs are used.
───────────────────────────────────────── */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-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: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-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: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-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: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-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: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-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: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-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: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-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: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-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;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-800-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: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-display: optional;
src: url('/fonts/woff2/bricolage-grotesque-800-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: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/instrument-serif-400-italic-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: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/instrument-serif-400-italic-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: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/instrument-serif-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: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/instrument-serif-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: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/jetbrains-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: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/jetbrains-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: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: optional;
src: url('/fonts/woff2/jetbrains-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: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: optional;
src: url('/fonts/woff2/jetbrains-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: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: optional;
src: url('/fonts/woff2/jetbrains-mono-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: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: optional;
src: url('/fonts/woff2/jetbrains-mono-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: 'Nunito';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/fonts/woff2/nunito-800-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: 'Nunito';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/fonts/woff2/nunito-800-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: 'Nunito';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/fonts/woff2/nunito-900-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: 'Nunito';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/fonts/woff2/nunito-900-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: 'Outfit';
font-style: normal;
font-weight: 300;
font-display: optional;
src: url('/fonts/woff2/outfit-300-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: 'Outfit';
font-style: normal;
font-weight: 300;
font-display: optional;
src: url('/fonts/woff2/outfit-300-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: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/outfit-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: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/fonts/woff2/outfit-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: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: optional;
src: url('/fonts/woff2/outfit-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: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: optional;
src: url('/fonts/woff2/outfit-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: 'Outfit';
font-style: normal;
font-weight: 600;
font-display: optional;
src: url('/fonts/woff2/outfit-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: 'Outfit';
font-style: normal;
font-weight: 600;
font-display: optional;
src: url('/fonts/woff2/outfit-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;
}
/* ─────────────────────────────────────────
ACCESSIBILITY
Global focus ring, skip link, keyboard support.
───────────────────────────────────────── */
/* Visible focus indicator for keyboard users (mouse clicks
don't trigger :focus-visible, so this stays invisible during
normal pointer use). High-contrast aqua ring + offset. */
:focus-visible {
outline: 3px solid #6eedd1;
outline-offset: 3px;
border-radius: 2px;
}
/* Anchors/buttons/divs acting as buttons get the same treatment. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid #6eedd1;
outline-offset: 3px;
}
/* Skip-to-content link — visually hidden until focused. */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 9999;
background: #04154a;
color: #6eedd1;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
letter-spacing: 0.06em;
padding: 12px 20px;
border: 2px solid #6eedd1;
border-radius: 4px;
text-decoration: none;
transition: top 0.18s ease;
}
.skip-link:focus {
top: 16px;
}
/* Anchors used as nav (no href) should still show a pointer and
behave like controls. */
a[role="button"], a[onclick]:not([href]) { cursor: pointer; }
/* Visually hidden but available to screen readers. */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ─────────────────────────────────────────
TOKENS
───────────────────────────────────────── */
:root {
--navy: #0e2e88;
--navy-deep: #0d2775;
--navy-mid: #0e389e;
--pink: #e891e5;
--pink-dim: rgba(237,153,237,0.18);
--aqua: #6eedd1;
--aqua-dim: rgba(110,237,209,0.12);
--charcoal: #0d0d1e;
--off-white: #f4f4fb;
--white: #ffffff;
--mid-grey: #9898b8;
--light-line: rgba(255,255,255,0.08);
--dark-line: rgba(8,38,117,0.12);
--font-display: 'Bricolage Grotesque', sans-serif;
--font-body: 'Outfit', sans-serif;
--font-mark: 'Nunito', sans-serif;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
font-family: var(--font-body);
background: var(--off-white);
color: var(--charcoal);
/* Horizontal-overflow protection at body level. We use
overflow-x: hidden (not clip) — clip creates a new containing
block on iOS Safari which breaks position:fixed for the nav.
hidden DOES make body a scroll container, but on mobile the
nav is what we care about most, and about-page sticky
descendants are largely desktop-only diagrams. */
overflow-x: hidden;
}
/* Grain — subtle texture overlay. z-index kept LOW (below nav at
z:500) so it doesn't paint over the nav. The previous z:9000
was causing iOS Safari to put the nav into a compositing path
that broke fixed-position repaints during scroll. */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
}
/* ─────────────────────────────────────────
NAV
───────────────────────────────────────── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
padding: 0 3rem;
height: 58px;
display: flex;
align-items: center;
justify-content: flex-start;
transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
border-bottom: 1px solid transparent;
}
nav.scrolled {
background: #04154a;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom-color: rgba(255,255,255,0.06);
box-shadow: 0 4px 40px rgba(0,0,0,0.25);
}
nav.light-bg {
background: #f4f4fb;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom-color: var(--dark-line);
}
nav.light-bg .wordmark { color: var(--navy); }
nav.light-bg .nav-link { color: var(--navy); opacity: 0.7; }
nav.light-bg .nav-link:hover { opacity: 1; }
nav.light-bg .nav-cta { border-color: var(--navy); color: var(--navy); }
nav.light-bg .nav-cta:hover { background: var(--navy); color: white; }
.wordmark {
font-family: var(--font-mark);
font-weight: 900;
font-size: 2.05rem;
color: var(--white);
text-decoration: none;
letter-spacing: -0.005em;
cursor: pointer;
transition: color 0.3s;
}
.wordmark span {
color: var(--pink);
}
.nav-links {
display: flex;
align-items: center;
gap: 2.5rem;
list-style: none;
margin-left: auto;
margin-right: 2rem;
}
.nav-link {
font-family: var(--font-body);
font-size: 0.91rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
text-decoration: none;
cursor: pointer;
transition: color 0.2s, opacity 0.2s;
white-space: nowrap;
}
.nav-link:hover { color: white; opacity: 1; }
.nav-link.active { color: var(--pink); opacity: 1; }
nav.light-bg .nav-link.active { color: var(--navy); }
.nav-cta {
font-family: var(--font-body);
font-size: 0.91rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--white);
border: 1.5px solid rgba(255,255,255,0.4);
padding: 0.5rem 1.4rem;
border-radius: 2rem;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
background: transparent;
white-space: nowrap;
flex-shrink: 0;
}
.nav-cta:hover {
background: var(--pink);
border-color: var(--pink);
color: var(--navy-deep);
}
@media (max-width: 900px) {
nav { padding: 0 1.5rem; }
.nav-links { gap: 1.2rem; }
.nav-link { font-size: 0.8rem; }
.nav-cta { display: none; }
}
/* ─────────────────────────────────────────
PAGE SYSTEM
───────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }
/* ─────────────────────────────────────────
ANIMATIONS
───────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes nodeFloat {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(-8px); opacity: 1; }
}
@keyframes linePulse {
0%, 100% { opacity: 0.15; }
50% { opacity: 0.5; }
}
@keyframes gridLine {
0% { transform: scaleX(0); opacity: 0; }
100% { transform: scaleX(1); opacity: 1; }
}
@keyframes countUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
/* ─────────────────────────────────────────
SHARED LAYOUT
───────────────────────────────────────── */
.inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 3rem;
}
.section-label {
font-family: var(--font-body);
font-size: 0.65rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--aqua);
display: block;
margin-bottom: 1.5rem;
font-weight: 500;
}
.section-label.dark { color: var(--navy); opacity: 0.5; }
/* ─────────────────────────────────────────
══ HOME PAGE ══
───────────────────────────────────────── */
/* HERO */
.hero {
min-height: 100vh;
min-height: 100dvh;
background: var(--navy-deep);
position: relative;
display: flex;
align-items: center;
overflow: hidden;
padding: 7rem 3rem 5rem;
}
.hero::before {
content: '';
position: absolute;
top: -10%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 60%;
background: radial-gradient(ellipse at center top, rgba(255,255,255,0.045) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
right: 5%;
width: 40%;
height: 50%;
background: radial-gradient(ellipse at bottom right, rgba(110,237,209,0.08) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Ambient glow */
.hero::after {
content: '';
position: absolute;
bottom: -10%;
right: -5%;
width: 50%;
height: 60%;
background: radial-gradient(ellipse,
rgba(110,237,209,0.10) 0%,
transparent 60%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1240px;
width: 100%;
}
.hero-left {
max-width: 560px;
position: relative;
z-index: 2;
}
.hero-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--aqua);
margin-bottom: 2rem;
font-weight: 500;
opacity: 0;
animation: fadeUp 0.8s 0.1s ease forwards;
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4.2vw, 4.6rem);
font-weight: 800;
line-height: 1.04;
color: var(--white);
letter-spacing: -0.008em;
margin-bottom: 2rem;
opacity: 0;
animation: fadeUp 0.8s 0.3s ease forwards;
}
.hero h1 em {
font-style: normal;
color: var(--pink);
}
.hero-lead {
font-size: clamp(0.95rem, 1.2vw, 1.06rem);
font-weight: 300;
line-height: 1.85;
color: rgba(255,255,255,0.75);
max-width: 48ch;
margin-bottom: 2.5rem;
opacity: 0;
animation: fadeUp 0.8s 0.5s ease forwards;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 0.8s 0.7s ease forwards;
}
.btn-primary {
display: inline-block;
background: var(--pink);
color: var(--navy-deep);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.85rem 2rem;
border-radius: 2rem;
text-decoration: none;
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.btn-primary:hover {
background: var(--white);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(237,153,237,0.28);
}
.btn-ghost {
display: inline-block;
background: transparent;
color: rgba(255,255,255,0.75);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.02em;
padding: 0.85rem 2rem;
border-radius: 2rem;
text-decoration: none;
cursor: pointer;
border: 1.5px solid rgba(255,255,255,0.22);
transition: all 0.2s ease;
}
.btn-ghost:hover {
border-color: rgba(255,255,255,0.6);
color: var(--white);
}
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem;
margin-top: 3.5rem;
padding-top: 2.5rem;
border-top: 1px solid var(--light-line);
display: flex;
gap: 3rem;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 0.8s 0.9s ease forwards;
}
.stat-item { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-n {
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 800;
color: var(--pink);
letter-spacing: -0.01em;
line-height: 1;
}
.stat-l {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
font-weight: 500;
}
/* HERO NETWORK CANVAS — full-height right panel */
.hero-visual {
position: absolute;
right: -8%;
top: -10%;
width: 65%;
height: 100vh;
height: 100dvh;
opacity: 0;
animation: fadeIn 1.6s 0.4s ease forwards;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 5%, black 100%);
-webkit-mask-composite: destination-in;
mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 5%, black 100%);
mask-composite: intersect;
pointer-events: none;
z-index: 1;
}
#hero-network-canvas {
width: 100%;
height: 100%;
display: block;
}
/* Responsive hero */
@media (max-width: 900px) {
.hero-visual { width: 100%; opacity: 0.35; }
.hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
}
@media (max-width: 600px) {
.hero { padding: 6rem 1.5rem 3rem; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; gap: 2rem; }
.hero-visual { display: none; }
}
/* SCROLL INDICATOR */
.scroll-hint {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0;
animation: fadeIn 1s 1.4s ease forwards;
z-index: 2;
cursor: pointer;
}
.scroll-hint span {
font-size: 0.6rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
animation: nodeFloat 2s ease-in-out infinite;
}
/* ── PROBLEM SECTION ── */
.problem {
background: var(--off-white);
padding: 7rem 3rem;
}
.problem-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7rem;
align-items: start;
}
.problem-left h2 {
font-family: var(--font-display);
font-size: clamp(1.9rem, 2.8vw, 3rem);
font-weight: 800;
line-height: 1.1;
color: var(--navy-deep);
letter-spacing: -0.008em;
margin-bottom: 1.5rem;
}
.problem-left p {
font-size: 0.95rem;
line-height: 1.9;
color: #555577;
margin-bottom: 1.2rem;
}
.problem-left .closing-line {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--navy);
margin-top: 2rem;
letter-spacing: -0.01em;
}
.problem-statements {
display: flex;
flex-direction: column;
gap: 0;
}
.prob-statement {
padding: 2rem 0;
border-top: 1px solid var(--dark-line);
display: grid;
grid-template-columns: 3rem 1fr;
gap: 1.5rem;
align-items: start;
}
.prob-statement:last-child { border-bottom: 1px solid var(--dark-line); }
.prob-num {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 800;
color: var(--pink);
line-height: 1;
letter-spacing: -0.01em;
}
.prob-body {
font-size: 0.95rem;
line-height: 1.85;
color: #444466;
}
.prob-body strong {
color: var(--navy-deep);
font-weight: 600;
}
@media (max-width: 860px) {
.problem-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 600px) {
.problem { padding: 5rem 1.5rem; }
}
/* ── WHAT WE BUILD ── */
.build {
background: var(--navy-deep);
padding: 7rem 3rem;
position: relative;
overflow: hidden;
}
.build::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 40%;
height: 100%;
background: radial-gradient(ellipse at right,
rgba(110,237,209,0.10) 0%, transparent 60%);
pointer-events: none;
}
.build-header {
margin-bottom: 4rem;
max-width: 680px;
}
.build-header h2 {
font-family: var(--font-display);
font-size: clamp(1.9rem, 2.8vw, 3.2rem);
font-weight: 800;
line-height: 1.1;
color: var(--white);
letter-spacing: -0.008em;
margin-bottom: 1rem;
}
.build-header p {
font-size: 0.97rem;
line-height: 1.85;
color: rgba(255,255,255,0.75);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto auto;
gap: 1.25rem;
}
.bento-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
padding: 2.25rem;
position: relative;
overflow: hidden;
transition: background 0.3s, border-color 0.3s;
}
.bento-card:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(237,153,237,0.2);
}
.bento-card:hover .bento-icon { color: var(--pink); }
.bento-card.large { grid-column: span 5; }
.bento-card.medium { grid-column: span 4; }
.bento-card.small { grid-column: span 3; }
.bento-card.wide { grid-column: span 7; }
.bento-card.full-row { grid-column: span 12; }
.bento-icon {
font-size: 1.5rem;
color: var(--aqua);
margin-bottom: 1.25rem;
transition: color 0.3s;
line-height: 1;
}
.bento-icon svg {
width: 28px;
height: 28px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.bento-tag {
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--aqua);
font-weight: 500;
margin-bottom: 0.75rem;
display: block;
}
.bento-card h3 {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
font-weight: 700;
color: var(--white);
line-height: 1.2;
margin-bottom: 0.85rem;
letter-spacing: -0.003em;
}
.bento-card p {
font-size: 0.87rem;
line-height: 1.8;
color: rgba(255,255,255,0.62);
}
/* Accent card */
.bento-card.accent {
background: linear-gradient(135deg, rgba(237,153,237,0.12) 0%, rgba(110,237,209,0.06) 100%);
border-color: rgba(237,153,237,0.2);
}
.bento-card.accent h3 { color: var(--pink); }
.bento-card.accent p { color: rgba(255,255,255,0.75); }
@media (max-width: 960px) {
.bento-card.large, .bento-card.medium,
.bento-card.small, .bento-card.wide { grid-column: span 12; }
}
@media (max-width: 600px) {
.build { padding: 5rem 1.5rem; }
}
/* ── HAPPI LINK SECTION ── */
.happi-section {
background: var(--off-white);
padding: 7rem 3rem;
}
.happi-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.happi-left h2 {
font-family: var(--font-display);
font-size: clamp(1.9rem, 2.8vw, 3rem);
font-weight: 800;
line-height: 1.08;
color: var(--navy-deep);
letter-spacing: -0.008em;
margin-bottom: 1.5rem;
}
.happi-left h2 em {
font-style: normal;
color: var(--navy);
}
.happi-left p {
font-size: 0.97rem;
line-height: 1.9;
color: #555577;
margin-bottom: 1.25rem;
}
.happi-left .happi-cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.5rem;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
color: var(--navy);
text-decoration: none;
letter-spacing: 0.02em;
border-bottom: 2px solid var(--navy);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.happi-left .happi-cta:hover {
color: var(--pink);
border-color: var(--pink);
}
.happi-left .happi-cta:hover .arrow { transform: translateX(4px); }
.arrow { transition: transform 0.2s; }
.happi-right {
background: var(--navy-deep);
border-radius: 20px;
padding: 3rem;
position: relative;
overflow: hidden;
}
.happi-right::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 70%;
height: 100%;
background: radial-gradient(ellipse at top right,
rgba(110,237,209,0.16) 0%, transparent 60%);
pointer-events: none;
}
.happi-card-label {
font-size: 0.6rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--aqua);
font-weight: 500;
margin-bottom: 1.5rem;
display: block;
}
.happi-card-name {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 800;
color: var(--white);
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
.happi-card-full {
font-size: 0.8rem;
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
margin-bottom: 2.5rem;
}
.happi-card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.happi-stat .n {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--pink);
line-height: 1;
letter-spacing: -0.01em;
}
.happi-stat .l {
font-size: 0.72rem;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 0.3rem;
}
.happi-divider {
height: 1px;
background: var(--light-line);
margin-bottom: 2rem;
}
.happi-card-desc {
font-size: 0.87rem;
line-height: 1.8;
color: rgba(255,255,255,0.68);
}
.happi-card-desc strong {
color: rgba(255,255,255,0.85);
font-weight: 500;
}
@media (max-width: 860px) {
.happi-inner { grid-template-columns: 1fr; gap: 3rem; }
.happi-right { padding: 2rem 1.5rem; border-radius: 14px; overflow: hidden; }
.happi-card-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
.happi-stat .n { font-size: 1.5rem; }
.happi-stat .l { font-size: 0.65rem; }
}
@media (max-width: 600px) {
.happi-section { padding: 5rem 1.5rem; }
}
/* ── DUAL ENTITY / DIFFERENCE ── */
.difference {
background: var(--navy);
padding: 7rem 3rem;
position: relative;
overflow: hidden;
}
.difference::before {
content: '';
position: absolute;
right: -2%;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-size: clamp(8rem, 15vw, 18rem);
font-weight: 800;
color: rgba(255,255,255,0.025);
letter-spacing: -0.06em;
pointer-events: none;
line-height: 1;
}
.diff-header {
max-width: 680px;
margin-bottom: 4.5rem;
}
.diff-header h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3.2vw, 3.8rem);
font-weight: 800;
line-height: 1.06;
color: var(--white);
letter-spacing: -0.01em;
margin-bottom: 1.25rem;
}
.diff-header p {
font-size: 0.97rem;
line-height: 1.9;
color: rgba(255,255,255,0.68);
max-width: 56ch;
}
.diff-entities {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
max-width: 960px;
}
.entity-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 2.5rem;
}
.entity-tag {
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--pink);
font-weight: 500;
margin-bottom: 1rem;
display: block;
}
.entity-card h3 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
color: var(--white);
letter-spacing: -0.003em;
margin-bottom: 1rem;
}
.entity-card p {
font-size: 0.88rem;
line-height: 1.85;
color: rgba(255,255,255,0.68);
}
.entity-card ul {
margin-top: 1.25rem;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.entity-card ul li {
font-size: 0.85rem;
color: rgba(255,255,255,0.62);
padding-left: 1.2rem;
position: relative;
line-height: 1.6;
}
.entity-card ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--pink);
font-size: 0.75rem;
}
.diff-close {
margin-top: 3rem;
max-width: 680px;
}
.diff-close p {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
font-weight: 600;
color: rgba(255,255,255,0.75);
line-height: 1.55;
letter-spacing: -0.01em;
}
.diff-close p em {
font-style: normal;
color: var(--pink);
}
@media (max-width: 720px) {
.diff-entities { grid-template-columns: 1fr; }
.difference { padding: 5rem 1.5rem; }
}
/* ── CREDIBILITY ── */
.credibility {
background: var(--off-white);
padding: 7rem 3rem;
}
.cred-header {
max-width: 680px;
margin-bottom: 4rem;
}
.cred-header h2 {
font-family: var(--font-display);
font-size: clamp(1.9rem, 2.8vw, 3rem);
font-weight: 800;
line-height: 1.1;
color: var(--navy-deep);
letter-spacing: -0.008em;
margin-bottom: 1rem;
}
.cred-header p {
font-size: 0.97rem;
line-height: 1.85;
color: #555577;
}
.cred-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.cred-item {
border-top: 2px solid var(--dark-line);
padding-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cred-item.featured { border-top-color: var(--navy); }
.cred-item .c-year {
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--navy);
opacity: 0.45;
font-weight: 500;
}
.cred-item .c-num {
font-family: var(--font-display);
font-size: 2.2rem;
font-weight: 800;
color: var(--navy);
letter-spacing: -0.01em;
line-height: 1;
}
.cred-item .c-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--navy-deep);
line-height: 1.3;
letter-spacing: -0.01em;
}
.cred-item .c-desc {
font-size: 0.84rem;
line-height: 1.75;
color: #666688;
}
@media (max-width: 900px) { .cred-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
.cred-grid { grid-template-columns: 1fr; }
.credibility { padding: 5rem 1.5rem; }
}
/* ── AUDIENCE CTA ── */
.audience {
background: var(--navy-deep);
padding: 7rem 3rem;
position: relative;
overflow: hidden;
}
.audience::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 50% 50%,
rgba(8,38,117,0.5) 0%, transparent 70%);
pointer-events: none;
}
.aud-header {
text-align: center;
max-width: 560px;
margin: 0 auto 4.5rem;
}
.aud-header h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 2.8vw, 3rem);
font-weight: 800;
color: var(--white);
letter-spacing: -0.008em;
line-height: 1.1;
margin-bottom: 1rem;
}
.aud-header p {
font-size: 0.95rem;
line-height: 1.85;
color: rgba(255,255,255,0.62);
}
.audience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
position: relative;
z-index: 1;
}
.aud-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 2.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: background 0.3s, border-color 0.3s;
}
.aud-card:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(237,153,237,0.25);
}
.aud-for {
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--aqua);
font-weight: 500;
}
.aud-card h3 {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--white);
letter-spacing: -0.003em;
line-height: 1.2;
}
.aud-card p {
font-size: 0.88rem;
line-height: 1.8;
color: rgba(255,255,255,0.62);
flex: 1;
}
.aud-btn {
display: inline-block;
margin-top: 0.5rem;
font-family: var(--font-body);
font-size: 0.83rem;
font-weight: 600;
color: var(--pink);
text-decoration: none;
cursor: pointer;
border: 1px solid rgba(237,153,237,0.3);
border-radius: 2rem;
padding: 0.6rem 1.4rem;
transition: all 0.2s;
text-align: center;
}
.aud-btn:hover {
background: var(--pink);
color: var(--navy-deep);
border-color: var(--pink);
}
@media (max-width: 860px) {
.audience-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.audience { padding: 5rem 1.5rem; }
}
/* ─────────────────────────────────────────
══ ABOUT PAGE ══
Integrated from About.html upload (May 2026).
All selectors scoped under #page-about so the
distinctive editorial styles (.hero-stack, .tabbar,
.folio, .nb-entry, .cap-feature, .ramp-card, etc.)
don't leak to other SPA pages.
───────────────────────────────────────── */
/* HERO — Federated Stack */
#page-about .hero-stack {
/* Matches the acknowledgement hero's blueprint navy with
centre 'drafting light' — visual family with the other
dark-bg hero on the site. */
background:
radial-gradient(ellipse 70% 60% at center, rgba(40,80,180,0.22) 0%, transparent 70%),
linear-gradient(180deg, #0a1d4f 0%, #051236 100%);
color: var(--off-white);
padding: 8rem 3rem 4rem;
position: relative;
overflow: hidden;
}
#page-about .hero-stack::before {
content: '';
position: absolute; inset: 0;
/* Faint ambient aqua wash (top-left); corner pop removed. */
background:
radial-gradient(50% 70% at 25% 25%, rgba(110,237,209,0.06), transparent 65%);
}
#page-about .hero-stack::after {
/* Three-tier dot grid — same register as acknowledgement hero
and About body. Sits above the aqua wash, below the content. */
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(180,210,225,0.30) 1.4px, transparent 1.6px),
radial-gradient(circle at 1px 1px, rgba(180,210,225,0.18) 1.1px, transparent 1.3px),
radial-gradient(circle at 1px 1px, rgba(180,210,225,0.10) 0.8px, transparent 1px);
background-size:
256px 256px,
64px 64px,
16px 16px;
mask-image: radial-gradient(ellipse at center, #000 50%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 95%);
pointer-events: none;
z-index: 1;
}
#page-about .hero-stack .inner {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
align-items: center;
}
#page-about .hero-stack .eyebrow {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--aqua);
margin-bottom: 1rem;
}
#page-about .hero-stack h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 4.4vw, 4rem);
line-height: 1.02;
letter-spacing: -0.022em;
color: #fff;
}
#page-about .hero-stack h1 em {
font-family: var(--font-serif);
font-style: italic; font-weight: 400;
color: var(--aqua);
}
#page-about .hero-stack .sub {
margin-top: 1.2rem;
font-family: var(--font-body);
font-weight: 400;
font-size: 1.2rem; line-height: 1.55;
color: var(--pink);
}
#page-about .hero-stack .lead {
margin-top: 1.4rem;
font-size: 1.02rem; line-height: 1.7;
color: rgba(255,255,255,0.82);
}
#page-about .sysmap {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 18px;
padding: 1.6rem;
display: grid; gap: 0.5rem;
}
#page-about .sysmap .row-lbl {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.68);
margin-bottom: 0.4rem;
}
#page-about .sysmap .stack { display: grid; gap: 0.4rem; }
#page-about .sysmap .layer {
display: grid;
grid-template-columns: 36px 1fr 14px;
align-items: center;
gap: 12px;
padding: 0.85rem 1rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
text-decoration: none; color: inherit;
}
#page-about .sysmap .layer:hover {
background: rgba(255,255,255,0.10);
border-color: var(--aqua);
transform: translateX(2px);
}
#page-about .sysmap .layer .n {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--aqua);
font-weight: 600;
}
#page-about .sysmap .layer .nm {
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
color: #fff;
letter-spacing: -0.005em;
}
#page-about .sysmap .layer .nm em {
font-family: var(--font-serif);
font-style: italic; font-weight: 400;
color: var(--pink);
}
#page-about .sysmap .layer .arrow { color: var(--aqua); opacity: 0.65; }
#page-about .sysmap .ents {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0.5rem; margin-top: 0.8rem;
}
#page-about .sysmap .ent {
padding: 0.85rem 0.95rem;
border-radius: 10px;
cursor: pointer;
text-decoration: none; color: inherit;
transition: background 0.2s, transform 0.2s;
}
#page-about .sysmap .ent:hover { transform: translateY(-2px); }
#page-about .sysmap .ent.m { background: var(--pink); color: var(--navy-deep); }
#page-about .sysmap .ent.h { background: rgba(110,237,209,0.18); border: 1px solid var(--aqua); color: #fff; }
#page-about .sysmap .ent .tag {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.20em;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 0.3rem;
}
#page-about .sysmap .ent .nm {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.96rem;
}
#page-about .sysmap .ent .nm em {
font-family: var(--font-serif);
font-style: italic; font-weight: 400;
}
/* STICKY TAB BAR — sits under the nav at 58px */
#page-about .tabbar {
position: sticky;
top: 58px;
z-index: 30;
background: rgba(244,244,251,0.94);
border-bottom: 1px solid rgba(13,39,117,0.14);
backdrop-filter: blur(12px);
padding: 0.6rem 3rem;
}
#page-about .tabbar .inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
gap: 1.8rem;
overflow-x: auto;
}
#page-about .tabbar a {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(13,39,117,0.62);
text-decoration: none;
padding: 0.4rem 0;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color 0.2s, border-color 0.2s;
}
#page-about .tabbar a:hover,
#page-about .tabbar a.active {
color: var(--navy-deep);
border-bottom-color: var(--pink);
}
/* MAIN — three-tier dot grid background (matches the acknowledgement
hero's dot register, adapted for light bg). Three radial-gradients
stacked at 256/64/16 spacings give a layered survey-paper feel
without reading as drafting grid lines. Navy dots, calibrated
opacities for legibility on off-white. background-position offsets
the first row down so the tile doesn't clip awkwardly against
the tabbar above. */
#page-about .about-main {
background:
radial-gradient(circle at 1px 1px, rgba(13,39,117,0.22) 1.4px, transparent 1.6px),
radial-gradient(circle at 1px 1px, rgba(13,39,117,0.13) 1.1px, transparent 1.3px),
radial-gradient(circle at 1px 1px, rgba(13,39,117,0.07) 0.8px, transparent 1px),
var(--off-white);
background-size:
256px 256px,
64px 64px,
16px 16px;
background-position: 0 8px, 0 8px, 0 8px, 0 0;
}
#page-about section.s {
max-width: 1280px; margin: 0 auto;
padding: 5rem 3rem 3rem;
}
/* FOLIO HEAD */
#page-about .folio {
display: grid;
grid-template-columns: 80px 1fr;
gap: 1.4rem;
align-items: end;
padding-bottom: 1rem;
border-bottom: 2px solid var(--navy-deep);
margin-bottom: 2rem;
}
#page-about .folio .index {
font-family: var(--font-display);
font-weight: 700;
font-size: 3.6rem;
line-height: 0.9;
color: var(--pink);
letter-spacing: -0.03em;
}
#page-about .folio .eyebrow {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.4rem;
}
#page-about .folio h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
line-height: 1.06;
letter-spacing: -0.018em;
color: var(--navy-deep);
}
#page-about .folio h2 em {
font-family: var(--font-serif);
font-style: italic; font-weight: 400;
color: var(--pink);
}
#page-about .folio .stamp {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--navy);
padding: 4px 10px;
border: 1px solid rgba(13,39,117,0.32);
border-radius: 4px;
background: var(--white);
align-self: end;
}
/* INTRO / BODY PROSE */
#page-about .intro {
font-size: 1.04rem;
line-height: 1.72;
color: rgba(13,13,30,0.85);
margin-bottom: 1.4rem;
max-width: 64ch;
}
#page-about p.body-p {
font-size: 0.98rem;
line-height: 1.72;
color: rgba(13,13,30,0.82);
margin-bottom: 1rem;
max-width: 64ch;
}
#page-about p.body-p em {
font-family: var(--font-serif);
font-style: italic;
color: var(--navy-deep);
font-weight: 400;
}
#page-about p.body-p strong {
color: var(--navy-deep);
font-weight: 600;
}
#page-about h3.sub {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.2rem;
color: var(--navy-deep);
letter-spacing: -0.010em;
margin: 1.8rem 0 0.8rem;
}
#page-about h3.sub em {
font-family: var(--font-serif);
font-style: italic; font-weight: 400;
color: var(--pink);
}
#page-about .pull {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.3rem;
line-height: 1.4;
color: var(--navy-deep);
padding: 0.5rem 0 0.5rem 1.4rem;
border-left: 3px solid var(--pink);
margin: 1.4rem 0;
max-width: 60ch;
}
/* DIAGRAM + CONTENT SPLIT */
#page-about .split {
display: grid;
grid-template-columns: 460px 1fr;
gap: 3rem;
align-items: start;
}
#page-about .diagram {
background: var(--white);
border: 1px solid rgba(13,39,117,0.18);
border-radius: 14px;
padding: 1.5rem;
position: sticky; top: 130px;
box-shadow: 4px 4px 0 var(--navy-deep);
}
/* Section 04 economics — single column running the full page width.
The gauge floats top-left and the prose wraps around it then runs
full-width beneath. The cap cards lay out in a responsive grid that
fills the row rather than clustering on one side. */
/* Section 03 participation — two columns: the three cohort cards stack
vertically down the LEFT; all section text sits to the RIGHT. No
diagram. */
#page-about .part-split {
display: grid;
grid-template-columns: 560px 1fr;
gap: 3rem;
align-items: start;
}
#page-about .part-cards {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
#page-about .part-text .intro { max-width: none; margin-top: 0; }
#page-about .part-text .sub { margin-top: 1.8rem; }
#page-about .part-text .refuse-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
margin: 1rem 0 1.6rem;
max-width: none;
align-items: start;
}
#page-about .part-text .pull { max-width: none; }
@media (max-width: 1000px) {
#page-about .part-split { grid-template-columns: 1fr; gap: 2rem; }
#page-about .part-text .refuse-grid { grid-template-columns: 1fr; }
}
#page-about .econ-figure {
float: left;
width: 300px;
margin: 0.2rem 2rem 1.2rem 0;
background: var(--white);
border: 1px solid rgba(13,39,117,0.18);
border-radius: 14px;
padding: 1.4rem;
box-shadow: 4px 4px 0 var(--navy-deep);
}
#page-about .econ-figure .label {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem;
display: flex; justify-content: space-between;
}
#page-about .econ-figure .label .fig { color: var(--navy); }
#page-about .econ-figure svg { width: 100%; height: auto; display: block; }
/* Full-width prose — no per-paragraph width cap inside this section. */
#page-about .econ-body .intro,
#page-about .econ-body p.body-p,
#page-about .econ-body .pull { max-width: none; }
/* Run-in lead-ins inside body paragraphs (e.g. "Why per-member…:") —
lift them out of the prose so they read as sub-points, not flow text. */
#page-about .econ-body .runin,
#page-about .body-p .runin {
font-style: normal;
font-weight: 600;
color: var(--navy-deep);
font-family: var(--font-display);
letter-spacing: -0.005em;
}
/* Cap cards: responsive grid that fills the full width, clearing the float. */
#page-about .econ-body .cap-rows {
clear: both;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
margin-top: 1.6rem;
max-width: none;
}
@media (max-width: 1100px) {
#page-about .econ-figure {
float: none; width: 100%; max-width: 360px; margin: 0 0 1.6rem 0;
}
}
#page-about .diagram .label {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.7rem;
display: flex;
justify-content: space-between;
}
#page-about .diagram .label .fig { color: var(--navy); }
#page-about .diagram svg { width: 100%; height: auto; display: block; }
/* NOTEBOOK SPEC CARDS */
#page-about .nb-entry {
background: var(--white);
border: 1px solid var(--navy-deep);
border-radius: 4px;
padding: 1.2rem 1.3rem;
position: relative;
box-shadow: 4px 4px 0 var(--navy-deep);
}
#page-about .nb-entry.pink-shadow { box-shadow: 4px 4px 0 var(--pink); }
#page-about .nb-entry.dark { background: var(--navy-deep); color: var(--off-white); }
#page-about .nb-entry.dark .tab { background: var(--off-white); color: var(--navy-deep); box-shadow: 0 0 0 1px var(--navy-deep); }
#page-about .nb-entry .tab {
position: absolute;
top: -1px; left: -1px;
background: var(--navy-deep);
color: var(--off-white);
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 0 0 6px 0;
}
#page-about .nb-entry .tab em {
font-family: var(--font-serif);
font-style: italic; font-weight: 400;
color: var(--pink);
}
#page-about .nb-entry h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.18rem;
color: var(--navy-deep);
margin: 1.4rem 0 0.5rem;
letter-spacing: -0.010em;
line-height: 1.15;
}
#page-about .nb-entry.dark h4 { color: #fff; }
#page-about .nb-entry h4 em,
#page-about .nb-entry.dark h4 em {
font-family: var(--font-serif);
font-style: italic; font-weight: 400;
color: var(--pink);
}
#page-about .nb-entry p {
font-size: 0.92rem;
line-height: 1.6;
margin-bottom: 0.5rem;
color: rgba(13,13,30,0.82);
}
#page-about .nb-entry.dark p { color: rgba(255,255,255,0.82); }
#page-about .nb-entry .annot {
margin: 0.5rem 0;
padding: 0.5rem 0;
border-top: 1px dashed rgba(13,39,117,0.30);
border-bottom: 1px dashed rgba(13,39,117,0.30);
display: grid; gap: 0.4rem;
}
#page-about .nb-entry.dark .annot { border-color: rgba(255,255,255,0.20); }
#page-about .nb-entry .annot .row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 12px;
font-size: 0.84rem;
line-height: 1.55;
}
#page-about .nb-entry .annot .k {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--navy);
}
#page-about .nb-entry.dark .annot .k { color: var(--aqua); }
#page-about .nb-entry .drumbeat {
margin-top: 0.6rem;
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
color: var(--navy-deep);
padding-left: 0.9rem;
border-left: 2px solid var(--aqua);
}
#page-about .nb-entry.dark .drumbeat { color: #fff; }
#page-about .nb-entry .role {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(13,13,30,0.62);
padding-top: 0.5rem;
border-top: 1px dashed rgba(13,39,117,0.30);
}
#page-about .nb-entry.dark .role {
color: rgba(255,255,255,0.68);
border-color: rgba(255,255,255,0.18);
}
/* GRID VARIANTS */
#page-about .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
#page-about .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* COVENANT GRID */
#page-about .cov-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
margin: 1rem 0;
}
#page-about .cov-grid .cov {
background: rgba(201,146,46,0.07);
border-left: 2px solid var(--gold);
border-radius: 0 10px 10px 0;
padding: 1rem 1.2rem;
}
#page-about .cov-grid .cov b {
display: block;
font-family: var(--font-display);
font-weight: 600;
color: var(--navy-deep);
margin-bottom: 0.3rem;
}
#page-about .cov-grid .cov p {
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
color: rgba(13,13,30,0.82);
}
/* EXIT GRID */
#page-about .exit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.8rem;
margin: 1rem 0;
}
#page-about .exit-grid .e {
background: var(--white);
border: 1px solid var(--navy-deep);
border-radius: 4px;
padding: 0.9rem 1rem;
box-shadow: 3px 3px 0 var(--navy-deep);
}
#page-about .exit-grid .e .k {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.4rem;
}
#page-about .exit-grid .e p {
font-size: 0.88rem;
line-height: 1.55;
color: rgba(13,13,30,0.82);
margin: 0;
}
/* REFUSE 2x2 */
#page-about .refuse-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
margin: 0.8rem 0;
max-width: 78ch;
}
#page-about .refuse-grid .r {
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px;
padding: 0.5rem 0.6rem 0.5rem 0;
}
#page-about .refuse-grid .r::before {
content: '×';
font-family: var(--font-display);
font-weight: 700;
color: var(--pink);
font-size: 1.2rem;
line-height: 1.1;
}
#page-about .refuse-grid .r b {
display: block;
font-family: var(--font-display);
font-weight: 600;
color: var(--navy-deep);
margin-bottom: 2px;
font-size: 0.94rem;
}
#page-about .refuse-grid .r span {
font-size: 0.86rem;
line-height: 1.5;
color: rgba(13,13,30,0.78);
}
/* CAP METER FEATURE */
#page-about .cap-feature {
display: grid;
grid-template-columns: 140px 1fr;
gap: 1.6rem;
align-items: center;
margin: 1.4rem 0;
padding: 1.6rem 1.8rem;
background: var(--white);
border: 1px solid var(--navy-deep);
border-radius: 8px;
box-shadow: 4px 4px 0 var(--pink);
max-width: 78ch;
}
#page-about .cap-feature .meter { display: grid; place-items: center; }
#page-about .cap-feature .meter svg { width: 100%; max-width: 130px; }
#page-about .cap-feature .meta strong {
display: block;
font-family: var(--font-display);
font-weight: 600;
color: var(--navy-deep);
font-size: 1.1rem;
margin-bottom: 0.4rem;
}
#page-about .cap-feature .meta p {
font-size: 0.94rem;
line-height: 1.6;
color: rgba(13,13,30,0.82);
margin-bottom: 0.4rem;
}
/* CAP ROWS */
#page-about .cap-rows {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
margin: 0.8rem 0;
max-width: 78ch;
}
#page-about .cap-rows .r {
background: var(--white);
border-left: 2px solid var(--gold);
padding: 0.8rem 1rem;
font-size: 0.88rem;
line-height: 1.55;
color: rgba(13,13,30,0.82);
border-radius: 0 8px 8px 0;
}
#page-about .cap-rows .r .k {
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--navy-deep);
margin-bottom: 7px;
}
/* ON-RAMP CARDS */
#page-about .ramp-card {
background: var(--navy-deep);
color: var(--off-white);
border-radius: 4px;
padding: 1.3rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
text-decoration: none;
box-shadow: 4px 4px 0 var(--pink);
cursor: pointer;
}
#page-about .ramp-card .tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--aqua);
}
#page-about .ramp-card h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
color: #fff;
}
#page-about .ramp-card p {
font-size: 0.86rem;
line-height: 1.55;
color: rgba(255,255,255,0.78);
max-width: none;
}
#page-about .ramp-card .cta {
margin-top: auto;
align-self: flex-start;
padding: 7px 13px;
border-radius: 999px;
background: var(--pink);
color: var(--navy-deep);
font-size: 12px;
font-weight: 500;
}
#page-about .quiet {
margin-top: 1.4rem;
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
color: var(--navy-deep);
}
/* MOBILE */
@media (max-width: 1100px) {
#page-about .split { grid-template-columns: 1fr; gap: 2rem; }
#page-about .diagram { position: relative; top: 0; }
}
@media (max-width: 900px) {
#page-about .hero-stack { padding: 6rem 1.25rem 3rem; }
#page-about .hero-stack .inner { grid-template-columns: 1fr; gap: 2rem; }
#page-about .tabbar { padding: 0.5rem 1.25rem; }
#page-about section.s { padding: 3.5rem 1.25rem 2rem; }
/* Sysmap card: force border-box so borders don't push boxes out
of their 1fr columns. Center the card explicitly. */
#page-about .sysmap,
#page-about .sysmap .stack,
#page-about .sysmap .layer,
#page-about .sysmap .ents,
#page-about .sysmap .ent {
box-sizing: border-box;
}
#page-about .sysmap { width: 100%; max-width: 100%; margin: 0 auto; }
#page-about .sysmap .ents {
grid-template-columns: 1fr 1fr;
width: 100%;
justify-items: stretch;
}
#page-about .sysmap .ent { width: 100%; min-width: 0; }
}
@media (max-width: 820px) {
#page-about .grid-2,
#page-about .grid-3,
#page-about .exit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
#page-about .cov-grid,
#page-about .refuse-grid,
#page-about .cap-feature,
#page-about .cap-rows { grid-template-columns: 1fr; }
#page-about .cap-feature { padding: 1.2rem 1.2rem; }
#page-about .folio { grid-template-columns: 60px 1fr; }
#page-about .folio .stamp { grid-column: 2; justify-self: start; }
#page-about .folio .index { font-size: 2.4rem; }
}
/* ─────────────────────────────────────────
══ TEAM PAGE ══
───────────────────────────────────────── */
.team-hero {
min-height: 50vh;
background: var(--navy-deep);
display: flex;
align-items: flex-end;
padding: 9rem 3rem 5rem;
}
.team-hero h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 5rem);
font-weight: 800;
color: var(--white);
letter-spacing: -0.01em;
line-height: 1.04;
max-width: 14ch;
margin-bottom: 1.25rem;
}
.team-hero h1 em { font-style: normal; color: var(--pink); }
.team-hero p {
font-size: 1rem;
line-height: 1.8;
color: rgba(255,255,255,0.62);
max-width: 48ch;
}
.team-body {
background: var(--off-white);
padding: 7rem 3rem;
}
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 4rem;
}
.team-card {
background: var(--white);
border: 1px solid var(--dark-line);
border-radius: 20px;
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s;
}
.team-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(8,38,117,0.1);
}
.team-avatar {
height: 220px;
background: var(--navy);
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 1.5rem;
}
.avatar-initials {
font-family: var(--font-display);
font-size: 4.5rem;
font-weight: 800;
color: rgba(255,255,255,0.08);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
letter-spacing: -0.05em;
pointer-events: none;
}
.avatar-badge {
position: relative;
z-index: 1;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pink);
font-weight: 500;
background: rgba(237,153,237,0.15);
border: 1px solid rgba(237,153,237,0.3);
border-radius: 2rem;
padding: 0.3rem 0.8rem;
}
.team-info {
padding: 2rem;
}
.team-name {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--navy-deep);
letter-spacing: -0.003em;
margin-bottom: 0.2rem;
}
.team-role {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--navy);
opacity: 0.5;
font-weight: 500;
margin-bottom: 1.25rem;
}
.team-bio {
font-size: 0.87rem;
line-height: 1.8;
color: #555577;
}
.team-extended {
background: var(--navy-deep);
border-radius: 24px;
padding: 3.5rem;
margin-bottom: 4rem;
}
.team-ext-label {
font-size: 0.6rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--aqua);
font-weight: 500;
margin-bottom: 2rem;
display: block;
}
.team-ext-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.team-ext-item {
border-top: 1px solid rgba(255,255,255,0.07);
padding-top: 1.5rem;
}
.team-ext-item .name {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
color: var(--white);
letter-spacing: -0.01em;
margin-bottom: 0.25rem;
}
.team-ext-item .role {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
font-weight: 500;
margin-bottom: 0.15rem;
}
.team-ext-item .role-location {
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
font-weight: 500;
margin-bottom: 0.95rem;
min-height: 1em;
}
.team-ext-item .desc {
font-size: 0.85rem;
line-height: 1.75;
color: rgba(255,255,255,0.62);
}
.team-linkedin {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.85rem;
color: rgba(110,237,209,0.7);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.team-linkedin:hover { color: rgba(110,237,209,1); }
.team-linkedin svg { width: 13px; height: 13px; flex-shrink: 0; }
.team-info .team-linkedin { margin-top: 1rem; }
/* ─────────────────────────────────────────
══ PODCAST SECTION (Chasing Financial Equality) ══
───────────────────────────────────────── */
.podcast-section {
background: var(--white);
border: 1px solid var(--dark-line);
border-radius: 20px;
padding: 2.75rem;
margin-top: 1rem;
}
.podcast-header {
margin-bottom: 2.25rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--dark-line);
}
.podcast-eyebrow {
display: block;
font-family: var(--font-mark);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--pink);
margin-bottom: 0.85rem;
}
.podcast-header h2 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
color: var(--navy-deep);
margin: 0 0 0.9rem 0;
letter-spacing: -0.01em;
line-height: 1.1;
}
.podcast-rating {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0.85rem;
background: var(--pink-dim);
border-radius: 100px;
}
.podcast-stars {
display: inline-flex;
gap: 0.1rem;
color: var(--pink);
}
.podcast-stars svg { width: 14px; height: 14px; }
.podcast-rating-text {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--navy-deep);
letter-spacing: 0.02em;
}
.podcast-rating-text strong { font-weight: 700; }
.podcast-rating-text .rating-sep { opacity: 0.45; margin: 0 0.35rem; }
.podcast-body-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: stretch;
}
.podcast-embed {
border-radius: 12px;
overflow: hidden;
line-height: 0;
}
.podcast-embed iframe {
width: 100%;
height: 352px;
border: 0;
border-radius: 12px;
display: block;
}
.podcast-meta {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
}
.podcast-desc {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.7;
color: #444466;
}
.podcast-platforms {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.podcast-platform {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.1rem;
border: 1.5px solid var(--dark-line);
border-radius: 10px;
text-decoration: none;
color: var(--navy-deep);
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 600;
background: var(--white);
transition: all 0.2s ease;
}
.podcast-platform svg { flex-shrink: 0; width: 22px; height: 22px; }
.podcast-platform .arrow {
margin-left: auto;
color: rgba(13,39,117,0.35);
font-size: 1rem;
transition: transform 0.2s, color 0.2s;
}
.podcast-platform:hover {
border-color: var(--navy);
background: var(--off-white);
transform: translateX(3px);
}
.podcast-platform:hover .arrow {
transform: translateX(2px);
color: var(--navy);
}
.podcast-apple svg { color: #B349E0; }
.podcast-spotify svg { color: #1DB954; }
.podcast-youtube svg { color: #FF0033; }
@media (max-width: 800px) {
.podcast-section { padding: 2rem 1.5rem; }
.podcast-body-grid { grid-template-columns: 1fr; gap: 1.75rem; }
.podcast-embed iframe { height: 232px; }
}
/* ─────────────────────────────────────────
══ TEAM PAGE — COSMIC COMING SOON ══
───────────────────────────────────────── */
.team-cosmic {
position: relative;
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
background: #050816;
display: flex;
align-items: center;
justify-content: center;
padding: 6rem 2rem;
overflow: hidden;
isolation: isolate;
}
/* When viewport is locked to team page: kill scroll on body, hide footer */
body.team-locked { overflow: hidden; height: 100vh; height: 100dvh; }
body.team-locked #site-footer { display: none !important; }
.team-cosmic #aurora-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
display: block;
pointer-events: none;
}
.team-cosmic-card {
position: relative;
z-index: 1;
text-align: center;
max-width: 880px;
width: 100%;
color: var(--off-white);
padding: 0 24px;
}
.team-cosmic-eyebrow {
display: inline-block;
font-family: var(--font-mark);
font-size: 0.85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--aqua);
margin-bottom: 2rem;
opacity: 0.9;
}
.team-cosmic-card h1 {
font-family: var(--font-display);
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 500;
line-height: 1.0;
margin: 0 0 1.75rem 0;
color: var(--white);
letter-spacing: -0.04em;
}
.team-cosmic-card h1 em {
font-style: italic;
color: var(--white);
}
.team-cosmic-card p {
font-family: var(--font-body);
font-size: clamp(1.15rem, 1.6vw, 1.45rem);
line-height: 1.5;
color: rgba(255,255,255,0.78);
margin: 0 0 2.75rem 0;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.team-cosmic-divider {
width: 80px;
height: 1px;
background: rgba(255,255,255,0.22);
margin: 0 auto 2.5rem;
}
.team-cosmic-link {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 1rem 1.85rem;
border: 1.5px solid rgba(255,255,255,0.3);
border-radius: 100px;
color: var(--white);
background: transparent;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.team-cosmic-link:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.55);
transform: translateY(-1px);
}
.team-cosmic-link .arrow { transition: transform 0.2s; }
.team-cosmic-link:hover .arrow { transform: translateX(3px); }
.team-podcast-wrap {
background: var(--off-white);
padding: 6rem 3rem 7rem;
}
@media (max-width: 900px) {
.team-cosmic { padding: 5rem 1.5rem; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); }
.team-podcast-wrap { padding: 4rem 1.5rem 5rem; }
.team-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto 4rem; }
.team-ext-grid { grid-template-columns: 1fr; }
.team-hero { padding: 8rem 1.5rem 3rem; }
.team-body { padding: 5rem 1.5rem; }
}
/* ─────────────────────────────────────────
══ CONTACT / GET IN TOUCH PAGE ══
Full-viewport blueprint design.
WebGL topo-bg behind, vertically-centred plate above.
All selectors prefixed with cct- and scoped under #page-contact
to prevent both leak-out and leak-in from generic global rules
like .audience, .plate, .name elsewhere in the stylesheet.
───────────────────────────────────────── */
#page-contact {
--font-serif: 'Instrument Serif', serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* Override .page display when contact is active — needs flex column */
#page-contact.active {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
position: relative;
background: var(--off-white);
}
body.contact-locked {
/* Allow vertical scroll so the full form (incl. submit button) is
always reachable, even when it's taller than the viewport.
The cct-bg canvas is position:fixed so it stays put anyway. */
overflow-x: hidden;
overflow-y: auto;
min-height: 100vh;
min-height: 100dvh;
}
#page-contact .cct-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
#page-contact .cct-bg canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0.85;
}
#page-contact .cct-bg::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(70% 90% at 50% 50%,
rgba(244,244,251,0) 0%,
rgba(244,244,251,0.30) 75%,
rgba(244,244,251,0.55) 100%);
pointer-events: none;
}
#page-contact .cct-plate {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
padding: 5.6rem 3rem 2rem;
}
#page-contact .cct-plate .cct-inner {
flex: 1;
max-width: 1240px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
#page-contact .cct-head {
margin-bottom: 1.8rem;
max-width: 720px;
}
#page-contact .cct-head h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.04;
letter-spacing: -0.020em;
color: var(--navy-deep);
text-wrap: balance;
max-width: 22ch;
}
#page-contact .cct-head h1 em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--pink);
}
#page-contact .cct-head .cct-lead {
font-size: 0.95rem;
line-height: 1.55;
color: rgba(13,39,117,0.72);
max-width: 56ch;
margin-top: 8px;
}
#page-contact .cct-body {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 1.4rem;
align-items: stretch;
}
#page-contact .cct-cats {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
#page-contact .cct-cat {
background: var(--navy-deep);
color: var(--off-white);
border: 1.5px solid var(--navy-deep);
border-radius: 12px;
padding: 1rem 1.1rem;
text-align: left;
cursor: pointer;
font-family: inherit;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
overflow: hidden;
}
#page-contact .cct-cat::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M-20 80 Q 80 60 160 80 T 360 70 T 440 100'/%3E%3Cpath d='M-20 130 Q 100 110 180 130 T 380 120 T 460 150'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
pointer-events: none;
}
#page-contact .cct-cat > * { position: relative; z-index: 1; }
#page-contact .cct-cat:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -20px rgba(13,39,117,0.45);
}
#page-contact .cct-cat .cct-audience {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--aqua);
line-height: 1.3;
}
#page-contact .cct-cat .cct-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
line-height: 1.15;
letter-spacing: -0.010em;
color: #fff;
}
#page-contact .cct-cat .cct-name em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--pink);
}
#page-contact .cct-cat.active {
background: var(--pink);
border-color: var(--pink);
}
#page-contact .cct-cat.active::before { opacity: 0.4; }
#page-contact .cct-cat.active .cct-audience { color: var(--navy-deep); opacity: 0.65; }
#page-contact .cct-cat.active .cct-name { color: var(--navy-deep); }
#page-contact .cct-cat.active .cct-name em { color: var(--navy-deep); }
#page-contact .cct-panel {
background: var(--navy-deep);
color: var(--off-white);
border-radius: 14px;
padding: 1.6rem 1.8rem 1.4rem;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
box-shadow:
0 1px 0 rgba(13,39,117,0.06),
0 18px 50px -28px rgba(13,39,117,0.45);
}
#page-contact .cct-panel::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M-20 110 Q 80 80 160 110 T 360 100 T 640 130'/%3E%3Cpath d='M-20 180 Q 100 150 180 180 T 380 170 T 640 200'/%3E%3Cpath d='M-20 250 Q 100 220 180 250 T 380 240 T 640 270'/%3E%3Cpath d='M-20 320 Q 90 290 170 320 T 370 310 T 640 340'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
pointer-events: none;
}
#page-contact .cct-panel > * { position: relative; z-index: 1; }
#page-contact .cct-panel .cct-audience {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--aqua);
margin-bottom: 0.4rem;
}
#page-contact .cct-panel h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.05rem, 1.45vw, 1.3rem);
line-height: 1.12;
letter-spacing: -0.010em;
color: #fff;
margin-bottom: 0.5rem;
}
#page-contact .cct-panel h2 em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--pink);
}
#page-contact .cct-panel p {
font-size: 0.86rem;
line-height: 1.55;
color: rgba(255,255,255,0.78);
margin-bottom: 0.7rem;
}
#page-contact .cct-panel .cct-expect {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem;
margin-top: 0.2rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255,255,255,0.12);
}
#page-contact .cct-panel .cct-expect .cct-row {
font-size: 0.78rem;
line-height: 1.55;
color: rgba(255,255,255,0.78);
display: grid;
grid-template-columns: 12px 1fr;
gap: 6px;
align-items: baseline;
}
#page-contact .cct-panel .cct-expect .cct-row::before {
content: '—';
color: var(--pink);
font-weight: 600;
}
#page-contact .cct-form {
margin-top: 1rem;
display: grid;
gap: 0.7rem;
}
#page-contact .cct-form .cct-row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
}
/* (cct-row2 mobile stack: already handled by the @media (max-width: 900px) rule at the bottom of the contact CSS — no additional rule needed.) */
#page-contact .cct-form .cct-field {
display: grid;
gap: 4px;
}
#page-contact .cct-form label {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(255,255,255,0.68);
}
#page-contact .cct-form input,
#page-contact .cct-form textarea {
width: 100%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
padding: 9px 11px;
font-family: var(--font-body);
font-size: 0.88rem;
color: var(--off-white);
transition: border-color 0.2s, background 0.2s;
}
#page-contact .cct-form input::placeholder,
#page-contact .cct-form textarea::placeholder {
color: rgba(255,255,255,0.55);
}
#page-contact .cct-form input:focus,
#page-contact .cct-form textarea:focus {
outline: 2px solid #6eedd1;
outline-offset: 2px;
border-color: var(--pink);
background: rgba(255,255,255,0.10);
}
#page-contact .cct-form textarea {
resize: vertical;
min-height: 84px;
}
#page-contact .cct-form .cct-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.4rem;
}
#page-contact .cct-form .cct-actions .cct-note {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
#page-contact .cct-form button {
padding: 9px 18px;
border-radius: 999px;
background: var(--pink);
color: var(--navy-deep);
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.03em;
border: 0;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
#page-contact .cct-form button:hover {
background: #f3a5e8;
transform: translateY(-1px);
}
#page-contact .cct-form button:disabled {
opacity: 0.55;
cursor: default;
transform: none;
}
#page-contact .cct-status {
margin: 0.85rem 0 0;
font-size: 0.92rem;
line-height: 1.45;
min-height: 1.2em;
}
#page-contact .cct-status.sending { color: var(--navy-deep); opacity: 0.7; }
#page-contact .cct-status.success { color: #1a7d52; font-weight: 500; }
#page-contact .cct-status.error { color: #c0392b; font-weight: 500; }
/* Full success state — replaces the form after a successful send. */
#page-contact .cct-success {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 0 2rem;
animation: cctSuccessIn 0.45s ease both;
}
#page-contact .cct-success-check {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #6eedd1, #4fd1b0);
color: #04154a;
font-size: 26px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
#page-contact .cct-success h3 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-weight: 600;
color: #fff;
margin: 0;
letter-spacing: -0.01em;
}
#page-contact .cct-success p {
font-size: 1rem;
line-height: 1.6;
color: rgba(255,255,255,0.78);
max-width: 44ch;
margin: 0;
}
@keyframes cctSuccessIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
#page-contact .cct-panel .cct-expect { grid-template-columns: 1fr; gap: 0.6rem; }
}
@media (max-width: 900px) {
body.contact-locked { overflow: auto; height: auto; }
#page-contact .cct-plate { padding: 5.6rem 1.25rem 2rem; }
#page-contact .cct-body { grid-template-columns: 1fr; }
#page-contact .cct-form .cct-row2 { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────
══ FIRST NATIONS / THE NAME PAGE ══
───────────────────────────────────────── */
.fn-hero {
min-height: 60vh;
background: #1a0a2e;
display: flex;
align-items: flex-end;
padding: 9rem 3rem 5rem;
position: relative;
overflow: hidden;
}
.fn-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 70% at 80% 50%,
rgba(110,237,209,0.10) 0%, transparent 60%);
pointer-events: none;
}
.fn-hero h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 4.5rem);
font-weight: 800;
color: var(--white);
letter-spacing: -0.01em;
line-height: 1.06;
max-width: 22ch;
margin-bottom: 1.5rem;
}
.fn-hero p {
font-size: 1rem;
line-height: 1.85;
color: rgba(255,255,255,0.62);
max-width: 52ch;
}
/* ─────────────────────────────────────────
ACKNOWLEDGEMENT — LIGHT HERO
Sits above .fn-body. Light cool-white field, navy + pink
display headline, mono eyebrow, foot-rule with two framing
labels. Designed to read as a thesis statement for the
page, not a banner.
───────────────────────────────────────── */
.ack-hero {
position: relative;
/* Deep blueprint navy with centre 'drafting light'. */
background:
radial-gradient(ellipse 70% 60% at center, rgba(40,80,180,0.22) 0%, transparent 70%),
linear-gradient(180deg, #0a1d4f 0%, #051236 100%);
min-height: 100vh;
min-height: 100dvh;
padding: 9rem 3rem 4.5rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ack-hero::before {
/* Blueprint grid — three tiers (16/64/256px), radial-masked centre. */
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(180,210,225,0.30) 1.4px, transparent 1.6px),
radial-gradient(circle at 1px 1px, rgba(180,210,225,0.18) 1.1px, transparent 1.3px),
radial-gradient(circle at 1px 1px, rgba(180,210,225,0.10) 0.8px, transparent 1px);
background-size:
256px 256px,
64px 64px,
16px 16px;
mask-image: radial-gradient(ellipse at center, #000 50%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 95%);
pointer-events: none;
}
.ack-hero::after {
/* Four corner registration ticks — draftsperson border. */
content: "";
position: absolute;
inset: 2.25rem;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* Niitsitapi Confederacy schematic — sits behind the headline. */
.ack-hero-map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: 0.92;
}
@media (max-width: 760px) {
.ack-hero-map { display: none; }
}
.ack-hero .inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 1080px;
}
.ack-hero-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--aqua);
opacity: 0.85;
font-weight: 500;
display: block;
margin-bottom: 2.25rem;
}
.ack-hero h1 {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6.2vw, 5.6rem);
font-weight: 800;
color: #f4f4fb;
letter-spacing: -0.012em;
line-height: 1.02;
margin: 0 auto 2rem;
max-width: 16ch;
text-shadow: 0 1px 24px rgba(0,0,0,0.25);
}
.ack-hero h1 em {
font-style: italic;
font-weight: 600;
color: var(--pink);
}
.ack-hero-sub {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.85;
color: rgba(244,244,251,0.78);
max-width: 56ch;
margin: 0 auto;
font-weight: 400;
}
.ack-hero-foot {
position: relative;
z-index: 1;
max-width: 1240px;
margin: 4.5rem auto 0;
padding-top: 1.75rem;
border-top: 1px solid rgba(8,38,117,0.12);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.5rem;
}
.ack-hero-foot-label {
font-family: var(--font-body);
font-size: 0.68rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--navy);
opacity: 0.55;
font-weight: 500;
}
.ack-hero-foot-label.right { text-align: right; }
.ack-hero-foot-divider {
width: 56px;
height: 2px;
background: #d99340;
border-radius: 2px;
opacity: 0.9;
}
@media (max-width: 760px) {
.ack-hero { padding: 7rem 1.5rem 3.5rem; }
.ack-hero-foot {
grid-template-columns: 1fr;
text-align: center;
gap: 0.75rem;
}
.ack-hero-foot-label.right { text-align: center; }
.ack-hero-foot-divider { margin: 0 auto; }
}
/* ─────────────────────────────────────────
ACKNOWLEDGEMENT — BODY REFINEMENTS
Small additions that pick up depth from the rest of the
site — aqua hairline ticks above section heads, refined
pull-quote, hover state on side notes, refined placeholder.
No copy changes.
───────────────────────────────────────── */
.fn-main h2 {
position: relative;
}
.fn-main h2::before {
content: "";
display: block;
width: 36px;
height: 2px;
background: var(--aqua);
margin-bottom: 1.25rem;
border-radius: 2px;
opacity: 0.85;
}
.fn-main h2:first-child::before { display: none; }
.fn-main blockquote {
position: relative;
background: linear-gradient(180deg, rgba(237,153,237,0.05) 0%, rgba(237,153,237,0) 100%);
padding: 1.75rem 2rem 1.75rem 2rem;
border-radius: 0 14px 14px 0;
}
.fn-placeholder {
position: relative;
overflow: hidden;
}
.fn-placeholder::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 20%, rgba(110,237,209,0.08), transparent 50%);
pointer-events: none;
}
.fn-placeholder > * { position: relative; z-index: 1; }
.fn-body {
/* Three-tier dot grid — matches About page register.
Navy dots on off-white, 256/64/16 spacing. Offset 8px
down so the first row doesn't clip awkwardly against
the hero edge above. */
background:
radial-gradient(circle at 1px 1px, rgba(13,39,117,0.22) 1.4px, transparent 1.6px),
radial-gradient(circle at 1px 1px, rgba(13,39,117,0.13) 1.1px, transparent 1.3px),
radial-gradient(circle at 1px 1px, rgba(13,39,117,0.07) 0.8px, transparent 1px),
var(--off-white);
background-size:
256px 256px,
64px 64px,
16px 16px;
background-position: 0 8px, 0 8px, 0 8px, 0 0;
padding: 7rem 3rem 4rem;
}
.fn-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 6rem;
margin-bottom: 5rem;
}
.fn-main h2 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2vw, 1.9rem);
font-weight: 700;
color: var(--navy-deep);
letter-spacing: -0.005em;
line-height: 1.2;
margin-bottom: 1.5rem;
margin-top: 3rem;
}
.fn-main h2:first-child { margin-top: 0; }
.fn-main p {
font-size: 0.97rem;
line-height: 2;
color: #444466;
margin-bottom: 1.25rem;
}
.fn-main p strong {
color: var(--navy-deep);
font-weight: 600;
}
.fn-main blockquote {
border-left: 3px solid var(--pink);
padding-left: 1.75rem;
margin: 2rem 0;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.55;
color: var(--navy-deep);
letter-spacing: -0.01em;
}
.fn-main .fn-pull {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.3rem, 1.9vw, 1.65rem);
font-weight: 400;
line-height: 1.45;
color: var(--navy-deep);
letter-spacing: -0.01em;
margin: 2.75rem 0;
padding: 0;
}
.fn-sidebar {
padding-top: 0.5rem;
}
/* Academic-essay-style kicker for the references column. Mono,
small caps register, sits above the first reference card. */
.fn-sidebar-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--navy);
opacity: 0.6;
margin-bottom: 1.4rem;
padding-left: 0.05em;
}
/* ─────────────────────────────────────────
FN-NOTE — Layered glass cards
Translucent backdrop-blurred surface, gradient hairline
border (aqua → pink), solid offset "card behind" faked via
layered box-shadows, parallax lift on hover.
───────────────────────────────────────── */
.fn-note {
position: relative;
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border: 1px solid transparent;
border-radius: 18px;
padding: 2rem 2rem 1.85rem;
margin-bottom: 1.85rem;
transition: transform 0.4s cubic-bezier(.2,.7,.3,1),
box-shadow 0.4s cubic-bezier(.2,.7,.3,1);
box-shadow:
8px 8px 0 0 rgba(255, 255, 255, 0.55),
8px 8px 0 1px rgba(8, 38, 117, 0.08),
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 12px 30px rgba(8, 38, 117, 0.04);
}
/* gradient hairline border via masked pseudo */
.fn-note::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(110, 237, 209, 0.7) 0%,
rgba(237, 153, 237, 0.55) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
opacity: 0.55;
transition: opacity 0.4s;
}
.fn-note:hover {
transform: translate(-2px, -2px);
box-shadow:
12px 12px 0 0 rgba(255, 255, 255, 0.6),
12px 12px 0 1px rgba(8, 38, 117, 0.10),
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 24px 60px rgba(8, 38, 117, 0.09);
}
.fn-note:hover::after { opacity: 1; }
.fn-note h4 {
font-family: var(--font-display);
font-size: 0.92rem;
font-weight: 700;
color: var(--navy-deep);
letter-spacing: -0.01em;
margin-bottom: 0.7rem;
display: flex;
align-items: center;
gap: 0.55rem;
}
.fn-note h4::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--aqua), var(--pink));
flex-shrink: 0;
}
.fn-note p {
font-size: 0.83rem;
line-height: 1.75;
color: #555575;
position: relative;
}
.fn-note a {
color: var(--navy-deep);
text-decoration: underline;
text-decoration-color: rgba(110, 237, 209, 0.5);
text-underline-offset: 2px;
transition: text-decoration-color 0.2s;
}
.fn-note a:hover { text-decoration-color: var(--pink); }
/* Stagger sidebar cards subtly so they don't feel uniform */
.fn-sidebar .fn-note:nth-child(even) {
transform: translateX(-3px);
}
.fn-sidebar .fn-note:nth-child(even):hover {
transform: translate(-5px, -2px);
}
@media (max-width: 760px) {
.fn-note {
box-shadow:
6px 6px 0 0 rgba(255, 255, 255, 0.5),
6px 6px 0 1px rgba(8, 38, 117, 0.08),
0 8px 20px rgba(8, 38, 117, 0.04);
}
.fn-sidebar .fn-note:nth-child(even) { transform: none; }
}
.fn-placeholder {
background: var(--navy-deep);
border-radius: 20px;
padding: 3rem;
text-align: center;
}
.fn-placeholder p {
font-size: 0.9rem;
line-height: 1.8;
color: rgba(255,255,255,0.55);
margin-bottom: 1.5rem;
}
.fn-placeholder .btn-ghost {
cursor: default;
opacity: 0.5;
}
@media (max-width: 900px) {
.fn-grid { grid-template-columns: 1fr; gap: 3rem; }
.fn-hero { padding: 8rem 1.5rem 3rem; }
.fn-body { padding: 5rem 1.5rem; }
}
/* ─────────────────────────────────────────
FOOTER
───────────────────────────────────────── */
footer {
background: var(--charcoal);
padding: 4rem 3rem 3rem;
}
.footer-inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand .wordmark {
font-size: 1.6rem;
display: block;
margin-bottom: 0.75rem;
}
.footer-brand p {
font-size: 0.82rem;
line-height: 1.75;
color: rgba(255,255,255,0.45);
max-width: 28ch;
margin-bottom: 1.5rem;
}
.footer-reg {
font-size: 0.7rem;
color: rgba(255,255,255,0.55);
letter-spacing: 0.05em;
line-height: 1.6;
}
.footer-social-groups {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.footer-socials {
display: flex;
gap: 0.55rem;
align-items: center;
}
.footer-socials-label {
font-family: var(--font-mark, 'JetBrains Mono', ui-monospace, monospace);
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
min-width: 3.4rem;
}
.footer-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.62);
background: transparent;
text-decoration: none;
transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.footer-social-link:hover {
color: var(--aqua);
border-color: rgba(110,237,209,0.45);
background: rgba(110,237,209,0.06);
transform: translateY(-1px);
}
.footer-social-link svg {
width: 15px;
height: 15px;
fill: currentColor;
display: block;
}
.footer-podcast-name {
font-size: 0.78rem;
color: rgba(255,255,255,0.62);
text-decoration: none;
margin-left: 0.35rem;
letter-spacing: 0.02em;
transition: color 0.2s;
}
.footer-podcast-name:hover { color: var(--pink); }
.footer-col h3 {
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
font-weight: 500;
margin-bottom: 1.25rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-col ul li a, .footer-col ul li span {
font-size: 0.85rem;
color: rgba(255,255,255,0.62);
text-decoration: none;
cursor: pointer;
transition: color 0.2s;
}
.footer-col ul li a:hover, .footer-col ul li span:hover { color: var(--pink); }
.footer-bottom {
max-width: 1240px;
margin: 0 auto;
padding-top: 2.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
flex-wrap: wrap;
}
.footer-ack {
font-size: 0.78rem;
line-height: 1.75;
color: rgba(255,255,255,0.55);
flex-basis: 100%;
}
.footer-ack a {
color: rgba(255,255,255,0.55);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color 0.2s;
}
.footer-ack a:hover { color: var(--pink); }
.footer-copy {
font-size: 0.75rem;
color: rgba(255,255,255,0.55);
white-space: nowrap;
}
.footer-disclaimer {
margin-top: 0.75rem;
font-size: 0.7rem;
color: rgba(255,255,255,0.55);
font-style: italic;
}
@media (max-width: 860px) {
.footer-inner { grid-template-columns: 1fr 1fr; }
footer { padding: 3rem 1.5rem 2rem; }
.footer-col ul { gap: 1.25rem; }
.footer-col ul li a,
.footer-col ul li span {
display: inline-block;
padding: 6px 0;
}
}
@media (max-width: 560px) {
.footer-inner { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; }
}
/* Infrastructure SVG animation styles */
.node-dot { animation: nodeFloat var(--dur, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.conn-line { animation: linePulse var(--dur, 4s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) {
.problem-grid, .build-grid, .difference-grid,
.audience-grid, .credibility-grid, .happi-grid,
.team-grid { grid-template-columns: 1fr !important; gap: 2.5rem; }
.hero-stats { grid-template-columns: 1fr 1fr !important; }
.hero-visual { display: none; }
/* Explore page is desktop/tablet only — hide its entry points
(nav link + footer link) on mobile. */
.explore-only { display: none !important; }
/* Solid opaque nav on mobile at all scroll positions. Two
goals here:
(1) NAV EXTENDS INTO THE NOTCH/STATUS-BAR AREA. With
viewport-fit=cover in the meta, the viewport now extends
under the notch. Adding padding-top: env(safe-area-inset-top)
makes the nav's background paint up through the safe-area
region (so you see solid navy beside the notch instead of
page content) while keeping the visible content (logo,
hamburger) below the safe-area inset.
(2) NO iOS SAFARI REPAINT GLITCHES. Background set as default
(not just on .scrolled / .light-bg) so iOS never has a
frame with no background during scroll. Backdrop-filter
and transition removed (both are known iOS Safari bug
triggers with position:fixed). translate3d + will-change
+ isolation force the nav onto its own GPU compositing
layer permanently. */
nav,
nav.scrolled,
nav.light-bg {
top: 0;
height: auto;
min-height: 58px;
padding:
calc(0.9rem + env(safe-area-inset-top, 0px))
calc(1.5rem + env(safe-area-inset-right, 0px))
0.9rem
calc(1.5rem + env(safe-area-inset-left, 0px));
background: #04154a;
border-bottom-color: rgba(255,255,255,0.08);
transition: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
will-change: transform;
isolation: isolate;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
nav.light-bg {
background: #f4f4fb;
}
/* Drop the aqua + pink corner washes on mobile — on a narrow
viewport they clip into glow streaks at the edges. Keep only
the soft navy depth wash. !important because the desktop
rule sits AFTER this one in source order. */
#page-home::after {
background:
radial-gradient(ellipse 80% 60% at 70% 40%, rgba(14,46,136,0.45), transparent 75%) !important;
}
/* Hide leading em-dashes on ALL eyebrow/label variants on
mobile — they cause awkward gaps at small widths. Eyebrow
sits flush-left. Covers .lnh-eyebrow (hero), .tpg-eyebrow
(topology), .cnst-eyebrow (constellation/HAPPI),
#page-build .eyebrow (build page sections), .lnh-label
(section labels like 'The Coordination Failure'), and
.wbpr-label ('What Becomes Possible'). */
.lnh-eyebrow-line { display: none; }
.lnh-eyebrow { gap: 0; }
.tpg-eyebrow::before { display: none; }
.tpg-eyebrow { gap: 0; }
.cnst-eyebrow::before { display: none; }
.cnst-eyebrow { gap: 0; }
#page-build .eyebrow::before { display: none; }
#page-build .eyebrow { gap: 0; }
.lnh-label::before { display: none; }
.lnh-label { gap: 0; }
.wbpr-label::before { display: none; }
.wbpr-label { gap: 0; }
/* Hide the redundant meta-framing bars in the Maslow Difference
section on mobile — the entity cards and closing drumbeat
('Maslow ends. HAPPI survives. The mission thrives.') already
carry this message. On a narrow viewport these read as
noise rather than reinforcement. */
.lnh-diff-metabar { display: none; }
.lnh-diff-inversion { display: none; }
.hero { flex-direction: column; }
.hero-left { padding: 3rem 1.5rem 2rem; min-height: auto; }
section { padding: 4rem 1.5rem !important; }
.problem, .build, .happi-section, .difference, .credibility, .audience { padding: 4rem 1.5rem !important; }
}
.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:transform 0.25s, opacity 0.25s; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
/* Hamburger pushed to the far right of the nav so it stops
clinging to the wordmark when the inline links collapse. */
.nav-hamburger { display:flex; margin-left: auto; }
.nav-links { display:none; position:fixed; top:calc(58px + env(safe-area-inset-top, 0px)); left:0; right:0; background:#04154a; backdrop-filter:blur(20px); flex-direction:column; align-items:center; padding:1.5rem 0 2rem; z-index:490; }
.nav-links.open { display:flex; }
.nav-links li { width:100%; text-align:center; }
.nav-links li a { display:block; padding:0.9rem 2rem; font-size:0.9rem; }
.nav-links .nav-cta-li { display: list-item; margin-top: 0.6rem; padding: 0 2rem; }
.nav-links .nav-cta-li a {
display: inline-block;
padding: 0.7rem 1.6rem;
border: 1.5px solid rgba(255,255,255,0.45);
border-radius: 2rem;
color: #fff;
font-size: 0.88rem;
letter-spacing: 0.04em;
}
.nav-links .nav-cta-li a:hover {
background: var(--pink);
border-color: var(--pink);
color: var(--navy-deep);
}
}
/* Hide the in-drawer CTA at desktop widths only (scoped so it can't
override the mobile show-rule via cascade order). */
@media (min-width: 769px) {
.nav-links .nav-cta-li { display: none; }
}
/* ═══════════════════════════════════════════
HOME PAGE — LIVING NETWORK HERO
Section styles.
Class prefix .lnh-* (Living Network Home)
═══════════════════════════════════════════ */
#page-home {
background: #020817;
min-height: 100vh;
min-height: 100dvh;
position: relative;
overflow: hidden;
color: #fff;
padding: 0;
}
/* Fine grain texture — adds warmth/depth to the flat dark bg */
#page-home::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
opacity: 0.07;
mix-blend-mode: screen;
pointer-events: none;
z-index: 1;
}
/* Soft radial gradient washes — warmth, depth, brand glow */
#page-home::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 70% at 75% 50%, rgba(14,46,136,0.55), transparent 70%),
radial-gradient(ellipse 50% 50% at 15% 95%, rgba(237,153,237,0.10), transparent 65%),
radial-gradient(ellipse 40% 40% at 95% 8%, rgba(110,237,209,0.12), transparent 60%);
pointer-events: none;
z-index: 1;
}
.lnh-hero {
position: relative;
width: 100%;
/* Grows with content so the 4-line H1 + lead + buttons never
clip; min-height keeps it at least a full screen on tall
viewports without forcing a dead gap on shorter ones. */
min-height: 100vh;
min-height: 100dvh;
overflow: hidden;
z-index: 2;
}
@media (min-width: 900px) {
.lnh-hero { min-height: 700px; }
}
.lnh-hero::before,
.lnh-hero::after {
content: "";
position: absolute;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
border-radius: 50%;
filter: blur(40px);
}
.lnh-hero::before {
top: -15%;
right: 5%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(110,237,209,0.08) 0%, rgba(110,237,209,0) 65%);
}
.lnh-hero::after {
bottom: -12%;
left: -8%;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(237,153,237,0.07) 0%, rgba(237,153,237,0) 65%);
}
.lnh-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 1;
}
/* Top status strip — sits below the site nav */
.lnh-status {
position: absolute;
top: 90px;
left: 0; right: 0;
padding: 0 56px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: rgba(255,255,255,0.68);
z-index: 3;
}
.lnh-status-live {
display: flex; align-items: center; gap: 14px;
}
.lnh-status-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #6eedd1;
box-shadow: 0 0 10px #6eedd1, 0 0 20px rgba(110,237,209,0.5);
animation: lnh-pulse 2s infinite;
}
@keyframes lnh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.lnh-status-label { color: #fff; }
.lnh-status-metrics { display: flex; gap: 36px; }
.lnh-status-metrics .v { color: #fff; font-weight: 500; }
.lnh-status-metrics .v-aqua { color: #6eedd1; }
.lnh-status-metrics .v-pink { color: #e891e5; }
/* Left hero text */
.lnh-text {
position: relative;
margin-left: max(56px, calc(50vw - 660px));
width: min(720px, 60%);
padding: 112px 0 80px 0;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
box-sizing: border-box;
z-index: 3;
}
.lnh-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.32em;
color: #6eedd1;
margin-bottom: 28px;
display: flex; align-items: center; gap: 12px;
text-transform: none;
white-space: nowrap;
}
.lnh-eyebrow-line { width: 28px; height: 1px; background: #6eedd1; }
.lnh-h1 {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(42px, 5.2vw, 76px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.025em;
margin: 0 0 22px;
text-shadow: 0 2px 30px rgba(0,0,0,0.4);
width: max-content;
max-width: calc(100vw - 80px);
}
.lnh-h1 .row-white,
.lnh-h1 .row-faded,
.lnh-h1 .row-accent { white-space: nowrap; }
/* Mobile-only line breaks in the first H1 row (hidden on desktop). */
.lnh-h1 .m-break { display: none; }
.lnh-h1 .h1-line { display: block; }
.lnh-h1-strike,
.lnh-h1-reveal { width: max-content; max-width: 100%; }
/* H1 animation — neon flicker on "Surviving" then "Alone" fades, then reveal "Together. Thriving." */
.lnh-h1-strike {
position: relative;
display: inline-block;
white-space: nowrap;
}
.lnh-h1-strike .row-accent { display: inline-block; }
.lnh-h1-strike .row-faded { display: inline-block; }
.lnh-h1-strike.alone-out .row-accent {
animation: neon-flicker-out-pink 1s linear forwards;
}
.lnh-h1-strike.flicker .row-faded {
animation: neon-flicker-out 1.4s linear forwards;
}
@keyframes neon-flicker-out {
0% { opacity: 1; transform: translate(0, 0); text-shadow: 0 0 8px rgba(110,237,209,0.6), 0 0 20px rgba(110,237,209,0.3); }
4% { opacity: 0.08; transform: translate(2px, 0); text-shadow: -2px 0 rgba(237,153,237,0.8), 2px 0 rgba(110,237,209,0.8); }
7% { opacity: 1; transform: translate(-1px, 0); text-shadow: 0 0 8px rgba(110,237,209,0.6), 0 0 18px rgba(110,237,209,0.3); }
11% { opacity: 0.95; transform: translate(0, 0); text-shadow: 0 0 7px rgba(110,237,209,0.5); }
14% { opacity: 0.1; transform: translate(-3px, 1px); text-shadow: 3px 0 rgba(237,153,237,0.9), -3px 0 rgba(110,237,209,0.9); }
18% { opacity: 0.8; transform: translate(1px, 0); text-shadow: 0 0 6px rgba(110,237,209,0.5); }
22% { opacity: 0.05; transform: translate(2px, -1px); text-shadow: -2px 0 rgba(237,153,237,0.8), 2px 0 rgba(110,237,209,0.6); }
26% { opacity: 0.9; transform: translate(0, 0); text-shadow: 0 0 6px rgba(110,237,209,0.5); }
32% { opacity: 0.1; transform: translate(-1px, 0); text-shadow: 2px 0 rgba(237,153,237,0.7), -2px 0 rgba(110,237,209,0.7); }
36% { opacity: 0.75; transform: translate(0, 0); text-shadow: 0 0 5px rgba(110,237,209,0.4); }
40% { opacity: 0.04; transform: translate(3px, 0); text-shadow: -3px 0 rgba(237,153,237,0.9), 3px 0 rgba(110,237,209,0.7); }
45% { opacity: 0.65; transform: translate(-1px, 0); text-shadow: 0 0 4px rgba(110,237,209,0.4); }
51% { opacity: 0.08; transform: translate(2px, 1px); text-shadow: -2px 0 rgba(237,153,237,0.7), 2px 0 rgba(110,237,209,0.6); }
56% { opacity: 0.4; transform: translate(0, 0); text-shadow: 0 0 3px rgba(110,237,209,0.3); }
62% { opacity: 0.05; transform: translate(-2px, 0); text-shadow: 2px 0 rgba(237,153,237,0.6), -2px 0 rgba(110,237,209,0.6); }
68% { opacity: 0.25; transform: translate(1px, 0); text-shadow: 0 0 2px rgba(110,237,209,0.2); }
74% { opacity: 0.03; transform: translate(-1px, 0); text-shadow: 1px 0 rgba(237,153,237,0.5); }
80% { opacity: 0.12; transform: translate(2px, 0); text-shadow: -1px 0 rgba(237,153,237,0.4), 1px 0 rgba(110,237,209,0.3); }
86% { opacity: 0.02; transform: translate(0, 0); text-shadow: none; }
92% { opacity: 0.06; transform: translate(-1px, 0); text-shadow: 1px 0 rgba(237,153,237,0.3); }
100% { opacity: 0; transform: translate(0, 0); text-shadow: none; }
}
@keyframes neon-flicker-out-pink {
0% { opacity: 1; transform: translate(0, 0); text-shadow: 0 0 8px rgba(237,153,237,0.6), 0 0 20px rgba(237,153,237,0.3); }
5% { opacity: 0.08; transform: translate(-2px, 0); text-shadow: 2px 0 rgba(110,237,209,0.8), -2px 0 rgba(237,153,237,0.8); }
9% { opacity: 1; transform: translate(1px, 0); text-shadow: 0 0 8px rgba(237,153,237,0.6), 0 0 18px rgba(237,153,237,0.3); }
14% { opacity: 0.1; transform: translate(3px, -1px); text-shadow: -3px 0 rgba(110,237,209,0.9), 3px 0 rgba(237,153,237,0.9); }
20% { opacity: 0.85; transform: translate(0, 0); text-shadow: 0 0 7px rgba(237,153,237,0.5); }
25% { opacity: 0.05; transform: translate(-2px, 1px); text-shadow: 2px 0 rgba(110,237,209,0.8), -2px 0 rgba(237,153,237,0.6); }
32% { opacity: 0.9; transform: translate(1px, 0); text-shadow: 0 0 6px rgba(237,153,237,0.5); }
38% { opacity: 0.08; transform: translate(2px, 0); text-shadow: -2px 0 rgba(110,237,209,0.7), 2px 0 rgba(237,153,237,0.7); }
45% { opacity: 0.7; transform: translate(-1px, 0); text-shadow: 0 0 5px rgba(237,153,237,0.4); }
52% { opacity: 0.04; transform: translate(3px, 0); text-shadow: 3px 0 rgba(110,237,209,0.9), -3px 0 rgba(237,153,237,0.7); }
60% { opacity: 0.45; transform: translate(0, 0); text-shadow: 0 0 3px rgba(237,153,237,0.3); }
68% { opacity: 0.08; transform: translate(-1px, 0); text-shadow: 1px 0 rgba(110,237,209,0.6); }
76% { opacity: 0.2; transform: translate(2px, 0); text-shadow: -1px 0 rgba(237,153,237,0.3); }
85% { opacity: 0.03; transform: translate(0, 0); text-shadow: none; }
92% { opacity: 0.08; transform: translate(-1px, 0); text-shadow: 1px 0 rgba(110,237,209,0.3); }
100% { opacity: 0; transform: translate(0, 0); text-shadow: none; }
}
/* Swap wrapper — Surviving/Alone strikes out in-place, then
Together/Thriving glows in over the same slot. Strike element
stays in flow (defines slot height) but fades to opacity 0;
reveal element absolute-positioned overlay. */
.lnh-h1-swap {
position: relative;
display: block;
}
.lnh-h1-swap .lnh-h1-strike {
display: inline-block;
}
.lnh-h1-swap .lnh-h1-reveal {
position: absolute;
top: 0; left: 0;
}
.lnh-h1-reveal {
display: inline-block;
white-space: nowrap;
font-style: italic;
font-weight: 600;
}
.lnh-h1-reveal .reveal-pink,
.lnh-h1-reveal .reveal-thriving {
display: inline-block;
opacity: 0;
}
.lnh-h1-reveal .reveal-pink.flicker-on,
.lnh-h1-reveal .reveal-thriving.flicker-on {
animation: glow-in 1.8s ease-out forwards;
}
/* Reveal animation — confident colour entrance, no neon glow.
The accent colours alone carry the moment; the heavy text-shadow
was reading retro-arcade against the rest of the brand. */
@keyframes glow-in {
0% { opacity: 0; transform: translateY(2px); }
60% { opacity: 0.9; transform: translateY(0); }
100% { opacity: 1; transform: translateY(0); }
}
.lnh-h1-reveal .reveal-pink { color: #e891e5; }
.lnh-h1-reveal .reveal-thriving { color: #6eedd1; }
.lnh-lead .lead-thriving { color: #6eedd1; font-style: italic; }
.lnh-lead .lead-together { color: #e891e5; font-style: italic; }
/* Colour preserved when nested inside in the bolded sign-off. */
.lnh-lead strong .lead-thriving { color: #6eedd1; }
.lnh-lead strong .lead-together { color: #e891e5; }
@media (prefers-reduced-motion: reduce) {
.lnh-h1-strike .row-faded,
.lnh-h1-strike .row-accent { opacity: 0; animation: none; transition: none; }
.lnh-h1-reveal .reveal-pink,
.lnh-h1-reveal .reveal-thriving { opacity: 1; animation: none; }
}
.lnh-h1 .row-white { color: #fff; }
/* Sick treatment for 'Surviving.' — drained-aqua sickly green,
italic for further visual divergence from the white sans neighbours,
plus tiny continuous tremor and SVG paint-drip distortion. The
filter is a static frozen-mid-drip — combined with the tremor it
reads as decay rather than animation cycling. Halts on .flicker
so the neon flicker-out is uncontested visually. */
.lnh-h1 .row-faded {
/* Brand aqua, drained. R=110 held (the hue anchor); G dropped
from 237 to 200 to kill the vitality; B held with slight
cooling. Alpha 0.6 so the word reads as faded rather than
dimmed-but-saturated. Italic + tremor + paint-drip filter
continue to carry the sickness. */
color: rgba(110, 200, 175, 0.6);
font-style: italic;
display: inline-block;
filter: url(#paint-drip);
animation: sick-tremor 140ms infinite alternate;
animation-timing-function: steps(1);
}
@keyframes sick-tremor {
0% { transform: translate(0, 0); }
25% { transform: translate(0.3px, -0.2px); }
50% { transform: translate(-0.4px, 0.2px); }
75% { transform: translate(0.2px, 0.3px); }
100% { transform: translate(-0.2px, -0.3px); }
}
@media (prefers-reduced-motion: reduce) {
.lnh-h1 .row-faded { animation: none; }
}
.lnh-h1 .row-accent {
color: #e891e5;
font-style: italic;
font-weight: 600;
}
.lnh-text .lnh-lead {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.55;
font-weight: 300;
color: rgba(255,255,255,0.82);
max-width: 500px;
margin: 0 0 40px;
}
.lnh-text .lnh-lead strong { color: #fff; font-weight: 500; }
.lnh-actions { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
/* Quiet secondary contact path beside the primary button. */
.lnh-textlink {
font-family: 'Outfit', var(--font-body);
font-size: 14px;
color: rgba(255,255,255,0.75);
text-decoration: none;
cursor: pointer;
transition: color 0.15s ease;
white-space: nowrap;
}
.lnh-textlink:hover { color: #6eedd1; }
.lnh-btn {
display: inline-block;
padding: 14px 24px;
font-size: 14px;
font-family: 'Outfit', var(--font-body);
cursor: pointer;
text-decoration: none;
border: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.lnh-btn-primary {
background: #e891e5 !important;
color: #0d2775 !important;
font-weight: 600;
box-shadow: 0 6px 24px -6px rgba(237,153,237,0.55);
}
.lnh-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -6px rgba(237,153,237,0.75);
}
.lnh-btn-ghost {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
}
.lnh-btn-ghost:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.5);
}
/* Right ticker panel */
.lnh-ticker {
position: absolute;
right: 56px;
top: 175px;
width: 280px;
background: rgba(2,8,23,0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(110,237,209,0.18);
padding: 18px 22px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: rgba(255,255,255,0.7);
letter-spacing: 0.04em;
z-index: 3;
}
.lnh-ticker-head {
font-size: 9.5px;
letter-spacing: 0.24em;
color: #6eedd1;
margin-bottom: 14px;
}
.lnh-ticker-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-top: 1px solid rgba(255,255,255,0.06);
}
.lnh-ticker-row:first-of-type { border-top: none; }
.lnh-ticker-row .v-aqua { color: #6eedd1; }
.lnh-ticker-row .v-pink { color: #e891e5; }
/* Bottom-right caption */
.lnh-caption {
position: absolute;
right: 56px;
bottom: 20px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
color: rgba(255,255,255,0.62);
letter-spacing: 0.18em;
text-align: right;
max-width: 720px;
z-index: 3;
line-height: 1.5;
}
.lnh-caption-head { margin-bottom: 8px; color: #fff; }
/* Responsive */
@media (max-width: 1100px) {
.lnh-ticker { display: none; }
.lnh-text { width: min(580px, 60%); padding-right: 32px; }
}
@media (max-width: 768px) {
.lnh-status { padding: 0 24px; top: 80px; flex-wrap: wrap; gap: 12px; }
.lnh-status-metrics { display: none; }
/* Hero text becomes a flow element on mobile. The desktop
absolute positioning breaks on iOS when the address bar
collapses/expands and the parent .lnh-hero's 100dvh
recalculates — the absolute children end up outside the
new parent bounds. In-flow positioning sidesteps it
entirely and the canvas behind stays absolute. */
.lnh-text {
position: static;
width: 100%;
margin-left: 0;
padding: 64px 20px 56px;
justify-content: flex-start;
min-height: 0;
}
.lnh-hero {
height: auto;
min-height: 100vh;
min-height: 100dvh;
}
/* Hide decorative glow circles on mobile — they're larger than
the viewport and get clipped into hard glow lines at the edges. */
.lnh-hero::before,
.lnh-hero::after { display: none; }
/* Eyebrow: allow wrap and tighten tracking so the mono caps line
doesn't exceed the viewport. */
.lnh-eyebrow {
white-space: normal;
letter-spacing: 0.22em;
font-size: 10px;
}
/* Whole H1 scales as one unit. The longest line
('Together. Thriving.') is the constraint at ~7.6vw, so the
entire headline uses that clamp — every line (white rows,
strike, reveal) inherits the same size and scales together.
No independently-sized lines, no mismatch. */
.lnh-h1 {
font-size: clamp(28px, 7.4vw, 60px);
width: 100%;
max-width: 100%;
}
/* Show the per-phrase breaks so each lands on its own line. */
.lnh-h1 .m-break { display: inline; }
.lnh-h1 .row-white,
.lnh-h1 .row-faded,
.lnh-h1 .row-accent { white-space: normal; }
/* Together. Thriving.: faster animation on mobile. (Desktop is
already filled / glowless after the neon-pullback.) */
.lnh-h1-reveal .reveal-pink.flicker-on,
.lnh-h1-reveal .reveal-thriving.flicker-on {
animation-duration: 1.2s;
}
.lnh-caption { display: none; }
}
/* ═══════════════════════════════════════════
HOME PAGE — EDITORIAL SECTIONS (below the hero)
Continues the Living Network visual language
on the scrolling content below the 100vh hero.
Class prefix .lnh-sec-* / .lnh-* for sub-elements
═══════════════════════════════════════════ */
/* Generic section frame */
.lnh-sec {
position: relative;
z-index: 2;
padding: 96px 56px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.lnh-sec:first-of-type {
border-top: none;
margin-top: -1px;
}
.lnh-sec-inner {
max-width: 1320px;
margin: 0 auto;
}
.lnh-sec-head {
margin-bottom: 80px;
max-width: 920px;
}
.lnh-label {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
color: #6eedd1;
margin: 0 0 22px;
text-transform: none;
}
.lnh-label::before {
content: '';
width: 28px;
height: 1px;
background: #6eedd1;
}
.lnh-label.pink { color: #e891e5; }
.lnh-label.pink::before { background: #e891e5; }
.lnh-h2 {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(36px, 4.4vw, 64px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0 0 28px;
color: #fff;
}
.lnh-h2 em {
color: #e891e5;
font-style: italic;
font-weight: 500;
}
.lnh-h2 .faded { color: rgba(255,255,255,0.62); font-weight: 500; }
.lnh-lead {
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.55;
font-weight: 300;
color: rgba(255,255,255,0.82);
margin: 0;
max-width: 720px;
}
.lnh-lead strong { color: #fff; font-weight: 500; }
/* Key data points pulled forward in aqua so the eye has landing
places in the long lead paragraph. */
.lnh-lead .lead-num { color: #6eedd1; font-weight: 500; }
.lnh-lead .lead-key { color: #fff; font-weight: 400; }
.lnh-prose p {
font-size: 16px;
line-height: 1.6;
font-weight: 300;
color: rgba(255,255,255,0.82);
margin: 0 0 1.1em;
}
.lnh-prose p:last-child { margin-bottom: 0; }
.lnh-prose strong { color: #fff; font-weight: 500; }
.lnh-prose em { color: #e891e5; font-style: italic; font-weight: 400; }
/* PROBLEM SECTION */
.lnh-problem-grid {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 96px;
align-items: start;
}
.lnh-closing-line {
margin-top: 36px;
padding-top: 32px;
border-top: 1px solid rgba(110,237,209,0.25);
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(22px, 2vw, 28px);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.015em;
color: #fff;
font-style: italic;
}
.lnh-problem-statements {
display: flex;
flex-direction: column;
gap: 0;
}
.lnh-statement {
display: grid;
grid-template-columns: 56px 1fr;
gap: 28px;
padding: 28px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
align-items: start;
}
.lnh-statement:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.lnh-statement-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
color: #e891e5;
padding-top: 4px;
}
.lnh-statement-body {
font-size: 15px;
line-height: 1.6;
font-weight: 300;
color: rgba(255,255,255,0.75);
}
.lnh-statement-body strong { color: #fff; font-weight: 500; }
.lnh-statement-body p { margin: 0; }
.lnh-stmt-middle {
max-height: 0;
overflow: hidden;
opacity: 0;
margin: 0;
transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.3s ease,
margin 0.35s ease;
}
.lnh-stmt-middle.expanded {
max-height: 800px;
opacity: 1;
margin: 12px 0;
}
.lnh-stmt-bottom {
max-height: 0;
overflow: hidden;
opacity: 0;
margin: 0;
transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.3s ease,
margin 0.35s ease;
}
.lnh-stmt-bottom.expanded {
max-height: 400px;
opacity: 1;
margin: 12px 0 0;
}
.lnh-stmt-toggle {
background: none;
border: none;
padding: 0;
margin: 14px 0 0 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(110, 237, 209, 0.75);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s ease;
}
.lnh-stmt-toggle:hover {
color: #6eedd1;
}
.lnh-stmt-toggle-arrow {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
font-size: 9px;
}
.lnh-stmt-toggle[aria-expanded="true"] .lnh-stmt-toggle-arrow {
transform: rotate(180deg);
}
/* WHAT WE BUILD — Bento */
.lnh-bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(220px, auto);
gap: 20px;
}
.lnh-bento-card {
background: rgba(2,8,23,0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: border-color 0.2s ease, transform 0.2s ease;
display: flex;
flex-direction: column;
}
.lnh-bento-card:hover {
border-color: rgba(110,237,209,0.3);
transform: translateY(-2px);
}
.lnh-bento-card.accent {
background: linear-gradient(140deg, rgba(110,237,209,0.10), rgba(2,8,23,0.55) 70%);
border-color: rgba(110,237,209,0.22);
}
.lnh-bento-card.large { grid-column: span 4; grid-row: span 2; }
.lnh-bento-card.medium { grid-column: span 2; }
.lnh-bento-card.small { grid-column: span 2; }
.lnh-bento-card.wide { grid-column: span 6; }
.lnh-bento-tag {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
color: #6eedd1;
margin-bottom: 14px;
}
.lnh-bento-card.accent .lnh-bento-tag { color: #6eedd1; }
.lnh-bento-card h3 {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(20px, 1.6vw, 26px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 14px;
color: #fff;
}
.lnh-bento-card p {
font-size: 14px;
line-height: 1.55;
font-weight: 300;
color: rgba(255,255,255,0.7);
margin: 0;
}
.lnh-bento-icon {
width: 32px;
height: 32px;
margin-bottom: 22px;
color: #6eedd1;
}
.lnh-bento-icon svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor;
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* Inline em treatment for layer refrains (Light global. Heavy local. etc) */
.lnh-bento-card p em {
color: #6eedd1;
font-style: italic;
font-weight: 400;
display: block;
margin-top: 10px;
}
.lnh-bento-card.wide p em { color: #e891e5; }
/* LAYER 04 icon promoted: larger + pink to match the wide card's refrain colour */
.lnh-bento-card.wide .lnh-bento-icon { width: 36px; height: 36px; color: #e891e5; }
/* Hinge — closing line of the section head, left-aligned with the rest */
.lnh-hinge {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(22px, 2vw, 30px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.015em;
color: rgba(255,255,255,0.92);
text-align: left;
margin: 32px 0 0;
max-width: 720px;
}
.lnh-hinge em {
color: #6eedd1;
font-style: italic;
font-weight: 500;
}
/* Two Structural Commitments — parked on /about pending review (was on homepage) */
.lnh-commit-band {
margin-top: 88px;
padding-top: 56px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.lnh-commit-head {
margin-bottom: 36px;
max-width: 720px;
}
.lnh-commit-intro {
font-size: 16px;
line-height: 1.55;
font-weight: 300;
color: rgba(255,255,255,0.82);
margin: 14px 0 0;
}
.lnh-commit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.lnh-commit-cell {
background: linear-gradient(140deg, rgba(237,153,237,0.08), rgba(2,8,23,0.55) 70%);
border: 1px solid rgba(237,153,237,0.20);
padding: 28px 30px;
display: flex; flex-direction: column;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.lnh-commit-cell:hover {
border-color: rgba(237,153,237,0.4);
transform: translateY(-2px);
}
.lnh-commit-tag {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
color: #e891e5;
margin-bottom: 12px;
}
.lnh-commit-h {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(19px, 1.5vw, 23px);
font-weight: 600;
line-height: 1.18;
letter-spacing: -0.012em;
margin: 0 0 12px;
color: #fff;
}
.lnh-commit-body {
font-size: 14px;
line-height: 1.55;
font-weight: 300;
color: rgba(255,255,255,0.82);
margin: 0 0 14px;
}
.lnh-commit-refrain {
font-family: 'Bricolage Grotesque', var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 14.5px;
color: #e891e5;
margin: 0;
}
/* Two Beneficiaries — parked dual-summary cells (currently used on /about pending review) */
.lnh-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 36px;
}
.lnh-dual-cell {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 32px 32px;
display: flex; flex-direction: column;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.lnh-dual-cell.aqua {
background: linear-gradient(140deg, rgba(110,237,209,0.10), rgba(2,8,23,0.55) 70%);
border: 1px solid rgba(110,237,209,0.22);
}
.lnh-dual-cell.pink {
background: linear-gradient(140deg, rgba(237,153,237,0.10), rgba(2,8,23,0.55) 70%);
border: 1px solid rgba(237,153,237,0.22);
}
.lnh-dual-cell.aqua:hover { border-color: rgba(110,237,209,0.45); transform: translateY(-2px); }
.lnh-dual-cell.pink:hover { border-color: rgba(237,153,237,0.45); transform: translateY(-2px); }
.lnh-dual-tag {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
margin-bottom: 18px;
}
.lnh-dual-cell.aqua .lnh-dual-tag { color: #6eedd1; }
.lnh-dual-cell.pink .lnh-dual-tag { color: #e891e5; }
.lnh-dual-h {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(20px, 1.7vw, 26px);
font-weight: 600;
line-height: 1.18;
letter-spacing: -0.014em;
margin: 0 0 22px;
color: #fff;
}
.lnh-dual-list {
list-style: none;
padding: 0; margin: 0 0 22px;
display: flex; flex-direction: column;
gap: 14px;
}
.lnh-dual-list li {
font-size: 14.5px;
line-height: 1.55;
font-weight: 300;
color: rgba(255,255,255,0.82);
}
.lnh-dual-list li strong { font-weight: 500; color: #fff; }
.lnh-dual-refrain {
margin-top: auto;
padding-top: 22px;
border-top: 1px solid;
font-family: 'Bricolage Grotesque', var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 15px;
}
.lnh-dual-cell.aqua .lnh-dual-refrain { color: #6eedd1; border-top-color: rgba(110,237,209,0.25); }
.lnh-dual-cell.pink .lnh-dual-refrain { color: #e891e5; border-top-color: rgba(237,153,237,0.25); }
/* HAPPI SECTION — Two-column door (editorial left, bordered card right) */
.lnh-happi-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 72px;
align-items: start;
}
.lnh-happi-left {
display: flex;
flex-direction: column;
}
/* CTA — base text-style (used here and in Acknowledgement teaser) */
.lnh-cta {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 10px;
margin-top: 28px;
font-family: 'Outfit', var(--font-body);
font-size: 15px;
font-weight: 500;
color: #e891e5;
text-decoration: none;
padding: 12px 0;
border-bottom: 1px solid rgba(237,153,237,0.4);
cursor: pointer;
transition: color 0.2s, border-color 0.2s, gap 0.2s;
}
.lnh-cta:hover { color: #fff; border-color: #fff; gap: 14px; }
.lnh-cta .arrow { font-size: 14px; }
/* HAPPI card — bordered glass panel on the right */
.lnh-happi-card {
align-self: end;
background: rgba(2,8,23,0.65);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(110,237,209,0.22);
padding: 36px 40px;
position: relative;
overflow: hidden;
}
.lnh-happi-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 0%, rgba(110,237,209,0.15), transparent 60%);
pointer-events: none;
}
.lnh-happi-card-label {
position: relative;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
color: #6eedd1;
margin-bottom: 18px;
display: block;
}
.lnh-happi-card-name {
position: relative;
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(48px, 5vw, 72px);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.04em;
color: #fff;
margin-bottom: 8px;
}
.lnh-happi-card-full {
position: relative;
font-family: 'Outfit', var(--font-body);
font-size: 12.5px;
line-height: 1.5;
font-weight: 300;
color: rgba(255,255,255,0.75);
margin-bottom: 28px;
letter-spacing: 0.02em;
}
/* Stats grid inside the HAPPI card — 2x4 with top/bottom hairlines */
.lnh-happi-stats {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 28px;
padding: 24px 0;
margin: 0;
border-top: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.lnh-happi-stat {
display: flex;
flex-direction: column;
gap: 8px;
}
.lnh-happi-stat .num {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(26px, 2.6vw, 32px);
font-weight: 600;
line-height: 0.95;
letter-spacing: -0.025em;
color: #fff;
margin: 0;
display: flex;
align-items: baseline;
gap: 0.2em;
}
.lnh-happi-stat .num.label {
font-size: clamp(15px, 1.4vw, 19px);
line-height: 1.15;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.lnh-happi-stat .num .big { font-size: 1em; font-weight: 600; }
.lnh-happi-stat .num .unit {
font-size: 0.55em;
font-weight: 600;
color: rgba(255,255,255,0.85);
}
.lnh-happi-stat .lbl {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.68);
margin: 0;
line-height: 1.4;
}
/* Accent stat numbers — applied to the growth-runway pair */
.lnh-happi-stat.pink .num { color: #e891e5; }
.lnh-happi-stat.aqua .num { color: #6eedd1; }
/* DUAL ENTITY — Path C: parallel + necessity + inversion */
.lnh-entities {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.lnh-entity {
background: rgba(2,8,23,0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
padding: 44px;
position: relative;
}
.lnh-entity-tag {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
color: #6eedd1;
margin-bottom: 16px;
display: block;
}
.lnh-entity:nth-child(2) .lnh-entity-tag { color: #e891e5; }
.lnh-entity h3 {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(28px, 2.8vw, 38px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.025em;
color: #fff;
margin: 0 0 20px;
}
/* Subline inside each entity card — italic display, tinted to entity colour */
.lnh-entity-subline {
font-family: 'Bricolage Grotesque', var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.3;
letter-spacing: -0.005em;
margin: -8px 0 24px;
}
.lnh-entity:first-child .lnh-entity-subline { color: rgba(110,237,209,0.75); }
.lnh-entity:nth-child(2) .lnh-entity-subline { color: rgba(237,153,237,0.75); }
.lnh-entity ul {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
.lnh-entity li {
padding: 14px 0 14px 22px;
position: relative;
font-size: 13.5px;
line-height: 1.5;
color: rgba(255,255,255,0.82);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lnh-entity li::before {
content: '';
position: absolute;
left: 0;
top: 22px;
width: 8px;
height: 1px;
background: #6eedd1;
}
.lnh-entity:nth-child(2) li::before { background: #e891e5; }
/* Meta-bar tucked into the section head — frames the "three things at once" argument */
.lnh-diff-metabar {
margin: 28px 0 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.26em;
color: rgba(255,255,255,0.68);
text-transform: uppercase;
line-height: 1.5;
}
.lnh-diff-metabar .dash,
.lnh-diff-metabar .sep { margin: 0 0.5em; color: rgba(255,255,255,0.45); }
/* Inversion line below the cards — annotates the temporal flip */
.lnh-diff-inversion {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 64px auto 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.26em;
color: rgba(255,255,255,0.68);
text-transform: uppercase;
flex-wrap: wrap;
}
.lnh-diff-inversion::before,
.lnh-diff-inversion::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
max-width: 160px;
min-width: 20px;
}
.lnh-diff-inversion .phase-block { white-space: nowrap; }
.lnh-diff-inversion .phase-block strong { color: #fff; font-weight: 500; }
.lnh-diff-inversion .sep { color: rgba(255,255,255,0.45); margin: 0 0.4em; }
.lnh-diff-inversion .arrow {
color: rgba(255,255,255,0.62);
font-size: 14px;
letter-spacing: normal;
}
/* Closing drumbeat — pays off the H2's three verbs (thrive, survive, dissolve) */
.lnh-diff-close {
margin-top: 40px;
text-align: center;
}
.lnh-diff-close p {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.3;
font-weight: 500;
letter-spacing: -0.018em;
color: rgba(255,255,255,0.92);
margin: 0;
}
/* aqua em on the closer — calls back to the hero refrain "Together. Thriving." */
.lnh-diff-close em { color: #6eedd1; font-style: italic; font-weight: 500; }
/* CREDIBILITY */
.lnh-cred {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 20px;
}
.lnh-cred-item {
background: rgba(2,8,23,0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
padding: 32px 28px;
display: flex;
flex-direction: column;
}
.lnh-cred-item.featured {
background: linear-gradient(140deg, rgba(237,153,237,0.10), rgba(2,8,23,0.5) 70%);
border-color: rgba(237,153,237,0.22);
}
.lnh-cred-year {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
color: #6eedd1;
margin-bottom: 18px;
}
.lnh-cred-item.featured .lnh-cred-year { color: #e891e5; }
.lnh-cred-num {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(40px, 4vw, 56px);
font-weight: 600;
line-height: 0.95;
letter-spacing: -0.035em;
color: #fff;
margin-bottom: 14px;
}
.lnh-cred-title {
font-family: 'Outfit', var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #fff;
margin-bottom: 12px;
}
.lnh-cred-desc {
font-size: 13px;
line-height: 1.55;
font-weight: 300;
color: rgba(255,255,255,0.75);
margin: 0;
margin-top: auto;
padding-top: 14px;
}
/* AUDIENCE */
.lnh-audience {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.lnh-aud-card {
background: rgba(2,8,23,0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
padding: 40px 32px;
display: flex;
flex-direction: column;
transition: border-color 0.2s, transform 0.2s;
}
.lnh-aud-card:hover {
border-color: rgba(110,237,209,0.3);
transform: translateY(-2px);
}
.lnh-aud-for {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
color: #6eedd1;
margin-bottom: 20px;
}
.lnh-aud-card h3 {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(22px, 2vw, 28px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 18px;
}
.lnh-aud-card p {
font-size: 14px;
line-height: 1.55;
font-weight: 300;
color: rgba(255,255,255,0.82);
margin: 0 0 26px;
flex: 1;
}
.lnh-aud-btn {
align-self: flex-start;
font-family: 'Outfit', var(--font-body);
font-size: 14px;
font-weight: 500;
color: #e891e5;
text-decoration: underline;
text-decoration-color: rgba(237,153,237,0.4);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
padding: 14px 4px;
margin: -8px -4px 0;
cursor: pointer;
transition: color 0.2s, text-decoration-color 0.2s;
}
.lnh-aud-btn:hover {
color: #fff;
text-decoration-color: #fff;
}
.lnh-aud-card p.lnh-aud-refrain {
flex: 0 0 auto;
font-family: 'Outfit', var(--font-body);
font-style: italic;
font-size: 13px;
line-height: 1.4;
color: rgba(110,237,209,0.85);
margin: -10px 0 22px;
}
/* Convergence hinge — three curves to centre node. Desktop only. */
.lnh-aud-hinge {
margin-top: 0;
width: 100%;
display: flex;
justify-content: center;
pointer-events: none;
}
.lnh-aud-hinge svg {
width: 100%;
max-width: 1320px;
height: auto;
display: block;
}
@media (max-width: 900px) {
.lnh-aud-hinge { display: none; }
}
/* ACKNOWLEDGEMENT TEASER */
.lnh-ack {
padding: 144px 56px 180px;
text-align: left;
border-top: 1px solid rgba(255,255,255,0.06);
position: relative;
z-index: 2;
}
.lnh-ack-inner {
max-width: 920px;
margin: 0 auto;
}
.lnh-ack h2 {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(32px, 3.4vw, 48px);
font-weight: 500;
font-style: italic;
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 28px;
}
.lnh-ack p {
font-size: 16px;
line-height: 1.6;
font-weight: 300;
color: rgba(255,255,255,0.82);
margin: 0 0 28px;
max-width: 680px;
}
/* Responsive — sections */
@media (max-width: 1100px) {
.lnh-sec { padding: 100px 40px; }
.lnh-problem-grid, .lnh-happi-grid { grid-template-columns: 1fr; gap: 56px; }
.lnh-bento { grid-template-columns: repeat(4, 1fr); }
.lnh-bento-card.large { grid-column: span 4; grid-row: auto; }
.lnh-bento-card.medium { grid-column: span 2; }
.lnh-bento-card.small { grid-column: span 2; }
.lnh-bento-card.wide { grid-column: span 4; }
.lnh-commit-grid { grid-template-columns: 1fr; }
.lnh-dual { grid-template-columns: 1fr; }
.lnh-cred { grid-template-columns: 1fr 1fr; }
.lnh-cred-item.featured { grid-column: span 2; }
.lnh-entities { grid-template-columns: 1fr; }
.lnh-audience { grid-template-columns: 1fr; }
.lnh-ack { padding: 100px 40px 120px; }
}
@media (max-width: 720px) {
.lnh-sec { padding: 80px 24px; }
.lnh-sec-head { margin-bottom: 56px; }
.lnh-bento { grid-template-columns: 1fr; gap: 16px; }
.lnh-bento-card.large, .lnh-bento-card.medium,
.lnh-bento-card.small, .lnh-bento-card.wide { grid-column: span 1; }
.lnh-cred { grid-template-columns: 1fr; }
.lnh-cred-item.featured { grid-column: span 1; }
.lnh-entity { padding: 32px 24px; }
.lnh-happi-card { padding: 28px 22px; }
.lnh-happi-stats { grid-template-columns: 1fr 1fr; gap: 20px 18px; padding: 20px 0; }
.lnh-happi-stat .num { font-size: 24px; }
.lnh-happi-stat .num.label { font-size: 15px; }
.lnh-happi-card-name { font-size: 56px; }
.lnh-ack { padding: 80px 24px 100px; }
}
/* ═══════════════════════════════════════════
ABOUT PAGE — NEGATIVE SPACE HERO
Section styles.
Class prefix .nas-* (Negative About Space)
═══════════════════════════════════════════ */
.nas-hero {
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 700px;
background: #04154a;
overflow: hidden;
color: #fff;
}
.nas-hero::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
opacity: 0.06;
mix-blend-mode: screen;
pointer-events: none;
z-index: 2;
}
.nas-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 1;
}
.nas-status {
position: absolute;
top: 96px;
left: 0; right: 0;
padding: 0 56px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.28em;
color: rgba(255,255,255,0.68);
z-index: 3;
}
.nas-status-label { color: #6eedd1; }
.nas-foot {
position: absolute;
bottom: 48px;
left: 56px; right: 56px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
z-index: 3;
}
.nas-foot-prose {
max-width: 380px;
}
.nas-foot-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
color: #6eedd1;
margin-bottom: 10px;
display: block;
}
.nas-foot-prose p {
font-family: 'Outfit', var(--font-body);
font-size: 14px;
line-height: 1.6;
font-weight: 300;
color: rgba(255,255,255,0.78);
margin: 0;
}
.nas-foot-prose strong { color: #fff; font-weight: 500; }
.nas-stats {
display: flex;
gap: 38px;
}
.nas-stat {
text-align: center;
}
.nas-stat .n {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: 30px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: #fff;
}
.nas-stat .l {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.22em;
color: rgba(255,255,255,0.62);
margin-top: 6px;
}
.nas-actions {
display: flex;
gap: 10px;
}
.nas-btn {
font-family: 'Outfit', var(--font-body);
font-size: 14px;
padding: 14px 24px;
border: none;
cursor: pointer;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.nas-btn-primary {
background: #e891e5;
color: #0d2775;
font-weight: 600;
box-shadow: 0 6px 24px -6px rgba(237,153,237,0.55);
}
.nas-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -6px rgba(237,153,237,0.75);
}
.nas-btn-ghost {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
}
.nas-btn-ghost:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.5);
}
/* Pages with a flush-to-top hero need no page padding. */
#page-about,
#page-cooperative-map { padding: 0; }
/* Lock the cooperative-map page to viewport — it's a fixed
one-screen design element, no scroll. */
#page-cooperative-map .nas-hero {
height: 100vh;
height: 100dvh;
min-height: 100vh;
min-height: 100dvh;
}
body.coop-map-locked {
overflow: hidden;
height: 100vh;
height: 100dvh;
}
@media (max-width: 1100px) {
.nas-foot { flex-wrap: wrap; gap: 24px; }
.nas-stats { order: 3; width: 100%; justify-content: flex-start; }
}
@media (max-width: 768px) {
.nas-status { padding: 0 24px; top: 80px; flex-wrap: wrap; gap: 12px; }
.nas-status > div:not(:first-child) { display: none; }
.nas-foot { left: 24px; right: 24px; bottom: 24px; }
.nas-foot-prose { max-width: none; }
.nas-stats { gap: 24px; }
.nas-actions { flex-wrap: wrap; }
}
/* ═══════════════════════════════════════════
HOME PAGE — TOPOLOGY SECTION
Section styles.
Sits between WHAT WE BUILD and HAPPI as a
full-bleed editorial break — geographic terrain
of the cooperative economy.
Class prefix .tpg-* (Topology)
═══════════════════════════════════════════ */
.tpg-sec {
position: relative;
width: 100%;
min-height: 760px;
height: 78vh;
max-height: 920px;
background: #01081f;
overflow: hidden;
color: #fff;
z-index: 2;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tpg-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 1;
}
.tpg-status {
position: absolute;
top: 40px; left: 56px; right: 56px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 3;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.28em;
color: rgba(255,255,255,0.68);
}
.tpg-status-live {
display: flex; align-items: center; gap: 14px;
}
.tpg-status-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #6eedd1;
box-shadow: 0 0 10px #6eedd1, 0 0 20px rgba(110,237,209,0.5);
animation: tpg-blink 1.8s infinite;
}
@keyframes tpg-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.tpg-status-label { color: #fff; }
.tpg-head {
position: absolute;
top: 100px; left: 56px;
max-width: 600px;
z-index: 3;
}
.tpg-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
color: #6eedd1;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.tpg-eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: #6eedd1;
}
.tpg-h1 {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(38px, 4.4vw, 62px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.025em;
margin: 0;
color: #fff;
text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.tpg-h1 em {
color: #e891e5;
font-style: italic;
font-weight: 500;
}
.tpg-legend {
position: absolute;
bottom: 36px; left: 56px;
z-index: 3;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.7);
}
.tpg-legend-head {
margin-bottom: 12px;
color: #fff;
}
.tpg-leg-row {
display: flex; align-items: center; gap: 10px;
margin-bottom: 5px;
}
.tpg-leg-dot {
width: 9px; height: 9px;
border-radius: 50%;
}
.tpg-leg-line {
width: 18px; height: 1px;
}
.tpg-leg-hex {
width: 11px; height: 11px;
border: 1.5px solid #ffb4aa;
background: rgba(255,180,170,0.10);
}
.tpg-foot {
position: absolute;
bottom: 36px; right: 56px;
text-align: right;
z-index: 3;
max-width: 360px;
}
.tpg-foot p {
font-family: 'Outfit', var(--font-body);
font-size: 14px;
line-height: 1.6;
font-weight: 300;
color: rgba(255,255,255,0.75);
margin: 0 0 16px;
}
.tpg-foot strong { color: #fff; font-weight: 500; }
.tpg-cta {
display: inline-block;
background: #e891e5;
color: #0d2775;
padding: 14px 24px;
font-size: 14px;
font-weight: 600;
font-family: 'Outfit', var(--font-body);
border: none;
cursor: pointer;
text-decoration: none;
box-shadow: 0 6px 24px -6px rgba(237,153,237,0.55);
transition: transform 0.15s, box-shadow 0.15s;
}
.tpg-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -6px rgba(237,153,237,0.75);
}
@media (max-width: 1100px) {
.tpg-sec { min-height: 640px; height: auto; padding-bottom: 220px; }
.tpg-head { max-width: 460px; }
.tpg-foot { position: static; padding: 220px 56px 36px; text-align: left; max-width: none; }
.tpg-legend { bottom: 156px; }
}
@media (max-width: 768px) {
/* Topology section removed on mobile — too dense for viewport
and the WebGL contour canvas is the visual breather least
suited to small screens, so it is hidden entirely below 768px. */
.tpg-sec { display: none; }
}
/* ═══════════════════════════════════════════
EXPLORE PAGE — CONSTELLATION LANDING LAYER
Section styles.
Acts as a landing overlay on top of the existing
interactive explore canvas. Fades out when user
clicks "Open the sky chart" or any star.
Class prefix .cnst-* (Constellation)
═══════════════════════════════════════════ */
.cnst-layer {
position: absolute;
inset: 0;
z-index: 30;
background: #010008;
color: #fff;
font-family: 'Outfit', var(--font-body);
overflow: hidden;
transition: opacity 0.6s ease;
}
.cnst-layer::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
opacity: 0.06;
mix-blend-mode: screen;
pointer-events: none;
z-index: 2;
}
.cnst-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
cursor: crosshair;
z-index: 1;
}
/* Atmospheric hearth pops — three soft radial glows at default-view
hub-cluster locations. Screen-blend. Static positioning. */
#page-explore.active::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 35% 35% at 25% 65%, rgba(110,237,209,0.08) 0%, transparent 65%),
radial-gradient(ellipse 30% 30% at 50% 28%, rgba(237,153,237,0.06) 0%, transparent 65%),
radial-gradient(ellipse 35% 30% at 65% 58%, rgba(110,237,209,0.06) 0%, transparent 65%);
pointer-events: none;
z-index: 3;
mix-blend-mode: screen;
}
/* Top-left heading block */
.cnst-head {
position: absolute;
top: 92px; left: 56px;
max-width: 480px;
z-index: 15;
pointer-events: none;
}
/* Subtle dark radial backdrop fades the constellation content directly
beneath the heading so the text remains readable over busy areas */
.cnst-head::before {
content: '';
position: absolute;
top: -40px; left: -56px;
width: 600px;
height: 360px;
background: radial-gradient(ellipse 65% 60% at 25% 35%,
rgba(1, 0, 8, 0.72) 0%,
rgba(1, 0, 8, 0.45) 35%,
rgba(1, 0, 8, 0.15) 65%,
rgba(1, 0, 8, 0) 100%);
pointer-events: none;
z-index: -1;
}
/* Strapline — monospace caps thesis line used in direction F.
Sits like a chyron/pull-quote between the headline and body copy. */
.cnst-strapline {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
margin: 24px 0 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(237, 153, 237, 0.22);
max-width: 380px;
}
.cnst-strap-sep {
color: rgba(110, 237, 209, 0.85);
margin: 0 0.6em;
}
.cnst-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
color: #e891e5;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.cnst-eyebrow::before {
content: '';
width: 24px; height: 1px;
background: #e891e5;
}
.cnst-h1 {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(28px, 3.2vw, 42px);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0;
color: #fff;
text-shadow:
0 2px 30px rgba(0,0,0,0.85),
0 0 60px rgba(0,0,0,0.5);
}
/* Display variant — used in direction G where "The Cooperative Economy"
becomes the actual headline. Larger, tighter, with a pink terminal period. */
.cnst-h1-display {
font-size: clamp(56px, 6.4vw, 92px);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 0.95;
}
.cnst-period {
color: #e891e5;
}
/* Quieter inline-style instruction prose for direction G */
.cnst-sub-instr-prose {
margin-top: 14px;
color: rgba(255, 255, 255, 0.62);
font-style: italic;
}
.cnst-h1 em {
color: #6eedd1;
font-style: italic;
font-weight: 500;
}
.cnst-h1 em.nebula { color: #e891e5; }
.cnst-sub {
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.82);
margin-top: 14px;
font-weight: 300;
max-width: 380px;
}
.cnst-sub em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: #e891e5;
font-size: 1.15em;
}
.cnst-thesis {
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(20px, 2vw, 28px);
line-height: 1.15;
font-weight: 500;
letter-spacing: -0.015em;
color: rgba(255, 255, 255, 0.92);
margin: 22px 0 0;
max-width: 380px;
}
.cnst-thesis em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: #e891e5;
font-size: 1.15em;
}
.cnst-thesis-quiet {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 18px;
line-height: 1.4;
font-weight: 400;
color: rgba(255, 255, 255, 0.72);
margin: 18px 0 0;
letter-spacing: 0.005em;
max-width: 380px;
}
.cnst-thesis-quiet em {
color: #e891e5;
font-style: italic;
}
/* Instructions — monospace, three lines with arrow prefixes. Reads as
interface chrome / functional copy rather than continuous text. */
.cnst-instr-list {
list-style: none;
padding: 0;
margin: 28px 0 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
line-height: 1.9;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
max-width: 380px;
}
.cnst-instr-list li {
padding-left: 20px;
position: relative;
}
.cnst-instr-list li::before {
content: '→';
position: absolute;
left: 0;
color: rgba(110, 237, 209, 0.55);
}
/* Inline instruction line — single-line monospace with separator dots,
used in direction B where the three actions collapse to one row. */
.cnst-instr-inline {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
line-height: 1.6;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
margin: 24px 0 0;
max-width: 380px;
}
.cnst-instr-sep {
color: rgba(110, 237, 209, 0.65);
margin: 0 0.5em;
}
/* Hover tooltip */
.cnst-tooltip {
position: absolute;
z-index: 4;
pointer-events: none;
background: rgba(0,0,0,0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 10px 14px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: #fff;
max-width: 280px;
border: 1px solid rgba(110,237,209,0.4);
transform: translate(20px, -50%);
}
.cnst-tooltip .cat {
font-size: 9px;
letter-spacing: 0.2em;
margin-bottom: 4px;
text-transform: uppercase;
}
.cnst-tooltip .name {
font-family: 'Outfit', var(--font-body);
font-size: 13px;
font-weight: 600;
margin-bottom: 3px;
}
.cnst-tooltip .sub {
font-size: 10.5px;
color: rgba(255,255,255,0.7);
}
/* Bottom-left category legend */
.cnst-legend {
position: absolute;
bottom: 36px; left: 56px;
display: flex;
gap: 22px;
flex-wrap: wrap;
z-index: 3;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
color: rgba(255,255,255,0.75);
pointer-events: none;
}
.cnst-leg-row {
display: inline-flex;
align-items: center;
gap: 6px;
}
.cnst-leg-row .dot {
width: 8px; height: 8px;
border-radius: 50%;
}
/* Bottom-right open button */
.cnst-cta-wrap {
position: absolute;
bottom: 36px; right: 56px;
z-index: 15;
}
.cnst-open-btn {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.4);
padding: 14px 26px;
font-size: 13px;
font-family: 'Outfit', var(--font-body);
letter-spacing: 0.05em;
cursor: pointer;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(0,0,0,0.25);
transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.15s;
}
.cnst-open-btn:hover {
background: rgba(110,237,209,0.12);
border-color: rgba(110,237,209,0.7);
color: #6eedd1;
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px rgba(110,237,209,0.5);
}
/* Landing overlay state — fades on first interaction */
/* (positioning of .cnst-head, .cnst-cta-wrap defined above
remains in place; they live inside #page-explore as overlay elements.) */
#page-explore .cnst-head,
#page-explore .cnst-cta-wrap {
opacity: 1;
transition: opacity 0.5s ease;
}
#page-explore.has-interacted .cnst-head,
#page-explore.has-interacted .cnst-cta-wrap {
opacity: 0;
pointer-events: none;
}
/* Existing explore UI is hidden during landing, fades in on first interaction */
#page-explore #node-type-legend,
#page-explore #explore-disclaimer,
#page-explore #explore-zoom-btns {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-explore.has-interacted #node-type-legend,
#page-explore.has-interacted #explore-disclaimer,
#page-explore.has-interacted #explore-zoom-btns {
opacity: 1;
visibility: visible;
}
/* Hide the old centred heading entirely — replaced by the constellation-style left-aligned heading above */
#page-explore #explore-heading { display: none; }
/* Back button — label changes based on interaction state */
#page-explore .back-label-interactive { display: none; }
#page-explore.has-interacted .back-label-landing { display: none; }
#page-explore.has-interacted .back-label-interactive { display: inline; }
#page-explore .cosmic-btn:hover {
background: rgba(20, 8, 50, 0.92);
border-color: rgba(237, 153, 237, 0.7);
box-shadow: 0 0 18px rgba(237, 153, 237, 0.25);
}
/* Back button wrapper — hidden in landing state, fades in on interaction */
#page-explore .explore-back-btn-wrap {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-explore.has-interacted .explore-back-btn-wrap {
opacity: 1;
visibility: visible;
}
/* Post-interaction tagline — fades in once hub layout starts moving. */
.cnst-post-tagline {
position: absolute;
top: 84px;
left: 50%;
transform: translate(-50%, -8px);
z-index: 14;
pointer-events: none;
font-family: 'Bricolage Grotesque', var(--font-display);
font-size: clamp(28px, 3.0vw, 44px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.94);
white-space: nowrap;
text-align: center;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85), 0 0 60px rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.9s ease 0.6s, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s, visibility 0.9s ease 0.6s;
}
.cnst-post-tagline em {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: #e891e5;
}
#page-explore.has-interacted .cnst-post-tagline {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
/* Hide post-tagline on mobile only (panel overlaps it). */
@media (max-width: 768px) {
#page-explore.panel-open .cnst-post-tagline {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
}
@media (max-width: 768px) {
.cnst-post-tagline {
top: 70px;
font-size: clamp(22px, 6vw, 32px);
white-space: normal;
max-width: calc(100% - 48px);
}
}
@media (max-width: 1100px) {
.cnst-head { max-width: 360px; }
}
@media (max-width: 768px) {
.cnst-head { left: 24px; right: 24px; top: 78px; max-width: none; }
.cnst-h1 { font-size: clamp(32px, 9vw, 48px); }
.cnst-cta-wrap { left: 24px; right: 24px; bottom: 24px; }
.cnst-open-btn { width: 100%; }
}
/* ───────────────────────────────────────────
PHONE LANDSCAPE — compressed landing layout
Heading shrinks to a corner-tucked chyron so the constellation
claims most of the canvas. Triggered on short viewports in landscape.
─────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
.cnst-head {
top: 78px;
left: 20px;
max-width: 230px;
}
.cnst-eyebrow {
font-size: 8.5px;
letter-spacing: 0.22em;
margin-bottom: 7px;
gap: 7px;
}
.cnst-eyebrow::before { width: 14px; }
.cnst-h1 {
font-size: 14px !important;
line-height: 1.25;
letter-spacing: -0.005em;
}
.cnst-sub {
font-size: 10.5px;
line-height: 1.45;
margin-top: 9px;
max-width: 220px;
}
/* Replace the 3-line sub copy with a single instruction */
.cnst-sub br, .cnst-sub { font-size: 0 !important; }
.cnst-sub::after {
content: 'Tap a star to explore.';
font-size: 10.5px;
font-style: normal;
color: rgba(255,255,255,0.82);
display: block;
}
.cnst-head::before {
top: -24px; left: -28px;
width: 300px; height: 180px;
}
}
/* ═══════════════════════════════════════════
BUILD PAGE — Schematic Atlas
Section styles, scoped under #page-build.
═══════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
Maslow — "The Build" page exploration
Three directions sharing tokens + a dark navy stage.
─────────────────────────────────────────────────────────── */
#page-build {
--ink: #ffffff;
--ink-dim: rgba(255,255,255,0.72);
--ink-fade: rgba(255,255,255,0.5);
--ink-mute: rgba(255,255,255,0.35);
--line: rgba(255,255,255,0.08);
--line-mid: rgba(255,255,255,0.18);
--aqua: #6eedd1;
--aqua-dim: rgba(110,237,209,0.45);
--aqua-soft: rgba(110,237,209,0.18);
--aqua-tint: rgba(110,237,209,0.08);
--pink: #e891e5;
--pink-dim: rgba(237,153,237,0.5);
--pink-soft: rgba(237,153,237,0.18);
--bg-1: #020a2e;
--bg-2: #01081f;
--font-display: 'Bricolage Grotesque', Georgia, serif;
--font-body: 'Outfit', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* canvas / outer */
/* ── shared stage shell ─────────────────────────────────── */
#page-build .build {
position: relative;
width: 100%;
min-height: 100%;
background:
radial-gradient(1200px 600px at 80% -10%, rgba(110,237,209,0.05), transparent 60%),
radial-gradient(900px 700px at -10% 90%, rgba(237,153,237,0.04), transparent 60%),
linear-gradient(180deg, var(--bg-1), var(--bg-2));
color: var(--ink);
overflow: hidden;
font-family: var(--font-body);
}
#page-build .build::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 3px 3px;
pointer-events: none;
mix-blend-mode: screen;
opacity: .6;
}
#page-build .build-inner {
position: relative;
max-width: 1320px;
margin: 0 auto;
padding: 112px 64px 128px;
}
/* Persistent aqua hearth glow — pinned bottom-right. */
#page-build.active::after {
content: '';
position: fixed;
bottom: -15%;
right: -10%;
width: 60%;
height: 70%;
background: radial-gradient(ellipse,
rgba(110,237,209,0.12) 0%,
rgba(110,237,209,0.05) 35%,
transparent 65%);
pointer-events: none;
z-index: 1;
mix-blend-mode: screen;
}
/* Secondary pink hearth on the opposite corner — subtler, balances the field. */
#page-build.active::before {
content: '';
position: fixed;
top: -10%;
left: -8%;
width: 45%;
height: 55%;
background: radial-gradient(ellipse,
rgba(237,153,237,0.07) 0%,
transparent 60%);
pointer-events: none;
z-index: 1;
mix-blend-mode: screen;
}
/* ── shared building blocks ─────────────────────────────── */
#page-build .eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
color: var(--aqua);
margin: 0;
text-transform: uppercase;
}
#page-build .eyebrow::before {
content: '';
width: 32px;
height: 1px;
background: currentColor;
}
#page-build .h1 {
font-family: var(--font-display);
font-size: clamp(48px, 6vw, 84px);
font-weight: 600;
line-height: 1.0;
letter-spacing: -0.03em;
color: #fff;
margin: 28px 0 32px;
}
#page-build .h1 em { font-style: italic; color: var(--pink); font-weight: 500; }
#page-build .h1 em.aqua { color: var(--aqua); }
#page-build .lead {
font-size: clamp(17px, 1.3vw, 21px);
line-height: 1.55;
font-weight: 300;
color: var(--ink-dim);
margin: 0;
max-width: 720px;
}
#page-build .lead strong { color: #fff; font-weight: 500; }
/* ═════════════════════════════════════════════════════════
DIRECTION A — Schematic Atlas
Phases as engineered plates. Dashed connectors. Mono labels.
"Construction/build" rendered as technical CAD-on-a-screen.
═════════════════════════════════════════════════════════ */
#page-build .atlas-hero {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 80px;
align-items: end;
margin-bottom: 96px;
}
#page-build .atlas-hero-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.24em;
color: var(--ink-mute);
text-transform: uppercase;
display: grid;
gap: 14px;
padding-bottom: 12px;
}
#page-build .atlas-hero-meta .row {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed var(--line-mid);
padding-bottom: 14px;
}
#page-build .atlas-hero-meta .row span:last-child { color: var(--aqua); }
#page-build .atlas-arrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.28em;
color: var(--aqua);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 24px;
}
#page-build .atlas-arrow::before {
content: '↓';
font-size: 14px;
letter-spacing: 0;
}
/* the plate */
#page-build .path-inline-link {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(110, 237, 209, 0.5);
text-underline-offset: 3px;
transition: text-decoration-color 0.2s, color 0.2s;
}
#page-build .path-inline-link:hover {
color: var(--aqua);
text-decoration-color: var(--aqua);
}
#page-build .plate {
position: relative;
border: 1px solid rgba(162, 160, 228, 0.30);
padding: 32px 36px 36px;
margin-bottom: 32px;
display: grid;
grid-template-columns: minmax(0, 400px) 1px minmax(0, 1fr);
gap: 40px;
background:
linear-gradient(180deg, rgba(115, 108, 202, 0.22) 0%, rgba(78, 55, 137, 0.10) 100%),
rgba(21, 15, 55, 0.72);
box-shadow:
0 0 80px -10px rgba(135, 110, 208, 0.22),
0 24px 48px -24px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#page-build .plate.accent {
border-color: rgba(237, 153, 237, 0.38);
background:
linear-gradient(180deg, rgba(237, 153, 237, 0.16) 0%, rgba(180, 100, 200, 0.06) 100%),
rgba(38, 16, 52, 0.65);
box-shadow:
0 0 80px -10px rgba(237, 153, 237, 0.22),
0 24px 48px -24px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#page-build .plate::before {
content: '';
position: absolute;
top: -1px; left: 32px;
width: 12px; height: 12px;
border-top: 1px solid var(--aqua);
border-left: 1px solid var(--aqua);
}
#page-build .plate::after {
content: '';
position: absolute;
bottom: -1px; right: 32px;
width: 12px; height: 12px;
border-bottom: 1px solid var(--aqua);
border-right: 1px solid var(--aqua);
}
#page-build .plate.accent::before, #page-build .plate.accent::after { border-color: var(--pink); }
#page-build .plate-rule {
background-image: linear-gradient(180deg, var(--line-mid) 50%, transparent 50%);
background-size: 1px 8px;
background-repeat: repeat-y;
}
#page-build .plate-head {
display: flex;
flex-direction: column;
gap: 18px;
}
#page-build .plate-number {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--line-mid);
margin-bottom: 4px;
}
#page-build .plate-number .num {
font-family: var(--font-display);
font-size: 48px;
line-height: 0.85;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--aqua);
}
#page-build .plate.accent .plate-number .num { color: var(--pink); }
#page-build .plate-number .meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
text-align: right;
flex: 1;
min-width: 0;
}
#page-build .plate-number .meta .kind {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
color: var(--aqua);
text-transform: uppercase;
}
#page-build .plate.accent .plate-number .meta .kind { color: var(--pink); }
#page-build .plate-number .meta .span {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
color: var(--ink-mute);
text-transform: uppercase;
}
#page-build .plate-tag {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.28em;
color: var(--aqua);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 10px;
}
#page-build .plate.accent .plate-tag { color: var(--pink); }
#page-build .plate-tag .dot {
width: 8px; height: 8px;
background: var(--aqua);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(110,237,209,0.18);
}
#page-build .plate.accent .plate-tag .dot { background: var(--pink); box-shadow: 0 0 0 3px rgba(237,153,237,0.18); }
#page-build .plate-coord {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.24em;
color: var(--ink-mute);
text-transform: uppercase;
}
#page-build .plate-diagram {
margin-top: 8px;
padding: 22px 18px 16px;
border: 1px dashed var(--line-mid);
background: rgba(0,0,0,0.18);
position: relative;
min-height: 156px;
}
#page-build .plate-diagram .caption {
position: absolute;
bottom: 8px; left: 14px; right: 14px;
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.24em;
color: var(--ink-mute);
text-transform: uppercase;
}
#page-build .plate-body { display: flex; flex-direction: column; gap: 22px; }
#page-build .plate-title {
font-family: var(--font-display);
font-size: clamp(32px, 3vw, 44px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: #fff;
margin: 0;
}
#page-build .plate-title em { font-style: italic; color: var(--pink); font-weight: 500; }
#page-build .plate.accent .plate-title em { color: var(--aqua); }
#page-build .plate-prose {
display: flex;
flex-direction: column;
gap: 14px;
font-size: 16px;
line-height: 1.6;
font-weight: 300;
color: var(--ink-dim);
}
#page-build .plate-prose p { margin: 0; }
#page-build .plate-prose strong { color: #fff; font-weight: 500; }
#page-build .plate-milestone {
margin-top: auto;
padding-top: 22px;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 10px 0;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--aqua);
text-transform: uppercase;
}
#page-build .plate.accent .plate-milestone { color: var(--pink); }
#page-build .plate-milestone span:not(:last-child)::after {
content: '·';
margin: 0 12px;
opacity: 0.5;
}
/* canopy block (atlas) */
#page-build .atlas-canopy {
margin-top: 64px;
padding: 48px 40px;
border-top: 1px solid var(--pink-dim);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
#page-build .atlas-canopy h3 {
font-family: var(--font-display);
font-size: clamp(28px, 2.4vw, 38px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 18px 0 0;
color: #fff;
}
#page-build .atlas-canopy h3 em { font-style: italic; color: var(--pink); font-weight: 500; }
#page-build .atlas-canopy p {
font-size: 16px;
line-height: 1.6;
font-weight: 300;
color: var(--ink-dim);
margin: 0 0 16px;
}
#page-build .atlas-canopy p strong { color: #fff; font-weight: 500; }
/* ═════════════════════════════════════════════════════════
DIRECTION B — Critical Path
A Gantt-flavoured timeline showing phase overlap, then
numbered editorial phase blocks below.
═════════════════════════════════════════════════════════ */
#page-build .path-hero {
max-width: 940px;
margin-bottom: 80px;
}
#page-build .path-gantt {
position: relative;
border: 1px solid var(--line-mid);
padding: 28px 40px 40px;
margin-bottom: 96px;
background: rgba(0,0,0,0.18);
}
#page-build .path-gantt-head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 18px;
margin-bottom: 28px;
border-bottom: 1px dashed var(--line-mid);
}
#page-build .path-gantt-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--aqua);
}
#page-build .path-gantt-sub {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
}
#page-build .path-scale {
position: relative;
height: 28px;
margin-bottom: 14px;
}
#page-build .path-scale-tick {
position: absolute;
top: 0;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--ink-mute);
text-transform: uppercase;
}
#page-build .path-scale-tick::after {
content: '';
display: block;
width: 1px;
height: 10px;
background: var(--line-mid);
margin: 6px auto 0;
}
#page-build .path-scale-tick.anchor { color: var(--pink); }
#page-build .path-scale-tick.anchor::after { background: var(--pink-dim); height: 14px; }
#page-build .path-bars {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 8px;
}
#page-build .path-row {
position: relative;
height: 44px;
}
#page-build .path-row-rail {
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background-image: linear-gradient(90deg, var(--line) 50%, transparent 50%);
background-size: 8px 1px;
transform: translateY(-50%);
}
#page-build .path-bar {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 0 16px;
background: linear-gradient(90deg, var(--aqua-soft), rgba(110,237,209,0.04));
border-left: 2px solid var(--aqua);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--aqua);
text-transform: uppercase;
white-space: nowrap;
overflow: visible;
}
#page-build .path-bar.pink {
background: linear-gradient(90deg, var(--pink-soft), rgba(237,153,237,0.04));
border-left-color: var(--pink);
color: var(--pink);
}
#page-build .path-bar .num {
font-weight: 600;
margin-right: 10px;
opacity: 0.7;
}
/* full-bleed grid of vertical guides behind bars */
#page-build .path-grid {
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: var(--line);
}
#page-build .path-bars-wrap { position: relative; }
#page-build .path-legend {
display: flex;
justify-content: space-between;
gap: 40px;
margin-top: 36px;
padding-top: 24px;
border-top: 1px dashed var(--line-mid);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
color: var(--ink-mute);
text-transform: uppercase;
}
#page-build .path-legend .accent { color: var(--aqua); }
#page-build .path-legend .accent.pink { color: var(--pink); }
/* Mobile-only stacked list version of the gantt (hidden on desktop). */
#page-build .path-gantt-mobile { display: none; list-style: none; margin: 24px 0 0; padding: 0; }
#page-build .path-gantt-mobile li {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: baseline;
gap: 12px;
padding: 16px 2px;
border-top: 1px solid var(--line-mid);
}
#page-build .path-gantt-mobile li:last-child { border-bottom: 1px solid var(--line-mid); }
#page-build .path-gantt-mobile .pgm-num {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.14em;
color: var(--aqua);
}
#page-build .path-gantt-mobile li.pink .pgm-num { color: var(--pink); }
#page-build .path-gantt-mobile .pgm-name {
font-family: var(--font-display);
font-weight: 500; font-size: 16px;
color: #fff;
letter-spacing: -0.01em;
}
#page-build .path-gantt-mobile .pgm-range {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.1em;
color: var(--ink-mute);
white-space: nowrap;
}
/* numbered phase blocks below the gantt */
#page-build .path-phases {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
#page-build .path-phase {
display: grid;
grid-template-columns: 140px minmax(0, 1fr) minmax(0, 320px);
gap: 48px;
padding: 48px 0;
border-top: 1px solid var(--line-mid);
}
#page-build .path-phase:last-child { border-bottom: 1px solid var(--line-mid); }
#page-build .path-phase-num {
font-family: var(--font-display);
font-size: 96px;
line-height: 0.9;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--aqua);
position: relative;
}
#page-build .path-phase.accent .path-phase-num { color: var(--pink); }
#page-build .path-phase-num small {
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: 16px;
line-height: 1.4;
}
#page-build .path-phase-body h3 {
font-family: var(--font-display);
font-size: clamp(28px, 2.4vw, 38px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 18px;
}
#page-build .path-phase-body h3 em { font-style: italic; color: var(--pink); font-weight: 500; }
#page-build .path-phase.accent .path-phase-body h3 em { color: var(--aqua); }
#page-build .path-phase-body p {
font-size: 16px;
line-height: 1.6;
font-weight: 300;
color: var(--ink-dim);
margin: 0 0 14px;
}
#page-build .path-phase-body p strong { color: #fff; font-weight: 500; }
#page-build .path-phase-side {
border-left: 1px solid var(--line);
padding-left: 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
#page-build .path-phase-side .label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.28em;
color: var(--ink-mute);
text-transform: uppercase;
}
#page-build .path-phase-side ul {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
#page-build .path-phase-side ul li {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--aqua);
text-transform: uppercase;
display: flex;
align-items: baseline;
gap: 10px;
}
#page-build .path-phase-side ul li::before {
content: '▸';
color: var(--aqua-dim);
}
#page-build .path-phase.accent .path-phase-side ul li { color: var(--pink); }
#page-build .path-phase.accent .path-phase-side ul li::before { color: var(--pink-dim); }
#page-build .path-phase-side .span {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
color: #fff;
text-transform: uppercase;
}
#page-build .path-canopy {
margin-top: 96px;
padding: 56px 0 0;
border-top: 1px solid var(--pink-dim);
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 80px;
}
#page-build .path-canopy h3 {
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 18px 0 0;
color: #fff;
}
#page-build .path-canopy h3 em { font-style: italic; color: var(--pink); font-weight: 500; }
#page-build .path-canopy p {
font-size: 16px;
line-height: 1.6;
font-weight: 300;
color: var(--ink-dim);
margin: 0 0 16px;
}
#page-build .path-canopy p strong { color: #fff; font-weight: 500; }
#page-build .path-canopy-cta {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 22px;
padding: 16px 24px;
background: var(--pink);
color: #0a0a1e;
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
border: 0;
cursor: pointer;
}
/* ═════════════════════════════════════════════════════════
DIRECTION C — The Stack
Vertical structural rail on the left, phase floors stacked
on the right. Construction-as-structure metaphor.
═════════════════════════════════════════════════════════ */
#page-build .stack-hero {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 80px;
align-items: end;
margin-bottom: 96px;
}
#page-build .stack-hero-aside {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.22em;
color: var(--ink-mute);
text-transform: uppercase;
border-left: 2px solid var(--aqua);
padding: 4px 0 4px 20px;
display: flex;
flex-direction: column;
gap: 12px;
line-height: 1.4;
}
#page-build .stack-hero-aside strong { color: var(--aqua); font-weight: 500; }
/* the body: rail (sticky-ish visual) + floors */
#page-build .stack-body {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 56px;
position: relative;
}
#page-build .stack-rail {
position: relative;
padding-top: 36px;
}
#page-build .stack-rail-line {
position: absolute;
left: 50%;
top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--aqua) 0%, var(--aqua-dim) 60%, var(--pink-dim) 100%);
transform: translateX(-50%);
}
#page-build .stack-floors {
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
/* a floor = a rail marker on left + a panel on right, on the same row */
#page-build .stack-floor {
position: relative;
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
align-items: stretch;
}
#page-build .stack-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; }
#page-build .stack-floor {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
align-items: stretch;
padding: 36px 0;
border-top: 1px dashed var(--line-mid);
}
#page-build .stack-floor:first-child { border-top: 0; padding-top: 12px; }
#page-build .stack-marker {
position: relative;
padding-right: 56px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
text-align: right;
}
#page-build .stack-marker::after {
/* the rail line continues vertically through the marker column */
content: '';
position: absolute;
top: -36px; bottom: -36px;
right: 0;
width: 2px;
background: var(--line-mid);
}
#page-build .stack-floor:first-child .stack-marker::after { top: 0; }
#page-build .stack-floor:last-child .stack-marker::after { bottom: 50%; }
#page-build .stack-marker .node {
position: absolute;
right: -7px;
top: 8px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--bg-1);
border: 2px solid var(--aqua);
z-index: 1;
}
#page-build .stack-floor.accent .stack-marker .node { border-color: var(--pink); }
#page-build .stack-floor.filled .stack-marker .node { background: var(--aqua); }
#page-build .stack-floor.accent.filled .stack-marker .node { background: var(--pink); border-color: var(--pink); }
#page-build .stack-marker .phase {
font-family: var(--font-display);
font-size: 64px;
line-height: 0.9;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--aqua);
}
#page-build .stack-floor.accent .stack-marker .phase { color: var(--pink); }
#page-build .stack-marker .level {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.24em;
color: var(--ink-mute);
text-transform: uppercase;
line-height: 1.3;
max-width: 140px;
}
#page-build .stack-marker .span {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
color: var(--ink-fade);
text-transform: uppercase;
margin-top: 6px;
}
#page-build .stack-panel {
padding-left: 56px;
display: flex;
flex-direction: column;
gap: 18px;
max-width: 760px;
}
#page-build .stack-panel-tag {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.28em;
color: var(--aqua);
text-transform: uppercase;
}
#page-build .stack-floor.accent .stack-panel-tag { color: var(--pink); }
#page-build .stack-panel h3 {
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: #fff;
margin: 0;
}
#page-build .stack-panel h3 em { font-style: italic; color: var(--pink); font-weight: 500; }
#page-build .stack-floor.accent .stack-panel h3 em { color: var(--aqua); }
#page-build .stack-panel p {
font-size: 16px;
line-height: 1.6;
font-weight: 300;
color: var(--ink-dim);
margin: 0;
}
#page-build .stack-panel p strong { color: #fff; font-weight: 500; }
#page-build .stack-panel .deliverables {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
#page-build .stack-panel .deliverables span {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--aqua);
text-transform: uppercase;
border: 1px solid var(--aqua-soft);
padding: 8px 12px;
background: var(--aqua-tint);
}
#page-build .stack-floor.accent .stack-panel .deliverables span {
color: var(--pink);
border-color: var(--pink-soft);
background: rgba(237,153,237,0.06);
}
#page-build .stack-crown {
margin-top: 24px;
padding: 56px 64px;
background:
linear-gradient(135deg, rgba(237,153,237,0.06), rgba(110,237,209,0.04));
border: 1px solid var(--pink-soft);
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
#page-build .stack-crown h3 {
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 14px 0 18px;
color: #fff;
}
#page-build .stack-crown h3 em { font-style: italic; color: var(--pink); font-weight: 500; }
#page-build .stack-crown p {
font-size: 16px;
line-height: 1.6;
font-weight: 300;
color: var(--ink-dim);
margin: 0 0 12px;
}
#page-build .stack-crown p strong { color: #fff; font-weight: 500; }
#page-build .stack-crown-cta {
align-self: end;
display: inline-flex;
flex-direction: column;
gap: 18px;
}
#page-build .stack-crown-cta .btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px 24px;
background: transparent;
border: 1px solid var(--pink);
color: #fff;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
text-decoration: none;
}
#page-build .stack-crown-cta .btn.solid {
background: var(--pink);
color: #0a0a1e;
border-color: var(--pink);
font-weight: 600;
}
#page-build .stack-crown-cta .btn .arrow {
font-family: var(--font-body);
font-size: 22px;
font-weight: 400;
}
/* ═════════════════════════════════════════════════════════
GROWTH HORIZON — shared block, lighter visual register
than the named phases. Sits below The Build in all three
directions. Per-direction modifiers tune the chrome.
═════════════════════════════════════════════════════════ */
#page-build .growth {
margin-top: 120px;
padding-top: 72px;
border-top: 1px solid var(--pink-soft);
position: relative;
}
#page-build .growth::before {
content: '';
position: absolute;
top: -1px; left: 0;
width: 60px;
height: 1px;
background: var(--pink);
}
#page-build .growth-head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 64px;
align-items: end;
margin-bottom: 64px;
}
#page-build .growth-head .eyebrow { color: var(--pink); margin: 0; }
#page-build .growth-head .eyebrow::before { background: currentColor; }
#page-build .growth-h {
font-family: var(--font-display);
font-size: clamp(36px, 4vw, 56px);
font-weight: 600;
line-height: 1.0;
letter-spacing: -0.025em;
color: #fff;
margin: 22px 0 0;
}
#page-build .growth-h em { font-style: italic; color: var(--pink); font-weight: 500; }
#page-build .growth-lead {
font-size: 16.5px;
line-height: 1.6;
font-weight: 300;
color: var(--ink-dim);
margin: 0;
padding-bottom: 8px;
}
#page-build .growth-lead strong { color: #fff; font-weight: 500; }
/* trajectory rail across the top of the three stations */
#page-build .growth-rail {
position: relative;
height: 56px;
margin-bottom: -28px;
z-index: 1;
}
#page-build .growth-rail-line {
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background-image: linear-gradient(90deg, var(--aqua-dim) 0%, var(--pink-dim) 100%);
transform: translateY(-50%);
}
#page-build .growth-rail-line::after {
content: '';
position: absolute;
top: -3px; right: 0;
width: 7px; height: 7px;
border-top: 1px solid var(--pink);
border-right: 1px solid var(--pink);
transform: rotate(45deg);
}
#page-build .growth-rail-node {
position: absolute;
top: 50%;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--bg-1);
border: 2px solid var(--aqua);
transform: translate(-50%, -50%);
}
#page-build .growth-rail-node.mid { border-color: #ad9ede; background: var(--bg-1); }
#page-build .growth-rail-node.end { border-color: var(--pink); background: var(--pink); }
#page-build .growth-rail-tick {
position: absolute;
top: 0;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.24em;
color: var(--ink-mute);
text-transform: uppercase;
}
#page-build .growth-stations {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--line-mid);
border-radius: 0;
background: rgba(0,0,0,0.16);
position: relative;
z-index: 0;
}
#page-build .growth-station {
padding: 40px 32px 36px;
border-left: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 14px;
}
#page-build .growth-station:first-child { border-left: 0; }
#page-build .growth-station-window {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.28em;
color: var(--ink-mute);
text-transform: uppercase;
}
#page-build .growth-station-scale {
font-family: var(--font-display);
font-size: clamp(48px, 4.6vw, 68px);
line-height: 0.9;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--aqua);
margin: 0;
}
#page-build .growth-station.accent .growth-station-scale { color: #b9aee3; }
#page-build .growth-station.end .growth-station-scale { color: var(--pink); }
#page-build .growth-station-head {
font-family: var(--font-display);
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.015em;
color: #fff;
margin: 0;
}
#page-build .growth-station-target {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--aqua);
text-transform: uppercase;
}
#page-build .growth-station.accent .growth-station-target { color: #b9aee3; }
#page-build .growth-station.end .growth-station-target { color: var(--pink); }
#page-build .growth-station-body {
font-size: 14.5px;
line-height: 1.6;
font-weight: 300;
color: var(--ink-dim);
margin: 8px 0 0;
}
#page-build .growth-station-body strong { color: #fff; font-weight: 500; }
/* per-direction chrome modifiers */
#page-build .atlas-growth .growth-stations {
border-style: dashed;
}
#page-build .path-growth .growth-stations {
border-color: var(--line-mid);
}
#page-build .stack-growth {
margin-top: 80px;
}
#page-build .stack-growth .growth-stations {
background: linear-gradient(180deg, rgba(237,153,237,0.04), rgba(110,237,209,0.02));
}
/* canopy sits AFTER growth — adjust top margins so the rhythm reads */
#page-build .atlas-canopy { margin-top: 96px; }
#page-build .path-canopy { margin-top: 80px; }
#page-build .stack-crown { margin-top: 72px; }
/* ═════════════════════════════════════════════════════════
SHARED CTA PAIR — used in the canopy block of all three
directions. Pink solid primary + outlined secondary.
═════════════════════════════════════════════════════════ */
#page-build .cta-pair {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 28px;
max-width: 480px;
}
#page-build .cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 20px 26px;
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.2;
text-decoration: none;
border: 1px solid transparent;
transition: background .15s, transform .15s, border-color .15s, color .15s;
cursor: pointer;
}
#page-build .cta .arrow {
font-family: var(--font-body);
font-size: 22px;
line-height: 1;
font-weight: 400;
}
#page-build .cta-primary {
background: var(--pink);
color: #0a0a1e;
font-weight: 600;
border-color: var(--pink);
}
#page-build .cta-primary:hover { background: #fff; border-color: #fff; transform: translateY(-1px); }
#page-build .cta-secondary {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,0.4);
}
#page-build .cta-secondary:hover { border-color: var(--aqua); color: var(--aqua); }
#page-build .cta-secondary .arrow { color: var(--aqua); }
/* ── Gantt: used in all three directions now ──────────────
When the gantt appears outside Direction B's path layout,
make sure it sits with comfortable margin. */
#page-build .atlas-hero + .path-gantt,
#page-build .stack-hero + .path-gantt {
margin-top: 0;
margin-bottom: 96px;
}
/* ════════════════════════════════════════════
BUILD PAGE — MOBILE
The build page was built desktop-only: every grid stayed
multi-column at phone width, crushing the right column to
one-word-per-line. Collapse everything to a single column.
Breakpoint is 1024px (not 768): the plate's 400px head column needs
~1000px+ to sit beside its content, so tablets must collapse too.
════════════════════════════════════════════ */
@media (max-width: 1024px) {
#page-build .build-inner {
padding: 88px 24px 96px;
}
/* All two/three-column grids → single column, stacked. */
#page-build .atlas-hero,
#page-build .plate,
#page-build .atlas-canopy,
#page-build .path-phase,
#page-build .path-canopy,
#page-build .stack-hero,
#page-build .stack-body,
#page-build .stack-floor,
#page-build .stack-crown,
#page-build .growth-head {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
/* The plate has a 1px divider column in the middle — hide it
when stacked (it becomes a stray horizontal line). */
#page-build .plate-rule {
display: none;
}
#page-build .plate {
padding: 28px 22px 30px;
}
/* Headline + lead sizing for narrow screens. */
#page-build .h1 {
font-size: clamp(30px, 8.5vw, 46px);
line-height: 1.08;
}
#page-build .growth-h,
#page-build .stack-h,
#page-build .path-h {
font-size: clamp(26px, 7.5vw, 40px);
line-height: 1.1;
}
/* Plate head/number blocks: let them sit left-aligned, full width. */
#page-build .plate-head {
text-align: left;
}
#page-build .plate-number {
justify-content: flex-start;
}
/* Growth stations: stack the three (10× / 100× / Mature) vertically
and hide the decorative horizontal rail that can't stack. */
#page-build .growth-stations {
grid-template-columns: 1fr !important;
}
#page-build .growth-station {
border-left: none;
border-top: 1px solid var(--line);
padding: 28px 22px;
}
#page-build .growth-station:first-child { border-top: none; }
#page-build .growth-rail { display: none; }
/* Gantt on mobile: keep the real horizontal bar-chart. The original
overlapping top-axis labels were the problem, not the bars. Hide the
stacked-list fallback, simplify the axis to fewer ticks, give the
chart more height, and let short bars' labels overflow to the right
so every phase stays legible. */
#page-build .path-gantt-mobile { display: none; }
#page-build .path-gantt { overflow: hidden; }
/* Fewer axis ticks on mobile so they don't collide. Hide the middle
ones, keep the three anchors (start / mid / end). */
#page-build .path-scale-tick { font-size: 9px; }
#page-build .path-scale-tick:not(.anchor):not(.end):nth-child(even) { display: none; }
/* Taller rows + bars so the chart reads on a narrow screen. */
#page-build .path-row { height: 40px; }
#page-build .path-bar {
font-size: 9.5px;
letter-spacing: 0.1em;
padding: 0 8px;
}
#page-build .path-bar .num { margin-right: 6px; }
/* Legend wraps to a column on mobile. */
#page-build .path-legend {
flex-direction: column;
gap: 8px;
font-size: 9.5px;
}
}
/* ──────────────────────────────────────────────────────────
REDUCED-MOTION CATCH-ALL
The specific reduced-motion rules above fine-tune individual
hero elements (setting their final opacity so they don't get
stuck mid-animation). This global rule then neutralises EVERY
remaining animation and transition — including the inline-SVG
topology/node work (nodeFloat, linePulse, tpg-blink, rp-rotate,
etc.) and all hover/scroll transitions — so nothing the
per-element rules missed can still move. Near-zero (not 0s)
duration + forwards fill lets any animation that exists only to
reveal content still land on its final frame rather than vanish.
Placed last in the stylesheet so it wins the cascade.
────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
animation-fill-mode: forwards !important;
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
}