/* ============================================================
Dusty Baars · Portfolio styles
Editorial-meets-technical. Figma-inspired neutral palette, purple accent.
Light + dark mode via prefers-color-scheme. Subgrid for card alignment.
============================================================ */
:root {
/* ---- Light mode tokens — Figma UI-inspired neutral palette ---- */
--c-bg: oklch(0.978 0.002 270); /* near-white, barely-cool tint */
--c-bg-elevated: oklch(0.968 0.002 270);
--c-surface: oklch(0.942 0.003 270); /* #F0F0F0-ish */
--c-border: oklch(0.882 0.004 270); /* #E0E0E0-ish */
--c-border-soft: oklch(0.924 0.003 270);
--c-text: oklch(0.168 0.004 270); /* near-black, neutral */
--c-text-muted: oklch(0.452 0.006 270); /* #666-ish */
--c-text-soft: oklch(0.618 0.005 270); /* #999-ish */
--c-accent: oklch(0.492 0.196 261); /* #415AD7 — Dusty blue-indigo */
--c-accent-deep: oklch(0.398 0.190 261); /* deeper */
--c-accent-soft: oklch(0.930 0.038 261); /* pale indigo tint */
--c-contra: oklch(0.380 0.004 270); /* dark neutral grey — no secondary hue */
--c-contra-soft: oklch(0.920 0.003 270); /* pale neutral tint */
--c-placeholder-bg: oklch(0.942 0.003 270);
--c-placeholder-fg: oklch(0.492 0.080 261);
--c-dark-bg: oklch(0.158 0.004 270);
--c-dark-bg-deep: oklch(0.120 0.003 270);
--c-dark-text: oklch(0.910 0.003 270);
--c-dark-muted: oklch(0.668 0.004 270);
--c-dark-border: oklch(0.310 0.004 270);
--c-dark-accent: oklch(0.672 0.172 261); /* #415AD7 lifted for dark bg */
--grain-opacity: 0.030;
--grain-blend: multiply;
/* Background dot-grid (faded to the bg colour at the edges by body::after) */
--bg-dot: rgba(65, 90, 215, 0.15);
/* Type families */
--font-display: "Bricolage Grotesque", "Iowan Old Style", Cambria, serif;
--font-body: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
/* Type scale */
--t-display: clamp(1.75rem, 0.75rem + 3vw, 3.5rem);
--t-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
--t-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
--t-h3: 1.375rem;
--t-body: 1.0625rem;
--t-small: 0.9375rem;
--t-micro: 0.8125rem;
/* Spacing */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
/* Layout */
--max-w: 1180px;
--max-w-narrow: 760px;
--radius: 4px;
--max-w-reading: 65ch;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-quick: 160ms;
--dur-med: 280ms;
--dur-slow: 480ms;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
/* ---- Dark mode tokens — Figma editor dark (#1E1E1E-family) ---- */
--c-bg: oklch(0.158 0.003 270); /* #1E1E1E */
--c-bg-elevated: oklch(0.208 0.004 270); /* #2C2C2C */
--c-surface: oklch(0.242 0.004 270); /* #303030 */
--c-border: oklch(0.318 0.005 270); /* #3C3C3C */
--c-border-soft: oklch(0.268 0.004 270); /* #333333 */
--c-text: oklch(0.910 0.003 270); /* #E5E5E5 */
--c-text-muted: oklch(0.672 0.004 270); /* #A3A3A3 */
--c-text-soft: oklch(0.498 0.004 270); /* #757575 */
--c-accent: oklch(0.672 0.172 261); /* #415AD7 lifted for dark */
--c-accent-deep: oklch(0.780 0.155 261);
--c-accent-soft: oklch(0.258 0.058 261); /* dark indigo surface */
--c-contra: oklch(0.580 0.004 270); /* medium neutral grey for dark bg */
--c-contra-soft: oklch(0.240 0.003 270);
--c-placeholder-bg: oklch(0.242 0.004 270);
--c-placeholder-fg: oklch(0.618 0.090 261);
--c-dark-bg: oklch(0.112 0.002 270);
--c-dark-bg-deep: oklch(0.082 0.002 270);
--c-dark-text: oklch(0.910 0.003 270);
--c-dark-muted: oklch(0.672 0.004 270);
--c-dark-border: oklch(0.242 0.004 270);
--grain-opacity: 0.04;
--grain-blend: screen;
--bg-dot: rgba(65, 90, 215, 0.16);
color-scheme: dark;
}
}
/* Manual override classes (in case JS toggle is added later) */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
/* ----------------------------------------------------------------
Reset & base
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
font-size: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
/* viewport-fit=cover is set in each HTML file so env(safe-area-inset-top) activates.
The .nav-safe-fill fixed element (z-index 10001) fills the Dynamic Island strip
with a solid background so nothing shows through from the page. */
color-scheme: light dark;
background-color: var(--c-bg);
}
body {
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.55;
color: var(--c-text);
background-color: var(--c-bg);
font-feature-settings: "ss01", "ss02", "cv11";
font-variant-numeric: oldstyle-nums proportional-nums;
overflow-x: clip;
position: relative;
z-index: 0;
transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
html.is-dialog-open,
body.is-dialog-open {
overflow: hidden !important;
overscroll-behavior: none;
}
/* Paper grain overlay, fixed across the viewport */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
clip-path: inset(max(env(safe-area-inset-top, 0px), 44px) 0 0 0);
background-image: url("data:image/svg+xml;utf8,");
opacity: var(--grain-opacity);
mix-blend-mode: var(--grain-blend);
}
/* Dot-grid as a fixed layer: it stays put while the content scrolls over it —
that overlay IS the parallax/depth. Masked so the dots fade out softly toward
the edges (alpha fade — no colour overlay, so there is no visible ring). */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-image: radial-gradient(circle, var(--bg-dot) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(ellipse 125% 120% at 50% 42%, #000 52%, transparent 100%);
mask-image: radial-gradient(ellipse 125% 120% at 50% 42%, #000 52%, transparent 100%);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-accent); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--c-accent-soft); color: var(--c-accent-deep); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ----------------------------------------------------------------
Atoms
---------------------------------------------------------------- */
.eyebrow {
font-family: var(--font-body);
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-muted);
font-feature-settings: "ss01";
}
/* AI-probe eyebrow carries the accent, like the section kickers */
.ai-probe__eyebrow { color: var(--c-accent-deep); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: var(--s-3) var(--s-5);
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 500;
letter-spacing: 0.005em;
border-radius: 2px;
border: 1px solid transparent;
transition: background var(--dur-quick) var(--ease-out),
color var(--dur-quick) var(--ease-out),
border-color var(--dur-quick) var(--ease-out);
cursor: pointer;
}
.btn--primary {
background: var(--c-text);
color: var(--c-bg);
border-color: var(--c-text);
}
.btn--primary:hover {
background: var(--c-accent-deep);
border-color: var(--c-accent-deep);
color: var(--c-bg);
}
.btn--ghost {
background: transparent;
color: var(--c-text);
border-color: var(--c-border);
}
.btn--ghost:hover {
background: var(--c-bg-elevated);
border-color: var(--c-text);
}
/* Logo mark (sun-burst SVG, currentColor-driven) */
.logo {
display: inline-flex;
align-items: center;
gap: var(--s-2);
color: var(--c-text);
transition: color var(--dur-quick) var(--ease-out);
}
.logo svg { width: 24px; height: 24px; }
.logo--lg svg { width: 36px; height: 36px; }
.logo--sm svg { width: 16px; height: 16px; }
.logo:hover { color: var(--c-accent); }
.logo__wordmark {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
letter-spacing: -0.01em;
}
/* Placeholders */
.placeholder {
display: block;
padding: var(--s-5);
border: 1px dashed var(--c-placeholder-fg);
background: var(--c-placeholder-bg);
color: var(--c-placeholder-fg);
font-family: var(--font-mono);
font-size: var(--t-micro);
line-height: 1.5;
text-align: left;
letter-spacing: -0.005em;
}
.placeholder--photo,
.placeholder--portrait { aspect-ratio: 3 / 4; display: flex; align-items: center; }
.placeholder--portrait { aspect-ratio: 4 / 5; }
.placeholder--scene { aspect-ratio: 16 / 9; display: flex; align-items: center; }
.placeholder--case { aspect-ratio: 4 / 3; display: flex; align-items: center; }
/* Section heads */
.section-head {
display: grid;
gap: var(--s-3);
margin-bottom: var(--s-7);
max-width: 60ch;
}
.section-head--inline { margin-bottom: var(--s-5); }
.section-head__kicker {
font-family: var(--font-body);
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-accent-deep);
justify-self: start;
}
.section-head__title {
font-family: var(--font-display);
font-size: var(--t-h2);
font-weight: 500;
font-variation-settings: "opsz" 32, "wdth" 100;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--c-text);
max-width: 18ch;
}
.section-head__lede {
font-size: var(--t-body);
color: var(--c-text-muted);
max-width: 50ch;
}
/* ----------------------------------------------------------------
Sticky Top Navigation
---------------------------------------------------------------- */
.topnav {
position: sticky;
top: 0;
z-index: 10002;
background: var(--c-bg); /* solid base — mobile AND landscape iPhone are always covered */
backdrop-filter: saturate(160%) blur(10px);
-webkit-backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--c-border-soft);
display: block;
}
.topnav__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-5);
padding: var(--s-3) var(--s-6);
/* Keep the nav content clear of the Dynamic Island / notch. env is
0px without an inset, so nothing changes on desktop / non-notch browsers. */
padding-top: calc(var(--s-3) + env(safe-area-inset-top, 0px));
width: 100%;
}
/* Solid fill for the iOS status-bar / Dynamic Island inset. This is a REAL fixed
element (.nav-safe-fill in the markup), not a root ::before pseudo: Safari 26
"Liquid Glass" fails to paint a sticky element's background into the safe-area
inset AND skips a fixed fill drawn from a root pseudo-element — but it does paint
an ordinary fixed element. It sits above the nav so the dark always covers the
notch. Zero height without an inset = no effect on desktop / non-notch browsers. */
.nav-safe-fill {
position: fixed;
top: 0;
left: 0;
right: 0;
height: max(env(safe-area-inset-top, 0px), 44px);
background: var(--c-bg);
z-index: 10001;
pointer-events: none;
}
/* Case pages don't use .topnav + .nav-safe-fill — the simpler .case-nav gets
a direct padding-top to clear the Dynamic Island / status bar. */
.case-nav {
padding-top: env(safe-area-inset-top, 0px);
}
.topnav__brand {
display: inline-flex;
align-items: center;
gap: var(--s-2);
color: var(--c-text);
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 500;
letter-spacing: -0.005em;
transition: color var(--dur-quick) var(--ease-out);
}
.topnav__brand svg { width: 18px; height: 18px; }
.topnav__brand:hover { color: var(--c-accent); }
.topnav__links { display: flex; justify-content: center; }
.navmenu {
display: flex;
align-items: center;
gap: var(--s-5);
list-style: none;
margin: 0;
padding: 0;
}
.navgroup { position: relative; }
.navgroup__trigger,
.navlink {
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 500;
letter-spacing: -0.005em;
color: var(--c-text-muted);
white-space: nowrap;
transition: color var(--dur-quick) var(--ease-out);
}
.navgroup__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
.navgroup__trigger::after {
content: "";
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur-quick) var(--ease-out);
}
.navlink {
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.navgroup__trigger:hover, .navlink:hover { color: var(--c-text); }
.navlink:hover { border-bottom-color: var(--c-border); }
.navgroup:hover .navgroup__trigger, .navgroup.is-open .navgroup__trigger { color: var(--c-text); }
.navgroup:hover .navgroup__trigger::after, .navgroup.is-open .navgroup__trigger::after { transform: translateY(1px) rotate(225deg); }
.navlink.is-active { color: var(--c-accent-deep); border-bottom-color: var(--c-accent); }
.navgroup__panel {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
margin-top: 6px;
min-width: 196px;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s-3);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--radius);
box-shadow: 0 22px 48px -26px rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out), visibility var(--dur-quick);
z-index: 10;
}
.navgroup__panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
/* Click/keyboard-opened dropdown — works everywhere. On touch this never matches:
the triggers are pointer-events:none on mobile, so .navgroup.is-open is never set. */
.navgroup.is-open .navgroup__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Hover-to-open is a pointer-device affordance only. Gating it behind pointer:fine
stops iOS from latching :hover onto a tapped .navgroup and re-exposing that panel's
(invisible, position:fixed) links to tap hit-testing after the mobile menu closes. */
@media (hover: hover) and (pointer: fine) {
.navgroup:hover .navgroup__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
}
.navgroup__panel a {
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 500;
color: var(--c-text-muted);
padding: var(--s-2) var(--s-3);
border-radius: var(--radius);
white-space: nowrap;
transition: color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.navgroup__panel a:hover { color: var(--c-text); background: var(--c-surface); }
.navgroup__panel a.is-active { color: var(--c-accent-deep); }
.navmenu__foot { display: none; }
.topnav__lang { justify-self: end; }
/* Hamburger toggle — mobile only */
.topnav__toggle {
display: none;
justify-self: end;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 9px;
margin-right: calc(-1 * var(--s-2));
position: relative;
z-index: 110;
}
.topnav__toggle-bar {
display: block;
width: 100%;
height: 2px;
background: var(--c-text);
border-radius: 2px;
transition: transform var(--dur-quick) var(--ease-out), opacity var(--dur-quick) var(--ease-out);
}
.topnav__toggle.is-open .topnav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topnav__toggle.is-open .topnav__toggle-bar:nth-child(2) { opacity: 0; }
.topnav__toggle.is-open .topnav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Mobile: full-screen overlay menu ---------- */
@media (max-width: 800px) {
/* links is position:fixed on mobile, so only 3 items remain in flow
(brand · spacer · lang+toggle); a 4th column left the toggle short of
the edge. Three columns aligns the hamburger with the brand. */
/* Solid, NON-backdrop-filtered bar on phones. Safari 26 (Liquid Glass) samples a
sticky element's background/backdrop-filter at the viewport edge and fails to
paint it into the safe-area inset; a solid background avoids that, and the
.nav-safe-fill element fills the notch. Desktop keeps the frosted glass (no notch). */
.topnav { background: var(--c-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.topnav__inner { grid-template-columns: auto 1fr auto; }
.topnav__toggle { display: flex; }
.topnav__brand, .topnav__lang { position: relative; z-index: 110; }
.topnav__links {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
padding: calc(env(safe-area-inset-top) + 80px) var(--s-6) calc(env(safe-area-inset-bottom) + var(--s-7));
background: var(--c-bg);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.topnav__links.is-open { opacity: 1; visibility: visible; transform: none; }
.navmenu { flex-direction: column; align-items: stretch; gap: var(--s-6); width: 100%; }
.navgroup { position: static; }
.navgroup__trigger {
pointer-events: none;
font-size: var(--t-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-text-soft);
padding: 0 0 var(--s-1);
}
.navgroup__trigger::after { display: none; }
.navgroup__panel {
position: static;
transform: none;
opacity: 1;
/* visibility / pointer-events are deliberately NOT forced visible here.
The closed menu (.topnav__links) is position:fixed; inset:0 — it covers the
whole viewport and is hidden only by opacity:0. opacity:0 does NOT stop tap
hit-testing; only visibility:hidden / pointer-events:none do. Forcing the panel
visible used to defeat the overlay's own visibility:hidden, leaving 8
invisible-but-tappable anchor links (#build, #cases, #foundation, …) blanketing
the page in fixed bands — so a first tap on a case landed on a nav link and
jumped to its section. The panel now inherits the base visibility:hidden +
pointer-events:none while closed, and is re-enabled only when the menu is
actually open (rule below). */
min-width: 0;
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
gap: 0;
z-index: auto;
}
.topnav__links.is-open .navgroup__panel { visibility: visible; pointer-events: auto; }
.navgroup__panel::before { display: none; }
.navgroup__panel a,
.navlink {
display: block;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--c-text);
padding: var(--s-2) 0;
border: none;
border-radius: 0;
}
.navgroup__panel a:hover, .navlink:hover { background: none; color: var(--c-accent-deep); }
.navmenu__foot {
display: flex;
flex-direction: column;
gap: var(--s-2);
margin-top: auto;
padding-top: var(--s-7);
border-top: 1px solid var(--c-border-soft);
}
.navmenu__foot-label { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-soft); }
.navmenu__foot-email { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--c-text); }
.navmenu__foot-meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); color: var(--c-text-muted); }
.navmenu__foot-meta a { color: var(--c-text-muted); }
.navmenu__foot-meta a:hover { color: var(--c-accent-deep); }
.navmenu__foot-sep { color: var(--c-text-soft); }
}
/* Frosted glass only on wide desktop — iPhones never reach 1024px, so this
never fires on a device with a Dynamic Island or notch. */
@media (min-width: 1024px) {
.topnav { background: color-mix(in oklch, var(--c-bg) 88%, transparent); }
}
/* Common language toggle */
.eyebrow--lang { display: inline-flex; gap: var(--s-2); align-items: center; }
.eyebrow--lang button {
font: inherit;
font-size: var(--t-micro);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-soft);
padding: 2px var(--s-1);
border-bottom: 1px solid transparent;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.eyebrow--lang button[aria-pressed="true"] {
color: var(--c-text);
border-bottom-color: var(--c-accent);
}
.eyebrow--lang .sep { color: var(--c-text-soft); }
/* Anchor offset for the sticky nav. One mechanism only: scroll-padding-top on the
scroll container covers both anchor navigation and scrollIntoView (incl. the
foundation -> cases bridge). A :target scroll-margin-top here would STACK on top
of this and push every section 144px down instead of 72px.
The safe-area inset keeps anchors clear of the bar when it grows behind the
Dynamic Island (env resolves to 0px where there is no inset). */
html { scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
/* ----------------------------------------------------------------
Section 1 · Hero
---------------------------------------------------------------- */
.hero {
position: relative;
padding: var(--s-7) var(--s-6) var(--s-9);
padding-top: calc(var(--s-7) + env(safe-area-inset-top, 0px));
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
}
.hero__eyebrow {
display: block;
margin-bottom: var(--s-3);
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 500;
line-height: 1.45;
color: var(--c-text-muted);
max-width: 40ch;
text-wrap: balance;
}
.hero__title {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: "opsz" 96, "wdth" 100;
font-size: var(--t-display);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--c-text);
max-width: 16ch;
margin-top: var(--s-7);
}
.hero__lede {
font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
line-height: 1.45;
color: var(--c-text-muted);
max-width: 52ch;
}
.hero__body {
font-size: 1rem;
line-height: 1.6;
color: var(--c-text-soft);
max-width: 56ch;
}
.ai-probe {
padding: var(--s-9) var(--s-6);
background: var(--c-surface);
border-top: 1px solid var(--c-border-soft);
border-bottom: 1px solid var(--c-border-soft);
text-align: center;
}
.ai-probe__inner {
display: grid;
gap: var(--s-5);
max-width: var(--max-w-narrow);
margin-inline: auto;
}
.ai-probe__intro {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.ai-probe__label {
display: block;
font-family: var(--font-display);
font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--c-text);
}
.ai-probe__label em {
font-style: normal;
color: var(--c-text-muted);
}
.ai-probe__sublabel {
display: block;
font-family: var(--font-body);
font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
font-weight: 400;
line-height: 1.5;
color: var(--c-text-muted);
}
.ai-probe__form {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s-3);
align-items: stretch;
text-align: left;
}
.ai-probe__field {
display: flex;
align-items: center;
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: 2px;
padding: 0 var(--s-4);
transition: border-color var(--dur-quick) var(--ease-out);
}
.ai-probe__field:focus-within { border-color: var(--c-accent); }
.ai-probe__field input {
flex: 1;
font: inherit;
font-size: var(--t-small);
border: none;
outline: none;
background: transparent;
padding: var(--s-4) 0;
color: var(--c-text);
font-size: var(--t-body);
}
.ai-probe__field input::placeholder { color: var(--c-text-soft); }
/* Mobile: stack input + button so the input's intrinsic width can't push the
form past the viewport (which caused the horizontal overflow / nav slack). */
@media (max-width: 600px) {
.ai-probe__form { grid-template-columns: 1fr; }
.ai-probe__field,
.ai-probe__field input { min-width: 0; }
}
.ai-probe__output {
display: grid;
gap: var(--s-4);
padding-top: var(--s-5);
border-top: 1px solid var(--c-border-soft);
text-align: left;
}
.ai-probe__output[hidden] { display: none; }
.trace {
display: grid;
gap: var(--s-2);
font-family: var(--font-mono);
font-size: var(--t-micro);
color: var(--c-text-soft);
counter-reset: trace;
}
.trace__step {
display: flex;
gap: var(--s-3);
align-items: baseline;
opacity: 0;
transform: translateY(4px);
transition: opacity var(--dur-med) var(--ease-out),
transform var(--dur-med) var(--ease-out);
}
.trace__step::before {
counter-increment: trace;
content: counter(trace, decimal-leading-zero);
color: var(--c-accent-deep);
font-weight: 600;
}
.trace__step.is-active {
opacity: 1;
transform: translateY(0);
color: var(--c-text);
animation: trace-pulse 1.6s ease-in-out infinite;
}
@keyframes trace-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.trace__step.is-done { color: var(--c-text-muted); opacity: 0.7; }
.trace__step.is-done::before { color: var(--c-text-soft); }
.ai-probe__result { font-size: var(--t-body); color: var(--c-text); line-height: 1.55; min-height: 4em; }
.ai-probe__result h4 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
margin-bottom: var(--s-3);
letter-spacing: -0.01em;
}
.ai-probe__result p { margin-bottom: var(--s-3); }
.ai-probe__result ul { display: grid; gap: var(--s-2); padding-left: var(--s-5); margin-bottom: var(--s-3); }
.ai-probe__result li { position: relative; padding-left: var(--s-3); }
.ai-probe__result li::before { content: "→"; position: absolute; left: -1rem; color: var(--c-contra); }
.stack-layer__items li::before { color: var(--c-contra); }
.ai-probe__disclosure {
font-size: var(--t-micro);
color: var(--c-text-soft);
font-style: italic;
}
/* Mobile: hero placeholder lives below content, centered with a sensible width */
.hero__placeholder {
margin-top: var(--s-6);
max-width: min(100%, 420px);
margin-inline: auto;
}
.hero__portrait {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
border-radius: 2px;
filter: contrast(1.04) saturate(0.92);
}
/* Subtle editorial frame — thin border + offset shadow */
.hero__placeholder:has(.hero__portrait) {
position: relative;
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08), 0 8px 20px -10px rgba(0, 0, 0, 0.04);
border-radius: 2px;
}
.hero__placeholder:has(.hero__portrait)::after {
content: "";
position: absolute;
inset: 0;
border-radius: 2px;
box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08);
pointer-events: none;
}
@media (min-width: 900px) {
.hero {
grid-template-columns: 1.4fr 1fr;
grid-template-areas:
"eyebrow eyebrow"
"title placeholder"
"lede placeholder"
"body placeholder";
column-gap: var(--s-9);
align-items: start;
}
.hero__eyebrow { grid-area: eyebrow; }
.hero__title { grid-area: title; margin-top: var(--s-7); }
.hero__lede { grid-area: lede; }
.hero__body { grid-area: body; }
.hero__placeholder {
grid-area: placeholder;
align-self: start;
justify-self: end;
max-width: 380px;
margin: 0;
margin-top: var(--s-7);
}
}
/* ----------------------------------------------------------------
Section 2 · Positioning
---------------------------------------------------------------- */
.positioning {
background: var(--c-surface);
border-block: 1px solid var(--c-border-soft);
padding: var(--s-10) var(--s-6);
}
.positioning__inner {
max-width: var(--max-w);
margin: 0 auto;
display: grid;
gap: var(--s-6);
}
.positioning__line {
display: grid;
grid-template-columns: 4rem 1fr;
gap: var(--s-4);
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
line-height: 1.3;
letter-spacing: -0.012em;
color: var(--c-text);
max-width: 56ch;
}
.positioning__line .num {
font-family: var(--font-mono);
font-size: var(--t-small);
color: var(--c-accent);
font-feature-settings: "tnum";
padding-top: 0.5em;
letter-spacing: 0.05em;
}
/* ----------------------------------------------------------------
Section 3 · Foundation
---------------------------------------------------------------- */
.foundation {
padding: var(--s-10) var(--s-6);
max-width: var(--max-w);
margin: 0 auto;
}
.foundation__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-7) var(--s-6);
margin-bottom: var(--s-9);
}
/* Fluency as a 4x2 grid on desktop (8 boxes, two rows of four). */
@media (min-width: 900px) {
.foundation__grid { grid-template-columns: repeat(4, 1fr); }
}
/* Subgrid alignment so titles share a baseline across cards */
@supports (grid-template-rows: subgrid) {
.foundation__grid {
grid-auto-rows: auto auto 1fr auto;
}
.comp {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
}
}
.comp {
display: grid;
gap: var(--s-3);
border-top: 1px solid var(--c-border);
padding-top: var(--s-5);
}
.comp__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.375rem;
letter-spacing: -0.012em;
color: var(--c-text);
}
.comp__body {
font-size: var(--t-small);
color: var(--c-text-muted);
line-height: 1.55;
max-width: 42ch;
}
.comp__filter {
margin-top: var(--s-2);
justify-self: start;
font-family: var(--font-body);
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--c-accent-deep);
border-bottom: 1px solid var(--c-accent-soft);
padding-bottom: 2px;
transition: color var(--dur-quick) var(--ease-out),
border-color var(--dur-quick) var(--ease-out);
}
.comp__filter:hover { border-color: var(--c-accent); }
.foundation__role {
border: 1px solid var(--c-border-soft);
border-radius: 2px;
padding: var(--s-7);
background: var(--c-bg-elevated);
display: grid;
gap: var(--s-6);
}
@media (min-width: 760px) {
.foundation__role {
grid-template-columns: 1fr 2fr;
gap: var(--s-8);
align-items: start;
}
}
.foundation__role p {
font-family: var(--font-display);
font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.35;
}
.foundation__role ul {
display: grid;
gap: 0;
}
.foundation__role li {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: var(--s-3);
font-size: var(--t-small);
color: var(--c-text-muted);
align-items: baseline;
padding-block: var(--s-4);
border-top: 1px solid var(--c-border-soft);
}
.foundation__role li:last-child { border-bottom: 1px solid var(--c-border-soft); }
.foundation__role li span:first-child {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-soft);
}
.foundation__role strong { color: var(--c-text); font-weight: 500; }
/* Profile 3: visually marked as "this is me" */
.foundation__role .profile--me {
color: var(--c-text);
}
.foundation__role .profile--me span:first-child {
color: var(--c-accent-deep);
display: flex;
flex-direction: column;
gap: 3px;
}
.foundation__role .profile--me span:first-child::after {
content: "→ dit ben ik";
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.04em;
text-transform: lowercase;
color: var(--c-accent-deep);
opacity: 0.7;
}
html[lang="en"] .foundation__role .profile--me span:first-child::after {
content: "→ this is me";
}
/* ----------------------------------------------------------------
Section 4 · Training (subgrid for body alignment)
---------------------------------------------------------------- */
.training {
background: var(--c-surface);
border-block: 1px solid var(--c-border-soft);
padding: var(--s-10) var(--s-6);
}
.training > * { max-width: var(--max-w); margin-inline: auto; }
.training__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-6);
margin-block: var(--s-5) var(--s-7);
}
/* Four columns on desktop (Teaching has four cards). */
@media (min-width: 1000px) {
.training__grid { grid-template-columns: repeat(4, 1fr); }
}
@supports (grid-template-rows: subgrid) {
.training__grid { grid-auto-rows: auto 1fr; }
.training__card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
}
}
.training__card {
display: grid;
gap: var(--s-3);
padding-top: var(--s-4);
border-top: 1px solid var(--c-border);
}
.training__card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.25rem;
letter-spacing: -0.01em;
align-self: start;
}
.training__card p {
font-size: var(--t-small);
color: var(--c-text-muted);
line-height: 1.6;
}
.training__placeholder { max-width: var(--max-w); margin: 0 auto; }
/* ----------------------------------------------------------------
Section 5 · Leadership (subgrid for body alignment)
---------------------------------------------------------------- */
.leadership {
padding: var(--s-10) var(--s-6);
max-width: var(--max-w);
margin: 0 auto;
}
.leadership__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-6);
margin-top: var(--s-5);
}
/* Four columns on desktop (Leadership has four cards). */
@media (min-width: 1000px) {
.leadership__grid { grid-template-columns: repeat(4, 1fr); }
}
@supports (grid-template-rows: subgrid) {
.leadership__grid { grid-auto-rows: auto auto 1fr; }
.leadership__card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
}
.leadership__card {
display: grid;
gap: var(--s-3);
padding-top: var(--s-4);
border-top: 1px solid var(--c-border);
}
.leadership__kicker {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-accent-deep);
}
.leadership__card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.25rem;
letter-spacing: -0.012em;
line-height: 1.2;
align-self: start;
color: var(--c-text);
}
.leadership__card p {
font-size: var(--t-small);
color: var(--c-text-muted);
line-height: 1.6;
}
/* ----------------------------------------------------------------
Section 6 · Filter + Cases
---------------------------------------------------------------- */
.cases {
padding: var(--s-10) var(--s-6);
max-width: var(--max-w);
margin: 0 auto;
min-height: 800px;
}
/* ---- Approach Pitch (Homepage) ---- */
.home-approach {
padding: var(--s-10) var(--s-6);
max-width: var(--max-w);
margin: 0 auto;
}
.home-approach__card {
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-soft);
border-radius: 4px;
padding: var(--s-8) var(--s-7);
transition: transform var(--dur-med) var(--ease-out),
border-color var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.home-approach__card:hover {
box-shadow: 0 20px 40px -25px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
border-color: var(--c-border);
}
}
.home-approach__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-8);
align-items: center;
}
@media (min-width: 900px) {
.home-approach__grid {
grid-template-columns: 1.25fr 1fr;
gap: var(--s-9);
}
}
.home-approach__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.85rem, 1.6rem + 1.2vw, 2.75rem);
line-height: 1.15;
letter-spacing: -0.022em;
color: var(--c-text);
margin-top: var(--s-3);
margin-bottom: var(--s-4);
}
.home-approach__lede {
font-size: var(--t-body);
color: var(--c-text-muted);
max-width: 50ch;
line-height: 1.5;
margin-bottom: var(--s-6);
}
.home-approach__pillars {
display: flex;
flex-direction: column;
gap: var(--s-5);
margin-bottom: var(--s-6);
border-top: 1px solid var(--c-border-soft);
padding-top: var(--s-5);
}
@media (min-width: 600px) {
.home-approach__pillars {
flex-direction: row;
gap: var(--s-6);
}
}
.home-approach__pillar {
flex: 1;
}
.home-approach__pillar-title {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--c-accent-deep);
margin-bottom: var(--s-2);
}
.home-approach__pillar-desc {
font-size: var(--t-small);
line-height: 1.5;
color: var(--c-text-muted);
}
.home-approach__cta-wrap {
margin-top: var(--s-5);
}
.home-approach__cta-wrap a {
position: relative;
z-index: 5;
}
.home-approach__visual {
display: flex;
justify-content: center;
align-items: center;
}
.approach-visual__canvas {
width: 100%;
max-width: 360px;
background: color-mix(in oklch, var(--c-bg) 45%, transparent);
border: 1px solid var(--c-border-soft);
border-radius: 4px;
padding: var(--s-5);
position: relative;
overflow: hidden;
}
.approach-roof-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1.25 / 1;
}
.roof-svg {
width: 100%;
height: 100%;
}
.svg-lbl {
font-family: var(--font-mono);
font-size: 7.5px;
fill: var(--c-text-soft);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
}
.svg-lbl--main {
font-family: var(--font-body);
font-size: 8.5px;
font-weight: 600;
fill: var(--c-text);
letter-spacing: 0;
}
.svg-lbl--sub {
font-family: var(--font-mono);
font-size: 6.5px;
fill: var(--c-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.svg-lbl--accent {
fill: var(--c-accent-deep);
}
.pulse-ring {
transform-origin: 160px 165px;
animation: pulse-ring-anim 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring-anim {
0% { transform: scale(0.6); opacity: 0; }
50% { opacity: 0.45; }
100% { transform: scale(1.35); opacity: 0; }
}
.roof-outline {
stroke-dasharray: 4;
animation: roof-draw 40s linear infinite;
}
@keyframes roof-draw {
to { stroke-dashoffset: -80; }
}
.roof-connection {
opacity: 0.85;
}
.roof-connection--t2 {
stroke: var(--c-accent);
filter: drop-shadow(0 0 2px var(--c-accent-soft));
}
/* ---- Approach Page Training List ---- */
.approach-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--c-border-soft);
margin-top: var(--s-5);
}
.approach-item {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding-block: var(--s-5);
border-bottom: 1px solid var(--c-border-soft);
}
.approach-item h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.25rem;
letter-spacing: -0.01em;
color: var(--c-text);
margin: 0;
}
.approach-item p {
font-family: var(--font-body);
font-size: var(--t-body);
color: var(--c-text-muted);
line-height: 1.6;
margin: 0;
max-width: 55ch;
}
/* ---- Writing / whitepapers ---- */
.writing {
padding: var(--s-10) var(--s-6);
max-width: var(--max-w);
margin: 0 auto;
}
.paper {
display: block;
max-width: var(--max-w-narrow);
margin-top: var(--s-7);
padding: var(--s-7);
border: 1px solid var(--c-border);
border-radius: 4px;
background: var(--c-bg-elevated);
color: inherit;
transition: transform var(--dur-med) var(--ease-out),
border-color var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out);
}
.paper:hover {
transform: translateY(-4px);
border-color: var(--c-border);
box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.55);
}
.paper__eyebrow {
display: block;
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-accent-deep);
}
.paper__title {
margin-top: var(--s-3);
font-family: var(--font-display);
font-size: var(--t-h2);
line-height: 1.05;
transition: color var(--dur-quick) var(--ease-out);
}
.paper:hover .paper__title { color: var(--c-accent-deep); }
.paper__sub {
margin-top: var(--s-2);
font-size: var(--t-body);
color: var(--c-text-muted);
}
.paper__detail {
margin-top: var(--s-4);
font-size: var(--t-body);
line-height: 1.6;
color: var(--c-text);
max-width: var(--max-w-reading);
}
.paper__meta {
display: block;
margin-top: var(--s-4);
font-size: var(--t-small);
color: var(--c-text-soft);
}
.paper__cta {
display: inline-block;
margin-top: var(--s-5);
font-weight: 600;
color: var(--c-accent-deep);
position: relative;
z-index: 5;
padding: 6px 0;
}
/* Deep dives — one per whitepaper pillar (forthcoming) */
.deepdives { margin-top: var(--s-8); }
.deepdives__head {
display: flex;
align-items: baseline;
gap: var(--s-3) var(--s-4);
flex-wrap: wrap;
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--c-border-soft);
}
.deepdives__label {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.deepdives__note { font-size: var(--t-small); color: var(--c-text-soft); }
.pillars {
list-style: none;
margin: var(--s-6) 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
}
@media (min-width: 720px) {
.pillars { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7); }
}
.pillar {
display: grid;
gap: var(--s-2);
padding: var(--s-5);
border: 1px solid var(--c-border-soft);
border-radius: 4px;
background: var(--c-bg-elevated);
}
.pillar__num {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.06em;
color: var(--c-text-soft);
}
.pillar__title {
font-family: var(--font-display);
font-size: var(--t-h3);
line-height: 1.15;
color: var(--c-text);
}
.pillar__blurb {
font-size: var(--t-small);
line-height: 1.55;
color: var(--c-text-muted);
}
.pillar__soon {
justify-self: start;
margin-top: var(--s-2);
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.04em;
color: var(--c-accent-deep);
padding: 3px var(--s-2);
border: 1px solid var(--c-border);
border-radius: 2px;
}
/* Filter chips: subtle outlined pills with clear interactive states */
.filter {
display: flex;
flex-direction: column;
padding-block: var(--s-5) var(--s-7);
margin-bottom: var(--s-7);
border-bottom: 1px solid var(--c-border-soft);
}
.filter__axis {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding-block: var(--s-5);
}
.filter__axis--secondary {
border-top: 1px solid var(--c-border-soft);
}
.filter__label {
font-family: var(--font-body);
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-text-soft);
}
.filter__axis--secondary .filter__label {
color: var(--c-accent);
letter-spacing: 0.07em;
}
.filter__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.chip {
position: relative;
padding: 6px 13px;
margin: 0;
border: 1px solid var(--c-border);
border-radius: 4px;
background: transparent;
font-family: var(--font-body);
font-weight: 500;
font-size: 0.875rem;
letter-spacing: -0.005em;
color: var(--c-text-muted);
white-space: nowrap;
transition: background var(--dur-quick) var(--ease-out),
color var(--dur-quick) var(--ease-out),
border-color var(--dur-quick) var(--ease-out);
}
.chip:hover {
background: var(--c-bg-elevated);
border-color: var(--c-text-muted);
color: var(--c-text);
}
.chip[aria-pressed="true"] {
background: var(--c-accent-soft);
border-color: var(--c-accent);
color: var(--c-accent-deep);
}
.chip[aria-pressed="true"]::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
margin-right: 7px;
vertical-align: 0.18em;
}
.chip--outcome {
border-radius: 100px;
}
.filter__meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-4);
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.04em;
color: var(--c-text-soft);
padding-top: var(--s-2);
}
.filter__clear {
font-family: var(--font-body);
font-size: var(--t-small);
letter-spacing: 0;
text-transform: none;
color: var(--c-accent-deep);
border-bottom: 1px solid var(--c-accent-soft);
padding-bottom: 1px;
}
/* Cases grid */
.cases__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
}
@media (min-width: 760px) {
.cases__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-7); }
}
.case { transition: opacity var(--dur-med) var(--ease-out); }
.case.is-hidden { display: none; }
.case__link { display: grid; gap: var(--s-4); color: inherit; }
@media (hover: hover) and (pointer: fine) { .case__link:hover .case__title { color: var(--c-accent-deep); } }
.case__visual { overflow: hidden; }
.case__body { display: grid; gap: var(--s-3); }
.case__index {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-text-soft);
}
.case__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.875rem);
line-height: 1.15;
letter-spacing: -0.018em;
color: var(--c-text);
transition: color var(--dur-quick) var(--ease-out);
}
.case__problem, .case__outcome {
font-size: var(--t-small);
line-height: 1.55;
color: var(--c-text-muted);
max-width: 42ch;
}
.case__outcome { color: var(--c-text); font-weight: 500; }
.case__tags {
display: flex;
flex-wrap: wrap;
gap: var(--s-1) var(--s-2);
margin-top: var(--s-2);
}
.case__tags li {
font-family: var(--font-body);
font-size: var(--t-micro);
font-weight: 500;
color: var(--c-text-soft);
padding: 3px var(--s-2);
background: var(--c-surface);
border-radius: 3px;
letter-spacing: -0.005em;
}
.case__tag--outcome {
color: var(--c-accent-deep) !important;
background: var(--c-accent-soft) !important;
}
/* ----------------------------------------------------------------
Section 6 · Heritage (subgrid for body alignment)
---------------------------------------------------------------- */
.heritage {
background: var(--c-surface);
border-block: 1px solid var(--c-border-soft);
padding: var(--s-10) var(--s-6) var(--s-8);
}
.heritage > * { max-width: var(--max-w); margin-inline: auto; }
/* The foundation content is a centred --max-w column. The title and kicker
span its full width; the intro, competences and Origin align to the
description column — the right two-thirds of that same column — so every
block shares its left edge with the company descriptions below. */
.heritage .section-head__title { max-width: none; }
.heritage > .section-head__lede { margin-top: 0; margin-bottom: var(--s-6); }
@media (min-width: 760px) {
/* Left-aligned text column at two-thirds width, pinned to the same left edge
as the title (the --max-w column's left); whitespace falls on the right. */
.heritage > .section-head__lede,
.heritage > .foundation-competences {
box-sizing: border-box;
max-width: calc(min(100%, var(--max-w)) * 2 / 3);
margin-left: calc((100% - min(100%, var(--max-w))) / 2);
margin-right: auto;
}
}
/* Four stacked editorial rows, hairline dividers between them.
Desktop: logo + name + period left, fuller description right. */
.heritage__list {
display: grid;
margin: var(--s-6) auto 0; /* centred in the --max-w column, like the other blocks */
padding: 0;
list-style: none;
border-top: 1px solid var(--c-border);
}
.heritage__row {
display: grid;
gap: var(--s-4);
padding: var(--s-6) 0;
border-bottom: 1px solid var(--c-border);
}
@media (min-width: 760px) {
.heritage__row {
grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
gap: var(--s-7);
align-items: start;
}
}
.heritage__head {
display: grid;
gap: var(--s-3);
align-content: start;
}
/* Full-colour brand logo anchors the top-left of each row. */
.heritage__logo {
display: block;
width: auto;
align-self: start;
}
/* Heights tuned per logo so the icon marks (Shell, Roche) carry the
same optical weight as the wider wordmarks (Philips, ING). */
.heritage__logo--shell { height: 46px; }
.heritage__logo--roche { height: 40px; }
.heritage__logo--philips { height: 24px; }
.heritage__logo--ing { height: 30px; }
.heritage__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-1);
}
.heritage__name {
font-family: var(--font-body);
font-weight: 600;
font-size: 1.1875rem;
letter-spacing: -0.005em;
color: var(--c-text);
margin-bottom: var(--s-2);
}
.heritage__years {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.06em;
color: var(--c-accent-deep);
}
.heritage__desc {
font-size: var(--t-small);
color: var(--c-text-muted);
line-height: 1.65;
max-width: none; /* fill the column so the right edge lines up with the intro/origin */
}
/* Origin: a full paragraph, not a small footnote. */
.heritage__earlier {
margin-top: var(--s-6);
padding: var(--s-6);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-soft);
border-radius: 4px;
}
.heritage__earlier-title {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--t-normal);
letter-spacing: -0.005em;
margin-bottom: var(--s-2);
color: var(--c-text);
}
.heritage__origin {
font-size: var(--t-small);
color: var(--c-text-muted);
line-height: 1.55;
max-width: none;
}
/* ----------------------------------------------------------------
Section 7 · About
---------------------------------------------------------------- */
.about {
padding: var(--s-10) var(--s-6);
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
}
@media (min-width: 880px) {
.about {
grid-template-columns: 320px 1fr;
gap: var(--s-9);
align-items: start;
}
.about__photo {
/* Aligns top of photo with first line of about body text */
margin-top: calc(var(--t-micro) * 1.4 + 4px + var(--s-3) + var(--t-h2) * 1.1 + var(--s-5));
}
}
.about__photo {
max-width: 320px;
position: relative;
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08), 0 8px 20px -10px rgba(0, 0, 0, 0.04);
border-radius: var(--radius);
}
.about__portrait {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
filter: contrast(1.04) saturate(0.92);
}
.about__photo:has(.about__portrait)::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius);
box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08);
pointer-events: none;
}
.about__body { display: grid; gap: var(--s-4); max-width: 62ch; }
.about__body p { font-size: var(--t-body); line-height: 1.6; color: var(--c-text); }
.about__body strong { font-weight: 600; }
.about__more {
justify-self: start;
margin-top: var(--s-2);
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 500;
color: var(--c-accent-deep);
transition: color var(--dur-quick) var(--ease-out);
}
.about__more:hover { color: var(--c-accent); }
/* ----------------------------------------------------------------
Section 8 · Contact (always dark, even in light mode)
---------------------------------------------------------------- */
.contact {
background: var(--c-dark-bg);
color: var(--c-dark-text);
padding: var(--s-10) var(--s-6) var(--s-7);
}
.contact > * { max-width: var(--max-w); margin-inline: auto; }
.contact__title {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: var(--t-h1);
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: var(--s-7);
max-width: none;
white-space: nowrap;
color: var(--c-dark-text);
}
.contact__line {
margin-top: 0;
margin-bottom: var(--s-8);
font-size: 1.0625rem;
color: var(--c-dark-muted, rgba(255,255,255,0.7));
}
.contact__line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contact__line a:hover { color: var(--c-dark-text); }
/* Availability echo on the (dark) contact section, just under the email line. */
.contact__availability {
margin-top: calc(-1 * var(--s-5));
margin-bottom: var(--s-8);
margin-inline: 0; /* override .contact > * { margin-inline:auto } so it left-aligns with the email line */
max-width: 60ch;
font-size: var(--t-small);
line-height: 1.55;
color: var(--c-dark-muted, rgba(255,255,255,0.7));
}
@media (max-width: 600px) {
.contact__title { white-space: normal; max-width: 14ch; }
}
.contact__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--s-6);
margin-bottom: var(--s-7);
}
@supports (grid-template-rows: subgrid) {
.contact__grid { grid-auto-rows: auto 1fr auto auto; }
.contact__action {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
}
}
.contact__action {
display: grid;
gap: var(--s-3);
padding-top: var(--s-4);
border-top: 1px solid var(--c-dark-border);
}
.contact__action h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.375rem;
letter-spacing: -0.012em;
color: var(--c-dark-text);
}
.contact__action p {
font-size: var(--t-small);
color: var(--c-dark-muted);
line-height: 1.55;
}
.contact__action .btn { justify-self: start; margin-top: var(--s-2); align-self: start; }
.contact__action .btn--primary {
background: var(--c-dark-text);
color: var(--c-dark-bg);
border-color: var(--c-dark-text);
}
.contact__action .btn--primary:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark-bg);
}
.contact__action .btn--ghost {
background: transparent;
color: var(--c-dark-text);
border-color: var(--c-dark-border);
}
.contact__action .btn--ghost:hover {
border-color: var(--c-dark-text);
background: rgb(255 255 255 / 0.04);
}
.contact__note {
font-family: var(--font-mono);
font-size: var(--t-micro);
color: var(--c-dark-muted);
opacity: 0.6;
margin-top: var(--s-2);
}
/* Footer */
.contact__footer {
border-top: 1px solid var(--c-dark-border);
padding-top: var(--s-6);
display: grid;
gap: var(--s-5);
}
.contact__footer-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-5);
flex-wrap: wrap;
}
.contact__sig {
display: flex;
align-items: center;
gap: var(--s-2);
}
.contact__sig .logo { color: var(--c-dark-text); }
.contact__sig .logo:hover { color: var(--c-accent); }
.contact__sig .logo svg { width: 18px; height: 18px; }
.contact__name {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--c-dark-text);
}
.contact__links {
display: flex;
gap: var(--s-5);
flex-wrap: wrap;
font-family: var(--font-body);
font-size: var(--t-small);
}
.contact__links a {
color: var(--c-dark-muted);
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.contact__links a:hover {
color: var(--c-dark-text);
border-bottom-color: var(--c-accent);
}
.contact__meta {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.04em;
color: var(--c-dark-muted);
opacity: 0.7;
}
/* ----------------------------------------------------------------
Rich probe result (replaces the simple HTML response)
---------------------------------------------------------------- */
.probe-result {
display: grid;
gap: var(--s-5);
}
.probe-result__head {
display: grid;
gap: var(--s-2);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--c-border-soft);
}
.probe-result__company {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.75rem;
letter-spacing: -0.022em;
line-height: 1.05;
color: var(--c-text);
margin: 0;
}
.probe-result__meta {
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.04em;
color: var(--c-text-soft);
text-transform: uppercase;
}
.probe-result__meta span + span::before {
content: "·";
margin-right: var(--s-3);
color: var(--c-text-soft);
}
.probe-section { display: grid; gap: var(--s-3); }
.probe-kicker {
font-family: var(--font-body);
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-accent-deep);
}
/* Tags */
.probe-tags {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.probe-tag {
font-family: var(--font-body);
font-size: var(--t-micro);
font-weight: 500;
padding: 3px 8px;
border: 1px solid var(--c-border);
border-radius: 3px;
color: var(--c-text-muted);
background: var(--c-bg);
}
/* Observations */
.probe-observations {
display: grid;
gap: var(--s-3);
counter-reset: obs;
padding-left: 2.5rem;
margin: 0;
list-style: none;
}
.probe-observations li {
position: relative;
font-size: var(--t-body);
line-height: 1.55;
color: var(--c-text);
}
.probe-observations li::before {
counter-increment: obs;
content: counter(obs, decimal-leading-zero);
position: absolute;
left: -2.5rem;
top: 0.15em;
font-family: var(--font-mono);
font-size: var(--t-small);
letter-spacing: 0.04em;
color: var(--c-contra);
}
/* Architecture stack: three flat layered cards (Surface / Skills / Models) */
.stack-diagram {
display: grid;
gap: var(--s-2);
margin-top: var(--s-2);
}
.stack-layer {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--s-3) var(--s-4);
align-items: start;
padding: var(--s-4) var(--s-5);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-soft);
border-radius: 4px;
}
.stack-layer--1 { background: oklch(0.966 0.014 30); }
.stack-layer--2 { background: oklch(0.950 0.022 30); }
.stack-layer--3 { background: oklch(0.933 0.032 30); }
@media (prefers-color-scheme: dark) {
.stack-layer--1 { background: oklch(0.212 0.032 30); }
.stack-layer--2 { background: oklch(0.228 0.044 30); }
.stack-layer--3 { background: oklch(0.246 0.058 30); }
}
.stack-layer__edge {
display: grid;
gap: var(--s-1);
align-content: start;
}
.stack-layer__num {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--c-accent);
}
.stack-layer__label {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.125rem;
letter-spacing: -0.014em;
color: var(--c-text);
}
.stack-layer__body { display: grid; gap: var(--s-2); }
.stack-layer__items {
display: flex;
flex-wrap: wrap;
gap: 5px 7px;
list-style: none;
padding: 0;
margin: 0;
}
.stack-layer__items li {
padding: 3px 9px;
background: var(--c-bg);
border: 1px solid var(--c-border-soft);
border-radius: 3px;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
color: var(--c-text);
}
.stack-layer__rationale {
font-size: 0.8125rem;
font-style: italic;
color: var(--c-text-muted);
line-height: 1.45;
margin: 0;
}
@media (max-width: 560px) {
.stack-layer { grid-template-columns: 1fr; gap: var(--s-3); }
}
/* Roadmap SVG chart (12-week phase visualization) */
.roadmap-wrap {
margin-top: var(--s-1);
padding: var(--s-4) 0 var(--s-2);
overflow-x: auto;
}
.roadmap {
width: 100%;
min-width: 480px;
height: auto;
display: block;
}
.roadmap__title {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
fill: var(--c-accent-deep);
}
.roadmap__axis { stroke: var(--c-border); stroke-width: 1; }
.roadmap__tick line { stroke: var(--c-border); stroke-width: 1; }
.roadmap__tick text {
fill: var(--c-text-soft);
font-family: var(--font-mono);
font-size: 10px;
text-anchor: middle;
letter-spacing: 0.04em;
}
/* 3D isometric phase bars: front face + top face (lighter) + side face (darker) */
.roadmap__phase { transition: opacity var(--dur-quick) var(--ease-out); }
.roadmap__phase:hover { opacity: 0.92; }
.roadmap__phase.phase-1 .face-front { fill: oklch(0.55 0.130 32); }
.roadmap__phase.phase-1 .face-top { fill: oklch(0.66 0.115 36); }
.roadmap__phase.phase-1 .face-side { fill: oklch(0.42 0.135 28); }
.roadmap__phase.phase-2 .face-front { fill: oklch(0.45 0.135 30); }
.roadmap__phase.phase-2 .face-top { fill: oklch(0.56 0.125 34); }
.roadmap__phase.phase-2 .face-side { fill: oklch(0.34 0.140 26); }
.roadmap__phase.phase-3 .face-front { fill: oklch(0.36 0.140 28); }
.roadmap__phase.phase-3 .face-top { fill: oklch(0.46 0.130 32); }
.roadmap__phase.phase-3 .face-side { fill: oklch(0.26 0.140 24); }
@media (prefers-color-scheme: dark) {
.roadmap__phase.phase-1 .face-front { fill: oklch(0.62 0.130 32); }
.roadmap__phase.phase-1 .face-top { fill: oklch(0.74 0.120 36); }
.roadmap__phase.phase-1 .face-side { fill: oklch(0.48 0.135 28); }
.roadmap__phase.phase-2 .face-front { fill: oklch(0.70 0.140 30); }
.roadmap__phase.phase-2 .face-top { fill: oklch(0.82 0.130 34); }
.roadmap__phase.phase-2 .face-side { fill: oklch(0.54 0.140 26); }
.roadmap__phase.phase-3 .face-front { fill: oklch(0.80 0.150 28); }
.roadmap__phase.phase-3 .face-top { fill: oklch(0.90 0.135 32); }
.roadmap__phase.phase-3 .face-side { fill: oklch(0.62 0.150 24); }
}
.roadmap__bar-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
color: oklch(0.97 0.012 80);
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (prefers-color-scheme: dark) {
.roadmap__bar-label { color: oklch(0.14 0.010 50); }
}
/* Timeline (90 days) */
.probe-timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--s-4);
list-style: none;
padding: 0;
margin: 0;
}
.probe-timeline li {
display: grid;
gap: var(--s-2);
padding-top: var(--s-3);
border-top: 2px solid var(--c-border);
position: relative;
}
.probe-timeline li[data-phase="1"] { border-top-color: oklch(0.62 0.105 38); }
.probe-timeline li[data-phase="2"] { border-top-color: oklch(0.50 0.130 32); }
.probe-timeline li[data-phase="3"] { border-top-color: oklch(0.38 0.130 28); }
@media (prefers-color-scheme: dark) {
.probe-timeline li[data-phase="1"] { border-top-color: oklch(0.55 0.115 38); }
.probe-timeline li[data-phase="2"] { border-top-color: oklch(0.65 0.135 32); }
.probe-timeline li[data-phase="3"] { border-top-color: oklch(0.78 0.150 28); }
}
.probe-timeline__weeks {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-accent-deep);
}
.probe-timeline h5 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.0625rem;
letter-spacing: -0.012em;
line-height: 1.2;
margin: 0;
color: var(--c-text);
}
.probe-timeline p {
font-size: var(--t-small);
color: var(--c-text-muted);
line-height: 1.55;
margin: 0;
}
/* Case callout */
.probe-case {
padding: var(--s-4) var(--s-5);
background: var(--c-accent-soft);
border-radius: 4px;
}
.probe-case a {
display: grid;
gap: var(--s-1);
color: var(--c-accent-deep);
}
.probe-case a:hover { color: var(--c-accent); }
.probe-case__kicker {
font-family: var(--font-body);
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-accent-deep);
opacity: 0.85;
}
.probe-case__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.125rem;
letter-spacing: -0.014em;
}
.probe-case__reason {
font-size: var(--t-small);
font-style: italic;
color: var(--c-accent-deep);
opacity: 0.9;
margin: 0;
}
/* ================================================================
ANIMATION SYSTEM
All states prefixed with html.js — graceful fallback if JS fails.
Only transform + opacity animated (GPU path only).
================================================================ */
:root {
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}
/* ---- Scroll progress bar ---- */
.scroll-progress {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
height: 3px;
background: var(--c-accent);
transform-origin: left center;
-webkit-transform-origin: left center;
transform: scaleX(0) translateZ(0);
-webkit-transform: scaleX(0) translateZ(0);
z-index: 100003;
opacity: 1;
pointer-events: none;
will-change: transform;
}
/* ---- Topnav: fade in without upward shift — translateY(-10px) would move
the nav above y=0 during the animation, exposing the Dynamic Island area. */
.js .topnav {
opacity: 0;
transition: opacity 520ms var(--ease-out-quint);
}
.js .topnav.is-entered {
opacity: 1;
}
/* ---- Hero entrance ---- */
/* Eyebrow slides in from left */
.js .hero__eyebrow {
opacity: 0;
transform: translateX(-16px);
transition: opacity 460ms var(--ease-out-quint),
transform 460ms var(--ease-out-quint);
}
.js .hero__eyebrow.is-entered { opacity: 1; transform: none; }
/* Title: the signature moment. Editorial curtain-reveal. */
.js .hero__title {
clip-path: inset(0 0 100% 0);
transform: translateY(8px);
transition: clip-path 700ms var(--ease-out-quint),
transform 700ms var(--ease-out-quint);
}
.js .hero__title.is-entered {
clip-path: inset(0 0 0% 0);
transform: none;
}
/* Lede fades up */
.js .hero__lede {
opacity: 0;
transform: translateY(14px);
transition: opacity 540ms var(--ease-out-quint),
transform 540ms var(--ease-out-quint);
}
.js .hero__lede.is-entered { opacity: 1; transform: none; }
/* AI probe fades in — no translateY: it's a full-bleed bg section, vertical shift looks broken */
.js .ai-probe {
opacity: 0;
transition: opacity 600ms var(--ease-out-quint);
}
.js .ai-probe.is-entered { opacity: 1; }
/* Placeholder: comes in from right */
.js .hero__placeholder {
opacity: 0;
transform: translateX(18px);
transition: opacity 520ms var(--ease-out-quint),
transform 520ms var(--ease-out-quint);
}
.js .hero__placeholder.is-entered { opacity: 1; transform: none; }
/* ---- Universal scroll-reveal ---- */
/*
.reveal fade + rise
.reveal--left fade + slide from left
.reveal--clip curtain wipe (for large editorial titles)
--stagger: adds n × 65ms delay (set via JS inline style)
*/
.js .reveal {
opacity: 0;
/* Pure vertical rise — no scale. A centre-origin scale() shrinks wider blocks
inward, so each section settled its LEFT edge from a few px further in,
reading as a horizontal wiggle as you scroll past. */
transform: translateY(26px);
transition: opacity 600ms var(--ease-out-quint),
transform 600ms var(--ease-out-quint);
transition-delay: calc(var(--stagger, 0) * 70ms);
will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--left { transform: translateX(-22px); }
.js .reveal--left.is-visible { transform: none; }
.js .reveal--scale {
transform: scale(0.96) translateY(14px);
}
.js .reveal--scale.is-visible { transform: none; }
/* Clip reveal for large section titles (contact, etc.) */
.js .reveal--clip {
clip-path: inset(0 0 100% 0);
transform: translateY(6px);
opacity: 1;
transition: clip-path 640ms var(--ease-out-quint),
transform 640ms var(--ease-out-quint);
transition-delay: calc(var(--stagger, 0) * 68ms);
}
.js .reveal--clip.is-visible {
clip-path: inset(0 0 0% 0);
transform: none;
}
/* Section kicker: rust line draws in left → right */
.section-head__kicker {
position: relative;
display: inline-block;
padding-bottom: 4px;
}
.section-head__kicker::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: var(--c-contra);
transform: scaleX(0);
transform-origin: left center;
transition: transform 480ms var(--ease-out-quint);
}
.js .section-head__kicker.kicker-visible::after { transform: scaleX(1); }
/* ---- Case card hover — lift + image zoom ---- */
.case__link {
transition: transform 260ms var(--ease-out-quint);
will-change: transform;
}
.case__visual { overflow: hidden; }
/* Zoom placeholder (real images get same treatment) */
.case__visual .placeholder {
transition: transform 420ms var(--ease-out-quint);
}
.case__visual img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* reserve space (images are 1824x1026) so lazy-load doesn't shift the page */
transition: transform 420ms var(--ease-out-quint);
}
.case__index { transition: color var(--dur-quick) var(--ease-out); }
.case__outcome { transition: color var(--dur-quick) var(--ease-out); }
/* Hover effects ONLY on devices that genuinely hover (mouse/trackpad). On touch,
iOS applies :hover on the FIRST tap instead of following the link, so the lift +
zoom would swallow that tap — you'd have to tap again, and on these tall cards the
shift reads as the page "jumping" down toward Foundation. Gating with (hover: hover)
lets the first tap navigate straight to the case. */
@media (hover: hover) and (pointer: fine) {
.cases-tab:hover { color: var(--c-accent); }
.writing-tab:hover { color: var(--c-accent); }
.case__link:hover { transform: translateY(-5px); }
.case__link:hover .case__visual .placeholder { transform: scale(1.03); }
.case__link:hover .case__visual img { transform: scale(1.03); }
.case__link:hover .case__index { color: var(--c-accent); }
.case__link:hover .case__outcome { color: var(--c-accent-deep); }
}
/* ---- Filter chip dot: scale in, not snap ---- */
.chip::before {
transform: scale(0);
transform-origin: center;
transition: transform 200ms var(--ease-out-quint);
opacity: 0;
}
.chip[aria-pressed="true"]::before {
transform: scale(1);
opacity: 1;
}
/* ---- Filter animated transitions ---- */
/*
JS adds .is-leaving before hiding (transition out),
then .is-hidden (display:none) after transition ends.
For showing: removes .is-hidden, adds .is-entering (initial),
then removes .is-entering (triggers transition to default state).
*/
.case { transition: opacity 240ms var(--ease-out-quint), transform 240ms var(--ease-out-quint); }
.js .cases__grid.is-filtering .case {
transition: opacity 240ms var(--ease-out-quint), transform 240ms var(--ease-out-quint);
transition-delay: 0ms !important;
}
.case.is-leaving { opacity: 0; transform: scale(0.97) translateY(4px); pointer-events: none; }
.case.is-entering { opacity: 0; transform: scale(0.97) translateY(8px); pointer-events: none; }
.case.is-hidden { display: none; }
/* ---- Probe result: sections stagger in ---- */
.js .probe-result__head,
.js .probe-section,
.js .probe-case {
opacity: 0;
transform: translateY(12px);
transition: opacity 400ms var(--ease-out-quint),
transform 400ms var(--ease-out-quint);
transition-delay: var(--probe-delay, 0ms);
}
.js .probe-result.is-revealed .probe-result__head,
.js .probe-result.is-revealed .probe-section,
.js .probe-result.is-revealed .probe-case {
opacity: 1;
transform: none;
}
/* ---- Roadmap bars: grow from left ---- */
@keyframes bar-grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes face-appear {
from { opacity: 0; }
to { opacity: 1; }
}
.roadmap--animate .face-front {
transform-box: fill-box;
transform-origin: left center;
animation: bar-grow 580ms var(--ease-out-quint) both;
animation-delay: var(--bar-delay, 0ms);
}
.roadmap--animate .face-top,
.roadmap--animate .face-side {
animation: face-appear 260ms var(--ease-out-quint) both;
animation-delay: calc(var(--bar-delay, 0ms) + 380ms);
}
/* ---- Comp filter button: arrow nudge ---- */
.comp__filter {
display: inline-flex;
align-items: center;
gap: 0.35em;
}
.comp__filter::after {
content: "→";
display: inline-block;
transition: transform 200ms var(--ease-out-quint);
font-style: normal;
}
.comp__filter:hover::after { transform: translateX(4px); }
/* ---- btn: subtle press feedback ---- */
.btn {
transition: background var(--dur-quick) var(--ease-out),
color var(--dur-quick) var(--ease-out),
border-color var(--dur-quick) var(--ease-out),
transform 120ms var(--ease-out-quint);
}
.btn:active { transform: scale(0.975); }
/* ---- Logo: gentle spin hint on hover ---- */
.logo svg {
transition: transform 400ms var(--ease-out-quint);
}
.logo:hover svg { transform: rotate(15deg); }
/* ---- Topnav links: stagger in after nav enters ---- */
.js .topnav__links a {
opacity: 0;
transform: translateY(-5px);
transition: opacity 360ms var(--ease-out-quint),
transform 360ms var(--ease-out-quint),
color var(--dur-quick) var(--ease-out),
border-color var(--dur-quick) var(--ease-out);
transition-delay: var(--link-delay, 0ms);
}
.js .topnav.is-entered .topnav__links a {
opacity: 1;
transform: none;
}
/* ---- Positioning lines: slide from left ---- */
.js .positioning__line {
opacity: 0;
transform: translateX(-24px);
transition: opacity 560ms var(--ease-out-quint),
transform 560ms var(--ease-out-quint);
transition-delay: calc(var(--stagger, 0) * 110ms);
}
.js .positioning__line.is-visible { opacity: 1; transform: none; }
/* ---- Heritage years: accent pulse when card appears ---- */
.heritage__years {
transition: color var(--dur-med) var(--ease-out);
}
/* ----------------------------------------------------------------
Reduced motion
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
transition-delay: 0ms !important;
}
html { scroll-behavior: auto; }
}
/* ================================================================
V3 · New component styles
================================================================ */
/* Hero proof strip */
.hero__proof {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.04em;
color: var(--c-text-soft);
opacity: 0.75;
}
/* Hero availability line: one quiet, readable line under the proof strip.
grid-column:1 keeps it in the left text column (the hero is a 2-col grid on
desktop; without this it auto-places into the right/portrait column). */
.hero__availability {
grid-column: 1 / 2;
font-family: var(--font-body);
font-size: var(--t-small);
line-height: 1.5;
color: var(--c-text-muted);
max-width: 54ch;
}
/* ============================================================
SCENARIOS / What I solve - restored (V3 recovery, from pre-V3 6a2cd86)
============================================================ */
.scenarios {
/* Lighter bottom padding: the collapsed cards make the section short,
so the standard --s-10 bottom + Fluency's top read as too much space. */
padding: var(--s-10) var(--s-6) var(--s-7);
max-width: var(--max-w);
margin: 0 auto;
--scn-accent: var(--c-accent-deep);
}
/* Pull Fluency up so the break after the (short) cards is one clean gap,
not two stacked section paddings. */
.scenarios + .foundation { padding-top: var(--s-8); }
/* Two columns side by side on desktop, one stacked column on mobile. */
.scenarios__board {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
}
@media (min-width: 760px) {
.scenarios__board { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); align-items: start; }
}
.scenarios__col { display: flex; flex-direction: column; gap: var(--s-4); }
/* ---- Mini-card + trigger ---- */
.scenario__item {
background: var(--c-surface);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius);
overflow: hidden;
transition: border-color var(--dur-quick) var(--ease-out),
background var(--dur-quick) var(--ease-out);
}
.scenario__item:hover { border-color: var(--c-border); }
.scenario__item.is-open { border-color: var(--c-border); }
.scenario__heading { margin: 0; }
.scenario__trigger {
display: flex;
align-items: flex-start;
gap: var(--s-3);
width: 100%;
text-align: left;
padding: var(--s-5);
background: none;
border: none;
cursor: pointer;
color: var(--c-text);
}
.scenario__trigger:focus-visible {
outline: 2px solid var(--scn-accent);
outline-offset: -2px;
border-radius: var(--radius);
}
.scenario__num {
flex: none;
margin-top: 0.4em; /* drop to the title's first line */
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.08em;
color: var(--c-text-soft);
transition: color var(--dur-quick) var(--ease-out);
}
.scenario__item.is-open .scenario__num { color: var(--scn-accent); }
.scenario__head-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.scenario__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--c-text);
}
/* Metrics line as a subtitle: gives each card body without opening it.
Reserve two lines so every collapsed mini-card keeps the same height. */
.scenario__sub {
font-family: var(--font-mono);
font-weight: 400; /* the span sits inside the