*,
::before,
::after {
box-sizing: border-box;
border: 0 solid rgba(255, 255, 255, .12)
}
html {
-webkit-text-size-adjust: 100%;
font-family: var(--font-mono);
line-height: 1.5
}
body {
margin: 0;
line-height: inherit
}
hr {
height: 0;
color: inherit;
border-top-width: 1px
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0
}
a {
color: inherit;
text-decoration: inherit
}
b,
strong {
font-weight: bolder
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0
}
button,
select {
text-transform: none
}
button,
[type=button],
[type=submit] {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
p,
figure,
blockquote,
dl,
dd {
margin: 0
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0
}
img,
svg,
video,
canvas {
display: block;
vertical-align: middle;
max-width: 100%;
height: auto
}
[hidden] {
display: none
}
::placeholder {
opacity: 1;
color: #6a6a72
}
/* layout */
.relative {
position: relative
}
.absolute {
position: absolute
}
.fixed {
position: fixed
}
.sticky {
position: sticky
}
.inset-0 {
inset: 0
}
.inset-x-0 {
left: 0;
right: 0
}
.top-0 {
top: 0
}
.left-0 {
left: 0
}
.right-0 {
right: 0
}
.bottom-0 {
bottom: 0
}
.z-0 {
z-index: 0
}
.z-10 {
z-index: 10
}
.z-20 {
z-index: 20
}
.z-30 {
z-index: 30
}
.z-40 {
z-index: 40
}
.z-50 {
z-index: 50
}
.z-60 {
z-index: 60
}
.z-\[90\] {
z-index: 90
}
.z-\[100\] {
z-index: 100
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.inline {
display: inline
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.grid {
display: grid
}
.hidden {
display: none
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-start {
align-items: flex-start
}
.items-center {
align-items: center
}
.items-end {
align-items: flex-end
}
.items-baseline {
align-items: baseline
}
.justify-start {
justify-content: flex-start
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.justify-end {
justify-content: flex-end
}
.gap-1 {
gap: .25rem
}
.gap-2 {
gap: .5rem
}
.gap-3 {
gap: .75rem
}
.gap-4 {
gap: 1rem
}
.gap-5 {
gap: 1.25rem
}
.gap-6 {
gap: 1.5rem
}
.gap-8 {
gap: 2rem
}
.gap-10 {
gap: 2.5rem
}
.gap-12 {
gap: 3rem
}
.gap-16 {
gap: 4rem
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.col-span-2 {
grid-column: span 2/span 2
}
.w-full {
width: 100%
}
.w-auto {
width: auto
}
.w-1 {
width: .25rem
}
.w-2 {
width: .5rem
}
.w-3 {
width: .75rem
}
.w-4 {
width: 1rem
}
.w-5 {
width: 1.25rem
}
.w-6 {
width: 1.5rem
}
.w-8 {
width: 2rem
}
.w-10 {
width: 2.5rem
}
.w-12 {
width: 3rem
}
.w-14 {
width: 3.5rem
}
.w-16 {
width: 4rem
}
.w-20 {
width: 5rem
}
.w-24 {
width: 6rem
}
.h-full {
height: 100%
}
.h-auto {
height: auto
}
.h-px {
height: 1px
}
.h-1 {
height: .25rem
}
.h-2 {
height: .5rem
}
.h-3 {
height: .75rem
}
.h-4 {
height: 1rem
}
.h-5 {
height: 1.25rem
}
.h-6 {
height: 1.5rem
}
.h-8 {
height: 2rem
}
.h-10 {
height: 2.5rem
}
.h-12 {
height: 3rem
}
.h-14 {
height: 3.5rem
}
.h-16 {
height: 4rem
}
.h-20 {
height: 5rem
}
.h-24 {
height: 6rem
}
.min-h-screen {
min-height: 100vh
}
.h-screen {
height: 100vh
}
.max-w-none {
max-width: none
}
.max-w-xs {
max-width: 20rem
}
.max-w-sm {
max-width: 24rem
}
.max-w-md {
max-width: 28rem
}
.max-w-lg {
max-width: 32rem
}
.max-w-xl {
max-width: 36rem
}
.max-w-2xl {
max-width: 42rem
}
.max-w-3xl {
max-width: 48rem
}
.max-w-5xl {
max-width: 64rem
}
.max-w-7xl {
max-width: 80rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.mt-1 {
margin-top: .25rem
}
.mt-2 {
margin-top: .5rem
}
.mt-3 {
margin-top: .75rem
}
.mt-4 {
margin-top: 1rem
}
.mt-5 {
margin-top: 1.25rem
}
.mt-6 {
margin-top: 1.5rem
}
.mt-8 {
margin-top: 2rem
}
.mt-10 {
margin-top: 2.5rem
}
.mt-12 {
margin-top: 3rem
}
.mt-16 {
margin-top: 4rem
}
.mt-20 {
margin-top: 5rem
}
.mt-24 {
margin-top: 6rem
}
.mb-1 {
margin-bottom: .25rem
}
.mb-2 {
margin-bottom: .5rem
}
.mb-3 {
margin-bottom: .75rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.mb-10 {
margin-bottom: 2.5rem
}
.mb-12 {
margin-bottom: 3rem
}
.mb-16 {
margin-bottom: 4rem
}
.p-2 {
padding: .5rem
}
.p-3 {
padding: .75rem
}
.p-4 {
padding: 1rem
}
.p-5 {
padding: 1.25rem
}
.p-6 {
padding: 1.5rem
}
.p-8 {
padding: 2rem
}
.px-2 {
padding-left: .5rem;
padding-right: .5rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.py-1 {
padding-top: .25rem;
padding-bottom: .25rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem
}
.pt-2 {
padding-top: .5rem
}
.pt-4 {
padding-top: 1rem
}
.pt-6 {
padding-top: 1.5rem
}
.pt-8 {
padding-top: 2rem
}
.pt-16 {
padding-top: 4rem
}
.pb-2 {
padding-bottom: .5rem
}
.pb-4 {
padding-bottom: 1rem
}
.pb-6 {
padding-bottom: 1.5rem
}
.pb-8 {
padding-bottom: 2rem
}
.pb-16 {
padding-bottom: 4rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.font-mono {
font-family: var(--font-mono)
}
.font-display {
font-family: var(--font-display)
}
.font-light {
font-weight: 300
}
.font-normal {
font-weight: 400
}
.font-medium {
font-weight: 500
}
.font-semibold {
font-weight: 600
}
.font-bold {
font-weight: 700
}
.font-extrabold {
font-weight: 800
}
.font-black {
font-weight: 900
}
.uppercase {
text-transform: uppercase
}
.lowercase {
text-transform: lowercase
}
.capitalize {
text-transform: capitalize
}
.italic {
font-style: italic
}
.leading-none {
line-height: 1
}
.leading-tight {
line-height: 1.15
}
.leading-snug {
line-height: 1.3
}
.leading-normal {
line-height: 1.5
}
.leading-relaxed {
line-height: 1.65
}
.tracking-tighter {
letter-spacing: -.05em
}
.tracking-tight {
letter-spacing: -.025em
}
.tracking-normal {
letter-spacing: 0
}
.tracking-wide {
letter-spacing: .06em
}
.tracking-wider {
letter-spacing: .12em
}
.tracking-widest {
letter-spacing: .2em
}
.overflow-hidden {
overflow: hidden
}
.overflow-visible {
overflow: visible
}
.rounded-none {
border-radius: 0
}
.rounded {
border-radius: .25rem
}
.rounded-md {
border-radius: .375rem
}
.rounded-lg {
border-radius: .5rem
}
.rounded-xl {
border-radius: .75rem
}
.rounded-2xl {
border-radius: 1rem
}
.rounded-3xl {
border-radius: 1.5rem
}
.rounded-full {
border-radius: 9999px
}
.border {
border-width: 1px
}
.border-0 {
border-width: 0
}
.border-t {
border-top-width: 1px
}
.border-b {
border-bottom-width: 1px
}
.border-l {
border-left-width: 1px
}
.border-r {
border-right-width: 1px
}
.border-line {
border-color: var(--line)
}
.border-line-2 {
border-color: var(--line-2)
}
.border-signal {
border-color: var(--signal)
}
.border-bone {
border-color: var(--bone)
}
.bg-transparent {
background-color: transparent
}
.bg-ink {
background-color: var(--ink)
}
.bg-panel {
background-color: var(--panel)
}
.bg-panel-2 {
background-color: var(--panel-2)
}
.bg-bone {
background-color: var(--bone)
}
.bg-signal {
background-color: var(--signal)
}
.bg-amber {
background-color: var(--amber)
}
.text-bone {
color: var(--bone)
}
.text-muted {
color: var(--muted)
}
.text-dim {
color: var(--dim)
}
.text-signal {
color: var(--signal)
}
.text-amber {
color: var(--amber)
}
.text-ink {
color: var(--ink)
}
.opacity-0 {
opacity: 0
}
.opacity-40 {
opacity: .4
}
.opacity-50 {
opacity: .5
}
.opacity-60 {
opacity: .6
}
.opacity-70 {
opacity: .7
}
.opacity-100 {
opacity: 1
}
.select-none {
user-select: none
}
.pointer-events-none {
pointer-events: none
}
.pointer-events-auto {
pointer-events: auto
}
.cursor-pointer {
cursor: pointer
}
.cursor-grab {
cursor: grab
}
.will-change-transform {
will-change: transform
}
.origin-center {
transform-origin: center
}
.origin-left {
transform-origin: left
}
.whitespace-nowrap {
white-space: nowrap
}
.list-none {
list-style: none
}
.backdrop-blur {
backdrop-filter: blur(12px)
}
.transition {
transition-property: color, background-color, border-color, opacity, box-shadow, transform, filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.duration-300 {
transition-duration: .3s
}
.duration-500 {
transition-duration: .5s
}
.duration-700 {
transition-duration: .7s
}
.text-\[10px\] {
font-size: 10px
}
.text-\[11px\] {
font-size: 11px
}
.text-\[12px\] {
font-size: 12px
}
.text-\[13px\] {
font-size: 13px
}
.text-xs {
font-size: .75rem;
line-height: 1.1rem
}
.text-sm {
font-size: .875rem;
line-height: 1.35rem
}
.text-base {
font-size: 1rem;
line-height: 1.55rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.7rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.8rem
}
.text-2xl {
font-size: 1.5rem;
line-height: 1.2
}
.text-3xl {
font-size: 1.875rem;
line-height: 1.15
}
.text-4xl {
font-size: 2.25rem;
line-height: 1.1
}
.text-5xl {
font-size: 3rem;
line-height: 1
}
.text-6xl {
font-size: 3.75rem;
line-height: 1
}
@media (min-width:768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.md\:flex {
display: flex
}
.md\:hidden {
display: none
}
.md\:block {
display: block
}
.md\:flex-row {
flex-direction: row
}
.md\:text-left {
text-align: left
}
.md\:text-right {
text-align: right
}
.md\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.md\:py-12 {
padding-top: 3rem;
padding-bottom: 3rem
}
.md\:gap-8 {
gap: 2rem
}
.md\:gap-12 {
gap: 3rem
}
.md\:text-sm {
font-size: .875rem;
line-height: 1.35rem
}
.md\:col-span-1 {
grid-column: span 1/span 1
}
}
@media (min-width:1024px) {
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.lg\:flex {
display: flex
}
.lg\:hidden {
display: none
}
.lg\:block {
display: block
}
.lg\:px-12 {
padding-left: 3rem;
padding-right: 3rem
}
}


/* ═══════════════════════════════════════════════════════════════════
VOLTA ATELIER, design tokens
═══════════════════════════════════════════════════════════════════ */
:root {
--ink: #141414;
/* page ground */
--ink-deep: #0d0d0d;
/* wells, footer */
--panel: #1c1c1e;
/* cards */
--panel-2: #232326;
/* raised cards */
--line: rgba(255, 255, 255, .11);
--line-2: rgba(255, 255, 255, .20);
--bone: #f4f3f0;
/* primary type */
--muted: #8e8e95;
/* secondary type */
--dim: #5c5c63;
/* tertiary type */
--signal: #fb3732;
/* the red */
--amber: #ffa31a;
/* stars, accents */
--volt: #3b49e4;
/* the 3D word blue */
--font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--gut: clamp(18px, 3.4vw, 48px);
/* page gutter */
--rail: clamp(64px, 7vw, 96px);
/* header height */
/* motion */
--e-out: cubic-bezier(.16, 1, .3, 1);
/* expo out, reveals */
--e-io: cubic-bezier(.76, 0, .24, 1);
/* expo in-out, transitions */
--e-soft: cubic-bezier(.25, .46, .45, .94);
/* quad out, hovers */
--e-back: cubic-bezier(.34, 1.56, .64, 1);
/* overshoot, pops */
}
html {
background: var(--ink);
scroll-behavior: auto
}
body {
background: var(--ink);
color: var(--bone);
font-family: var(--font-mono);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.is-locked {
overflow: hidden;
height: 100vh
}
::selection {
background: var(--signal);
color: #fff
}
/* thin scrollbar in the site's own language */
::-webkit-scrollbar {
width: 9px;
height: 9px
}
::-webkit-scrollbar-track {
background: var(--ink)
}
::-webkit-scrollbar-thumb {
background: #2e2e33;
border-radius: 9px;
border: 2px solid var(--ink)
}
::-webkit-scrollbar-thumb:hover {
background: #43434a
}
:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 3px;
border-radius: 2px
}
/* ── type scale ────────────────────────────────────────────────── */
.d-mega {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3.4rem, 13.2vw, 11.5rem);
line-height: .82;
letter-spacing: -.045em;
text-transform: uppercase;
}
.d-xl {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.4rem, 7.6vw, 6rem);
line-height: .9;
letter-spacing: -.04em;
text-transform: uppercase
}
.d-lg {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.9rem, 4.4vw, 3.4rem);
line-height: .98;
letter-spacing: -.03em
}
.d-md {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.35rem, 2.3vw, 1.9rem);
line-height: 1.06;
letter-spacing: -.02em
}
.d-sm {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
line-height: 1.15;
letter-spacing: -.01em
}
.mono-xs {
font-family: var(--font-mono);
font-size: clamp(9.5px, .72vw, 11px);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--muted)
}
.mono-sm {
font-family: var(--font-mono);
font-size: clamp(11px, .86vw, 13px);
letter-spacing: .01em;
line-height: 1.75;
color: var(--muted)
}
.mono-md {
font-family: var(--font-mono);
font-size: clamp(13px, 1.12vw, 16px);
letter-spacing: .005em;
line-height: 1.72;
color: var(--bone)
}
/* ── shared primitives ────────────────────────────────────────── */
.shell {
width: 100%;
max-width: 1560px;
margin-inline: auto;
padding-inline: var(--gut)
}
.sec {
position: relative;
padding-block: clamp(84px, 11vw, 168px)
}
.sec--tight {
padding-block: clamp(56px, 7vw, 104px)
}
/* section eyebrow: red, struck through, as in the reference */
.eyebrow {
display: inline-block;
position: relative;
font-family: var(--font-mono);
font-weight: 500;
font-size: clamp(10.5px, .82vw, 12.5px);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--signal);
padding-block: 2px;
}
.eyebrow::after {
content: "";
position: absolute;
left: -4%;
right: -4%;
top: 52%;
height: 1.5px;
background: var(--signal);
transform: scaleX(var(--sx, 0));
transform-origin: left;
transition: transform .9s var(--e-out) .1s;
}
.is-in .eyebrow {
--sx: 1
}
/* outlined chip, the nav / tag language */
.chip {
display: inline-flex;
align-items: center;
gap: .45em;
font-family: var(--font-mono);
font-size: clamp(10px, .78vw, 12px);
letter-spacing: .04em;
line-height: 1;
padding: .62em 1.05em;
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--bone);
background: transparent;
white-space: nowrap;
transition: background .34s var(--e-soft), color .34s var(--e-soft), border-color .34s var(--e-soft);
}
.chip:hover {
background: var(--bone);
color: var(--ink);
border-color: var(--bone)
}
.chip--solid {
background: #000;
border-color: #000;
color: var(--bone)
}
.chip--signal {
background: var(--signal);
border-color: var(--signal);
color: #fff
}
/* filled action button with a wipe */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
font-family: var(--font-mono);
font-weight: 500;
font-size: clamp(11px, .85vw, 13px);
letter-spacing: .09em;
text-transform: uppercase;
padding: 1.05em 2.1em;
border-radius: 999px;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--bone);
background: var(--bone);
color: var(--ink);
cursor: pointer;
transition: color .42s var(--e-io), border-color .42s var(--e-io);
}
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--signal);
transform: translateY(101%);
transition: transform .5s var(--e-io);
}
.btn:hover {
color: #fff;
border-color: var(--signal)
}
.btn:hover::before {
transform: translateY(0)
}
.btn--ghost {
background: transparent;
color: var(--bone);
border-color: var(--line-2)
}
.btn--ghost:hover {
border-color: var(--signal)
}
/* the recurring bordered data box */
.box {
position: relative;
border: 1px solid var(--line);
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 62%), var(--panel);
overflow: hidden;
}
.box::after {
/* top hairline highlight */
content: "";
position: absolute;
left: 14%;
right: 14%;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
}
/* corner registration marks, fixed to the viewport */
.frame-mark {
position: fixed;
z-index: 40;
width: 16px;
height: 16px;
pointer-events: none;
opacity: .34
}
.frame-mark i {
position: absolute;
background: var(--bone)
}
.frame-mark i:first-child {
width: 100%;
height: 1px
}
.frame-mark i:last-child {
width: 1px;
height: 100%
}
.fm-tl {
top: calc(var(--rail) - 8px);
left: var(--gut)
}
.fm-tl i:first-child {
top: 0;
left: 0
}
.fm-tl i:last-child {
top: 0;
left: 0
}
.fm-bl {
bottom: 26px;
left: var(--gut)
}
.fm-bl i:first-child {
bottom: 0;
left: 0
}
.fm-bl i:last-child {
bottom: 0;
left: 0
}
.fm-tr {
top: calc(var(--rail) - 8px);
right: var(--gut)
}
.fm-tr i:first-child {
top: 0;
right: 0
}
.fm-tr i:last-child {
top: 0;
right: 0
}
.fm-br {
bottom: 26px;
right: var(--gut)
}
.fm-br i:first-child {
bottom: 0;
right: 0
}
.fm-br i:last-child {
bottom: 0;
right: 0
}
/* ── reveal primitives (driven by IntersectionObserver) ───────── */
[data-rise] {
opacity: 0;
transform: translate3d(0, var(--rise, 34px), 0);
transition: opacity .95s var(--e-out), transform 1.05s var(--e-out)
}
.is-in[data-rise],
[data-rise].is-in {
opacity: 1;
transform: none
}
[data-mask] {
overflow: hidden;
display: block
}
[data-mask]>* {
display: block;
transform: translate3d(0, 105%, 0);
transition: transform 1.05s var(--e-out)
}
.is-in [data-mask]>*,
[data-mask].is-in>* {
transform: none
}
.stagger>* {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity .8s var(--e-out), transform .8s var(--e-out)
}
.stagger.is-in>* {
opacity: 1;
transform: none
}
.stagger.is-in>*:nth-child(1) {
transition-delay: .02s
}
.stagger.is-in>*:nth-child(2) {
transition-delay: .09s
}
.stagger.is-in>*:nth-child(3) {
transition-delay: .16s
}
.stagger.is-in>*:nth-child(4) {
transition-delay: .23s
}
.stagger.is-in>*:nth-child(5) {
transition-delay: .30s
}
.stagger.is-in>*:nth-child(6) {
transition-delay: .37s
}
.stagger.is-in>*:nth-child(7) {
transition-delay: .44s
}
.stagger.is-in>*:nth-child(8) {
transition-delay: .51s
}
/* per-word scroll-linked copy reveal */
.wordwash span {
color: rgba(244, 243, 240, .13);
transition: color .42s linear
}
.wordwash span.lit {
color: var(--bone)
}
/* ── film grain + vignette, very low key ─────────────────────── */
.grain {
position: fixed;
inset: -120px;
z-index: 95;
pointer-events: none;
opacity: .05;
background-image: var(--grain-url);
background-size: 180px 180px;
animation: grainShift 6s steps(6) infinite;
mix-blend-mode: overlay;
}
@keyframes grainShift {
0% {
transform: translate(0, 0)
}
16% {
transform: translate(-12px, 8px)
}
33% {
transform: translate(9px, -14px)
}
50% {
transform: translate(-16px, -6px)
}
66% {
transform: translate(14px, 11px)
}
83% {
transform: translate(-7px, 15px)
}
100% {
transform: translate(0, 0)
}
}
.vignette {
position: fixed;
inset: 0;
z-index: 38;
pointer-events: none;
background: radial-gradient(125% 92% at 50% 45%, transparent 52%, rgba(0, 0, 0, .5) 100%)
}


/* ═══════════════════════════════════════════════════════════════
PRELOADER
═══════════════════════════════════════════════════════════════ */
#loader {
position: fixed;
inset: 0;
z-index: 100;
background: var(--ink-deep);
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: var(--gut);
will-change: transform
}
#loader.done {
transform: translate3d(0, -101%, 0);
transition: transform 1.15s var(--e-io) .18s
}
#loader .lo-count {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3.6rem, 15vw, 12rem);
line-height: .78;
letter-spacing: -.05em;
color: var(--bone);
font-variant-numeric: tabular-nums
}
#loader .lo-side {
text-align: right;
padding-bottom: .7em
}
#loader .lo-bar {
position: absolute;
left: var(--gut);
right: var(--gut);
bottom: calc(var(--gut) - 1px);
height: 1px;
background: var(--line)
}
#loader .lo-bar i {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--signal)
}
#loader .lo-word {
position: absolute;
left: var(--gut);
top: var(--gut);
display: flex;
gap: .5em;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--dim)
}
#loader .lo-word b {
color: var(--signal);
font-weight: 500
}
/* ═══════════════════════════════════════════════════════════════
HEADER / NAV
═══════════════════════════════════════════════════════════════ */
.hdr {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
height: var(--rail);
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--gut);
pointer-events: none
}
.hdr>* {
pointer-events: auto
}
.hdr::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(20, 20, 20, .92), rgba(20, 20, 20, 0));
opacity: 0;
transition: opacity .5s var(--e-soft)
}
.hdr.stuck::before {
opacity: 1;
backdrop-filter: blur(9px)
}
/* mark: V to A, the rule stretches on hover */
.mark {
display: inline-flex;
align-items: center;
gap: .34em;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(15px, 1.35vw, 19px);
letter-spacing: .02em;
color: var(--bone);
line-height: 1
}
.mark i {
display: block;
height: 2px;
width: 22px;
background: var(--bone);
transition: width .55s var(--e-io), background .35s
}
.mark:hover i {
width: 40px;
background: var(--signal)
}
/* chained pill navigation */
.navchain {
display: flex;
align-items: center
}
.navchain a {
position: relative;
font-family: var(--font-mono);
font-size: clamp(10px, .78vw, 12.5px);
letter-spacing: .02em;
line-height: 1;
color: var(--bone);
padding: .72em 1.15em;
border: 1px solid var(--line-2);
border-radius: 999px;
margin-left: -.7em;
background: rgba(20, 20, 20, .55);
backdrop-filter: blur(6px);
transition: color .34s var(--e-soft), border-color .34s var(--e-soft), transform .4s var(--e-back);
overflow: hidden;
isolation: isolate;
}
.navchain a:first-child {
margin-left: 0
}
.navchain a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--bone);
transform: scale(.2);
opacity: 0;
border-radius: 999px;
transition: transform .45s var(--e-io), opacity .3s var(--e-io)
}
.navchain a:hover {
color: var(--ink);
border-color: var(--bone);
transform: translateY(-2px);
z-index: 2
}
.navchain a:hover::before {
transform: scale(1);
opacity: 1
}
.navchain a.on {
border-color: var(--signal)
}
.burger {
display: none;
width: 44px;
height: 38px;
border: 1px solid var(--line-2);
border-radius: 999px;
align-items: center;
justify-content: center;
gap: 4px;
flex-direction: column;
background: rgba(20, 20, 20, .6)
}
.burger i {
display: block;
width: 15px;
height: 1.5px;
background: var(--bone);
transition: transform .45s var(--e-io), opacity .3s
}
.burger.open i:nth-child(1) {
transform: translateY(2.75px) rotate(45deg)
}
.burger.open i:nth-child(2) {
opacity: 0
}
.burger.open i:nth-child(3) {
transform: translateY(-2.75px) rotate(-45deg)
}
#drawer {
position: fixed;
inset: 0;
z-index: 59;
background: var(--ink-deep);
display: flex;
flex-direction: column;
justify-content: center;
gap: .1em;
padding: var(--gut);
clip-path: inset(0 0 100% 0);
transition: clip-path .8s var(--e-io);
pointer-events: none
}
#drawer.open {
clip-path: inset(0 0 0 0);
pointer-events: auto
}
#drawer a {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.2rem, 11vw, 4.2rem);
line-height: 1.02;
letter-spacing: -.03em;
text-transform: uppercase;
color: var(--bone);
opacity: 0;
transform: translateY(28px);
transition: opacity .6s var(--e-out), transform .7s var(--e-out)
}
#drawer.open a {
opacity: 1;
transform: none
}
#drawer.open a:nth-child(1) {
transition-delay: .20s
}
#drawer.open a:nth-child(2) {
transition-delay: .27s
}
#drawer.open a:nth-child(3) {
transition-delay: .34s
}
#drawer.open a:nth-child(4) {
transition-delay: .41s
}
#drawer.open a:nth-child(5) {
transition-delay: .48s
}
#drawer a:hover {
color: var(--signal)
}
/* ═══════════════════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════════════════ */
#hero {
position: relative;
min-height: 100svh;
overflow: hidden;
display: grid;
grid-template-rows: var(--rail) 1fr auto
}
.hero-stage {
position: relative;
grid-row: 2;
will-change: transform, opacity
}
/* the two display words, corner-anchored */
.hero-word {
position: absolute;
z-index: 3;
pointer-events: none;
user-select: none
}
.hero-word .d-mega {
display: block
}
.hw-a {
top: 0;
left: var(--gut)
}
.hw-b {
bottom: 0;
right: var(--gut)
}
@media(max-width:640px) {
.hw-a {
top: 2vh
}
.hw-b {
bottom: 2vh
}
}
/* mouse-reactive collage */
.collage {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center
}
.collage-in {
position: relative;
width: clamp(260px, 34vw, 470px);
aspect-ratio: 1/1;
transform-style: preserve-3d;
will-change: transform
}
.tile {
position: absolute;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .72), 0 2px 8px rgba(0, 0, 0, .4);
will-change: transform;
backface-visibility: hidden
}
.tile img,
.tile canvas {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.tile::after {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09)
}
/* hero furniture */
.hero-list {
position: absolute;
left: var(--gut);
bottom: 0;
z-index: 4
}
.hero-list li {
font-family: var(--font-mono);
font-size: clamp(11px, .88vw, 13.5px);
color: var(--muted);
line-height: 2.05;
transition: color .3s;
cursor: default
}
.hero-list li:hover {
color: var(--bone)
}
.hero-meta {
position: absolute;
right: var(--gut);
top: 0;
z-index: 4;
text-align: right
}
.scrollcue {
grid-row: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
padding-bottom: 22px;
z-index: 4
}
.scrollcue span {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--dim)
}
.scrollcue i {
display: block;
width: 1px;
height: 38px;
background: var(--line-2);
position: relative;
overflow: hidden
}
.scrollcue i::after {
content: "";
position: absolute;
inset: 0;
background: var(--bone);
animation: cueRun 2.1s var(--e-io) infinite
}
@keyframes cueRun {
0% {
transform: translateY(-100%)
}
55%,
100% {
transform: translateY(100%)
}
}
/* clients-manager widget (hero + CTA) */
.dock {
display: inline-flex;
align-items: center;
gap: .72em;
position: relative;
background: #0a0a0b;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px;
padding: .5em .95em .5em .5em;
box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .9);
animation: dockFloat 6.5s ease-in-out infinite
}
@keyframes dockFloat {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-7px)
}
}
.dock-av {
width: 46px;
height: 46px;
border-radius: 10px;
overflow: hidden;
flex: none;
background: var(--amber)
}
.dock-av canvas,
.dock-av img {
width: 100%;
height: 100%;
display: block
}
.dock p {
font-family: var(--font-mono);
font-size: clamp(10px, .76vw, 12px);
line-height: 1.5;
color: var(--bone)
}
.dock .bub {
position: absolute;
left: -42%;
bottom: 78%;
background: var(--signal);
color: #fff;
border-radius: 9px 9px 9px 2px;
padding: .55em .8em;
font-family: var(--font-mono);
font-size: clamp(9px, .68vw, 10.5px);
line-height: 1.42;
white-space: nowrap;
transform-origin: bottom left;
transform: scale(.6) translateY(8px);
opacity: 0;
transition: transform .55s var(--e-back), opacity .35s ease
}
.dock .bub.show {
transform: none;
opacity: 1
}
.dock .bub::after {
content: "";
position: absolute;
left: 2px;
top: 100%;
border: 6px solid transparent;
border-top-color: var(--signal);
border-right-width: 9px;
border-left-width: 0
}
.hero-dock {
position: absolute;
right: calc(var(--gut) + 2vw);
bottom: 26%;
z-index: 5
}
@media(max-width:900px) {
.hero-dock {
display: none
}
}
/* ambient dust canvas */
#dust {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .55
}


/* ═══════════════════════════════════════════════════════════════
SERVICES, scroll-driven 3D cylinder of words
═══════════════════════════════════════════════════════════════ */
#services {
position: relative
}
.cyl-pin {
position: sticky;
top: 0;
height: 100svh;
display: grid;
grid-template-rows: auto 1fr auto;
align-items: center;
overflow: hidden
}
.cyl-intro {
padding-top: calc(var(--rail) + 2vh);
text-align: center
}
.cyl-intro p {
max-width: 44ch;
margin-inline: auto
}
.cyl-wrap {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: clamp(260px, 34vw, 400px);
overflow: hidden;
perspective: 1150px;
perspective-origin: 50% 50%
}
.cyl {
position: relative;
width: min(1000px, 88vw);
height: clamp(230px, 30vw, 340px);
transform-style: preserve-3d;
will-change: transform
}
.cyl-row {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.2vw, 20px);
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform, opacity;
}
.cyl-row h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.7rem, 5.2vw, 4.4rem);
line-height: 1;
letter-spacing: -.038em;
text-transform: uppercase;
color: var(--signal);
white-space: nowrap;
transition: color .3s linear;
}
.cyl-row.mid h3 {
color: var(--bone)
}
.cyl-thumb {
width: clamp(30px, 3.6vw, 54px);
aspect-ratio: 1/1;
border-radius: 11px;
overflow: hidden;
flex: none;
box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8)
}
.cyl-thumb canvas,
.cyl-thumb img {
width: 100%;
height: 100%;
display: block
}
/* soft top/bottom occlusion so rows fade into the ground */
.cyl-wrap::before,
.cyl-wrap::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 34%;
z-index: 4;
pointer-events: none
}
.cyl-wrap::before {
top: 0;
background: linear-gradient(180deg, var(--ink) 22%, rgba(20, 20, 20, .55) 62%, transparent)
}
.cyl-wrap::after {
bottom: 0;
background: linear-gradient(0deg, var(--ink) 22%, rgba(20, 20, 20, .55) 62%, transparent)
}
.cyl-side {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5
}
.cyl-side.l {
left: var(--gut)
}
.cyl-side.r {
right: var(--gut)
}
@media(max-width:860px) {
.cyl-side {
display: none
}
}
/* ── stats strip ─────────────────────────────────────────────── */
.stat {
padding: clamp(16px, 1.9vw, 26px) clamp(16px, 1.9vw, 26px) clamp(18px, 2.1vw, 30px);
min-height: clamp(96px, 10vw, 138px);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color .45s var(--e-soft), transform .55s var(--e-out)
}
.stat:hover {
border-color: var(--line-2);
transform: translateY(-5px)
}
.stat b {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.75rem, 3.9vw, 3.1rem);
line-height: .94;
letter-spacing: -.035em;
color: var(--bone);
font-variant-numeric: tabular-nums;
display: flex;
align-items: flex-start;
gap: .12em
}
.stat b sup {
font-size: .36em;
color: var(--amber);
line-height: 1;
margin-top: .25em
}
.stat .pips {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: 3px
}
.stat .pips i {
width: 2.5px;
height: 2.5px;
border-radius: 50%;
background: var(--dim)
}
/* ═══════════════════════════════════════════════════════════════
SELECTED WORKS, fanned 3D card stack
═══════════════════════════════════════════════════════════════ */
#works {
position: relative
}
.stack-pin {
position: sticky;
top: 0;
height: 100svh;
display: grid;
place-items: center;
overflow: hidden
}
.stack {
position: relative;
width: clamp(230px, 27vw, 380px);
aspect-ratio: 1/1;
transform-style: preserve-3d;
perspective: 1400px
}
.pcard {
position: absolute;
inset: 0;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 30px 70px -22px rgba(0, 0, 0, .85);
will-change: transform, opacity, filter;
backface-visibility: hidden;
transition: filter .45s var(--e-soft);
}
.pcard canvas,
.pcard img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.pcard::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13)
}
.pcard .tags {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(9px);
transition: opacity .4s var(--e-soft), transform .5s var(--e-out)
}
.pcard.front .tags {
opacity: 1;
transform: none
}
.pcard .tags .chip {
background: rgba(8, 8, 9, .72);
backdrop-filter: blur(7px);
border-color: rgba(255, 255, 255, .2)
}
.pcard .tags .chip:hover {
background: rgba(8, 8, 9, .72);
color: var(--bone)
}
.pcard .yr {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .12em;
color: rgba(255, 255, 255, .72);
opacity: 0;
transition: opacity .4s
}
.pcard.front .yr {
opacity: 1
}
/* the round "view" cursor follower */
#viewdot {
position: fixed;
z-index: 70;
width: 78px;
height: 78px;
border-radius: 50%;
background: var(--bone);
color: var(--ink);
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
pointer-events: none;
transform: translate3d(-50%, -50%, 0) scale(0);
opacity: 0;
transition: transform .48s var(--e-back), opacity .3s ease, background .3s ease, color .3s ease;
will-change: transform;
left: 0;
top: 0
}
#viewdot.on {
transform: translate3d(-50%, -50%, 0) scale(1);
opacity: 1
}
#viewdot.press {
background: var(--signal);
color: #fff
}
#viewdot i {
position: absolute;
inset: 5px;
border-radius: 50%;
border: 1px solid rgba(20, 20, 20, .22);
animation: dotPulse 2.6s var(--e-io) infinite
}
@keyframes dotPulse {
0%,
100% {
transform: scale(.86);
opacity: .9
}
50% {
transform: scale(1.02);
opacity: .25
}
}
.works-rail {
position: absolute;
left: var(--gut);
right: var(--gut);
bottom: clamp(26px, 5vh, 58px);
z-index: 6;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
pointer-events: none
}
.works-rail .idx {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 5vw, 4rem);
line-height: .85;
letter-spacing: -.04em;
color: var(--bone);
font-variant-numeric: tabular-nums
}
.works-rail .idx em {
font-style: normal;
color: var(--dim);
font-size: .42em;
vertical-align: super
}
.works-prog {
position: relative;
flex: 1;
max-width: 340px;
height: 1px;
background: var(--line);
margin-bottom: .7em
}
.works-prog i {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--signal);
transition: width .45s var(--e-soft)
}
/* ═══════════════════════════════════════════════════════════════
WEBGL WORD
═══════════════════════════════════════════════════════════════ */
#glword {
position: relative;
height: 210svh
}
.gl-pin {
position: sticky;
top: 0;
height: 100svh;
display: grid;
grid-template-rows: 1fr auto;
place-items: center;
overflow: hidden
}
#glcanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1
}
.gl-cap {
grid-row: 2;
z-index: 3;
padding-bottom: clamp(38px, 7vh, 90px);
text-align: center;
max-width: 46ch
}
.gl-badge {
position: absolute;
z-index: 3;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--dim)
}
.gl-badge.l {
left: var(--gut);
top: calc(var(--rail) + 8px)
}
.gl-badge.r {
right: var(--gut);
top: calc(var(--rail) + 8px)
}
/* ═══════════════════════════════════════════════════════════════
PROCESS, pinned horizontal scroll
═══════════════════════════════════════════════════════════════ */
#process {
position: relative
}
.hz-pin {
position: sticky;
top: 0;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden
}
.hz-head {
padding-inline: var(--gut);
padding-top: calc(var(--rail) + 1vh);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap
}
.hz-track {
display: flex;
align-items: stretch;
gap: clamp(16px, 2vw, 30px);
padding-inline: var(--gut);
will-change: transform;
margin-block: auto
}
.phase {
position: relative;
flex: none;
width: clamp(255px, 29vw, 400px);
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
padding: clamp(20px, 2.2vw, 32px);
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color .5s var(--e-soft), background .5s var(--e-soft), transform .6s var(--e-out)
}
.phase:hover {
border-color: var(--line-2);
background: var(--panel-2);
transform: translateY(-6px)
}
.phase .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .16em;
color: var(--signal)
}
.phase h4 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.3rem, 2.2vw, 1.95rem);
line-height: 1.03;
letter-spacing: -.026em;
text-transform: uppercase;
color: var(--bone)
}
.phase .bar {
height: 1px;
background: var(--line);
position: relative;
overflow: hidden
}
.phase .bar i {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: var(--signal);
transition: width .8s var(--e-io)
}
.phase:hover .bar i {
width: 100%
}
.phase ul li {
position: relative;
padding-left: 16px;
font-family: var(--font-mono);
font-size: clamp(10.5px, .8vw, 12.5px);
line-height: 1.95;
color: var(--muted)
}
.phase ul li::before {
content: "";
position: absolute;
left: 0;
top: .88em;
width: 6px;
height: 1px;
background: var(--dim)
}
.hz-prog {
position: absolute;
left: var(--gut);
right: var(--gut);
bottom: clamp(24px, 4vh, 46px);
height: 1px;
background: var(--line)
}
.hz-prog i {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--bone)
}


/* ═══════════════════════════════════════════════════════════════
TEAM, 3D arc carousel
═══════════════════════════════════════════════════════════════ */
.arc {
position: relative;
height: clamp(400px, 42vw, 600px);
perspective: 1250px;
perspective-origin: 50% 46%;
overflow: hidden;
cursor: grab;
touch-action: pan-y
}
.arc.drag {
cursor: grabbing
}
.arc-in {
position: absolute;
inset: 0;
transform-style: preserve-3d
}
.tcard {
position: absolute;
left: 50%;
top: 50%;
width: clamp(196px, 21vw, 320px);
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
padding: clamp(12px, 1.1vw, 17px);
text-align: center;
will-change: transform, opacity;
transform-style: preserve-3d;
backface-visibility: hidden
}
.tcard .ph {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 1/1.13;
background: #cfd0d3;
margin-bottom: 14px
}
.tcard .ph canvas,
.tcard .ph img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.tcard h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(13.5px, 1.15vw, 17px);
letter-spacing: -.01em;
color: var(--bone);
line-height: 1.2
}
.tcard p {
font-family: var(--font-mono);
font-size: clamp(9.5px, .72vw, 11px);
color: var(--muted);
margin-top: 5px;
line-height: 1.4
}
.tcard .chip {
margin-top: 13px;
font-size: 10px;
padding: .55em 1em
}
.arc-cursor {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
text-align: center;
z-index: 6
}
/* ═══════════════════════════════════════════════════════════════
TESTIMONIALS, 3D cylinder carousel
═══════════════════════════════════════════════════════════════ */
.cw {
position: relative;
height: clamp(420px, 42vw, 580px);
perspective: 1250px;
overflow: hidden;
cursor: grab;
touch-action: pan-y
}
.cw.drag {
cursor: grabbing
}
.cw-in {
position: absolute;
inset: 0;
transform-style: preserve-3d
}
.qcard {
position: absolute;
left: 50%;
top: 50%;
width: clamp(240px, 26vw, 390px);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 20px;
padding: clamp(20px, 2vw, 30px) clamp(16px, 1.6vw, 24px);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
will-change: transform, opacity;
backface-visibility: hidden;
transform-style: preserve-3d;
box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .9)
}
.qcard .stars {
display: flex;
gap: 4px;
color: var(--amber);
font-size: clamp(13px, 1.15vw, 17px);
line-height: 1
}
.qcard .stars i {
opacity: .22
}
.qcard .stars i.on {
opacity: 1
}
.qcard blockquote {
font-family: var(--font-mono);
font-size: clamp(10.5px, .82vw, 12.5px);
line-height: 1.85;
color: var(--muted);
text-align: center;
flex: 1
}
.qcard .who {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
margin-top: 2px
}
.qcard .who .av {
width: clamp(46px, 4.4vw, 62px);
aspect-ratio: 1/1;
border-radius: 50%;
overflow: hidden;
background: var(--panel-2)
}
.qcard .who .av canvas,
.qcard .who .av img {
width: 100%;
height: 100%;
display: block
}
.qcard .who h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(12.5px, 1.05vw, 15.5px);
color: var(--bone)
}
.qcard .who p {
font-family: var(--font-mono);
font-size: clamp(9px, .68vw, 10.5px);
color: var(--dim);
margin-top: 3px
}
.cw-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: clamp(14px, 2vw, 26px)
}
.cw-nav button {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--line-2);
display: grid;
place-items: center;
color: var(--bone);
background: transparent;
cursor: pointer;
transition: background .35s var(--e-soft), color .35s var(--e-soft), border-color .35s
}
.cw-nav button:hover {
background: var(--bone);
color: var(--ink);
border-color: var(--bone)
}
.cw-dots {
display: flex;
gap: 6px;
margin-inline: 8px
}
.cw-dots i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--dim);
transition: background .3s, transform .3s
}
.cw-dots i.on {
background: var(--signal);
transform: scale(1.5)
}
/* ═══════════════════════════════════════════════════════════════
PRICING
═══════════════════════════════════════════════════════════════ */
.plan {
position: relative;
display: flex;
flex-direction: column;
gap: clamp(16px, 1.6vw, 22px);
padding: clamp(22px, 2.4vw, 34px);
transition: transform .6s var(--e-out), border-color .5s var(--e-soft)
}
.plan:hover {
transform: translateY(-8px);
border-color: var(--line-2)
}
.plan.feat {
background: linear-gradient(180deg, rgba(251, 55, 50, .09), rgba(255, 255, 255, 0) 46%), var(--panel-2);
border-color: rgba(251, 55, 50, .4)
}
.plan .price {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: .95;
letter-spacing: -.04em;
color: var(--bone);
display: flex;
align-items: baseline;
gap: .18em
}
.plan .price small {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: .09em;
color: var(--dim);
text-transform: uppercase
}
.plan ul {
display: flex;
flex-direction: column;
gap: 11px
}
.plan ul li {
position: relative;
padding-left: 19px;
font-family: var(--font-mono);
font-size: clamp(10.5px, .8vw, 12.5px);
line-height: 1.6;
color: var(--muted)
}
.plan ul li::before {
content: "";
position: absolute;
left: 0;
top: .58em;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid var(--dim)
}
.plan.feat ul li::before {
border-color: var(--signal)
}
.plan .flag {
position: absolute;
top: -1px;
right: 22px;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: #fff;
background: var(--signal);
padding: .45em .8em;
border-radius: 0 0 7px 7px
}
/* ═══════════════════════════════════════════════════════════════
FAQ
═══════════════════════════════════════════════════════════════ */
.faq {
border-top: 1px solid var(--line)
}
.faq:last-child {
border-bottom: 1px solid var(--line)
}
.faq button {
width: 100%;
display: flex;
align-items: center;
gap: clamp(12px, 2vw, 26px);
padding: clamp(19px, 2.1vw, 29px) 0;
text-align: left;
cursor: pointer;
background: none
}
.faq .n {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: .13em;
color: var(--dim);
flex: none;
width: 2.4em;
transition: color .35s
}
.faq h4 {
flex: 1;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1rem, 1.72vw, 1.45rem);
line-height: 1.25;
letter-spacing: -.015em;
color: var(--bone);
transition: color .35s, transform .5s var(--e-out)
}
.faq .pm {
position: relative;
flex: none;
width: 16px;
height: 16px
}
.faq .pm i {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1.5px;
background: var(--bone);
transition: transform .5s var(--e-io), background .35s
}
.faq .pm i:last-child {
transform: rotate(90deg)
}
.faq[open] .pm i:last-child,
.faq.open .pm i:last-child {
transform: rotate(0)
}
.faq.open .n {
color: var(--signal)
}
.faq.open h4 {
color: var(--signal)
}
.faq.open .pm i {
background: var(--signal)
}
.faq button:hover h4 {
transform: translateX(6px)
}
.faq .body {
overflow: hidden;
height: 0;
transition: height .6s var(--e-io)
}
.faq .body p {
padding: 0 0 clamp(22px, 2.4vw, 30px) calc(2.4em + clamp(12px, 2vw, 26px));
max-width: 74ch;
font-family: var(--font-mono);
font-size: clamp(11px, .85vw, 13px);
line-height: 1.95;
color: var(--muted)
}
/* ═══════════════════════════════════════════════════════════════
CTA, ghost-text field
═══════════════════════════════════════════════════════════════ */
#cta {
position: relative;
min-height: 100svh;
display: grid;
place-items: center;
overflow: hidden;
background: var(--ink-deep)
}
.ghosts {
position: absolute;
inset: -14%;
z-index: 1;
pointer-events: none;
will-change: transform
}
.ghosts span {
position: absolute;
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.03em;
color: #fff;
white-space: nowrap;
opacity: .05;
user-select: none
}
.cta-core {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vw, 38px);
padding-inline: var(--gut);
text-align: center
}
.cta-head {
position: relative;
display: inline-block
}
.cta-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.5rem, 10.4vw, 9rem);
line-height: .9;
letter-spacing: -.05em;
text-transform: uppercase;
color: var(--bone)
}
.cta-underline {
position: absolute;
left: -2%;
right: -2%;
bottom: -.02em;
height: .22em;
overflow: visible
}
.cta-underline path {
fill: none;
stroke: var(--signal);
stroke-width: 19;
stroke-linecap: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 1.25s var(--e-io) .25s
}
#cta.is-in .cta-underline path {
stroke-dashoffset: 0
}
.cta-mail {
font-family: var(--font-mono);
font-size: clamp(11px, 1.05vw, 15px);
letter-spacing: .05em;
color: var(--muted);
position: relative;
display: inline-block
}
.cta-mail::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background: var(--bone);
transform: scaleX(0);
transform-origin: right;
transition: transform .55s var(--e-io)
}
.cta-mail:hover {
color: var(--bone)
}
.cta-mail:hover::after {
transform: scaleX(1);
transform-origin: left
}
.magnet {
display: inline-block;
will-change: transform
}
/* ═══════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════ */
footer {
position: relative;
background: var(--ink-deep);
border-top: 1px solid var(--line);
z-index: 2
}
.fcol h5 {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--dim);
margin-bottom: 16px
}
.fcol a {
display: block;
font-family: var(--font-mono);
font-size: clamp(11px, .85vw, 13px);
color: var(--muted);
line-height: 2.1;
transition: color .3s, transform .4s var(--e-out);
width: fit-content
}
.fcol a:hover {
color: var(--bone);
transform: translateX(5px)
}
.marquee {
overflow: hidden;
border-block: 1px solid var(--line);
padding-block: clamp(12px, 1.4vw, 20px);
display: flex;
user-select: none
}
.marquee ul {
display: flex;
align-items: center;
gap: clamp(24px, 3vw, 48px);
flex: none;
padding-right: clamp(24px, 3vw, 48px);
animation: mq 26s linear infinite
}
.marquee li {
display: flex;
align-items: center;
gap: clamp(24px, 3vw, 48px);
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.1rem, 2.4vw, 2rem);
letter-spacing: -.02em;
text-transform: uppercase;
color: var(--bone);
white-space: nowrap
}
.marquee li em {
font-style: normal;
color: var(--signal)
}
@keyframes mq {
to {
transform: translateX(-100%)
}
}
.totop {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var(--line-2);
display: grid;
place-items: center;
transition: background .35s, color .35s, border-color .35s;
cursor: pointer
}
.totop:hover {
background: var(--bone);
color: var(--ink);
border-color: var(--bone)
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media(max-width:900px) {
.navchain {
display: none
}
.burger {
display: flex
}
.hero-meta {
display: none
}
.cyl {
width: 94vw
}
.works-rail .idx {
font-size: 2.3rem
}
}
@media(max-width:640px) {
#glword {
height: 170svh
}
.hero-list {
bottom: auto;
top: 0
}
.hw-a {
top: 8vh
}
.arc {
height: 430px
}
.cw {
height: 430px
}
.marquee ul {
animation-duration: 18s
}
}
/* ═══════════════════════════════════════════════════════════════
REDUCED MOTION
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important
}
[data-rise],
[data-mask]>*,
.stagger>* {
opacity: 1 !important;
transform: none !important
}
.grain {
display: none
}
.dock {
animation: none
}
.cyl-pin,
.stack-pin,
.gl-pin,
.hz-pin {
position: relative;
height: auto;
min-height: auto;
padding-block: 60px
}
#glword,
#services,
#works,
#process {
height: auto
}
.hz-track {
flex-wrap: wrap;
transform: none !important
}
}


#process .hz-track {
width: max-content;
max-width: none;
flex-wrap: nowrap;
}
#process .phase {
flex-shrink: 0;
}
@media (max-width: 1024px) {
#process .hz-track {
gap: 18px;
}
#process .phase {
width: clamp(245px, 36vw, 350px);
}
}
@media (max-width: 640px) {
#process .hz-track {
gap: 14px;
}
#process .phase {
width: min(82vw, 300px);
}
}


/* 3D Transform utilities */