:root {
  color-scheme: dark;
  --bg: #11110f;
  --paper: #efeee8;
  --muted: #93938a;
  --line: rgba(239, 238, 232, .18);
  --acid: #d8ff3e;
  --mono: "DM Mono", monospace;
  --sans: "Space Grotesk", sans-serif;
  --page: clamp(22px, 5.6vw, 86px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 20; top: 10px; left: var(--page); padding: 12px 16px; background: var(--acid); color: #11110f; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.skip-link:focus-visible { outline-color: #11110f; }
.site-header { min-height: 68px; padding: 0 var(--page); display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--line); position: relative; z-index: 4; }
.wordmark { font-size: 22px; font-weight: 700; letter-spacing: -.09em; }
.wordmark span { font: 10px var(--mono); color: var(--acid); vertical-align: top; margin-left: 3px; letter-spacing: 0; }
nav { display: flex; grid-column: 2; justify-self: end; gap: clamp(26px, 4.3vw, 68px); align-items: center; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
nav a { padding: 10px 0; transition: color .2s; } nav a:hover, .site-footer a:hover { color: var(--acid); }
nav a span { color: var(--muted); font-size: 9px; margin-left: 3px; }
.contact-link { color: var(--acid); }
.eyebrow, .hero-kicker, .hero-bottom, .section-heading>p, .project-meta p, .manifesto-top, .manifesto-bottom, .services, .site-footer { font: 10px var(--mono); letter-spacing: .045em; }
.hero { height: min(790px, calc(100svh - 68px)); min-height: 610px; padding: 32px var(--page) 38px; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.hero-kicker { display: flex; justify-content: space-between; text-transform: uppercase; color: var(--muted); position: relative; z-index: 1; }
.hero h1 { margin: auto 0; position: relative; z-index: 1; font-size: clamp(82px, 14.7vw, 220px); letter-spacing: -.105em; line-height: .88; font-weight: 500; }
.hero h1 span { display: block; }.hero h1 .line-two { padding-left: clamp(30px, 8vw, 120px); margin-top: .08em; }.hero h1 em { font-style: normal; color: var(--acid); }
.js .hero h1 > span { animation: hero-title-reveal 1.1s cubic-bezier(.2,.75,.25,1) both; }
.js .hero h1 > .line-two { animation-delay: .18s; }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; position: relative; z-index: 1; color: var(--muted); line-height: 1.7; }
.hero-bottom p { margin: 0; max-width: 360px; color: var(--paper); font-size: 11px; }
.scroll-cue { display: flex; gap: 18px; align-items: center; text-transform: uppercase; }
.scroll-cue b { font-size: 19px; color: var(--acid); font-weight: 400; animation: nudge 1.7s ease-in-out infinite; }
.hero-year { color: var(--muted); }
.hero-orbit { border: 1px solid rgba(216,255,62,.24); border-radius: 50%; position: absolute; z-index:0; pointer-events: none; }
.orbit-one { width: min(51vw, 690px); aspect-ratio: 1; right: 10%; top: 12%; animation: rotate 26s linear infinite; }.orbit-one::before { content: ""; display: block; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--acid); top: 13%; left: 18%; box-shadow: 0 0 35px 9px rgba(216,255,62,.3); }
.orbit-two { width: min(37vw, 500px); aspect-ratio: 1; right: 18%; top: 21%; border-color: rgba(216,255,62,.1); animation: rotate 19s linear infinite reverse; }
.hero-spark { position: absolute; right: 6%; bottom: 18%; color: var(--acid); font-size: clamp(35px, 5vw, 72px); transform-origin: 50% 50%; animation: spark-spin 13s linear infinite; }
.work-section { padding: 110px var(--page) 123px; background: #e7e6de; color: #161613; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 42px; }.eyebrow { text-transform: uppercase; color: #72726a; display: block; }
.section-heading h2 { font-size: clamp(32px, 5vw, 69px); letter-spacing: -.075em; line-height: 1; font-weight: 500; margin: 22px 0 0; }.section-heading h2 span { font: 10px var(--mono); letter-spacing: 0; color: #77776e; vertical-align: middle; }
.js .section-heading h2, .js .about-content h2 { clip-path:inset(0 0 100% 0); transition:clip-path .85s cubic-bezier(.2,.75,.25,1) .12s; }
.js .section-heading.is-visible h2, .js .about-content.is-visible h2 { clip-path:inset(0); }
.section-heading>p { line-height: 1.7; color: #4b4b44; font-size:12px; margin: 0 0 5px; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 53px 20px; }
.project { display: block; min-width: 0; }.project-wide { grid-column: 1 / -1; }
.video-trigger { display: block; width: 100%; padding: 0; border: 0; color: inherit; text-align: left; font: inherit; background: transparent; cursor: pointer; }
.video-trigger:focus-visible { outline: 2px solid #485700; outline-offset: 6px; }
.reel-card { margin-bottom: 55px; border-top: 1px solid rgba(22,22,19,.22); border-bottom: 1px solid rgba(22,22,19,.22); }
.reel-trigger { min-height: 230px; display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: center; gap: 5vw; padding: 30px 3vw 30px 0; }
.reel-art { position:relative; min-height:210px; display:grid; place-items:center; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 56% 48%,#383162,#17182b 74%); }
.reel-art::before { content:""; position:absolute; inset:0; opacity:.13; background-image:linear-gradient(rgba(216,255,62,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(216,255,62,.2) 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(90deg,transparent,#000 25%,#000 85%,transparent); }
.edit-timeline { position:relative; width:88%; min-height:156px; padding:9px 10px 10px; display:flex; flex-direction:column; gap:8px; overflow:hidden; border:1px solid rgba(242,240,232,.34); border-radius:5px; background:linear-gradient(135deg,rgba(25,25,42,.96),rgba(15,19,31,.96)); box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08); transform:rotate(-2deg); }
.timeline-toolbar { height:15px; display:flex; align-items:center; gap:4px; color:#b9b8c5; font:6px var(--mono); letter-spacing:.08em; }
.timeline-toolbar>i { width:5px; height:5px; border-radius:50%; background:#77739b; }.timeline-toolbar>i:first-child { background:#f07e91; }.timeline-toolbar>i:nth-child(2) { background:#e9b865; }.timeline-toolbar>i:nth-child(3) { background:#79d6c3; }
.timeline-toolbar span { margin-left:auto; color:var(--acid); }
.timeline-ruler { height:10px; display:flex; justify-content:space-between; padding-left:23%; border-top:1px solid rgba(242,240,232,.18); color:#8f90a0; font:5px var(--mono); }
.timeline-workspace { flex:1; display:flex; min-height:100px; gap:6px; }
.timeline-tools { width:18%; display:flex; flex-direction:column; gap:5px; padding:3px 5px; border-right:1px solid rgba(242,240,232,.15); }
.timeline-tools i { height:7px; border-radius:2px; background:linear-gradient(90deg,rgba(107,129,190,.7),rgba(107,129,190,.18)); }.timeline-tools i:nth-child(2n) { width:72%; }.timeline-tools i:nth-child(3) { background:linear-gradient(90deg,rgba(216,255,62,.68),rgba(216,255,62,.15)); }
.timeline-tracks { position:relative; flex:1; overflow:hidden; background:repeating-linear-gradient(to bottom,transparent 0 15px,rgba(242,240,232,.1) 15px 16px); }
.timeline-clip { position:absolute; height:9px; border:1px solid rgba(255,255,255,.24); border-radius:2px; box-shadow:inset 0 1px rgba(255,255,255,.15); }
.clip-violet { top:5%; left:4%; width:47%; background:linear-gradient(90deg,#a56dca,#7656ad); }.clip-coral { top:20%; left:28%; width:67%; background:linear-gradient(90deg,#df718b,#a95183); }.clip-cyan { top:35%; left:8%; width:40%; background:repeating-linear-gradient(90deg,#58c8cf 0 7px,#45a6bd 7px 10px); }.clip-green { top:50%; left:43%; width:53%; background:repeating-linear-gradient(90deg,#87d16f 0 5px,#48a99c 5px 10px); }
.clip-audio,.clip-audio-short { top:68%; left:4%; width:61%; height:20%; clip-path:polygon(0 42%,4% 25%,7% 62%,11% 38%,15% 8%,19% 70%,23% 45%,28% 18%,32% 85%,37% 43%,41% 25%,45% 68%,50% 4%,55% 54%,60% 32%,66% 82%,71% 24%,77% 57%,82% 13%,87% 70%,92% 38%,96% 54%,100% 45%); background:linear-gradient(90deg,#53c9d7,#62d6b6); }.clip-audio-short { top:68%; left:70%; width:25%; opacity:.82; }
.timeline-playhead { position:absolute; z-index:2; top:0; bottom:0; left:12%; width:1px; background:#e8e2f5; box-shadow:0 0 7px rgba(216,255,62,.85); animation:timeline-scrub 7.5s ease-in-out infinite alternate; }
.reel-copy { display:flex; flex-direction:column; gap:19px; }.reel-copy .eyebrow { font-size:10px; color:#56564f; }.reel-copy strong { font-size:clamp(34px,5vw,68px); line-height:1; letter-spacing:-.075em; font-weight:500; }.reel-copy strong b { font:10px var(--mono); color:#74746b; letter-spacing:0; vertical-align:middle; }.play-cta { font:12px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:#171812; }.play-cta i { display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid rgba(22,22,19,.55); border-radius:50%; font-size:9px; font-style:normal; margin-right:10px; }.play-cta span { margin-left:20px; }
.reel-count { align-self:end; color:#77776e; font:9px var(--mono); }.reel-caption { display:flex; justify-content:space-between; color:#77776e; font:10px var(--mono); padding:11px 0 13px; text-transform:uppercase; }
.project-art { display: block; position: relative; width: 100%; height: clamp(280px, 37vw, 510px); overflow: hidden; background: #151513; isolation: isolate; }
.project-wide .project-art { height: clamp(320px, 49vw, 650px); }
.project-art .art-word { position:absolute; z-index:2; left:8%; top:22%; font-size:clamp(32px,5.6vw,72px); line-height:.8; letter-spacing:-.09em; font-weight:700; color:#f1f0e8; animation:art-title-float 4.8s ease-in-out infinite alternate; transform-origin:left center; }
.project-art .art-word em { color:var(--acid); font-style:normal; }
.project-art .art-index { top:17px; left:18px; }
.project-art .play-mark { opacity:.9; transform:none; font-size:11px; background:rgba(10,10,9,.18); }
.project-art .graphic-sphere { position:absolute; width:54%; aspect-ratio:1; right:4%; top:21%; border-radius:50%; background:radial-gradient(circle at 32% 27%,#f2b1d0 0 5%,#aa56a1 20%,#3b315e 56%,#13131e 74%); box-shadow:0 0 70px rgba(190,108,223,.25); animation:hero-sphere-bob 5.8s cubic-bezier(.37,0,.63,1) infinite alternate; }
.art-flow { background:linear-gradient(125deg,#4b2b87 0%,#763db0 48%,#235b91 100%); }.art-flow .art-word { color:#f7f5ed; }.art-flow .art-word em { color:#d8ff3e; }
.flow-device { position:absolute; z-index:1; width:31%; height:76%; right:15%; top:12%; border:0; border-radius:clamp(18px,3vw,34px); background:transparent; box-shadow:none; transform:rotate(5deg); animation:flow-device-float 6s ease-in-out infinite alternate; }
.flow-device-screen { position:relative; display:block; width:100%; height:100%; overflow:hidden; border:0; border-radius:inherit; background:radial-gradient(ellipse at 58% 44%,#294c9a,#10172b 70%); box-shadow:0 24px 56px rgba(9,8,28,.4),inset 0 0 24px rgba(87,150,255,.12); }
.flow-camera { position:absolute; z-index:2; top:8px; left:50%; width:23%; height:5px; border-radius:9px; background:#070a11; transform:translateX(-50%); box-shadow:0 0 0 2px rgba(255,255,255,.08); }
.flow-waves { position:absolute; width:132%; height:58%; left:-16%; top:21%; overflow:visible; }
.flow-waves path { fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:138 700; stroke-dashoffset:700; animation:flow-wave-travel 14s linear infinite; filter:drop-shadow(0 0 5px currentColor); }
.flow-waves path:nth-child(1) { stroke:#d8ff3e; color:#d8ff3e; }
.flow-waves path:nth-child(2) { stroke:#93e5ff; color:#93e5ff; animation-delay:-4.67s; }
.flow-waves path:nth-child(3) { stroke:#f7f5ed; color:#f7f5ed; animation-delay:-9.33s; }
.art-magic-audio { background:linear-gradient(135deg,#111b32 0%,#243e61 52%,#15243b 100%); }.art-magic-audio .art-word { color:#f2f0e8; }.art-magic-audio .art-word em { color:#d8ff3e; }
.audio-panel { position:absolute; z-index:1; width:63%; height:46%; right:4%; top:29%; padding:13px 15px 12px; border:1px solid rgba(230,245,255,.2); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(6,14,29,.25)); box-shadow:0 20px 48px rgba(3,10,23,.22),inset 0 1px rgba(255,255,255,.1); }
.audio-panel-label { display:block; color:rgba(239,244,248,.62); font:9px/1 "DM Mono",monospace; letter-spacing:.16em; }
.audio-waveform { position:absolute; width:calc(100% - 40px); height:72%; left:20px; top:17%; display:flex; align-items:center; justify-content:space-between; gap:3px; }
.audio-waveform i { display:block; flex:1; max-width:7px; height:var(--h); border-radius:99px; background:linear-gradient(180deg,#8ce6d3,#d8ff3e); box-shadow:0 0 9px rgba(216,255,62,.22); transform:scaleY(.55); transform-origin:center; animation:audio-recording 2.1s cubic-bezier(.45,0,.55,1) var(--d) infinite alternate; }
.art-hero { background:#252042; }.art-pet { background:linear-gradient(135deg,#f1cc70,#ef845c 52%,#92425a); }.art-pet .art-word { color:#fff3de; }.art-pet .art-word em { color:#562d55; }.pet-orbit { position:absolute; width:65%; aspect-ratio:1; border:1px solid rgba(255,244,216,.75); border-radius:50%; right:-4%; top:-12%; transform:rotate(-24deg) scaleY(.45); animation:pet-orbit-drift 7.2s ease-in-out infinite alternate; }.pet-orbit::after { content:""; position:absolute; width:13px; height:13px; border-radius:50%; background:#fff0b0; top:18%; left:13%; box-shadow:0 0 25px #fff0b0; }
.art-bond { background:radial-gradient(ellipse at 72% 32%,#654329,#23201d 38%,#111312 76%); }.art-bond .art-word { left:12%; top:auto; bottom:19%; font-size:clamp(38px,6vw,84px); }.art-bond .art-word em { color:#d69b47; }
.bond-object { position:absolute; width:clamp(170px,32%,310px); aspect-ratio:1; top:11%; right:10%; display:grid; place-items:center; animation:bond-object-float 6.4s ease-in-out infinite alternate; }
.bond-object::before { content:""; position:absolute; inset:4%; border-radius:50%; background:radial-gradient(circle,rgba(155,116,203,.25),rgba(218,164,83,.12) 45%,transparent 72%); }
.bond-triangle { position:relative; z-index:1; display:block; width:64%; aspect-ratio:1; clip-path:polygon(50% 3%,97% 91%,3% 91%); background:linear-gradient(145deg,#fff0c2 0%,#dfa64f 35%,#9b70c2 68%,#594887 100%); filter:drop-shadow(0 18px 28px rgba(5,8,10,.38)); transform:rotate(0deg); animation:bond-triangle-motion 50s linear infinite; }
.bond-triangle::before { content:""; position:absolute; inset:0; clip-path:polygon(50% 3%,50% 91%,3% 91%); background:linear-gradient(160deg,rgba(255,247,210,.65),rgba(208,155,75,.13) 68%); }
.art-rover { background:radial-gradient(ellipse at 76% 38%,#344b5a,#19232b 54%,#111416); }.art-rover .art-word { color:#f2f0e8; top:18%; }.art-rover .art-word em { color:#d8ff3e; }
.rover-geometry { position:absolute; z-index:1; width:49%; height:48%; right:7%; top:43%; }
.rover-shape { position:absolute; display:block; box-shadow:inset -18px -20px 26px rgba(11,18,32,.25),inset 8px 7px 18px rgba(255,255,255,.3),0 22px 42px rgba(3,8,13,.28); will-change:transform; }
.rover-shape-primary { width:48%; aspect-ratio:1; right:12%; top:17%; border-radius:22%; background:linear-gradient(145deg,#d8ff3e 0%,#78c5a1 48%,#6252a2 100%); transform:rotate(38deg); animation:rover-shape-drift 5.2s ease-in-out infinite alternate; }
.rover-shape-secondary { width:23%; aspect-ratio:1; left:13%; top:49%; border-radius:50%; background:radial-gradient(circle at 32% 27%,#fff4df 0%,#f2bd74 24%,#d96966 62%,#6c3b72 100%); animation:rover-orb-drift 4.6s ease-in-out infinite alternate; }
.art-hiring { display:grid; place-items:center; background:radial-gradient(ellipse at 78% 22%,rgba(247,154,96,.55),transparent 32%),linear-gradient(145deg,#5c3356,#d65e46); }
.hiring-message { position:absolute; z-index:2; left:50%; top:50%; width:90%; transform:translate(-50%,-50%); color:#f3eee2; text-align:center; font-size:clamp(62px,12.6vw,157px); font-weight:700; line-height:.82; letter-spacing:-.09em; }
.hiring-message > span,.hiring-message em { display:block; font-style:normal; }
.js .project.is-visible .hiring-message > span,.js .project.is-visible .hiring-message em { animation:hiring-line-reveal .8s cubic-bezier(.2,.75,.25,1) both; }
.js .project.is-visible .hiring-message em { animation-delay:.14s; }
.hiring-message em { color:#f2c46c; font-style:normal; }
.art-hover { background:radial-gradient(ellipse at 77% 48%,#d0d4ff,#e4e5df 68%); }.art-hover .art-word { color:#252621; }.art-hover .art-word em { color:#525cdd; }
.hover-ui { position:absolute; width:50%; height:52%; right:9%; top:23%; display:grid; place-items:center; perspective:700px; }
.hover-button { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:clamp(12px,2vw,25px); min-width:64%; padding:clamp(14px,2vw,25px) clamp(18px,3vw,34px); color:#f8f8f2; background:#22232c; border:1px solid rgba(255,255,255,.52); box-shadow:0 12px 0 rgba(44,49,114,.16),0 22px 44px rgba(43,50,138,.22); font:clamp(12px,1.5vw,18px) var(--mono); letter-spacing:.12em; transform:translateY(0) rotateX(0); animation:hover-button-rest 4.8s ease-in-out infinite; }
.hover-button b { font-weight:500; }.hover-button i { color:#d8ff3e; font-size:1.4em; font-style:normal; }
.hover-cursor { position:absolute; z-index:3; width:clamp(26px,4vw,46px); aspect-ratio:1; left:75%; top:72%; background:#525cdd; clip-path:polygon(0 0,100% 65%,60% 73%,78% 100%,62% 108%,45% 80%,24% 100%); filter:drop-shadow(0 3px 2px rgba(0,0,0,.26)); animation:hover-cursor-enter 4.8s cubic-bezier(.32,.04,.24,1) infinite; }
.hover-ripple { position:absolute; z-index:0; width:70%; aspect-ratio:1; border:1px solid rgba(82,92,221,.36); border-radius:50%; transform:scale(.55); opacity:0; animation:hover-ripple-pulse 4.8s ease-out infinite; }
.art-office { background:#acc9ca; }.art-office .art-word { color:#193533; }.art-office .art-word em { color:#e2f1d2; }.office-window { position:absolute; width:54%; height:62%; right:0; top:18%; border:1px solid rgba(255,255,255,.7); overflow:hidden; background:linear-gradient(140deg,rgba(246,244,211,.82),rgba(109,159,148,.36)); clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); transform-origin:center right; animation:office-window-motion 6.8s ease-in-out infinite; }.office-window::before { content:""; position:absolute; top:0; bottom:0; left:0; width:38%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform:translateX(-130%); animation:window-glint 4.8s ease-in-out infinite; }.office-window::after { content:""; position:absolute; inset:50% 0 auto; height:1px; background:rgba(255,255,255,.7); }
.art-feature { background:#2d433a; }.art-feature .art-word { font-size:clamp(30px,5vw,65px); }.art-feature .art-word em { color:#b6ef70; }.feature-shape { position:absolute; width:40%; aspect-ratio:1; right:8%; top:17%; border-radius:50% 50% 43% 57%; background:radial-gradient(circle at 38% 33%,#e8f4ba,#91be72 40%,#507063 73%); box-shadow:0 0 60px rgba(182,239,112,.22); transform:rotate(-25deg); animation:feature-shape-float 6s cubic-bezier(.37,0,.63,1) infinite alternate; }
.art-index { position: absolute; top: 20px; left: 22px; color: rgba(255,255,255,.57); font: 10px var(--mono); z-index: 2; }
.play-mark { position: absolute; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; color: #fff; right: 20px; bottom: 20px; display: grid; place-items: center; font-size: 17px; opacity: 0; transform: translateY(7px); transition: .3s; z-index: 3; }
.project:hover .play-mark, .video-trigger:focus-visible .play-mark { opacity: 1; transform: translateY(0); }.project-meta { display: flex; justify-content: space-between; align-items: start; padding-top: 15px; }.project-meta strong { display:block; margin:0; color:#161613; font-size:clamp(22px,1.8vw,26px); letter-spacing:-.04em; font-weight:500; }.project-meta small { display:block; margin:6px 0 0; color:#5d5d55; font:12px var(--mono); }
.art-after { background: #2d2542; }.after-grid { position: absolute; inset: -50%; opacity: .26; transform: perspective(500px) rotateX(63deg) rotateZ(-24deg); background-image: linear-gradient(rgba(205,175,255,.7) 1px, transparent 1px),linear-gradient(90deg,rgba(205,175,255,.7) 1px,transparent 1px); background-size: 55px 55px; animation: grid-drift 18s linear infinite; }
.after-disc { position: absolute; height: 64%; aspect-ratio: 1; left: 54%; top: 51%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%,#f1a6ca 0 5%,#a54b9d 18%,#44295f 54%,#15131f 72%); box-shadow: 0 0 90px rgba(245,90,180,.3); animation: float 7s ease-in-out infinite; }
.after-type { position: absolute; left: 11%; top: 24%; z-index: 1; color: #f8eac6; font-size: clamp(56px, 11vw, 160px); font-weight: 700; letter-spacing: -.11em; line-height: .76; transform: rotate(-8deg); text-shadow: 3px 7px 0 rgba(10,8,20,.45); }.after-type span { color: #d8ff3e; }
.art-signal { background: linear-gradient(145deg,#f4ab92,#db543e 58%,#792d3c); }.signal-sun { position: absolute; width: 58%; aspect-ratio: 1; left: 48%; top: 48%; transform: translate(-50%,-50%); border-radius: 50%; background: linear-gradient(130deg,#ffedb5,#fba775 60%,#cf3f46); box-shadow: 0 25px 80px rgba(90,20,40,.35); animation: breathe 6s ease-in-out infinite; }.signal-ring { position: absolute; aspect-ratio: 1; border: 1px solid rgba(255,236,194,.7); border-radius: 50%; width: 76%; left: 48%; top: 49%; transform: translate(-50%,-50%) rotate(-31deg) scaleY(.3); }.ring-b { width: 89%; transform: translate(-50%,-50%) rotate(30deg) scaleY(.25); border-color: rgba(255,236,194,.4); }.signal-label { position: absolute; z-index: 1; top: 14%; left: 9%; font-size: clamp(30px, 5vw, 66px); line-height: .78; letter-spacing: -.09em; font-weight: 600; color: #fff3dc; mix-blend-mode: overlay; }
.art-form { background: #d7dbcd; }.form-shape { position: absolute; width: 37%; aspect-ratio: 1; top: 50%; left: 50%; }.shape-one { background: #e76143; border-radius: 50%; transform: translate(-70%,-61%); animation: shape-one 8s ease-in-out infinite; }.shape-two { background: #384ed6; transform: translate(-24%,-37%) rotate(25deg); mix-blend-mode: multiply; animation: shape-two 9s ease-in-out infinite; }.shape-three { background: #e5ff3e; width: 32%; border-radius: 48% 52% 29% 71% / 56% 30% 70% 44%; transform: translate(-53%,-45%); mix-blend-mode: multiply; animation: shape-three 7s ease-in-out infinite; }.form-caption { position: absolute; bottom: 13%; left: 9%; font: 11px var(--mono); line-height: 1.4; color: #282823; }
.manifesto .manifesto-copy span { color:#354b07; opacity:1; }
.manifesto { padding: 38px var(--page) 34px; background: var(--acid); color: #171812; min-height: 430px; display: flex; flex-direction: column; justify-content: space-between; position:relative; isolation:isolate; overflow:hidden; }
.manifesto::before { content:""; position:absolute; z-index:0; inset:-15% -5%; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='180' viewBox='0 0 1200 180'%3E%3Cpath d='M-20 60 C120 0 220 120 360 60 S600 0 740 60 980 120 1120 60 1320 0 1420 60M-20 115 C120 55 220 175 360 115 S600 55 740 115 980 175 1120 115 1320 55 1420 115' fill='none' stroke='%23171812' stroke-width='1.4'/%3E%3C/svg%3E"); background-size:100% 180px; animation:wave-drift 24s ease-in-out infinite alternate; }
.manifesto>* { position:relative; z-index:1; }
.manifesto .eyebrow, .manifesto-top { color: rgba(23,24,18,.62); }.manifesto-top, .manifesto-bottom { display: flex; justify-content: space-between; text-transform: uppercase; }.manifesto-copy { max-width: 1030px; font-size: clamp(42px, 7.7vw, 108px); letter-spacing: -.09em; line-height: .94; margin: 60px 0; }.manifesto-copy span { color: rgba(23,24,18,.48); }
.work-section .eyebrow, .reel-caption { color: #5d5d55; }
.about-section .eyebrow, .contact-section .eyebrow { color: #a09f96; }
.about-section { padding: 110px var(--page) 87px; }.about-heading { display: flex; align-items: center; justify-content: space-between; }.about-star { color: var(--acid); font-size: 35px; animation: rotate 18s linear infinite; }.about-content { display: grid; grid-template-columns: 1fr .72fr; gap: 9vw; margin: 66px 0 80px; }.about-content h2 { font-size: clamp(50px, 8vw, 115px); line-height: .9; letter-spacing: -.095em; font-weight: 500; margin: 0; }.about-content h2 span { color: var(--acid); }.about-copy { max-width: 420px; font-size: 15px; line-height: 1.65; color: #c1c0b8; }.about-copy p { margin: 0 0 17px; }.text-link { display: block; color: var(--muted); font: 10px var(--mono); margin-top: 28px; }.text-link span { display: block; color: var(--acid); margin-top: 5px; text-transform: uppercase; }.services { display: flex; flex-wrap: wrap; gap: 9px; border-top: 1px solid var(--line); padding-top: 20px; }.services span { padding: 10px 14px; border: 1px solid var(--line); border-radius: 30px; color: #c4c3bc; }
.contact-section { min-height: 520px; position: relative; overflow: hidden; padding: 73px var(--page) 75px; background: #1c1c19; }.contact-section h2 { position: relative; z-index: 1; padding-right:.14em; font-size: clamp(62px, 11vw, 150px); font-weight: 500; line-height: .77; letter-spacing: -.1em; margin: 55px 0 43px; }.contact-section h2 em { color: var(--acid); font-style: normal; }.contact-section h2 .move-word { display: inline-block; padding-right:.12em; }.js .contact-section h2 .move-word { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-.08em); transition: clip-path .85s cubic-bezier(.2,.75,.25,1), opacity .45s ease, transform .85s cubic-bezier(.2,.75,.25,1); transition-delay: .18s; }.js .contact-section h2.is-visible .move-word { clip-path: inset(0); opacity: 1; transform: translateX(0); }.contact-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:18px; }.contact-cta { position: relative; z-index: 1; min-height:32px; display:inline-flex; align-items:center; border-bottom: 1px solid rgba(216,255,62,.5); padding: 7px 0 8px; color: var(--acid); font: 11px var(--mono); }.contact-cta span { margin-left: 12px; }.contact-orb { position: absolute; width: 37vw; min-width: 340px; aspect-ratio: 1; border-radius: 50%; right: -7%; top: 10%; background: radial-gradient(circle at 36% 34%,rgba(216,255,62,.25),rgba(216,255,62,.07) 48%,transparent 72%); border: 1px solid rgba(216,255,62,.24); box-shadow: inset 18px 12px 80px rgba(216,255,62,.08); animation:orb-drift 7.5s ease-in-out infinite alternate; }
.video-dialog { width:min(1000px,calc(100vw - 32px)); padding:0; border:1px solid rgba(239,238,232,.22); background:#11110f; color:var(--paper); box-shadow:0 25px 100px rgba(0,0,0,.65); }.video-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(8px); }.dialog-bar { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 16px; font:10px var(--mono); text-transform:uppercase; color:#aaa99f; }.dialog-close { width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--paper); font:24px/1 var(--sans); cursor:pointer; }.dialog-close:focus-visible { outline:2px solid var(--acid); outline-offset:3px; }.dialog-video { display:block; width:100%; aspect-ratio:16/9; border:0; background:#050505; }.social-links { display:flex; gap:18px; }
.site-footer { min-height: 68px; padding: 15px var(--page); border-top: 1px solid var(--line); color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size:10px; }.site-footer>div { display: flex; gap: 21px; }.site-footer a { padding: 6px 0; }.site-footer .wordmark { color: var(--paper); }
.reveal { opacity: 1; transform: none; }.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.cursor-aura { position: fixed; z-index: 9; pointer-events: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(216,255,62,.55); transform: translate(-50%,-50%); opacity: 0; transition: opacity .25s, width .2s, height .2s; mix-blend-mode: difference; }
.cursor-aura.is-over-link { width: 42px; height: 42px; }
@keyframes rotate { to { transform: rotate(360deg); } } @keyframes nudge { 50% { transform: translateY(5px); } } @keyframes pulse { 50% { transform: scale(.82) rotate(25deg); opacity: .55; } } @keyframes float { 50% { transform: translate(-50%,-54%) scale(1.04); } } @keyframes breathe { 50% { transform: translate(-50%,-50%) scale(1.045); } } @keyframes grid-drift { to { background-position: 55px 55px; } }
@keyframes hero-title-reveal { from { opacity:0; filter:blur(9px); transform:translateY(16px) scale(.99); } to { opacity:1; filter:blur(0); transform:translateY(0) scale(1); } }
@keyframes art-title-float { from { transform:translateY(0); } to { transform:translateY(-6px); } }
@keyframes hero-sphere-bob { from { transform:translateY(0) scale(1); } to { transform:translateY(-12px) scale(1.018); } }
@keyframes flow-device-float { from { transform:rotate(4deg) translateY(4px); } to { transform:rotate(6deg) translateY(-8px); } }
@keyframes flow-wave-travel { from { stroke-dashoffset:700; } to { stroke-dashoffset:-140; } }
@keyframes audio-recording { from { transform:scaleY(.52); opacity:.82; } to { transform:scaleY(1); opacity:1; } }
@keyframes pet-orbit-drift { from { transform:rotate(-27deg) scaleY(.45) translateY(0); } to { transform:rotate(-17deg) scaleY(.45) translateY(-7px); } }
@keyframes bond-object-float { from { transform:translateY(0) rotate(-4deg); } to { transform:translateY(-12px) rotate(5deg); } }
@keyframes bond-triangle-motion { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes timeline-scrub { to { left:94%; } }
@keyframes spark-spin { to { transform:rotate(360deg); } }
@keyframes feature-shape-float { from { transform:rotate(-25deg) translateY(0) scale(1); } to { transform:rotate(-21deg) translateY(-11px) scale(1.02); } }
@keyframes reel-card-float { from { margin-top:-2px; } to { margin-top:5px; } } @keyframes reel-main-float { from { margin-top:-3px; } to { margin-top:3px; } } @keyframes reel-timeline-pulse { from { opacity:.45; transform:scaleX(.72); } to { opacity:1; transform:scaleX(1); } }
@keyframes rover-shape-drift { from { transform:rotate(38deg) translate3d(0,0,0) scale(1); } to { transform:rotate(48deg) translate3d(-8px,-13px,0) scale(1.035); } }
@keyframes rover-orb-drift { from { transform:translate3d(0,0,0) scale(.96); } to { transform:translate3d(12px,-12px,0) scale(1.04); } }
@keyframes rover-beacon { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.48; transform:scale(.76); } } @keyframes rover-tread { to { stroke-dashoffset:-16; } }
@keyframes thumb-float { 50% { transform:translate3d(0,-4px,0); } }
@keyframes hover-button-rest { 0%,30%,100% { transform:translateY(0) rotateX(0); background:#22232c; box-shadow:0 12px 0 rgba(44,49,114,.16),0 22px 44px rgba(43,50,138,.22); } 48%,74% { transform:translateY(-9px) rotateX(4deg); background:#343653; box-shadow:0 20px 0 rgba(44,49,114,.12),0 30px 54px rgba(43,50,138,.3),0 0 30px rgba(82,92,221,.28); } }
@keyframes hover-cursor-enter { 0%,20% { transform:translate3d(20px,18px,0); } 46%,70% { transform:translate3d(-34px,-36px,0); } 92%,100% { transform:translate3d(20px,18px,0); } }
@keyframes hover-ripple-pulse { 0%,40% { opacity:0; transform:scale(.55); } 50% { opacity:.85; transform:scale(.78); } 66%,100% { opacity:0; transform:scale(1.12); } }
@keyframes office-window-motion { 0%,100% { transform:translate3d(0,0,0) rotateY(0) scale(1); } 50% { transform:translate3d(-14px,-9px,0) rotateY(-3deg) scale(1.02); } }
@keyframes window-glint { 0%,20% { transform:translateX(-130%); } 58%,100% { transform:translateX(300%); } }
@keyframes hiring-line-reveal { from { opacity:0; transform:translateY(16px); } 70% { opacity:1; transform:translateY(-2px); } to { opacity:1; transform:translateY(0); } }
@keyframes wave-drift { from { transform:translate3d(-.5%,0,0); background-position:0 0; } to { transform:translate3d(.5%,1.5%,0); background-position:0 18px; } }
@keyframes slow-orbit { to { transform:rotate(336deg) scaleY(.45); } }
@keyframes thumb-lines { 50% { transform:translateY(-5px) skewY(-18deg); background-position:0 12px; } }
@keyframes line-drift-a { 50% { transform:rotate(-32deg) translateY(4px); } }
@keyframes line-drift-b { 50% { transform:rotate(32deg) translateY(-4px); } }
@keyframes orb-drift { from { transform:translate3d(0,0,0) scale(.93); } to { transform:translate3d(-24px,-20px,0) scale(1.12); } }
@keyframes shape-one { 50% { transform: translate(-62%,-50%) rotate(24deg); border-radius: 43%; } } @keyframes shape-two { 50% { transform: translate(-35%,-44%) rotate(-12deg); border-radius: 50%; } } @keyframes shape-three { 50% { transform: translate(-42%,-51%) rotate(70deg); border-radius: 50%; } }
@media (hover:hover) and (pointer:fine) { body:hover .cursor-aura { opacity: 1; } }
@media (max-width: 760px) {
  .site-header { min-height: 60px; grid-template-columns: auto 1fr; } nav { grid-column: 2; justify-self: end; gap: 19px; font-size: 9px; }.hero { height: min(730px, calc(100svh - 60px)); min-height: 570px; padding-top: 25px; }.hero-kicker span:last-child { display: none; }.hero h1 { font-size: clamp(58px, 13vw, 98px); }.hero h1 .line-two { padding-left: clamp(30px, 10vw, 64px); }.orbit-one { width: 75vw; right: -5%; top: 16%; }.orbit-two { width: 54vw; right: 5%; top: 23%; }.hero-spark { right: 4%; bottom: 20%; }.hero-year { display: none; }
  .work-section { padding-top: 76px; padding-bottom: 82px; }.section-heading { align-items: start; flex-direction: column; gap: 17px; }.section-heading h2 { margin-top: 17px; }.work-grid { grid-template-columns: 1fr; gap: 35px; }.project-wide { grid-column: auto; }.project-art, .project-wide .project-art { height: min(85vw, 470px); }.reel-trigger { grid-template-columns: .8fr 1.2fr; gap:20px; padding-right:0; }.reel-art { min-height:160px; }.reel-count { display:none; }.reel-copy strong { font-size:clamp(32px,8vw,54px); }.project-note { text-align:left; }.project-art .art-word { font-size:clamp(42px,10vw,68px); }.rover-geometry { width:48%; height:45%; top:47%; right:4%; }.hover-ui { width:49%; right:5%; top:27%; height:49%; }
  .manifesto { min-height: 340px; padding-top: 28px; padding-bottom: 28px; }.manifesto-top span:last-child { display: none; }.manifesto-copy { margin: 55px 0; }.manifesto-bottom { gap: 18px; flex-wrap: wrap; }.about-section { padding-top: 77px; padding-bottom: 68px; }.about-content { grid-template-columns: 1fr; gap: 32px; margin: 48px 0 55px; }.about-copy { max-width: 540px; }.contact-section { min-height: 430px; padding-top: 57px; }.contact-section h2 { font-size: clamp(38px, 9.8vw, 70px); margin: 70px 0 41px; }.contact-orb { right: -34%; top: 22%; }.site-footer { flex-wrap: wrap; min-height: 78px; padding:12px var(--page); }.site-footer>span:nth-of-type(1) { display: none; }
}
@media (max-width: 420px) { nav { gap: 13px; }.hero h1 { font-size: clamp(48px, 13.5vw, 60px); }.hero-bottom p { font-size: 9px; }.scroll-cue { gap: 9px; font-size: 8px; }.project-meta strong { font-size: 19px; }.site-footer>div { gap: 13px; font-size: 10px; }.reel-trigger { grid-template-columns:1fr; }.reel-art { min-height:170px; }.reel-copy { padding-bottom:4px; }.reel-caption { font-size:10px; }.contact-actions { gap:22px; flex-direction:column; align-items:flex-start; }.social-links { width:100%; order:3; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.js .reveal { opacity: 1 !important; transform: none !important; }.js .hero h1 > span { animation:none !important; opacity:1 !important; filter:none !important; transform:none !important; }.project-art::before, .project-art::after, .project-art .art-word, .hiring-message, .hiring-message > *, .timeline-playhead, .bond-object, .bond-triangle, .flow-device, .flow-waves path, .audio-waveform i, .rover-shape, .feature-shape, .hover-button, .hover-cursor, .hover-ripple, .office-window { animation:none !important; }.js .section-heading h2, .js .about-content h2 { clip-path:none !important; }.js .contact-section h2 .move-word { clip-path: none !important; opacity: 1 !important; transform: none !important; } }