/* =============================================================
CANON — AEO STUDIO
Premium editorial landing page.
Palette: warm cream + deep forest + burnt ochre accent.
Type: Fraunces (display) + Inter (body) + JetBrains Mono.
============================================================= */
/* ---------- TOKENS --------------------------------------- */
:root {
/* surfaces */
--surface: #F6F1E8;
--surface-band: #ECE6DB;
--surface-deep: #171613;
--surface-paper: #FAF7F1;
/* ink */
--ink: #171613;
--ink-2: #2A2823;
--muted: #6C6457;
--muted-2: #8F8676;
/* accents */
--forest: #2A3D2E;
--forest-deep: #1E2C22;
--ochre: #B8763C;
--ochre-deep: #8F5928;
/* rule */
--rule: #D9D1C1;
--rule-strong: #B9AE99;
/* light-on-dark */
--cream-on-dark: #F1ECE1;
--cream-muted-on-dark: #A9A294;
/* motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 240ms;
--dur-med: 480ms;
--dur-slow: 900ms;
/* rhythm — one scale used consistently across every section. Sub-sections
step down one rung (section-y-tight); inner blocks use ry-* rhythm units. */
--gutter: clamp(24px, 5vw, 80px);
--section-y: clamp(72px, 9vw, 132px);
--section-y-tight: clamp(56px, 7vw, 96px);
--section-y-short: clamp(44px, 5.4vw, 72px);
--prose: 68ch;
/* type fluid scale — display → h1 → h2 → h3 → h4 → h5. Every heading
in the site should pick the rung closest to its role, not invent
its own sizes. Body/sub/eyebrow stay fixed because they're read
at reading distance; the display sizes fluid to fit the viewport. */
--fs-display: clamp(56px, 9.5vw, 128px); /* hero only */
--fs-h1: clamp(40px, 5.6vw, 72px); /* final CTA, article title */
--fs-h2: clamp(32px, 4.4vw, 64px); /* section heads, notes title */
--fs-head: clamp(32px, 4.4vw, 64px); /* alias of --fs-h2 for backwards-compat */
--fs-h3: clamp(28px, 3.4vw, 44px); /* sub-section heads, pillar titles */
--fs-h4: clamp(22px, 2.3vw, 30px); /* card titles, principal quote, step titles */
--fs-h5: clamp(19px, 1.8vw, 24px); /* faq question, fit list, small titles */
--fs-sub: clamp(17px, 1.35vw, 20px);
--fs-body: 17px;
--fs-small: 13px;
--fs-eyebrow: 11px;
--fs-mono: 13px;
}
/* ---------- RESET & BASE --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
background: var(--surface);
color: var(--ink);
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-size: var(--fs-body);
line-height: 1.55;
font-feature-settings: "ss01", "cv11", "onum";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button {
background: none;
border: 0;
padding: 0;
color: inherit;
font: inherit;
cursor: pointer;
}
::selection { background: var(--forest); color: var(--surface); }
/* ---------- AMBIENT NOISE -------------------------------- */
.noise {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.035;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
/* ---------- CUSTOM CURSOR (desktop fine pointer only) ---- */
.cursor {
position: fixed;
top: 0; left: 0;
z-index: 9999;
pointer-events: none;
mix-blend-mode: difference;
}
.cursor-dot, .cursor-ring {
position: fixed;
top: 0; left: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
will-change: transform;
pointer-events: none;
}
.cursor-dot {
width: 5px; height: 5px;
background: #F6F1E8;
}
.cursor-ring {
width: 28px; height: 28px;
border: 1px solid rgba(246, 241, 232, 0.6);
transition: width var(--dur-fast) var(--ease-out),
height var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
opacity var(--dur-fast);
}
.cursor-label {
position: fixed;
top: 0; left: 0;
transform: translate(18px, 14px);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: #F6F1E8;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
}
.cursor.is-hover .cursor-ring {
width: 46px; height: 46px;
border-color: rgba(246, 241, 232, 0.9);
}
.cursor.is-cta .cursor-label { opacity: 1; }
@media (hover: none), (pointer: coarse) {
.cursor { display: none; }
}
/* ---------- TYPOGRAPHY ----------------------------------- */
.eyebrow {
display: inline-block;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: var(--fs-eyebrow);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.eyebrow--centered { display: block; text-align: center; }
.eyebrow--muted { color: var(--muted-2); }
.eyebrow--light { color: var(--cream-muted-on-dark); }
.section-head {
font-family: "Fraunces", ui-serif, Georgia, serif;
font-size: var(--fs-head);
font-weight: 380;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 16px 0 0;
font-variation-settings: "opsz" 120, "SOFT" 40;
color: var(--ink);
}
.section-head em {
font-style: italic;
color: var(--forest);
font-variation-settings: "opsz" 120, "SOFT" 80;
}
h3 { margin: 0; font-weight: 500; }
/* ---------- LAYOUT --------------------------------------- */
main {
position: relative;
z-index: 2;
}
section {
padding: var(--section-y) var(--gutter);
position: relative;
}
.eyebrow + .section-head { margin-top: 20px; }
/* ---------- NAV ------------------------------------------ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px var(--gutter);
background: transparent;
transition: background var(--dur-med) var(--ease-out),
backdrop-filter var(--dur-med) var(--ease-out),
border-color var(--dur-med) var(--ease-out),
padding var(--dur-med) var(--ease-out);
border-bottom: 1px solid transparent;
}
.nav.is-pinned {
background: color-mix(in oklab, var(--surface) 86%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--rule);
padding-top: 14px;
padding-bottom: 14px;
}
.nav-mark {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "Fraunces", serif;
font-size: 20px;
font-weight: 420;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 48;
}
.nav-mark svg { color: var(--forest); overflow: visible; }
/* ---------- CANON LOGO ANIMATION -----------------------
On load: the outer ring draws itself, then the inner C strokes in,
then a tiny ochre pip lands at 12-o'clock. On hover: the ring
rotates through 360° and the C scales slightly — the pip orbits
with the ring so the logo reads as a "dial". Subtle, never loud. */
.nav-mark-ring {
stroke-dasharray: 84;
stroke-dashoffset: 84;
animation: canonRingDraw 1200ms var(--ease-out) 240ms forwards;
transform-origin: 16px 16px;
transform-box: view-box;
}
.nav-mark-c {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: canonCDraw 900ms var(--ease-out) 920ms forwards;
}
.nav-mark-pip {
fill: var(--ochre);
opacity: 0;
transform-origin: 16px 16px;
transform-box: view-box;
animation: canonPipIn 420ms var(--ease-out) 1700ms forwards;
}
@keyframes canonRingDraw { to { stroke-dashoffset: 0; } }
@keyframes canonCDraw { to { stroke-dashoffset: 0; } }
@keyframes canonPipIn { to { opacity: 1; } }
/* Hover: the ring rotates (with the pip attached), the C scales a hair */
.nav-mark:hover .nav-mark-ring,
.nav-mark:hover .nav-mark-pip {
animation: canonSpin 1400ms var(--ease-out);
}
.nav-mark:hover .nav-mark-ring {
animation-name: canonRingSpin;
}
.nav-mark:hover .nav-mark-c {
animation: canonCPulse 700ms var(--ease-out);
}
@keyframes canonRingSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes canonSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes canonCPulse {
0% { transform: scale(1); transform-origin: 16px 16px; transform-box: view-box; }
50% { transform: scale(1.08); transform-origin: 16px 16px; transform-box: view-box; }
100% { transform: scale(1); transform-origin: 16px 16px; transform-box: view-box; }
}
@media (prefers-reduced-motion: reduce) {
.nav-mark-ring,
.nav-mark-c,
.nav-mark-pip {
stroke-dashoffset: 0;
opacity: 1;
animation: none !important;
}
}
.nav-meta {
display: inline-flex;
align-items: center;
gap: 20px;
}
.nav-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--ink);
border-radius: 999px;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
background: transparent;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.nav-cta:hover { background: var(--ink); color: var(--surface); }
.nav-cta svg { transition: transform var(--dur-fast) var(--ease-out); }
.nav-cta:hover svg { transform: translateX(3px); }
/* ---------- BUTTONS -------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 26px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
border-radius: 999px;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
will-change: transform;
position: relative;
}
.btn--primary {
background: var(--ink);
color: var(--surface);
}
.btn--primary:hover { background: var(--forest); }
.btn--primary svg { transition: transform var(--dur-fast) var(--ease-out); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--light {
background: var(--cream-on-dark);
color: var(--surface-deep);
}
.btn--light:hover { background: var(--surface); color: var(--forest-deep); }
.linklike {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--ink-2);
position: relative;
padding: 4px 0;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--dur-med) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.linklike:hover {
background-size: 0% 1px;
color: var(--ochre);
}
.linklike--light { color: var(--cream-on-dark); }
.linklike--light:hover { color: var(--ochre); }
/* ---------- HERO — clean editorial intro -----------------------
One viewport. One statement. One CTA. The only motion is the
engine name in the headline, which cycles through the major
AIs — this is a literal illustration of the value prop: "when
buyers ask any of these models, you want to be the answer".
No pinned scrollytelling, no orbit, no live ticker. Quiet.
------------------------------------------------------------------ */
.hero {
position: relative;
background: var(--surface);
min-height: clamp(620px, 82vh, 820px);
padding: clamp(120px, 14vh, 168px) var(--gutter) clamp(72px, 9vh, 112px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
}
.hero-inner {
width: 100%;
max-width: 1080px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
position: relative;
}
.hero-eyebrow { margin: 0 0 4px; }
.hero-title {
margin: 0;
font-family: "Fraunces", serif;
font-weight: 320;
font-size: clamp(44px, 7vw, 100px);
line-height: 1.02;
letter-spacing: -0.028em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
max-width: 22ch;
}
.hero-line {
display: block;
padding-bottom: 0.04em;
}
.hero-line--accent {
color: var(--forest);
font-style: italic;
font-weight: 340;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
/* Engine word — swaps through ChatGPT/Gemini/Claude/Perplexity/...
The typewriter-style caret after it anchors the animation visually
so each swap reads as a fresh "query landing" rather than a glitch. */
.hero-engine {
display: inline-block;
color: var(--ochre-deep);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100;
position: relative;
transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
will-change: opacity, transform;
}
.hero-engine::after {
content: "";
display: inline-block;
width: 0.06em;
height: 0.72em;
background: var(--ochre);
margin-left: 0.08em;
vertical-align: -0.04em;
border-radius: 1px;
animation: heroEngineCaret 1.05s steps(2) infinite;
}
.hero-engine.is-swap {
opacity: 0;
transform: translateY(-4px);
}
@keyframes heroEngineCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.hero-engine { transition: none; }
.hero-engine::after { animation: none; }
}
.hero-sub {
max-width: 58ch;
color: var(--ink-2);
font-size: var(--fs-sub);
line-height: 1.6;
margin: 2px 0 0;
}
.hero-sub em {
font-style: normal;
color: var(--forest);
border-bottom: 1px solid var(--rule);
padding-bottom: 1px;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
justify-content: center;
margin-top: 4px;
}
.hero-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
padding: 10px 2px;
transition: color var(--dur-fast) var(--ease-out);
}
.hero-secondary:hover { color: var(--forest); }
.hero-secondary svg {
color: var(--ochre);
transition: transform var(--dur-med) var(--ease-out);
}
.hero-secondary:hover svg { transform: translateY(3px); }
/* ---------- HERO TITLE — CHARACTER-LEVEL TYPOGRAPHY ------------
The wow is entirely in the typography: Fraunces' variable axes
do the work. Three layers compose.
1. Load reveal — CSS-only. Each fades in from
translateY(14px) with a staggered 22ms delay via --i. No JS
dependency, so a slow network never leaves the title blank.
2. Ambient axis breath — the italic accent line cycles its SOFT
axis between 80 and 100 on a slow 9s loop, giving the ink a
lived-in warmth without any visible motion.
3. Cursor-reactive weight — letters near the pointer gain wght
and SOFT (JS; max radius ~130px). Like ink blooming under the
reader's attention. Disabled on touch + reduced-motion.
------------------------------------------------------------------ */
.hero-title .char {
display: inline-block;
white-space: pre;
/* Chars are visible by default so the title is always readable even if
the animation can't run (slow network, paused timeline, reduced-motion).
The load reveal is layered on top as pure enhancement via .is-loaded. */
transition: font-variation-settings 240ms var(--ease-out);
}
.hero.is-loaded .hero-title .char {
animation: heroCharIn 760ms var(--ease-out);
animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes heroCharIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fallback — if the JS that splits the title never runs, the plain
title is still legible. The reveal only applies to .char spans. */
/* Ambient breath on the italic accent line — soft axis drift.
Starts after the reveal finishes, so it reads as the title
"settling into ink". */
.hero-line--accent .char {
animation: heroAxisBreath 9s ease-in-out infinite;
animation-delay: calc(1400ms + var(--i, 0) * 80ms);
}
@keyframes heroAxisBreath {
0%, 100% { font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 340; }
50% { font-variation-settings: "opsz" 144, "SOFT" 75, "wght" 360; }
}
@media (prefers-reduced-motion: reduce) {
.hero-title .char {
opacity: 1 !important;
transform: none !important;
transition: none;
}
.hero-line--accent .char {
animation: none;
}
}
/* ---------- ENGINE CYCLE — letter-level --------------------
Upgraded from a simple cross-fade. On swap, outgoing letters
rise and fade in sequence; incoming letters drop in on the same
stagger. Feels like a terminal query landing, not a flipboard.
We only override transition timing *during* a swap — outside of
swaps, engine chars share the hero title's slower reveal timing
so they feel consistent on load. */
/* Engine-cycle swap — fresh @keyframes per phase. No fill mode so that
if the animation can't run (frozen timeline, reduced motion), chars
fall back to the default visible state rather than sticking at the
animation's end keyframe. JS still does the text replacement between
phases, so the engine name always updates regardless of animation. */
.hero.is-loaded .hero-engine.is-swapping-out .char {
animation: heroEngineOut 320ms var(--ease-out);
animation-delay: calc(var(--ci, 0) * 26ms);
}
.hero.is-loaded .hero-engine.is-swapping-in .char {
animation: heroEngineIn 320ms var(--ease-out);
animation-delay: calc(var(--ci, 0) * 26ms);
}
@keyframes heroEngineOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-9px); }
}
@keyframes heroEngineIn {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-engine .char {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
@media (max-width: 720px) {
.hero {
min-height: clamp(560px, 80vh, 720px);
padding: clamp(96px, 14vh, 132px) var(--gutter) clamp(56px, 8vh, 88px);
}
.hero-inner { gap: 22px; }
.hero-title { font-size: clamp(38px, 10vw, 60px); max-width: 20ch; }
.hero-cta { gap: 14px; flex-direction: column; }
}
/* ---------- PLATFORMS ------------------------------------ */
.platforms {
background: var(--surface-band);
padding-top: clamp(36px, 4.5vw, 56px);
padding-bottom: clamp(36px, 4.5vw, 56px);
}
.platforms-rule {
height: 1px;
background: var(--rule);
margin: 24px 0;
}
.platform-strip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
padding: 0;
}
.platform {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--muted);
font-family: "Fraunces", serif;
font-weight: 360;
font-size: 17px;
letter-spacing: -0.005em;
padding: 14px 10px;
font-variation-settings: "opsz" 30;
transition: color var(--dur-fast) var(--ease-out),
transform var(--dur-med) var(--ease-out);
position: relative;
}
.platform::after {
content: "";
position: absolute;
inset: 0;
right: 0;
border-right: 1px solid var(--rule);
}
.platform:last-child::after { display: none; }
.platform-mark {
width: 20px; height: 20px;
flex: none;
color: var(--forest);
transition: transform var(--dur-med) var(--ease-out);
}
.platform.is-active {
color: var(--ink);
}
.platform.is-active .platform-mark {
transform: rotate(-8deg) scale(1.08);
color: var(--ochre);
}
.platforms-note {
text-align: center;
font-size: 11px;
color: var(--muted-2);
margin: 0;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.01em;
}
@media (max-width: 900px) {
.platform-strip { grid-template-columns: repeat(3, 1fr); }
.platform:nth-child(3)::after { display: none; }
.platform:nth-child(n+4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) {
.platform-strip { grid-template-columns: repeat(2, 1fr); }
.platform::after { display: none !important; }
.platform { border-right: 1px solid var(--rule); }
.platform:nth-child(2n) { border-right: 0; }
.platform:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
/* ---------- SHIFT ---------------------------------------- */
.shift {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.shift-col--body {
max-width: 54ch;
font-size: var(--fs-sub);
color: var(--ink-2);
line-height: 1.55;
}
.shift-col--body p { margin: 0 0 20px; }
.shift-col--body p:last-child { margin-bottom: 0; }
.shift-col--body .hot {
font-family: "Fraunces", serif;
font-style: italic;
font-size: 1.15em;
color: var(--ochre-deep);
font-variation-settings: "opsz" 60, "SOFT" 100;
}
/* Sticky editorial heading on desktop — reads like a long-form feature */
@media (min-width: 901px) {
.shift { align-items: start; }
.shift-col:first-child {
position: sticky;
top: 120px;
align-self: start;
}
}
/* Drop cap on the body column's first paragraph */
.shift-col--body > p:first-child::first-letter {
font-family: "Fraunces", serif;
font-weight: 380;
font-size: 4.1em;
line-height: 0.82;
float: left;
padding: 6px 14px 0 0;
margin-top: 4px;
color: var(--forest);
font-variation-settings: "opsz" 144, "SOFT" 30;
}
@media (max-width: 900px) {
.shift { grid-template-columns: 1fr; gap: 28px; }
.shift-col--body > p:first-child::first-letter {
font-size: 3.4em;
padding: 4px 10px 0 0;
}
}
/* ---------- SIGNAL --------------------------------------- */
.signal {
background: var(--surface-band);
padding-top: var(--section-y-short);
padding-bottom: var(--section-y-short);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.signal-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.signal-cell {
padding: 12px 28px;
position: relative;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 12px;
min-height: 220px;
}
.signal-cell:last-child { border-right: 0; }
.signal-num {
font-family: "Fraunces", serif;
font-weight: 380;
font-size: clamp(48px, 5vw, 72px);
line-height: 1;
color: var(--ink);
letter-spacing: -0.035em;
font-variation-settings: "opsz" 96, "SOFT" 30;
font-variant-numeric: tabular-nums;
}
.signal-cap {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: var(--ink-2);
}
.signal-cap strong { color: var(--forest); font-weight: 600; }
.signal-cap span {
display: block;
margin-top: 6px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--muted-2);
}
.spark {
height: 28px;
width: 100%;
color: var(--ochre);
margin-top: auto;
overflow: visible;
}
.spark path {
stroke-dasharray: 300;
stroke-dashoffset: 300;
}
.signal-cell.is-in .spark path { animation: sparkdraw 900ms var(--ease-out) 400ms forwards; }
@keyframes sparkdraw { to { stroke-dashoffset: 0; } }
/* Live tip — solid dot at the end of the line + an expanding ring
that loops. Reads as "new data point just arrived". Only starts
after the line has finished drawing. */
.spark-tip,
.note-spark .spark-tip {
fill: var(--ochre);
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.spark-pulse,
.note-spark .spark-pulse {
fill: none;
stroke: var(--ochre);
stroke-width: 0.8;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.signal-cell.is-in .spark-tip,
.notes.is-in .note-card .spark-tip {
animation: sparkTipIn 600ms var(--ease-out) 1200ms forwards;
}
.signal-cell.is-in .spark-pulse,
.notes.is-in .note-card .spark-pulse {
animation: sparkPulse 3.2s ease-out 1500ms infinite;
}
@keyframes sparkTipIn {
0% { opacity: 0; transform: scale(0.3); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes sparkPulse {
0% { opacity: 0.85; transform: scale(1); }
90% { opacity: 0; transform: scale(4.5); }
100% { opacity: 0; transform: scale(4.5); }
}
@media (prefers-reduced-motion: reduce) {
.spark-tip, .spark-pulse { opacity: 1 !important; animation: none !important; }
.spark-pulse { display: none; }
}
@media (max-width: 900px) {
.signal-grid { grid-template-columns: repeat(2, 1fr); }
.signal-cell:nth-child(2) { border-right: 0; }
.signal-cell:nth-child(n+3) { border-top: 1px solid var(--rule); padding-top: 30px; }
}
@media (max-width: 520px) {
.signal-grid { grid-template-columns: 1fr; }
.signal-cell { border-right: 0; padding: 20px 6px; }
.signal-cell + .signal-cell { border-top: 1px solid var(--rule); }
}
/* ---------- FIELD NOTES (dark editorial section) -------- */
.notes {
background: var(--surface-deep);
color: var(--cream-on-dark);
padding: calc(var(--section-y) * 1.1) var(--gutter);
position: relative;
overflow: hidden;
}
.notes::before {
/* subtle top hairline */
content: "";
position: absolute;
top: 0; left: var(--gutter); right: var(--gutter);
height: 1px;
background: rgba(241, 236, 225, 0.08);
}
.notes-inner {
max-width: 1280px;
margin: 0 auto;
}
.notes-head {
max-width: 780px;
margin: 0 0 48px;
}
.notes-title {
margin: 14px 0 16px;
font-family: "Fraunces", serif;
font-size: var(--fs-h2);
font-weight: 360;
letter-spacing: -0.025em;
line-height: 1.04;
color: var(--cream-on-dark);
font-variation-settings: "opsz" 120, "SOFT" 40;
}
.notes-sub {
margin: 0;
max-width: 56ch;
color: var(--cream-muted-on-dark);
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.55;
}
.notes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.note-card {
position: relative;
opacity: 0;
transform: translateY(18px);
}
.notes.is-in .note-card {
animation: noteCardIn 720ms var(--ease-out) forwards;
animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes noteCardIn {
to { opacity: 1; transform: translateY(0); }
}
.note-link {
display: flex;
flex-direction: column;
gap: 18px;
padding: 30px 28px 26px;
height: 100%;
min-height: 380px;
background: rgba(241, 236, 225, 0.025);
border: 1px solid rgba(241, 236, 225, 0.10);
border-radius: 3px;
color: inherit;
text-decoration: none;
transition: transform 520ms var(--ease-out),
border-color 420ms var(--ease-out),
background 420ms var(--ease-out),
box-shadow 520ms var(--ease-out);
transform-style: preserve-3d;
will-change: transform;
position: relative;
}
.note-link:hover,
.note-link:focus-visible {
transform: translateY(-4px) perspective(900px) rotateX(2deg);
border-color: rgba(241, 236, 225, 0.22);
background: rgba(241, 236, 225, 0.04);
box-shadow: 0 30px 50px -40px rgba(0, 0, 0, 0.8);
outline: none;
}
.note-eyebrow {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--cream-muted-on-dark);
}
.note-title {
margin: 0;
font-family: "Fraunces", serif;
font-size: clamp(22px, 2.05vw, 28px);
font-weight: 380;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--cream-on-dark);
font-variation-settings: "opsz" 72, "SOFT" 30;
}
.note-kpi {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 6px;
}
.note-kpi-num {
font-family: "Fraunces", serif;
font-style: italic;
font-size: clamp(38px, 3.6vw, 48px);
font-weight: 340;
line-height: 1;
color: var(--ochre);
letter-spacing: -0.02em;
font-variation-settings: "opsz" 96, "SOFT" 100;
transition: color 320ms var(--ease-out);
}
.note-kpi-num i {
font-style: italic;
font-size: 0.65em;
margin-left: 2px;
color: rgba(184, 118, 60, 0.7);
}
.note-link:hover .note-kpi-num {
color: #D4924E;
}
.note-kpi-cap {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.02em;
color: var(--cream-muted-on-dark);
max-width: 32ch;
}
.note-spark {
height: 20px;
width: 60%;
color: var(--ochre);
opacity: 0.8;
}
.note-spark path {
stroke-dasharray: 240;
stroke-dashoffset: 240;
transition: stroke-dashoffset 1000ms var(--ease-out);
}
.notes.is-in .note-card .note-spark path {
stroke-dashoffset: 0;
transition-delay: calc(var(--i, 0) * 90ms + 300ms);
}
.note-link:hover .note-spark path {
animation: sparkredraw 900ms var(--ease-out);
}
@keyframes sparkredraw {
0% { stroke-dashoffset: 240; }
100% { stroke-dashoffset: 0; }
}
.note-meta {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 18px;
border-top: 1px solid rgba(241, 236, 225, 0.08);
font-family: "JetBrains Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.note-date { color: var(--cream-muted-on-dark); }
.note-read { color: var(--ochre); transition: transform 320ms var(--ease-out); }
.note-read span {
display: inline-block;
margin-left: 2px;
transition: transform 320ms var(--ease-out);
}
.note-link:hover .note-read span { transform: translateX(4px); }
@media (max-width: 900px) {
.notes-grid { grid-template-columns: 1fr; gap: 16px; }
.notes-head { margin-bottom: 40px; }
.note-link { min-height: 0; padding: 26px 22px 22px; }
}
/* ---------- SERVICES (TWO PILLARS) ----------------------- */
.services-head {
max-width: var(--prose);
margin-bottom: 56px;
}
.pillar {
display: grid;
grid-template-columns: 64px minmax(0, 52ch) minmax(300px, 1fr);
gap: 36px 64px;
align-items: center;
padding: 72px 0;
border-top: 1px solid var(--rule);
position: relative;
}
.pillar:last-child { border-bottom: 1px solid var(--rule); }
/* Alt pillar flips the viz to the left for visual variety — the body
remains the reading focus on the right, which keeps editorial rhythm. */
.pillar--alt { grid-template-columns: minmax(300px, 1fr) minmax(0, 52ch) 64px; }
.pillar--alt .pillar-num { order: 3; text-align: right; }
.pillar--alt .pillar-body { order: 2; }
.pillar--alt .pillar-viz { order: 1; }
.pillar-num {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
color: var(--ochre);
letter-spacing: 0.1em;
padding-top: 8px;
}
.pillar-title {
font-family: "Fraunces", serif;
font-weight: 380;
font-size: var(--fs-h3);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 18px;
font-variation-settings: "opsz" 80, "SOFT" 40;
}
.pillar-lede {
font-size: var(--fs-sub);
color: var(--ink-2);
margin: 0 0 28px;
max-width: 40ch;
line-height: 1.45;
}
.pillar-list {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0 0 28px;
max-width: 48ch;
}
.pillar-list li {
display: grid;
grid-template-columns: 14px 1fr;
gap: 14px;
font-size: 15px;
color: var(--ink-2);
line-height: 1.45;
position: relative;
}
.pillar-list li::before {
content: "";
width: 14px; height: 1px;
background: var(--ochre);
margin-top: 11px;
}
.pillar-list li em { font-style: italic; color: var(--forest); }
.pillar-outcome {
font-family: "Fraunces", serif;
font-style: italic;
font-variation-settings: "opsz" 48, "SOFT" 100;
font-size: 19px;
color: var(--forest);
margin: 0;
padding-left: 16px;
border-left: 2px solid var(--ochre);
max-width: 44ch;
}
/* ---------- PILLAR VISUAL -----------------------------------
Each pillar has its own animated SVG scene. Same visual language
as the method-step figures (cream paper, forest ink, ochre
accents, low-amplitude motion) but given more canvas to breathe.
The scene animates in once the pillar is in view. */
.pillar-viz {
position: relative;
align-self: center;
justify-self: end;
width: 100%;
max-width: 440px;
aspect-ratio: 1.08 / 1;
padding: 22px;
background: var(--surface-paper);
border: 1px solid var(--rule);
border-radius: 4px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(23, 22, 19, 0.02),
0 26px 40px -36px rgba(23, 22, 19, 0.18),
0 50px 80px -60px rgba(23, 22, 19, 0.22);
}
.pillar--alt .pillar-viz { justify-self: start; }
.pillar-viz::before {
/* Faint paper-grain overlay on the card surface */
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(184, 118, 60, 0.06), transparent 65%),
radial-gradient(ellipse 70% 60% at 85% 95%, rgba(42, 61, 46, 0.05), transparent 65%);
pointer-events: none;
}
.pillar-viz-label {
position: absolute;
top: 16px;
left: 18px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 8px;
z-index: 1;
}
.pillar-viz-label::before {
content: "";
width: 14px; height: 1px;
background: var(--ochre);
}
.pillar-viz-caption {
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
font-family: "Fraunces", ui-serif, Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--muted);
line-height: 1.35;
font-variation-settings: "opsz" 36, "SOFT" 100;
z-index: 1;
}
.pillar-viz svg {
position: absolute;
inset: 18px;
width: calc(100% - 36px);
height: calc(100% - 36px);
color: var(--forest);
overflow: visible;
}
/* ---- 01 Visibility Audit — polar citation chart ---------- */
/* A radial "scorecard" across six engines. Dots plot your rank
on each axis; competitor dots cluster near the outer rim while
a single ochre "gap" dot sits near the centre (low visibility).
Animated scan arc sweeps around and a ping pulses on the gap. */
.viz-audit .ring,
.viz-audit .axis {
fill: none;
stroke: currentColor;
stroke-width: 0.55;
}
.viz-audit .ring { opacity: 0.22; }
.viz-audit .ring-outer { opacity: 0.34; }
.viz-audit .axis { opacity: 0.30; }
.viz-audit .axis-label {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 3.4px;
letter-spacing: 0.14em;
fill: var(--muted);
text-transform: uppercase;
}
.viz-audit .comp-dot {
fill: var(--forest);
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.pillar.is-in .viz-audit .comp-dot {
animation: auditDotIn 700ms var(--ease-out) forwards;
}
.pillar.is-in .viz-audit .comp-dot:nth-child(7n+1) { animation-delay: 360ms; }
.pillar.is-in .viz-audit .comp-dot:nth-child(7n+2) { animation-delay: 460ms; }
.pillar.is-in .viz-audit .comp-dot:nth-child(7n+3) { animation-delay: 560ms; }
.pillar.is-in .viz-audit .comp-dot:nth-child(7n+4) { animation-delay: 660ms; }
.pillar.is-in .viz-audit .comp-dot:nth-child(7n+5) { animation-delay: 760ms; }
.pillar.is-in .viz-audit .comp-dot:nth-child(7n+6) { animation-delay: 860ms; }
.pillar.is-in .viz-audit .comp-dot:nth-child(7n) { animation-delay: 960ms; }
@keyframes auditDotIn {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 0.75; transform: scale(1); }
}
.viz-audit .comp-path {
fill: rgba(42, 61, 46, 0.06);
stroke: currentColor;
stroke-width: 0.55;
opacity: 0;
transition: opacity 1000ms var(--ease-out) 1100ms;
}
.pillar.is-in .viz-audit .comp-path { opacity: 0.55; }
.viz-audit .gap-ring {
fill: none;
stroke: var(--ochre);
stroke-width: 0.9;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.pillar.is-in .viz-audit .gap-ring {
animation: auditGapIn 520ms var(--ease-out) 1400ms forwards;
}
@keyframes auditGapIn {
from { opacity: 0; transform: scale(0.3); }
to { opacity: 1; transform: scale(1); }
}
.viz-audit .gap-pulse {
fill: none;
stroke: var(--ochre);
stroke-width: 0.8;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.pillar.is-in .viz-audit .gap-pulse {
animation: auditGapPulse 3.6s ease-out 1800ms infinite;
}
@keyframes auditGapPulse {
0% { opacity: 0.8; transform: scale(1); }
80% { opacity: 0; transform: scale(3.8); }
100% { opacity: 0; transform: scale(3.8); }
}
.viz-audit .gap-label {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 3.2px;
letter-spacing: 0.14em;
fill: var(--ochre-deep);
text-transform: uppercase;
opacity: 0;
transition: opacity 600ms var(--ease-out) 2000ms;
}
.pillar.is-in .viz-audit .gap-label { opacity: 1; }
.viz-audit .scan-arc {
fill: none;
stroke: url(#viz-audit-scan);
stroke-width: 0.9;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.pillar.is-in .viz-audit .scan-arc {
opacity: 0.7;
animation: auditScan 7s linear 1200ms infinite;
}
@keyframes auditScan {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ---- 02 Channel Optimisation — citation weave -------------- */
/* A hub (your brand) in the centre. Five source nodes orbit:
G2, Reddit, YouTube, Capterra, Forum. Threads draw from hub
to each source; a travelling "packet" glides along each thread;
source rings pulse as they receive. */
.viz-channel .hub-ring {
fill: none;
stroke: currentColor;
stroke-width: 0.7;
opacity: 0.6;
}
.viz-channel .hub-core {
fill: var(--forest);
opacity: 0.9;
}
.viz-channel .hub-breath {
fill: none;
stroke: currentColor;
stroke-width: 0.7;
transform-box: fill-box;
transform-origin: center;
opacity: 0;
}
.pillar.is-in .viz-channel .hub-breath {
animation: channelHubBreath 4.4s ease-in-out 800ms infinite;
}
@keyframes channelHubBreath {
0%, 100% { opacity: 0.45; transform: scale(1); }
50% { opacity: 0; transform: scale(2.2); }
}
.viz-channel .thread {
fill: none;
stroke: currentColor;
stroke-width: 0.6;
opacity: 0.36;
stroke-dasharray: 120;
stroke-dashoffset: 120;
transition: stroke-dashoffset 1100ms var(--ease-out);
}
.pillar.is-in .viz-channel .thread { stroke-dashoffset: 0; }
.pillar.is-in .viz-channel .thread:nth-child(5n+1) { transition-delay: 200ms; }
.pillar.is-in .viz-channel .thread:nth-child(5n+2) { transition-delay: 340ms; }
.pillar.is-in .viz-channel .thread:nth-child(5n+3) { transition-delay: 480ms; }
.pillar.is-in .viz-channel .thread:nth-child(5n+4) { transition-delay: 620ms; }
.pillar.is-in .viz-channel .thread:nth-child(5n+5) { transition-delay: 760ms; }
.viz-channel .source-ring {
fill: var(--surface-paper);
stroke: currentColor;
stroke-width: 0.7;
opacity: 0.85;
}
.viz-channel .source-label {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 3.4px;
letter-spacing: 0.12em;
fill: var(--ink-2);
text-transform: uppercase;
text-anchor: middle;
dominant-baseline: middle;
}
.viz-channel .source-dot {
fill: var(--ochre);
transform-box: fill-box;
transform-origin: center;
opacity: 0;
}
.pillar.is-in .viz-channel .source-dot {
animation: channelSourcePulse 4s ease-out infinite;
}
.pillar.is-in .viz-channel .source-dot:nth-child(6n+1) { animation-delay: 1400ms; }
.pillar.is-in .viz-channel .source-dot:nth-child(6n+2) { animation-delay: 1800ms; }
.pillar.is-in .viz-channel .source-dot:nth-child(6n+3) { animation-delay: 2200ms; }
.pillar.is-in .viz-channel .source-dot:nth-child(6n+4) { animation-delay: 2600ms; }
.pillar.is-in .viz-channel .source-dot:nth-child(6n+5) { animation-delay: 3000ms; }
@keyframes channelSourcePulse {
0% { opacity: 1; transform: scale(1); }
60% { opacity: 0; transform: scale(3); }
100% { opacity: 0; transform: scale(3); }
}
.viz-channel .packet {
fill: var(--ochre);
opacity: 0;
offset-rotate: 0deg;
}
.pillar.is-in .viz-channel .packet {
animation: channelPacket 3.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.pillar.is-in .viz-channel .packet:nth-of-type(5n+1) { animation-delay: 1300ms; }
.pillar.is-in .viz-channel .packet:nth-of-type(5n+2) { animation-delay: 1700ms; }
.pillar.is-in .viz-channel .packet:nth-of-type(5n+3) { animation-delay: 2100ms; }
.pillar.is-in .viz-channel .packet:nth-of-type(5n+4) { animation-delay: 2500ms; }
.pillar.is-in .viz-channel .packet:nth-of-type(5n+5) { animation-delay: 2900ms; }
@keyframes channelPacket {
0% { offset-distance: 0%; opacity: 0; }
8% { opacity: 1; }
88% { offset-distance: 100%; opacity: 1; }
96% { opacity: 0; }
100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.viz-audit .comp-dot,
.viz-audit .gap-ring,
.viz-audit .comp-path,
.viz-audit .gap-label { opacity: 1 !important; animation: none !important; transition: none !important; }
.viz-audit .scan-arc,
.viz-audit .gap-pulse { display: none; }
.viz-channel .thread { stroke-dashoffset: 0 !important; transition: none !important; }
.viz-channel .hub-breath,
.viz-channel .source-dot,
.viz-channel .packet { display: none !important; }
}
@media (max-width: 1000px) {
.pillar { grid-template-columns: 50px minmax(0, 1fr) minmax(220px, 280px); gap: 28px 40px; padding: 56px 0; }
.pillar--alt { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) 50px; }
.pillar-viz { max-width: 280px; padding: 18px; }
.pillar-viz svg { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
}
@media (max-width: 720px) {
.pillar {
grid-template-columns: 1fr;
gap: 28px;
padding: 48px 0;
}
.pillar--alt { grid-template-columns: 1fr; }
.pillar--alt .pillar-num { order: 0; text-align: left; }
.pillar--alt .pillar-body { order: 1; }
.pillar--alt .pillar-viz { order: 2; justify-self: start; }
.pillar-num { padding-top: 0; }
.pillar-viz {
max-width: 100%;
aspect-ratio: 1.05 / 1;
padding: 16px;
justify-self: stretch;
min-height: 320px;
}
/* Push the SVG inwards so the top-left label and bottom
caption don't collide with the radial chart's axis labels. */
.pillar-viz svg {
inset: 44px 16px 54px 16px;
width: calc(100% - 32px);
height: calc(100% - 98px);
}
.pillar-viz-label {
top: 14px;
left: 16px;
right: 16px;
font-size: 9.5px;
letter-spacing: 0.16em;
}
.pillar-viz-caption {
bottom: 14px;
left: 16px;
right: 16px;
font-size: 12px;
line-height: 1.3;
}
.viz-audit .axis-label,
.viz-channel .source-label { font-size: 3.8px; }
.viz-audit .gap-label { font-size: 3.6px; }
}
/* ---------- METHOD (pinned horizontal scroll) ------------ */
.method { padding-top: var(--section-y-tight); padding-bottom: 24px; }
.method-intro {
max-width: var(--prose);
margin-bottom: 48px;
}
.method-sub {
color: var(--muted);
font-size: var(--fs-sub);
max-width: 48ch;
margin: 20px 0 0;
line-height: 1.5;
}
.method-pin {
height: 100vh;
overflow: hidden;
position: relative;
}
.method-track {
display: flex;
height: 100%;
align-items: center;
gap: clamp(24px, 4vw, 80px);
padding: 0 var(--gutter);
will-change: transform;
}
.method-step {
flex: 0 0 clamp(380px, 60vw, 560px);
height: 70%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 36px;
background: var(--surface-paper);
border: 1px solid var(--rule);
border-radius: 2px;
color: var(--ink);
position: relative;
}
.method-step-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 18px;
}
.step-num {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--ochre);
letter-spacing: 0.12em;
}
.step-label {
font-family: "Fraunces", serif;
font-style: italic;
font-size: 18px;
color: var(--muted);
font-variation-settings: "opsz" 30, "SOFT" 90;
}
.step-title {
font-family: "Fraunces", serif;
font-weight: 380;
font-size: var(--fs-h4);
line-height: 1.1;
letter-spacing: -0.015em;
font-variation-settings: "opsz" 72, "SOFT" 40;
max-width: 22ch;
}
.step-svg {
width: 100%;
height: 60%;
color: var(--forest);
align-self: flex-end;
}
.step-svg [data-draw] > * {
stroke-dasharray: 480;
stroke-dashoffset: 480;
}
.method-step.is-in .step-svg [data-draw] > * {
animation: stepdraw 1.3s var(--ease-out) forwards;
}
@keyframes stepdraw { to { stroke-dashoffset: 0; } }
/* --- METHOD: continuous subtle motion (editorial, not dashboardy) ---
Animated overlays live in a [data-anim] group alongside [data-draw].
They wait for .is-in on the step, then loop with low-amplitude pulses.
Amplitudes + timings are deliberately slow — this is editorial "life",
not telemetry flicker. */
.step-svg [data-anim] { pointer-events: none; }
.step-svg [data-anim] > * { opacity: 0; }
/* 01 Audit — scan sweep across the table + "you missing" ochre ring pulse */
.method-step.is-in .step-svg .fig-scan {
animation: scanSweep 7s ease-in-out infinite;
animation-delay: 0.8s;
}
@keyframes scanSweep {
0% { transform: translateX(0); opacity: 0; }
8% { opacity: 0.45; }
48% { transform: translateX(138px); opacity: 0.45; }
58% { opacity: 0; }
100% { transform: translateX(0); opacity: 0; }
}
.method-step.is-in .step-svg .fig-gap {
animation: gapReveal 600ms var(--ease-out) 1s forwards;
}
@keyframes gapReveal { to { opacity: 1; } }
.method-step.is-in .step-svg .fig-gap-pulse {
transform-box: fill-box;
transform-origin: center;
animation: gapPulse 3.4s ease-out infinite;
animation-delay: 1.4s;
}
@keyframes gapPulse {
0% { transform: scale(1); opacity: 0.7; }
90% { transform: scale(3.6); opacity: 0; }
100% { transform: scale(3.6); opacity: 0; }
}
/* 02 Map — outer-node sonar pings in sequence + central breath */
.method-step.is-in .step-svg .fig-core-breath {
transform-box: fill-box;
transform-origin: center;
animation: coreBreath 4.4s ease-in-out infinite;
animation-delay: 0.4s;
}
@keyframes coreBreath {
0%, 100% { transform: scale(1); opacity: 0.35; }
50% { transform: scale(1.55); opacity: 0; }
}
.method-step.is-in .step-svg .fig-sonar {
transform-box: fill-box;
transform-origin: center;
animation: sonarPing 5.5s ease-out infinite;
animation-delay: calc(0.6s + var(--i, 0) * 1.05s);
}
@keyframes sonarPing {
0%, 22%, 100% { opacity: 0; transform: scale(1); }
2% { opacity: 0.75; transform: scale(1); }
20% { opacity: 0; transform: scale(2.6); }
}
/* 03 Place — three packets travel from the source boxes into the hub */
.method-step.is-in .step-svg .fig-packet {
animation: packetFlow 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
animation-delay: calc(0.6s + var(--i, 0) * 1.35s);
}
@keyframes packetFlow {
0% { transform: translateX(0); opacity: 0; }
8% { opacity: 1; }
58% { transform: translateX(82px); opacity: 1; }
68% { transform: translateX(82px); opacity: 0; }
100% { transform: translateX(82px); opacity: 0; }
}
.method-step.is-in .step-svg .fig-hub-pulse {
transform-box: fill-box;
transform-origin: center;
animation: hubPulse 4.5s ease-out infinite;
animation-delay: 1.8s;
}
@keyframes hubPulse {
0%, 100% { transform: scale(1); opacity: 0; }
4% { transform: scale(1); opacity: 0.5; }
35% { transform: scale(1.35); opacity: 0; }
}
/* 04 Measure — the reading scanline sweeps across, a traveller rides
the trend line, and two offset sonar rings pulse on the latest point
so the chart feels continuously "live" instead of a static plot. */
.method-step.is-in .step-svg .fig-live {
transform-box: fill-box;
transform-origin: center;
animation: liveSonar 3.2s ease-out infinite;
animation-delay: 0.8s;
}
.method-step.is-in .step-svg .fig-live-2 {
transform-box: fill-box;
transform-origin: center;
animation: liveSonar 3.2s ease-out infinite;
animation-delay: 2.0s;
}
@keyframes liveSonar {
0% { transform: scale(1); opacity: 0.9; }
90% { transform: scale(4); opacity: 0; }
100% { transform: scale(4); opacity: 0; }
}
.method-step.is-in .step-svg .fig-traveler {
offset-path: path('M20 130 L60 120 L100 100 L140 85 L180 60 L220 35');
animation: measureTravel 4.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation-delay: 1.2s;
opacity: 0;
}
@keyframes measureTravel {
0% { offset-distance: 0%; opacity: 0; }
6% { opacity: 1; }
78% { offset-distance: 100%; opacity: 1; }
90% { offset-distance: 100%; opacity: 0; }
100% { offset-distance: 0%; opacity: 0; }
}
.method-step.is-in .step-svg .fig-scan-v {
animation: measureScanV 5.6s ease-in-out infinite;
animation-delay: 0.6s;
}
@keyframes measureScanV {
0% { transform: translateX(0); opacity: 0; }
6% { opacity: 0.5; }
78% { transform: translateX(200px); opacity: 0.5; }
88% { opacity: 0; }
100% { transform: translateX(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.step-svg .fig-scan,
.step-svg .fig-gap-pulse,
.step-svg .fig-core-breath,
.step-svg .fig-sonar,
.step-svg .fig-packet,
.step-svg .fig-hub-pulse,
.step-svg .fig-live,
.step-svg .fig-live-2,
.step-svg .fig-traveler,
.step-svg .fig-scan-v { display: none !important; }
.step-svg .fig-gap { opacity: 1 !important; }
}
/* Stacked fallback (tablet & mobile).
Hard resets for anything GSAP might have inlined while the
viewport was wide — otherwise a stale translateX can float
the method cards (and their "Audit. Map. Place. Measure."
heading area) over earlier sections on mobile. */
@media (max-width: 900px) {
.method-pin {
height: auto !important;
overflow: visible !important;
contain: layout;
}
.method-track {
flex-direction: column;
height: auto !important;
padding: 0;
gap: 20px;
transform: none !important;
will-change: auto !important;
}
.method-step { flex: 1 1 auto; width: 100%; height: auto; padding: 24px; }
.step-svg { height: 180px; }
}
/* ---------- FIT — shortlist layout --------------------------
Two-column card layout with header marks (✓ / ✕), staggered
item reveal, and hover lift. Both halves read as editorial
cards rather than bulleted lists, so the section holds weight
next to the other premium pillars on the page. */
.fit {
background: var(--surface-paper);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
overflow: hidden;
position: relative;
}
.fit::before {
/* Very soft diagonal texture so the card surface has paper depth */
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 20% 10%, rgba(42, 61, 46, 0.05), transparent 70%),
radial-gradient(ellipse 70% 60% at 85% 90%, rgba(184, 118, 60, 0.04), transparent 70%);
pointer-events: none;
opacity: 0;
transition: opacity 1200ms var(--ease-out);
}
.fit.is-in::before { opacity: 1; }
.fit-inner {
max-width: 1180px;
margin: 0 auto;
position: relative;
}
.fit-intro {
max-width: var(--prose);
margin-bottom: clamp(40px, 5vw, 64px);
}
.fit-intro .section-head {
color: var(--ink);
}
.fit-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0 clamp(32px, 4vw, 72px);
align-items: start;
}
.fit-divider {
width: 1px;
align-self: stretch;
background: linear-gradient(to bottom,
transparent 0%,
var(--rule) 12%,
var(--rule) 88%,
transparent 100%);
transform: scaleY(0);
transform-origin: 50% 0;
transition: transform 1400ms var(--ease-out) 200ms;
}
.fit.is-in .fit-divider { transform: scaleY(1); }
.fit-col {
padding: clamp(28px, 3.5vw, 48px) 0;
position: relative;
}
.fit-col-head {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: clamp(22px, 2.4vw, 32px);
}
.fit-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--rule);
background: var(--surface);
transition: transform 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
.fit-mark--for {
color: var(--forest);
border-color: rgba(42, 61, 46, 0.25);
}
.fit-mark--not {
color: var(--muted-2);
border-color: var(--rule);
}
.fit-col:hover .fit-mark--for {
transform: scale(1.08);
border-color: var(--forest);
}
.fit-col:hover .fit-mark--not {
transform: rotate(90deg);
border-color: var(--muted);
}
.fit-mark-path {
stroke-dasharray: 40;
stroke-dashoffset: 40;
transition: stroke-dashoffset 700ms var(--ease-out);
}
.fit.is-in .fit-col--for .fit-mark-path {
stroke-dashoffset: 0;
transition-delay: 400ms;
}
.fit.is-in .fit-col--not .fit-mark-path {
stroke-dashoffset: 0;
transition-delay: 500ms;
}
.fit.is-in .fit-col--not .fit-mark-path--2 {
transition-delay: 620ms;
}
.fit-col-label {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.fit-col--for .fit-col-label { color: var(--forest); }
.fit-list {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.6vw, 20px);
margin: 0;
}
.fit-item {
display: grid;
grid-template-columns: 22px 1fr;
gap: 16px;
align-items: baseline;
font-family: "Fraunces", serif;
font-size: var(--fs-h5);
line-height: 1.3;
font-weight: 380;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 48, "SOFT" 50;
opacity: 0;
transform: translateY(12px);
transition:
opacity 620ms var(--ease-out),
transform 620ms var(--ease-out);
transition-delay: calc(180ms + var(--i, 0) * 90ms);
}
.fit.is-in .fit-item {
opacity: 1;
transform: translateY(0);
}
.fit-item strong {
color: var(--forest);
font-weight: 500;
font-variation-settings: "opsz" 48, "SOFT" 30;
}
.fit-list--not .fit-item {
color: var(--muted-2);
font-style: italic;
font-variation-settings: "opsz" 48, "SOFT" 100;
}
/* Item bullet — ochre dash for "for", muted dash for "not for" */
.fit-item-bullet {
position: relative;
width: 22px;
height: 1px;
background: var(--ochre);
margin-top: 0.6em;
transform-origin: 0 50%;
transform: scaleX(0);
transition: transform 560ms var(--ease-out);
transition-delay: calc(260ms + var(--i, 0) * 90ms);
}
.fit.is-in .fit-item-bullet { transform: scaleX(1); }
.fit-list--not .fit-item-bullet { background: var(--muted-2); opacity: 0.5; }
/* Hover — nudge the item + extend its bullet */
.fit-item:hover .fit-item-bullet {
animation: fitBulletExtend 520ms var(--ease-out);
}
@keyframes fitBulletExtend {
0% { transform: scaleX(1); }
50% { transform: scaleX(1.4); }
100% { transform: scaleX(1); }
}
@media (max-width: 900px) {
.fit { padding: var(--section-y) var(--gutter); }
.fit-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.fit-divider {
width: 100%;
height: 1px;
align-self: auto;
background: linear-gradient(to right,
transparent 0%,
var(--rule) 10%,
var(--rule) 90%,
transparent 100%);
transform: scaleX(0);
transform-origin: 0 50%;
}
.fit.is-in .fit-divider { transform: scaleX(1); }
.fit-col { padding: 28px 0; }
.fit-col--not { padding-top: 32px; }
}
@media (max-width: 480px) {
.fit-mark { width: 32px; height: 32px; }
.fit-mark svg { width: 15px; height: 15px; }
.fit-item { grid-template-columns: 18px 1fr; gap: 12px; }
.fit-item-bullet { width: 18px; }
}
/* ---------- ENGAGEMENT (timeline) ------------------------ */
.engagement-intro {
max-width: var(--prose);
margin-bottom: 80px;
}
.timeline {
position: relative;
padding-left: 40px;
}
.timeline::before {
content: "";
position: absolute;
left: 8px; top: 0; bottom: 0;
width: 1px;
background: var(--rule);
}
.timeline::after {
content: "";
position: absolute;
left: 8px; top: 0;
width: 1px;
background: var(--forest);
height: var(--tl-progress, 0%);
transition: height 100ms linear;
}
.tl-step {
position: relative;
padding: 14px 0 48px 24px;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-dot {
position: absolute;
left: -40px; top: 18px;
width: 17px; height: 17px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--rule);
display: flex; align-items: center; justify-content: center;
transition: transform var(--dur-med) var(--ease-out),
border-color var(--dur-med) var(--ease-out),
background var(--dur-med) var(--ease-out);
}
.tl-dot::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--rule-strong);
transition: background var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out);
}
.tl-step.is-in .tl-dot {
border-color: var(--forest);
background: var(--surface-paper);
}
.tl-step.is-in .tl-dot::before {
background: var(--forest);
box-shadow: 0 0 0 4px rgba(42, 61, 46, 0.12);
}
.tl-week {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--ochre);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tl-title {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: var(--fs-h4);
letter-spacing: -0.015em;
margin: 6px 0 10px;
font-variation-settings: "opsz" 60, "SOFT" 50;
}
.tl-body {
margin: 0;
font-size: 15px;
color: var(--ink-2);
max-width: 56ch;
line-height: 1.5;
}
/* ---------- HOW WE WORK — Part B timeline sub-head ------- */
.method-timeline {
max-width: 820px;
margin: clamp(56px, 7vw, 96px) auto var(--section-y-tight);
padding: 0 var(--gutter);
}
.method-timeline-head {
margin-bottom: 44px;
max-width: var(--prose);
}
.method-timeline-title {
font-family: "Fraunces", serif;
font-size: var(--fs-h3);
font-weight: 360;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 14px 0 14px;
color: var(--ink);
font-variation-settings: "opsz" 96, "SOFT" 40;
}
/* ---------- PRINCIPAL'S NOTE (redesigned) --------------------
Positioned as the final trust anchor before the CTA. Split
layout: an editorial "book plate" (monogram V, stamp, name
card) on the left, and the quote + signature + credentials
on the right. The plate animates on reveal — the V ink
darkens via variable axes, flourishes draw in, the stamp
lands with a slight rotation. No photo required. */
.principal {
background: var(--surface-band);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: clamp(84px, 10vw, 140px) var(--gutter);
position: relative;
overflow: hidden;
}
.principal-grain {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 40% at 12% 18%, rgba(184, 118, 60, 0.05), transparent 62%),
radial-gradient(ellipse 70% 55% at 90% 85%, rgba(42, 61, 46, 0.05), transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity 1400ms var(--ease-out);
}
.principal.is-in .principal-grain { opacity: 1; }
.principal-inner {
max-width: 1160px;
margin: 0 auto;
position: relative;
}
.principal-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.principal-layout {
display: grid;
grid-template-columns: minmax(280px, 340px) 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: start;
}
/* ---- Book plate (left visual) ------------------------------ */
.principal-plate {
position: relative;
background: var(--surface-paper);
border: 1px solid var(--rule);
padding: 40px 30px 40px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 400px;
box-shadow:
0 1px 0 rgba(23, 22, 19, 0.02),
0 30px 50px -40px rgba(23, 22, 19, 0.18),
0 60px 90px -70px rgba(23, 22, 19, 0.22);
opacity: 0;
transform: translateY(18px);
transition:
opacity 900ms var(--ease-out),
transform 900ms var(--ease-out);
}
.principal.is-in .principal-plate { opacity: 1; transform: none; }
.principal-plate::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 65% 50% at 15% 12%, rgba(184, 118, 60, 0.05), transparent 65%),
radial-gradient(ellipse 70% 60% at 88% 92%, rgba(42, 61, 46, 0.045), transparent 65%);
pointer-events: none;
}
/* Corner registration hairlines — tiny L-brackets inside the card */
.plate-corner {
position: absolute;
width: 14px;
height: 14px;
border: 1px solid var(--rule-strong);
opacity: 0.7;
}
.plate-corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.plate-corner--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.plate-corner--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.plate-corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.plate-label {
position: relative;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted-2);
margin-bottom: 20px;
display: inline-flex;
align-items: center;
}
.plate-label::before,
.plate-label::after {
content: "";
display: inline-block;
width: 18px;
height: 1px;
background: var(--rule-strong);
vertical-align: middle;
margin: 0 10px;
}
.plate-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
position: relative;
}
.plate-portrait {
width: 100%;
max-width: 210px;
max-height: 260px;
height: auto;
color: var(--forest);
overflow: visible;
}
/* Head — circle draws itself in, then breathes softly */
.portrait-head {
stroke-dasharray: 220;
stroke-dashoffset: 220;
transform-box: fill-box;
transform-origin: center;
transition: stroke-dashoffset 1200ms var(--ease-out) 400ms;
}
.principal.is-in .portrait-head {
stroke-dashoffset: 0;
animation: portraitBreath 6s ease-in-out 2400ms infinite;
}
@keyframes portraitBreath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.018); }
}
/* Shoulders + collar — draw after head lands */
.portrait-body {
stroke-dasharray: 260;
stroke-dashoffset: 260;
transition: stroke-dashoffset 1200ms var(--ease-out) 1100ms;
}
.principal.is-in .portrait-body { stroke-dashoffset: 0; }
.portrait-collar {
stroke-dasharray: 36;
stroke-dashoffset: 36;
opacity: 0.75;
transition: stroke-dashoffset 700ms var(--ease-out) 1700ms;
}
.principal.is-in .portrait-collar { stroke-dashoffset: 0; }
/* Ochre underscore — grounding mark under the figure */
.portrait-underscore {
stroke-dasharray: 40;
stroke-dashoffset: 40;
transition: stroke-dashoffset 700ms var(--ease-out) 2000ms;
}
.principal.is-in .portrait-underscore { stroke-dashoffset: 0; }
/* Eyes — fade in, then blink on a slow loop */
.portrait-eye {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
transition: opacity 600ms var(--ease-out) 1500ms;
}
.principal.is-in .portrait-eye {
opacity: 1;
animation: portraitBlink 7s ease-in-out 3000ms infinite;
}
@keyframes portraitBlink {
0%, 92%, 100% { transform: scaleY(1); }
94% { transform: scaleY(0.1); }
96% { transform: scaleY(1); }
}
/* Thinking orbit + traveling ochre dot */
.portrait-orbit {
opacity: 0;
transition: opacity 800ms var(--ease-out) 1900ms;
}
.principal.is-in .portrait-orbit { opacity: 0.55; }
.portrait-orbit-dot {
fill: var(--ochre);
opacity: 0;
offset-path: path('M 52 52 A 48 14 0 0 1 148 52 A 48 14 0 0 1 52 52');
offset-rotate: 0deg;
transition: opacity 600ms var(--ease-out) 2300ms;
}
.principal.is-in .portrait-orbit-dot {
opacity: 1;
animation: portraitOrbit 7s linear 2300ms infinite;
}
@keyframes portraitOrbit {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
/* Wax-seal-esque stamp top-right of the plate */
.plate-stamp {
position: absolute;
top: 20px;
right: 18px;
width: 44px;
height: 44px;
color: var(--ochre);
opacity: 0;
transform: rotate(-16deg) scale(0.88);
transition:
opacity 900ms var(--ease-out) 1500ms,
transform 1200ms var(--ease-out) 1500ms;
}
.principal.is-in .plate-stamp {
opacity: 0.85;
transform: rotate(-14deg) scale(1);
}
.plate-stamp .stamp-ring,
.plate-stamp .stamp-c {
stroke-dasharray: 120;
stroke-dashoffset: 120;
transition: stroke-dashoffset 1000ms var(--ease-out);
}
.principal.is-in .plate-stamp .stamp-ring { stroke-dashoffset: 0; transition-delay: 1700ms; }
.principal.is-in .plate-stamp .stamp-c { stroke-dashoffset: 0; transition-delay: 2100ms; }
/* Subtle continuous breath on the V so the ink feels "alive" */
@keyframes plateVBreath {
0%, 100% { font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 380; }
50% { font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 360; }
}
.principal.is-in .plate-V {
animation: plateVBreath 9s ease-in-out 2800ms infinite;
}
/* ---- Copy (right) ------------------------------------------ */
.principal-copy {
max-width: 580px;
padding-top: 4px;
}
.principal-quote {
font-family: "Fraunces", serif;
font-weight: 340;
font-style: italic;
font-size: clamp(24px, 2.8vw, 36px);
line-height: 1.28;
letter-spacing: -0.014em;
color: var(--ink);
margin: 0;
padding: 24px 0 0;
font-variation-settings: "opsz" 96, "SOFT" 80;
position: relative;
opacity: 0;
transform: translateY(12px);
transition:
opacity 1000ms var(--ease-out),
transform 1000ms var(--ease-out);
}
.principal.is-in .principal-quote { opacity: 1; transform: none; }
.principal-quote em {
font-style: italic;
color: var(--forest);
font-variation-settings: "opsz" 96, "SOFT" 100;
}
.principal-quote-mark {
position: absolute;
top: -10px;
left: -6px;
font-family: "Fraunces", serif;
font-style: normal;
font-weight: 380;
font-size: clamp(70px, 8vw, 110px);
line-height: 0.6;
color: var(--ochre);
font-variation-settings: "opsz" 144;
pointer-events: none;
opacity: 0;
transform: translateY(14px) scale(0.82);
transform-origin: left center;
transition:
opacity 900ms var(--ease-out) 200ms,
transform 900ms var(--ease-out) 200ms;
}
.principal.is-in .principal-quote-mark {
opacity: 1;
transform: none;
}
.principal-sign {
margin-top: clamp(40px, 5vw, 60px);
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"script meta"
"rule meta";
gap: 0 28px;
align-items: start;
max-width: 520px;
}
/* Handwritten signature — Caveat (a genuine handwriting font) rotated
slightly and "inked in" left-to-right via a clip-path on scroll so
it reads as someone signing the page, not a typeset name.
The rotation lives on the outer ; the clip-path lives on the
inner .principal-sign-ink so the two animations don't fight. */
.principal-sign-script {
grid-area: script;
display: inline-block;
font-family: "Caveat", "Homemade Apple", "Fraunces", cursive, serif;
font-weight: 700;
font-size: clamp(60px, 6.4vw, 84px);
line-height: 0.9;
color: var(--forest);
letter-spacing: -0.005em;
transform: rotate(-4deg) translateY(4px);
transform-origin: left bottom;
opacity: 0;
transition:
opacity 400ms var(--ease-out) 700ms,
transform 900ms var(--ease-out) 700ms;
/* Tiny ink-stroke shadow so each letter reads with a bit of pressure,
like ballpoint pushed into paper. Stays subtle on a cream ground. */
text-shadow:
0 0.5px 0 rgba(30, 44, 34, 0.25),
0.4px 0 0 rgba(30, 44, 34, 0.12);
}
.principal.is-in .principal-sign-script {
opacity: 1;
transform: rotate(-4deg) translateY(0);
}
.principal-sign-ink {
display: inline-block;
padding: 0 6px 4px 4px;
/* Start fully clipped from the right; expand to reveal left-to-right */
clip-path: inset(-14% 100% -18% -6%);
transition: clip-path 1.8s cubic-bezier(0.7, 0, 0.3, 1) 900ms;
}
.principal.is-in .principal-sign-ink {
clip-path: inset(-14% -6% -18% -6%);
}
.principal-sign-rule {
grid-area: rule;
display: block;
width: min(120px, 100%);
height: 2px;
margin-top: 8px;
background: linear-gradient(to right,
var(--ochre) 0%,
rgba(184, 118, 60, 0.4) 70%,
transparent 100%);
transform-origin: 0 50%;
transform: scaleX(0);
transition: transform 1100ms var(--ease-out) 1100ms;
}
.principal.is-in .principal-sign-rule { transform: scaleX(1); }
.principal-sign-meta {
grid-area: meta;
padding-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
transform: translateY(6px);
transition:
opacity 720ms var(--ease-out) 1200ms,
transform 720ms var(--ease-out) 1200ms;
}
.principal.is-in .principal-sign-meta {
opacity: 1;
transform: none;
}
.principal-sign-name {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: 20px;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 48, "SOFT" 30;
}
.principal-sign-role {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.principal-sign-dot {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--rule-strong);
}
.principal-sign-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 6px 12px 6px 10px;
border: 1px solid var(--rule);
border-radius: 999px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
background: var(--surface);
align-self: flex-start;
transition:
border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
transform var(--dur-med) var(--ease-out);
}
.principal-sign-link svg {
transition: transform var(--dur-med) var(--ease-out);
}
.principal-sign-link svg:first-child {
color: #0A66C2;
}
.principal-sign-link:hover {
border-color: var(--ink-2);
background: var(--ink);
color: var(--surface);
transform: translateY(-1px);
}
.principal-sign-link:hover svg:first-child { color: currentColor; }
.principal-sign-link:hover svg:last-child { transform: translate(2px, -2px); }
.principal-cred {
margin: clamp(32px, 4vw, 48px) 0 0;
padding-top: 24px;
border-top: 1px solid var(--rule);
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
max-width: 520px;
opacity: 0;
transform: translateY(6px);
transition:
opacity 700ms var(--ease-out) 1500ms,
transform 700ms var(--ease-out) 1500ms;
}
.principal.is-in .principal-cred {
opacity: 1;
transform: none;
}
.principal-cred li {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--muted);
}
.principal-cred-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--ochre);
flex: none;
}
@media (max-width: 900px) {
.principal-layout {
grid-template-columns: 1fr;
gap: 40px;
max-width: 580px;
margin: 0 auto;
}
.principal-plate {
max-width: 340px;
margin: 0 auto;
min-height: 400px;
padding: 38px 28px 38px;
}
.plate-portrait { max-width: 190px; max-height: 230px; }
.principal-copy { max-width: 100%; }
.principal-quote-mark {
top: -4px;
left: -2px;
font-size: clamp(60px, 13vw, 80px);
}
}
@media (max-width: 560px) {
.principal { padding: clamp(72px, 12vw, 104px) var(--gutter); }
.principal-plate {
max-width: 300px;
min-height: 360px;
padding: 34px 22px 34px;
}
.plate-portrait { max-width: 170px; max-height: 210px; }
.plate-label::before,
.plate-label::after { width: 14px; margin: 0 8px; }
.plate-stamp { width: 36px; height: 36px; top: 16px; right: 14px; }
.principal-sign {
grid-template-columns: 1fr;
grid-template-areas:
"script"
"rule"
"meta";
gap: 0;
}
.principal-sign-meta { padding-top: 18px; }
.principal-sign-script { font-size: clamp(40px, 12vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
.principal-grain,
.principal-plate,
.plate-stamp,
.portrait-eye,
.portrait-orbit,
.portrait-orbit-dot,
.principal-quote,
.principal-quote-mark,
.principal-sign-script,
.principal-sign-ink,
.principal-sign-rule,
.principal-sign-meta,
.principal-cred {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
clip-path: none !important;
}
.portrait-head,
.portrait-body,
.portrait-collar,
.portrait-underscore,
.plate-stamp .stamp-ring,
.plate-stamp .stamp-c {
stroke-dashoffset: 0 !important;
transition: none !important;
}
.portrait-orbit { opacity: 0.55 !important; }
.principal-sign-script { transform: rotate(-2deg) !important; }
.principal-sign-rule { transform: scaleX(1) !important; }
.plate-stamp { transform: rotate(-14deg) !important; opacity: 0.85 !important; }
}
/* ---------- FAQ ------------------------------------------ */
.faq-intro {
max-width: var(--prose);
margin-bottom: 60px;
}
.faq-list {
border-top: 1px solid var(--rule);
}
.faq-item {
border-bottom: 1px solid var(--rule);
}
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 28px 0;
text-align: left;
font-family: "Fraunces", serif;
font-weight: 400;
font-size: var(--fs-h5);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 48, "SOFT" 40;
transition: color var(--dur-fast) var(--ease-out);
}
.faq-q:hover { color: var(--forest); }
.faq-q svg { color: var(--muted); flex: none; transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast); }
.faq-q:hover svg { color: var(--forest); }
.faq-v { transition: transform var(--dur-med) var(--ease-out); transform-origin: center; }
.faq-item.is-open .faq-v { transform: scaleY(0); }
.faq-item.is-open .faq-q { color: var(--forest); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 500ms var(--ease-out);
}
.faq-a p {
margin: 0 0 28px;
padding-right: 80px;
max-width: 70ch;
font-size: 16px;
color: var(--ink-2);
line-height: 1.6;
}
@media (max-width: 600px) { .faq-a p { padding-right: 0; } }
/* ---------- FINAL CTA ------------------------------------ */
.final {
background: var(--surface-deep);
color: var(--cream-on-dark);
padding: calc(var(--section-y) * 1.1) var(--gutter);
position: relative;
overflow: hidden;
}
.final::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 90% 60% at 50% 100%, rgba(184, 118, 60, 0.14), transparent 70%);
pointer-events: none;
}
.final-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
}
.final-head {
font-family: "Fraunces", serif;
font-weight: 340;
font-size: clamp(40px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 22px 0 32px;
color: var(--cream-on-dark);
font-variation-settings: "opsz" 120, "SOFT" 50;
}
.final-head span {
display: block;
overflow: hidden;
padding-bottom: 0.05em;
}
.final-head em {
font-style: italic;
font-variation-settings: "opsz" 120, "SOFT" 100;
color: var(--ochre);
}
.final-sub {
max-width: 52ch;
margin: 0 auto 44px;
font-size: var(--fs-sub);
color: var(--cream-muted-on-dark);
line-height: 1.6;
}
.final-ctas {
display: inline-flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
justify-content: center;
}
/* ---------- FOOTER --------------------------------------- */
.foot {
background: var(--surface-deep);
color: var(--cream-muted-on-dark);
padding: 40px var(--gutter) 60px;
border-top: 1px solid rgba(241, 236, 225, 0.08);
}
.foot-inner {
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 40px;
align-items: center;
}
.foot-mark {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "Fraunces", serif;
font-size: 18px;
color: var(--cream-on-dark);
font-variation-settings: "opsz" 48;
}
.foot-mark svg { color: var(--ochre); }
.foot-nav {
display: inline-flex;
gap: 28px;
justify-content: center;
font-size: 13px;
}
.foot-nav a { color: var(--cream-muted-on-dark); transition: color var(--dur-fast); }
.foot-nav a:hover { color: var(--ochre); }
.foot-fine {
margin: 0;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--cream-muted-on-dark);
opacity: 0.7;
text-align: right;
}
@media (max-width: 900px) {
.foot-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; }
.foot-fine { text-align: center; }
.foot-nav { flex-wrap: wrap; gap: 18px; }
}
/* ---------- MOBILE FLOATING CTA -------------------------- */
.m-cta {
position: fixed;
left: 12px; right: 12px; bottom: 12px;
z-index: 700;
display: none;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
background: var(--ink);
color: var(--surface);
font-size: 15px;
font-weight: 500;
border-radius: 999px;
opacity: 0;
transform: translateY(80px);
transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
box-shadow: 0 20px 40px -18px rgba(23, 22, 19, 0.5);
}
.m-cta.is-show {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 720px) {
.m-cta { display: inline-flex; }
}
/* ---------- REVEAL STATES -------------------------------- */
/* Final-CTA split words — layout only; reveal animation is driven from JS. */
.final-head [data-split-word] {
display: inline-block;
font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 320;
}
.platform {
opacity: 0;
transform: translateY(10px);
transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.platforms.is-in .platform {
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 80ms);
}
.signal-cell {
opacity: 0;
transform: translateY(12px);
transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.signal.is-in .signal-cell {
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 110ms);
}
.pillar {
opacity: 0;
transform: translateY(20px);
transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.pillar.is-in { opacity: 1; transform: none; }
.tl-step {
opacity: 0.3;
transform: translateY(8px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.tl-step.is-in { opacity: 1; transform: none; }
.faq-item {
opacity: 0;
transform: translateY(10px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.faq.is-in .faq-item {
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 70ms);
}
/* ---------- MOBILE SECTION RHYTHM ------------------------ */
@media (max-width: 720px) {
:root {
--section-y: clamp(52px, 9vw, 80px);
--section-y-tight: 44px;
}
.services-head,
.method-intro,
.notes-head,
.faq-intro {
margin-bottom: 32px;
}
.method-timeline {
margin-top: 64px;
}
}
/* ---------- REDUCED MOTION ------------------------------- */
@media (prefers-reduced-motion: reduce) {
* , *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.cursor { display: none; }
[data-reveal] > *, [data-fade],
.platform, .signal-cell, .pillar, .tl-step, .faq-item,
.final-head [data-split-word] {
opacity: 1 !important;
transform: none !important;
}
.pulse { animation: none !important; }
}
/* ---------- FOCUS RINGS ---------------------------------- */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--forest);
outline-offset: 4px;
border-radius: 4px;
}
/* ---------- SKIP LINK (keyboard-only) -------------------- */
/* Hidden until focused, then slides down from the top so that
screen-reader / keyboard users can bypass the fixed nav. */
.skip-link {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -120%);
z-index: 9999;
padding: 10px 18px;
background: var(--ink);
color: var(--surface);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: 0 0 6px 6px;
text-decoration: none;
transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible {
transform: translate(-50%, 0);
outline: 2px solid var(--ochre);
outline-offset: 2px;
}
/* Section-head underline accent — text always visible, underline
sweeps on reveal as an enhancement. Safe if animation can't run. */
.mask-reveal {
position: relative;
}
.mask-reveal::after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 2px;
background: var(--ochre);
transition: width 720ms var(--ease-out);
}
.mask-reveal.is-revealed::after {
width: 48px;
}
@media (prefers-reduced-motion: reduce) {
.mask-reveal::after { display: none; }
}
/* ---------- SECTION CONNECTOR LINES ---------------------- */
.section-connector {
display: block;
position: relative;
height: 60px;
width: 1px;
margin: 0 auto;
background: var(--rule);
overflow: hidden;
}
.section-connector::after {
content: "";
position: absolute;
left: 0; top: 0;
width: 100%;
height: 0;
background: var(--ochre);
transition: height 600ms var(--ease-out);
}
.section-connector.is-in::after {
height: 100%;
}
/* ---------- HOW-WE-WORK TIMELINE PATH ENHANCEMENT -------- */
/* The fill rail (::after on .timeline) already exists; no new rule. */
/* ---------- NAV PROGRESS INDICATOR ----------------------- */
.nav-progress {
position: relative;
width: 140px;
height: 1px;
background: var(--rule);
overflow: hidden;
}
.nav-progress-fill {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: var(--ochre);
transform: scaleX(0);
transform-origin: 0 0;
transition: transform 120ms linear;
}
@media (max-width: 720px) {
.nav-progress { width: 64px; }
}
/* ---------- FIELD NOTES ARTICLE PAGE --------------------- */
.article {
max-width: 760px;
margin: 0 auto;
padding: calc(var(--section-y) * 0.8) var(--gutter) var(--section-y);
}
.article-back {
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
margin-bottom: 48px;
transition: color 260ms var(--ease-out);
}
.article-back:hover { color: var(--forest); }
.article-back span { transition: transform 260ms var(--ease-out); }
.article-back:hover span { transform: translateX(-3px); }
.article-eyebrow {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ochre-deep);
margin-bottom: 20px;
}
.article-title {
margin: 0 0 24px;
font-family: "Fraunces", serif;
font-size: clamp(40px, 5.4vw, 72px);
font-weight: 320;
line-height: 1;
letter-spacing: -0.035em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.article-deck {
margin: 0 0 48px;
font-family: "Fraunces", serif;
font-style: italic;
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.4;
color: var(--forest);
max-width: 58ch;
font-variation-settings: "opsz" 72, "SOFT" 100;
}
.article-body {
font-size: 18px;
line-height: 1.66;
color: var(--ink-2);
}
.article-body p {
margin: 0 0 22px;
max-width: 62ch;
}
.article-body h3 {
margin: 56px 0 18px;
font-family: "Fraunces", serif;
font-weight: 380;
font-size: clamp(24px, 2.2vw, 30px);
line-height: 1.22;
letter-spacing: -0.018em;
color: var(--ink);
font-variation-settings: "opsz" 96, "SOFT" 40;
}
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body em {
font-style: italic;
color: var(--forest);
font-variation-settings: "opsz" 72, "SOFT" 80;
}
.article-body a {
color: var(--forest);
text-decoration: underline;
text-decoration-color: var(--rule-strong);
text-underline-offset: 3px;
transition: color 260ms var(--ease-out), text-decoration-color 260ms var(--ease-out);
}
.article-body a:hover {
color: var(--ochre-deep);
text-decoration-color: var(--ochre);
}
/* Drop cap on the first paragraph after the deck */
.article-body > p:first-of-type::first-letter {
font-family: "Fraunces", serif;
font-weight: 380;
font-size: 4.1em;
line-height: 0.82;
float: left;
padding: 6px 14px 0 0;
margin-top: 4px;
color: var(--forest);
font-variation-settings: "opsz" 144, "SOFT" 30;
}
/* KPI callout inside articles */
.article-kpi {
margin: 40px 0;
padding: 28px 32px;
border-left: 3px solid var(--ochre);
background: var(--surface-band);
}
.article-kpi-num {
display: block;
font-family: "Fraunces", serif;
font-style: italic;
font-size: clamp(44px, 4.6vw, 60px);
font-weight: 340;
line-height: 1;
color: var(--ochre-deep);
letter-spacing: -0.02em;
font-variation-settings: "opsz" 120, "SOFT" 100;
margin-bottom: 8px;
}
.article-kpi-cap {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--muted);
text-transform: none;
}
.article-close {
margin-top: 72px;
padding-top: 40px;
border-top: 1px solid var(--rule);
}
.article-close h3 {
margin-top: 0;
color: var(--forest);
font-style: italic;
font-variation-settings: "opsz" 120, "SOFT" 80;
}
.article-cta-footer {
margin-top: 64px;
padding: 40px;
background: var(--surface-deep);
color: var(--cream-on-dark);
border-radius: 3px;
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
}
.article-cta-footer h4 {
margin: 0;
font-family: "Fraunces", serif;
font-weight: 360;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.22;
color: var(--cream-on-dark);
font-variation-settings: "opsz" 96, "SOFT" 40;
max-width: 42ch;
}
.article-cta-footer p {
margin: 0;
max-width: 48ch;
color: var(--cream-muted-on-dark);
font-size: 15px;
line-height: 1.55;
}
@media (max-width: 720px) {
.article { padding: calc(var(--section-y) * 0.6) var(--gutter); }
.article-body { font-size: 17px; }
.article-body h3 { margin-top: 44px; }
.article-kpi { padding: 22px 24px; }
.article-cta-footer { padding: 28px 24px; }
}
/* ---------- FIELD NOTES: CROSS-LINKS --------------------
The "continue reading" block that sits below each article
and above the footer. Same visual grammar as .notes-grid
on the home page — small kpi-free cards, ochre accents. */
.article-more {
max-width: 1100px;
margin: clamp(48px, 6vw, 80px) auto 0;
padding: clamp(48px, 6vw, 72px) var(--gutter) clamp(56px, 7vw, 96px);
border-top: 1px solid var(--rule);
}
.article-more-head {
max-width: var(--prose);
margin-bottom: clamp(28px, 3.5vw, 48px);
}
.article-more-head h3 {
font-family: "Fraunces", serif;
font-weight: 380;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.1;
letter-spacing: -0.015em;
margin: 14px 0 0;
color: var(--ink);
font-variation-settings: "opsz" 96, "SOFT" 50;
}
.article-more-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 0;
list-style: none;
padding: 0;
}
.article-more-grid li { list-style: none; }
.article-more-grid a {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 14px;
height: 100%;
padding: 28px 26px 24px;
background: var(--surface-paper);
border: 1px solid var(--rule);
border-radius: 3px;
transition:
transform var(--dur-med) var(--ease-out),
border-color var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out);
}
.article-more-grid a:hover {
transform: translateY(-2px);
border-color: var(--rule-strong);
box-shadow:
0 1px 0 rgba(23, 22, 19, 0.02),
0 18px 30px -24px rgba(23, 22, 19, 0.18);
}
.article-more-eyebrow {
display: block;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.14em;
color: var(--ochre-deep);
text-transform: uppercase;
}
.article-more-title {
display: block;
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(19px, 1.6vw, 22px);
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--ink);
font-variation-settings: "opsz" 72, "SOFT" 50;
max-width: 28ch;
}
.article-more-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--forest);
text-transform: uppercase;
}
.article-more-grid a:hover .article-more-link { color: var(--ochre-deep); }
@media (max-width: 720px) {
.article-more-grid { grid-template-columns: 1fr; gap: 14px; }
.article-more { padding-bottom: clamp(40px, 6vw, 64px); }
.article-more-grid a { padding: 22px 22px 20px; }
}