:root{--paper:#0b0b0b;--ink:#f6f5f0;--soft:#242424;--blue:#6c8cff;--pink:#f1a7c8;--yellow:#f2c548;--green:#9bc95d;--line:rgba(246,245,240,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Grotesk',Arial,sans-serif;overflow-x:hidden}a{color:inherit}.mono{font-family:'DM Mono',monospace;letter-spacing:.06em}.eyebrow{font-size:.7rem;margin:0}.cursor-dot{position:fixed;z-index:50;width:20px;height:20px;border-radius:50%;border:1px solid var(--ink);pointer-events:none;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:multiply}.cursor-dot.active{width:54px;height:54px;background:rgba(242,197,72,.62);border-color:transparent}
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;height:72px;padding:0 3.2vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(246,245,240,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(37,37,37,.08)}.mark{font-family:'Archivo Black',sans-serif;font-size:1.35rem;text-decoration:none}.mark span{font:400 .48em 'DM Mono',monospace;vertical-align:top}.topbar nav{display:flex;gap:2.5rem}.topbar nav a,.lang{font:500 .72rem 'DM Mono',monospace;letter-spacing:.07em;text-decoration:none;text-transform:uppercase}.topbar nav a{position:relative}.topbar nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--ink);transition:.25s}.topbar nav a:hover:after{right:0}.lang{justify-self:end;width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;background:transparent;cursor:pointer}.lang:hover{background:var(--ink);color:var(--paper)}
.hero{min-height:1150px;padding:92px 3vw 90px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}.hero-meta{font-size:.68rem;line-height:1.8;margin:0 auto 70px}.hero-meta span,.hero-meta a{display:block}.hero-meta a{text-decoration:none;color:#aaa}.hero h1{font:400 clamp(4.5rem,11.5vw,10.8rem)/.82 'Archivo Black',sans-serif;letter-spacing:-.065em;margin:0;position:relative;z-index:3;white-space:nowrap}.hero-cards{width:min(760px,70vw);height:360px;position:relative;margin:-12px 0 -22px;z-index:4;perspective:1200px}.hero-card{position:absolute;width:min(270px,27vw);aspect-ratio:1/1;margin:0;border-radius:18px;overflow:hidden;background:white;box-shadow:0 28px 45px rgba(25,25,25,.16);transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}.hero-card img{width:100%;height:100%;object-fit:cover;display:block}.card-one{left:8%;top:48px;transform:rotate(-8deg)}.card-two{left:28%;top:20px;transform:rotate(5deg)}.card-three{right:24%;top:60px;transform:rotate(-2deg)}.card-four{right:5%;top:28px;transform:rotate(7deg)}.hero-cards:hover .hero-card:not(:hover){filter:saturate(.7);transform:scale(.96)}.hero-card:hover{z-index:5!important;transform:rotate(0) translateY(-14px) scale(1.04)!important}.hero-role{font:400 clamp(3.1rem,7.6vw,7.4rem)/.92 'Archivo Black',sans-serif;letter-spacing:-.055em;color:#d3d2cd;margin:0;white-space:pre-line;position:relative;z-index:2}.hero-client{font-size:.68rem;margin-top:70px}.hero-client span{font-weight:500}.hero-client p{color:#adaca7;margin:.7rem 0 0}.scroll-cue{position:absolute;bottom:38px;text-decoration:none;font-size:.65rem}.scroll-cue span{display:inline-block;animation:bob 1.6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(6px)}}
.featured{padding:135px 0 150px;background:#fff;overflow:hidden}.section-intro{text-align:center;padding:0 4vw}.section-intro h2,.about h2,.contact h2{font:400 clamp(4rem,9vw,9rem)/.86 'Archivo Black',sans-serif;letter-spacing:-.06em;margin:24px 0 14px}.section-intro>p:last-child{margin:0;color:#777}.featured-stage{height:650px;margin-top:70px;display:flex;justify-content:center;align-items:center;gap:34px;perspective:1400px}.feature-card{flex:0 0 min(430px,36vw);transition:transform .45s cubic-bezier(.2,.8,.2,1);transform:rotate(var(--angle))}.feature-card .media{aspect-ratio:1/1;border-radius:20px;overflow:hidden;box-shadow:0 30px 50px rgba(0,0,0,.15);background:var(--soft)}.feature-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.feature-card:hover{z-index:4;transform:rotate(0) translateY(-20px) scale(1.05)!important}.feature-card:hover img{transform:scale(1.035)}.feature-left{--angle:-6deg;margin-left:-16vw}.feature-main{--angle:0deg;z-index:2}.feature-right{--angle:6deg;margin-right:-16vw}.card-label{text-align:center;margin-top:24px;display:grid;gap:7px}.card-label strong{font-family:'Archivo Black',sans-serif}.card-label span{font-size:.78rem;color:#777}
.work-grid{padding:140px 7vw 170px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:110px 9vw;background:var(--paper)}.project{position:relative}.project:nth-child(even){margin-top:150px}.project-number{position:absolute;top:-30px;left:0;font-size:.68rem}.project img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px;box-shadow:0 22px 42px rgba(0,0,0,.12);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}.project:hover img{transform:translateY(-12px) rotate(1deg);box-shadow:0 34px 60px rgba(0,0,0,.18)}.project-copy{margin-top:24px}.project-copy h3{font:400 clamp(1.4rem,2.3vw,2.5rem)/1 'Archivo Black',sans-serif;margin:0}.project-copy p{max-width:540px;line-height:1.55;color:#686762}.tile-blue img{background:var(--blue)}.tile-pink img{background:var(--pink)}.tile-yellow img{background:var(--yellow)}.tile-green img{background:var(--green)}
.about{padding:145px 6vw 80px;background:var(--ink);color:var(--paper)}.about-title{display:grid;grid-template-columns:1fr 2fr;align-items:start}.about h2{margin:0}.about-body{margin:100px 0 90px auto;max-width:980px;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:3.5vw;border-top:1px solid rgba(255,255,255,.24);padding-top:35px}.about-body p{margin:0;line-height:1.65;color:#bcbab4}.about-body .about-lead{font-size:clamp(1.4rem,2.3vw,2.4rem);line-height:1.25;color:var(--paper)}.skills{display:flex;flex-wrap:wrap;gap:12px}.skills span{padding:14px 20px;border:1px solid rgba(255,255,255,.3);border-radius:100px;font-size:.78rem}.skills span:nth-child(3n+1){background:var(--yellow);border-color:var(--yellow);color:var(--ink)}.skills span:nth-child(3n+2){background:var(--pink);border-color:var(--pink);color:var(--ink)}.skills span:nth-child(3n){background:var(--blue);border-color:var(--blue);color:white}.tool-line{margin-top:70px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);font-size:.68rem;color:#8d8b86;line-height:1.8}
.contact{min-height:88vh;padding:130px 5vw 90px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--yellow)}.contact h2{margin:35px 0 55px}.contact-links{display:flex;gap:16px}.contact-links a{background:var(--ink);color:var(--paper);border-radius:100px;padding:18px 28px;text-decoration:none;font-weight:600;transition:.25s}.contact-links a:hover{transform:translateY(-5px);background:var(--blue)}.availability{margin-top:55px;font-size:.82rem}footer{padding:25px 3vw;display:flex;justify-content:space-between;background:var(--ink);color:#8e8c86;font-size:.65rem}footer a{text-decoration:none}.reveal{opacity:0;transform:translateY(45px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:rotate(var(--angle,0)) translateY(0)}
@media(max-width:900px){.cursor-dot{display:none}.hero{min-height:980px}.hero h1{font-size:clamp(3.5rem,11vw,7rem)}.hero-cards{height:300px;width:82vw}.hero-card{width:32vw}.hero-role{font-size:clamp(2.8rem,8vw,5.8rem)}.featured-stage{height:520px}.feature-card{flex-basis:42vw}.about-title{grid-template-columns:1fr;gap:35px}.about-body{grid-template-columns:1fr 1fr}.about-lead{grid-column:1/-1}}
@media(max-width:680px){.topbar{grid-template-columns:1fr auto;height:64px}.topbar nav{display:none}.hero{min-height:860px;padding-top:95px}.hero-meta{margin-bottom:46px}.hero h1{font-size:13vw}.hero-cards{height:250px;width:96vw;margin-top:8px}.hero-card{width:39vw;border-radius:12px}.card-one{left:8%;top:42px}.card-two{left:25%;top:15px}.card-three{right:23%;top:50px}.card-four{right:6%;top:25px}.hero-role{font-size:10vw}.hero-client{margin-top:45px;max-width:90%}.hero-client p{line-height:1.6}.featured{padding:100px 0}.featured-stage{height:390px;gap:12px;margin-top:50px}.feature-card{flex-basis:58vw}.feature-left{margin-left:-38vw}.feature-right{margin-right:-38vw}.feature-card .media{border-radius:14px}.card-label span{display:none}.work-grid{grid-template-columns:1fr;gap:100px;padding:110px 7vw}.project:nth-child(even){margin-top:0}.about{padding:110px 6vw 70px}.about-body{margin-top:70px;grid-template-columns:1fr}.about-lead{grid-column:auto}.contact{min-height:75vh}.contact-links{flex-direction:column;width:80%}.contact-links a{text-align:center}footer{gap:20px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-cue span{animation:none}.reveal{opacity:1;transform:rotate(var(--angle,0))}.hero-card,.feature-card,.project img{transition:none}}

/* Dark portfolio direction */
.topbar{background:rgba(11,11,11,.84);border-bottom-color:rgba(246,245,240,.1)}
.topbar nav a:after{background:#f6f5f0}.lang{border-color:#f6f5f0;color:#f6f5f0}.lang:hover{background:#f6f5f0;color:#0b0b0b}
.cursor-dot{mix-blend-mode:difference}.hero-meta a,.hero-client p{color:#8f8f8b}
.hero-cards{width:min(900px,78vw);height:315px;margin:16px 0 0}
.hero-card{width:min(340px,29vw);aspect-ratio:16/10;background:#181818;box-shadow:0 30px 65px rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.1)}
.card-one{left:2%;top:62px}.card-two{left:25%;top:22px}.card-three{right:24%;top:66px}.card-four{right:1%;top:28px}
.hero-role{color:#f6f5f0;text-shadow:0 1px 0 #0b0b0b}.featured{background:#0b0b0b;border-top:1px solid rgba(255,255,255,.12)}
.section-intro>p:last-child,.card-label span,.project-copy p{color:#9b9b96}.feature-card .media,.project img{box-shadow:0 28px 60px rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.09)}
.work-grid{background:#0b0b0b}.about{background:#151515;color:#f6f5f0;border-top:1px solid rgba(255,255,255,.1)}
.about-body .about-lead{color:#f6f5f0}.skills span:nth-child(3n+1),.skills span:nth-child(3n+2){color:#111}.tool-line{color:#8d8b86}
.contact{background:#0b0b0b;color:#f6f5f0;border-top:1px solid rgba(255,255,255,.12)}.contact-links a{background:#f6f5f0;color:#111}.contact-links a:hover{background:var(--yellow);color:#111}.availability{color:#9b9b96}
footer{background:#0b0b0b;color:#8e8c86;border-top:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){.hero-cards{width:90vw;height:280px}.hero-card{width:35vw}}
@media(max-width:680px){.hero-cards{width:100vw;height:220px}.hero-card{width:46vw}.card-one{left:2%;top:48px}.card-two{left:23%;top:16px}.card-three{right:21%;top:50px}.card-four{right:1%;top:22px}}

/* Each project appears once: the hero is a separate visual teaser. */
.featured{padding-bottom:55px}
.work-grid{padding-top:65px}
.project-link{display:block}.project-copy h3 a{color:inherit;text-decoration:none;transition:color .2s}.project-copy h3 a:hover{color:var(--yellow)}
@media(max-width:680px){.featured{padding-bottom:45px}.work-grid{padding-top:65px}}

/* Homepage 3D Selected Work carousel */
.hero-carousel-shell{width:100vw;margin:18px calc(50% - 50vw) 8px;position:relative;z-index:5;overflow:hidden}
.hero-carousel-scene{--panel-width:clamp(210px,19vw,285px);--panel-height:calc(var(--panel-width) * .64);--drag-shift:0px;height:340px;position:relative;perspective:1250px;perspective-origin:50% 44%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-carousel-scene.is-dragging{cursor:grabbing}
.hero-carousel{position:absolute;inset:0;transform-style:preserve-3d;outline:none}
.hero-carousel:focus-visible:after{content:"";position:absolute;left:50%;top:50%;width:min(92vw,1240px);height:245px;transform:translate(-50%,-50%);border:1px solid var(--yellow);border-radius:20px;pointer-events:none}
.carousel-panel{position:absolute;left:50%;top:50%;width:var(--panel-width);height:var(--panel-height);display:block;overflow:hidden;border-radius:14px;background:#191919;border:1px solid rgba(255,255,255,.18);box-shadow:0 28px 55px rgba(0,0,0,.58);opacity:var(--panel-opacity,0);pointer-events:var(--panel-events,none);z-index:var(--panel-z,0);transform:translate3d(calc(-50% + var(--panel-x,0px) + var(--drag-shift)),calc(-50% + var(--panel-y,0px)),var(--panel-depth,-180px)) rotateY(var(--panel-rotate-y,0deg)) rotateZ(var(--panel-rotate-z,0deg)) scale(var(--panel-scale,.88));transform-origin:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .78s cubic-bezier(.2,.82,.2,1),opacity .42s ease,border-color .25s,box-shadow .25s,filter .25s;will-change:transform,opacity}
.hero-carousel:not(.is-ready) .carousel-panel{transition:none}
.carousel-panel:hover{border-color:rgba(255,255,255,.72);box-shadow:0 34px 72px rgba(0,0,0,.76);filter:brightness(1.08);z-index:9}
.carousel-panel img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.carousel-controls{height:44px;display:flex;align-items:center;justify-content:center;gap:22px;margin-top:-24px;position:relative;z-index:8}
.carousel-button{width:40px;height:40px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(11,11,11,.75);color:var(--ink);font:400 1rem 'DM Mono',monospace;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,color .2s,border-color .2s,transform .2s}
.carousel-button:hover,.carousel-button:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:scale(1.06)}
.carousel-hint{font-size:.58rem;color:#8f8f8b;min-width:210px;text-align:center}
@media(max-width:900px){.hero-carousel-scene{--panel-width:clamp(190px,30vw,250px);height:305px;perspective:1050px}.carousel-controls{margin-top:-18px}}
@media(max-width:680px){.hero{min-height:860px}.hero-carousel-shell{margin-top:20px;margin-bottom:10px}.hero-carousel-scene{--panel-width:clamp(125px,36vw,160px);height:215px;perspective:800px;perspective-origin:50% 48%}.carousel-panel{border-radius:9px;box-shadow:0 18px 38px rgba(0,0,0,.65)}.carousel-controls{margin-top:-10px;gap:12px}.carousel-button{width:38px;height:38px}.carousel-hint{min-width:170px;font-size:.5rem}.hero-role{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.carousel-panel{transition:none}}

/* Typographic project index: project titles replace redundant cover images. */
.project-index{padding:40px 6vw 150px;background:var(--paper);border-top:1px solid var(--line)}
.project-row{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(180px,.36fr) 42px;gap:22px;align-items:center;min-height:148px;border-bottom:1px solid var(--line);text-decoration:none;position:relative;isolation:isolate;overflow:hidden}
.project-row:before{content:"";position:absolute;inset:0;background:var(--row-color,var(--blue));transform:translateY(101%);transition:transform .42s cubic-bezier(.2,.8,.2,1);z-index:-1}
.project-row:nth-child(2){--row-color:var(--pink)}.project-row:nth-child(3){--row-color:var(--yellow)}.project-row:nth-child(4){--row-color:var(--blue)}.project-row:nth-child(5){--row-color:var(--green)}
.project-row:hover:before,.project-row:focus-visible:before{transform:translateY(0)}
.project-row:hover,.project-row:focus-visible{color:#0b0b0b;outline:none}
.project-row-number,.project-row-meta{font-size:.64rem;line-height:1.45}.project-row-meta{color:#969691;transition:color .25s}.project-row:hover .project-row-meta,.project-row:focus-visible .project-row-meta{color:#171717}
.project-row-title{font:400 clamp(2rem,4.3vw,5.1rem)/.92 'Archivo Black',sans-serif;letter-spacing:-.05em}
.project-row-arrow{font-size:2rem;transition:transform .3s}.project-row:hover .project-row-arrow,.project-row:focus-visible .project-row-arrow{transform:translate(5px,-5px)}
@media(max-width:820px){.project-row{grid-template-columns:38px minmax(0,1fr) 32px;gap:12px;min-height:120px}.project-row-meta{grid-column:2/3;margin-top:-20px}.project-row-arrow{grid-column:3;grid-row:1/3}}
@media(max-width:560px){.project-index{padding:25px 5vw 100px}.project-row{grid-template-columns:28px minmax(0,1fr) 26px;min-height:104px}.project-row-title{font-size:clamp(1.55rem,8vw,2.35rem)}.project-row-meta{font-size:.53rem}.project-row-arrow{font-size:1.4rem}}