@property --music-beat{syntax:"<number>";inherits:false;initial-value:0}
@property --speaker-punch{syntax:"<number>";inherits:false;initial-value:0}
.banner-header{position:absolute;inset:0 0 auto;z-index:10;height:100px;border-bottom:0;width:min(1440px,calc(100% - 96px));margin:auto}.banner-header .logo{font-size:42px}.banner-header nav{padding:12px 24px;gap:32px;background:#0006;border:1px solid #ffffff18;border-radius:30px;backdrop-filter:blur(16px)}.banner-header nav a{font-size:12px;color:#ddd}.banner-header .button-small{border-radius:4px;font-size:11px;padding:12px 18px}.cinematic-banner{position:relative;isolation:isolate;overflow:hidden;background:#000;width:100%;min-height:780px;height:100svh;max-height:1100px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #272727}.banner-scene{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,#19191966 0,transparent 57%),#000}.banner-halo{position:absolute;width:750px;height:750px;left:50%;top:47%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,transparent 43%,#cbcbcb13 48%,#cbcbcb38 49%,transparent 50%,#c2c2c20b 53%,transparent 61%);filter:blur(3px);animation:halo-breathe 8s ease-in-out infinite alternate}#banner-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.95}.banner-x{position:absolute;width:min(1000px,110vh);height:min(1000px,110vh);top:50%;left:50%;color:#d1d1d150;transform:translate(-50%,-50%) rotate(14deg);animation:x-drift 18s ease-in-out infinite alternate;filter:drop-shadow(0 0 9px #cbcbcb30)}.banner-screen{position:absolute;border:1px solid #bfbfbf45;border-radius:7px;background:#141414;box-shadow:0 25px 90px #000b;overflow:hidden;filter:none;opacity:.86;will-change:transform;animation:screen-float 10s ease-in-out infinite alternate}.screen-top{height:25px;background:#151515;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-bottom:1px solid #5656564a;font:7px var(--display);letter-spacing:.12em;color:#bfbfbf}.screen-top>span:first-child{font-size:6px;letter-spacing:4px;color:#767676}.banner-screen img{width:100%;height:auto;display:block}.banner-screen-1{--rotate:-14deg;--skew:4deg;left:-100px;top:22%;width:470px;transform:rotate(-14deg) skewY(4deg);animation-delay:-3s}.banner-screen-2{--rotate:12deg;--skew:-3deg;right:-115px;top:13%;width:455px;transform:rotate(12deg) skewY(-3deg);animation-delay:-6s}.banner-screen-3{--rotate:-10deg;--skew:-2deg;right:-10px;bottom:17%;width:395px;transform:rotate(-10deg) skewY(-2deg);animation-delay:-1s}.banner-screen-4{--rotate:11deg;--skew:1deg;left:25px;bottom:16%;width:400px;transform:rotate(11deg) skewY(1deg);animation-delay:-7s}.banner-screen-5{--rotate:5deg;--skew:0deg;right:24%;top:-100px;width:255px;transform:rotate(5deg);opacity:.3;animation-delay:-4s}.banner-vignette{position:absolute;inset:0;background:linear-gradient(180deg,#0008,transparent 22%,transparent 72%,#000f),radial-gradient(ellipse at center,#0000 5%,#0002 45%,#0009 96%)}.banner-grain{position:absolute;inset:0;opacity:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen}.banner-content{position:relative;text-align:center;padding:120px 30px 170px;max-width:1100px;width:100%;z-index:1;animation:banner-entrance 1.2s cubic-bezier(.2,.65,.2,1) backwards}.banner-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;color:#bababa;font:11px var(--display);letter-spacing:.25em;margin-bottom:22px}.banner-eyebrow>span{width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 20px #d5d5d5}.cinematic-banner h1{font-family:var(--display);line-height:.82;letter-spacing:-.11em;display:flex;flex-direction:column;align-items:center;font-size:clamp(180px,25vw,390px);margin:0;text-shadow:none}.banner-monogram{display:block;font-weight:700;position:relative;padding-right:.09em;background:linear-gradient(171deg,#fff 12%,#e9e9e9 36%,#9d9d9d 48%,#2f2f2f 49%,#f6f6f6 54%,#898989 77%,#f6f6f6 93%);color:#fff;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:none;background-position:50% 45%;background-size:100% 160%}.banner-wordmark{display:block;color:#e9e9e9;font-size:clamp(16px,2.5vw,33px);font-weight:500;letter-spacing:.88em;padding-left:.88em;line-height:1.2;margin-top:22px;text-shadow:0 0 30px #000}.banner-description{font-size:19px;font-weight:600;letter-spacing:-.025em;color:#ededf2;margin-top:30px;text-shadow:0 2px 15px #000}.banner-price{font:11px var(--display);letter-spacing:.15em;color:#8a8a8a;margin-top:12px}.banner-price>span{margin:0 11px;color:#575757}.banner-price>strong{color:var(--lime);font-size:15px;letter-spacing:0}.banner-actions{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:32px}.banner-actions .button{box-shadow:0 0 45px #c8c8c820;font-size:12px;min-width:220px;justify-content:space-between;border-radius:4px;padding:16px 22px}.banner-work-link{display:flex;align-items:center;gap:20px;font-size:12px;font-weight:600;color:#d7d7d7;padding:16px 0;border-bottom:1px solid #8e8e8e77}.banner-work-link>span{color:var(--lime);font-size:18px}.banner-work-link:hover{color:var(--lime)}.banner-footer{position:absolute;bottom:65px;left:48px;right:48px;max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:23px;border-top:1px solid #80808038}.banner-projects{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.banner-projects>.mono{font-size:8px;letter-spacing:.17em;color:#6f6f6f;margin-right:5px}.banner-projects>button{padding:7px 0;background:none;border:0;color:#848484;font-size:10px;font-weight:500}.banner-projects>button:hover,.banner-projects>button[aria-pressed=true]{color:#cdcdcd}.banner-projects>button[aria-pressed=true]:before{content:'↗';margin-right:7px;color:var(--lime)}.motion-toggle{background:none;padding:7px 0;border:0;color:#8b8b8b;font:9px var(--display);white-space:nowrap;display:flex;gap:9px;align-items:center}.motion-toggle:hover{color:var(--lime)}.motion-toggle>span{font-size:12px}.banner-scroll{position:absolute;right:49px;bottom:20px;color:#b2b2b2;border:1px solid #58585873;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:16px}.banner-scroll>span{animation:scroll-nudge 2.5s ease-in-out infinite}.cinematic-banner.motion-paused .banner-scene *,.cinematic-banner.motion-paused .banner-monogram,.cinematic-banner.motion-paused .banner-scroll>span{animation-play-state:paused!important}
@keyframes screen-float{0%{transform:translateY(-12px) rotate(var(--rotate)) skewY(var(--skew))}100%{transform:translateY(17px) rotate(calc(var(--rotate) + 2deg)) skewY(var(--skew))}}
@keyframes x-drift{to{transform:translate(-50%,-50%) rotate(20deg) scale(1.04)}}@keyframes halo-breathe{to{transform:translate(-50%,-50%) scale(1.13);opacity:.5}}@keyframes chrome-light{from{background-position:50% 0}to{background-position:50% 100%}}@keyframes banner-entrance{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}@keyframes scroll-nudge{50%{transform:translateY(3px)}}
.banner-footer,.banner-scroll{z-index:3}
#banner-canvas{z-index:1}
.banner-monogram{scale:calc(1 + var(--music-beat,0)*.06 + var(--speaker-punch,0)*.07);transform-origin:50% 55%}
.banner-wordmark{scale:calc(1 + var(--music-beat,0)*.03)}
.banner-halo{scale:calc(1 + var(--music-beat,0)*.14);transform-origin:0 0}
.banner-header .logo{scale:calc(1 + var(--music-beat,0)*.035)}
.cinematic-banner.motion-paused .banner-monogram,.cinematic-banner.motion-paused .banner-wordmark,.cinematic-banner.motion-paused .banner-halo{scale:1}
@media(prefers-reduced-motion:reduce){.cinematic-banner:not(.motion-opt-in) .banner-monogram,.cinematic-banner:not(.motion-opt-in) .banner-wordmark,.cinematic-banner:not(.motion-opt-in) .banner-halo{scale:1}}
@media(min-width:1700px){.banner-screen-1{left:3%;top:24%}.banner-screen-2{right:3%}.banner-screen-3{right:7%}.banner-screen-4{left:7%}.banner-content{max-width:1200px}}
@media(max-width:1100px){.banner-header{width:calc(100% - 64px)}.banner-screen-1{left:-180px;width:430px}.banner-screen-2{right:-190px;width:420px}.banner-screen-3{right:-125px;width:360px}.banner-screen-4{left:-80px;width:350px}.banner-content{padding-inline:25px}.banner-projects{gap:15px}.banner-footer{left:32px;right:32px}.banner-projects>.mono{display:none}.banner-screen-5{right:19%;width:215px}.banner-scroll{right:33px}}
@media(max-width:800px){.banner-header{height:85px;width:calc(100% - 42px)}.banner-header .logo{font-size:34px}.banner-header nav{padding:10px 18px;gap:18px}.banner-header nav a{font-size:10px}.banner-header .button-small{font-size:10px;gap:18px;min-height:38px;padding:10px 14px}.cinematic-banner{min-height:810px;height:100svh;max-height:1050px}.banner-content{padding:115px 24px 185px}.cinematic-banner h1{font-size:clamp(190px,32vw,290px)}.banner-wordmark{font-size:24px}.banner-description{font-size:17px;margin-top:27px}.banner-screen-1{left:-210px;top:21%;width:390px}.banner-screen-2{right:-200px;top:13%;width:370px}.banner-screen-3{right:-155px;bottom:23%;width:325px}.banner-screen-4{left:-150px;bottom:21%;width:330px}.banner-screen-5{right:20%;width:200px;top:-90px;opacity:.25}.banner-screen{opacity:.4}.banner-footer{left:21px;right:21px;bottom:72px;align-items:flex-start}.banner-projects{max-width:480px;gap:4px 18px}.banner-projects>button{font-size:10px;padding-block:5px}.banner-scroll{right:22px}.banner-halo{width:650px;height:650px}}
@media(max-width:560px){.banner-header{height:77px;width:calc(100% - 36px)}.banner-header .logo{font-size:34px}.banner-header nav{display:none}.banner-header .button-small{font-size:10px;gap:17px;min-height:38px;padding:10px 13px}.cinematic-banner{min-height:740px;height:100svh;max-height:950px}.banner-content{padding:105px 18px 220px}.banner-eyebrow{font-size:8px;letter-spacing:.18em;gap:9px;margin-bottom:30px}.cinematic-banner h1{font-size:clamp(158px,44vw,238px)}.banner-wordmark{font-size:17px;letter-spacing:.8em;padding-left:.8em;margin-top:17px}.banner-description{font-size:16px;margin-top:31px}.banner-price{font-size:8px;letter-spacing:.1em;margin-top:11px}.banner-price>strong{font-size:14px}.banner-price>span{margin-inline:8px}.banner-actions{gap:24px;margin-top:28px}.banner-actions .button{font-size:11px;min-width:181px;padding:14px 17px;gap:23px;min-height:48px}.banner-work-link{font-size:10px;gap:12px;padding:14px 0}.banner-work-link>span{font-size:16px}.banner-screen-1{left:-185px;top:17%;width:310px;opacity:.3}.banner-screen-2{right:-215px;top:15%;width:325px;opacity:.3}.banner-screen-3{right:-125px;bottom:27%;width:255px;opacity:.38}.banner-screen-4{left:-150px;bottom:26%;width:280px;opacity:.38}.banner-screen-5{top:-95px;right:20%;width:160px;opacity:.18}.banner-halo{width:470px;height:470px;top:44%}.banner-x{width:750px;height:750px;top:44%;opacity:.6}.banner-vignette{background:linear-gradient(180deg,#0009,transparent 25%,transparent 54%,#000f 94%),radial-gradient(ellipse at center,#0000,#0007)}.banner-footer{left:18px;right:18px;bottom:91px;padding-top:19px;display:block}.banner-projects{gap:2px 18px;max-width:100%}.banner-projects>button{font-size:9px;padding:5px 0}.motion-toggle{position:absolute;right:0;bottom:-37px;font-size:8px}.banner-scroll{display:none}}
@media(max-width:360px){.cinematic-banner h1{font-size:146px}.banner-wordmark{font-size:15px}.banner-actions{gap:17px}.banner-actions .button{min-width:170px;padding-inline:14px}.banner-work-link{gap:9px}.banner-description{font-size:15px}.banner-projects{gap:3px 14px}.banner-projects>button{font-size:8px}}
@media(prefers-reduced-motion:reduce){.banner-content{opacity:1;transform:none}.banner-monogram{background-position:50% 45%}.banner-screen{will-change:auto}.banner-halo{opacity:.65}.cinematic-banner.motion-opt-in .banner-screen{animation:screen-float 10s ease-in-out infinite alternate!important}.cinematic-banner.motion-opt-in .banner-screen-1{animation-delay:-3s!important}.cinematic-banner.motion-opt-in .banner-screen-2{animation-delay:-6s!important}.cinematic-banner.motion-opt-in .banner-screen-3{animation-delay:-1s!important}.cinematic-banner.motion-opt-in .banner-screen-4{animation-delay:-7s!important}.cinematic-banner.motion-opt-in .banner-screen-5{animation-delay:-4s!important}.cinematic-banner.motion-opt-in .banner-x{animation:x-drift 18s ease-in-out infinite alternate!important}.cinematic-banner.motion-opt-in .banner-halo{animation:halo-breathe 8s ease-in-out infinite alternate!important}.cinematic-banner.motion-opt-in .banner-scroll>span{animation:scroll-nudge 2.5s ease-in-out infinite!important}}