:root{color-scheme:dark;--white:#f2f3f4;--gold:#ffbd00;--mint:#00ebc6;--ease:cubic-bezier(.22,.75,.18,1);--lens-x:31.7vw;--lens-y:40.3vh;--radius:10vw}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}body{color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible{outline:1px solid var(--mint);outline-offset:8px}button,span{-webkit-tap-highlight-color:transparent}.background,.background>div{position:fixed;inset:0;pointer-events:none}.background{overflow:hidden}.blue-flow{background:radial-gradient(ellipse at 85% 34%,#164d7a 0,transparent 30%),radial-gradient(ellipse at 28% 66%,#062c32 0,transparent 36%),radial-gradient(ellipse at 88% 82%,#1a232c 0,transparent 30%);filter:blur(38px);transform:scale(1.15);animation:blue-drift 18s ease-in-out infinite alternate}.color-flow{opacity:0;background:radial-gradient(ellipse at 23% 40%,#4e003d 0,transparent 38%),radial-gradient(ellipse at 7% 57%,#d6ac00 0,transparent 38%),radial-gradient(ellipse at 65% 96%,#ef250b 0,transparent 32%),radial-gradient(ellipse at 91% 27%,#00bda9 0,transparent 40%),radial-gradient(ellipse at 62% 78%,#6885cb 0,transparent 33%),#060707;filter:blur(38px);transform:scale(1.15);transition:opacity 1.3s var(--ease);animation:color-drift 14s ease-in-out infinite alternate}.grain{opacity:.11;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.navigation{position:fixed;z-index:30;top:5.65vh;left:8.4%;right:8.4%;display:flex;align-items:center;justify-content:space-between;font-size:clamp(12px,.875vw,16px);line-height:1.2}.navigation button{padding:0}.navigation .brand{font-weight:700;font-size:clamp(12px,1.25vw,20px)}.page{position:absolute;inset:0;overflow:hidden;transition:transform 1.45s var(--ease),opacity 1.1s var(--ease);will-change:transform}.hero{z-index:2}.about{z-index:3;transform:translate3d(0,110%,0);pointer-events:none}.type-layer{position:absolute;inset:0;margin:0;font-weight:400;font-size:13.75vw;line-height:1;letter-spacing:-.065em}.creative,.visual,.designer{position:absolute;white-space:nowrap}.creative{left:8.1vw;top:31.55vh}.designer{right:8.9vw;top:49.6vh}.visual{right:8.7vw;top:38.7vh;font-family:'Times New Roman',Times,serif;font-size:10.5vw;letter-spacing:-.05em;font-weight:400;color:var(--gold)}.hero-meta{position:absolute;left:8.4vw;bottom:9.9vh;display:flex;gap:6.8vw;font-size:clamp(12px,.875vw,16px);line-height:1.4}.hero-meta p{margin:0}.hero-meta strong{font-weight:500}.hero-meta span{display:block;margin-top:1.1em}.section-arrow{position:absolute;width:48px;height:11vh;bottom:9.6vh;padding:10px;display:grid;place-items:center}.section-arrow span{display:block;height:8.3vh;width:1px;background:#e0e0e0;position:relative}.section-arrow span:after{content:'';position:absolute;width:5px;height:5px;bottom:0;left:-2px;border-bottom:1px solid;border-right:1px solid;transform:rotate(45deg)}.next{right:calc(8.4vw - 24px)}.back{left:calc(8.4vw - 24px)}.lens{display:none;position:absolute;pointer-events:none;width:calc(var(--radius)*2);height:calc(var(--radius)*2);left:calc(var(--lens-x) - var(--radius));top:calc(var(--lens-y) - var(--radius));border-radius:50%;border:1px solid #c0d0d66b;box-shadow:inset 0 0 3px #ffffff70,0 0 3px #ffffff3a;overflow:hidden;background:#d6faf60a;backdrop-filter:blur(1px)}.lens-scene{width:100vw;height:100dvh;position:absolute;left:calc(var(--radius) - var(--lens-x));top:calc(var(--radius) - var(--lens-y));transform:scale(1.075);transform-origin:var(--lens-x) var(--lens-y);filter:blur(2.8px)}.lens-scene .type-layer{text-shadow:-7px 0 6px #ffb700,7px 1px 6px #008dff,-3px -5px 7px #00ead4,3px 6px 8px #4539df}.lens-enabled #headline{mask-image:radial-gradient(circle at var(--lens-x) var(--lens-y),transparent calc(var(--radius) - 1px),#000 var(--radius))}.lens-enabled .lens{display:block}.introduction{position:absolute;left:8.4vw;top:29vh}.introduction h2{font-size:3.125vw;letter-spacing:-.065em;line-height:1.36;font-weight:400;margin:0}.introduction em{font-family:'Times New Roman',Times,serif;color:var(--mint);font-size:1.12em;letter-spacing:-.055em}.introduction p{margin:7.7vh 0 0;font-size:clamp(12px,.875vw,16px);line-height:1.4;font-weight:400}.card-stack{position:absolute;left:46.2vw;top:36.2vh;width:65vw;height:51.2vh}.project-card{position:absolute;inset:0;background:#000;border-radius:1.6vw;overflow:hidden;padding:4.5vh 5.4vw 0;transition:transform 1.15s var(--ease),filter 1.15s var(--ease),opacity 1.15s var(--ease);transform-origin:50% 100%;cursor:pointer}.project-card[data-card="2"]{transform:translate(18vw,-15vh);filter:blur(4px);opacity:.55;z-index:1}.project-card[data-card="1"]{transform:translate(8.5vw,-7.5vh);filter:blur(2px);opacity:.8;z-index:2}.project-card[data-card="0"]{z-index:3}.card-heading{display:flex;align-items:baseline;gap:2vw;width:72vw;white-space:nowrap}.card-heading h3{font-size:3.125vw;line-height:1.2;font-weight:400;letter-spacing:-.065em;margin:0}.card-heading>span{width:18.5vw;border-bottom:1px solid #b7b7b7}.card-arrow{border:1px solid #e5e5e5;border-radius:50%;width:4.9vw;height:4.9vw;font-size:2.3vw;line-height:1;margin-top:1.7vh;position:relative;z-index:2;font-weight:200}.card-art{position:absolute;top:16.5vh;left:5.4vw;width:48.4vw;height:auto;display:block;pointer-events:none}.brand-study{font-size:10vw;letter-spacing:-.08em;margin-top:3vh}.brand-study span{display:block;color:var(--mint);font-family:Georgia,serif;font-style:italic;margin-left:15vw}.dots{position:absolute;bottom:7.9vh;left:75.5vw;display:flex;gap:2vw;z-index:10}.dots button{width:16px;height:16px;padding:0;border:1px solid #f0eeee;border-radius:50%;position:relative}.dots button:before{content:'';position:absolute;inset:-12px}.dots button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint)}body[data-page="1"] .color-flow{opacity:1}body[data-page="1"] .hero{transform:translate3d(0,-100%,0) scale(.92);opacity:0;pointer-events:none}body[data-page="1"] .about{transform:translate3d(0,0,0);pointer-events:auto}body[data-page="1"] .playbook{text-decoration:underline;text-underline-offset:4px}body[data-page="1"] .brand{font-size:inherit;font-weight:400}
@keyframes blue-drift{0%{transform:scale(1.2) rotate(-8deg)}45%{transform:scale(1.3) rotate(12deg) translate(-9%,4%)}100%{transform:scale(1.2) rotate(-10deg) translate(7%,-8%)}}@keyframes color-drift{0%{transform:scale(1.2) rotate(-8deg)}100%{transform:scale(1.25) rotate(9deg) translate(5%,-3%)}}
@media(max-width:700px){:root{--radius:16vw}.navigation{left:7%;right:7%;top:5vh;font-size:11px}.navigation .brand{font-size:12px}.type-layer{font-size:17vw;letter-spacing:-.065em}.creative{left:7vw;top:34vh}.designer{right:7vw;top:49vh}.visual{right:8vw;top:43vh;font-size:14vw}.hero-meta{left:7vw;bottom:12vh;font-size:11px;gap:10vw}.next{right:calc(8vw - 24px);bottom:10vh}.introduction{left:7vw;top:18vh}.introduction h2{font-size:6.5vw;line-height:1.35;letter-spacing:-.05em}.introduction p{font-size:11px;margin-top:2.5vh}.card-stack{left:15vw;top:58vh;width:94vw;height:32vh}.project-card{border-radius:16px;padding:2.5vh 6vw}.card-heading h3{font-size:5.7vw}.card-heading{width:125vw;gap:4vw}.card-heading>span{width:25vw}.card-arrow{width:9vw;height:9vw;font-size:5vw;margin-top:1vh}.card-art{top:10vh;left:6vw;width:83vw}.project-card[data-card="1"]{transform:translate(6vw,-4vh)}.project-card[data-card="2"]{transform:translate(12vw,-8vh)}.dots{left:61vw;bottom:6vh;gap:6vw}.dots button{width:12px;height:12px}.back{left:calc(7vw - 24px);bottom:5vh;height:6vh}.back span{height:5vh}.brand-study{font-size:16vw}.lens-scene{filter:blur(2px)}}
@media(prefers-reduced-motion:reduce){.background>div{animation:none}.page,.project-card,.color-flow{transition-duration:.01ms}.lens-scene{filter:none}}
.type-layer{letter-spacing:-.025em}
.type-layer .visual{right:18vw;top:38vh;font-size:10vw}
.navigation .brand{font-size:clamp(12px,1vw,16px)}
.hero-meta{gap:5vw}
.introduction h2{letter-spacing:-.045em}
.card-heading h3{font-size:3vw}
.grain{opacity:.25}
.color-flow{background:radial-gradient(ellipse 38% 45% at 90% 31%,#001512 0%,#00382f 25%,#00b9a8 48%,transparent 78%),radial-gradient(ellipse 31% 45% at 29% 33%,#490034 0%,#480033 58%,transparent 94%),radial-gradient(ellipse 65% 32% at 85% 99%,#eb270b 0%,#e82810 46%,transparent 80%),radial-gradient(ellipse 31% 60% at 4% 66%,#c7a408 0%,#b89600 44%,transparent 78%),radial-gradient(ellipse 42% 43% at 59% 73%,#7785d2 0%,#7785d2 38%,transparent 77%),#000;filter:blur(25px)}
@media(max-width:700px){.card-heading h3{font-size:5.7vw}.introduction h2{letter-spacing:-.045em}}
@media(max-width:700px){.type-layer .visual{right:15vw;top:42vh;font-size:14vw}.navigation{gap:14px;font-size:10px}.navigation .brand{max-width:120px;text-align:left;font-size:11px}.hero-meta{gap:6vw;font-size:10px}.introduction p{max-width:80vw;font-size:10px}}
/* Shared slide positions keep direct menu navigation and scrolling in sync. */
body .page.is-before{transform:translate3d(0,-100%,0) scale(.92);opacity:0;pointer-events:none}
body .page.is-after{transform:translate3d(0,110%,0);opacity:0;pointer-events:none}
body .page.is-active{transform:translate3d(0,0,0);opacity:1;pointer-events:auto}
.projects{z-index:4}
body[data-page="2"] .color-flow{opacity:.8}
.navigation [aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.navigation .brand[aria-current="page"]{text-decoration:none}
.projects-intro{position:absolute;left:8.4vw;top:22vh}
.section-kicker{font-size:12px;letter-spacing:.08em;margin:0 0 3vh}
.projects-intro h2{font-size:7.5vw;line-height:.95;letter-spacing:-.055em;font-weight:400;margin:0}
.projects-intro h2 em{font-family:'Times New Roman',serif;font-weight:400;color:var(--mint);font-size:1.06em}
.projects-description{font-size:clamp(14px,1.1vw,19px);line-height:1.6;margin:5vh 0 0;color:#f2f3f4d9}
.work-showcase{position:absolute;left:48vw;right:8.4vw;top:23vh;bottom:14vh;background:#050606;border:1px solid #ffffff16;border-radius:1.6vw;padding:3vw;display:flex;flex-direction:column;box-shadow:1.5vw -1.5vw 0 #0005,3vw -3vw 0 #0002}
.work-showcase-heading{display:flex;justify-content:space-between;gap:20px;font-size:12px;padding-bottom:2.5vh;border-bottom:1px solid #ffffff35}
.work-empty{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2vh 0}
.work-empty-label{font-size:12px;letter-spacing:.05em;color:#babfc0}
.work-empty h3{font-size:4.2vw;line-height:1.02;letter-spacing:-.035em;font-weight:400;margin:2vh 0}
.work-empty h3 em{font-family:'Times New Roman',serif;color:var(--gold);font-weight:400}
.work-empty p{font-size:14px;line-height:1.5;color:#b9bcbc;margin:1vh 0}
.work-slots{display:flex;gap:2vw;border-top:1px solid #ffffff35;padding-top:2vh;font-size:12px;color:#797e7f}
.work-slots span:first-child{color:var(--mint)}
.arrow-up span{transform:rotate(180deg)}
@media(max-width:700px){.projects-intro{top:17vh;left:7vw}.section-kicker{margin-bottom:2vh;font-size:11px}.projects-intro h2{font-size:13vw}.projects-description{margin-top:2vh;font-size:13px;line-height:1.4}.work-showcase{top:49vh;bottom:12vh;left:15vw;right:7vw;border-radius:16px;padding:5vw;box-shadow:2vw -1.5vw 0 #0005,4vw -3vw 0 #0002}.work-showcase-heading{font-size:10px;padding-bottom:1.5vh}.work-empty-label{font-size:10px}.work-empty h3{font-size:8vw;margin:1vh 0}.work-empty p{font-size:12px;margin:0}.work-slots{padding-top:1vh;gap:6vw}.projects .back{bottom:4vh}}
@media(max-height:550px) and (min-width:701px){.projects-intro{top:21vh}.projects-intro h2{font-size:6vw}.projects-description{margin-top:3vh}.work-showcase{top:19vh;bottom:8vh;padding:2vw}.work-empty h3{font-size:3.4vw}}
.contact{z-index:5}
body[data-page="3"] .color-flow{opacity:.55}
.contact-intro{position:absolute;left:8.4vw;top:25vh}
.contact-intro h2{font-size:7.3vw;line-height:.97;letter-spacing:-.055em;font-weight:400;margin:0}
.contact-intro h2 em{font-family:'Times New Roman',serif;font-weight:400;color:var(--gold)}
.contact-description{font-size:clamp(14px,1.15vw,19px);line-height:1.6;margin:5vh 0 0;color:#f2f3f4d9}
.contact-panel{position:absolute;left:51vw;right:8.4vw;top:23vh;bottom:15vh;padding:3vw;border-radius:1.6vw;background:#030606ec;border:1px solid #ffffff20;box-shadow:1.5vw -1.5vw 0 #0004;display:flex;flex-direction:column}
.contact-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;letter-spacing:.03em;border-bottom:1px solid #ffffff30;padding-bottom:2vh}
.contact-panel-heading>span:last-child{color:var(--mint);font-size:26px;line-height:1}
.contact-panel h3{font-size:3.1vw;letter-spacing:-.045em;line-height:1.12;font-weight:400;margin:4vh 0 2vh}
.contact-panel h3 em{font-family:'Times New Roman',serif;font-weight:400;color:var(--mint)}
.contact-copy{font-size:clamp(14px,1vw,18px);line-height:1.65;color:#c0c8c8;max-width:34em;margin:0 0 3vh}
.contact-channels{margin-top:auto}
.contact-channel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2.4vh 0;border-top:1px solid #ffffff30;font-size:14px;min-height:44px}
.contact-pending{color:#919b9b;font-family:'Times New Roman',serif;font-style:italic;font-size:18px}
.contact-channel a{color:var(--white);text-decoration:none;overflow-wrap:anywhere;text-align:right;transition:color .2s}
.contact-channel a:hover{color:var(--mint)}
.contact-channel a:focus-visible{outline:1px solid var(--mint);outline-offset:5px}
.back-to-top{position:absolute;right:8.4vw;bottom:9vh;font-size:12px;display:flex;align-items:center;gap:20px;padding:12px 0}
.back-to-top span{font-size:24px}
@media(max-width:700px){.contact-intro{left:7vw;top:16vh}.contact-intro h2{font-size:13vw}.contact-description{font-size:13px;line-height:1.4;margin-top:2vh}.contact-panel{top:46vh;bottom:12vh;left:15vw;right:7vw;padding:4.5vw;border-radius:16px}.contact-panel-heading{font-size:10px;padding-bottom:1vh}.contact-panel-heading>span:last-child{font-size:20px}.contact-panel h3{font-size:6.4vw;margin:2vh 0 1.5vh}.contact-copy{font-size:12px;line-height:1.45;margin-bottom:1.5vh}.contact-channel{font-size:12px;padding:1vh 0;min-height:36px}.contact-pending{font-size:16px}.contact .back{bottom:4vh}.back-to-top{right:7vw;bottom:4vh;font-size:10px}}
@media(max-height:650px){.contact-panel h3{margin-top:2vh}.contact-copy{line-height:1.4;margin-bottom:1vh}.contact-channel{padding:1vh 0}}
@media(max-height:550px) and (min-width:701px){.contact-intro{top:21vh}.contact-intro h2{font-size:6vw}.contact-description{margin-top:3vh}.contact-panel{top:18vh;bottom:12vh;padding:2vw}.contact-panel h3{font-size:2.6vw}.contact-copy{font-size:12px}.contact-channel{font-size:12px;min-height:30px}}