/* ==========================================================================
Navrist — Main Stylesheet
Design: Stitch prototype match with upgrades
========================================================================== */
/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ==========================================================================
DESIGN TOKENS (Stage 0 — design-system refactor)
Canonical source for colors, type, space, radii, shadows.
Legacy aliases live in the :root block below and must stay until all
consumers are migrated.
========================================================================== */
:root {
/* Font families */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Type scale — fluid clamp(mobile, preferred, desktop) */
--font-2xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.7rem);
--font-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem);
--font-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.9rem);
--font-base: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);
--font-lg: clamp(1.05rem, 1rem + 0.4vw, 1.15rem);
--font-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
--font-2xl: clamp(1.5rem, 1.3rem + 1.2vw, 2rem);
--font-3xl: clamp(1.85rem, 1.5rem + 1.8vw, 2.5rem);
--font-4xl: clamp(2.25rem, 1.8rem + 2.8vw, 3.75rem);
/* Font weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 900;
/* Line heights */
--leading-flat: 1.05;
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.6;
--leading-relaxed: 1.75;
/* Letter spacing */
--tracking-tighter: -0.025em;
--tracking-tight: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.1em;
--tracking-wider: 0.14em;
/* Colors — brand */
--color-brand: #1A7A6D;
--color-brand-dark: #15665b;
--color-brand-soft: rgba(26, 122, 109, 0.1);
/* Colors — ink */
--color-ink: #1A1A1A;
--color-ink-muted: #6B7280;
--color-ink-subtle: rgba(26, 26, 26, 0.08);
/* Colors — surface */
--color-surface: #FFFFFF;
--color-surface-alt: #F5F3EF;
--color-surface-mute: #F0EDEA;
--color-surface-dark: #0D1B2A;
/* Colors — status */
--color-danger: #D42B2B;
/* On-dark overlays */
--color-on-dark-fg: rgba(255, 255, 255, 0.85);
--color-on-dark-muted: rgba(255, 255, 255, 0.6);
--color-on-dark-subtle: rgba(255, 255, 255, 0.1);
/* Spacing — 4px grid */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3rem;
--space-10: 4rem;
--space-12: 6rem;
/* Radii */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--radius-xl: 8px;
--radius-full: 999px;
/* Shadows */
--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 18px rgba(13, 27, 42, 0.08);
--shadow-lg: 0 12px 32px rgba(13, 27, 42, 0.12);
}
/* Legacy aliases — do not delete; other code may reference these names. */
:root {
--font: var(--font-sans);
--black: var(--color-ink);
--teal: var(--color-brand);
--red: var(--color-danger);
--cream: var(--color-surface-alt);
--navy: var(--color-surface-dark);
--white: var(--color-surface);
--gray: var(--color-ink-muted);
--gray-light: #E5E7EB;
--gray-bg: var(--color-surface-mute);
--container: 1140px;
--gap: var(--space-6);
}
/* overflow-x: hidden would create a scroll container on html/body and break
position:sticky on .site-header. Use overflow-x: clip (no scroll container)
with overflow-x: hidden as a fallback for Safari <16 / older browsers. */
html { font-size: 16px; overflow-x: hidden; overflow-x: clip; }
body { font-family: var(--font); color: var(--black); background: var(--white); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
/* Defensive clip on main content root — overflow-x: clip (unlike hidden) does not create a
scroll container so it won't break sticky positioning, but it WILL clip AOS translateX
overflows that escape body's overflow-x:hidden via the sticky-header ancestor bug. */
.site-main, .site-footer { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: 800; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }
.text-black { color: var(--black); }
.text-gray { color: var(--gray); }
.text-red { color: var(--red); }
.text-white { color: var(--white); }
.text-white-muted { color: var(--color-on-dark-muted); }
.section { padding: 6rem 0; }
/* --- Labels --- */
.label { font-size: var(--font-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; display: inline-block; margin-bottom: var(--space-4); }
.label-teal { color: var(--teal); }
.label-dot { display: inline-block; width: 8px; height: 8px; background: var(--teal); border-radius: var(--radius-full); margin-right: 0.5rem; vertical-align: middle; }
/* --- Buttons --- */
.btn { display: inline-block; padding: 0.875rem 2rem; font-size: var(--font-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; border: none; cursor: pointer; transition: all 0.3s ease; }
.btn-primary { background: var(--teal); color: var(--white); border-radius: var(--radius-md); }
.btn-primary:hover { background: var(--color-brand-dark); }
.btn-outline { background: transparent; color: var(--black); border: 1.5px solid var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: #333; }
.link-underline { font-size: var(--font-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
/* --- Headlines --- */
.section-headline { font-size: var(--font-3xl); font-weight: 800; margin-bottom: var(--space-5); }
.section-body { font-size: var(--font-base); color: var(--gray); line-height: var(--leading-relaxed); max-width: 600px; }
.headline-xl { font-size: var(--font-4xl); font-weight: 900; margin-bottom: var(--space-4); }
.headline-xxl { font-size: var(--font-4xl); font-weight: 900; margin-bottom: var(--space-5); }
/* ==========================================================================
HEADER
========================================================================== */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--cream);
transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.scrolled { background: var(--cream); box-shadow: 0 2px 20px rgba(0,0,0,0.06); }
.site-header .container.header-inner { max-width: 100%; padding: 0 2.5rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.site-logo { display: flex; align-items: center; }
.logo-text { font-size: var(--font-xl); font-weight: 900; letter-spacing: 0.04em; color: var(--black); }
.nav-list { display: flex; align-items: center; gap: var(--space-7); }
.nav-list li { position: relative; }
.nav-list a { font-size: var(--font-sm); font-weight: 500; color: var(--gray); transition: color 0.2s; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.nav-list a:hover { color: var(--black); }
.nav-list > li.current-menu-item > a { border-bottom: 2px solid var(--black); padding-bottom: 2px; }
.nav-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: -0.5rem;
background: var(--cream);
border: 1px solid var(--color-ink-subtle);
border-radius: var(--radius-md);
padding: 0.75rem 0;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
box-shadow: var(--shadow-md);
}
.nav-list li:hover .nav-dropdown,
.nav-list li:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
padding: 0.6rem 1.5rem;
font-size: var(--font-sm);
font-weight: 500;
color: var(--black);
display: block;
white-space: nowrap;
transition: color 0.15s ease, background 0.15s ease;
}
.nav-dropdown a:hover { background: rgba(26, 26, 26, 0.05); color: var(--black); }
.header-cta { font-size: var(--font-xs); padding: 0.75rem 1.75rem; background: var(--black); color: var(--white); border-radius: 0; }
.header-cta:hover { background: #333; }
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--black); margin: 5px 0; transition: all 0.3s; }
/* ==========================================================================
S2: HERO
========================================================================== */
.section-hero { background: var(--cream); padding: 1.5rem 0 3rem; overflow: hidden; min-height: calc(100vh - 80px); min-height: calc(100dvh - 80px); display: flex; align-items: center; }
.section-hero > .container { width: 100%; }
.hero-inner { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--space-7); align-items: center; }
.hero-image { perspective: 1400px; perspective-origin: 50% 50%; display: flex; align-items: center; justify-content: center; }
.hero-logo-stage { width: 100%; max-width: clamp(240px, 28vw, 480px); aspect-ratio: 1 / 1; position: relative; transform-style: preserve-3d; will-change: transform; }
.hero-logo-stage .logo-img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 20px 50px rgba(30, 78, 133, 0.22)); }
.hero-logo-stage::after {
content: '';
position: absolute;
bottom: -6%; left: 50%;
width: 55%; height: 3%;
background: radial-gradient(ellipse, rgba(30,78,133,0.28) 0%, transparent 70%);
transform: translateX(-50%) translateZ(-30px);
filter: blur(12px);
}
.hero-headline { font-size: var(--font-4xl); font-weight: 900; line-height: var(--leading-flat); margin-bottom: var(--space-5); }
.hero-headline .text-gray { color: #9CA3AF; }
.hero-body { font-size: var(--font-lg); color: var(--gray); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); max-width: 480px; }
.hero-cta-group { display: flex; gap: var(--space-4); flex-wrap: nowrap; align-items: center; }
.hero-cta-group .btn { white-space: nowrap; position: relative; overflow: hidden; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; }
.hero-cta-group .btn:hover { transform: translateY(-2px); }
.hero-cta-group .btn-dark .btn-arrow { display: inline-block; opacity: 0; width: 0; margin-left: 0; transform: translateX(-6px); transition: all 0.25s ease; }
.hero-cta-group .btn-dark:hover .btn-arrow { opacity: 1; width: 1em; margin-left: 0.5rem; transform: translateX(0); }
.hero-image img { border-radius: var(--radius-xl); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* Hero animation prep — initial states (hidden, GSAP reveals on load) */
.js-hero-ready .hero-label,
.js-hero-ready .hero-headline .text-black,
.js-hero-ready .hero-headline .text-gray,
.js-hero-ready .hero-body,
.js-hero-ready .hero-cta-group .btn,
.js-hero-ready .hero-logo-stage { opacity: 0; }
.js-hero-ready .hero-logo-stage { transform: scale(0.55); }
.js-hero-ready .hero-label { transform: translateY(12px); }
.js-hero-ready .hero-headline .text-black,
.js-hero-ready .hero-headline .text-gray { transform: translateY(24px); display: inline-block; }
.js-hero-ready .hero-body,
.js-hero-ready .hero-cta-group .btn { transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
.js-hero-ready .hero-label,
.js-hero-ready .hero-headline .text-black,
.js-hero-ready .hero-headline .text-gray,
.js-hero-ready .hero-body,
.js-hero-ready .hero-cta-group .btn,
.js-hero-ready .hero-logo-stage { opacity: 1; transform: none; }
}
/* ==========================================================================
S3: THE NAVRIST LENS
========================================================================== */
.section-lens { background: var(--white); padding: 7rem 0; overflow-x: clip; }
.lens-content {
background: var(--white);
padding: 0.5rem 0.75rem;
position: relative;
z-index: 5;
display: inline-block;
max-width: 720px;
}
.lens-inner .label {
background: var(--white);
padding: 2px 6px;
position: relative;
z-index: 5;
}
.lens-inner { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-10); align-items: start; }
.lens-inner .label { margin-top: var(--space-2); }
.lens-inner .section-headline { font-size: var(--font-3xl); }
.lens-inner .section-body { max-width: 640px; }
/* ==========================================================================
S4: STAT PILLARS
========================================================================== */
.section-stats { background: var(--cream); padding: 4rem 0; }
.stats-inner {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
.stat-item {
text-align: left;
padding: 0 1.5rem;
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
}
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { padding-right: 0; }
.stat-headline {
font-size: var(--font-xl);
font-weight: 800;
line-height: var(--leading-tight);
color: var(--black);
letter-spacing: var(--tracking-tight);
margin: 0;
white-space: nowrap;
}
.stat-headline [data-count] { font-variant-numeric: tabular-nums; }
.stat-label {
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--gray);
line-height: var(--leading-snug);
white-space: nowrap;
}
/* ==========================================================================
S5: PILLAR 01
========================================================================== */
.section-pillar-01 { background: var(--white); overflow-x: clip; }
.pillar01-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.pillar01-image img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.check-list { margin-top: var(--space-5); display: flex; flex-direction: column; gap: 0.875rem; }
.check-list li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-base); color: var(--black); }
.check-icon { width: 20px; height: 20px; flex-shrink: 0; }
/* ==========================================================================
S6: PILLAR 02
========================================================================== */
.section-pillar-02 { background: var(--gray-bg); }
.section-pillar-02 .section-headline { margin-bottom: var(--space-8); }
.pillar02-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.pillar02-card { background: var(--white); padding: 2rem 1.5rem; border-left: 3px solid var(--gray-light); border-radius: var(--radius-sm); transition: border-color 0.3s, transform 0.3s; }
.pillar02-card:hover { border-left-color: var(--teal); transform: translateY(-4px); }
.card-number { font-size: var(--font-2xl); font-weight: 300; color: var(--gray); display: block; margin-bottom: var(--space-3); }
.card-title { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-2); }
.pillar02-card p { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-normal); }
/* ==========================================================================
S7: CHANGES
========================================================================== */
.section-changes { padding: 0; overflow-x: clip; }
.changes-grid { display: grid; grid-template-columns: 1fr 1fr; }
.changes-col { padding: 5rem 4rem; }
.changes-look { background: var(--white); }
.changes-find { background: var(--navy); color: var(--white); }
.changes-find h2 { color: var(--white); }
.changes-find p { color: var(--color-on-dark-muted); }
.change-item { display: flex; gap: var(--space-4); margin-top: var(--space-6); align-items: flex-start; }
.change-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-brand-soft); border-radius: var(--radius-xl); }
.changes-find .change-icon { background: rgba(26,122,109,0.25); }
.change-item h3,
.change-item h4 { font-size: var(--font-base); font-weight: 700; margin-bottom: var(--space-1); }
.change-item p { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-normal); }
/* ==========================================================================
S8: NAVRIST AI
========================================================================== */
.section-ai { background: var(--cream); }
.section-ai .section-body { margin-bottom: var(--space-8); }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.ai-card { background: var(--white); padding: 2.5rem 2rem; border-left: 3px solid var(--teal); border-radius: var(--radius-sm); transition: transform 0.3s; }
.ai-card:hover { transform: translateY(-4px); }
.ai-icon { margin-bottom: var(--space-5); }
.ai-card h3 { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-2); }
.ai-card p { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-normal); }
/* ==========================================================================
S9: THE NAVRIST FORMULA
========================================================================== */
.section-formula { background: var(--navy); color: var(--white); padding: 6rem 0; overflow-x: clip; }
.formula-inner { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-10); align-items: start; }
.formula-header em { font-style: italic; }
.formula-header .section-headline { font-size: var(--font-3xl); }
.formula-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.formula-item { padding: 1.5rem 0; border-bottom: 1px solid var(--color-on-dark-subtle); }
.formula-item:nth-child(odd) { padding-right: var(--space-6); }
.formula-item:nth-child(even) { padding-left: var(--space-6); border-left: 1px solid var(--color-on-dark-subtle); }
.formula-num { font-size: var(--font-xs); font-weight: 700; color: var(--teal); display: block; margin-bottom: var(--space-2); }
.formula-item h4 { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-1); color: var(--white); }
.formula-item p { font-size: var(--font-sm); color: var(--color-on-dark-muted); }
/* ==========================================================================
S10: FOCUS AREAS
========================================================================== */
.section-focus { background: var(--cream); overflow-x: clip; }
.focus-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-8); gap: var(--space-8); }
.focus-header .section-headline { max-width: 420px; }
.focus-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 2px solid var(--black); padding-top: var(--space-5); }
.focus-item { text-align: center; padding: 0 1rem; position: relative; }
.focus-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 1px; background: var(--gray-light); }
.focus-num { font-size: var(--font-xs); font-weight: 600; color: var(--gray); display: block; margin-bottom: var(--space-2); }
.focus-name { font-size: var(--font-base); font-weight: 600; }
/* ==========================================================================
S11: WHAT WE REFUSE TO OWN
========================================================================== */
.section-refuse { background: var(--white); overflow-x: clip; }
.refuse-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; }
.refuse-content .section-headline { font-size: var(--font-3xl); }
.refuse-quote { font-style: italic; font-size: var(--font-base); color: var(--gray); line-height: var(--leading-relaxed); margin-top: var(--space-6); padding-left: var(--space-5); border-left: 3px solid var(--red); }
.refuse-list { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-4); }
.refuse-item { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--font-base); }
.refuse-icon { flex-shrink: 0; }
/* ==========================================================================
S12: LEADERSHIP
========================================================================== */
.section-leadership { background: var(--cream); overflow-x: clip; }
.leadership-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-8); }
.team-grid {
display: grid;
/* auto-fit + minmax keeps single-member grids from orphaning a card in col 1
with empty cols 2/3. 1 card centers as a solo card; 2 center side-by-side;
3+ wrap naturally. min(240px, 100%) guards narrow viewports. */
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 320px));
justify-content: center;
gap: var(--space-6);
}
/* About page — Team section is a minimal compact variant: tighter header spacing,
body text auto-centered. */
#team .team-intro { max-width: 640px; margin: 0 auto var(--space-6); }
#team .team-intro .section-headline { margin-bottom: var(--space-3); }
#team .team-intro .section-body { max-width: none; margin: 0; }
.team-card { text-align: left; }
.team-photo { overflow: hidden; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.team-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(100%); transition: filter 0.4s; }
.team-card:hover .team-photo img { filter: grayscale(0%); }
.team-name { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-1); }
.team-title { font-size: var(--font-2xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--teal); }
/* ==========================================================================
S13: FUND
========================================================================== */
.section-fund { background: var(--white); }
.fund-card { background: var(--cream); border-radius: var(--radius-lg); padding: 3rem; display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); align-items: center; }
.fund-name { font-size: var(--font-2xl); font-weight: 800; margin-bottom: var(--space-2); }
.fund-desc { font-size: var(--font-sm); color: var(--gray); margin-bottom: var(--space-5); }
.fund-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.fund-stat { text-align: left; padding-left: var(--space-5); border-left: 1px solid var(--gray-light); }
.fund-stat:first-child { border-left: none; padding-left: 0; }
.fund-stat-label { font-size: var(--font-2xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gray); display: block; margin-bottom: var(--space-1); }
.fund-stat-value { font-size: var(--font-lg); font-weight: 700; }
/* ==========================================================================
S14: CTA
========================================================================== */
.section-cta { background: var(--cream); padding: 7rem 0; border-top: 1px solid var(--gray-light); }
.section-cta .section-body { max-width: 500px; margin: 0 auto 2rem; }
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer { background: var(--gray-bg); padding: 3rem 0; }
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-8); }
.footer-logo { font-size: var(--font-base); font-weight: 900; letter-spacing: 0.05em; display: block; margin-bottom: var(--space-3); }
.footer-legal { font-size: var(--font-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); line-height: var(--leading-normal); overflow-wrap: break-word; }
.footer-heading { font-size: var(--font-2xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gray); margin-bottom: var(--space-3); }
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-col ul a, .footer-col ul span { font-size: var(--font-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); transition: color 0.2s; }
.footer-col ul a:hover { color: var(--teal); }
/* ==========================================================================
BLOG / ARCHIVE (legacy fallbacks — single.php still uses .blog-card-meta)
========================================================================== */
.blog-card-meta { font-size: var(--font-xs); color: var(--gray); }
/* ==========================================================================
MEDIA ARCHIVE (Posts Page)
========================================================================== */
.section-media-header { background: var(--cream); padding: 5rem 0 2.5rem; }
.section-media-header .label { margin-bottom: var(--space-5); }
.media-header-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-8); }
.media-header-text { max-width: 58ch; }
.media-headline {
font-size: clamp(2.5rem, 5.5vw, 4.25rem);
font-weight: 900;
line-height: var(--leading-flat);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-5);
}
.media-intro { font-size: var(--font-base); color: var(--gray); line-height: var(--leading-relaxed); max-width: 64ch; text-wrap: pretty; }
.media-empty { font-size: var(--font-base); color: var(--gray); text-align: center; padding: 4rem 0; }
.perspective-filter { display: flex; align-items: center; gap: 0.9rem; align-self: end; padding-bottom: var(--space-2); }
.perspective-filter__label {
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--gray);
}
.perspective-filter__wrap { position: relative; }
.perspective-filter__trigger {
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: transparent;
border: none;
border-bottom: 1px solid rgba(26, 26, 26, 0.25);
padding: 0.45rem 0.25rem;
font-family: inherit;
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--black);
cursor: pointer;
min-width: 210px;
justify-content: space-between;
transition: border-color 0.2s ease, color 0.2s ease;
}
.perspective-filter__trigger:hover,
.perspective-filter__trigger:focus-visible { border-color: var(--teal); color: var(--teal); }
.perspective-filter__trigger:focus-visible { outline: none; }
.perspective-filter__trigger svg {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.perspective-filter[data-open] .perspective-filter__trigger svg { transform: rotate(180deg); }
.perspective-filter__menu {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
min-width: 240px;
background: var(--cream);
border: 1px solid var(--color-ink-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.5rem 0;
z-index: 20;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.perspective-filter[data-open] .perspective-filter__menu {
opacity: 1;
transform: translateY(0);
}
.perspective-filter__option {
padding: 0.7rem 1.25rem;
font-size: var(--font-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--black);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.perspective-filter__option:hover,
.perspective-filter__option:focus-visible { background: rgba(26, 26, 26, 0.05); outline: none; }
.perspective-filter__option.is-active {
color: var(--teal);
position: relative;
}
.perspective-filter__option.is-active::before {
content: "";
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: var(--radius-full);
background: var(--teal);
}
.perspective-filter noscript select {
padding: 0.45rem 1rem;
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.section-media-featured { background: var(--cream); padding: 1.5rem 0 4rem; }
.media-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-7); align-items: start; }
.media-sidebar { display: flex; flex-direction: column; gap: var(--space-6); }
.section-media-grid { background: var(--cream); padding: 0 0 5rem; }
.media-grid-divider { height: 1px; background: var(--color-ink-subtle); margin: 0 0 3.5rem; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
/* --- Media card (shared design system + minimal variant overrides) --- */
.media-card { display: flex; flex-direction: column; background: transparent; }
.media-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); }
.media-card__media img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform 0.5s ease;
}
.media-card__media:hover img { transform: scale(1.02); }
.media-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); }
.media-card__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--teal); font-size: var(--font-2xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.media-card__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-2xs); font-weight: 700; letter-spacing: var(--tracking-wider); color: var(--gray); text-transform: uppercase; }
.media-card__meta time, .media-card__source { color: var(--gray); }
.media-card__dot { color: var(--teal); }
.media-card__title { margin: 0; }
.media-card__title a { color: var(--black); transition: color 0.2s; }
.media-card__title a:hover { color: var(--teal); }
/* Variant overrides — only title size differs. */
.media-card--hero .media-card__title { font-size: var(--font-2xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.media-card--sidebar .media-card__title { font-size: var(--font-lg); font-weight: 700; line-height: var(--leading-snug); }
.media-card--grid .media-card__title { font-size: var(--font-lg); font-weight: 700; line-height: var(--leading-snug); }
/* --- Newsletter CTA (full-bleed navy band) --- */
.section-newsletter {
background: var(--navy);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.section-newsletter::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 20% 40%, rgba(26, 122, 109, 0.08), transparent 55%);
pointer-events: none;
}
.newsletter-block {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--space-10);
padding: 0;
background: transparent;
border-radius: 0;
}
.newsletter-content { color: var(--white); }
.newsletter-title { font-size: var(--font-2xl); font-weight: 800; color: var(--white); margin-bottom: var(--space-4); letter-spacing: var(--tracking-tight); }
.newsletter-body { font-size: var(--font-base); color: var(--color-on-dark-muted); line-height: var(--leading-relaxed); max-width: 48ch; }
.newsletter-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; justify-self: end; width: 100%; }
.newsletter-form input[type="email"] {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: var(--white);
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--font-sm);
}
.newsletter-form input[type="email"]:focus { outline: 2px solid rgba(26, 122, 109, 0.8); outline-offset: 1px; }
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.35); }
.newsletter-submit {
background: var(--white);
color: var(--black);
padding: 1rem 1.5rem;
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.newsletter-submit:hover { background: var(--teal); color: var(--white); }
.newsletter-feedback { grid-column: 1 / -1; font-size: var(--font-sm); margin-top: var(--space-1); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); }
.newsletter-feedback--success { background: rgba(26, 122, 109, 0.2); color: #aef2e4; }
.newsletter-feedback--error { background: rgba(212, 43, 43, 0.18); color: #ffb8b8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ==========================================================================
PAGE TEMPLATES
========================================================================== */
.page-header { background: var(--cream); padding: 5rem 0 3rem; text-align: center; }
.page-header h1 { font-size: var(--font-4xl); font-weight: 900; }
.page-content { padding: 4rem 0; }
.page-content p { font-size: var(--font-base); color: var(--gray); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); max-width: 720px; }
/* Mobile-only: extra horizontal breathing room on text-only legal pages,
and restore list indent killed by the global * { padding: 0 } reset so
numbers/bullets don't sit flush against the viewport edge. */
@media (max-width: 600px) {
.page-content { padding: 3rem 1rem 4rem; }
.page-content ol, .page-content ul { padding-left: 1.5rem; margin-bottom: var(--space-5); }
.page-content ol ol, .page-content ol ul, .page-content ul ol, .page-content ul ul { padding-left: 1.25rem; }
.page-content li { margin-bottom: var(--space-2); }
}
/* Contact Form */
.contact-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-10); margin-top: var(--space-6); }
.contact-form { max-width: 100%; }
.contact-form .form-group { margin-bottom: var(--space-5); }
.contact-form label { display: block; font-size: var(--font-sm); font-weight: 600; margin-bottom: var(--space-2); }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--gray-light); border-radius: var(--radius-md); font-family: var(--font); font-size: var(--font-base); transition: border-color 0.2s; background: var(--white); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--teal); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-info { background: var(--cream); padding: 2rem; border-radius: var(--radius-lg); }
.contact-info h3 { font-size: var(--font-base); font-weight: 700; margin-bottom: var(--space-3); letter-spacing: 0.05em; text-transform: uppercase; }
.contact-info p, .contact-info a { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-relaxed); display: block; margin-bottom: var(--space-2); }
.contact-info a:hover { color: var(--teal); }
.contact-info-block { margin-bottom: var(--space-6); scroll-margin-top: 100px; }
.contact-info-block:last-child { margin-bottom: 0; }
/* Values cards (About page) */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: 3rem; }
.value-card { background: var(--white); padding: 2.5rem 2rem; border-top: 3px solid var(--teal); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: transform 0.3s; }
.value-card:hover { transform: translateY(-4px); }
.value-icon { margin-bottom: var(--space-5); width: 48px; height: 48px; background: var(--color-brand-soft); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; }
.value-card h3 { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-2); }
.value-card p { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-relaxed); }
/* Our Story (About page) */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.story-image div { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); }
.story-content p { font-size: var(--font-base); color: var(--gray); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }
.story-content .label { margin-bottom: var(--space-3); }
/* Process steps (Our Investors page) */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 3rem; }
.process-step { position: relative; padding: 0 1.5rem; }
.process-step:not(:last-child)::after { content: ''; position: absolute; top: 24px; right: 0; width: 100%; height: 2px; background: var(--gray-light); z-index: 0; }
.process-step-num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--teal); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-lg); margin-bottom: var(--space-4); }
.process-step h4 { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-2); }
.process-step p { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-normal); }
/* Who We Serve list (Our Investors) */
.serve-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.serve-card { background: var(--cream); padding: 2rem; border-radius: var(--radius-lg); border-left: 3px solid var(--teal); }
.serve-card h4 { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-2); }
.serve-card p { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-normal); }
/* Resources grid (Investor Resources) */
.resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.resource-card { background: var(--white); border: 1px solid var(--gray-light); padding: 2rem; border-radius: var(--radius-lg); transition: transform 0.3s, box-shadow 0.3s; }
.resource-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.resource-icon { width: 44px; height: 44px; background: var(--color-brand-soft); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.resource-card h3 { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-2); }
.resource-card p { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-normal); margin-bottom: var(--space-5); }
.resource-card .btn { font-size: var(--font-2xs); padding: 0.625rem 1.25rem; }
.resource-category { font-size: var(--font-xl); font-weight: 700; margin: 3rem 0 1rem; }
.resource-category:first-child { margin-top: 0; }
/* Inner page sections with alternating bg */
.section-white { background: var(--white); }
.section-cream { background: var(--cream); }
/* Team bios */
.team-bio { font-size: var(--font-sm); color: var(--gray); line-height: var(--leading-relaxed); margin-top: var(--space-3); }
.team-links { margin-top: var(--space-3); display: flex; gap: var(--space-3); }
.team-links a { color: var(--teal); font-size: var(--font-xs); font-weight: 600; }
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1024px) {
/* Headline handled by clamp() — no override needed */
.container { padding: 0 2rem; }
.headline-xxl { font-size: var(--font-3xl); }
.pillar02-grid { grid-template-columns: repeat(2, 1fr); }
.formula-inner { grid-template-columns: 1fr; }
.focus-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.focus-item:not(:last-child)::after { display: none; }
.fund-card { grid-template-columns: 1fr; }
.fund-stats { grid-template-columns: repeat(2, 1fr); }
/* Row 2 of the 2-col fund-stats grid starts a new row — reset its stray left-border */
.fund-stat:nth-child(2n+1) { border-left: none; padding-left: 0; }
/* 5 cols too tight — fold to 3+2 grid */
.stats-inner { grid-template-columns: repeat(3, 1fr); gap: 2rem 0; }
.stat-headline { font-size: var(--font-lg); }
.stat-item:nth-child(3n+1) { padding-left: 0; }
.stat-item:last-child { padding-right: 1.5rem; }
/* Media — tighter hero split, 2-col grid */
.media-hero-grid { grid-template-columns: 3fr 2fr; gap: var(--space-6); }
.media-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.media-card--hero .media-card__title { font-size: var(--font-xl); }
/* Narrow desktop / large tablet: shrink nav so all items stay on one line
(merged from former @media 1100-901; mobile menu overrides below 900). */
.nav-list { gap: var(--space-5); }
.nav-list a { font-size: var(--font-xs); }
.header-cta { font-size: var(--font-2xs); padding: 0.65rem 1.25rem; }
}
/* Hamburger menu + CTA wrap trigger at iPad portrait, not waiting for 768 */
@media (max-width: 900px) {
/* Mobile menu opens BELOW the sticky header so the close button stays tappable.
When the menu is open, the header is forced fixed (body is position:fixed for
scroll lock, which breaks sticky — fixed keeps the header visible). */
body.has-open-menu .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 102; box-shadow: 0 1px 0 rgba(26, 26, 26, 0.08); }
.main-nav {
display: none;
position: fixed;
top: 80px; left: 0; right: 0; bottom: 0;
background: var(--cream);
padding: 0;
z-index: 101;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-top: 1px solid rgba(26, 26, 26, 0.08);
}
.main-nav.active { display: block; animation: navrist-menu-in 0.22s ease-out both; }
@keyframes navrist-menu-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-list { flex-direction: column; gap: 0; align-items: stretch; padding: 0.5rem 1.5rem 2rem; }
.nav-list > li { position: relative; border-bottom: 1px solid rgba(26, 26, 26, 0.08); }
.nav-list > li:last-child { border-bottom: none; }
/* Top-level items — bigger tap target, chevron (if any) aligned right via
margin-left:auto on the svg. No justify-content trickery; left-align text. */
.main-nav .nav-list > li > a {
font-size: 1.05rem;
font-weight: 500;
color: var(--gray);
padding: 1.15rem 0.25rem;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
min-height: 56px;
width: 100%;
transition: color 0.15s ease, font-weight 0.15s ease;
}
.main-nav .nav-list > li > a:hover,
.main-nav .nav-list > li > a:focus { color: var(--black); font-weight: 700; }
/* Neutralise the desktop "current page" underline/color on mobile — user
wants every item to read the same, with hover being the only accent. */
.main-nav .nav-list > li.current-menu-item > a { color: var(--gray); border-bottom: none; padding-bottom: 1.15rem; font-weight: 500; }
.main-nav .nav-list > li.current-menu-item > a:hover,
.main-nav .nav-list > li.current-menu-item > a:focus { color: var(--black); font-weight: 700; }
.main-nav .nav-list > li > a > svg {
transition: transform 0.2s ease;
flex: 0 0 auto;
margin-left: auto;
/* Expanded tap target so the chevron is easy to hit — text taps
still navigate (handled in JS), chevron taps toggle the submenu. */
box-sizing: content-box;
padding: 12px;
margin-right: -12px;
margin-top: -12px;
margin-bottom: -12px;
}
.main-nav .nav-list > li.nav-open > a > svg { transform: rotate(180deg); }
/* Accordion submenu — collapsed by default, smooth expand */
.nav-dropdown {
position: static;
opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: none;
background: transparent;
padding: 0 0 0.75rem 1.5rem;
min-width: 0;
display: none;
}
.main-nav .nav-list > li.nav-open .nav-dropdown { display: block; }
.main-nav .nav-dropdown a {
padding: 0.75rem 0;
font-size: 0.95rem;
font-weight: 500;
color: var(--gray);
min-height: 44px;
display: flex;
align-items: center;
transition: color 0.15s ease, font-weight 0.15s ease;
}
.main-nav .nav-dropdown a:hover,
.main-nav .nav-dropdown a:focus { background: transparent; color: var(--black); font-weight: 700; }
.mobile-toggle { display: block; }
.hero-cta-group { flex-wrap: wrap; gap: var(--space-3); }
.hero-cta-group .btn { padding: 0.75rem 1.5rem; font-size: var(--font-xs); }
/* Collapse lens 2-col grid early — 200px hard track + 4rem gap is too cramped below 900px */
.lens-inner { grid-template-columns: 1fr; gap: var(--space-4); }
/* Media — hero full-width, sidebar stacks below in 2-col */
.media-header-row { grid-template-columns: 1fr; gap: var(--space-5); }
.perspective-filter { justify-self: end; }
.media-hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
.media-sidebar { flex-direction: row; gap: var(--space-5); }
.media-sidebar .media-card { flex: 1; }
}
@media (max-width: 768px) {
.section { padding: 4rem 0; }
/* Hero stack to 1 column, logo above text, smaller + left aligned */
.hero-inner { grid-template-columns: 1fr; gap: var(--space-6); }
.hero-image { order: -1; justify-content: flex-start; margin-top: -1.5rem; }
.hero-logo-stage { max-width: 120px; }
.hero-cta-group { flex-wrap: wrap; }
/* Remove forced
s, let headline spans flow inline and wrap naturally */
.hero-headline br { display: none; }
.hero-headline .text-black,
.hero-headline .text-gray,
.js-hero-ready .hero-headline .text-black,
.js-hero-ready .hero-headline .text-gray { display: inline; }
/* Lens — tighter rhythm on mobile: less top/bottom air + tighter eyebrow→headline gap */
.section-lens { padding: 2rem 0 3rem; }
.lens-inner { grid-template-columns: 1fr; gap: 0.5rem; }
.lens-inner .label { margin-top: 0; }
/* Hero image — drop the negative top margin so the logo doesn't tuck under the sticky header */
.hero-image { margin-top: 0; }
/* Big-padding sections: cut in half on mobile so they don't dominate the scroll */
.section-cta { padding: 4rem 0; }
.section-formula { padding: 4rem 0; }
.section-fund { padding-top: 1rem; padding-bottom: 1rem; }
/* Inner-page header: tighten top padding under the sticky header on mobile */
.page-header { padding-top: 3rem; padding-bottom: 2rem; }
/* Team photos: cap the aspect ratio so three members don't produce 1500px of photo
scroll before any actual content appears on the Team page */
.team-photo img { aspect-ratio: 4 / 5; }
/* About: the decorative dark gradient block is a tall 4/5 column on desktop; on mobile
shrink to a landscape strip so it doesn't eat a whole viewport */
.story-image-fill { aspect-ratio: 16 / 10; }
/* Fund card — tighter padding on mobile */
.fund-card { padding: 1.75rem; gap: var(--space-6); }
.fund-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
/* Reset the left-border + indent pattern since every-other-stat no longer sits on a row */
.fund-stat { padding-left: 0; border-left: none; }
/* Formula grid: collapse to 1 column on mobile so tiles don't get crushed */
.formula-grid { grid-template-columns: 1fr; }
.formula-item { padding: 1.25rem 0; }
.formula-item:nth-child(odd),
.formula-item:nth-child(even) { padding-right: 0; padding-left: 0; border-left: none; }
/* Stats */
.stats-inner { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
.stat-headline { font-size: var(--font-lg); white-space: normal; }
.stat-label { white-space: normal; }
.stat-item:nth-child(2n+1) { padding-left: 0; }
/* Media — mobile single column */
.section-media-header { padding-top: var(--space-10); }
.media-headline { font-size: clamp(2.25rem, 8vw, 3rem); }
.media-grid { grid-template-columns: 1fr; gap: var(--space-7); }
.media-sidebar { flex-direction: column; gap: var(--space-6); }
.media-card--hero .media-card__title { font-size: var(--font-xl); }
/* Newsletter stacks */
.newsletter-block { grid-template-columns: 1fr; gap: var(--space-6); }
.newsletter-form { justify-self: stretch; max-width: none; }
.newsletter-submit { width: 100%; }
/* Pillars */
.pillar01-inner { grid-template-columns: 1fr; gap: var(--space-6); }
/* Changes — tighter vertical padding on mobile to remove the large white
gap above "Changes We Look For" that stacks with the previous section's
bottom padding. */
.changes-grid { grid-template-columns: 1fr; }
.changes-col { padding: 1.5rem 1.5rem; }
/* Tighten the cream top/bottom gap around NAVRIST AI on mobile so the
navy "Scuttlebutt Intelligence" block abuts the cream section without
a big empty strip. */
.section-ai { padding-top: 2rem; padding-bottom: 2rem; }
/* AI */
.ai-grid { grid-template-columns: 1fr; }
/* Refuse */
.refuse-inner { grid-template-columns: 1fr; gap: var(--space-6); }
/* Leadership */
.leadership-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.team-grid { grid-template-columns: 1fr; gap: var(--space-6); }
/* Focus */
.focus-header { flex-direction: column; }
.focus-grid { grid-template-columns: repeat(2, 1fr); }
/* Footer */
.footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
/* Headlines */
.section-headline { font-size: var(--font-2xl); }
.headline-xl { font-size: var(--font-3xl); }
.headline-xxl { font-size: var(--font-3xl); }
/* Blog */
.blog-grid { grid-template-columns: 1fr; }
/* Inner pages */
.contact-layout { grid-template-columns: 1fr; gap: var(--space-6); }
.values-grid, .resources-grid, .serve-list { grid-template-columns: 1fr; }
.process-steps { grid-template-columns: 1fr; gap: var(--space-6); }
.process-step:not(:last-child)::after { display: none; }
.story-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
/* Investment pages — suppress
breaks in headings at ALL widths. The ACF fallback strings
contain \n characters that nl2br() converts to
, which force awkward wraps at every
breakpoint. Let text flow naturally with text-wrap:balance for the best line break. */
.philosophy-hero-headline br,
.method-headline br,
.underwrite-heading .section-headline br,
.investors-hero-headline br,
.resources-hero-headline br { display: none; }
.philosophy-hero-headline,
.method-headline,
.underwrite-heading .section-headline,
.investors-hero-headline,
.resources-hero-headline { text-wrap: balance; }
/* True mobile — header: logo + CONTACT US grouped left, hamburger far right */
@media (max-width: 600px) {
.logo-text { font-size: var(--font-lg); }
.header-cta { display: inline-block; padding: 0.55rem 1rem; font-size: var(--font-2xs); margin-left: auto; margin-right: 1rem; }
.mobile-toggle { margin-left: 0; }
.hero-cta-group { flex-direction: column; align-items: flex-start; }
.hero-cta-group .btn { text-align: center; width: auto; }
.hero-label { font-size: var(--font-sm); letter-spacing: var(--tracking-wide); }
.container { padding: 0 1rem; }
.site-header .container.header-inner { padding: 0 1rem; }
.page-header { padding: 3rem var(--space-4) 2rem; }
/* Contact page: email CTA full-width on phone so the label doesn't crowd the viewport edge */
.contact-direct .btn { width: 100%; text-align: center; }
/* Media archive perspective filter: keep dropdown menu within the viewport at any width,
and let the trigger stretch to the container edge for a proper mobile control feel */
.perspective-filter { justify-self: stretch; }
.perspective-filter__trigger { min-width: 0; width: 100%; }
.perspective-filter__menu { left: 0; right: 0; min-width: 0; max-width: calc(100vw - 2rem); }
/* Single-hero image: tame the negative margin pulling image up under the meta row */
.single-hero-image { margin: -0.5rem 0 2rem; }
/* Tap target floor — iOS HIG / WCAG 2.2 AA */
.site-footer a,
.footer-inner a,
.main-nav .nav-list a { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-toggle { min-width: 44px; min-height: 44px; }
}
/* Tiny viewports — header was cramming logo + CTA + toggle.
Drop the header CTA; the menu already contains a CONTACT US link. */
@media (max-width: 360px) {
.header-cta { display: none; }
.logo-text { font-size: var(--font-base); }
}
@media (max-width: 480px) {
.stats-inner { grid-template-columns: 1fr; }
/* In single-column mode, reset the nth-child padding overrides inherited
from the 2-col breakpoint so every stat aligns flush to the container. */
.stat-item { padding: 0; }
.pillar02-grid { grid-template-columns: 1fr; }
.focus-grid { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; }
.fund-stats { grid-template-columns: 1fr; }
}
/* Ultra-wide — widen container, deepen 3D perspective, pad header */
@media (min-width: 1920px) {
:root { --container: 1280px; }
.site-header .container.header-inner { padding: 0 4rem; }
.hero-image { perspective: 1800px; }
}
@media (min-width: 2560px) {
:root { --container: 1440px; }
.hero-image { perspective: 2400px; }
}
/* --- Image + button placeholders (Phase 1) --- */
.image-placeholder {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(26,122,109,0.12) 0%, rgba(13,27,42,0.18) 55%, rgba(26,26,26,0.32) 100%),
repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 10px);
position: relative;
}
.image-placeholder--building { aspect-ratio: 4 / 5; }
.team-avatar {
width: 100%;
aspect-ratio: 3 / 4;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
}
.team-avatar--placeholder {
background: linear-gradient(180deg, #333 0%, #1a1a1a 100%);
color: var(--color-on-dark-fg);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3.25rem);
letter-spacing: var(--tracking-wide);
}
.team-avatar--placeholder span { font-family: var(--font); }
.btn-static { cursor: default; }
.btn-static:hover { background: var(--black); color: var(--white); }
.btn-muted {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
/* --- Contact direct block (Phase 1.2) --- */
.contact-direct { padding: 0.5rem 0; }
.contact-direct h2 { font-size: var(--font-xl); margin-bottom: var(--space-3); }
.contact-direct p { color: var(--gray); margin-bottom: var(--space-5); max-width: 52ch; }
.contact-direct .btn { margin-bottom: var(--space-5); }
.contact-direct-meta { font-size: var(--font-sm); }
/* --- Utility classes (Phase 2.3 — replace inline styles) --- */
.page-header-body { margin: 1rem auto 0; }
.section-cta-body { margin: 0 auto 2rem; }
.measure-prose { max-width: 62ch; }
.stack-sm { margin-top: var(--space-4); }
.stack-md { margin-top: var(--space-5); }
.stack-lg { margin-top: var(--space-6); }
.story-image-fill { width: 100%; aspect-ratio: 4/5; border-radius: var(--radius-lg); background: linear-gradient(135deg, #0D1B2A 0%, #1a3a5c 40%, #0D1B2A 100%); }
.philosophy-image-fill { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); background: linear-gradient(135deg, #1a3a5c, #2d6a8f); }
.team-grid--airy { gap: var(--space-8); }
/* ==========================================================================
INVESTMENT PHILOSOPHY — Hero, Underwrite, Method
========================================================================== */
/* Hero */
.philosophy-hero {
background: var(--cream);
padding: 4.5rem 0 5rem;
position: relative;
overflow: hidden;
}
.philosophy-hero::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 40%;
background: radial-gradient(circle at 80% 30%, rgba(26, 122, 109, 0.05), transparent 55%);
pointer-events: none;
}
.label-pill {
display: inline-block;
padding: 0.5rem 1rem;
border: 1px solid rgba(26, 26, 26, 0.18);
border-radius: var(--radius-full);
background: transparent;
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--black);
margin-bottom: var(--space-7);
}
.philosophy-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem 3rem;
}
.philosophy-hero-headline {
grid-column: 1 / -1;
font-size: clamp(2.5rem, 7vw, 5rem);
font-weight: 900;
line-height: var(--leading-flat);
letter-spacing: var(--tracking-tighter);
color: var(--black);
margin: 0;
text-wrap: balance;
}
.philosophy-hero-body {
grid-column: 2 / -1;
font-size: var(--font-base);
line-height: var(--leading-relaxed);
color: var(--gray);
max-width: 48ch;
margin: -1rem 0 0;
justify-self: start;
}
/* How We Underwrite Opportunity */
.underwrite-section {
background: var(--cream);
padding: 2rem 0 6rem;
}
.underwrite-heading {
margin-bottom: var(--space-10);
}
.underwrite-heading .section-headline {
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 900;
line-height: var(--leading-flat);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-4);
max-width: 24ch;
}
.heading-underline {
display: block;
width: 64px;
height: 2px;
background: var(--teal);
}
.underwrite-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
.underwrite-card {
background: rgba(255, 255, 255, 0.45);
border: 1px solid var(--color-ink-subtle);
padding: 2rem 1.75rem 2.25rem;
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 280px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.underwrite-card:hover {
background: var(--white);
border-color: rgba(26, 122, 109, 0.25);
}
.underwrite-icon {
color: var(--gray);
margin-bottom: var(--space-6);
}
.underwrite-title {
font-size: var(--font-lg);
font-weight: 700;
color: var(--black);
margin: 0;
}
.underwrite-body {
font-size: var(--font-sm);
line-height: var(--leading-normal);
color: var(--gray);
margin: 0;
}
/* The Navrist Method */
.method-section {
background: var(--cream);
padding: 0 0 6rem;
}
.method-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
align-items: center;
}
.method-image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--gray-light);
}
.method-image img,
.method-image-fill {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.method-image-fill {
background: linear-gradient(135deg, #0D1B2A 0%, #1A7A6D 55%, #0D1B2A 100%);
}
.method-content .label { margin-bottom: var(--space-5); }
.method-headline {
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
font-weight: 900;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--black);
margin: 0 0 2rem;
}
.method-quote {
border-left: 3px solid var(--teal);
padding: 0.25rem 0 0.25rem 1.5rem;
font-style: italic;
font-size: var(--font-base);
line-height: var(--leading-normal);
color: var(--gray);
margin: 0 0 2.5rem;
}
.method-points {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin: 0;
padding: 0;
}
.method-points li {
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
.method-check { flex-shrink: 0; margin-top: 0.15rem; }
.method-points h3,
.method-points h4 {
font-size: var(--font-base);
font-weight: 700;
color: var(--black);
margin: 0 0 0.25rem;
}
.method-points p {
font-size: var(--font-sm);
line-height: var(--leading-normal);
color: var(--gray);
margin: 0;
}
/* Philosophy page — responsive */
@media (max-width: 900px) {
.philosophy-hero { padding: 3rem 0 3.5rem; }
.philosophy-hero-grid { grid-template-columns: 1fr; }
.philosophy-hero-body { grid-column: 1; margin-top: 0; }
.underwrite-section { padding-bottom: var(--space-10); }
.underwrite-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.method-section { padding-bottom: var(--space-10); }
.method-grid { grid-template-columns: 1fr; gap: var(--space-7); }
}
@media (max-width: 600px) {
.philosophy-hero { padding: 2.5rem 0 3rem; }
.philosophy-hero-headline { font-size: clamp(2rem, 9vw, 2.75rem); }
.label-pill { margin-bottom: 1.75rem; }
.underwrite-grid { grid-template-columns: 1fr; }
.underwrite-card { min-height: 0; }
.method-headline { font-size: var(--font-2xl); }
}
/* ==========================================================================
OUR INVESTORS — Hero, Standard, Profile Bento, Initiate CTA
========================================================================== */
/* Hero */
.investors-hero {
background: var(--cream);
padding: 4.5rem 0 4.5rem;
}
.investors-hero .label { margin-bottom: var(--space-6); }
.investors-hero-headline {
font-size: clamp(2.75rem, 7vw, 5rem);
font-weight: 900;
line-height: var(--leading-flat);
letter-spacing: var(--tracking-tighter);
color: var(--black);
margin: 0 0 3rem;
text-wrap: balance;
}
.investors-hero-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: var(--space-7);
align-items: start;
}
.investors-hero-body {
font-size: var(--font-base);
line-height: var(--leading-relaxed);
color: var(--gray);
max-width: 56ch;
margin: 0;
}
.investors-hero-quote {
background: rgba(26, 26, 26, 0.04);
border-radius: var(--radius-md);
padding: 1.5rem 1.75rem;
align-self: end;
}
.investors-hero-quote p {
font-style: italic;
font-size: var(--font-sm);
line-height: var(--leading-relaxed);
color: var(--gray);
margin: 0;
}
/* The Navrist Standard */
.standard-section {
background: var(--cream);
padding: 2rem 0 6rem;
}
.standard-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--space-10);
align-items: center;
}
.standard-image {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--black);
}
.standard-image img,
.standard-image-fill {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.standard-image-fill {
background:
linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.5) 100%),
repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 24px),
linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}
.standard-image-card {
position: absolute;
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
background: var(--white);
padding: 1.5rem 1.75rem 1.75rem;
border-radius: var(--radius-sm);
max-width: 320px;
}
.standard-image-card h4 {
font-size: var(--font-lg);
font-weight: 700;
color: var(--black);
margin: 0 0 0.75rem;
}
.standard-image-card p {
font-size: var(--font-sm);
line-height: var(--leading-normal);
color: var(--gray);
margin: 0;
}
.standard-headline {
font-size: var(--font-2xl);
font-weight: 800;
color: var(--black);
letter-spacing: var(--tracking-tight);
margin: 0 0 2.5rem;
}
.standard-item {
display: grid;
grid-template-columns: 40px 1fr;
gap: var(--space-5);
margin-bottom: var(--space-6);
}
.standard-item:last-child { margin-bottom: 0; }
.standard-icon { color: var(--teal); padding-top: 0.1rem; }
.standard-item-body h3 {
font-size: var(--font-base);
font-weight: 700;
color: var(--black);
margin: 0 0 0.4rem;
}
.standard-item-body p {
font-size: var(--font-sm);
line-height: var(--leading-relaxed);
color: var(--gray);
margin: 0;
}
/* Investor Profile — Bento */
.profile-section {
background: var(--cream);
padding: 2rem 0 6rem;
}
.profile-heading { margin-bottom: var(--space-7); max-width: 58ch; }
.profile-heading .section-headline { font-size: var(--font-2xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); }
.profile-heading .section-body { font-size: var(--font-base); }
.profile-bento {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
grid-template-rows: auto auto;
gap: var(--space-5);
}
.profile-tile {
background: rgba(26, 26, 26, 0.05);
border-radius: var(--radius-md);
padding: 1.75rem 1.75rem 2rem;
display: flex;
flex-direction: column;
}
.profile-tile--feature {
grid-column: 1;
grid-row: 1 / -1;
background: var(--navy);
color: var(--white);
padding: 2.5rem 2rem 2.25rem;
position: relative;
overflow: hidden;
}
.profile-tile--feature::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 25% 20%, rgba(26, 122, 109, 0.18), transparent 60%);
pointer-events: none;
}
.profile-tile--feature > * { position: relative; }
.profile-tile-eyebrow {
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--color-on-dark-muted);
margin-bottom: var(--space-5);
}
.profile-tile--feature .profile-tile-title { font-size: var(--font-2xl); color: var(--white); margin-bottom: var(--space-4); }
.profile-tile--feature .profile-tile-body { color: var(--color-on-dark-muted); font-size: var(--font-base); }
.profile-tile-title {
font-size: var(--font-lg);
font-weight: 700;
color: var(--black);
margin: 0 0 0.6rem;
line-height: var(--leading-snug);
}
.profile-tile-body {
font-size: var(--font-sm);
line-height: var(--leading-normal);
color: var(--gray);
margin: 0;
flex: 1;
}
.profile-tile-icon { color: var(--teal); margin-bottom: var(--space-4); }
.profile-tile-footer {
margin-top: auto;
padding-top: var(--space-7);
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--white);
}
.profile-tile-rule {
display: inline-block;
width: 40px;
height: 1px;
background: var(--teal);
}
.profile-tile--small { grid-column: span 1; }
.profile-tile--wide {
grid-column: 2 / -1;
grid-row: 2;
border-left: 3px solid var(--teal);
background: rgba(26, 26, 26, 0.05);
padding: 1.5rem 1.75rem 1.75rem;
position: relative;
}
.profile-tile-mark {
position: absolute;
right: 1.5rem;
bottom: 1.25rem;
color: rgba(26, 26, 26, 0.18);
}
/* Initiate a Conversation */
.initiate-section {
background: var(--navy);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.initiate-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(26, 122, 109, 0.1), transparent 60%);
pointer-events: none;
}
.initiate-block {
position: relative;
text-align: center;
max-width: 720px;
}
.initiate-headline {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--white);
letter-spacing: var(--tracking-tight);
margin: 0 0 1rem;
}
.initiate-body {
font-size: var(--font-base);
line-height: var(--leading-relaxed);
color: var(--color-on-dark-muted);
margin: 0 auto 2.5rem;
max-width: 56ch;
}
.initiate-ctas {
display: inline-flex;
gap: var(--space-4);
flex-wrap: wrap;
justify-content: center;
}
.initiate-btn {
padding: 1rem 2.25rem;
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
border-radius: var(--radius-sm);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.initiate-btn--primary {
background: var(--white);
color: var(--black);
border: 1px solid var(--white);
}
.initiate-btn--primary:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }
.initiate-btn--outline {
background: transparent;
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.initiate-btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
/* Investors — responsive */
@media (max-width: 900px) {
.investors-hero { padding: 3rem 0; }
.investors-hero-grid { grid-template-columns: 1fr; }
.standard-section { padding-top: var(--space-8); padding-bottom: var(--space-10); }
.standard-grid { grid-template-columns: 1fr; gap: var(--space-7); }
.standard-image { aspect-ratio: 4 / 3; }
.standard-image-card { max-width: none; }
.profile-section { padding-bottom: var(--space-10); }
.profile-bento { grid-template-columns: 1fr 1fr; }
.profile-tile--feature { grid-column: 1 / -1; grid-row: auto; }
.profile-tile--wide { grid-column: 1 / -1; grid-row: auto; }
.initiate-section { padding: 4rem 0; }
}
@media (max-width: 600px) {
.investors-hero-headline { font-size: clamp(2.25rem, 9vw, 3rem); }
.profile-bento { grid-template-columns: 1fr; }
.profile-tile--small { grid-column: 1; }
.initiate-ctas { flex-direction: column; width: 100%; }
.initiate-btn { width: 100%; }
/* Standard image-card: flow below the image instead of overlaying it on phone-sized
viewports — overlay ate 55-65% of the image on narrow screens. */
.standard-image { aspect-ratio: 16 / 10; }
.standard-image-card {
position: static;
left: auto; right: auto; bottom: auto;
margin-top: var(--space-4);
padding: 1.25rem 1.5rem 1.5rem;
}
}
/* ==========================================================================
INVESTOR RESOURCES — Hero, Featured, Filings, Compliance, Desk
========================================================================== */
/* Hero */
.resources-hero {
background: var(--cream);
padding: 4.5rem 0 3rem;
}
.resources-hero .label { margin-bottom: var(--space-5); }
.resources-hero-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--space-8);
align-items: end;
}
.resources-hero-main { max-width: 58ch; }
.resources-hero-headline {
font-size: var(--font-4xl);
font-weight: 900;
line-height: var(--leading-flat);
letter-spacing: var(--tracking-tighter);
color: var(--black);
margin: 0 0 1.5rem;
}
.resources-hero-body {
font-size: var(--font-base);
line-height: var(--leading-relaxed);
color: var(--gray);
max-width: 56ch;
margin: 0;
}
.resources-hero-meta {
background: rgba(26, 26, 26, 0.04);
border-left: 3px solid var(--teal);
padding: 1.5rem 1.75rem;
display: flex;
flex-direction: column;
gap: var(--space-2);
justify-self: end;
min-width: 260px;
}
.resources-hero-meta-label {
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--gray);
}
.resources-hero-meta-value {
font-size: var(--font-lg);
font-weight: 700;
color: var(--black);
}
/* Featured resources */
.featured-resources { background: var(--cream); padding: 2rem 0 4rem; }
.featured-grid {
display: grid;
grid-template-columns: 1.75fr 1fr;
gap: var(--space-5);
}
.resource-feature {
border-radius: var(--radius-md);
padding: 2.25rem 2rem 2rem;
display: flex;
flex-direction: column;
gap: var(--space-5);
position: relative;
}
.resource-feature--light {
background: var(--white);
border: 1px solid var(--color-ink-subtle);
}
.resource-feature--dark {
background: var(--navy);
color: var(--white);
}
.resource-feature-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-2);
}
.resource-feature-icon { color: var(--teal); }
.resource-feature-code {
background: rgba(26, 26, 26, 0.05);
border-radius: var(--radius-sm);
padding: 0.35rem 0.75rem;
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--black);
}
.resource-feature--dark .resource-feature-icon { display: inline-block; }
.resource-feature-title {
font-size: var(--font-xl);
font-weight: 700;
margin: 0;
color: var(--black);
}
.resource-feature--dark .resource-feature-title { color: var(--white); }
.resource-feature-body {
font-size: var(--font-base);
line-height: var(--leading-relaxed);
color: var(--gray);
margin: 0;
max-width: 62ch;
flex: 1;
}
.resource-feature--dark .resource-feature-body { color: var(--color-on-dark-muted); }
.resource-feature-downloads {
display: flex;
gap: var(--space-6);
flex-wrap: wrap;
margin-top: var(--space-2);
}
.resource-download {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--black);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--black);
transition: color 0.2s ease, border-color 0.2s ease;
}
.resource-download:hover { color: var(--teal); border-color: var(--teal); }
.resource-feature-cta {
display: inline-block;
background: var(--white);
color: var(--black);
padding: 1rem 2rem;
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
border-radius: var(--radius-sm);
text-align: center;
transition: background 0.2s ease, color 0.2s ease;
align-self: flex-start;
margin-top: var(--space-2);
}
.resource-feature-cta:hover { background: var(--teal); color: var(--white); }
/* Regulatory filings */
.filings-section { background: var(--cream); padding: 2rem 0 4rem; }
.filings-block {
background: rgba(26, 26, 26, 0.03);
border-radius: var(--radius-md);
padding: 2.5rem;
}
.filings-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-5);
margin-bottom: var(--space-5);
flex-wrap: wrap;
}
.filings-title { font-size: var(--font-xl); font-weight: 800; margin: 0; color: var(--black); }
.filings-filter { display: inline-flex; align-items: center; gap: var(--space-3); }
.filings-filter-label {
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--gray);
}
.filings-filter-control { position: relative; display: inline-flex; align-items: center; }
.filings-filter-control select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
border-bottom: 1px solid rgba(26, 26, 26, 0.25);
padding: 0.65rem 1.5rem 0.65rem 0;
min-height: 44px;
font-family: inherit;
font-size: 16px; /* 16px prevents iOS Safari zoom-on-focus; letter-spacing kept for look */
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--black);
cursor: pointer;
}
.filings-filter-control svg { position: absolute; right: 0; pointer-events: none; color: var(--black); }
.filings-table {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.filings-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 60px;
gap: var(--space-4);
align-items: center;
padding: 1.15rem 1.25rem;
background: var(--white);
border-radius: var(--radius-md);
}
.filings-row--head {
background: transparent;
padding: 0.25rem 1.25rem 0.5rem;
}
.filings-row--head span {
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--gray);
}
.filings-cell { font-size: var(--font-sm); color: var(--black); }
.filings-cell--name { font-weight: 700; }
.filings-cell--muted { color: var(--gray); }
.filings-col-ref { text-align: right; }
.filings-ref {
display: inline-flex;
width: 44px; height: 44px;
align-items: center;
justify-content: center;
color: var(--teal);
border-radius: var(--radius-md);
transition: background 0.2s ease;
}
.filings-ref:hover { background: var(--color-brand-soft); }
/* Compliance Declarations */
.compliance-section { background: var(--cream); padding: 2rem 0 4rem; }
.compliance-title { font-size: var(--font-2xl); font-weight: 800; margin: 0 0 2.5rem; color: var(--black); letter-spacing: var(--tracking-tight); }
.compliance-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: start;
}
.compliance-items { display: flex; flex-direction: column; gap: var(--space-6); }
.compliance-item {
padding-left: var(--space-5);
border-left: 1px solid var(--color-ink-subtle);
}
.compliance-item h4 {
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--black);
margin: 0 0 0.75rem;
}
.compliance-item p {
font-size: var(--font-sm);
line-height: var(--leading-relaxed);
color: var(--gray);
margin: 0;
}
.compliance-quote {
background: var(--navy);
border-radius: var(--radius-md);
padding: 2.5rem 2.5rem 2rem;
color: var(--white);
position: relative;
overflow: hidden;
}
.compliance-quote::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 10%, rgba(26, 122, 109, 0.14), transparent 55%);
pointer-events: none;
}
.compliance-quote-mark { display: block; margin-bottom: var(--space-3); position: relative; }
.compliance-quote-text {
font-style: italic;
font-size: var(--font-lg);
line-height: var(--leading-normal);
color: var(--white);
margin: 0 0 1.75rem;
position: relative;
font-weight: 500;
}
.compliance-quote-attr {
display: flex;
flex-direction: column;
gap: var(--space-1);
position: relative;
}
.compliance-quote-role {
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--teal);
}
.compliance-quote-org {
font-size: var(--font-sm);
color: var(--color-on-dark-muted);
}
/* Compliance Desk CTA */
.compliance-desk-section { background: var(--cream); padding: 0 0 5rem; }
.compliance-desk {
background: rgba(26, 26, 26, 0.05);
border-radius: var(--radius-md);
padding: 3rem 2rem;
text-align: center;
max-width: 780px;
margin: 0 auto;
}
.compliance-desk-title { font-size: var(--font-xl); font-weight: 800; margin: 0 0 0.75rem; color: var(--black); }
.compliance-desk-body {
font-size: var(--font-base);
line-height: var(--leading-relaxed);
color: var(--gray);
max-width: 52ch;
margin: 0 auto 2rem;
}
.compliance-desk-ctas {
display: inline-flex;
gap: var(--space-4);
flex-wrap: wrap;
justify-content: center;
}
.compliance-desk-btn {
padding: 1rem 1.75rem;
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
border-radius: var(--radius-sm);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.compliance-desk-btn--primary {
background: var(--black);
color: var(--white);
border: 1px solid var(--black);
}
.compliance-desk-btn--primary:hover { background: var(--teal); border-color: var(--teal); }
.compliance-desk-btn--outline {
background: transparent;
color: var(--black);
border: 1px solid rgba(26, 26, 26, 0.25);
}
.compliance-desk-btn--outline:hover { border-color: var(--black); background: rgba(26, 26, 26, 0.04); }
/* Resources — responsive */
@media (max-width: 900px) {
.resources-hero { padding: 3rem 0 2rem; }
.resources-hero-grid { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.resources-hero-meta { justify-self: start; min-width: 0; }
.featured-grid { grid-template-columns: 1fr; }
.filings-block { padding: 1.75rem; }
.filings-row { grid-template-columns: 2fr 1fr 48px; }
.filings-row .filings-cell:nth-child(3) { display: none; }
.filings-row--head span:nth-child(3) { display: none; }
.compliance-grid { grid-template-columns: 1fr; gap: var(--space-6); }
.compliance-desk { padding: 2.5rem 1.5rem; }
}
@media (max-width: 600px) {
.resources-hero-headline { font-size: clamp(2rem, 9vw, 2.75rem); }
.featured-grid { gap: var(--space-4); }
.resource-feature { padding: 2rem 1.5rem 1.75rem; }
.resource-feature-downloads { flex-direction: column; gap: var(--space-4); }
.filings-block { padding: 1.25rem; }
/* Filings table on mobile: name on top, "REGULATOR · DATE" as a muted meta line below,
reference icon right-aligned and vertically centered. Switch from grid to flex so
the two meta cells can sit inline on one visual row. */
.filings-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.1rem 0.5rem;
padding: var(--space-3) 0 var(--space-3) 0;
padding-right: 52px; /* reserve space for the 44px reference button */
position: relative;
}
.filings-row .filings-cell:nth-child(1) { flex: 1 1 100%; order: 1; }
.filings-row .filings-cell:nth-child(2),
.filings-row .filings-cell:nth-child(3) {
order: 2;
font-size: var(--font-2xs);
color: var(--gray);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.filings-row .filings-cell:nth-child(3)::before { content: '·'; padding: 0 0.35rem; color: var(--gray); }
.filings-row .filings-col-ref {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
text-align: right;
}
.filings-row--head { display: none; }
.filings-cell--name { font-weight: 700; }
/* Empty-state row: center the message full-width without the reserved ref slot. */
.filings-row--empty { padding-right: 0; justify-content: center; }
.filings-row--empty .filings-cell { flex: 1 1 100%; text-align: center; }
.compliance-quote { padding: 2rem 1.75rem 1.5rem; }
.compliance-desk-ctas { flex-direction: column; width: 100%; }
.compliance-desk-btn { width: 100%; }
}
.single-thumb { margin-bottom: var(--space-6); border-radius: var(--radius-xl); overflow: hidden; }
.single-footer { margin-top: 4rem; padding-top: var(--space-6); border-top: 1px solid var(--gray-light); }
/* ==========================================================================
SINGLE POST (Editorial)
========================================================================== */
.single-post { background: var(--white); }
.single-hero {
background: var(--cream);
padding: 2rem 0 4rem;
}
.single-hero-topbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding-bottom: var(--space-6);
margin-bottom: var(--space-8);
border-bottom: 1px solid var(--color-ink-subtle);
font-size: var(--font-2xs);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--gray);
}
.single-hero-back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--teal);
transition: color 0.18s ease, transform 0.18s ease;
}
.single-hero-back:hover { color: var(--black); transform: translateX(-2px); }
.single-hero-back svg { flex-shrink: 0; transition: transform 0.18s ease; }
.single-hero-back:hover svg { transform: translateX(-2px); }
.single-hero-topbar-sep { color: var(--gray-light); font-weight: 400; }
.single-hero-topbar-cat { color: var(--black); }
.single-hero-content { max-width: 1000px; }
.single-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-5);
font-size: var(--font-2xs);
letter-spacing: var(--tracking-wider);
}
.single-hero-eyebrow-icon {
display: inline-flex;
align-items: center;
line-height: 0;
}
.single-hero-eyebrow-icon svg { display: block; }
.single-hero-title {
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
font-weight: 900;
line-height: var(--leading-flat);
letter-spacing: var(--tracking-tighter);
color: var(--black);
max-width: 22ch;
margin: 0 0 1.5rem;
text-wrap: balance;
}
.single-hero-deck {
font-size: var(--font-lg);
line-height: var(--leading-normal);
color: var(--gray);
max-width: 62ch;
margin: 0 0 2rem;
font-weight: 400;
text-wrap: pretty;
}
.single-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.7rem;
padding-top: var(--space-5);
border-top: 1px solid var(--color-ink-subtle);
max-width: 62ch;
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--gray);
}
.single-hero-meta-sep { color: var(--gray-light); }
.single-hero-meta-item { white-space: nowrap; }
.single-hero-image {
margin: -3rem 0 3rem;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--gray-light);
position: relative;
z-index: 1;
}
.single-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.post-body {
max-width: 68ch;
margin: 0 auto;
padding: 2rem 0 4rem;
font-size: var(--font-lg);
line-height: var(--leading-relaxed);
color: var(--black);
}
.post-body p { margin: 0 0 1.25rem; }
.post-body h2 {
font-size: var(--font-2xl);
font-weight: 800;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
margin: 3rem 0 1rem;
color: var(--black);
}
.post-body h3 {
font-size: var(--font-xl);
font-weight: 700;
line-height: var(--leading-snug);
margin: 2rem 0 0.75rem;
color: var(--black);
}
.post-body ul,
.post-body ol {
padding-left: var(--space-5);
margin: 0 0 1.5rem;
}
.post-body li { margin-bottom: var(--space-2); }
.post-body strong { color: var(--black); font-weight: 700; }
.post-body em { font-style: italic; color: var(--gray); }
.post-body a {
color: var(--teal);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.post-body a:hover { color: var(--navy); }
.post-body blockquote {
border-left: 3px solid var(--teal);
padding-left: var(--space-5);
margin: 2rem 0;
font-style: italic;
font-size: var(--font-lg);
line-height: var(--leading-normal);
color: var(--black);
}
.post-body table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
font-size: var(--font-sm);
}
.post-body th {
background: var(--cream);
padding: 0.75rem;
text-align: left;
font-size: var(--font-2xs);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--black);
border-bottom: 1px solid var(--gray-light);
}
.post-body td {
padding: 0.75rem;
border-bottom: 1px solid var(--gray-light);
vertical-align: top;
}
.post-body code {
background: var(--cream);
padding: 0.15em 0.4em;
border-radius: var(--radius-sm);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.9em;
}
.post-body pre {
background: var(--cream);
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
overflow-x: auto;
margin: 2rem 0;
font-size: var(--font-sm);
line-height: var(--leading-normal);
}
.post-body pre code { background: transparent; padding: 0; }
.post-body img {
display: block;
max-width: 100%;
height: auto;
margin: 2rem 0;
border-radius: var(--radius-md);
}
.post-body hr,
.post-body-divider {
border: 0;
border-top: 1px solid var(--gray-light);
margin: 3rem 0;
}
.post-body-disclaimer {
font-size: 0.8125rem;
color: var(--gray);
margin: 0;
}
@media (max-width: 900px) {
.single-hero { padding: 1.5rem 0 3rem; }
.single-hero-topbar { padding-bottom: var(--space-5); margin-bottom: 2.25rem; }
.single-hero-title { max-width: none; }
.single-hero-deck { font-size: var(--font-lg); }
.single-hero-image { margin-top: -2rem; }
}
@media (max-width: 600px) {
.single-hero { padding: 1.25rem 0 2.5rem; }
.single-hero-topbar { flex-wrap: wrap; font-size: var(--font-2xs); }
.single-hero-title { font-size: var(--font-2xl); letter-spacing: var(--tracking-tight); }
.single-hero-deck { font-size: var(--font-base); margin-bottom: var(--space-5); }
.single-hero-meta { font-size: var(--font-2xs); letter-spacing: var(--tracking-wider); }
.single-hero-image { margin: -1.5rem 0 2rem; }
.post-body { font-size: var(--font-base); padding: 1.5rem 0 3rem; }
.post-body h2 { font-size: var(--font-xl); }
.post-body h3 { font-size: var(--font-lg); }
.post-body img { margin: 1.25rem 0; }
.post-body table { display: block; overflow-x: auto; white-space: nowrap; }
}