html:has(.projects-page),body.projects-page{height:100%;overflow:hidden;overscroll-behavior:none}
.projects-page main,.projects-page .creative-hero{height:100dvh;min-height:0!important;padding:0!important;overflow:hidden}
.project-stage{position:absolute;inset:100px 24px 78px;display:flex;align-items:center;justify-content:center;z-index:2;touch-action:pan-y}
.project-frame{position:relative;width:min(30vh,34vw);height:min(53.33vh,60vw);max-width:75vw;max-height:100%;border-radius:18px;background:linear-gradient(120deg,#ff531f,#7bbaff,#ffae64);padding:2px;box-shadow:0 14px 55px #0002;transition:width .65s cubic-bezier(.22,.8,.2,1),height .65s cubic-bezier(.22,.8,.2,1)}
.project-frame.landscape{width:min(65vw,94vh);height:min(36.56vw,52.875vh)}
.project-frame video{display:block;width:100%;height:100%;object-fit:contain;border-radius:16px;background:#090a0d;transition:opacity .18s}
.project-frame.changing video{opacity:0}
.project-arrow{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border:0;border-radius:50%;color:var(--ink);background:#ff531f14;cursor:pointer;font-size:25px;transition:background .2s,scale .2s}
.project-arrow:hover{background:#ff531f30;scale:1.07}.project-arrow.prev{left:0}.project-arrow.next{right:0}
.project-heading{position:absolute;left:30px;top:104px;z-index:3;pointer-events:none}.project-heading h1{font:500 clamp(23px,3vw,40px)/1 var(--display);margin:0}.project-heading p{font-size:10px;opacity:.6}
.project-metric{position:absolute;top:100px;font-size:11px;line-height:1.6;z-index:3;pointer-events:none;max-width:170px}.project-metric strong{display:block;font:500 28px/1.2 var(--display)}.project-metric small{display:block;opacity:.55;font-size:9px}.metric-left{left:30px;top:195px}.metric-right{right:30px;text-align:right}
.project-caption{position:absolute;bottom:23px;left:75px;right:75px;text-align:center;z-index:3}.project-caption h2{font:600 14px/1.3 var(--body);margin:0 0 5px}.project-caption p{font-size:11px;line-height:1.5;margin:0 auto;max-width:650px}.project-caption small{display:block;font-size:9px;opacity:.55;margin-top:5px}
.project-bee{position:absolute;bottom:23px;left:24px;width:33px!important;height:33px!important;z-index:3}.project-social{position:absolute;right:25px;bottom:25px;z-index:3;width:24px;height:24px;color:var(--orange)}
.project-play{position:absolute;bottom:12px;left:50%;translate:-50% 0;border:0;border-radius:20px;background:#08090aba;color:white;padding:7px 13px;font-size:11px;cursor:pointer}
@media(max-width:700px){.project-heading{top:91px;left:18px}.project-heading h1{font-size:23px}.project-heading p{margin:6px 0}.project-metric{top:151px;font-size:9px;max-width:145px}.project-metric strong{font-size:18px}.metric-left{left:18px}.metric-right{right:18px}.project-stage{inset:225px 10px 115px}.project-frame{height:min(100%,52dvh);width:min(29.25dvh,64vw)}.project-frame.landscape{width:76vw;height:42.75vw}.project-arrow{width:30px;height:40px;font-size:21px;background:transparent}.project-caption{left:45px;right:45px;bottom:max(20px,env(safe-area-inset-bottom))}.project-caption p{font-size:10px}.project-caption h2{font-size:12px}.project-bee{left:10px;width:25px!important;height:25px!important}.project-social{right:12px;width:20px}.project-frame{border-radius:13px}.project-frame video{border-radius:11px}}
@media(max-height:620px){.project-heading{top:80px}.project-metric{top:120px}.project-stage{inset:95px 14px 85px}.project-frame{height:100%;width:25vh}.project-frame.landscape{height:100%;width:70vh}.project-caption p{max-width:70vw}.project-heading h1{font-size:20px}.project-metric strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){.project-frame,.project-frame video,.project-arrow{transition:none}}
.projects-page .creative-hero .project-heading h1{font:500 clamp(23px,3vw,40px)/1.1 var(--display);letter-spacing:-.04em;margin:0}
html body.creative-site.projects-page .creative-hero{height:100dvh!important;min-height:0!important;max-height:100dvh;padding:0!important;box-sizing:border-box}
.projects-page .project-heading{left:50%;translate:-50% 0;text-align:center;top:95px;white-space:nowrap}
.projects-page .project-stage{inset:165px 24px 100px}
.projects-page .project-frame{max-height:none;max-width:none;flex:none;box-sizing:content-box}
.projects-page .project-frame video{object-fit:fill}
.projects-page .project-metric{top:calc(50% + var(--frame-half-height, 25vh) + 12px);left:calc(50% - 170px);right:auto;width:150px;max-width:150px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:top .65s,left .65s,opacity .25s,filter .3s}
.projects-page .metric-right{left:calc(50% + 20px)}
.projects-page.portrait-project .project-metric{top:45%;left:calc(50% - var(--frame-half) - 175px)}
.projects-page.portrait-project .metric-right{left:calc(50% + var(--frame-half) + 25px)}
.projects-page .project-metric strong{font-size:20px}.projects-page .project-metric small{display:none}
.project-caption{transition:opacity .3s,filter .3s,translate .3s}.project-transition .project-caption,.project-transition .project-metric{opacity:0;filter:blur(5px);translate:0 4px}
@media(max-width:700px){.projects-page .project-stage{inset:170px 10px 155px}.projects-page .project-metric{top:calc(100% + 12px);left:calc(50% - 145px);width:135px;font-size:10px}.projects-page .metric-right{left:calc(50% + 10px)}.projects-page.portrait-project .project-metric{top:calc(100% + 12px);left:calc(50% - 145px)}.projects-page.portrait-project .metric-right{left:calc(50% + 10px)}.projects-page .project-metric strong{font-size:15px}.projects-page .project-caption{bottom:25px}}