/* =========================================================================
Key2Nest V3 — Warm material palette · Source Serif 4 + Source Sans 3
Single navy. Antique brass. Cream. Subtle paper texture.
========================================================================= */
:root {
--ink: #06111E;
--navy-deep: #06111E;
--navy: #0B1A2E;
--navy-rgb: 11, 26, 46;
--navy-900: var(--navy);
--navy-800: var(--navy);
--navy-700: var(--navy);
--navy-600: var(--navy);
--navy-500: var(--navy);
/* 22K brushed metallic gold — warm honey/amber undertones, satin finish */
--brass-900: #6E4B08;
--brass-800: #8B600A;
--brass-700: #A8740B;
--brass-600: #C89B1E;
--brass-500: #D4AF37;
--brass-rgb: 212, 175, 55;
--brass-400: #F6D96A;
--brass-300: #FFF3C4;
--cream: #F4EFE3;
--cream-soft: #FAF6EC;
--cream-warm: #EDE5D2;
--cream-rgb: 244, 239, 227;
--text-primary: var(--cream);
--text-secondary: rgba(var(--cream-rgb), 0.82);
--text-muted: rgba(var(--cream-rgb), 0.66);
--text-quiet: rgba(var(--cream-rgb), 0.62);
--elev-1: rgba(var(--cream-rgb), 0.025);
--elev-2: rgba(var(--cream-rgb), 0.045);
--elev-3: rgba(var(--cream-rgb), 0.07);
--tint-brass-soft: rgba(var(--brass-rgb), 0.05);
--tint-brass: rgba(var(--brass-rgb), 0.08);
--hairline: rgba(var(--brass-rgb), 0.16);
--hairline-soft: rgba(var(--brass-rgb), 0.09);
/* Cool counter-light — used only for atmospheric orbs, never for text/UI */
--teal: #3D7A85;
--teal-rgb: 61, 122, 133;
/* ===== Type scale (Major Third 1.25 ratio, anchored at 16px) =====
13 · 16 · 20 · 25 · 31 · 39 · 49 · 61 · 76 · 95 */
--fs-13: 13px;
--fs-16: 16px;
--fs-20: 20px;
--fs-25: 25px;
--fs-31: 31px;
--fs-39: 39px;
--fs-49: 49px;
--fs-61: 61px;
--fs-76: 76px;
--fs-95: 95px;
/* ===== Spacing scale (4-pt grid) =====
4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 56 · 64 · 80 · 96 · 128 */
--sp-4: 4px;
--sp-8: 8px;
--sp-12: 12px;
--sp-16: 16px;
--sp-20: 20px;
--sp-24: 24px;
--sp-28: 28px;
--sp-32: 32px;
--sp-40: 40px;
--sp-48: 48px;
--sp-56: 56px;
--sp-64: 64px;
--sp-80: 80px;
--sp-96: 96px;
--sp-128: 128px;
/* Section vertical rhythm — Rev11 fit pass: each section targets one viewport */
--section-y: clamp(48px, 4.5vw, 64px);
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-in: cubic-bezier(0.6, 0, 0.8, 0.2);
--ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);
--shadow-pill: 0 0 0 1px rgba(var(--brass-rgb), 0.22),
0 10px 28px -10px rgba(0, 0, 0, 0.55),
0 0 24px -8px rgba(var(--brass-rgb), 0.2);
--paper-noise: url("data:image/svg+xml;utf8,");
/* Liquid-gold shimmer — champagne highlight band + top-edge glow over gold surfaces */
--gold-shimmer:
linear-gradient(135deg, transparent 15%, rgba(255, 243, 196, 0.4) 30%, rgba(255, 243, 196, 0.15) 50%, transparent 65%),
radial-gradient(ellipse 140% 100% at 50% 0%, rgba(246, 217, 106, 0.35) 0%, transparent 55%);
/* Gold as TEXT — bright on navy; the light theme deepens these for contrast.
Gold as SURFACE (buttons, badges, sliders) keeps the bright ramp in both themes. */
--gold-text: var(--brass-400);
--gold-text-strong: var(--brass-300);
--gold-text-mid: var(--brass-500);
/* ===== Semantic status (Rev10) — desaturated, harmonized with navy/gold/ivory.
Success = sage, Warning = copper (kept distinct from brand gold),
Error = refined red, Info = the teal counter-light already in the system. ===== */
--success-text: #8FCB9B;
--success-base: #4A8C60;
--success-bg: rgba(74, 140, 96, 0.12);
--success-border: rgba(122, 178, 138, 0.38);
--warning-text: #E8B07C;
--warning-base: #C87E3D;
--warning-bg: rgba(200, 126, 61, 0.12);
--warning-border: rgba(216, 156, 100, 0.38);
--error-text: #F4A9A9;
--error-base: #B3372F;
--error-bg: rgba(190, 60, 50, 0.10);
--error-border: rgba(220, 110, 100, 0.38);
--info-text: #8FC5CE;
--info-base: #3D7A85;
--info-bg: rgba(61, 122, 133, 0.12);
--info-border: rgba(120, 175, 184, 0.38);
/* ===== Elevation scale (Rev10) — near shadow for definition + far shadow for depth ===== */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 28px -14px rgba(0, 0, 0, 0.4);
--shadow-2: 0 2px 4px rgba(0, 0, 0, 0.24), 0 18px 44px -16px rgba(0, 0, 0, 0.5);
--shadow-3: 0 4px 10px rgba(0, 0, 0, 0.3), 0 28px 64px -20px rgba(0, 0, 0, 0.55);
--shadow-4: 0 12px 28px rgba(0, 0, 0, 0.4), 0 48px 110px -24px rgba(0, 0, 0, 0.6);
--focus-ring: var(--brass-400);
--disabled-opacity: 0.45;
/* Transient gold wash on the loan-type select when a program card pre-fills
it. Gold in both themes (--brass-rgb has no light override), so no flip. */
--prefill-pulse: rgba(var(--brass-rgb), 0.18);
}
html {
scroll-behavior: smooth;
/* Anchor jumps land with the nav already in its scrolled state (88px), so
clear that plus a 16px breath. Was 96px against a 148px bar — section
headings were landing underneath the header. */
scroll-padding-top: 104px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--navy);
color: var(--text-primary);
font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "ss01", "cv11";
overflow-x: hidden;
font-variation-settings: "wght" 400;
letter-spacing: -0.005em;
}
.font-display, h1, h2, h3, .font-display * {
font-family: "Source Serif 4", ui-serif, Georgia, serif;
}
img { max-width: 100%; height: auto; display: block; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--brass-600), var(--brass-800));
border-radius: 8px;
border: 2px solid var(--navy-deep);
}
a, button { -webkit-tap-highlight-color: transparent; }
/* Text selection — brand gold ground, navy ink, in BOTH themes.
The browser default washed out to near-white over the ivory light theme and
was hard to read. #D4AF37 against #0B1A2E is 8.31:1, so a single treatment
is legible on navy and ivory alike — no per-theme override needed.
Navy is pinned as a literal because the token flips between themes. */
::selection {
background: var(--brass-500);
color: #0B1A2E;
text-shadow: none;
}
::-moz-selection {
background: var(--brass-500);
color: #0B1A2E;
text-shadow: none;
}
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -10000px;
top: 12px;
background: var(--brass-500);
color: #06111E;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
z-index: 9999;
}
.skip-link:focus { left: 12px; }
[data-reveal] {
opacity: 0;
transform: translate3d(0, 24px, 0);
will-change: opacity, transform;
}
[data-reveal="split"] { opacity: 1; transform: none; }
.hero-line {
display: block;
overflow: hidden;
line-height: 1.04;
padding-bottom: 0.06em;
}
.hero-line-inner {
display: inline-block;
transform: translate3d(0, 110%, 0);
opacity: 0;
will-change: transform, opacity;
}
.no-anim [data-reveal] { opacity: 1; transform: none; }
/* ===================== Brand mark ===================== */
.brand-mark {
display: inline-flex;
align-items: center;
gap: 12px;
transition: transform 350ms var(--ease-luxe);
}
.brand-mark:hover { transform: translateY(-1px); }
.brand-wordmark {
font-family: "Source Serif 4", ui-serif, Georgia, serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--cream);
font-variation-settings: "opsz" 24, "wght" 500;
line-height: 1;
}
.brand-wordmark-lg {
font-size: 30px;
font-variation-settings: "opsz" 36, "wght" 500;
}
/* Logo plaque — soft parchment backing for the transparent logo, refined breathing room */
.logo-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #EBE1C5 0%, #DBCFB2 100%);
padding: 8px 14px;
border-radius: 12px;
box-shadow:
0 0 0 1px rgba(var(--brass-rgb), 0.28),
0 14px 36px -16px rgba(0, 0, 0, 0.55),
0 0 32px -12px rgba(var(--brass-rgb), 0.2);
position: relative;
overflow: hidden;
flex-shrink: 0;
transition: transform 350ms var(--ease-luxe), box-shadow 350ms var(--ease-out);
}
.brand-mark:hover .logo-pill {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(var(--brass-rgb), 0.34),
0 20px 46px -16px rgba(0, 0, 0, 0.6),
0 0 46px -8px rgba(var(--brass-rgb), 0.34);
}
.logo-pill::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.55), transparent 60%);
pointer-events: none;
}
.logo-pill::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(var(--brass-rgb), 0.42);
pointer-events: none;
}
/* --logo-h is the target height of the VISIBLE mark, not of the image file.
The brand PNGs (Logo_LV/Logo_DV) are 1024×1024 with the artwork occupying
only ~72% W × ~51% H; the rest is transparent padding. The .logo-img rule
below scales the file up so the mark lands at --logo-h, then pulls the
padding back with negative margins so the layout box still measures the
mark. Set --logo-h anywhere you would previously have set height. */
.logo-pill img {
--logo-h: 68px;
display: block;
position: relative;
z-index: 1;
}
.brand-mark-logo-only .logo-pill img { --logo-h: 96px; }
/* The header lockup is the mark alone. The company NMLS is disclosed in the
hero trust row, the team cards, the footer and the legal pages — it does not
also need to ride under the nav logo, where it forced the pill into a column
and inflated the bar. .logo-pill-nmls / .logo-nmls removed with it. */
.logo-pill-lg { padding: 18px 24px; border-radius: 18px; }
.logo-pill-lg img { --logo-h: 170px; }
.brand-mark-logo-only.brand-mark-footer .logo-pill {
padding: 14px 22px;
border-radius: 16px;
/* Same parchment as header — unified treatment, slightly lighter than before */
background: linear-gradient(180deg, #EBE1C5 0%, #DBCFB2 100%);
box-shadow:
0 0 0 1px rgba(var(--brass-rgb), 0.35),
0 22px 48px -20px rgba(0, 0, 0, 0.7),
0 0 44px -16px rgba(var(--brass-rgb), 0.2);
}
.brand-mark-logo-only.brand-mark-footer .logo-pill::after {
border-color: rgba(var(--brass-rgb), 0.4);
}
.brand-mark-logo-only.brand-mark-footer .logo-pill img { --logo-h: 186px; }
@media (max-width: 768px) {
.brand-mark-logo-only .logo-pill { padding: 8px 12px; }
.brand-mark-logo-only .logo-pill img { --logo-h: 80px; }
.brand-mark-logo-only.brand-mark-footer .logo-pill { padding: 14px 20px; }
.brand-mark-logo-only.brand-mark-footer .logo-pill img { --logo-h: 168px; }
}
/* Geometry for the supplied 1024×1024 brand PNGs.
The artwork sits inside a square canvas with a lot of empty space around it
(mark ≈ 72% W × 51% H, its own aspect ≈ 1.41:1). Rather than move the image
with negative margins — which dragged the NMLS line up against the mark and
pulled the logo into the header edge — the image is framed at the mark's own
aspect and object-fit:cover trims the dead canvas.
· cover scales uniformly, so the artwork is never stretched or squashed
· the visible window is 1/1.41 ≈ 71% of the source height, and the mark
only occupies 51%, so nothing of the artwork is ever clipped
· the layout box is exactly what you see, so both themes measure the same
and there is no shift when the src swaps
--logo-h is the BOX height; the visible mark lands at ≈ 0.72 × that. */
.logo-img {
height: var(--logo-h, 68px);
width: calc(var(--logo-h, 68px) * 1.41);
object-fit: cover;
object-position: center;
}
/* Header lockup presence — +17% on the VISIBLE mark, zero layout cost.
Because object-fit:cover scales the square source to the window's WIDTH, the
mark's size is set by the window width alone: mark = 0.51 × W tall,
0.72 × W wide. So the only way to grow the mark is to grow the window.
· widen the window by --logo-grow, and raise its height by the same factor
so the taller mark still isn't clipped (H/W stays 0.71, mark needs 0.51)
· pull both back with negative margins, so the element still OCCUPIES
exactly --logo-h × 1.41--logo-h — the same footprint as before
The extra is transparent canvas, so nothing moves: bar heights, block
padding, vertical centring, nav spacing and CTA position are all untouched,
and the mark stays centred because the growth is symmetrical. Applied to
both site headers; the footer lockup keeps the plain geometry above. */
.site-nav .logo-pill img,
.legal-nav .logo-pill img {
--logo-grow: 1.17;
--logo-pull: -0.085; /* (1 − --logo-grow) ÷ 2 */
/* The global `img { max-width: 100% }` reset (line 163) resolves against the
pill, which is itself sized from this image — so it silently clamped the
widened window straight back to the old width. The window is deliberately
wider than its own footprint here; opt this one image out of the reset. */
max-width: none;
height: calc(var(--logo-h, 68px) * var(--logo-grow));
width: calc(var(--logo-h, 68px) * 1.41 * var(--logo-grow));
margin-block: calc(var(--logo-h, 68px) * var(--logo-pull));
margin-inline: calc(var(--logo-h, 68px) * 1.41 * var(--logo-pull));
}
/* ===================== Nav ===================== */
.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 60;
transition: background-color 400ms var(--ease-out),
backdrop-filter 400ms var(--ease-out),
border-color 400ms var(--ease-out);
border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
background: rgba(11, 26, 46, 0.8);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom-color: var(--hairline-soft);
}
.nav-link {
position: relative;
padding: 6px 2px;
transition: color 200ms var(--ease-out);
font-family: "Source Sans 3", sans-serif;
font-weight: 500;
}
.nav-link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: var(--brass-400);
transform: scaleX(0);
transform-origin: left;
transition: transform 350ms var(--ease-luxe);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-toggle {
width: 40px; height: 40px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
border: 1px solid rgba(var(--cream-rgb), 0.15);
border-radius: 8px;
background: rgba(255,255,255,0.02);
}
.nav-toggle span {
display: block;
width: 16px; height: 1.5px;
background: var(--cream);
transition: transform 300ms var(--ease-out), opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-nav {
background: var(--navy);
border-bottom: 1px solid var(--hairline-soft);
border-top: 1px solid var(--hairline-soft);
}
.mobile-nav[hidden] { display: none; }
.mobile-link {
display: block;
padding: 14px 4px;
font-size: 15px;
letter-spacing: 0.02em;
border-bottom: 1px solid rgba(var(--cream-rgb), 0.06);
}
.mobile-link:active { color: var(--gold-text); }
/* ===================== Buttons ===================== */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: 999px;
font-size: 13px;
letter-spacing: 0.04em;
font-weight: 500;
cursor: pointer;
transition: transform 250ms var(--ease-luxe),
background-color 300ms var(--ease-out),
color 250ms var(--ease-out),
box-shadow 300ms var(--ease-out);
position: relative;
overflow: hidden;
isolation: isolate;
white-space: nowrap;
font-family: "Source Sans 3", sans-serif;
}
.btn-sm { padding: 11px 18px; font-size: 12.5px; }
.btn-block { width: 100%; justify-content: center; }
.btn-primary {
background: var(--gold-shimmer), linear-gradient(135deg, var(--brass-400) 0%, var(--brass-600) 100%);
color: #06111E;
box-shadow: 0 10px 30px -12px rgba(var(--brass-rgb), 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
font-weight: 600;
}
.btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform 700ms var(--ease-out);
z-index: -1;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 14px 38px -10px rgba(var(--brass-rgb), 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-ghost {
background: transparent;
color: var(--text-primary);
border: 1px solid rgba(var(--cream-rgb), 0.22);
}
.btn-ghost:hover {
border-color: var(--gold-text);
color: var(--gold-text-strong);
background: rgba(var(--brass-rgb), 0.06);
}
/* ===================== Hero ===================== */
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 100svh;
background: #06111E; /* literal — the hero keeps its dark cinematic treatment in both themes */
}
/* Still image paints first everywhere; the video fades in above it on desktop.
Mobile, reduced-motion, and save-data visitors keep the imagery. */
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
background: #06111E url("assets/hero-1x.jpg") center 40% / cover no-repeat;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity 1200ms var(--ease-out);
pointer-events: none;
}
.hero-video.is-ready { opacity: 1; }
.hero-overlay {
position: absolute;
inset: 0;
background:
/* Warm brass tint — lifts the amber-window glow into the sky zone */
radial-gradient(130% 70% at 65% 50%, rgba(var(--brass-rgb), 0.08), transparent 65%),
/* Vertical: nav seal at top, transparent mid, seamless blend to navy at bottom */
linear-gradient(180deg, rgba(6, 17, 30, 0.20) 0%, rgba(6, 17, 30, 0.02) 40%, rgba(6, 17, 30, 0.40) 100%),
/* Horizontal: light left-side scrim for headline legibility only */
linear-gradient(90deg, rgba(6, 17, 30, 0.25) 0%, rgba(6, 17, 30, 0.00) 55%);
}
.hero-video {
filter: brightness(1.12) saturate(1.08);
}
.hero-headline, .hero-eyebrow, .hero-sub, .hero-cta-microcopy {
text-shadow: 0 2px 24px rgba(6, 17, 30, 0.45), 0 1px 4px rgba(6, 17, 30, 0.35);
}
.hero-grain {
position: absolute;
inset: 0;
background-image: var(--paper-noise);
opacity: 0.5;
mix-blend-mode: overlay;
pointer-events: none;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 11.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-text-strong);
margin-bottom: 36px;
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.hero-eyebrow-line {
display: inline-block;
width: 48px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--brass-500));
}
.hero-headline {
font-family: "Source Serif 4", serif;
font-size: clamp(52px, 9vw, 124px);
line-height: 0.98;
letter-spacing: -0.022em;
font-weight: 400;
font-variation-settings: "opsz" 60, "wght" 420;
color: var(--cream);
margin: 0 0 36px;
max-width: 14ch;
}
.hero-emphasis {
color: var(--gold-text);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 60, "wght" 400;
}
.hero-sub {
max-width: 58ch;
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 var(--sp-40);
font-weight: 400;
letter-spacing: -0.005em;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero-cta-microcopy {
margin: var(--sp-20) 0 0;
font-size: 12px;
letter-spacing: 0.08em;
color: var(--text-quiet);
font-weight: 400;
font-family: "Source Sans 3", sans-serif;
}
.contact-card-disclaimer {
margin: 4px 0 0;
font-size: 11px;
line-height: 1.4;
color: var(--text-quiet);
font-style: italic;
letter-spacing: 0.01em;
}
.scroll-cue {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--gold-text-strong);
opacity: 0.6;
width: 40px;
height: 40px;
animation: scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes scroll-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
50% { transform: translateX(-50%) translateY(6px); opacity: 0.85; }
}
/* ===================== Trust strip ===================== */
.trust-strip {
background: var(--navy);
padding: 48px 0;
border-top: 1px solid var(--hairline-soft);
border-bottom: 1px solid var(--hairline-soft);
position: relative;
}
.trust-strip::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(70% 100% at 50% 50%, var(--tint-brass-soft), transparent 70%);
pointer-events: none;
}
.trust-grid {
background: var(--hairline);
position: relative;
}
.trust-cell {
background: var(--navy);
padding: 30px 28px;
position: relative;
}
.trust-eyebrow {
font-size: 10.5px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-text);
margin-bottom: 16px;
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.trust-stat {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 60, "wght" 380;
font-size: clamp(36px, 3.6vw, 48px);
line-height: 1;
letter-spacing: -0.025em;
color: var(--cream);
font-weight: 400;
margin: 0 0 14px;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.trust-stat-suffix {
color: var(--gold-text);
font-weight: 400;
}
.trust-stat-unit {
font-size: 0.45em;
color: var(--gold-text-strong);
font-weight: 400;
font-style: italic;
margin-left: 6px;
}
.trust-label {
color: var(--text-secondary);
font-size: 14.5px;
line-height: 1.65;
max-width: 36ch;
}
/* ===================== Sections shared ===================== */
.section {
padding: var(--section-y) 0;
position: relative;
isolation: isolate;
}
/* Soft museum lighting — directional light from above on every section */
.section::before {
content: "";
position: absolute;
inset: 0;
background:
/* Top: brass halo entering from above */
radial-gradient(68% 32% at 50% -4%, rgba(var(--brass-rgb), 0.085), transparent 70%),
/* Body: cream lift at top + deepening at bottom (directional cue) */
linear-gradient(180deg, rgba(var(--cream-rgb), 0.022) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.08) 100%);
pointer-events: none;
z-index: 0;
}
.section > * { position: relative; z-index: 1; }
.section-tinted {
background: var(--navy);
border-top: 1px solid var(--hairline-soft);
border-bottom: 1px solid var(--hairline-soft);
position: relative;
isolation: isolate;
}
/* Tinted sections get a more pronounced directional bloom */
.section-tinted::before {
content: "";
position: absolute;
inset: 0;
background:
/* Anchored brass halo — feels like a single light source above */
radial-gradient(56% 38% at 50% -6%, rgba(var(--brass-rgb), 0.14), transparent 65%),
/* Wider spread to soften the halo's edge */
radial-gradient(110% 50% at 50% 0%, rgba(var(--brass-rgb), 0.06), transparent 72%),
/* Cream lift at top edge for a luminous feel */
linear-gradient(180deg, rgba(var(--cream-rgb), 0.035) 0%, transparent 28%),
/* Vignette deepening at the bottom — light falls off */
linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.1) 100%);
pointer-events: none;
z-index: 0;
}
.section-tinted > * { position: relative; z-index: 1; }
/* ===================== Atmospheric orbs (per section, warm brass + cool teal counter-light) ===================== */
/* Layered above .section::before museum-lighting halo. Pseudo-element overlay only — no DOM changes. */
/* Each section gets one warm brass orb + one cool teal orb, diagonal pairing, opacities tuned for restraint. */
#programs::after,
#calculator::after,
#process::after,
#why::after,
#team::after,
#faq::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
#programs::after {
background:
radial-gradient(46% 42% at -2% -6%, rgba(var(--brass-rgb), 0.16), transparent 62%),
radial-gradient(42% 40% at 102% 106%, rgba(var(--teal-rgb), 0.13), transparent 62%);
}
#calculator::after {
background:
radial-gradient(50% 46% at 104% 22%, rgba(var(--brass-rgb), 0.18), transparent 62%),
radial-gradient(44% 42% at -4% 92%, rgba(var(--teal-rgb), 0.135), transparent 62%);
}
#process::after {
background:
radial-gradient(44% 54% at 108% 50%, rgba(var(--brass-rgb), 0.14), transparent 62%),
radial-gradient(38% 40% at -6% 8%, rgba(var(--teal-rgb), 0.1), transparent 62%);
}
#why::after {
background:
radial-gradient(44% 40% at -4% 4%, rgba(var(--brass-rgb), 0.16), transparent 62%),
radial-gradient(44% 52% at 110% 50%, rgba(var(--teal-rgb), 0.13), transparent 62%);
}
#team::after {
background:
radial-gradient(46% 40% at 0% -4%, rgba(var(--brass-rgb), 0.15), transparent 62%),
radial-gradient(42% 42% at 100% 104%, rgba(var(--teal-rgb), 0.12), transparent 62%);
}
#faq::after {
background:
radial-gradient(44% 40% at 104% -4%, rgba(var(--brass-rgb), 0.16), transparent 62%),
radial-gradient(40% 38% at -4% 104%, rgba(var(--teal-rgb), 0.12), transparent 62%);
}
/* Contact + Pre-footer have their own ::after for paper-noise; fold orbs into their main background stack */
.section-head { max-width: 880px; }
.eyebrow {
font-size: 10.5px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-text);
margin-bottom: 16px;
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--brass-500);
}
.section-title {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 60, "wght" 420;
font-size: clamp(28px, 4vw, 46px);
line-height: 1.08;
letter-spacing: -0.022em;
font-weight: 400;
color: var(--cream);
margin: 0 0 18px;
}
.section-title em, .section-title i {
color: var(--cream);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 60, "wght" 400;
}
.section-lede {
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.65;
color: var(--text-secondary);
max-width: 62ch;
font-weight: 400;
}
/* ===================== Loan Programs ===================== */
.programs-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 1024px) { .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .programs-grid { grid-template-columns: 1fr; } }
.program-card {
display: flex;
flex-direction: column;
padding: 20px 20px;
background:
var(--paper-noise),
linear-gradient(180deg, var(--elev-2) 0%, var(--elev-1) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline-soft);
border-radius: 16px;
transition: border-color 300ms var(--ease-out),
transform 350ms var(--ease-luxe);
position: relative;
overflow: hidden;
min-height: 168px;
}
.program-card:hover {
border-color: var(--hairline);
transform: translateY(-3px);
}
.program-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--hairline);
border-radius: 11px;
color: var(--gold-text);
margin-bottom: 12px;
background: rgba(var(--brass-rgb), 0.05);
}
.program-title {
font-size: 20px;
font-weight: 500;
font-variation-settings: "opsz" 36, "wght" 500;
color: var(--cream);
margin: 0 0 10px;
letter-spacing: -0.01em;
line-height: 1.15;
}
.program-body {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.55;
margin: 0 0 14px;
flex-grow: 1;
}
.program-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold-text);
font-size: 12.5px;
letter-spacing: 0.06em;
font-weight: 500;
transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out), gap 320ms var(--ease-luxe);
align-self: flex-start;
font-family: "Source Sans 3", sans-serif;
padding: 8px 14px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: rgba(var(--brass-rgb), 0.05);
}
.program-link:hover {
gap: 12px;
color: var(--gold-text-strong);
border-color: var(--gold-text);
background: rgba(var(--brass-rgb), 0.12);
}
.program-card-cta {
background:
var(--paper-noise),
linear-gradient(160deg, rgba(var(--brass-rgb), 0.18) 0%, rgba(var(--brass-rgb), 0.04) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border-color: var(--hairline);
}
.program-card-cta:hover { border-color: var(--gold-text-mid); }
/* ===================== Calculator ===================== */
.calc-tabs {
margin-top: 16px;
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px;
background: var(--elev-2);
border: 1px solid var(--hairline);
border-radius: 14px;
}
.calc-tab {
appearance: none;
background: transparent;
border: 0;
color: var(--text-secondary);
padding: 12px 20px;
font-size: 12.5px;
letter-spacing: 0.04em;
font-weight: 500;
border-radius: 10px;
cursor: pointer;
transition: color 220ms var(--ease-out), background 220ms var(--ease-out);
font-family: "Source Sans 3", sans-serif;
white-space: nowrap;
}
.calc-tab:hover { color: var(--cream); }
.calc-tab[aria-selected="true"] {
background: var(--gold-shimmer), linear-gradient(135deg, var(--brass-400), var(--brass-600));
color: #06111E;
font-weight: 600;
box-shadow: 0 6px 18px -8px rgba(var(--brass-rgb), 0.55);
}
.calc-panel { margin-top: 20px; }
.calc-panel[hidden] { display: none; }
.calc-input-stack {
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 22px;
background:
var(--paper-noise),
linear-gradient(180deg, var(--elev-2) 0%, var(--elev-1) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline);
border-radius: 20px;
}
.calc-field { position: relative; }
.calc-field-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 5px;
flex-wrap: wrap;
}
.calc-field-label > .l {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-text);
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.calc-field-input {
display: inline-flex;
align-items: baseline;
gap: 2px;
background: rgba(6, 17, 30, 0.55);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 6px 12px;
transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out);
}
.calc-field-input:focus-within {
border-color: var(--gold-text);
background: rgba(6, 17, 30, 0.85);
}
.calc-field-input .pfx,
.calc-field-input .sfx {
color: var(--gold-text);
font-family: "Source Serif 4", serif;
font-size: 17px;
font-weight: 500;
font-variation-settings: "opsz" 24, "wght" 500;
}
.calc-field-input input {
background: transparent;
border: 0;
color: var(--cream);
font-family: "Source Serif 4", serif;
font-size: 19px;
font-weight: 500;
font-variation-settings: "opsz" 36, "wght" 500;
text-align: right;
font-variant-numeric: tabular-nums;
outline: none;
padding: 0;
width: 7ch;
}
.calc-field-input input.pct { width: 4.5ch; }
.calc-field-input input.short { width: 3.5ch; }
.calc-field-input input::-webkit-outer-spin-button,
.calc-field-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field-input input { -moz-appearance: textfield; }
.calc-dual { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.calc-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg,
var(--brass-500) 0%,
var(--brass-500) var(--calc-fill, 30%),
rgba(var(--cream-rgb), 0.12) var(--calc-fill, 30%),
rgba(var(--cream-rgb), 0.12) 100%);
outline: none;
margin: 2px 0 0;
cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(180deg, var(--brass-300), var(--brass-600));
border: 2px solid var(--navy);
box-shadow: 0 0 0 3px rgba(var(--brass-rgb), 0.2),
0 6px 14px -2px rgba(0, 0, 0, 0.5);
cursor: grab;
transition: transform 200ms var(--ease-out);
}
.calc-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.calc-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.calc-range::-moz-range-thumb {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(180deg, var(--brass-300), var(--brass-600));
border: 2px solid var(--navy);
box-shadow: 0 0 0 3px rgba(var(--brass-rgb), 0.2);
cursor: grab;
}
.calc-range-wrap { position: relative; padding-top: 4px; }
.calc-notches {
position: relative;
height: 16px;
margin-top: 2px;
}
.calc-notch {
position: absolute;
top: 0;
width: 1px;
height: 4px;
background: rgba(var(--brass-rgb), 0.4);
transform: translateX(-50%);
}
.calc-notch-label {
position: absolute;
top: 7px;
font-size: 10px;
color: var(--text-quiet);
letter-spacing: 0.04em;
transform: translateX(-50%);
font-variant-numeric: tabular-nums;
}
.calc-field-meta {
margin-top: 6px;
font-size: 12.5px;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.calc-field-meta strong { color: var(--gold-text); font-weight: 500; }
.calc-field-error {
margin: 6px 0 0;
font-size: 12px;
color: var(--gold-text-strong);
font-style: italic;
min-height: 1em;
}
.calc-center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 26px 20px;
background:
var(--paper-noise),
radial-gradient(circle at center top, var(--tint-brass), transparent 60%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline);
border-radius: 20px;
}
.calc-center-eyebrow {
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-text);
margin-bottom: 8px;
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.calc-center-amount {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 60, "wght" 500;
font-size: clamp(38px, 4vw, 52px);
line-height: 1;
letter-spacing: -0.025em;
font-weight: 500;
color: var(--cream);
margin: 0 0 6px;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
justify-content: center;
}
.calc-center-amount .pfx {
font-size: 0.5em;
color: var(--gold-text);
font-weight: 400;
margin-right: 6px;
font-variation-settings: "opsz" 36, "wght" 400;
}
.calc-center-note {
font-size: 12.5px;
color: var(--text-quiet);
margin: 0 0 14px;
}
.donut-wrap {
position: relative;
width: 100%;
max-width: 178px;
aspect-ratio: 1 / 1;
margin: 0 auto;
}
.donut {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.donut-track {
fill: none;
stroke: rgba(var(--brass-rgb), 0.12);
stroke-width: 14;
}
.donut-seg {
fill: none;
stroke-width: 14;
stroke-linecap: butt;
transition: stroke-dasharray 600ms var(--ease-luxe), stroke-dashoffset 600ms var(--ease-luxe);
}
.donut-seg-pi { stroke: var(--brass-500); }
.donut-seg-tax { stroke: var(--brass-700); }
.donut-seg-ins { stroke: var(--brass-300); }
.donut-seg-hoa { stroke: rgba(var(--cream-rgb), 0.42); }
.donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.donut-center-amount {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 500;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1;
letter-spacing: -0.012em;
color: var(--cream);
font-weight: 500;
margin: 0 0 4px;
font-variant-numeric: tabular-nums;
}
.donut-center-amount .pfx { color: var(--gold-text); font-size: 0.7em; margin-right: 3px; font-weight: 400; }
.donut-center-label {
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.calc-breakdown {
padding: 26px 22px;
background:
var(--paper-noise),
linear-gradient(180deg, var(--elev-1) 0%, var(--elev-2) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline);
border-radius: 20px;
}
.bp-h {
font-size: 10.5px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold-text);
margin: 0 0 20px;
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.bp-rows { display: flex; flex-direction: column; gap: 6px; }
.bp-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--hairline-soft);
}
.bp-row:last-of-type { border-bottom: 0; }
.bp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.bp-dot-pi { background: var(--brass-500); }
.bp-dot-tax { background: var(--brass-700); }
.bp-dot-ins { background: var(--brass-300); }
.bp-dot-hoa { background: rgba(var(--cream-rgb), 0.42); }
.bp-label { font-size: 13.5px; color: var(--text-primary); flex: 1; }
.bp-value {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 24, "wght" 500;
font-size: 16px;
font-weight: 500;
color: var(--cream);
font-variant-numeric: tabular-nums;
}
.bp-input {
width: 100px;
background: rgba(6, 17, 30, 0.55);
border: 1px solid var(--hairline-soft);
border-radius: 8px;
padding: 7px 10px;
color: var(--cream);
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 24, "wght" 500;
font-size: 14.5px;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 500;
outline: none;
transition: border-color 220ms var(--ease-out);
}
.bp-input::placeholder { color: var(--text-quiet); font-style: italic; font-size: 12.5px; }
.bp-input:focus { border-color: var(--gold-text); }
.bp-input::-webkit-outer-spin-button,
.bp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bp-input { -moz-appearance: textfield; }
.bp-total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--hairline);
}
.bp-total-label {
font-size: 12.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-text);
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.bp-total-value {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 500;
font-size: 24px;
font-weight: 500;
color: var(--cream);
font-variant-numeric: tabular-nums;
}
.calc-formula {
margin-top: 12px;
border-top: 1px dashed var(--hairline-soft);
padding-top: 10px;
font-size: 13px;
}
.calc-formula summary {
cursor: pointer;
color: var(--gold-text);
font-size: 12px;
letter-spacing: 0.06em;
font-weight: 500;
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "Source Sans 3", sans-serif;
}
.calc-formula summary::-webkit-details-marker { display: none; }
.calc-formula summary::after {
content: "+";
font-size: 14px;
transition: transform 240ms var(--ease-out);
display: inline-block;
}
.calc-formula[open] summary::after { content: "−"; }
.calc-formula summary:hover { color: var(--gold-text-strong); }
.calc-formula-body {
margin-top: 10px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.6;
}
.calc-formula-body p { margin: 0 0 8px; }
.calc-formula-body p:last-child { margin: 0; }
.calc-formula-body strong { color: var(--cream); font-weight: 500; }
.calc-cta-bridge {
margin: 10px 0 0;
font-size: 12.5px;
line-height: 1.55;
color: var(--text-muted);
font-style: italic;
}
.calc-alt-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 28px;
}
@media (max-width: 900px) { .calc-alt-grid { grid-template-columns: 1fr; } }
.calc-result-card {
padding: 26px 22px;
background:
var(--paper-noise),
radial-gradient(circle at center top, var(--tint-brass), transparent 60%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline);
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 18px;
justify-content: center;
}
.calc-result-row { text-align: center; }
.calc-result-row .ey {
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-text);
margin: 0 0 8px;
font-weight: 500;
font-family: "Source Sans 3", sans-serif;
}
.calc-result-row .big {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 60, "wght" 500;
font-size: clamp(32px, 3.6vw, 44px);
line-height: 1;
letter-spacing: -0.022em;
font-weight: 500;
color: var(--cream);
margin: 0;
font-variant-numeric: tabular-nums;
}
.calc-result-row .big .pfx {
color: var(--gold-text);
font-size: 0.55em;
font-weight: 400;
margin-right: 4px;
font-variation-settings: "opsz" 48, "wght" 400;
}
.calc-result-row .sub { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 0; }
.calc-result-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.calc-result-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.calc-result-grid .mini-row .ey {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-text);
margin: 0;
font-family: "Source Sans 3", sans-serif;
font-weight: 500;
}
.calc-result-grid .mini-row .v {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 36, "wght" 500;
font-size: 19px;
color: var(--cream);
font-weight: 500;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.calc-disclaimer-global {
text-align: center;
margin-top: 16px;
font-size: 11.5px;
color: var(--text-quiet);
line-height: 1.6;
max-width: 64ch;
margin-left: auto;
margin-right: auto;
font-style: italic;
}
/* ===================== Process ===================== */
.process-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0;
}
.process-step {
display: grid;
grid-template-columns: clamp(80px, 14vw, 180px) 1fr;
gap: clamp(24px, 4vw, 64px);
padding: 20px 0;
border-top: 1px solid var(--hairline-soft);
align-items: start;
position: relative;
transition: padding-left 500ms var(--ease-luxe);
}
.process-step:last-child { border-bottom: 1px solid var(--hairline-soft); }
.process-step:hover { padding-left: 12px; }
.process-step::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg, var(--brass-500), transparent);
transition: width 600ms var(--ease-luxe);
}
.process-step:hover::before { width: 80px; }
.process-num {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 60, "wght" 350;
font-size: clamp(32px, 4vw, 48px);
color: var(--gold-text);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
opacity: 0.8;
}
.process-title {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 500;
font-size: clamp(21px, 2vw, 27px);
margin: 0 0 8px;
font-weight: 500;
color: var(--cream);
letter-spacing: -0.015em;
}
.process-body p {
color: var(--text-secondary);
line-height: 1.6;
font-size: 15.5px;
max-width: 60ch;
margin: 0;
}
/* ===================== Mid-page capture ===================== */
.midcap {
padding: 44px 0;
position: relative;
background: var(--navy);
border-top: 1px solid var(--hairline-soft);
border-bottom: 1px solid var(--hairline-soft);
}
.midcap-inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 36px;
align-items: center;
padding: 36px 32px;
border-left: 3px solid var(--brass-500);
background: linear-gradient(90deg, rgba(var(--brass-rgb), 0.08), transparent 70%);
border-radius: 0 14px 14px 0;
}
@media (max-width: 900px) {
.midcap-inner { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
}
.midcap-h {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 450;
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 8px;
color: var(--cream);
}
.midcap-sub {
font-size: 14.5px;
color: var(--gold-text-strong);
margin: 0;
font-weight: 500;
font-style: italic;
}
.midcap-form {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 10px;
align-items: stretch;
}
@media (max-width: 700px) { .midcap-form { grid-template-columns: 1fr; } }
.midcap-input {
background: rgba(6, 17, 30, 0.55);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 12px 14px;
color: var(--cream);
font-family: "Source Sans 3", sans-serif;
font-size: 14.5px;
outline: none;
transition: border-color 240ms var(--ease-out);
}
.midcap-input:focus { border-color: var(--gold-text); }
.midcap-input::placeholder { color: var(--text-quiet); }
.midcap-submit { white-space: nowrap; }
.midcap-fineprint {
grid-column: 1 / -1;
margin: 0;
font-size: 11.5px;
color: var(--text-muted);
font-style: italic;
}
.midcap-success {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: rgba(var(--brass-rgb), 0.14);
border: 1px solid var(--brass-400);
border-radius: 10px;
color: var(--cream);
font-size: 14px;
font-weight: 500;
box-shadow: 0 8px 24px -10px rgba(var(--brass-rgb), 0.35);
}
.midcap-success::before {
content: "";
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--brass-500);
background-image:
linear-gradient(135deg, transparent 45%, #06111E 45%, #06111E 55%, transparent 55%),
linear-gradient(45deg, transparent 30%, #06111E 30%, #06111E 40%, transparent 40%);
}
.midcap-error {
grid-column: 1 / -1;
margin: 0;
padding: 11px 14px;
background: rgba(220, 38, 38, 0.1);
border: 1px solid rgba(220, 38, 38, 0.35);
border-radius: 10px;
color: #F4C7C7;
font-size: 12.5px;
line-height: 1.5;
}
.midcap-error a { color: var(--gold-text-strong); }
.midcap-input.is-invalid {
border-color: rgba(220, 38, 38, 0.55);
background: rgba(220, 38, 38, 0.06);
}
.midcap-input.is-invalid::placeholder { color: rgba(248, 158, 158, 0.7); }
.midcap-submit.is-loading {
opacity: 0.7;
pointer-events: none;
position: relative;
}
.midcap-submit.is-loading::after {
content: "";
position: absolute;
top: 50%; right: 14px;
width: 14px; height: 14px;
margin-top: -7px;
border-radius: 50%;
border: 2px solid rgba(6, 17, 30, 0.3);
border-top-color: #06111E;
animation: spin 0.8s linear infinite;
}
/* ===================== Why ===================== */
.why-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.why-item {
padding: 22px 24px;
background:
var(--paper-noise),
linear-gradient(180deg, var(--elev-1) 0%, var(--elev-2) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline-soft);
border-radius: 16px;
transition: border-color 350ms var(--ease-out), transform 350ms var(--ease-luxe);
}
.why-item:hover {
border-color: var(--hairline);
transform: translateX(6px);
}
.why-num {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 350;
font-size: 24px;
color: var(--gold-text);
letter-spacing: -0.01em;
line-height: 1;
margin-bottom: 14px;
font-variant-numeric: tabular-nums;
opacity: 0.85;
}
.why-title {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 36, "wght" 500;
font-size: clamp(19px, 1.8vw, 23px);
font-weight: 500;
margin: 0 0 10px;
color: var(--cream);
letter-spacing: -0.012em;
}
.why-item p {
color: var(--text-secondary);
line-height: 1.65;
margin: 0;
font-size: 15px;
}
/* ===================== Team ===================== */
.founder-anchor .role-eyebrow {
font-family: "Source Sans 3", sans-serif;
font-size: 10.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-text);
margin: 0 0 16px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 12px;
}
.founder-anchor .role-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--brass-500);
}
.founder-anchor .founder-name {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 60, "wght" 500;
font-size: clamp(32px, 4vw, 50px);
font-weight: 500;
letter-spacing: -0.022em;
line-height: 1.05;
color: var(--cream);
margin: 0 0 4px;
}
.founder-frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7),
0 0 0 1px var(--hairline);
}
.founder-frame-ring {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
border-radius: inherit;
background:
linear-gradient(135deg, rgba(var(--brass-rgb), 0.5), transparent 30%, transparent 70%, rgba(var(--brass-rgb), 0.3)) border-box;
-webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
}
.founder-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: brightness(1.02) contrast(1.04) saturate(1.05);
}
.founder-frame::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 55%, rgba(6, 17, 30, 0.4) 100%),
radial-gradient(120% 80% at 50% 0%, transparent 30%, var(--tint-brass), 100%);
pointer-events: none;
z-index: 1;
mix-blend-mode: multiply;
}
.founder-role {
font-family: "Source Sans 3", sans-serif;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin: 0 0 22px;
}
.founder-body p {
color: var(--text-secondary);
line-height: 1.75;
font-size: 16px;
margin: 0 0 22px;
max-width: 62ch;
}
.founder-quote {
position: relative;
margin: 8px 0 24px;
padding: 22px 28px;
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 36, "wght" 400;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.4;
color: var(--cream);
font-weight: 400;
font-style: italic;
border-left: 2px solid var(--brass-500);
background: rgba(var(--brass-rgb), 0.05);
border-radius: 0 12px 12px 0;
max-width: 58ch;
}
.founder-quote-mark {
position: absolute;
top: 6px;
left: 12px;
font-size: 60px;
color: var(--gold-text-mid);
opacity: 0.35;
line-height: 1;
font-family: "Source Serif 4", serif;
}
.founder-meta {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 18px 26px;
}
.founder-meta-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text-primary);
font-size: 14.5px;
font-feature-settings: "tnum";
transition: color 250ms var(--ease-out);
}
.founder-meta-link:hover { color: var(--gold-text); }
.founder-meta-link svg { color: var(--gold-text); }
.team-divider {
display: flex;
align-items: center;
gap: 18px;
margin: 72px 0 32px;
}
.team-divider::before,
.team-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.team-divider span {
font-family: "Source Sans 3", sans-serif;
font-size: 10.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-text);
font-weight: 500;
}
.mlo-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
@media (max-width: 900px) { .mlo-grid { grid-template-columns: 1fr; } }
.mlo-card {
padding: 34px 26px;
text-align: center;
background:
var(--paper-noise),
linear-gradient(180deg, var(--elev-2) 0%, var(--elev-1) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline-soft);
border-radius: 18px;
transition: border-color 320ms var(--ease-out), transform 320ms var(--ease-luxe);
}
.mlo-card:hover {
border-color: var(--hairline);
transform: translateY(-3px);
}
.mlo-avatar {
position: relative;
width: 108px;
height: 108px;
border-radius: 50%;
margin: 0 auto 20px;
display: inline-flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.mlo-avatar::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg, var(--brass-400) 0%, var(--brass-600) 50%, var(--brass-300) 100%);
z-index: -2;
opacity: 0.7;
animation: mlo-shimmer 3.5s ease-in-out infinite;
background-size: 200% 200%;
}
@keyframes mlo-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.mlo-avatar::after {
content: "";
position: absolute;
inset: 2px;
border-radius: inherit;
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
z-index: -1;
}
.mlo-initials {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 400;
font-size: 38px;
font-weight: 400;
font-style: italic;
color: var(--gold-text-strong);
letter-spacing: 0.02em;
line-height: 1;
position: relative;
}
.mlo-pending {
position: absolute;
top: -4px;
right: -10px;
background: var(--brass-500);
color: #06111E;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
box-shadow: 0 6px 14px -4px rgba(var(--brass-rgb), 0.5);
font-family: "Source Sans 3", sans-serif;
}
.mlo-name {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 36, "wght" 400;
font-size: 20px;
font-weight: 400;
color: rgba(var(--cream-rgb), 0.55);
margin: 0 0 6px;
letter-spacing: -0.005em;
font-style: italic;
}
.mlo-role {
font-family: "Source Sans 3", sans-serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-text);
margin: 0 0 14px;
font-weight: 500;
}
.mlo-nmls {
font-size: 12.5px;
color: var(--text-muted);
margin: 0;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
/* ===================== FAQ ===================== */
.faq-list {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 880px;
}
.faq-item {
border-bottom: 1px solid var(--hairline-soft);
padding: 4px 0;
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 16px 0;
display: flex;
align-items: center;
gap: 24px;
justify-content: space-between;
transition: color 220ms var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 36, "wght" 500;
font-size: clamp(17px, 1.5vw, 21px);
font-weight: 500;
color: var(--cream);
letter-spacing: -0.01em;
line-height: 1.35;
}
.faq-item summary:hover .faq-q { color: var(--gold-text-strong); }
.faq-toggle {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--hairline);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--gold-text-mid);
transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), color 220ms var(--ease-out);
}
.faq-toggle svg { transition: transform 320ms var(--ease-luxe); }
.faq-item summary:hover .faq-toggle { border-color: var(--hairline); color: var(--gold-text); }
.faq-item[open] .faq-toggle {
border-color: var(--gold-text);
background: rgba(var(--brass-rgb), 0.08);
color: var(--gold-text-strong);
}
.faq-item[open] .faq-toggle svg { transform: rotate(180deg); }
.faq-a {
padding: 0 0 16px;
color: var(--text-secondary);
font-size: 15.5px;
line-height: 1.7;
max-width: 72ch;
}
.faq-a p { margin: 0; }
.faq-foot {
margin-top: 28px;
font-size: 14px;
color: var(--text-secondary);
}
/* ===================== Contact ===================== */
.section-contact {
background:
radial-gradient(50% 48% at 108% 26%, rgba(var(--brass-rgb), 0.18), transparent 62%),
radial-gradient(40% 44% at -8% 70%, rgba(var(--teal-rgb), 0.13), transparent 62%),
radial-gradient(80% 60% at 80% 0%, var(--tint-brass), transparent 60%),
var(--navy);
border-top: 1px solid var(--hairline-soft);
position: relative;
}
.section-contact::after {
content: "";
position: absolute;
inset: 0;
background: var(--paper-noise);
mix-blend-mode: overlay;
opacity: 0.5;
pointer-events: none;
}
.section-contact > * { position: relative; }
.contact-cards {
margin-top: 18px;
display: grid;
gap: 10px;
}
.contact-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--hairline);
border-radius: 14px;
background: rgba(var(--brass-rgb), 0.05);
transition: border-color 280ms var(--ease-out), background 280ms var(--ease-out), transform 280ms var(--ease-luxe);
}
.contact-card:hover {
border-color: var(--gold-text);
background: rgba(var(--brass-rgb), 0.09);
transform: translateY(-2px);
}
/* The office address is informational, not a link — keep the card's shape but
drop the affordances that would imply it is clickable. */
.contact-card-static,
.contact-card-static:hover {
cursor: default;
transform: none;
border-color: var(--hairline);
background: rgba(var(--brass-rgb), 0.05);
}
.contact-card-icon {
width: 42px; height: 42px;
border-radius: 10px;
border: 1px solid var(--hairline);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold-text);
}
.contact-card-label {
font-family: "Source Sans 3", sans-serif;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-quiet);
margin-bottom: 2px;
font-weight: 500;
}
.contact-card-value {
color: var(--cream);
font-size: 15.5px;
font-feature-settings: "tnum";
}
.contact-form {
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 26px;
background:
var(--paper-noise),
linear-gradient(180deg, var(--elev-2) 0%, var(--elev-1) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline);
border-radius: 20px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-fieldset { border: 0; padding: 0; }
.form-fieldset legend { padding: 0; margin-bottom: 10px; }
.form-label {
font-family: "Source Sans 3", sans-serif;
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-text);
font-weight: 500;
}
.form-req { color: var(--gold-text-mid); }
.form-hint { color: var(--text-quiet); text-transform: none; letter-spacing: 0.02em; }
.form-input {
width: 100%;
padding: 12px 14px;
background: rgba(6, 17, 30, 0.55);
border: 1px solid rgba(var(--cream-rgb), 0.12);
border-radius: 10px;
color: var(--cream);
font-size: 15px;
font-family: inherit;
transition: border-color 250ms var(--ease-out), background 250ms var(--ease-out);
}
.form-input::placeholder { color: rgba(var(--cream-rgb), 0.32); }
.form-input:hover { border-color: rgba(var(--cream-rgb), 0.22); }
.form-input:focus {
outline: none;
border-color: var(--gold-text);
background: rgba(6, 17, 30, 0.85);
box-shadow: 0 0 0 3px rgba(var(--brass-rgb), 0.16);
}
.form-input.is-invalid {
border-color: rgba(220, 38, 38, 0.6);
background: rgba(220, 38, 38, 0.05);
}
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.form-select-wrap { position: relative; }
.form-select {
appearance: none;
-webkit-appearance: none;
background-image: none;
padding-right: 44px;
cursor: pointer;
}
.form-select option { background: var(--navy); color: var(--cream); }
.form-select-chev {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--gold-text);
pointer-events: none;
}
.form-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.form-radio {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(6, 17, 30, 0.55);
border: 1px solid var(--hairline-soft);
border-radius: 999px;
cursor: pointer;
transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out);
font-size: 13px;
color: var(--text-secondary);
}
.form-radio:hover { border-color: var(--hairline); color: var(--cream); }
/* Custom radio — precise gold, never the browser's muddied accent-color */
.form-radio input {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin: 0;
border-radius: 50%;
border: 1.5px solid rgba(var(--brass-rgb), 0.45);
background: transparent;
display: inline-grid;
place-content: center;
flex-shrink: 0;
cursor: pointer;
transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.form-radio input::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--brass-300), var(--brass-500) 72%);
box-shadow: 0 0 8px rgba(var(--brass-rgb), 0.55);
transform: scale(0);
transition: transform 180ms var(--ease-luxe);
}
.form-radio input:checked {
border-color: var(--gold-text);
box-shadow: 0 0 0 3px rgba(var(--brass-rgb), 0.12);
}
.form-radio input:checked::before { transform: scale(1); }
.form-radio input:focus-visible {
outline: 2px solid var(--brass-400);
outline-offset: 2px;
}
/* Cloudflare Turnstile slots — fixed min-height prevents layout shift while the
widget iframe loads; iframe corners echo the form's input radius */
.turnstile-slot {
min-height: 65px;
display: flex;
align-items: center;
}
/* Cloudflare's wrapper is a flex item — stretch it so size:'flexible' fills the row */
.turnstile-slot > div { width: 100%; }
.turnstile-slot iframe { border-radius: 10px; }
.turnstile-slot-midcap { grid-column: 1 / -1; }
.form-radio:has(input:checked) {
border-color: var(--gold-text);
background: rgba(var(--brass-rgb), 0.08);
color: var(--cream);
}
.form-error { font-size: 12.5px; color: #F89E9E; min-height: 1em; margin: 0; }
.form-submit { position: relative; margin-top: 4px; }
.form-submit.is-loading .form-submit-label,
.form-submit.is-loading .form-submit-arrow { opacity: 0; }
.form-submit-spinner {
position: absolute;
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid rgba(6, 17, 30, 0.3);
border-top-color: #06111E;
animation: spin 0.8s linear infinite;
opacity: 0;
}
.form-submit.is-loading .form-submit-spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-fineprint { font-size: 11.5px; color: var(--text-quiet); line-height: 1.55; text-align: center; margin: 6px 0 0; }
.form-success {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 22px;
background: rgba(var(--brass-rgb), 0.1);
border: 1px solid var(--hairline);
border-radius: 14px;
margin-top: 4px;
}
.form-success-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--brass-500);
color: #06111E;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.form-success-title {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 24, "wght" 500;
font-size: 19px;
font-weight: 500;
color: var(--cream);
margin: 0 0 6px;
}
.form-success-body { color: var(--text-secondary); font-size: 14.5px; line-height: 1.5; margin: 0; }
.form-failure {
padding: 18px;
background: rgba(220, 38, 38, 0.08);
border: 1px solid rgba(220, 38, 38, 0.3);
border-radius: 12px;
color: #F4C7C7;
font-size: 14px;
line-height: 1.5;
}
.form-failure p { margin: 0; }
/* ===================== Pre-footer CTA ===================== */
.prefooter-cta {
background:
/* Large central warm halo — "final invitation" focal point */
radial-gradient(60% 75% at 50% 50%, rgba(var(--brass-rgb), 0.2), transparent 65%),
/* Cool counter-light from one corner */
radial-gradient(38% 44% at -4% 100%, rgba(var(--teal-rgb), 0.12), transparent 62%),
/* Warm continuity at bottom */
radial-gradient(60% 80% at 50% 100%, rgba(var(--brass-rgb), 0.12), transparent 60%),
var(--navy);
border-top: 1px solid var(--hairline-soft);
position: relative;
}
.prefooter-cta::before {
content: "";
position: absolute;
inset: 0;
background: var(--paper-noise);
mix-blend-mode: overlay;
opacity: 0.5;
pointer-events: none;
}
.prefooter-cta > * { position: relative; }
.prefooter-eyebrow::before { display: none; }
.prefooter-h { max-width: 22ch; margin-left: auto; margin-right: auto; }
.prefooter-sub { margin-left: auto !important; margin-right: auto !important; }
/* ===================== Footer ===================== */
.site-footer {
background: var(--navy-deep);
border-top: 1px solid var(--hairline);
color: var(--text-secondary);
position: relative;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background: var(--paper-noise);
mix-blend-mode: overlay;
opacity: 0.6;
pointer-events: none;
}
.site-footer > * { position: relative; }
.footer-tag {
margin-top: 22px;
max-width: 44ch; /* was 38ch — the brand column is wider now, and 38ch
wrapped early enough to look like a narrow gutter */
font-size: 14.5px;
line-height: 1.65;
color: var(--text-secondary);
}
/* Contact column — same link treatment as the other columns, but the values
are long so they wrap rather than force the grid wider. */
.footer-contact-list a { word-break: break-word; }
.footer-address {
margin-top: 18px;
font-style: normal; /* italicises by default */
font-size: 13.5px;
line-height: 1.7;
color: var(--text-muted);
}
/* .footer-eho-block (the bordered card that used to wrap the EHL mark) was
removed with the badge redesign — the mark now sits bare on the footer. */
.footer-eho-title {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 24, "wght" 500;
font-size: 14px;
font-weight: 500;
color: var(--cream);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.footer-h {
font-family: "Source Sans 3", sans-serif;
font-size: 10.5px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-text);
margin: 0 0 22px;
font-weight: 500;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.footer-links a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
transition: color 200ms var(--ease-out);
}
.footer-links a:hover { color: var(--gold-text); }
.footer-link-stub { color: var(--text-quiet); }
.footer-bottom {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--hairline-soft);
font-size: 12.5px;
color: var(--text-muted);
}
.footer-copy { margin: 0 0 18px; }
.footer-disclosure {
font-size: 11.5px;
line-height: 1.75;
color: var(--text-quiet);
/* 96ch cut the disclosure off around the halfway mark on a 1240px container
and was the main reason the footer read as left-weighted. 118ch still
respects a comfortable measure but uses the width that is actually there. */
max-width: 118ch;
margin: 0;
}
.footer-disclosure strong { color: var(--text-muted); }
.link-brass-quiet {
color: var(--text-muted);
text-decoration: underline;
text-decoration-color: rgba(var(--brass-rgb), 0.3);
text-underline-offset: 2px;
}
.link-brass-quiet:hover { color: var(--gold-text); }
/* ===================== Utility ===================== */
.link-brass {
color: var(--gold-text);
text-decoration: underline;
text-decoration-color: rgba(var(--brass-rgb), 0.4);
text-underline-offset: 3px;
transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}
.link-brass:hover {
color: var(--gold-text-strong);
text-decoration-color: var(--gold-text-strong);
}
/* ===================== Testimonials ===================== */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-24);
}
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card {
position: relative;
padding: var(--sp-40) var(--sp-32) var(--sp-32);
background:
var(--paper-noise),
linear-gradient(180deg, var(--elev-2) 0%, var(--elev-1) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline-soft);
border-radius: 18px;
display: flex;
flex-direction: column;
transition: border-color 320ms var(--ease-out), transform 320ms var(--ease-luxe);
}
.testimonial-card:hover {
border-color: var(--hairline);
transform: translateY(-3px);
}
.testimonial-pending { opacity: 0.78; }
.testimonial-quote-mark {
font-family: "Source Serif 4", serif;
font-size: 64px;
line-height: 1;
color: var(--gold-text);
opacity: 0.45;
margin-bottom: -12px;
font-style: italic;
display: block;
}
.testimonial-quote {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 36, "wght" 400;
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.55;
font-style: italic;
color: var(--cream);
margin: 0 0 var(--sp-24);
font-weight: 400;
letter-spacing: -0.005em;
flex: 1;
}
.testimonial-attribution {
padding-top: var(--sp-16);
border-top: 1px solid var(--hairline-soft);
}
.testimonial-name {
font-family: "Source Sans 3", sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--cream);
margin: 0 0 4px;
letter-spacing: 0.01em;
}
.testimonial-meta {
font-size: 12px;
color: var(--text-muted);
margin: 0;
letter-spacing: 0.02em;
}
.testimonial-loan-type {
color: var(--gold-text);
}
.testimonial-pending-badge {
position: absolute;
top: 14px;
right: 14px;
background: var(--brass-500);
color: #06111E;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
box-shadow: 0 6px 14px -4px rgba(var(--brass-rgb), 0.5);
font-family: "Source Sans 3", sans-serif;
}
/* ===================== Team (equal-weight 4-card grid) ===================== */
.team-manifesto {
position: relative;
margin: 14px 0 0;
padding: 14px 22px;
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 400;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.4;
color: var(--cream);
font-weight: 400;
font-style: italic;
border-left: 2px solid var(--brass-500);
background: rgba(var(--brass-rgb), 0.05);
border-radius: 0 12px 12px 0;
max-width: 58ch;
}
.team-manifesto-mark {
position: absolute;
top: 2px;
left: 12px;
font-size: 54px;
color: var(--gold-text-mid);
opacity: 0.32;
line-height: 1;
font-family: "Source Serif 4", serif;
pointer-events: none;
}
.team-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.team-card {
flex: 1 1 200px;
max-width: 224px; /* 5 cards + gaps fit one row at ≥1200px content — keeps Team to one screen */
min-width: 180px;
}
@media (max-width: 560px) {
.team-card { flex: 1 1 100%; max-width: none; min-width: 0; }
}
.team-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px 18px;
background:
var(--paper-noise),
linear-gradient(180deg, var(--elev-2) 0%, var(--elev-1) 100%),
var(--navy);
background-blend-mode: overlay, normal, normal;
border: 1px solid var(--hairline);
border-radius: 18px;
transition: border-color 320ms var(--ease-out), transform 320ms var(--ease-luxe);
position: relative;
}
.team-card:hover {
border-color: var(--gold-text-mid);
transform: translateY(-4px);
}
.team-photo-wrap {
position: relative;
width: 92px;
height: 92px;
margin-bottom: 12px;
isolation: isolate;
}
.team-photo-wrap::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brass-400) 0%, var(--brass-600) 50%, var(--brass-300) 100%);
z-index: -2;
opacity: 0.85;
}
.team-photo-wrap::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 50%;
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
z-index: -1;
}
.team-photo {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center top;
filter: brightness(1.02) contrast(1.04) saturate(1.05);
position: relative;
z-index: 1;
}
.team-initials-circle {
width: 100%;
height: 100%;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.team-initials {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 400;
font-size: 40px;
font-weight: 400;
font-style: italic;
color: var(--gold-text-strong);
letter-spacing: 0.02em;
line-height: 1;
}
.team-card-pending .team-photo-wrap::before {
opacity: 0.6;
animation: mlo-shimmer 3.5s ease-in-out infinite;
background: linear-gradient(135deg, var(--brass-400) 0%, var(--brass-600) 50%, var(--brass-300) 100%);
background-size: 200% 200%;
}
.team-pending-badge {
position: absolute;
top: -4px;
right: -10px;
background: var(--brass-500);
color: #06111E;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
box-shadow: 0 6px 14px -4px rgba(var(--brass-rgb), 0.5);
font-family: "Source Sans 3", sans-serif;
z-index: 3;
}
.team-name {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 36, "wght" 500;
font-size: 20px;
font-weight: 500;
color: var(--cream);
margin: 0 0 4px;
letter-spacing: -0.015em;
line-height: 1.15;
}
.team-name-pending {
color: rgba(var(--cream-rgb), 0.55);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 36, "wght" 400;
}
.team-title {
font-size: 12.5px;
color: var(--text-secondary);
margin: 0 0 8px;
font-family: "Source Sans 3", sans-serif;
}
.team-nmls {
font-size: 12.5px;
color: var(--text-muted);
margin: 0 0 10px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.team-bio {
font-size: 13px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0 0 14px;
}
.team-contact {
display: flex;
gap: 10px;
justify-content: center;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--hairline-soft);
width: 100%;
align-items: center;
min-height: 42px;
}
.team-contact-icon {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold-text);
border: 1px solid var(--hairline);
background: rgba(var(--brass-rgb), 0.05);
transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out), background 220ms var(--ease-out);
}
.team-contact-icon:hover {
border-color: var(--gold-text);
color: var(--gold-text-strong);
background: rgba(var(--brass-rgb), 0.12);
}
.team-contact-pending {
font-size: 11.5px;
color: var(--text-quiet);
font-style: italic;
letter-spacing: 0.04em;
}
/* ===================== Legal pages (Privacy / Terms / Accessibility / Licensing) ===================== */
.legal-page { background: var(--navy); min-height: 100vh; }
.legal-nav {
position: sticky;
top: 0;
z-index: 30;
background: rgba(11, 26, 46, 0.92);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--hairline-soft);
padding: 14px 0;
}
.legal-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.legal-main {
padding: 64px 0 96px;
max-width: 760px;
margin: 0 auto;
}
.legal-h1 {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 60, "wght" 450;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.05;
letter-spacing: -0.022em;
color: var(--cream);
margin: 8px 0 12px;
}
.legal-updated {
font-size: 12.5px;
color: var(--text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 36px;
font-family: "Source Sans 3", sans-serif;
font-variant-numeric: tabular-nums;
}
.legal-content {
color: var(--text-primary);
font-size: 16px;
line-height: 1.75;
}
.legal-content h2 {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 48, "wght" 500;
font-size: 24px;
font-weight: 500;
color: var(--cream);
margin: 44px 0 14px;
letter-spacing: -0.012em;
line-height: 1.2;
}
.legal-content h3 {
font-family: "Source Serif 4", serif;
font-variation-settings: "opsz" 36, "wght" 500;
font-size: 18px;
font-weight: 500;
color: var(--cream);
margin: 28px 0 10px;
}
.legal-content p {
color: var(--text-secondary);
margin: 0 0 16px;
}
.legal-content ul, .legal-content ol {
color: var(--text-secondary);
padding-left: 22px;
margin: 0 0 18px;
}
.legal-content li {
margin-bottom: 8px;
}
.legal-content strong {
color: var(--cream);
font-weight: 600;
}
.legal-content a {
color: var(--gold-text);
text-decoration: underline;
text-decoration-color: rgba(var(--brass-rgb), 0.4);
text-underline-offset: 3px;
}
.legal-content a:hover { color: var(--gold-text-strong); }
.legal-content .legal-callout {
margin: 24px 0;
padding: 18px 22px;
background: rgba(var(--brass-rgb), 0.06);
border-left: 2px solid var(--brass-500);
border-radius: 0 10px 10px 0;
font-size: 14.5px;
color: var(--text-secondary);
}
.legal-content .legal-callout strong { color: var(--gold-text-strong); }
.legal-back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
letter-spacing: 0.06em;
color: var(--gold-text);
margin-bottom: 16px;
font-family: "Source Sans 3", sans-serif;
}
.legal-back:hover { color: var(--gold-text-strong); }
/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
.why-list { margin-top: 32px; }
}
@media (max-width: 768px) {
/* iOS Safari force-zooms the page when focusing any field under 16px —
the single biggest cause of "the site jumps around" on iPhone */
.form-input, .midcap-input, .bp-input { font-size: 16px; }
/* Scrolled mobile header is 72px (10px pad + 52px logo box + 10px pad) —
anchor scrolls clear it plus a 16px breath */
html { scroll-padding-top: 88px; }
/* 40px minimum touch target */
.team-contact-icon { width: 40px; height: 40px; }
.site-nav.is-scrolled { padding-top: 0; padding-bottom: 0; }
.logo-pill img { --logo-h: 46px; }
.logo-pill-lg img { --logo-h: 74px; }
.brand-wordmark { font-size: 19px; }
.brand-wordmark-lg { font-size: 26px; }
.scroll-cue { display: none; }
.hero-overlay {
background:
radial-gradient(120% 80% at 50% 30%, rgba(var(--brass-rgb), 0.05), transparent 70%),
linear-gradient(180deg, rgba(6, 17, 30, 0.40) 0%, rgba(6, 17, 30, 0.25) 35%, rgba(11, 26, 46, 0.70) 100%);
}
.hero-headline { max-width: none; }
.trust-cell { padding: 28px 24px; }
.program-card { padding: 26px 22px; min-height: 0; }
.calc-input-stack, .calc-breakdown, .calc-result-card, .calc-center { padding: 28px 22px; }
.contact-form { padding: 28px 22px; }
.process-step { grid-template-columns: 60px 1fr; gap: 16px; padding: 28px 0; }
.founder-quote { padding: 18px 20px; }
.faq-item summary { padding: 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1; transform: none; }
.hero-line-inner { opacity: 1; transform: none; }
.hero-video { display: none !important; }
.scroll-cue { animation: none; }
.mlo-avatar::before { animation: none; }
}
/* ============================================================
TEAM CARD — tilt + modal trigger
============================================================ */
.team-card {
cursor: pointer;
transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
will-change: transform;
}
.team-card:hover {
box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(var(--brass-rgb), 0.18);
}
.team-card-hint {
display: flex;
align-items: center;
gap: 5px;
margin-top: var(--sp-12);
font-size: var(--fs-13);
color: var(--gold-text-mid);
letter-spacing: 0.07em;
text-transform: uppercase;
font-variation-settings: "wght" 550;
opacity: 0;
transition: opacity 0.2s ease;
/* This is a real