/* ═══════════════════════════════════════════════
MOORE CAPITAL GROUP — style.css
Editorial system ported from the finance-vision microsite.
Palette: #07111A navy / #0B1924 panel / #C39A5E gold /
#E2C79A gold-soft / #EEF2F2 ink / #8DA1A8 muted
Type: Fraunces (display) + Inter (body/UI)
Note: legacy token names (--caramel, --cta, --linen, --white,
--warmgrey, --deep...) are kept as aliases mapped onto the new
palette so existing inline styles restyle automatically.
═══════════════════════════════════════════════ */
/* Fonts are loaded via + Google Fonts in each
page (non-render-blocking). No @import here. */
/* ── Design Tokens ─────────────────────────────── */
:root {
/* Editorial palette (source: vision microsite) */
--bg: #07111A;
--bg2: #0B1924;
--ink: #EEF2F2;
--mut: #8DA1A8;
--body: #C9D3D9; /* reading text: 12:1 on --bg */
--gold: #C39A5E;
--gold-soft: #E2C79A;
--green: #46B17B;
--red: #E0564B;
--teal: #5FA9B8;
--line: rgba(195,154,94,0.22);
/* ── Legacy aliases → remapped onto the new palette ── */
--deep: #07111A;
--slate: #122636;
--warmgrey: #8DA1A8; /* → muted */
--linen: #D8DFDE; /* soft light text */
--caramel: #C39A5E; /* → gold */
--cta: #46B17B; /* → green (DATA / status / checks only) */
--cta-dark: #3a9a6b;
--black: #040A10; /* footer base, darker than --bg */
--white: #EEF2F2; /* → ink */
/* Semantic roles */
--color-bg: var(--bg);
--color-surface: var(--bg2);
--color-surface-2: var(--slate);
--color-border: var(--line);
--color-text: var(--ink);
--color-text-muted: var(--linen);
--color-text-faint: var(--mut);
--color-accent: var(--gold);
--color-cta: var(--gold); /* primary action = gold */
/* Fonts */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Type scale */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.4rem);
--text-3xl: clamp(2.6rem, 1rem + 6vw, 5rem);
/* Spacing */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
--space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
/* Layout */
--content-narrow: 720px;
--content-default: 1080px;
--content-wide: 1220px;
/* Radius */
--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
/* Transitions */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--transition: 220ms var(--ease);
}
/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
background: var(--bg);
scroll-behavior: smooth;
scroll-padding-top: 88px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
min-height: 100dvh;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 400;
color: var(--color-text);
background: transparent;
line-height: 1.6;
overflow-x: hidden;
}
/* Numeric polish: keep financial values aligned */
.hero__trust-num,
.metric-card__value,
.metric-card__delta,
.cashflow-bar__label,
.step__num,
.service-card__num,
.contact-detail__value,
.sprint-flow__step span,
[data-countup],
[class*="stat__num"],
[class*="__value"] {
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
}
img, picture, video, svg, canvas { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
line-height: 1.08;
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.02em;
}
p, li { text-wrap: pretty; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
/* Accessible focus states */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--gold-soft);
outline-offset: 3px;
border-radius: 4px;
}
/* ── Layout Helpers ────────────────────────────── */
.container {
width: 100%;
max-width: var(--content-default);
margin-inline: auto;
padding-inline: clamp(var(--space-5), 5vw, var(--space-16));
}
.container--wide { max-width: var(--content-wide); }
.container--narrow { max-width: var(--content-narrow); }
section {
padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}
/* ── Typography helpers ────────────────────────── */
.serif { font-family: var(--font-display); }
/* Refined ampersand: the Fraunces & reads ornate in headings, so set it in an italic serif */
.amp { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; }
.display {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.02em;
}
.section-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink);
}
/* Eyebrow / kicker */
.section-label,
.kick {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: center;
gap: var(--space-3);
}
.section-label::before {
content: '';
display: inline-block;
width: 26px;
height: 1px;
background: linear-gradient(90deg, var(--gold), transparent);
}
.lead {
font-size: var(--text-lg);
color: var(--body);
font-weight: 400;
line-height: 1.65;
}
.body-muted { color: var(--color-text-muted); }
.body-faint { color: var(--mut); }
/* ── Buttons ───────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.85em 1.75em;
border-radius: 999px;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.02em;
transition: all var(--transition);
white-space: nowrap;
border: 1px solid transparent;
}
/* Primary action = gold (gold is the primary accent) */
.btn-cta {
background: var(--gold);
color: #1a1206;
border-color: var(--gold);
}
.btn-cta:hover {
background: var(--gold-soft);
border-color: var(--gold-soft);
transform: translateY(-1px);
box-shadow: 0 14px 40px -14px rgba(195,154,94,0.65);
}
.btn-outline {
background: transparent;
color: var(--ink);
border-color: var(--line);
}
.btn-outline:hover {
border-color: var(--gold);
color: var(--gold-soft);
background: rgba(195,154,94,0.05);
}
.btn-lg {
font-size: var(--text-base);
padding: 1em 2.25em;
}
/* ── Divider ───────────────────────────────────── */
.divider {
width: 52px;
height: 1px;
background: linear-gradient(90deg, var(--gold), transparent);
margin-block: var(--space-6);
}
/* ── NAV ───────────────────────────────────────── */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: 76px;
display: flex;
align-items: center;
background: rgba(7,17,26,0.72);
backdrop-filter: blur(18px) saturate(1.1);
-webkit-backdrop-filter: blur(18px) saturate(1.1);
border-bottom: 1px solid transparent;
transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.nav--scrolled {
background: rgba(7,17,26,0.92);
border-bottom-color: var(--line);
box-shadow: 0 10px 40px -20px rgba(0,0,0,0.8);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
width: 100%;
max-width: none;
margin-inline: auto;
padding-inline: clamp(var(--space-5), 2.5vw, var(--space-8));
}
.nav__logo {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 0 0 auto;
min-width: 0;
}
.nav__logo svg { width: 38px; height: 38px; flex: 0 0 38px; }
.nav__logo-text {
font-family: var(--font-display);
font-size: clamp(1rem, 1.1vw, 1.14rem);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--gold);
display: flex;
flex-direction: column;
line-height: 1.15;
white-space: nowrap;
}
.nav__logo-tag {
font-family: var(--font-body);
font-size: 0.56rem;
font-weight: 500;
color: var(--mut);
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
}
.nav__links {
display: flex;
align-items: center;
gap: clamp(var(--space-3), 1.35vw, var(--space-5));
list-style: none;
flex: 0 0 auto;
justify-content: center;
min-width: 0;
}
.nav__links a {
font-size: var(--text-sm);
font-weight: 500;
color: var(--mut);
transition: color var(--transition);
letter-spacing: 0.01em;
white-space: nowrap;
position: relative;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.active { color: var(--gold-soft); }
.nav__links a.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.nav__cta {
margin-left: 0;
padding: 0.7em clamp(var(--space-4), 1.6vw, var(--space-6));
flex: 0 0 auto;
}
/* Client Login button in nav */
.nav__client-login {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 500;
color: var(--mut);
border: 1px solid var(--line);
border-radius: 999px;
padding: var(--space-2) var(--space-3);
transition: color var(--transition), border-color var(--transition), background var(--transition);
letter-spacing: 0.01em;
white-space: nowrap;
flex: 0 0 auto;
}
.nav__client-login:hover {
color: var(--gold-soft);
border-color: rgba(195,154,94,0.5);
background: rgba(195,154,94,0.06);
}
.nav__mobile-client-login {
display: block;
padding: var(--space-3) var(--space-6);
color: var(--gold);
font-size: var(--text-sm);
font-weight: 500;
border-top: 1px solid var(--line);
margin-top: var(--space-2);
text-align: center;
}
/* Mobile nav */
.nav__hamburger {
display: none;
flex-direction: column;
gap: 5px;
width: 44px;
height: 44px;
padding: var(--space-2);
align-items: center;
justify-content: center;
}
.nav__hamburger span {
width: 22px; height: 2px;
background: var(--gold-soft);
border-radius: 2px;
transition: all var(--transition);
}
.nav__mobile {
display: none;
position: fixed;
top: 76px; left: 0; right: 0;
background: rgba(7,17,26,0.98);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--line);
padding: var(--space-6);
flex-direction: column;
gap: var(--space-5);
z-index: 99;
}
.nav__mobile a {
font-size: var(--text-base);
font-weight: 500;
color: var(--mut);
padding-block: var(--space-2);
border-bottom: 1px solid var(--line);
transition: color var(--transition);
white-space: nowrap;
}
.nav__mobile a:last-child { border-bottom: none; }
.nav__mobile a:hover { color: var(--ink); }
.nav__mobile--open { display: flex; }
@media (max-width: 768px) {
.nav__links, .nav__cta, .nav__client-login { display: none; }
.nav__hamburger { display: flex; }
.nav__inner { padding-inline: var(--space-5); }
.nav__logo-text { font-size: 1.1rem; }
.nav__logo-tag { font-size: 0.6rem; white-space: normal; max-width: 230px; }
}
@media (min-width: 769px) and (max-width: 1399px) {
.nav__logo-tag { display: none; }
.nav__links { gap: var(--space-3); }
.nav__cta { padding-inline: var(--space-4); }
}
/* ── HERO ──────────────────────────────────────── */
.hero {
min-height: 100dvh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: radial-gradient(125% 80% at 50% -5%, rgba(14,34,52,0.5) 0%, transparent 55%);
padding-top: 76px;
/* .hero is a , so it was picking up the generic 96px
padding-block and only overriding the top half. That stacked
under the trust row and read as dead space. */
padding-bottom: var(--space-6);
}
.hero__bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 62% 38%, rgba(70,120,170,0.08) 0%, transparent 70%),
radial-gradient(ellipse 40% 50% at 80% 72%, rgba(195,154,94,0.08) 0%, transparent 60%);
pointer-events: none;
z-index: 1;
}
.hero__grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(195,154,94,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(195,154,94,0.035) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 80%);
pointer-events: none;
z-index: 2;
}
/* Particle constellation canvas (above video, below content) */
/* one fixed starfield behind the whole page (extends the constellation down past the hero) */
.hero__particles {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.72;
pointer-events: none;
}
.hero__inner {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--space-16);
align-items: center;
padding-block: var(--space-12);
position: relative;
z-index: 4;
}
.hero__label { margin-bottom: var(--space-5); }
.hero__headline {
font-family: var(--font-display);
font-size: clamp(2.8rem, 2rem + 3.6vw, 5.2rem);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.025em;
margin-bottom: var(--space-6);
color: var(--ink);
}
.hero__headline em {
font-style: italic;
color: var(--gold-soft);
}
.hero__sub {
font-size: var(--text-lg);
color: var(--body);
font-weight: 400;
line-height: 1.6;
max-width: 52ch;
margin-bottom: var(--space-10);
}
.hero__actions {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.hero__trust {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-10);
padding-top: var(--space-8);
border-top: 1px solid var(--line);
}
.hero__trust-item {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-right: var(--space-8);
border-right: 1px solid var(--line);
}
.hero__trust-item:last-child { border-right: none; padding-right: 0; }
.hero__trust-num {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.5vw + 0.4rem, 1.5rem);
font-weight: 600;
color: var(--gold-soft);
line-height: 1;
letter-spacing: -0.01em;
}
.hero__trust-label {
font-size: var(--text-xs);
color: var(--mut);
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* Hero card panel */
.hero__panel {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-8);
position: relative;
box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(195,154,94,0.06);
}
.hero__panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--line);
}
.hero__panel-title {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mut);
}
.hero__panel-badge {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
color: var(--green);
font-weight: 600;
}
.hero__panel-badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(70,177,123,0.5);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(70,177,123,0.4); }
50% { opacity: 0.5; box-shadow: 0 0 0 5px rgba(70,177,123,0); }
}
.metric-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.metric-card {
background: rgba(7,17,26,0.6);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
min-height: 122px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.metric-card__label {
font-size: var(--text-xs);
color: var(--mut);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-2);
}
.metric-card__value {
font-family: var(--font-display);
font-size: clamp(1.3rem, 1vw + 0.8rem, 1.7rem);
font-weight: 600;
color: var(--ink);
line-height: 1.05;
letter-spacing: -0.02em;
white-space: nowrap;
}
.metric-card__value.green { color: var(--green); }
.metric-card__value.caramel { color: var(--gold-soft); }
.metric-card__value.red { color: var(--red); }
.metric-card__delta {
font-size: var(--text-xs);
color: var(--green);
margin-top: auto;
padding-top: var(--space-2);
font-weight: 500;
line-height: 1.25;
}
.metric-card__delta.muted { color: var(--mut); }
.cashflow-bar { margin-top: var(--space-4); }
.cashflow-bar__label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--mut);
margin-bottom: var(--space-2);
}
.cashflow-bar__track {
height: 8px;
background: rgba(195,154,94,0.12);
border: 1px solid var(--line);
border-radius: 99px;
overflow: hidden;
}
.cashflow-bar__fill {
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--gold), var(--green));
transition: width 1.6s var(--ease);
}
@media (max-width: 900px) {
.hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
.hero__panel { display: none; }
}
/* ── PROBLEM SECTION ───────────────────────────── */
.problem {
background: transparent;
position: relative;
}
.problem__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-12);
}
.pain-card {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-8);
position: relative;
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pain-card:hover {
border-color: rgba(195,154,94,0.45);
transform: translateY(-4px);
box-shadow: 0 24px 60px -34px rgba(0,0,0,0.9);
}
.pain-card__icon {
width: 46px; height: 46px;
border-radius: var(--radius-md);
background: rgba(195,154,94,0.1);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-5);
color: var(--gold);
}
.pain-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: var(--space-3);
color: var(--ink);
}
.pain-card__body {
font-size: var(--text-base);
color: var(--body);
line-height: 1.65;
font-weight: 400;
}
@media (max-width: 768px) { .problem__grid { grid-template-columns: 1fr; } }
@media (min-width: 769px) and (max-width: 1024px) { .problem__grid { grid-template-columns: 1fr 1fr; } }
/* ── SOLUTION SECTION ──────────────────────────── */
.solution {
background: rgba(11,25,36,0.42);
position: relative;
overflow: hidden;
}
.solution::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(195,154,94,0.08) 0%, transparent 70%);
pointer-events: none;
animation: mcgDrift 30s ease-in-out infinite;
}
.solution__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-12), 6vw, var(--space-20));
align-items: start;
position: relative;
}
.solution__left { position: sticky; top: 110px; }
.solution__headline {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: var(--space-6);
color: var(--ink);
}
.solution__headline em { font-style: italic; color: var(--gold-soft); }
.solution__body {
font-size: var(--text-base);
color: var(--body);
font-weight: 400;
line-height: 1.7;
margin-bottom: var(--space-8);
}
.service-list { display: flex; flex-direction: column; gap: var(--space-4); }
.service-item {
display: flex;
gap: var(--space-5);
padding: var(--space-6);
background: rgba(7,17,26,0.5);
border: 1px solid var(--line);
border-radius: var(--radius-md);
transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.service-item:hover {
border-color: rgba(195,154,94,0.4);
background: rgba(7,17,26,0.8);
transform: translateY(-2px);
}
.service-item__icon {
flex-shrink: 0;
width: 42px; height: 42px;
border-radius: var(--radius-sm);
background: rgba(195,154,94,0.1);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
margin-top: 2px;
}
.service-item__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: var(--space-2);
color: var(--ink);
}
.service-item__body {
font-size: var(--text-base);
color: var(--body);
font-weight: 400;
line-height: 1.65;
}
@media (max-width: 900px) {
.solution__inner { grid-template-columns: 1fr; }
.solution__left { position: static; }
}
/* ── HOW IT WORKS ──────────────────────────────── */
.how { background: transparent; }
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
margin-top: var(--space-12);
position: relative;
}
.steps::before {
content: '';
position: absolute;
top: 30px;
left: calc(16.6% + var(--space-8));
right: calc(16.6% + var(--space-8));
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.4;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-8) var(--space-6);
}
.step__num {
width: 60px; height: 60px;
border-radius: 50%;
background: var(--bg2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--gold-soft);
line-height: 1;
margin-bottom: var(--space-6);
position: relative;
z-index: 1;
}
/* text-label variant: auto-width pill instead of a number circle */
.step__num--tag {
width: auto;
height: auto;
border-radius: 999px;
padding: 0.45em 1.1em;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.step__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: var(--space-3);
color: var(--ink);
}
.step__body {
font-size: var(--text-base);
color: var(--linen);
font-weight: 400;
line-height: 1.7;
max-width: 34ch;
margin-inline: auto;
}
@media (max-width: 768px) {
.steps { grid-template-columns: 1fr; }
.steps::before { display: none; }
}
/* ── PROOF / TESTIMONIALS ──────────────────────── */
.proof { background: rgba(11,25,36,0.42); }
.proof__intro {
text-align: center;
max-width: var(--content-narrow);
margin-inline: auto;
margin-bottom: var(--space-12);
}
.testimonials {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.testimonial {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-5);
transition: border-color var(--transition), transform var(--transition);
}
.testimonial:hover {
border-color: rgba(195,154,94,0.4);
transform: translateY(-2px);
}
.testimonial__stars {
display: flex;
gap: 3px;
color: var(--gold);
letter-spacing: 0.1em;
}
.testimonial__quote {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 400;
font-style: italic;
color: var(--ink);
line-height: 1.45;
letter-spacing: -0.01em;
flex: 1;
}
.testimonial__author {
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
.testimonial__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bg2);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 600;
color: var(--gold-soft);
border: 1px solid var(--line);
flex-shrink: 0;
}
.testimonial__name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink);
}
.testimonial__role {
font-size: var(--text-xs);
color: var(--mut);
}
.testimonial--placeholder { border-style: dashed; }
.testimonial--placeholder .testimonial__quote { opacity: 0.5; }
.placeholder-label {
font-size: var(--text-xs);
color: var(--gold);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media (max-width: 900px) { .testimonials { grid-template-columns: 1fr; } }
@media (min-width: 769px) and (max-width: 1024px) { .testimonials { grid-template-columns: 1fr 1fr; } }
/* ── FOUNDER (home) ─────────────────────────────── */
.founder { background: rgba(11,25,36,0.42); }
.founder__inner {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: clamp(var(--space-10), 6vw, var(--space-20));
align-items: center;
}
.founder__photo {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/5;
width: 100%;
max-width: 420px;
background: var(--bg2);
border: 1px solid var(--gold);
box-shadow: 0 0 0 6px rgba(195,154,94,0.07), 0 40px 90px -50px rgba(0,0,0,0.95);
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.founder__text {
font-size: var(--text-base);
color: var(--body);
font-weight: 400;
line-height: 1.7;
max-width: 58ch;
margin-top: var(--space-5);
}
.founder__actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-8); }
.founder__link { color: var(--gold); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 900px) {
.founder__inner { grid-template-columns: 1fr; }
.founder__photo { max-width: 320px; }
}
/* ── 1-2-3 MOTIF: what happened / why / what next ── */
.trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.trio__item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-6); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.trio__num {
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--line); background: var(--bg);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--gold-soft); line-height: 1;
}
.trio__label { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.trio__text { font-size: var(--text-base); color: var(--body); font-weight: 400; line-height: 1.6; margin: 0; }
.trio--band { margin-top: var(--space-8); }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }
/* ── FINAL CTA BAND ────────────────────────────── */
.cta-band {
background: radial-gradient(120% 100% at 50% 110%, rgba(14,34,52,0.45) 0%, transparent 60%);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
text-align: center;
padding-block: clamp(var(--space-20), 10vw, var(--space-24));
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
inset: -10%;
background: radial-gradient(ellipse 45% 60% at 50% 50%, rgba(195,154,94,0.028), transparent 70%);
pointer-events: none;
animation: mcgDrift2 38s ease-in-out infinite;
}
.cta-band__eyebrow {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--space-4);
}
.cta-band__headline {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
max-width: 24ch;
margin-inline: auto;
margin-bottom: var(--space-5);
color: var(--ink);
}
.cta-band__sub {
font-size: var(--text-base);
color: var(--body);
font-weight: 400;
max-width: 52ch;
margin-inline: auto;
margin-bottom: var(--space-10);
line-height: 1.65;
}
.cta-band__actions {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.cta-band__note {
margin-top: var(--space-5);
font-size: var(--text-xs);
color: var(--mut);
letter-spacing: 0.04em;
}
/* ── FOOTER ────────────────────────────────────── */
.footer {
background: var(--black);
padding-block: var(--space-12) var(--space-8);
border-top: 1px solid var(--line);
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-10);
margin-bottom: var(--space-10);
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--line);
}
.footer__brand-name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--gold);
margin-bottom: var(--space-4);
}
.footer__brand-tagline {
font-size: var(--text-sm);
color: var(--mut);
line-height: 1.6;
max-width: 30ch;
margin-bottom: var(--space-5);
}
.footer__col-title {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: var(--space-4);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; }
.footer__links a {
font-size: var(--text-sm);
color: var(--mut);
transition: color var(--transition);
}
.footer__links a:hover { color: var(--gold-soft); }
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
}
.footer__copyright { font-size: var(--text-xs); color: var(--mut); }
.footer__legal { display: flex; gap: var(--space-6); }
.footer__legal a {
font-size: var(--text-xs);
color: var(--mut);
transition: color var(--transition);
}
.footer__legal a:hover { color: var(--gold-soft); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
.footer__grid { grid-template-columns: 1fr; }
.footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* ── Inner-page hero ───────────────────────────── */
.page-hero {
padding-top: calc(76px + clamp(var(--space-12), 6vw, var(--space-20)));
padding-bottom: clamp(var(--space-8), 3.5vw, var(--space-12));
background: radial-gradient(125% 80% at 50% -5%, rgba(14,34,52,0.5) 0%, transparent 55%);
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(195,154,94,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(195,154,94,0.035) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
pointer-events: none;
}
.page-hero__label { justify-content: center; margin-bottom: var(--space-5); }
.page-hero__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
margin-bottom: var(--space-5);
position: relative;
color: var(--ink);
}
.page-hero__sub {
font-size: var(--text-lg);
color: var(--body);
font-weight: 400;
max-width: 58ch;
margin-inline: auto;
line-height: 1.6;
position: relative;
}
/* ── Services page ─────────────────────────────── */
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin-top: var(--space-12);
}
.service-card {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-8) var(--space-10);
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
scroll-margin-top: 96px;
}
.service-card:hover {
border-color: rgba(195,154,94,0.45);
transform: translateY(-4px);
box-shadow: 0 28px 70px -40px rgba(0,0,0,0.9);
}
.service-card__num {
font-family: var(--font-display);
font-size: clamp(3rem, 4vw, 5rem);
font-weight: 600;
color: rgba(195,154,94,0.22);
line-height: 1;
margin-bottom: var(--space-4);
letter-spacing: -0.04em;
}
.service-card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: var(--space-4);
color: var(--ink);
}
.service-card__body {
font-size: var(--text-base);
color: var(--mut);
font-weight: 300;
line-height: 1.7;
margin-bottom: var(--space-6);
}
.service-card__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.service-card__list li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--linen);
}
.service-card__list li::before {
content: '';
display: block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
margin-top: 0.5em;
}
@media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } }
.who-we-serve-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 768px) { .who-we-serve-grid { grid-template-columns: 1fr; } }
@media (min-width: 769px) and (max-width: 1024px) { .who-we-serve-grid { grid-template-columns: repeat(2, 1fr); } }
/* ── About page ────────────────────────────────── */
.about-split {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(var(--space-12), 6vw, var(--space-20));
align-items: center;
}
.about-img {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/5;
background: var(--bg2);
position: relative;
border: 1px solid var(--gold);
box-shadow: 0 0 0 6px rgba(195,154,94,0.07), 0 40px 90px -50px rgba(0,0,0,0.95);
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-img__placeholder {
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--bg2) 0%, #122636 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: var(--text-xl);
color: rgba(195,154,94,0.4);
}
.values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
margin-top: var(--space-16);
}
.value-card {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: border-color var(--transition), transform var(--transition);
}
.value-card:hover { border-color: rgba(195,154,94,0.4); transform: translateY(-3px); }
.value-card__icon { color: var(--gold); margin-bottom: var(--space-4); }
.value-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: var(--space-2);
color: var(--ink);
}
.value-card__body { font-size: var(--text-sm); color: var(--mut); font-weight: 300; line-height: 1.6; }
@media (max-width: 900px) {
.about-split { grid-template-columns: 1fr; }
.about-img { aspect-ratio: 4/5; max-height: 560px; }
.values-grid { grid-template-columns: 1fr; }
}
/* ── Contact page ──────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(var(--space-12), 6vw, var(--space-20));
align-items: start;
}
.contact-info { padding-top: var(--space-4); }
.contact-info__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: var(--space-4);
color: var(--ink);
}
.contact-info__body { color: var(--mut); font-weight: 300; line-height: 1.7; margin-bottom: var(--space-8); }
.contact-detail {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding-block: var(--space-4);
border-bottom: 1px solid var(--line);
}
.contact-detail:first-of-type { border-top: 1px solid var(--line); }
.contact-detail__icon { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.contact-detail__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--mut);
margin-bottom: var(--space-1);
}
.contact-detail__value { font-size: var(--text-sm); color: var(--linen); letter-spacing: -0.01em; }
.booking-panel {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: 0 30px 80px -50px rgba(0,0,0,0.9);
}
.booking-panel__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: var(--space-2);
color: var(--ink);
}
.booking-panel__sub { font-size: var(--text-sm); color: var(--mut); margin-bottom: var(--space-6); }
.calendly-embed { border-radius: var(--radius-md); overflow: hidden; min-height: 600px; }
/* Form styles */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mut);
}
.form-input, .form-select, .form-textarea {
background: rgba(7,17,26,0.8);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.75em 1em;
font-size: var(--text-sm);
color: var(--ink);
width: 100%;
transition: border-color var(--transition);
outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--mut); opacity: 0.6; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-select { appearance: none; cursor: pointer; }
.form-submit { margin-top: var(--space-2); }
.form-note { font-size: var(--text-xs); color: var(--mut); text-align: center; margin-top: var(--space-2); }
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
}
/* ── Section background helpers ────────────────── */
.bg-deep { background: transparent; }
.bg-slate { background: rgba(11,25,36,0.42); }
.bg-darker { background: rgba(11,25,36,0.42); }
.bg-black { background: var(--black); }
/* ── Scroll reveal ─────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.28s; }
.reveal-delay-4 { transition-delay: 0.38s; }
.reveal-delay-5 { transition-delay: 0.48s; }
.reveal-delay-6 { transition-delay: 0.58s; }
/* ── Utilities ─────────────────────────────────── */
.text-center { text-align: center; }
.text-caramel { color: var(--gold); }
.text-gold { color: var(--gold); }
.text-muted { color: var(--mut); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
/* Keep nav labels from wrapping */
.nav__links a { white-space: nowrap; }
@media (max-width: 768px) { .nav__mobile a { white-space: nowrap; } }
/* About photo — full face visibility on mobile */
@media (max-width: 900px) {
.about-img img { object-position: center 18%; min-height: 360px; }
.about-img { max-height: 560px; }
}
/* Metric card padding on small screens */
@media (max-width: 480px) {
.metric-card { padding: var(--space-3) var(--space-4); }
.metric-card__value { font-size: 1.25rem; }
}
/* ── Hero video background ─────────────────────── */
.hero__video-bg { display: none; }
.hero__video-bg::after {
/* navy overlay to keep text legible over the video */
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(7,17,26,0.74) 0%, rgba(7,17,26,0.93) 100%),
radial-gradient(120% 90% at 50% 0%, rgba(14,34,52,0.28) 0%, rgba(7,17,26,0.96) 60%);
}
.hero__video-bg video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: blur(5px) brightness(0.18) saturate(0.65);
transform: scale(1.06);
display: block;
}
@media (max-width: 768px) {
/* Drop the heavy hero video on mobile; the gradient + particle field carry the look */
.hero__video-bg { display: none; }
}
/* ── AEO / sprint / faq components ─────────────── */
.hero__content--single { max-width: 850px; }
.section-center { text-align: center; max-width: 840px; margin-inline: auto; }
.section-center .section-label { justify-content: center; }
.faq-section { padding: clamp(64px, 10vw, 120px) 0; }
.faq-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
margin-top: var(--space-8);
}
.faq-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-card {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-6);
background: var(--bg2);
transition: border-color var(--transition), transform var(--transition);
}
.faq-card:hover { border-color: rgba(195,154,94,0.4); transform: translateY(-3px); }
.faq-card h3 {
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.8vw, 1.28rem);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 var(--space-3);
}
.faq-card p { color: var(--body); font-size: var(--text-base); font-weight: 400; line-height: 1.65; margin: 0; }
.deliverable-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.deliverable-list span {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 0.85rem 1rem;
color: var(--ink);
background: rgba(195,154,94,0.04);
}
.deliverable-list span::after { content: "\2713"; color: var(--gold); font-weight: 700; }
.sprint-visual { box-shadow: 0 30px 90px -50px rgba(0,0,0,0.95); }
.sprint-image {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: rgba(6,16,21,0.4);
box-shadow: 0 24px 64px -40px rgba(0,0,0,0.9);
}
.sprint-image img { display: block; width: 100%; height: auto; }
.sprint-image--tracker { margin-top: var(--space-5); }
.sprint-image--flow { margin-top: var(--space-10); }
.sprint-visual__note {
margin-top: var(--space-5);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-4);
background: rgba(6,16,21,0.4);
}
.sprint-visual__note span {
display: block;
color: var(--gold);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
margin-bottom: var(--space-2);
text-transform: uppercase;
}
.sprint-visual__note strong {
color: var(--ink);
display: block;
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.55;
}
.sprint-flow { position: relative; }
.sprint-flow__visual {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: var(--space-5);
align-items: stretch;
margin-top: var(--space-12);
}
.sprint-flow__step {
min-height: 190px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-6);
background:
linear-gradient(145deg, var(--bg2), rgba(6,16,21,0.4)),
repeating-linear-gradient(0deg, rgba(195,154,94,0.04) 0 1px, transparent 1px 22px);
}
.sprint-flow__step span {
color: var(--gold-soft);
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
line-height: 1;
}
.sprint-flow__step strong {
display: block;
color: var(--ink);
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
margin-top: var(--space-4);
}
.sprint-flow__step p { color: var(--linen); font-weight: 300; font-size: var(--text-base); line-height: 1.7; margin-top: var(--space-3); }
.sprint-flow__arrow { align-self: center; color: var(--gold); font-size: var(--text-xl); opacity: 0.8; }
@media (max-width: 900px) {
.faq-grid, .faq-grid--wide { grid-template-columns: 1fr; }
.hero__panel.sprint-visual { display: block; }
.sprint-image--tracker { margin-top: var(--space-4); }
.sprint-flow__visual { grid-template-columns: 1fr; }
.sprint-flow__arrow { justify-self: center; transform: rotate(90deg); }
.page-hero { padding-top: 7rem; }
}
/* ── Ambient floating motion (decorative glows) ── */
@keyframes mcgDrift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(12px, -16px); }
}
@keyframes mcgDrift2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-14px, 12px) scale(1.05); }
}
/* ── Reduced motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.hero__particles { display: none; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ============ Legal pages (Privacy, Terms) ============ */
.legal { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); position: relative; z-index: 1; }
.legal__wrap { max-width: 760px; margin: 0 auto; }
.legal__updated {
color: var(--mut);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-10);
}
.legal__intro { color: var(--ink); font-size: 1.06rem; line-height: 1.7; margin-bottom: var(--space-10); }
.legal h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.2rem, 2.4vw, 1.55rem);
color: var(--ink);
margin: var(--space-12) 0 var(--space-4);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
font-family: var(--font-body);
font-weight: 600;
font-size: 1.02rem;
color: var(--gold-soft);
margin: var(--space-8) 0 var(--space-3);
}
.legal p, .legal li { color: var(--mut); line-height: 1.75; font-size: 0.97rem; }
.legal p { margin: 0 0 var(--space-4); }
.legal ul { margin: 0 0 var(--space-6); padding-left: 1.25em; }
.legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal__note {
margin-top: var(--space-12);
padding: var(--space-6);
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(14, 32, 41, 0.42);
}
.legal__note p { font-size: 0.9rem; }
.legal__note p:last-child { margin-bottom: 0; }
/* ── Hero-to-content seam ──────────────────────────
The first section after a hero was inheriting a full
section pad on top of the hero's own bottom pad, which
stacked into a dead band roughly 190px tall on iPad.
Halve the top pad so the intro and the content it
introduces read as one block.
─────────────────────────────────────────────────── */
.page-hero + section,
.hero + section {
padding-top: clamp(var(--space-8), 3.5vw, var(--space-12));
}
/* ── Sprint process row ────────────────────────────
Five steps in an auto-fit grid broke 4-up and left
"05 Action plan" orphaned on its own row. Pin the
column count per breakpoint so the row always ends even.
─────────────────────────────────────────────────── */
.sprint-flow__steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-4);
margin-top: var(--space-10);
}
@media (max-width: 1100px) {
.sprint-flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 3 + 2: the short row centres itself rather than hanging left */
.sprint-flow__steps > :nth-child(4),
.sprint-flow__steps > :nth-child(5) { transform: translateX(calc(50% + var(--space-4) / 2)); }
}
@media (max-width: 720px) {
.sprint-flow__steps { grid-template-columns: 1fr; }
.sprint-flow__steps > :nth-child(4),
.sprint-flow__steps > :nth-child(5) { transform: none; }
}
/* ── About portrait ────────────────────────────────
No filter here on purpose. The washed-out look was a bad
source export (whites clipped at 218/255, grey haze over
the face), not a styling problem. Fixed by pointing at
cameron-moore.jpg. Do not reintroduce a contrast hack.
─────────────────────────────────────────────────── */
/* ── Contact: reach me without scrolling ───────────
Phone, text and email were below the fold. This strip
sits in the hero, directly under the sub-headline.
─────────────────────────────────────────────────── */
.hero-contact {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3) var(--space-5);
margin-top: var(--space-8);
position: relative;
z-index: 2;
}
.hero-contact__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.7em 1.25em;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(14, 32, 41, 0.55);
color: var(--gold-soft);
font-size: var(--text-base);
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.hero-contact__item svg { flex: 0 0 auto; opacity: 0.85; }
.hero-contact__item:hover,
.hero-contact__item:focus-visible {
border-color: var(--gold);
color: var(--ink);
transform: translateY(-1px);
}
@media (max-width: 520px) {
.hero-contact { gap: var(--space-2) var(--space-3); }
.hero-contact__item { font-size: var(--text-sm); padding: 0.65em 1em; }
}
/* ── CFO OS data flow ──────────────────────────────
Replaced a flat SVG that shipped its own fonts and
colours (Cormorant, #B58863 caramel, #22C55E arrows)
and re-stated the section heading inside the artwork.
Inline markup instead, so it inherits Fraunces and the
real caramel token and stays legible at every width.
─────────────────────────────────────────────────── */
.dataflow {
margin: var(--space-12) 0 0;
padding: clamp(var(--space-6), 3vw, var(--space-10)) clamp(var(--space-5), 3vw, var(--space-10)) clamp(var(--space-8), 3vw, var(--space-10));
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: rgba(14, 32, 41, 0.42);
}
.dataflow__cap {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: clamp(var(--space-8), 3vw, var(--space-12));
}
.dataflow__rail {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-8);
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.dataflow__rail::before {
content: '';
position: absolute;
top: 5px;
left: calc(12.5% + var(--space-4));
right: calc(12.5% + var(--space-4));
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), var(--gold), transparent);
opacity: 0.45;
}
.dataflow__node {
position: relative;
padding-top: var(--space-8);
}
.dataflow__node::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--gold);
}
.dataflow__node--last::before {
background: var(--gold);
}
.dataflow__step {
display: block;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--space-3);
}
.dataflow__name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--ink);
margin: 0 0 var(--space-3);
}
.dataflow__desc {
font-size: var(--text-base);
color: var(--linen);
font-weight: 300;
line-height: 1.7;
margin: 0;
}
@media (max-width: 900px) {
.dataflow__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.dataflow__rail::before { display: none; }
}
@media (max-width: 560px) {
.dataflow__rail { grid-template-columns: 1fr; }
}
/* ── Nav collapse threshold ────────────────────────
The desktop nav needs ~1200px to seat the logo, seven
links, the CTA and Client Login. Below that it was
running off the right edge with no hamburger fallback,
so 769-1219px (iPad landscape included) lost the CTA
and the login entirely. The compact variant above seats it
from ~1210px up; below that, collapse to the mobile menu.
Placed last so it wins over the compaction block.
─────────────────────────────────────────────────── */
@media (max-width: 1219px) {
.nav__links,
.nav__cta,
.nav__client-login { display: none; }
.nav__hamburger { display: flex; }
.nav__logo-tag { display: inline; }
}
/* ── Contact grid overflow at narrow widths ────────
Grid items default to min-width:auto, so a column
cannot shrink below its min-content. The email is one
unbreakable token (~346px), which pushed the column
past a 360px viewport and produced a 6px horizontal
scroll. Let the columns shrink and the long token wrap.
─────────────────────────────────────────────────── */
.contact-grid > * { min-width: 0; }
.contact-detail__value,
.contact-info__body,
.hero-contact__item { overflow-wrap: anywhere; }
/* Trigger cards on the home page link through to the situation page. */
.pain-card__link {
display: inline-block;
margin-top: var(--space-4);
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--transition), border-color var(--transition);
}
.pain-card__link::after { content: ' \2192'; }
.pain-card__link:hover,
.pain-card__link:focus-visible { color: var(--gold-soft); border-bottom-color: var(--gold); }
/* Trigger pages show four items in a 2x2, so the 3-column rail is wrong here. */
.steps--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps--pairs::before { display: none; }
@media (max-width: 768px) { .steps--pairs { grid-template-columns: 1fr; } }
/* preview: CTA variant */
.btn-cta{background:#46B17B;color:#06120B;border-color:#46B17B;}
.btn-cta:hover{background:#5CC48F;border-color:#5CC48F;transform:translateY(-1px);box-shadow:0 14px 40px -14px rgba(70,177,123,0.65);}