— same clearance,
reached through their own page class. */
.case-study .section__inner,
.article .section__inner,
.blog-page .section__inner,
.contact-page .section__inner,
.playground .section__inner,
.about .section__inner {
padding-top: calc(var(--nav-h) + var(--section-pad) * 0.62);
}
/* Restrained background alternation. Applied to three homepage sections
only — enough to break the page into movements, few enough that it never
reads as stripes. */
.section--tint {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* --------------------------------------------------------------------------
2. SECTION HEADERS
Every section opens on the same hairline, so the eye learns where a new
idea starts without needing a coloured band or an oversized gap.
-------------------------------------------------------------------------- */
.section__intro {
border-top: 1px solid var(--border-strong);
padding-top: var(--space-6);
margin-bottom: var(--space-8);
}
.hero .section__intro { border-top: none; padding-top: 0; }
.eyebrow {
letter-spacing: 0.12em;
margin-bottom: var(--space-5);
}
.section__title {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
max-width: 18ch;
text-wrap: balance;
}
/* Titles that are a full sentence rather than a phrase need room to breathe
past the 18ch lockup used for short section names. */
.why .section__title,
.contact .section__title,
.playground-teaser .section__title { max-width: 24ch; }
.section__intro .section__title + .section__subhead {
margin-top: var(--space-5);
max-width: 62ch;
color: var(--text-dim);
}
/* --------------------------------------------------------------------------
3. BUTTONS
Off the pill and onto an 8px radius. The pill is what made the old CTAs
read as a marketing template; it survives only where it is genuinely a
chip (.tag, the hero availability marker). Glow is replaced by a single
soft drop and a 1px inner highlight, so the button reads as a physical
surface rather than a light source.
-------------------------------------------------------------------------- */
.btn {
border-radius: var(--radius-sm);
padding: 13px 22px;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
letter-spacing: -0.005em;
line-height: 1.2;
transition: transform var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard),
background var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard),
color var(--duration-base) var(--ease-standard);
}
.btn [aria-hidden="true"] {
display: inline-block;
transition: transform var(--duration-base) var(--ease-out);
}
.btn:hover [aria-hidden="true"] { transform: translateX(3px); }
.btn--primary {
background: var(--lime);
color: var(--bg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38),
0 4px 16px rgba(200, 255, 61, 0.13);
}
.btn--primary:hover {
/* A lighter tint of the same lime, not a second brand colour. */
background: #D5FF63;
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 8px 24px rgba(200, 255, 61, 0.2);
}
.btn--primary:active { transform: translateY(0); }
.btn--secondary {
border: 1px solid var(--border-strong);
background: rgba(255, 255, 255, 0.016);
color: var(--text);
}
.btn--secondary:hover {
transform: translateY(-1px);
border-color: var(--text-faint);
background: rgba(255, 255, 255, 0.045);
}
.btn--secondary:active { transform: translateY(0); }
/* Hero-scale CTAs only. */
.btn--lg { padding: 16px 28px; font-size: var(--fs-body); }
/* --------------------------------------------------------------------------
4. CARDS AND SURFACES
A flat fill at this size reads as a block of colour; the top-lit --sheen
gradient gives large surfaces a light direction, which is most of what
separates a designed panel from a div with a background.
-------------------------------------------------------------------------- */
.card {
background-color: var(--surface);
background-image: var(--sheen);
border-color: var(--border);
border-radius: var(--radius);
}
.card:hover {
border-color: var(--border-strong);
background-color: var(--surface-2);
transform: none;
}
/* Only cards that are actually links get the lift — a lift on a static card
is motion with nothing behind it. */
a.card:hover { transform: translateY(-3px); }
.tag {
border-color: var(--border-strong);
color: var(--text-dim);
padding: 5px var(--space-3);
}
/* --------------------------------------------------------------------------
5. NAVIGATION
Three states rather than one. The default (below) is the safe state: if
script.js never boots, the header stays a legible translucent bar exactly
as before. .is-flush (top of page) and .is-stuck (scrolled) are layered on
top by JS and are pure enhancement.
-------------------------------------------------------------------------- */
.nav {
background: rgba(10, 11, 8, 0.72);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--border);
transition: height var(--duration-base) var(--ease-standard),
background var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard);
}
.nav.is-flush {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
}
.nav.is-stuck {
--nav-h: 62px;
background: rgba(10, 11, 8, 0.86);
border-bottom-color: var(--border);
box-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}
/* The logo is the Home link on every page, but it had no hover or focus
response at all, so nothing signalled that it was interactive. A soft lift
on the mark is enough. Deliberately no movement and no rotation: the mark
stands in for the G of the wordmark, so anything that shifts it breaks the
word itself. */
.nav__logo .nav__mark {
transition: filter var(--duration-base) var(--ease-standard);
}
.nav__logo:hover .nav__mark,
.nav__logo:focus-visible .nav__mark {
filter: brightness(1.2) drop-shadow(0 0 9px rgba(200, 255, 61, 0.5));
}
.nav__logo {
font-size: clamp(17px, 1.4vw, 19px);
letter-spacing: 0.02em;
transition: opacity var(--duration-base) var(--ease-standard);
}
.nav__logo:hover { opacity: 0.86; }
.nav__links { gap: var(--space-5); }
.nav__links a {
position: relative;
display: inline-block;
padding: 7px 0;
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--text-dim);
}
.nav__links a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--lime);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-base) var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--text); }
/* The header CTA is a wayfinding element, not the page's main call to
action, so it is deliberately smaller than an in-page button. */
.nav__cta {
padding: 9px 17px;
font-size: var(--fs-small);
box-shadow: none;
}
.nav__cta:hover { box-shadow: 0 6px 18px rgba(200, 255, 61, 0.18); }
/* --------------------------------------------------------------------------
6. HERO
-------------------------------------------------------------------------- */
.hero {
padding-bottom: var(--space-9);
min-height: min(100vh, 880px);
}
/* Fine technical grid, masked to a soft ellipse so it never reads as a
tiled background. Sits under the glow: ::before is the first child, so
the glow element paints over it. */
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(to right, rgba(242, 244, 239, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(242, 244, 239, 0.04) 1px, transparent 1px);
background-size: 76px 76px;
-webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 32%, #000, transparent 76%);
mask-image: radial-gradient(ellipse 85% 65% at 50% 32%, #000, transparent 76%);
pointer-events: none;
}
/* Was 32% lime across 65% of the viewport — a wash rather than a light
source. Tighter, dimmer, and pulled behind the orbit so it reads as the
hub glowing rather than the page being tinted green. */
.hero__glow {
width: 44%;
height: 58%;
right: -6%;
filter: blur(100px);
background: radial-gradient(ellipse at center,
rgba(200, 255, 61, 0.19),
rgba(200, 255, 61, 0.055) 46%,
transparent 70%);
}
/* The old hero split the row into text | visual, which capped the headline
column at ~640px. At the new display size a single line of the headline
measures ~930px, so a two-column hero could only ever render it four lines
deep, broken mid-phrase. The text now runs the full measure and the orbit
moves behind it, bleeding off the right edge — the headline gets the
two-line lockup it was written for, and the visual reads as atmosphere
rather than as a graphic sitting in a box next to some words. */
.hero__inner {
display: block;
position: relative;
}
.hero__text {
position: relative;
z-index: 1;
max-width: min(100%, 1000px);
}
.hero__visual {
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
z-index: 0;
width: min(44vw, 540px);
max-width: none;
margin: 0;
opacity: 0.9;
pointer-events: none;
}
@media (max-width: 1240px) {
.hero__visual { width: min(38vw, 420px); right: -20px; opacity: 0.6; }
}
/* Availability marker as a real chip: bordered, on its own surface, sized
like a UI object rather than floating mono text. */
.hero .eyebrow {
display: inline-flex;
width: fit-content;
align-items: center;
gap: var(--space-2);
padding: 7px 15px 7px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
background: rgba(200, 255, 61, 0.035);
color: var(--text-dim);
letter-spacing: 0.1em;
margin-bottom: var(--space-6);
}
.hero__title { margin-bottom: var(--space-6); }
/* Force the two-line lockup rather than leaving the break to the wrap
point, so the accent line always starts flush left. */
.hero__title .accent { display: block; }
.hero__subhead {
color: var(--text-dim);
font-weight: 400;
font-size: var(--fs-body-lg);
line-height: 1.62;
max-width: 54ch;
margin-bottom: var(--space-7);
}
.hero__actions { gap: var(--space-4); }
/* Orbit: finer strokes, dimmer nodes, a heavier hub. Reads as an instrument
rather than a decoration. */
.hero__ring { stroke: rgba(242, 244, 239, 0.075); }
.hero__spoke { stroke: rgba(242, 244, 239, 0.06); }
.hero__node { filter: drop-shadow(0 0 5px rgba(200, 255, 61, 0.45)); }
.hero__hub {
width: 84px;
height: 84px;
background: var(--surface);
border-color: var(--border-strong);
box-shadow: 0 0 0 8px rgba(200, 255, 61, 0.025),
0 0 44px rgba(200, 255, 61, 0.16);
}
.hero__hub img { width: 32px; }
/* Stats: out of the bordered box and onto a rail. Three lime ticks on a
single hairline give the hero a base without adding another card. */
.hero__stats {
margin-top: var(--space-9);
gap: 0;
background: none;
border: none;
border-top: 1px solid var(--border);
border-radius: 0;
overflow: visible;
}
.stat-card {
position: relative;
background: none;
padding: var(--space-6) var(--space-6) 0 var(--space-6);
border-left: 1px solid var(--border);
}
.stat-card:first-child { border-left: none; padding-left: 0; }
.stat-card::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
width: 28px;
height: 1px;
background: var(--lime);
}
.stat-card:first-child::before { left: 0; }
.stat-card__number {
color: var(--text);
font-size: var(--fs-h4);
letter-spacing: -0.01em;
margin-bottom: var(--space-3);
}
.stat-card__label { color: var(--text-dim); max-width: 34ch; }
/* --------------------------------------------------------------------------
7. PROBLEM — two-column editorial split
The one section on the page that asks the reader to agree before anything
is offered, so it gets the only asymmetric text layout on the site: the
claim holds the left rail while the argument scrolls past it.
-------------------------------------------------------------------------- */
.why .why__body {
border-left: none;
padding-left: 0;
margin-top: 0;
max-width: 60ch;
font-size: var(--fs-body-lg);
}
.why .why__lede {
margin: var(--space-2) 0;
padding: var(--space-2) 0 var(--space-2) var(--space-6);
border-left: 2px solid var(--lime);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
}
@media (min-width: 981px) {
.why .section__inner {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
column-gap: var(--space-9);
align-items: start;
}
.why .section__intro {
margin-bottom: 0;
position: sticky;
top: calc(var(--nav-h) + var(--space-7));
}
/* Both columns start on the same hairline, so the split reads as one spread
rather than two blocks that happen to sit next to each other. */
.why .why__body {
border-top: 1px solid var(--border-strong);
padding-top: var(--space-6);
}
.why .section__title { max-width: 14ch; }
}
/* --------------------------------------------------------------------------
8. CAPABILITIES — connected system panel
Six separate floating cards said "six services". One panel divided by
hairlines says "six parts of one system", which is the actual claim the
section is making.
-------------------------------------------------------------------------- */
.ecosystem__hub-mark {
width: 56px;
height: 56px;
border-color: var(--border-strong);
box-shadow: 0 0 0 7px rgba(200, 255, 61, 0.028),
0 0 34px rgba(200, 255, 61, 0.14);
}
.ecosystem__hub-mark img { width: 24px; height: auto; }
/* Enough clearance for the connector curves to actually fan out between
the hub and the top edge of the panel; at --space-8 they read as one line. */
.ecosystem__hub { margin-bottom: var(--space-9); }
.ecosystem__grid {
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.ecosystem__grid .card {
position: relative;
border: none;
border-radius: 0;
background-color: var(--surface);
background-image: none;
padding: var(--space-7) var(--space-6);
gap: var(--space-4);
}
.ecosystem__grid .card:hover,
.ecosystem__grid a.card:hover {
transform: none;
background-color: var(--surface-2);
}
/* Lime edge grows from the left on hover — the only motion in the panel, so
it reads as "this one" rather than as ambient animation. */
.ecosystem__node::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--lime);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-base) var(--ease-out);
}
.ecosystem__node:hover::after,
.ecosystem__node:focus-visible::after { transform: scaleX(1); }
.ecosystem__node-icon {
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text-dim);
transition: color var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard),
background var(--duration-base) var(--ease-standard);
}
.ecosystem__node:hover .ecosystem__node-icon {
color: var(--lime);
border-color: var(--lime);
background: var(--lime-faint);
}
.ecosystem__node-title { font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
.ecosystem__node-desc { font-size: var(--fs-small); max-width: 44ch; }
/* --------------------------------------------------------------------------
9. PROOF — work feature
The screenshot used to be cropped to fill half the card, which read as
texture. Matted inside a frame with a real shadow, it reads as a product
shot of something that exists. The breakdown becomes a spec table: mono
label column, hairline rows.
-------------------------------------------------------------------------- */
.work-features { gap: var(--space-7); }
.work-feature.card {
border-top: 2px solid var(--lime);
border-radius: var(--radius-lg);
background-image: none;
grid-template-columns: 1.02fr 1fr;
}
.work-feature.card:hover { transform: none; background-color: var(--surface); }
/* clip rather than hidden: both crop the card to its radius, but clip does
not create a scroll container, which is what lets the screenshot below
stick while the breakdown beside it scrolls past. */
.work-feature.card { overflow: clip; }
.work-feature__media {
border-right: 1px solid var(--border);
background: radial-gradient(ellipse 120% 90% at 50% 0%, var(--surface-2), var(--bg) 78%);
padding: var(--space-7);
display: flex;
align-items: flex-start;
justify-content: center;
}
.work-feature__media img {
/* The breakdown column runs several times taller than a 2:1 screenshot, so
centring it left most of this panel empty. Sticky keeps the thing being
described on screen for as long as the description lasts. */
position: sticky;
top: calc(var(--nav-h) + var(--space-6));
width: 100%;
height: auto;
object-fit: contain;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}
.work-feature__body { padding: var(--space-7); }
.work-feature__meta {
padding-bottom: var(--space-4);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--border);
}
.work-feature__title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.work-feature__disclaimer {
border-left: 2px solid var(--border-strong);
padding-left: var(--space-3);
margin-bottom: var(--space-6);
color: var(--text-faint);
max-width: 52ch;
}
.work-feature__breakdown {
gap: 0;
margin-bottom: var(--space-6);
border-top: 1px solid var(--border);
}
.work-feature__row {
display: grid;
grid-template-columns: 88px 1fr;
gap: var(--space-5);
align-items: start;
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border);
}
.work-feature__row dt {
margin-bottom: 0;
color: var(--text-faint);
padding-top: 2px;
}
.work-feature__demo {
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.014);
}
.work-feature__demo-label { margin-bottom: var(--space-3); }
/* Was a bare text link at the end of a long card, which is where a reader is
least likely to notice one. Now a real target. */
.work-feature__link {
padding: 11px 18px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.016);
font-weight: var(--fw-semibold);
transition: color var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard),
background var(--duration-base) var(--ease-standard);
}
.work-feature__link:hover {
gap: var(--space-2);
color: var(--lime);
border-color: var(--lime);
background: var(--lime-faint);
}
.work-feature__link [aria-hidden="true"] {
display: inline-block;
transition: transform var(--duration-base) var(--ease-out);
}
.work-feature__link:hover [aria-hidden="true"] { transform: translateX(3px); }
/* --------------------------------------------------------------------------
10. PROCESS — timeline rail
Five equal boxes in a bordered grid said nothing about sequence. Five
segments of one rule, each with a node on it, says "these happen in this
order" without a single extra word.
-------------------------------------------------------------------------- */
.methodology__steps {
margin-top: var(--space-8);
grid-template-columns: repeat(5, 1fr);
gap: var(--space-5);
background: none;
border: none;
border-radius: 0;
overflow: visible;
}
.methodology__step {
position: relative;
background: none;
padding: var(--space-6) var(--space-4) 0 0;
border-top: 1px solid var(--border-strong);
}
.methodology__step:hover { background: none; }
.methodology__step::before {
content: '';
position: absolute;
top: -4px;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--lime);
opacity: 0.55;
transition: opacity var(--duration-base) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard);
}
.methodology__step:hover::before {
opacity: 1;
box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.12);
}
.methodology__step-number {
color: var(--text-faint);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
margin-bottom: var(--space-3);
transition: color var(--duration-base) var(--ease-standard);
}
.methodology__step:hover .methodology__step-number { color: var(--lime); }
.methodology__step-title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
/* --------------------------------------------------------------------------
11. PIPELINE PANEL
-------------------------------------------------------------------------- */
.pipeline-panel {
margin-top: var(--space-8);
border-radius: var(--radius-lg);
background-color: var(--surface);
background-image: var(--sheen);
padding: var(--space-8);
}
.pipeline-panel__status {
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
padding-bottom: var(--space-4);
margin-bottom: var(--space-8);
}
.pipeline-node__circle {
width: 68px;
height: 68px;
background: var(--bg);
border-color: var(--border-strong);
}
.pipeline-node__label { font-size: var(--fs-h4); }
.pipeline__line { stroke: var(--border-strong); }
/* --------------------------------------------------------------------------
12. PLAYGROUND — teaser and page
The simulated labelling is content and is left exactly as it is; only the
surfaces around it change.
-------------------------------------------------------------------------- */
.playground-teaser__panel {
border-radius: var(--radius-lg);
background-image: var(--sheen);
padding: var(--space-8);
gap: var(--space-8);
}
.playground-teaser__panel:hover { background-color: var(--surface); border-color: var(--border); }
.playground-teaser__body .section__title { max-width: 20ch; margin-bottom: var(--space-4); }
.playground-teaser__preview {
border-left: 1px solid var(--border);
padding-left: var(--space-7);
}
.playground-teaser__step {
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border);
}
.playground-teaser__step:last-child { border-bottom: none; }
.playground-teaser__step-label { font-size: var(--fs-small); color: var(--text-dim); }
.playground-note { border-radius: var(--radius); border-left-width: 2px; }
.playground-console,
.playground-result { border-radius: var(--radius-lg); background-image: var(--sheen); }
.playground-console { top: calc(var(--nav-h) + var(--space-5)); }
.playground-preset { border-radius: var(--radius-sm); border-color: var(--border-strong); }
.playground-textarea {
border-radius: var(--radius-sm);
border-color: var(--border-strong);
background: rgba(0, 0, 0, 0.28);
font-size: var(--fs-body);
transition: border-color var(--duration-base) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard);
}
.playground-textarea:focus { box-shadow: 0 0 0 3px rgba(200, 255, 61, 0.1); }
.playground-panel { border-radius: var(--radius-lg); }
.playground-step__circle { background: var(--bg); border-color: var(--border-strong); }
.playground-step__badge { border-color: var(--border-strong); }
/* --------------------------------------------------------------------------
13. FAQ — hairline list
Fourteen separate rounded boxes was fourteen objects to parse. One ruled
list is a single object, which is what a set of questions actually is.
-------------------------------------------------------------------------- */
.faq__list {
margin-top: var(--space-8);
gap: 0;
max-width: 900px;
border-top: 1px solid var(--border);
}
.faq-item {
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
background: none;
}
.faq-item:hover { border-color: var(--border); }
.faq-item.is-open { background: none; }
.faq-item__question {
padding: var(--space-5) var(--space-3) var(--space-5) 0;
font-size: var(--fs-h4);
gap: var(--space-6);
transition: color var(--duration-base) var(--ease-standard);
}
.faq-item__question:hover { color: var(--lime); }
.faq-item.is-open .faq-item__question { color: var(--lime); }
.faq-item__icon {
width: 22px;
height: 22px;
border: none;
color: var(--text-faint);
font-size: 20px;
}
.faq-item.is-open .faq-item__icon { border: none; color: var(--lime); }
.faq-item__answer p {
padding: 0 var(--space-8) var(--space-6) 0;
font-size: var(--fs-body);
max-width: 68ch;
}
/* --------------------------------------------------------------------------
14. CONTACT
-------------------------------------------------------------------------- */
.contact-form-panel {
margin-top: var(--space-7);
border-radius: var(--radius-lg);
background-image: var(--sheen);
padding: var(--space-8);
max-width: 760px;
}
.form-label { color: var(--text-dim); letter-spacing: 0.1em; }
.form-input {
border-radius: var(--radius-sm);
border-color: var(--border-strong);
background: rgba(0, 0, 0, 0.28);
padding: 13px var(--space-4);
font-size: var(--fs-body);
transition: border-color var(--duration-base) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard);
}
.form-input:focus {
border-color: var(--lime);
box-shadow: 0 0 0 3px rgba(200, 255, 61, 0.1);
}
/* Name and email are short and related, so they pair on one row; the two
long fields stay full width. Pure layout — field order, names, labels,
required flags and the Formspree action are untouched. */
@media (min-width: 720px) {
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-5);
}
/* Keyed off an explicit class, not :nth-of-type — position-based selectors
silently mis-key the moment a field is added or reordered, which is exactly
what happened when Company and Service were introduced. */
.contact-form .form-field--full { grid-column: 1 / -1; }
.contact-form button { grid-column: 1 / -1; justify-self: start; }
}
.contact-panel {
border-radius: var(--radius-lg);
background-image: var(--sheen);
padding: var(--space-7);
}
.contact-link {
border-radius: var(--radius-sm);
border-color: var(--border-strong);
background: rgba(255, 255, 255, 0.016);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
padding: 13px 20px;
}
.contact-link:hover { background: var(--lime-faint); }
.contact-form__alt-label { margin-top: var(--space-8); }
/* "What happens next" reuses the process rail, so the two step sequences on
the site read as the same device rather than two unrelated card grids. */
.contact-steps {
margin-top: var(--space-7);
gap: var(--space-5);
background: none;
border: none;
border-radius: 0;
overflow: visible;
}
.contact-step {
position: relative;
background: none;
padding: var(--space-6) var(--space-4) 0 0;
border-top: 1px solid var(--border-strong);
}
.contact-step::before {
content: '';
position: absolute;
top: -4px;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--lime);
opacity: 0.55;
}
.contact-step__number { color: var(--text-faint); font-size: var(--fs-caption); letter-spacing: var(--ls-caption); }
.contact-step__title { font-size: var(--fs-h4); }
/* --------------------------------------------------------------------------
15. ABOUT
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
FOUNDERS — composition
Two founders side by side gave each one a ~330px column, which meant the
portrait ran almost the full width of its column (an image sitting on top
of some text, hard against the left edge) and the bio underneath read at a
38-character measure — too narrow to be comfortable.
Now one founder per row: the portrait holds a 340px rail at roughly a
third of the grid, the copy gets a proper 640px measure beside it, and a
hairline separates the two rows in the same language the rest of the site
uses. The portrait is present without dominating, and the row reads as a
composed spread rather than a photo placed next to a paragraph.
-------------------------------------------------------------------------- */
.founders {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin-top: var(--space-7);
}
.founder-card {
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 640px);
gap: var(--space-9);
align-items: start;
padding: var(--space-8) 0;
border-top: 1px solid var(--border);
}
.founder-card .photo-frame { max-width: none; margin: 0; }
.founder-card__body { margin-top: 0; }
.founder-card .about__narrative { margin: 0 0 var(--space-6); max-width: none; }
/* Below the point where a 640px measure stops fitting beside a 340px
portrait, the row stacks — but the portrait keeps a deliberate width
instead of stretching to fill the column, which is what made it feel
full-bleed in the first place. */
@media (max-width: 900px) {
.founder-card {
grid-template-columns: 1fr;
gap: var(--space-6);
padding: var(--space-7) 0;
}
/* Full column width once stacked, rather than 300px inside a 327px column
— a 27px trailing gap reads as a mistake, where edge-to-edge reads as a
decision. Capped so it cannot balloon on a large tablet. */
.founder-card .photo-frame { max-width: min(100%, 420px); }
}
.photo-frame {
border-radius: var(--radius-lg);
border-color: var(--border-strong);
padding: 10px;
}
.photo-frame img { border-radius: var(--radius); }
.photo-frame::after { width: 34%; height: 2px; }
.founder-card__body { margin-top: var(--space-5); }
.about__narrative { margin: var(--space-5) 0 var(--space-6); }
.fact-list { border-top-color: var(--border); }
.fact-list__row { padding: var(--space-4) 0; }
/* --------------------------------------------------------------------------
16. BLOG, ARTICLES, CASE STUDIES
-------------------------------------------------------------------------- */
.blog__grid {
margin-top: var(--space-8);
/* min() floor, not a bare 300px: below ~350px viewport a fixed track floor
is wider than the column it sits in and pushes the page sideways. */
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: var(--space-5);
}
.blog-card { padding: var(--space-6); border-radius: var(--radius); }
.blog-card__title {
font-size: var(--fs-h3);
letter-spacing: var(--ls-h3);
transition: color var(--duration-base) var(--ease-standard);
}
a.blog-card:hover .blog-card__title { color: var(--lime); }
.blog-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
color: var(--text);
transition: color var(--duration-base) var(--ease-standard);
}
.blog-card__link [aria-hidden="true"] {
display: inline-block;
transition: transform var(--duration-base) var(--ease-out);
}
a.blog-card:hover .blog-card__link { color: var(--lime); }
a.blog-card:hover .blog-card__link [aria-hidden="true"] { transform: translateX(3px); }
.article__title, .case-study__title { max-width: 20ch; text-wrap: balance; }
.article__body { font-size: var(--fs-body-lg); }
.article__body h2 { font-size: var(--fs-h3); margin-top: var(--space-6); }
/* Long-form blocks embedded in a non-article page (Services, Work, Contact)
reuse .article__body, so they used to start immediately under a panel or a
grid with nothing marking the change of register — they read as an appendix
someone forgot to design. A rule and a measure turn each one into a second
movement of the page rather than leftover text. */
.ecosystem .article__body,
.work .article__body,
.contact-page .article__body {
max-width: 760px;
margin-top: var(--space-8);
padding-top: var(--space-7);
border-top: 1px solid var(--border-strong);
}
.ecosystem .article__body h2,
.work .article__body h2,
.contact-page .article__body h2 { margin-top: 0; }
.ecosystem .article__body h2 ~ h2,
.work .article__body h2 ~ h2,
.contact-page .article__body h2 ~ h2 {
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--border);
}
.case-study__media img {
border-radius: var(--radius-lg);
border-color: var(--border-strong);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.case-study__sections { gap: 0; max-width: 760px; margin-bottom: 0; }
.case-study__section {
border-top: 1px solid var(--border);
padding: var(--space-6) 0;
}
/* Closing CTA. On Services this sat directly under the last paragraph with no
separation at all, so the two buttons read as part of that sentence. The
rule and the space give it the same closing treatment .article-end gives
Work, About and Insights — and because it now supplies the bottom rule of
the case-study stack, .case-study__section no longer needs one of its own. */
.case-study__cta {
gap: var(--space-4);
/* Same measure as the copy above it, so the closing rule lines up with the
text it closes rather than running the full grid width. */
max-width: 760px;
margin-top: var(--space-8);
padding-top: var(--space-7);
border-top: 1px solid var(--border-strong);
}
@media (max-width: 860px) {
.case-study__cta { margin-top: var(--space-7); padding-top: var(--space-6); }
}
.article-end { border-top-color: var(--border-strong); }
/* --------------------------------------------------------------------------
17. FOOTER
Lifted onto its own surface so the page has a floor, with the wordmark set
large and very low-contrast behind it. One deliberate flourish, in the one
place where a flourish costs nothing.
-------------------------------------------------------------------------- */
.footer {
position: relative;
overflow: hidden;
background: var(--surface);
border-top: 1px solid var(--border);
}
.footer::after {
content: 'GENZAX';
position: absolute;
left: 50%;
bottom: -0.3em;
transform: translateX(-50%);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: clamp(88px, 18vw, 240px);
line-height: 1;
letter-spacing: -0.045em;
color: rgba(242, 244, 239, 0.022);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.footer__inner {
position: relative;
z-index: 1;
padding-top: var(--space-9);
padding-bottom: var(--space-6);
}
.footer__top {
grid-template-columns: 1.6fr 1fr 1fr;
gap: var(--space-8);
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--border);
}
.footer__brand .nav__logo { font-size: clamp(20px, 2vw, 26px); }
.footer__tagline { margin-top: var(--space-5); max-width: 36ch; }
.footer__col-title {
padding-bottom: var(--space-3);
margin-bottom: var(--space-4);
border-bottom: 1px solid var(--border);
letter-spacing: 0.12em;
}
.footer__nav, .footer__contact { gap: var(--space-3); }
.footer__nav .footer__link {
font-family: var(--font-body);
font-size: var(--fs-small);
letter-spacing: 0;
color: var(--text-dim);
}
.footer__nav .footer__link:hover { color: var(--lime); }
.footer__bottom { padding-top: var(--space-5); }
/* --------------------------------------------------------------------------
18. MOTION
The reveal used to scale as well as translate, which softened text
mid-transition. Translate only: the same entrance, without the blur.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.js-reveal .reveal {
transform: translateY(20px);
transition-duration: var(--duration-slow);
}
.js-reveal .reveal.is-visible { transform: translateY(0); }
.js-reveal .section__intro.reveal { transform: translateY(12px); }
}
/* --------------------------------------------------------------------------
19. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 1180px) {
.methodology__steps { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-7); }
}
@media (max-width: 1024px) {
.ecosystem__grid { grid-template-columns: repeat(2, 1fr); }
.hero__inner { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-7); }
}
@media (max-width: 980px) {
.work-feature.card { grid-template-columns: 1fr; }
.work-feature__media { border-right: none; border-bottom: 1px solid var(--border); padding: var(--space-6); }
}
@media (max-width: 860px) {
.hero { min-height: auto; padding-bottom: var(--space-8); }
.hero::before { background-size: 56px 56px; }
.hero__glow { width: 92%; right: -26%; height: 52%; }
.hero__stats {
grid-template-columns: 1fr;
margin-top: var(--space-8);
border-top: none;
}
.stat-card {
border-left: none;
border-top: 1px solid var(--border);
padding: var(--space-5) 0 0;
}
.stat-card::before { left: 0; }
.ecosystem__grid .card { padding: var(--space-6) var(--space-5); }
.methodology__steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.methodology__step { padding: var(--space-5) var(--space-4) 0 0; }
.contact-steps { grid-template-columns: 1fr; gap: var(--space-6); }
.contact-step { padding: var(--space-5) 0 0; }
.work-feature__body { padding: var(--space-6) var(--space-5); }
.work-feature__row { grid-template-columns: 1fr; gap: var(--space-2); }
.work-feature__row dt { padding-top: 0; }
.pipeline-panel { padding: var(--space-6) var(--space-5); }
.playground-teaser__panel { padding: var(--space-6) var(--space-5); }
.playground-teaser__preview { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--space-4); }
.faq-item__question { font-size: var(--fs-body); gap: var(--space-4); padding: var(--space-4) 0; }
.faq-item__answer p { padding: 0 var(--space-5) var(--space-5) 0; }
.contact-form-panel { padding: var(--space-6) var(--space-5); }
.contact-panel { padding: var(--space-6) var(--space-5); }
.footer__inner { padding-top: var(--space-8); }
.footer__top { grid-template-columns: 1fr; gap: var(--space-7); }
.footer::after { font-size: 24vw; bottom: -0.24em; }
/* Touch targets. Stacked on a phone these were 22px tall with 12px between
them — seven links in a column, all easy to mis-tap. Padding rather than
font-size, so nothing about the footer's look changes. */
.footer__nav, .footer__contact { gap: var(--space-1); }
.footer__nav .footer__link,
.footer__contact-link { padding: 9px 0; }
}
/* The menu button is the only way to navigate on a phone and was a 32px
square. Padded to 44px on a border-box, so the three bars keep their exact
32px width and the target grows around them.
The 12px sits on the inner (right) side because the button is the first
item in the header: that keeps the bars flush with the page's left rail at
var(--side-pad), lined up with the logo, hero eyebrow and headline below. */
@media (max-width: 1100px) {
.nav__toggle {
width: 44px;
height: 44px;
/* Asymmetric so the bars sit flush against the right page rail while the
tap target stays a full 44px. Mirrors the logo's flush left edge. */
padding: 6px 0 6px 12px;
}
}
/* The logo is the Home link on every page; vertical padding on an inline
element extends the hit area without touching the baseline lockup between
the mark and the wordmark. */
.nav__logo { padding: 11px 0; }
/* Insights listing. The three-column grid is right on desktop and stays, but
once it collapses to one column the card chrome stops doing any work: ten
identical bordered boxes stacked in a row, each already separated by 24px of
space. Below the collapse they become a ruled list — same cards, same order,
same links, noticeably less to scroll past. */
@media (max-width: 680px) {
.blog__grid {
gap: 0;
border-top: 1px solid var(--border);
}
.blog-card,
a.blog-card:hover {
padding: var(--space-6) 0;
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
background: none;
transform: none;
}
.blog-card__link { margin-top: var(--space-3); }
}
/* Tablet keeps a grid: at 768 a single column turned six short capability
cards and five process steps into a very long scroll for no gain. */
@media (max-width: 680px) {
.ecosystem__grid { grid-template-columns: 1fr; }
.methodology__steps { grid-template-columns: 1fr; }
.methodology__step { padding: var(--space-5) 0 0; }
}
/* The self-initiated-build tag is 33 characters. On a phone it wraps to two
lines, and a two-line pill reads as a stretched capsule rather than a label,
so below this width it becomes a square-cornered block instead. */
@media (max-width: 620px) {
.work-feature__meta .tag,
.case-study__meta .tag {
border-radius: var(--radius-sm);
padding: 7px var(--space-3);
/* Tracking tuned down just enough to save a wrapped line at 375px. */
letter-spacing: 0.04em;
}
}
@media (max-width: 480px) {
.hero__actions { width: 100%; }
.hero__actions .btn { flex: 1 1 auto; justify-content: center; }
.contact-panel__right .contact-link { width: 100%; justify-content: center; }
}
/* --------------------------------------------------------------------------
20. MOBILE NAVIGATION
Full-bleed sheet, one link per ruled row, display type, 48px+ targets and
the CTA pinned full width at the foot of the sheet.
-------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.nav .nav__panel,
.nav--expanded .nav__panel {
top: 100%;
gap: 0;
padding: var(--space-2) var(--side-pad) var(--space-7);
/* Opaque, not translucent. A blurred sheet at 97% still let the hero
headline ghost through behind the menu, which made the sheet read as
an overlay rather than a place you had navigated to. */
background: var(--bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
height: calc(100dvh - var(--nav-h));
overflow-y: auto;
}
.nav .nav__links,
.nav--expanded .nav__links { width: 100%; gap: 0; }
.nav .nav__links li,
.nav--expanded .nav__links li { width: 100%; border-bottom: 1px solid var(--border); }
.nav .nav__links a,
.nav--expanded .nav__links a {
display: block;
width: 100%;
padding: 15px 0;
font-family: var(--font-display);
font-weight: var(--fw-medium);
font-size: var(--fs-h4);
color: var(--text);
}
/* The sliding underline is a pointer affordance; on a touch sheet it would
just flash a full-width line under whatever was last tapped. */
.nav .nav__links a::after,
.nav--expanded .nav__links a::after { display: none; }
.nav .nav__links a[aria-current="page"],
.nav--expanded .nav__links a[aria-current="page"] { color: var(--lime); }
.nav .nav__cta,
.nav--expanded .nav__cta {
width: 100%;
justify-content: center;
/* auto, not a fixed gap: the CTA sits at the foot of the sheet where a
thumb reaches it, whatever the device height. */
margin-top: auto;
padding: 15px 22px;
font-size: var(--fs-body);
}
}
/* --------------------------------------------------------------------------
TYPOGRAPHY — word-spacing for display text that is not a heading tag
The h1-h4 rules above cover most of the site, but these elements set
--font-display on a , ,