/* ============================================
In The Beginning — Brand Strategy Consulting
============================================ */
/* Google Fonts are loaded via in index.html's (preconnect +
stylesheet), not @import — @import blocks the parallel font fetch. */
:root {
/* ============================================================
COLOR SYSTEM — each token has one job. The base world (ink,
canvas, chrome) carries the whole site. No pink/rose anywhere —
the chrome/metal motif (echoing the gate photo) is the site's
one recurring "moment," alongside a single deep warm accent used
sparingly. Never a default button fill, never assigned just to
"add color."
============================================================ */
/* — BASE WORLD: warm neutral + chrome + charcoal, ~95% of the page — */
--ink: #2b1a16; /* primary text, dark surfaces — stands in for "black"; no true black anywhere */
--ink-soft: #34211c; /* secondary dark surface */
--canvas: #fbfaf8; /* primary page background */
--canvas-warm: #f3ede2; /* atmospheric warm-neutral environment (hero, gate letterbox) */
--canvas-muted: #efece7; /* quiet section background */
--chrome-1: #e7e8ea; /* lightest metal tone */
--chrome-2: #b9bcc1; /* mid metal tone, light text on dark */
--chrome-3: #63666b; /* body/secondary text on light surfaces (WCAG AA verified) */
/* — EXPRESSIVE ACCENT: one deep warm brown-red, deliberate moments only — */
--moment-chocolate: #77383b; /* quote marks, the italic "human." word, interaction states */
--moment-mauve: #7c7186; /* quiet violet-grey detail */
--moment-dusty-blue: #829db3;/* the cool counterpoint — FAQ, the How I Come In backdrop, circled questions */
--line: rgba(43, 26, 22, 0.14);
--line-light: rgba(251, 250, 248, 0.18);
/* — TYPE SYSTEM — */
--serif: 'Lora', Georgia, serif; /* primary display: editorial serif with personality */
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* secondary/functional: nav, labels, utility */
--geo-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--max: 1180px;
/* legacy aliases — old token names still referenced in a few places below;
point them at the new system rather than duplicating values */
--black: var(--ink);
--near-black: var(--ink-soft);
--white: var(--canvas);
--warm-grey-light: var(--canvas-muted);
--rouge: var(--moment-dusty-blue);
--chocolate: var(--moment-dusty-blue);
--mauve: var(--moment-mauve);
--dusty-blue: var(--moment-dusty-blue);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
color: var(--black);
background: var(--white);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.gate-active { overflow: hidden; height: 100vh; height: 100dvh; }
.skip-link {
position: absolute;
top: -60px;
left: 16px;
z-index: 1001;
background: var(--ink);
color: var(--canvas);
padding: 12px 20px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
border-radius: 6px;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 16px;
}
img { max-width: 100%; display: block; }
.wrap {
max-width: var(--max);
margin: 0 auto;
padding: 0 32px;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--rouge); color: var(--white); }
:focus-visible {
outline: 2px solid var(--rouge);
outline-offset: 3px;
}
input { caret-color: var(--rouge); }
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.08;
}
/* ---------- Chrome surface: reusable brushed-metal treatment, ---------- */
/* echoes the gate photo everywhere else the brand needs it */
/* small tracked label + thin rule — the one recurring editorial marker,
used in exactly a handful of places, never every section */
.label-rule {
display: inline-flex;
flex-direction: column;
gap: 10px;
margin-bottom: 22px;
}
.label-rule span {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.5;
}
.label-rule::after {
content: '';
width: 34px;
height: 1px;
background: currentColor;
opacity: 0.5;
}
/* a genuinely organic torn-paper edge, not a mechanical polygon zigzag —
built from an SVG turbulence displacement, used on the Positioning photo */
.torn-edge {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.chrome-surface {
background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0px, rgba(255,255,255,0.14) 1px, rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 2px, transparent 2px, transparent 3px),
linear-gradient(180deg, #d6d3cd 0%, #ece9e3 14%, #f7f5f1 26%, #e2dfd8 42%, #cac7bf 58%, #bcb9b1 72%, #c4c1b9 88%, #cdcac2 100%);
background-blend-mode: overlay, normal;
}
.chrome-seam {
height: 14px;
background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0px, rgba(255,255,255,0.16) 1px, rgba(0,0,0,0.06) 1px, rgba(0,0,0,0.06) 2px, transparent 2px, transparent 3px),
linear-gradient(180deg, #cac7bf 0%, #f2efe9 45%, #b8b5ad 100%);
background-blend-mode: overlay, normal;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), inset 0 -1px 1px rgba(255,255,255,0.4);
}
/* a guaranteed-clean, text-free crop of the etched-chrome photo's top-left
corner — safe to use at any element size/shape */
.chrome-texture {
background-image: url('images/gate-metal.png');
background-size: 500% 500%;
background-position: 0% 0%;
}
.chrome-badge {
background-image: url('images/gate-metal.png');
background-size: 500% 500%;
background-position: 0% 0%;
border: 1px solid rgba(255,255,255,0.5);
}
/* ---------- Buttons ---------- */
/* the one CTA graphic used everywhere on the site — a real asset, not a
CSS-recreated approximation, so it matches exactly */
.cta-consult {
display: inline-flex;
transition: transform 0.25s cubic-bezier(.4,0,.2,1), filter 0.25s ease;
}
.cta-consult img {
display: block;
width: 208px;
height: auto;
}
.cta-consult:hover {
transform: translateY(-2px);
filter: brightness(1.04);
}
.cta-consult:active { transform: translateY(0); }
.tier-card .cta-consult img { width: 188px; }
/* ============================================
ENTRY GATE
============================================ */
#gate {
position: fixed;
inset: 0;
z-index: 1000;
background: linear-gradient(180deg, #d6d3cd 0%, #ece9e3 20%, #dad7d0 45%, #c2beb6 70%, #b6b2ab 100%);
display: flex;
align-items: flex-end;
justify-content: center;
transition: opacity 0.9s cubic-bezier(.4,0,.2,1), visibility 0.9s;
}
#gate.gate-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* set synchronously (inline script, before paint) once a visitor has
already passed the gate on any page — the gate never shows again for
the rest of the site visit */
html.gate-passed #gate { display: none !important; }
html.gate-passed body.gate-active { overflow: visible !important; height: auto !important; }
/* True edge-to-edge fill on every viewport shape where the wordmark's own
margins make it safe (desktop, tablet, landscape — measured clear of the
crop on all of these). The one real risk zone is narrow portrait phones,
where `cover` would clip the outer letters — the aspect-ratio query below
swaps that one case back to the seamless blur+contain hybrid so the
wordmark is never cropped anywhere, on anything. */
.gate-bg-blur {
position: absolute;
inset: -6%;
background-image: url('images/gate-hero.png');
background-size: cover;
background-position: center;
filter: blur(60px) saturate(1.05);
transform: scale(1.1);
animation: gate-bg-in 1.4s cubic-bezier(.22,1,.36,1) both;
}
.gate-bg {
position: absolute;
inset: 0;
background-image: url('images/gate-hero.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: gate-bg-in 1.2s cubic-bezier(.22,1,.36,1) both;
}
/* narrow portrait phones only — the one shape where this asset's wordmark
margins are tight enough that a full `cover` crop risks clipping it */
@media (max-aspect-ratio: 3/5) {
.gate-bg {
background-size: contain;
}
}
@keyframes gate-bg-in {
from { opacity: 0; transform: scale(1.035); }
to { opacity: 1; transform: scale(1); }
}
@keyframes gate-content-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.gate-bg, .gate-content { animation: none; }
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.gate-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 24px 12vh;
max-width: 560px;
animation: gate-content-in 1s cubic-bezier(.22,1,.36,1) 0.4s both;
}
/* architectural, not a form: a single quiet line, no pink, no pill —
integrated into the metal rather than sitting on top of it */
.gate-form {
position: relative;
margin: 0 auto;
max-width: 320px;
display: flex;
align-items: flex-end;
gap: 14px;
padding-bottom: 11px;
border-bottom: 1px solid rgba(43,26,22,0.32);
transition: border-color 0.4s ease;
}
.gate-form:focus-within { border-color: rgba(43,26,22,0.65); }
.gate-form input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: #2a2320;
font-family: var(--sans);
font-weight: 400;
font-size: 14px;
letter-spacing: 0.02em;
padding: 4px 2px;
}
.gate-form input::placeholder { color: rgba(43,26,22,0.4); font-weight: 300; }
.gate-form button {
border: none;
background: none;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
cursor: pointer;
flex-shrink: 0;
padding-bottom: 3px;
transition: transform 0.3s cubic-bezier(.22,1,.36,1), opacity 0.25s ease;
opacity: 0.75;
}
.gate-form button:hover { transform: translateX(4px); opacity: 1; }
.gate-error {
color: var(--moment-chocolate);
font-size: 12px;
margin-top: 10px;
min-height: 16px;
}
.gate-skip {
display: block;
margin-top: 26px;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
color: rgba(43,26,22,0.55);
letter-spacing: 0.12em;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
transition: color 0.25s ease;
}
.gate-skip:hover { color: rgba(43,26,22,0.85); }
/* ============================================
NAV
============================================ */
/* a dedicated, guaranteed text-free crop of the metal photo (the top strip,
well above the wordmark) — the full photo can't be used here at all: at
narrow viewports `cover` on a short wide bar exposes a much taller slice
of the source image, which was dragging the etched wordmark into view */
#nav {
position: sticky;
top: 0;
z-index: 100;
background-image: url('images/nav-metal.png');
background-size: cover;
background-position: center;
border-bottom: 1px solid rgba(43,26,22,0.18);
}
#nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 76px;
gap: 16px;
}
.nav-mark {
font-family: var(--geo-sans);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.01em;
white-space: nowrap;
color: #63666a;
text-shadow:
0 -1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.9),
0 1.5px 2px rgba(0,0,0,0.2);
}
/* ---------- Nav links + mobile menu — the hamburger is the permanent,
only way into these links at every viewport width; there is no wider
breakpoint that switches to an inline row. ---------- */
.nav-right {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--canvas);
border-bottom: 1px solid var(--line);
padding: 4px 20px 28px;
box-shadow: 0 16px 30px rgba(43,26,22,0.1);
}
.nav-right.is-open { display: flex; }
.nav-links {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
list-style: none;
}
.nav-links li { border-bottom: 1px solid var(--line); }
.nav-links a {
display: block;
padding: 18px 2px;
font-family: var(--geo-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ink);
transition: opacity 0.2s ease;
}
.nav-links a:hover { opacity: 0.72; }
.nav-links a.is-active {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
}
.nav-cta.cta-consult img { width: 148px; }
.nav-right .nav-cta { margin: 22px auto 0; }
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
padding: 0;
cursor: pointer;
flex-shrink: 0;
}
.nav-toggle span {
display: block;
width: 20px;
height: 2px;
background: #63666a;
transition: transform 0.3s cubic-bezier(.22,1,.36,1), opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============================================
SECTION SCAFFOLDING
============================================ */
section { position: relative; }
.section-pad { padding: 150px 0; }
.section-pad-sm { padding: 110px 0; }
/* ============================================
HERO
============================================ */
/* the smoke photo is now the section's actual environment, not an inset
object — full-bleed behind the copy, fading top and bottom into the
same warm gradient so there's no visible photo rectangle. A soft scrim
over the lower half protects the lede/CTA's legibility. */
#hero {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, #f4ede2 0%, #ece0d0 45%, #e2d3bf 100%);
padding: 170px 0 150px;
}
.hero-bg-photo {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-bg-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 100%;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 88%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 88%, transparent 100%);
transform-origin: 50% 65%;
animation: smoke-drift 42s ease-in-out infinite;
}
/* organic multi-stop sway rather than a single back-and-forth pan — reads
as "is that moving?" rather than an obvious mechanical loop; the source
is a flat photo with no alpha-matted smoke layer, so a whole-image drift
is the strongest effect available without true isolated smoke motion */
@keyframes smoke-drift {
0% { transform: scale(1) translate(0, 0); }
25% { transform: scale(1.018) translate(-0.6%, -0.5%); }
55% { transform: scale(1.032) translate(0.4%, -1.1%); }
80% { transform: scale(1.016) translate(-0.3%, -0.7%); }
100% { transform: scale(1) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-bg-photo img { animation: none; }
}
.hero-bg-scrim {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg,
rgba(244,237,226,0.1) 0%,
rgba(244,237,226,0.5) 52%,
rgba(236,224,208,0.88) 100%);
pointer-events: none;
}
.hero-stack {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-copy-block { max-width: 620px; }
.hero-copy-block .label-rule {
margin-bottom: 26px;
align-items: center;
}
.hero-copy-block h1 {
font-size: clamp(34px, 6.4vw, 84px);
line-height: 1.05;
letter-spacing: -0.02em;
white-space: nowrap;
margin: 0 0 28px;
}
/* the etched-metal treatment from the nav wordmark, scaled up — not the
site's blue accent, since this word carries the brand's own chrome
identity rather than a "moment" color */
.hero-copy-block h1 em {
font-style: italic;
font-weight: 400;
color: #63666a;
text-shadow:
0 -2px 0 rgba(0,0,0,0.4),
0 2px 1px rgba(255,255,255,0.85),
0 3px 6px rgba(0,0,0,0.15);
}
.hero-copy-block .hero-tagline {
font-family: var(--geo-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--chrome-3);
margin: 0 auto 26px;
}
.hero-copy-block .hero-subhead {
font-family: var(--serif);
font-style: italic;
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.5;
color: var(--ink-soft);
max-width: 480px;
margin: 0 auto 22px;
}
.hero-invite {
font-family: var(--serif);
font-style: italic;
font-size: 16px;
color: var(--ink-soft);
margin: 0 auto 40px;
}
.hero-cta-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.hero-route-row {
display: flex;
gap: 30px;
margin-top: 4px;
}
/* ---------- generic small tracked-caps text link, reused for the hero's
quick routing links, and the Philosophy/Founder homepage previews' CTAs ---------- */
.text-cta {
display: inline-flex;
align-items: center;
font-family: var(--geo-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--line);
padding-bottom: 4px;
transition: border-color 0.25s ease, color 0.25s ease;
}
.text-cta:hover { border-color: var(--ink); color: var(--moment-dusty-blue); }
.section-cta { margin-top: 32px; }
/* ============================================
CREDIBILITY — a quiet editorial stat strip, not a SaaS dashboard: plain
numerals over labels, no cards, no icons, no boxes. A second, visually
separate row of client names sits below with clear margin, introduced by
its own small label so the sentence and the names never run together.
============================================ */
.credibility-stats {
background: var(--canvas);
}
.stats-row {
display: flex;
justify-content: center;
}
.stat {
flex: 1;
position: relative;
text-align: center;
padding: 0 24px;
}
.stat + .stat::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--line);
}
.stat-number {
font-family: var(--serif);
font-size: clamp(30px, 3.2vw, 42px);
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 8px;
}
.stat-label {
font-family: var(--geo-sans);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--chrome-3);
}
.credibility-brands {
text-align: center;
margin-top: 64px;
}
.brands-label {
font-family: var(--geo-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--chrome-3);
margin-bottom: 22px;
}
.brands-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 40px;
}
.brands-row span {
font-family: var(--serif);
font-size: 16px;
color: var(--ink-soft);
}
@media (max-width: 980px) {
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 12px; }
.stat + .stat::before { display: none; }
.stat { padding: 0 8px; }
}
/* ============================================
POSITIONING BAND
============================================ */
/* the same brushed-chrome photo as the gate and nav, not a dark solid —
one continuous metal motif instead of an isolated dark band */
#positioning, #philosophy-preview {
position: relative;
background: var(--canvas-warm);
}
/* the homepage's condensed preview has no #positioning-scoped body-copy
rule to inherit, so its plain paragraph needs its own spacing/color —
otherwise the global reset leaves it with zero margin */
#philosophy-preview p {
color: var(--ink-soft);
margin-bottom: 22px;
max-width: 540px;
}
.positioning-inner {
display: grid;
grid-template-columns: 1fr;
max-width: 720px;
}
.split-copy-inner { max-width: 560px; }
#positioning .split-copy-inner { color: var(--ink); }
.positioning-hook {
font-family: var(--serif);
font-style: italic;
font-size: clamp(17px, 1.8vw, 20px) !important;
color: var(--ink-soft);
max-width: 480px !important;
margin-bottom: 22px;
}
.positioning-statement {
font-family: var(--serif) !important;
font-weight: 600 !important;
color: var(--ink) !important;
font-size: 22px !important;
letter-spacing: normal;
text-wrap: balance;
margin-bottom: 18px;
max-width: 640px !important;
}
#positioning p {
color: var(--ink-soft);
font-size: 16px;
margin-bottom: 18px;
max-width: 540px;
}
.positioning-close {
font-family: var(--serif) !important;
font-weight: 600;
font-size: 22px !important;
color: var(--ink) !important;
margin-bottom: 32px !important;
}
/* on the full Philosophy page, two of these run back to back as one
closing couplet — tighten the gap between just that pair so they read
as a connected statement, while the second line keeps its normal 32px
before the framework list that follows */
.positioning-close:has(+ .positioning-close) {
margin-bottom: 10px !important;
}
/* the pivot from business to personal within the Philosophy section's
"sometimes that's..." rhythm — same italic-serif family as .positioning-hook,
but set in full ink (not ink-soft) with extra top space, so the turn to
"Sometimes that's you." reads as a deliberate pause, not another list item */
.positioning-pivot {
font-family: var(--serif);
font-style: italic;
font-size: 19px !important;
color: var(--ink) !important;
margin: 24px 0 26px !important;
}
/* contained within Positioning, not a horizontal scroll strip — each step
fades and lifts into place as it enters the viewport (IntersectionObserver
in script.js toggles .is-visible). Reduced motion keeps the steps static
and already visible. */
.framework-reveal-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 40px;
max-width: 420px;
}
.framework-reveal-step {
display: flex;
align-items: center;
gap: 16px;
font-size: 15px;
color: var(--ink-soft);
letter-spacing: 0.01em;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1);
}
.framework-reveal-step.is-visible { opacity: 1; transform: translateY(0); }
.framework-reveal-step:nth-child(1) { transition-delay: 0ms; }
.framework-reveal-step:nth-child(2) { transition-delay: 70ms; }
.framework-reveal-step:nth-child(3) { transition-delay: 140ms; }
.framework-reveal-step:nth-child(4) { transition-delay: 210ms; }
.framework-reveal-step:nth-child(5) { transition-delay: 280ms; }
.framework-reveal-step .num {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--geo-sans);
font-weight: 600;
font-size: 11px;
color: #fff;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.framework-reveal-step {
opacity: 1;
transform: none;
transition: none;
}
}
/* ============================================
MEET THE FOUNDER
============================================ */
#founder, #founder-preview { background: var(--white); }
.founder-grid {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 70px;
align-items: start;
}
/* the portrait stays in view as the long-form bio scrolls past it, rather
than being stretched or left behind by several screens of copy */
.founder-photo-wrap {
position: sticky;
top: 120px;
padding-bottom: 14%;
padding-right: 6%;
}
.founder-photo {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
object-position: 75% top;
box-shadow: 0 20px 50px rgba(43,26,22,0.2);
}
/* the founder's own nameplate, mounted like a plaque at the base of the
portrait — the site's brushed-metal identity marker (gate, nav, badges,
buttons) applied to the one person behind it, echoed rather than repeated */
.founder-nameplate {
position: absolute;
left: 0;
bottom: -6%;
width: 62%;
filter: drop-shadow(0 20px 32px rgba(43,26,22,0.32));
transform: rotate(-1.2deg);
z-index: 2;
}
.founder-copy p {
font-size: 16px;
line-height: 1.7;
color: var(--chrome-3);
max-width: 520px;
margin-bottom: 22px;
}
/* the rhetorical high points in the bio — set apart from the surrounding
prose rather than styled like every other sentence */
.founder-emphasis {
font-family: var(--serif);
font-style: italic;
font-size: 19px !important;
color: var(--ink) !important;
margin: 8px 0 30px !important;
}
.founder-emphasis-lg {
font-size: 26px !important;
margin: 16px 0 34px !important;
}
.founder-invite {
font-family: var(--serif);
font-style: italic;
font-size: 17px !important;
color: var(--ink-soft) !important;
margin-top: 36px;
}
/* the homepage founder preview's title, matched to the same section-heading
treatment used everywhere else (e.g. "WHAT BROUGHT YOU HERE?"), kept at
its existing left-aligned spot rather than the small tracked-label style
.label-rule uses elsewhere (About page's full founder story) */
.founder-preview-title {
font-family: var(--serif);
font-size: clamp(28px, 3.4vw, 40px) !important;
letter-spacing: 0.01em;
text-transform: uppercase;
text-wrap: balance;
color: var(--ink) !important;
margin-bottom: 22px !important;
}
/* ============================================
THE FORK / FOR-BUSINESS / FOR-ME — same warm-grey band as the rest of
the audience-facing content, distinct from the white Positioning/
Founder narrative above it
============================================ */
#fork { background: var(--warm-grey-light); }
#for-business, #for-business-services, #for-me, #for-me-services { background: var(--warm-grey-light); }
/* the shared "Where I Come In" — the light-streaked photo genuinely visible
(not washed to near-white), with a light wash at the top only, where the
heading needs it; the process cards below are opaque and don't. A dusty-
blue tint (not another cream/white pass) is the deliberate cool moment
breaking up the site's warm palette here. */
#how-i-help {
position: relative;
background:
linear-gradient(180deg, rgba(251,250,248,0.55) 0%, rgba(130,157,179,0.2) 100%),
url('images/where-i-come-in-bg.jpg');
background-size: cover;
background-position: center;
}
.section-head {
max-width: 620px;
margin: 0 auto 56px;
text-align: center;
}
/* tighter gap here specifically — the 56px default was calibrated for a
much larger statement below it; now that "People are still the point."
reads at the same smaller size as the eyebrow's sibling elements, the
full 56px gap reads as too loose between the two */
#positioning .section-head, #philosophy-preview .section-head {
margin-bottom: 24px;
}
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
.section-head.left { text-align: left; margin: 0 0 56px; }
.section-kicker {
font-family: var(--geo-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-3);
margin: 0 0 14px;
}
/* ============================================
THE FORK — two equal-weight panels, the one moment on the page where the
visitor actively chooses their own path. Hover brings in the same
brushed-chrome texture used at the gate/nav/badges, not a new material.
============================================ */
.fork-inner { text-align: center; }
.fork-intro {
font-family: var(--serif);
font-style: italic;
font-size: 16px;
color: var(--chrome-3);
max-width: 560px;
margin: 26px auto 18px;
}
.fork-emphasis {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
color: var(--ink);
}
/* a small contained strip of the same brushed-metal surface used at the
gate — not the full-bleed chrome-seam used between sections, since this
divider sits inside one section, between two lines of text */
.fork-divider {
width: 90px;
height: 3px;
margin: 34px auto 0;
border-radius: 2px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), inset 0 -1px 1px rgba(255,255,255,0.4);
}
.fork-prompt {
font-family: var(--serif);
font-size: clamp(28px, 3.4vw, 40px);
letter-spacing: 0.01em;
text-transform: uppercase;
text-wrap: balance;
color: var(--ink);
margin: 32px 0 36px;
}
.fork-panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
text-align: left;
}
.fork-panel {
position: relative;
overflow: hidden;
display: block;
padding: 44px 38px;
border-radius: 22px;
background: var(--canvas);
border: 1px solid var(--line);
transition: transform 0.3s cubic-bezier(.23,1,.32,1), border-color 0.3s ease;
}
/* the chrome wash — present but invisible until hover, then fades in as a
full-bleed layer rather than a flat color swap */
.fork-panel::before {
content: '';
position: absolute;
inset: 0;
background-image: url('images/gate-metal.png');
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
.fork-panel > * { position: relative; z-index: 1; }
.fork-panel-label {
display: block;
font-family: var(--serif);
font-size: clamp(22px, 2.4vw, 27px);
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 16px;
}
.fork-panel-desc {
font-size: 15px;
line-height: 1.6;
color: var(--chrome-3);
margin-bottom: 28px;
}
.fork-panel-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--geo-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ink);
}
.fork-panel-arrow {
font-family: var(--serif);
font-weight: 400;
transition: transform 0.3s cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
.fork-panel:hover {
transform: translateY(-6px);
border-color: transparent;
}
.fork-panel:hover::before { opacity: 1; }
.fork-panel:hover .fork-panel-desc { color: var(--ink-soft); }
.fork-panel:hover .fork-panel-arrow { transform: translateX(5px); }
}
/* direct-address questions as individual cards, each with a small dusty-
blue ring accent (a diagram mark, not a literal icon) above the text, in
a single scrollable row rather than a wrapping grid. A light desktop-only
scatter (position/rotation/scale) keeps the row feeling editorial rather
than a rigid strip; hover lifts and grows each card slightly on top of
its own scatter transform. */
.question-scroll {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
overflow-y: visible;
padding: 40px 10px 60px;
margin-bottom: 20px;
scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.question-mark {
position: relative;
flex: 0 0 auto;
scroll-snap-align: start;
max-width: 280px;
padding: 36px 32px 30px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 6px 20px rgba(43,26,22,0.05);
transition: transform 0.25s cubic-bezier(.23,1,.32,1), box-shadow 0.25s ease;
}
.question-mark::before {
content: '';
display: block;
width: 30px;
height: 30px;
margin: 0 auto 18px;
border-radius: 50%;
border: 1.5px solid #829db3;
opacity: 0.75;
}
.question-mark p {
position: relative;
font-family: var(--serif);
font-style: italic;
font-size: 15.5px;
line-height: 1.5;
color: var(--ink-soft);
text-align: center;
}
/* editorial scatter, desktop only — mobile stacks cleanly with no jitter */
@media (min-width: 981px) {
.question-mark:nth-child(1) { transform: translateY(-6px) rotate(-1deg); }
.question-mark:nth-child(2) { transform: translateY(16px) rotate(0.8deg); }
.question-mark:nth-child(3) { transform: translateY(-12px) rotate(-0.6deg) scale(1.04); }
.question-mark:nth-child(4) { transform: translateY(10px) rotate(1.3deg) scale(0.97); }
.question-mark:nth-child(5) { transform: translateY(-4px) rotate(-1.4deg); }
.question-mark:nth-child(6) { transform: translateY(8px) rotate(-0.9deg) scale(1.02); }
}
@media (hover: hover) and (pointer: fine) {
.question-mark:hover { transform: scale(1.045); box-shadow: 0 14px 32px rgba(0,0,0,0.08); }
}
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
.question-mark:nth-child(1):hover { transform: translateY(-6px) rotate(-1deg) scale(1.045); box-shadow: 0 14px 32px rgba(0,0,0,0.08); }
.question-mark:nth-child(2):hover { transform: translateY(16px) rotate(0.8deg) scale(1.045); box-shadow: 0 14px 32px rgba(0,0,0,0.08); }
.question-mark:nth-child(3):hover { transform: translateY(-12px) rotate(-0.6deg) scale(1.085); box-shadow: 0 14px 32px rgba(0,0,0,0.08); }
.question-mark:nth-child(4):hover { transform: translateY(10px) rotate(1.3deg) scale(1.015); box-shadow: 0 14px 32px rgba(0,0,0,0.08); }
.question-mark:nth-child(5):hover { transform: translateY(-4px) rotate(-1.4deg) scale(1.045); box-shadow: 0 14px 32px rgba(0,0,0,0.08); }
.question-mark:nth-child(6):hover { transform: translateY(8px) rotate(-0.9deg) scale(1.065); box-shadow: 0 14px 32px rgba(0,0,0,0.08); }
}
.familiar-outro-line {
text-align: center;
font-family: var(--serif);
font-size: 20px;
color: var(--ink);
margin: 50px 0 44px;
}
/* ============================================
WHERE I COME IN (nested inside #for-business) — a horizontal flow
diagram: numbered chrome nodes connected by arrows, matching the
badge+arrow language already established in Positioning's framework-row.
Scrolls on narrow screens instead of stacking, since the point is that
it reads as one sequence.
============================================ */
.process-diagram {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 26px;
overflow-x: auto;
padding: 6px 4px 18px;
scroll-snap-type: x proximity;
}
.process-node {
flex: 0 0 260px;
scroll-snap-align: start;
background: var(--canvas-muted);
border-radius: 20px;
padding: 30px 26px 34px;
text-align: center;
}
.process-node-badge {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('images/gate-metal.png');
background-size: 500% 500%;
background-position: 0% 0%;
border: 1px solid rgba(255,255,255,0.5);
font-family: var(--geo-sans);
font-weight: 600;
font-size: 14px;
color: #fff;
margin: 0 auto 22px;
}
.process-node h4 {
font-family: var(--geo-sans);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.02em;
text-transform: uppercase;
margin-bottom: 10px;
}
.process-node p { color: var(--chrome-3); font-size: 15px; line-height: 1.6; }
.process-connector {
flex: 0 0 auto;
align-self: center;
margin-top: 25px;
color: var(--chrome-2);
font-family: var(--serif);
font-size: 22px;
}
@media (hover: hover) and (pointer: fine) {
.process-node { transition: transform 0.25s ease; }
.process-node:hover { transform: translateY(-4px); }
}
/* ============================================
TIERS — service cards, used inside #for-business and #for-me
============================================ */
.tier-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
margin-top: 56px;
}
.tier-grid-single {
grid-template-columns: 1fr;
max-width: 460px;
}
.tier-grid-centered {
margin-left: auto;
margin-right: auto;
}
.tier-card {
border: 1px solid var(--line);
border-radius: 20px;
padding: 40px 34px;
display: flex;
flex-direction: column;
}
/* Heart Sessions: the single card and its CTA centered, not left-aligned
like the two-up business tiers — the bullet list stays left-aligned
within its own centered block so the markers still read correctly */
.tier-card-centered {
align-items: center;
text-align: center;
}
.tier-card-centered .tier-list { text-align: left; }
/* the featured tier differentiated with the site's own dark surface tone,
not a separate accent color — same ink used at nav/footer/closing */
.tier-card.featured {
background: #829db3;
color: var(--ink);
border-color: #829db3;
}
.tier-name { font-family: var(--serif); font-size: 24px; margin-bottom: 10px; }
.tier-promise {
font-family: var(--serif);
font-style: italic;
font-size: 15.5px;
color: var(--ink-soft);
margin-bottom: 14px;
}
.tier-card.featured .tier-promise { color: var(--ink-soft); }
.tier-card p.tier-desc { font-size: 14.5px; color: var(--chrome-3); margin-bottom: 22px; }
.tier-card.featured p.tier-desc { color: var(--ink-soft); }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; flex: 1; }
.tier-list li {
font-size: 14.5px;
padding-left: 22px;
position: relative;
}
.tier-list li::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.55;
}
.differentiator-line {
text-align: center;
max-width: 640px;
margin: 50px auto 0;
font-family: var(--serif);
font-style: italic;
font-size: 18px;
color: var(--chrome-3);
}
/* ============================================
FAQ
============================================ */
#faq { background: var(--warm-grey-light); }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: 26px 4px;
cursor: pointer;
font-family: var(--serif);
font-size: 18px;
}
.faq-q .plus {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid var(--dusty-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.faq-item.open .faq-q .plus { transform: rotate(45deg); background: var(--rouge); border-color: var(--rouge); color: var(--white); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.faq-a p {
padding: 0 4px 26px;
font-size: 15px;
color: var(--chrome-3);
max-width: 560px;
}
/* a smaller, quieter logistics line under a fuller answer — e.g. session
length/format — set apart without needing its own accordion row */
/* the answer directly above a .faq-note needs less trailing space than a
standalone answer, so the note reads as attached to it rather than a
separately-spaced paragraph */
.faq-a p:has(+ .faq-note) {
padding-bottom: 6px;
}
.faq-a p.faq-note {
font-style: italic;
font-size: 13.5px;
opacity: 0.8;
}
.faq-callout {
color: var(--chocolate) !important;
font-weight: 600;
}
/* ============================================
CLOSING — text-based close (the old keepsake photo's baked-in "the
advantage is human." line is retired along with the old name, so it's
no longer safe to show).
============================================ */
#closing { background: var(--canvas-warm); text-align: center; }
.closing-inner { max-width: 620px; margin: 0 auto; }
.closing-line {
font-family: var(--serif);
font-size: clamp(24px, 3vw, 34px);
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.35;
margin: 0 0 10px;
}
.closing-subline {
font-family: var(--serif);
font-style: italic;
font-size: 19px;
color: var(--ink-soft);
margin: 0 0 40px;
}
/* ============================================
FOOTER
============================================ */
footer {
background: var(--black);
color: var(--chrome-2);
border-top: 1px solid var(--line-light);
}
.footer-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
padding: 56px 0 0;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 28px;
}
.footer-nav a {
font-family: var(--geo-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--chrome-2);
transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--canvas); }
.footer-row {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
margin-top: 28px;
border-top: 1px solid var(--line-light);
font-size: 13px;
flex-wrap: wrap;
gap: 14px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 980px) {
.founder-grid { grid-template-columns: 1fr; }
.split-copy-inner { max-width: none; }
.founder-photo-wrap { position: relative; top: auto; max-width: 320px; margin: 0 auto 30px; }
.tier-grid { grid-template-columns: 1fr; }
.fork-panels { grid-template-columns: 1fr; }
.section-pad { padding: 80px 0; }
.question-scroll {
flex-direction: column;
align-items: stretch;
overflow-x: visible;
-webkit-mask-image: none;
mask-image: none;
padding: 20px 0 10px;
gap: 28px;
}
.question-mark { max-width: none; }
}
@media (max-width: 560px) {
.wrap { padding: 0 20px; }
.nav-mark { font-size: 14px; }
.gate-form { flex-direction: row; }
.footer-row { flex-direction: column; text-align: center; }
}