:root {
  --ink: #151515;
  --paper: #f0eee9;
  --red: #ff5b4d;
  --blue: #95b7ff;
  --yellow: #ffd349;
  --lime: #b6ed5d;
  --line: rgba(21, 21, 21, 0.22);
  --display: "Bricolage Grotesque", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { --cursor-x: -100px; --cursor-y: -100px; margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--display); }
a { color: inherit; }
.fluid-cursor { position: fixed; z-index: 10; top: 0; left: 0; width: clamp(54px, 6vw, 88px); aspect-ratio: 1; border: 1px solid rgba(21,21,21,.28); border-radius: 48% 52% 43% 57% / 52% 40% 60% 48%; opacity: 0; pointer-events: none; background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.75), rgba(255,211,73,.75) 34%, rgba(255,91,77,.65) 72%); mix-blend-mode: multiply; transform: translate3d(calc(var(--cursor-x) - 50%), calc(var(--cursor-y) - 50%), 0); transition: opacity .2s ease; animation: fluid-cursor-shape 2.4s ease-in-out infinite alternate; }
body.is-fluid-active .fluid-cursor { opacity: .8; }
@keyframes fluid-cursor-shape { from { border-radius: 48% 52% 43% 57% / 52% 40% 60% 48%; } to { border-radius: 61% 39% 58% 42% / 39% 58% 42% 61%; } }

main { overflow: hidden; }
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 54px clamp(20px, 8vw, 130px); background: #e9e7df; }
.hero::before { position: absolute; z-index: 0; inset: 0; content: ""; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.72), transparent 43%), radial-gradient(circle at 16% 14%, rgba(149,183,255,.3), transparent 29%), radial-gradient(circle at 87% 80%, rgba(255,91,77,.15), transparent 33%); }
.hero-field { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; }
.section-index, .project-number { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .02em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(5.1rem, 14.4vw, 15.5rem); font-weight: 700; letter-spacing: -.09em; line-height: .7; }
h1 span { display: block; animation: hero-name-enter .95s cubic-bezier(.16, 1, .3, 1) both; }
h1 span + span { animation-delay: .13s; }
h1 em { font-weight: 400; }
@keyframes hero-name-enter { from { opacity: 0; filter: blur(9px); transform: translateY(42px) scale(.97); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
.hero-name-zone { position: relative; z-index: 1; width: min(1220px, 100%); padding: 28px 0; text-align: center; cursor: crosshair; }
.hero-footer { position: absolute; z-index: 2; bottom: clamp(28px, 5vw, 58px); left: 50%; transform: translateX(-50%); }
.round-link { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 1.7rem; text-decoration: none; transition: color .25s, background .25s, transform .25s; }
.round-link:hover { color: var(--paper); background: var(--ink); transform: rotate(45deg); }

.intro, .capabilities, .contact { display: grid; grid-template-columns: minmax(120px, .6fr) 2fr; gap: 24px; padding: clamp(90px, 13vw, 210px) clamp(20px, 8vw, 130px); }
.intro { background: var(--blue); }
.large-copy { max-width: 1030px; margin-bottom: 42px; font-size: clamp(2.25rem, 5.35vw, 6.1rem); font-weight: 500; letter-spacing: -.075em; line-height: .96; }
.large-copy span { color: var(--red); }
.text-link, .project-meta a { font-family: var(--mono); font-size: .7rem; text-decoration: none; text-transform: uppercase; }
.text-link span, .project-meta a span { color: var(--red); font-size: 1rem; }

.work { padding: 26px clamp(20px, 4vw, 64px) clamp(90px, 13vw, 190px); background: var(--ink); color: var(--paper); }
.section-heading { display: grid; grid-template-columns: .7fr 1.25fr; gap: 20px; align-items: end; padding: 115px clamp(0px, 4vw, 66px) 90px; }
h2 { margin: 0; font-size: clamp(4rem, 10vw, 11rem); font-weight: 500; letter-spacing: -.1em; line-height: .74; }
.project-list { display: grid; gap: clamp(90px, 12vw, 160px); }
.project { display: grid; gap: 22px; }.project-large, .project-wide { grid-template-columns: 1.65fr .55fr; align-items: end; }.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 6vw, 95px); }
.project-visual { position: relative; isolation: isolate; display: flex; min-height: 310px; overflow: hidden; align-items: flex-end; padding: 26px; color: var(--ink); text-decoration: none; }
.project-large .project-visual { min-height: min(66vw, 740px); }.project-wide .project-visual { min-height: min(48vw, 540px); }
.visual-racer { background: var(--red); }.visual-circle, .visual-pushcube { background: var(--yellow); }.visual-imitation { background: var(--lime); }.visual-fleche { background: var(--blue); }
.visual-mark { position: absolute; top: 22px; left: 24px; z-index: 2; font-family: var(--mono); font-size: .68rem; }.visual-word { position: relative; z-index: 2; font-size: clamp(3.2rem, 9vw, 10rem); font-weight: 700; letter-spacing: -.11em; line-height: .7; }
.visual-racer::before { position: absolute; width: 160%; height: 28%; right: -45%; top: 40%; content: ""; background: var(--ink); transform: rotate(-38deg); }.visual-racer::after { position: absolute; z-index: 1; width: 22%; aspect-ratio: 1; top: 19%; left: 20%; border: 10px solid var(--paper); border-radius: 50%; content: ""; }
.orb { position: absolute; display: block; border: 1px solid var(--ink); border-radius: 50%; }.orb-one { width: 58%; top: 14%; right: -7%; aspect-ratio: 1; background: var(--blue); }.orb-two { width: 32%; top: 43%; left: 13%; aspect-ratio: 1; background: var(--red); }.orb-three { width: 13%; top: 24%; left: 16%; aspect-ratio: 1; background: var(--paper); }
.visual-imitation::before { position: absolute; right: -24%; bottom: -35%; width: 75%; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; content: ""; }.visual-imitation .visual-word { font-size: clamp(3rem, 7vw, 7rem); }
.gesture { position: absolute; top: 3%; right: 7%; font-size: min(28vw, 400px); line-height: 1; }.visual-fleche::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ink); content: ""; }.visual-fleche .visual-word { font-size: clamp(3.3rem, 10vw, 10rem); }
.visual-pushcube::before { position: absolute; right: -15%; top: 20%; width: 58%; aspect-ratio: 1; border: 1px solid var(--ink); content: ""; transform: rotate(26deg); }.cube { position: absolute; display: block; width: 18%; aspect-ratio: 1; border: 2px solid var(--ink); }.cube-one { top: 28%; left: 21%; background: var(--red); transform: rotate(18deg); }.cube-two { right: 27%; bottom: 18%; background: var(--blue); transform: rotate(-12deg); }
.project-visual::after { position: absolute; z-index: 3; right: 22px; bottom: 20px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; content: "↗"; font-family: var(--mono); font-size: 1.1rem; transition: color .25s, background .25s; }.project-visual:hover::after { color: var(--paper); background: var(--ink); }
.project-meta { display: grid; gap: 18px; }.project-meta h3 { margin: 5px 0 0; font-size: clamp(1.7rem, 2.4vw, 3.3rem); font-weight: 500; letter-spacing: -.075em; line-height: .85; }.project-meta > p { max-width: 300px; margin: 0; font-size: .96rem; line-height: 1.25; }.project-meta a { width: fit-content; }

.journey { display: grid; grid-template-columns: minmax(120px, .6fr) 2fr; gap: 24px; padding: clamp(90px, 13vw, 210px) clamp(20px, 8vw, 130px); background: var(--paper); }.timeline { display: grid; }.timeline > h2 { margin-bottom: clamp(70px, 11vw, 150px); }.timeline-item { display: grid; grid-template-columns: minmax(90px, .35fr) 1fr; gap: 22px; padding: 25px 0; border-top: 1px solid var(--line); }.timeline-item:last-child { border-bottom: 1px solid var(--line); }.timeline-item time { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; }.timeline-item h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 2.15vw, 2.35rem); font-weight: 500; letter-spacing: -.06em; line-height: .95; }.timeline-item p { max-width: 550px; margin: 0; font-size: .96rem; line-height: 1.3; }

.contact { padding-bottom: 24px; color: var(--paper); background: var(--red); }.contact > div > p { margin-bottom: 10px; font-size: clamp(2rem, 4.5vw, 5.4rem); letter-spacing: -.075em; line-height: 1; }.contact > div > a { display: inline-flex; align-items: baseline; gap: 18px; font-size: clamp(4rem, 10vw, 12rem); font-weight: 500; letter-spacing: -.11em; line-height: .8; text-decoration: none; }.contact > div > a span { font-family: var(--mono); font-size: .25em; transition: transform .25s; }.contact > div > a:hover span { transform: translate(8px, -8px); }.contact footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 25px; justify-content: flex-end; padding-top: clamp(90px, 13vw, 210px); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }.contact footer span { margin-right: auto; }.contact footer a { text-decoration: none; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 760px) { .hero { padding: 48px 20px 30px; }.round-link { width: 48px; height: 48px; }.intro, .journey, .contact { grid-template-columns: 1fr; gap: 46px; padding-right: 20px; padding-left: 20px; }.work { padding-right: 20px; padding-left: 20px; }.section-heading { grid-template-columns: 1fr; gap: 32px; padding: 78px 0 56px; }.project-large, .project-wide, .project-grid { grid-template-columns: 1fr; }.project-list { gap: 78px; }.project-large .project-visual, .project-wide .project-visual { min-height: 92vw; }.project-meta { gap: 13px; }.timeline-item { grid-template-columns: 1fr; gap: 14px; }.contact footer { justify-content: flex-start; padding-top: 100px; }.contact footer span { width: 100%; margin-right: 0; } }
@media (hover: none), (pointer: coarse) { .fluid-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } h1 span { animation: none; } [data-reveal] { opacity: 1; transform: none; } .fluid-cursor { display: none; } }