/* ============================================================
NJPFB — Landing Page System
Derived from the NJPFB deck + Crazy Rich Agents design system.
Shared by Direction A (light editorial) and Direction B (bold navy).
============================================================ */
/* Fonts are loaded via + in each page's
(parallel, non-render-blocking) instead of a CSS @import (which blocks until site.css downloads). */
:root {
/* Navy */
--navy-deep: #0D1F30;
--navy-dark: #132942;
--navy: #1B3A5C;
/* Blue */
--blue: #4A8EC2;
--blue-light: #6BAED6;
--blue-pale: #E8F1F8;
/* Orange */
--orange: #E8853D;
--orange-hover: #D4732C;
--orange-light: #F5A94D;
--orange-pale: #FFF4E8;
/* AA-contrast orange for white text / text on pale backgrounds */
--orange-deep: #B85C14;
--orange-deeper:#A85310;
--accent: var(--orange);
--accent-soft: var(--orange-light);
/* Neutrals */
--white: #FFFFFF;
--off-white: #F7F9FC;
--gray-50: #F0F3F7;
--gray-100: #E2E7EE;
--gray-400: #647285;
--gray-600: #556275;
--gray-800: #2D3A48;
--danger: #C84B3F;
--success: #2F8F5F;
--font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
--font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-serif: 'Lora', Georgia, serif;
--font-mono: 'SF Mono', Menlo, Consolas, monospace;
--shadow-sm: 0 2px 4px rgba(13,31,48,0.06), 0 1px 2px rgba(13,31,48,0.04);
--shadow-md: 0 4px 14px rgba(13,31,48,0.08), 0 2px 4px rgba(13,31,48,0.04);
--shadow-lg: 0 16px 36px rgba(13,31,48,0.12), 0 4px 10px rgba(13,31,48,0.06);
--shadow-xl: 0 28px 60px rgba(13,31,48,0.18), 0 10px 20px rgba(13,31,48,0.08);
--shadow-orange: 0 12px 28px rgba(232,133,61,0.32);
--r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px;
--ease: cubic-bezier(0.2, 0, 0, 1);
--maxw: 1200px;
--pad-x: clamp(20px, 5vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--navy-deep);
background: var(--off-white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section.tight { padding-block: clamp(48px, 6vw, 88px); }
.section--navy { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.section--navy .eyebrow { color: var(--accent-soft); }
.section--white { background: var(--white); }
.section--subtle { background: var(--off-white); }
/* Subtle section washes + grain texture to break up long white pages */
.section--warm,
.section--mist,
.section--subtle {
position: relative;
}
.section--warm::before,
.section--mist::before,
.section--subtle::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}
.section--warm {
background:
radial-gradient(ellipse 80% 55% at 12% 0%, rgba(232,133,61,0.09) 0%, transparent 55%),
radial-gradient(ellipse 65% 45% at 92% 100%, rgba(232,133,61,0.06) 0%, transparent 50%),
#FDFBF8;
}
.section--mist {
background:
radial-gradient(ellipse 75% 60% at 50% 0%, rgba(74,142,194,0.07) 0%, transparent 55%),
radial-gradient(ellipse 55% 45% at 100% 100%, rgba(74,142,194,0.05) 0%, transparent 45%),
#F8FAFC;
}
.section--subtle {
background:
radial-gradient(ellipse 70% 50% at 8% 100%, rgba(13,31,48,0.03) 0%, transparent 55%),
var(--off-white);
}
.bg-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 0%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 0%, transparent 75%);
}
/* ---------- Type ---------- */
.eyebrow {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.2em; text-transform: uppercase;
color: var(--accent); margin: 0;
display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; display: inline-block; }
.eyebrow.no-rule::before { display: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: -0.025em; line-height: 1.0; text-wrap: balance; }
.display {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(40px, 6.2vw, 84px); line-height: 0.98; letter-spacing: -0.03em;
margin: 0; text-wrap: balance;
}
.h2 {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(30px, 3.8vw, 54px); line-height: 1.02; letter-spacing: -0.025em;
margin: 0; text-wrap: balance;
}
.h3 {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.01em; margin: 0;
}
.accent { color: var(--accent); }
.serif-lift {
font-family: var(--font-serif); font-style: italic; font-weight: 500;
font-size: clamp(20px, 2.1vw, 28px); line-height: 1.36; color: var(--navy); margin: 0;
}
.section--navy .serif-lift { color: var(--blue-light); }
.lead {
font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--gray-600); margin: 0;
text-wrap: pretty;
}
.section--navy .lead { color: rgba(255,255,255,0.78); }
.kicker-bold { font-style: normal; font-weight: 700; color: var(--navy-deep); }
.section--navy .kicker-bold { color: #fff; }
.mono { font-family: var(--font-mono); font-size: 0.9em; background: var(--gray-50);
padding: 2px 7px; border-radius: 5px; color: var(--navy); }
.section--navy .mono { background: rgba(255,255,255,0.1); color: #fff; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.01em;
padding: 16px 28px; border-radius: var(--r-md); border: 2px solid transparent;
cursor: pointer; transition: background var(--ease) .18s, color var(--ease) .18s, border-color var(--ease) .18s, transform var(--ease) .18s;
white-space: nowrap; line-height: 1;
}
.btn .arr { transition: transform var(--ease) .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--orange-deep); color: #fff; box-shadow: var(--shadow-orange); }
.btn-primary:hover { background: var(--orange-deeper); }
.btn-ghost { background: transparent; color: var(--navy-deep); border-color: var(--gray-100); }
.btn-ghost:hover { border-color: var(--navy-deep); }
.section--navy .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.cta-strip .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.cta-strip .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.section--navy .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn-lg { padding: 20px 36px; font-size: 18px; }
/* ---------- Watch / webinar CTA ---------- */
.btn .play { width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn .play svg { width: 10px; height: 10px; fill: #fff; margin-left: 1px; display: block; }
.btn-watch { background: var(--navy-deep); color: #fff; box-shadow: var(--shadow-md); }
.btn-watch:hover { background: #16314a; }
.section--navy .btn-watch, .cta-strip .btn-watch, .page-hero .btn-watch { background: #fff; color: var(--navy-deep); }
.section--navy .btn-watch:hover, .cta-strip .btn-watch:hover, .page-hero .btn-watch:hover { background: rgba(255,255,255,0.88); }
/* ---------- Nav ---------- */
.nav {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 24px;
padding: 14px var(--pad-x);
background: rgba(247,249,252,0.82); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--gray-100);
}
.nav .logo { height: 40px; width: auto; }
.nav .nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav .nav-links a {
font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--gray-600);
transition: color var(--ease) .15s; letter-spacing: 0.01em;
}
.nav .nav-links a:hover { color: var(--accent); }
.nav .btn { padding: 12px 22px; font-size: 14px; }
.nav.on-navy { background: rgba(13,31,48,0.82); border-bottom-color: rgba(255,255,255,0.08); }
.nav.on-navy .nav-links a { color: rgba(255,255,255,0.72); }
.nav.on-navy .nav-links a:hover { color: var(--accent-soft); }
@media (max-width: 860px) { .nav .nav-links { display: none; } }
/* ---------- Eyebrow pill / chip ---------- */
.pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px; border-radius: var(--r-pill);
background: var(--orange-pale); color: var(--orange-deeper);
font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
}
.section--navy .pill { background: rgba(232,133,61,0.16); color: var(--accent-soft); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* ---------- Squeeze / stat tiles ---------- */
.squeeze-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-tile {
background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
padding: 30px 28px 28px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.section--navy .stat-tile { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.stat-tile .ico { width: 34px; height: 34px; color: var(--accent); margin-bottom: 16px; }
.stat-tile .num {
font-family: var(--font-display); font-weight: 900; line-height: 0.9;
font-size: clamp(44px, 4.6vw, 64px); letter-spacing: -0.03em; color: var(--navy-deep);
}
.section--navy .stat-tile .num { color: #fff; }
.stat-tile .num .sup { color: var(--accent); }
.stat-tile .label {
margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 17px;
color: var(--navy-deep);
}
.section--navy .stat-tile .label { color: #fff; }
.stat-tile .sub { margin-top: 6px; font-size: 15px; color: var(--gray-600); line-height: 1.45; }
.section--navy .stat-tile .sub { color: rgba(255,255,255,0.6); }
.stat-tile .bar { position: absolute; left: 0; bottom: 0; height: 5px; width: 64px; background: var(--accent); }
.kicker-band {
margin-top: 24px; display: flex; align-items: center; gap: 28px;
padding: 24px 32px; border-radius: var(--r-xl);
background: var(--navy-deep); color: #fff;
}
.section--navy .kicker-band { background: rgba(232,133,61,0.12); border: 1px solid rgba(232,133,61,0.3); }
.kicker-band .zero {
font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 6vw, 84px);
line-height: 0.85; color: var(--accent); letter-spacing: -0.04em;
}
.kicker-band .ktxt { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35; }
.kicker-band .ktxt b { font-style: normal; font-weight: 700; color: var(--accent-soft); }
/* ---------- Section header block ---------- */
.sec-head { max-width: 880px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head .h2 { margin-bottom: 18px; }
/* ---------- Tipping point / three forces ---------- */
.forces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.force-card {
background: var(--white); border: 1px solid var(--gray-100); border-left: 5px solid var(--accent);
border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--shadow-sm);
transition: transform var(--ease) .2s, box-shadow var(--ease) .2s;
}
.force-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.section--navy .force-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); border-left-color: var(--accent); }
.force-card .force { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--accent); letter-spacing: -0.01em; }
.force-card .what { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--gray-800); }
.section--navy .force-card .what { color: rgba(255,255,255,0.78); }
.force-card .what b { color: var(--navy-deep); font-weight: 700; }
.section--navy .force-card .what b { color: #fff; }
.coordinate-note {
margin-top: 28px; padding: 22px 30px; border-left: 4px solid var(--accent);
font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.4; color: var(--navy); background: var(--orange-pale); border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.coordinate-note b { font-style: normal; font-weight: 700; color: var(--navy-deep); }
.section--navy .coordinate-note { background: rgba(232,133,61,0.1); color: var(--blue-light); }
.section--navy .coordinate-note b { color: #fff; }
/* ---------- Experts ---------- */
.experts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.expert-card {
background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-2xl);
overflow: hidden; box-shadow: var(--shadow-sm);
transition: transform var(--ease) .2s, box-shadow var(--ease) .2s;
}
.expert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.expert-card .photo { aspect-ratio: 1/1; background: var(--gray-50); position: relative; }
.expert-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.expert-card .photo .disc {
position: absolute; left: 18px; bottom: 18px;
padding: 7px 14px; border-radius: var(--r-pill); background: var(--accent); color: #fff;
font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.expert-card .body { padding: 26px 26px 30px; }
.expert-card .name { font-family: var(--font-display); font-weight: 900; font-size: 24px; letter-spacing: -0.01em; color: var(--navy-deep); }
.expert-card .role { margin-top: 4px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--gray-600); }
.expert-card .cred { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-100);
font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--navy); }
.expert-card .cred b { font-style: normal; font-weight: 700; color: var(--navy-deep); }
/* ---------- Before / After result ---------- */
.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.ba-col { padding: 36px 38px; border-radius: var(--r-xl); }
.ba-col .lbl { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.ba-col .num { font-family: var(--font-display); font-weight: 900; font-size: clamp(42px, 5vw, 68px); line-height: 0.95; letter-spacing: -0.03em; margin-top: 12px; }
.ba-col .num small { font-size: 0.34em; font-weight: 700; letter-spacing: 0; color: inherit; opacity: .65; }
.ba-col .cap { margin-top: 14px; font-size: 15px; line-height: 1.45; }
.ba-col.before { background: var(--gray-50); }
.ba-col.before .lbl { color: var(--gray-400); }
.ba-col.before .num { color: var(--gray-600); }
.ba-col.before .cap { color: var(--gray-600); }
.ba-col.after { background: var(--navy-deep); color: #fff; }
.ba-col.after .lbl { color: var(--accent-soft); }
.ba-col.after .cap { color: rgba(255,255,255,0.7); }
.ba-arrow { display: flex; align-items: center; justify-content: center; padding-inline: 22px; color: var(--accent); }
.ba-arrow svg { width: 42px; height: 42px; }
.delta {
margin-top: 22px; display: inline-flex; align-items: baseline; gap: 18px;
padding: 18px 30px; border-radius: var(--r-xl); background: var(--orange-pale); border: 1px solid rgba(232,133,61,0.3);
}
.delta .big { font-family: var(--font-display); font-weight: 900; font-size: clamp(32px, 3.6vw, 48px); color: var(--orange-hover); letter-spacing: -0.02em; }
.delta .txt { font-size: 15px; color: var(--gray-600); line-height: 1.3; }
.delta .txt small { display: block; font-weight: 700; color: var(--orange-hover); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chips .chip { padding: 9px 16px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--gray-100);
font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy); }
.chips .chip::before { content: "✓ "; color: var(--success); font-weight: 900; }
/* ---------- Big stat split ---------- */
.bigstat { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.bigstat .num { font-family: var(--font-display); font-weight: 900; font-size: clamp(96px, 14vw, 200px); line-height: 0.82; letter-spacing: -0.05em; color: var(--accent); }
.bigstat .num .pct { font-size: 0.4em; vertical-align: 0.5em; }
.bigstat .src { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); }
.bigstat .src small { display:block; font-weight:600; letter-spacing: 0.04em; text-transform: none; color: var(--gray-400); margin-top: 3px; }
.split-bar { height: 16px; border-radius: var(--r-pill); overflow: hidden; display: flex; margin-top: 24px; box-shadow: inset 0 1px 2px rgba(13,31,48,0.1); }
.split-bar .seg-pay { width: 28%; background: var(--gray-400); }
.split-bar .seg-sub { width: 72%; background: var(--accent); }
.split-legend { display: flex; gap: 28px; margin-top: 14px; font-size: 14px; color: var(--gray-600); }
.split-legend .d { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
/* ---------- Burning layer stack ---------- */
.burning-wrap { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.layer-stack { display: flex; flex-direction: column; gap: 12px; }
.layer {
padding: 20px 26px; border-radius: var(--r-lg); background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; align-items: center; gap: 16px;
font-family: var(--font-display); font-weight: 800; font-size: 21px; color: #fff;
}
.layer small { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: rgba(255,255,255,0.55); }
.layer.burning {
background: linear-gradient(100deg, rgba(200,75,63,0.9), rgba(232,133,61,0.85));
border-color: rgba(245,169,77,0.7); box-shadow: 0 12px 30px rgba(200,75,63,0.35);
}
.layer.burning small { color: rgba(255,255,255,0.85); }
.burning-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.burning-list li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; font-size: 18px; line-height: 1.45; color: rgba(255,255,255,0.82); }
.burning-list li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.burning-list li b { color: #fff; font-weight: 700; }
.burning-list li.worst { color: #fff; font-family: var(--font-serif); font-style: italic; font-size: 21px; }
.burning-list li.worst::before { background: var(--danger); }
/* ---------- Move diagram ---------- */
.move-diagram { display: grid; grid-template-columns: 1fr auto 0.7fr; align-items: center; gap: 20px; margin-bottom: 30px; }
.move-box { padding: 22px 24px; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm); }
.move-box .ttl { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 14px; }
.move-box .chip-line { display: flex; flex-wrap: wrap; gap: 9px; }
.move-box .mchip { padding: 9px 15px; border-radius: var(--r-md); background: var(--gray-50); font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy); }
.move-box .mchip.teen { background: var(--danger); color: #fff; }
.move-box.llc { border-color: var(--accent); border-width: 2px; }
.move-box.llc .mchip.teen { background: var(--accent); }
.move-arrow { color: var(--accent); }
.move-arrow svg { width: 38px; height: 38px; }
/* ---------- Three doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.door {
background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
padding: 30px 26px; box-shadow: var(--shadow-sm); text-align: left; position: relative;
transition: transform var(--ease) .2s, box-shadow var(--ease) .2s;
}
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.door .dn { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.door .who { margin-top: 14px; font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--navy-deep); }
.door .who span { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 17px; color: var(--gray-400); margin-left: 8px; }
.door .benefit { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--gray-800); }
.door .benefit b { color: var(--navy-deep); font-weight: 700; }
.gate {
background: var(--navy-deep); color: #fff; border-radius: var(--r-xl); padding: 30px 36px;
margin-bottom: 24px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.gate .step0 { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); }
.gate .gmain { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; }
.gate .gmain .key { color: var(--accent); }
.gate .gsub { font-size: 16px; color: rgba(255,255,255,0.72); max-width: 420px; line-height: 1.45; }
.gate .gsub b { color: #fff; }
/* ---------- FSAP / offer ---------- */
.fsap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fsap-card {
background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
padding: 30px 30px; box-shadow: var(--shadow-sm);
}
.fsap-card .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.fsap-card .ttl { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--navy-deep); letter-spacing: -0.01em; }
.fsap-card .by { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.fsap-card .body { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--gray-600); }
.fsap-card.coord { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
.fsap-card.coord .ttl { color: #fff; }
.fsap-card.coord .body { color: rgba(255,255,255,0.78); }
/* ---------- Qualifiers ---------- */
.qual-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qual-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
padding: 22px 26px; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
font-size: 18px; line-height: 1.45; color: var(--navy-deep); }
.qual-list li .ck { width: 36px; height: 36px; border-radius: 50%; background: rgba(232,133,61,0.14); color: var(--accent);
display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qual-list li .ck svg { width: 20px; height: 20px; stroke-width: 2.6; }
.qual-list li b { font-weight: 700; }
/* ---------- Commitments (will / won't) ---------- */
.commitments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 8px; }
.commit-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-lg);
padding: 26px 26px 28px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.commit-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.commit-will::before { background: var(--accent); }
.commit-wont::before { background: var(--navy); }
.commit-tag { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 12px;
letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-pill); }
.commit-will .commit-tag { background: var(--orange-pale); color: var(--orange-hover); }
.commit-wont .commit-tag { background: var(--blue-pale); color: var(--navy); }
.commit-card p { margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: var(--gray-800); }
@media (max-width: 760px) { .commitments { grid-template-columns: 1fr; } }
/* ---------- Testimonial ---------- */
.testimonial { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.testimonial .quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 3vw, 40px); line-height: 1.3; color: var(--navy-deep); }
.testimonial .quote .gold { color: var(--accent); font-weight: 600; }
.section--navy .testimonial .quote { color: #fff; }
.t-person { display: flex; align-items: center; gap: 18px; padding: 22px; background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.section--navy .t-person { background: rgba(255,255,255,0.05); }
.t-person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.t-person .name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--navy-deep); }
.section--navy .t-person .name { color: #fff; }
.t-person .role { font-size: 13px; color: var(--gray-600); line-height: 1.35; margin-top: 3px; }
.section--navy .t-person .role { color: rgba(255,255,255,0.6); }
/* ---------- Proof stat strip ---------- */
.proof-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--gray-100);
border: 1px solid var(--gray-100); border-radius: var(--r-xl); overflow: hidden; }
.proof-stats .ps { background: var(--white); padding: 26px 22px; }
.proof-stats .ps .n { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.6vw, 38px);
color: var(--navy-deep); letter-spacing: -0.02em; line-height: 1; }
.proof-stats .ps .n::after { content: ""; display: block; width: 34px; height: 4px; background: var(--accent); margin-top: 12px; border-radius: 2px; }
.proof-stats .ps .l { margin-top: 14px; font-size: 13px; line-height: 1.4; color: var(--gray-600);
font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 900px) { .proof-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof-stats { grid-template-columns: 1fr; } }
/* ---------- Voices (testimonial card grid) ---------- */
.voices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
.voice-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
padding: 32px 30px; box-shadow: var(--shadow-sm); transition: transform var(--ease) .2s, box-shadow var(--ease) .2s; }
.voice-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.voice-card.span-2 { grid-column: 1 / -1; }
.voice-card .kicker { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; }
.voice-card .kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent); display: inline-block; }
.voice-card .vq { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.5; color: var(--navy-deep); text-wrap: pretty; }
.voice-card .vq .gold { color: var(--accent); font-weight: 600; font-style: normal; }
.voice-card .vmeta { display: flex; align-items: center; gap: 15px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--gray-100); }
.voice-card .mono { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
background: var(--navy-deep); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0.02em; }
.voice-card .vmeta .name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--navy-deep); }
.voice-card .vmeta .role { font-size: 13px; color: var(--gray-600); line-height: 1.4; margin-top: 3px; }
@media (max-width: 820px) { .voices-grid { grid-template-columns: 1fr; } }
/* ---------- CTA band ---------- */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band .url { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 6vw, 88px); letter-spacing: -0.03em; color: #fff; line-height: 1; }
.cta-band .url .dot { color: var(--accent); }
.cta-reinforce { list-style: none; padding: 0; margin: 32px auto 0; max-width: 620px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.cta-reinforce li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 18px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.cta-reinforce li .chev { color: var(--accent); font-weight: 900; }
.cta-reinforce li b { color: #fff; }
/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: rgba(255,255,255,0.6); padding-block: 56px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer .frow { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.footer .flogo { height: 56px; background: #fff; padding: 8px 14px; border-radius: var(--r-md); }
.footer .ftag { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--accent-soft); }
.footer .disclaimer { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08);
font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.45); max-width: 900px; }
/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
}
body.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.squeeze-grid, .forces, .experts, .doors { grid-template-columns: 1fr; }
.fsap, .qual-list { grid-template-columns: 1fr; }
.bigstat, .burning-wrap, .testimonial, .move-diagram { grid-template-columns: 1fr; }
.beforeafter { grid-template-columns: 1fr; }
.ba-arrow { transform: rotate(90deg); padding-block: 14px; }
.move-arrow { transform: rotate(90deg); justify-self: center; }
}
/* ============================================================
SITE CHROME — multi-page additions (nav, footer, hero, prose,
breadcrumbs, FAQ, cards, forms). Built on the landing system.
============================================================ */
/* ---------- Multi-page nav ---------- */
.nav .nav-links a.active { color: var(--accent); }
.nav .brand { display: flex; align-items: center; gap: 0; }
.nav-cta-wrap { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav .nav-links { margin-left: auto; }
.nav-cta-wrap .nav-links { margin-left: 0; }
/* ---------- Generic page hero (interior pages) ---------- */
.page-hero { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden;
padding-block: clamp(56px, 8vw, 112px); }
.page-hero .eyebrow { color: var(--accent-soft); }
.page-hero h1 { font-family: var(--font-display); font-weight: 900; color: #fff;
font-size: clamp(38px, 5.4vw, 74px); line-height: 0.99; letter-spacing: -0.03em; margin: 20px 0 0;
text-wrap: balance; max-width: 16ch; }
.page-hero .sub { margin: 22px 0 0; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5;
color: rgba(255,255,255,0.78); max-width: 62ch; text-wrap: pretty; }
.page-hero .serif-lift { color: var(--blue-light); }
.page-hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.page-hero.light { background: var(--off-white); color: var(--navy-deep); }
.page-hero.light h1 { color: var(--navy-deep); }
.page-hero.light .sub { color: var(--gray-600); }
.page-hero.light .eyebrow { color: var(--accent); }
/* ---------- Breadcrumbs ---------- */
.crumbs { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
color: var(--gray-400); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: var(--gray-600); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--gray-100); }
.page-hero .crumbs { color: rgba(255,255,255,0.5); }
.page-hero .crumbs a { color: rgba(255,255,255,0.7); }
.page-hero .crumbs a:hover { color: var(--accent-soft); }
.page-hero .crumbs .sep { color: rgba(255,255,255,0.25); }
/* ---------- Prose / article body ---------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose-wide { max-width: 820px; }
.prose p { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.72; color: var(--gray-800);
margin: 0 0 24px; text-wrap: pretty; }
.prose h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.6vw, 36px);
letter-spacing: -0.02em; color: var(--navy-deep); margin: 48px 0 18px; line-height: 1.08; }
.prose h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1.7vw, 24px);
color: var(--navy-deep); margin: 36px 0 12px; letter-spacing: -0.01em; }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 4px; list-style: none; }
.prose ul li, .prose ol li { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.62; color: var(--gray-800);
margin-bottom: 14px; display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.prose ul li::before { content: ""; width: 9px; height: 9px; margin-top: 9px; border-radius: 50%;
background: var(--accent); }
.prose ol { counter-reset: pl; }
.prose ol li { counter-increment: pl; }
.prose ol li::before { content: counter(pl); font-family: var(--font-display); font-weight: 900;
font-size: 14px; color: var(--accent); margin-top: 2px; }
.prose strong, .prose b { color: var(--navy-deep); font-weight: 700; }
.prose a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
text-decoration-color: rgba(74,142,194,0.4); }
.prose a:hover { color: var(--orange-hover); }
.prose .lede { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.55; color: var(--navy);
font-family: var(--font-serif); font-style: italic; margin-bottom: 32px; }
.prose blockquote { margin: 32px 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--accent);
font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.4;
color: var(--navy); }
.prose .callout { background: var(--orange-pale); border: 1px solid rgba(232,133,61,0.3);
border-radius: var(--r-xl); padding: 26px 30px; margin: 32px 0; }
.prose .callout p:last-child { margin-bottom: 0; }
.prose .callout .ctitle { font-family: var(--font-display); font-weight: 800; font-size: 14px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-hover); margin-bottom: 10px; }
.prose hr { border: none; border-top: 1px solid var(--gray-100); margin: 44px 0; }
/* article meta */
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
font-family: var(--font-display); font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 24px; }
.article-meta .tag { padding: 6px 13px; border-radius: var(--r-pill); background: rgba(232,133,61,0.16);
color: var(--accent-soft); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; }
/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-lg);
box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 24px 28px; display: flex;
align-items: center; justify-content: space-between; gap: 20px;
font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 1.5vw, 21px);
color: var(--navy-deep); letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
background: var(--orange-pale); color: var(--accent); display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 400; transition: transform var(--ease) .2s, background var(--ease) .2s; }
.faq-item[open] summary .ic { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-item .answer { padding: 0 28px 26px; }
.faq-item .answer p { font-size: 17px; line-height: 1.65; color: var(--gray-800); margin: 0 0 14px; }
.faq-item .answer p:last-child { margin-bottom: 0; }
.faq-item .answer a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Service / feature grid cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
padding: 34px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
transition: transform var(--ease) .2s, box-shadow var(--ease) .2s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc-card .ic { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--orange-pale);
color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.svc-card .ic svg { width: 28px; height: 28px; stroke-width: 2; }
.svc-card .move-no { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.svc-card h3 { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--navy-deep);
letter-spacing: -0.01em; margin: 0 0 12px; line-height: 1.1; }
.svc-card p { font-size: 16px; line-height: 1.55; color: var(--gray-600); margin: 0 0 20px; flex-grow: 1; }
.svc-card .more { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--accent);
display: inline-flex; align-items: center; gap: 8px; }
.svc-card .more .arr { transition: transform var(--ease) .2s; }
.svc-card:hover .more .arr { transform: translateX(4px); }
/* ---------- Post / resource cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-grid.two { grid-template-columns: repeat(2, 1fr); }
.post-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
transition: transform var(--ease) .2s, box-shadow var(--ease) .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card .ptop { height: 8px; background: var(--accent); }
.post-card .pbody { padding: 28px 28px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.post-card .pcat { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.post-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--navy-deep);
letter-spacing: -0.015em; line-height: 1.14; margin: 0 0 12px; }
.post-card p { font-size: 15.5px; line-height: 1.55; color: var(--gray-600); margin: 0 0 20px; flex-grow: 1; }
.post-card .pread { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent);
display: inline-flex; align-items: center; gap: 7px; }
.post-card .pmeta { font-size: 13px; color: var(--gray-400); font-weight: 600; font-family: var(--font-display);
margin-bottom: 14px; }
/* ---------- Contact / NAP ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.nap-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
padding: 34px 34px; box-shadow: var(--shadow-sm); }
.nap-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
padding: 18px 0; border-bottom: 1px solid var(--gray-100); }
.nap-row:last-child { border-bottom: none; }
.nap-row .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--orange-pale);
color: var(--accent); display: flex; align-items: center; justify-content: center; }
.nap-row .ic svg { width: 21px; height: 21px; stroke-width: 2; }
.nap-row .lbl { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--gray-400); margin-bottom: 4px; }
.nap-row .val { font-size: 18px; color: var(--navy-deep); font-weight: 600; line-height: 1.4; }
.nap-row .val a { color: var(--navy-deep); }
.nap-row .val a:hover { color: var(--accent); }
/* ---------- Forms ---------- */
.form-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
padding: 36px 36px 40px; box-shadow: var(--shadow-md); }
.field { margin-bottom: 20px; }
.field label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px;
color: var(--navy-deep); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: var(--r-md);
border: 1px solid var(--gray-100); background: var(--off-white); font-family: var(--font-sans); font-size: 16px;
color: var(--navy-deep); transition: border-color var(--ease) .15s, box-shadow var(--ease) .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(74,142,194,0.18); background: #fff; }
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: 13px; color: var(--gray-400); line-height: 1.5; margin-top: 14px; }
/* ---------- CTA strip (reusable) ---------- */
.cta-strip { background: var(--navy-deep); color: #fff; border-radius: var(--r-2xl); padding: clamp(40px,5vw,64px);
position: relative; overflow: hidden; text-align: center; }
.cta-strip h2 { color: #fff; font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 16px; }
.cta-strip p { color: rgba(255,255,255,0.78); font-size: clamp(17px,1.4vw,20px); max-width: 60ch;
margin: 0 auto 30px; line-height: 1.55; }
.cta-strip .btn { position: relative; }
/* ---------- Footer (rich) ---------- */
.footer-rich { background: var(--navy-deep); color: rgba(255,255,255,0.6); padding-block: 64px 40px;
border-top: 1px solid rgba(255,255,255,0.08); }
.footer-rich .fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-rich .flogo { height: 54px; width: auto; background: #fff; padding: 8px 14px; border-radius: var(--r-md); display: inline-block; }
.footer-rich .fblurb { margin-top: 18px; font-family: var(--font-serif); font-style: italic; font-size: 17px;
line-height: 1.45; color: var(--accent-soft); max-width: 34ch; }
.footer-rich .fcol h4,
.footer-rich .fcol .foot-h { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.12em;
text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 6px 0 16px; }
.footer-rich .fcol a { display: block; font-size: 15px; color: rgba(255,255,255,0.72); margin-bottom: 11px;
transition: color var(--ease) .15s; }
.footer-rich .fcol a:hover { color: var(--accent-soft); }
.footer-rich .fbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.08);
font-size: 13px; color: rgba(255,255,255,0.45); }
.footer-rich .disclaimer { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.4);
max-width: 980px; }
/* ---------- Index / generic two-col ---------- */
.lead-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px,5vw,72px); align-items: start; }
.tldr { background: var(--off-white); border: 1px solid var(--gray-100); border-radius: var(--r-xl);
padding: 28px 30px; }
.tldr h4 { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.tldr ul { list-style: none; margin: 0; padding: 0; }
.tldr li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; line-height: 1.5;
color: var(--navy-deep); margin-bottom: 14px; }
.tldr li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 960px) {
.svc-grid, .post-grid, .post-grid.two { grid-template-columns: 1fr; }
.contact-grid, .lead-split { grid-template-columns: 1fr; }
.footer-rich .fgrid { grid-template-columns: 1fr 1fr; gap: 32px; }
.field-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.footer-rich .fgrid { grid-template-columns: 1fr; }
}
/* ---------- Mobile responsiveness patches (added by import) ---------- */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }
@media (max-width: 640px) {
h1 { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; line-height: 1.15 !important; word-wrap: break-word; overflow-wrap: anywhere; }
h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; word-wrap: break-word; overflow-wrap: anywhere; }
h3 { word-wrap: break-word; overflow-wrap: anywhere; }
.btn, .button, a.btn, a.button, [class*="cta"] {
max-width: 100%;
white-space: normal;
word-wrap: break-word;
box-sizing: border-box;
}
table { display: block; overflow-x: auto; max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
}
@media (max-width: 560px) {
/* Hide phone numbers in cramped nav areas if present */
.nav-phone, .header-phone { display: none; }
}
/* ============================================================
MOTION & INTERACTION LAYER
Ported from the NJCIC design system (tokens + behaviors).
============================================================ */
:root {
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 460ms;
}
/* ---------- Scroll reveal (soft slide-up, one-shot, staggered) ---------- */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
body.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
/* ---------- Condensing sticky header ---------- */
@media (prefers-reduced-motion: no-preference) {
.nav {
transition: padding var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
background var(--dur-base) var(--ease-standard);
}
.nav .logo { transition: height var(--dur-base) var(--ease-standard); }
}
.nav.scrolled {
padding-top: 8px;
padding-bottom: 8px;
background: rgba(247,249,252,0.94);
box-shadow: var(--shadow-md);
}
.nav.scrolled .logo { height: 32px; }
.nav.on-navy.scrolled {
background: rgba(13,31,48,0.94);
box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
/* ---------- Smooth accordion (height-animated FAQ) ---------- */
@media (prefers-reduced-motion: no-preference) {
.faq-item .answer {
overflow: hidden;
transition: height var(--dur-slow) var(--ease-out);
}
}
/* ---------- Card micro-interactions ---------- */
@media (prefers-reduced-motion: no-preference) {
.stat-tile, .expert-card, .commit-card, .nap-card, .tldr, .form-card {
transition: transform var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.stat-tile:hover, .expert-card:hover, .commit-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.post-card .pread, .post-card .pread::after { transition: transform var(--dur-base) var(--ease-standard); }
.post-card:hover .pread { transform: translateX(4px); }
.btn:hover .arr { transform: translateX(4px); }
.proof-stats .ps { transition: background var(--dur-base) var(--ease-standard); }
.proof-stats .ps:hover { background: var(--orange-pale); }
}
/* ---------- Marquee strip (edge-masked, hover-pause) ---------- */
.mq {
overflow: hidden;
position: relative;
width: 100%;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq .mq-track {
display: flex;
flex-wrap: nowrap;
width: max-content;
align-items: center;
gap: 48px;
animation: mq-scroll 48s linear infinite;
}
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.mq { -webkit-mask-image: none; mask-image: none; }
.mq .mq-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
/* ============================================================
NJCIC-style site chrome — utility topbar, dropdown nav,
phone in header, hamburger mobile menu
============================================================ */
.topbar { background: var(--navy-deep); color: rgba(255,255,255,0.8); font-size: 13px; }
.topbar .tb-inner { max-width: none; padding: 8px var(--pad-x); display: flex;
align-items: center; justify-content: space-between; gap: 20px; }
.topbar a { color: rgba(255,255,255,0.85); text-decoration: none; }
.topbar a:hover { color: var(--orange-light); }
.topbar-left { display: flex; gap: 26px; align-items: center; min-width: 0; }
.topbar-right { display: flex; gap: 20px; align-items: center; white-space: nowrap; }
.topbar-right a:first-child { font-family: var(--font-display); font-weight: 700; color: #fff; }
.topbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; }
.nav { position: sticky; top: 0; z-index: 50; }
.nav .nav-links { gap: 4px; }
.nav-item { position: relative; }
.nav .nav-links a.nav-top { display: inline-flex; align-items: center; gap: 5px;
padding: 9px 12px; border-radius: var(--r-md);
transition: color var(--ease) .15s, background var(--ease) .15s; }
.nav .nav-links a.nav-top:hover { color: var(--navy-deep); background: var(--gray-50); }
.nav .nav-links a.nav-top.active { color: var(--accent); }
.nav-top .caret { font-size: 9px; opacity: .5; transition: transform var(--ease) .18s; }
.dropdown { position: absolute; top: 100%; left: 0; padding-top: 10px; min-width: 250px;
opacity: 0; visibility: hidden; transform: translateY(-6px); z-index: 60;
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; }
.dropdown-inner { background: var(--white); border: 1px solid var(--gray-100);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 8px;
display: flex; flex-direction: column; gap: 1px; }
.dropdown-inner a { font-family: var(--font-display); font-size: 14px; font-weight: 600;
padding: 9px 12px; border-radius: var(--r-md); color: var(--gray-800); }
.dropdown-inner a:hover { background: var(--off-white); color: var(--navy-deep); }
.dropdown-inner a.active { color: var(--accent); }
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item.has-dropdown:hover .nav-top .caret { transform: rotate(180deg); }
.nav .phone { font-family: var(--font-display); font-weight: 700; font-size: 14px;
color: var(--navy-deep); text-decoration: none; white-space: nowrap; }
.nav .phone:hover { color: var(--accent); }
.nav-toggle { display: none; background: var(--navy-deep); color: #fff; border: 0;
border-radius: var(--r-md); font-size: 18px; line-height: 1; padding: 10px 13px; cursor: pointer; }
.mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0;
background: var(--white); border-bottom: 1px solid var(--gray-100);
box-shadow: var(--shadow-lg); padding: 14px var(--pad-x) 20px;
max-height: calc(100vh - 100%); overflow-y: auto; z-index: 70; }
.mobile-menu.open { display: block; }
.mm-group { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.mm-top { font-family: var(--font-display); font-weight: 700; font-size: 16px;
color: var(--navy-deep); text-decoration: none; padding: 8px 0; }
.mm-kids { display: flex; flex-direction: column; padding-left: 12px; }
.mm-kids a { font-size: 14px; color: var(--gray-600); text-decoration: none; padding: 7px 0; }
.mm-kids a:hover { color: var(--accent); }
.nav.on-navy .nav-links a.nav-top:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav.on-navy .phone { color: rgba(255,255,255,0.9); }
@media (max-width: 1080px) { .u-hide-md { display: none !important; } }
@media (max-width: 860px) {
.nav .nav-links { display: none; }
.nav-toggle { display: inline-flex; }
.nav-cta-wrap { gap: 12px; }
}
@media (max-width: 720px) {
.u-hide-sm { display: none !important; }
.topbar { font-size: 12px; }
.nav .btn { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 460px) { .nav .btn { padding: 9px 12px; font-size: 12px; } .nav .logo { height: 34px; } }
/* ---------- Mobile tap targets (44px minimum for primary controls) ---------- */
@media (max-width: 768px) {
.topbar a,
.footer-rich a,
.mobile-menu a,
.breadcrumbs a,
.crumbs a,
.nav .brand {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.topbar .tb-inner { padding-top: 0; padding-bottom: 0; }
.nav .btn,
.nav-toggle,
.nav .phone {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ---------- Font metric fallbacks (prevents web-font swap layout shift) ---------- */
@font-face {
font-family: 'Montserrat Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 118%;
ascent-override: 96.8%;
descent-override: 25.1%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Lora Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 112%;
ascent-override: 100.6%;
descent-override: 27.4%;
line-gap-override: 0%;
}
:root {
--font-display: 'Montserrat', 'Montserrat Fallback', 'Helvetica Neue', Arial, sans-serif;
--font-serif: 'Lora', 'Lora Fallback', Georgia, serif;
}
/* ---------- Uniform CTA color: one brand orange ---------- */
.btn-primary,
.nav .btn-primary,
.mobile-menu .btn-primary { background: var(--orange) !important; color: #fff !important; }
.btn-primary:hover,
.nav .btn-primary:hover,
.mobile-menu .btn-primary:hover { background: var(--orange-hover) !important; transform: none !important; }
.btn-primary:active,
.nav .btn-primary:active { transform: none !important; }
/* text/arrow CTAs match the brand orange */
.post-card .pread,
.svc-card .more,
.prose a,
a.text-cta,
.cta-link { color: var(--orange); }
.prose a:hover,
.post-card:hover .pread,
.cta-link:hover { color: var(--orange-hover); }
/* ---------- Proof Sheet collage ---------- */
.proof-collage {
margin: 0 0 30px;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(11,26,47,.10);
box-shadow: 0 18px 44px rgba(11,26,47,.16);
}
.proof-collage img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 640px) { .proof-collage { border-radius: 12px; margin-bottom: 22px; } }
/* cropped banner variant (hero band) */
.proof-collage--band {
margin: 0 0 18px;
border-color: rgba(255,255,255,.14);
box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
.proof-collage--band img {
height: 260px;
object-fit: cover;
object-position: center 72%;
}
@media (max-width: 900px) { .proof-collage--band img { height: 200px; object-position: center 70%; } }
@media (max-width: 640px) { .proof-collage--band img { height: 150px; object-position: center 68%; } }