/* ==========================================================================
Catalpa House Mortgage — Marketing site
Tokens follow the Catalpa House lockup: forest green (ship) + muted gold
(wordmark) on warm paper.
========================================================================== */
/* ---- Webfonts ------------------------------------------------------------
Fonts are loaded via + in
each page's (parallel fetch, non-render-blocking) rather than a CSS
@import (serial, render-blocking). Production follow-up: self-host the
licensed families with @font-face + font-display:swap once they land
(current families are Google-Fonts stand-ins per the brand handoff).
-------------------------------------------------------------------------- */
/* ==========================================================================
Design tokens
========================================================================== */
:root {
/* ---- Brand: Forest green (sampled from the ship mark: #45594B) ---- */
--ink-900: #24332b;
--ink-800: #2e4137;
--ink-700: #3f5448; /* brand green (base) */
--ink-600: #4c6557;
--ink-500: #5d7668;
--ink-400: #7a9084;
--ink-300: #a3b5ac;
--ink-200: #c9d5cf;
--ink-100: #e3ebe7;
--ink-50: #f0f4f2;
/* ---- Brand: Gold (sampled from CATALPA HOUSE: #988C68) ---- */
--copper-900: #5c543c;
--copper-800: #6f6648;
--copper-700: #847956;
--copper-600: #8f845c;
--copper-500: #988c68; /* brand gold (base) */
--copper-400: #b0a682;
--copper-300: #c7bfa0;
--copper-200: #ddd6c0;
--copper-100: #efe9d9;
--copper-50: #f7f4ea;
/* ---- Warm neutrals (earthy grays) ---- */
--neutral-900: #1c1a17;
--neutral-800: #2b2823;
--neutral-700: #3c3833;
--neutral-600: #565149;
--neutral-500: #736e64;
--neutral-400: #9b968a;
--neutral-300: #c3bfb5;
--neutral-200: #ddd9d0;
--neutral-100: #edeae3;
--neutral-50: #f6f4ef;
--paper: #f6f3ea; /* warm paper, close to the logo sheet */
--white: #ffffff;
/* ---- Semantic hues ---- */
--success-600: #256a4c;
--success-500: #2f7d5b;
--success-100: #dcefe6;
--warning-600: #a8741f;
--warning-500: #c58a2e;
--warning-100: #f6e9cf;
--danger-600: #973629;
--danger-500: #b44133;
--danger-100: #f4dcd7;
--info-600: #345c76;
--info-500: #3e6e8e;
--info-100: #dbe8f0;
/* ---- Semantic aliases ---- */
/* Primary actions use forest green (white-on-gold fails WCAG). Gold is the accent. */
--brand: var(--ink-700);
--brand-hover: var(--ink-600);
--brand-active: var(--ink-800);
--brand-ink: var(--ink-700);
--text-strong: var(--ink-800);
--text-body: var(--neutral-700);
--text-muted: var(--neutral-500);
--text-subtle: var(--neutral-400);
--text-on-brand: #f6f3ea;
--text-on-ink: #f6f3ea;
--text-link: var(--copper-700);
--surface-page: var(--paper);
--surface-card: var(--white);
--surface-sunken: var(--neutral-50);
--surface-ink: var(--ink-700);
--surface-brand: var(--ink-700);
--border-subtle: var(--neutral-200);
--border-default: var(--neutral-300);
--border-strong: var(--ink-700);
--border-focus: var(--ink-600);
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--ink-600) 40%, transparent);
/* ---- Typography ---- */
/* Cinzel matches the Trajan-style lockup; Cormorant carries that heritage
into sentence-case headlines. Source Sans 3 is the body workhorse. */
--font-display: 'Cormorant Garamond', 'Palatino Linotype', Palatino, serif;
--font-brand: 'Cinzel', 'Palatino Linotype', Palatino, serif;
--font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 900;
--fs-display: 64px;
--fs-h1: 46px;
--fs-h2: 34px;
--fs-h3: 25px;
--fs-h4: 20px;
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-caption: 13px;
--fs-micro: 11px;
--lh-tight: 1.05;
--lh-heading: 1.15;
--lh-snug: 1.35;
--lh-body: 1.6;
--ls-display: -0.02em;
--ls-heading: -0.01em;
--ls-normal: 0;
--ls-eyebrow: 0.14em;
--ls-mono: 0.01em;
/* ---- Spacing & layout (4px base grid) ---- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 64px;
--space-11: 80px;
--space-12: 112px;
--container-sm: 640px;
--container-md: 880px;
--container-lg: 1120px;
--container-xl: 1280px;
/* ---- Radius, borders, shadows, motion ---- */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 6px; /* default control radius */
--radius-lg: 10px; /* cards */
--radius-xl: 16px;
--radius-pill: 999px;
--border-width: 1px;
--border-width-strong: 2px;
--shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.06);
--shadow-sm: 0 1px 3px rgba(28, 26, 23, 0.08), 0 1px 2px rgba(28, 26, 23, 0.05);
--shadow-md: 0 4px 10px rgba(28, 26, 23, 0.08), 0 2px 4px rgba(28, 26, 23, 0.05);
--shadow-lg: 0 14px 30px rgba(28, 26, 23, 0.12), 0 6px 12px rgba(28, 26, 23, 0.06);
--shadow-ink: 0 18px 40px rgba(36, 51, 43, 0.28);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 120ms;
--dur-base: 180ms;
--dur-slow: 280ms;
}
/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 88px; /* clears the 76px sticky header on anchor jumps */
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-body);
background: var(--surface-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--text-strong);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
font-weight: 600;
margin: 0;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: color-mix(in srgb, var(--ink-600) 28%, transparent); }
/* ==========================================================================
Reusable utilities
========================================================================== */
.eyebrow {
font-family: var(--font-brand);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-700);
}
.eyebrow--copper { color: var(--copper-400); }
.section-title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 600;
margin: 10px 0 12px;
color: var(--text-strong);
}
.section-lead {
font-size: 18px;
color: var(--text-muted);
max-width: 680px;
margin: 0 0 40px;
}
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-weight: var(--fw-semibold);
letter-spacing: 0.01em;
line-height: 1;
text-decoration: none;
border-radius: var(--radius-md);
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); } /* tactile lift on hover */
.btn:active { transform: translateY(1px); } /* press-down beats the lift */
.btn:focus-visible,
.nav-link:focus-visible,
.brand:focus-visible,
.terms-cta:focus-visible,
.footer-email:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Sizes */
.btn--md { font-size: 15px; padding: 0 20px; height: 42px; gap: 8px; }
.btn--lg { font-size: 16px; padding: 0 26px; height: 50px; gap: 10px; }
.btn-label--short { display: none; }
/* Variants */
/* Brand decision: primary actions are forest green so white/cream text
clears WCAG AA. Gold is reserved for wordmark, eyebrows, and accents. */
.btn--primary {
background: var(--brand);
color: var(--text-on-brand);
border: 1px solid var(--brand);
}
.btn--primary:hover { background: var(--brand-hover); }
.btn--primary:active { background: var(--brand-active); }
.btn--secondary {
background: var(--surface-card);
color: var(--ink-700);
border: 1px solid var(--border-default);
}
.btn--secondary:hover { background: var(--neutral-50); }
.btn--secondary:active { background: var(--neutral-100); }
/* Hero's "See the terms": transparent on the dark hero; the border brightens
on hover for affordance. */
.btn--hero-ghost {
background: transparent;
color: #fff;
border: 1px solid var(--ink-400);
}
.btn--hero-ghost:hover { background: transparent; border-color: var(--ink-200); }
/* ==========================================================================
Header
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(246, 243, 234, 0.90);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
min-height: 76px;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 16px;
}
/* Flex items default to shrinking below their content size when the row runs
tight; because .brand/.site-nav are themselves flex containers with
nowrap text, a shrunk box doesn't wrap that text — it spills the text out
past the box edge (overflow: visible) and it visually collides with its
neighbour instead of the row simply wrapping or scrolling. Fixed sizing
makes any real overflow honest (pushes the row wider) instead of hidden. */
.site-header__inner > * { flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { height: 44px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; gap: 4px; white-space: nowrap; }
.brand__name {
font-family: var(--font-brand);
font-weight: 600;
font-size: 13px;
color: var(--copper-600);
letter-spacing: 0.14em;
}
.brand__sub {
font-family: var(--font-brand);
font-weight: 600;
font-size: 8.5px;
color: var(--ink-700);
letter-spacing: 0.22em;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
font-size: 15px;
font-weight: 600;
color: var(--text-muted);
transition: color var(--dur-fast) var(--ease-standard);
}
.nav-link:hover { color: var(--ink-900); }
.nav-link--phone {
color: var(--ink-700);
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.nav-link--phone svg {
display: none;
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ==========================================================================
Hero + dark panels
========================================================================== */
.dark-section {
background: var(--ink-800);
color: #f6f3ea;
position: relative;
overflow: hidden;
}
.dark-section__watermark {
position: absolute;
opacity: 0.06;
filter: brightness(0) invert(1);
pointer-events: none;
}
.dark-section__watermark--tr { right: -60px; top: -40px; height: 460px; }
.dark-section__watermark--bl { left: -70px; bottom: -60px; height: 420px; }
.hero__inner { max-width: 1200px; margin: 0 auto; padding: 96px 32px; position: relative; } /* top ≤ pt-24 cap (§4.7) */
.hero__content { max-width: 720px; }
.hero__title {
font-family: var(--font-display);
font-size: 58px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.08;
margin: 0;
color: #f6f3ea;
text-wrap: balance;
}
.hero__lead {
font-size: 19px;
line-height: 1.6;
color: var(--ink-200);
max-width: 560px;
margin: 22px 0 32px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* ==========================================================================
Sections (light)
========================================================================== */
.section { max-width: 1200px; margin: 0 auto; padding: 96px 32px; }
/* ---- The loan: terms card ---- */
.terms-card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
/* 1px grid gap on a border-coloured background paints hairline dividers that
reflow automatically at any column count. */
.terms-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border-subtle);
}
.term { background: var(--surface-card); padding: 32px; }
.term__label {
font-family: var(--font-brand);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-700);
}
.term__value { display: flex; align-items: baseline; gap: 5px; margin: 12px 0 8px; }
.term__note { font-size: 13px; color: var(--text-muted); }
/* Text-valued tile (structure, not a shoppable number) — same weight/color as
the numeric tiles but sized to hold a short phrase. */
.term__value--text {
display: block;
font-family: var(--font-mono);
font-size: 21px;
font-weight: 600;
color: var(--ink-700);
line-height: 1.2;
}
.terms-footnote {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-muted);
margin: 16px 0 0;
}
.terms-footnote i { width: 16px; height: 16px; color: var(--copper-500); flex-shrink: 0; }
.terms-footnote { align-items: flex-start; }
.terms-cta { color: var(--copper-600); font-weight: 700; }
.terms-cta:hover { color: var(--copper-700); }
/* ---- Use cases ---- */
.usecases {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 32px;
}
.usecase {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 28px;
}
.icon-badge {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--copper-50);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.icon-badge i { color: var(--copper-600); }
.usecase h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
margin: 0 0 8px;
color: var(--text-strong);
}
.usecase p { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin: 0; }
/* ==========================================================================
How it works (sunken band)
========================================================================== */
.band {
background: var(--surface-sunken);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.band__inner { max-width: 1200px; margin: 0 auto; padding: 96px 32px; }
.band-title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 600;
margin: 10px 0 40px;
color: var(--text-strong);
}
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.step { display: flex; flex-direction: column; gap: 14px; }
.step__head { display: flex; align-items: center; gap: 14px; }
.step__num { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--copper-500); }
.step__rule { flex: 1; height: 1px; background: var(--border-default); }
.step__head i { color: var(--ink-600); }
.step h3 {
font-family: var(--font-display);
font-size: 21px;
font-weight: 700;
margin: 0;
color: var(--text-strong);
}
.step p { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; }
/* ==========================================================================
For newer investors (dark panel)
========================================================================== */
.dark-panel__inner { max-width: 1200px; margin: 0 auto; padding: 96px 32px; position: relative; }
.dark-panel__intro { max-width: 720px; }
.dark-panel__title {
font-family: var(--font-display);
font-size: 42px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.12;
margin: 12px 0 0;
color: #f6f3ea;
padding-bottom: 4px; /* italic descender clearance if a line leans */
text-wrap: balance;
}
.dark-panel__lead {
font-size: 18px;
line-height: 1.6;
color: var(--ink-200);
max-width: 600px;
margin: 20px 0 0;
}
.dark-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.dark-feature { display: flex; flex-direction: column; gap: 12px; }
.dark-feature .icon-badge {
margin-bottom: 0;
background: rgba(152, 140, 104, 0.22);
}
.dark-feature .icon-badge i { color: var(--copper-400); }
.dark-feature h3 {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
margin: 4px 0 0;
color: #fff;
}
.dark-feature p { font-size: 15px; line-height: 1.6; color: var(--ink-200); margin: 0; }
/* ==========================================================================
FAQ
========================================================================== */
.faq-band { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); }
.faq-band__inner { max-width: 880px; margin: 0 auto; padding: 96px 32px; }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 24px 28px;
}
.faq-item h3 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
margin: 0 0 8px;
color: var(--text-strong);
}
.faq-item p { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; }
/* ==========================================================================
CTA + contact
========================================================================== */
.cta-section { max-width: 1120px; margin: 0 auto; padding: 96px 32px; }
.cta-panel { background: var(--ink-700); border-radius: var(--radius-xl); padding: 56px 48px; }
.cta-panel__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.cta-panel__intro-col { max-width: 520px; }
.cta-panel__title {
font-family: var(--font-display);
font-size: 38px;
font-weight: 600;
color: #f6f3ea;
margin: 0;
letter-spacing: -0.01em;
}
.cta-panel__lead { font-size: 17px; color: rgba(255, 255, 255, 0.9); margin: 12px 0 0; }
.cta-contacts {
display: flex;
gap: 40px;
flex-wrap: wrap;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
/* Inside the split CTA the contacts stack under the pitch. */
.cta-panel__intro-col .cta-contacts { flex-direction: column; gap: 20px; }
/* White card that hosts the inline GoHighLevel form embed. */
.apply-form-card {
background: var(--surface-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 24px;
}
.apply-form-card iframe {
width: 100%;
height: 1355px; /* initial height; form_embed.js resizes to fit after load */
min-height: 480px;
border: none;
display: block;
border-radius: var(--radius-md);
}
.cta-contact { display: flex; align-items: flex-start; gap: 12px; color: #fff; }
.cta-contact i, .cta-contact svg { color: #fff; flex-shrink: 0; margin-top: 2px; }
a.cta-contact { border-radius: var(--radius-md); }
a.cta-contact:hover .cta-contact__value { text-decoration: underline; }
.cta-contact__label {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
}
.cta-contact__value {
font-size: 16px;
overflow-wrap: break-word;
}
.cta-contact__value--mono { font-family: var(--font-mono); }
/* ==========================================================================
Footer
========================================================================== */
.site-footer { background: var(--ink-900); color: var(--ink-200); }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 56px 32px 32px; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-brand__mark { height: 52px; width: auto; }
.footer-brand__name { font-family: var(--font-brand); font-weight: 600; font-size: 15px; color: var(--copper-400); letter-spacing: 0.14em; }
.footer-brand__sub {
font-family: var(--font-brand);
font-weight: 600;
font-size: 9px;
color: var(--ink-300);
letter-spacing: 0.22em;
}
.footer-blurb { max-width: 420px; font-size: 14px; line-height: 1.6; margin: 0 0 32px; }
.footer-legal {
padding-top: 20px;
border-top: 1px solid var(--ink-600);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
color: var(--ink-300);
font-size: 13px;
}
.footer-email { color: var(--ink-300); }
.footer-email:hover { color: var(--copper-400); }
/* ==========================================================================
Thank-you / confirmation page (thank-you.html)
========================================================================== */
.ty-main { max-width: 720px; margin: 0 auto; padding: 96px 32px; text-align: center; }
.ty-badge {
width: 76px;
height: 76px;
border-radius: var(--radius-pill);
background: var(--copper-50);
color: var(--copper-600);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px; /* own line, centered above the eyebrow */
}
.ty-badge i { width: 38px; height: 38px; }
.ty-title {
font-family: var(--font-display);
font-size: 46px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-strong);
margin: 16px 0 0;
}
.ty-lead {
font-size: 19px;
line-height: 1.6;
color: var(--text-muted);
max-width: 560px;
margin: 18px auto 0;
}
.ty-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.ty-next {
text-align: left;
max-width: 560px;
margin: 56px auto 0;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 28px 32px;
}
.ty-next__label {
font-family: var(--font-brand);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-700);
margin: 0 0 4px;
}
.ty-step { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--border-subtle); }
.ty-step:first-of-type { border-top: none; }
.ty-step__num { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--copper-500); line-height: 1.5; }
.ty-step h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 0 0 3px; color: var(--text-strong); }
.ty-step p { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin: 0; }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.hero__title { font-size: 48px; }
.dark-panel__title { font-size: 36px; }
.section-title, .band-title { font-size: 34px; }
/* usecases has two cards, so 2-col is even. 3-item grids (steps,
dark-features) stay 3-col until 768 — collapsing them here left a
dangling single card. */
.usecases { grid-template-columns: repeat(2, 1fr); }
/* Stack the GHL form under the pitch before iPad portrait (~820px)
squeezes the iframe into a ~300px column. */
.cta-panel__grid { grid-template-columns: 1fr; gap: 32px; }
.cta-panel__intro-col { max-width: none; }
}
/* Header-only: collapse to the phone-link-only nav well above the general
768px content breakpoint below. The full nav (3 section links + phone +
button) doesn't actually fit the header row until ~820px wide — verified
against iPad Air's 820px portrait viewport, which was overflowing/crowding
the header while still getting the "desktop" 4-link nav. */
@media (max-width: 830px) {
.site-nav .nav-link:not(.nav-link--phone) { display: none; }
.site-nav { gap: 12px; }
}
@media (max-width: 768px) {
.site-header__inner,
.hero__inner,
.section,
.band__inner,
.dark-panel__inner,
.faq-band__inner,
.cta-section,
.site-footer__inner {
padding-left: 20px;
padding-right: 20px;
}
.hero__inner { padding-top: 72px; padding-bottom: 72px; }
.section, .band__inner, .dark-panel__inner, .faq-band__inner, .cta-section { padding-top: 64px; padding-bottom: 64px; }
.hero__title { font-size: 40px; }
.hero__lead { font-size: 17px; }
.dark-panel__title { font-size: 28px; }
.section-title, .band-title { font-size: 27px; }
.section-lead { font-size: 16px; }
.terms-grid { grid-template-columns: 1fr; }
.usecases, .steps, .dark-features { grid-template-columns: 1fr; }
.cta-panel { padding: 36px 24px; }
.cta-panel__title { font-size: 28px; }
.cta-contacts { gap: 24px; }
.btn--lg, .hero__actions .btn { width: 100%; }
.hero__actions { flex-direction: column; align-items: stretch; }
.ty-main { padding: 64px 20px; }
.ty-title { font-size: 34px; }
.ty-lead { font-size: 17px; }
.ty-next { padding: 24px; }
}
/* Hide the Cinzel wordmark before 600px-class tablets; mark + phone +
full "Get pre-qualified" still overflow in that band. */
@media (max-width: 640px) {
.brand__text { display: none; }
}
/* Shorten header CTAs (Apply / Home) and switch the phone link to an
icon so mark + tap target + button fit iPhone SE and 320px Androids. */
@media (max-width: 540px) {
.hero__title { font-size: 34px; }
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
padding-left: 16px;
padding-right: 16px;
gap: 10px;
}
.site-header .btn--md { padding: 0 14px; width: auto; }
.btn-label--full { display: none; }
.btn-label--short { display: inline; }
.nav-link__phone-text { display: none; }
.nav-link--phone {
width: 44px;
height: 44px;
flex-shrink: 0;
}
.nav-link--phone svg { display: block; }
.cta-panel { padding: 28px 16px; }
.apply-form-card { padding: 12px; }
}
/* ==========================================================================
Motion layer (CSS-only, MOTION_INTENSITY ~2-3)
- Hero load-in plays once on first paint — works in every browser, so
"motion claimed = motion shown" holds even where scroll timelines aren't
supported.
- Scroll reveals use CSS scroll-driven animations (no JS, no scroll
listeners), guarded by @supports so unsupported browsers render the
content statically instead of leaving it stuck at opacity:0.
- Everything below is gated behind prefers-reduced-motion: no-preference.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
@keyframes gw-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hero: staggered fade-up on load */
.hero__content > * { animation: gw-rise 0.7s var(--ease-out) both; }
.hero__content > :nth-child(1) { animation-delay: 0.05s; }
.hero__content > :nth-child(2) { animation-delay: 0.13s; }
.hero__content > :nth-child(3) { animation-delay: 0.21s; }
.hero__content > :nth-child(4) { animation-delay: 0.29s; }
/* Content blocks reveal as they scroll into view */
@supports (animation-timeline: view()) {
.terms-card, .usecase, .step, .dark-feature, .faq-item {
opacity: 0;
animation: gw-rise 0.8s var(--ease-out) both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
}
}
/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition: none !important;
animation: none !important; /* also cancels the load-in + scroll reveals */
}
}