body{background-color:#fff}.hero{box-sizing:border-box;height:100vh;padding:0;position:relative;width:100%}.hero img{position:absolute;--height:100%;bottom:0;height:var(--height);mix-blend-mode:difference;width:100%;z-index:100}.hero .textboxes .textbox{border:3px solid #000;border-radius:10rem;color:#000;font-size:var(--font-size-l);padding:.1rem 1.5rem;position:absolute;text-wrap:nowrap;z-index:20}#hero-canvas{height:100vh;widht:100%;height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:10}.showreel{height:fit-content;width:100%}.showreel video{display:block;height:auto;object-fit:cover;width:100%}.film-content{align-items:center;box-sizing:border-box;display:flex;height:var(--fullscreen-height);justify-content:center;padding:4rem 8rem}.film-content>div{display:flex;gap:2rem;position:relative}.film-content h3{left:0;position:absolute;top:max(-13rem,-13vw);width:60%}.film-content>div>div{width:50%}.film-content h2{font-size:var(--font-size-xl);font-weight:600;margin:0}.film-content p{font-size:var(--font-size-s)}.film-content .images{position:relative}.film-content .images img{left:calc(50% + var(--offsetLeft));position:absolute;rotate:var(--rotate);top:calc(50% + var(--offsetTop));transform:translate(-50%,-50%);transform-origin:center;width:60%}.film-content .images img:first-child{--offsetLeft:0rem;--offsetTop:-2rem;--rotate:-10deg}.film-content .images img:nth-child(2){--offsetLeft:-2rem;--offsetTop:1rem;--rotate:-11deg}.film-content .images img:nth-child(3){--offsetLeft:1rem;--offsetTop:1rem;--rotate:8deg}@media screen and (max-width:820px){.film-content{height:fit-content;padding:4rem 2rem}.film-content h2{font-size:var(--font-size-l);text-align:center}.film-content>div{flex-direction:column-reverse}.film-content .images{aspect-ratio:16/12;width:100%}.film-content .text{width:100%}.film-content h3{position:static;text-align:center;width:100%}}.about{background-color:#fff;display:flex;height:var(--fullscreen-height);width:100%}.about h2{font-size:var(--font-size-xl);font-weight:600}.about h2,.about h3,.about p{margin:0}.about>div{align-items:center;display:flex;justify-content:center;padding:4rem 8rem}.about>div>div{display:flex;flex-direction:column;gap:.7rem;width:100%}.about a{align-items:center;background-color:#000;color:#fff;display:flex;font-size:var(--font-size-xl);justify-content:start;padding:4rem;position:relative;width:100%}.about a span{left:0;line-height:1;margin:2rem;text-wrap:nowrap;top:0;transform:rotate(-90deg) translate(-100%);transform-origin:left top}.about a span,.about a:after{font-weight:600;position:absolute}.about a:after{bottom:2rem;content:"→";font-size:calc(var(--font-size-xl)*2);right:2rem;transition:transform .3s ease-in-out}.about a:hover:after{transform:rotate(-45deg)}@media screen and (max-width:820px){.about{flex-direction:column;height:fit-content}.about>div{padding:4rem 2rem}.about h2{font-size:var(--font-size-l)}.about h2,.about h3{text-align:center}.about a{align-items:start;box-sizing:border-box;font-size:var(--font-size-l);height:14rem;justify-content:start;padding:2rem;width:100%}.about a span{font-size:var(--font-size-m);margin:0;position:static;transform:none}.about a:after{bottom:2rem;font-size:calc(var(--font-size-l)*2);line-height:1;right:2rem}}.projects{background-color:#000;display:flex;height:100vh;width:100%}.projects .project{box-sizing:border-box;color:#fff;flex-grow:1;height:100%;padding:4rem 8rem;position:relative;text-align:center;transition:flex-grow .7s ease-in-out}.projects .project:hover{flex-grow:2}.projects:hover .project:not(:hover){flex-grow:0}.projects:hover .project:not(:hover) div{opacity:0;width:0}.projects .project div{bottom:4rem;left:50%;opacity:1;overflow:hidden;position:absolute;text-wrap:nowrap;transform:translate(-50%);transition:opacity .5s ease-in-out,width .5s ease-in-out;width:100%;z-index:1}.projects .project img{height:100%;left:0;max-height:100vh;object-fit:cover;position:absolute;top:0;user-select:none;width:100%}.projects ul{display:flex;flex-direction:row-reverse;gap:1rem;justify-content:center;list-style:none;margin:0;opacity:1;padding:0}.projects ul li{border:1px solid #fff;border-radius:1rem;padding:.3rem .5rem}@media screen and (max-width:820px){.projects{flex-direction:column;height:fit-content}.projects .project{height:90vh}.projects .project div,.projects:hover .project:not(:hover) div{opacity:1;width:100%}}.text-carousel{background-color:#000;height:60vh;overflow:hidden;position:relative;width:100%}.text-carousel #text-carousel-canvas{left:0;mix-blend-mode:lighten;pointer-events:none;position:absolute;top:0;z-index:2}.text-carousel .background{font-size:3rem;height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.text-carousel .background>div{display:flex;gap:1rem}.text-carousel .background>div:nth-child(2n){transform:translate(-10rem)}.text-carousel .background>div span{color:#fff;opacity:.1;transition:opacity 1s ease-in-out;user-select:none}.text-carousel .background>div span:hover{opacity:1;transition:opacity 0s ease-in-out}@keyframes carouselTextHover{0%{opacity:.1}to{opacity:1}}.services{background-color:#000;box-sizing:border-box;color:#fff;display:flex;gap:4rem;height:fit-content;padding:4rem 8rem;width:100%}.services>*{width:50%}.services h2{margin-top:0}.services ul{display:flex;flex-direction:column;gap:.2rem;list-style:none;margin:0;padding:0}.services ul li{font-size:var(--font-size-m);width:100%}.services ul li a{display:inline-block;position:relative;width:100%}.services ul li a:after{content:"→";font-size:var(--font-size-m);position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform .3s ease-in-out}.services ul li a:hover:after{transform:translateY(-50%) rotate(-45deg)}@media screen and (max-width:820px){.services{flex-direction:column;padding:4rem 2rem}.services>*{width:100%}.services ul li a:after{font-size:var(--font-size-l);right:0;top:50%}}section.contact{box-sizing:border-box;flex-grow:1;padding:4rem 8rem;position:relative;width:100%}section.contact a{align-items:center;aspect-ratio:7/2;background-color:#000;border-radius:100vw;color:#fff;display:block;display:flex;font-size:9vw;font-weight:600;height:100%;justify-content:center;width:100%}section.contact img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%;z-index:-2}@media screen and (max-width:820px){section.contact{padding:4rem 2rem}}
