/* ==========================================================================
STRICK TECH / self-hosted webfonts
Archivo and Archivo Narrow, SIL Open Font License 1.1. Both files are the
variable builds, so one file covers the whole weight axis.
These are preloaded in the of every page and declared
font-display: optional on purpose. Preload gets the file in before first
paint; optional guarantees the browser never swaps the face mid-render.
Together that removes the reflow that used to fire underneath the hero
animation while the headline was still rising inside its mask.
The latin-ext faces are only fetched if a character in that range actually
appears on the page, so they cost nothing on an all-English render.
========================================================================== */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-display: optional;
src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-display: optional;
src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Archivo Narrow";
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url("/assets/fonts/archivo-narrow-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo Narrow";
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url("/assets/fonts/archivo-narrow-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
STRICK TECH / design tokens
Palette is sampled from the logo mark: mint to azure gradient on true black.
========================================================================== */
:root {
/* color */
--ink: #000000; /* base canvas */
--surface: #08090b; /* alternating band */
--surface-2: #0e1013; /* cards, form fields */
--paper: #ffffff;
--mist: #9aa2a9; /* body copy */
--mist-dim: #757d83; /* captions, meta - WCAG AA 5.02:1 on --ink */
--mint: #7bdfc2; /* logo left */
--azure: #2c5fa5; /* logo right */
--seam-line: rgba(255, 255, 255, 0.13);
--seam-soft: rgba(255, 255, 255, 0.06);
/* the seam: the two chevrons in the mark meet along this gradient */
--seam-grad: linear-gradient(90deg, var(--mint) 0%, #4a9db5 48%, var(--azure) 100%);
/* type */
--display: "Archivo Narrow", "Archivo Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
--body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
/* layout */
--gutter: clamp(1.25rem, 5vw, 4.5rem);
--maxw: 1360px;
--band: clamp(5rem, 11vw, 9.5rem);
/* motion */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 0.2s;
--dur: 0.35s;
--dur-slow: 0.6s;
/* ---- semantic colour aliases -------------------------------------------
Style components with THESE, not the raw palette above. Rebrand by
repointing the aliases and every component follows. */
--bg: var(--ink);
--bg-alt: var(--surface);
--bg-raised: var(--surface-2);
--text-primary: var(--paper);
--text-secondary: var(--mist);
--text-muted: var(--mist-dim);
--accent: var(--mint);
--accent-deep: var(--azure);
--border: var(--seam-line);
--border-soft: var(--seam-soft);
--focus-ring: var(--mint);
--danger: #e8896b;
/* ---- type scale --------------------------------------------------------
Fluid. Each step clamps between a phone size and a desktop size. */
--text-hero: clamp(2.5rem, 6.2vw, 5.5rem);
--text-2xl: clamp(2.1rem, 5.2vw, 4.5rem);
--text-xl: clamp(1.4rem, 2.6vw, 2.15rem);
--text-lg: 1.25rem;
--text-md: 1.0625rem; /* body */
--text-sm: 0.9375rem;
--text-xs: 0.8125rem;
--text-2xs: 0.6875rem; /* eyebrows, labels */
--leading-tight: 0.9;
--leading-snug: 1.15;
--leading-body: 1.7;
--tracking-wide: 0.18em;
--tracking-caps: 0.24em;
/* ---- spacing scale -----------------------------------------------------
Use these instead of one-off rem values so rhythm stays consistent. */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3.5rem;
--space-9: clamp(3rem, 6vw, 5rem);
/* ---- shape -------------------------------------------------------------
This brand is deliberately square. Change these two to soften it. */
--radius: 0px;
--radius-sm: 0px;
--border-w: 1px;
}
/* ==========================================================================
reset
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--ink);
color: var(--paper);
font-family: var(--body);
font-size: 1.0625rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
}
/* keyboard users get a way past the nav; invisible until focused */
.skip-link {
position: absolute;
left: var(--space-4);
top: var(--space-4);
z-index: 999;
transform: translateY(-200%);
background: var(--text-primary);
color: var(--bg);
padding: var(--space-3) var(--space-5);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }
::selection { background: var(--mint); color: #000; }
/* ==========================================================================
type system
========================================================================== */
.display {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
line-height: 0.9;
letter-spacing: -0.005em;
}
.h1 { font-size: var(--text-hero); }
.h2 { font-size: var(--text-2xl); }
.h3 {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
line-height: 1.02;
font-size: var(--text-xl);
letter-spacing: 0.005em;
}
.eyebrow {
font-family: var(--body);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--mint);
}
.eyebrow-dim { color: var(--mist-dim); }
.lede {
font-size: clamp(1.0625rem, 1.55vw, 1.3125rem);
line-height: 1.6;
color: var(--mist);
max-width: 46ch;
}
p { color: var(--mist); }
strong { color: var(--paper); font-weight: 600; }
/* ==========================================================================
layout primitives
========================================================================== */
.wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.band { padding-block: var(--band); }
.band-alt { background: var(--surface); }
/* the signature seam: a hairline rule carrying a short gradient segment,
echoing where the two halves of the logo meet */
.seam {
position: relative;
height: 1px;
width: 100%;
background: var(--seam-line);
}
.seam::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 108px;
height: 2px;
top: -0.5px;
background: var(--seam-grad);
}
.seam-center::before { left: 50%; transform: translateX(-50%); }
/* scroll seam pinned to the top of the viewport */
.scroll-seam {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
background: var(--seam-grad);
z-index: 200;
pointer-events: none;
}
/* ==========================================================================
buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.0625rem 1.75rem;
border: 1px solid var(--paper);
background: transparent;
color: var(--paper);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
line-height: 1;
cursor: pointer;
transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn-solid { background: var(--paper); color: var(--ink); }
.btn-solid:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.34); }
.btn-ghost:hover { border-color: var(--paper); }
.btn-sm { padding: 0.8125rem 1.25rem; font-size: 0.6875rem; }
.arrow { width: 0.75rem; height: 0.75rem; flex: none; }
/* ==========================================================================
navigation
========================================================================== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 150;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.125rem var(--gutter);
background: transparent;
transition: transform 0.45s var(--ease), background 0.4s var(--ease),
border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
border-bottom: 1px solid transparent;
}
/* Three states, all driven by the scroll handler in site.js.
At the top of the page the bar sits over the hero with no surface of its
own. Reading downward it lifts away entirely, so it never floats over the
copy. Reverse direction and it drops back in, this time with a surface,
because that is the moment someone is looking for a way out. */
.nav.is-hidden {
transform: translate3d(0, -100%, 0);
}
/* a keyboard user tabbing into the bar always gets it back */
.nav:focus-within {
transform: none;
}
.nav.is-stuck {
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(14px);
border-bottom-color: var(--seam-line);
}
/* the open mobile panel always needs a surface, whichever way we were going */
.nav.is-open {
background: rgba(0, 0, 0, 0.96);
backdrop-filter: blur(14px);
border-bottom-color: var(--seam-line);
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.75rem;
flex: none;
}
.nav-brand img {
width: 46px;
height: 46px;
object-fit: contain;
}
@media (max-width: 640px) {
.nav-brand img { width: 40px; height: 40px; }
}
.nav-brand span {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.875rem;
white-space: nowrap;
}
.nav-links {
display: flex;
align-items: center;
/* fluid so the seven primary links stay on one line between the mobile
breakpoint and a full desktop width without wrapping a label in half */
gap: clamp(1.05rem, 2vw, 2.25rem);
list-style: none;
}
.nav-links a {
position: relative;
white-space: nowrap;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--mist);
padding-block: 0.5rem;
transition: color 0.3s var(--ease);
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: var(--seam-grad);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { flex: none; }
.nav-toggle {
display: none;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: transparent;
cursor: pointer;
align-items: center;
justify-content: center;
flex: none;
}
.nav-toggle span {
display: block;
width: 18px;
height: 1px;
background: var(--paper);
position: relative;
transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
content: "";
position: absolute;
left: 0;
width: 18px;
height: 1px;
background: var(--paper);
transition: transform 0.35s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav.is-open .nav-toggle span { background: transparent; }
.nav.is-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
.nav-toggle { display: flex; }
.nav-cta { display: none; }
.nav-links {
position: fixed;
inset: 68px 0 auto 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 1rem var(--gutter) 2.5rem;
background: rgba(0, 0, 0, 0.97);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--seam-line);
transform: translateY(-120%);
transition: transform 0.45s var(--ease);
}
.nav.is-open .nav-links { transform: translateY(0); }
.nav-links li { width: 100%; border-bottom: 1px solid var(--seam-soft); }
.nav-links a { display: block; padding: 1.125rem 0; font-size: 0.8125rem; }
}
/* ==========================================================================
hero
========================================================================== */
.hero {
position: relative;
/* full viewport on laptops, capped so tall monitors do not stretch it */
min-height: min(100svh, 860px);
display: grid;
align-items: end;
overflow: hidden;
isolation: isolate;
}
.hero-media {
position: absolute;
inset: 0;
z-index: -2;
/* fallback atmosphere so the page never looks broken before the hero
image is dropped in at /brand/hero.jpg */
background:
radial-gradient(120% 90% at 78% 18%, rgba(44, 95, 165, 0.5) 0%, rgba(0, 0, 0, 0) 62%),
radial-gradient(90% 80% at 12% 88%, rgba(123, 223, 194, 0.22) 0%, rgba(0, 0, 0, 0) 58%),
#000;
}
/* display:contents so the ![]()
still sizes against .hero-media */
.hero-media picture { display: contents; }
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 45%;
opacity: 0.9;
}
/* vignette keeps the headline legible over any image he generates */
.hero-scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 34%, rgba(0, 0, 0, 0.92) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.1) 62%);
}
.hero-inner {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding: clamp(7rem, 12vh, 9rem) var(--gutter) clamp(2rem, 4vh, 3rem);
display: grid;
gap: clamp(2.25rem, 5vh, 3.5rem);
}
.hero-copy { max-width: min(100%, 68rem); }
.hero-copy .eyebrow { display: block; margin-bottom: 1.5rem; }
.hero-copy .h1 {
margin-bottom: 1.75rem;
max-width: 15em; /* em, not ch, so it scales with the headline itself */
}
.hero-copy .lede { max-width: 52ch; }
/* ---- hero entrance ------------------------------------------------------
Headline lines rise out of their own overflow mask, then the surrounding
copy fades up behind them. Runs once on load, transform/opacity only, and
the reduced-motion block at the bottom of this file snaps it to the end
state for anyone who asks for less movement. */
.hero-title { display: block; }
.hero-line {
display: block;
overflow: hidden;
/* the mask would otherwise crop descenders, so give it room and take the
same amount back out of the flow */
padding-bottom: 0.14em;
margin-bottom: -0.14em;
}
.hero-line > span {
display: block;
transform: translate3d(0, 110%, 0);
animation: hero-line-rise 2s var(--ease) forwards;
}
.hero-line:nth-of-type(1) > span { animation-delay: 0.25s; }
.hero-line:nth-of-type(2) > span { animation-delay: 0.6s; }
@keyframes hero-line-rise {
to { transform: translate3d(0, 0, 0); }
}
.hero-rise {
opacity: 0;
animation: hero-fade-up 1.6s var(--ease) forwards;
}
.hero-copy .eyebrow.hero-rise { animation-delay: 0.1s; }
.hero-copy .lede { animation-delay: 1.15s; }
.hero-actions.hero-rise { animation-delay: 1.35s; }
.hero-foot.hero-rise { animation-delay: 1.45s; }
@keyframes hero-fade-up {
from { opacity: 0; transform: translate3d(0, 14px, 0); }
to { opacity: 1; transform: none; }
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
margin-top: 2.5rem;
}
/* once the pair stacks, both buttons take the width of the wider label so the
column reads as one block instead of two ragged edges */
@media (max-width: 520px) {
.hero-actions {
display: grid;
grid-template-columns: minmax(0, max-content);
}
}
.hero-foot {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
border-top: 1px solid var(--seam-line);
padding-top: 1.5rem;
}
.hero-ticks {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 4vw, 3.5rem);
list-style: none;
}
.hero-ticks li {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--mist);
}
.hero-ticks b {
display: block;
font-family: var(--display);
font-size: 1.75rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--paper);
margin-bottom: 0.25rem;
}
.scroll-cue {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--mist-dim);
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.scroll-cue::after {
content: "";
width: 44px;
height: 1px;
background: var(--seam-grad);
animation: cue 2.4s var(--ease) infinite;
transform-origin: 0 50%;
}
@keyframes cue {
0%, 100% { transform: scaleX(0.4); opacity: 0.5; }
50% { transform: scaleX(1); opacity: 1; }
}
/* ==========================================================================
generic section head
========================================================================== */
.head {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: clamp(1.75rem, 5vw, 5rem);
align-items: start;
margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.head .eyebrow { padding-top: 0.6rem; }
.head p { max-width: 58ch; margin-top: 1.5rem; }
@media (max-width: 860px) {
.head { grid-template-columns: 1fr; gap: 1.25rem; }
.head .eyebrow { padding-top: 0; }
}
/* ==========================================================================
manifesto
========================================================================== */
.manifesto .statement {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
line-height: 0.98;
font-size: clamp(1.75rem, 4.1vw, 3.5rem);
letter-spacing: -0.005em;
color: var(--paper);
max-width: 22ch;
}
.manifesto .statement em {
font-style: normal;
background: var(--seam-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.manifesto-grid {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: start;
}
.manifesto-grid p + p { margin-top: 1.5rem; }
@media (max-width: 900px) {
.manifesto-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* ==========================================================================
capability rows
========================================================================== */
.rows { border-top: 1px solid var(--seam-line); }
.row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 5fr) minmax(0, 4fr);
gap: clamp(1.5rem, 4vw, 4rem);
padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
border-bottom: 1px solid var(--seam-line);
position: relative;
}
.row::before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 0;
background: var(--seam-grad);
transition: width 0.7s var(--ease);
}
.row:hover::before { width: 100%; }
.row-index {
font-family: var(--display);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--mist-dim);
padding-top: 0.5rem;
}
.row-body p { margin-top: 1rem; max-width: 48ch; }
.row-list { list-style: none; padding-top: 0.35rem; }
.row-list li {
font-size: 0.8125rem;
letter-spacing: 0.02em;
color: var(--mist);
padding: 0.5rem 0 0.5rem 1.25rem;
position: relative;
border-bottom: 1px solid var(--seam-soft);
}
.row-list li:last-child { border-bottom: 0; }
.row-list li::before {
content: "";
position: absolute;
left: 0;
top: 1.1rem;
width: 8px;
height: 1px;
background: var(--mint);
}
@media (max-width: 900px) {
.row { grid-template-columns: 1fr; gap: 1.25rem; }
.row-index { padding-top: 0; }
}
/* ==========================================================================
process (a real ordered sequence, so it is numbered)
========================================================================== */
.steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--seam-line);
border: 1px solid var(--seam-line);
}
.step {
background: var(--ink);
padding: clamp(1.75rem, 3vw, 2.5rem);
position: relative;
display: flex;
flex-direction: column;
}
.band-alt .step { background: var(--surface); }
.step::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--seam-grad);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.6s var(--ease);
}
.step:hover::before { transform: scaleX(1); }
.step-n {
font-family: var(--display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.26em;
color: var(--mint);
display: block;
margin-bottom: 1.75rem;
}
.step h3 { margin-bottom: 0.875rem; }
.step p { font-size: 0.9375rem; }
/* pins the action to the card floor so a row of cards aligns on one baseline */
.step-action { margin-top: auto; padding-top: 1.75rem; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
/* ==========================================================================
studios
========================================================================== */
.studio-note {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: center;
border: 1px solid var(--seam-line);
padding: clamp(2rem, 5vw, 4rem);
background:
radial-gradient(90% 140% at 100% 0%, rgba(44, 95, 165, 0.16) 0%, rgba(0, 0, 0, 0) 65%),
var(--surface-2);
}
.studio-note img { width: clamp(120px, 22vw, 210px); opacity: 0.9; }
.studio-note p + p { margin-top: 1.25rem; }
@media (max-width: 900px) {
.studio-note { grid-template-columns: 1fr; gap: 2rem; }
}
/* ==========================================================================
pricing
========================================================================== */
.tiers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--seam-line);
border: 1px solid var(--seam-line);
}
.tier {
background: var(--ink);
padding: clamp(1.75rem, 3vw, 2.5rem);
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.tier-feature { background: var(--surface-2); }
.tier-name {
font-family: var(--display);
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tier-kind {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--mist-dim);
display: block;
margin-bottom: 0.75rem;
}
.tier-price {
font-family: var(--display);
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
}
.tier-price small {
display: block;
font-family: var(--body);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mist-dim);
margin-top: 0.625rem;
}
.tier p { font-size: 0.9375rem; }
.tier ul { list-style: none; margin-top: auto; }
.tier li {
font-size: 0.8125rem;
color: var(--mist);
padding: 0.5rem 0 0.5rem 1.25rem;
border-top: 1px solid var(--seam-soft);
position: relative;
}
.tier li::before {
content: "";
position: absolute;
left: 0;
top: 1.05rem;
width: 8px;
height: 1px;
background: var(--mint);
}
.price-note {
margin-top: 2rem;
font-size: 0.875rem;
color: var(--mist-dim);
max-width: 70ch;
}
@media (max-width: 980px) { .tiers { grid-template-columns: 1fr; } }
/* ==========================================================================
contact
========================================================================== */
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
gap: clamp(2.5rem, 7vw, 6rem);
align-items: start;
}
.contact-aside .h2 { margin-bottom: 1.5rem; }
.contact-aside dl { margin-top: 2.5rem; }
.contact-aside dt {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--mist-dim);
margin-bottom: 0.375rem;
}
.contact-aside dd { margin-bottom: 1.5rem; font-size: 0.9375rem; color: var(--paper); }
.contact-aside dd a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.contact-aside dd a:hover { border-bottom-color: var(--mint); color: var(--mint); }
.field { margin-bottom: 1.5rem; }
.field label {
display: block;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--mist-dim);
margin-bottom: 0.625rem;
}
.field input,
.field select,
.field textarea {
width: 100%;
background: var(--surface-2);
border: 1px solid var(--seam-line);
padding: 0.9375rem 1rem;
font-size: 0.9375rem;
color: var(--paper);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
border-radius: 0;
appearance: none;
}
.field select {
background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%);
background-position: calc(100% - 20px) center, calc(100% - 14px) center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--mint);
background: #101418;
outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: #4d5459; }
.field-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.hp { position: absolute; left: -9999px; }
.form-status {
margin-top: 1rem;
font-size: 0.9375rem;
min-height: 1.4em;
}
.form-status:empty { margin-top: 0; }
.form-status.is-ok { color: var(--mint); }
.form-status.is-err { color: #e8896b; }
form.is-sending { opacity: 0.6; pointer-events: none; }
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; gap: 0; }
}
/* ==========================================================================
footer
========================================================================== */
.footer {
border-top: 1px solid var(--seam-line);
padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
background: var(--ink);
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
gap: clamp(2rem, 5vw, 4rem);
}
.footer-brand img { width: 64px; height: auto; margin-bottom: 1.25rem; }
.footer-brand p { font-size: 0.875rem; max-width: 34ch; }
.footer h4 {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--mist-dim);
margin-bottom: 1.25rem;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.75rem; }
.footer li a {
font-size: 0.875rem;
color: var(--mist);
transition: color 0.25s var(--ease);
}
.footer li a:hover { color: var(--mint); }
.footer-base {
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: 1.75rem;
border-top: 1px solid var(--seam-soft);
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
justify-content: space-between;
font-size: 0.75rem;
color: var(--mist-dim);
}
@media (max-width: 860px) {
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
legal / document pages
========================================================================== */
.doc-hero {
padding: 10rem var(--gutter) 3.5rem;
max-width: var(--maxw);
margin-inline: auto;
}
.doc-hero .h2 { margin: 1.25rem 0 1.25rem; }
.doc-hero .meta {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--mist-dim);
}
.doc {
max-width: 74ch;
margin-inline: auto;
padding: 3.5rem var(--gutter) clamp(5rem, 9vw, 8rem);
}
.doc h2 {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(1.25rem, 2.2vw, 1.6rem);
line-height: 1.1;
margin: 3.25rem 0 1rem;
padding-top: 1.75rem;
border-top: 1px solid var(--seam-line);
}
.doc h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.doc h3 {
font-size: 1rem;
font-weight: 600;
text-transform: none;
font-family: var(--body);
color: var(--paper);
margin: 2rem 0 0.75rem;
letter-spacing: 0;
}
.doc p { margin-bottom: 1.125rem; }
.doc ul, .doc ol { margin: 0 0 1.5rem 1.25rem; }
.doc li { color: var(--mist); margin-bottom: 0.625rem; padding-left: 0.25rem; }
.doc li::marker { color: var(--mint); }
.doc a { color: var(--paper); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.doc a:hover { color: var(--mint); border-bottom-color: var(--mint); }
.doc hr { border: 0; height: 1px; background: var(--seam-line); margin: 3rem 0; }
.doc table { width: 100%; border-collapse: collapse; margin-bottom: 1.75rem; font-size: 0.9375rem; }
.doc th, .doc td {
text-align: left;
padding: 0.75rem 0.875rem;
border: 1px solid var(--seam-line);
color: var(--mist);
vertical-align: top;
}
.doc th {
color: var(--paper);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 600;
background: var(--surface-2);
}
.doc blockquote {
border-left: 2px solid var(--mint);
padding: 0.25rem 0 0.25rem 1.25rem;
margin: 0 0 1.75rem;
color: var(--mist);
}
/* ==========================================================================
simple page (404, thanks)
========================================================================== */
.simple {
min-height: 78svh;
display: grid;
place-items: center;
text-align: center;
padding: 9rem var(--gutter) 5rem;
}
.simple .lede { margin-inline: auto; }
.simple .btn { margin-top: 2.5rem; }
/* ==========================================================================
Q&A
Native /, deliberately. The CSP blocks inline script, and
an accordion that needs JavaScript to open is an accordion a crawler never
reads. Each carries an id so a single answer can be linked
directly - browsers expand a details element targeted by the fragment.
========================================================================== */
.qa-group + .qa-group { margin-top: var(--space-9); }
.qa-group > h2 {
padding-bottom: var(--space-4);
border-bottom: var(--border-w) solid var(--border);
}
.qa {
border-bottom: var(--border-w) solid var(--border-soft);
}
.qa > summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-5) 0;
cursor: pointer;
list-style: none;
font-family: var(--display);
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--text-secondary);
transition: color var(--dur) var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--text-primary); }
.qa > summary:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 4px;
}
.qa[open] > summary { color: var(--text-primary); }
/* the plus, drawn from two rules so it can rotate into a minus on open */
.qa-mark {
position: relative;
flex: none;
width: 0.75rem;
height: 0.75rem;
margin-top: 0.2em;
}
.qa-mark::before,
.qa-mark::after {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: var(--border-w);
background: var(--accent);
transition: transform var(--dur) var(--ease);
}
.qa-mark::after { transform: rotate(90deg); }
.qa[open] .qa-mark::after { transform: rotate(0deg); }
.qa-body {
padding: 0 0 var(--space-6) var(--space-5);
border-left: var(--border-w) solid var(--accent);
max-width: 68ch;
}
.qa-body p + p { margin-top: var(--space-4); }
.qa-body strong { color: var(--text-primary); font-weight: 600; }
.qa-body a { color: var(--text-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.qa-body a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* ==========================================================================
gallery
Cards are built to hold a real screenshot the day one exists. Until then
.shot-frame renders a placeholder at the same aspect ratio, so dropping the
image in later does not move anything on the page.
========================================================================== */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
gap: var(--space-6);
}
.shot {
display: flex;
flex-direction: column;
background: var(--bg-raised);
border: var(--border-w) solid var(--border);
}
.shot-frame {
position: relative;
aspect-ratio: 16 / 10;
display: grid;
place-items: center;
overflow: hidden;
border-bottom: var(--border-w) solid var(--border);
background:
radial-gradient(120% 90% at 50% 0%, rgba(123, 223, 194, 0.07), transparent 70%),
var(--bg-alt);
}
.shot-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
}
.shot-frame .shot-placeholder {
width: clamp(56px, 18%, 92px);
height: auto;
opacity: 0.28;
}
.shot-status {
position: absolute;
top: var(--space-4);
left: var(--space-4);
padding: 0.4rem 0.6rem;
font-size: var(--text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-muted);
background: var(--bg);
border: var(--border-w) solid var(--border);
}
.shot-status.is-live { color: var(--accent); border-color: var(--accent); }
.shot-body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--space-6);
}
.shot-body .eyebrow { display: block; margin-bottom: var(--space-3); }
.shot-body h3 { margin-bottom: var(--space-3); }
.shot-body p { font-size: var(--text-sm); }
.shot-list {
list-style: none;
margin-top: var(--space-5);
}
.shot-list li {
position: relative;
padding-left: 1.125rem;
margin-bottom: 0.5rem;
font-size: var(--text-xs);
color: var(--text-muted);
}
.shot-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 6px;
height: var(--border-w);
background: var(--accent);
}
/* pins the action to the card floor so a row of cards aligns on one baseline */
.shot-action { margin-top: auto; padding-top: var(--space-6); }
/* ==========================================================================
side by side comparison
========================================================================== */
.versus {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border: var(--border-w) solid var(--border);
}
.versus > div { padding: clamp(1.5rem, 3vw, 2.5rem); }
.versus > div + div {
border-left: var(--border-w) solid var(--border);
background: var(--bg-raised);
}
.versus h3 { margin-bottom: var(--space-5); }
.versus ul { list-style: none; }
.versus li {
position: relative;
padding-left: 1.5rem;
margin-bottom: var(--space-4);
font-size: var(--text-sm);
color: var(--text-secondary);
}
.versus li:last-child { margin-bottom: 0; }
.versus li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 10px;
height: var(--border-w);
background: var(--text-muted);
}
.versus > div + div li::before { background: var(--accent); }
@media (max-width: 720px) {
.versus { grid-template-columns: 1fr; }
.versus > div + div {
border-left: 0;
border-top: var(--border-w) solid var(--border);
}
}
/* ==========================================================================
scroll reveal
========================================================================== */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.reveal { opacity: 1; transform: none; }
.hero-line > span,
.hero-rise { opacity: 1; transform: none; }
}