/* =========================================================
Tanisha Verma — Portfolio
Editorial B2B · Warm cream · Terracotta · Fraunces
========================================================= */
/* ---------- SELF-HOSTED FONTS ---------- */
/* Fraunces and Inter Tight are served from /assets/fonts/ — no
third-party calls. This protects visitor privacy (no IP sent
to Google), removes a render-blocking DNS lookup, and keeps
the site working even if Google Fonts is unreachable.
Both fonts are variable-axis: Fraunces supports the SOFT axis
(custom Recursive-style softness control) used in the design,
plus opsz/wght/ital. Inter Tight uses wght 100-900 + ital. */
/* === FRAUNCES === Latin range — covers all standard ASCII + */
/* common punctuation. Loaded by default. ~121 KB normal. */
@font-face {
font-family: "Fraunces";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("assets/fonts/fraunces-latin-full-normal.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Fraunces";
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url("assets/fonts/fraunces-latin-full-italic.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === FRAUNCES === Latin-ext range — accented chars (é, í, ñ, …) */
/* and em-dashes. Loaded only when these chars appear. ~105 KB. */
@font-face {
font-family: "Fraunces";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("assets/fonts/fraunces-latin-ext-full-normal.woff2") format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Fraunces";
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url("assets/fonts/fraunces-latin-ext-full-italic.woff2") format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* === INTER TIGHT === Latin range — default load. ~45 KB normal. */
@font-face {
font-family: "Inter Tight";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter Tight";
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url("assets/fonts/inter-tight-latin-wght-italic.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === INTER TIGHT === Latin-ext range — accented chars + em-dashes */
@font-face {
font-family: "Inter Tight";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("assets/fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter Tight";
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url("assets/fonts/inter-tight-latin-ext-wght-italic.woff2") format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; color: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
/* ---------- TOKENS ---------- */
:root {
/* palette */
--cream: #F1EAE0;
--cream-2: #E9E0D2;
--amber-iris: #DCC393; /* warm amber wash for the giant-eye iris (real owl eyes) */
--cream-3: #DCD0BD;
--ink: #1A1814;
--ink-2: #3A342C;
--mute: #7A7266;
--terra: #D2492E;
--terra-deep: #A8391F;
--ocean: #1E3A5F;
--leaf: #5A6F3F;
/* type — TWO families only:
• serif (Fraunces) for headlines, italic accents, large display.
• sans (Inter Tight) for body, labels, navigation, marquee, footer.
--mono used to point at JetBrains Mono; we removed that font and
now alias --mono to the same Inter Tight stack. The .mono CLASS
keeps its uppercase + wide-tracking small-caps treatment, which
is what gave it the "editorial marker" feel — that comes from
letter-spacing + uppercase, not from a monospaced font. */
--serif: "Fraunces", ui-serif, Georgia, serif;
--sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
--mono: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
/* spacing */
--px: max(24px, 4.5vw);
--section-pad: clamp(56px, 6.5vw, 96px);
/* motion */
--ease: cubic-bezier(0.6, 0.05, 0.1, 1);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- BASE ---------- */
body {
background: var(--cream);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
font-weight: 400;
overflow-x: hidden;
position: relative;
}
/* HTML5 [hidden] should always hide. Some sections (e.g. .stats with
display: grid, .lanes with display: block etc.) override the
user-agent's `[hidden] { display: none }`, so we restate it with
higher specificity. Used to hide whole sections cleanly. */
[hidden] { display: none !important; }
::selection { background: var(--terra); color: var(--cream); }
/* The .mono class is now Inter Tight uppercase with wider tracking.
It looks like an editorial label/small-caps marker — no monospaced
font needed. The wider letter-spacing (0.18em vs 0.04em) is what
creates the "code-like ticker" feel visually. */
/* .mono — small caps eyebrow style. Uses clamp() to keep readable on
mobile where the parent font-size shrinks (the old 0.78em became
9px on small screens). Floor of 11px ensures all-caps labels stay
legible across every viewport. */
.mono { font-family: var(--mono); font-size: clamp(11px, 0.78em, 14px); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
em { font-style: italic; font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 144; }
.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;
}
/* ================================================
ENTRANCE LOADER
================================================ */
.loader {
position: fixed; inset: 0;
z-index: 10000;
pointer-events: none;
/* Iris-reveal origin (set by JS to the screen-center of the terracotta
O in HOOT). Defaults to roughly where the O would be in the chart. */
--iris-x: 50%;
--iris-y: 38%;
}
/* The iris veil: a tiny element pinned at (--iris-x, --iris-y) with a
massive box-shadow extending outward in --ink. While its size is
small, the shadow fills the viewport with darkness — that's our
"loader veil." When .is-loaded fires, we scale the element up
far beyond viewport bounds, pushing the shadow outside view and
revealing the page beneath. Smooth, reliable, animates via transform. */
.loader__top, .loader__bot {
/* The two-panel split is gone; we keep the elements only so existing
selectors don't break. They no longer carry visual weight. */
display: none;
}
.loader__iris {
position: fixed;
inset: 0;
background: var(--ink);
z-index: 1;
/* Initial: clip is at 150% — full ink panel visible (covers page) */
clip-path: circle(150% at var(--iris-x) var(--iris-y));
transition: clip-path 1.6s cubic-bezier(0.76, 0, 0.24, 1);
}
html.is-loaded .loader__iris {
/* Final: clip collapses to 0% radius — dark veil shrinks to nothing
at the position of the O letter, revealing the page beneath.
Reads as a camera aperture closing on the previous frame. */
clip-path: circle(0% at var(--iris-x) var(--iris-y));
}
.loader__top { top: 0; height: 50%; }
.loader__bot { bottom: 0; height: 50%; }
.loader__content {
position: absolute; inset: 0;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
text-align: center;
padding: 0 var(--px);
color: var(--cream);
z-index: 2;
transition: opacity 0.4s ease;
}
.loader__meta {
position: absolute;
top: 36px; left: var(--px); right: var(--px);
display: flex; justify-content: space-between; align-items: center;
/* Using Inter Tight (sans) instead of mono — matches the rest of
the site's editorial typography and reads cleaner at this size. */
font-family: 'Inter Tight', var(--sans, system-ui), sans-serif;
font-size: 11px !important;
letter-spacing: 0.22em; /* a touch wider — feels more editorial at uppercase */
text-transform: uppercase;
color: rgba(241, 234, 224, 0.55);
font-weight: 600;
}
.loader__meta .mono {
/* Override the global .mono font selector so the meta uses sans */
font-family: inherit !important;
font-size: 11px !important;
letter-spacing: inherit;
}
.loader__name {
/* legacy class retained but unused — kept to avoid breaking selectors elsewhere */
display: none;
}
/* ----- Eye chart loader -----
The chart mimics a real Snellen eye chart: rows progressively
smaller (top → bottom), each row CENTERED, whole chart starting
slightly blurred and sharpening as the load fills. The center
alignment (justify-content: center) is critical — flex-start
left-aligns the rows which reads as a code listing, not a
medical chart. The starting blur is capped so the visitor sees
*something* on the very first frame rather than darkness. */
.loader__chart {
/* Use Inter Tight (already in the page). JetBrains Mono caused the
terra O to optically sit higher than its neighbors — Inter Tight
has consistent metrics across uppercase glyphs. */
font-family: 'Inter Tight', var(--sans, system-ui), sans-serif;
color: var(--cream);
/* progressive focus: starts blurred, sharpens to 0 as load fills.
Capped at 10px (was 14) so initial frame is just legible — a
fully blurred chart at t=0 looks like a broken loader. */
--focus: 1;
filter: blur(calc(var(--focus) * 10px));
transition: filter 0.3s linear;
user-select: none;
/* Center the chart horizontally within the loader */
width: 100%;
max-width: 1100px;
text-align: center;
/* Slight upward translate so the visual mass of rows 1-4 (which is
bottom-weighted because of the cascading sizes) lands closer to
viewport center instead of below it. */
transform: translateY(-3vh);
}
.loader__chart-row {
display: flex;
/* CENTER each row inside the chart (was flex-start = ragged-left) */
justify-content: center;
align-items: center; /* center vertically so glyph optical sits steady */
gap: 0.4em;
margin: 0.42em 0; /* slightly more breathing room between rows */
font-weight: 500;
letter-spacing: 0.18em;
color: var(--cream);
opacity: 0;
transform: translateY(8px);
animation: chartRowIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
line-height: 1; /* tight line-height — chart letters shouldn't have leading */
}
/* row sizes — like a real Snellen chart: bigger up top, smaller down.
Each row has its own animation so the "in" keyframe ramps to the
correct FINAL opacity (rows 3 and 4 are intentionally lower contrast
than rows 1 and 2 — like a real eye chart's lower lines).
Weights and tracking are tuned for Inter Tight: heavier weights at
the bigger sizes, tighter tracking on the giant top row. */
.loader__chart-row--1 { font-size: clamp(30px, 9vw, 132px); animation-delay: 0.05s; letter-spacing: 0.10em; font-weight: 700; }
.loader__chart-row--2 { font-size: clamp(24px, 4.6vw, 64px); animation-delay: 0.18s; letter-spacing: 0.18em; font-weight: 600; }
.loader__chart-row--3 {
font-size: clamp(13px, 2.2vw, 28px); animation-delay: 0.30s;
letter-spacing: 0.24em; font-weight: 500;
animation-name: chartRowIn3;
}
.loader__chart-row--4 {
font-size: clamp(11px, 1.5vw, 16px); animation-delay: 0.42s;
letter-spacing: 0.34em; font-weight: 500;
animation-name: chartRowIn4;
}
.loader__chart-row > span {
display: inline-block;
}
/* The terracotta letter — single character per row uses the brand colour */
.loader__chart-row--1 > span:nth-child(2) { color: var(--terra); }
/* === MOBILE LOADER FIT ===
On small viewports (iPhone SE 375px and below), tighten the gap
between letter spans and reduce letter-spacing so HOOTHOOT (8
chars) fits comfortably without horizontal cropping. The fluid
font-size from clamp() handles the rest. */
@media (max-width: 520px) {
.loader__chart-row { gap: 0.18em; margin: 0.32em 0; }
.loader__chart-row--1 { letter-spacing: 0.04em; }
.loader__chart-row--2 { letter-spacing: 0.10em; }
.loader__chart-row--3 { letter-spacing: 0.18em; }
.loader__chart-row--4 { letter-spacing: 0.24em; }
/* Pull everything up slightly so it sits in the visual center of
the smaller mobile viewport. */
.loader__chart { transform: translateY(-2vh); }
}
@keyframes chartRowIn {
to { opacity: 1; transform: translateY(0); }
}
@keyframes chartRowIn3 {
to { opacity: 0.78; transform: translateY(0); }
}
@keyframes chartRowIn4 {
to { opacity: 0.55; transform: translateY(0); }
}
.loader__bar {
position: absolute;
bottom: 36px; left: var(--px); right: var(--px);
height: 1px; /* slimmer than 2px — more editorial */
background: rgba(241, 234, 224, 0.10);
overflow: hidden;
}
.loader__bar > span {
display: block; height: 100%;
width: 0%;
background: var(--terra);
transition: width 0.25s linear;
box-shadow: 0 0 16px rgba(210, 73, 46, 0.5);
}
/* Reveal: just hide the chart content; the iris veil scales open via
.loader__iris transition above. */
html.is-loaded .loader__content { opacity: 0; transition-delay: 0.05s; }
html.is-loaded .loader { pointer-events: none; }
html:not(.is-loaded) body { overflow: hidden; height: 100vh; }
/* Hero title characters hidden until loader finishes (prevents FOUC during loader) */
html:not(.is-loaded) .hero__title .line__inner { animation-play-state: paused; }
/* ================================================
3D TEXT GLOBE
================================================ */
.globe {
position: absolute;
top: 18%;
right: 38%;
width: 280px; height: 280px;
perspective: 900px;
pointer-events: none;
opacity: 0;
animation: globeFadeIn 1.4s var(--ease-out) 1.2s forwards;
z-index: 0;
}
@keyframes globeFadeIn { to { opacity: 1; } }
.globe__inner {
position: relative;
width: 100%; height: 100%;
transform-style: preserve-3d;
animation: globeSpin 40s linear infinite;
will-change: transform;
}
@keyframes globeSpin {
from { transform: rotateX(-8deg) rotateY(0); }
to { transform: rotateX(-8deg) rotateY(360deg); }
}
.globe__word {
position: absolute;
top: 50%; left: 50%;
font-family: var(--serif);
font-size: 17px;
font-style: italic;
color: rgba(26, 24, 20, 0.55);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
white-space: nowrap;
transform:
translate(-50%, -50%)
rotateY(calc(var(--lon) * 1deg))
rotateX(calc(var(--lat) * 1deg))
translateZ(130px);
backface-visibility: hidden;
letter-spacing: -0.01em;
}
.globe__word--hot {
color: var(--terra);
font-size: 26px;
opacity: 0.9;
}
.globe__label {
position: absolute;
bottom: -32px; left: 50%;
transform: translateX(-50%);
font-size: 10px !important;
letter-spacing: 0.12em;
color: var(--mute);
white-space: nowrap;
opacity: 0.7;
}
@media (max-width: 1200px) {
.globe { width: 240px; height: 240px; top: 14%; right: 42%; }
.globe__word { transform: translate(-50%, -50%) rotateY(calc(var(--lon)*1deg)) rotateX(calc(var(--lat)*1deg)) translateZ(110px); }
}
@media (max-width: 900px) {
.globe { display: none; }
}
/* ================================================
CHARACTER MASK REVEAL (for large headings)
================================================ */
.mask-reveal {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.mask-reveal__char {
display: inline-block;
transform: translateY(110%);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--i, 0) * 32ms + var(--base, 0ms));
}
.mask-reveal.is-in .mask-reveal__char { transform: translateY(0); }
.mask-reveal__char--space { width: 0.28em; }
/* ---------- GRAIN ---------- */
.grain {
position: fixed; inset: 0; pointer-events: none; z-index: 9998;
mix-blend-mode: multiply; opacity: 0.14;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px;
}
/* ---------- OWL-IRIS CURSOR ----------
The cursor is a tiny owl eye (cream-2 iris, ink ring, terra pupil,
cream glint). The pupil dilates on buttons (excited) and contracts on
text/links (focusing). For "view"/"shuffle"/"read" hover states,
the iris EXPANDS into a labeled disc so the call-to-action is clear.
No trail — the cursor itself carries the brand. */
.cursor {
position: fixed; top: 0; left: 0;
pointer-events: none;
z-index: 9999;
width: 28px; height: 28px;
border-radius: 50%;
transform: translate(-50%, -50%);
will-change: transform;
display: grid; place-items: center;
opacity: 0;
transition: opacity 0.2s ease, width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cursor.is-active { opacity: 1; }
.cursor__eye {
width: 100%; height: 100%;
overflow: visible;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cursor__iris {
transition: r 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cursor__pupil {
transform-box: fill-box;
transform-origin: center;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
fill 0.35s ease;
}
.cursor__glint {
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cursor__label {
position: absolute;
font-family: var(--serif); font-style: italic;
color: var(--cream);
font-size: 0;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
letter-spacing: -0.01em;
text-transform: lowercase;
pointer-events: none;
transition: font-size 0.25s var(--ease);
line-height: 1;
white-space: nowrap;
z-index: 2;
}
/* HOVER STATES — adjust pupil dilation, iris size, color */
/* Over a link: pupil contracts to a focused point (focusing on text/destination) */
.cursor.is-link .cursor__pupil { transform: scale(0.55); }
/* Over a button: cursor body grows, pupil dilates noticeably but the iris
ring stays visible — reads as "interested owl eye," not generic blob */
.cursor.is-button {
width: 56px; height: 56px;
}
.cursor.is-button .cursor__pupil { transform: scale(1.7); }
.cursor.is-button .cursor__glint { transform: scale(1.4); }
.cursor.is-button .cursor__label { font-size: 12px; color: var(--ink); }
/* The "view" state — used over images/cards: iris becomes a small ink disc */
.cursor.is-view {
width: 96px; height: 96px;
}
.cursor.is-view .cursor__iris { fill: var(--ink); stroke: var(--ink); }
.cursor.is-view .cursor__pupil { transform: scale(0); }
.cursor.is-view .cursor__glint { opacity: 0; }
.cursor.is-view .cursor__label { font-size: 18px; color: var(--cream); }
/* "Drag" state: ink iris with prominent label */
.cursor.is-drag {
width: 84px; height: 84px;
}
.cursor.is-drag .cursor__iris { fill: var(--ink); stroke: var(--ink); }
.cursor.is-drag .cursor__pupil { transform: scale(0); }
.cursor.is-drag .cursor__glint { opacity: 0; }
.cursor.is-drag .cursor__label { font-size: 14px; color: var(--cream); }
/* "Shuffle" state: terracotta iris (the rejected sample-stack still uses this) */
.cursor.is-shuffle {
width: 88px; height: 88px;
}
.cursor.is-shuffle .cursor__iris { fill: var(--terra); stroke: var(--terra); }
.cursor.is-shuffle .cursor__pupil { transform: scale(0); }
.cursor.is-shuffle .cursor__glint { opacity: 0; }
.cursor.is-shuffle .cursor__label { font-size: 15px; color: var(--cream); }
/* "Read" state: ink iris for case-study cards */
.cursor.is-read {
width: 84px; height: 84px;
}
.cursor.is-read .cursor__iris { fill: var(--ink); stroke: var(--ink); }
.cursor.is-read .cursor__pupil { transform: scale(0); }
.cursor.is-read .cursor__glint { opacity: 0; }
.cursor.is-read .cursor__label { font-size: 15px; color: var(--cream); }
@media (hover: none) {
.cursor { display: none !important; }
}
/* ---------- NAV ---------- */
/* scroll progress bar — thin terracotta strip at top of viewport */
.scroll-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
background: rgba(26, 24, 20, 0.06);
z-index: 120;
pointer-events: none;
}
.scroll-progress > span {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--terra) 0%, var(--terra-deep, #b03d1f) 100%);
transition: width 0.05s linear;
box-shadow: 0 0 12px rgba(210, 73, 46, 0.3);
}
.nav {
position: fixed; top: 0; left: 0; right: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 20px var(--px);
z-index: 100;
/* Option 6: dark inverted nav. Ink bar at the top with cream
wordmark/links and a terra CTA. Maximum differentiation from
the cream page; reads unmistakably as "header section". */
background: var(--ink);
border-bottom: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: padding 0.3s ease;
}
.nav.is-scrolled {
/* Compact-on-scroll: same dark band, tighter vertical rhythm. */
padding-top: 14px; padding-bottom: 14px;
}
/* Anchor scroll offset — when users click nav links or hero CTAs that
target a section by ID, ensure the section's content starts BELOW
the sticky nav bar (~70-80px tall). Without this, anchor jumps land
with the section's eyebrow/heading hidden under the dark nav. */
section[id] {
scroll-margin-top: 80px;
}
.nav__logo { display: flex; align-items: center; gap: 4px; }
.nav__name {
font-family: var(--serif);
font-size: 22px;
font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 500;
letter-spacing: -0.01em;
display: inline-flex;
line-height: 1;
align-items: baseline;
color: var(--cream);
position: relative;
}
/* ============================================================
Nav logo — owl-eye treatment on the first "Hoot's" oo
============================================================
The two `o` letters in the FIRST "Hoot" are rendered as small
owl eyes: cream outer ring + amber iris + ink pupil. The
underlying "o" character is hidden via color: transparent.
Both eyes blink in unison on a slow cadence.
============================================================ */
.nav__name-eye {
position: relative;
display: inline-block;
/* Hide the actual "o" letter; the eye visual is rendered by
the ::before/::after pseudo-elements. The "o" still occupies
its natural width/height which keeps wordmark spacing right. */
color: transparent;
width: 0.55em;
text-align: center;
line-height: 1;
}
/* Outer eye disc — amber iris. Sized and positioned so the disc's
bottom edge aligns with the baseline of the surrounding letters
(H, T, second Hoot) rather than floating above it. Empirically
measured: at 22px font with 22px line-height, the baseline is at
~y50.5px from line top, and disc bottom = top+0.52em = top+11.4px.
So top = 0.45em (9.9px) puts disc bottom at 21.3px ≈ baseline. */
.nav__name-eye::before {
content: "";
position: absolute;
display: block;
width: 0.52em; height: 0.52em;
left: 0.015em;
top: 0.45em;
border-radius: 50%;
background: var(--amber-iris);
/* Blink: scaleY squashes vertically. Owl-style double blink at the
end of each 5s cycle so the motion is noticeable without being
distracting on a busy page. */
animation: navEyeBlink 5s ease-in-out infinite;
transform-origin: center;
}
/* Inner pupil — ink black, positioned slightly low-center for
the "looking up at viewer" expression (matches brand-eye spec).
Pupil's vertical position shifts down with the iris (top: 0.45 + 0.16 = 0.61em). */
.nav__name-eye::after {
content: "";
position: absolute;
display: block;
width: 0.23em; height: 0.23em;
left: 0.16em;
top: 0.61em;
border-radius: 50%;
background: var(--ink);
/* Pupil follows the iris through the blink. */
animation: navEyeBlink 5s ease-in-out infinite;
transform-origin: center;
z-index: 1;
}
/* Right eye blinks fractionally after the left — a subtle stagger
that reads as "alive" rather than mechanically synchronized. */
.nav__name-eye--r::before,
.nav__name-eye--r::after {
animation-delay: 0.06s;
}
@keyframes navEyeBlink {
/* Owl-style double-blink rhythm: most of the cycle the eyes are open,
then a quick "blink-blink" pair near the end. ~5s cycle so it's
noticeable on a typical pageview without becoming distracting.
Two squashes in quick succession (88-92%, 96-99%) read as natural
owl blinking — a single squash reads as too mechanical. */
0%, 86%, 100% { transform: scaleY(1); }
88% { transform: scaleY(1); }
90% { transform: scaleY(0.05); }
92% { transform: scaleY(1); }
96% { transform: scaleY(1); }
98% { transform: scaleY(0.05); }
99.5% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.nav__name-eye::before,
.nav__name-eye::after { animation: none; }
}
.nav__links { display: flex; gap: 28px; }
.nav__links a {
/* Bumped from 14.5px → 16px (~1pt larger) and weight 500 → 600
per Tanisha's request, now that the nav is dark and the text
needs slightly more weight to feel grounded against the ink. */
font-size: 16px; font-weight: 600; position: relative;
color: var(--cream);
transition: color 0.25s ease, opacity 0.3s ease;
}
.nav__links a::after {
content: ""; position: absolute; left: 0; bottom: -4px;
width: 0; height: 1px; background: var(--terra);
transition: width 0.35s var(--ease-out);
}
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { width: 100%; }
/* Focus pull: when any link in the row is hovered, the others dim.
Simulates an owl's binocular focus — only one thing in clear view at a time. */
.nav__links:hover a { opacity: 0.45; }
.nav__links:hover a:hover { opacity: 1; }
.nav__cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px 10px 20px;
/* On the dark nav, the CTA flips to terra so it pops as the primary
action instead of camouflaging into the bar. */
background: var(--terra); color: var(--cream);
border-radius: 999px;
font-size: 14px; font-weight: 500;
transition: background 0.3s ease, transform 0.3s var(--ease);
position: relative; overflow: hidden;
}
.nav__cta svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
/* Hover: deepen the terra slightly so the change registers (was
`bg: terra` which had no effect now that base is also terra). */
.nav__cta:hover { background: #B83D26; }
.nav__cta:hover svg { transform: translateX(4px); }
.nav__burger {
display: none; width: 44px; height: 44px; position: relative;
}
.nav__burger span {
position: absolute; left: 12px; right: 12px; height: 1.5px;
/* Cream bars on the dark nav (was ink, which would vanish). */
background: var(--cream); transition: transform 0.35s var(--ease), opacity 0.25s;
}
.nav__burger span:nth-child(1) { top: 18px; }
.nav__burger span:nth-child(2) { bottom: 18px; }
.nav__burger.is-open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
.nav__drawer {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: var(--cream);
z-index: 99;
display: grid; place-items: center;
opacity: 0; pointer-events: none;
transition: opacity 0.4s var(--ease);
}
.nav__drawer.is-open { opacity: 1; pointer-events: auto; }
.nav__drawer ul { text-align: center; }
.nav__drawer li { margin: 14px 0; }
.nav__drawer a {
font-family: var(--serif);
font-size: clamp(40px, 10vw, 72px);
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400;
letter-spacing: -0.02em;
}
.nav__drawer a:hover { color: var(--terra); font-style: italic; }
/* ---------- BUTTON ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 28px;
border-radius: 999px;
font-size: 15px; font-weight: 500;
transition: transform 0.3s var(--ease), background 0.3s ease, color 0.3s ease;
position: relative; overflow: hidden;
isolation: isolate;
white-space: nowrap;
}
.btn--primary {
background: var(--ink); color: var(--cream);
padding: 18px 28px;
}
.btn--primary .btn__text {
display: inline-grid;
overflow: hidden;
line-height: 1.15;
}
.btn--primary .btn__text > span {
grid-column: 1; grid-row: 1;
display: block;
transition: transform 0.5s var(--ease);
}
.btn--primary .btn__text > span:last-child { transform: translateY(100%); }
.btn--primary:hover .btn__text > span:first-child { transform: translateY(-100%); }
.btn--primary:hover .btn__text > span:last-child { transform: translateY(0); }
.btn--primary .btn__arrow {
display: inline-grid; place-items: center;
width: 18px; height: 18px;
transition: transform 0.4s var(--ease);
position: relative; z-index: 1;
}
.btn--primary .btn__arrow svg { width: 18px; height: 18px; }
.btn--primary:hover .btn__arrow { transform: translateX(4px) rotate(-45deg); }
.btn--primary::before {
content: ""; position: absolute; inset: 0;
background: var(--terra);
transform: translateY(101%);
transition: transform 0.45s var(--ease);
z-index: -1;
}
.btn--primary:hover::before { transform: translateY(0); }
.btn--lg { padding: 22px 36px; font-size: 17px; }
.btn--ghost {
background: transparent; color: var(--ink);
padding: 16px 24px;
border: 1px solid rgba(26, 24, 20, 0.2);
}
.btn--ghost svg { width: 14px; height: 14px; transition: transform 0.35s var(--ease); }
.btn--ghost:hover {
border-color: var(--ink);
background: var(--ink); color: var(--cream);
}
.btn--ghost:hover svg { transform: translateX(4px); }
/* ---------- SECTION LABEL ---------- */
/* Section eyebrow labels — appear above each section's headline
("— Why this works", "— Selected work", etc.). Sized to compete
on the page so users actually register the section, not just
skip to the headline. */
.section-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 18px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--terra);
font-weight: 600;
position: relative;
padding-left: 18px;
}
/* Small terra dot before the label — gives it visual weight so
it's not just a forgettable line of small text */
.section-label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 8px;
background: var(--terra);
border-radius: 50%;
transform: translateY(-50%);
}
@media (max-width: 720px) {
.section-label { font-size: 14px; letter-spacing: 0.13em; padding-left: 14px; }
.section-label::before { width: 6px; height: 6px; }
}
/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
/* ---------- (removed the broken terracotta mask-wipe pseudo-element —
the character-level mask-reveal is cleaner) ---------- */
/* ---------- SECTION BREAK ornament ---------- */
.section-break {
display: flex; align-items: center; justify-content: center;
gap: 22px;
padding: 14px var(--px);
max-width: 640px;
margin: 0 auto;
}
.section-break__line {
flex: 1;
height: 1px;
background: rgba(26, 24, 20, 0.18);
display: block;
}
.section-break__ast {
width: 20px; height: 20px;
color: var(--terra);
flex-shrink: 0;
animation: ornSpin 24s linear infinite;
}
/* ================================================
HERO
================================================ */
.hero {
min-height: 100vh;
/* Trimmed from 140/80 → 110/56. Nav is ~80px tall so 110 still
clears it while saving 54px of vertical real estate for content. */
padding: 110px var(--px) 56px;
position: relative;
display: flex; flex-direction: column; justify-content: center; align-items: center;
overflow: hidden;
isolation: isolate;
}
/* === The Watcher hero — z-stack ===
0 : noise field canvas (atmospheric, behind everything)
1 : giant eyes (large concentric vision rings flanking content)
3 : content (eyebrow, title, subhead, ctas)
4 : small owl companion (perched secondary character)
9990: full-viewport blink overlay
================================================== */
/* Three.js canvas — 3D field of B2B jargon noise */
.hero__noise {
position: absolute;
inset: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0;
animation: heroNoiseFadeIn 1.6s ease-out 1.0s forwards;
}
@keyframes heroNoiseFadeIn { to { opacity: 1; } }
/* Centered content stack — eyebrow + title + sub + ctas */
.hero__content {
position: relative;
z-index: 3;
max-width: 920px;
width: 100%;
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
/* Soft cream halo behind the content — gives the headline + subhead
a "clear focal zone" within the noise field, like signal cutting through.
The halo itself is imperceptible at the edges and densest at center. */
.hero__content::before {
content: "";
position: absolute;
inset: -40px clamp(-200px, -8vw, -80px);
z-index: -1;
background: radial-gradient(ellipse at center,
var(--cream) 0%,
rgba(241, 234, 224, 0.92) 30%,
rgba(241, 234, 224, 0.55) 55%,
rgba(241, 234, 224, 0) 80%);
pointer-events: none;
}
/* legacy: a few earlier rules constrained generic hero children to 58%.
With the new composition, content lives inside .hero__content and the
stage is gone, so we drop those constraints. */
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: 24px; /* was 40 — reduced to bring full content above fold */
color: var(--mute);
justify-content: center;
}
.pulse {
width: 8px; height: 8px; border-radius: 50%; background: var(--terra);
position: relative;
}
.pulse::after {
content: ""; position: absolute; inset: -4px; border-radius: 50%;
border: 1px solid var(--terra);
animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
0% { transform: scale(0.6); opacity: 1; }
100% { transform: scale(2.2); opacity: 0; }
}
.hero__title {
font-family: var(--serif);
font-size: clamp(44px, 7.8vw, 128px);
line-height: 1.02;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
font-weight: 400;
/* Was 36 — tightened to 24 so the subtitle sits closer and the
CTAs land above the fold on 1080-1100px viewports. */
margin-bottom: 24px;
max-width: 18ch;
text-align: center;
position: relative;
}
/* Scan-line entry: a thin terracotta beam sweeps top-to-bottom across the
headline once on first reveal. Reads as "an eye is reading the line."
Triggered by JS adding .is-scanning to .hero after iris reveal completes. */
.hero__title::after {
content: "";
position: absolute;
left: -2vw; right: -2vw;
top: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
var(--terra) 25%,
var(--terra) 75%,
transparent);
opacity: 0;
transform: translateY(0);
pointer-events: none;
z-index: 4;
filter: blur(0.5px);
box-shadow: 0 0 18px rgba(210, 73, 46, 0.55);
}
.hero.is-scanning .hero__title::after {
animation: heroScanLine 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes heroScanLine {
0% { opacity: 0; transform: translateY(0); }
10% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; transform: translateY(440px); }
}
.line { display: block; padding: 0.05em 0 0.12em; }
.line__inner {
display: inline-block;
transform: translateY(110%);
animation: lineUp 1.1s var(--ease-out) forwards;
}
.line:nth-child(1) .line__inner { animation-delay: 0.15s; }
.line:nth-child(2) .line__inner { animation-delay: 0.28s; }
.line:nth-child(3) .line__inner { animation-delay: 0.42s; }
@keyframes lineUp {
to { transform: translateY(0); }
}
.hero__title em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.line--rot { display: flex; align-items: baseline; gap: 0.25em; flex-wrap: wrap; justify-content: center; }
.line--rot .line__inner { display: inline-flex; align-items: baseline; gap: 0.22em; flex-wrap: wrap; justify-content: center; }
.rotator {
display: inline-block; position: relative;
height: 1em; overflow: hidden; vertical-align: baseline;
/* width is set by JS per-active-word; no min-width so the comma flows tight */
}
.rotator__word {
display: block;
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
transform: translateY(120%);
transition: transform 0.7s var(--ease-out);
position: absolute; top: 0; left: 0;
white-space: nowrap;
}
.rotator__word.is-active { transform: translateY(0); }
.rotator__word.is-leaving { transform: translateY(-120%); }
.hero__sub {
max-width: 56ch;
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.55;
color: var(--ink-2);
margin: 0 auto 20px; /* was 28 — tighter to CTAs so they land above fold */
text-align: center;
transition-delay: 0.55s;
}
.hero__ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
transition-delay: 0.7s;
}
/* The old "start here" handwritten hint pointed at left-aligned CTAs.
With the centered Watcher composition there's no clear visual hook
for it, so it stays hidden. May restore later if we want it. */
.hero__cta-hint { display: none; }
/* The old .hero__stage held the sample card stack on the right half.
The card stack is gone (moved out of hero) and the right side is
now occupied by the giant eye, so the stage is removed entirely. */
.hero__stage { display: none; }
.sample-stack { display: none; }
/* floating stickers */
/* ================================================
HERO STAGE — INTERACTIVE SAMPLE CARD
================================================ */
.hero__stage {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 50%;
pointer-events: none;
perspective: 1400px;
perspective-origin: center center;
}
.hero__stage > * { pointer-events: auto; }
/* ================================================
HOVER CAROUSEL — fanned 3D stack of sample cards
Each card has data-stack-i (0=front, 3=back).
Click top to throw away; stack cycles.
================================================ */
.sample-stack {
position: absolute;
top: 38%;
right: 8%;
transform: translateY(-50%);
width: min(420px, 32vw);
aspect-ratio: 4 / 5;
perspective: 1600px;
opacity: 0;
animation: stackEnter 1s var(--ease-out) 0.8s forwards;
}
@keyframes stackEnter {
from { opacity: 0; transform: translateY(-40%) scale(0.85) rotate(-8deg); }
to { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
}
.sample-stack__card {
position: absolute;
inset: 0;
background: var(--cream-2);
border: 1px solid rgba(26, 24, 20, 0.14);
border-radius: 12px;
padding: 28px 26px;
display: flex;
flex-direction: column;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
overflow: hidden;
transform-origin: 50% 85%;
will-change: transform, opacity;
box-shadow:
0 2px 6px rgba(26, 24, 20, 0.05),
0 16px 32px rgba(26, 24, 20, 0.08),
0 40px 80px rgba(26, 24, 20, 0.10);
transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
box-shadow 0.4s ease;
}
/* --- resting stack positions by data-stack-i --- */
.sample-stack__card[data-stack-i="0"] {
transform: rotate(0deg) translate(0, 0) scale(1);
z-index: 40; opacity: 1;
}
.sample-stack__card[data-stack-i="1"] {
transform: rotate(-3deg) translate(-14px, 10px) scale(0.97);
z-index: 30; opacity: 0.95;
}
.sample-stack__card[data-stack-i="2"] {
transform: rotate(-6deg) translate(-26px, 22px) scale(0.94);
z-index: 20; opacity: 0.82;
}
.sample-stack__card[data-stack-i="3"] {
transform: rotate(-9deg) translate(-38px, 34px) scale(0.90);
z-index: 10; opacity: 0.65;
}
/* --- hover: spread the fan dramatically --- */
.sample-stack:hover .sample-stack__card[data-stack-i="0"] {
transform: rotate(4deg) translate(10px, -8px) scale(1.02);
}
.sample-stack:hover .sample-stack__card[data-stack-i="1"] {
transform: rotate(-5deg) translate(-28px, 18px) scale(0.96);
}
.sample-stack:hover .sample-stack__card[data-stack-i="2"] {
transform: rotate(-10deg) translate(-52px, 38px) scale(0.92);
}
.sample-stack:hover .sample-stack__card[data-stack-i="3"] {
transform: rotate(-15deg) translate(-72px, 58px) scale(0.88);
}
/* --- throw animation: top card flies off when clicked --- */
.sample-stack__card.is-throwing {
animation: cardThrow 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards !important;
pointer-events: none;
z-index: 50 !important;
}
@keyframes cardThrow {
0% { transform: rotate(0deg) translate(0, 0) scale(1); opacity: 1; }
40% { transform: rotate(8deg) translate(40px, -20px) scale(1.03); opacity: 1; }
100% { transform: rotate(26deg) translate(140%, -30%) scale(0.85); opacity: 0; }
}
/* paper-grain texture */
.sample-card__grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.35;
mix-blend-mode: multiply;
pointer-events: none;
}
.sample-card__header {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid rgba(26, 24, 20, 0.08);
margin-bottom: 18px;
position: relative; z-index: 2;
}
.sample-card__kicker {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10px !important;
letter-spacing: 0.1em;
color: var(--mute);
}
.sample-card__dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--terra);
animation: pulseSoft 2.2s ease-in-out infinite;
}
@keyframes pulseSoft {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.7); }
}
.sample-card__num {
font-size: 10px !important;
letter-spacing: 0.12em;
color: var(--terra);
}
.sample-card__body {
flex: 1;
position: relative; z-index: 2;
display: flex; flex-direction: column;
}
.sample-card__headline {
font-family: var(--serif);
font-size: clamp(20px, 1.7vw, 26px);
line-height: 1.08;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
color: var(--ink);
margin-bottom: 12px;
}
.sample-card__headline em {
color: var(--terra);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.sample-card__subhead {
font-size: 13px;
line-height: 1.55;
color: var(--ink-2);
margin-bottom: auto;
}
.sample-card__meta {
display: flex; align-items: center; justify-content: space-between;
padding-top: 14px;
border-top: 1px dashed rgba(26, 24, 20, 0.18);
margin-top: 14px;
gap: 10px;
}
.sample-card__metric {
font-family: var(--serif);
font-size: 16px;
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.sample-card__client {
font-size: 9.5px !important;
color: var(--mute);
letter-spacing: 0.1em;
}
.sample-card__footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid rgba(26, 24, 20, 0.08);
position: relative; z-index: 2;
}
.sample-card__hint {
font-size: 9.5px !important;
letter-spacing: 0.1em;
color: var(--mute);
transition: color 0.3s;
}
.sample-stack:hover .sample-card__hint { color: var(--terra); }
.sample-card__shuffle {
width: 28px; height: 28px;
display: grid; place-items: center;
background: var(--ink); color: var(--cream);
border-radius: 50%;
transition: background 0.3s ease, transform 0.4s var(--ease);
flex-shrink: 0;
}
.sample-card__shuffle svg { width: 14px; height: 14px; }
.sample-stack:hover .sample-card__shuffle { background: var(--terra); transform: rotate(180deg); }
/* floating handwritten pins around the card */
.hero__pin {
position: absolute;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
opacity: 0;
animation: pinEnter 1s var(--ease-out) 1.8s forwards;
pointer-events: none;
}
@keyframes pinEnter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.hero__pin--1 {
top: 16%; right: 42%;
transform: rotate(-6deg);
display: inline-flex; align-items: center; gap: 6px;
}
.hero__pin--1 .mono {
background: var(--ink); color: var(--cream);
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
}
.hero__pin-arrow {
width: 60px; height: 46px;
color: var(--terra);
transform: rotate(18deg) translate(-4px, 8px);
}
.hero__pin-arrow path {
stroke-dasharray: 160;
stroke-dashoffset: 160;
animation: drawArrow 1.2s var(--ease-out) 2.4s forwards;
}
@keyframes drawArrow { to { stroke-dashoffset: 0; } }
.hero__pin--2 {
bottom: 14%; right: 46%;
font-family: var(--serif);
font-style: italic;
font-size: 24px;
color: var(--terra);
transform: rotate(-8deg);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
/* floating asterisks with idle animation */
.hero__ast {
position: absolute;
color: var(--terra);
opacity: 0;
animation: astEnter 1s var(--ease-out) forwards, astFloat 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes astEnter { to { opacity: 1; } }
@keyframes astFloat {
0%, 100% { transform: translate(0, 0) rotate(0); }
33% { transform: translate(8px, -10px) rotate(90deg); }
66% { transform: translate(-6px, 6px) rotate(180deg); }
}
.hero__ast--1 {
top: 8%; right: 14%;
width: 28px; height: 28px;
animation-delay: 1.4s, 3s;
}
.hero__ast--2 {
top: 72%; right: 34%;
width: 22px; height: 22px;
animation-delay: 1.6s, 4s;
color: var(--ink);
}
.hero__ast--3 {
top: 50%; right: 4%;
width: 40px; height: 40px;
color: rgba(210, 73, 46, 0.35);
animation-delay: 1.2s, 2s;
}
@media (max-width: 1100px) {
.hero__stage { width: 45%; }
.sample-stack { width: min(340px, 40vw); right: 4%; }
.hero__pin--1 { display: none; }
}
@media (max-width: 900px) {
.hero__stage {
position: relative;
width: 100%;
height: 520px;
margin-top: 40px;
perspective: 1200px;
}
.sample-stack {
position: relative;
top: 0; right: auto;
transform: none;
width: min(360px, 82vw);
margin: 0 auto;
display: block;
animation: stackEnterMobile 1s var(--ease-out) 0.8s forwards;
}
@keyframes stackEnterMobile {
from { opacity: 0; transform: translateY(30px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__pin--1 { display: none; }
.hero__ast--1, .hero__ast--3 { display: none; }
.hero__ast--2 { top: auto; bottom: 20px; right: 10%; }
}
.hero__scroll {
position: absolute; bottom: 40px; left: var(--px);
display: flex; align-items: center; gap: 14px;
color: var(--mute); font-size: 12px;
}
.hero__scroll .mono { color: var(--ink-2); }
.hero__scroll-line {
display: block; width: 40px; height: 1px; background: var(--ink);
position: relative; overflow: hidden;
}
.hero__scroll-line::after {
content: ""; position: absolute; inset: 0;
background: var(--terra);
transform: translateX(-100%);
animation: scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint {
0% { transform: translateX(-100%); }
50% { transform: translateX(0); }
100% { transform: translateX(100%); }
}
/* ================================================
MARQUEE / TRUST
================================================
Refined editorial trust strip. Names scroll horizontally at a
relaxed pace, sized to feel like proper trust treatment (not
billboards). Subtle gradient gives the section weight. Each name
gets a terra-glow hover that lifts slightly — so the strip feels
alive when the user moves the cursor over it. */
.trust {
/* Option B spacing — tighter than the global --section-pad rhythm
because the trust strip is supportive evidence, not a section
opener. 64 top / 48 bottom gives the strip its own self-contained
band feel rather than borrowing the hero-section air. */
padding: 64px 0 48px;
border-top: 1px solid rgba(26, 24, 20, 0.1);
border-bottom: 1px solid rgba(26, 24, 20, 0.1);
overflow: hidden;
/* Subtle radial wash — gives the section depth without being heavy.
Brightest in the center where the names cross, falling off at edges. */
background:
radial-gradient(ellipse at 50% 50%,
color-mix(in srgb, var(--terra) 4%, var(--cream)) 0%,
var(--cream) 50%,
var(--cream) 100%);
position: relative;
}
.trust__label { padding: 0 var(--px); margin-bottom: 36px; }
.marquee { display: flex; flex-direction: column; gap: 18px; }
.marquee__row { overflow: hidden; padding: 8px 0; }
.marquee__track {
display: flex; align-items: center; gap: 48px;
white-space: nowrap;
animation: slide 48s linear infinite;
width: max-content;
--_dx: 0px;
will-change: transform;
}
.marquee__row--reverse .marquee__track {
animation-direction: reverse;
animation-duration: 64s;
}
/* Pause marquee on hover so users can actually read company names */
.marquee__row:hover .marquee__track { animation-play-state: paused; }
@keyframes slide {
from { transform: translate3d(calc(0% + var(--_dx, 0px)), 0, 0); }
to { transform: translate3d(calc(-50% + var(--_dx, 0px)), 0, 0); }
}
.mq-item {
font-family: var(--serif);
font-size: clamp(26px, 3vw, 44px);
line-height: 1;
letter-spacing: -0.015em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 400;
display: inline-block;
position: relative;
cursor: pointer;
transition: color 0.35s ease,
font-style 0.35s ease,
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
text-shadow 0.4s ease;
transform: translate3d(var(--_gx, 0px), var(--_gy, 0px), 0);
will-change: transform;
}
.mq-item:hover {
color: var(--terra);
font-style: italic;
/* Subtle terra glow on hover — lift the name forward */
text-shadow: 0 1px 0 color-mix(in srgb, var(--terra) 25%, transparent);
transform: translate3d(var(--_gx, 0px), calc(var(--_gy, 0px) - 3px), 0) scale(1.02);
}
/* ----------------------------------------------------------------
Trust marquee — client logos
----------------------------------------------------------------
Each .mq-item--logo wraps a real ![]()
rendered in the brand's
original colours. At rest the image sits at slightly reduced
opacity for an editorial, restrained presentation; on hover it
resolves to full opacity. The cursor-repel transform inherited
from .mq-item supplies the lift animation, so no scale or
transform is needed here.
Why no `mask-image` / no filter chain: `mask-image` with a URL
stored in a CSS custom property has known parser bugs in real
Safari + some Chromium builds (the element paints empty), and
filter chains for color tinting are fragile across engines.
![]()
+ opacity is supported everywhere back to ~2015.
The pre-processing pipeline (see assets/logos/) already cleaned
up problem cases: Stashfin's solid background and waveon /
mfine's white-fill inner knockouts were converted to alpha
transparency so brand marks render correctly on cream.
.mq-item is preserved on every wrapper because the cursor-repel
gravity loop in script.js §20 selects on that class. */
.mq-item--logo {
--logo-h: clamp(22px, 2.4vw, 32px);
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--logo-h);
/* Reset typography rules inherited from .mq-item — the element
is just chrome around the ![]()
*/
font-size: 0;
letter-spacing: 0;
line-height: 0;
}
.mq-item--logo img {
display: block;
height: 100%;
width: auto;
opacity: 0.9;
transition: opacity 0.35s ease;
-webkit-user-drag: none;
user-select: none;
pointer-events: none; /* hover events bubble to the .mq-item */
}
.mq-item--logo:hover img {
opacity: 1;
}
/* Suppress the .mq-item:hover text effects that don't apply here.
Also CRITICALLY suppress the scale + lift transform that makes
logos wobble/distort on hover (logos are raster/vector with their
own internal proportions — scaling them by 1.02× while the cursor
repel translation is also active produces a visible deformation).
Logos hover-state: only the opacity lift (.mq-item--logo:hover img
above), nothing else. */
.mq-item--logo:hover {
font-style: normal;
text-shadow: none;
color: inherit;
/* Keep the cursor-repel translation but DROP the scale + lift */
transform: translate3d(var(--_gx, 0px), var(--_gy, 0px), 0);
}
/* Rezo's mark is square (the only non-wordmark in the set); bump
its optical size so it reads at parity with the wordmark logos. */
.mq-item--logo[data-brand="rezo"] {
--logo-h: clamp(28px, 3vw, 40px);
}
@media (max-width: 640px) {
.mq-item--logo {
--logo-h: clamp(20px, 5.2vw, 26px);
}
}
/* Diamond separators — proportionally smaller and quieter so they
accent the names without competing. */
.mq-sep {
color: var(--terra);
font-size: clamp(16px, 1.8vw, 26px);
opacity: 0.65;
}
/* Tag list (industries the brand serves) — runs on a second slower
row beneath the names. Smaller, italic, more subdued. */
.mq-item--alt {
font-size: clamp(15px, 1.5vw, 22px);
color: var(--ink-2);
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400;
font-style: italic;
opacity: 0.78;
cursor: default;
transition: color 0.35s ease, opacity 0.35s ease;
}
.mq-item--alt:hover {
color: var(--terra);
opacity: 1;
transform: translate3d(var(--_gx, 0px), var(--_gy, 0px), 0);
text-shadow: none;
}
.mq-sep--alt {
font-size: clamp(13px, 1.4vw, 18px);
color: var(--mute);
opacity: 0.6;
}
/* ================================================
SERVICES
================================================ */
/* ============================================================
THREE LANES — "The Problem" section
============================================================
Per the brand brief: subtle visual motifs (concentric circles,
focus/spotlight effects, scan reveals). Each lane is full-width
with alternating left/right layout. Visuals are abstract circular
shapes — observation/awareness, not literal owl illustration.
============================================================ */
.lanes {
padding: var(--section-pad) var(--px);
background: var(--cream);
position: relative;
overflow: hidden;
}
/* Section header — centered editorial */
.lanes__head {
max-width: 880px;
margin: 0 auto 96px;
text-align: center;
}
.lanes__head .section-label { margin-bottom: 24px; }
.lanes__title {
font-family: var(--serif);
font-size: clamp(40px, 5.6vw, 88px);
line-height: 1.04;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
font-weight: 400;
margin-bottom: 28px;
}
.lanes__title em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.lanes__lede {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.55;
color: var(--ink-2);
max-width: 60ch;
margin: 0 auto;
text-align: center;
}
/* Italic emphasis inside lede should match the body size exactly
(Fraunces italic can visually appear larger than the roman, so we
pin font-size to inherit and prevent any size shift). */
.lanes__lede em {
font-size: inherit;
line-height: inherit;
font-style: italic;
color: var(--terra);
}
/* Pencil mascot above the lanes lede ————————————————————
The pencil sweeps left-to-right and draws an underline as it goes —
visual proof that "content is built". Different character (pencil)
and different motion (sweep + draw) from the closer-owl mascots. */
.lanes__lede-pencil {
display: block;
width: 64px;
height: 28px;
margin: 0 auto 14px;
}
.ll-pencil-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.ll-pencil-body {
transform-origin: 30% 50%;
transform-box: view-box;
animation: ll-write 5s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
@keyframes ll-write {
/* Pencil sits left → sweeps right while writing → resets */
0% { transform: translate(-18px, 0) rotate(-3deg); }
10% { transform: translate(-18px, -1px) rotate(-3deg); }
60% { transform: translate(8px, -1px) rotate(2deg); }
85% { transform: translate(8px, 0) rotate(0deg); }
95% { transform: translate(8px, 0) rotate(0deg); }
100% { transform: translate(-18px, 0) rotate(-3deg); }
}
.ll-pencil-mark {
/* The underline draws in as the pencil sweeps. Length 52 in viewBox
terms (x1=6 → x2=58). dasharray slightly larger so it covers cleanly. */
stroke-dasharray: 56;
stroke-dashoffset: 56;
animation: ll-mark 5s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
@keyframes ll-mark {
0% { stroke-dashoffset: 56; opacity: 0; }
12% { opacity: 1; }
60% { stroke-dashoffset: 0; opacity: 1; }
88% { stroke-dashoffset: 0; opacity: 1; }
98% { opacity: 0; }
100% { stroke-dashoffset: 56; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ll-pencil-body, .ll-pencil-mark { animation: none; }
.ll-pencil-mark { stroke-dashoffset: 0; opacity: 0.6; }
/* Disable all ambient lane diagram animations for users who prefer
reduced motion. The diagrams still render fully, just without
looping motion. */
.lflow__flow,
.lane.is-in .lhub__node,
.lane.is-in .lhub__spoke,
.lane.is-in .lbar--03,
.lane.is-in .lbar--04,
.lane.is-in .lbar__flag {
animation: none !important;
}
/* Keep the apex flag visible (just static, not bobbing) */
.lane.is-in .lbar__flag { opacity: 0.95; }
/* Hide the flow dots entirely since they only make sense as motion */
.lflow__flow { opacity: 0; }
}
/* Each lane is a full-width row. Alternating layout via .lane--reverse. */
.lane {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.2fr);
gap: clamp(40px, 6vw, 100px);
align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 80px 0;
border-top: 1px solid rgba(26, 24, 20, 0.1);
}
.lane:first-of-type { border-top: none; padding-top: 40px; }
.lane--reverse {
/* visual on the right, body on the left */
direction: rtl;
}
.lane--reverse > * { direction: ltr; }
@media (max-width: 900px) {
.lane {
grid-template-columns: 1fr;
gap: 40px;
padding: 60px 0;
}
.lane--reverse { direction: ltr; }
}
@media (max-width: 520px) {
/* On narrow phones, hide the OLD decorative lane visualizations
(qpanel/cluster/receipts) — they were designed for ≥440px wide
canvases. The new flow/hub/bars diagrams are simpler and have
mobile breakpoints, so they render fine on phone widths. */
.lane__visual--questions,
.lane__visual--system,
.lane__visual--receipts {
display: none !important;
}
.lane { padding: 40px 0; }
.lane:first-of-type { padding-top: 20px; }
}
/* Reveal-on-scroll: lanes fade up when entering view */
.lane.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.lane.reveal.is-in { opacity: 1; transform: translateY(0); }
/* === LANE BODY (text content) === */
.lane__body { max-width: 56ch; }
.lane__num {
display: inline-block;
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.18em;
color: var(--terra);
margin-bottom: 18px;
position: relative;
padding-left: 22px;
}
.lane__num::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 14px; height: 1px;
background: var(--terra);
transform: translateY(-50%);
}
.lane__title {
font-family: var(--serif);
font-size: clamp(36px, 4.2vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
font-weight: 400;
margin-bottom: 14px;
}
.lane__tagline {
font-family: var(--serif);
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.4;
color: var(--terra);
margin-bottom: 14px;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.lane__tagline em { font-style: italic; }
/* "What this means" subhead — small terra mono tag introducing the
lane's body. Reads like an editor's section marker. Sits between
the lane title and the lead body line. */
.lane__what {
display: inline-block;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terra);
margin-bottom: 18px;
position: relative;
padding-left: 22px;
}
.lane__what::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 14px; height: 1px;
background: var(--terra);
transform: translateY(-50%);
}
.lane__content {
font-size: 16px;
line-height: 1.65;
color: var(--ink-2);
}
.lane__content p { margin-bottom: 16px; }
.lane__content p:last-child { margin-bottom: 0; }
.lane__lead {
font-size: 19px !important;
line-height: 1.5 !important;
color: var(--ink) !important;
margin-bottom: 20px !important;
font-weight: 500;
}
.lane__caption {
margin-bottom: 8px !important;
color: var(--ink) !important;
}
.lane__list {
list-style: none;
padding: 0;
margin: 0 0 20px;
}
.lane__list li {
font-family: var(--serif);
font-style: italic;
font-size: 19px;
line-height: 1.55;
color: var(--ink);
padding-left: 22px;
position: relative;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
margin-bottom: 6px;
}
.lane__list li::before {
content: "";
position: absolute;
left: 0; top: 0.7em;
width: 12px; height: 1px;
background: var(--terra);
}
.lane__close {
font-family: var(--serif);
font-style: italic;
font-size: 18px !important;
line-height: 1.5 !important;
color: var(--ink) !important;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
margin-top: 24px !important;
padding-top: 24px !important;
border-top: 1px solid rgba(26, 24, 20, 0.12);
}
/* === LANE VISUAL === */
.lane__visual {
aspect-ratio: 1 / 1;
width: 100%;
max-width: 560px;
margin: 0 auto;
position: relative;
display: grid;
place-items: center;
}
/* On mobile, drop the forced square aspect ratio so the visual sizes
to its natural content height. Without this, .lane__visual--bars
(with min-height: 460px) would force its width to 460px to keep
the 1:1 ratio — overflowing past the viewport on iPhone SE (375px).
With aspect-ratio: auto, width stays at 100% (≤viewport) and height
adjusts to fit the content. */
@media (max-width: 720px) {
.lane__visual {
aspect-ratio: auto;
max-width: 100%;
}
/* Lane 03 specifically: reduce its min-height proportionally for
mobile viewports so bars look right (was 460px → forced overflow). */
.lane__visual--bars { min-height: 360px; padding: 24px 12px 22px; }
.lbars__row { min-height: 280px; }
}
.lane-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.lane-svg__label {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
@media (max-width: 900px) {
/* On mobile the qpanel's typing animation only shows 5 short lines
of buyer questions — the desktop 460px min-height creates massive
empty space below them. Drop to auto so the panel hugs its content. */
.qpanel { min-height: 0; padding: 24px 22px 28px; }
.qpanel__list { gap: 10px; }
.qpanel__resolve { margin-top: 16px; }
}
.lane--01 { grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr); }
@media (max-width: 900px) {
.lane--01 { grid-template-columns: 1fr; }
}
/* === LANE 01 — RESEARCH (qpanel: live typing buyer questions) ===
The visual side of Lane 01 is a cream panel with a subtle ink border.
Buyer-questions type themselves out one at a time in terra mono;
each holds briefly, dims to a stacked-history opacity, and the next
one types. After all five resolve, a cream serif "None of these are
keywords." line fades in, with a small caption below.
Driven by IntersectionObserver in script.js (.is-typing on .qpanel
activates the sequence; .is-resolved adds the final reveal). */
.lane__visual--questions {
/* This particular lane visual gets more horizontal room than the
square SVG visuals on lanes 02/03. We let the panel breathe. */
aspect-ratio: auto;
max-width: none;
width: 100%;
margin: 0;
display: block;
}
.qpanel {
position: relative;
background: var(--cream);
border: 1px solid rgba(26, 24, 20, 0.14);
border-radius: 18px;
padding: 32px 36px 36px;
min-height: 460px;
display: flex;
flex-direction: column;
box-shadow:
0 1px 0 rgba(26, 24, 20, 0.04),
0 18px 40px -28px rgba(26, 24, 20, 0.18);
overflow: hidden;
}
/* Subtle scan-line atmosphere — very low opacity, pure decoration */
.qpanel::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent 0,
transparent 3px,
rgba(26, 24, 20, 0.012) 3px,
rgba(26, 24, 20, 0.012) 4px
);
pointer-events: none;
}
/* Header strip — small mono label with a live-status dot */
.qpanel__head {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--ink-2);
text-transform: uppercase;
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(26, 24, 20, 0.08);
position: relative;
z-index: 1;
}
.qpanel__head-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--terra);
display: inline-block;
position: relative;
}
.qpanel__head-dot::after {
/* live-pulse ring on the dot — runs always, even before typing starts,
so the panel feels active the moment it's in view */
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--terra);
opacity: 0;
animation: qpanelDotPulse 1.8s ease-out infinite;
}
@keyframes qpanelDotPulse {
0% { transform: scale(0.6); opacity: 0.85; }
100% { transform: scale(1.6); opacity: 0; }
}
/* The question stack */
.qpanel__list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
z-index: 1;
}
/* Each question line — terra mono, 0 width by default. JS reveals
character by character via the data-q attribute. */
.qline {
font-family: var(--mono);
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.5;
color: var(--terra);
letter-spacing: -0.005em;
position: relative;
/* default: invisible, no height, no caret */
opacity: 0;
min-height: 0;
transition: opacity 0.45s var(--ease-out);
}
/* While a line is currently typing — visible, with a blinking caret pinned
right after the typed text. JS adds .is-active to the line being typed. */
.qline.is-active {
opacity: 1;
}
.qline.is-active::after {
content: "";
display: inline-block;
width: 8px;
height: 1em;
background: var(--terra);
margin-left: 2px;
vertical-align: -2px;
animation: qcaret 0.85s steps(1, end) infinite;
}
@keyframes qcaret {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Once a line is done typing, JS adds .is-done — line stays visible but
dims slightly so the active line draws the eye. */
.qline.is-done {
opacity: 0.62;
}
/* The resolve block (the punchline of the whole panel) */
.qpanel__resolve {
margin-top: 28px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
position: relative;
z-index: 1;
}
.qpanel.is-resolved .qpanel__resolve {
opacity: 1;
transform: translateY(0);
}
.qpanel__rule {
display: block;
width: 36px;
height: 1px;
background: var(--terra);
margin-bottom: 18px;
}
.qpanel__resolve-line {
font-family: var(--serif);
font-size: clamp(22px, 2vw, 30px);
line-height: 1.25;
color: var(--ink);
letter-spacing: -0.015em;
font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400;
margin: 0 0 8px;
}
.qpanel__resolve-line em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.qpanel__resolve-cap {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--ink-2);
text-transform: uppercase;
margin: 0;
}
/* Reduced motion — show the entire panel resolved instantly, no typing */
@media (prefers-reduced-motion: reduce) {
.qpanel__head-dot::after { animation: none; }
.qline { opacity: 0.62 !important; }
.qline::before { content: attr(data-q); }
.qpanel__resolve { opacity: 1 !important; transform: none !important; }
}
/* === LANE 02 — KNOWLEDGE SYSTEMS (cluster: assembling constellation) ===
A central PILLAR card sits in the middle of a square stage. Six
satellite content cards (BLOG, FAQ, COMPARISON, CASE STUDY, GUIDE,
EMAIL) drift in one at a time and lock into orbital positions, each
connected to the pillar by a line that draws itself with stroke-
dashoffset animation. Once all six land, a small terra status badge
appears above ("ONE CLUSTER, ONE DECISION").
Driven by IntersectionObserver in script.js — adds .is-building once
visible, which kicks off the staggered reveals. */
.cluster {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 460px;
margin: 0 auto;
}
/* Status badge — hidden until all satellites land */
.cluster__badge {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%) translateY(6px);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--ink);
color: var(--cream);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
z-index: 5;
}
.cluster.is-complete .cluster__badge {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.cluster__badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--terra);
display: inline-block;
}
/* Connection lines SVG — sits behind the cards */
.cluster__lines {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
}
.cluster {
position: relative;
aspect-ratio: 1.05 / 1;
width: 100%;
max-width: 440px;
margin: 0 auto;
}
/* === Index card === Each card is a real-feeling notepad with notepad
ruled lines (faint horizontal lines), a vintage typewriter "TYPE"
stamp at top, and italic serif title beneath. Cards are positioned
absolutely with hand-placed rotations so they read as "papers laid
on a desk", not a regular grid. */
.ckard {
position: absolute;
width: clamp(135px, 16vw, 175px);
min-height: clamp(86px, 10vw, 105px);
background: #F5EEE3; /* slightly warmer than cream — paper tone */
/* Notepad ruled lines: faint horizontal rule every 22px,
starting below the top padding. */
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 28px,
rgba(26, 24, 20, 0.07) 28px,
rgba(26, 24, 20, 0.07) 29px
);
background-position: 0 36px; /* skip the type-stamp line */
background-repeat: repeat;
border: 1px solid rgba(26, 24, 20, 0.13);
border-radius: 2px;
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow:
0 1px 2px rgba(26, 24, 20, 0.08),
0 8px 22px -10px rgba(26, 24, 20, 0.28);
/* Initial state: stacked at center, hidden, awaiting fan-out.
Each card has its own --rot rotation set per position class. */
--rot: 0deg;
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg) scale(0.85);
transform-origin: center;
transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.cluster.is-building .ckard {
opacity: 1;
/* Animate to final position with the card's own rotation */
transform: translate(var(--tx, -50%), var(--ty, -50%)) rotate(var(--rot)) scale(1);
}
/* Reveal cascade: pillar first, satellites fan out one-by-one */
.cluster.is-building .ckard[data-order="0"] { transition-delay: 0.10s; }
.cluster.is-building .ckard[data-order="1"] { transition-delay: 0.40s; }
.cluster.is-building .ckard[data-order="2"] { transition-delay: 0.55s; }
.cluster.is-building .ckard[data-order="3"] { transition-delay: 0.70s; }
.cluster.is-building .ckard[data-order="4"] { transition-delay: 0.85s; }
.cluster.is-building .ckard[data-order="5"] { transition-delay: 1.00s; }
.cluster.is-building .ckard[data-order="6"] { transition-delay: 1.15s; }
/* Vintage typewriter type-stamp at top of each card */
.ckard__type {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.22em;
color: var(--terra);
text-transform: uppercase;
font-weight: 700;
/* Sit on the first ruled-line position */
padding-bottom: 8px;
border-bottom: 1px solid rgba(210, 73, 46, 0.25);
}
.ckard__title {
font-family: var(--serif);
font-size: 14px;
line-height: 1.3;
color: var(--ink);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
flex: 1;
}
/* Hand-cut corner detail — small triangle clipped from top-right
corner, like a real index card corner-cut tab. Subtle terra accent. */
.ckard__corner {
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 14px;
background: var(--terra);
opacity: 0.55;
clip-path: polygon(100% 0, 100% 100%, 0 0);
}
/* === Card positions ===
Each card has --tx, --ty for its final translate position relative
to its anchor (top + left), and --rot for rotation. Positioned around
the center pillar in a fanned arrangement that reads as "papers laid
on a desk", with z-index controlling stacking order. */
/* PILLAR — center, on top of stack, slightly larger, ink-filled */
.ckard--pillar {
top: 50%;
left: 50%;
--tx: -50%;
--ty: -50%;
--rot: -2deg;
width: clamp(160px, 19vw, 200px);
min-height: clamp(96px, 11vw, 120px);
background: var(--ink);
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 28px,
rgba(241, 234, 224, 0.08) 28px,
rgba(241, 234, 224, 0.08) 29px
);
background-position: 0 38px;
border-color: var(--ink);
z-index: 5;
box-shadow:
0 2px 4px rgba(26, 24, 20, 0.15),
0 14px 32px -12px rgba(26, 24, 20, 0.45);
}
.ckard--pillar .ckard__type {
color: var(--terra);
border-bottom-color: rgba(210, 73, 46, 0.5);
}
.ckard--pillar .ckard__title {
color: var(--cream);
font-size: 17px;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 500;
}
/* Satellite cards — fanned out around the pillar at hand-placed angles.
Six distinct positions (top-L, top-R, middle-L, middle-R, bottom-L,
bottom-R) so each card gets its own real estate without colliding. */
.ckard--pos1 { top: 5%; left: 6%; --rot: -8deg; z-index: 1; } /* BLOG */
.ckard--pos2 { top: 8%; right: 2%; --tx: 0; --ty: 0; --rot: 7deg; z-index: 2; } /* FAQ */
.ckard--pos3 { top: 36%; left: -3%; --rot: -10deg; z-index: 3; } /* COMPARISON */
.ckard--pos4 { top: 32%; right: -3%; --tx: 0; --ty: 0; --rot: 6deg; z-index: 3; } /* CASE STUDY */
.ckard--pos5 { bottom: 4%; left: 12%; --ty: 0; --rot: -4deg; z-index: 2; } /* GUIDE */
.ckard--pos6 { bottom: 6%; right: 8%; --tx: 0; --ty: 0; --rot: 9deg; z-index: 2; } /* EMAIL */
/* Mobile: tighter, smaller cards */
@media (max-width: 720px) {
.cluster { max-width: 100%; aspect-ratio: 1 / 1.1; }
.ckard { width: 38vw; min-height: 80px; padding: 10px 12px; }
.ckard--pillar { width: 50vw; min-height: 96px; }
.ckard__type { font-size: 8.5px; }
.ckard__title { font-size: 12px; }
.ckard--pillar .ckard__title { font-size: 16px; }
}
/* Once complete — the whole cluster pulses once gently */
.cluster.is-complete {
animation: clusterPulse 2.4s ease-in-out 0s 1;
}
@keyframes clusterPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.015); }
}
/* Idle state ambient: a faint orbital sway on the lines once complete */
.cluster.is-complete .cluster__line {
animation: lineBreathe 4s ease-in-out infinite;
}
@keyframes lineBreathe {
0%, 100% { opacity: 0.42; }
50% { opacity: 0.62; }
}
@media (max-width: 900px) {
.cluster { max-width: 360px; }
.ckard { min-width: 96px; max-width: 130px; padding: 7px 10px; }
.ckard__title { font-size: 11px; }
.ckard--pillar { min-width: 120px; max-width: 150px; }
.ckard--pillar .ckard__title { font-size: 13px; }
}
/* Reduced motion — show the cluster fully built immediately */
@media (prefers-reduced-motion: reduce) {
.cluster .ckard { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
.cluster .cluster__line { stroke-dashoffset: 0 !important; }
.cluster .cluster__badge { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
.cluster.is-complete { animation: none !important; }
.cluster.is-complete .cluster__line { animation: none !important; }
}
/* === LANE 03 — SIGNATURE ASSETS (receipts: branching message tree) ===
A single Slack-style origin message at the top, then four descendants
spawn from it in a branching tree. Each descendant is connected to its
parent by a thin curved line. JS computes the line paths after layout
so they stay correct on resize. After all 5 land, a serif resolve
("One asset. Five rooms it walked into.") fades in below.
Total reveal budget ~5.5s. Driven by IntersectionObserver. */
.lane__visual--receipts {
/* Like Lane 01, this lane gets a wider non-square visual area. */
aspect-ratio: auto;
max-width: none;
width: 100%;
margin: 0;
display: block;
}
.receipts {
position: relative;
background: var(--cream);
border: 1px solid rgba(26, 24, 20, 0.14);
border-radius: 18px;
padding: 30px 30px 36px;
min-height: 540px;
box-shadow:
0 1px 0 rgba(26, 24, 20, 0.04),
0 18px 40px -28px rgba(26, 24, 20, 0.18);
overflow: hidden;
/* Two-column grid for the messages: origin centered, then branches L/R */
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content;
gap: 28px 16px;
align-content: start;
}
/* Subtle grid texture — same family as Lane 01's panel */
.receipts::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent 0,
transparent 3px,
rgba(26, 24, 20, 0.012) 3px,
rgba(26, 24, 20, 0.012) 4px
);
pointer-events: none;
}
/* Connector lines SVG — full-bleed inside the panel, sits behind cards */
.receipts__lines {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
}
.rline {
/* Each line draws itself once class is added by JS */
stroke-dasharray: 280;
stroke-dashoffset: 280;
transition: stroke-dashoffset 0.7s var(--ease-out), opacity 0.4s var(--ease-out);
}
.receipts.is-building .rline.is-drawn {
stroke-dashoffset: 0;
opacity: 0.32;
}
/* Each message — base styles */
.rmsg {
position: relative;
z-index: 2;
background: var(--cream);
border: 1px solid rgba(26, 24, 20, 0.16);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
/* Default: invisible, slightly down */
opacity: 0;
transform: translateY(10px);
transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
max-width: 100%;
box-shadow: 0 4px 14px -10px rgba(26, 24, 20, 0.18);
}
.rmsg.is-shown { opacity: 1; transform: translateY(0); }
.rmsg.is-faded { opacity: 0.55; } /* once a child has spawned, parent dims slightly */
/* Origin message is the only one that sits on cream BG and reads as
a "card" — its solid var(--ink) background should match the rest of
the dark sections (Selected Work, Manifesto). Don't let it fade
when children spawn — that creates a "light black" effect from
the cream bleeding through. */
.rmsg--origin.is-faded { opacity: 1; }
/* Origin message — spans both columns, centered */
.rmsg--origin {
grid-column: 1 / -1;
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
padding: 16px 18px;
box-shadow: 0 8px 24px -12px rgba(26, 24, 20, 0.4);
justify-self: center;
max-width: 480px;
width: 100%;
}
/* Forward messages — alternating column placement is set per-rid below.
data-rid 1, 2 go in column 1 (left branch).
data-rid 3, 4 go in column 2 (right branch). */
.rmsg[data-rid="1"] { grid-column: 1 / 2; grid-row: 2; }
.rmsg[data-rid="2"] { grid-column: 1 / 2; grid-row: 3; margin-left: 24px; }
.rmsg[data-rid="3"] { grid-column: 2 / 3; grid-row: 2; }
.rmsg[data-rid="4"] { grid-column: 2 / 3; grid-row: 3; margin-left: 24px; }
/* Message header strip */
.rmsg__head {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--ink-2);
flex-wrap: wrap;
}
.rmsg--origin .rmsg__head { color: rgba(241, 234, 224, 0.7); }
.rmsg__avatar {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--terra);
color: var(--cream);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 2px;
}
.rmsg__name { font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.rmsg--origin .rmsg__name { color: var(--cream); }
.rmsg__sep { opacity: 0.5; }
.rmsg__channel { color: var(--terra); font-weight: 500; }
.rmsg__time {
margin-left: auto;
opacity: 0.55;
font-size: 9px;
letter-spacing: 0.1em;
white-space: nowrap;
}
.rmsg__kind {
background: var(--cream-2);
color: var(--ink-2);
padding: 1px 5px;
border-radius: 3px;
font-size: 9px;
letter-spacing: 0.16em;
font-weight: 600;
}
/* Message body */
.rmsg__body {
font-size: 13px;
line-height: 1.5;
color: var(--ink);
margin: 0;
}
.rmsg--origin .rmsg__body {
color: var(--cream);
font-size: 14px;
}
.rmsg__quote {
display: inline-block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--terra);
margin-right: 4px;
vertical-align: 1px;
}
/* Attachment chip */
.rmsg__attach {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 5px 9px 5px 7px;
background: rgba(241, 234, 224, 0.1);
border: 1px solid rgba(241, 234, 224, 0.2);
border-radius: 6px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.04em;
color: rgba(241, 234, 224, 0.85);
width: fit-content;
}
.rmsg__attach svg {
width: 12px; height: 12px;
color: var(--terra);
}
/* Resolve at the bottom — fades in after all 5 messages settle */
.receipts__resolve {
grid-column: 1 / -1;
margin-top: 12px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
position: relative;
z-index: 2;
text-align: center;
}
.receipts.is-resolved .receipts__resolve {
opacity: 1;
transform: translateY(0);
}
.receipts__rule {
display: block;
width: 36px;
height: 1px;
background: var(--terra);
margin: 0 auto 18px;
}
.receipts__resolve-line {
font-family: var(--serif);
font-size: clamp(22px, 2vw, 30px);
line-height: 1.25;
color: var(--ink);
letter-spacing: -0.015em;
font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400;
margin: 0 0 8px;
}
.receipts__resolve-line em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.receipts__resolve-cap {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink-2);
text-transform: uppercase;
margin: 0;
}
@media (max-width: 900px) {
.receipts {
grid-template-columns: 1fr;
padding: 24px 20px;
/* Shrink desktop's 540px minimum so the panel hugs the 5 stacked
message cards at their natural height instead of leaving a
~200px void below them. */
min-height: 0;
}
.rmsg--origin { max-width: 100%; }
.rmsg[data-rid="1"], .rmsg[data-rid="2"],
.rmsg[data-rid="3"], .rmsg[data-rid="4"] {
grid-column: 1 / -1;
grid-row: auto;
margin-left: 16px;
}
/* On mobile, hide the connector lines — too tight to be legible */
.receipts__lines { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.rmsg { opacity: 1 !important; transform: none !important; }
.rline { stroke-dashoffset: 0 !important; opacity: 0.32 !important; }
.receipts__resolve { opacity: 1 !important; transform: none !important; }
}
.lanes__closer {
max-width: 820px;
margin: 100px auto 0;
text-align: center;
position: relative;
padding: 0 24px;
}
/* Tiny owl character above the rule. Two-phase animation:
PHASE 1 (0 → 2.4s): owl WALKS in from the left with alternating
leg motion and body bob — same energy as the
circles closer's walking owl.
PHASE 2 (2.4s+): owl settles into a periodic lunge + arrow flash
loop — narrates "actively DRIVES them". */
.lanes__closer-owl {
/* Wider container so the forward-arrow has room to appear without
getting clipped. The owl itself stays the same visual size — the
extra width is whitespace + arrow. */
width: 92px;
height: auto;
margin: 0 auto 22px;
display: block;
/* Start off-screen to the left, faded out. .is-in triggers the
walk-in via the lc-walk-in animation below. */
opacity: 0;
transform: translateX(-120px);
}
.lanes__closer.is-in .lanes__closer-owl {
/* Walk in over 2.4s (forwards = stays at end state).
Then idle bob / lunge takes over via the inner SVG groups. */
animation: lc-walk-in 2.4s cubic-bezier(0.4, 0, 0.4, 1) forwards;
}
@keyframes lc-walk-in {
0% { opacity: 0; transform: translateX(-120px); }
10% { opacity: 1; }
100% { opacity: 1; transform: translateX(0); }
}
.lc-owl-svg {
width: 100%;
height: auto;
display: block;
}
/* PHASE 1: legs alternate during the walk-in (0 → 2.4s).
PHASE 2: legs hold still (handled by `forwards` ending at 0deg). */
.lc-leg {
transform-box: fill-box;
transform-origin: 50% 0%;
}
.lanes__closer.is-in .lc-leg--left {
animation: lc-walk-leg-l 0.5s ease-in-out 6, lc-leg-rest 0.001s linear 3s forwards;
}
.lanes__closer.is-in .lc-leg--right {
animation: lc-walk-leg-r 0.5s ease-in-out 6, lc-leg-rest 0.001s linear 3s forwards;
}
@keyframes lc-walk-leg-l {
0%, 100% { transform: rotate(-16deg); }
50% { transform: rotate( 16deg); }
}
@keyframes lc-walk-leg-r {
0%, 100% { transform: rotate( 16deg); }
50% { transform: rotate(-16deg); }
}
@keyframes lc-leg-rest {
to { transform: rotate(0deg); }
}
/* PHASE 1: subtle bob during walk-in (small body bounce per step).
PHASE 2: lunge animation kicks in after 2.4s delay. */
.lc-owl-body {
transform-origin: 50% 100%;
transform-box: fill-box;
/* Two animations: walk-bob plays during 0-2.4s, then lunge takes over */
animation:
lc-walk-bob 0.5s ease-in-out 5,
lc-lunge 4.2s cubic-bezier(0.34, 1.4, 0.5, 1) 2.5s infinite;
}
@keyframes lc-walk-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@keyframes lc-lunge {
0%, 55% {
transform: translate(0, 0) rotate(0deg);
}
62% {
transform: translate(0, -2px) rotate(-6deg); /* gather: lean back slightly */
}
70% {
transform: translate(6px, -5px) rotate(10deg); /* lunge forward */
}
78% {
transform: translate(3px, -2px) rotate(6deg); /* hold the pose */
}
88%, 100% {
transform: translate(0, 0) rotate(0deg); /* settle */
}
}
/* Forward arrow flashes in during the lunge (PHASE 2 only).
Delayed 2.5s so it doesn't appear during the walk-in. */
.lc-arrow {
opacity: 0;
animation: lc-arrow 4.2s cubic-bezier(0.4, 0, 0.4, 1) 2.5s infinite;
}
@keyframes lc-arrow {
0%, 60% {
opacity: 0;
transform: translateX(-4px);
}
72% {
opacity: 1;
transform: translateX(2px);
}
82% {
opacity: 1;
transform: translateX(2px);
}
92%, 100% {
opacity: 0;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.lanes__closer.is-in .lanes__closer-owl,
.lanes__closer.is-in .lc-leg,
.lc-owl-body, .lc-arrow { animation: none; }
.lanes__closer.is-in .lanes__closer-owl { opacity: 1; transform: none; }
.lc-arrow { opacity: 0; } /* hide arrow if motion is off */
}
.lanes__closer-rule {
display: block;
width: 60px;
height: 1px;
background: var(--terra);
margin: 0 auto 32px;
}
.lanes__closer-text {
font-family: var(--serif);
font-size: clamp(26px, 2.6vw, 38px);
line-height: 1.40;
color: var(--ink);
letter-spacing: -0.01em;
font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400;
margin: 0;
}
.lanes__closer-break {
display: inline;
}
@media (min-width: 720px) {
.lanes__closer-break {
display: block;
height: 0;
}
}
/* "support" — the rejected verb. Italic, dimmed. No decoration —
the dimmed color and italic carry the meaning without the wavy
strikethrough that was causing alignment problems. */
.lanes__closer-strike {
font-style: italic;
color: color-mix(in srgb, var(--ink) 50%, var(--cream));
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
/* "drives" — the affirmed verb. Italic, terra, slightly bolder.
The terra color + italic + weight does the emphasis work; no
need for an underline that fights the italic baseline. */
.lanes__closer-drive {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500;
}
/* ============================================================
WHY THIS WORKS — the trust argument
============================================================
An editorial section: headline, four-column method row, full-bleed
terra Gartner panel as a visual rupture, the AI stance, and a
closing payoff line. No icons, no decorative SVGs — type, color,
and rhythm only. Editorial, not infographic. */
.why {
background: var(--cream-2);
padding: var(--section-pad) 0 0;
position: relative;
overflow: hidden;
}
/* === HEAD === */
.why__head {
max-width: 1080px;
margin: 0 auto 80px;
padding: 0 var(--px);
text-align: center;
position: relative;
}
/* Section-opening rule: a substantial terra horizontal rule with a
centered dot ornament — typographic weight that announces "new
chapter starts here". Combined with the cream-2 background tone
shift, this gives a clear transition signal that's impossible to
miss without being heavy-handed. Draws on as the section enters
viewport. */
.why__head::before {
content: "";
display: block;
width: 160px;
height: 1px;
background: var(--terra);
margin: 0 auto 14px;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.why__head::after {
content: "";
display: block;
width: 7px;
height: 7px;
background: var(--terra);
border-radius: 50%;
margin: 0 auto 30px;
opacity: 0;
transform: scale(0.4);
transition: opacity 0.5s var(--ease-out) 0.55s, transform 0.5s var(--ease-out) 0.55s;
}
.why__head.is-in::before {
transform: scaleX(1);
}
.why__head.is-in::after {
opacity: 1;
transform: scale(1);
}
/* Eyebrow — staggered in after the rule */
.why__head .section-label {
margin-bottom: 24px;
transition-delay: 0.25s;
}
/* Open-book mascot ————————————————————
Sits centered above the why__title. Right page tilts up like a
page being turned, then settles. Different character (book) and
different effect (page flip on its hinge) from the typewriter and
pencil. Editorial-themed: "informed professionals" read books. */
.why__title-book {
display: block;
width: 64px;
height: 40px;
margin: 8px auto 22px;
}
.wt-book-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.wt-book-rpage {
/* Right page hinges on the spine (x=32 in a 64-wide viewBox).
scaleX pivoted at the spine creates the page-flip illusion: the
page narrows toward the spine, then snaps back. Reliable across
browsers (rotateY needs SVG perspective which is fiddly). */
transform-origin: 32px 21px;
transform-box: view-box;
animation: wt-flip 4.6s cubic-bezier(0.55, 0, 0.4, 1) infinite;
}
@keyframes wt-flip {
0%, 55%, 100% { transform: scaleX(1); }
64% { transform: scaleX(0.85); }
72% { transform: scaleX(0.18); } /* page nearly closed */
82% { transform: scaleX(0.85); }
90% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.wt-book-rpage { animation: none; }
}
.why__title {
font-family: var(--serif);
font-size: clamp(36px, 5vw, 76px);
line-height: 1.08;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
font-weight: 400;
margin: 0 auto 36px;
max-width: 22ch;
transition-delay: 0.45s;
}
.why__title em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.why__rule {
display: inline-block;
width: 60px;
height: 1px;
background: var(--terra);
margin-top: 4px;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.9s var(--ease-out) 0.65s;
}
.why__rule.is-in,
.reveal.is-in .why__rule { transform: scaleX(1); }
/* === FOUR-COLUMN METHOD ROW === */
/* === FOUR-COLUMN METHOD ROW ===
Editorial layout: huge italic serif numbers act as the visual
anchor for each card (echoing the Gartner 50% stat treatment).
No hard hairline dividers — whitespace is the separator. Each
card cascades in with staggered reveal so the row reads as a
sequence, not a static grid. */
.why__method {
max-width: 1280px;
margin: 0 auto 120px;
padding: 0 var(--px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 3vw, 56px);
position: relative;
}
.why__col {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
/* Stagger reveal — each card eases in after the section settles */
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.why__method.is-in .why__col:nth-child(1) { transition-delay: 0.10s; opacity: 1; transform: translateY(0); }
.why__method.is-in .why__col:nth-child(2) { transition-delay: 0.22s; opacity: 1; transform: translateY(0); }
.why__method.is-in .why__col:nth-child(3) { transition-delay: 0.34s; opacity: 1; transform: translateY(0); }
.why__method.is-in .why__col:nth-child(4) { transition-delay: 0.46s; opacity: 1; transform: translateY(0); }
/* THE NUMBER — italic terra serif. Reduced from 64-104px to a more
measured size so it anchors each column without dominating the
labels. Per Tanisha's note: "dominated by numbers and not the
underneath content". The number is still the visual landmark, just
no longer twice as big as everything else. */
.why__col-num {
font-family: var(--serif);
font-style: italic;
font-size: clamp(38px, 3.6vw, 56px);
line-height: 0.85;
letter-spacing: -0.03em;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
font-weight: 400;
display: block;
margin: 0 0 6px;
}
/* HAND-DRAWN ICON — small terra line-art at the top of each column.
Each represents the pillar concept (winding path / Venn / magnifier
/ checkmark). Strokes draw in via stroke-dashoffset when the section
reveals; the section's :nth-child stagger handles per-column timing. */
.why__col-icon {
width: 56px;
height: 32px;
display: block;
order: -1; /* sits above the number */
margin-bottom: 4px;
transition: transform 0.5s var(--ease-out);
}
.why__col-icon svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.why__col-icon svg > * {
/* pathLength="100" on each shape normalizes the stroke distance
so dashoffset 100 → 0 produces a consistent draw-in regardless
of whether the shape is a small line, a circle, or a curved path. */
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 1.1s var(--ease-out);
}
/* When the section is revealed, paths/circles draw on. Each column's
:nth-child reveal stagger means icons cascade across the row. */
.why__method.is-in .why__col-icon svg > * {
stroke-dashoffset: 0;
}
/* Filled circles in the path-icon (waypoint dots) shouldn't try to
stroke-draw — they're solid fills. Override to fade them in instead. */
.why__col:nth-child(1) .why__col-icon svg circle {
stroke-dasharray: none;
stroke-dashoffset: 0;
opacity: 0;
transition: opacity 0.5s var(--ease-out);
}
.why__method.is-in .why__col:nth-child(1) .why__col-icon svg circle {
opacity: 1;
transition-delay: 0.6s;
}
/* Short terra rule beneath the number — visual breath between the
anchor number and the title. */
.why__col::before {
content: "";
display: block;
width: 36px;
height: 1px;
background: var(--terra);
opacity: 0.55;
order: 1;
margin: 4px 0 6px;
}
.why__col-num { order: 0; }
.why__col-title { order: 2; }
.why__col-text { order: 3; }
.why__col-title {
font-family: var(--serif);
/* Slightly larger and a touch heavier so the labels share weight
with the (now smaller) numbers rather than feeling like footnotes. */
font-size: clamp(21px, 1.85vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 480;
font-weight: 500;
margin: 0;
color: var(--ink);
}
.why__col-text {
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
max-width: 30ch;
}
/* Hover: gentle lift + icon nudge. Adds tactility, signals these are
distinct pillars worth dwelling on. */
.why__col {
transition: transform 0.5s var(--ease-out), opacity 0.7s var(--ease-out);
}
.why__col:hover {
transform: translateY(-4px);
}
.why__col:hover .why__col-icon {
transform: rotate(-2deg) scale(1.06);
}
/* === STRATEGY INTRO === Single editorial line that introduces the
four pillars below. Sits centered, between the headline and the
method row. Italic terra serif so it ties to the section voice. */
.why__strategy-intro {
max-width: 1280px;
margin: -40px auto 56px;
padding: 0 var(--px);
font-family: var(--serif);
font-style: italic;
font-size: clamp(20px, 2vw, 30px);
line-height: 1.3;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
text-align: center;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.why__strategy-intro.is-in {
opacity: 1;
transform: translateY(0);
}
/* === LEAN MODE === When method has only labels (no body text), tighten
vertical rhythm so the four columns feel light and connected to the
intro line above. */
.why__method--lean {
margin-bottom: 96px;
}
.why__method--lean .why__col {
gap: 10px;
}
.why__method--lean .why__col-title {
max-width: 18ch;
}
@media (max-width: 900px) {
.why__method { grid-template-columns: repeat(2, 1fr); gap: 48px; }
}
@media (max-width: 560px) {
.why__method { grid-template-columns: 1fr; gap: 40px; }
.why__col-num { font-size: 48px; }
}
/* === GARTNER PANEL — the rupture === */
/* Full-bleed terra block. Cream text. The stat is the focal point. */
.why__gartner {
width: 100%;
background: var(--terra);
color: var(--cream);
padding: clamp(64px, 9vw, 140px) var(--px);
margin-bottom: 0;
position: relative;
overflow: hidden;
}
/* Subtle texture — same scan-line family used elsewhere on cream panels,
here on the terra ground for visual cohesion across the page. */
.why__gartner::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent 0,
transparent 4px,
rgba(0, 0, 0, 0.03) 4px,
rgba(0, 0, 0, 0.03) 5px
);
pointer-events: none;
}
.why__gartner-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(280px, 0.8fr) 1.4fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
position: relative;
z-index: 1;
}
.why__gartner-stat {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 500;
font-weight: 500;
display: flex;
align-items: baseline;
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--cream);
}
.why__gartner-num {
font-size: clamp(120px, 18vw, 280px);
display: inline-block;
font-variant-numeric: tabular-nums;
}
.why__gartner-percent {
font-size: clamp(60px, 9vw, 140px);
margin-left: 4px;
opacity: 0.85;
}
.why__gartner-text {
display: flex;
flex-direction: column;
gap: 24px;
}
.why__gartner-claim {
font-family: var(--serif);
font-size: clamp(22px, 2.4vw, 36px);
line-height: 1.3;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 400;
margin: 0;
color: var(--cream);
max-width: 26ch;
}
.why__gartner-claim em {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
/* slight cream-shift via opacity rather than color — keeps in palette */
opacity: 0.9;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 6px;
text-decoration-color: rgba(241, 234, 224, 0.6);
}
.why__gartner-source {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(241, 234, 224, 0.75);
margin: 0;
display: inline-flex;
align-items: center;
gap: 12px;
}
.why__gartner-source-rule {
display: inline-block;
width: 24px;
height: 1px;
background: rgba(241, 234, 224, 0.5);
}
@media (max-width: 900px) {
.why__gartner-inner {
grid-template-columns: 1fr;
gap: 24px;
text-align: left;
}
.why__gartner-num { font-size: clamp(120px, 36vw, 200px); }
.why__gartner-percent { font-size: clamp(60px, 18vw, 100px); }
}
/* === STANCE — three lines on cream below the rupture === */
/* The stance lines now render as a contained editorial card — a cream
panel sitting on the surrounding cream-2 wash, defined by a thin
terra hairline border, a soft drop shadow, and a small terra dot
ornament at the top edge. Per Tanisha's feedback: 'a bit of contrast
like a box' so the AI position lands as a deliberate statement
rather than floating prose. */
.why__stance {
background: var(--cream);
padding: clamp(72px, 7vw, 104px) clamp(36px, 5vw, 72px) clamp(48px, 5vw, 84px);
text-align: center;
max-width: 780px;
margin: clamp(80px, 9vw, 120px) auto;
border: 1px solid rgba(210, 73, 46, 0.22);
border-radius: 4px;
box-shadow:
0 1px 0 rgba(26, 24, 20, 0.04),
0 28px 60px -40px rgba(26, 24, 20, 0.22);
position: relative;
}
/* Top terra dot ornament — orbits the card's perimeter clockwise on
a slow 12s cycle. Starts top-left, traverses top → right → bottom →
left, returns to start. Half on / half off the edge throughout, so
it always looks like it's "riding" the card's boundary.
Sized at 16px (was 9px) so it actually reads as a deliberate
editorial mark rather than a stray pixel. */
.why__stance::before {
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--terra);
box-shadow: 0 0 0 5px var(--cream-2);
animation: orbit-dot 12s linear infinite;
z-index: 1; /* keep dot above the card border, below eyebrow pill */
}
@keyframes orbit-dot {
0% { top: -8px; left: -8px; } /* TL corner */
25% { top: -8px; left: calc(100% - 8px); } /* TR corner */
50% { top: calc(100% - 8px); left: calc(100% - 8px); } /* BR corner */
75% { top: calc(100% - 8px); left: -8px; } /* BL corner */
100% { top: -8px; left: -8px; } /* back to TL */
}
@media (prefers-reduced-motion: reduce) {
.why__stance::before {
animation: none;
/* Park it at the top-left corner for the static look — out of the
way of the eyebrow pill at top-center. */
top: -8px;
left: clamp(20px, 6vw, 56px);
transform: none;
}
}
/* Editorial chrome — eyebrow pill + giant opening quote-mark.
Together they lift the stance card from "polite boxed quote" to
"deliberate editorial column", without overpowering the two lines
that are the real content. Both sit above the orbit dot in z-index
so the dot passes under them as it traverses the perimeter. */
.stance-eyebrow {
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, -50%);
background: var(--cream);
padding: 6px 14px;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terra);
border: 1px solid rgba(210, 73, 46, 0.4);
border-radius: 999px;
z-index: 2;
white-space: nowrap;
}
.stance-quote-mark {
position: absolute;
top: clamp(36px, 4.5vw, 64px);
left: clamp(28px, 4vw, 56px);
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: clamp(96px, 14vw, 180px);
line-height: 0.6;
color: var(--terra);
opacity: 0.55;
pointer-events: none;
user-select: none;
z-index: 2;
}
.why__stance-line {
margin: 0;
font-family: var(--serif);
letter-spacing: -0.01em;
}
/* Lightbulb mascot inside the AI stance card ————————————————————
A small terra lightbulb with three pulsing rays above it. Reinforces
the stance: AI used as a tool of insight ("we use AI smartly") rather
than as a replacement. Different character (lightbulb) and different
effect (radial pulse) from every other mascot on the site. */
.why__stance-bulb {
width: 76px;
height: 84px;
margin: 0 auto 22px;
display: block;
}
.ai-bulb-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Bulb glass softly glows — opacity pulses on the same beat as the
rays so the whole "idea moment" syncs. */
.ai-bulb-glass {
transform-origin: center;
transform-box: fill-box;
animation: ai-bulb-glow 3.2s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes ai-bulb-glow {
0%, 70%, 100% { fill: var(--cream); }
35% { fill: #FAE8C9; } /* warm amber wash on the idea beat */
55% { fill: var(--cream); }
}
/* Three idea-rays radiate from above the bulb, staggered by 0.1s each
so they read as a cascade rather than a single flash. */
.ai-ray {
stroke-dasharray: 16;
stroke-dashoffset: 16;
animation: ai-ray-pulse 3.2s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
.ai-ray--top { animation-delay: 0s; }
.ai-ray--tl { animation-delay: 0.10s; }
.ai-ray--tr { animation-delay: 0.20s; }
@keyframes ai-ray-pulse {
0%, 65%, 100% { stroke-dashoffset: 16; opacity: 0; }
30% { stroke-dashoffset: 0; opacity: 1; }
50% { stroke-dashoffset: 0; opacity: 1; }
60% { stroke-dashoffset: 16; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ai-bulb-glass, .ai-ray { animation: none; }
.ai-ray { stroke-dashoffset: 0; opacity: 0.6; }
}
.why__stance-line--1 {
font-size: clamp(18px, 1.6vw, 22px);
color: var(--ink-2);
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400;
margin-bottom: 10px;
}
.why__stance-line--1 em {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.why__stance-line--2 {
font-size: clamp(26px, 3vw, 42px);
color: var(--ink);
line-height: 1.18;
font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400;
}
.why__stance-line--2 em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.why__stance-line--3 {
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.55;
color: var(--ink-2);
font-family: var(--sans);
font-variation-settings: normal;
letter-spacing: 0;
max-width: 56ch;
margin: 0 auto;
}
/* === CLOSING PAYOFF === */
.why__payoff {
padding: 60px var(--px) var(--section-pad);
text-align: center;
max-width: 880px;
margin: 0 auto;
}
/* Tiny owl character with two flanking terra dots. The dots alternately
pulse outward on a 4s cycle — each pulse lands a 'compounds into...'
beat. The owl's pupils track to whichever dot is pulsing, so it
reads as the owl watching the trust → deals accumulation happen.
Distinct vocabulary from lanes-closer owl (which bobs vertically). */
/* Growing tree mascot — replaces the owl+rings.
Trunk draws upward, two branches stagger out from the trunk, three
leaves pop in with overshoot. Cycle: 5s. After leaves are full the
tree holds, then everything fades and resets. The whole shape narrates
"compounds into trust → compounds into deals" as organic sequential
growth. */
.why__payoff-tree {
width: 88px;
height: 110px;
margin: 0 auto 18px;
display: block;
}
.wp-tree-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.wp-tree-trunk {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: wp-tree-trunk 5s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes wp-tree-trunk {
0%, 5% { stroke-dashoffset: 50; opacity: 1; }
22% { stroke-dashoffset: 0; }
88% { stroke-dashoffset: 0; opacity: 1; }
96% { opacity: 0; }
100% { stroke-dashoffset: 50; opacity: 0; }
}
.wp-tree-branch {
stroke-dasharray: 28;
stroke-dashoffset: 28;
animation: wp-tree-branch 5s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
.wp-tree-branch--1 { animation-delay: 0.4s; }
.wp-tree-branch--2 { animation-delay: 0.6s; }
@keyframes wp-tree-branch {
0%, 18% { stroke-dashoffset: 28; opacity: 1; }
35% { stroke-dashoffset: 0; }
86% { stroke-dashoffset: 0; opacity: 1; }
94% { opacity: 0; }
100% { stroke-dashoffset: 28; opacity: 0; }
}
/* Leaves pop in with bounce — bright moment in the cycle */
.wp-tree-leaf {
transform-origin: center;
transform-box: fill-box;
transform: scale(0);
animation: wp-tree-leaf 5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.wp-tree-leaf--1 { animation-delay: 0.9s; }
.wp-tree-leaf--2 { animation-delay: 1.2s; }
.wp-tree-leaf--3 { animation-delay: 1.5s; }
@keyframes wp-tree-leaf {
0%, 25% { transform: scale(0); opacity: 0; }
40% { transform: scale(1.2); opacity: 1; }
50% { transform: scale(1); }
85% { transform: scale(1); opacity: 1; }
94% { opacity: 0; }
100% { transform: scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.wp-tree-trunk, .wp-tree-branch, .wp-tree-leaf { animation: none; }
.wp-tree-trunk, .wp-tree-branch { stroke-dashoffset: 0; }
.wp-tree-leaf { transform: scale(1); }
}
.why__payoff-rule {
display: block;
width: 60px;
height: 1px;
background: var(--terra);
margin: 0 auto 36px;
}
.why__payoff-text {
font-family: var(--serif);
font-size: clamp(24px, 2.6vw, 38px);
line-height: 1.35;
color: var(--ink);
letter-spacing: -0.015em;
font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 400;
margin: 0;
}
.why__payoff-text em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
/* ============================================================
FIVE CIRCLES — methodology as brand metaphor
============================================================
The strongest move per the brief: concentric rings = owl vision =
our way of seeing through noise. Pinned section while scroll
advances through 5 stops; rings expand outward, content slot-reels.
Outer container = (100vh + 5 × 100vh stops) tall. Sticky inner
stage stays pinned for the full duration. JS reads scroll progress
inside the section and toggles state classes (.is-stop-N) on
.circles__sticky to drive everything visually. */
.circles {
background: var(--cream);
position: relative;
/* No vertical padding — the stage is its own viewport */
}
/* Outer container provides scroll distance. Total = 100vh (initial pin
landing) + 5 × 100vh (one viewport per stop). */
.circles__outer {
position: relative;
/* 100vh sticky stage + 350vh of scroll distance = 5 stages of 70vh each.
Brisk: about 1–1.5 seconds of trackpad scroll per stage at typical pace. */
height: 450vh;
}
/* Sticky stage — pins to viewport while user scrolls inside .circles__outer */
.circles__sticky {
position: sticky;
top: 0;
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
padding: clamp(64px, 8vh, 120px) var(--px) clamp(40px, 6vh, 80px);
overflow: hidden;
}
/* === SECTION HEADER === */
.circles__head {
text-align: center;
margin-bottom: clamp(20px, 3vh, 40px);
}
.circles__head .section-label {
margin-bottom: 14px;
}
.circles__title {
font-family: var(--serif);
font-size: clamp(32px, 4vw, 60px);
line-height: 1.06;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
font-weight: 400;
margin: 0;
/* Cap width and allow wrapping so the headline can never exceed the
viewport on narrow screens. Without this cap, the head's grid track
was being sized to the title's intrinsic min-content (420px) which
overflowed a 375px mobile viewport. */
max-width: min(900px, 100%);
margin-left: auto;
margin-right: auto;
word-wrap: break-word;
overflow-wrap: break-word;
}
.circles__title em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
/* === TWO-COLUMN STAGE === */
.circles__stage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
max-width: 1480px;
margin: 0 auto;
width: 100%;
height: 100%;
min-height: 0;
}
/* === LEFT COLUMN — DIAGRAM === */
.circles__diagram {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
height: 100%;
min-height: 0;
}
.circles__svg {
width: clamp(360px, 42vh, 580px);
height: clamp(360px, 42vh, 580px);
max-width: 100%;
overflow: visible;
}
/* Five Circles uses three CSS custom properties driven by JS:
--pact-N (panel activeness, 0..1) → drives right-side panel + dots + marker
Per-sphere --sphere-scale and container --tilt-x/y are set inline by JS. */
.circles__sticky {
--pact-1: 1; --pact-2: 0; --pact-3: 0; --pact-4: 0; --pact-5: 0;
}
/* === LEFT COLUMN — circle tunnel (offmenu-style stack) === */
.circles__diagram {
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
position: relative;
}
.ctunnel {
position: relative;
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
/* Container holds all spheres at the same grid cell. JS sets --tilt-x/y
based on scroll velocity for the dolly-through-tunnel feel. */
.ctunnel__container {
position: relative;
/* Was clamp(420px, 56vh, 640px) — 420px hard floor overflowed
375px-wide phones. Use min() to keep within viewport AND keep
the desktop sizing intact. */
width: min(96vw, clamp(280px, 56vh, 640px));
height: min(96vw, clamp(280px, 56vh, 640px));
display: grid;
place-items: center;
--tilt-x: 0px;
--tilt-y: 0px;
--container-scale: 1;
transform:
scale(var(--container-scale))
translate3d(var(--tilt-x), var(--tilt-y), 0);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Layer: all spheres stack at grid-area "layer" — same cell, same point.
This is the offmenu trick. Each sphere is independently scaled. */
.ctunnel__layer {
position: relative;
width: 100%;
height: 100%;
display: grid;
grid-template-areas: "layer";
place-items: center;
}
/* Each sphere lives at the same grid cell. JS controls --sphere-scale
(0..1) for opacity-only fade; CSS classes drive scribble + scale.
The whole sphere fades opacity 0↔1 based on .is-focal; the masked
image inside reveals via animated stroke-dashoffset (scribble-in). */
.ctunnel__sphere {
grid-area: layer;
position: relative;
width: clamp(320px, 46vh, 520px);
height: clamp(320px, 46vh, 520px);
opacity: 0;
/* Single timing for the whole sphere — matches the inner image's
opacity transition so there's no temporal mismatch causing
jumpiness during stage changes. */
transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity;
pointer-events: none;
}
.ctunnel__sphere.is-focal {
opacity: 1;
}
/* Soft terra glow behind the illustration — no hard border, no rotating
ring. Just a warm radial wash that suggests "field of attention"
without competing with the line drawing on top. Visible on focal. */
.ctunnel__plate {
position: absolute;
inset: -8%; /* slightly larger than the panel so it haloes */
border-radius: 50%;
background: radial-gradient(
circle at 50% 45%,
color-mix(in srgb, var(--terra) 11%, transparent) 0%,
color-mix(in srgb, var(--terra) 6%, transparent) 35%,
color-mix(in srgb, var(--terra) 2%, transparent) 60%,
transparent 78%
);
z-index: 0;
opacity: 0;
transform: scale(0.92);
transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.ctunnel__sphere.is-focal .ctunnel__plate {
opacity: 1;
transform: scale(1);
}
/* Square art panel — sits on top of the plate, holds the masked image */
.ctunnel__art {
position: absolute;
inset: 0;
z-index: 1;
}
.ctunnel__art img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
/* Smoothness fix: previously 4 simultaneous animations (opacity, scale,
blur, mask) caused jumpiness when scrolling between stages quickly.
Now just a clean opacity cross-fade with a longer easing curve.
The mask scribble below provides the "drawing" feel; this layer
just smoothly cross-fades behind it. */
opacity: 0;
transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.ctunnel__sphere.is-focal .ctunnel__art img {
opacity: 1;
}
/* === SCRIBBLE-IN === The headline animation.
The image is masked by an SVG mask of 5 wavy white strokes. Each
stroke has stroke-dashoffset = path length (so strokes start
invisible, image fully hidden behind black mask). When JS sets
data-active="1" on the strokes group, dashoffset transitions to 0
— strokes "draw on", revealing the image band by band.
Strokes stagger 0.10s apart so it reads as sequential sketching
rather than a single wipe. Total reveal: ~1.25s. */
.ctunnel__draw-strokes path {
stroke-dasharray: 1.6;
stroke-dashoffset: 1.6; /* fully hidden by default */
transition: stroke-dashoffset 0.85s cubic-bezier(0.4, 0, 0.55, 1);
transition-delay: 0s;
}
.ctunnel__draw-strokes[data-active="1"] path {
stroke-dashoffset: 0;
}
.ctunnel__draw-strokes[data-active="1"] path:nth-of-type(2) { transition-delay: 0.10s; }
.ctunnel__draw-strokes[data-active="1"] path:nth-of-type(3) { transition-delay: 0.20s; }
.ctunnel__draw-strokes[data-active="1"] path:nth-of-type(4) { transition-delay: 0.30s; }
.ctunnel__draw-strokes[data-active="1"] path:nth-of-type(5) { transition-delay: 0.40s; }
/* Bottom-right progress dots — each fills per --pact-N */
.ctunnel__dots {
position: absolute;
bottom: 8px;
right: 8px;
display: flex;
gap: 10px;
pointer-events: none;
z-index: 5;
}
.ctunnel__dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
background: transparent;
transition: background 0.4s, border-color 0.4s, transform 0.4s;
}
.ctunnel__dot[data-dnum="1"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-1) * 100%), transparent);
transform: scale(calc(1 + var(--pact-1) * 0.3));
}
.ctunnel__dot[data-dnum="2"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-2) * 100%), transparent);
transform: scale(calc(1 + var(--pact-2) * 0.3));
}
.ctunnel__dot[data-dnum="3"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-3) * 100%), transparent);
transform: scale(calc(1 + var(--pact-3) * 0.3));
}
.ctunnel__dot[data-dnum="4"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-4) * 100%), transparent);
transform: scale(calc(1 + var(--pact-4) * 0.3));
}
.ctunnel__dot[data-dnum="5"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-5) * 100%), transparent);
transform: scale(calc(1 + var(--pact-5) * 0.3));
}
/* Stage marker — mono "01 / FIVE" sits at the upper-left corner of focal sphere */
.ctunnel__marker {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-110%, -250%);
font-family: var(--mono);
font-size: clamp(11px, 1vw, 13px);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2);
display: flex;
align-items: baseline;
gap: 8px;
pointer-events: none;
white-space: nowrap;
}
.ctunnel__marker-num {
position: relative;
color: var(--terra);
font-weight: 600;
transition: opacity 0.4s;
}
/* Stack all numerals at the same point; one is opaque per --pact-N */
.ctunnel__marker-num + .ctunnel__marker-num {
position: absolute;
left: 0;
top: 0;
}
.ctunnel__marker-num[data-mnum="1"] { opacity: var(--pact-1); }
.ctunnel__marker-num[data-mnum="2"] { opacity: var(--pact-2); }
.ctunnel__marker-num[data-mnum="3"] { opacity: var(--pact-3); }
.ctunnel__marker-num[data-mnum="4"] { opacity: var(--pact-4); }
.ctunnel__marker-num[data-mnum="5"] { opacity: var(--pact-5); }
.ctunnel__marker-rule {
margin-left: 28px;
opacity: 0.55;
font-weight: 400;
color: var(--ink-2);
}
/* Bottom-right progress dots — each fills per --pact-N */
.ctunnel__dots {
position: absolute;
bottom: 8px;
right: 8px;
display: flex;
gap: 10px;
pointer-events: none;
z-index: 5;
}
.ctunnel__dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
background: transparent;
transition: background 0.4s, border-color 0.4s, transform 0.4s;
}
.ctunnel__dot[data-dnum="1"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-1) * 100%), transparent);
transform: scale(calc(1 + var(--pact-1) * 0.3));
}
.ctunnel__dot[data-dnum="2"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-2) * 100%), transparent);
transform: scale(calc(1 + var(--pact-2) * 0.3));
}
.ctunnel__dot[data-dnum="3"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-3) * 100%), transparent);
transform: scale(calc(1 + var(--pact-3) * 0.3));
}
.ctunnel__dot[data-dnum="4"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-4) * 100%), transparent);
transform: scale(calc(1 + var(--pact-4) * 0.3));
}
.ctunnel__dot[data-dnum="5"] {
background: color-mix(in srgb, var(--terra) calc(var(--pact-5) * 100%), transparent);
transform: scale(calc(1 + var(--pact-5) * 0.3));
}
/* === RIGHT COLUMN — CONTENT REEL === */
.circles__content {
position: relative;
height: 100%;
min-height: 0;
overflow: hidden;
display: flex;
align-items: center;
}
/* Each content panel stacks absolutely. Per-stop CSS rules below
bind opacity to --pact-N with a hard threshold so only ONE panel
is visible at a time. Inner .line-inner spans translateY based on
continuous --pact-N values so per-line motion is smooth. */
.ccpanel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 0;
pointer-events: none;
opacity: 0;
/* Short transition to soften the threshold "snap" — gives a
subtle 200ms fade rather than a hard pop. */
transition: opacity 0.2s ease-out;
}
/* Per-panel binding: only ONE panel is visible at a time. We use
a sharp threshold via clamp() — when --pact-N is > 0.5, opacity
jumps to 1, otherwise it's 0. This eliminates the visual overlap
that would otherwise happen during crossfades. The line-mask
reveals (below) handle the intra-panel motion smoothly. */
.ccpanel[data-stop="1"] {
opacity: clamp(0, calc((var(--pact-1) - 0.5) * 100), 1);
pointer-events: auto;
}
.ccpanel[data-stop="2"] {
opacity: clamp(0, calc((var(--pact-2) - 0.5) * 100), 1);
pointer-events: auto;
}
.ccpanel[data-stop="3"] {
opacity: clamp(0, calc((var(--pact-3) - 0.5) * 100), 1);
pointer-events: auto;
}
.ccpanel[data-stop="4"] {
opacity: clamp(0, calc((var(--pact-4) - 0.5) * 100), 1);
pointer-events: auto;
}
.ccpanel[data-stop="5"] {
opacity: clamp(0, calc((var(--pact-5) - 0.5) * 100), 1);
pointer-events: auto;
}
/* The right-column container gets a soft top/bottom mask so the
line-reveal text fades into the section edges (offmenu pattern). */
.circles__content {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}
/* === LINE-MASK REVEAL ===
JS wraps key text elements in ….
The outer mask clips overflow; the inner span translateY's. Activeness
var on the parent panel drives the inner translation. */
.line-mask {
display: inline-block;
overflow: hidden;
vertical-align: top;
/* Add a tiny vertical padding+negative-margin so descenders don't get clipped */
padding: 0.18em 0;
margin: -0.18em 0;
line-height: inherit;
}
.line-mask .line-inner {
display: inline-block;
/* Default: fully shifted down (hidden). Active panel sets it to 0. */
transform: translateY(110%);
/* Smooth easing matched to offmenu — slightly bouncy ease-out */
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Each active panel slides its inner spans up to 0%.
Stagger handled by transition-delay per element type. */
.ccpanel[data-stop="1"] .line-inner { transform: translateY(calc((1 - var(--pact-1)) * 110%)); }
.ccpanel[data-stop="2"] .line-inner { transform: translateY(calc((1 - var(--pact-2)) * 110%)); }
.ccpanel[data-stop="3"] .line-inner { transform: translateY(calc((1 - var(--pact-3)) * 110%)); }
.ccpanel[data-stop="4"] .line-inner { transform: translateY(calc((1 - var(--pact-4)) * 110%)); }
.ccpanel[data-stop="5"] .line-inner { transform: translateY(calc((1 - var(--pact-5)) * 110%)); }
/* Stagger via transition-delay per element type — each row in a panel
gets a slightly different delay so they cascade in. */
.ccpanel .ccpanel__index .line-inner { transition-delay: 0ms; }
.ccpanel .ccpanel__title .line-inner { transition-delay: 60ms; }
.ccpanel .ccpanel__lead .line-inner { transition-delay: 120ms; }
.ccpanel .ccpanel__body .line-inner { transition-delay: 180ms; }
.ccpanel .ccpanel__col-h .line-inner { transition-delay: 240ms; }
.ccpanel .ccpanel__list li:nth-child(1) .line-inner { transition-delay: 280ms; }
.ccpanel .ccpanel__list li:nth-child(2) .line-inner { transition-delay: 320ms; }
.ccpanel .ccpanel__list li:nth-child(3) .line-inner { transition-delay: 360ms; }
.ccpanel .ccpanel__list li:nth-child(4) .line-inner { transition-delay: 400ms; }
/* Panel content typography */
.ccpanel__index {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--terra);
font-weight: 600;
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.ccpanel__index::after {
content: "";
width: 36px;
height: 1px;
background: var(--terra);
display: inline-block;
}
.ccpanel__title {
font-family: var(--serif);
font-size: clamp(36px, 4.4vw, 68px);
line-height: 1;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
font-weight: 400;
margin: 0 0 18px;
color: var(--ink);
}
.ccpanel__lead {
font-family: var(--serif);
font-style: italic;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.4;
color: var(--terra);
margin: 0 0 14px;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.ccpanel__body {
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 28px;
max-width: 52ch;
}
.ccpanel__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 20px;
}
@media (max-width: 1100px) {
.ccpanel__cols { grid-template-columns: 1fr; gap: 18px; }
}
.ccpanel__col-h {
font-family: var(--mono);
/* Bumped 10px -> 11px for readability while keeping the small-caps editorial register */
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink);
text-transform: uppercase;
margin: 0 0 12px;
font-weight: 600;
}
.ccpanel__list {
list-style: none;
padding: 0;
margin: 0;
}
.ccpanel__list li {
/* Bumped 14px -> 15.5px and slight line-height bump for easier reading.
Kept under 16px so it still reads as supporting body text rather
than primary content. */
font-size: 15.5px;
line-height: 1.55;
color: var(--ink);
padding-left: 16px;
position: relative;
margin-bottom: 6px;
}
.ccpanel__list li::before {
content: "";
position: absolute;
left: 0; top: 0.7em;
width: 8px;
height: 1px;
background: var(--terra);
}
.ccpanel__col-note {
/* Bumped 12px -> 13px to stay readable while still feeling like a footnote */
font-size: 13px;
line-height: 1.5;
color: var(--ink-2);
font-style: italic;
margin: 12px 0 0;
}
.ccpanel__output {
/* Bumped 14px -> 15.5px to match the list items so the OUTPUT line
reads as a peer of the column content, not a footnote. */
font-size: 15.5px;
line-height: 1.55;
color: var(--ink);
margin: 0;
padding: 14px 16px;
background: rgba(210, 73, 46, 0.06);
border-left: 2px solid var(--terra);
border-radius: 0 6px 6px 0;
/* No flex — keep text inline so doesn't become a separate flex item.
Label is a flow-aligned mono tag that floats inline at the start. */
}
.ccpanel__output em {
font-style: italic;
color: var(--terra);
}
.ccpanel__output-label {
font-family: var(--mono);
/* Bumped from 9px → 11px so the small-caps "OUTPUT" label is
readable across all viewports (was hard to read on mobile). */
font-size: 11px;
letter-spacing: 0.18em;
color: var(--terra);
font-weight: 600;
white-space: nowrap;
margin-right: 12px;
display: inline-block;
vertical-align: 1px;
}
/* === CLOSING LINE === Manifesto moment.
Brand mascot owl above; thesis statement; closing flourish below.
No inline stroke-overlay tricks — everything sits in document flow. */
.circles__closer {
background: var(--cream);
padding: clamp(80px, 10vh, 140px) var(--px) clamp(100px, 12vh, 160px);
text-align: center;
max-width: 920px;
margin: 0 auto;
position: relative;
}
/* Walking character track — full-width strip that hosts the walker. */
.circles__closer-track {
position: relative;
width: 100%;
height: 78px;
margin-bottom: 28px;
pointer-events: none;
}
.circles__closer-walker {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 78px;
transform: translateX(-100px);
opacity: 0;
}
.circles__closer.is-in .circles__closer-walker {
animation: closerWalkAcross 3.2s cubic-bezier(0.4, 0, 0.4, 1) 0.2s forwards;
}
@keyframes closerWalkAcross {
0% { left: 0; transform: translateX(-100px); opacity: 0; }
10% { opacity: 1; }
100% { left: 50%; transform: translateX(-32px); opacity: 1; }
}
.circles__closer-walker-svg {
display: block;
width: 100%;
height: 100%;
color: var(--terra);
overflow: visible;
}
.circles__closer.is-in .circles__closer-walker-svg {
animation: closerBob 0.55s ease-in-out infinite;
}
@keyframes closerBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.cw-leg--left { transform-box: fill-box; transform-origin: 50% 0%; }
.cw-leg--right { transform-box: fill-box; transform-origin: 50% 0%; }
.circles__closer.is-in .cw-leg--left {
animation: cwLegL 0.55s ease-in-out infinite;
}
.circles__closer.is-in .cw-leg--right {
animation: cwLegR 0.55s ease-in-out infinite;
}
@keyframes cwLegL {
0%, 100% { transform: rotate(-18deg); }
50% { transform: rotate( 18deg); }
}
@keyframes cwLegR {
0%, 100% { transform: rotate( 18deg); }
50% { transform: rotate(-18deg); }
}
/* Manifesto text */
.circles__closer-text {
font-family: var(--serif);
font-size: clamp(34px, 4vw, 56px);
line-height: 1.18;
color: var(--ink);
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 400;
margin: 0;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.85s var(--ease-out) 1.0s,
transform 0.85s var(--ease-out) 1.0s;
}
.circles__closer.is-in .circles__closer-text {
opacity: 1;
transform: translateY(0);
}
.circles__closer-text em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
/* Closing flourish — three terra dots in a triangle (asterism).
More editorial than a wavy underline, signals "section end" without
competing with the text. Each dot fades in with stagger. */
.circles__closer-flourish {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
margin: 44px auto 0;
height: 18px;
width: fit-content;
}
.circles__closer-flourish span {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terra);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.circles__closer-flourish span:nth-of-type(1) { transition-delay: 1.85s; }
.circles__closer-flourish span:nth-of-type(2) { transition-delay: 2.00s; }
.circles__closer-flourish span:nth-of-type(3) { transition-delay: 2.15s; }
.circles__closer.is-in .circles__closer-flourish span {
opacity: 1;
transform: translateY(0);
}
/* Lanes-closer flourish — same three-dot asterism as the circles
closer. Visual consistency between the two big standalone
statements: both end with the same terra-dot punctuation. */
.lanes__closer-flourish {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
margin: 32px auto 0;
height: 18px;
width: fit-content;
}
.lanes__closer-flourish span {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terra);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.lanes__closer-flourish span:nth-of-type(1) { transition-delay: 0.55s; }
.lanes__closer-flourish span:nth-of-type(2) { transition-delay: 0.70s; }
.lanes__closer-flourish span:nth-of-type(3) { transition-delay: 0.85s; }
.lanes__closer.is-in .lanes__closer-flourish span {
opacity: 1;
transform: translateY(0);
}
/* === MOBILE — no pinning, vertical stack === */
@media (max-width: 900px) {
.circles__outer { height: auto; }
.circles__sticky {
position: relative;
top: auto;
height: auto;
padding: 80px var(--px);
}
/* Smaller title at narrow viewports so it doesn't wrap awkwardly
and never exceeds the viewport on phones. */
.circles__title { font-size: clamp(26px, 7.5vw, 40px); }
.circles__head { width: 100%; max-width: 100%; }
.circles__stage {
grid-template-columns: 1fr;
gap: 40px;
}
.circles__diagram { order: -1; }
.circles__svg { width: min(86vw, 400px); height: min(86vw, 400px); }
.circles__content {
height: auto;
overflow: visible;
flex-direction: column;
align-items: stretch;
gap: 60px;
-webkit-mask-image: none;
mask-image: none;
}
/* On mobile, all panels are visible stacked (not slot-reel) */
.ccpanel {
position: relative;
inset: auto;
opacity: 1 !important;
transform: none !important;
pointer-events: auto;
border-top: 1px solid rgba(26, 24, 20, 0.12);
padding-top: 30px;
}
.ccpanel:first-child { border-top: none; padding-top: 0; }
/* Inline per-panel illustration on mobile. On desktop these images
are hidden (the sticky .ctunnel sphere on the left handles the
illustration), but on mobile we want each circle's content to
have its own picture above it so the user can connect each
stage to its visual. */
.ccpanel__image {
display: block;
width: 100%;
max-width: 320px;
height: auto;
margin: 0 auto 20px;
aspect-ratio: 1 / 1;
object-fit: contain;
}
/* Hide the sticky illustration on mobile — the per-panel inline
images now do that job, and the sticky one would just sit at the
top showing only Circle 01's cat the entire time. */
.circles__diagram { display: none; }
}
/* On desktop and tablet (>900px), the inline mobile images are
redundant — the .ctunnel sphere illustration (sticky on the left)
handles the visual storytelling. Hide them. */
@media (min-width: 901px) {
.ccpanel__image { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.circles__outer { height: auto; }
.circles__sticky { position: relative; top: auto; height: auto; }
.ccpanel {
position: relative; inset: auto;
opacity: 1 !important; transform: none !important;
}
.ctunnel__sphere { transition: none !important; }
.ctunnel__container { transition: none !important; }
.ctunnel__sphere.is-focal .ctunnel__halo::before { animation: none; }
}
/* ============================================================
Legacy .services rules retained below for any lingering selectors
on the page that haven't been migrated yet.
============================================================ */
/* ---- Services cards: scroll-scrub reveal with stagger ---- */
.svc-card {
opacity: 0;
transform: translateY(40px) scale(0.98);
transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.services__grid.is-in .svc-card { opacity: 1; transform: translateY(0) scale(1); }
.services__grid.is-in .svc-card:nth-child(1) { transition-delay: 0.05s; }
.services__grid.is-in .svc-card:nth-child(2) { transition-delay: 0.18s; }
.services__grid.is-in .svc-card:nth-child(3) { transition-delay: 0.31s; }
@media (prefers-reduced-motion: reduce) {
.svc-card { opacity: 1 !important; transform: none !important; }
}
.services__head {
margin-bottom: 56px;
display: grid;
grid-template-columns: 1fr minmax(380px, 520px);
gap: clamp(40px, 5vw, 80px);
align-items: start;
}
.services__head-text { max-width: 900px; }
@media (max-width: 900px) {
.services__head { grid-template-columns: 1fr; }
}
.services__badge {
background: var(--ink);
color: var(--cream);
border-radius: 14px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 38px;
position: relative;
overflow: hidden;
transform: rotate(-1.2deg);
transition: transform 0.5s var(--ease);
}
.services__badge:hover { transform: rotate(0deg) translateY(-2px); }
.services__badge::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 85% -10%, rgba(210,73,46,0.3), transparent 55%);
pointer-events: none;
}
.services__badge-top {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 0.12em;
color: rgba(241, 234, 224, 0.85);
text-transform: uppercase;
position: relative;
z-index: 1;
}
.services__badge-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
animation: badgePulse 2s ease-out infinite;
}
@keyframes badgePulse {
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.services__badge-headline {
font-family: var(--serif);
font-size: clamp(26px, 2.6vw, 36px);
line-height: 1;
margin: 2px 0 0;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
color: var(--cream);
position: relative;
z-index: 1;
}
.services__badge-headline em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.services__badge-sub {
font-size: 13px;
color: rgba(241, 234, 224, 0.7);
line-height: 1.5;
margin: 0;
position: relative;
z-index: 1;
}
.services__badge-divider {
height: 1px;
background: rgba(241, 234, 224, 0.15);
margin: 6px 0 4px;
}
.services__badge-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
position: relative;
z-index: 1;
}
.services__badge-stats > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.services__badge-stats strong {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400;
color: var(--cream);
line-height: 1;
}
.services__badge-stats .mono {
font-size: 10px;
letter-spacing: 0.12em;
color: rgba(241, 234, 224, 0.55);
}
.services__title {
font-family: var(--serif);
font-size: clamp(42px, 9vw, 140px);
line-height: 0.95;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin: 22px 0 24px;
}
.services__lede {
max-width: 62ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2);
}
/* ================================================
CONTINUOUS AMBIENT ANIMATIONS
================================================ */
/* Hero: minimal geometric owl — sits in gap between title and card stack.
Eyes track the cursor, blinks every ~9s, on hover the head tilts and a
"hoot" ring expands outward. Replaces the writer's coffee cup. */
/* ============================================================
FIELD OF VISION — abstract concentric rings flanking title
============================================================
Replaces the previous literal owl eyes (which felt anatomical
and competed with the headline). These are pure geometry now:
four nested circles per side + a small terra focal dot at
center. They render the brand thesis directly — center =
insight, expanding rings = field of awareness — without
resorting to iris/pupil/lid/feather anatomy.
Sizing/positioning is preserved from the prior eye composition
so the hero layout doesn't shift. Only the inner content of
each side simplifies. */
.hero__rings {
position: absolute;
top: 50%;
width: clamp(280px, 32vw, 460px);
height: clamp(280px, 32vw, 460px);
z-index: 1;
transform: translateY(-50%);
opacity: 0;
/* Soft entrance: fade in + tiny scale up. No spinning. The rings
should arrive quietly, not announce themselves. */
animation: heroRingsIn 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s forwards;
pointer-events: none;
}
.hero__rings--l { left: clamp(-160px, -7vw, -40px); }
.hero__rings--r { right: clamp(-160px, -7vw, -40px); }
@keyframes heroRingsIn {
0% { opacity: 0; transform: translateY(-50%) scale(0.94); }
100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.hero__rings-svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* Subtle "breath" — the inner solid ring slowly expands and contracts.
Reads as a focal point that's gently alive, not mechanical. */
.hero__rings-r1 {
transform-box: fill-box;
transform-origin: center;
animation: ringBreath 6.5s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes ringBreath {
0%, 100% { transform: scale(1); opacity: 0.38; }
50% { transform: scale(1.04); opacity: 0.50; }
}
/* The mid-outer ring rotates almost imperceptibly — adds life
without drawing attention. */
.hero__rings-r3 {
transform-box: fill-box;
transform-origin: center;
animation: ringDrift 220s linear infinite;
will-change: transform;
}
@keyframes ringDrift {
to { transform: rotate(360deg); }
}
/* Mobile: pull rings tighter and dim them so they don't crowd the
centered headline on small screens. */
@media (max-width: 900px) {
.hero__rings {
width: 78vw;
height: 78vw;
opacity: 0.45;
}
.hero__rings--l { left: -38vw; top: 26%; }
.hero__rings--r { right: -38vw; top: 60%; }
}
@media (prefers-reduced-motion: reduce) {
.hero__rings { animation: none; opacity: 1; }
.hero__rings-r1, .hero__rings-r3 { animation: none; }
}
/* ============================================================
HERO OWL (MJ illustration with cursor-tracking pupils)
The owl is the brand mascot, centered above the headline. Image
is a 2172 × 724 PNG with the background already extracted to
alpha. Two SVG pupils overlay the lens centers and shift toward
the cursor via JS (lerped, clamped — pupils never leave the lens).
============================================================ */
.hero__owl-stage {
position: relative;
width: 100%;
/* Was 720 — felt small relative to the headline mass. Bumped to 800
and tightened the bottom margin (negative pull) so the owl visually
couples with the headline rather than reading as a separate icon
dropped above it. CTAs still sit above the fold on 1100px viewports. */
max-width: 800px;
margin: 0 auto -10px;
aspect-ratio: 2172 / 724;
z-index: 2; /* above any background, below content stack */
/* Quiet entrance — fade in + slight rise, then settle. Same easing
curve as the rest of the hero so it feels like one composition. */
opacity: 0;
transform: translateY(-12px);
animation: heroOwlIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s forwards;
}
@keyframes heroOwlIn {
to { opacity: 1; transform: translateY(0); }
}
.hero__owl-img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
/* Pupils SVG sits over the illustration, sized to match it exactly.
viewBox matches the source PNG so coordinates remain accurate. */
.hero__owl-pupils {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Each pupil/glint is positioned in viewBox space; JS sets a
per-frame translate via setAttribute. transition smooths any
sub-frame jitter without making movement feel sluggish. */
.hero__owl-pupil,
.hero__owl-glint {
transform-origin: center;
transform-box: fill-box;
transition: transform 60ms linear;
}
@media (max-width: 900px) {
.hero__owl-stage {
max-width: 88vw;
margin-bottom: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero__owl-stage {
animation: none;
opacity: 1;
transform: none;
}
.hero__owl-pupil, .hero__owl-glint { transition: none; }
}
/* Legacy hero ring + corner-owl elements are no longer in the markup,
but their CSS rules remain in the stylesheet (deleting them would
touch ~150 lines for no functional benefit). These two rules are a
safety net to ensure they NEVER render even if something else in
the cascade tries to instantiate them. */
.hero__rings, .hero__owl { display: none !important; }
/* Small owl companion — secondary character.
Now perched bottom-right of the hero, in front of the right giant eye
(z-index 4 puts it above the eye at z-1). The giant eyes are the brand
protagonists; the small owl is personality. */
.hero__owl {
position: absolute;
top: auto;
bottom: 100px;
right: clamp(20px, 4vw, 60px);
left: auto;
width: 150px;
height: 180px;
pointer-events: auto;
/* Initial: off-screen right, ready for entrance flight */
opacity: 0;
transform: translate(60vw, -10vh) rotate(15deg) scale(0.85);
cursor: pointer;
z-index: 4;
}
/* Trigger entrance flight by adding .has-flown-in via JS after iris reveal */
.hero__owl.has-flown-in {
animation: heroOwlFlyIn 1.5s cubic-bezier(0.25, 0.6, 0.3, 1) forwards;
}
@keyframes heroOwlFlyIn {
0% { opacity: 0; transform: translate(60vw, -15vh) rotate(15deg) scale(0.85); }
20% { opacity: 1; }
60% { transform: translate(15vw, -3vh) rotate(-3deg) scale(1.05); }
85% { transform: translate(2vw, 1.5vh) rotate(2deg) scale(0.97); }
100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}
/* Extended wings — invisible by default; flap during flight (.is-flying)
and on hover (the takeoff moment). */
.hero__owl-wing-ext {
opacity: 0;
transform-box: fill-box;
transform-origin: center 110px;
transition: opacity 0.25s ease;
}
.hero__owl.is-flying .hero__owl-wing-ext,
.hero__owl:hover .hero__owl-wing-ext {
opacity: 1;
}
.hero__owl.is-flying .hero__owl-wing-ext--l,
.hero__owl:hover .hero__owl-wing-ext--l {
animation: owlWingFlapL 230ms ease-in-out infinite alternate;
}
.hero__owl.is-flying .hero__owl-wing-ext--r,
.hero__owl:hover .hero__owl-wing-ext--r {
animation: owlWingFlapR 230ms ease-in-out infinite alternate;
}
@keyframes owlWingFlapL {
0% { transform: rotate(-12deg) translateY(0); }
100% { transform: rotate(18deg) translateY(-8px); }
}
@keyframes owlWingFlapR {
0% { transform: rotate(12deg) translateY(0); }
100% { transform: rotate(-18deg) translateY(-8px); }
}
/* Hover takeoff: head + body group lifts up briefly */
.hero__owl-head {
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero__owl:hover .hero__owl-head {
transform: translateY(-22px) rotate(-4deg);
}
@keyframes heroOwlFadeIn {
from { opacity: 0; transform: translateY(20px) scale(0.92); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__owl-svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* (Old single-rotate head hover replaced by takeoff lift-and-tilt above) */
/* Pupils — JS sets transform: translate(x,y) to track cursor.
Transition smooths the motion so it feels considered, not jittery. */
.hero__owl-pupil,
.hero__owl-glint {
transform-box: fill-box;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
/* Eyelids — sit ABOVE the eyes scaled to 0 (closed=scaleY(1) drops down) */
.hero__owl-lid {
transform-box: fill-box;
transform-origin: center top;
transform: scaleY(0);
/* JS toggles the .is-blinking class to trigger this */
}
.hero__owl-lid.is-blinking {
animation: owlBlink 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes owlBlink {
0% { transform: scaleY(0); }
45% { transform: scaleY(1); }
100% { transform: scaleY(0); }
}
/* Beak — tiny breathing scale, very subtle */
.hero__owl-beak {
transform-box: fill-box;
transform-origin: 100px 123px;
animation: owlBeakBreathe 4.2s ease-in-out infinite;
}
@keyframes owlBeakBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Ear tufts — gently sway as if reacting to a breeze */
.hero__owl-tuft--l {
transform-box: fill-box;
transform-origin: bottom right;
animation: owlTuftL 5s ease-in-out infinite;
}
.hero__owl-tuft--r {
transform-box: fill-box;
transform-origin: bottom left;
animation: owlTuftR 5s ease-in-out infinite -2.5s;
}
@keyframes owlTuftL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(-3deg);} }
@keyframes owlTuftR { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(3deg);} }
/* "watching" tag — gentle float, origin updated for the new top-left placement */
.hero__owl-tag {
transform-origin: 21px 49px;
transform-box: fill-box;
animation: owlTagFloat 4s ease-in-out infinite;
}
@keyframes owlTagFloat {
0%, 100% { transform: rotate(0deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(-2px); }
}
/* The HOOT ring — expands outward and fades on hover, like a sound wave.
JS toggles the .is-hooting class so we control timing precisely. */
.hero__owl-hoot {
transform-box: fill-box;
transform-origin: center;
}
.hero__owl-hoot.is-hooting {
animation: owlHoot 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes owlHoot {
0% { opacity: 0; transform: scale(0.45); stroke-width: 2; }
35% { opacity: 0.9; transform: scale(0.9); stroke-width: 1.6; }
100% { opacity: 0; transform: scale(1.55); stroke-width: 0.4; }
}
/* On hover — perch line shimmers terracotta briefly */
.hero__owl-perch,
.hero__owl-foot {
transition: stroke 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero__owl:hover .hero__owl-perch,
.hero__owl:hover .hero__owl-foot {
stroke: var(--terra);
}
@media (prefers-reduced-motion: reduce) {
.hero__owl-tuft--l,
.hero__owl-tuft--r,
.hero__owl-beak {
animation: none;
}
}
@media (max-width: 900px) {
.hero__owl { display: none; }
}
/* Services: 3D depth-parallax tag cloud */
.services__tagcloud {
position: relative;
width: 100%;
height: 340px;
pointer-events: auto;
overflow: visible;
}
.tag {
position: absolute;
padding: 7px 16px;
background: var(--cream);
border: 1px solid rgba(26, 24, 20, 0.12);
border-radius: 999px;
font-family: var(--serif);
font-style: italic;
font-size: clamp(13px, 1.1vw, 16px);
color: var(--ink-2);
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
letter-spacing: -0.005em;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(26, 24, 20, 0.05);
transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, z-index 0s 0.3s;
cursor: default;
}
.tag--accent {
background: var(--terra);
color: var(--cream);
border-color: var(--terra);
box-shadow: 0 4px 16px rgba(210, 73, 46, 0.25);
}
.tag:hover {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
box-shadow: 0 8px 22px rgba(26, 24, 20, 0.2);
z-index: 10;
animation-play-state: paused;
transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, z-index 0s;
}
/* Each tag has its own starting position AND its own looping drift path */
.tag--drift1 { top: 10px; left: 15%; animation: cloud1 18s ease-in-out infinite; }
.tag--drift2 { top: 50px; left: 55%; animation: cloud2 22s ease-in-out infinite; }
.tag--drift3 { top: 30px; left: 82%; animation: cloud3 20s ease-in-out infinite; }
.tag--drift4 { top: 95px; left: 30%; animation: cloud4 24s ease-in-out infinite; }
.tag--drift5 { top: 120px; left: 68%; animation: cloud5 19s ease-in-out infinite; }
.tag--drift6 { top: 155px; left: 10%; animation: cloud6 23s ease-in-out infinite; }
.tag--drift7 { top: 180px; left: 48%; animation: cloud7 21s ease-in-out infinite; }
.tag--drift8 { top: 210px; left: 78%; animation: cloud8 25s ease-in-out infinite; }
.tag--drift9 { top: 250px; left: 22%; animation: cloud9 17s ease-in-out infinite; }
.tag--drift10 { top: 270px; left: 58%; animation: cloud10 20s ease-in-out infinite; }
.tag--drift11 { top: 295px; left: 5%; animation: cloud11 22s ease-in-out infinite; }
/* Subtle, organic cloud-drift paths — each unique, all loop back to start */
@keyframes cloud1 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
25% { transform: translate(14px, 8px) rotate(calc(var(--r, 0deg) + 2deg)); }
50% { transform: translate(-8px, 18px) rotate(calc(var(--r, 0deg) - 1deg)); }
75% { transform: translate(-12px, 4px) rotate(calc(var(--r, 0deg) + 1deg)); }
}
@keyframes cloud2 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
33% { transform: translate(-18px, 10px) rotate(calc(var(--r, 0deg) - 2deg)); }
66% { transform: translate(10px, -6px) rotate(calc(var(--r, 0deg) + 3deg)); }
}
@keyframes cloud3 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
40% { transform: translate(-22px, 12px) rotate(calc(var(--r, 0deg) + 2deg)); }
70% { transform: translate(4px, 20px) rotate(calc(var(--r, 0deg) - 2deg)); }
}
@keyframes cloud4 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
30% { transform: translate(12px, -10px) rotate(calc(var(--r, 0deg) + 2deg)); }
60% { transform: translate(-14px, -4px) rotate(calc(var(--r, 0deg) - 3deg)); }
}
@keyframes cloud5 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
50% { transform: translate(-10px, 16px) rotate(calc(var(--r, 0deg) - 1deg)); }
}
@keyframes cloud6 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
35% { transform: translate(20px, -8px) rotate(calc(var(--r, 0deg) + 3deg)); }
70% { transform: translate(8px, 14px) rotate(calc(var(--r, 0deg) - 2deg)); }
}
@keyframes cloud7 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
25% { transform: translate(-14px, -6px) rotate(calc(var(--r, 0deg) - 2deg)); }
60% { transform: translate(14px, 10px) rotate(calc(var(--r, 0deg) + 2deg)); }
}
@keyframes cloud8 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
45% { transform: translate(-18px, 6px) rotate(calc(var(--r, 0deg) + 2deg)); }
80% { transform: translate(-6px, -12px) rotate(calc(var(--r, 0deg) - 2deg)); }
}
@keyframes cloud9 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
40% { transform: translate(16px, 8px) rotate(calc(var(--r, 0deg) - 3deg)); }
75% { transform: translate(-10px, -4px) rotate(calc(var(--r, 0deg) + 1deg)); }
}
@keyframes cloud10 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
30% { transform: translate(12px, -10px) rotate(calc(var(--r, 0deg) + 2deg)); }
70% { transform: translate(-16px, 8px) rotate(calc(var(--r, 0deg) - 1deg)); }
}
@keyframes cloud11 {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
50% { transform: translate(20px, 12px) rotate(calc(var(--r, 0deg) + 3deg)); }
}
@media (prefers-reduced-motion: reduce) {
.tag { animation: none !important; }
}
@media (max-width: 900px) {
.services__tagcloud { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tag { position: static; animation: none !important; transform: rotate(var(--r, 0deg)); }
}
/* WORK: always-on breathing terracotta glow on left edge of each item */
.work-item {
position: relative;
}
.work-item::before {
content: "";
position: absolute;
left: 0;
top: 16px;
bottom: 16px;
width: 3px;
background: var(--terra);
border-radius: 2px;
opacity: 0;
box-shadow: 0 0 14px 1px rgba(210, 73, 46, 0.5);
animation: workBreathe 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes workBreathe {
0%, 100% { opacity: 0; transform: scaleY(0.3); }
50% { opacity: 0.85; transform: scaleY(1); }
}
.work-item:nth-child(2)::before { animation-delay: 0.9s; }
.work-item:nth-child(3)::before { animation-delay: 1.8s; }
.work-item:nth-child(4)::before { animation-delay: 2.7s; }
.work-item:nth-child(5)::before { animation-delay: 3.6s; }
.work-item__link:hover ~ .work-item::before,
.work-item:has(.work-item__link:hover)::before {
animation-play-state: paused;
opacity: 1;
transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
.work-item::before { animation: none; opacity: 0.4; transform: scaleY(1); }
}
/* Work case study titles */
.work-item__h {
position: relative;
display: inline-block;
}
.services__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 1100px) {
.services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.services__grid { grid-template-columns: 1fr; gap: 20px; }
}
.svc-card {
background: var(--cream-2);
border: 1px solid rgba(26, 24, 20, 0.08);
border-radius: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.5s var(--ease), border-color 0.4s ease;
}
.svc-card:hover {
transform: translateY(-6px);
border-color: rgba(26, 24, 20, 0.2);
}
.svc-card__visual {
position: relative;
aspect-ratio: 3 / 2;
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
border-bottom: 1px solid rgba(26, 24, 20, 0.08);
overflow: hidden;
}
.svc-loop {
position: absolute;
inset: 0;
width: 100%; height: 100%;
color: var(--ink);
}
.svc-loop__mono {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
fill: currentColor;
opacity: 0.6;
text-transform: uppercase;
}
/* ---- LOOP 1: editorial calendar cells filling in sequence ---- */
.svc-loop__dows text {
font-family: var(--mono);
font-size: 9px; fill: currentColor;
}
.svc-loop__cells rect { fill: var(--terra); }
@keyframes calPop { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }
/* ---- LOOP 2: cursor typing ---- */
.svc-loop__typed, .svc-loop__typed-2, .svc-loop__typed-3 {
font-family: var(--serif);
font-size: 18px;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
fill: currentColor;
}
.svc-loop__caret {
fill: var(--terra);
animation: typeBlink 0.9s step-end infinite;
}
@keyframes typeBlink { 50% { opacity: 0; } }
/* ---- LOOP 3: page turning ---- */
.svc-loop__page { fill: var(--cream); stroke: rgba(26, 24, 20, 0.3); stroke-width: 0.6; }
.svc-loop__page--back {
transform: translate(6px, 4px) rotate(-3deg);
transform-origin: center;
}
.svc-loop__page--mid {
transform: translate(3px, 2px) rotate(-1deg);
transform-origin: center;
}
.svc-loop__page-flip {
transform-origin: 0px 0px;
animation: pageFlip 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes pageFlip {
0%, 15% { transform: perspective(380px) rotateY(0deg); }
45%, 55% { transform: perspective(380px) rotateY(-165deg); }
85%, 100% { transform: perspective(380px) rotateY(0deg); }
}
.svc-loop__pgno {
font-family: var(--mono); font-size: 7px;
fill: currentColor; opacity: 0.4;
}
.svc-card__body {
padding: 32px 28px 28px;
flex: 1;
display: flex;
flex-direction: column;
}
.svc-card__num {
font-size: 12px;
color: var(--terra);
letter-spacing: 0.1em;
margin-bottom: 14px;
display: inline-block;
}
.svc-card__title {
font-family: var(--serif);
font-size: clamp(28px, 2.4vw, 36px);
line-height: 1;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin-bottom: 18px;
position: relative;
display: inline-block;
}
.svc-card__title em {
position: relative;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
color: var(--terra);
}
.svc-card__scribble {
position: absolute;
left: 48%; bottom: -6px;
width: 90px; height: 8px;
color: var(--terra);
pointer-events: none;
}
.svc-card__scribble path {
stroke-dasharray: 200;
stroke-dashoffset: 200;
transition: stroke-dashoffset 1.2s var(--ease-out);
}
.svc-card.is-in .svc-card__scribble path { stroke-dashoffset: 0; }
.svc-card__lede {
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
margin-bottom: 22px;
}
.svc-card__list {
border-top: 1px solid rgba(26, 24, 20, 0.1);
margin-bottom: 22px;
list-style: none;
padding: 0;
}
.svc-card__list li {
padding: 11px 0;
border-bottom: 1px solid rgba(26, 24, 20, 0.1);
font-size: 14px;
font-weight: 500;
color: var(--ink-2);
}
.svc-card__foot {
margin-top: auto;
padding: 14px 16px;
background: var(--ink);
color: var(--cream);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.svc-card__foot .mono {
color: var(--cream);
opacity: 0.55;
font-size: 10px;
letter-spacing: 0.1em;
}
.svc-card__foot strong {
font-family: var(--serif);
font-size: 17px;
font-weight: 400;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
line-height: 1.2;
}
/* ================================================
SELECTED WORK
================================================ */
.work { padding: var(--section-pad) var(--px); background: var(--ink); color: var(--cream); position: relative; }
.work .section-label { color: var(--terra); }
.work__title { color: var(--cream); }
.work__title em { color: var(--terra); }
.work__lede { color: rgba(241, 234, 224, 0.85); }
.work-item { border-bottom: 1px solid rgba(241, 234, 224, 0.2); }
.work-item__num { color: var(--terra); }
.work-item__meta { color: rgba(241, 234, 224, 0.75); }
.work-item__dot { color: var(--terra); }
.work-item__h { color: var(--cream); }
.work-item__desc { color: rgba(241, 234, 224, 0.88); }
.work-item__metric { color: var(--cream); border-color: rgba(241, 234, 224, 0.3); background: rgba(241, 234, 224, 0.06); }
.work__head { margin-bottom: 48px; position: relative; }
.work__title {
font-family: var(--serif);
font-size: clamp(42px, 9vw, 140px);
line-height: 0.95;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin: 22px 0 24px;
position: relative;
display: inline-block;
}
.work__title-scribble {
position: absolute;
left: 38%; bottom: -0.1em;
width: clamp(120px, 14vw, 200px);
height: auto;
color: var(--terra);
}
.work__title-scribble path {
stroke-dasharray: 400;
stroke-dashoffset: 400;
transition: stroke-dashoffset 1.5s var(--ease-out) 0.3s;
}
.work__title.is-in .work__title-scribble path { stroke-dashoffset: 0; }
.work__lede {
max-width: 60ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2);
}
.work__list { border-top: 1px solid rgba(26, 24, 20, 0.15); }
.work-item {
border-bottom: 1px solid rgba(26, 24, 20, 0.15);
position: relative;
overflow: hidden;
--_sp: 0.5;
}
.work-item__link {
transform: translateY(calc((0.5 - var(--_sp, 0.5)) * 60px))
scale(calc(0.96 + var(--_sp, 0.5) * 0.04));
opacity: calc(0.8 + var(--_sp, 0.5) * 0.4);
transition: opacity 0.1s linear;
will-change: transform, opacity;
padding-left: 22px;
}
@media (prefers-reduced-motion: reduce) {
.work-item__link { transform: none !important; opacity: 1 !important; }
}
.work-item__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
width: 100%;
padding: 44px 0;
background: none;
border: 0;
text-align: left;
position: relative;
z-index: 2;
transition: padding 0.5s var(--ease), color 0.4s ease, opacity 0.15s linear;
cursor: pointer;
font: inherit;
color: inherit;
}
.work-item__main {
flex: 1 1 auto;
min-width: 0;
position: relative;
z-index: 3;
}
.work-item__aside {
position: relative;
z-index: 3;
}
.work-item__reveal {
position: absolute; inset: 0; z-index: 1;
background: var(--_c, var(--terra));
transform: translateY(101%);
transition: transform 0.7s var(--ease);
pointer-events: none;
}
.work-item:hover { color: var(--cream); }
.work-item:hover .work-item__reveal { transform: translateY(0); }
.work-item:hover .work-item__link { padding-left: 30px; padding-right: 30px; }
.work-item__num {
display: block;
font-size: 12px; color: var(--mute);
margin-bottom: 12px;
transition: color 0.4s ease;
}
.work-item:hover .work-item__num { color: rgba(255,255,255,0.75); }
.work-item__meta {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: 13.5px; font-weight: 500; color: var(--ink-2);
margin-bottom: 20px;
transition: color 0.4s ease;
}
.work-item:hover .work-item__meta { color: rgba(255,255,255,0.85); }
.work-item__dot { color: var(--terra); font-size: 6px; transition: color 0.4s ease; }
.work-item:hover .work-item__dot { color: var(--cream); }
.work-item__h {
font-family: var(--serif);
font-size: clamp(30px, 4.6vw, 68px);
line-height: 1.02;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
font-weight: 400;
margin-bottom: 20px;
max-width: 22ch;
transition: font-variation-settings 0.4s, font-style 0.4s;
}
.work-item:hover .work-item__h {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.work-item__desc {
max-width: 64ch;
font-size: 16.5px; line-height: 1.55;
color: var(--ink-2);
margin-bottom: 22px;
transition: color 0.4s ease;
}
.work-item:hover .work-item__desc { color: rgba(255,255,255,0.9); }
.work-item__metric {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono);
font-size: 13px; font-weight: 500;
letter-spacing: 0.02em;
padding: 8px 14px;
border: 1px solid rgba(26, 24, 20, 0.2);
border-radius: 999px;
transition: border-color 0.4s ease, background 0.4s;
}
.work-item:hover .work-item__metric {
border-color: rgba(255,255,255,0.4);
background: rgba(255,255,255,0.08);
}
/* aside — sample headline + view cta, reveal on hover */
.work-item__aside {
flex: 0 0 auto;
max-width: 42%;
text-align: right;
display: flex; flex-direction: column; align-items: flex-end; gap: 22px;
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.45s var(--ease-out) 0.25s, transform 0.45s var(--ease-out) 0.25s;
color: var(--cream);
}
.work-item:hover .work-item__aside {
opacity: 1;
transform: translateX(0);
}
.work-item__sample {
font-family: var(--serif);
font-size: clamp(18px, 1.8vw, 26px);
line-height: 1.2;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400;
letter-spacing: -0.01em;
color: rgba(255,255,255,0.95);
max-width: 32ch;
}
.work-item__sample .quote-m {
color: rgba(255,255,255,0.55);
font-size: 1.4em;
line-height: 0;
vertical-align: -0.1em;
margin: 0 0.04em;
}
.work-item__view {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 18px;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 999px;
font-family: var(--mono);
font-size: 12px; letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cream);
transition: background 0.3s ease, border-color 0.3s ease;
}
.work-item__view svg {
width: 14px; height: 14px;
transition: transform 0.4s var(--ease);
}
.work-item:hover .work-item__view { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.work-item__link:hover .work-item__view svg { transform: translateX(4px); }
@media (max-width: 900px) {
.work-item__link { flex-direction: column; align-items: flex-start; gap: 0; }
.work-item__aside { max-width: 100%; align-items: flex-start; text-align: left; }
.work-item__sample { display: none; }
.work-item:hover .work-item__aside { transform: translateY(-10px) translateX(0); }
.work-item__aside { margin-top: 14px; }
}
/* ================================================
MANIFESTO — the writer's voice, editorial style
================================================ */
.manifesto {
padding: clamp(56px, 7vw, 96px) var(--px);
display: grid;
grid-template-columns: 180px 1fr minmax(280px, 360px);
gap: clamp(32px, 4vw, 64px);
align-items: start;
position: relative;
isolation: isolate;
background:
radial-gradient(ellipse at top right, rgba(210, 73, 46, 0.04) 0%, transparent 55%),
var(--cream);
}
.manifesto__ink {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
mix-blend-mode: multiply;
}
.manifesto > *:not(.manifesto__ink) { position: relative; z-index: 1; }
@media (max-width: 900px) {
.manifesto { grid-template-columns: 1fr; gap: 32px; padding: 48px var(--px); }
}
.manifesto__aside {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 28px;
position: sticky;
}
/* Floating manuscript fragments — scrap-paper notes drifting in background */
.manifesto__fragments {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.manifesto__frag {
position: absolute;
background: var(--cream);
border: 1px solid rgba(26, 24, 20, 0.1);
padding: 10px 14px;
border-radius: 3px;
max-width: 220px;
box-shadow: 0 6px 18px rgba(26, 24, 20, 0.08);
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--serif);
animation: fragDrift 14s ease-in-out infinite;
}
.manifesto__frag .mono {
font-size: 9px;
letter-spacing: 0.14em;
color: var(--terra);
text-transform: uppercase;
font-style: normal;
font-family: var(--mono);
}
.manifesto__frag p {
font-style: italic;
font-size: 13px;
line-height: 1.35;
color: var(--ink);
margin: 0;
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.manifesto__frag--1 {
top: 340px; left: -60px;
transform: rotate(-7deg);
animation-delay: 0s;
}
.manifesto__frag--2 {
top: 460px; right: -30px;
transform: rotate(5deg);
animation-delay: -4s;
}
.manifesto__frag--3 {
top: 580px; left: -20px;
transform: rotate(-3deg);
animation-delay: -8s;
}
@keyframes fragDrift {
0%, 100% { transform: rotate(var(--_r, -3deg)) translateY(0); }
50% { transform: rotate(calc(var(--_r, -3deg) + 2deg)) translateY(-8px); }
}
.manifesto__frag--1 { --_r: -7deg; }
.manifesto__frag--2 { --_r: 5deg; }
.manifesto__frag--3 { --_r: -3deg; }
@media (prefers-reduced-motion: reduce) {
.manifesto__frag { animation: none; }
}
@media (max-width: 900px) {
.manifesto__fragments { display: none; }
}
.manifesto__pull {
position: relative;
z-index: 1;
margin: 0;
padding: 24px 24px 20px;
background: var(--cream-2);
border-left: 3px solid var(--terra);
border-radius: 6px;
position: relative;
}
.manifesto__pull-quote {
position: absolute;
top: 16px; right: 18px;
width: 34px; height: 26px;
color: var(--terra);
opacity: 0.45;
}
.manifesto__pull blockquote {
font-family: var(--serif);
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.4;
color: var(--ink);
margin: 0 0 16px;
font-variation-settings: "opsz" 36, "SOFT" 60, "wght" 400;
}
.manifesto__pull blockquote em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.manifesto__pull figcaption {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 14px;
border-top: 1px solid rgba(26, 24, 20, 0.12);
}
.manifesto__pull figcaption strong {
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.01em;
}
.manifesto__pull figcaption span {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--mute);
text-transform: uppercase;
}
@media (max-width: 900px) {
.manifesto__aside { position: static; }
}
.manifesto__rail {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
position: sticky;
top: 120px;
}
.manifesto__rail-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--terra);
position: relative;
}
.manifesto__rail-dot::after {
content: ""; position: absolute; inset: -6px;
border: 1px solid var(--terra);
border-radius: 50%;
opacity: 0.35;
animation: pulse 2s ease-out infinite;
}
.manifesto__body {
max-width: 60ch;
}
.manifesto__lede {
font-family: var(--serif);
/* Shrunk per Tanisha's feedback so the line fits on one row at
desktop. Original was clamp(32px, 4.4vw, 64px); first pass at
clamp(26px, 3.2vw, 42px) still wrapped. This pin is sized to
fit "I'm Tanisha, 7+ years in Content Marketing." in a single
row inside the manifesto's middle column at all viewports
≥1024px, while remaining legible on phones. */
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.2;
letter-spacing: -0.015em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin-bottom: 24px;
color: var(--ink);
}
.manifesto__lede em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.manifesto__para {
font-family: var(--serif);
/* Slightly bumped from clamp(18px, 1.5vw, 23px) so it sits between
the smaller-than-before lede and the small stats block. */
font-size: clamp(19px, 1.65vw, 25px);
line-height: 1.55;
color: var(--ink);
margin: 0 0 26px;
font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 400;
}
.manifesto__para em {
font-style: italic;
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.manifesto__para q {
font-style: italic;
color: var(--ink-2);
quotes: "\201C" "\201D";
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.manifesto__para--final {
margin-top: 40px;
font-size: clamp(19px, 1.7vw, 26px);
color: var(--ink);
}
/* Credentials block: two short stat lines stacked, italic terra serif so
they read as editorial proof points rather than marketing bullets. */
.manifesto__stats {
display: flex;
flex-direction: column;
gap: 6px;
margin: 36px 0 8px;
padding: 22px 0 22px 24px;
border-left: 2px solid var(--terra);
font-family: var(--serif);
font-style: italic;
font-size: clamp(16px, 1.3vw, 20px);
line-height: 1.45;
color: var(--ink-2);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.manifesto__stats-line { display: block; }
/* Direct contact block under the founder note. Editorial label/value
pairs (mono small caps + serif body), terra hover, no boxes — keeps
the editorial register of the rest of the page. */
.manifesto__contact {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid rgba(26, 24, 20, 0.12);
}
.manifesto__contact-link {
display: flex;
align-items: baseline;
gap: 18px;
text-decoration: none;
color: var(--ink);
transition: color 160ms ease;
}
.manifesto__contact-link:hover {
color: var(--terra);
}
.manifesto__contact-label {
flex-shrink: 0;
width: 80px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0.75;
}
.manifesto__contact-value {
font-family: var(--serif);
font-size: clamp(15px, 1.25vw, 18px);
line-height: 1.4;
font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 400;
}
@media (max-width: 640px) {
.manifesto__contact-link {
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.manifesto__contact-label {
width: auto;
}
}
.manifesto__cta {
color: var(--terra);
font-style: italic;
text-decoration: none;
border-bottom: 1.5px solid currentColor;
padding-bottom: 2px;
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 500;
transition: color 0.3s;
white-space: nowrap;
}
.manifesto__cta:hover { color: var(--ink); }
.manifesto__cta-arrow {
display: inline-block;
transition: transform 0.4s var(--ease);
}
.manifesto__cta:hover .manifesto__cta-arrow { transform: translateX(6px); }
.manifesto__sig {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
color: var(--ink);
padding-top: 4px;
}
.manifesto__sig-svg {
width: 160px;
height: 44px;
}
.manifesto__sig-svg path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.manifesto.is-visible .manifesto__sig-svg path {
animation: sigLoop 5s ease-in-out infinite;
}
@keyframes sigLoop {
0% { stroke-dashoffset: 100; }
40%, 75% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
.manifesto.is-visible .manifesto__sig-svg path { animation: none; stroke-dashoffset: 0; }
}
.manifesto__sig-role {
font-size: 11px;
letter-spacing: 0.12em;
color: var(--mute);
text-transform: uppercase;
}
@media (max-width: 900px) {
/* The desktop rail/sig/aside use position:sticky with top:120px to
follow the long body. On mobile we drop sticky AND clear `top` —
otherwise position:relative inherits the 120px and shoves these
elements down past the body, causing visible overlap. */
.manifesto__rail, .manifesto__sig {
position: static;
top: auto;
}
.manifesto__aside {
position: static;
top: auto;
}
.manifesto__sig { align-items: flex-start; }
}
/* ================================================
STATS
================================================ */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
position: relative;
background: var(--cream);
}
.stats__divider {
position: absolute;
left: 0; right: 0;
height: 14px;
color: rgba(26, 24, 20, 0.25);
pointer-events: none;
}
.stats__divider svg { width: 100%; height: 100%; display: block; }
.stats__divider:not(.stats__divider--bottom) { top: -7px; }
.stats__divider--bottom { bottom: -7px; top: auto; }
.stat {
padding: 70px var(--px) 60px;
border-right: 1px solid rgba(26, 24, 20, 0.1);
display: flex; flex-direction: column; align-items: flex-start;
gap: 18px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.35s var(--ease), background 0.4s ease;
}
.stat:hover { background: var(--cream-2); }
.stat:last-child { border-right: none; }
.stat__doodle {
width: 40px; height: 40px;
color: var(--terra);
opacity: 0.85;
transition: transform 0.5s var(--ease), opacity 0.4s ease, color 0.4s ease;
}
.stat__doodle svg { width: 100%; height: 100%; }
.stat:hover .stat__doodle {
transform: rotate(-8deg) scale(1.08);
opacity: 1;
}
.stat[data-i="2"] .stat__doodle { color: var(--ocean); }
.stat[data-i="3"] .stat__doodle { color: var(--leaf); }
.stat[data-i="4"] .stat__doodle { color: var(--terra-deep); }
.stat__number-row {
display: flex; align-items: baseline;
}
.stat__num {
font-family: var(--serif);
font-size: clamp(52px, 6.5vw, 92px);
line-height: 0.95;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 400;
}
.stat__plus {
font-family: var(--serif);
font-size: clamp(30px, 3.4vw, 48px);
color: var(--terra);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
vertical-align: 0.4em;
margin-left: 4px;
}
.stat__label {
font-family: var(--mono);
font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mute);
position: relative;
display: inline-flex; flex-direction: column; gap: 4px;
align-items: flex-start;
}
.stat__scribble {
width: 110px; height: 8px;
color: var(--terra);
}
.stat__scribble path {
stroke-dasharray: 200;
stroke-dashoffset: 200;
transition: stroke-dashoffset 1.2s var(--ease-out) 0.4s;
}
.stat:hover .stat__scribble path { stroke-dashoffset: 0; }
/* ================================================
QUOTE
================================================ */
.quote {
padding: clamp(48px, 6.5vw, 88px) var(--px);
text-align: center;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.quote__mark {
font-family: var(--serif);
font-size: 220px;
line-height: 0.6;
color: var(--terra);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
opacity: 0.18;
pointer-events: none;
}
.quote blockquote {
font-family: var(--serif);
font-size: clamp(26px, 3.6vw, 48px);
line-height: 1.2;
letter-spacing: -0.015em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
max-width: 22ch;
margin: 0 auto 40px;
position: relative;
z-index: 2;
}
.quote blockquote em {
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.quote cite {
display: inline-flex; align-items: center; gap: 14px;
font-style: normal;
}
.quote__avatar {
width: 48px; height: 48px; border-radius: 50%;
background: var(--ink); color: var(--cream);
display: grid; place-items: center;
font-family: var(--serif); font-size: 16px; font-weight: 500;
font-variation-settings: "opsz" 36, "SOFT" 60, "wght" 500;
}
.quote__who { text-align: left; display: flex; flex-direction: column; gap: 2px; }
.quote__who strong { font-size: 15px; font-weight: 600; }
.quote__who span { font-size: 13px; color: var(--mute); }
/* ================================================
APPROACH
================================================ */
.approach { padding: var(--section-pad) var(--px); background: var(--cream-2); position: relative; }
.approach__head { margin-bottom: 80px; position: relative; }
.approach__title {
font-family: var(--serif);
font-size: clamp(40px, 7vw, 100px);
line-height: 0.98;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin: 22px 0 0;
position: relative;
display: block;
}
.approach__pair {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 48px);
flex-wrap: wrap;
}
.approach__pair-a, .approach__pair-b {
display: inline-block;
white-space: nowrap;
}
.approach__connector {
display: inline-block;
position: relative;
flex: 1 1 180px;
min-width: 140px;
height: 3px;
align-self: center;
background: rgba(26, 24, 20, 0.15);
border-radius: 2px;
overflow: visible;
}
.approach__connector-line {
position: absolute;
inset: 0;
border-radius: 2px;
background: var(--terra);
transform: scaleX(0);
transform-origin: left center;
animation: connectorSweep 3.6s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
.approach__connector-ball {
position: absolute;
top: 50%;
left: 0;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--terra);
transform: translate(-50%, -50%);
animation: connectorRoll 3.6s cubic-bezier(0.6, 0, 0.3, 1) infinite;
box-shadow: 0 6px 16px rgba(210, 73, 46, 0.4);
}
.approach__connector-ball::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 65%);
}
@keyframes connectorSweep {
0% { transform: scaleX(0); transform-origin: left center; }
48% { transform: scaleX(1); transform-origin: left center; }
52% { transform: scaleX(1); transform-origin: right center; }
100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes connectorRoll {
0% { left: 0%; }
50% { left: 100%; }
100% { left: 0%; }
}
@media (prefers-reduced-motion: reduce) {
.approach__connector-ball, .approach__connector-line::after { animation: none; }
}
@media (max-width: 900px) {
.approach__connector { min-width: 80px; flex: 0 0 80px; }
}
.approach__em {
position: relative;
display: inline-block;
}
.approach__scribble {
position: absolute;
left: 0; right: 0;
bottom: -0.08em;
width: 100%;
height: auto;
color: var(--terra);
pointer-events: none;
}
.approach__scribble path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
transition: stroke-dashoffset 1.6s var(--ease-out) 0.3s;
}
.approach__title.is-in .approach__scribble path { stroke-dashoffset: 0; }
.approach__grid {
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: clamp(24px, 4vw, 60px);
align-items: start;
position: relative;
}
@media (max-width: 900px) {
.approach__grid { grid-template-columns: 1fr; gap: 48px; }
.approach__vconn { display: none; }
}
.approach__vconn {
position: relative;
min-height: 600px;
align-self: stretch;
}
.approach__vconn-line {
position: absolute;
top: 0; bottom: 0;
left: 50%; transform: translateX(-50%);
width: 20px; height: 100%;
color: rgba(26, 24, 20, 0.25);
pointer-events: none;
}
.approach__vconn-ast {
position: absolute;
top: 46%;
left: 50%;
width: 44px; height: 44px;
color: var(--terra);
background: var(--cream-2);
border-radius: 50%;
padding: 4px;
display: grid;
place-items: center;
z-index: 2;
margin-left: -22px;
margin-top: -22px;
animation: vconnAstSpin 24s linear infinite;
}
.approach__vconn-ast svg { width: 100%; height: 100%; display: block; }
@keyframes vconnAstSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.approach__vconn-label {
position: absolute;
top: 46%;
left: 50%;
font-size: 10px !important;
color: var(--mute);
letter-spacing: 0.18em;
white-space: nowrap;
background: var(--cream-2);
padding: 3px 10px;
z-index: 2;
transform: translate(-50%, 38px);
}
/* Ball hover — glow & pop */
.approach__connector:hover .approach__connector-ball,
.approach__connector-ball:hover {
transform: translate(-50%, -50%) scale(1.4);
box-shadow: 0 0 0 8px rgba(210, 73, 46, 0.15),
0 0 24px rgba(210, 73, 46, 0.55),
0 8px 24px rgba(210, 73, 46, 0.5);
}
.approach__connector-ball {
transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.3, 1), box-shadow 0.4s ease;
cursor: pointer;
pointer-events: auto;
}
.approach__ch {
font-family: var(--mono);
font-size: 13px; letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--terra);
padding-bottom: 16px;
border-bottom: 1px solid rgba(26, 24, 20, 0.2);
margin-bottom: 28px;
}
.think-list li {
padding: 22px 0;
border-bottom: 1px solid rgba(26, 24, 20, 0.1);
transition: transform 0.4s var(--ease);
}
.think-list li:hover { transform: translateX(6px); }
.think-list li strong {
display: block;
font-family: var(--serif);
font-size: clamp(22px, 1.9vw, 28px);
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 500;
letter-spacing: -0.015em;
margin-bottom: 8px;
transition: color 0.3s;
}
.think-list li:hover strong { color: var(--terra); }
.think-list li p { color: var(--ink-2); line-height: 1.55; max-width: 52ch; }
.process { counter-reset: step; }
.process__step {
display: grid; grid-template-columns: auto 1fr; gap: 26px;
padding: 24px 0;
border-bottom: 1px solid rgba(26, 24, 20, 0.1);
transition: transform 0.4s var(--ease);
}
.process__step:hover { transform: translateX(8px); }
.process__num {
font-family: var(--serif);
font-size: clamp(36px, 4vw, 56px);
font-style: italic;
color: var(--terra);
line-height: 1;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
transition: transform 0.4s var(--ease);
}
.process__step:hover .process__num { transform: rotate(-6deg) scale(1.05); }
.process__step h4 {
font-family: var(--serif);
font-size: clamp(22px, 1.9vw, 26px);
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 500;
letter-spacing: -0.015em;
margin-bottom: 6px;
}
.process__step p { color: var(--ink-2); line-height: 1.55; max-width: 42ch; }
/* ================================================
INDUSTRY NOTES — editorial-magazine style log
================================================ */
.notes { padding: var(--section-pad) var(--px); position: relative; background: var(--cream); }
.notes__top {
display: grid;
grid-template-columns: 1fr minmax(320px, 400px);
gap: clamp(40px, 5vw, 80px);
align-items: start;
margin-bottom: 56px;
}
@media (max-width: 900px) {
.notes__top { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
}
/* Word-count ticker inside notes sidebar */
.notes__wordcount {
background: rgba(241, 234, 224, 0.05);
border: 1px solid rgba(241, 234, 224, 0.1);
border-radius: 10px;
padding: 16px 18px;
margin: 12px 0 4px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
z-index: 1;
}
.notes__wc-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.notes__wc-top .mono {
font-size: 10px;
letter-spacing: 0.14em;
color: rgba(241, 234, 224, 0.55);
text-transform: uppercase;
}
.notes__wc-pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--terra);
animation: wcPulse 1.3s ease-in-out infinite;
}
@keyframes wcPulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.8); opacity: 1; }
}
.notes__wc-num {
display: flex;
align-items: baseline;
gap: 8px;
}
.notes__wc-digits {
font-family: var(--mono);
font-size: 32px;
font-weight: 500;
color: var(--cream);
letter-spacing: -0.01em;
line-height: 1;
display: inline-block;
min-width: 80px;
}
.notes__wc-unit {
font-family: var(--serif);
font-style: italic;
font-size: 16px;
color: rgba(241, 234, 224, 0.7);
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.notes__wc-bar {
height: 4px;
background: rgba(241, 234, 224, 0.12);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.notes__wc-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--terra), #e86644);
border-radius: 2px;
transition: width 1.2s cubic-bezier(0.3, 1, 0.3, 1);
position: relative;
}
.notes__wc-bar-fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
animation: wcBarShimmer 2.4s linear infinite;
}
@keyframes wcBarShimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.notes__wc-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.notes__wc-foot .mono {
font-size: 10px;
letter-spacing: 0.14em;
color: rgba(241, 234, 224, 0.55);
text-transform: uppercase;
}
.notes__wc-foot span:last-child {
font-size: 12px;
color: rgba(241, 234, 224, 0.75);
}
.notes__head { max-width: 900px; margin-bottom: 0; }
.notes__sidebar {
padding: 24px 24px 22px;
background: var(--ink);
color: var(--cream);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
}
.notes__sidebar::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(210,73,46,0.28), transparent 65%);
pointer-events: none;
}
.notes__sidebar-row {
display: inline-flex;
align-items: center;
gap: 10px;
position: relative;
}
.notes__sidebar-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--terra);
position: relative;
flex-shrink: 0;
}
.notes__sidebar-dot::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid var(--terra);
opacity: 0.5;
animation: pulse 2.2s ease-out infinite;
}
.notes__sidebar-label {
font-size: 11px;
letter-spacing: 0.12em;
color: var(--cream);
opacity: 0.8;
text-transform: uppercase;
}
.notes__sidebar-title {
font-family: var(--serif);
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.25;
color: var(--cream);
font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 400;
margin: 2px 0 4px;
}
.notes__sidebar-title em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.notes__sidebar-meta {
display: flex;
gap: 10px;
align-items: center;
padding-bottom: 4px;
}
.notes__sidebar-meta .mono {
font-family: var(--mono);
font-size: 10px;
color: var(--cream);
opacity: 0.5;
letter-spacing: 0.12em;
}
.notes__sidebar-meta span:last-child {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: var(--cream);
opacity: 0.9;
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.notes__sidebar-divider {
height: 1px;
background: rgba(241, 234, 224, 0.15);
margin: 4px 0;
}
.notes__sidebar-small {
font-size: 12px;
line-height: 1.5;
color: var(--cream);
opacity: 0.7;
margin: 0;
}
.notes__sidebar-cta {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--terra);
font-family: var(--serif);
font-style: italic;
font-size: 15px;
text-decoration: none;
border-bottom: 1px solid rgba(210, 73, 46, 0.4);
padding-bottom: 2px;
align-self: flex-start;
transition: gap 0.3s var(--ease);
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 500;
margin-top: 2px;
}
.notes__sidebar-cta:hover { gap: 12px; color: var(--cream); border-color: var(--cream); }
.notes__title {
font-family: var(--serif);
font-size: clamp(42px, 9vw, 140px);
line-height: 0.95;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin: 22px 0 24px;
}
.notes__title em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.notes__lede {
max-width: 62ch;
font-size: clamp(17px, 1.3vw, 20px);
color: var(--ink-2);
line-height: 1.55;
}
.notes__list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid rgba(26, 24, 20, 0.15);
counter-reset: note;
}
.notes__item {
border-bottom: 1px solid rgba(26, 24, 20, 0.15);
counter-increment: note;
position: relative;
}
.notes__item::before {
content: "0" counter(note);
position: absolute;
top: 42px;
left: 0;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--mute);
pointer-events: none;
}
.notes__link {
display: grid;
grid-template-columns: 80px 1fr 280px;
gap: 48px;
align-items: start;
padding: 42px 0;
text-decoration: none;
color: inherit;
transition: padding 0.5s var(--ease);
position: relative;
}
.notes__link::after {
content: "";
position: absolute;
inset: 0;
background: var(--cream-2);
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
margin: 0 calc(var(--px) * -0.5);
border-radius: 8px;
}
.notes__link:hover::after { opacity: 1; }
.notes__link:hover { padding-left: 24px; padding-right: 24px; }
.notes__meta {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding-left: 80px;
}
.notes__date, .notes__tag, .notes__read {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.notes__date { color: var(--terra); font-weight: 500; }
.notes__tag { color: var(--ink); font-weight: 500; }
.notes__read { color: var(--mute); }
.notes__dot { color: var(--mute); font-size: 11px; }
.notes__h {
grid-column: 2 / 3;
font-family: var(--serif);
font-size: clamp(24px, 2.4vw, 34px);
line-height: 1.15;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin: 0;
transition: color 0.3s ease;
}
.notes__link:hover .notes__h { color: var(--terra); }
.notes__excerpt {
display: none; /* shown on hover + large screens via rule below */
}
.notes__cta {
grid-column: 3 / 4;
align-self: end;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--terra);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.3s var(--ease);
white-space: nowrap;
justify-self: end;
}
.notes__link:hover .notes__cta { gap: 14px; }
@media (min-width: 1100px) {
.notes__excerpt {
display: block;
grid-column: 2 / 3;
margin: 18px 0 0;
font-size: 16px;
line-height: 1.6;
color: var(--ink-2);
max-width: 64ch;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.5s var(--ease), opacity 0.4s ease, margin 0.4s ease;
}
.notes__link:hover .notes__excerpt {
max-height: 300px;
opacity: 1;
margin-top: 18px;
}
}
@media (max-width: 900px) {
.notes__link {
grid-template-columns: 1fr;
gap: 18px;
padding: 32px 0;
}
.notes__item::before { position: static; display: block; margin-bottom: 10px; }
.notes__meta { padding-left: 0; margin-bottom: 0; flex-wrap: wrap; }
.notes__h, .notes__cta, .notes__excerpt { grid-column: 1; }
.notes__excerpt { display: block; font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.notes__cta { justify-self: start; }
}
.notes__foot {
margin-top: 48px;
padding: 22px 28px;
background: var(--cream-2);
border-radius: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.notes__foot .mono {
font-size: 12px;
letter-spacing: 0.1em;
color: var(--mute);
}
.notes__sub {
font-family: var(--serif);
font-style: italic;
font-size: 17px;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: color 0.3s;
}
.notes__sub:hover { color: var(--ink); }
/* ================================================
FAQ
================================================ */
.faq { padding: var(--section-pad) var(--px); position: relative; background: var(--cream-2); }
.faq__head {
margin-bottom: 60px;
display: grid;
grid-template-columns: 1fr minmax(260px, 340px);
gap: clamp(40px, 5vw, 80px);
align-items: start;
}
.faq__head-text { max-width: 900px; }
@media (max-width: 900px) {
.faq__head { grid-template-columns: 1fr; }
}
.faq__quickstats {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 38px;
}
/* Typing search-box mockup */
.faq__searchmock {
background: var(--ink);
color: var(--cream);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(26, 24, 20, 0.18);
transition: transform 0.5s var(--ease);
}
.faq__searchmock:hover { transform: translateY(-3px); }
.faq__searchmock-top {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: rgba(241, 234, 224, 0.05);
border-bottom: 1px solid rgba(241, 234, 224, 0.08);
}
.faq__searchmock-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(241, 234, 224, 0.2);
}
.faq__searchmock-dot:nth-child(1) { background: #e86644; }
.faq__searchmock-dot:nth-child(2) { background: #e8b844; }
.faq__searchmock-dot:nth-child(3) { background: #4ade80; }
.faq__searchmock-url {
margin-left: auto;
font-size: 10px;
letter-spacing: 0.1em;
color: rgba(241, 234, 224, 0.4);
}
.faq__searchmock-box {
display: flex;
align-items: center;
gap: 10px;
padding: 22px 20px;
background: rgba(241, 234, 224, 0.03);
}
.faq__searchmock-icon {
width: 18px; height: 18px;
color: rgba(241, 234, 224, 0.5);
flex-shrink: 0;
}
.faq__searchmock-text {
font-family: var(--serif);
font-style: italic;
font-size: clamp(16px, 1.3vw, 19px);
color: var(--cream);
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
min-height: 1.2em;
line-height: 1.2;
flex: 1;
}
.faq__searchmock-caret {
width: 2px;
height: 20px;
background: var(--terra);
animation: faqCaretBlink 0.9s step-end infinite;
flex-shrink: 0;
}
@keyframes faqCaretBlink {
50% { opacity: 0; }
}
.faq__searchmock-hint {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px 14px;
font-size: 11px;
letter-spacing: 0.1em;
color: rgba(241, 234, 224, 0.45);
}
.faq__searchmock-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
background: rgba(241, 234, 224, 0.08);
border: 1px solid rgba(241, 234, 224, 0.15);
border-radius: 4px;
font-size: 10px;
color: rgba(241, 234, 224, 0.7);
}
.faq__qs-footnote {
font-size: 13px;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
padding: 12px 18px;
background: rgba(26, 24, 20, 0.03);
border-radius: 10px;
border-left: 2px solid var(--terra);
}
.faq__qs-footnote .mono {
color: var(--terra);
font-weight: 500;
letter-spacing: 0.02em;
}
.faq__qs-card {
background: var(--cream);
border: 1px solid rgba(26, 24, 20, 0.12);
border-radius: 12px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 16px;
transition: transform 0.4s var(--ease), border-color 0.3s;
position: relative;
overflow: hidden;
}
.faq__qs-card:hover {
transform: translateX(-4px);
border-color: var(--terra);
}
.faq__qs-card:hover .faq__qs-mark { transform: rotate(-14deg) scale(1.08); }
.faq__qs-mark {
font-family: var(--serif);
font-size: 42px;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
color: var(--terra);
line-height: 1;
transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.3, 1);
flex-shrink: 0;
}
.faq__qs-icon {
width: 34px; height: 34px;
color: var(--terra);
flex-shrink: 0;
animation: qsTick 6s linear infinite;
}
@keyframes qsTick {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(360deg); }
}
.faq__qs-card strong {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400;
color: var(--ink);
line-height: 1;
display: block;
margin-bottom: 4px;
}
.faq__qs-card .mono {
font-size: 10px;
letter-spacing: 0.12em;
color: var(--mute);
}
.faq__qs-card--alt {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}
.faq__qs-card--alt strong { color: var(--cream); }
.faq__qs-card--alt .mono { color: rgba(241, 234, 224, 0.6); }
.faq__qs-card--alt:hover { border-color: var(--terra); }
.faq__title {
font-family: var(--serif);
font-size: clamp(42px, 9vw, 140px);
line-height: 0.95;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin-top: 22px;
}
.faq__lede {
max-width: 60ch;
font-size: clamp(16px, 1.2vw, 19px);
color: var(--ink-2);
margin-top: 18px;
}
.faq__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.faq__list {
border-top: 1px solid rgba(26, 24, 20, 0.2);
}
.faq-item {
border-bottom: 1px solid rgba(26, 24, 20, 0.2);
overflow: hidden;
}
.faq-item summary {
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: 20px;
padding: 28px 0;
font-family: var(--serif);
font-size: clamp(20px, 2vw, 28px);
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
letter-spacing: -0.015em;
transition: color 0.3s ease, padding 0.3s var(--ease);
}
.faq-item summary:hover { color: var(--terra); padding-left: 8px; }
.faq-item__icon {
width: 28px; height: 28px; position: relative;
flex-shrink: 0;
}
.faq-item__icon::before, .faq-item__icon::after {
content: ""; position: absolute; top: 50%; left: 50%;
background: var(--ink);
transition: transform 0.4s var(--ease), background 0.3s;
}
.faq-item__icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-item__icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item:hover .faq-item__icon::before,
.faq-item:hover .faq-item__icon::after { background: var(--terra); }
.faq-item__body {
padding: 0 0 28px 0;
max-width: 70ch;
color: var(--ink-2);
font-size: 16px; line-height: 1.6;
}
.faq-item[open] .faq-item__body {
animation: faqOpen 0.5s var(--ease-out);
}
/* Sidebar card */
.faq__aside {
position: sticky;
top: 120px;
min-height: 420px;
}
.faq__card {
position: relative;
background: var(--ink);
color: var(--cream);
padding: 44px 40px 40px;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(26, 24, 20, 0.12);
z-index: 2;
}
.faq__card-deco {
position: absolute;
top: -18px; right: -18px;
width: 120px; height: 120px;
color: var(--terra);
opacity: 0.3;
animation: ornSpin 36s linear infinite;
}
.faq__card-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 18px;
position: relative; z-index: 2;
}
.faq__card-eyebrow::before {
content: ""; width: 10px; height: 10px; border-radius: 50%;
background: var(--terra);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.faq__card-h {
font-family: var(--serif);
font-size: clamp(36px, 3.6vw, 52px);
line-height: 0.98;
letter-spacing: -0.025em;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 90, "wght" 400;
margin-bottom: 22px;
position: relative; z-index: 2;
}
.faq__card-dot {
color: var(--terra);
font-style: normal;
display: inline-block;
transform: translateY(-4px);
}
.faq__card-p {
font-size: 15.5px; line-height: 1.6;
color: rgba(255,255,255,0.75);
margin-bottom: 28px;
max-width: 34ch;
position: relative; z-index: 2;
}
.faq__card-link {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 20px;
background: var(--cream); color: var(--ink);
border-radius: 999px;
font-size: 14px; font-weight: 500;
transition: background 0.3s ease, transform 0.3s var(--ease), color 0.3s;
position: relative; z-index: 2;
}
.faq__card-link svg {
width: 14px; height: 14px;
transition: transform 0.3s var(--ease);
}
.faq__card-link:hover {
background: var(--terra); color: var(--cream);
transform: translateY(-2px);
}
.faq__card-link:hover svg { transform: translateX(4px); }
.faq__card-meta {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,0.14);
position: relative; z-index: 2;
}
.faq__card-meta .mono {
font-size: 11px !important;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.5);
}
.faq__float {
position: absolute;
color: var(--terra);
pointer-events: none;
}
.faq__float--1 {
top: -28px; left: -24px;
width: 40px; height: 40px;
animation: ornSpin 18s linear infinite reverse;
opacity: 0.7;
}
.faq__float--2 {
bottom: -40px; right: -40px;
width: 110px; height: 110px;
color: rgba(26, 24, 20, 0.2);
animation: slowSpin 60s linear infinite;
}
@keyframes slowSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (max-width: 1024px) {
.faq__grid { grid-template-columns: 1fr; gap: 50px; }
.faq__aside { position: static; min-height: 0; }
}
@keyframes faqOpen {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ================================================
TESTIMONIALS
================================================
Two-column editorial layout. Each card sits on the cream-2 wash so
the section reads as a tonal break between the warm cream manifesto
and the dark CTA below. Large terra serif quote glyph anchors each
card; italic Fraunces blockquote keeps the editorial voice; small
attribution rule + name + role at the bottom. */
.testimonials {
padding: clamp(80px, 10vh, 140px) var(--px) clamp(80px, 10vh, 140px);
background: var(--cream-2);
position: relative;
}
.testimonials__head {
max-width: 1280px;
margin: 0 auto clamp(40px, 6vw, 88px);
text-align: center;
}
.testimonials__head .section-label { margin-bottom: 24px; }
.testimonials__title {
font-family: var(--serif);
font-size: clamp(32px, 4vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
font-weight: 400;
max-width: 24ch;
margin: 0 auto;
}
.testimonials__title em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.testimonials__grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(28px, 3vw, 56px);
}
@media (max-width: 760px) {
.testimonials__grid { grid-template-columns: 1fr; gap: 36px; }
}
.tcard {
position: relative;
padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px) clamp(28px, 3vw, 40px);
background: var(--cream);
border-radius: 4px;
box-shadow:
0 1px 0 rgba(26, 24, 20, 0.06),
0 18px 40px -28px rgba(26, 24, 20, 0.18);
display: flex;
flex-direction: column;
gap: 24px;
}
/* Big terra opening quote glyph — visual anchor, not decoration. */
.tcard__mark {
position: absolute;
top: 14px;
left: 24px;
font-family: var(--serif);
font-size: clamp(72px, 8vw, 108px);
line-height: 1;
color: var(--terra);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
pointer-events: none;
user-select: none;
}
.tcard__quote {
font-family: var(--serif);
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.55;
color: var(--ink);
margin: 0;
font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 400;
position: relative;
z-index: 1;
padding-top: 20px;
}
.tcard__quote em {
font-style: italic;
color: var(--terra);
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.tcard__by {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: auto;
}
.tcard__rule {
display: block;
width: 32px;
height: 1px;
background: var(--terra);
margin-bottom: 12px;
opacity: 0.6;
}
.tcard__name {
font-family: var(--serif);
font-size: 17px;
line-height: 1.2;
color: var(--ink);
font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 500;
font-weight: 500;
/* Anchor variant — subtle terra underline on hover. The name now
links to the testifier's LinkedIn profile. */
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease, color 0.25s ease;
}
a.tcard__name:hover,
a.tcard__name:focus-visible {
color: var(--terra);
border-bottom-color: var(--terra);
}
.tcard__role {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0.75;
}
/* Reveal stagger for the two cards */
.testimonials__grid .tcard {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.testimonials__grid .tcard.is-in {
opacity: 1;
transform: translateY(0);
}
.testimonials__grid .tcard:nth-child(2).is-in { transition-delay: 0.18s; }
/* ================================================
CTA
================================================ */
.cta {
background: var(--ink);
color: var(--cream);
overflow: hidden;
position: relative;
padding-bottom: var(--section-pad);
}
.cta__marquee {
overflow: hidden;
padding: 22px 0;
border-bottom: 1px solid rgba(241, 234, 224, 0.1);
}
.cta__marquee-track {
display: inline-flex; align-items: center; gap: 28px;
white-space: nowrap;
animation: slide 30s linear infinite;
width: max-content;
}
.cta__marquee-track span {
font-family: var(--serif);
font-size: clamp(22px, 3vw, 52px);
line-height: 1;
letter-spacing: -0.015em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
color: var(--cream);
transition: color 0.3s, font-style 0.3s;
}
.cta__marquee-track span:hover { font-style: italic; color: var(--terra); }
.cta__ast {
color: var(--terra) !important;
font-style: italic !important;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400 !important;
}
.cta__inner {
padding: calc(var(--section-pad) * 0.8) var(--px) 0;
text-align: left;
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
gap: 80px;
align-items: end;
}
.cta__content { max-width: 1100px; }
.cta__info {
position: relative;
padding: 36px 32px 30px;
border: 1px solid rgba(241, 234, 224, 0.15);
border-radius: 24px;
background: rgba(241, 234, 224, 0.025);
backdrop-filter: blur(4px);
display: flex; flex-direction: column; gap: 16px;
max-width: 380px;
margin-bottom: 8px;
}
.cta__info-ast {
position: absolute;
top: -20px; right: -16px;
width: 48px; height: 48px;
color: var(--terra);
animation: ornSpin 24s linear infinite;
background: var(--ink);
border-radius: 50%;
padding: 8px;
}
.cta__info-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px dashed rgba(241, 234, 224, 0.12);
}
.cta__info-row--note { border-bottom: none; padding-top: 12px; }
.cta__info-label {
font-size: 11px !important;
letter-spacing: 0.08em;
color: rgba(241, 234, 224, 0.5);
flex-shrink: 0;
}
.cta__info-val {
font-family: var(--serif);
font-size: 17px;
color: var(--cream);
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
text-align: right;
}
.cta__info-val em {
color: var(--terra);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.cta__info-val--live {
display: inline-flex; align-items: center; gap: 8px;
}
.cta__info-val .live-online,
.cta__info-val .live-offline {
font-size: 11px;
letter-spacing: 0.05em;
font-family: var(--mono);
font-style: normal;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
margin-left: 4px;
}
.cta__info-val .live-online {
background: rgba(110, 163, 84, 0.18);
color: #9bcb78;
}
.cta__info-val .live-offline {
background: rgba(241, 234, 224, 0.08);
color: rgba(241, 234, 224, 0.55);
}
.cta__pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--terra);
position: relative;
}
.cta__pulse::after {
content: "";
position: absolute; inset: -4px;
border-radius: 50%;
background: var(--terra);
opacity: 0.35;
animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing {
0% { transform: scale(0.6); opacity: 0.5; }
100% { transform: scale(1.6); opacity: 0; }
}
.cta__info-note {
font-family: var(--serif);
font-size: 15px;
font-style: italic;
color: rgba(241, 234, 224, 0.65);
line-height: 1.4;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.cta__title {
font-family: var(--serif);
font-size: clamp(36px, 5vw, 76px);
line-height: 1.04;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin-bottom: 26px;
}
@media (max-width: 1024px) {
.cta__inner { grid-template-columns: 1fr; gap: 50px; }
.cta__info { max-width: none; margin-top: 0; }
}
.cta__title em {
color: var(--terra);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.cta__sub {
max-width: 54ch;
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.5;
color: rgba(241, 234, 224, 0.7);
margin-bottom: 40px;
}
/* Editorial pre-line that breaks the sub paragraph: small terra mono
tag introducing the "what happens next" beat. */
.cta__sub-pre {
display: block;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terra);
margin-bottom: 14px;
position: relative;
padding-left: 22px;
}
.cta__sub-pre::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 14px; height: 1px;
background: var(--terra);
transform: translateY(-50%);
}
.cta .btn--primary {
background: var(--cream); color: var(--ink);
}
.cta .btn--primary::before { background: var(--terra); }
.cta .btn--primary:hover { color: var(--cream); }
.cta .btn--ghost {
color: var(--cream);
border-color: rgba(241, 234, 224, 0.25);
}
.cta .btn--ghost:hover {
background: var(--cream); color: var(--ink);
border-color: var(--cream);
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* ================================================
FOOTER
================================================ */
.footer {
background: var(--ink);
color: var(--cream);
padding-top: 40px;
overflow: hidden;
}
.footer__bigname {
overflow: hidden;
padding: 30px 0 50px;
border-top: 1px solid rgba(241, 234, 224, 0.1);
}
.footer__bigname-track {
display: inline-flex; align-items: center; gap: 40px;
white-space: nowrap;
animation: slide 40s linear infinite reverse;
width: max-content;
}
.footer__bigname-track span {
font-family: var(--serif);
font-size: clamp(40px, 7vw, 96px);
line-height: 1;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
color: var(--cream);
display: inline-flex;
}
.footer__bigname-track .char {
display: inline-block;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.35s ease;
transition-delay: calc(var(--i, 0) * 20ms);
transform-origin: 50% 100%;
}
.footer__bigname-track span:hover .char {
transform: translateY(-10px);
color: var(--terra);
}
.footer__dot {
color: var(--terra) !important;
font-size: clamp(22px, 4vw, 52px) !important;
align-self: center;
}
.footer__bottom {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 40px var(--px) 40px;
border-top: 1px solid rgba(241, 234, 224, 0.1);
}
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col .mono { color: rgba(241, 234, 224, 0.5); font-size: 11px; }
.footer__link {
font-family: var(--serif);
font-size: clamp(20px, 2.2vw, 28px);
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
letter-spacing: -0.01em;
color: var(--cream);
transition: color 0.3s ease, font-style 0.3s;
/* Touch target — give the email link generous tap area on mobile */
display: inline-block;
padding: 6px 0;
}
.footer__link:hover { color: var(--terra); font-style: italic; }
.footer__social { display: flex; flex-direction: column; gap: 4px; }
.footer__social a {
font-size: 15px;
color: rgba(241, 234, 224, 0.8);
transition: color 0.3s, transform 0.3s var(--ease);
display: inline-block;
/* Touch target — bumps height from 23px to ~40px so social links
are reliably tappable on mobile. */
padding: 8px 0;
}
.footer__social a:hover { color: var(--terra); transform: translateX(4px); }
/* ================================================
CASE STUDY MODAL
================================================ */
.case-modal {
position: fixed; inset: 0; z-index: 200;
visibility: hidden;
pointer-events: none;
}
.case-modal.is-open { visibility: visible; pointer-events: auto; }
.case-modal__backdrop {
position: absolute; inset: 0;
background: rgba(15, 13, 10, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.5s var(--ease);
}
.case-modal.is-open .case-modal__backdrop { opacity: 1; }
.case-modal__panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(920px, 100%);
background: var(--cream);
border-left: 1px solid rgba(26, 24, 20, 0.1);
transform: translateX(105%);
transition: transform 0.6s var(--ease);
display: flex; flex-direction: column;
outline: none;
box-shadow: -30px 0 80px rgba(0,0,0,0.18);
}
.case-modal.is-open .case-modal__panel { transform: translateX(0); }
.case-modal__panel.is-flipping .case-modal__inner {
animation: caseFlip 0.45s var(--ease-out);
}
@keyframes caseFlip {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.case-modal__bar {
position: sticky; top: 0; z-index: 3;
display: flex; align-items: center; justify-content: space-between;
padding: 18px 28px;
background: rgba(241, 234, 224, 0.88);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-bottom: 1px solid rgba(26, 24, 20, 0.08);
gap: 16px;
}
.case-modal__nav {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px;
background: rgba(26, 24, 20, 0.05);
border-radius: 999px;
}
.case-modal__navbtn {
/* 44×44 minimum tap target per WCAG 2.5.5. The icon glyph itself
is small (14px), but the click area is generous. */
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 50%;
background: transparent;
color: var(--ink);
border: 0;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}
.case-modal__navbtn svg { width: 14px; height: 14px; }
.case-modal__navbtn:hover { background: var(--ink); color: var(--cream); }
.case-modal__navbtn:hover svg { transform: none; }
.case-modal__navbtn:active { transform: scale(0.92); }
.case-modal__progress {
font-size: 11px !important;
color: var(--mute);
letter-spacing: 0.08em;
padding: 0 6px;
min-width: 36px;
text-align: center;
}
.case-modal__foot {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
padding: 22px 28px 28px;
border-top: 1px solid rgba(26, 24, 20, 0.1);
background: var(--cream-2);
}
.case-modal__foot-btn {
display: inline-flex; align-items: center; gap: 14px;
padding: 14px 18px;
background: transparent;
border: 1px solid rgba(26, 24, 20, 0.12);
border-radius: 16px;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
min-width: 0;
}
.case-modal__foot-btn:hover {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}
.case-modal__foot-btn--prev { justify-self: start; }
.case-modal__foot-btn--next { justify-self: end; flex-direction: row-reverse; text-align: right; }
.case-modal__foot-btn svg {
width: 18px; height: 18px; flex-shrink: 0;
transition: transform 0.3s var(--ease);
}
.case-modal__foot-btn--prev:hover svg { transform: translateX(-3px); }
.case-modal__foot-btn--next:hover svg { transform: translateX(3px); }
.case-modal__foot-btn > span {
display: flex; flex-direction: column; gap: 2px;
min-width: 0; overflow: hidden;
}
.case-modal__foot-btn .mono {
font-size: 10.5px !important;
letter-spacing: 0.1em;
color: var(--mute);
transition: color 0.3s;
}
.case-modal__foot-btn:hover .mono { color: rgba(241, 234, 224, 0.6); }
.case-modal__foot-btn strong {
font-family: var(--serif);
font-size: 18px;
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 500;
letter-spacing: -0.015em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.case-modal__foot-hint {
font-size: 11px !important;
letter-spacing: 0.1em;
color: var(--mute);
white-space: nowrap;
}
@media (max-width: 640px) {
.case-modal__bar { padding: 12px 16px; gap: 8px; }
.case-modal__nav { padding: 2px; gap: 2px; }
/* Keep 44×44 even on mobile — accessibility tap target. */
.case-modal__navbtn { width: 44px; height: 44px; }
.case-modal__close-label { display: none; }
.case-modal__foot { grid-template-columns: 1fr 1fr; padding: 16px 20px 24px; }
.case-modal__foot-hint { display: none; }
.case-modal__foot-btn { padding: 10px 12px; gap: 8px; }
.case-modal__foot-btn strong { font-size: 14px; max-width: 100px; }
}
.case-modal__tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--mute);
}
.case-modal__tag::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--_accent, var(--terra));
}
.case-modal__close {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 14px 10px 18px;
border-radius: 999px;
background: var(--ink); color: var(--cream);
font-size: 13px;
transition: background 0.3s ease, transform 0.3s var(--ease);
}
.case-modal__close:hover { background: var(--terra); }
.case-modal__close-icon {
display: inline-grid; place-items: center;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(255,255,255,0.15);
}
.case-modal__close-icon svg { width: 14px; height: 14px; }
.case-modal__inner {
flex: 1; overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
.case-modal__inner::-webkit-scrollbar { width: 8px; }
.case-modal__inner::-webkit-scrollbar-thumb { background: rgba(26,24,20,0.18); border-radius: 4px; }
/* content rendered by JS */
.cs-hero {
padding: 60px 48px 48px;
background: var(--_accent, var(--terra));
color: var(--cream);
position: relative;
overflow: hidden;
}
.cs-hero__bignum {
position: absolute;
top: 10px; right: -10px;
font-family: var(--serif);
font-size: 280px; line-height: 0.8;
font-style: italic;
color: rgba(255,255,255,0.09);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
pointer-events: none;
}
.cs-hero__eyebrow {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
font-family: var(--mono);
color: rgba(255,255,255,0.7);
margin-bottom: 22px;
}
.cs-hero__eyebrow span { display: inline-flex; align-items: center; gap: 6px; }
.cs-hero__eyebrow .sep {
width: 4px; height: 4px; border-radius: 50%;
background: rgba(255,255,255,0.5);
}
.cs-hero__brand {
font-family: var(--serif);
font-size: clamp(32px, 4vw, 54px);
line-height: 1;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
margin-bottom: 8px;
}
.cs-hero__headline {
font-family: var(--serif);
font-size: clamp(22px, 2.6vw, 34px);
line-height: 1.18;
letter-spacing: -0.015em;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
color: rgba(255,255,255,0.92);
max-width: 36ch;
margin-bottom: 28px;
}
.cs-hero__meta {
display: flex; gap: 30px; flex-wrap: wrap;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,0.2);
}
.cs-hero__meta-item { display: flex; flex-direction: column; gap: 4px; }
.cs-hero__meta-item .mono { color: rgba(255,255,255,0.6); font-size: 11px; }
.cs-hero__meta-item strong {
font-family: var(--serif);
font-size: 17px; font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500;
}
.cs-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 40px 48px;
gap: 0;
border-bottom: 1px solid rgba(26, 24, 20, 0.1);
}
.cs-metric {
display: flex; flex-direction: column; gap: 8px;
padding-right: 24px;
border-right: 1px solid rgba(26, 24, 20, 0.1);
}
.cs-metric:last-child { border-right: none; }
.cs-metric__val {
font-family: var(--serif);
font-size: clamp(36px, 4vw, 56px);
line-height: 1;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 20, "wght" 400;
color: var(--_accent, var(--terra));
}
.cs-metric__label {
font-family: var(--mono);
font-size: 11px; letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mute);
}
.cs-body { padding: 48px 48px 20px; }
.cs-body__section { margin-bottom: 44px; }
.cs-body__section h4 {
font-family: var(--mono);
font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--_accent, var(--terra));
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(26, 24, 20, 0.15);
}
.cs-body__section p {
font-size: 17px; line-height: 1.6;
color: var(--ink-2);
max-width: 64ch;
}
.cs-body__section p + p { margin-top: 14px; }
.cs-samples {
padding: 20px 48px 60px;
border-top: 1px solid rgba(26, 24, 20, 0.1);
padding-top: 44px;
}
.cs-samples h4 {
font-family: var(--mono);
font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--_accent, var(--terra));
margin-bottom: 22px;
}
.cs-samples ul { display: flex; flex-direction: column; gap: 0; }
.cs-samples li {
display: flex; align-items: flex-start; gap: 18px;
padding: 18px 0;
border-bottom: 1px dashed rgba(26, 24, 20, 0.15);
font-family: var(--serif);
font-size: clamp(18px, 1.7vw, 22px);
line-height: 1.3;
letter-spacing: -0.015em;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400;
color: var(--ink);
transition: padding 0.3s var(--ease), color 0.3s;
}
.cs-samples li::before {
content: "↗";
color: var(--_accent, var(--terra));
font-style: normal;
flex-shrink: 0;
font-family: var(--mono);
font-size: 16px;
margin-top: 4px;
transition: transform 0.3s var(--ease);
}
.cs-samples li:hover { padding-left: 8px; color: var(--_accent, var(--terra)); }
.cs-samples li:hover::before { transform: translate(3px, -3px); }
.cs-cta {
padding: 30px 48px 48px;
background: var(--cream-2);
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
border-top: 1px solid rgba(26, 24, 20, 0.1);
}
.cs-cta p {
font-family: var(--serif);
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.2;
max-width: 32ch;
font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
}
.cs-cta p em { color: var(--_accent, var(--terra)); }
@media (max-width: 640px) {
.case-modal__bar { padding: 14px 20px; }
.cs-hero { padding: 40px 24px 32px; }
.cs-hero__bignum { font-size: 180px; right: -20px; }
.cs-metrics { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; }
.cs-metric { border-right: none; border-bottom: 1px solid rgba(26,24,20,0.1); padding: 0 0 20px; }
.cs-metric:last-child { border-bottom: none; padding-bottom: 0; }
.cs-body, .cs-samples, .cs-cta { padding-left: 24px; padding-right: 24px; }
.case-modal__close-label { display: none; }
}
/* ================================================
RESPONSIVE
================================================ */
@media (max-width: 1024px) {
.services__tabs { grid-template-columns: 1fr; gap: 30px; }
.services__nav { position: static; }
.svc-panel { grid-column: 1; grid-row: 1; }
.svc-panel:not(.is-active) { display: none; }
.approach__grid { grid-template-columns: 1fr; gap: 60px; }
.approach__arrow { display: none; }
.stats { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(2) { border-right: none; }
.stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(26, 24, 20, 0.1); }
}
@media (max-width: 768px) {
.nav__links, .nav__cta { display: none; }
.nav__burger { display: block; }
.hero { padding-top: 120px; padding-bottom: 80px; }
/* Kill the sticker floats on mobile — animations conflict with fixed positioning */
.sticker {
animation: none !important;
opacity: 1 !important;
--px: 0px; --py: 0px;
}
.sticker--1 {
top: auto; bottom: -30px; right: 4%;
transform: rotate(-6deg) scale(0.88);
}
.sticker--2 {
top: auto; bottom: -90px; right: 22%;
transform: rotate(4deg) scale(0.88);
}
.sticker--3, .sticker--4 { display: none; }
.hero__ctas { flex-direction: column; align-items: stretch; gap: 14px; }
.hero__ctas .btn { justify-content: center; }
.hero__scroll { display: none; }
.footer__bottom { grid-template-columns: 1fr; gap: 30px; }
.svc-panel { padding: 28px 22px; }
.svc-panel__bignum { top: 10px; right: 16px; font-size: 110px; }
.stats { grid-template-columns: 1fr; }
.stat {
border-right: none;
border-bottom: 1px solid rgba(26, 24, 20, 0.1);
padding: 48px var(--px) 40px;
}
.stat:last-child { border-bottom: none; }
.stats__divider--bottom { display: none; }
.work__title-scribble { left: 30%; }
.work-item__link { padding: 32px 0; gap: 0; }
.work-item:hover .work-item__link { padding-left: 16px; padding-right: 16px; }
.work-item__h { font-size: clamp(26px, 7vw, 42px); }
.work-item__meta { font-size: 12px; gap: 10px; }
/* approach arrow can't sit to the right on mobile */
.approach__arrow { position: static; display: block; margin-top: 16px; width: 90px; height: 60px; }
.case-modal__panel { width: 100%; border-left: 0; }
}
@media (max-width: 520px) {
:root { --px: 20px; }
.hero__title { font-size: clamp(42px, 13vw, 80px); }
/* Keep the HootHoot wordmark visible on mobile — it's the logo (the
eyes are baked into it). Just shrink it slightly to fit the
narrower nav alongside the menu trigger. */
.nav__name { display: inline-flex; font-size: 18px; }
/* Shrink the hero eyebrow tracking + size on mobile so the line
doesn't wrap at the bullet. The 'A B2B CONTENT STUDIO · SEOS + SMES'
text needs to stay on one line, but 9px was too hard to read.
Bumped to 10.5px with tighter tracking — fits comfortably on
iPhone SE width (375px) while being noticeably more legible. */
.hero__eyebrow .mono { font-size: 10.5px; letter-spacing: 0.12em; }
.cta__actions .btn { width: 100%; justify-content: center; }
/* === iPhone SE & small-phone hero compression ===
Goal: get CTAs above the fold on a 667px viewport without
editing copy or shrinking the owl. We claw back ~85px from
vertical gaps and CTA dimensions:
1. CTAs side-by-side (was column-stack at <900) saves ~60px
2. CTA padding 14→10 saves ~12px
3. Eyebrow→owl gap 24→14 saves 10px
4. Owl→title gap 12→0 saves 12px
5. Title→sub gap 24→16 saves 8px
6. Sub→CTAs gap 44→24 saves 20px
7. Hero bottom padding 56→32 saves 24px (helps fold edge)
Overall total ~140px clawback — comfortable margin. */
.hero { padding-bottom: 32px; }
.hero__eyebrow { margin-bottom: 14px; }
.hero__owl-stage { margin-bottom: 0; }
.hero__title { margin-top: 0; margin-bottom: 16px; }
.hero__sub { margin-bottom: 24px; }
/* CTAs: side-by-side row instead of stacked column.
Need to fit two buttons + gap in 335px viewport. The hero buttons
have a hover-roll effect with two text layers stacked, so they need
enough horizontal room for the longest label ("Book a strategy call")
plus the arrow. Solution: drop font to 12.5px and pad tightly so
both buttons sit naturally and the text isn't clipped. */
.hero__ctas {
flex-direction: row !important;
align-items: center !important;
justify-content: center;
gap: 8px;
flex-wrap: nowrap !important; /* prevent wrap-to-column */
}
.hero__ctas .btn {
padding: 10px 14px !important;
font-size: 12.5px !important;
width: auto !important;
min-height: 38px; /* iOS touch min-target */
white-space: nowrap;
flex: 0 0 auto; /* don't shrink — protect text */
letter-spacing: 0.01em;
}
/* Smaller arrow icon on the buttons so it doesn't dominate */
.hero__ctas .btn .btn__arrow,
.hero__ctas .btn svg { width: 12px; height: 12px; margin-left: 2px; }
.sticker--1 { bottom: -30px; right: 4%; font-size: 12px; padding: 8px 12px; }
.sticker--2 { bottom: -84px; right: 18%; font-size: 12px; padding: 8px 12px; }
/* Softer work hover on small touch screens — no padding jump */
.work-item:hover .work-item__link { padding-left: 0; padding-right: 0; }
.work-item__aside { gap: 14px; margin-top: 10px; }
.testimonial, .testim { padding: 60px 20px; }
.cta__title { font-size: clamp(36px, 10vw, 64px); }
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.line__inner { transform: none; }
.reveal { opacity: 1; transform: none; }
}
/* ============================================================
LEAD CAPTURE MODAL
============================================================
Opens from any [data-lead-open] trigger. Brand-matched: cream
panel, ink text, terra accents, Fraunces serif headings, Inter
Tight body. Editorial inputs (underline-only, no boxes) so it
reads as the same studio that designed the rest of the page,
not a generic SaaS form.
Uses .lead-* class prefix throughout to avoid any collision
with the existing .case-modal infrastructure (line ~2078 of
index.html) that may be re-enabled later.
============================================================ */
/* Backdrop covers full viewport when open. position: fixed so
it overlays any scrolled content. The body gets .lead-locked
added by JS to prevent background scrolling while open. */
.lead-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
/* Anti-flash for the next paint when opening */
opacity: 0;
transition: opacity 220ms ease;
}
.lead-modal.is-open {
display: flex;
opacity: 1;
}
/* Dim layer behind the panel. Click closes the modal. */
.lead-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(26, 24, 20, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
cursor: pointer;
}
/* Panel: cream card with shadow. Scaled in via transform on open. */
.lead-modal__panel {
position: relative;
width: min(100%, 460px);
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
overflow-y: auto;
background: var(--cream);
padding: 36px 36px 32px;
box-shadow:
0 30px 80px rgba(26, 24, 20, 0.35),
0 2px 0 rgba(26, 24, 20, 0.06);
border-radius: 2px;
/* Scale-in animation on open (the JS adds .is-open which the
parent triggers fade; this transform completes the entrance) */
transform: translateY(8px) scale(0.985);
transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
/* Hide native scrollbar styling roughness */
scrollbar-width: thin;
scrollbar-color: rgba(26, 24, 20, 0.2) transparent;
}
.lead-modal.is-open .lead-modal__panel {
transform: translateY(0) scale(1);
}
.lead-modal__panel::-webkit-scrollbar { width: 6px; }
.lead-modal__panel::-webkit-scrollbar-thumb {
background: rgba(26, 24, 20, 0.2);
border-radius: 3px;
}
.lead-modal__view {
position: relative;
}
.lead-modal__view[hidden] {
display: none;
}
/* Close button — now positioned relative to the panel directly
(not inside a view), so it sits in a consistent corner regardless
of which view (form / success) is active. z-index ensures it
stays clickable above the form fields. */
.lead-modal__close {
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
color: var(--ink-2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 160ms ease, color 160ms ease;
}
.lead-modal__close:hover {
background: rgba(26, 24, 20, 0.06);
color: var(--ink);
}
.lead-modal__close:focus-visible {
outline: 2px solid var(--terra);
outline-offset: 2px;
}
.lead-modal__close svg {
width: 14px;
height: 14px;
}
/* Eyebrow above the title — terra dot + small caps "Strategy call".
Right padding reserves space for the close button so wrapping
text doesn't run under it. */
.lead-modal__eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-right: 40px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terra);
font-weight: 500;
}
.lead-modal__eyebrow-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--terra);
}
/* Title — Fraunces serif with terra italic emphasis on "building".
Right padding reserves space for the close button. */
.lead-modal__title {
font-family: var(--serif);
font-weight: 400;
font-size: 30px;
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 8px;
padding-right: 40px;
}
.lead-modal__title em {
font-style: italic;
color: var(--terra);
font-weight: 400;
}
.lead-modal__sub {
font-size: 13px;
line-height: 1.5;
color: var(--ink-2);
margin: 0 0 22px;
}
/* ============================================================
FORM FIELDS
============================================================ */
.lead-form {
display: block;
}
.lead-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.lead-form__field {
margin-bottom: 14px;
position: relative;
}
.lead-form__row .lead-form__field {
margin-bottom: 14px;
}
.lead-form__label {
display: block;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
font-weight: 500;
margin-bottom: 6px;
}
/* Editorial underline-only inputs — match the rest of the site's
visual register (no rounded boxes, no SaaS feel). */
.lead-form__input,
.lead-form__select,
.lead-form__textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(26, 24, 20, 0.25);
padding: 8px 0 9px;
font-size: 14px;
color: var(--ink);
font-family: var(--sans);
border-radius: 0;
transition: border-color 200ms ease;
/* Avoid iOS Safari font auto-zoom on small inputs */
-webkit-appearance: none;
appearance: none;
}
.lead-form__input::placeholder,
.lead-form__textarea::placeholder {
color: rgba(26, 24, 20, 0.35);
}
.lead-form__input:focus,
.lead-form__select:focus,
.lead-form__textarea:focus {
outline: none;
border-bottom-color: var(--terra);
}
.lead-form__textarea {
resize: vertical;
min-height: 60px;
line-height: 1.45;
font-family: var(--sans);
}
/* Custom select arrow — chevron in ink, replaces native UI */
.lead-form__select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 22px;
cursor: pointer;
}
.lead-form__select:invalid {
color: rgba(26, 24, 20, 0.35);
}
/* Field error state — red underline + small message below */
.lead-form__field.is-invalid .lead-form__input,
.lead-form__field.is-invalid .lead-form__select,
.lead-form__field.is-invalid .lead-form__textarea {
border-bottom-color: var(--terra);
}
.lead-form__error {
display: block;
min-height: 14px;
margin-top: 4px;
font-size: 11px;
line-height: 1.3;
color: var(--terra);
font-weight: 500;
opacity: 0;
transition: opacity 160ms ease;
}
.lead-form__field.is-invalid .lead-form__error {
opacity: 1;
}
/* Honeypot — visually hidden but still in the DOM for bots.
Note: NOT using display:none which some bots detect; instead
using zero-size + offscreen positioning. */
.lead-form__hp {
position: absolute;
left: -10000px;
top: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.lead-form__hp input {
/* Even if a bot manages to "see" the field, this label/input
pair cannot accidentally receive focus or autofill from
real users. */
width: 1px;
height: 1px;
}
/* Submit button — solid ink with cream text */
.lead-form__submit {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 20px;
padding: 14px;
background: var(--ink);
color: var(--cream);
border: none;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 160ms ease, transform 80ms ease;
position: relative;
}
.lead-form__submit:hover:not(:disabled) {
background: #000;
}
.lead-form__submit:active:not(:disabled) {
transform: translateY(1px);
}
.lead-form__submit:focus-visible {
outline: 2px solid var(--terra);
outline-offset: 2px;
}
.lead-form__submit:disabled {
opacity: 0.7;
cursor: progress;
}
.lead-form__submit-arrow {
width: 16px;
height: 16px;
transition: transform 160ms ease;
}
.lead-form__submit:hover:not(:disabled) .lead-form__submit-arrow {
transform: translateX(2px);
}
/* Loading spinner — shown when JS sets .is-loading */
.lead-form__submit-spin {
display: none;
width: 14px;
height: 14px;
border: 1.5px solid rgba(241, 234, 224, 0.3);
border-top-color: var(--cream);
border-radius: 50%;
animation: leadSpin 800ms linear infinite;
}
.lead-form__submit.is-loading .lead-form__submit-label,
.lead-form__submit.is-loading .lead-form__submit-arrow {
visibility: hidden;
}
.lead-form__submit.is-loading .lead-form__submit-spin {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: -8px 0 0 -8px;
}
@keyframes leadSpin {
to { transform: rotate(360deg); }
}
.lead-form__foot {
margin: 14px 0 0;
font-size: 11px;
text-align: center;
color: var(--ink-2);
opacity: 0.7;
line-height: 1.5;
}
/* Top-level alert (server errors, network errors) */
.lead-form__alert {
margin-top: 14px;
padding: 10px 12px;
background: rgba(210, 73, 46, 0.08);
border-left: 2px solid var(--terra);
font-size: 12px;
line-height: 1.4;
color: var(--ink);
}
.lead-form__alert[hidden] {
display: none;
}
/* ============================================================
SUCCESS STATE
============================================================ */
.lead-modal__view--ok {
text-align: center;
padding: 12px 0 4px;
}
.lead-ok__mark {
width: 64px;
height: 64px;
margin: 8px auto 22px;
border-radius: 50%;
background: var(--cream-2);
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: var(--terra);
}
.lead-ok__mark::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(210, 73, 46, 0.18), transparent 70%);
z-index: -1;
}
.lead-ok__mark svg {
width: 28px;
height: 28px;
}
/* Pop-in animation on enter */
.lead-modal__view--ok .lead-ok__mark {
animation: leadPop 360ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes leadPop {
0% { transform: scale(0.4); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.lead-ok__title {
font-family: var(--serif);
font-weight: 400;
font-size: 30px;
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 12px;
}
.lead-ok__title em {
font-style: italic;
color: var(--terra);
font-weight: 400;
}
.lead-ok__sub {
font-size: 14px;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 26px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
/* HootHoot sign-off — eye treatment matching nav logo, but
STATIC (no blink) and refined pupil ratio for a final
editorial stamp rather than a busy/animated element. */
.lead-ok__sig {
padding-top: 22px;
margin-top: 6px;
border-top: 1px solid rgba(26, 24, 20, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.lead-ok__hh {
font-family: var(--serif);
font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 500;
font-weight: 500;
font-size: 28px;
letter-spacing: -0.01em;
line-height: 1;
color: var(--ink);
display: inline-flex;
align-items: baseline;
}
/* The eye-disc treatment, scoped to the sign-off so it does
not affect the existing nav__name-eye styling. */
.lead-ok__hh .hh-eye {
position: relative;
display: inline-block;
color: transparent;
width: 0.55em;
text-align: center;
line-height: 1;
}
.lead-ok__hh .hh-eye::before {
content: "";
position: absolute;
display: block;
width: 0.52em;
height: 0.52em;
left: 0.015em;
top: 0.32em;
border-radius: 50%;
background: var(--amber-iris);
}
.lead-ok__hh .hh-eye::after {
content: "";
position: absolute;
display: block;
width: 0.18em;
height: 0.18em;
left: 0.185em;
top: 0.49em;
border-radius: 50%;
background: var(--ink);
z-index: 1;
}
/* ============================================================
BODY-LOCK (prevents background scroll when modal open)
============================================================
Lenis smooth-scroll keeps running unless the body has
overflow:hidden. .lead-locked is added by the JS only while
the modal is open. */
body.lead-locked {
overflow: hidden;
}
/* ============================================================
RESPONSIVE — phones
============================================================ */
@media (max-width: 520px) {
.lead-modal {
padding: 16px;
align-items: flex-end; /* slide-up sheet feel on phones */
}
.lead-modal__panel {
padding: 28px 22px 24px;
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
border-radius: 2px;
}
.lead-modal__title { font-size: 26px; }
.lead-form__row {
grid-template-columns: 1fr;
gap: 0;
}
/* iOS Safari zooms inputs whose font-size is < 16px on focus.
Raise to 16px on phones to suppress auto-zoom which would
otherwise jank the modal. */
.lead-form__input,
.lead-form__select,
.lead-form__textarea {
font-size: 16px;
}
.lead-ok__title { font-size: 26px; }
.lead-ok__hh { font-size: 24px; }
}
/* Reduced motion — disable transforms and animations */
@media (prefers-reduced-motion: reduce) {
.lead-modal,
.lead-modal__panel,
.lead-form__submit,
.lead-form__submit-arrow {
transition: none;
}
.lead-modal__view--ok .lead-ok__mark { animation: none; }
}
/* ============================================================
LANE DIAGRAMS — Tanisha's redesign (Nov 2026)
============================================================
Three brand-themed diagrams that replace the original qpanel /
cluster / receipts visuals. All use cream/cream-2/ink/terra/
amber-iris from the existing palette. Animations use the
existing .reveal -> .is-in pattern (defined elsewhere) so they
integrate with the section's scroll trigger.
============================================================ */
/* ----------------------------------------------------------
LANE 01 — FLOW DIAGRAM (Search + Frontline -> Combined -> Reality)
---------------------------------------------------------- */
.lane__visual--flow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 8px;
gap: 36px;
}
.lflow {
/* Flex layout, centered as a unit. Sized to fit within visual. */
display: flex;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.lflow__inputs {
/* Taller container (280px) so cards have real presence in the
visual area. Each card fills (280-26)/2 = 127px tall — comfortable
for 2-line label + 1-2 line sub with breathing room. */
display: flex;
flex-direction: column;
gap: 26px;
height: 280px;
flex-shrink: 0;
}
.lflow__card {
background: var(--cream-2);
border: 1px solid rgba(26, 24, 20, 0.18);
border-radius: 8px;
padding: 16px 20px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
min-width: 165px;
max-width: 180px;
flex: 1 1 0;
min-height: 0;
/* Reveal: starts faint, scales/slides in on .is-in */
opacity: 0;
transform: translateY(8px) scale(0.96);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lane.is-in .lflow__card[data-step="1"] { transition-delay: 0.10s; }
.lane.is-in .lflow__card[data-step="2"] { transition-delay: 0.20s; }
.lane.is-in .lflow__card[data-step="4"] { transition-delay: 0.55s; }
.lane.is-in .lflow__card[data-step="6"] { transition-delay: 0.85s; }
.lane.is-in .lflow__card { opacity: 1; transform: translateY(0) scale(1); }
.lflow__card-label {
font-family: var(--sans);
font-size: 16px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.2;
}
.lflow__card-sub {
font-size: 13px;
line-height: 1.35;
color: var(--ink-2);
opacity: 0.85;
}
/* Combined: terra fill, cream text — focal */
.lflow__card--combined {
background: var(--terra);
border-color: var(--terra);
text-align: center;
align-items: center;
padding: 18px 18px;
min-width: 130px;
max-width: 140px;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(210, 73, 46, 0.22);
}
.lflow__card--combined .lflow__card-label,
.lflow__card--combined .lflow__card-sub { color: var(--cream); }
.lflow__card--combined .lflow__card-sub { opacity: 0.92; font-style: italic; }
/* Output: ink fill, cream text + terra accent dashes */
.lflow__card--output {
background: var(--ink);
border-color: var(--ink);
padding: 18px 20px;
min-width: 175px;
max-width: 195px;
flex-shrink: 0;
}
.lflow__card--output .lflow__card-label {
color: var(--cream);
font-size: 16px;
margin-bottom: 8px;
}
.lflow__card-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.lflow__card-list li {
position: relative;
padding-left: 14px;
font-size: 13px;
line-height: 1.45;
color: var(--cream);
opacity: 0.88;
}
.lflow__card-list li::before {
content: "";
position: absolute;
left: 0; top: 0.6em;
width: 9px; height: 1px;
background: var(--terra);
}
/* SVG arrow containers — height matches inputs container (220px)
so arrow exit points line up with input card centers exactly. */
.lflow__arrows {
flex-shrink: 0;
/* Soft terra-tinted gray so arrows harmonize with the bright terra
flowing dots — same color family but desaturated/transparent. */
color: rgba(150, 80, 60, 0.42);
}
.lflow__arrows--in {
width: 64px;
height: 280px;
}
.lflow__arrows--out {
width: 48px;
height: 32px;
}
.lflow__arrow {
stroke-dasharray: 100;
stroke-dashoffset: 100;
stroke-width: 1.4;
transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.lane.is-in .lflow__arrows--in .lflow__arrow { transition-delay: 0.32s; stroke-dashoffset: 0; }
.lane.is-in .lflow__arrows--out .lflow__arrow { transition-delay: 0.72s; stroke-dashoffset: 0; }
/* ---- Lane 01 flow animation: terra dots traveling along arrows ---- */
/* The trick: a path with stroke-dasharray "0.1 100" + round linecap
renders a SINGLE round dot of stroke-width diameter. Animating
stroke-dashoffset moves that dot along the path. With pathLength=100,
one full traversal is exactly 100 units. */
.lflow__flow {
/* Terra dot color; stroke-width = ball diameter.
Drop-shadow filter creates a subtle halo for visual presence
against the warm-toned arrows. */
stroke: var(--terra);
stroke-width: 10;
stroke-linecap: round;
fill: none;
stroke-dasharray: 0.1 100;
stroke-dashoffset: 0;
opacity: 0;
filter:
drop-shadow(0 0 3px rgba(210, 73, 46, 0.6))
drop-shadow(0 1px 4px rgba(210, 73, 46, 0.3));
}
@keyframes lflow-travel {
/* Dot enters from start, travels to end, fades out near end */
0% { stroke-dashoffset: 0; opacity: 0; }
8% { opacity: 0.95; }
85% { opacity: 0.95; }
100% { stroke-dashoffset: -100; opacity: 0; }
}
.lane.is-in .lflow__flow {
/* Animation starts after the reveal arrow finishes drawing (~1.4s).
1.6s travel duration — faster, more energetic feel. */
animation: lflow-travel 1.6s linear infinite;
animation-delay: 1.8s;
}
/* The OUT line dot starts later so it appears AFTER input dots have
reached the convergence point — feels like data flowing through. */
.lane.is-in .lflow__flow--out-line {
animation-delay: 2.4s;
}
.lflow__caption {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
line-height: 1.5;
text-align: center;
color: var(--ink-2);
max-width: 480px;
margin: 0 auto;
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
/* Caption fades in last */
opacity: 0;
transform: translateY(4px);
transition: opacity 0.5s ease 1.0s, transform 0.5s ease 1.0s;
}
.lane.is-in .lflow__caption { opacity: 0.85; transform: translateY(0); }
/* Mobile: stack vertically with rotated arrows */
@media (max-width: 720px) {
.lflow {
flex-direction: column;
gap: 14px;
/* Allow lflow content to grow naturally (no fixed height on mobile) */
height: auto;
}
/* Override the 280px desktop height — on mobile, cards size naturally
to their content. The 280px was causing input cards to stretch
enormously tall, pushing the combined pill into the output box. */
.lflow__inputs {
flex-direction: row;
gap: 10px;
width: 100%;
height: auto;
flex: 0 0 auto;
}
/* Reset desktop flex:1 1 0 → flex:0 0 auto on every card. The
desktop value sized cards to 1/3 of a 280px parent. On mobile
the parent .lflow has no fixed height, so flex:1 collapses each
card to its min-content size — which for the output card means
ONLY the label fits, while the list spills outside the dark box.
flex:none lets each card grow to wrap label + list cleanly. */
.lflow__card,
.lflow__inputs .lflow__card {
flex: 0 0 auto;
min-width: 0;
min-height: 0;
max-width: none;
padding: 14px 14px;
}
/* Inside the row, the two input cards share width equally. */
.lflow__inputs .lflow__card { flex: 1 1 0; }
.lflow__card-label { font-size: 15px; }
.lflow__card-sub { font-size: 12.5px; }
/* Combined and Output cards take more width on mobile and grow to
fit content (no min-height). */
.lflow__card--combined,
.lflow__card--output {
width: 78%;
}
.lflow__card--combined { padding: 14px 18px; }
.lflow__card--output {
padding: 18px 20px;
}
/* Output card list — show all 3 items comfortably */
.lflow__card-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.lflow__card-list li {
font-size: 13.5px;
line-height: 1.4;
}
/* Rotated down-arrows: smaller, with proper height. */
.lflow__arrows--in,
.lflow__arrows--out {
transform: rotate(90deg);
width: 40px;
height: 32px;
margin: 4px 0;
flex: 0 0 auto;
}
}
/* ----------------------------------------------------------
LANE 02 — HUB AND SPOKES (Topic authority)
---------------------------------------------------------- */
.lane__visual--hub {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
padding: 24px;
gap: 14px;
}
.lhub {
position: relative;
width: 100%;
/* Aspect ratio 1.1 (was 5/4) gives ~14% more vertical room
so corner nodes don't touch the n/s nodes vertically when
all 8 are forced to uniform 44px height. */
aspect-ratio: 1.1 / 1;
max-width: 540px;
margin: 0 auto;
}
.lhub__spokes {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* Higher opacity so thin spokes (especially vertical N/S) read clearly
as connecting the boxes to the center pill */
color: rgba(210, 73, 46, 0.75);
pointer-events: none;
}
.lhub__spoke {
/* Thicker stroke (1.5 instead of 1) so vertical 1px lines don't visually
dissolve. With vector-effect="non-scaling-stroke" stays crisp.
IMPORTANT: NO stroke-dasharray here. The combination of
stroke-dasharray + pathLength + non-uniform SVG scaling causes
vertical spokes to render visually short of their full length
(browser bug). Reveal is done with opacity instead. */
stroke-width: 1.5 !important;
opacity: 0;
transition: opacity 0.5s ease;
}
/* Stagger spoke fade-in */
.lane.is-in .lhub__spoke[data-spoke="1"] { transition-delay: 0.45s; opacity: 1; }
.lane.is-in .lhub__spoke[data-spoke="2"] { transition-delay: 0.50s; opacity: 1; }
.lane.is-in .lhub__spoke[data-spoke="3"] { transition-delay: 0.55s; opacity: 1; }
.lane.is-in .lhub__spoke[data-spoke="4"] { transition-delay: 0.60s; opacity: 1; }
.lane.is-in .lhub__spoke[data-spoke="5"] { transition-delay: 0.65s; opacity: 1; }
.lane.is-in .lhub__spoke[data-spoke="6"] { transition-delay: 0.70s; opacity: 1; }
.lane.is-in .lhub__spoke[data-spoke="7"] { transition-delay: 0.75s; opacity: 1; }
.lane.is-in .lhub__spoke[data-spoke="8"] { transition-delay: 0.80s; opacity: 1; }
/* Center pill */
.lhub__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.7);
background: var(--terra);
color: var(--cream);
padding: 14px 20px;
border-radius: 10px;
text-align: center;
display: flex;
flex-direction: column;
gap: 3px;
max-width: 152px;
box-shadow: 0 6px 18px rgba(210, 73, 46, 0.22);
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
z-index: 2;
}
.lane.is-in .lhub__center {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
transition-delay: 0.25s;
}
.lhub__center-label {
font-family: var(--sans);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
.lhub__center-sub {
font-size: 13px;
font-style: italic;
opacity: 0.92;
}
/* Question nodes — all forced to uniform 44px min-height with text
vertically centered. This makes symmetric pairs (n↔s, e↔w, ne↔sw,
nw↔se) visually identical regardless of how text wraps. */
.lhub__node {
position: absolute;
background: var(--cream-2);
border: 1px solid rgba(26, 24, 20, 0.16);
color: var(--ink);
padding: 8px 12px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 500;
line-height: 1.3;
white-space: normal;
/* FIXED width (not max-width) so all 8 nodes have the same
dimensions. This guarantees Y-axis symmetry: mirror pairs
(NW↔NE, W↔E, SW↔SE) are identical regardless of content. */
width: 130px;
min-height: 66px;
/* Flex centering so single-line text vertically centers in the
same 66px box as 2- or 3-line text. Visual symmetry guaranteed. */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
transform: scale(0.85);
opacity: 0;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
z-index: 1;
}
/* N/S nodes can be slightly wider since they sit alone in the
vertical column. Width still fixed so N.width === S.width. */
.lhub__node--n, .lhub__node--s {
width: 146px;
}
/* All nodes now share fixed width via base rule above —
no per-position width overrides needed. */
.lane.is-in .lhub__node { opacity: 1; transform: scale(1); }
.lane.is-in .lhub__node[data-node="1"] { transition-delay: 0.62s; }
.lane.is-in .lhub__node[data-node="2"] { transition-delay: 0.67s; }
.lane.is-in .lhub__node[data-node="3"] { transition-delay: 0.72s; }
.lane.is-in .lhub__node[data-node="4"] { transition-delay: 0.77s; }
.lane.is-in .lhub__node[data-node="5"] { transition-delay: 0.82s; }
.lane.is-in .lhub__node[data-node="6"] { transition-delay: 0.87s; }
.lane.is-in .lhub__node[data-node="7"] { transition-delay: 0.92s; }
.lane.is-in .lhub__node[data-node="8"] { transition-delay: 0.97s; }
/* Position each node at the corresponding spoke endpoint.
Corners at 18%/82% (was 22%/78%) so they sit further out and
don't extend horizontally into N/S's range. They share x with
E/W (also at 18%/82%) but are vertically far enough away
(top:18% vs top:50%) so no overlap. */
.lhub__node--n { top: 6%; left: 50%; transform: translate(-50%, -50%) scale(0.85); }
.lhub__node--ne { top: 18%; left: 82%; transform: translate(-50%, -50%) scale(0.85); }
.lhub__node--e { top: 50%; left: 82%; transform: translate(-50%, -50%) scale(0.85); }
.lhub__node--se { top: 82%; left: 82%; transform: translate(-50%, -50%) scale(0.85); }
.lhub__node--s { top: 94%; left: 50%; transform: translate(-50%, -50%) scale(0.85); }
.lhub__node--sw { top: 82%; left: 18%; transform: translate(-50%, -50%) scale(0.85); }
.lhub__node--w { top: 50%; left: 18%; transform: translate(-50%, -50%) scale(0.85); }
.lhub__node--nw { top: 18%; left: 18%; transform: translate(-50%, -50%) scale(0.85); }
/* Active state translations also need to match the positioning */
.lane.is-in .lhub__node--n { transform: translate(-50%, -50%) scale(1); }
.lane.is-in .lhub__node--ne { transform: translate(-50%, -50%) scale(1); }
.lane.is-in .lhub__node--e { transform: translate(-50%, -50%) scale(1); }
.lane.is-in .lhub__node--se { transform: translate(-50%, -50%) scale(1); }
.lane.is-in .lhub__node--s { transform: translate(-50%, -50%) scale(1); }
.lane.is-in .lhub__node--sw { transform: translate(-50%, -50%) scale(1); }
.lane.is-in .lhub__node--w { transform: translate(-50%, -50%) scale(1); }
.lane.is-in .lhub__node--nw { transform: translate(-50%, -50%) scale(1); }
/* ---- Lane 02 ambient highlight rotation ----
Each node + its paired spoke briefly lights up in turn, rotating
around the hub clockwise. 8s total cycle; each node "active" for
~600ms within its 1s slot (12.5% of cycle). The 90% of time when
it's not its turn, the node sits at its normal cream-2 fill. */
@keyframes lhub-node-highlight {
0%, 12%, 100% {
box-shadow: 0 0 0 rgba(210, 73, 46, 0);
border-color: rgba(26, 24, 20, 0.16);
}
3% {
box-shadow: 0 0 16px rgba(210, 73, 46, 0.45);
border-color: rgba(210, 73, 46, 0.55);
}
8% {
box-shadow: 0 0 0 rgba(210, 73, 46, 0);
border-color: rgba(26, 24, 20, 0.16);
}
}
@keyframes lhub-spoke-highlight {
0%, 12%, 100% {
stroke: rgba(210, 73, 46, 0.75);
stroke-width: 1.5;
}
3% {
stroke: rgba(210, 73, 46, 1);
stroke-width: 2.2;
}
8% {
stroke: rgba(210, 73, 46, 0.75);
stroke-width: 1.5;
}
}
/* Apply animation to all nodes — each gets a different delay so they
peak in sequence around the hub (n → ne → e → se → s → sw → w → nw) */
.lane.is-in .lhub__node {
animation: lhub-node-highlight 8s linear infinite;
animation-delay: 1.5s;
}
.lane.is-in .lhub__node--n { animation-delay: 1.5s; }
.lane.is-in .lhub__node--ne { animation-delay: 2.5s; }
.lane.is-in .lhub__node--e { animation-delay: 3.5s; }
.lane.is-in .lhub__node--se { animation-delay: 4.5s; }
.lane.is-in .lhub__node--s { animation-delay: 5.5s; }
.lane.is-in .lhub__node--sw { animation-delay: 6.5s; }
.lane.is-in .lhub__node--w { animation-delay: 7.5s; }
.lane.is-in .lhub__node--nw { animation-delay: 8.5s; }
/* Spokes pulse in sync with their paired node — same delays */
.lane.is-in .lhub__spoke {
animation: lhub-spoke-highlight 8s linear infinite;
}
.lane.is-in .lhub__spoke[data-spoke="1"] { animation-delay: 1.5s; }
.lane.is-in .lhub__spoke[data-spoke="2"] { animation-delay: 2.5s; }
.lane.is-in .lhub__spoke[data-spoke="3"] { animation-delay: 3.5s; }
.lane.is-in .lhub__spoke[data-spoke="4"] { animation-delay: 4.5s; }
.lane.is-in .lhub__spoke[data-spoke="5"] { animation-delay: 5.5s; }
.lane.is-in .lhub__spoke[data-spoke="6"] { animation-delay: 6.5s; }
.lane.is-in .lhub__spoke[data-spoke="7"] { animation-delay: 7.5s; }
.lane.is-in .lhub__spoke[data-spoke="8"] { animation-delay: 8.5s; }
.lhub__caption {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
line-height: 1.5;
text-align: center;
color: var(--ink-2);
margin: 8px auto 0;
max-width: 460px;
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.5s ease 1.05s, transform 0.5s ease 1.05s;
}
.lane.is-in .lhub__caption { opacity: 0.85; transform: translateY(0); }
@media (max-width: 720px) {
.lhub {
aspect-ratio: 4 / 5;
max-width: 320px;
}
.lhub__node { font-size: 11px; padding: 6px 9px; min-height: 40px; max-width: 96px; }
.lhub__node--e, .lhub__node--w { max-width: 80px; }
.lhub__center { padding: 10px 14px; max-width: 110px; }
.lhub__center-label { font-size: 12px; }
.lhub__center-sub { font-size: 11px; }
}
/* ----------------------------------------------------------
LANE 03 — ASCENDING BARS (Purchase intent)
---------------------------------------------------------- */
.lane__visual--bars {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
padding: 32px 20px 28px;
gap: 18px;
min-height: 460px;
}
.lbars {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 540px;
margin: 0 auto;
}
.lbars__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
align-items: end;
min-height: 360px;
width: 100%;
}
.lbar {
position: relative;
border-radius: 8px;
padding: 14px 12px;
display: flex;
flex-direction: column;
justify-content: flex-start;
transform-origin: bottom center;
overflow: visible;
min-width: 0;
}
/* Tier 1: lowest, muted cream-2 with darker text */
.lbar--01 {
background: var(--cream-2);
border: 1px solid rgba(26, 24, 20, 0.18);
height: 32%;
}
.lbar--01 .lbar__label { color: var(--ink); }
.lbar--01 .lbar__sub { color: var(--ink-2); }
/* Tier 2: mid, deeper ink-tinted (was 0.28 — too light. Bumped to
0.55 so cream text is comfortably readable). */
.lbar--02 {
background: rgba(26, 24, 20, 0.55);
border: 1px solid rgba(26, 24, 20, 0.6);
height: 52%;
}
.lbar--02 .lbar__label { color: var(--cream); }
.lbar--02 .lbar__sub { color: rgba(241, 234, 224, 0.85); }
/* Tier 3: terra (focal — "where intent is highest") */
.lbar--03 {
background: var(--terra);
border: 1px solid var(--terra);
height: 76%;
box-shadow: 0 4px 14px rgba(210, 73, 46, 0.2);
}
.lbar--03 .lbar__label,
.lbar--03 .lbar__sub { color: var(--cream); }
.lbar--03 .lbar__sub { opacity: 0.92; }
/* Tier 4: ink (apex — the destination) */
.lbar--04 {
background: var(--ink);
border: 1px solid var(--ink);
height: 100%;
}
.lbar--04 .lbar__label,
.lbar--04 .lbar__sub { color: var(--cream); }
.lbar--04 .lbar__sub { opacity: 0.85; }
/* Animate bars: scale from 0 to full height, low to high in sequence */
.lbar {
transform: scaleY(0);
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0;
position: relative; /* anchor for the apex flag */
}
.lane.is-in .lbar { transform: scaleY(1); opacity: 1; }
.lane.is-in .lbar[data-bar="1"] { transition-delay: 0.20s; }
.lane.is-in .lbar[data-bar="2"] { transition-delay: 0.36s; }
.lane.is-in .lbar[data-bar="3"] { transition-delay: 0.52s; }
.lane.is-in .lbar[data-bar="4"] { transition-delay: 0.68s; }
/* ---- Lane 03 Option G: tier glow ladder ----
Bars 03 and 04 breathe with contrasting glows. Bar 03 (terra) uses
an INK shadow (dark halo) since a terra glow on a terra bar would
blend in. Bar 04 (ink) uses a TERRA glow which pops against the
dark fill. Glows amplified for stronger visual presence. */
@keyframes lbar-pulse-3 {
0%, 100% {
box-shadow:
0 4px 14px rgba(26, 24, 20, 0.20),
0 0 0 0 rgba(26, 24, 20, 0);
}
50% {
box-shadow:
0 12px 48px rgba(26, 24, 20, 0.65),
0 0 0 6px rgba(26, 24, 20, 0.28);
}
}
@keyframes lbar-pulse-4 {
0%, 100% {
box-shadow:
0 4px 14px rgba(210, 73, 46, 0.22),
0 0 0 0 rgba(210, 73, 46, 0);
}
50% {
box-shadow:
0 12px 48px rgba(210, 73, 46, 0.75),
0 0 0 6px rgba(210, 73, 46, 0.30);
}
}
.lane.is-in .lbar--03 {
animation: lbar-pulse-3 3.5s ease-in-out infinite;
animation-delay: 1.5s;
}
.lane.is-in .lbar--04 {
animation: lbar-pulse-4 3.5s ease-in-out infinite;
animation-delay: 3.0s; /* offset 1.75s so they pulse alternately */
}
/* ---- Lane 03 Option F: apex flag at Bar 04 ----
Larger terra triangle at top center, gently bobs vertically. */
.lbar__flag {
position: absolute;
top: -14px;
left: 50%;
width: 16px;
height: 11px;
color: var(--terra);
opacity: 0;
transform: translateX(-50%) translateY(0);
transition: opacity 0.5s ease 1.4s;
filter: drop-shadow(0 2px 4px rgba(210, 73, 46, 0.3));
}
.lane.is-in .lbar__flag {
opacity: 0.95;
animation: lbar-flag-bob 3s ease-in-out infinite;
animation-delay: 1.8s;
}
@keyframes lbar-flag-bob {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-3px); }
}
.lbar__content {
display: flex;
flex-direction: column;
gap: 2px;
/* Inverted scaleY to keep text upright when the parent scales */
transform: scaleY(1);
min-width: 0;
}
.lbar__label {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
line-height: 1.25;
margin-bottom: 8px;
letter-spacing: -0.012em;
}
.lbar__sub {
font-size: 12px;
line-height: 1.4;
}
.lbars__axis {
display: flex;
align-items: center;
gap: 14px;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0;
transition: opacity 0.5s ease 0.95s;
width: 100%;
max-width: 540px;
margin: 0 auto;
}
.lane.is-in .lbars__axis { opacity: 0.7; }
.lbars__axis-low,
.lbars__axis-high { font-weight: 500; flex-shrink: 0; }
.lbars__axis-rule {
flex: 1;
height: 1px;
background: rgba(26, 24, 20, 0.2);
}
.lbars__axis-label {
font-style: italic;
font-family: var(--serif);
text-transform: none;
letter-spacing: 0;
font-size: 14px;
color: var(--ink);
flex-shrink: 0;
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
}
.lbars__caption {
font-family: var(--serif);
font-style: italic;
font-size: 15px;
line-height: 1.5;
text-align: center;
color: var(--ink-2);
margin: 14px auto 0;
max-width: 540px;
font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400;
opacity: 0;
transition: opacity 0.5s ease 1.1s;
}
.lane.is-in .lbars__caption { opacity: 0.85; }
@media (max-width: 720px) {
.lbars__row { min-height: 220px; gap: 5px; }
.lbar { padding: 10px 7px; }
.lbar__label { font-size: 11px; margin-bottom: 4px; }
/* Bumped from 10px → 11px for mobile readability. */
.lbar__sub { font-size: 11px; }
}
/* Reduced motion: skip animations, still show in final state */
@media (prefers-reduced-motion: reduce) {
.lflow__card,
.lflow__arrow,
.lflow__caption,
.lhub__spoke,
.lhub__center,
.lhub__node,
.lhub__caption,
.lbar,
.lbars__axis,
.lbars__caption {
transition: none !important;
transform: none !important;
stroke-dashoffset: 0 !important;
opacity: 1 !important;
}
.lhub__center { transform: translate(-50%, -50%) !important; }
.lhub__node--n,.lhub__node--ne,.lhub__node--e,.lhub__node--se,
.lhub__node--s,.lhub__node--sw,.lhub__node--w,.lhub__node--nw {
transform: translate(-50%, -50%) !important;
}
}