/* ═══════════════════════════════════════════════════════════════
v74: NEW TYPE SYSTEM — Direction 05 (Manrope + Source Serif 4)
Imported from /relay.css. Below, the new --relay-* tokens are
re-aliased to the site's existing brand palette (gold/forest/cream)
so the new type system uses Relay's colors instead of the
default burnt-orange + black-ink defaults.
Then existing site classes (.eyebrow, .hero-headline, .display,
body copy classes, etc) are aliased to the new .t-* utilities,
so the whole site picks up Manrope display + Source Serif 4 body
automatically — no per-page rewrites required.
═══════════════════════════════════════════════════════════════ */
/* =================================================================
* Relay · Brand & Type System
* Direction 05 — Bookish (Manrope + Source Serif 4)
*
* Drop this stylesheet anywhere in your site. It defines:
* 1. CSS custom properties for color, type, spacing, radii
* 2. Base resets for html/body
* 3. Utility classes for every text role (.t-display, .t-h1, etc.)
* 4. The wordmark lockup (.relay-wordmark)
*
* Requires the Google Fonts from the README — make sure
* Manrope and Source Serif 4 are loaded before this stylesheet runs.
* ================================================================= */
/* -----------------------------------------------------------------
* 1. Tokens
* ----------------------------------------------------------------- */
:root {
/* ---- Color ---- */
--relay-ink: #18181b; /* primary text */
--relay-ink-2: #2c2b2e; /* secondary text / body copy */
--relay-paper: #f4f1ea; /* warm cream surface */
--relay-paper-2: #ebe7dd; /* secondary surface / hover */
--relay-rule: #d9d4c7; /* hairline borders */
--relay-rule-2: #c8c2b2; /* darker hairline */
--relay-muted: #6b6a64; /* low-emphasis text */
--relay-muted-2: #8d8a82; /* lowest-emphasis text */
--relay-accent: #c2410c; /* burnt orange — links + eyebrows */
--relay-accent-2: #f59e6b; /* accent on dark surfaces */
--relay-success: #1f7a4d;
--relay-warning: #b45309;
--relay-danger: #b91c1c;
/* ---- Typography ---- */
--relay-font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
--relay-font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
--relay-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
/* Weight axis */
--relay-wt-regular: 400;
--relay-wt-medium: 500;
--relay-wt-semibold: 600;
--relay-wt-bold: 700;
--relay-wt-display: 750; /* variable axis — between Bold and ExtraBold */
--relay-wt-extra: 800;
/* Type scale (px) */
--relay-fs-display: 96px;
--relay-fs-h1: 56px;
--relay-fs-h2: 36px;
--relay-fs-h3: 24px;
--relay-fs-h4: 18px;
--relay-fs-lede: 22px;
--relay-fs-body-l: 18px;
--relay-fs-body: 16px;
--relay-fs-body-s: 14px;
--relay-fs-caption: 13px;
--relay-fs-label: 13px;
--relay-fs-button: 14px;
--relay-fs-micro: 11px;
--relay-fs-overline: 11px;
--relay-fs-eyebrow: 12px;
--relay-fs-quote: 28px;
--relay-fs-numeric: 40px;
/* ---- Spacing scale (4px base) ---- */
--relay-s-1: 4px;
--relay-s-2: 8px;
--relay-s-3: 12px;
--relay-s-4: 16px;
--relay-s-5: 24px;
--relay-s-6: 32px;
--relay-s-7: 48px;
--relay-s-8: 64px;
--relay-s-9: 96px;
/* ---- Radii ---- */
--relay-radius-sm: 3px;
--relay-radius: 4px;
--relay-radius-lg: 8px;
--relay-radius-pill: 999px;
/* ---- Wordmark ---- */
--relay-wordmark-tracking: 0.20em;
--relay-wordmark-weight: 750;
}
/* Dark-surface overrides — apply by setting .relay-dark on a container */
.relay-dark {
--relay-ink: #f3efe7;
--relay-ink-2: #cfcab8;
--relay-paper: #0e0e10;
--relay-paper-2: #1a1a1c;
--relay-rule: #2a2a2c;
--relay-rule-2: #3a3a3c;
--relay-muted: #8d8a82;
--relay-muted-2: #6b6a64;
--relay-accent: var(--relay-accent-2);
}
/* -----------------------------------------------------------------
* 2. Base
* ----------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--relay-font-serif); /* default reading face */
font-weight: var(--relay-wt-regular);
font-size: var(--relay-fs-body);
line-height: 1.62;
color: var(--relay-ink-2);
background: var(--relay-paper);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
font-optical-sizing: auto;
}
/* All headings default to Manrope */
h1, h2, h3, h4, h5, h6 {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-bold);
color: var(--relay-ink);
margin: 0;
text-wrap: balance;
}
a {
color: var(--relay-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: var(--relay-wt-bold); }
em { font-style: italic; }
/* -----------------------------------------------------------------
* 3. Type utility classes
* ----------------------------------------------------------------- */
/* ---- A. Display (Manrope) ---- */
.t-eyebrow {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-bold);
font-size: var(--relay-fs-eyebrow);
line-height: 1;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--relay-accent);
}
.t-display {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-display);
font-size: var(--relay-fs-display);
line-height: 1.0;
letter-spacing: -0.03em;
color: var(--relay-ink);
text-wrap: balance;
}
.t-h1 {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-display);
font-size: var(--relay-fs-h1);
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--relay-ink);
text-wrap: balance;
}
.t-h2 {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-bold);
font-size: var(--relay-fs-h2);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--relay-ink);
text-wrap: balance;
}
.t-h3 {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-bold);
font-size: var(--relay-fs-h3);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--relay-ink);
}
.t-h4 {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-bold);
font-size: var(--relay-fs-h4);
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--relay-ink);
}
/* ---- B. Reading (Source Serif 4) ---- */
.t-lede {
font-family: var(--relay-font-serif);
font-weight: var(--relay-wt-regular);
font-size: var(--relay-fs-lede);
line-height: 1.45;
letter-spacing: -0.005em;
color: var(--relay-ink-2);
max-width: 50ch;
text-wrap: pretty;
font-optical-sizing: auto;
}
.t-body-l {
font-family: var(--relay-font-serif);
font-weight: var(--relay-wt-regular);
font-size: var(--relay-fs-body-l);
line-height: 1.6;
color: var(--relay-ink-2);
max-width: 60ch;
text-wrap: pretty;
font-optical-sizing: auto;
}
.t-body {
font-family: var(--relay-font-serif);
font-weight: var(--relay-wt-regular);
font-size: var(--relay-fs-body);
line-height: 1.62;
color: var(--relay-ink-2);
max-width: 62ch;
text-wrap: pretty;
font-optical-sizing: auto;
}
.t-body-s {
font-family: var(--relay-font-serif);
font-weight: var(--relay-wt-regular);
font-size: var(--relay-fs-body-s);
line-height: 1.6;
color: var(--relay-ink-2);
max-width: 60ch;
font-optical-sizing: auto;
}
.t-caption {
font-family: var(--relay-font-serif);
font-weight: var(--relay-wt-regular);
font-style: italic;
font-size: var(--relay-fs-caption);
line-height: 1.55;
color: var(--relay-muted);
font-optical-sizing: auto;
}
.t-quote {
font-family: var(--relay-font-serif);
font-weight: var(--relay-wt-regular);
font-style: italic;
font-size: var(--relay-fs-quote);
line-height: 1.32;
letter-spacing: -0.01em;
color: var(--relay-ink);
max-width: 32ch;
text-wrap: balance;
font-optical-sizing: auto;
}
.t-quote::before { content: "\201C"; }
.t-quote::after { content: "\201D"; }
/* ---- C. UI & functional (Manrope) ---- */
.t-overline {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-bold);
font-size: var(--relay-fs-overline);
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--relay-muted);
}
.t-label {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-semibold);
font-size: var(--relay-fs-label);
line-height: 1.2;
letter-spacing: 0.01em;
color: var(--relay-ink);
}
.t-button {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-semibold);
font-size: var(--relay-fs-button);
line-height: 1;
letter-spacing: 0.02em;
color: #fff;
background: var(--relay-ink);
display: inline-block;
padding: 12px 20px;
border-radius: var(--relay-radius-sm);
border: 1px solid var(--relay-ink);
text-decoration: none;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.t-button:hover { background: transparent; color: var(--relay-ink); }
.t-button--ghost {
background: transparent;
color: var(--relay-ink);
border-color: var(--relay-rule-2);
}
.t-button--ghost:hover { background: var(--relay-ink); color: #fff; border-color: var(--relay-ink); }
.t-link {
font-family: var(--relay-font-serif);
font-weight: var(--relay-wt-medium);
color: var(--relay-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
font-optical-sizing: auto;
}
.t-micro {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-semibold);
font-size: var(--relay-fs-micro);
line-height: 1.4;
letter-spacing: 0.04em;
color: var(--relay-muted);
}
.t-numeric {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wt-bold);
font-size: var(--relay-fs-numeric);
line-height: 1;
letter-spacing: -0.02em;
color: var(--relay-ink);
font-variant-numeric: tabular-nums;
}
/* -----------------------------------------------------------------
* 4. Wordmark
* ----------------------------------------------------------------- */
.relay-wordmark {
font-family: var(--relay-font-sans);
font-weight: var(--relay-wordmark-weight);
letter-spacing: var(--relay-wordmark-tracking);
/* trailing tracking would leave hanging whitespace — pull back: */
margin-right: calc(var(--relay-wordmark-tracking) * -1);
line-height: 1;
color: var(--relay-ink);
display: inline-block;
user-select: text;
text-transform: uppercase;
}
.relay-wordmark--sm { font-size: 16px; }
.relay-wordmark--md { font-size: 24px; }
.relay-wordmark--lg { font-size: 48px; }
.relay-wordmark--xl { font-size: 96px; }
/* -----------------------------------------------------------------
* 5. Responsive (tighten display sizes on small screens)
* ----------------------------------------------------------------- */
@media (max-width: 720px) {
:root {
--relay-fs-display: 56px;
--relay-fs-h1: 40px;
--relay-fs-h2: 28px;
--relay-fs-h3: 20px;
--relay-fs-lede: 19px;
--relay-fs-body-l: 17px;
--relay-fs-quote: 22px;
--relay-fs-numeric: 32px;
}
}
/* v74: re-alias new-system tokens to existing Relay brand palette */
:root {
--relay-ink: #1A1A1A;
--relay-ink-2: #2C4738; /* Relay forest, used for body */
--relay-paper: #F2EDE4; /* Relay cream */
--relay-paper-2: #FAF8F4; /* Relay surface */
--relay-rule: rgba(45,74,62,.12);
--relay-rule-2: rgba(45,74,62,.2);
--relay-muted: rgba(45,74,62,.7);
--relay-muted-2: rgba(45,74,62,.55);
--relay-accent: #C9A85C; /* Relay gold for accents */
--relay-accent-2: #D8BB75; /* lighter gold on dark surfaces */
}
.relay-dark, .h-card--after, .relay-hero, .engagement-section, .rv-section,
.manifesto, .adopt, .audience-hero.dark {
--relay-ink: #F2EDE4;
--relay-ink-2: #F2EDE4;
--relay-paper: #2C4738;
--relay-paper-2: #335542;
--relay-rule: rgba(242,237,228,.16);
--relay-rule-2: rgba(242,237,228,.28);
--relay-muted: rgba(242,237,228,.78);
--relay-muted-2: rgba(242,237,228,.6);
--relay-accent: #C9A85C;
}
/* v74: MAP existing site classes → new type roles
These overrides apply Manrope + Source Serif 4 to the existing
class names, so the type system flips sitewide automatically. */
/* Display + headline roles (Manrope) */
/* v75: .relay-hero__label removed — hero text stays on DM Sans
because the SVG curve geometry was calibrated for DM Sans metrics. */
.h-hero-title, .hero-headline,
.h-compare-headline, .h-bridge-headline,
.aud-panel-head,
.insights-hero-title, .insights-list-title, .insights-post-title,
.h-card-headline, .step-headline, .eng-headline, .tf-headline,
.adopt-headline, .manifesto-headline, .cf-headline,
.rv-mission-text, .rv-card-title,
.founder-name, .rly-title,
.display, .runner-name,
#page-approach .hero-headline {
font-family: var(--relay-font-sans) !important;
font-weight: var(--relay-wt-display);
letter-spacing: -.02em;
text-wrap: balance;
}
/* Smaller subhead/intermediate (Manrope bold) */
.insights-post-body h2, .insights-nav-title {
font-family: var(--relay-font-sans) !important;
font-weight: var(--relay-wt-bold);
letter-spacing: -.015em;
}
/* Body copy (Source Serif 4) */
.h-bridge-body p, .h-bridge-body, .h-compare-lede,
.aud-panel-body, .aud-cta-body, .aud-pain-text,
.h-card-bullets li,
.step-body, .eng-body, .tf-body,
.process-intro p, .engagement-header p,
.insights-list-excerpt, .insights-post-dek, .insights-post-body,
.hero-sub, .hero-sub-text, .approach-hero-sub, .insights-hero-sub,
.rv-card-body,
.footer-tagline, .footer-link,
.contact-form-note,
.runner-sub, .founder-body,
.aud-panel-bottom p, .aud-pain-num + .aud-pain-text {
font-family: var(--relay-font-serif) !important;
font-weight: var(--relay-wt-regular);
text-wrap: pretty;
font-optical-sizing: auto;
}
/* Eyebrows / overlines / mono labels — Manrope, accent gold,
replaces Courier mono for a more modern UI feel. */
.eyebrow, .hero-eyebrow,
.h-mono-label, .h-card-label,
.aud-tag, .baton-zone-label, .founder-mono,
.footer-col-head, .footer-bottom-left, .footer-bottom-right,
.contact-detail-label, .contact-form-label, .cf-label-tag,
.cred-label,
.insights-hero-eyebrow, .insights-list-meta, .insights-post-meta,
.insights-back, .insights-list-readmore, .insights-nav-label,
.rv-eyebrow, .rv-mission-label, .rv-divider-label, .rv-card-num, .rv-strip-cta,
.assess-bar-label, .compare-label, .aud-pain-num,
.eng-tag,
#page-approach .hero-eyebrow,
#page-approach .step-deliv-label,
#page-approach .eng-tag,
#page-approach .tf-eyebrow {
font-family: var(--relay-font-sans) !important;
font-weight: var(--relay-wt-bold);
letter-spacing: .22em;
text-transform: uppercase;
}
/* Buttons (Manrope) */
.btn-primary, .btn-ghost, .btn-secondary, .nav-cta,
.aud-sw-btn, .contact-submit,
.btn-cta-dark, .btn-cta-outline, .assess-close, .btn-assess {
font-family: var(--relay-font-sans) !important;
font-weight: var(--relay-wt-semibold);
letter-spacing: .02em;
}
/* Nav links (Manrope) */
.nav-link, .mobile-nav .nav-link {
font-family: var(--relay-font-sans) !important;
font-weight: var(--relay-wt-semibold);
letter-spacing: .02em;
}
/* Blockquotes inside posts (Source Serif italic) */
.insights-post-body blockquote {
font-family: var(--relay-font-serif) !important;
font-style: italic;
font-weight: var(--relay-wt-regular);
letter-spacing: -.005em;
font-optical-sizing: auto;
}
/* Form inputs (Source Serif) */
.contact-input, .contact-textarea, .contact-select,
.contact-form input, .contact-form select, .contact-form textarea {
font-family: var(--relay-font-serif) !important;
font-optical-sizing: auto;
}
:root {
--rc: #C9A85C; /* Burnished Gold — primary (warmer gold/bronze) */
--rs: #2C4738; /* Forest — secondary accent for type (was #2D4A3E) */
--ri: #2C4738; /* Warm Ink — dark bg / body text (was #2D4A3E) */
--cream: #F2EDE4; /* Aged Cream — page background */
--surface: #FAF8F4; /* Chalk Line — card/surface */
--track: #7A7568; /* muted mid-tone on dark */
--serif: 'Inter Tight', system-ui, -apple-system, sans-serif; /* v70 Dir A: heavier sans for headlines */
--cond: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
--mono: 'Courier New', monospace;
}
/* v70 Dir A: when --serif is Inter Tight, use 700 by default for headlines.
Italic ems use 900 italic for the "em" emphasis (was Playfair italic). */
[class*="headline"], [class*="hero-headline"], .h-bridge-headline, .h-compare-headline,
.insights-post-title, .insights-list-title, .insights-hero-title, .aud-panel-head,
.process-headline, .display, .rly-title, .manifesto-headline, .runner-name,
.h-card-headline, .step-headline, .rv-mission-text, .rv-card-title, .adopt-headline,
.cf-headline, .tf-headline, .eng-headline, .phase-right-name, .founder-name {
/* v71: removed bold weight + tight letter-spacing override — let each rule pick its own weight */
letter-spacing: -.005em;
}
[class*="headline"] em, .display em, .h-bridge-headline em, .h-compare-headline em,
.insights-post-title em, .insights-list-title em, .insights-hero-title em,
.aud-panel-head em, .rv-mission-text em, .rv-card-title em, .h-card-headline em,
.tf-headline em, .adopt-headline em, .manifesto-headline em, .step-headline em {
/* v72: no italic, no color emphasis on header ems — headers read as one solid color */
font-style: normal;
color: inherit;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--cond);background:var(--cream);color:var(--ri)}
.page{display:none;visibility:hidden}
.page.active{display:block;visibility:visible}
/* NAV */
nav{position:sticky;top:0;z-index:100;background:var(--surface);padding:0 64px;display:flex;align-items:center;justify-content:space-between;height:62px}
.nav-brand{display:flex;align-items:center;gap:0;cursor:pointer}
.nav-logo{font-family:var(--serif);font-size:22px;color:#000;letter-spacing:.12em;line-height:1}
.nav-sub{font-family:var(--mono);font-size:10px;color:rgba(45,74,62,.85);letter-spacing:.25em;text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;gap:0;align-items:center}
.nav-link{font-family:var(--cond);font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rs);padding:8px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:all .18s}
.nav-link:hover{color:var(--ri)}
.nav-link.active{color:var(--rc);border-bottom-color:var(--rc)}
/* UTILITIES */
.gold-rule{width:48px;height:2px;background:var(--rc);margin:12px 0}
.gold-rule.center{margin:12px auto}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#000;font-weight:700}
.display{font-family:var(--serif);font-weight:400;color:#000;line-height:1.15}
.display em{color:#000;font-style:italic}
/* ═══════════════════════════════════════
HOME PAGE
═══════════════════════════════════════ */
.hero{background:var(--cream);padding:100px 64px 80px;position:relative;overflow:hidden}
.hero::before{content:none}
.hero-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:#000;font-weight:700;margin-bottom:20px}
.hero-headline{font-family:var(--serif);font-size:66px;font-weight:400;color:#000;line-height:1.06;max-width:none;letter-spacing:.02em}
.hero-headline em{color:#000;font-style:normal}
.hero-actions{display:flex;gap:12px;margin-top:40px;align-items:center}
.hero-stats{display:flex;gap:56px;margin-top:56px;padding-top:32px;border-top:1px solid rgba(196,185,154,.12)}
.hero-stat span{color:#000;display:block;font-size:26px;font-family:var(--serif);font-weight:700;letter-spacing:0;margin-bottom:4px;line-height:1}
.hero-stat-label{font-family:var(--mono);font-size:16px;color:#000;letter-spacing:.15em;text-transform:uppercase}
/* PROBLEM STRIP */
.problem-strip{background:var(--rs);padding:32px 64px;display:flex;align-items:center;gap:40px}
.problem-strip-quote{font-family:var(--serif);font-size:26px;color:var(--cream);flex:1.2;line-height:1.3;font-weight:400}
.problem-strip-quote em{font-style:italic;opacity:.75}
.problem-strip-rule{width:1px;height:44px;background:rgba(255,255,255,.2);flex-shrink:0}
.problem-strip-sub{font-family:var(--cond);font-size:21px;color:var(--cream);letter-spacing:.06em;line-height:1.7;flex:1}
/* SECTION WRAPPERS */
.section-wrap{padding:80px 64px}
.section-wrap.tan{background:var(--cream)}
.section-wrap.dark{background:var(--rs)}
/* FAILURE GRID */
.failure-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(26,20,16,.12);margin-top:12px}
.failure-item{background:var(--surface);padding:32px 36px}
.failure-item.full{grid-column:1/-1}
.failure-num{font-family:var(--mono);font-size:12px;color:var(--rs);letter-spacing:.15em;margin-bottom:12px}
.failure-title{font-family:var(--cond);font-size:20px;font-weight:600;color:#000;margin-bottom:10px;letter-spacing:.03em}
.failure-body{font-family:var(--cond);font-size:21px;color:var(--ri);line-height:1.75}
/* ADOPT STRIP */
.adopt-strip{background:var(--rs);padding:72px 64px}
.adopt-header{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:52px}
.adopt-headline{font-family:var(--serif);font-size:42px;color:var(--cream);line-height:1.2}
.adopt-headline em{color:inherit;font-style:normal}
.adopt-sub{font-family:var(--cond);font-size:22px;color:var(--cream);line-height:1.75;max-width:380px;padding-top:8px}
.adopt-phases{border-top:1px solid rgba(255,255,255,.12)}
.adopt-phase{border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer;transition:background .2s;overflow:hidden}
.adopt-phase:last-child{border-bottom:none}
.adopt-phase:hover{background:rgba(255,255,255,.04)}
.phase-num{font-family:var(--mono);font-size:12px;color:var(--cream);letter-spacing:.15em;margin-bottom:14px}
.phase-letter{font-family:var(--serif);font-size:44px;color:var(--rc);line-height:1;margin-bottom:12px}
.phase-name{font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);margin-bottom:10px}
.phase-desc{font-family:var(--cond);font-size:19px;color:var(--cream);line-height:1.7}
.phase-bar{display:none}
.adopt-phase-header{display:flex;align-items:center;gap:24px;padding:28px 28px;user-select:none}
.adopt-phase-header:hover{background:rgba(255,255,255,.04)}
.adopt-phase.open .adopt-phase-header{background:rgba(255,255,255,.06)}
.adopt-phase-chevron{margin-left:auto;font-size:18px;color:var(--rc);transition:transform .3s;line-height:1}
.adopt-phase.open .adopt-phase-chevron{transform:rotate(180deg)}
.adopt-phase-body{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 28px}
.adopt-phase.open .adopt-phase-body{max-height:300px;padding:0 28px 32px}
.adopt-phase-detail{font-family:var(--cond);font-size:19px;color:var(--cream);line-height:1.75;max-width:680px}
.adopt-phase:hover .phase-bar{width:100%}
/* HANDOFF */
.handoff{padding:80px 64px;background:var(--cream);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.handoff-visual{position:relative;height:340px;border:1px solid rgba(45,74,62,.15)}
.baton-track{width:100%;height:1px;background:var(--rc);position:absolute;top:50%;transform:translateY(-50%);opacity:.2}
.baton-zone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(26,20,16,.6);border:1px solid rgba(196,147,63,.35);padding:20px 28px;text-align:center;white-space:nowrap}
.baton-zone-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rc);font-weight:700;margin-bottom:6px}
.baton-zone-text{font-family:var(--serif);font-size:16px;color:var(--cream);line-height:1.3}
.runner{position:absolute;top:50%;transform:translateY(-50%);text-align:center}
.runner-left{left:10%}
.runner-right{right:10%}
.runner-dot{width:40px;height:40px;border-radius:50%;background:rgba(45,74,62,.08);border:1px solid rgba(45,74,62,.25);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--track);margin:0 auto 10px;letter-spacing:.05em}
.runner-name{font-family:var(--cond);font-size:12px;color:var(--rs);letter-spacing:.1em;text-transform:uppercase}
.runner-sub{font-family:var(--mono);font-size:15px;color:var(--ri);opacity:.85;letter-spacing:.08em;margin-top:4px}
.handoff-quote{font-family:var(--serif);font-style:italic;font-weight:700;font-size:18px;color:var(--rc);margin:20px 0 16px;line-height:1.45}
.handoff-body{font-family:var(--cond);font-size:21px;color:var(--ri);line-height:1.85}
/* AUDIENCE CARDS */
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(26,20,16,.1)}
.aud-card{padding:44px 40px;border-right:1px solid rgba(26,20,16,.1);cursor:pointer;transition:background .2s}
.aud-card:last-child{border-right:none}
.aud-card:hover{background:#E9E4D9}
.aud-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rc);font-weight:700;margin-bottom:16px}
.aud-headline{font-family:var(--serif);font-size:22px;color:#000;line-height:1.25;margin-bottom:18px}
.aud-headline em{color:var(--rs);font-style:normal}
.aud-body{font-family:var(--cond);font-size:21px;color:var(--ri);line-height:1.8;margin-bottom:28px}
.aud-link{font-family:var(--cond);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--rs);display:inline-flex;align-items:center;gap:8px}
.aud-arrow{transition:transform .2s;display:inline-block}
.aud-card:hover .aud-arrow{transform:translateX(4px)}
/* CREDIBILITY BAR */
.cred-bar{background:var(--rs);padding:40px 64px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.cred-item{text-align:center;padding:0 24px;border-right:1px solid rgba(26,20,16,.15)}
.cred-item:last-child{border-right:none}
.cred-num{font-family:var(--serif);font-size:40px;color:var(--cream);line-height:1}
.cred-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);margin-top:6px}
/* ═══════════════════════════════════════
APPROACH PAGE
═══════════════════════════════════════ */
.approach-hero-wrap{background:var(--cream);padding:88px 64px 80px}
.compare-row{display:grid;grid-template-columns:200px 1fr 1fr;gap:0;padding:14px 16px;border-bottom:1px solid rgba(26,20,16,.1)}
.compare-row.header{background:var(--rs);padding:14px 16px}
.compare-row.header > div{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--rc);font-weight:700}
.compare-label{font-family:var(--cond);font-size:14px;font-weight:600;color:var(--ri)}
.compare-bad{font-family:var(--cond);font-size:20px;color:var(--ri);line-height:1.5}
.compare-good{font-family:var(--cond);font-size:20px;color:var(--rs);font-weight:600;line-height:1.5}
.phase-block{border-bottom:1px solid rgba(45,74,62,.12);cursor:pointer;overflow:hidden;list-style:none}
.phase-block-header{display:flex;align-items:center;gap:28px;padding:32px 0;user-select:none}
.phase-block-header:hover .phase-big-letter{opacity:.75}
.phase-block.pb-open .phase-block-header .pb-chevron{transform:rotate(180deg)}
.pb-chevron{margin-left:auto;font-size:22px;color:var(--rc);transition:transform .3s;font-weight:700;line-height:1;flex-shrink:0;padding-left:16px}
.phase-block-body{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;padding-left:108px}
.phase-block.pb-open .phase-block-body{max-height:400px;padding:0 0 36px 108px}
.phase-block:last-child{border-bottom:none}
.phase-big-letter{font-family:var(--serif);font-size:80px;color:var(--rc);line-height:1;text-align:center}
.phase-big-num{font-family:var(--mono);font-size:12px;font-weight:700;color:rgba(45,74,62,.85);letter-spacing:.2em;text-transform:uppercase;margin-top:6px;text-align:center}
.phase-right-name{font-family:var(--cond);font-size:30px;font-weight:600;letter-spacing:.08em;color:#000;margin-bottom:4px}
.phase-right-sub{font-family:var(--serif);font-style:italic;font-weight:700;font-size:17px;color:var(--rc);margin-bottom:18px}
.phase-right-body{font-family:var(--cond);font-size:21px;color:var(--ri);line-height:1.85;max-width:640px}
.phase-right-callout{margin-top:20px;border-left:3px solid var(--rc);padding:14px 18px;background:rgba(196,147,63,.06)}
.phase-right-callout p{font-family:var(--cond);font-size:20px;color:var(--ri);line-height:1.7;font-weight:500}
/* ═══════════════════════════════════════
AUDIENCE PAGE
═══════════════════════════════════════ */
.audience-hero{background:var(--cream);padding:88px 64px}
.aud-switcher{display:flex;gap:12px;margin-top:96px;flex-wrap:wrap} /* v73: even more breathing */
/* ═══════════════════════════════════════
ABOUT PAGE
═══════════════════════════════════════ */
.about-hero{background:var(--cream);padding:88px 64px}
.founders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid rgba(26,20,16,.1)}
.founder-card{padding:0;border-right:1px solid rgba(26,20,16,.1);background:var(--surface);display:flex;flex-direction:column}
.founder-card:last-child{border-right:none}
.founder-mono{font-family:var(--mono);font-size:11px;letter-spacing:.2em;font-weight:700;text-transform:uppercase;color:var(--rc);margin-bottom:16px}
.founder-photo{width:230px;height:230px;border-radius:50%;object-fit:cover;object-position:center top;display:block;margin:40px auto 0;border:3px solid rgba(196,147,63,.25);}.founder-card-body{padding:36px 40px;flex:1;display:flex;flex-direction:column}.founder-name{font-family:var(--serif);font-size:26px;color:#000;margin-bottom:6px}
.founder-role{font-family:var(--cond);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ri);margin-bottom:20px}
.founder-body{font-family:var(--cond);font-size:21px;color:var(--ri);line-height:1.85}
.founder-tag{font-family:var(--cond);font-size:12px;font-weight:600;color:var(--rs);margin-top:18px;letter-spacing:.06em}
.manifesto{padding:88px 64px;background:var(--rs);text-align:center}
.manifesto-headline{font-family:var(--serif);font-size:44px;color:var(--cream);max-width:720px;margin:0 auto;line-height:1.2}
.manifesto-headline em{color:inherit;font-style:normal}
.manifesto-body{font-family:var(--cond);font-size:22px;color:var(--cream);line-height:1.85;max-width:580px;margin:24px auto 0}
.category-frame{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(26,20,16,.1);margin-top:40px}
.cf-item{background:var(--surface);padding:32px 36px}
.cf-item.this{background:var(--surface)}
.cf-label-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.cf-label-tag.not{color:var(--ri)}
.cf-label-tag.yes{color:var(--rc);font-weight:700}
.cf-text{font-family:var(--cond);font-size:22px;font-weight:500;color:#000}
.cf-text.light{color:#000}
.cf-sub{font-family:var(--cond);font-size:19px;color:var(--ri);margin-top:10px;line-height:1.65}
.cf-sub.light{color:var(--rs)}
/* ═══════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════ */
.contact-wrap{display:block;min-height:calc(100vh - 62px)}
.contact-detail{margin-top:52px;display:flex;flex-direction:column;gap:0}
.contact-detail-item{display:flex;gap:20px;align-items:flex-start;padding:18px 0;border-bottom:1px solid rgba(196,185,154,.1)}
.contact-detail-item:first-child{border-top:1px solid rgba(196,185,154,.1)}
.contact-detail-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--rc);font-weight:700;min-width:72px;padding-top:2px}
.contact-detail-value{font-family:var(--cond);font-size:18px;color:var(--rs);line-height:1.65}
.contact-sign-off{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--ri);opacity:.65;margin-top:44px;line-height:1.5;border-left:3px solid rgba(196,147,63,.5);padding-left:16px}
.contact-right{background:var(--surface);padding:72px 64px;width:100%;box-sizing:border-box}
.contact-form-label{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ri);display:block;margin-bottom:10px;margin-top:28px}
.contact-form-label:first-of-type{margin-top:0}
.contact-input{width:100%;background:#FFFFFF;border:1px solid rgba(26,20,16,.15);border-radius:0;font-family:var(--cond);font-size:17px;color:var(--ri);padding:14px 16px;outline:none;transition:border-color .18s;-webkit-appearance:none}
.contact-input:focus{border-color:var(--rc)}
.contact-textarea{width:100%;background:#FFFFFF;border:1px solid rgba(26,20,16,.15);font-family:var(--cond);font-size:17px;color:var(--ri);padding:14px 16px;outline:none;transition:border-color .18s;height:140px;resize:vertical;line-height:1.5}
.contact-textarea:focus{border-color:var(--rc)}
.contact-select{width:100%;background:#FFFFFF;border:1px solid rgba(26,20,16,.15);font-family:var(--cond);font-size:17px;color:var(--ri);padding:14px 16px;outline:none;-webkit-appearance:none;cursor:pointer}
.contact-form-note{font-family:var(--mono);font-size:16px;color:var(--ri);opacity:.85;letter-spacing:.1em;text-transform:uppercase;margin-top:16px;text-align:center}
/* ═══════════════════════════════════════
FOOTER
═══════════════════════════════════════ */
footer{background:var(--surface);padding:56px 64px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;border-top:1px solid rgba(45,74,62,.2)}
.footer-brand{text-align:center}
.footer-brand svg{height:28px}
.footer-brand-sub{font-family:var(--mono);font-size:10px;color:var(--ri);letter-spacing:.2em;text-transform:uppercase;margin-top:5px}
.footer-tagline{font-family:var(--cond);font-size:20px;color:var(--rs);line-height:1.7;margin-top:14px}
.footer-brand-cta{margin-top:22px}
.footer-domain{display:block;width:fit-content;margin:16px auto 0;background:rgba(196,147,63,.12);color:var(--rc);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 14px}
.footer-col-head{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rc);font-weight:700;margin-bottom:16px}
.footer-link{font-family:var(--cond);font-size:20px;color:var(--rs);display:block;margin-bottom:10px;cursor:pointer;transition:color .18s;letter-spacing:.04em}
.footer-link:hover{color:var(--ri)}
.footer-compliance{font-family:var(--mono);font-size:15px;color:var(--ri);letter-spacing:.1em;line-height:1.75;text-transform:uppercase;margin-top:20px}
.footer-bottom{background:var(--cream);padding:16px 64px;border-top:1px solid rgba(45,74,62,.12);display:flex;justify-content:space-between;align-items:center}
.footer-bottom-left{font-family:var(--mono);font-size:11px;color:var(--ri);letter-spacing:.1em}
.footer-bottom-right{font-family:var(--mono);font-size:11px;font-weight:700;background:rgba(196,147,63,.12);color:var(--rc);padding:4px 14px;letter-spacing:.08em}
/* ── HOME AUDIENCE CARDS — click highlight ── */
.aud-card{cursor:pointer;transition:background .18s,box-shadow .18s,border .18s}
.aud-card:hover{background:#E4DDD3}
.aud-card.aud-selected{background:#E4DDD3;box-shadow:inset 0 0 0 2px var(--rc)}
.aud-card.aud-selected .aud-tag{color:var(--rc)}
.aud-card.aud-selected .aud-link{color:var(--rc)}
/* ── ABOUT VALUES SECTION ── */
.rv-section{background:var(--rs);font-family:var(--cond);color:var(--cream);overflow:hidden;position:relative}
.rv-inner{max-width:1080px;margin:0 auto;padding:88px 64px 96px}
.rv-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rc);font-weight:700;margin-bottom:32px}
.rv-mission-wrap{border-left:3px solid rgba(242,237,228,.2);padding-left:28px;margin-bottom:64px}
.rv-mission-label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rc);margin-bottom:12px}
.rv-mission-text{font-family:var(--serif);font-size:clamp(22px,3vw,30px);font-weight:400;color:var(--cream);line-height:1.45;max-width:780px}
.rv-mission-text em{color:inherit;font-style:normal}
.rv-divider{display:flex;align-items:center;gap:18px;margin-bottom:48px}
.rv-divider-label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,237,228,.8);white-space:nowrap}
.rv-divider-line{flex:1;height:1px;background:rgba(242,237,228,.12)}
.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.rv-card{background:rgba(255,255,255,.04);padding:36px 40px 40px;position:relative;border-top:1px solid rgba(242,237,228,.08)}
.rv-card:nth-child(odd){border-right:1px solid rgba(242,237,228,.06)}
.rv-card-num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rc);margin-bottom:14px;opacity:.8}
.rv-card-title{font-family:var(--serif);font-size:clamp(19px,2vw,23px);font-weight:400;color:var(--cream);line-height:1.2;margin-bottom:14px}
.rv-card-title em{color:inherit;font-style:normal}
.rv-card-rule{width:32px;height:2px;background:rgba(242,237,228,.2);margin-bottom:16px}
.rv-card-body{font-family:var(--cond);font-size:18px;font-weight:400;color:var(--cream);line-height:1.75;letter-spacing:.03em} /* v71: full cream, no dim */
.rv-strip{margin-top:56px;padding-top:32px;border-top:1px solid rgba(242,237,228,.1);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rv-strip-quote{font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(242,237,228,.78);letter-spacing:.02em;flex:1;min-width:240px}
.rv-strip-cta{background:transparent;color:var(--rc);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:13px 26px;border:1px solid rgba(212,168,67,.4);cursor:pointer;transition:all .2s;white-space:nowrap}
.rv-strip-cta:hover{background:var(--rc);color:var(--rs);border-color:var(--rc)}
.rv-fade{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.rv-fade.visible{opacity:1;transform:translateY(0)}
@media(max-width:860px){.rv-inner{padding:64px 40px 72px}.rv-grid{grid-template-columns:1fr}.rv-card:nth-child(odd){border-right:none}.rv-card{padding:32px 28px}}
@media(max-width:480px){.rv-inner{padding:52px 20px 60px}}
/* ── Dark section wrap text colors ── */
.section-wrap.dark .display,
.section-wrap.dark .eyebrow { color: var(--cream); }
.section-wrap.dark .display em { color: inherit; }
.section-wrap.dark p { color: rgba(242,237,228,.75); }
/* ── Contact form labels ── */
.contact-form label { color: var(--ri); font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea { color: var(--ri); background: var(--cream); border: 1px solid rgba(45,74,62,.2); font-family: var(--cond); font-size: 17px; padding: 12px 16px; width: 100%; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--track); opacity: .7; }
/* ── Audience CTA block buttons (on dark green bg) ── */
/* ASSESSMENT OVERLAY */
.assess-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:none;background:rgba(26,20,16,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.assess-overlay.open{display:flex;flex-direction:column;animation:fadeOverlay .25s ease}
@keyframes fadeOverlay{from{opacity:0}to{opacity:1}}
.assess-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--surface);border-bottom:1px solid rgba(196,147,63,.2);flex-shrink:0}
.assess-bar-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--rc)}
.assess-frame{flex:1;border:none;width:100%;background:var(--cream)}
/* SCROLLBAR */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(45,74,62,.3)}
::-webkit-scrollbar-thumb:hover{background:rgba(45,74,62,.5)}
/* ═══════════════════════════════════════
HAMBURGER NAV
═══════════════════════════════════════ */
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:transparent;border:none;z-index:200}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--track);transition:all .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ═══════════════════════════════════════
TABLET — 900px
═══════════════════════════════════════ */
@media(max-width:900px){
nav{padding:0 32px}
.hero{padding:72px 32px 56px}
.hero-headline{font-size:48px}
.hero-stats{gap:36px}
.problem-strip{padding:28px 32px}
.section-wrap{padding:64px 32px}
.adopt-strip{padding:56px 32px}
.adopt-phases{grid-template-columns:repeat(5,180px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.adopt-phase{min-width:180px}
.handoff{padding:64px 32px;gap:40px}
.cred-bar{padding:32px 32px}
.approach-hero-wrap{padding:64px 32px}
.audience-hero{padding:64px 32px}
.about-hero{padding:64px 32px}
.manifesto{padding:64px 32px}
.contact-right{padding:56px 32px}
footer{padding:48px 32px;grid-template-columns:1fr 1fr;gap:40px}
.footer-bottom{padding:14px 32px}
}
/* ═══════════════════════════════════════
MOBILE — 640px
═══════════════════════════════════════ */
@media(max-width:640px){
/* NAV */
nav{padding:0 20px}
.nav-links{display:none}
.desktop-only{display:none}
.nav-toggle{display:flex}
/* HERO */
.hero{padding:56px 20px 44px}
.hero-headline{font-size:36px;letter-spacing:.01em}
.hero-actions{flex-direction:column;align-items:flex-start;gap:10px}
.hero-stats{flex-wrap:wrap;gap:28px 40px;margin-top:40px}
.hero-stat span{font-size:22px}
/* PROBLEM STRIP */
.problem-strip{flex-direction:column;padding:28px 20px;gap:20px}
.problem-strip-rule{display:none}
.problem-strip-quote{font-size:20px}
.problem-strip-sub{font-size:14px}
/* SECTION */
.section-wrap{padding:48px 20px}
/* FAILURE GRID */
.failure-grid{grid-template-columns:1fr}
.failure-item.full{grid-column:1}
/* ADOPT STRIP */
.adopt-strip{padding:48px 20px}
.adopt-header{flex-direction:column;gap:16px;margin-bottom:36px}
.adopt-headline{font-size:30px}
.adopt-sub{max-width:100%;padding-top:0;font-size:15px}
.adopt-phases{grid-template-columns:repeat(5,200px);overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid rgba(196,185,154,.1)}
.adopt-phase{min-width:200px}
/* HANDOFF */
.handoff{grid-template-columns:1fr;gap:40px;padding:48px 20px}
.handoff-visual{height:220px}
/* AUDIENCE CARDS */
.audience-grid{grid-template-columns:1fr}
.aud-card{border-right:none;border-bottom:1px solid rgba(26,20,16,.1);padding:32px 20px}
.aud-card:last-child{border-bottom:none}
/* CRED BAR */
.cred-bar{grid-template-columns:1fr 1fr;padding:32px 20px}
.cred-item{padding:20px 12px;border-right:none;border-bottom:1px solid rgba(26,20,16,.1)}
.cred-item:nth-child(1),.cred-item:nth-child(2){border-bottom:1px solid rgba(26,20,16,.1)}
.cred-item:nth-child(3),.cred-item:nth-child(4){border-bottom:none}
.cred-item:nth-child(odd){border-right:1px solid rgba(26,20,16,.15)}
.cred-num{font-size:28px}
/* APPROACH PAGE */
.compare-row{grid-template-columns:1fr;gap:6px;padding:16px}
.compare-row.header{display:none}
.compare-label{font-size:12px;font-weight:700;color:var(--rc);letter-spacing:.1em;text-transform:uppercase;margin-bottom:0}
.compare-bad::before{content:"Onboarding: ";font-size:10px;font-family:var(--mono);color:rgba(26,20,16,.75);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:2px}
.compare-good::before{content:"Relay: ";font-size:10px;font-family:var(--mono);color:rgba(196,147,63,.6);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:2px}
.phase-block{padding:0}
.phase-big-letter{font-size:60px;text-align:left;margin-bottom:4px}
.phase-big-num{text-align:left}
/* AUDIENCE PAGE */
.aud-switcher{display:flex;gap:12px;margin-top:96px;flex-wrap:wrap} /* v73: even more breathing */
.aud-panel.active{grid-template-columns:1fr;gap:32px;padding:40px 20px}
/* ABOUT PAGE */
.manifesto-headline{font-size:28px}
/* CONTACT PAGE */
.contact-right{padding:40px 20px}
/* FOOTER */
footer{grid-template-columns:1fr;padding:40px 20px;gap:36px}
.footer-bottom{padding:14px 20px;flex-direction:column;gap:10px;text-align:center}
.footer-bottom-left{font-size:10px}
/* HERO STATS LABEL */
.hero-stat-label{color:var(--track);opacity:.7}
}
/* ═══ AUDIENCE PANELS ═══ */
.aud-panel{display:none}
.aud-panel.active{display:block}
.aud-panel-top{
padding:72px 64px 40px;
background:var(--cream);
}
.aud-panel-head{
font-family:var(--serif);
font-size:42px;
color:#000;
line-height:1.15;
margin-bottom:20px;
max-width:900px;
}
.aud-panel-head em{color:inherit;font-style:normal}
.aud-panel-body{
font-family:var(--cond);
font-size:20px;
color:var(--ri);
line-height:1.85;
max-width:800px;
opacity:.8;
}
.aud-panel-bottom{
display:grid;
grid-template-columns:1fr 360px;
align-items:start;
background:var(--surface);
}
.aud-pain-list{
list-style:none;
padding:48px 64px;
}
.aud-pain-item{
padding:24px 0;
border-bottom:1px solid rgba(45,74,62,.1);
display:flex;
gap:22px;
align-items:flex-start;
}
.aud-pain-item:last-child{border-bottom:none}
.aud-pain-num{
font-family:var(--mono);
font-size:13px;
font-weight:700;
color:var(--rc);
letter-spacing:.1em;
flex-shrink:0;
padding-top:4px;
min-width:32px;
}
.aud-pain-text{
font-family:var(--cond);
font-size:22px;
color:var(--ri);
line-height:1.5;
}
.aud-cta-block{background:transparent;padding:48px 40px;align-self:center;display:flex;flex-direction:column;gap:32px;justify-content:center;align-items:center} /* v71: gap 16→32 */
.aud-cta-body{
font-family:var(--cond);
font-size:18px;
color:rgba(242,237,228,.9); /* v71: full clarity */
line-height:1.75;
margin-bottom:16px; /* v71: extra space before buttons */
flex:1;
}
@media(max-width:900px){
.aud-panel-bottom{grid-template-columns:1fr}
.aud-pain-list{padding:40px 32px}
.aud-panel-top{padding:52px 32px 28px}
.aud-cta-block{padding:40px 32px}
}
@media(max-width:540px){
.aud-panel-top{padding:44px 20px 24px}
.aud-pain-list{padding:32px 20px}
.aud-panel-head{font-size:30px}
.aud-cta-block{padding:32px 20px}
}
/* ══ HOW WE WORK PAGE ══ */
/* ── Hero ── */
#page-approach .hero-eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 20px;
font-weight: 700;
}
#page-approach .hero-headline {
font-family: var(--serif);
font-size: 62px;
font-weight: 400;
color: var(--cream);
line-height: 1.08;
letter-spacing: .01em;
max-width: 720px;
}
#page-approach .hero-headline em {
color: inherit;
font-style: normal;
}
#page-approach .hero-sub {
font-family: var(--cond);
font-size: 17px;
color: rgba(242,237,228,.75);
line-height: 1.75;
max-width: 500px;
margin-top: 26px;
letter-spacing: .03em;
}
/* ── Process section ── */
#page-approach .process-section {
background: var(--cream);
padding: 100px 64px;
}
#page-approach .process-intro {
max-width: 900px;
margin-bottom: 80px;
}
#page-approach .process-intro p {
font-family: var(--cond);
font-size: 18px;
color: var(--ri);
line-height: 1.85;
margin-top: 14px;
opacity: .85;
}
@media(max-width:900px){
#page-approach .process-intro .display{font-size:32px !important}
}
@media(max-width:680px){
#page-approach .process-intro .display{font-size:24px !important}
}
@media(max-width:520px){
#page-approach .process-intro .display{font-size:20px !important}
}
#page-approach .process-steps {
display: grid;
grid-template-columns: 1fr 64px 1fr 64px 1fr;
align-items: stretch;
gap: 0;
}
#page-approach .step-connector-h {
display: flex;
align-items: center;
justify-content: center;
}
#page-approach .connector-h-inner {
display: flex;
align-items: center;
gap: 3px;
}
#page-approach .cdot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--rc);
}
#page-approach .cdot:nth-child(1) { opacity: .3; }
#page-approach .cdot:nth-child(2) { opacity: .55; }
#page-approach .cdot:nth-child(3) { opacity: .8; }
#page-approach .caret {
width: 0; height: 0;
border-left: 7px solid var(--rc);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-left: 2px;
}
#page-approach .step-card {
background: var(--surface);
border-top: 3px solid var(--rc);
padding: 40px 36px 44px;
display: flex;
flex-direction: column;
}
#page-approach .step-icon {
width: 48px; height: 48px;
border: 1px solid rgba(212,168,67,.2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
#page-approach .step-icon svg {
width: 22px; height: 22px;
stroke: var(--rc);
fill: none;
stroke-width: 1.5;
}
#page-approach .step-title {
font-family: var(--serif);
font-size: clamp(22px, 2.2vw, 26px);
color: var(--ri);
line-height: 1.1;
margin-bottom: 18px;
letter-spacing: -.01em;
white-space: nowrap;
}
#page-approach .step-subtitle {
font-family: var(--serif);
font-style: italic;
font-size: 16px;
color: var(--rs);
margin-bottom: 18px;
}
#page-approach .step-body {
font-family: var(--cond);
font-size: 18px;
color: var(--ri);
line-height: 1.8;
opacity: .8;
flex: 1;
}
#page-approach .step-deliverables {
margin-top: 28px;
border-top: 1px solid rgba(45,74,62,.12);
padding-top: 20px;
}
#page-approach .step-deliv-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 12px;
font-weight: 700;
}
#page-approach .step-deliv-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
#page-approach .step-deliv-list li {
font-family: var(--cond);
font-size: 17px;
color: var(--ri);
padding-left: 16px;
position: relative;
opacity: .85;
}
#page-approach .step-deliv-list li::before {
content: '—';
position: absolute;
left: 0;
color: var(--rc);
font-size: 11px;
}
/* ── Engagement section (dark green) ── */
#page-approach .engagement-section {
background: var(--rs);
padding: 100px 64px;
}
#page-approach .engagement-header {
max-width: 680px;
margin-bottom: 72px;
}
#page-approach .engagement-header p {
font-family: var(--cond);
font-size: 18px;
color: rgba(242,237,228,.9);
line-height: 1.85;
margin-top: 18px;
max-width: 560px;
}
#page-approach .engagement-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: rgba(242,237,228,.06);
margin-bottom: 2px;
}
#page-approach .eng-card {
background: var(--rs);
padding: 48px 44px;
border-top: 1px solid rgba(212,168,67,.2);
position: relative;
}
#page-approach .eng-tag {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 16px;
font-weight: 700;
}
#page-approach .eng-headline {
font-family: var(--serif);
font-size: 26px;
color: var(--cream);
line-height: 1.2;
margin-bottom: 16px;
}
#page-approach .eng-headline em {
color: var(--cream);
font-style: italic;
}
#page-approach .eng-body {
font-family: var(--cond);
font-size: 18px;
color: rgba(242,237,228,.75);
line-height: 1.85;
}
/* ── Team feature callout ── */
#page-approach .team-feature {
background: var(--surface);
border-top: 3px solid var(--rc);
padding: 56px 60px;
position: relative;
margin-top: 2px;
}
#page-approach .team-feature-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
#page-approach .tf-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 16px;
font-weight: 700;
}
#page-approach .tf-headline {
font-family: var(--serif);
font-size: 38px;
color: var(--ri);
line-height: 1.12;
margin-bottom: 20px;
}
#page-approach .tf-headline em {
color: inherit;
font-style: normal;
}
#page-approach .tf-body {
font-family: var(--cond);
font-size: 15px;
color: var(--ri);
line-height: 1.85;
opacity: .8;
}
#page-approach .team-feature-right {
display: flex;
flex-direction: column;
gap: 12px;
}
#page-approach .tf-credential {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px 22px;
background: var(--cream);
border-left: 2px solid var(--rc);
}
#page-approach .tf-cred-icon {
width: 36px; height: 36px;
flex-shrink: 0;
border: 1px solid rgba(212,168,67,.2);
display: flex;
align-items: center;
justify-content: center;
}
#page-approach .tf-cred-icon svg {
width: 16px; height: 16px;
stroke: var(--rc);
fill: none;
stroke-width: 1.5;
}
#page-approach .tf-cred-title {
font-family: var(--cond);
font-size: 14px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ri);
margin-bottom: 6px;
}
#page-approach .tf-cred-body {
font-family: var(--cond);
font-size: 13px;
color: var(--ri);
line-height: 1.7;
opacity: .7;
}
/* ── Responsive ── */
@media (max-width: 960px) {
#page-approach .process-steps {
grid-template-columns: 1fr;
gap: 2px;
}
#page-approach .step-connector-h {
display: none;
}
#page-approach .team-feature-inner {
grid-template-columns: 1fr;
gap: 40px;
}
#page-approach .engagement-grid {
grid-template-columns: 1fr;
}
#page-approach .process-section,
#page-approach .engagement-section {
padding: 72px 40px;
}
#page-approach .eng-card {
padding: 40px 36px;
}
}
@media (max-width: 640px) {
#page-approach .approach-hero-wrap,
#page-approach .process-section,
#page-approach .engagement-section {
padding: 60px 24px;
}
#page-approach .hero-headline { font-size: 40px; }
#page-approach .step-title { font-size: 22px; }
#page-approach .team-feature { padding: 40px 24px; }
}
#page-approach .engagement-section .display { color: var(--cream); }
#page-approach .engagement-section .display em { color: inherit; font-style: normal; }
#page-approach .engagement-section .eyebrow { color: var(--rc); }
#page-approach .engagement-section p { color: rgba(242,237,228,.85); }
#page-approach .team-feature .tf-eyebrow { color: var(--rc); }
.hero .display em,.approach-hero-wrap .display em,.audience-hero .display em,.about-hero .display em,.contact-hero .display em{color:inherit;font-style:normal}
.engagement-section .display em{color:inherit;font-style:normal}
#page-approach .team-feature p,#page-approach .tf-body,#page-approach .tf-cred-body{color:var(--ri);opacity:.8}
#page-approach .tf-cred-title{color:var(--ri)}
/* ═══════════════════════════════
BUTTON SYSTEM
Gold fill = primary action
Gold outline = secondary action
Works on any background
═══════════════════════════════ */
/* Base shared properties */
.btn-primary,.btn-ghost,.btn-secondary,.nav-cta,.aud-sw-btn,.contact-submit,.btn-cta-dark,.btn-cta-outline,.assess-close,.btn-assess {
display:inline-block;
font-family:var(--cond);
/* v69: bumped size 13→14, padding 13/28 → 15/32, border 1.5 → 2 for tap-targets and legibility */
font-size:14px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
padding:15px 32px;
cursor:pointer;
transition:all .18s;
text-decoration:none;
text-align:center;
white-space:nowrap;
border:2px solid var(--rc);
}
/* Gold fill — primary / active */
.btn-primary,.nav-cta,.aud-sw-btn.active,.contact-submit,.btn-cta-dark {
background:var(--rc);
color:var(--ri);
}
.btn-primary:hover,.nav-cta:hover,.contact-submit:hover,.btn-cta-dark:hover {
background:#c4963a;
border-color:#c4963a;
}
/* Gold outline — secondary / inactive */
.btn-ghost,.btn-cta-outline,.assess-close {
background:var(--cream);
color:var(--ri);
/* v69: forest border instead of gold — gold-on-cream was 1.95:1, barely visible */
border-color:var(--ri);
}
.btn-ghost:hover,.btn-cta-outline:hover,.assess-close:hover {
background:var(--rc);
color:var(--ri);
}
/* Green fill — "See How We Work" only */
.btn-secondary {
background:var(--rs);
color:var(--cream);
border-color:var(--rs);
}
.btn-secondary:hover { background:#3d6355; border-color:#3d6355; }
/* Tab switcher (inactive state) */
.aud-sw-btn {
background:var(--cream);
color:var(--ri);
border-color:var(--rc);
}
.aud-sw-btn:hover { background:var(--rc); color:var(--ri); }
/* Readiness assessment — ghost on dark bg */
.btn-assess {
background:transparent;
color:var(--cream);
/* v69: bumped border alpha .5 → .85 */
border-color:rgba(242,237,228,.85);
}
.btn-assess:hover { border-color:var(--cream); }
/* Block display overrides */
.btn-cta-dark,.btn-cta-outline { display:block; width:100%; }
/* v114: contact submit no longer spans full width — sits at its natural
width, left-aligned under the form, with a comfortable min-width so it
still reads as a deliberate primary action. */
.contact-submit {
display:inline-block;
width:auto;
min-width:220px;
margin-top:28px;
}
/* Nav CTA sizing */
.nav-cta { font-size:12px; padding:10px 20px; }
/* ═══════════════════════════════════
MOBILE FIXES
═══════════════════════════════════ */
/* Fix 1: Contact form grid */
.cf-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 48px;
}
.cf-grid > div {
margin-bottom: 24px;
}
.cf-grid .contact-form-label {
margin-top: 0;
}
/* ═══════════════════════════════════════
COMPREHENSIVE MOBILE FIXES — 640px
═══════════════════════════════════════ */
@media (max-width: 640px) {
/* ── Contact form ── */
.cf-grid { grid-template-columns: 1fr; gap: 0; }
.contact-right { padding: 36px 20px 48px; }
.contact-form-note { font-size: 13px; }
/* ── Who We Serve panels ── */
.aud-panel-bottom { grid-template-columns: 1fr; }
.aud-pain-list { padding: 32px 20px; }
.aud-panel-top { padding: 40px 20px 24px; }
.aud-cta-block { padding: 36px 24px; }
.aud-panel-head { font-size: 26px; }
.aud-panel-body { font-size: 18px; }
/* ── Home audience cards ── */
.audience-grid { grid-template-columns: 1fr; }
.aud-card { border-right: none; border-bottom: 1px solid rgba(26,20,16,.1); }
.aud-card:last-child { border-bottom: none; }
/* ── How We Work — engagement grid ── */
#page-approach .engagement-grid { grid-template-columns: 1fr; }
#page-approach .engagement-section { padding: 52px 20px; }
#page-approach .eng-headline { font-size: 22px; }
/* ── How We Work — step cards ── */
#page-approach .process-section { padding: 52px 20px; }
#page-approach .process-steps { grid-template-columns: 1fr; gap: 2px; }
#page-approach .step-connector-h { display: none; }
#page-approach .step-card { padding: 32px 24px 36px; }
#page-approach .step-title { font-size: 22px; white-space: normal; }
#page-approach .team-feature { padding: 40px 20px; }
#page-approach .team-feature-inner { grid-template-columns: 1fr; gap: 32px; }
/* ── Problem card section ── */
.rly-gap-section { padding: 44px 20px 36px; }
.rly-headline { font-size: 26px; }
.rly-sub { font-size: 15px; }
.rly-cards-label { font-size: 10px; margin-top: 20px; }
.rly-card { padding: 24px 20px; }
.rly-title { font-size: 18px; }
.rly-sub-card { font-size: 15px; }
.rly-cards { grid-template-columns: 1fr; gap: 8px; }
.aud-link { font-size: 13px; }
/* ── Values grid ── */
.rv-grid { grid-template-columns: 1fr; }
.rv-card { padding: 28px 24px; }
.rv-card:nth-child(odd) { border-right: none; }
.rv-inner { padding: 52px 20px 60px; }
/* ── Founders ── */
.founder-photo { width: 140px; height: 140px; }
.founders-grid { grid-template-columns: 1fr; }
.founder-card { border-right: none; border-bottom: 1px solid rgba(26,20,16,.1); }
.founder-card:last-child { border-bottom: none; }
.founder-card-body { padding: 24px 20px 32px; }
.manifesto { padding: 52px 20px; }
.manifesto-headline { font-size: 28px; }
.category-frame { grid-template-columns: 1fr; }
/* ── Footer ── */
footer { grid-template-columns: 1fr; padding: 40px 20px; gap: 32px; }
.footer-bottom { padding: 14px 20px; flex-direction: column; gap: 10px; text-align: center; }
.footer-tagline { font-size: 18px; }
.footer-link { font-size: 17px; }
/* ── Nav ── */
.nav-toggle { display: flex !important; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-links { display: none !important; }
/* ── Buttons ── */
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
padding: 14px 24px;
font-size: 13px;
width: 100%;
text-align: center;
}
.aud-cta-block .btn-cta-dark,
.aud-cta-block .btn-cta-outline {
width: 100% !important;
}
}
/* Tablet: audience cards 2-col */
@media (max-width: 860px) and (min-width: 641px) {
.audience-grid { grid-template-columns: 1fr 1fr; }
}
/* ── Audience CTA block: gold outline, dark green text, transparent bg ── */
.aud-cta-block .btn-cta-dark,
.aud-cta-block .btn-cta-outline {
background: transparent !important;
color: var(--rs) !important;
/* v69: thicker forest border instead of gold for visibility */
border: 2px solid var(--rs) !important;
display: block;
width: 240px;
margin-bottom: 0;
text-align: center;
}
.aud-cta-block .btn-cta-dark:hover,
.aud-cta-block .btn-cta-outline:hover {
background: var(--rc) !important;
color: var(--ri) !important;
}
/* ══ MOBILE NAV DRAWER ══ */
.mobile-nav.open {
display: flex !important;
}
.mobile-nav {
display: none !important;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--surface);
z-index: 9999;
flex-direction: column;
padding: 80px 32px 40px;
overflow-y: auto;
}
.mobile-nav .nav-link {
font-size: 18px;
letter-spacing: .08em;
text-transform: uppercase;
font-family: var(--cond);
font-weight: 600;
padding: 18px 0;
border-bottom: 1px solid rgba(45,74,62,.1);
color: var(--ri);
cursor: pointer;
}
.mobile-nav .nav-link:hover { color: var(--rc); }
.mobile-nav .nav-link.active { color: var(--rc); }
.mobile-nav .nav-cta {
display: block;
margin-top: 28px;
width: 100%;
text-align: center;
padding: 15px 20px;
font-size: 12px;
}
/* Hero buttons — larger */
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
font-size: 15px;
padding: 20px 52px;
letter-spacing: .2em;
}
/* Audience CTA buttons — larger */
.aud-cta-block .btn-cta-dark,
.aud-cta-block .btn-cta-outline {
width: 280px !important;
font-size: 13px !important;
padding: 17px 28px !important;
letter-spacing: .18em !important;
}
/* ── Unified hero sub-text ── */
.hero-sub,
.approach-hero-sub,
.hero-sub-text {
font-family: var(--cond);
font-size: 20px;
color: var(--ri);
line-height: 1.75;
max-width: 580px;
margin-top: 24px;
opacity: .85;
letter-spacing: .02em;
}
/* ═══════════════════════════════════════
HERO WITH IMAGE — unified split layout
All heroes: 500px tall, 58/42 split
Text panels: 52px top/bottom, 64px sides
═══════════════════════════════════════ */
/* Shared grid structure */
.hero-split,
.approach-hero-split,
.audience-hero-split,
.about-hero-split,
.contact-hero-split {
display: grid;
grid-template-columns: 58% 42%;
/* v77: let content drive height — was 500px fixed, which forced the
space-between flex column to distribute empty space and pushed the
headline far away from the gold rule. */
min-height: 400px;
background: var(--cream);
}
/* Neutralise padding from legacy hero classes on the outer container */
.hero.hero-split,
.approach-hero-wrap.approach-hero-split,
.audience-hero.audience-hero-split,
.about-hero.about-hero-split {
padding: 0 !important;
}
/* Unified text panel — identical on every page */
.hero-split-text,
.approach-hero-split-text,
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text {
padding: 52px 64px;
display: flex;
flex-direction: column;
/* v74: space-between so eyebrow/rule/headline group hugs top, action group hugs bottom */
justify-content: space-between;
gap: 0;
}
/* Image panels */
.hero-split-image,
.approach-hero-split-image,
.audience-hero-split-image,
.about-hero-split-image,
.contact-hero-split-image {
position: relative;
overflow: hidden;
}
.hero-split-image { background: var(--rs); }
/* All images fill their panel */
.hero-split-image img,
.approach-hero-split-image img,
.audience-hero-split-image img,
.about-hero-split-image img,
.contact-hero-split-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Per-image focal point */
.hero-split-image img { object-position: center center; }
.approach-hero-split-image img { object-position: center 30%; }
.audience-hero-split-image img { object-position: center 35%; }
.about-hero-split-image img { object-position: center center; }
.contact-hero-split-image img { object-position: center top; }
/* Left-edge gradient overlays */
.hero-split-image::after,
.approach-hero-split-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(45,74,62,0.15) 0%, transparent 45%);
pointer-events: none;
}
/* Tighten gold-rule margin inside hero panels */
.hero-split-text .gold-rule,
.approach-hero-split-text .gold-rule,
.audience-hero-split-text .gold-rule,
.about-hero-split-text .gold-rule,
.contact-hero-split-text .gold-rule {
margin: 10px 0 16px;
}
/* Subtext inside hero panels */
.hero-split-text .hero-sub,
.approach-hero-split-text .approach-hero-sub,
.audience-hero-split-text .hero-sub-text,
.about-hero-split-text .hero-sub-text,
.contact-hero-split-text .hero-sub-text {
margin-top: 16px;
font-size: 20px;
line-height: 1.7;
max-width: 520px;
}
/* Audience switcher spacing inside hero */
.audience-hero-split-text .aud-switcher {
/* v74: no margin-top — space-between in parent handles positioning */
margin-top: 0;
}
/* Home hero actions spacing */
.hero-split-text .hero-actions {
margin-top: 28px;
}
/* ── Responsive: stack on tablet ── */
@media (max-width: 900px) {
.hero-split,
.approach-hero-split,
.audience-hero-split,
.about-hero-split,
.contact-hero-split {
grid-template-columns: 1fr;
height: auto;
}
.hero-split-image,
.approach-hero-split-image,
.audience-hero-split-image,
.about-hero-split-image,
.contact-hero-split-image {
height: 300px;
order: -1;
}
.hero-split-text,
.approach-hero-split-text,
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text {
padding: 44px 32px;
}
/* Scale headlines on tablet */
.hero-headline { font-size: 42px; }
.approach-hero-split-text .display,
.audience-hero-split-text .display,
.about-hero-split-text .display,
.contact-hero-split-text .display { font-size: 44px; }
.hero-split-text .hero-sub,
.approach-hero-split-text .approach-hero-sub,
.audience-hero-split-text .hero-sub-text,
.about-hero-split-text .hero-sub-text,
.contact-hero-split-text .hero-sub-text { font-size: 18px; }
}
@media (max-width: 640px) {
/* Image panel — taller on mobile since it spans full width */
.hero-split-image,
.approach-hero-split-image,
.audience-hero-split-image,
.about-hero-split-image,
.contact-hero-split-image {
height: 260px;
}
/* Re-tune focal points for wide/short mobile crop */
.hero-split-image img { object-position: center 40%; }
.approach-hero-split-image img { object-position: center 25%; }
.audience-hero-split-image img { object-position: center 30%; }
.about-hero-split-image img { object-position: 35% center; }
.contact-hero-split-image img { object-position: center top; }
/* Text panels */
.hero-split-text,
.approach-hero-split-text,
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text {
padding: 36px 20px 40px;
}
/* Scale down all hero display headlines */
.hero-headline { font-size: 34px; letter-spacing: .01em; }
.approach-hero-split-text .display,
.audience-hero-split-text .display,
.about-hero-split-text .display,
.contact-hero-split-text .display { font-size: 34px; line-height: 1.1; }
/* Subtext */
.hero-split-text .hero-sub,
.approach-hero-split-text .approach-hero-sub,
.audience-hero-split-text .hero-sub-text,
.about-hero-split-text .hero-sub-text,
.contact-hero-split-text .hero-sub-text { font-size: 18px; margin-top: 14px; }
/* Audience switcher — full width buttons */
.audience-hero-split-text .aud-switcher { gap: 8px; margin-top: 16px; }
.audience-hero-split-text .aud-sw-btn { flex: 1 1 auto; font-size: 11px; padding: 10px 12px; }
/* CTA button full width */
.hero-split-text .hero-actions { margin-top: 24px; }
.hero-split-text .btn-primary { width: 100%; text-align: center; }
}
/* ═════════ INSIGHTS PAGE (v53) ═════════ */
.insights-hero {
background: var(--rs);
padding: 120px 64px 88px;
position: relative;
}
.insights-hero-inner {
max-width: 1200px;
margin: 0 auto;
}
.insights-hero-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 14px;
}
.insights-hero-title {
font-family: var(--serif);
font-size: 64px;
font-weight: 400;
line-height: 1.05;
color: var(--cream);
max-width: 820px;
}
.insights-hero-title em {
color: inherit;
font-style: normal;
}
.insights-hero-sub {
font-family: var(--cond);
font-size: 20px;
line-height: 1.75;
color: var(--cream);
max-width: 580px;
margin-top: 24px;
opacity: .85;
letter-spacing: .02em;
}
/* ── List view ── */
.insights-list-wrap {
background: var(--cream);
padding: 80px 64px 120px;
}
.insights-list-inner {
max-width: 900px;
margin: 0 auto;
}
.insights-list-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-bottom: 1px solid rgba(45,74,62,.18);
padding: 36px 0;
cursor: pointer;
transition: transform .25s ease, opacity .25s ease;
}
.insights-list-item:first-child { padding-top: 0; }
.insights-list-item:hover { transform: translateX(4px); }
.insights-list-meta {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--rs); /* v68: forest for legibility (was gold, 1.95:1) */
font-weight: 700;
margin-bottom: 14px;
}
.insights-list-meta .sep { color: rgba(45,74,62,.65); margin: 0 10px; }
.insights-list-title {
font-family: var(--serif);
font-size: 36px;
font-weight: 400;
line-height: 1.18;
color: #000;
margin-bottom: 14px;
}
.insights-list-title em { color: inherit; font-style: normal; }
.insights-list-excerpt {
font-family: var(--cond);
font-size: 18px;
line-height: 1.7;
color: rgba(26,20,16,.78);
max-width: 720px;
}
.insights-list-readmore {
display: inline-block;
margin-top: 16px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--rs);
font-weight: 700;
}
/* ── Single post view ── */
.insights-post-wrap {
background: var(--cream);
padding: 56px 64px 120px;
}
.insights-post-inner {
max-width: 720px;
margin: 0 auto;
}
.insights-back {
background: none;
border: none;
padding: 0;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--rs);
font-weight: 700;
cursor: pointer;
margin-bottom: 40px;
transition: color .2s;
}
.insights-back:hover { color: var(--rc); }
.insights-post-meta {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--rs); /* v68: forest for legibility */
font-weight: 700;
margin-bottom: 18px;
}
.insights-post-meta .sep { color: rgba(45,74,62,.65); margin: 0 10px; }
.insights-post-title {
font-family: var(--serif);
font-size: 48px;
font-weight: 400;
line-height: 1.1;
color: #000;
margin-bottom: 16px;
}
.insights-post-title em { color: inherit; font-style: normal; }
.insights-post-dek {
font-family: var(--cond);
font-size: 22px;
line-height: 1.55;
color: rgba(26,20,16,.7);
margin-bottom: 40px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(45,74,62,.18);
}
.insights-post-body {
font-family: var(--cond);
font-size: 18px;
line-height: 1.78;
color: rgba(26,20,16,.88);
}
.insights-post-body h2 {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
color: #000;
margin: 48px 0 16px;
line-height: 1.25;
}
.insights-post-body h3 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--rs); /* v68: forest for legibility */
font-weight: 700;
margin: 40px 0 12px;
}
.insights-post-body p { margin-bottom: 20px; }
.insights-post-body em { font-style: italic; color: var(--rs); }
.insights-post-body strong { color: #000; font-weight: 600; }
.insights-post-body blockquote {
font-family: var(--serif);
font-style: italic;
font-size: 22px;
line-height: 1.5;
color: var(--rs);
border-left: 3px solid var(--rc);
padding: 6px 0 6px 28px;
margin: 32px 0;
}
.insights-post-body ul {
margin: 0 0 24px 0;
padding-left: 22px;
}
.insights-post-body li { margin-bottom: 10px; }
/* ── Prev / Next nav ── */
.insights-post-nav {
margin-top: 72px;
padding-top: 32px;
border-top: 1px solid rgba(45,74,62,.18);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.insights-nav-btn {
background: none;
border: 1px solid rgba(45,74,62,.18);
padding: 22px 24px;
text-align: left;
cursor: pointer;
transition: border-color .2s, background .2s;
font-family: var(--cond);
}
.insights-nav-btn:hover { border-color: var(--rs); background: rgba(45,74,62,.04); }
.insights-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.insights-nav-btn.next { text-align: right; }
.insights-nav-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--rc);
font-weight: 700;
margin-bottom: 8px;
}
.insights-nav-title {
font-family: var(--serif);
font-size: 18px;
color: #000;
line-height: 1.3;
}
/* ── Mobile ── */
@media (max-width: 768px) {
.insights-hero { padding: 88px 24px 56px; }
.insights-hero-title { font-size: 40px; }
.insights-hero-sub { font-size: 18px; }
.insights-list-wrap { padding: 56px 24px 80px; }
.insights-list-title { font-size: 26px; }
.insights-list-excerpt { font-size: 17px; }
.insights-post-wrap { padding: 40px 24px 80px; }
.insights-post-title { font-size: 32px; }
.insights-post-dek { font-size: 18px; }
.insights-post-body { font-size: 18px; }
.insights-post-body h2 { font-size: 22px; }
.insights-post-body blockquote { font-size: 18px; padding-left: 20px; }
.insights-post-nav { grid-template-columns: 1fr; }
.insights-nav-btn.next { text-align: left; }
}
/* v76: nav logo — even smaller */
.nav-logo-svg { height: 20px !important; }
@media (min-width: 1100px) { .nav-logo-svg { height: 22px !important; } }
@media (min-width: 1500px) { .nav-logo-svg { height: 24px !important; } }
@media (max-width: 720px) { .nav-logo-svg { height: 18px !important; } }
/* v75: footer logo smaller and proportional */
.footer-logo-svg { height: 28px !important; }
@media (max-width: 720px) { .footer-logo-svg { height: 24px !important; } }
/* v70: eyebrow consistency. All small mono caps labels: 11/.25em/700 weight.
Color: on light bgs → forest; on dark bgs → cream (kept) or gold (kept). */
.h-mono-label, .h-card-label, .aud-tag, .baton-zone-label, .founder-mono,
.footer-col-head, .insights-hero-eyebrow, .insights-list-meta, .insights-post-meta,
.insights-back, .insights-list-readmore, .insights-nav-label,
.contact-detail-label, .cf-label-tag, .rv-mission-label, .rv-divider-label, .rv-card-num,
.rv-eyebrow, .rv-strip-cta, .eyebrow, .hero-eyebrow, .assess-bar-label, .compare-label,
.aud-pain-num, .cred-label, .h-scroll-cue, .contact-form-label,
#page-approach .hero-eyebrow, #page-approach .step-deliv-label,
#page-approach .eng-tag, #page-approach .tf-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .25em;
font-weight: 700;
text-transform: uppercase;
}
/* On light bgs (default): forest, not gold */
.h-mono-label, .h-card--before .h-card-label, .aud-tag, .footer-col-head,
.insights-list-meta, .insights-post-meta, .insights-back, .insights-list-readmore,
.insights-nav-label, .contact-detail-label, .compare-label, .aud-pain-num,
.assess-bar-label, .contact-form-label, .eyebrow, .hero-eyebrow,
#page-approach .hero-eyebrow, #page-approach .step-deliv-label,
#page-approach #page-approach .tf-eyebrow {
/* v73: .eng-tag removed from this rule — it sits on dark forest, needs gold */
color: var(--rs) !important;
}
/* v73: eng-tag is on forest bg, so use gold (was being forced to invisible forest) */
.eng-tag { color: var(--rc) !important; }
/* v71: restored gold eyebrow on dark "after" card */
.h-card--after .h-card-label { color: var(--rc) !important; }
/* On dark forest bgs: keep cream/gold as the design intends */
.cred-label, .baton-zone-label, .insights-hero-eyebrow, .rv-mission-label,
.rv-card-num, .rv-eyebrow, .founder-mono, .manifesto-mono {
color: var(--rc) !important;
}
/* ═════════ v71 SITE-WIDE TYPE COLOR RULES ═════════
These rules formalize the type-color system across all backgrounds.
ON LIGHT BG (--cream / --surface):
• Headlines: #000 or --ri (forest)
• Headline em: --rs (forest) — italic for emphasis
• Body copy: --ri (forest, full opacity)
• Eyebrows: --rs (forest)
ON DARK BG (--rs forest):
• Headlines: --cream
• Headline em: --rc (gold) or --cream (full)
• Body copy: --cream (full opacity)
• Eyebrows: --rc (gold)
• Subtle text: cream @ .85 minimum, never below
NEVER USE:
• Gold text on cream/surface (1.95:1, fails)
• Cream below .7 alpha on forest (gets murky)
• Body copy below .85 opacity
*/
/* Sweep low-opacity body text up to readable thresholds */
.runner-sub, .contact-form-note { opacity: .9 !important; }
.h-card-bullets li, .step-body, .aud-panel-body,
.process-intro p, .step-deliv-list li { opacity: 1; }
/* Body opacity on dark bgs */
.eng-body, .rv-strip-quote, .insights-hero-sub { opacity: 1; }
/* ═══ CLONED FROM #page-approach FOR #page-intel ═══ */
/* v74: MAP existing site classes → new type roles
These overrides apply Manrope + Source Serif 4 to the existing
class names, so the type system flips sitewide automatically. */
/* Display + headline roles (Manrope) */
/* v75: .relay-hero__label removed — hero text stays on DM Sans
because the SVG curve geometry was calibrated for DM Sans metrics. */
.h-hero-title, .hero-headline,
.h-compare-headline, .h-bridge-headline,
.aud-panel-head,
.insights-hero-title, .insights-list-title, .insights-post-title,
.h-card-headline, .step-headline, .eng-headline, .tf-headline,
.adopt-headline, .manifesto-headline, .cf-headline,
.rv-mission-text, .rv-card-title,
.founder-name, .rly-title,
.display, .runner-name,
#page-intel .hero-headline {
font-family: var(--relay-font-sans) !important;
font-weight: var(--relay-wt-display);
letter-spacing: -.02em;
text-wrap: balance;
}
/* Eyebrows / overlines / mono labels — Manrope, accent gold,
replaces Courier mono for a more modern UI feel. */
.eyebrow, .hero-eyebrow,
.h-mono-label, .h-card-label,
.aud-tag, .baton-zone-label, .founder-mono,
.footer-col-head, .footer-bottom-left, .footer-bottom-right,
.contact-detail-label, .contact-form-label, .cf-label-tag,
.cred-label,
.insights-hero-eyebrow, .insights-list-meta, .insights-post-meta,
.insights-back, .insights-list-readmore, .insights-nav-label,
.rv-eyebrow, .rv-mission-label, .rv-divider-label, .rv-card-num, .rv-strip-cta,
.assess-bar-label, .compare-label, .aud-pain-num,
.eng-tag,
#page-intel .hero-eyebrow,
#page-intel .step-deliv-label,
#page-intel .eng-tag,
#page-intel .tf-eyebrow {
font-family: var(--relay-font-sans) !important;
font-weight: var(--relay-wt-bold);
letter-spacing: .22em;
text-transform: uppercase;
}
/* ══ HOW WE WORK PAGE ══ */
/* ── Hero ── */
#page-intel .hero-eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 20px;
font-weight: 700;
}
#page-intel .hero-headline {
font-family: var(--serif);
font-size: 62px;
font-weight: 400;
color: var(--cream);
line-height: 1.08;
letter-spacing: .01em;
max-width: 720px;
}
#page-intel .hero-headline em {
color: inherit;
font-style: normal;
}
#page-intel .hero-sub {
font-family: var(--cond);
font-size: 17px;
color: rgba(242,237,228,.75);
line-height: 1.75;
max-width: 500px;
margin-top: 26px;
letter-spacing: .03em;
}
/* ── Process section ── */
#page-intel .process-section {
background: var(--cream);
padding: 100px 64px;
}
#page-intel .process-intro {
max-width: 900px;
margin-bottom: 80px;
}
#page-intel .process-intro p {
font-family: var(--cond);
font-size: 18px;
color: var(--ri);
line-height: 1.85;
margin-top: 14px;
opacity: .85;
}
#page-intel .process-steps {
display: grid;
grid-template-columns: 1fr 64px 1fr 64px 1fr;
align-items: stretch;
gap: 0;
}
#page-intel .step-connector-h {
display: flex;
align-items: center;
justify-content: center;
}
#page-intel .connector-h-inner {
display: flex;
align-items: center;
gap: 3px;
}
#page-intel .cdot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--rc);
}
#page-intel .cdot:nth-child(1) { opacity: .3; }
#page-intel .cdot:nth-child(2) { opacity: .55; }
#page-intel .cdot:nth-child(3) { opacity: .8; }
#page-intel .caret {
width: 0; height: 0;
border-left: 7px solid var(--rc);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-left: 2px;
}
#page-intel .step-card {
background: var(--surface);
border-top: 3px solid var(--rc);
padding: 40px 36px 44px;
display: flex;
flex-direction: column;
}
#page-intel .step-icon {
width: 48px; height: 48px;
border: 1px solid rgba(212,168,67,.2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
#page-intel .step-icon svg {
width: 22px; height: 22px;
stroke: var(--rc);
fill: none;
stroke-width: 1.5;
}
#page-intel .step-title {
font-family: var(--serif);
font-size: clamp(22px, 2.2vw, 26px);
color: var(--ri);
line-height: 1.1;
margin-bottom: 18px;
letter-spacing: -.01em;
white-space: nowrap;
}
#page-intel .step-subtitle {
font-family: var(--serif);
font-style: italic;
font-size: 16px;
color: var(--rs);
margin-bottom: 18px;
}
#page-intel .step-body {
font-family: var(--cond);
font-size: 18px;
color: var(--ri);
line-height: 1.8;
opacity: .8;
flex: 1;
}
#page-intel .step-deliverables {
margin-top: 28px;
border-top: 1px solid rgba(45,74,62,.12);
padding-top: 20px;
}
#page-intel .step-deliv-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 12px;
font-weight: 700;
}
#page-intel .step-deliv-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
#page-intel .step-deliv-list li {
font-family: var(--cond);
font-size: 17px;
color: var(--ri);
padding-left: 16px;
position: relative;
opacity: .85;
}
#page-intel .step-deliv-list li::before {
content: '—';
position: absolute;
left: 0;
color: var(--rc);
font-size: 11px;
}
/* ── Engagement section (dark green) ── */
#page-intel .engagement-section {
background: var(--rs);
padding: 100px 64px;
}
#page-intel .engagement-header {
max-width: 680px;
margin-bottom: 72px;
}
#page-intel .engagement-header p {
font-family: var(--cond);
font-size: 18px;
color: rgba(242,237,228,.9);
line-height: 1.85;
margin-top: 18px;
max-width: 560px;
}
#page-intel .engagement-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: rgba(242,237,228,.06);
margin-bottom: 2px;
}
#page-intel .eng-card {
background: var(--rs);
padding: 48px 44px;
border-top: 1px solid rgba(212,168,67,.2);
position: relative;
}
#page-intel .eng-tag {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 16px;
font-weight: 700;
}
#page-intel .eng-headline {
font-family: var(--serif);
font-size: 26px;
color: var(--cream);
line-height: 1.2;
margin-bottom: 16px;
}
#page-intel .eng-headline em {
color: var(--cream);
font-style: italic;
}
#page-intel .eng-body {
font-family: var(--cond);
font-size: 18px;
color: rgba(242,237,228,.75);
line-height: 1.85;
}
/* ── Team feature callout ── */
#page-intel .team-feature {
background: var(--surface);
border-top: 3px solid var(--rc);
padding: 56px 60px;
position: relative;
margin-top: 2px;
}
#page-intel .team-feature-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
#page-intel .tf-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 16px;
font-weight: 700;
}
#page-intel .tf-headline {
font-family: var(--serif);
font-size: 38px;
color: var(--ri);
line-height: 1.12;
margin-bottom: 20px;
}
#page-intel .tf-headline em {
color: inherit;
font-style: normal;
}
#page-intel .tf-body {
font-family: var(--cond);
font-size: 15px;
color: var(--ri);
line-height: 1.85;
opacity: .8;
}
#page-intel .team-feature-right {
display: flex;
flex-direction: column;
gap: 12px;
}
#page-intel .tf-credential {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px 22px;
background: var(--cream);
border-left: 2px solid var(--rc);
}
#page-intel .tf-cred-icon {
width: 36px; height: 36px;
flex-shrink: 0;
border: 1px solid rgba(212,168,67,.2);
display: flex;
align-items: center;
justify-content: center;
}
#page-intel .tf-cred-icon svg {
width: 16px; height: 16px;
stroke: var(--rc);
fill: none;
stroke-width: 1.5;
}
#page-intel .tf-cred-title {
font-family: var(--cond);
font-size: 14px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ri);
margin-bottom: 6px;
}
#page-intel .tf-cred-body {
font-family: var(--cond);
font-size: 13px;
color: var(--ri);
line-height: 1.7;
opacity: .7;
}
/* ── Responsive ── */
#page-intel .engagement-section .display { color: var(--cream); }
#page-intel .engagement-section .display em { color: inherit; font-style: normal; }
#page-intel .engagement-section .eyebrow { color: var(--rc); }
#page-intel .engagement-section p { color: rgba(242,237,228,.85); }
#page-intel .team-feature .tf-eyebrow { color: var(--rc); }
#page-intel .team-feature p,#page-intel .tf-body,#page-intel .tf-cred-body {color:var(--ri);opacity:.8}
#page-intel .tf-cred-title {color:var(--ri)}
/* v70: eyebrow consistency. All small mono caps labels: 11/.25em/700 weight.
Color: on light bgs → forest; on dark bgs → cream (kept) or gold (kept). */
.h-mono-label, .h-card-label, .aud-tag, .baton-zone-label, .founder-mono,
.footer-col-head, .insights-hero-eyebrow, .insights-list-meta, .insights-post-meta,
.insights-back, .insights-list-readmore, .insights-nav-label,
.contact-detail-label, .cf-label-tag, .rv-mission-label, .rv-divider-label, .rv-card-num,
.rv-eyebrow, .rv-strip-cta, .eyebrow, .hero-eyebrow, .assess-bar-label, .compare-label,
.aud-pain-num, .cred-label, .h-scroll-cue, .contact-form-label,
#page-intel .hero-eyebrow, #page-intel .step-deliv-label,
#page-intel .eng-tag, #page-intel .tf-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .25em;
font-weight: 700;
text-transform: uppercase;
}
/* On light bgs (default): forest, not gold */
.h-mono-label, .h-card--before .h-card-label, .aud-tag, .footer-col-head,
.insights-list-meta, .insights-post-meta, .insights-back, .insights-list-readmore,
.insights-nav-label, .contact-detail-label, .compare-label, .aud-pain-num,
.assess-bar-label, .contact-form-label, .eyebrow, .hero-eyebrow,
#page-intel .hero-eyebrow, #page-intel .step-deliv-label,
#page-intel #page-intel .tf-eyebrow {
/* v73: .eng-tag removed from this rule — it sits on dark forest, needs gold */
color: var(--rs) !important;
}
/* ═══════════════════════════════════════════════════════════════
v75 FINAL OVERRIDES — eyebrow/headline spacing + engagement
restyle + core values bold + Engagement Model eyebrow color.
These rules sit at the end of the stylesheet so they win the
cascade against the layered legacy rules in earlier blocks.
═══════════════════════════════════════════════════════════════ */
/* (1) Eyebrow rhythm — single consistent spacing module
Applies to all eyebrow/overline classes regardless of context. */
.eyebrow, .hero-eyebrow,
.h-mono-label, .h-card-label,
.aud-tag, .baton-zone-label, .founder-mono,
.footer-col-head,
.contact-detail-label, .contact-form-label, .cf-label-tag,
.cred-label,
.insights-hero-eyebrow, .insights-list-meta, .insights-post-meta,
.insights-back, .insights-list-readmore, .insights-nav-label,
.rv-eyebrow, .rv-mission-label, .rv-divider-label,
.rv-card-num,
.rv-strip-cta,
.assess-bar-label,
.aud-pain-num,
.eng-tag,
#page-intel .hero-eyebrow,
#page-intel .step-deliv-label,
#page-intel .eng-tag,
#page-intel .tf-eyebrow {
font-family: var(--relay-font-sans) !important;
font-weight: 700;
font-size: 12px;
line-height: 1;
letter-spacing: .22em;
text-transform: uppercase;
display: block;
margin: 0;
}
@media(max-width:900px){
#page-intel .process-intro .display {font-size:32px !important}
}
@media(max-width:680px){
#page-intel .process-intro .display {font-size:24px !important}
}
@media(max-width:520px){
#page-intel .process-intro .display {font-size:20px !important}
}
@media (max-width: 960px) {
#page-intel .process-steps {
grid-template-columns: 1fr;
gap: 2px;
}
#page-intel .step-connector-h {
display: none;
}
#page-intel .team-feature-inner {
grid-template-columns: 1fr;
gap: 40px;
}
#page-intel .engagement-grid {
grid-template-columns: 1fr;
}
#page-intel .process-section,
#page-intel .engagement-section {
padding: 72px 40px;
}
#page-intel .eng-card {
padding: 40px 36px;
}
}
@media (max-width: 640px) {
#page-intel .approach-hero-wrap,
#page-intel .process-section,
#page-intel .engagement-section {
padding: 60px 24px;
}
#page-intel .hero-headline { font-size: 40px; }
#page-intel .step-title { font-size: 22px; }
#page-intel .team-feature { padding: 40px 24px; }
}
@media (max-width: 640px) {
/* ── How We Work — engagement grid ── */
#page-intel .engagement-grid { grid-template-columns: 1fr; }
#page-intel .engagement-section { padding: 52px 20px; }
#page-intel .eng-headline { font-size: 22px; }
/* ── How We Work — step cards ── */
#page-intel .process-section { padding: 52px 20px; }
#page-intel .process-steps { grid-template-columns: 1fr; gap: 2px; }
#page-intel .step-card { padding: 32px 24px 36px; }
#page-intel .step-title { font-size: 22px; white-space: normal; }
#page-intel .team-feature { padding: 40px 20px; }
#page-intel .team-feature-inner { grid-template-columns: 1fr; gap: 32px; }
}
/* ═══════════════════════════════════════════════════════════
MARKET INTELLIGENCE
Rules below are scoped to #page-intel (or to classes that
exist only on that page) so nothing here can reach the rest
of the site.
═══════════════════════════════════════════════════════════ */
/* --- hero --- */
#page-intel .ii-hero { padding: 88px 64px 72px; }
#page-intel .ii-hero-text { max-width: 880px; }
#page-intel .ii-hero-sub {
font-family: var(--cond); font-size: 22px; line-height: 1.7;
color: rgba(0,0,0,.72); max-width: 640px; margin-top: 26px;
}
/* .btn-cta-dark is display:block;width:100% globally (it lives in a stacked
CTA column on Who We Serve). Here it is a standalone button. */
#page-intel .ii-hero-cta { margin-top: 36px; }
#page-intel .ii-hero-cta .btn-cta-dark,
#page-intel .ii-cta-band .btn-cta-dark {
display: inline-block; width: auto; padding-left: 44px; padding-right: 44px;
}
/* --- proof stats --- */
/* --- questions (3-up over the engagement grid) --- */
/* an unscoped `.engagement-grid { grid-template-columns: 1fr 1fr !important }`
sits later in the sheet, so these need !important to win */
/* --- formats --- */
#page-intel .ii-format-what em { font-style: italic; }
/* --- why relay --- */
/* --- related field notes --- */
#page-intel .ii-related { background: var(--rs); padding: 88px 64px; }
#page-intel .ii-related-inner { max-width: 1200px; margin: 0 auto; }
/* a global rule pins .h-mono-label to var(--rs) with !important, which is
invisible on the forest background used here */
#page-intel .ii-label-gold { color: var(--rc) !important; }
#page-intel .ii-related-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
background: rgba(242,237,228,.1); margin-top: 48px;
}
#page-intel .ii-related-card {
background: var(--rs); border: none; text-align: left; cursor: pointer;
padding: 36px 32px; display: block; width: 100%;
font: inherit; transition: background .2s;
}
#page-intel .ii-related-card:hover { background: rgba(242,237,228,.05); }
#page-intel .ii-related-tag {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--rc); font-weight: 700;
}
#page-intel .ii-related-title {
font-family: var(--serif); font-size: 22px; line-height: 1.35;
color: var(--cream); margin-top: 18px;
}
#page-intel .ii-related-more {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--rc); margin-top: 24px;
}
/* --- cta band --- */
#page-intel .ii-cta-band { background: var(--cream); padding: 96px 64px; text-align: center; }
#page-intel .ii-cta-inner { max-width: 760px; margin: 0 auto; }
#page-intel .ii-cta-band .display.light { color: var(--ri); }
#page-intel .ii-cta-band .display.light em { color: inherit; font-style: normal; }
#page-intel .ii-cta-sub {
font-family: var(--cond); font-size: 20px; line-height: 1.7;
color: rgba(0,0,0,.72); margin: 22px 0 34px;
}
/* --- responsive --- */
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
#page-intel .ii-hero { padding: 64px 32px 56px; }
#page-intel .ii-reach, #page-intel .ii-team, #page-intel .ii-related,
#page-intel .ii-cta-band { padding-left: 32px; padding-right: 32px; }
#page-intel .ii-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
#page-intel .ii-hero { padding: 52px 20px 44px; }
#page-intel .ii-hero .display { font-size: 38px !important; }
#page-intel .ii-hero-sub { font-size: 19px; }
#page-intel .ii-reach, #page-intel .ii-team, #page-intel .ii-related,
#page-intel .ii-cta-band { padding-left: 20px; padding-right: 20px; }
#page-intel .ii-reach, #page-intel .ii-team, #page-intel .ii-related { padding-top: 64px; padding-bottom: 64px; }
#page-intel .ii-cta-band .display { font-size: 32px !important; }
}
/* ── engagement model 05 spans the full row on How We Work ── */
#page-approach .eng-card-wide { grid-column: 1 / -1; }
#page-approach .eng-link {
background: none; border: none; padding: 0; cursor: pointer;
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--rc); font-weight: 700;
margin-top: 22px; display: inline-block;
}
#page-approach .eng-link:hover { color: var(--cream); }
@media (max-width: 900px) {
#page-approach .eng-card-wide { grid-column: auto; }
}
/* ═══════════════════════════════════════════════════════════
NAV FIT
The nav went from six items to seven. The desktop nav only
ever fitted down to about 1150px; below that the "Start a
Conversation" button was already running off the right edge
on the live site (measured 1015px of content in a 1000px
viewport before this change). Rather than let it overflow
further, the nav now tightens once, then hands over to the
existing hamburger while there is still room to spare.
═══════════════════════════════════════════════════════════ */
/* The nav keeps its six labels and its original type and spacing. The only
change is where it gives way, because the desktop nav was already running
off the right edge below roughly 1015px before any of this work (the CTA
button was the part that overflowed). It now hands over to the existing
hamburger while there is still room. Thresholds are measured, not guessed:
brand + labels + CTA + padding, at the padding each breakpoint applies. */
.nav-links .nav-link { white-space: nowrap; }
@media (max-width: 1260px) {
nav > .nav-cta.desktop-only { display: none; }
}
@media (max-width: 1060px) {
.nav-links { display: none !important; }
.nav-toggle { display: flex !important; }
}
/* ── "Explore Industry Intelligence" under each audience tab ── */
.post-mi-cta {
margin-top: 40px; padding-top: 26px;
border-top: 1px solid rgba(45,74,62,.18);
font-family: var(--cond); font-size: 19px; color: rgba(0,0,0,.72);
}
.post-mi-link {
background: none; border: none; padding: 0; cursor: pointer;
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--rs); font-weight: 700;
white-space: nowrap;
}
.post-mi-link:hover { color: var(--rc); }
/* Industry Intelligence, round 3: the method intro gained a standfirst, and the
DSO Compass mention is the first inline link inside a .ii-why-body. */
#page-intel .ii-method-sub {
font-family: var(--cond); font-size: 19px; line-height: 1.8;
color: rgba(0,0,0,.72); margin-top: 22px; max-width: 640px;
}
/* the why-cards carry more copy now, so give the middle one room */
/* ═══════════════════════════════════════════════════════════
INDUSTRY INTELLIGENCE, round 4
Reach band, six-up use-case grid, and the team pointer.
All scoped to #page-intel.
═══════════════════════════════════════════════════════════ */
/* --- reach band --- */
#page-intel .ii-reach { background: var(--cream); padding: 92px 64px; }
#page-intel .ii-reach-inner {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: start;
}
#page-intel .ii-reach-stat {
font-family: var(--serif); font-size: 76px; line-height: 1;
color: var(--ri); letter-spacing: -.02em; margin-top: 26px;
}
#page-intel .ii-reach-stat-label {
font-family: var(--cond); font-size: 19px; line-height: 1.65;
color: rgba(0,0,0,.72); margin-top: 16px;
}
#page-intel .ii-reach-stat-label a {
color: var(--ri); font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
text-decoration-color: var(--rc); text-decoration-thickness: 1px;
}
#page-intel .ii-reach-stat-label a:hover { color: var(--rc); }
#page-intel .ii-reach-cards { display: grid; gap: 34px; }
#page-intel .ii-reach-card-title {
font-family: var(--serif); font-size: 23px; color: var(--ri); line-height: 1.25;
}
#page-intel .ii-reach-card p {
font-family: var(--cond); font-size: 18px; line-height: 1.8;
color: rgba(0,0,0,.75); margin-top: 12px;
}
/* --- use-case grid (six up over the engagement grid) --- */
#page-intel .ii-use-grid { grid-template-columns: repeat(3, 1fr) !important; }
#page-intel .ii-use-grid .eng-card { border-top: 1px solid rgba(212,168,67,.2); }
/* --- who does the asking --- */
#page-intel .ii-team { background: var(--surface); padding: 92px 64px; }
#page-intel .ii-team-inner { max-width: 760px; margin: 0 auto; text-align: center; }
#page-intel .ii-team-inner .gold-rule { margin: 16px auto 0; }
#page-intel .ii-team-headline {
font-family: var(--serif); font-size: 40px; color: var(--ri);
line-height: 1.15; margin-top: 26px;
}
#page-intel .ii-team-body {
font-family: var(--cond); font-size: 20px; line-height: 1.75;
color: rgba(0,0,0,.75); margin-top: 20px;
}
#page-intel .ii-team-link {
background: none; border: none; padding: 0; cursor: pointer;
font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--rs); font-weight: 700;
margin-top: 28px; display: inline-block;
}
#page-intel .ii-team-link:hover { color: var(--rc); }
/* --- responsive --- */
@media (max-width: 1100px) {
#page-intel .ii-reach-inner { grid-template-columns: 1fr; gap: 44px; }
#page-intel .ii-reach-cards { grid-template-columns: 1fr 1fr; gap: 32px; }
#page-intel .ii-use-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 900px) {
#page-intel .ii-reach { padding: 72px 32px; }
#page-intel .ii-team { padding: 72px 32px; }
#page-intel .ii-reach-cards { grid-template-columns: 1fr; }
#page-intel .ii-use-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
#page-intel .ii-reach { padding: 56px 20px; }
#page-intel .ii-team { padding: 56px 20px; }
#page-intel .ii-reach-stat { font-size: 58px; }
#page-intel .ii-team-headline { font-size: 30px; }
#page-intel .ii-team-body { font-size: 18px; }
}
/* ── Team grid: hairline under every row except the last ──
Three columns above 1200px, two between 901 and 1200, one below that
(the single-column case was already handled). A card is in the final row
when the number of cards after it is smaller than the space left in its
row, which is what the nth-last-child pairings below say. ── */
@media (min-width: 1201px) {
.founders-grid.team-grid .founder-card:nth-child(n) { border-bottom: 1px solid rgba(45,74,62,.08); }
.founders-grid.team-grid .founder-card:nth-child(3n+1):nth-last-child(-n+3),
.founders-grid.team-grid .founder-card:nth-child(3n+2):nth-last-child(-n+2),
.founders-grid.team-grid .founder-card:nth-child(3n):nth-last-child(-n+1) { border-bottom: none; }
}
@media (max-width: 1200px) and (min-width: 901px) {
.founders-grid.team-grid .founder-card:nth-child(n) { border-bottom: 1px solid rgba(45,74,62,.08); }
.founders-grid.team-grid .founder-card:nth-child(2n+1):nth-last-child(-n+2),
.founders-grid.team-grid .founder-card:nth-child(2n):nth-last-child(-n+1) { border-bottom: none; }
}
/* ── Who We Serve, round 7 ──
The CTA column is a single button now, so it centres rather than
stretching, and the DSO tab carries named offerings with a standfirst. ── */
/* One button now, so the old 1fr/360px split leaves it stranded in a side
column. The CTA sits full width under the list and centres instead. */
#page-audience .aud-panel-bottom { grid-template-columns: 1fr !important; }
#page-audience .aud-cta-block {
width: 100%; padding-top: 8px; padding-bottom: 8px;
border-top: 1px solid rgba(45,74,62,.1);
}
.aud-cta-block .btn-cta-dark {
display: inline-block !important;
width: auto !important;
padding-left: 46px !important;
padding-right: 46px !important;
}
#page-audience .aud-panel-lede {
font-family: var(--cond); font-size: 20px; line-height: 1.7;
color: rgba(0,0,0,.72); max-width: 660px; margin: 22px 0 0;
}
#page-audience .aud-offer-list .aud-pain-item { align-items: flex-start; }
#page-audience .aud-offer-name {
display: block;
font-family: var(--serif); font-size: 23px; line-height: 1.25;
color: var(--ri); margin-bottom: 10px; letter-spacing: -.005em;
}
#page-audience .aud-offer-list .aud-pain-text { display: block; }
@media (max-width: 720px) {
#page-audience .aud-panel-lede { font-size: 18px; margin-bottom: 26px; }
#page-audience .aud-offer-name { font-size: 20px; }
/* Below 720px the old design hid this button and let the assessment button
be the single mobile CTA. The assessment button is gone, so without this
the panel would have no call to action on a phone at all. */
#page-audience .aud-cta-block .btn-cta-dark {
display: inline-block !important;
width: auto !important;
max-width: 100%;
padding-left: 32px !important;
padding-right: 32px !important;
}
}
/* ── Industry Intelligence hero, round 9 ──
Joins the family of split heroes (How We Work, Who We Serve, About,
Contact) so it shares their grid, padding and 420px floor. Only the two
elements this hero has and the others do not need anything here. ── */
.approach-hero-wrap.ii-hero-split { padding: 0 !important; }
#page-intel .ii-hero-split .ii-hero-text { max-width: none; }
#page-intel .ii-hero-split .ii-hero-sub { max-width: 560px; }
@media (max-width: 900px) {
#page-intel .ii-hero-split .ii-hero-sub { max-width: none; }
}
/* ── Serpentine hero — uses brand --rs (forest) and --rc (gold) ── */
.relay-hero {
/* v105: 100vh — no more scroll-driven animation, so the only height we need
is one viewport for the sticky stage. */
height: 100vh;
position: relative;
/* v106: tan background (Aged Cream). Was --surface (lighter); the lighter
surface tone is now used by the section below to match the nav. */
background: var(--cream);
color: #000;
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}
.relay-hero__stage {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* v106: tighter vertical padding (was 64 / 20). 48px top still clears the
62px sticky nav since label1 starts at SVG y=30 and renders below nav. */
padding: 48px 24px 14px;
}
.relay-hero__svg {
width: min(88vw, 1300px);
height: auto;
/* v106: max-height matches new padding sum (48 + 14 = 62). */
max-height: calc(100vh - 62px);
display: block;
}
.relay-hero__path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* v103: three gold rails are visible on page load. JS animates their `d`
attributes to morph between spread (start) and merged-on-center (end). */
.relay-hero__path--gold {
stroke: var(--rc);
stroke-width: 3;
}
.relay-hero__label-bg { fill: var(--surface); } /* v67: matches new --surface hero bg */
.relay-hero__label {
/* v113: Newsreader for the hero. Designed for on-screen reading with a
mild literary warmth — fewer of Fraunces's dramatic display flourishes,
so the headline reads as confident and contemporary rather than ornate.
Variation axes: opsz 6..72 (using max for display), wght 200..800. */
fill: #000;
font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
font-variation-settings: 'opsz' 72;
font-weight: 400;
font-size: 43px;
/* Newsreader has open native spacing; zero tracking reads natural at display sizes. */
letter-spacing: 0;
opacity: 1;
transform: none;
}
.relay-hero__label.is-visible { opacity: 1; } /* v53: kept for compat — labels are now opacity:1 by default */
.relay-hero__cue {
position: fixed;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 60;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--ri); /* v66: dark on cream */
opacity: .7;
pointer-events: none;
transition: opacity .5s ease;
}
.relay-hero__cue.is-gone { opacity: 0; }
.relay-hero__cue-line {
width: 1.5px;
height: 40px;
background: var(--ri); /* v66: dark on cream */
opacity: .4;
animation: relayCuePulse 4.2s ease-in-out infinite;
transform-origin: top;
}
@keyframes relayCuePulse {
0%,100% { transform: scaleY(.4); opacity: .2; }
50% { transform: scaleY(1); opacity: .55; }
}
/* Mobile (≤720px wide):
bump viewBox font-size so rendered text stays legible (~19–22px)
and let SVG occupy more of the viewport */
@media (max-width: 720px) {
/* v111: mobile hero shortened to 70vh (was 100vh). The animation only needs
the stage area (~95vw+24px) plus room for the scroll cue. The extra 30vh
cut here is what shows as a peek of the next section at scrollY=0 and
means a normal mobile scroll fully reveals "The problem isn't the
technology" — was previously a full viewport of empty cream. */
.relay-hero { height: 70vh; }
.relay-hero__label { font-size: 46px; }
.relay-hero__svg { width: 110vw; max-height: calc(100vh - 20px); }
.relay-hero__stage {
height: 100vh;
padding: 16px 0 4px;
align-items: center;
}
}
/* Landscape phones / very short viewports — claw back vertical room */
@media (max-height: 500px) {
.relay-hero__stage { padding: 36px 16px 12px; }
.relay-hero__svg { max-height: calc(100vh - 48px); }
}
@media (prefers-reduced-motion: reduce) {
.relay-hero__label { transform: none; } /* v53 reduced-motion: labels stay visible (same as default) */
.relay-hero__cue-line { animation: none; }
}
/* ── Shared label/eyebrow ───────────────────────────── */
.h-mono-label{
font-family:var(--mono);
font-size:11px;
letter-spacing:.28em;
text-transform:uppercase;
font-weight:700;
color:var(--ri);
opacity:.85;
margin-bottom:32px;
}
.h-mono-label--gold{ color:var(--rc); opacity:1; }
/* ── Fade overrides — slow + slight rise, staggered ── */
[data-h-fade]{
opacity:0;
transform:translateY(20px);
transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
}
[data-h-fade].visible{ opacity:1; transform:translateY(0); }
/* Stagger hero lines */
.h-hero-line[data-h-fade]:nth-of-type(1){ transition-delay:.05s; }
.h-hero-line[data-h-fade]:nth-of-type(2){ transition-delay:.28s; }
.h-scroll-cue[data-h-fade]{ transition-delay:.55s; }
/* Stagger compare cards */
.h-card[data-h-fade]:nth-of-type(1){ transition-delay:.05s; }
.h-card[data-h-fade]:nth-of-type(2){ transition-delay:.20s; }
/* ── HERO ─────────────────────────────────────────── */
.h-hero{
background:var(--cream);
padding:200px 64px 160px;
display:flex;
align-items:center;
position:relative;
}
.h-hero-inner{ max-width:1200px; width:100%; margin:0 auto; }
.h-hero-title{
font-family:var(--serif);
font-weight:400;
color:#000;
line-height:1.06;
letter-spacing:-.005em;
font-size:clamp(44px, 6.2vw, 92px);
margin-bottom:96px;
max-width:1080px;
}
.h-hero-line{ display:block; }
.h-hero-line--lead{
font-style:italic;
color:var(--rs);
}
.h-hero-line--sub{
margin-top:48px;
font-size:clamp(26px, 2.8vw, 44px);
line-height:1.25;
font-style:normal;
color:#000;
}
.h-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.h-hero-cta .btn-primary{
font-size:14px;
letter-spacing:.18em;
padding:18px 36px;
}
.h-scroll-cue{
position:absolute;
left:50%;
bottom:48px;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
font-family:var(--mono);
font-size:13px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--ri);
opacity:.7;
}
.h-scroll-line{
width:1.5px;
height:56px;
background:var(--ri);
opacity:.5;
animation:hScrollPulse 4.2s ease-in-out infinite;
transform-origin:top;
}
@keyframes hScrollPulse{
0%,100%{ transform:scaleY(.4); opacity:.2; }
50% { transform:scaleY(1); opacity:.6; }
}
/* ── Section band (between hero and compare) ─────── */
.h-gold-divider{
height:1px;
background:var(--rs);
width:100%;
}
/* ── COMPARE — side-by-side cards ─────────────────── */
.h-compare{
/* v106: lighter surface — matches sticky nav bg. The hero (tan) sits above;
this section now contrasts as the "lighter" page break. */
background:var(--surface);
padding:128px 64px;
}
.h-compare-inner{ max-width:1200px; margin:0 auto; }
.h-compare-headline{
font-family:var(--serif);
font-weight:400;
font-size:clamp(36px, 4.6vw, 56px);
line-height:1.12;
letter-spacing:-.005em;
color:#000;
margin-bottom:48px;
max-width:920px;
}
.h-compare-headline em{
font-style:italic;
color:#000;
font-weight:400;
display:block;
margin-top:24px;
font-size:clamp(26px, 3.2vw, 40px);
line-height:1.2;
}
.h-compare-lede{
font-family:var(--cond);
font-size:clamp(19px, 1.5vw, 24px);
line-height:1.6;
color:var(--ri);
opacity:.78;
margin-bottom:64px;
max-width:none;
letter-spacing:.02em;
}
.h-compare-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:rgba(45,74,62,.18); /* hairline divider between cards */
}
.h-card{
padding:56px 48px 64px;
display:flex;
flex-direction:column;
}
.h-card--before{
/* v106: tan card on the new lighter h-compare section (was --surface, which
would now blend into the section bg). After-card stays forest. */
background:var(--cream);
}
.h-card--after{
background:var(--rs);
}
.h-card-label{
font-family:var(--mono);
font-size:11px;
letter-spacing:.28em;
text-transform:uppercase;
font-weight:700;
margin-bottom:28px;
}
.h-card--before .h-card-label{ color:var(--ri); opacity:.85; }
.h-card--after .h-card-label{ color:var(--rc); }
.h-card-headline{
font-family:var(--serif);
font-weight:400;
font-size:clamp(28px, 2.8vw, 40px);
line-height:1.18;
margin-bottom:36px;
letter-spacing:-.005em;
min-height:2.36em;
}
.h-card--before .h-card-headline{ color:#000; }
.h-card--before .h-card-headline em{ color:inherit; font-style:normal; opacity:1; }
.h-card--after .h-card-headline{ color:var(--cream); }
.h-card--after .h-card-headline em{ color:inherit; font-style:normal; }
.h-card-bullets{
list-style:none;
padding:0;
margin:0;
border-top:1px solid;
flex:1;
display:grid;
grid-template-rows:repeat(6, 1fr);
}
.h-card--before .h-card-bullets{ border-color:rgba(45,74,62,.18); }
.h-card--after .h-card-bullets{ border-color:rgba(242,237,228,.16); }
.h-card-bullets li{
font-family:var(--cond);
font-size:clamp(20px, 1.55vw, 24px);
line-height:1.5;
letter-spacing:.01em;
padding:12px 0 12px 30px;
position:relative;
display:flex;
align-items:center;
}
.h-card--before .h-card-bullets li{ color:var(--ri); }
.h-card--after .h-card-bullets li{ color:var(--cream); }
.h-card-bullets li::before{
content:"";
position:absolute;
left:6px;
top:50%;
transform:translateY(-50%);
width:6px;
height:6px;
border-radius:50%;
}
.h-card--before .h-card-bullets li::before{ background:var(--rc); opacity:.75; }
.h-card--after .h-card-bullets li::before{ background:var(--rc); }
/* ── BRIDGE — name what we do ─────────────────────── */
.h-bridge{
background:var(--cream);
padding:140px 64px;
/* v69: removed border-top — no line between Problem and "Who we are" */
border-bottom:1px solid rgba(45,74,62,.08);
}
.h-bridge-inner{ max-width:1080px; margin:0 auto; }
.h-bridge-headline{
font-family:var(--serif);
font-weight:400;
font-size:clamp(32px, 4vw, 50px);
line-height:1.18;
color:#000;
margin-bottom:48px;
max-width:980px;
letter-spacing:-.005em;
}
.h-bridge-headline em{
font-style:normal;
color:inherit;
font-weight:inherit;
}
.h-bridge-body{
border-left:3px solid var(--rc);
padding:8px 0 8px 28px;
max-width:780px;
}
.h-bridge-body p{
font-family:var(--cond);
font-size:clamp(19px, 1.4vw, 22px);
line-height:1.75;
color:var(--ri);
margin-bottom:18px;
letter-spacing:.015em;
}
.h-bridge-body p:last-child{ margin-bottom:0; }
.h-bridge-emph em{
font-family:var(--serif);
font-style:italic;
color:#000;
font-size:1.05em;
}
.h-bridge-cta{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:40px;
padding-left:31px; /* align with body text past the gold border */
}
/* ── Responsive ───────────────────────────────────── */
@media (max-width: 880px){
.h-hero{ padding:144px 28px 120px; }
.h-compare{ padding:80px 24px; }
.h-compare-grid{ grid-template-columns:1fr; }
.h-card{ padding:44px 28px 48px; }
.h-card-headline{ min-height:0; }
.h-card-bullets{ display:block; }
.h-bridge{ padding:96px 28px; }
.h-bridge-body{ padding-left:18px; }
.h-bridge-cta{ padding-left:18px; }
.h-bridge-cta button{
width:100%;
text-align:center;
display:block;
}
.h-hero-cta button{
width:100%;
text-align:center;
display:block;
}
.h-scroll-cue{ display:none; }
}
/* v73: engagement-section cards mirror About rv-card pattern (eyebrow + headline + small gold rule + body) */
.eng-headline {
font-size: clamp(19px, 2vw, 23px) !important;
margin-bottom: 0 !important;
color: var(--cream);
}
.eng-headline::after {
content: "";
display: block;
width: 32px;
height: 2px;
background: var(--rc);
margin: 16px 0;
}
.eng-tag {
margin-bottom: 18px !important;
font-size: 11px !important;
letter-spacing: .22em !important;
}
.eng-body {
font-size: 18px !important;
color: rgba(242,237,228,.85) !important;
letter-spacing: .03em;
line-height: 1.75;
}
/* ═══════════════════════════════════════════════════════════════
v75 FINAL OVERRIDES — eyebrow/headline spacing + engagement
restyle + core values bold + Engagement Model eyebrow color.
These rules sit at the end of the stylesheet so they win the
cascade against the layered legacy rules in earlier blocks.
═══════════════════════════════════════════════════════════════ */
/* (1) Eyebrow rhythm — single consistent spacing module
Applies to all eyebrow/overline classes regardless of context. */
.eyebrow, .hero-eyebrow,
.h-mono-label, .h-card-label,
.aud-tag, .baton-zone-label, .founder-mono,
.footer-col-head,
.contact-detail-label, .contact-form-label, .cf-label-tag,
.cred-label,
.insights-hero-eyebrow, .insights-list-meta, .insights-post-meta,
.insights-back, .insights-list-readmore, .insights-nav-label,
.rv-eyebrow, .rv-mission-label, .rv-divider-label,
.rv-card-num,
.rv-strip-cta,
.assess-bar-label,
.aud-pain-num,
.eng-tag,
#page-approach .hero-eyebrow,
#page-approach .step-deliv-label,
#page-approach .eng-tag,
#page-approach .tf-eyebrow {
font-family: var(--relay-font-sans) !important;
font-weight: 700;
font-size: 12px;
line-height: 1;
letter-spacing: .22em;
text-transform: uppercase;
display: block;
margin: 0;
}
/* Gold rule sitting under an eyebrow — consistent margins everywhere */
.gold-rule,
.audience-hero-split-text .gold-rule,
.about-hero-split-text .gold-rule,
.contact-hero-split-text .gold-rule,
.approach-hero-split-text .gold-rule {
display: block;
width: 48px;
height: 2px;
background: var(--rc);
border: 0;
/* 16px between eyebrow and rule, 28px between rule and next element */
margin: 16px 0 28px !important;
}
/* Headlines that follow an eyebrow/rule pair — no top margin */
.eyebrow + .gold-rule + *,
.hero-eyebrow + .gold-rule + *,
.h-mono-label + .gold-rule + *,
.rv-eyebrow + .gold-rule + * {
margin-top: 0;
}
/* (4) Engagement Model eyebrow on dark forest — restore gold */
.engagement-section .eyebrow,
.engagement-header .eyebrow {
color: var(--rc) !important;
}
/* (5) Engagement section cards → match .rv-card pattern from About */
.engagement-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 2px !important;
background: rgba(242,237,228,.08); /* hairline grid between cards */
margin-bottom: 0 !important;
}
@media (max-width: 860px) {
.engagement-grid { grid-template-columns: 1fr !important; }
}
.eng-card {
background: var(--rs) !important;
padding: 36px 40px 40px !important;
border: 0 !important;
position: relative;
}
.eng-card[data-num]::before {
content: attr(data-num);
display: block;
font-family: var(--relay-font-sans);
font-weight: 700;
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 18px;
opacity: .85;
}
/* Hide the old text eyebrow on engagement cards — the data-num pseudo-element
replaces it (mirrors rv-card pattern of just a number eyebrow) */
.eng-card .eng-tag {
display: none !important;
}
.eng-headline {
font-family: var(--relay-font-sans) !important;
font-size: clamp(19px, 2vw, 23px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: var(--cream) !important;
letter-spacing: -.005em;
margin: 0 0 14px 0 !important;
}
.eng-headline::after {
content: "";
display: block;
width: 32px;
height: 2px;
background: rgba(242,237,228,.22);
margin: 18px 0 18px;
}
.eng-body {
font-family: var(--relay-font-serif) !important;
font-size: 17px !important;
line-height: 1.6 !important;
color: var(--cream) !important;
opacity: .85;
letter-spacing: 0;
}
/* (6) Core values card titles — bolder */
.rv-card-title {
font-family: var(--relay-font-sans) !important;
font-weight: 700 !important;
font-size: clamp(20px, 2vw, 24px) !important;
line-height: 1.25 !important;
color: var(--cream) !important;
letter-spacing: -.01em;
margin: 0 0 14px 0 !important;
}
.rv-card-num {
margin-bottom: 16px !important;
opacity: .85;
}
.rv-card-rule {
width: 32px;
height: 2px;
background: rgba(242,237,228,.22) !important;
margin: 0 0 18px !important;
}
.rv-card-body {
font-family: var(--relay-font-serif) !important;
font-size: 17px !important;
line-height: 1.6 !important;
color: var(--cream) !important;
opacity: .85;
letter-spacing: 0;
}
/* General headline-after-eyebrow spacing for the rest of the site
so titles sit at consistent distance from eyebrows. */
.hero-eyebrow + .gold-rule { margin-top: 16px !important; }
.aud-tag + *,
.h-card-label + *,
.h-mono-label + *,
.rv-eyebrow + *,
.insights-list-meta + *,
.insights-post-meta + *,
.insights-hero-eyebrow + .gold-rule { margin-top: 16px !important; }
/* ═══════════════════════════════════════════════════════════════
v76 HERO SPACING RESET — single source of truth for all heros.
Targets: .audience-hero-split-text, .about-hero-split-text,
.contact-hero-split-text, .approach-hero-split-text.
Resets all conflicting margin rules from earlier blocks.
═══════════════════════════════════════════════════════════════ */
/* Split-hero text container — explicit padding + space-between */
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
padding: 64px 64px 56px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 0 !important;
}
/* Eyebrow — first element, no top margin */
.audience-hero-split-text > .eyebrow,
.about-hero-split-text > .eyebrow,
.contact-hero-split-text > .eyebrow,
.approach-hero-split-text > .eyebrow {
margin: 0 !important;
}
/* Gold rule directly after the hero eyebrow — tight spacing */
.audience-hero-split-text > .gold-rule,
.about-hero-split-text > .gold-rule,
.contact-hero-split-text > .gold-rule,
.approach-hero-split-text > .gold-rule {
width: 48px !important;
height: 2px !important;
background: var(--rc) !important;
border: 0 !important;
margin: 14px 0 0 !important;
display: block !important;
}
/* Display headline directly after the gold rule */
.audience-hero-split-text > .display,
.about-hero-split-text > .display,
.contact-hero-split-text > .display,
.approach-hero-split-text > .display {
margin: 24px 0 0 !important;
}
/* Sub-text after the headline */
.audience-hero-split-text .hero-sub-text,
.about-hero-split-text .hero-sub-text,
.contact-hero-split-text .hero-sub-text,
.approach-hero-split-text .hero-sub-text {
margin: 32px 0 0 !important;
}
/* Buttons (audience switcher specifically) sit at bottom via space-between */
.audience-hero-split-text .aud-switcher {
margin: 0 !important;
}
/* Mobile: tighten padding but keep rhythm */
@media (max-width: 720px) {
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
padding: 44px 32px 40px !important;
}
}
@media (max-width: 480px) {
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
padding: 36px 20px 32px !important;
}
}
/* Insights hero (full-width, no split) — match the same rhythm */
.insights-hero {
padding: 96px 64px 80px !important;
}
.insights-hero-eyebrow {
margin: 0 !important;
}
.insights-hero .gold-rule {
width: 48px !important;
height: 2px !important;
background: var(--rc) !important;
border: 0 !important;
margin: 14px 0 0 !important;
display: block !important;
}
.insights-hero-title {
margin: 24px 0 0 !important;
}
@media (max-width: 720px) {
.insights-hero { padding: 64px 24px 48px !important; }
}
/* Remove the spurious gold-divider strip between insights hero and list */
.h-gold-divider { display: none !important; }
/* ═══════════════════════════════════════════════════════════════
v77 HERO SPACING — FINAL OVERRIDE
Replaces the v76 module's space-between approach (which was being
defeated by the parent grid's fixed 500px height).
Now: top-aligned column with deterministic margins between elements.
═══════════════════════════════════════════════════════════════ */
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
padding: 64px 64px 56px !important;
display: flex !important;
flex-direction: column !important;
/* v77: was space-between — caused giant empty gaps when parent had
fixed height. flex-start collapses to content + explicit margins. */
justify-content: flex-start !important;
gap: 0 !important;
}
/* Image column matches the text column visually with explicit height
so the grid row isn't collapsed when text content is shorter. */
.audience-hero-split-image,
.about-hero-split-image,
.contact-hero-split-image,
.approach-hero-split-image {
min-height: 100%;
}
/* Eyebrow — first, no margin */
.audience-hero-split-text > .eyebrow,
.about-hero-split-text > .eyebrow,
.contact-hero-split-text > .eyebrow,
.approach-hero-split-text > .eyebrow {
margin: 0 !important;
}
/* Gold rule — 14px below eyebrow, no margin below (next element claims its own top margin) */
.audience-hero-split-text > .gold-rule,
.about-hero-split-text > .gold-rule,
.contact-hero-split-text > .gold-rule,
.approach-hero-split-text > .gold-rule {
width: 48px !important;
height: 2px !important;
background: var(--rc) !important;
border: 0 !important;
margin: 14px 0 0 !important;
display: block !important;
}
/* Display headline — 24px below the rule */
.audience-hero-split-text > .display,
.about-hero-split-text > .display,
.contact-hero-split-text > .display,
.approach-hero-split-text > .display {
margin: 24px 0 0 !important;
}
/* Sub-text after headline — 24px below */
.audience-hero-split-text .hero-sub-text,
.about-hero-split-text .hero-sub-text,
.contact-hero-split-text .hero-sub-text,
.approach-hero-split-text .hero-sub-text {
margin: 24px 0 0 !important;
}
/* Audience buttons — 40px below the headline (enough breathing room but no chasm) */
.audience-hero-split-text .aud-switcher {
margin: 40px 0 0 !important;
}
/* Mobile padding */
@media (max-width: 720px) {
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
padding: 44px 32px 40px !important;
}
.audience-hero-split-text .aud-switcher {
margin-top: 32px !important;
}
}
@media (max-width: 480px) {
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
padding: 36px 20px 32px !important;
}
}
/* Insights hero (full-width, no split) — same rhythm */
.insights-hero {
padding: 96px 64px 80px !important;
}
.insights-hero-eyebrow {
margin: 0 !important;
}
.insights-hero .gold-rule {
width: 48px !important;
height: 2px !important;
background: var(--rc) !important;
border: 0 !important;
margin: 14px 0 0 !important;
display: block !important;
}
.insights-hero-title {
margin: 24px 0 0 !important;
}
@media (max-width: 720px) {
.insights-hero { padding: 64px 24px 48px !important; }
}
.h-gold-divider { display: none !important; }
/* ═══════════════════════════════════════════════════════════════
v78 — hero heights match How We Work + audience button spacing
═══════════════════════════════════════════════════════════════ */
/* v102: lock all split heroes (How We Work, Who We Serve, About, Contact) to the same
height. Each hero's image has a different natural aspect ratio; with object-fit:cover
and no explicit panel height, the image AR was driving the panel height, so the four
heroes ended up between 360px (How We Work) and 407.5px (Who We Serve). Setting a
shared min-height greater than the tallest natural fill (~408px) makes them uniform —
images crop via object-fit:cover. */
.approach-hero-split,
.audience-hero-split,
.about-hero-split,
.contact-hero-split {
min-height: 420px !important;
}
/* Image columns: keep filling the row */
.approach-hero-split-image,
.audience-hero-split-image,
.about-hero-split-image,
.contact-hero-split-image {
min-height: 100% !important;
}
/* (2) Audience: buttons sit much lower below headline */
.audience-hero-split-text .aud-switcher {
margin: 88px 0 0 !important;
}
@media (max-width: 720px) {
.audience-hero-split-text .aud-switcher {
margin: 56px 0 0 !important;
}
}
/* (3) Insights list — left-aligned, not centered */
.insights-list-inner {
max-width: 1200px !important;
margin: 0 !important;
padding: 0 64px !important;
}
@media (max-width: 720px) {
.insights-list-inner { padding: 0 24px !important; }
}
.insights-list-wrap {
padding: 80px 0 120px !important;
}
@media (max-width: 720px) {
.insights-list-wrap { padding: 56px 0 80px !important; }
}
/* (4) "Who we are" section width matches "The problem isn't the technology" */
.h-bridge-inner { max-width: 1200px !important; }
/* (5) Footer link spacing */
.footer-link {
margin-bottom: 18px !important;
line-height: 1.4 !important;
letter-spacing: .02em !important;
}
.footer-col-head {
margin-bottom: 22px !important;
}
/* (6) Why Relay Exists — restyle to match Engagement Model header pattern */
/* Hide the original Mission box + "Our values" divider */
.rv-section .rv-mission-wrap,
.rv-section .rv-divider {
display: none !important;
}
/* Build a header block matching engagement-section's: eyebrow + gold rule
+ display headline + body intro. Apply via existing .rv-eyebrow + a synthetic
pseudo-rule beneath it. But the cleanest approach is to inject HTML — done
in the build script below. */
.rv-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 100px 64px !important;
}
.rv-eyebrow {
margin: 0 0 14px !important;
color: var(--rc) !important;
}
.rv-section-headline {
font-family: var(--relay-font-sans);
font-weight: 700;
font-size: clamp(36px, 4.6vw, 56px);
line-height: 1.12;
letter-spacing: -.02em;
color: var(--cream);
margin: 24px 0 18px;
max-width: 900px;
}
.rv-section-lede {
font-family: var(--relay-font-serif);
font-weight: 400;
font-size: clamp(19px, 1.5vw, 22px);
line-height: 1.6;
color: var(--cream);
opacity: .85;
margin: 0 0 72px;
max-width: 720px;
}
.rv-section .gold-rule {
width: 48px;
height: 2px;
background: var(--rc);
border: 0;
display: block;
margin: 14px 0 0;
}
@media (max-width: 720px) {
.rv-inner { padding: 64px 32px !important; }
.rv-section-lede { margin-bottom: 48px; }
}
/* ═══════════════════════════════════════════════════════════════
v79 FINAL OVERRIDES
1. Contact form: single column inputs (span full width)
2. Center hero text content (eyebrow + rule + headline group)
3. Lock headline sizes — never larger than design max
4. Contact form vertical spacing
5. Why Relay Exists → match engagement-model grid exactly
6. Mobile sweep — known issues across breakpoints
═══════════════════════════════════════════════════════════════ */
/* ──────── 1 & 4. CONTACT FORM ──────── */
/* Single column — inputs span full contact-right width */
.cf-grid {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* Restore vertical rhythm between fields with proper top margin on labels */
.cf-grid .contact-form-label {
margin-top: 28px !important;
}
.cf-grid > div:first-child .contact-form-label,
.cf-grid .contact-form-label:first-of-type {
margin-top: 0 !important;
}
/* Tighter inputs */
.contact-input, .contact-select, .contact-textarea {
padding: 14px 18px !important;
}
.contact-textarea {
min-height: 160px !important;
}
/* contact-right padding tighter so inputs read as full-bleed inside the section */
.contact-right {
padding: 64px 64px 56px !important;
}
/* ──────── 2. CENTER HERO TEXT ──────── */
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 72px 64px !important;
}
.audience-hero-split-text > .gold-rule,
.about-hero-split-text > .gold-rule,
.contact-hero-split-text > .gold-rule,
.approach-hero-split-text > .gold-rule {
margin: 14px auto 0 !important;
}
.audience-hero-split-text > .display,
.about-hero-split-text > .display,
.contact-hero-split-text > .display,
.approach-hero-split-text > .display {
margin: 24px auto 0 !important;
text-align: center !important;
}
.audience-hero-split-text .aud-switcher {
margin: 40px auto 0 !important;
justify-content: center !important;
}
/* ──────── 3. LOCK HEADLINE MAX SIZES ──────── */
/* Hard cap on .display headlines using inline font-size:54px — prevent
blowing past on huge screens (when text-wrap balance + flex centering
could otherwise stretch them). */
.display[style*="font-size:54px"],
.audience-hero-split-text .display,
.about-hero-split-text .display,
.contact-hero-split-text .display,
.approach-hero-split-text .display {
font-size: clamp(34px, 5vw, 54px) !important;
max-width: 900px;
line-height: 1.1 !important;
}
/* Home hero — keep clamp but ensure max enforced */
.h-hero-title {
font-size: clamp(44px, 6vw, 84px) !important;
}
.h-compare-headline {
font-size: clamp(36px, 4.6vw, 56px) !important;
}
.h-bridge-headline {
font-size: clamp(32px, 4vw, 50px) !important;
}
.insights-hero-title {
font-size: clamp(40px, 5vw, 64px) !important;
}
.insights-post-title {
font-size: clamp(32px, 4vw, 48px) !important;
}
.insights-list-title {
font-size: clamp(26px, 3vw, 36px) !important;
}
.rv-section-headline {
font-size: clamp(36px, 4.6vw, 56px) !important;
}
/* ──────── 5. WHY RELAY EXISTS — MATCH ENGAGEMENT GRID ──────── */
/* Remove card-look (subtle bg + borders) and use the engagement-grid pattern:
solid forest tiles separated by hairline cream gaps. */
.rv-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 2px !important;
background: rgba(242,237,228,.08) !important;
}
.rv-card {
background: var(--rs) !important;
padding: 36px 40px 40px !important;
border: 0 !important;
position: relative;
}
/* The internal layout of each card already matches the rv-card pattern from
the engagement section (num eyebrow → title → small cream rule → body) */
/* ──────── 6. MOBILE SWEEP ──────── */
@media (max-width: 720px) {
/* Hero text centered + tight padding */
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
padding: 44px 24px !important;
text-align: center !important;
align-items: center !important;
}
/* Audience switcher: stack centered, wrap if needed */
.audience-hero-split-text .aud-switcher {
flex-direction: column !important;
align-items: stretch !important;
width: 100%;
max-width: 320px;
margin: 32px auto 0 !important;
gap: 10px !important;
}
.audience-hero-split-text .aud-sw-btn {
width: 100% !important;
flex: 0 0 auto !important;
}
/* Contact form mobile */
.contact-right {
padding: 44px 24px !important;
}
/* Why Relay Exists / values grid stacks on mobile */
.rv-grid {
grid-template-columns: 1fr !important;
}
.rv-inner { padding: 56px 24px !important; }
/* h-bridge inner spacing */
.h-bridge { padding: 80px 24px !important; }
.h-bridge-body { padding-left: 16px !important; }
/* h-compare comfortable padding */
.h-compare { padding: 72px 24px !important; }
/* Insights list left aligned with same padding */
.insights-list-inner { padding: 0 24px !important; }
/* Footer stack */
.footer-bottom {
padding: 14px 20px !important;
flex-direction: column !important;
gap: 10px !important;
text-align: center !important;
}
/* engagement section padding */
.engagement-section { padding: 64px 24px !important; }
.engagement-grid { grid-template-columns: 1fr !important; }
/* h-card stacks */
.h-card { padding: 32px 24px !important; }
}
@media (max-width: 480px) {
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
padding: 36px 20px !important;
}
.contact-right { padding: 36px 20px !important; }
.rv-inner { padding: 44px 20px !important; }
.rv-card { padding: 28px 20px !important; }
.engagement-section { padding: 52px 20px !important; }
.h-compare { padding: 56px 20px !important; }
.h-bridge { padding: 64px 20px !important; }
}
/* ═══════════════════════════════════════════════════════════════
v80 FINAL OVERRIDES
1. Hero text left-justified (was centered in v79)
2. Why Relay Exists — full-page bleed (no max-width on rv-inner)
3. Contact form label→field spacing
4. Who we are section — full 1200px width with bridge body uncapped
═══════════════════════════════════════════════════════════════ */
/* ──────── 1. HERO TEXT LEFT-JUSTIFIED ──────── */
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
justify-content: center !important;
align-items: flex-start !important;
text-align: left !important;
}
.audience-hero-split-text > .gold-rule,
.about-hero-split-text > .gold-rule,
.contact-hero-split-text > .gold-rule,
.approach-hero-split-text > .gold-rule {
margin: 14px 0 0 !important;
}
.audience-hero-split-text > .display,
.about-hero-split-text > .display,
.contact-hero-split-text > .display,
.approach-hero-split-text > .display {
margin: 24px 0 0 !important;
text-align: left !important;
}
.audience-hero-split-text .aud-switcher {
margin: 40px 0 0 !important;
justify-content: flex-start !important;
}
@media (max-width: 720px) {
.audience-hero-split-text,
.about-hero-split-text,
.contact-hero-split-text,
.approach-hero-split-text {
align-items: flex-start !important;
text-align: left !important;
}
.audience-hero-split-text .aud-switcher {
margin: 32px 0 0 !important;
align-items: stretch !important;
}
}
/* ──────── 2. WHY RELAY EXISTS — FULL-PAGE BLEED ──────── */
/* Remove the 1200px max-width cap; let the grid span full width like the
engagement section does. The rv-inner still gets section padding so
content has breathing room from the edges. */
.rv-inner {
max-width: none !important;
margin: 0 !important;
padding: 100px 64px !important;
}
.rv-section-headline,
.rv-section-lede {
max-width: none !important;
}
@media (max-width: 720px) {
.rv-inner { padding: 64px 24px !important; }
}
@media (max-width: 480px) {
.rv-inner { padding: 48px 20px !important; }
}
/* ──────── 3. CONTACT FORM: spacing between label and field ──────── */
.contact-form-label {
margin-bottom: 14px !important;
}
.cf-grid .contact-form-label {
margin-top: 36px !important;
margin-bottom: 14px !important;
}
.cf-grid > div:first-child .contact-form-label,
.cf-grid .contact-form-label:first-of-type {
margin-top: 0 !important;
}
/* ──────── 4. "WHO WE ARE" SECTION FULL WIDTH ──────── */
/* h-bridge-inner is already 1200 (from v78) — matches h-compare-inner.
But the inner h-bridge-body has max-width: 780px which visually shrinks
the section. Open those constraints up. */
.h-bridge-inner {
max-width: 1200px !important;
margin: 0 auto !important;
}
.h-bridge-headline {
max-width: none !important;
}
.h-bridge-body {
max-width: none !important;
}
/* v81: rv-section uses engagement-header pattern — ensure eyebrow renders gold on forest */
.rv-section .engagement-header .eyebrow { color: var(--rc) !important; }
.rv-section .engagement-header { max-width: 720px; margin-bottom: 72px; }
.rv-section .engagement-header p { color: rgba(242,237,228,.9); }
/* v81: lock all split-hero headlines to identical sizing (matches How We Work) */
.audience-hero-split-text .display,
.about-hero-split-text .display,
.contact-hero-split-text .display,
.approach-hero-split-text .display {
font-size: clamp(34px, 5vw, 54px) !important;
line-height: 1.1 !important;
max-width: 900px !important;
}
/* ═══════════════════════════════════════════════════════════════
v82 — Why Relay Exists rv-cards mirror Engagement Model eng-cards EXACTLY
Same pseudo-element pattern, same sizes, same colors, same spacing.
═══════════════════════════════════════════════════════════════ */
/* Card container — identical to .eng-card */
.rv-card {
background: var(--rs) !important;
padding: 36px 40px 40px !important;
border: 0 !important;
position: relative;
}
/* Numbered eyebrow via ::before pseudo (mirrors .eng-card[data-num]::before) */
.rv-card[data-num]::before {
content: attr(data-num);
display: block;
font-family: var(--relay-font-sans);
font-weight: 700;
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--rc);
margin-bottom: 18px;
opacity: .85;
}
/* Headline — match .eng-headline EXACTLY */
.rv-card .rv-card-title {
font-family: var(--relay-font-sans) !important;
font-size: clamp(19px, 2vw, 23px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: var(--cream) !important;
letter-spacing: -.005em !important;
margin: 0 0 14px 0 !important;
}
.rv-card .rv-card-title em {
font-style: normal;
color: inherit;
}
/* Rule under headline via ::after pseudo (mirrors .eng-headline::after) */
.rv-card .rv-card-title::after {
content: "";
display: block;
width: 32px;
height: 2px;
background: rgba(242,237,228,.22);
margin: 18px 0 18px;
}
/* Body copy — match .eng-body EXACTLY */
.rv-card .rv-card-body {
font-family: var(--relay-font-serif) !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
color: rgba(242,237,228,.85) !important;
letter-spacing: .03em !important;
margin: 0 !important;
opacity: 1;
}
/* Hide any remaining .rv-card-num divs if they leak through (defensive) */
.rv-card-num,
.rv-card-rule {
display: none !important;
}
/* Grid identical to engagement-grid (already mostly matched in v79) */
.rv-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 2px !important;
background: rgba(242,237,228,.08) !important;
margin-bottom: 0 !important;
}
@media (max-width: 860px) {
.rv-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
.rv-card { padding: 32px 32px 36px !important; }
}
@media (max-width: 480px) {
.rv-card { padding: 28px 24px 32px !important; }
}
/* v83: insights-list-readmore styled as a button with proper top spacing */
.insights-list-readmore {
display: inline-block !important;
margin-top: 28px !important;
padding: 12px 22px !important;
border: 2px solid var(--rs) !important;
background: transparent !important;
font-family: var(--relay-font-sans) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--rs) !important;
transition: background .18s, color .18s !important;
}
.insights-list-item:hover .insights-list-readmore {
background: var(--rs) !important;
color: var(--cream) !important;
}
/* v84: rv-section uses engagement-header markup but needs its own color
overrides (the engagement-section selectors don't reach inside .rv-section). */
.rv-section .display { color: var(--cream) !important; }
.rv-section .display em { color: inherit !important; font-style: normal; }
/* v84: space between the headline and the helper paragraph */
.rv-section .engagement-header .display {
margin-bottom: 28px !important;
}
.rv-section .engagement-header p {
margin-top: 0 !important;
color: rgba(242,237,228,.85) !important;
}
/* ═══════════════════════════════════════════════════════════════
v86 — mobile footer cleanup + bigger home hero
═══════════════════════════════════════════════════════════════ */
/* Hide footer link columns on mobile. .footer-brand stays. */
@media (max-width: 720px) {
#main-footer > div:not(.footer-brand) {
display: none !important;
}
#main-footer {
grid-template-columns: 1fr !important;
padding: 48px 24px !important;
gap: 0 !important;
}
}
/* Larger home hero on all screen sizes */
.relay-hero__svg {
width: min(94vw, 1500px) !important;
}
@media (max-width: 720px) {
/* v107: shrink-wrap the stage to the SVG. The SVG keeps its safe 100vw width
and full-text-fit; the stage's height is just SVG height (95vw at 100vw width)
plus minimal padding. This removes the huge empty space that was previously
surrounding the SVG inside a 100vh-tall centered stage. */
.relay-hero__svg {
width: 100vw !important;
max-height: none !important;
flex-shrink: 0 !important;
}
.relay-hero__stage {
/* v109: mobile reverted to v107 padding (16/0/8). v108's tighter 8/0/4
was rolled back per design choice; desktop padding is unchanged. */
height: calc(95vw + 24px) !important;
padding: 16px 0 8px !important;
}
/* v111: cue anchored to the hero bottom so its placement stays consistent
across phone aspect ratios (95vw-based formulas varied too much between
iPhone SE and iPhone 14 Pro Max). With hero = 70vh, cue at top:
calc(70vh - 80px) puts the cue's top 80px above the hero bottom — leaving
~15px between the cue's bottom edge and the hero bottom, with the next
section peeking just below. Text-to-cue gap varies with phone height but
is always meaningfully larger than v110's tight 23px. */
.relay-hero__cue {
top: calc(70vh - 80px) !important;
bottom: auto !important;
}
}
/* v87: ensure top-nav "Start a Conversation" CTA hides at the same breakpoint
as the nav-toggle (720px), not 640px. */
@media (max-width: 720px) {
.nav-cta.desktop-only,
nav > .nav-cta {
display: none !important;
}
}
/* v88 / v113: hero text sizing. Letter-spacing kept at 0 — Newsreader has
well-balanced native spacing at display sizes; any tracking reads as letters
drifting apart on a serif. Mobile sizes pulled back ~10% from the DM Sans
era (was 56/60) because Newsreader's wider glyphs were bumping "dental
technology investment" up against the column edges. */
.relay-hero__label {
font-size: 50px !important;
letter-spacing: 0 !important;
}
@media (max-width: 720px) {
.relay-hero__label {
font-size: 50px !important;
letter-spacing: 0 !important;
}
}
@media (max-width: 480px) {
.relay-hero__label {
font-size: 52px !important;
letter-spacing: 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v89 — mobile audience cleanup
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* (4) Center the three switcher pills (Vendors / DSOs / PE) */
.audience-hero-split-text .aud-switcher {
align-items: center !important;
width: auto !important;
max-width: 360px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* v108: WWS mobile CTA + panel flow — see v108 block after later overrides */
}
/* v90: restore eng-tag (the "01 - Enterprise Implementation Management" label)
as a single gold mono line. Hide the data-num pseudo-eyebrow we used previously. */
.eng-card[data-num]::before {
display: none !important;
}
.eng-card .eng-tag {
display: block !important;
font-family: var(--relay-font-sans) !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--rc) !important;
margin-bottom: 18px !important;
opacity: .85;
}
/* Same treatment for rv-card */
.rv-card[data-num]::before {
display: none !important;
}
.rv-card .rv-tag {
display: block !important;
font-family: var(--relay-font-sans) !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--rc) !important;
margin-bottom: 18px !important;
opacity: .85;
}
/* ═══════════════════════════════════════════════════════════════
v91 — section backgrounds set to --surface (matches top nav)
═══════════════════════════════════════════════════════════════ */
/* (2) Our Process section — surface bg, step-cards cream for contrast */
.process-section {
background: var(--surface) !important;
}
.step-card {
background: var(--cream) !important;
border-top: 3px solid var(--rc) !important;
}
/* (3) Audience panel top heads (Vendor/DSO/PE) — surface bg */
.aud-panel-top {
background: var(--surface) !important;
}
/* (4) Founders heading block — surface bg + about-hero matches */
.about-hero { background: var(--surface) !important; }
/* ═══════════════════════════════════════════════════════════════
v92 — polish: founders bg seam, icon contrast
═══════════════════════════════════════════════════════════════ */
/* (1) Remove tan strip by giving founders-grid the same --surface bg as
the heading block and founder cards above it. */
.founders-grid {
background: var(--surface) !important;
border-top: 1px solid rgba(45,74,62,.12) !important;
}
/* (2) Icons in step cards: pop with thicker forest stroke on cream bg */
.step-icon {
border: 1px solid rgba(45,74,62,.3) !important;
background: var(--surface);
}
.step-icon svg {
stroke: var(--ri) !important;
stroke-width: 2.25 !important;
}
/* ═══════════════════════════════════════════════════════════════
v93 — unify section backgrounds + audience button styling
═══════════════════════════════════════════════════════════════ */
/* (1) About page sections — every band uses --surface, no tonal seam */
.about-hero { background: var(--surface) !important; }
.founders-grid {
background: var(--surface) !important;
border-top: 1px solid rgba(45,74,62,.08) !important;
}
.founder-card {
background: var(--surface) !important;
border-right: 1px solid rgba(45,74,62,.08) !important;
}
.founder-card:last-child { border-right: none !important; }
@media (max-width: 720px) {
.founder-card { border-right: none !important; border-bottom: 1px solid rgba(45,74,62,.08) !important; }
.founder-card:last-child { border-bottom: none !important; }
}
/* (2) Home "Who we are" — h-bridge bg cream → surface, matches all heading bgs */
.h-bridge {
background: var(--surface) !important;
}
/* (3) Audience switcher buttons — match btn-ghost (home page CTAs) */
.aud-sw-btn {
background: var(--surface) !important;
color: var(--ri) !important;
border: 2px solid var(--ri) !important;
}
.aud-sw-btn:hover {
background: var(--ri) !important;
color: var(--cream) !important;
}
.aud-sw-btn.active {
background: var(--ri) !important;
color: var(--cream) !important;
border-color: var(--ri) !important;
}
/* ═══════════════════════════════════════════════════════════════
v94 — section bgs + audience tab bar + page reveal animation
═══════════════════════════════════════════════════════════════ */
/* (1) About hero heading → --cream (warmer tone) */
.about-hero { background: var(--cream) !important; }
/* (2) Founders heading + grid → --surface (lighter) */
.founders-grid {
background: var(--surface) !important;
border-top: 1px solid rgba(45,74,62,.08) !important;
}
.founder-card { background: var(--surface) !important; }
/* (3) Audience tab bar — sits in its own section above the panels */
.aud-tabs {
background: var(--surface);
padding: 32px 64px;
border-bottom: 1px solid rgba(45,74,62,.08);
}
.aud-tabs-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width: 720px) {
.aud-tabs { padding: 20px 24px; }
.aud-tabs-inner {
justify-content: center;
gap: 8px;
}
.aud-tabs-inner .aud-sw-btn {
flex: 1 1 auto;
min-width: 0;
padding: 12px 8px !important;
font-size: 11px !important;
}
}
/* Audience switcher buttons — match home page btn-ghost active treatment */
.aud-tabs .aud-sw-btn {
background: var(--surface) !important;
color: var(--ri) !important;
border: 2px solid var(--ri) !important;
padding: 14px 28px !important;
}
.aud-tabs .aud-sw-btn:hover {
background: var(--ri) !important;
color: var(--cream) !important;
}
/* Active: filled gold + forest text (matches user's home-page reference button) */
.aud-tabs .aud-sw-btn.active {
background: var(--rc) !important;
color: var(--ri) !important;
border-color: var(--rc) !important;
}
/* (4) Page reveal animation — runs every time showPage() is called */
@keyframes pageReveal {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.page.active.page-reveal {
animation: pageReveal .55s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.page.active.page-reveal { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════
v95 — audience tab refinements
═══════════════════════════════════════════════════════════════ */
/* (2) Remove hairline under the tab bar */
.aud-tabs {
border-bottom: 0 !important;
padding: 32px 64px 0 !important;
}
@media (max-width: 720px) {
.aud-tabs { padding: 20px 24px 0 !important; }
}
/* (3) Left-justify the buttons (kill center on mobile) */
.aud-tabs-inner {
justify-content: flex-start !important;
}
/* (1) Inactive tabs match home page btn-ghost — cream bg distinct from surface */
.aud-tabs .aud-sw-btn {
background: var(--cream) !important;
color: var(--ri) !important;
border: 2px solid var(--ri) !important;
border-bottom: 0 !important;
padding: 14px 28px !important;
/* Slightly larger bottom padding so the connection edge visually flows
into the panel below without an awkward gap */
margin-bottom: -2px;
position: relative;
z-index: 2;
}
.aud-tabs .aud-sw-btn:hover {
background: var(--ri) !important;
color: var(--cream) !important;
}
/* (4) Active tab merges with the panel below — surface bg, no bottom border */
.aud-tabs .aud-sw-btn.active {
background: var(--surface) !important;
color: var(--ri) !important;
border: 2px solid var(--ri) !important;
border-bottom: 0 !important;
/* Optional: gold top accent to emphasize the active state */
box-shadow: inset 0 3px 0 var(--rc);
padding-top: 12px !important;
}
/* The panel-top below MUST be surface so the tab visually connects to it. */
.aud-panel-top {
background: var(--surface) !important;
border-top: 2px solid var(--ri);
padding-top: 56px !important;
}
@media (max-width: 720px) {
.aud-tabs .aud-sw-btn {
padding: 12px 14px !important;
font-size: 11px !important;
}
.aud-tabs .aud-sw-btn.active {
padding-top: 10px !important;
}
/* v108: WWS mobile — unify panel backgrounds with the tan hero so the
content reads as one continuous page rather than a portfolio card
floating on top. Also drop the heavy dark border-top that was forcing
the panel to feel like a separate "card." On desktop these rules stay
unchanged: panel-top keeps its surface bg + dark border for the
portfolio-style separation that works well at wider widths. */
.aud-panel-top {
background: var(--cream) !important;
border-top: none !important;
padding: 28px 20px 8px !important;
}
.aud-panel-bottom {
background: var(--cream) !important;
}
.aud-pain-list { padding: 16px 20px 20px !important; }
/* v108: assessment CTA flows into the footer. Was max-width 320px centered
inside a chunky block (read as a self-contained call-out). Now full content
width with light top/bottom padding so it feels like a natural next step. */
.aud-cta-block .btn-cta-dark {
display: none !important;
}
.aud-cta-block .btn-cta-outline {
display: block !important;
width: 100% !important;
max-width: none !important;
}
.aud-cta-block {
padding: 4px 20px 32px !important;
align-items: stretch !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v96 — manilla folder tabs + extra founders bg safety
═══════════════════════════════════════════════════════════════ */
/* (1b) Founders extra safety: parent surface bg envelopes the whole section */
.founders-grid {
background: var(--surface) !important;
border-top: 1px solid rgba(45,74,62,.08) !important;
}
.founder-card {
background: var(--surface) !important;
}
.founder-card-body {
background: var(--surface) !important;
}
/* (3) Manilla-folder tab edges — rounded top corners, gold-filled active */
.aud-tabs .aud-sw-btn {
border-radius: 10px 10px 0 0 !important;
/* keep cream bg, forest border for inactive */
background: var(--cream) !important;
color: var(--ri) !important;
border: 2px solid var(--ri) !important;
border-bottom: 0 !important;
}
.aud-tabs .aud-sw-btn:hover {
background: var(--rc) !important;
color: var(--ri) !important;
border-color: var(--rc) !important;
}
/* Active tab: fully gold fill, rounded corners, no top accent stripe */
.aud-tabs .aud-sw-btn.active {
background: var(--rc) !important;
color: var(--ri) !important;
border-color: var(--rc) !important;
box-shadow: none !important;
padding-top: 14px !important;
}
/* ═══════════════════════════════════════════════════════════════
v97 — white inactive tabs + tighter pain list gap
═══════════════════════════════════════════════════════════════ */
/* (1) Inactive audience tabs → white bg (was cream) */
.aud-tabs .aud-sw-btn {
background: #ffffff !important;
}
/* Hover keeps the gold treatment */
.aud-tabs .aud-sw-btn:hover {
background: var(--rc) !important;
}
/* Active stays fully gold */
.aud-tabs .aud-sw-btn.active {
background: var(--rc) !important;
}
/* (2) Tighten gap between aud-panel-top and aud-pain-list */
.aud-panel-top {
padding-bottom: 16px !important;
}
.aud-pain-list {
padding-top: 16px !important;
}
@media (max-width: 720px) {
.aud-panel-top { padding-bottom: 12px !important; }
.aud-pain-list { padding-top: 12px !important; }
}
/* ═══════════════════════════════════════════════════════════════
v98 — tab bg inheritance + comprehensive mobile/responsive sweep
═══════════════════════════════════════════════════════════════ */
/* (1) Inactive Who We Serve tab buttons inherit section bg */
.aud-tabs .aud-sw-btn {
background: var(--surface) !important;
}
.aud-tabs .aud-sw-btn:hover {
background: var(--rc) !important;
}
.aud-tabs .aud-sw-btn.active {
background: var(--rc) !important;
}
/* ──────── (2) MOBILE / RESPONSIVE SWEEP ──────── */
/* v99: revert v98's overflow-x:hidden on html/body — it broke position:sticky
for the home hero animation. Use overflow-x:clip on .page only (clip
doesn't establish a sticky scroll context). max-width:100vw stays. */
html, body { max-width: 100vw; }
.page { max-width: 100vw; overflow-x: clip; }
img, video { max-width: 100%; height: auto; }
/* SVGs do not get the generic max-width/height:auto rule because some
SVGs (notably .relay-hero__svg) define their own width and rely on
the viewBox for height. */
/* Long-word breaking on small screens — avoids headline overflow */
@media (max-width: 720px) {
h1, h2, h3, .display, .h-hero-title, .h-bridge-headline,
.h-compare-headline, .insights-post-title, .insights-list-title,
.insights-hero-title, .eng-headline, .rv-card-title, .aud-panel-head {
overflow-wrap: break-word;
word-break: normal;
}
}
/* ── Tab bar mobile: tighter padding, full-row 3 columns, never wrap awkwardly ── */
@media (max-width: 720px) {
.aud-tabs { padding: 16px 16px 0 !important; }
.aud-tabs-inner {
gap: 6px !important;
justify-content: stretch !important;
}
.aud-tabs .aud-sw-btn {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 12px 8px !important;
font-size: 11px !important;
letter-spacing: .08em !important;
border-radius: 8px 8px 0 0 !important;
min-height: 44px;
}
}
@media (max-width: 380px) {
.aud-tabs .aud-sw-btn {
font-size: 10px !important;
padding: 10px 4px !important;
letter-spacing: .04em !important;
}
}
/* ── Tap target minimums on mobile (44px = Apple HIG / 48px Material) ── */
@media (max-width: 720px) {
.nav-link, .footer-link,
button, .btn-primary, .btn-ghost, .btn-secondary,
.nav-cta, .contact-submit, .btn-cta-dark, .btn-cta-outline,
.insights-list-readmore, .insights-nav-btn {
min-height: 44px;
}
}
/* ── Hero text safety: ensure SVG hero text doesn't overflow tiny screens ── */
@media (max-width: 380px) {
.relay-hero__label { font-size: 64px !important; letter-spacing: 0 !important; }
}
/* ── Page padding rationalization ── */
@media (max-width: 720px) {
nav { padding: 0 20px !important; }
.h-compare, .h-bridge, .engagement-section, .process-section,
.about-hero, .insights-hero, .insights-list-wrap,
.audience-hero, .contact-hero, .approach-hero {
padding-left: 20px !important;
padding-right: 20px !important;
}
.aud-panel-top { padding-left: 20px !important; padding-right: 20px !important; }
.aud-pain-list { padding-left: 20px !important; padding-right: 20px !important; }
.rv-inner { padding-left: 20px !important; padding-right: 20px !important; }
.engagement-section { padding-left: 20px !important; padding-right: 20px !important; }
}
/* ── Engagement / Why Relay grids stack cleanly ── */
@media (max-width: 720px) {
.engagement-grid, .rv-grid {
grid-template-columns: 1fr !important;
}
.eng-card, .rv-card {
padding: 28px 24px 32px !important;
}
}
/* ── Founder cards stack ── */
@media (max-width: 720px) {
.founders-grid {
grid-template-columns: 1fr !important;
}
}
/* ── Contact form full-width inputs / textarea ── */
@media (max-width: 720px) {
.cf-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.contact-input, .contact-select, .contact-textarea {
width: 100% !important;
font-size: 16px !important; /* prevents iOS auto-zoom on focus */
}
}
/* ── Insights list spacing on mobile ── */
@media (max-width: 720px) {
.insights-list-item { padding: 28px 0 !important; }
.insights-list-title { font-size: clamp(22px, 6vw, 28px) !important; }
}
/* ── Process step cards stack ── */
@media (max-width: 860px) {
.process-steps { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* ── Footer mobile already handled by earlier modules ── */
/* v100: kill the small line above the founder cards */
.founders-grid {
border-top: 0 !important;
}
/* ── Team row (3-up, longer bios) ── */
.team-grid { grid-template-columns: repeat(3, 1fr) !important; }
.team-grid .founder-photo { width: 172px; height: 172px; margin-top: 36px; }
.team-grid .founder-card-body { padding: 32px 34px; }
.team-grid .founder-body { font-size: 17.5px; line-height: 1.72; }
.team-grid .founder-role { margin-bottom: 10px; }
/* no divider at the end of each row, or on the final card */
.team-grid .founder-card:nth-child(3n) { border-right: none; }
.team-grid .founder-card:last-child { border-right: none; }
/* horizontal rule under the first row of three */
.team-grid .founder-card:nth-child(-n+3) { border-bottom: 1px solid rgba(45,74,62,.08); }
/* Monogram placeholder for team members without a photo yet */
.founder-photo.founder-ph {
display: flex; align-items: center; justify-content: center;
background: var(--ri);
color: var(--rc);
font-family: var(--serif);
font-weight: 600;
letter-spacing: .02em;
}
.team-grid .founder-photo.founder-ph { font-size: 44px; }
/* Medium screens: 2 x 2 */
@media (max-width: 1200px) and (min-width: 901px) {
.team-grid { grid-template-columns: repeat(2, 1fr) !important; }
.team-grid .founder-card:nth-child(3n) { border-right: 1px solid rgba(45,74,62,.08); }
.team-grid .founder-card:nth-child(-n+3) { border-bottom: none; }
.team-grid .founder-card:nth-child(2n) { border-right: none; }
.team-grid .founder-card:last-child { border-right: none; }
.team-grid .founder-body { font-size: 18px; }
.team-grid .founder-photo { width: 176px; height: 176px; }
}
/* ── LinkedIn icon ── */
.founder-li {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid rgba(45,74,62,.22);
color: var(--ri); text-decoration: none;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.founder-li svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.founder-li:hover { background: var(--rc); border-color: var(--rc); color: #fff; }
/* Empty href = no link yet, so hide the icon entirely */
.founder-li[href=""], .founder-li:not([href]) { display: none; }
/* Reserve the row so the gold rule lines up across all cards */
.founder-social { min-height: 30px; }
/* ── Bio "Show more" (mobile only) ── */
.bio-toggle { display: none; }
@media (max-width: 900px) {
.team-grid { grid-template-columns: 1fr !important; }
.team-grid .founder-card { border-right: none !important; border-bottom: 1px solid rgba(45,74,62,.08) !important; }
.team-grid .founder-card:last-child { border-bottom: none !important; }
.founder-body.clampable {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.founder-body.clampable.is-open {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
.bio-toggle {
display: inline-block;
margin-top: 12px;
padding: 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--cond);
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--rc);
border-bottom: 1px solid var(--rc);
}
}
/* ═══════════════════════════════════════════════════════════════
MULTI-PAGE BUILD
Each document holds exactly one page, so it is always visible.
Elements that were or