/* ============ HelpMeMarketing — Premium Generalist ============ */
/* Canonical tokens live in docs/HMM_Design_System.md. Phase 1 re-points the old token names
at the new palette so layouts keep rendering while colors shift. Legacy
aliases are removed progressively as pages migrate (Phases 3-6). */
:root {
/* Surfaces */
--ivory: #FAF9F6;
--gray-surface: #F1EFEB;
--border: #E8E4DC;
/* Text */
--text-primary: #1A1A1A;
--text-secondary: #6B7280;
--text-tertiary: #9CA3AF;
/* Dark sections */
--navy: #0A1628;
--navy-dark: #050B14;
--navy-light: #1E2D47;
/* Accent */
--gold: #C9A96E;
--gold-soft: #E4D4A8;
/* Data-viz only — never UI chrome */
--chart-blue: #2563EB;
--chart-green: #10B981;
--chart-red: #EF4444;
/* ----- Legacy aliases (pre-repositioning code still references these) ----- */
--primary: var(--navy);
--primary-dark: var(--navy-dark);
--deep: var(--navy);
--deep-soft: var(--navy-light);
--mint: var(--gold);
--mint-soft: #F5EDD8;
--cream: var(--gray-surface);
--cream-warm: var(--gray-surface);
--ink: var(--text-primary);
--ink-60: var(--text-secondary);
--ink-40: var(--text-tertiary);
--ink-80: #2A3534;
--line: var(--border);
--line-soft: var(--border);
--coral: var(--chart-red);
--butter: #F6B44B;
--sand: #E89A2E;
--white: #ffffff;
/* Radii + shadows (warmer tint to match ivory base) */
--radius: 14px;
--radius-lg: 22px;
--shadow-sm: 0 1px 2px rgba(26,22,14,0.04), 0 2px 6px rgba(26,22,14,0.03);
--shadow-md: 0 4px 14px rgba(26,22,14,0.06), 0 12px 28px rgba(26,22,14,0.05);
--shadow-lg: 0 10px 30px rgba(26,22,14,0.08), 0 30px 60px rgba(26,22,14,0.08);
/* Type */
--serif: 'Fraunces', Georgia, serif;
--sans: 'Inter', -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: var(--ink);
background: var(--white);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; color: var(--deep); font-weight: 500;}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;}
::selection { background: var(--mint); color: var(--deep);}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em;}
.mono { font-family: 'JetBrains Mono', monospace; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 32px; }
/* ============ App shell ============ */
.app { min-height: 100vh; background: var(--white); }
/* ============ Nav ============ */
.nav {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(12px);
background: rgba(250, 249, 246, 0.95);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1240px; margin: 0 auto; padding: 14px 32px;
display: flex; align-items: center; gap: 28px;
}
.logo {
display: flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 17px; color: var(--text-primary); letter-spacing: -0.01em;
}
.logo-mark {
width: 32px; height: 32px; border-radius: 6px;
background: var(--navy); color: var(--ivory);
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 13px; font-weight: 500;
letter-spacing: -0.02em;
position: relative;
}
.logo-mark .me-italic {
font-style: italic; color: var(--gold); margin-left: 1px;
}
.nav-links { display: flex; gap: 2px; margin-left: 12px; flex: 1; }
.nav-link {
padding: 8px 14px; border-radius: 8px;
font-size: 14px; color: var(--ink-60); font-weight: 500;
cursor: pointer; transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--cream); color: var(--deep); }
.nav-link.active { color: var(--deep); background: var(--cream); }
.nav-cta { display: flex; gap: 10px; align-items: center;}
@media (max-width: 900px){
.nav-links { display: none; }
.nav-signin { display: none; }
.nav-inner { gap: 16px; }
}
@media (max-width: 680px){
.logo-pill { display: none; }
.nav-main-cta { display: none; }
}
@media (max-width: 520px){
.nav-inner { padding: 12px 20px; gap: 10px; }
.nav-cta .btn-accent { padding: 10px 14px; font-size: 13px; }
.logo-text { font-size: 15px; }
}
/* ============ Buttons ============ */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 20px; border-radius: 999px;
font-size: 14px; font-weight: 500;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
white-space: nowrap;
}
.btn-primary { background: var(--deep); color: white; box-shadow: 0 1px 2px rgba(10,46,44,0.1);}
.btn-primary:hover { background: var(--deep-soft); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,46,44,0.18); }
.btn-accent { background: var(--primary); color: white; box-shadow: 0 1px 2px rgba(0,181,165,0.2);}
.btn-accent:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,181,165,0.28);}
.btn-ghost { color: var(--deep); }
.btn-ghost:hover { background: var(--cream); }
.btn-outline { border: 1px solid var(--line); color: var(--deep); background: white;}
.btn-outline:hover { border-color: var(--deep); background: var(--cream);}
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* ============ Hero grid — stacks below 1100px ============ */
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: center;
}
@media (max-width: 1100px){
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ============ Sections ============ */
section { padding: 88px 0; }
@media (max-width: 900px){ section { padding: 56px 0; } }
.section-tight { padding: 48px 0; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 500; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--navy);
}
.eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
/* ============ Pills / Chips ============ */
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
font-size: 12px; font-weight: 500;
background: var(--mint-soft); color: var(--deep);
}
/* ============ Cards ============ */
.card {
background: white; border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 28px;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--mint); box-shadow: 0 14px 30px rgba(10,46,44,0.08); transform: translateY(-3px);}
/* ============ Utility ============ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px){
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
section { padding: 48px 0; }
.container, .container-narrow { padding: 0 20px; }
}
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;} .mt-64{margin-top:64px;}
/* ============ Footer ============ */
.footer {
background: var(--navy); color: rgba(250, 249, 246, 0.8);
padding: 80px 0 40px;
}
.footer h4 {
color: rgba(250, 249, 246, 0.5); font-family: var(--sans); font-size: 12px;
font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
margin-bottom: 20px;
}
.footer a {
color: rgba(250, 249, 246, 0.8); font-size: 14px;
display: block; padding: 5px 0; transition: color 0.2s;
}
.footer a:hover { color: var(--gold); }
.footer-brand-col p {
color: rgba(250, 249, 246, 0.6); font-size: 14px;
line-height: 1.6; max-width: 280px;
}
.footer-brand-col p.footer-roster {
font-size: 12px; line-height: 1.55;
color: rgba(250, 249, 246, 0.4);
margin-top: 14px; max-width: 320px;
}
.footer-badges {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;
}
.footer-badge {
font-size: 11px; padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 100px;
color: rgba(250, 249, 246, 0.8); display: inline-block;
}
.footer-bottom {
margin-top: 0; padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex; justify-content: space-between;
color: rgba(250, 249, 246, 0.5); font-size: 13px;
}
.footer-bottom a {
color: rgba(250, 249, 246, 0.7); display: inline-block; padding: 0;
}
/* ============ Page transitions ============ */
.page-enter { animation: pageIn 0.35s cubic-bezier(.2,.8,.2,1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; }}
/* ============================================================
Responsive 2-col stack utilities
============================================================ */
.stack-lg { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.stack-md { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.stack-asym-lg { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.stack-asym-right { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.stack-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.stack-about { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
@media (max-width: 960px){
.stack-lg, .stack-md, .stack-asym-lg, .stack-asym-right, .stack-contact, .stack-about {
grid-template-columns: 1fr; gap: 40px;
}
}
/* ============ Compliance section ============ */
.compliance-head {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: end;
margin-bottom: 56px;
}
.compliance-sub {
font-size: 16px;
line-height: 1.6;
color: var(--ink-60);
max-width: 440px;
padding-bottom: 8px;
}
.compliance-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 24px;
align-items: stretch;
}
.compliance-frameworks {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.compliance-card {
background: white;
border: 1px solid var(--line-soft);
border-radius: 16px;
padding: 20px;
display: flex;
gap: 14px;
align-items: flex-start;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.compliance-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -16px rgba(10,46,44,0.14);
border-color: rgba(0,181,165,0.35);
}
.compliance-card-icon {
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--mint-soft);
color: var(--primary-dark);
display: grid;
place-items: center;
flex-shrink: 0;
}
.compliance-card-body { flex: 1; min-width: 0; }
.compliance-abbr {
font-size: 14px;
font-weight: 700;
color: var(--deep);
letter-spacing: -0.005em;
line-height: 1.2;
}
.compliance-region {
font-size: 11px;
color: var(--ink-60);
margin-top: 3px;
letter-spacing: 0.02em;
font-weight: 500;
}
.compliance-note {
font-size: 12.5px;
color: var(--ink-60);
margin-top: 10px;
line-height: 1.5;
}
.compliance-aside {
background: var(--deep);
border-radius: 20px;
padding: 28px;
color: white;
position: relative;
overflow: hidden;
}
.compliance-aside::before {
content: '';
position: absolute;
top: -50px; right: -50px;
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,181,165,0.2) 0%, transparent 70%);
pointer-events: none;
}
.compliance-aside-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mint);
position: relative;
}
.compliance-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: grid;
gap: 10px;
position: relative;
}
.compliance-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: rgba(255,255,255,0.85);
line-height: 1.45;
padding-left: 0;
}
.compliance-list li::before {
content: '✕';
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(255,138,101,0.18);
color: var(--coral);
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
line-height: 1;
margin-top: 1px;
}
.compliance-aside-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.12);
position: relative;
}
.compliance-foot {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px dashed var(--line);
}
.compliance-foot-num {
font-family: var(--serif);
font-size: 44px;
line-height: 1;
color: var(--deep);
letter-spacing: -0.02em;
margin-bottom: 10px;
}
.compliance-foot-label {
font-size: 13px;
color: var(--ink-60);
line-height: 1.5;
}
@media (max-width: 960px){
.compliance-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
.compliance-sub { max-width: 100%; }
.compliance-grid { grid-template-columns: 1fr; }
.compliance-foot { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px){
.compliance-frameworks { grid-template-columns: 1fr; }
.compliance-foot-num { font-size: 36px; }
}
.hero-break { display: none; }
/* Ad-calculator breakdown — 2-col layout for "How we got there" rows.
Inputs/process column (rows 1-5) | outcomes/economics column (rows 6-9).
Mobile collapses to single column via the @media rule below. */
.bd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
/* ============ Resources pages ============ */
@media (max-width: 960px){
.blog-feature { grid-template-columns: 1fr !important; }
.blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
.blog-news { grid-template-columns: 1fr !important; padding: 32px !important; }
.calc-grid { grid-template-columns: 1fr !important; }
.calc-inputs { position: static !important; }
.calc-stats { grid-template-columns: 1fr !important; }
.bd-cols { grid-template-columns: 1fr !important; }
.hipaa-cta { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px){
.blog-grid { grid-template-columns: 1fr !important; }
}
/* ============ Contact page — refined ============ */
.contact-page .stack-contact {
grid-template-columns: 380px 1fr;
gap: 80px;
align-items: start;
}
.contact-aside {
position: sticky;
top: 100px;
}
.contact-contacts {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--line-soft);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* --- Form card --- */
.contact-form {
background: white;
border: 1px solid var(--line-soft);
border-radius: 24px;
padding: 0;
overflow: hidden;
box-shadow: 0 24px 64px -32px rgba(10,46,44,0.08), 0 0 0 1px rgba(10,46,44,0.02);
}
.form-label {
font-size: 12px;
color: var(--ink-60);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}
.form-label-hint {
color: var(--ink-60);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
margin-left: 6px;
}
.form-input {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 12px;
font-family: inherit;
font-size: 15px;
background: white;
color: var(--deep);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-input::placeholder { color: var(--ink-60); }
.form-input:hover { border-color: var(--ink-60); }
.form-input:focus {
outline: none;
border-color: var(--primary);
background: white;
box-shadow: 0 0 0 4px rgba(0, 181, 165, 0.12);
}
.form-select-wrap { position: relative; }
.form-select {
appearance: none;
-webkit-appearance: none;
padding-right: 40px;
cursor: pointer;
}
.form-select-caret {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--ink-60);
pointer-events: none;
}
.form-prefix-wrap {
display: flex;
align-items: stretch;
border: 1px solid var(--line);
border-radius: 12px;
background: white;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-prefix-wrap:hover { border-color: var(--ink-60); }
.form-prefix-wrap:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(0, 181, 165, 0.12);
}
.form-prefix {
display: grid;
place-items: center;
padding: 0 14px;
background: var(--cream);
border-right: 1px solid var(--line-soft);
font-size: 13px;
color: var(--ink-60);
font-weight: 500;
white-space: nowrap;
}
.form-input-prefixed {
border: none;
border-radius: 0;
background: white;
flex: 1;
}
.form-input-prefixed:hover, .form-input-prefixed:focus { border: none; box-shadow: none; }
.form-textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 12px;
font-family: inherit;
font-size: 15px;
background: white;
color: var(--deep);
resize: vertical;
min-height: 110px;
line-height: 1.55;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-textarea:hover { border-color: var(--ink-60); }
.form-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(0, 181, 165, 0.12);
}
.chip-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--line);
background: white;
color: var(--ink-80);
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all 0.15s ease;
}
.chip:hover { border-color: var(--ink-60); background: var(--cream); }
.chip-on {
border-color: var(--primary-dark);
background: var(--mint-soft);
color: var(--primary-dark);
}
.contact-privacy-mini {
padding: 14px 40px 18px;
display: flex;
gap: 8px;
align-items: center;
font-size: 12px;
color: var(--ink-60);
line-height: 1.4;
border-top: 1px solid var(--line-soft);
background: var(--cream);
}
.contact-form-compact .chip { padding: 9px 14px; font-size: 13px; }
.contact-submit {
margin: 0;
padding: 18px 24px;
border-radius: 0;
border: none;
background: var(--deep);
color: white;
font-family: inherit;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.005em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
transition: background 0.15s ease;
}
.contact-submit:hover { background: var(--primary); }
/* Thank-you state */
.contact-thanks {
background: white;
border: 1px solid var(--line-soft);
border-radius: 24px;
padding: 80px 40px;
text-align: center;
box-shadow: 0 24px 64px -32px rgba(10,46,44,0.08);
}
.contact-thanks-glyph {
width: 76px;
height: 76px;
border-radius: 50%;
background: var(--primary);
display: grid;
place-items: center;
margin: 0 auto 24px;
box-shadow: 0 12px 24px -10px rgba(0,181,165,0.5);
}
@media (max-width: 960px){
.contact-page .stack-contact { grid-template-columns: 1fr !important; gap: 40px !important; }
.contact-aside { position: static; }
.contact-submit { margin: 18px 24px 28px; width: calc(100% - 48px); }
}
@media (max-width: 560px){
.contact-contacts { grid-template-columns: 1fr; }
}
/* ============ Reviews carousel ============ */
.reviews-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 28px;
}
.reviews-controls {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.review-nav {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--line);
background: white;
color: var(--deep);
cursor: pointer;
display: grid;
place-items: center;
transition: all 0.2s ease;
}
.review-nav:hover {
background: var(--deep);
color: white;
border-color: var(--deep);
transform: translateY(-1px);
}
.reviews-track-wrap {
width: 100%;
overflow: hidden;
}
.reviews-track {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 6px 0 14px;
scroll-behavior: smooth;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-spacer {
flex: 0 0 max(24px, calc((100vw - 1200px) / 2));
}
.review-card {
flex: 0 0 min(380px, 85vw);
scroll-snap-align: start;
background: white;
border-radius: 16px;
padding: 24px 24px 20px;
border: 1px solid var(--line-soft);
box-shadow: 0 8px 24px -10px rgba(10,46,44,0.08);
display: flex;
flex-direction: column;
position: relative;
}
.review-quote {
font-family: var(--serif);
font-size: 19px;
line-height: 1.35;
color: var(--deep);
letter-spacing: -0.005em;
margin: 0 0 20px;
flex: 1;
}
.review-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 14px 0;
margin-bottom: 14px;
border-top: 1px dashed var(--line);
border-bottom: 1px dashed var(--line);
}
.review-metric-label {
font-size: 9px;
color: var(--ink-60);
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 4px;
line-height: 1.3;
}
.review-metric-value {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--deep);
letter-spacing: -0.01em;
line-height: 1.1;
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.review-metric-arrow {
font-size: 14px;
font-weight: 700;
}
.review-metric-arrow.up { color: var(--primary); }
.review-metric-arrow.down { color: var(--primary); }
.review-attribution {
display: flex;
flex-direction: column;
}
.review-name {
font-size: 14px;
font-weight: 600;
color: var(--deep);
letter-spacing: -0.005em;
}
.review-role {
font-size: 12px;
color: var(--ink-60);
margin-top: 2px;
line-height: 1.4;
}
.review-location {
font-size: 11px;
color: var(--ink-40);
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.reviews-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 22px;
}
.review-dot {
width: 6px;
height: 6px;
border-radius: 50%;
border: none;
background: var(--line);
cursor: pointer;
padding: 0;
transition: all 0.25s ease;
}
.review-dot.active {
background: var(--primary);
width: 22px;
border-radius: 999px;
}
@media (max-width: 720px){
.reviews-header { flex-direction: column; align-items: flex-start; }
.review-card { padding: 28px 24px 24px; }
.review-quote { font-size: 20px; }
.review-metric-value { font-size: 17px; }
}
@media (max-width: 560px) { .hero-pill-pharmacy { display: none; } }
@media (min-width: 1200px) { .hero-break { display: inline; } }
.hero-visual { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; height: 560px; }
.hero-visual-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
height: 500px;
}
.hero-visual-2x2 .hero-card { min-height: 0; }
@media (max-width: 1100px){
.hero-visual { grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: auto; max-width: 520px; margin: 0 auto; }
.hero-visual-2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; max-width: 720px; margin: 0 auto; gap: 14px; }
}
@media (max-width: 520px){
.hero-visual-2x2 { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; max-width: 380px; }
}
/* Stats row */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.1);}
@media (max-width: 720px){ .stats-row { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; padding-top: 32px;} }
/* Pain points */
.pain-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 24px; align-items: center; padding: 28px 4px; border-top: 1px solid var(--line); }
@media (max-width: 640px){
.pain-row { grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0;}
.pain-row > .pain-arrow { display: none; }
}
/* About values */
.about-value-row { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
@media (max-width: 480px){
.about-value-row { grid-template-columns: 44px 1fr; gap: 14px; padding: 22px 0; }
}
/* Form 2-col rows */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px){ .form-2col { grid-template-columns: 1fr; } }
/* ============================================================
Footer responsive
============================================================ */
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px; margin-bottom: 64px; }
@media (max-width: 1000px){ .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px 32px; } .footer-brand-col { grid-column: 1 / -1; } }
@media (max-width: 640px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .footer-brand-col { grid-column: 1 / -1; } }
@media (max-width: 420px){ .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px){
.footer { padding: 56px 0 32px; }
.footer-bottom { flex-direction: column; gap: 14px; margin-top: 40px; }
}
/* ============================================================
Nav hamburger (mobile)
============================================================ */
.nav-hamburger {
display: none; width: 40px; height: 40px; border-radius: 10px;
background: var(--cream); border: 1px solid var(--line);
align-items: center; justify-content: center; cursor: pointer;
}
.nav-hamburger span { display: block; width: 18px; height: 2px; background: var(--deep); position: relative; transition: transform 0.2s;}
.nav-hamburger span::before, .nav-hamburger span::after {
content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--deep); transition: transform 0.2s;
}
.nav-hamburger span::before { top: -6px; }
.nav-hamburger span::after { top: 6px; }
.nav-hamburger.open span { background: transparent; }
.nav-hamburger.open span::before { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile-menu {
position: fixed; top: 64px; left: 0; right: 0; z-index: 49;
background: white; border-bottom: 1px solid var(--line-soft);
padding: 16px 20px 24px;
box-shadow: 0 20px 40px rgba(10,46,44,0.08);
display: none;
}
.nav-mobile-menu.open { display: flex; flex-direction: column; gap: 2px; }
.nav-mobile-menu .nav-link { padding: 14px 16px; font-size: 16px; border-radius: 10px; }
.nav-mobile-menu .nav-link.active { background: var(--mint-soft); }
.nav-mobile-menu .mobile-cta-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.nav-mobile-menu .mobile-cta-row .btn { justify-content: center; }
@media (max-width: 900px){
.nav-hamburger { display: inline-flex; }
.nav-signin { display: none; }
}
/* ============================================================
Mobile typography scale
============================================================ */
@media (max-width: 640px){
body { font-size: 15px; }
.container, .container-narrow { padding: 0 20px; }
.hero-h1 { font-size: 40px !important; line-height: 1.05 !important; }
.display-xl { font-size: 40px !important; line-height: 1.05 !important; }
.display-lg { font-size: 34px !important; line-height: 1.08 !important; }
.display-md { font-size: 28px !important; line-height: 1.1 !important; }
.display-sm { font-size: 24px !important; line-height: 1.15 !important; }
.eyebrow-stat { font-size: 40px !important; }
.stat-big { font-size: 44px !important; }
.btn-lg { padding: 13px 20px; font-size: 14px; }
section { padding: 56px 0; }
.card { padding: 22px; border-radius: 18px; }
}
@media (max-width: 420px){
.hero-h1 { font-size: 34px !important; }
.display-xl { font-size: 34px !important; }
.display-lg { font-size: 30px !important; }
}
.cta-card { padding: 80px 60px; border-radius: 32px; }
@media (max-width: 900px){ .cta-card { padding: 56px 32px; border-radius: 24px; } }
@media (max-width: 640px){ .cta-card { padding: 40px 24px; border-radius: 20px; } }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px){ .pricing-grid { grid-template-columns: 1fr; gap: 16px; max-width: 440px; margin: 0 auto; } }
/* ============================================
SERVICE PAGE COMPONENTS — Hero, body, cards, related reading
============================================
Shared by the 9 /services/[name] pages and Bundle Builder. All
classes here are template; do not redefine in page-local style
blocks.
- Hero: .hero-zone / .services-hero / .hero-content /
.hero-headline / .services-hero-visual
- Body prose: .prose-block (with descendants) / .section-deck /
.caveat-list
- Tier cards: .tier-card-grid + .tier-card variants
(Foundation / Growth / Scale)
- Outcomes: .outcome-grid + .outcome-card variants
- Disclosure: .disclosure-card variants
- Related: .related-grid + .related-card variants
- Sections: .tiers-section / .outcomes-section /
.disclosure-section / .related-reading wrappers
Hero values mirror .home-hero (search ".home-hero {" for source).
Section wrappers inherit the global `section { padding: 88px 0 }`
rule. */
.tier-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.tier-card-grid { grid-template-columns: 1fr; }
}
.tier-card {
background: #fff;
border: 1px solid var(--border);
border-top: 4px solid var(--gold);
border-radius: 20px;
padding: 32px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tier-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.tier-card-eyebrow {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--gold);
}
.tier-card-who {
font-size: 14px;
color: var(--navy);
}
.tier-card-pricing {
font-size: 22px;
font-weight: 700;
color: var(--gold);
}
.tier-card-pricing-meta {
font-size: 13px;
font-style: italic;
color: var(--text-secondary);
}
.tier-card-section-heading {
font-size: 14px;
font-weight: 700;
color: var(--navy);
}
.tier-card-fits-list,
.tier-card-excluded-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.tier-card-fits-list li,
.tier-card-excluded-list li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.5;
}
.tier-card-fits-list li { color: var(--navy); }
.tier-card-excluded-list li { color: var(--text-secondary); }
.tier-card-fits-list li::before,
.tier-card-excluded-list li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}
.tier-card-excluded-list li::before {
background: var(--text-tertiary);
}
.tier-card-focus {
font-size: 14px;
font-style: italic;
color: var(--navy);
}
/* Outcome card — "What this looks like in practice" results */
.outcome-card {
background: var(--ivory);
border: 1px solid var(--border);
border-left: 3px solid var(--gold);
border-radius: 14px;
padding: 24px;
margin-bottom: 16px;
}
.outcome-card-eyebrow {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--gold);
}
.outcome-card-metric {
font-size: 18px;
font-weight: 700;
color: var(--navy);
}
.outcome-card-profile {
font-size: 14px;
font-style: italic;
color: var(--text-tertiary);
}
/* Disclosure card — "About our pricing" footnote block */
.disclosure-card {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
}
.disclosure-card-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--gold);
}
.disclosure-card-body {
font-size: 14px;
color: var(--navy);
}
.hero-zone {
background: var(--gray-surface);
padding: 80px 0 104px;
position: relative;
overflow: hidden;
}
@media (max-width: 900px) {
.hero-zone { padding: 56px 0 72px; }
}
.services-hero .container {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: center;
}
@media (max-width: 900px) {
.services-hero .container { grid-template-columns: 1fr; gap: 40px; }
}
.hero-headline {
font-family: var(--serif);
font-size: clamp(48px, 6.5vw, 84px);
margin: 24px 0 28px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--deep);
font-weight: 400;
}
.services-hero-visual { display: block; }
.services-hero-visual img {
width: 100%;
height: auto;
border-radius: 14px;
display: block;
}
/* Long-form content (prose-block) */
.prose-block h2 {
font-family: var(--serif);
font-size: clamp(32px, 4vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--deep);
margin-bottom: 24px;
}
.prose-block p {
font-size: 17px;
line-height: 1.7;
color: var(--text-primary);
margin-bottom: 18px;
}
.prose-block p:last-child { margin-bottom: 0; }
.prose-block ol,
.prose-block ul {
margin: 18px 0;
padding-left: 24px;
font-size: 17px;
line-height: 1.7;
color: var(--text-primary);
}
.prose-block li { margin-bottom: 10px; }
.prose-block li:last-child { margin-bottom: 0; }
.prose-block strong { font-weight: 600; color: var(--deep); }
/* Section subtitle (after h2 in tier/outcome sections) */
.section-deck {
font-size: 18px;
line-height: 1.5;
color: var(--text-secondary);
max-width: 620px;
margin-bottom: 40px;
}
/* Tier / outcome / disclosure section wrappers
(inherit section { padding: 88px 0 } from line 176) */
.tiers-section h2,
.outcomes-section h2 {
font-family: var(--serif);
font-size: clamp(40px, 5vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--deep);
margin-bottom: 16px;
}
/* Outcome card grid — mirrors .tier-card-grid */
.outcome-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.outcome-grid { grid-template-columns: 1fr; }
}
/* Caveat list ("Not for you if") */
.caveat-list {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.caveat-list li {
position: relative;
padding-left: 24px;
font-size: 17px;
line-height: 1.6;
color: var(--text-primary);
}
.caveat-list li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}
/* Related reading (3-up blog card grid) */
.related-reading {
/* inherits default section padding 88px 0 */
}
.related-reading h2 {
font-family: var(--serif);
font-size: clamp(32px, 4vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--deep);
margin-bottom: 32px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.related-grid { grid-template-columns: 1fr; }
}
.related-card {
display: block;
padding: 24px;
border: 1px solid var(--line);
border-radius: 12px;
background: white;
text-decoration: none;
transition: border-color 0.2s, transform 0.2s;
}
.related-card:hover {
border-color: var(--gold);
transform: translateY(-2px);
}
.related-card-eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
margin-bottom: 12px;
}
.related-card h3 {
font-family: var(--serif);
font-size: 20px;
line-height: 1.3;
color: var(--deep);
margin: 0 0 12px;
}
.related-card p {
font-size: 15px;
line-height: 1.5;
color: var(--text-primary);
margin: 0;
}
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1000px){ .results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .results-grid { grid-template-columns: 1fr; gap: 16px; } }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px){ .services-grid { grid-template-columns: 1fr; } }
.loved-strip { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px){ .loved-strip { gap: 20px 28px; } .loved-strip .loved-logo { font-size: 16px !important; } }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px){ .process-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } .process-grid .process-line { display: none; } }
@media (max-width: 520px){ .process-grid { grid-template-columns: 1fr; gap: 32px; } }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px){ .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.service-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ .service-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .service-features { grid-template-columns: 1fr; } }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; }
@media (max-width: 720px){ .section-head { flex-direction: column; align-items: start; gap: 20px; margin-bottom: 36px; } }
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 900px){ .testimonial-grid { grid-template-columns: 1fr; gap: 32px; } .testimonial-portrait { max-width: 360px; margin: 0 auto; } }
@media (max-width: 640px){
.contact-form { padding: 24px !important; border-radius: 18px !important; }
}
.svc-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding-top: 22px;
border-top: 1px solid var(--line-soft);
}
.svc-stat-value {
font-family: 'Inter', system-ui, sans-serif;
font-size: 22px;
font-weight: 600;
color: var(--deep);
line-height: 1.15;
letter-spacing: -0.01em;
}
.svc-stat-label {
font-size: 12px;
color: var(--ink-60);
margin-top: 6px;
line-height: 1.4;
font-weight: 500;
}
@media (max-width: 520px){
.svc-stats { gap: 16px; }
.svc-stat-value { font-size: 19px; }
}
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (hover: none) {
.card:hover { transform: none; }
.btn-primary:hover, .btn-accent:hover { transform: none; }
}
/* ============================================================
Phase 2 shared components (new design system)
============================================================ */
/* Italic-gold accent — one per headline, most important word only */
.italic-accent {
font-style: italic;
color: var(--gold);
font-weight: 400;
}
/* Eyebrow on dark backgrounds (footer, CTA, process) */
.eyebrow.on-dark { color: var(--gold-soft); }
.eyebrow.on-dark .eyebrow-dot { background: var(--gold); }
/* FAQ section (homepage, above final CTA) */
.faq-section { padding: 88px 0 56px; background: var(--ivory); }
@media (max-width: 900px) { .faq-section { padding: 56px 0 32px; } }
.faq-item {
border-bottom: 1px solid var(--border);
padding: 22px 0;
}
.faq-item:first-of-type { border-top: 1px solid var(--border); }
.faq-item summary {
font-size: 18px; font-weight: 500; color: var(--text-primary);
cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center;
gap: 24px; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-icon {
font-size: 22px; color: var(--gold); font-weight: 400;
line-height: 1; transition: transform 0.2s ease;
flex-shrink: 0;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item > p {
font-size: 15.5px; line-height: 1.65;
color: var(--text-secondary);
margin: 14px 0 0; max-width: 720px;
}
/* Final CTA — navy card with ambient gold radials */
.final-cta { padding: 64px 0 104px; }
@media (max-width: 900px) { .final-cta { padding: 48px 0 72px; } }
.cta-card {
background: var(--navy); color: var(--ivory);
border-radius: 24px; padding: 80px 72px;
position: relative; overflow: hidden;
}
.cta-card::before {
content: ''; position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgba(201,169,110,0.12) 0%, transparent 70%);
}
.cta-card::after {
content: ''; position: absolute;
bottom: -200px; right: 100px;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(201,169,110,0.08) 0%, transparent 70%);
}
.cta-card .cta-inner {
position: relative; z-index: 2; max-width: 620px;
}
.cta-card .cta-inner h2 {
color: var(--ivory); font-size: clamp(44px, 5.2vw, 60px);
line-height: 1.05; margin: 20px 0 24px;
}
.cta-card .cta-inner p {
color: rgba(250, 249, 246, 0.7); font-size: 17px;
line-height: 1.5; margin-bottom: 40px; max-width: 480px;
}
.cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 720px) {
.cta-card { padding: 56px 32px; }
}
/* Dark-CTA button variants */
.btn-cta-primary {
background: var(--navy-dark); color: var(--ivory);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-cta-primary:hover { background: #000; }
.btn-outline-light {
background: transparent; color: var(--ivory);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-outline-light:hover { border-color: rgba(255, 255, 255, 0.5); }
/* ============================================================
Phase 3: Homepage components
============================================================ */
section.alt { background: var(--gray-surface); }
/* Section headers (homepage pattern) */
.section-header { margin-bottom: 56px; }
.section-header.centered { text-align: center; }
.section-header.centered h2,
.section-header.centered > p { margin-left: auto; margin-right: auto; }
.section-header h2 {
font-family: var(--serif);
font-size: clamp(40px, 5vw, 56px);
margin-top: 20px; max-width: 720px; line-height: 1.05;
font-weight: 400; letter-spacing: -0.02em;
}
.section-header p {
color: var(--text-secondary); margin-top: 24px;
max-width: 620px; font-size: 16px;
}
.section-header-row {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 56px; gap: 40px;
}
.section-header-row h2 {
font-family: var(--serif);
font-size: clamp(40px, 5vw, 56px);
margin-top: 20px; max-width: 720px; line-height: 1.05;
font-weight: 400; letter-spacing: -0.02em;
}
@media (max-width: 720px) {
.section-header-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}
/* Text link with gold underline */
.text-link {
color: var(--text-primary); text-decoration: none;
font-size: 14px; font-weight: 500;
border-bottom: 1px solid var(--gold);
padding-bottom: 2px; transition: color 0.2s;
}
.text-link:hover { color: var(--gold); }
/* Homepage hero */
.home-hero {
background: var(--gray-surface);
padding: 80px 0 104px;
position: relative; overflow: hidden;
}
@media (max-width: 900px) { .home-hero { padding: 56px 0 72px; } }
.home-hero h1 {
font-family: var(--serif);
font-size: clamp(48px, 6.5vw, 84px);
margin: 24px 0 28px;
line-height: 1.05; letter-spacing: -0.02em; font-weight: 400;
}
.hero-subtitle {
font-size: 18px; color: var(--text-secondary);
line-height: 1.5; margin-bottom: 40px; max-width: 520px;
}
.hero-ctas-row {
display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
/* Metric card cluster */
.metric-card {
background: white; border-radius: 14px; padding: 24px;
box-shadow: 0 1px 3px rgba(26, 22, 14, 0.04);
border: 1px solid var(--border);
}
.metric-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20px;
}
.metric-label {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-secondary); font-weight: 500;
}
.live-indicator {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--chart-green); font-weight: 500;
}
.live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--chart-green); animation: pulse 2s infinite;
}
.metric-value {
font-family: var(--serif); font-size: 56px; font-weight: 400;
letter-spacing: -0.03em; line-height: 1;
display: flex; align-items: baseline; gap: 8px;
color: var(--text-primary);
}
.metric-delta {
font-size: 14px; color: var(--chart-green); font-weight: 500;
}
.metric-sparkline { margin-top: 20px; height: 60px; }
.metric-value-label {
font-size: 13px; font-weight: 500;
color: var(--text-secondary); margin-top: 6px;
letter-spacing: 0.01em;
}
.metric-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 12px; margin-top: 12px;
}
.metric-small {
background: white; border: 1px solid var(--border);
border-radius: 12px; padding: 18px;
}
.metric-small-label {
font-size: 11px; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;
}
.metric-small-value {
font-family: var(--serif); font-size: 22px; font-weight: 400;
color: var(--text-primary);
}
.metric-small-delta {
font-size: 12px; color: var(--chart-green); margin-left: 4px;
}
/* Pain points */
.pain-grid {
display: grid; grid-template-columns: 1fr 1.3fr;
gap: 80px; align-items: start;
}
@media (max-width: 900px) { .pain-grid { grid-template-columns: 1fr; gap: 40px; } }
.pain-left h2 {
font-family: var(--serif);
font-size: clamp(36px, 4.5vw, 52px); line-height: 1.05;
font-weight: 400; letter-spacing: -0.02em; margin-top: 20px;
}
.pain-left > p {
color: var(--text-secondary); margin-top: 24px;
font-size: 16px; max-width: 400px;
}
.pain-list { list-style: none; padding: 0; margin: 0; }
.pain-item {
display: grid; grid-template-columns: 48px 1fr auto;
gap: 24px; padding: 28px 0;
border-top: 1px solid var(--border);
align-items: center; transition: padding-left 0.2s;
}
.pain-item:last-child { border-bottom: 1px solid var(--border); }
.pain-item:hover { padding-left: 8px; }
.pain-num {
font-family: var(--serif); font-size: 16px;
color: var(--gold); font-weight: 500;
}
.pain-text h4 {
font-family: var(--sans); font-size: 18px; font-weight: 500;
margin: 0 0 4px 0; color: var(--text-primary);
letter-spacing: 0; line-height: 1.3;
}
.pain-text p {
font-size: 14px; color: var(--text-secondary); margin: 0;
line-height: 1.5;
}
.pain-arrow { color: var(--text-tertiary); font-size: 16px; }
/* Home services grid (3-col, distinct from /services page's .services-grid) */
.home-services-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 960px) { .home-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-services-grid { grid-template-columns: 1fr; } }
.service-card {
background: var(--ivory); border: 1px solid var(--border);
border-radius: 16px; padding: 32px;
transition: border-color 0.25s, transform 0.25s;
display: block; text-decoration: none; color: inherit;
}
.service-card:hover {
border-color: var(--navy); transform: translateY(-2px);
}
.service-icon {
width: 44px; height: 44px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 28px;
}
.svc-icon-svg { width: 20px; height: 20px; }
.ic-blue { background: #E6F1FB; color: #185FA5; }
.ic-gold { background: #F5EDD8; color: #8B6F2E; }
.ic-sand { background: #EDE7DD; color: #5F5144; }
.ic-green { background: #E1F5EE; color: #0F6E56; }
.ic-navy { background: #E1E6EE; color: #0A1628; }
.ic-crimson { background: #FCEBEB; color: #A32D2D; }
.service-card h3 {
font-family: var(--serif); font-size: 22px;
margin: 0 0 10px 0; font-weight: 400;
color: var(--text-primary); letter-spacing: -0.01em;
}
.service-card p {
font-size: 14px; color: var(--text-secondary);
margin: 0 0 24px 0; line-height: 1.6;
}
.service-link {
font-size: 13px; color: var(--text-primary); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
display: inline-flex; align-items: center; gap: 6px;
border-bottom: 1px solid var(--gold);
padding-bottom: 2px; text-decoration: none;
}
/* Industries */
.industries-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 960px) { .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 520px) { .industries-grid { grid-template-columns: 1fr; } }
.industry-tile {
background: var(--ivory); border: 1px solid var(--border);
border-radius: 16px; padding: 36px 28px;
transition: border-color 0.25s, transform 0.25s;
display: block; text-decoration: none; color: inherit;
}
.industry-tile:hover {
border-color: var(--navy); transform: translateY(-2px);
}
.industry-illustration {
width: 56px; height: 56px; margin-bottom: 28px;
display: flex; align-items: center; justify-content: center;
}
.illus-circle {
background: var(--gray-surface);
width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.industry-tile h3 {
font-family: var(--sans); font-size: 17px; font-weight: 500;
margin: 0 0 8px 0; color: var(--text-primary);
letter-spacing: 0; line-height: 1.3;
}
.industry-tile > p {
font-size: 13px; color: var(--text-secondary);
margin: 0 0 24px 0; line-height: 1.5; min-height: 40px;
}
.industry-metric { padding-top: 20px; border-top: 1px solid var(--border); }
.industry-metric-value {
font-family: var(--serif); font-size: 28px; font-weight: 400;
color: var(--navy); line-height: 1;
}
.industry-metric-label {
font-size: 12px; color: var(--text-secondary); margin-top: 4px;
}
.industry-metric-proof {
font-size: 11px; color: var(--text-tertiary);
margin-top: 8px; letter-spacing: 0.02em;
line-height: 1.4;
}
/* Case studies */
.case-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 960px) { .case-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .case-grid { grid-template-columns: 1fr; } }
.case-card {
border-radius: 16px; overflow: hidden; position: relative;
aspect-ratio: 4 / 5; transition: transform 0.3s;
display: block; text-decoration: none;
}
.case-card:hover { transform: translateY(-3px); }
.case-image {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.case-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(10,22,40,0.15) 0%, rgba(10,22,40,0.35) 50%, rgba(10,22,40,0.85) 100%);
}
.case-content {
position: absolute; inset: 0; padding: 24px;
display: flex; flex-direction: column; justify-content: space-between;
color: white;
}
.case-top { display: flex; justify-content: space-between; }
.case-pill {
background: rgba(255, 255, 255, 0.95); color: var(--navy);
font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
padding: 6px 12px; border-radius: 100px;
}
.case-metric {
font-family: var(--serif); font-size: 72px; font-weight: 400;
line-height: 1; letter-spacing: -0.03em; margin-bottom: 8px;
color: white;
}
.case-duration-inline {
font-size: 13px; font-weight: 500;
color: rgba(255,255,255,0.85);
margin-bottom: 16px; letter-spacing: 0.01em;
}
.case-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; color: white; }
.case-vertical { font-size: 12px; opacity: 0.8; margin-bottom: 14px; color: white; }
.case-quote {
font-family: var(--serif); font-style: italic;
font-size: 14px; opacity: 0.9; line-height: 1.4; color: white;
}
.case-1 { background: linear-gradient(135deg, #D4A574 0%, #8B5A3C 100%); }
.case-2 { background: linear-gradient(135deg, #4A6B8A 0%, #1E2D47 100%); }
.case-3 { background: linear-gradient(135deg, #A8AFB8 0%, #4A5159 100%); }
/* Proof card (single, centered, above final-CTA on service pages) */
.proof-section { padding: 56px 0; background: var(--gray-surface); }
@media (max-width: 900px) { .proof-section { padding: 40px 0; } }
.proof-section .section-header { margin-bottom: 40px; }
.proof-card-wrap { max-width: 480px; margin: 0 auto; padding: 0 8px; }
.proof-section .case-card { aspect-ratio: 4 / 5; }
.case-context {
font-size: 13px;
color: rgba(255, 249, 246, 0.82);
margin-top: 14px;
padding-top: 14px;
line-height: 1.5;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* Service prose — methodology + who-for + success */
.svc-prose { padding: 96px 0; background: var(--ivory); }
@media (max-width: 900px) { .svc-prose { padding: 64px 0; } }
.svc-prose-inner { max-width: 920px; margin: 0 auto; }
.svc-prose-block h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(32px, 3.6vw, 44px);
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 28px;
color: var(--text-primary);
}
.svc-prose-block p {
font-size: 18px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 18px;
}
.svc-prose-block p:last-child { margin-bottom: 0; }
.svc-prose-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid rgba(10, 22, 40, 0.08);
}
@media (max-width: 700px) {
.svc-prose-meta { grid-template-columns: 1fr; gap: 24px; }
}
.svc-prose-meta .eyebrow { margin-bottom: 12px; display: inline-flex; }
.svc-prose-meta p {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
/* Process section (dark navy) */
.process {
background: var(--navy); color: var(--ivory);
padding: 104px 0; position: relative; overflow: hidden;
}
@media (max-width: 900px) { .process { padding: 72px 0; } }
.process::before {
content: ''; position: absolute; top: -100px; right: -100px;
width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgba(201,169,110,0.08) 0%, transparent 70%);
}
.process::after {
content: ''; position: absolute; bottom: -150px; left: -100px;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(201,169,110,0.05) 0%, transparent 70%);
}
.process .section-header h2 { color: var(--ivory); }
.process-steps {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 32px; position: relative; margin-top: 20px;
}
@media (max-width: 900px) {
.process-steps { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
.process-line { display: none; }
}
@media (max-width: 520px) {
.process-steps { grid-template-columns: 1fr; gap: 32px; }
}
.process-line {
position: absolute; top: 24px; left: 12%; right: 12%;
height: 1px; background: rgba(201, 169, 110, 0.3);
}
.process-step { position: relative; z-index: 2; }
.step-circle {
width: 48px; height: 48px; border-radius: 50%;
background: var(--navy); border: 1px solid var(--gold);
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 18px;
color: var(--gold); margin-bottom: 28px;
}
.process-step-label {
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.15em; color: var(--gold);
margin-bottom: 8px;
}
.process-step h3 {
font-family: var(--sans); font-size: 18px; font-weight: 500;
color: var(--ivory); margin: 0 0 8px 0; letter-spacing: 0;
}
.process-step p {
font-size: 14px; color: rgba(250, 249, 246, 0.6);
line-height: 1.5; margin: 0;
}
/* Testimonial carousel — scroll-snap, auto-advance, keyboard-accessible */
.testimonial-section { padding: 96px 0; text-align: center; }
@media (max-width: 900px) { .testimonial-section { padding: 64px 0; } }
.testimonial-carousel {
position: relative;
margin: 16px 0 0;
padding: 0 56px;
}
.carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
outline: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
flex: 0 0 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
display: flex;
justify-content: center;
padding: 16px 8px 24px;
}
.testimonial-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
padding: 40px 36px;
margin: 0;
max-width: 680px;
width: 100%;
text-align: left;
display: flex; flex-direction: column; gap: 28px;
box-shadow: 0 2px 4px rgba(26,22,14,0.03), 0 12px 32px rgba(26,22,14,0.06);
}
.testimonial-text {
font-family: var(--serif);
font-size: 24px; line-height: 1.4;
letter-spacing: -0.01em;
color: var(--text-primary); font-weight: 400;
flex: 1;
}
.testimonial-footer {
display: flex; align-items: center; gap: 14px;
padding-top: 20px; border-top: 1px solid var(--border);
}
.author-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--sans); font-size: 14px; font-weight: 500;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.author-info { text-align: left; }
.author-name {
font-size: 15px; font-weight: 500; color: var(--text-primary);
}
.author-title { font-size: 13px; color: var(--text-secondary); }
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--navy);
color: var(--navy);
display: flex; align-items: center; justify-content: center;
padding: 0; cursor: pointer;
z-index: 2;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.carousel-arrow:hover {
color: var(--gold); border-color: var(--gold);
}
.carousel-arrow:focus-visible {
outline: 2px solid var(--gold); outline-offset: 3px;
}
.carousel-arrow-prev { left: 0; }
.carousel-arrow-next { right: 0; }
.carousel-dots {
display: flex; justify-content: center; gap: 10px;
margin-top: 20px;
}
.carousel-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--border);
border: none; padding: 0; cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.carousel-dot:hover { background: var(--text-tertiary); }
.carousel-dot.is-active { background: var(--navy); transform: scale(1.15); }
.carousel-dot.is-active:hover { background: var(--navy); }
.carousel-dot:focus-visible {
outline: 2px solid var(--gold); outline-offset: 3px;
}
@media (max-width: 720px) {
.testimonial-carousel { padding: 0 8px 0; }
.testimonial-card { padding: 32px 24px; }
.testimonial-text { font-size: 20px; }
.carousel-arrow {
top: auto; bottom: 0; transform: none;
width: 40px; height: 40px;
}
.carousel-arrow-prev { left: calc(50% - 84px); }
.carousel-arrow-next { right: calc(50% - 84px); }
.carousel-dots { margin-top: 56px; }
}
/* Stats strip (homepage, below hero) — reinforces stats-driven messaging */
.stats-strip {
padding: 40px 0;
border-bottom: 1px solid var(--border);
background: var(--ivory);
}
.trust-anchor-line {
text-align: center;
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 28px;
letter-spacing: 0.01em;
}
.trust-anchor-line strong {
color: var(--text-primary);
font-weight: 600;
}
.stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 32px; align-items: baseline;
}
.stat-item { text-align: left; }
.stat-value {
font-family: var(--serif); font-size: clamp(32px, 3.4vw, 44px);
line-height: 1; color: var(--navy);
letter-spacing: -0.02em; font-weight: 400;
}
.stat-label {
font-size: 11px; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.14em;
margin-top: 10px; font-weight: 500;
}
@media (max-width: 900px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.stats-strip { padding: 32px 0; }
}
/* Loved-by strip — client names + one-line descriptor, between stats and pain */
.loved-by-section {
padding: 48px 0 56px;
background: var(--ivory);
border-bottom: 1px solid var(--border);
}
.loved-by-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 36px 28px;
align-items: start;
}
.loved-by-item { text-align: left; }
.loved-by-name {
font-family: var(--serif);
font-size: 20px;
color: var(--text-primary);
letter-spacing: -0.01em;
font-weight: 500;
line-height: 1.15;
}
.loved-by-desc {
font-size: 12px;
color: var(--text-secondary);
margin-top: 6px;
letter-spacing: 0.02em;
}
@media (max-width: 960px) {
.loved-by-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
.loved-by-section { padding: 40px 0 44px; }
}
@media (max-width: 560px) {
.loved-by-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============ Blog article (long-form post body) ============ */
.blog-article {
max-width: 720px;
margin: 0 auto;
padding: 0 32px;
font-size: 18px;
line-height: 1.75;
color: var(--text-primary);
}
.blog-article > h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 38px);
line-height: 1.18;
letter-spacing: -0.015em;
margin: 56px 0 20px;
color: var(--text-primary);
}
.blog-article > h3 {
font-family: var(--sans);
font-weight: 600;
font-size: 20px;
line-height: 1.3;
margin: 36px 0 12px;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.blog-article > p {
margin: 0 0 20px;
color: var(--text-secondary);
}
.blog-article > p strong,
.blog-article > ol strong,
.blog-article > ul strong {
color: var(--text-primary);
font-weight: 600;
}
.blog-article > ul,
.blog-article > ol {
padding-left: 22px;
margin: 0 0 24px;
color: var(--text-secondary);
}
.blog-article > ol > li,
.blog-article > ul > li {
margin-bottom: 14px;
line-height: 1.65;
}
.blog-article a.blog-inline-link {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--gold);
font-weight: 500;
}
.blog-tldr {
border: 1px solid var(--border);
border-left: 3px solid var(--gold);
background: var(--gray-surface);
padding: 24px 28px;
margin: 40px 0 32px;
border-radius: 6px;
}
.blog-tldr .blog-tldr-label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
}
.blog-tldr ul {
margin: 0;
padding-left: 18px;
list-style: disc;
}
.blog-tldr li {
font-size: 16px;
color: var(--text-primary);
line-height: 1.55;
margin-bottom: 10px;
}
.blog-tldr li:last-child { margin-bottom: 0; }
.blog-pullquote {
margin: 44px 0;
padding: 0 0 0 24px;
border-left: 3px solid var(--gold);
font-family: var(--serif);
font-weight: 400;
font-style: italic;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.3;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.blog-cta-inline {
margin: 48px 0;
padding: 36px 40px;
background: var(--navy);
color: var(--ivory);
border-radius: 14px;
}
.blog-cta-inline strong {
display: block;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(24px, 2.6vw, 28px);
line-height: 1.2;
color: var(--ivory);
letter-spacing: -0.01em;
margin-bottom: 10px;
}
.blog-cta-inline p {
color: rgba(250,249,246,0.75);
margin: 0 0 22px;
font-size: 16px;
line-height: 1.55;
}
.blog-cta-inline .btn {
background: var(--ivory);
color: var(--navy);
padding: 14px 22px;
border-radius: 999px;
font-weight: 500;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.blog-data-table {
width: 100%;
border-collapse: collapse;
margin: 16px 0 14px;
font-size: 15px;
}
.blog-data-table th,
.blog-data-table td {
padding: 14px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.blog-data-table th {
font-weight: 600;
color: var(--text-primary);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--gray-surface);
}
.blog-data-table td { color: var(--text-secondary); }
.blog-data-table td:first-child { color: var(--text-primary); font-weight: 500; }
.blog-data-table tr:last-child td { border-bottom: none; }
.blog-table-note {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 32px;
line-height: 1.55;
}
.blog-breadcrumb-strip {
padding: 18px 0;
border-bottom: 1px solid var(--border);
background: var(--ivory);
font-size: 13px;
color: var(--text-secondary);
}
.blog-breadcrumb-strip a { color: var(--text-secondary); }
.blog-breadcrumb-strip a:hover { color: var(--text-primary); }
.blog-author {
display: flex;
gap: 16px;
align-items: flex-start;
margin: 56px 0 8px;
padding: 24px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.blog-author-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--navy);
color: white;
display: grid;
place-items: center;
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
flex-shrink: 0;
}
.blog-author-name {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.blog-author-role {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 6px;
}
.blog-author-bio {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.blog-related {
margin-top: 56px;
}
.blog-related-title {
font-family: var(--serif);
font-weight: 400;
font-size: 24px;
color: var(--text-primary);
letter-spacing: -0.015em;
margin-bottom: 20px;
}
.blog-related-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.blog-related-card {
display: block;
padding: 22px 22px 24px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--ivory);
transition: background 0.2s;
}
.blog-related-card:hover { background: var(--gray-surface); }
.blog-related-tag {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
margin-bottom: 10px;
}
.blog-related-headline {
font-family: var(--serif);
font-weight: 400;
font-size: 18px;
line-height: 1.25;
color: var(--text-primary);
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.blog-related-meta {
font-size: 12px;
color: var(--text-secondary);
}
.blog-final-cta {
background: var(--navy);
color: var(--ivory);
padding: 80px 0;
text-align: center;
}
.blog-final-cta .eyebrow,
.blog-final-cta .eyebrow-dot {
color: var(--gold);
}
.blog-final-cta h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(34px, 4.2vw, 48px);
line-height: 1.1;
color: var(--ivory);
letter-spacing: -0.015em;
margin: 14px 0 18px;
}
.blog-final-cta p {
color: rgba(250,249,246,0.75);
font-size: 18px;
line-height: 1.55;
max-width: 520px;
margin: 0 auto 32px;
}
.blog-final-cta-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.blog-final-cta .btn-primary-solid {
background: var(--ivory);
color: var(--navy);
padding: 15px 26px;
border-radius: 999px;
font-weight: 500;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.blog-final-cta .btn-ghost-inverse {
background: transparent;
color: var(--ivory);
border: 1px solid rgba(250,249,246,0.45);
padding: 15px 26px;
border-radius: 999px;
font-weight: 500;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.blog-final-cta .btn-ghost-inverse:hover { border-color: var(--ivory); }
@media (max-width: 720px) {
.blog-article { padding: 0 24px; font-size: 17px; }
.blog-article > h2 { margin: 44px 0 16px; }
.blog-cta-inline { padding: 28px 24px; }
.blog-data-table { font-size: 14px; }
.blog-data-table th, .blog-data-table td { padding: 10px 10px; }
.blog-related-grid { grid-template-columns: 1fr; }
.blog-final-cta { padding: 64px 0; }
}
/* ========================================
BLOG TEMPLATE V2 — D-HYBRID LAYOUT
Sticky TOC sidebar + hero, applied to all blog pages
First applied: /blog/healthcare-marketing-channels
Pass 2: retrofit existing 11 blogs to use these classes
======================================== */
/* Two-column layout: article + sticky sidebar */
.blog-body {
display: grid;
grid-template-columns: 1fr 280px;
gap: 48px;
max-width: 1200px;
margin: 0 auto;
padding: 32px 24px 80px;
}
.blog-content {
min-width: 0;
max-width: 760px;
}
.blog-sidebar {
position: sticky;
top: 80px;
align-self: start;
height: fit-content;
}
/* Hero block */
.blog-hero { margin-bottom: 32px; }
.blog-hero .breadcrumb {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 20px;
}
.blog-hero .breadcrumb a {
color: var(--text-secondary);
text-decoration: none;
}
.blog-hero .breadcrumb a:hover { color: var(--navy); }
.blog-hero .breadcrumb span { margin: 0 8px; }
.blog-hero .author-block {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
flex-wrap: wrap;
}
.blog-hero .author-block .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--navy);
color: var(--ivory);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
flex-shrink: 0;
}
.blog-hero .author-block .author-info {
display: flex;
flex-direction: column;
gap: 2px;
margin-right: auto;
}
.blog-hero .author-block .author-name {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.blog-hero .author-block .author-title {
font-size: 12px;
color: var(--text-secondary);
}
.blog-hero .author-block .meta-icons {
display: flex;
gap: 16px;
font-size: 12px;
color: var(--text-secondary);
}
/* Article body typography */
.blog-content h2 {
font-size: 22px;
font-weight: 500;
color: var(--navy);
line-height: 1.25;
letter-spacing: -0.01em;
margin: 40px 0 16px;
position: relative;
}
.blog-content h2::before {
content: "";
display: block;
width: 32px;
height: 2px;
background: var(--gold);
margin-bottom: 16px;
}
.blog-content h2 em {
font-style: italic;
color: var(--gold);
}
.blog-content h2[id] {
scroll-margin-top: 100px;
}
.blog-content p {
margin: 0 0 16px;
font-size: 17px;
line-height: 1.65;
color: var(--text-primary);
}
/* Inline prose links — gold, always underlined, scoped to and
so .related-card / .btn / .cta-button / .breadcrumb / .share-icon are excluded. */
.blog-content p a,
.blog-content li a {
color: var(--gold);
text-decoration: underline;
text-decoration-color: var(--gold);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.blog-content p a:hover,
.blog-content li a:hover {
color: #B8945F;
text-decoration-color: #B8945F;
}
.blog-content p a:focus-visible,
.blog-content li a:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: 2px;
}
/* Pull quote — overrides legacy inline styles when inside .blog-content */
.blog-content .pull-quote,
.blog-content blockquote.pull-quote {
margin: 24px 0;
padding: 18px 24px;
border-left: 3px solid var(--gold);
background: rgba(201, 169, 110, 0.06);
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 15px;
line-height: 1.5;
color: var(--navy);
border-radius: 0;
}
.blog-content .pull-quote::before,
.blog-content .pull-quote::after,
.blog-content blockquote.pull-quote::before,
.blog-content blockquote.pull-quote::after {
content: none;
}
.blog-content .pull-quote em {
font-family: inherit;
font-style: italic;
font-size: inherit;
color: inherit;
}
/* Featured table card — wraps the specialty recommendations table */
.blog-content .featured-table-card {
background: #fff;
border: 0.5px solid var(--border);
border-radius: 12px;
padding: 24px;
margin: 32px 0;
box-shadow: 0 1px 3px rgba(10, 22, 40, 0.04);
}
.blog-content .featured-table-card .comparison-table {
margin: 0;
}
.blog-content .featured-table-card .table-source {
margin-top: 16px;
padding-top: 12px;
border-top: 0.5px solid var(--border);
font-size: 11px;
font-style: italic;
color: var(--text-tertiary);
}
/* Featured conclusion card — relocated "honest answer" content */
.blog-content .featured-conclusion-card {
background: #fff;
border: 0.5px solid var(--border);
border-radius: 12px;
padding: 24px;
margin: 32px 0;
box-shadow: 0 1px 3px rgba(10, 22, 40, 0.04);
}
.blog-content .featured-conclusion-card h3 {
font-size: 18px;
font-weight: 500;
color: var(--navy);
margin: 0 0 14px;
letter-spacing: -0.01em;
}
.blog-content .featured-conclusion-card p {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.7;
color: var(--text-primary);
}
.blog-content .featured-conclusion-card .conclusion-emphasis {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 14px;
font-weight: 500;
color: var(--navy);
padding-top: 14px;
margin-top: 4px;
border-top: 0.5px solid var(--border);
}
.blog-content .featured-conclusion-card .conclusion-emphasis::before {
content: "★";
color: var(--gold);
font-size: 14px;
flex-shrink: 0;
line-height: 1.5;
}
/* Inline diagram breakouts (framework + outcome moved from old right column) */
.blog-content .framework-diagram,
.blog-content .outcome-diagram {
margin: 28px auto;
max-width: 560px;
}
/* TOC card (desktop sidebar) */
.toc-card {
background: #fff;
border: 0.5px solid var(--border);
border-radius: 10px;
padding: 18px;
margin-bottom: 14px;
}
.toc-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 0.5px solid var(--border);
}
.toc-title {
font-size: 11px;
font-weight: 500;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 1.2px;
}
.toc-share {
display: flex;
gap: 6px;
}
.share-icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
cursor: pointer;
background: var(--ivory);
border: 0.5px solid var(--border);
color: var(--text-secondary);
transition: all 0.15s ease;
text-decoration: none;
position: relative;
}
.share-icon:hover {
background: var(--gold);
color: var(--navy);
border-color: var(--gold);
}
.share-icon-tooltip {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--navy);
color: var(--ivory);
font-size: 10px;
font-weight: 500;
padding: 3px 8px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
z-index: 10;
}
.share-icon-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--navy);
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-item {
padding: 8px 0 8px 16px;
font-size: 14px;
line-height: 1.5;
cursor: pointer;
color: var(--text-secondary);
position: relative;
transition: color 0.15s ease;
}
.toc-item::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
opacity: 0.5;
transition: all 0.15s ease;
}
.toc-item:hover {
color: var(--navy);
}
.toc-item:hover::before {
opacity: 1;
}
.toc-item.active {
color: var(--navy);
font-weight: 600;
}
.toc-item.active::before {
opacity: 1;
width: 9px;
height: 9px;
top: 12px;
background: var(--gold);
box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
}
.toc-item:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: 2px;
}
/* Sidebar CTA card */
.sidebar-cta {
background: var(--navy);
color: var(--ivory);
border-radius: 10px;
padding: 18px;
position: relative;
}
.sidebar-cta .cta-eyebrow {
font-size: 9px;
font-weight: 500;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 6px;
}
.sidebar-cta .cta-title {
font-size: 14px;
font-weight: 500;
margin: 0 0 10px;
line-height: 1.3;
color: var(--ivory);
}
.sidebar-cta .cta-list {
list-style: none;
padding: 0;
margin: 0 0 14px;
}
.sidebar-cta .cta-list li {
padding: 4px 0 4px 18px;
position: relative;
font-size: 11px;
line-height: 1.45;
color: var(--ivory);
opacity: 0.85;
}
.sidebar-cta .cta-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 3px;
color: var(--gold);
font-size: 10px;
font-weight: 600;
}
.sidebar-cta .cta-button {
display: block;
width: 100%;
padding: 9px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
text-align: center;
cursor: pointer;
border: none;
background: var(--gold);
color: var(--navy);
text-decoration: none;
transition: background 0.15s ease;
box-sizing: border-box;
}
.sidebar-cta .cta-button:hover {
background: var(--gold-soft);
}
.sidebar-cta .cta-subnote {
font-size: 9px;
color: var(--ivory);
opacity: 0.55;
text-align: center;
margin-top: 8px;
font-style: italic;
}
/* Mobile collapsible TOC (visible only at <900px) */
.toc-mobile {
display: none;
margin: 16px 0 24px;
}
.toc-mobile-toggle {
width: 100%;
background: var(--ivory);
border: 0.5px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
font-size: 13px;
font-weight: 500;
color: var(--navy);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-family: inherit;
}
.toc-mobile-toggle.open .toc-mobile-chevron {
transform: rotate(180deg);
}
.toc-mobile-chevron {
transition: transform 0.2s ease;
font-size: 10px;
color: var(--gold);
}
.toc-mobile-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.toc-mobile-panel.open {
max-height: 600px;
padding-top: 8px;
}
.toc-list-mobile {
list-style: none;
padding: 0;
margin: 0;
background: #fff;
border: 0.5px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.toc-list-mobile li {
padding: 12px 16px;
border-bottom: 0.5px solid var(--border);
font-size: 14px;
color: var(--text-secondary);
cursor: pointer;
}
.toc-list-mobile li:last-child {
border-bottom: none;
}
.toc-list-mobile li:hover {
background: var(--ivory);
color: var(--navy);
}
/* Mobile breakpoint — sidebar hides, mobile TOC shows, single column */
@media (max-width: 900px) {
.blog-body {
grid-template-columns: 1fr;
gap: 0;
padding: 24px 16px 64px;
}
.blog-sidebar {
display: none;
}
.blog-content {
max-width: 100%;
}
.toc-mobile {
display: block;
}
}
/* ===================================================================
Promoted from embedded blocks - Phase 1 de-drift consolidation
===================================================================
16 non-conflicting blog tokens promoted to shared :root + 142
byte-identical component rules + 2 drift selectors resolved to
canon (.post-title font-size = clamp(28px,4vw,44px); .related-grid
= 1fr 1fr) + 1 new .related-grid--3col modifier (V5 healthcare
opts in via class on the markup).
Source: V1-V6 embedded