/* ==========================================================================
Self-hosted webfonts
--------------------------------------------------------------------------
Previously fetched from fonts.googleapis.com + fonts.gstatic.com. That cost
two extra origins -- DNS, TLS and a round trip each -- plus a
render-blocking stylesheet, before any text could paint. On the throttled
mobile profile that is where most of FCP was going.
Latin and latin-ext only; the cyrillic, greek and vietnamese subsets Google
ships are not needed here. font-display:swap is preserved from the original.
========================================================================== */
/* Cinzel — latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/cinzel-latin-ext-060f4e.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel — latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/cinzel-latin-30d2fd.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cinzel — latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/cinzel-latin-ext-060f4e.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel — latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/cinzel-latin-30d2fd.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cinzel — latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/cinzel-latin-ext-060f4e.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel — latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/cinzel-latin-30d2fd.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces — latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url(/fonts/fraunces-latin-ext-e10a00.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces — latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url(/fonts/fraunces-latin-77489e.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces — latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(/fonts/fraunces-latin-ext-915607.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces — latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(/fonts/fraunces-latin-8b8b95.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/inter-latin-ext-749a30.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/inter-latin-1ab1ad.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/inter-latin-ext-749a30.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/inter-latin-1ab1ad.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/inter-latin-ext-749a30.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/inter-latin-1ab1ad.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/inter-latin-ext-749a30.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/inter-latin-1ab1ad.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono — latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/jetbrains-mono-latin-ext-2b68e3.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono — latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/jetbrains-mono-latin-be8484.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
Rally Point Title Agency — Design System v3
Style: Trust & Authority (Legal / Financial / Premium Real Estate)
========================================================================== */
:root {
/* ------------------------------------------------------------------------
Brand palette — deep maroon + warm parchment + burnished bronze
------------------------------------------------------------------------ */
--red-950: #3D0808;
--red-900: #5C0D0D;
--red-800: #6F1414;
--red-700: #7A1414; /* primary brand red */
--red-600: #931C1C; /* CTA */
--red-500: #B43A3A;
--red-400: #D26B6B;
--red-100: #F3D9D6;
--red-50: #FBEDEC;
--ink-950: #0B0B0C;
--ink-900: #161616;
--ink-800: #1F1F20;
--ink-700: #2B2B2D;
--ink-600: #424247;
--ink-500: #5E5E66;
--ink-400: #8A8A92;
--ink-300: #B8B5AE;
--ink-200: #D9D5CC;
--ink-100: #E9E4D9;
--ink-50: #F2EEE4;
/* Burnished bronze — for credentials, badges, accents */
--bronze-700: #8A6A3A;
--bronze-600: #A07F4A;
--bronze-500: #B8995E;
--bronze-400: #C9AE76;
--bronze-100: #ECDFC4;
--bronze-50: #F7F0E0;
--paper: #FBF8F1; /* warm parchment background */
--paper-2: #F4EFE3; /* deeper parchment for alt sections */
--canvas: #FFFFFF; /* card surface */
--canvas-2: #FDFBF6; /* secondary card surface */
--success: #2D7A4A;
--warn: #C28A2A;
--error: #B23A3A;
/* Semantic tokens */
--bg: var(--paper);
--bg-alt: var(--paper-2);
--surface: var(--canvas);
--surface-2: var(--canvas-2);
--text: var(--ink-900);
--text-muted: var(--ink-500);
--text-soft: var(--ink-400);
--border: var(--ink-200);
--border-soft: var(--ink-100);
--accent: var(--red-700);
--accent-2: var(--bronze-600);
/* ------------------------------------------------------------------------
Typography
------------------------------------------------------------------------ */
/* Cinzel — display only (wordmark + h1 large-display moments) */
--font-display: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
/* Fraunces — editorial serif for all headings (variable, with optical sizes) */
--font-serif: 'Fraunces', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
/* Inter — workhorse sans */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
/* JetBrains Mono — for tabular numerals on metrics */
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Type scale (1.250 minor third on mobile, scales to 1.333 on desktop) */
--fs-xs: 0.75rem; /* 12 — micro labels */
--fs-sm: 0.8125rem; /* 13 — captions */
--fs-base: 1rem; /* 16 — body */
--fs-md: 1.125rem; /* 18 — lede */
--fs-lg: 1.25rem; /* 20 — small heading */
--fs-xl: 1.5rem; /* 24 */
--fs-2xl: 1.875rem; /* 30 */
--fs-3xl: 2.5rem; /* 40 */
--fs-4xl: clamp(2.5rem, 5vw, 4.25rem); /* hero display */
--fs-5xl: clamp(3rem, 7vw, 5.75rem); /* page-head display */
/* ------------------------------------------------------------------------
Spacing — 8pt grid
------------------------------------------------------------------------ */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 32px;
--s-8: 40px;
--s-9: 56px;
--s-10: 72px;
--s-11: 96px;
--s-12: 144px;
--section-y: clamp(72px, 9vw, 144px);
/* Layout */
--container: 1240px;
--container-narrow: 920px;
--container-wide: 1440px;
/* Radius */
--r-sm: 6px;
--r: 10px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-full: 9999px;
/* Shadows — multi-layer, subtle */
--shadow-xs: 0 1px 1px rgba(11,11,12,0.04);
--shadow-sm: 0 1px 2px rgba(11,11,12,0.06), 0 1px 3px rgba(11,11,12,0.04);
--shadow: 0 4px 12px rgba(11,11,12,0.06), 0 2px 4px rgba(11,11,12,0.04);
--shadow-md: 0 14px 28px -8px rgba(11,11,12,0.10), 0 4px 10px rgba(11,11,12,0.04);
--shadow-lg: 0 30px 60px -15px rgba(11,11,12,0.18), 0 10px 20px rgba(11,11,12,0.06);
--shadow-ring: 0 0 0 1px rgba(11,11,12,0.04);
--shadow-red: 0 14px 28px -10px rgba(122,20,20,0.30), 0 6px 12px rgba(122,20,20,0.10);
--shadow-bronze: 0 14px 28px -10px rgba(184,153,94,0.30);
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--t-fast: 150ms var(--ease-out);
--t: 220ms var(--ease-out);
--t-slow: 420ms var(--ease-out);
--header-h: 76px;
}
/* ==========================================================================
Reset
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
font-feature-settings: "ss01", "cv11";
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
width: 100%;
}
/* height:auto matters as much as max-width here. Without it, an ![]()
that
carries a height="" attribute for CLS uses that number as its actual
height, which overrides aspect-ratio and renders the image the wrong
shape. Anything needing a fixed height sets one explicitly and wins. */
img, svg, video { max-width: 100%; height: auto; display: block; }
a {
color: var(--text);
text-decoration: none;
transition: color var(--t);
}
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5 {
font-family: var(--font-serif);
color: var(--text);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.022em;
margin: 0 0 var(--s-4);
font-variation-settings: "opsz" 144;
}
h1 { font-size: var(--fs-4xl); font-weight: 400; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 400; letter-spacing: -0.028em; }
h3 { font-size: var(--fs-xl); font-weight: 500; line-height: 1.2; }
h4 { font-size: var(--fs-md); font-family: var(--font-sans); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 var(--s-4); color: var(--text); }
p + p { margin-top: var(--s-2); }
button { font-family: inherit; cursor: pointer; }
/* Inline code — used in the privacy policy to name cookies exactly. Nothing
styled before, so it fell back to the browser default monospace at a
size that clashed with the body text. */
code {
font-family: var(--font-mono);
font-size: 0.88em;
padding: 0.1em 0.34em;
border-radius: 4px;
background: rgba(184, 153, 94, 0.13);
color: var(--ink-800);
}
/* Tabular numerals for any element marked .tabular or stat numbers */
.tabular, .stat-num {
font-feature-settings: "tnum", "lnum";
font-variant-numeric: tabular-nums lining-nums;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
::selection { background: var(--red-100); color: var(--red-950); }
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--ink-900); color: white;
padding: 12px 20px; z-index: 1000;
font-weight: 600;
}
.skip-link:focus { left: 0; color: white; }
/* Accessible-only text (screen readers only) */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Layout
========================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 40px);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink-950); color: var(--ink-100); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--canvas); }
.section--dark p { color: var(--ink-200); }
.section-head { max-width: 780px; margin-bottom: var(--s-10); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.55; }
.section--dark .section-head p { color: var(--ink-200); }
/* Empty-state placeholder for sections waiting on real data
(e.g. live blog feed, Google Reviews integration) */
.empty-state {
max-width: 560px;
margin-inline: auto;
padding: var(--s-9) var(--s-7);
text-align: center;
background: var(--canvas);
border: 1px dashed var(--ink-200);
border-radius: var(--r-lg);
color: var(--text-muted);
}
.section--alt .empty-state { background: var(--bg); }
.empty-state .empty-state-eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze-600);
margin-bottom: var(--s-3);
}
.empty-state p { line-height: 1.6; margin-bottom: var(--s-5); }
.empty-state p:last-of-type { margin-bottom: var(--s-6); }
.empty-state .btn { margin-top: 0; }
/* Contact form status message */
.form-status {
margin-top: var(--s-4, 0.75rem);
min-height: 1.2em;
text-align: center;
font-size: var(--fs-sm, 0.9rem);
}
.form-status[data-kind="pending"] { color: var(--text-muted, #6b6b6b); }
.form-status[data-kind="success"] { color: #1f7a3c; font-weight: 600; }
.form-status[data-kind="error"] { color: #b3261e; font-weight: 600; }
/* Google reviews widget — populated by /data/reviews.json on the homepage */
/* Reviews showcase — soft warm photo backdrop draws attention to social proof */
.reviews-showcase {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--bronze-50, #F7F0E0);
}
.reviews-showcase-bg {
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(180deg, rgba(247,240,224,0.86) 0%, rgba(247,240,224,0.78) 45%, rgba(247,240,224,0.90) 100%),
url("/images/reviews-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.reviews-showcase-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%);
pointer-events: none;
}
.reviews-showcase .review {
box-shadow: 0 18px 40px -22px rgba(30,22,10,0.28), 0 2px 6px -2px rgba(30,22,10,0.10);
}
.reviews-aggregate {
text-align: center;
font-size: var(--fs-md, 1rem);
color: var(--text-muted, #6b6b6b);
margin-bottom: var(--s-7, 2rem);
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-6, 1.5rem);
}
.review {
background: var(--canvas, #fff);
border: 1px solid var(--ink-100, #e9ecef);
border-radius: var(--r-lg, 12px);
padding: var(--s-6, 1.5rem);
display: flex;
flex-direction: column;
gap: var(--s-3, 0.75rem);
}
.review-header {
display: flex;
align-items: center;
gap: var(--s-3, 0.75rem);
}
.review-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: var(--ink-100, #e9ecef);
}
.review-avatar--initial {
display: flex;
align-items: center;
justify-content: center;
background: var(--bronze-600, #8c6a3f);
color: #fff;
font-weight: 600;
font-family: var(--font-sans, sans-serif);
}
.review-author {
display: flex;
flex-direction: column;
min-width: 0;
}
.review-author-name {
font-weight: 600;
margin: 0;
font-size: var(--fs-sm, 0.9rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.review-author-time {
font-size: var(--fs-xs, 0.8rem);
color: var(--text-muted, #6b6b6b);
margin: 0;
}
.review-stars {
color: var(--bronze-600, #8c6a3f);
font-size: var(--fs-md, 1rem);
letter-spacing: 2px;
margin: 0;
}
.review-text {
margin: 0;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 6;
line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
#google-reviews[data-state="error"]::after,
#google-reviews[data-state="empty"]::after {
content: 'Reviews loading from Google soon.';
display: block;
text-align: center;
padding: var(--s-7, 2rem);
color: var(--text-muted, #6b6b6b);
grid-column: 1 / -1;
}
/* Skeleton placeholder rows on /forms.html while /cms/forms.json loads */
.form-row--skeleton {
pointer-events: none;
cursor: default;
}
.form-row--skeleton .file-icon {
width: 24px;
height: 24px;
display: inline-block;
border-radius: var(--r-sm, 4px);
}
.form-row--skeleton .name { width: 220px; min-height: 1em; }
.form-row--skeleton .type { width: 100px; min-height: 0.8em; }
#form-list[data-state="empty"]::after,
#form-list[data-state="error"]::after {
content: 'Forms loading…';
display: block;
text-align: center;
padding: var(--s-5, 1rem);
color: var(--text-muted, #6b6b6b);
}
#form-list[data-state="empty"]::after { content: 'No forms available yet.'; }
#form-list[data-state="error"]::after { content: 'Forms unavailable right now. Please call 732-359-2009.'; }
/* Blog tag filter — pill row above the post grid on /cms/blog */
.blog-filter {
display: flex;
flex-wrap: wrap;
gap: var(--s-3, 0.5rem);
margin-bottom: var(--s-7, 2rem);
}
.filter-chip {
appearance: none;
font: inherit;
font-size: var(--fs-sm, 0.875rem);
padding: 0.5rem 1rem;
border: 1px solid var(--ink-200, #d9dee3);
border-radius: 999px;
background: var(--canvas, #fff);
color: var(--text, #1c1c1c);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { border-color: var(--bronze-600, #8c6a3f); }
.filter-chip.is-active {
background: var(--bronze-600, #8c6a3f);
border-color: var(--bronze-600, #8c6a3f);
color: #fff;
}
.filter-chip__count {
margin-left: 0.25rem;
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
.filter-chip.is-active .filter-chip__count { opacity: 0.85; }
#blog-posts[data-state="empty"]::after {
content: 'No posts match this filter.';
display: block;
text-align: center;
padding: var(--s-7, 2rem);
color: var(--text-muted, #6b6b6b);
grid-column: 1 / -1;
}
/* Skeleton loaders — used by the latest-posts widget while /cms/blog.json loads */
.skeleton {
position: relative;
overflow: hidden;
background: var(--ink-100, #e9ecef);
border-radius: var(--r-sm, 6px);
color: transparent;
}
.skeleton::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
transform: translateX(-100%);
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton--text { display: inline-block; width: 70%; min-height: 0.9em; }
.post--skeleton .post-image { aspect-ratio: 16 / 10; }
.post--skeleton h3 .skeleton--text { width: 90%; min-height: 1.4em; }
.post--skeleton p .skeleton--text { width: 80%; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.skeleton::after { animation: none; }
}
#latest-posts[data-state="error"]::after,
#latest-posts[data-state="empty"]::after {
content: 'Latest posts unavailable right now.';
display: block;
text-align: center;
color: var(--text-muted);
padding: var(--s-5, 1rem);
grid-column: 1 / -1;
}
/* Homepage 'From the blog' widget — 3-up stacked-card grid.
The site-wide .post is a horizontal 200px-image-column layout. For
the latest-posts widget we override to a 3-column grid of stacked
cards: image on top at 16:9, content below. Same pattern the Grav
blog listing uses, mirrored here so the homepage's three latest
posts sit side by side. */
#latest-posts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-6, 1.5rem);
}
#latest-posts .post {
grid-template-columns: 1fr;
}
#latest-posts .post-image,
#latest-posts .post-image--photo {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-right: none;
border-bottom: 1px solid var(--border-soft, #e5e0d8);
}
#latest-posts .post-image--photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 900px) {
#latest-posts { grid-template-columns: 1fr; }
}
/* Editorial overline — used everywhere to set up brand tone */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s-3);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--s-5);
}
.eyebrow::before {
content: '';
width: 28px; height: 1.5px;
background: currentColor;
}
.eyebrow--bronze { color: var(--bronze-600); }
.section--dark .eyebrow { color: var(--bronze-400); }
.section-head--center .eyebrow { justify-content: center; }
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 14px 26px;
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.005em;
border: 1px solid transparent;
border-radius: var(--r-full);
cursor: pointer;
transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--t); }
.btn--primary {
background: var(--ink-900);
color: var(--canvas);
}
.btn--primary:hover {
background: var(--ink-800);
color: var(--canvas);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn--primary:hover svg { transform: translateX(3px); }
.btn--gold {
background: var(--red-700);
color: white;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn--gold:hover {
background: var(--red-800);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-red), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn--gold:hover svg { transform: translateX(3px); }
.btn--outline {
background: transparent;
color: var(--text);
border-color: var(--ink-300);
}
.btn--outline:hover {
border-color: var(--ink-900);
color: var(--ink-900);
background: var(--canvas);
}
.section--dark .btn--outline,
.btn--outline-light {
color: white;
border-color: rgba(255,255,255,0.28);
}
.section--dark .btn--outline:hover,
.btn--outline-light:hover {
background: white; color: var(--ink-900); border-color: white;
}
.btn--ghost {
background: transparent;
color: var(--text);
padding: 10px 18px;
}
.btn--ghost:hover { color: var(--accent); }
.btn--sm { padding: 10px 18px; font-size: 0.85rem; }
/* ==========================================================================
Announcement bar
========================================================================== */
.announce {
background: var(--ink-950);
color: var(--ink-100);
text-align: center;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 11px 16px;
font-weight: 500;
font-family: var(--font-sans);
}
.announce strong { color: var(--bronze-400); font-weight: 600; }
.announce .sep { color: var(--ink-500); margin-inline: 14px; }
/* ==========================================================================
Header
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(251,248,241, 0.86);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid transparent;
transition: border-color var(--t), background var(--t);
}
.site-header.is-scrolled {
border-bottom-color: var(--border-soft);
background: rgba(251,248,241, 0.94);
}
.nav {
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-6);
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--text);
}
.brand-mark {
width: 38px;
height: 46px;
position: relative;
background: var(--red-700);
color: var(--canvas);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9rem;
letter-spacing: -0.02em;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
display: grid;
place-items: center;
box-shadow: 0 4px 10px -2px rgba(122,20,20,0.35);
flex-shrink: 0;
}
.brand-mark::after {
content: '';
position: absolute;
bottom: -7px; left: 50%;
transform: translateX(-50%);
width: 0; height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 9px solid var(--red-700);
}
.brand-text {
display: inline-flex;
flex-direction: column;
line-height: 1.05;
}
.brand-text strong, .brand-text > span:first-child {
font-family: var(--font-display);
font-size: 0.98rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ink-900);
text-transform: uppercase;
}
.brand-text small {
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze-600);
margin-top: 4px;
}
.brand-logo {
display: block;
height: 52px;
width: auto;
max-width: 220px;
object-fit: contain;
}
.footer-brand .brand-logo {
height: 64px;
max-width: 260px;
filter: brightness(0) invert(1);
}
.nav-menu {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu a {
display: block;
padding: 9px 14px;
font-size: 0.88rem;
font-weight: 500;
color: var(--ink-700);
border-radius: var(--r-sm);
position: relative;
transition: color var(--t), background var(--t);
}
.nav-menu a:hover { color: var(--accent); }
.nav-menu a.is-active {
color: var(--accent);
}
.nav-menu a.is-active::after {
content: '';
position: absolute;
bottom: -2px; left: 14px; right: 14px;
height: 1.5px;
background: var(--accent);
}
.nav-cta {
display: flex;
align-items: center;
gap: var(--s-4);
}
.nav-phone {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-weight: 600;
font-size: 0.88rem;
font-feature-settings: "tnum";
color: var(--ink-900);
white-space: nowrap;
}
.nav-phone svg { width: 14px; height: 14px; color: var(--accent); }
.nav-toggle {
display: none;
background: none;
border: 0;
width: 44px; height: 44px;
align-items: center; justify-content: center;
}
.nav-toggle span {
display: block;
width: 22px; height: 1.8px;
background: var(--ink-900);
position: relative;
transition: transform var(--t), background var(--t);
}
.nav-toggle span::before,
.nav-toggle span::after {
content: '';
position: absolute;
left: 0; width: 22px; height: 1.8px;
background: var(--ink-900);
transition: transform var(--t), top var(--t);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after { top: 0; transform: rotate(-45deg); }
/* ==========================================================================
Hero — Two-panel editorial (Title | 1031)
Both panels on cream. Bronze vertical hairline holds the split with an
R·P wax-seal crest centered on it. Kickers use the site-wide .eyebrow.
Trust strip is a hairline credential row on cream, not a pedestal.
========================================================================== */
.hero {
position: relative;
padding-block: clamp(24px, 3vw, 44px) 0;
background: var(--bg);
}
.hero-vault {
position: relative;
background: transparent;
}
/* Split grid: Title | seam | 1031 */
.hero-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: clamp(28px, 4vw, 72px);
align-items: stretch;
padding-block: clamp(56px, 7vw, 96px);
}
.hero-side {
min-width: 0;
display: flex;
flex-direction: column;
/* Top-aligned, not centred. Centring let each column position itself
independently, so the two eyebrows started at different heights and the
shorter column floated — the taller left side visibly "began higher up".
Aligning to the top lines the eyebrows up; the auto margin below pins
both CTA rows to a shared baseline. */
justify-content: flex-start;
}
/* Both columns are the same height (the grid stretches them), so pushing the
actions down puts the two button rows on one line regardless of how many
lines of lede sit above them. */
.hero-side .hero-actions { margin-top: auto; }
/* The two headlines are set at different sizes — a sentence on the left, a
display lockup on the right — so their natural blocks differ in height and
the ledes beneath them would start at different points. Reserving the
height of two display lines on both makes the ledes align. Content longer
than the reserve still grows normally. */
@media (min-width: 961px) {
.hero-side .hero-h1 { min-height: calc(clamp(2.5rem, 5.2vw, 4.5rem) * 1.96); }
}
/* Divider seam: rule → R·P wax seal → rule */
.hero-divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-4);
padding: 0 var(--s-2);
align-self: stretch;
min-width: 72px;
}
.hero-divider-rule {
width: 1px;
flex: 1;
background: linear-gradient(
to bottom,
transparent 0%,
var(--bronze-500) 22%,
var(--bronze-500) 78%,
transparent 100%);
opacity: 0.55;
}
/* Rally Point icon crest — replaces the R·P wax seal on the divider */
.hero-divider-crest {
display: block;
width: 56px;
height: 56px;
flex-shrink: 0;
object-fit: contain;
}
/* Hero H1 — serif with italic-accent second line */
.hero-h1 {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 5.2vw, 4.5rem);
line-height: 0.98;
letter-spacing: -0.035em;
margin: 0 0 var(--s-6);
font-variation-settings: "opsz" 144, "SOFT" 50;
font-weight: 360;
color: var(--ink-900);
}
.hero-h1 .accent {
font-style: italic;
color: var(--accent);
font-variation-settings: "opsz" 144, "SOFT" 100;
font-weight: 380;
}
.hero-lede {
font-size: clamp(1rem, 1.25vw, 1.15rem);
line-height: 1.55;
color: var(--text-muted);
max-width: 44ch;
margin: 0 0 var(--s-7);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
/* ---- Trust strip — hairline credential row on cream ---- */
/* Hero positioning statement — used as the left column's headline, per the
client. It is a full sentence rather than a two-word display lockup, so it
steps down from .hero-h1's display size; left at that size it ran to six
lines in the column and pushed the hero off the first screen. The face is
inherited from .hero-h1 (--font-serif), which matters: --font-display
(Cinzel) is caps-only and a whole sentence set in it reads as shouting. */
.hero-h1--statement {
font-size: clamp(1.45rem, 2.3vw, 2.05rem);
line-height: 1.26;
letter-spacing: -0.018em;
/* .hero-h1's 360 is tuned for 72px display type, where sheer size carries
the weight. At this size it read as secondary next to "1031 Exchange.",
so the base steps up to 500 to match its presence. Restated in
font-variation-settings because .hero-h1 sets that property without a
wght axis, which would otherwise override font-weight on this variable
font and silently leave it light. */
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500;
/* 30ch lands the sentence on three lines, which fits inside the two-
display-line reserve .hero-side sets. At 19ch it wrapped to four and
overran the reserve, pushing this column's lede a line below the one
opposite — the misalignment was visible even though both columns were
top-aligned. */
max-width: 30ch;
text-wrap: balance;
}
/* The three promises carry the line, so they take weight rather than italics.
.hero-h1 sets font-variation-settings without a "wght" axis, which in some
browsers wins over font-weight on a variable font — so the axis is restated
here explicitly instead of relying on font-weight alone. */
.hero-h1--statement em {
font-style: normal;
/* Pushed to 700 now the base is 500, so the three promises stay clearly
heavier than the text around them rather than blurring into it. */
font-weight: 700;
font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 700;
color: var(--accent);
}
.hero-trust-bar {
position: relative;
padding: clamp(28px, 3.5vw, 48px) 0;
background: var(--bg);
border-top: 1px solid rgba(184, 153, 94, 0.38);
}
.hero-trust-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: var(--s-6);
}
/* Reviews are the only item left in the bar now that the credential marks
live in "Our Partners" — a 3-column grid would strand it on the left. */
.hero-trust-inner--solo { grid-template-columns: minmax(0, 1fr); }
.hero-trust-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
min-height: 84px;
color: var(--ink-800);
text-decoration: none;
position: relative;
}
.hero-trust-item + .hero-trust-item::before {
content: '';
position: absolute;
left: 0;
top: 15%;
bottom: 15%;
width: 1px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(184, 153, 94, 0.4) 22%,
rgba(184, 153, 94, 0.4) 78%,
transparent 100%);
}
/* WBE badge — bronze hairline frame, no plate */
.hero-trust-item img[alt*="Woman-Owned"],
.hero-trust-item img[alt*="WBE"] {
max-height: 64px;
width: auto;
height: auto;
display: block;
padding: 6px 10px;
background: transparent;
border: 1px solid rgba(184, 153, 94, 0.32);
border-radius: 8px;
}
.trust-kicker {
display: block;
font-family: var(--font-display);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze-600);
line-height: 1;
}
/* Stewart plate — dark ink pill so the white-on-transparent asset reads */
.trust-stewart-plate {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ink-900);
padding: 10px 18px;
border: 1px solid rgba(184, 153, 94, 0.32);
border-radius: var(--r-full);
box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.25);
}
.trust-stewart-plate img {
display: block;
height: 24px;
width: auto;
max-width: 100%;
}
/* ==========================================================================
Instagram — curated posts on /resources.html
--------------------------------------------------------------------------
Images are whatever the client uploads, so the tile forces a square crop
with object-fit rather than trusting the source aspect ratio. Captions are
clamped to three lines so one long post cannot make its tile tower over
the rest of the row.
========================================================================== */
.ig-grid {
display: grid;
/* Fixed three across rather than auto-fill. Auto-sizing worked out to five
columns in a 1240px container, which left the default six posts as a row
of five plus a lone orphan. Three columns means 3, 6, or 9 posts all fill
their rows, and matches the .cards--3 rhythm used elsewhere. It also
leaves the tiles wide enough for a caption to breathe. */
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ig-grid { grid-template-columns: 1fr; } }
.ig-post {
display: flex;
flex-direction: column;
gap: 14px;
text-decoration: none;
color: inherit;
}
.ig-post-image {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--r-lg);
border: 1px solid rgba(184, 153, 94, 0.28);
background: var(--surface);
}
.ig-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ig-post:hover .ig-post-image img,
.ig-post:focus-visible .ig-post-image img { transform: scale(1.04); }
.ig-post-caption {
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--text-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ig-post:hover .ig-post-caption { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
.ig-post-image img { transition: none; }
.ig-post:hover .ig-post-image img { transform: none; }
}
/* ==========================================================================
Our Partners — certifications, underwriters, industry memberships
--------------------------------------------------------------------------
The supplied marks are a mix of transparent PNG and JPEG-on-white, at four
different aspect ratios. Rather than fight that, every logo sits on a white
plate of equal height: the white-background assets blend into the plate and
the mismatch stops reading as a mistake. Logos are sized by max-height so a
tall square mark (FLTA) and a wide one (ALTA) look optically similar.
========================================================================== */
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: clamp(20px, 2.5vw, 32px);
}
.partner-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.partner-plate {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 104px;
padding: 18px 22px;
background: #fff;
border: 1px solid rgba(184, 153, 94, 0.28);
border-radius: var(--r-lg);
box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.28);
}
.partner-plate img {
display: block;
max-height: 58px;
max-width: 100%;
width: auto;
height: auto;
}
/* Stewart is a wide, short wordmark rather than a badge. Capping it at the
same height as the others would stretch it edge to edge and make it shout;
this holds it to a comparable optical weight. */
.partner-plate--wordmark img { max-height: 26px; }
.partner-label {
font-family: var(--font-display);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.35;
}
@media (max-width: 560px) {
.partners-grid { grid-template-columns: repeat(2, 1fr); }
.partner-plate { min-height: 88px; padding: 14px 16px; }
.partner-plate img { max-height: 46px; }
}
/* Google rating — dark serif number on cream, gold stars */
.hero-trust-item--google:hover .trust-google-rating { color: var(--accent); }
.trust-google-body {
display: inline-flex;
align-items: center;
gap: 10px;
}
.trust-google-rating {
font-family: var(--font-serif);
font-size: 1.6rem;
line-height: 1;
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.02em;
transition: color var(--t);
}
.trust-google-stars {
display: inline-flex;
gap: 2px;
}
.trust-google-stars svg {
width: 18px; height: 18px;
fill: #F5B301;
}
/* ==========================================================================
Underwriter / credentials strip
========================================================================== */
.trust-strip {
background: var(--canvas);
padding-block: var(--s-7);
border-block: 1px solid var(--border-soft);
}
.trust-strip-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--s-7) var(--s-9);
}
.trust-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-soft);
flex-shrink: 0;
}
.trust-logos {
display: flex;
flex-wrap: wrap;
gap: var(--s-4) var(--s-6);
align-items: center;
flex: 1;
justify-content: flex-start;
}
.trust-logos span {
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 600;
color: var(--ink-700);
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 7px 14px;
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
background: var(--bg);
transition: border-color var(--t), color var(--t);
}
.trust-logos span:hover {
border-color: var(--bronze-400);
color: var(--ink-900);
}
/* ==========================================================================
Service cards
========================================================================== */
.cards {
display: grid;
gap: var(--s-6);
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--5 { grid-template-columns: repeat(5, 1fr); }
.card {
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 32px;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
position: relative;
isolation: isolate;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 60%, var(--bronze-50) 100%);
opacity: 0;
transition: opacity var(--t);
z-index: -1;
}
.card:hover {
border-color: var(--ink-200);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.card:hover::before { opacity: 1; }
.card-icon {
width: 48px;
height: 48px;
border-radius: 10px;
background: var(--paper-2);
color: var(--accent);
display: grid;
place-items: center;
margin-bottom: var(--s-5);
position: relative;
}
.card-icon svg { width: 24px; height: 24px; }
.card:hover .card-icon {
background: var(--accent);
color: white;
}
.card-icon { transition: background var(--t), color var(--t); }
.card h3 {
font-size: 1.2rem;
font-family: var(--font-serif);
font-weight: 500;
margin-bottom: var(--s-3);
letter-spacing: -0.015em;
}
.card p {
color: var(--text-muted);
font-size: 0.93rem;
margin-bottom: var(--s-5);
line-height: 1.55;
}
.card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-900);
letter-spacing: 0.005em;
position: relative;
}
.card-link svg {
width: 14px; height: 14px;
transition: transform var(--t);
}
.card:hover .card-link svg { transform: translateX(4px); }
.card-link::after {
content: '';
position: absolute;
left: 0; right: 18px;
bottom: -2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t);
}
.card:hover .card-link::after { transform: scaleX(1); }
.card-link:hover { color: var(--accent); }
/* ==========================================================================
Audience tabs
========================================================================== */
.audience-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--s-8);
padding: 5px;
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
width: fit-content;
margin-inline: auto;
box-shadow: var(--shadow-xs);
}
.audience-tab {
padding: 11px 22px;
border: 0;
background: transparent;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-muted);
border-radius: var(--r-full);
transition: all var(--t);
font-family: inherit;
}
.audience-tab.is-active {
background: var(--ink-900);
color: white;
box-shadow: var(--shadow-sm);
}
.audience-tab:not(.is-active):hover {
color: var(--ink-900);
background: var(--bg-alt);
}
.audience-panel {
display: none;
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-xl);
padding: clamp(32px, 4vw, 56px);
box-shadow: var(--shadow);
align-items: center;
gap: clamp(32px, 4vw, 56px);
grid-template-columns: 1fr 1fr;
}
.audience-panel.is-active { display: grid; }
/* Grid items default to a min-content minimum, so once the panel image
declared width="760" that column refused to shrink below 760px and grew
past its half, squeezing the copy beside it. min-width:0 lets 1fr do what
it looks like it does. The width/height attributes stay -- they are what
stops the lazy image shifting layout as it loads. */
.audience-panel > * { min-width: 0; }
.audience-panel ul { list-style: none; padding: 0; margin: 0 0 var(--s-7); }
.audience-panel li {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-2) 0;
color: var(--ink-700);
}
.audience-panel li svg {
width: 20px; height: 20px;
color: var(--accent);
flex-shrink: 0;
margin-top: 3px;
}
/* ==========================================================================
Timeline / process
========================================================================== */
.timeline {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s-6);
margin-top: var(--s-9);
}
.timeline::before {
content: '';
position: absolute;
top: 28px;
left: 8%; right: 8%;
height: 1px;
background: linear-gradient(90deg, var(--bronze-400), var(--accent));
z-index: 0;
opacity: 0.5;
}
.step { position: relative; z-index: 1; text-align: center; }
.step-num {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--canvas);
color: var(--ink-900);
border: 1.5px solid var(--bronze-400);
display: grid;
place-items: center;
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
margin: 0 auto var(--s-5);
box-shadow: 0 0 0 8px var(--bg-alt);
}
.section--dark .step-num {
background: var(--ink-950);
color: var(--bronze-400);
box-shadow: 0 0 0 8px var(--ink-950);
}
.step h4 { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; margin-bottom: 6px; }
.step p { font-size: 0.86rem; color: var(--text-muted); margin: 0; }
.section--dark .step p { color: var(--ink-300); }
/* ==========================================================================
FAQ accordion (1031 page etc.)
========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-q {
width: 100%;
text-align: left;
background: none;
border: 0;
padding: 24px 40px 24px 0;
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
color: var(--ink-900);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
letter-spacing: -0.01em;
}
.faq-q:hover { color: var(--accent); }
.faq-q .icon {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--paper-2);
display: grid; place-items: center;
color: var(--accent);
flex-shrink: 0;
transition: all var(--t);
}
.faq-q[aria-expanded="true"] .icon {
background: var(--ink-900);
color: white;
transform: rotate(45deg);
}
.faq-q .icon svg { width: 14px; height: 14px; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t); }
.faq-q[aria-expanded="true"] + .faq-a { max-height: 800px; }
.faq-a-inner { padding: 0 0 24px; color: var(--text-muted); max-width: 90%; }
/* ==========================================================================
Testimonials / reviews
========================================================================== */
.testimonials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.testimonial {
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 32px;
position: relative;
display: flex;
flex-direction: column;
transition: transform var(--t), box-shadow var(--t);
}
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial::before {
content: '“';
position: absolute;
top: 14px; right: 22px;
font-family: var(--font-serif);
font-size: 5rem;
color: var(--bronze-100);
line-height: 1;
pointer-events: none;
}
.testimonial .stars {
display: flex; gap: 1px;
color: #D4A33A;
margin-bottom: var(--s-4);
}
.testimonial .stars svg { width: 16px; height: 16px; }
.testimonial blockquote {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 400;
font-style: italic;
color: var(--ink-800);
line-height: 1.5;
margin: 0 0 var(--s-6);
flex: 1;
letter-spacing: -0.005em;
}
.testimonial .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial .who .avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bronze-500), var(--bronze-700));
color: var(--canvas);
display: grid;
place-items: center;
font-family: var(--font-serif);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0;
}
.testimonial .who strong {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--ink-900);
line-height: 1.2;
}
.testimonial .who span {
font-size: 0.78rem;
color: var(--text-soft);
font-feature-settings: "tnum";
}
.reviews-head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-4);
margin-bottom: var(--s-9);
}
.review-badge {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 11px 22px;
background: var(--canvas);
border: 1px solid var(--border);
border-radius: var(--r-full);
box-shadow: var(--shadow-xs);
}
.review-badge .score {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 600;
color: var(--ink-900);
line-height: 1;
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.review-badge .stars {
display: flex; gap: 1px;
color: #D4A33A;
}
.review-badge .stars svg { width: 16px; height: 16px; }
.review-badge .count {
font-size: 0.82rem;
color: var(--text-muted);
}
.review-badge .google {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.78rem; font-weight: 600;
padding-left: 14px;
border-left: 1px solid var(--border);
color: var(--text-muted);
}
.review-badge .google svg { width: 14px; height: 14px; }
/* ==========================================================================
CTA band
========================================================================== */
.cta-band {
background:
radial-gradient(ellipse at 100% 0%, rgba(184,153,94,0.20), transparent 50%),
linear-gradient(135deg, var(--red-950), var(--red-800));
color: white;
border-radius: var(--r-xl);
padding: clamp(40px, 5vw, 64px);
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--s-7);
align-items: center;
position: relative;
overflow: hidden;
}
.cta-band::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 90%, rgba(255,255,255,0.04) 0, transparent 40%);
pointer-events: none;
}
.cta-band h2 { color: white; margin: 0 0 8px; font-weight: 400; }
.cta-band p { color: rgba(255,255,255,0.78); margin: 0; font-size: 1.05rem; }
.cta-band .actions {
display: flex;
gap: var(--s-3);
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.cta-band .btn--outline {
color: white;
border-color: rgba(255,255,255,0.28);
}
.cta-band .btn--outline:hover {
background: white; color: var(--red-900); border-color: white;
}
/* ==========================================================================
Forms
========================================================================== */
.form {
background: var(--canvas);
padding: 40px;
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
box-shadow: var(--shadow);
}
.field { margin-bottom: var(--s-5); }
.field label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink-900);
margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: 13px 14px;
font-family: inherit;
font-size: 0.95rem;
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
background: var(--canvas-2);
color: var(--text);
transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: 0;
border-color: var(--accent);
background: var(--canvas);
box-shadow: 0 0 0 4px rgba(122,20,20,0.10);
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
.field--check {
display: flex; align-items: flex-start; gap: var(--s-3);
}
.field--check input { width: auto; margin-top: 3px; }
.field--check label { font-weight: 400; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
/* Legacy .form-status rule deleted — it set display:none by default and
expected .success / .error CLASS selectors to be added by the old demo
submit handler. With that handler removed and the modern handler using
data-kind attributes, this block was hiding all status messages.
The [data-kind="..."] rules above are the active style. */
/* ==========================================================================
Page header (interior pages)
========================================================================== */
.page-head {
padding-block: clamp(72px, 9vw, 120px) clamp(56px, 7vw, 88px);
background: var(--bg);
position: relative;
overflow: hidden;
}
.page-head::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(184,153,94,0.12), transparent 50%);
pointer-events: none;
}
.page-head .container {
position: relative;
max-width: var(--container-narrow);
text-align: center;
}
.page-head .crumbs {
font-size: 0.78rem;
font-weight: 500;
color: var(--text-muted);
margin-bottom: var(--s-5);
letter-spacing: 0.06em;
}
.page-head .crumbs a { color: var(--text-muted); }
.page-head .crumbs a:hover { color: var(--accent); }
.page-head h1 {
font-size: var(--fs-5xl);
letter-spacing: -0.035em;
margin-bottom: var(--s-5);
font-weight: 380;
}
.page-head .lede {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
color: var(--text-muted);
margin: 0 auto;
max-width: 640px;
line-height: 1.5;
}
.page-head .eyebrow { justify-content: center; }
/* ==========================================================================
About page specifics
========================================================================== */
.about-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(40px, 5vw, 88px);
align-items: center;
}
.founder-card {
background: linear-gradient(135deg, var(--red-950), var(--red-800));
color: white;
padding: clamp(32px, 4vw, 48px);
border-radius: var(--r-xl);
position: relative;
overflow: hidden;
}
.founder-card::before {
content: '"';
position: absolute;
top: -60px; right: 24px;
font-family: var(--font-serif);
font-size: 18rem;
color: rgba(184,153,94,0.18);
line-height: 1;
font-style: italic;
}
.founder-avatar {
width: 72px; height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bronze-400), var(--bronze-700));
color: var(--ink-950);
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 700;
margin-bottom: var(--s-6);
border: 2px solid rgba(255,255,255,0.2);
}
.founder-photo {
width: clamp(200px, 42%, 280px);
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
object-position: center top;
float: left;
shape-outside: circle(50%);
margin: 4px var(--s-6) var(--s-4) 0;
border: 3px solid rgba(255,255,255,0.25);
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
@media (max-width: 640px) {
.founder-photo {
float: none;
shape-outside: none;
width: clamp(180px, 65%, 240px);
margin: 0 auto var(--s-6);
display: block;
}
}
.founder-card h3 {
color: white;
font-size: clamp(1.85rem, 2.4vw, 2.35rem);
font-family: var(--font-serif);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.05;
margin-bottom: var(--s-3);
}
.founder-card .role {
color: var(--bronze-400);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: var(--s-4);
display: block;
font-weight: 700;
}
.founder-card p { color: rgba(255,255,255,0.82); margin-bottom: var(--s-3); }
/* About composite — one section, two columns: founder (left) and a
stacked pair of credential mini-cards (right). Condenses founder +
WBE + Stewart into a single tight block. */
.about-composite {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 40px);
align-items: stretch;
}
.about-composite .founder-card {
height: 100%;
padding: clamp(28px, 3vw, 40px);
}
.about-composite .founder-card p:last-child { margin-bottom: 0; }
.cred-stack {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
gap: clamp(16px, 1.6vw, 22px);
min-height: 0;
}
.cred-mini {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(20px, 2vw, 28px);
align-items: center;
padding: clamp(20px, 2.4vw, 32px);
border-radius: var(--r-lg);
border: 1px solid var(--border-soft);
background: var(--canvas);
box-shadow: var(--shadow-sm);
}
.cred-mini-mark {
display: block;
width: clamp(120px, 12vw, 160px);
height: auto;
flex-shrink: 0;
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.08));
}
.cred-mini-plate {
display: grid;
place-items: center;
width: clamp(140px, 14vw, 180px);
padding: clamp(18px, 1.8vw, 22px) clamp(14px, 1.6vw, 20px);
background: linear-gradient(160deg, var(--ink-950), var(--ink-900));
border-radius: var(--r-md);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
flex-shrink: 0;
}
.cred-mini-plate img {
display: block;
width: 100%;
max-width: 140px;
height: auto;
}
.cred-mini-body .eyebrow {
color: var(--accent);
margin-bottom: var(--s-2);
}
.cred-mini-body h3 {
font-family: var(--font-serif);
font-size: clamp(1.15rem, 1.4vw, 1.4rem);
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: var(--s-3);
}
.cred-mini-body p {
font-size: 0.95rem;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
}
.cred-mini-photo {
display: block;
width: clamp(140px, 14vw, 180px);
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: 25% center;
border-radius: var(--r-md);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
flex-shrink: 0;
}
.cred-mini-link {
display: inline-flex;
align-items: center;
gap: 0.35em;
margin-top: var(--s-3);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
transition: gap 0.2s ease;
}
.cred-mini-link:hover { gap: 0.6em; }
a.cred-mini--link {
color: inherit;
text-decoration: none;
transition: transform var(--t), box-shadow var(--t);
}
a.cred-mini--link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
a.cred-mini--link:hover .cred-mini-link { gap: 0.6em; }
/* Story video — 16:9 responsive embed with framed treatment */
.story-video {
max-width: 960px;
margin: var(--s-7) auto 0;
}
.page-head-split .story-video {
max-width: none;
margin: 0;
}
/* Split hero — centered crumbs+eyebrow above, then copy | video row.
Used on the About page so the video is above the fold beside the h1. */
.page-head--split { padding-block: clamp(48px, 6vw, 72px); }
.page-head--split > .container {
max-width: var(--container-wide);
}
.page-head-top {
text-align: center;
margin-bottom: var(--s-7);
}
.page-head-top .crumbs { margin-bottom: var(--s-3); }
.page-head-top .eyebrow { justify-content: center; }
.page-head-split {
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.9fr);
gap: clamp(20px, 2.4vw, 36px);
align-items: stretch;
}
.page-head-copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.page-head--split h1 {
font-size: clamp(1.9rem, 3.4vw, 2.65rem);
margin-bottom: var(--s-4);
}
.page-head--split .lede { margin-bottom: 0; }
@media (max-width: 860px) {
.page-head-split {
grid-template-columns: 1fr;
gap: var(--s-6);
}
.page-head-split .story-video { order: 2; }
}
.story-video-frame {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--ink-950);
box-shadow: 0 24px 60px -20px rgba(11,11,12,0.35), 0 2px 8px -2px rgba(11,11,12,0.15);
border: 1px solid var(--border-soft);
}
.story-video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
margin-top: var(--s-9);
}
.value {
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: clamp(24px, 3vw, 36px);
position: relative;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.value:hover {
border-color: var(--ink-200);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.value::before {
content: '';
position: absolute;
top: 0; left: 24px; right: 24px;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--bronze-500));
border-radius: 0 0 2px 2px;
}
.value h3 {
font-size: 1.15rem;
font-family: var(--font-serif);
font-weight: 500;
display: flex; align-items: center;
gap: 12px;
margin-bottom: var(--s-3);
letter-spacing: -0.01em;
}
.value h3 svg {
width: 24px; height: 24px;
color: var(--accent);
flex-shrink: 0;
}
.value p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }
/* ==========================================================================
Contact / blocks
========================================================================== */
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--s-9);
}
.contact-info { display: flex; flex-direction: column; gap: var(--s-5); }
.contact-block {
padding: var(--s-6);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
background: var(--canvas);
display: flex; gap: var(--s-4);
transition: border-color var(--t);
}
.contact-block:hover { border-color: var(--bronze-400); }
.contact-block .icon {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--paper-2);
color: var(--accent);
display: grid; place-items: center;
flex-shrink: 0;
}
.contact-block h4 { margin: 0 0 4px; font-size: 0.95rem; color: var(--ink-900); }
.contact-block p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.contact-block a { color: var(--ink-900); font-weight: 600; }
.contact-block a:hover { color: var(--accent); }
/* ==========================================================================
Visit-us card (contact page — used in lieu of an embedded map)
========================================================================== */
.visit-card {
display: grid;
grid-template-columns: 180px 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 48px);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.visit-card::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 0% 100%, rgba(122,20,20,0.05), transparent 45%),
radial-gradient(circle at 100% 0%, rgba(184,153,94,0.10), transparent 45%);
pointer-events: none;
}
.visit-card-marker {
width: 140px; height: 140px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, var(--red-700), var(--red-900));
color: var(--bronze-400);
display: grid;
place-items: center;
box-shadow: var(--shadow-red);
position: relative;
z-index: 1;
}
.visit-card-marker svg { width: 56px; height: 56px; }
.visit-card-body { position: relative; z-index: 1; }
.visit-card-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--s-3); }
.visit-card-body p { color: var(--text-muted); max-width: 560px; margin-bottom: var(--s-5); }
.visit-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 720px) {
.visit-card { grid-template-columns: 1fr; text-align: center; }
.visit-card-marker { margin-inline: auto; width: 96px; height: 96px; }
.visit-card-marker svg { width: 40px; height: 40px; }
.visit-card-body p { margin-inline: auto; }
.visit-card-actions { justify-content: center; }
}
/* ==========================================================================
FAQ video grid
========================================================================== */
.faq-videos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-7);
}
.faq-video {
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.faq-video:hover {
border-color: var(--ink-200);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.faq-video .frame {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background:
linear-gradient(135deg, var(--ink-900), var(--ink-700));
overflow: hidden;
}
/* Soft play-glyph placeholder behind the iframe so the tile never reads
as a flat black rectangle if YouTube is slow or blocked. */
.faq-video .frame::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 50%, rgba(184,153,94,0.22), transparent 55%);
}
.faq-video .frame::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
margin: -12px 0 0 -6px;
border-style: solid;
border-width: 12px 0 12px 18px;
border-color: transparent transparent transparent rgba(255,255,255,0.45);
}
.faq-video iframe { position: relative; z-index: 1; }
.faq-video iframe {
position: absolute;
inset: 0;
width: 100%; height: 100%;
border: 0;
}
.faq-video .body { padding: 22px 24px 24px; }
.faq-video h3 {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.faq-video p { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
/* ==========================================================================
Forms (PDF list)
========================================================================== */
.form-list {
display: grid;
gap: var(--s-3);
max-width: 920px;
margin-inline: auto;
}
.form-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: 18px 24px;
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.form-row:hover {
border-color: var(--ink-200);
box-shadow: var(--shadow-sm);
transform: translateX(4px);
}
.form-row .meta { display: flex; align-items: center; gap: 16px; min-width: 0; }
.form-row .file-icon {
width: 40px; height: 40px;
border-radius: 8px;
background: var(--bronze-50);
color: var(--bronze-700);
display: grid; place-items: center;
flex-shrink: 0;
}
.form-row .name {
font-weight: 500;
color: var(--ink-900);
font-size: 0.95rem;
}
.form-row .type {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-soft);
margin-top: 2px;
display: block;
}
.form-row .download {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px;
background: var(--ink-900);
color: white;
border-radius: var(--r-full);
font-size: 0.82rem;
font-weight: 600;
flex-shrink: 0;
transition: background var(--t);
}
.form-row .download:hover { background: var(--accent); color: white; }
.form-row .download svg { width: 14px; height: 14px; }
/* ==========================================================================
Blog
========================================================================== */
.blog-layout {
display: grid;
grid-template-columns: 1fr 240px;
gap: var(--s-9);
align-items: start;
}
.blog-aside { position: sticky; top: 100px; }
.blog-aside h3 {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-soft);
margin-bottom: var(--s-4);
font-weight: 700;
}
.blog-aside ul { list-style: none; padding: 0; margin: 0; }
.blog-aside li { margin-bottom: 2px; }
.blog-aside a {
display: block;
padding: 8px 14px;
border-radius: var(--r-sm);
font-size: 0.9rem;
color: var(--ink-700);
transition: all var(--t);
}
.blog-aside a:hover, .blog-aside a.is-active {
background: var(--canvas);
color: var(--accent);
}
.posts { display: grid; gap: var(--s-6); }
.post {
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
display: grid;
grid-template-columns: 200px 1fr;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.post:hover {
border-color: var(--ink-200);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.post-image {
background: var(--paper-2);
display: grid;
place-items: center;
color: var(--bronze-700);
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
border-right: 1px solid var(--border-soft);
position: relative;
overflow: hidden;
}
.post-image::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 100% 0%, rgba(184,153,94,0.18), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(122,20,20,0.07), transparent 55%);
pointer-events: none;
}
.post-image > * { position: relative; z-index: 1; }
.post-image--photo {
padding: 0;
background: var(--ink-100);
display: block;
text-decoration: none;
}
.post-image--photo::before { display: none; }
.post-image--photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--t);
}
.post:hover .post-image--photo img { transform: scale(1.03); }
.post-body { padding: 28px 32px; }
.post-meta {
font-size: 0.74rem;
color: var(--text-muted);
letter-spacing: 0.04em;
margin-bottom: 10px;
font-feature-settings: "tnum";
}
.post-meta .cat {
color: var(--accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.post h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.post h3 a { color: var(--ink-900); }
.post h3 a:hover { color: var(--accent); }
.post p { color: var(--text-muted); font-size: 0.93rem; margin-bottom: var(--s-3); line-height: 1.55; }
.post .more {
font-size: 0.82rem;
font-weight: 600;
color: var(--accent);
display: inline-flex; align-items: center; gap: 4px;
letter-spacing: 0.01em;
}
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
background: var(--ink-950);
color: var(--ink-200);
padding-block: var(--s-11) var(--s-5);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: var(--s-8);
margin-bottom: var(--s-9);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--s-4); }
.footer-brand .brand-text strong,
.footer-brand .brand-text > span:first-child { color: white; }
.footer-brand p {
color: rgba(255,255,255,0.65);
font-size: 0.92rem;
max-width: 320px;
line-height: 1.55;
}
.footer-col h4 {
color: white;
font-family: var(--font-sans);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.22em;
margin-bottom: var(--s-4);
font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
color: rgba(255,255,255,0.62);
font-size: 0.9rem;
transition: color var(--t);
}
.footer-col a:hover { color: var(--bronze-400); }
.footer-contact li {
display: flex; gap: 10px; align-items: flex-start;
font-size: 0.9rem;
color: rgba(255,255,255,0.62);
}
.footer-contact svg {
width: 16px; height: 16px;
color: var(--bronze-400);
flex-shrink: 0;
margin-top: 3px;
}
.social { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.social a {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
display: grid; place-items: center;
color: white;
transition: background var(--t), color var(--t);
}
.social a:hover { background: var(--bronze-500); color: var(--ink-950); }
.social svg { width: 16px; height: 16px; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--s-3);
padding-top: var(--s-6);
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 0.78rem;
color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.6); }
.footer-bottom a:hover { color: var(--bronze-400); }
/* ==========================================================================
State (NJ/NY/PA/FL) pages — bespoke components
========================================================================== */
/* Stat stack (used in the state 1031 sidebar) */
.stat-stack {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.stat-block {
padding: clamp(20px, 2.4vw, 28px);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(184,153,94,0.25);
border-left: 3px solid var(--bronze-400);
border-radius: var(--r-md);
}
.stat-label {
display: block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze-400);
margin-bottom: var(--s-2);
}
.stat-value {
display: block;
font-family: var(--font-serif);
font-size: clamp(1.35rem, 1.9vw, 1.65rem);
font-weight: 500;
color: var(--canvas);
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: var(--s-2);
}
.stat-caption {
display: block;
font-size: 0.88rem;
color: var(--ink-200);
line-height: 1.5;
}
/* Prop tile — linkable variant (for 1031 tile in NJ services grid) */
.prop-tile--link {
color: inherit;
text-decoration: none;
border-color: var(--bronze-400);
background: linear-gradient(160deg, var(--canvas) 40%, rgba(184,153,94,0.08) 100%);
position: relative;
}
.prop-tile--link .prop-tile-arrow {
display: inline-block;
margin-left: 6px;
color: var(--accent);
transition: transform var(--t);
}
.prop-tile--link:hover .prop-tile-arrow { transform: translateX(3px); }
/* ==========================================================================
Wire fraud page — bespoke components
========================================================================== */
/* Warning callout — amber-tinted panel */
.warning-callout {
background: linear-gradient(160deg, rgba(184,153,94,0.14), rgba(122,20,20,0.06) 100%);
border: 1px solid var(--bronze-400);
border-radius: var(--r-lg);
padding: clamp(28px, 3.4vw, 40px);
position: relative;
box-shadow: var(--shadow-md);
}
.warning-callout-badge {
width: 56px; height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(160deg, var(--accent), var(--red-950));
color: #fff;
margin-bottom: var(--s-5);
box-shadow: 0 8px 20px rgba(122,20,20,0.2);
}
.warning-callout-badge svg { width: 26px; height: 26px; }
.warning-callout-eyebrow {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--s-3);
}
.warning-callout-line {
font-family: var(--font-serif);
font-size: clamp(1.35rem, 1.9vw, 1.7rem);
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 var(--s-4);
}
.warning-callout-line em { color: var(--accent); font-style: italic; }
.warning-callout-body {
font-size: 0.98rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
}
/* Tactic cards (How wire fraud happens) */
.tactic-grid { gap: var(--s-5); }
.tactic-card {
padding: clamp(24px, 3vw, 32px);
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.tactic-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: rgba(122,20,20,0.3);
}
.tactic-icon {
width: 44px; height: 44px;
border-radius: 10px;
background: rgba(122,20,20,0.08);
color: var(--accent);
display: grid;
place-items: center;
margin-bottom: var(--s-4);
}
.tactic-icon svg { width: 22px; height: 22px; }
.tactic-card h3 {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.01em;
margin: 0 0 var(--s-3);
line-height: 1.2;
}
.tactic-card p {
font-size: 0.94rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
}
/* Protection list — big numbered rows (What Rally Point does) */
.protection-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
max-width: 900px;
margin-inline: auto;
}
.protection-item {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(20px, 2.4vw, 32px);
align-items: flex-start;
padding: clamp(24px, 3vw, 32px);
background: var(--canvas);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--bronze-400);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xs);
}
.protection-num {
font-family: var(--font-serif);
font-size: clamp(2rem, 2.8vw, 2.75rem);
font-weight: 500;
color: var(--bronze-700);
letter-spacing: -0.03em;
line-height: 1;
min-width: 72px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.protection-body h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.02em;
margin: 0 0 var(--s-3);
line-height: 1.2;
}
.protection-body p {
font-size: 0.98rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.protection-body strong { color: var(--ink-900); }
/* Self-protect grid — reuse rule-card, tighter spacing */
.self-protect-grid { gap: var(--s-5); }
/* Response steps (victim of fraud - dark section) */
.response-steps {
list-style: none;
padding: 0;
margin: var(--s-9) 0 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
max-width: 900px;
margin-inline: auto;
counter-reset: step;
}
.response-step {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(20px, 2.4vw, 32px);
align-items: flex-start;
padding: clamp(24px, 3vw, 32px);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(184,153,94,0.25);
border-radius: var(--r-lg);
position: relative;
}
.response-step:hover {
border-color: var(--bronze-400);
background: rgba(184,153,94,0.08);
}
.response-mark {
width: 56px; height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(160deg, var(--accent), var(--red-950));
color: #fff;
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 500;
line-height: 1;
box-shadow: 0 6px 18px rgba(122,20,20,0.35);
flex-shrink: 0;
}
.response-body h3 {
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 500;
color: var(--canvas);
letter-spacing: -0.02em;
margin: 0 0 var(--s-3);
line-height: 1.2;
}
.response-body p {
font-size: 0.98rem;
color: var(--ink-200);
line-height: 1.6;
margin: 0;
}
.response-body a {
color: var(--bronze-400);
text-decoration: underline;
text-underline-offset: 3px;
}
.response-tel {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: var(--s-4);
padding: 10px 16px;
background: var(--bronze-400);
color: var(--ink-950) !important;
border-radius: var(--r-full);
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none !important;
transition: transform var(--t), box-shadow var(--t);
}
.response-tel:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(184,153,94,0.35);
}
.response-tel svg { width: 16px; height: 16px; }
/* ==========================================================================
Resources page — 1031 day calculator
========================================================================== */
.calc-1031 {
max-width: 960px;
margin-inline: auto;
padding: clamp(28px, 3.4vw, 48px);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(184,153,94,0.25);
border-radius: var(--r-xl);
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
margin-top: var(--s-9);
}
.calc-input {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: var(--s-7);
}
.calc-input label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze-400);
}
.calc-input input {
width: 100%;
padding: 16px 48px;
border: 1px solid rgba(184,153,94,0.35);
border-radius: var(--r-md);
background: var(--ink-950) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8995E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat 16px center;
background-size: 20px 20px;
color: var(--canvas);
font-family: var(--font-serif);
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
font-weight: 500;
letter-spacing: -0.02em;
text-align: center;
transition: border-color var(--t), box-shadow var(--t);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.calc-input input:hover { border-color: var(--bronze-400); }
.calc-input input:focus {
outline: none;
border-color: var(--bronze-400);
box-shadow: 0 0 0 3px rgba(184,153,94,0.18);
}
/* Chrome native indicator: keep tappable but visually consistent (transparent, sized) */
.calc-input input::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
cursor: pointer;
padding: 0;
}
.calc-input input::-webkit-date-and-time-value { text-align: center; }
.calc-input { position: relative; }
.calc-hint {
font-size: 0.82rem;
color: var(--ink-200);
margin: 0;
}
.calc-results {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
}
.calc-card {
padding: clamp(20px, 2.4vw, 28px);
background: linear-gradient(160deg, rgba(184,153,94,0.08), rgba(184,153,94,0.02));
border: 1px solid rgba(184,153,94,0.25);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
gap: 10px;
}
.calc-card--warn {
border-color: var(--bronze-400);
background: linear-gradient(160deg, rgba(184,153,94,0.14), rgba(122,20,20,0.10));
}
.calc-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze-400);
}
.calc-value {
font-family: var(--font-serif);
font-size: clamp(1.25rem, 1.6vw, 1.55rem);
font-weight: 500;
color: var(--canvas);
letter-spacing: -0.02em;
line-height: 1.15;
font-variation-settings: "opsz" 144, "SOFT" 50;
font-feature-settings: "tnum", "lnum";
}
.calc-caption {
font-size: 0.82rem;
color: var(--ink-200);
line-height: 1.5;
}
.calc-note {
margin-top: calc(var(--s-3) * -1);
font-size: 0.85rem;
color: var(--ink-200);
opacity: 0.8;
}
.calc-note em { font-style: italic; }
.calc-disclaimer {
margin-top: var(--s-6);
padding: var(--s-4) var(--s-5);
background: rgba(0,0,0,0.25);
border-left: 3px solid var(--bronze-400);
border-radius: var(--r-sm);
font-size: 0.85rem;
color: var(--ink-200);
line-height: 1.55;
}
.calc-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-top: var(--s-6);
justify-content: center;
}
/* ==========================================================================
Services page — bespoke components
========================================================================== */
/* Clickable service tile — hover states + directional arrow */
.services-grid { gap: var(--s-5); }
.service-tile {
display: flex;
flex-direction: column;
padding: clamp(24px, 3vw, 32px);
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
color: inherit;
text-decoration: none;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
position: relative;
isolation: isolate;
}
.service-tile:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--bronze-400);
}
.service-tile h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.02em;
margin: var(--s-4) 0 var(--s-3);
line-height: 1.2;
}
.service-tile p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0 0 var(--s-5);
flex: 1;
}
.service-tile-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--accent);
transition: gap var(--t);
}
.service-tile-link svg { width: 14px; height: 14px; }
.service-tile:hover .service-tile-link { gap: 10px; }
.service-tile-badge {
position: absolute;
top: var(--s-4);
right: var(--s-4);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bronze-700);
background: rgba(184,153,94,0.14);
padding: 4px 10px;
border-radius: var(--r-full);
}
.service-tile--feature {
background: linear-gradient(160deg, var(--canvas) 40%, rgba(184,153,94,0.10) 100%);
border-color: var(--bronze-400);
}
/* Buyer/Seller split panel */
.split-panel {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: clamp(24px, 3vw, 36px);
box-shadow: var(--shadow-sm);
}
.split-panel > div + div {
padding-top: var(--s-5);
border-top: 1px solid var(--border-soft);
}
.split-panel h4 {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-900);
margin: 0 0 var(--s-4);
}
.split-panel h4 svg {
width: 18px; height: 18px;
color: var(--accent);
}
/* Detail card — used for lists inside a bordered panel */
.detail-card {
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: clamp(28px, 3.4vw, 40px);
box-shadow: var(--shadow-sm);
}
.detail-card .eyebrow { margin-bottom: var(--s-4); }
.detail-card--split {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
}
.detail-card--split > div + div {
padding-top: var(--s-5);
border-top: 1px solid var(--border-soft);
}
.detail-card h4 {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.01em;
margin: 0 0 var(--s-4);
}
.detail-card p {
font-size: 0.96rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
}
.detail-card em { color: var(--accent); font-style: italic; }
/* Dot list (subtle bulleted list) */
.dot-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.dot-list li {
color: var(--ink-700);
font-size: 0.96rem;
padding-left: var(--s-4);
position: relative;
line-height: 1.5;
}
.dot-list li::before {
content: '';
position: absolute;
left: 0; top: 0.65em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--bronze-400);
}
/* SLA cards (refinance turnaround grid) */
.sla-grid { gap: var(--s-5); }
.sla-card {
padding: clamp(24px, 3vw, 32px);
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
border-top: 3px solid var(--bronze-400);
box-shadow: var(--shadow-sm);
}
.sla-num {
display: block;
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: var(--s-4);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.sla-card h4 {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
color: var(--ink-900);
margin: 0 0 var(--s-3);
}
.sla-card p {
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
}
/* Exam cards (title examination three-column) */
.exam-grid { gap: var(--s-5); }
.exam-card {
padding: clamp(24px, 3vw, 32px);
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
position: relative;
box-shadow: var(--shadow-sm);
}
.exam-num {
display: inline-block;
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 500;
color: var(--bronze-700);
letter-spacing: 0.06em;
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 2px solid var(--bronze-400);
}
.exam-card h4 {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.02em;
margin: 0 0 var(--s-3);
}
.exam-card p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.exam-card strong { color: var(--ink-900); }
/* Feature callout (wire fraud) */
.feature-callout {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(24px, 3vw, 48px);
padding: clamp(32px, 4vw, 56px);
background: linear-gradient(160deg, var(--canvas) 40%, rgba(184,153,94,0.08) 100%);
border: 1px solid var(--bronze-400);
border-radius: var(--r-xl);
align-items: center;
box-shadow: var(--shadow-md);
}
.feature-callout-mark {
width: clamp(80px, 10vw, 128px);
height: clamp(80px, 10vw, 128px);
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(160deg, var(--accent), var(--red-950));
color: #fff;
box-shadow: 0 12px 32px rgba(122,20,20,0.25);
flex-shrink: 0;
}
.feature-callout-mark svg { width: 50%; height: 50%; }
.feature-callout-body .eyebrow { margin-bottom: var(--s-3); }
.feature-callout-body h2 { margin-bottom: var(--s-4); }
.feature-callout-body p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 var(--s-6);
max-width: 60ch;
}
.feature-callout-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
/* Multi-state state cards */
.state-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
margin-top: var(--s-8);
}
.state-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: clamp(28px, 3vw, 40px) var(--s-5);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(184,153,94,0.35);
border-radius: var(--r-lg);
color: inherit;
text-decoration: none;
text-align: center;
transition: background var(--t), border-color var(--t), transform var(--t);
}
.state-card:hover {
background: rgba(184,153,94,0.10);
border-color: var(--bronze-400);
transform: translateY(-3px);
}
.state-abbr {
font-family: var(--font-serif);
font-size: clamp(2.25rem, 3.5vw, 3.25rem);
font-weight: 500;
color: var(--bronze-400);
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: var(--s-2);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.state-name {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
color: var(--canvas);
letter-spacing: 0.02em;
}
.state-meta {
font-size: 0.78rem;
color: var(--ink-200);
line-height: 1.4;
}
/* ==========================================================================
1031 Exchange page — bespoke components
========================================================================== */
/* Page-head action buttons row (hero CTA) */
.page-head-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
justify-content: center;
margin-top: var(--s-7);
}
.page-head-actions .btn svg { width: 16px; height: 16px; }
/* Bottom-of-page exchange contact form */
.exchange-form-section { scroll-margin-top: 88px; background: var(--bg-alt); }
.exchange-form-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.exchange-form-copy h2 { margin: var(--s-3) 0 var(--s-5); }
.exchange-form-copy p { font-size: 1.05rem; line-height: 1.55; color: var(--text-muted); margin-bottom: var(--s-7); }
.exchange-form-copy em { color: var(--accent); font-style: italic; font-weight: 500; }
.check-list--tight { gap: var(--s-3); margin-bottom: var(--s-8); }
/* Direct-line phone card — full-width horizontal anchor beneath the
check-list. Icon disc / phone info / hours + inline CTA. */
.direct-line {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-5);
padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px);
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
color: inherit;
text-decoration: none;
box-shadow: var(--shadow-xs);
transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.direct-line:hover {
border-color: var(--bronze-400);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.direct-line-icon {
display: grid;
place-items: center;
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(160deg, var(--accent), var(--red-950));
color: #fff;
flex-shrink: 0;
}
.direct-line-icon svg { width: 20px; height: 20px; }
.direct-line-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.direct-line-kicker {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-soft);
line-height: 1;
}
.direct-line-num {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 1.8vw, 1.65rem);
font-weight: 500;
color: var(--ink-900);
letter-spacing: -0.02em;
line-height: 1;
}
.direct-line-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
text-align: right;
}
.direct-line-hours {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
}
.direct-line-hours .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 3px rgba(45,122,74,0.16);
animation: pulse 2.4s ease-in-out infinite;
}
.direct-line-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
transition: gap var(--t);
}
.direct-line-cta svg { width: 14px; height: 14px; }
.direct-line:hover .direct-line-cta { gap: 10px; }
.form--compact {
padding: clamp(24px, 2.6vw, 32px);
border-radius: var(--r-lg);
}
.form--compact h2 {
font-size: clamp(1.4rem, 1.9vw, 1.75rem);
margin: 0 0 6px;
line-height: 1.15;
}
.form-sub {
color: var(--text-muted);
margin: 0 0 var(--s-5);
font-size: 0.95rem;
}
.form-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 8px;
background: var(--ink-900);
color: var(--bronze-400);
border-radius: var(--r-full);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: var(--s-5);
}
.form-tag svg { width: 14px; height: 14px; }
/* Check + alert lists */
.check-list, .alert-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.check-list li, .alert-list li {
display: flex;
align-items: flex-start;
gap: var(--s-3);
color: var(--ink-800);
font-size: 1rem;
line-height: 1.5;
}
.check-list li svg {
flex-shrink: 0;
width: 20px; height: 20px;
margin-top: 3px;
color: var(--success);
}
.alert-list li svg {
flex-shrink: 0;
width: 20px; height: 20px;
margin-top: 3px;
color: var(--accent);
}
/* Compact strategy card (used in cross-state section) */
.strategy-card {
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: clamp(24px, 3vw, 40px);
box-shadow: var(--shadow-sm);
}
.strategy-card .eyebrow { margin-bottom: var(--s-5); }
/* Section-level CTA sentence (used to close sub-sections) */
.section-cta {
text-align: center;
margin-top: var(--s-8);
font-size: 1.05rem;
color: var(--ink-800);
}
.section-cta a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Disclaimer callout */
.disclaimer {
font-size: 0.9rem;
color: var(--text-muted);
padding: var(--s-4) var(--s-5);
background: var(--bg-alt);
border-left: 3px solid var(--bronze-400);
border-radius: var(--r-sm);
margin-top: var(--s-6);
}
.disclaimer--center {
text-align: center;
border-left: 0;
border-top: 3px solid var(--bronze-400);
max-width: 780px;
margin: var(--s-10) auto 0;
}
/* Rule cards (three identification rules) */
.rule-card {
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: clamp(24px, 3vw, 36px);
position: relative;
transition: transform var(--t), box-shadow var(--t);
}
.rule-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rule-badge {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bronze-700);
padding: 5px 10px;
background: var(--bronze-50, rgba(184,153,94,0.14));
border-radius: var(--r-full);
margin-bottom: var(--s-4);
}
.rule-card h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 500;
margin-bottom: var(--s-3);
letter-spacing: -0.02em;
color: var(--ink-900);
}
.rule-card p { color: var(--text-muted); line-height: 1.55; margin: 0; }
/* Tall detail cards (Forward / Simultaneous) */
.card--tall {
padding: clamp(28px, 3.5vw, 44px);
}
.card-eyebrow {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--s-4);
}
.card-caption {
font-size: 0.82rem;
font-weight: 700;
color: var(--ink-900);
letter-spacing: 0.04em;
text-transform: uppercase;
margin: var(--s-5) 0 var(--s-3);
}
.card-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.card-list li {
color: var(--text-muted);
padding-left: var(--s-4);
position: relative;
}
.card-list li::before {
content: '';
position: absolute;
left: 0; top: 0.65em;
width: 6px; height: 1px;
background: var(--bronze-400);
}
/* Property tiles (commercial section) */
.property-grid { gap: var(--s-4); }
.prop-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-3);
padding: var(--s-6) var(--s-4);
background: var(--canvas);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
text-align: center;
transition: border-color var(--t), transform var(--t);
}
.prop-tile:hover { border-color: var(--bronze-400); transform: translateY(-2px); }
.prop-tile svg { width: 28px; height: 28px; color: var(--accent); }
.prop-tile h4 {
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 600;
color: var(--ink-800);
margin: 0;
line-height: 1.3;
}
/* Qualify grid (three columns: yes / no / alt) */
.qualify-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
margin-top: var(--s-8);
}
.qualify-card {
padding: clamp(24px, 3vw, 36px);
border-radius: var(--r-lg);
border: 1px solid var(--border-soft);
background: var(--canvas);
}
.qualify-head {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-5);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--border-soft);
}
.qualify-head svg { width: 24px; height: 24px; flex-shrink: 0; }
.qualify-head h3 {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
margin: 0;
letter-spacing: -0.01em;
color: var(--ink-900);
}
.qualify-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.qualify-card li {
color: var(--ink-700);
font-size: 0.95rem;
padding-left: var(--s-4);
position: relative;
}
.qualify-card li::before {
content: '';
position: absolute;
left: 0; top: 0.65em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--bronze-400);
}
.qualify-card--yes .qualify-head svg { color: var(--success); }
.qualify-card--no .qualify-head svg { color: var(--accent); }
.qualify-card--alt {
background: linear-gradient(160deg, var(--ink-950), var(--ink-900));
border-color: var(--ink-900);
color: var(--ink-100);
}
.qualify-card--alt .qualify-head { border-bottom-color: rgba(255,255,255,0.1); }
.qualify-card--alt .qualify-head h3 { color: var(--canvas); }
.qualify-card--alt .qualify-head svg { color: var(--bronze-400); }
.qualify-card--alt li { color: var(--ink-200); }
.qualify-card--alt li::before { background: var(--bronze-400); }
.qualify-note {
margin-top: var(--s-5);
padding-top: var(--s-4);
border-top: 1px solid var(--border-soft);
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.5;
}
.qualify-card--alt .qualify-note {
border-top-color: rgba(255,255,255,0.1);
color: var(--ink-200);
}
/* Custom 3-step exchange timeline (visual for the 1031 process) */
.ex-flow {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 48px);
margin-top: var(--s-9);
padding-top: 30px;
}
.ex-flow-track {
position: absolute;
left: 12%; right: 12%;
top: 60px;
height: 2px;
background: linear-gradient(
90deg,
var(--bronze-400) 0%,
var(--bronze-400) 30%,
var(--accent) 50%,
rgba(184,153,94,0.35) 100%
);
z-index: 0;
}
.ex-node {
position: relative;
z-index: 1;
text-align: center;
padding: 0 var(--s-3);
}
.ex-day {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze-400);
margin-bottom: var(--s-3);
padding: 4px 10px;
border: 1px solid var(--bronze-700);
border-radius: var(--r-full);
}
.ex-node-mark {
width: 62px; height: 62px;
border-radius: 50%;
background: linear-gradient(160deg, var(--canvas), var(--bg-alt));
color: var(--ink-950);
display: grid;
place-items: center;
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 500;
margin: 0 auto var(--s-5);
border: 2px solid var(--bronze-400);
box-shadow: 0 0 0 8px var(--ink-950), 0 8px 24px rgba(184,153,94,0.25);
position: relative;
}
.ex-node--current .ex-node-mark {
background: radial-gradient(circle at 30% 30%, var(--bronze-400), var(--bronze-700));
color: var(--ink-950);
box-shadow: 0 0 0 8px var(--ink-950), 0 8px 32px rgba(184,153,94,0.5);
}
.ex-node h3 {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
margin-bottom: var(--s-3);
letter-spacing: -0.02em;
color: var(--canvas);
}
.ex-node p {
color: var(--ink-200);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
max-width: 32ch;
margin-inline: auto;
}
/* ==========================================================================
Reveal-on-scroll
========================================================================== */
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
will-change: opacity, transform;
}
[data-reveal].is-in {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
Utilities
========================================================================== */
.text-center { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 960px) {
/* Hero stacks: Title panel → horizontal seam with R·P wax seal → 1031
panel. Everything on cream. */
.hero-grid {
grid-template-columns: 1fr;
gap: 0;
padding-block: clamp(40px, 8vw, 64px);
}
.hero-side--title,
.hero-side--1031 {
padding-inline: clamp(16px, 4vw, 32px);
}
.hero-side--title { padding-block: clamp(8px, 3vw, 20px) clamp(20px, 5vw, 32px); }
.hero-side--1031 { padding-block: clamp(20px, 5vw, 32px) clamp(8px, 3vw, 20px); }
/* Hero eyebrow: the site-wide .eyebrow is inline-flex; on narrow screens
the long "Serving NJ · NY · PA · FL" text overflows the viewport.
Allow wrap and tighten letter-spacing slightly inside the hero only. */
.hero-side .eyebrow {
display: block;
letter-spacing: 0.16em;
line-height: 1.6;
}
.hero-side .eyebrow::before {
display: inline-block;
vertical-align: middle;
margin-right: var(--s-3);
margin-bottom: 3px;
}
/* Divider becomes a horizontal seam: rule — crest — rule */
.hero-divider {
flex-direction: row;
padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 32px);
width: 100%;
height: auto;
align-self: auto;
background: transparent;
gap: clamp(12px, 3vw, 20px);
}
.hero-divider-rule {
width: auto;
height: 1px;
flex: 1;
background: linear-gradient(
to right,
transparent 0%,
var(--bronze-500) 20%,
var(--bronze-500) 80%,
transparent 100%);
opacity: 0.55;
}
.hero-divider-crest {
width: 64px;
height: 64px;
}
/* Trust strip: three items stack vertically on mobile */
.hero-trust-inner {
grid-template-columns: 1fr;
gap: var(--s-6);
}
.hero-trust-item + .hero-trust-item::before {
left: 15%; right: 15%;
top: 0; bottom: auto;
width: auto; height: 1px;
background: linear-gradient(
to right,
transparent 0%,
rgba(184, 153, 94, 0.35) 20%,
rgba(184, 153, 94, 0.35) 80%,
transparent 100%);
}
.hero-trust-item + .hero-trust-item {
padding-top: var(--s-5);
}
}
@media (max-width: 1100px) {
/* Slightly tighten the nav so 8 items + phone + CTA all fit on one row */
.nav-menu a { padding: 8px 10px; font-size: 0.82rem; }
.nav { gap: var(--s-4); }
}
@media (max-width: 1200px) {
.cards--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.cards--4 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(2, 1fr); }
.cards--5 { grid-template-columns: repeat(2, 1fr); }
.faq-videos { grid-template-columns: repeat(2, 1fr); }
.blog-layout { grid-template-columns: 1fr; }
.blog-aside { position: static; }
.blog-aside ul { display: flex; flex-wrap: wrap; gap: 4px; }
.testimonials { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
.timeline { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); }
.timeline::before { display: none; }
.audience-panel { grid-template-columns: 1fr; }
.about-grid { grid-template-columns: 1fr; }
.about-composite { grid-template-columns: 1fr; gap: var(--s-6); }
.cred-mini { grid-template-columns: 1fr; text-align: center; }
.cred-mini-mark, .cred-mini-plate, .cred-mini-photo { margin-inline: auto; }
.cred-mini-photo { width: min(240px, 70%); }
.qualify-grid { grid-template-columns: 1fr; }
.ex-flow { grid-template-columns: 1fr; gap: var(--s-8); padding-top: 0; }
.ex-flow-track { display: none; }
.property-grid.cards--4 { grid-template-columns: repeat(2, 1fr); }
.exchange-form-grid { grid-template-columns: 1fr; gap: var(--s-8); }
.state-grid { grid-template-columns: repeat(2, 1fr); }
.calc-results { grid-template-columns: 1fr; }
.protection-item, .response-step { grid-template-columns: 1fr; text-align: left; }
.protection-num, .response-mark { margin-bottom: var(--s-3); }
.feature-callout { grid-template-columns: 1fr; text-align: center; }
.feature-callout-mark { margin-inline: auto; }
.feature-callout-actions { justify-content: center; }
.detail-card--split { grid-template-columns: 1fr; }
.direct-line { grid-template-columns: auto 1fr; }
.direct-line-meta {
grid-column: 1 / -1;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-align: left;
padding-top: var(--s-3);
margin-top: var(--s-3);
border-top: 1px solid var(--border-soft);
}
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.contact-grid { grid-template-columns: 1fr; }
.cta-band { grid-template-columns: 1fr; text-align: center; }
.cta-band .actions { justify-content: center; }
.values { grid-template-columns: 1fr; }
.trust-strip-inner { justify-content: center; }
.trust-strip-inner .trust-logos { justify-content: center; gap: var(--s-7); }
}
@media (max-width: 768px) {
.faq-videos { grid-template-columns: 1fr; }
.post { grid-template-columns: 1fr; }
.post-image { aspect-ratio: 16/8; height: 140px; }
.form-row { flex-direction: column; align-items: flex-start; padding: 18px; gap: 12px; }
.form-row .download { align-self: stretch; justify-content: center; }
.hero-h1 { line-height: 1.02; }
.page-head h1 { font-size: clamp(2rem, 9vw, 3rem); }
.trust-strip-inner { flex-direction: column; text-align: center; gap: var(--s-4); }
.trust-strip-inner .trust-logos { gap: var(--s-5); justify-content: center; row-gap: var(--s-3); }
.trust-logos span { font-size: 0.75rem; }
/* Strip the header's backdrop-filter on mobile — it creates a containing
block for position:fixed descendants, which trapped the mobile menu
inside the ~76px header height. Simpler: solid background on mobile. */
.site-header {
background: var(--bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.nav-menu {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100vw;
background: var(--bg);
flex-direction: column;
align-items: stretch;
padding: var(--s-6);
gap: 4px;
transform: translateX(100%);
transition: transform var(--t);
overflow-y: auto;
overflow-x: hidden;
z-index: 99;
box-shadow: -8px 0 24px rgba(0,0,0,0.08);
}
body:has(.nav-menu.is-open) { overflow: hidden; }
.nav-menu.is-open { transform: translateX(0); }
.nav-menu a { padding: 14px 18px; font-size: 1rem; }
.nav-toggle { display: inline-flex; }
.nav-phone { display: none; }
.cards--5, .cards--4, .cards--3, .cards--2 { grid-template-columns: 1fr; }
.timeline { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.form { padding: 28px; }
.field-row { grid-template-columns: 1fr; }
.audience-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.audience-tab { white-space: nowrap; }
.review-badge { flex-wrap: wrap; justify-content: center; }
.review-badge .google { padding-left: 0; border-left: 0; }
/* Google reviews — keep the desktop card look on mobile (white surface,
border, padding, lift). auto-fit can collapse the grid quietly; force
a single column and re-assert the card chrome so phones don't show
flat text blocks. */
.reviews-grid { grid-template-columns: 1fr; }
.review {
background: var(--canvas);
border: 1px solid var(--ink-100);
border-radius: var(--r-lg);
padding: var(--s-5);
box-shadow: var(--shadow-sm);
}
/* Homepage 'From the blog' widget — make sure post images fill the
card width on phones instead of sitting at their intrinsic ratio
against an empty right gutter. */
#latest-posts .post-image,
#latest-posts .post-image--photo {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
display: block;
margin-inline: auto;
}
#latest-posts .post-image--photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}