:root{color-scheme:light;background:#efedea;color:#101010;font-family:Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}html{scroll-behavior:smooth;overflow-y:scroll}body{overflow-x:hidden}a{color:inherit}button{font:inherit;color:inherit;border:0;padding:0;background:none;cursor:pointer}main{outline:none}.canvas-shell{position:relative;width:100%;overflow:hidden}.stage{position:absolute;left:0;top:0;transform-origin:0 0}.node{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}.node a,a.node,.explore{pointer-events:auto}.paint,.geometry,.lettering{position:absolute;inset:0;width:100%;height:100%;display:block}.geometry,.lettering{overflow:visible}.paint{object-position:center}.media{max-width:none}.border{pointer-events:none}.mask-children{position:absolute;inset:0}.definition{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.selectable-text{position:absolute;inset:0;opacity:0;white-space:pre-wrap;line-height:1.12;user-select:text;pointer-events:auto}.node[href] .selectable-text{cursor:pointer}.node[href]{text-decoration:none;transition:filter .2s ease}.node[href]:hover{filter:opacity(.66)}.node[href]:focus-visible,.panorama:focus-visible,.explore:focus-visible{outline:3px solid currentColor;outline-offset:8px}.scroll-track{position:relative}.panorama{scrollbar-width:none;overscroll-behavior-x:contain}.panorama::-webkit-scrollbar{display:none}.hero-strip{will-change:transform}.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip:focus{position:fixed;z-index:100;top:12px;left:12px;width:auto;height:auto;clip:auto;padding:12px;background:#101010;color:#efedea}.load-error{padding:8vw;max-width:760px}.load-error h1{font-size:64px;font-weight:400;letter-spacing:-3px}.load-error a{display:inline-block;margin-top:20px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.hero-strip{backface-visibility:hidden}.video-frame{visibility:hidden}.video-frame.is-playing{visibility:visible}.node .video-frame{mix-blend-mode:normal}

/* Keep page geometry in CSS pixels; a page-sized transformed layer clips on iOS. */
html,body{overflow-x:clip}.canvas-shell{overflow:clip}.stage{position:relative;transform:none}
.panorama{contain:layout paint;isolation:isolate;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none}
.panorama:active{cursor:grabbing}.panorama-track{position:absolute;inset:0;width:100%;height:100%}
.panorama-item{position:absolute;left:0;top:0;will-change:transform;backface-visibility:hidden;contain:layout paint}
.panorama-cycle{position:relative;flex:none;height:100%}.panorama-cycle img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.media-surface{isolation:isolate}.flat-preview{object-fit:fill}
.floating-treatment{will-change:transform;backface-visibility:hidden}
.about-pin{position:fixed;pointer-events:none}
/* The footer can cover the fixed portrait without moving it with the page. */
[data-node="39:1363"]{z-index:1}
.deferred-section{content-visibility:auto;contain:layout paint}.gallery-retry{position:absolute;left:40%;top:40%;pointer-events:auto;color:#efedea}

/* Project cases use a fixed viewport and recycle original sections offscreen. */
html.work-loop,html.work-loop body{height:100%;overflow:hidden;overscroll-behavior:none}
.work-loop .canvas-shell{position:fixed;inset:0;height:100dvh!important;overflow:clip;touch-action:pinch-zoom}
.work-loop .stage{height:100%!important;overflow:clip;background:#efedea;isolation:isolate}
.work-loop-item{position:absolute;top:0;left:0;width:100%;will-change:transform;backface-visibility:hidden;pointer-events:none}
.work-loop-item a,.work-loop-item button{pointer-events:auto}
.work-loop-item img{-webkit-user-drag:none;user-select:none}
.work-intro,.work-gallery{position:absolute;inset:0;pointer-events:none}
.work-intro{will-change:transform}
.work-fixed-header{position:absolute;inset:0 0 auto;z-index:10;pointer-events:none}
.work-project-nav{position:absolute;left:50px;right:50px;bottom:50px;z-index:11;display:flex;justify-content:space-between;pointer-events:none}
.work-project-link{position:relative;display:block;pointer-events:auto;text-decoration:none;font:12px/18px monospace;white-space:nowrap}
.work-fixed-header,.work-project-nav{background:transparent}
.work-project-link:focus-visible{outline:2px solid currentColor;outline-offset:6px}

.pixel-cursor{display:contents;pointer-events:none}
.pixel-cursor[hidden]{display:none}
.pixel-cursor-trail{position:fixed;left:0;top:0;width:13px;height:13px;background:white;pointer-events:none;mix-blend-mode:difference;z-index:2147483647}
.pixel-cursor-trail[hidden]{display:none}
.pixel-preview{pointer-events:none!important;image-rendering:pixelated;visibility:hidden}
.pixel-preview.pixel-preview-ready{visibility:visible}
.node[href]:has(.media-surface,.flat-preview):hover{filter:none}
@media(any-hover:hover) and (any-pointer:fine){
 .media-surface,.node:not(.text-node)>.flat-preview{pointer-events:auto}
}

/* A single clipped sheet covers the page, including the fixed About portrait. */
.footer-reveal{z-index:2;overflow:clip;isolation:isolate}
.social-scramble{pointer-events:auto}
.social-scramble:focus-visible{outline:2px solid currentColor;outline-offset:5px}

.panorama img,.panorama a{-webkit-user-drag:none;user-select:none}
.panorama .selectable-text{user-select:none}
.panorama.is-dragging,.panorama.is-dragging *{cursor:grabbing!important}

/* ---------- Figma pass: fonts, header, colour, motion ---------- */
@font-face{font-family:"Cousine";src:url(/fonts/cousine-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--blue:#0044fd;--paper:#efedea;--ink:#101010;--edge:28px}

/* Live copy (new texts from Figma) */
.live-text{position:absolute;left:0;top:0;margin:0;text-transform:uppercase;font-family:"Cousine","Courier New",monospace;letter-spacing:.02em;font-kerning:none;white-space:normal;overflow-wrap:break-word;pointer-events:auto;user-select:text}
.live-text p{margin:0}.live-text p+p{margin-top:1lh}
.live-text .m{opacity:.5}
.live-bold{font-family:"Neue Haas Grotesk Display Pro","NeueHaasDisplay","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.live-bold p+p{margin-top:0}

/* Fixed header: inverted difference layer + solid layer for the blue button */
.fixed-header{position:fixed;inset:0 0 auto;z-index:30;pointer-events:none}
.fixed-header{--hdr-ink:#101010}
.fixed-header.on-dark{--hdr-ink:#efedea}
.fixed-header .node{mix-blend-mode:normal!important}
.fixed-header .lettering use{fill:var(--hdr-ink);transition:fill .2s}
.fixed-header .geometry path,.fixed-header .geometry use{stroke:var(--hdr-ink);transition:stroke .2s}
.fixed-header .node:not(.cta)>.paint:not(.media){background:var(--hdr-ink)!important}
.fixed-header .cta .lettering use{fill:var(--paper)}
.work-fixed-header.fixed-header{position:absolute;z-index:10}
.cta>.paint:not(.border){background:var(--blue)!important}
.cta .lettering use{fill:var(--paper)}
.cta.node[href]:hover{filter:none}
.cta:hover>.paint:not(.border){background:#0036cc!important}
.work-project-nav{left:var(--edge);right:var(--edge);bottom:var(--edge)}
@media(max-width:767px){:root{--edge:24px}.work-project-link{font-size:10px;line-height:14px}
 /* Phone: previous/next read white over dark images and black over light ones.
    Only these two small labels blend, so it stays cheap. */
 .work-project-nav{mix-blend-mode:difference;color:#fff}
 .work-project-nav .lettering use{fill:#fff}}

/* Pixel cursor and pixel UI in the brand blue */
.pixel-cursor-trail{background:var(--blue);mix-blend-mode:normal}

/* Headings blink on, letter by letter; copy fades in line by line */
@keyframes na-blink{0%{opacity:0}9%{opacity:1}16%{opacity:.08}27%{opacity:.85}36%{opacity:0}48%{opacity:1}57%{opacity:.3}68%,100%{opacity:1}}
.will-reveal.reveal-heading:not(.is-in){opacity:0!important}
.will-reveal.reveal-heading.is-in .ch{animation:na-blink .62s steps(1,end) var(--d,0ms) both}
.will-reveal .rv-line{opacity:0;transform:translateY(.32em);transition:opacity .9s cubic-bezier(.33,0,.2,1),transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0ms)}
.live-text .lt{display:block}
.will-reveal .rv-line.is-in{opacity:1;transform:none}
.will-reveal g.rv-line{transform-box:fill-box}

/* Light → dark pixel dissolve */
canvas.pixel-edge{position:absolute;left:0;top:0;z-index:1;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}

/* Preloader */
#preloader{position:fixed;inset:0;z-index:1000;background:var(--paper);color:var(--ink);display:grid;place-items:center;font:12px/1.2 "Cousine","Courier New",monospace;letter-spacing:.02em;text-transform:uppercase}
#preloader canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#preloader .pl-bar{display:flex;gap:4px}
#preloader .pl-bar i{width:12px;height:12px;background:currentColor;opacity:.08;transition:opacity .15s,background-color .15s}
#preloader .pl-bar i.on{opacity:1;background:var(--blue)}
#preloader .pl-count{margin-top:14px;text-align:center}
#preloader.is-leaving{background:transparent}
#preloader.is-leaving .pl-box{opacity:0;transition:opacity .2s}
#preloader[hidden]{display:none}
@media(prefers-reduced-motion:reduce){#preloader{transition:opacity .2s}.will-reveal .ch,.will-reveal .rv-line,.will-reveal .rv-word{transform:none!important;opacity:1!important;animation:none!important}}

.footer-reveal[data-pixel-edge]{overflow:visible!important;clip-path:inset(-100vh 0 0 0)}

canvas.pixel-cover{position:fixed;inset:0;width:100vw;height:100vh;z-index:25;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}

/* Treatments on touch screens: the floating previews sway together along a diagonal
   (on desktop they follow the cursor instead). Uses the separate 'translate' property,
   so it composes with the element's own transform and runs on the compositor. */
@keyframes na-drift{from{translate:-5px 4px}to{translate:5px -4px}}
@media (hover:none),(pointer:coarse){
 /* all previews move together, a few pixels along one diagonal and back */
 .floating-treatment{animation:na-drift 3.2s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){.floating-treatment{animation:none!important}}

canvas.pixel-veil{position:absolute;left:0;top:0;z-index:2;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}