:root {
  --ink: #071625;
  --ink-2: #102334;
  --paper: #f6f3ea;
  --paper-2: #e7e1d5;
  --blue: #2d68ff;
  --acid: #c9ff39;
  --coral: #ff735e;
  --white: #f8f5ed;
  --line: rgba(248, 245, 237, .24);
  --shadow: 0 22px 55px rgba(0, 0, 0, .16);
  --display: Impact, "Arial Narrow", "Aptos Display", sans-serif;
  --body: "Aptos", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--body); font-size: 16px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.site-shell { position: relative; overflow: hidden; }
.site-nav { position: absolute; z-index: 10; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem; padding: 1.4rem clamp(1rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line); }
.wordmark { font-family: var(--display); font-size: 1.5rem; letter-spacing: -.04em; }
.wordmark span { font-family: var(--mono); font-size: .45em; vertical-align: top; margin-left: .2rem; }
.site-nav nav { display: flex; gap: clamp(1rem, 3vw, 2.4rem); font: .62rem var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.site-nav nav a, .nav-cta, .text-link { transition: color .2s ease; }
.site-nav nav a:hover, .nav-cta:hover, .text-link:hover { color: var(--acid); }
.nav-cta { justify-self: end; font: .62rem var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.nav-cta span { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; margin-left: .55rem; border: 1px solid currentColor; border-radius: 50%; }
.hero { position: relative; min-height: 100svh; padding: clamp(7rem, 14vw, 11rem) clamp(1.2rem, 7vw, 8rem) 5rem; background: var(--ink); isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; background-image: radial-gradient(rgba(255,255,255,.22) .65px, transparent .65px); background-size: 6px 6px; mask-image: linear-gradient(135deg, #000, transparent 72%); }
.hero-copy { position: relative; z-index: 3; width: min(42rem, 65vw); }
.eyebrow { margin: 0 0 1.2rem; font: .64rem var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--acid); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; line-height: .9; }
h1 { max-width: 8ch; margin-bottom: 2rem; font-size: clamp(4.4rem, 10.7vw, 10.8rem); }
h1 em, h2 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; }
.hero-intro { max-width: 23rem; margin-bottom: 2rem; color: rgba(248,245,237,.7); line-height: 1.55; }
.button { display: inline-flex; align-items: center; gap: 1.5rem; border: 0; padding: .85rem 1rem .85rem 1.15rem; font: .67rem var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.button span { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid currentColor; border-radius: 50%; }
.button-coral { background: var(--coral); color: var(--ink); }
.button-blue { background: var(--blue); color: var(--white); }
.hero-object { position: absolute; z-index: 2; }
.chrome-orbit { width: clamp(10rem, 25vw, 26rem); aspect-ratio: 1; right: 11%; top: 23%; border-radius: 43% 57% 67% 33% / 51% 42% 58% 49%; background: linear-gradient(125deg, #596b76, #f7f6f0 20%, #45606f 42%, #fff 56%, #152633 78%); box-shadow: inset 14px 10px 23px rgba(255,255,255,.65), inset -16px -12px 20px rgba(0,0,0,.36), 20px 30px 60px rgba(0,0,0,.3); transform: rotate(-25deg); }
.acid-loop { width: clamp(8rem, 18vw, 18rem); aspect-ratio: 1; right: -2%; top: 12%; display: grid; place-items: center; background: var(--acid); color: var(--ink); border-radius: 49% 51% 43% 57%; transform: rotate(14deg); font: clamp(.75rem, 1.4vw, 1rem) var(--mono); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.acid-loop::after { content: ""; position: absolute; width: 40%; aspect-ratio: 1; background: var(--ink); border-radius: 50%; }
.acid-loop span { position: relative; z-index: 1; transform: translateY(-1.8rem); }
.browser-panel { right: 6%; top: 37%; width: clamp(18rem, 36vw, 37rem); padding: .7rem; background: rgba(245,246,241,.2); border: 1px solid rgba(255,255,255,.5); box-shadow: var(--shadow); backdrop-filter: blur(8px); transform: rotate(8deg); transition: transform .35s ease; }
.browser-panel:hover { transform: rotate(5deg) translateY(-.5rem); }
.window-dots { display: flex; gap: .35rem; margin: .25rem 0 .6rem .3rem; }
.window-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--coral); }.window-dots i:nth-child(2) { background: var(--acid); }.window-dots i:nth-child(3) { background: var(--blue); }
.panel-image { height: clamp(8rem, 16vw, 15rem); background: linear-gradient(135deg, rgba(45,104,255,.9), rgba(5,24,39,.2)), linear-gradient(155deg, #98aeb9 10%, #ecf2e8 45%, #d78567 46%, #193144 70%); }
.panel-kicker, .panel-arrow { display: block; margin-top: .65rem; font: .57rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }.browser-panel strong { display: block; margin-top: .5rem; font: 1.35rem var(--display); line-height: .95; }.browser-panel strong em { color: var(--acid); font-family: Georgia, serif; font-weight: 400; }.panel-arrow { float: right; margin-top: -1.35rem; font-size: 1rem; color: var(--coral); }
.hero-line { width: 10rem; height: 1px; right: 10%; bottom: 19%; background: var(--acid); transform: rotate(-22deg); }.hero-stamp { right: 4%; bottom: 11%; font: .65rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--acid); transform: rotate(-8deg); }
.section-paper { position: relative; color: var(--ink); background: var(--paper); }.section-ink { position: relative; background: var(--ink); color: var(--white); }
.services, .process { min-height: 100svh; padding: clamp(5rem, 9vw, 9rem) clamp(1.2rem, 7vw, 8rem); }
.section-heading { max-width: 44rem; }.section-heading h2, .process-copy h2 { font-size: clamp(3.4rem, 7vw, 7.2rem); }.section-heading h2 em, .process-copy h2 em { color: var(--blue); }.section-lede { max-width: 21rem; margin: 2rem 0 4rem 38%; color: rgba(7,22,37,.7); line-height: 1.55; }
.service-stack { display: grid; grid-template-columns: 1.15fr .92fr .92fr 1.2fr; gap: .8rem; align-items: end; }.service-card { position: relative; min-height: 16rem; padding: 1.1rem; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(7,22,37,.16); transition: transform .35s ease, box-shadow .35s ease; }.service-card:hover, .project-card:hover { transform: translateY(-.6rem) rotate(-1deg); box-shadow: var(--shadow); }.service-web { min-height: 20rem; background: var(--blue); color: var(--white); transform: rotate(-2deg); }.service-graphic { background: var(--coral); transform: rotate(2deg); }.service-content { min-height: 18rem; background: #d8dde0; transform: rotate(-2deg); }.service-branding { min-height: 22rem; background: var(--acid); transform: rotate(2deg); }.card-index, .card-mark { position: absolute; top: 1rem; font: .67rem var(--mono); }.card-index { left: 1rem; }.card-mark { right: 1rem; font-size: 1.3rem; }.service-card h3 { margin: 0 0 .8rem; font: clamp(1.35rem, 2.6vw, 2.5rem) var(--display); line-height: .9; letter-spacing: -.03em; }.service-card p { max-width: 14rem; margin: 0; font-size: .82rem; line-height: 1.4; }
.work { min-height: 100svh; padding: clamp(5rem, 9vw, 9rem) clamp(1.2rem, 7vw, 8rem); }.work-heading { width: 30%; min-width: 18rem; }.work-heading h2 { font-size: clamp(3.4rem, 6.5vw, 6.5rem); }.work-heading h2 em { color: var(--acid); }.work-heading > p:not(.eyebrow) { max-width: 16rem; color: rgba(248,245,237,.67); line-height: 1.5; }.text-link { display: inline-block; margin-top: 1rem; color: var(--coral); font: .68rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }.text-link span { margin-left: .5rem; font-size: 1.2rem; }
.project-layers { position: relative; min-height: 32rem; margin: -4rem 0 0 30%; }.project-card { position: absolute; width: clamp(14rem, 24vw, 25rem); padding: .7rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); box-shadow: var(--shadow); backdrop-filter: blur(8px); transition: transform .35s ease, box-shadow .35s ease; }.project-river { left: 4%; top: 4rem; transform: rotate(-8deg); }.project-field { left: 36%; top: 11rem; transform: rotate(5deg); }.project-lume { right: 0; top: 2rem; transform: rotate(12deg); }.project-number { display: block; margin-bottom: .5rem; font: .62rem var(--mono); }.project-art { height: 13rem; margin-bottom: .75rem; }.art-river { background: linear-gradient(145deg, rgba(45,104,255,.3), transparent), linear-gradient(165deg, #d9e1e7 18%, #7e9ba9 19%, #29485a 51%, #e9f0e7 52%, #b2c7cb 77%); }.art-field { background: radial-gradient(circle at 60% 44%, #d8f29e 0 12%, transparent 13%), linear-gradient(135deg, #c66b4e 0 36%, #efd2a7 37% 60%, #203741 61%); }.art-lume { background: linear-gradient(145deg, transparent 0 39%, rgba(255,255,255,.7) 40% 43%, transparent 44%), linear-gradient(135deg, #d2d7cd, #839099 49%, #1d2b31 50%); }.project-card strong, .project-card small { display: block; }.project-card strong { font: 1.2rem var(--display); }.project-card small { margin-top: .25rem; color: rgba(248,245,237,.7); font: .6rem var(--mono); text-transform: uppercase; }
.process { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; overflow: hidden; }.process-copy { max-width: 34rem; }.process-copy > p:not(.eyebrow) { max-width: 23rem; color: rgba(7,22,37,.7); line-height: 1.55; }.process-object { position: relative; min-height: 30rem; }.process-panel { position: absolute; z-index: 1; left: 13%; top: 15%; width: 70%; padding: 3rem 2rem; background: var(--blue); color: var(--white); font: clamp(1.5rem, 3vw, 3rem) var(--mono); text-transform: uppercase; transform: rotate(-8deg); box-shadow: var(--shadow); }.process-panel strong { color: var(--acid); font-weight: 400; }.process-slab { position: absolute; width: 60%; aspect-ratio: .72; right: 5%; top: 2%; background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(37,59,70,.1)), #bfc8c6; transform: rotate(13deg); box-shadow: var(--shadow); }.steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; margin: 0; list-style: none; }.steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(7,22,37,.25); }.steps li > span { color: var(--blue); font: 1.4rem var(--display); }.steps strong { font: 1.4rem var(--display); }.steps p { margin-top: .45rem; color: rgba(7,22,37,.68); font-size: .82rem; line-height: 1.45; }
.contact { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; padding: clamp(5rem, 9vw, 9rem) clamp(1.2rem, 7vw, 8rem) 4rem; overflow: hidden; }.contact-copy h2 { font-size: clamp(4rem, 8vw, 8rem); }.contact-copy h2 em { color: var(--acid); }.contact-copy > p:not(.eyebrow) { max-width: 18rem; color: rgba(248,245,237,.7); line-height: 1.5; }.brief-form { position: relative; z-index: 1; padding: clamp(1.2rem, 3vw, 2.4rem); background: rgba(21,40,55,.74); border: 1px solid rgba(248,245,237,.45); backdrop-filter: blur(10px); box-shadow: var(--shadow); }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.brief-form label { display: block; margin-bottom: 1rem; font: .6rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }.brief-form input, .brief-form select, .brief-form textarea { display: block; width: 100%; margin-top: .45rem; padding: .75rem 0; border: 0; border-bottom: 1px solid rgba(248,245,237,.38); outline: none; background: transparent; color: var(--white); font: .9rem var(--body); }.brief-form select option { color: var(--ink); }.brief-form input:focus, .brief-form select:focus, .brief-form textarea:focus { border-color: var(--acid); }.brief-form textarea { resize: vertical; }.form-note { margin: 1rem 0 0; color: rgba(248,245,237,.58); font: .58rem var(--mono); text-transform: uppercase; }.contact-orbit { position: absolute; width: 14rem; aspect-ratio: 1; right: -4rem; bottom: 1rem; border: 1px solid rgba(45,104,255,.7); border-radius: 45% 55% 58% 42%; transform: rotate(27deg); }.contact-orbit::after { content: ""; position: absolute; inset: 2.5rem; border: 1px solid var(--coral); border-radius: 50%; }
.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 2rem; align-items: end; padding: 2rem clamp(1.2rem, 7vw, 8rem); border-top: 1px solid var(--line); background: var(--ink); }.site-footer p { margin: 0; color: rgba(248,245,237,.58); font-size: .72rem; line-height: 1.5; }.back-top { justify-self: end; color: var(--acid); font: .63rem var(--mono); text-transform: uppercase; }
.drag-item { touch-action: none; user-select: none; }.drag-item.is-dragging { z-index: 20; }
@media (max-width: 800px) { .site-nav { grid-template-columns: 1fr auto; }.site-nav nav { display: none; }.hero { min-height: 46rem; padding-top: 7rem; }.hero-copy { width: 90%; }.browser-panel { right: -7%; top: 49%; width: 80vw; }.chrome-orbit { right: 10%; top: 28%; width: 12rem; opacity: .65; }.acid-loop { right: -2rem; top: 22%; width: 9rem; }.hero-stamp { display: none; }.section-lede { margin-left: 0; }.service-stack { grid-template-columns: 1fr 1fr; }.service-card, .service-web, .service-content, .service-branding { min-height: 15rem; }.work-heading { width: 100%; }.project-layers { min-height: 27rem; margin: 1rem 0 0; }.project-card { width: 56vw; }.project-field { left: 25%; top: 9rem; }.project-lume { right: -4%; top: 1rem; }.process { display: block; }.process-object { min-height: 25rem; margin: 1rem 0 2rem; }.steps { display: block; }.steps li { margin-top: 1.2rem; }.contact { display: block; }.brief-form { margin-top: 3rem; }.site-footer { grid-template-columns: 1fr 1fr; }.site-footer p:nth-of-type(2) { text-align: right; }.back-top { justify-self: start; } }
@media (max-width: 480px) { .hero { min-height: 43rem; }.hero h1 { font-size: clamp(3.5rem, 17vw, 5.2rem); }.browser-panel { top: 52%; }.service-stack, .form-row { grid-template-columns: 1fr; }.service-card, .service-web, .service-content, .service-branding { min-height: 13rem; }.project-card { width: 68vw; }.project-river { left: -3%; }.project-field { left: 20%; top: 8rem; }.project-lume { right: -20%; }.site-footer { grid-template-columns: 1fr; }.site-footer p:nth-of-type(2) { text-align: left; }.back-top { justify-self: start; } }
.brief-form { touch-action: auto; user-select: auto; }
.hero-wordmark { font-family: "Arial Black", Impact, "Arial Narrow", sans-serif; letter-spacing: .015em; word-spacing: .02em; }
.hero-wordmark { display: flex; align-items: flex-start; gap: .055em; letter-spacing: 0; }
.hero-wordmark span { display: block; }
.hero-wordmark sup { margin-left: .08em; }
.project-art { overflow: hidden; background: var(--ink-2); }
.project-art img, .panel-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.project-art img, .panel-image img { -webkit-user-drag: none; }
.project-card:hover .project-art img, .browser-panel:hover .panel-image img { transform: scale(1.06); filter: saturate(1.12) contrast(1.04); }
.artifact { position: absolute; z-index: 5; pointer-events: auto; }
.artifact-cross { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; color: var(--acid); font: 1.4rem var(--mono); }
.cross-a { left: 4%; top: 26%; }.cross-b { right: 29%; top: 20%; color: var(--coral); transform: rotate(12deg); }
.artifact-orbit { width: 6rem; aspect-ratio: 1; border: 1px solid rgba(248,245,237,.5); border-radius: 50%; }.artifact-orbit::after { content: ""; position: absolute; inset: 1.1rem; border: 1px solid var(--blue); border-radius: 50%; }.orbit-a { left: 43%; top: 21%; transform: rotate(25deg); }.orbit-b { right: 32%; bottom: 9%; width: 4rem; border-color: var(--coral); transform: rotate(-19deg); }
.artifact-tab { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; padding: .55rem .75rem; border: 1px solid rgba(248,245,237,.5); background: rgba(7,22,37,.62); font: .58rem var(--mono); text-transform: uppercase; letter-spacing: .08em; transform: rotate(-7deg); }.artifact-tab span { color: var(--acid); }.tab-a { left: 5%; bottom: 12%; }
.paper-tag { padding: .7rem .8rem; background: var(--coral); color: var(--ink); box-shadow: 8px 10px 0 rgba(7,22,37,.12); font: .63rem var(--mono); text-transform: uppercase; line-height: 1.25; }.paper-tag strong { color: var(--white); font-size: .85rem; font-weight: 400; }.tag-a { left: 10%; top: 25%; transform: rotate(-8deg); }.tag-b { right: 4%; bottom: 18%; background: var(--blue); color: var(--white); transform: rotate(7deg); }.tiny-window { right: 14%; top: 28%; display: grid; grid-template-columns: repeat(3, .35rem) 1fr; gap: .25rem; align-items: center; width: 9.5rem; padding: .45rem .55rem; border: 1px solid rgba(7,22,37,.3); background: rgba(255,255,255,.62); color: var(--ink); transform: rotate(5deg); }.tiny-window span { width: .35rem; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }.tiny-window span:nth-child(2) { background: var(--acid); }.tiny-window span:nth-child(3) { background: var(--blue); }.tiny-window b { font: .55rem var(--mono); text-align: right; font-weight: 400; }
.work-cursor { left: 43%; top: 7%; color: var(--acid); font: 2.4rem var(--mono); transform: rotate(-12deg); }.work-label { right: 5%; bottom: 7%; padding: .5rem .7rem; border: 1px solid rgba(248,245,237,.4); color: var(--coral); font: .58rem var(--mono); text-transform: uppercase; letter-spacing: .08em; transform: rotate(-5deg); }.work-dot { width: .9rem; aspect-ratio: 1; border-radius: 50%; background: var(--blue); }.dot-a { left: 26%; top: 25%; }.dot-b { right: 27%; top: 33%; background: var(--coral); }
.process-note { right: 2%; top: 8%; padding: .7rem .8rem; border: 1px solid rgba(7,22,37,.25); color: var(--blue); font: .62rem var(--mono); text-transform: uppercase; transform: rotate(8deg); }.process-note strong { color: var(--ink); font-size: .9rem; font-weight: 400; }.process-ring { left: 42%; bottom: 17%; width: 5rem; aspect-ratio: 1; border: 2px solid var(--coral); border-radius: 50%; }.process-ring::after { content: ""; position: absolute; inset: .85rem; border: 1px solid var(--blue); border-radius: 50%; }
.contact-swatch { left: 43%; top: 18%; width: 5rem; aspect-ratio: .72; background: var(--blue); transform: rotate(18deg); box-shadow: 12px 12px 0 var(--acid); }.contact-ticket { right: 3%; top: 15%; padding: .7rem .8rem; border: 1px solid rgba(248,245,237,.48); color: var(--acid); font: .58rem var(--mono); text-transform: uppercase; transform: rotate(-8deg); }.contact-ticket strong { color: var(--coral); font-size: .9rem; font-weight: 400; }
.object-cloud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cloud-object { position: absolute; display: block; pointer-events: auto; transform-origin: center; transition: box-shadow .2s ease, opacity .2s ease; }
.cloud-object:hover { opacity: 1 !important; box-shadow: 0 0 0 3px rgba(201,255,57,.22); }
.cloud-dot { border-radius: 50%; }.cloud-line { height: 1px !important; }.cloud-pill { border-radius: 999px; }.cloud-square { border: 1px solid currentColor; }.cloud-diamond { border: 1px solid currentColor; transform: rotate(45deg); }.cloud-ring { border: 1px solid currentColor; border-radius: 50%; background: transparent !important; }.cloud-spark::before { content: "✦"; position: absolute; inset: -0.25em; font: 1.2em var(--mono); text-align: center; }.cloud-note { width: 4.2rem !important; height: 3.2rem !important; background: url("assets/crumpled-paper-note.png") center / cover no-repeat; filter: saturate(.75) contrast(.98); box-shadow: 5px 8px 10px rgba(7,22,37,.18); }.cloud-tab { border: 1px solid currentColor; background: rgba(248,245,237,.3); }.cloud-blue { background: var(--blue); color: var(--blue); }.cloud-acid { background: var(--acid); color: var(--acid); }.cloud-coral { background: var(--coral); color: var(--coral); }.cloud-paper { background: var(--paper); color: var(--paper); }.cloud-ink { background: var(--ink); color: var(--ink); border-color: var(--paper); }.cloud-clear { background: rgba(248,245,237,.25); color: var(--paper); border: 1px solid currentColor; }
@media (max-width: 800px) { .artifact-orbit, .orbit-a, .work-label, .process-ring { display: none; }.cross-a { top: 30%; }.cross-b { right: 21%; }.tab-a { bottom: 8%; }.tag-a { left: 4%; top: 22%; }.tag-b { right: 1%; bottom: 10%; }.tiny-window { right: 4%; top: 31%; }.work-cursor { left: 68%; top: 4%; }.process-note { right: 0; top: 5%; }.contact-swatch { left: 7%; top: 42%; }.contact-ticket { right: 1%; top: 10%; } }
.hero-wordmark { position: absolute; z-index: 1; top: clamp(5.5rem, 9vw, 8rem); left: clamp(1rem, 6vw, 7rem); color: var(--white); font: clamp(6.5rem, 18vw, 18rem)/.72 var(--display); letter-spacing: -.09em; pointer-events: auto; white-space: nowrap; }.hero-wordmark sup { font: .08em var(--mono); vertical-align: top; letter-spacing: 0; }
.hero-copy { padding-top: clamp(7rem, 13vw, 11rem); }
.project-tray { position: fixed; z-index: 30; right: clamp(1rem, 3vw, 3rem); bottom: 1.2rem; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; width: min(19rem, calc(100vw - 2rem)); padding: .8rem 1rem; border: 1px solid rgba(248,245,237,.44); background: rgba(7,22,37,.84); box-shadow: var(--shadow); backdrop-filter: blur(12px); font: .6rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }.project-tray strong { color: var(--acid); font-weight: 400; }.project-tray b { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--coral); color: var(--ink); font-size: .95rem; }.project-tray:hover { border-color: var(--acid); }
.hero-chip { position: absolute; z-index: 4; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .6rem .8rem; border: 1px solid rgba(248,245,237,.42); background: rgba(7,22,37,.55); color: var(--white); font: .6rem var(--mono); text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease; }.hero-chip span { color: var(--acid); }.hero-chip b { color: var(--coral); font-size: 1rem; }.hero-chip:hover { border-color: var(--acid); background: rgba(45,104,255,.52); }.chip-process { right: 42%; bottom: 13%; transform: rotate(-4deg); }.chip-people { right: 15%; bottom: 27%; transform: rotate(6deg); }
.service-detail { display: block; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font-size: .78rem; line-height: 1.4; transition: max-height .35s ease, margin .35s ease, opacity .35s ease; }.service-card.is-open { min-height: 24rem; }.service-card.is-open .service-detail { max-height: 6rem; margin-top: .8rem; opacity: .86; }.service-card.is-focused { outline: 2px solid var(--ink); outline-offset: 4px; }.service-orbit { position: absolute; display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; border: 1px solid rgba(7,22,37,.35); border-radius: 50%; font: 1.4rem var(--mono); }.service-orbit-a { right: 6%; top: 14%; color: var(--blue); transform: rotate(15deg); }.service-orbit-b { left: 5%; bottom: 9%; color: var(--coral); transform: rotate(-18deg); }
.steps li { position: relative; cursor: pointer; transition: color .25s ease, transform .25s ease; }.steps li > b { margin-left: auto; color: var(--blue); font: 1.1rem var(--mono); opacity: 0; transition: opacity .2s ease; }.steps li:hover, .steps li.active { transform: translateX(.5rem); }.steps li:hover > b, .steps li.active > b { opacity: 1; }.steps li small { display: block; margin-top: .55rem; color: var(--blue); font: .62rem var(--mono); text-transform: uppercase; }
.contact-note { position: absolute; right: 4%; bottom: 17%; z-index: 1; color: var(--acid); font: .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; transform: rotate(-9deg); }.contact-note em { color: var(--coral); font-style: normal; }
@media (max-width: 800px) { .hero-wordmark { top: 6rem; left: 1rem; font-size: 20vw; opacity: .42; }.hero-copy { padding-top: 6rem; }.chip-process { right: 9%; bottom: 10%; }.chip-people { right: 2%; bottom: 24%; }.project-tray { bottom: .6rem; }.contact-note { right: 2%; bottom: 9%; } }