:root{--black:#131313;--grey:#333;--blue:#43557A;--purple:#7a435f;--green:#437a63;--yellow:#437a63;--white:#f3f3f3;--font-size:18px;--spacing:2.5rem;--inner-spacing:1rem}
.grid{display:grid;min-width:0;grid-template-columns:1fr 1fr;grid-gap:var(--spacing)}.grid.no-gap{grid-gap:0}.grid.small-gap{grid-gap:calc(var(--inner-spacing) / 6)}.grid.two-columns{grid-template-columns:1fr 1fr}.grid.three-columns{grid-template-columns:1fr 1fr 1fr}.grid.four-columns{grid-template-columns:1fr 1fr 1fr 1fr}.grid.five-columns{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.grid.six-columns{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}.grid.columns{grid-template-columns:min-content}.grid.two-columns.one-quarter-left{grid-template-columns:1fr 3fr}.grid.two-columns.three-quarters-left{grid-template-columns:3fr 1fr}.grid.two-columns.one-third-left{grid-template-columns:1fr 2fr}.grid.two-columns.two-thirds-left{grid-template-columns:2fr 1fr}.grid.two-columns.one-sixth-left{grid-template-columns:1fr 5fr}.grid.three-columns.big-centre{grid-template-columns:1fr 50% 1fr}.grid.two-rows{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.grid.three-rows{grid-template-rows:1fr 1fr 1fr}.grid.four-rows{grid-template-rows:1fr 1fr 1fr 1fr}.grid.rows{grid-template-rows:min-content}.grid.two-rows.one-quarter-top{grid-template-rows:1fr 3fr}.grid.two-rows.three-quarters-top{grid-template-rows:3fr 1fr}.grid.two-rows.one-third-top{grid-template-rows:1fr 2fr}.grid.two-rows.two-thirds-top{grid-template-rows:2fr 1fr}.grid.three-rows.big-centre{grid-template-rows:1fr 50% 1fr}@media (max-width:768px){.grid.two-columns,.grid.three-columns,.grid.four-columns,.grid.five-columns,.grid.six-columns,.grid.two-columns.one-quarter-left,.grid.two-columns.three-quarters-left,.grid.two-columns.one-third-left,.grid.two-columns.two-thirds-left,.grid.two-columns.one-sixth-left,.grid.three-columns.big-centre{grid-template-columns:1fr}.grid.two-rows,.grid.three-rows,.grid.four-rows,.grid.two-rows.one-quarter-top,.grid.two-rows.three-quarters-top,.grid.two-rows.one-third-top,.grid.two-rows.two-thirds-top,.grid.three-rows.big-centre{grid-template-rows:1fr}}
*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:0;min-width:0;overflow-x:hidden}body{font-size:var(--font-size);background-color:var(--blue);background:linear-gradient(to bottom right,var(--blue),#939db3);transition:background-color 0.3s ease-in-out;color:var(--white);font-family:'Rubik',sans-serif;font-weight:300}p,ol,ul{line-height:1.6}body.white{background-color:var(--white);color:var(--black)}.container{width:90%;max-width:1300px;margin:0 auto}.container.content{padding:calc(var(--spacing) * 2) 0;text-shadow:rgba(0,0,0,0.25) 1px 1px 2px}canvas.background{position:fixed;top:0;left:0;width:100%;height:100%;max-width:100%;z-index:-1}h1,h2,h3,h4{font-family:'Raleway',sans-serif;font-weight:800}a,button[type="submit"],a.button,button{color:var(--purple);text-decoration:none;display:inline-block;background:linear-gradient( to bottom,var(--purple) 0%,var(--purple) 100% );background-position:0 100%;background-repeat:repeat-x;background-size:1px 1px;padding:0.25rem;margin-bottom:0.75rem;transition:all 0.2s ease-out;border:none}a:hover,button[type="submit"]:hover,a.button:hover,button:hover{background-size:1px 100%;color:var(--white)}a i:first-child,button i:first-child{margin-right:1rem}.cutout{background:url("https://media.giphy.com/media/3ohhwNqFMnb7wZgNnq/source.gif") no-repeat center center;-webkit-text-fill-color:transparent;text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-size:cover;position:relative;overflow:hidden}.reveal{position:relative;overflow:hidden;width:100%;height:5rem}.reveal span{position:absolute;top:0;left:0;transform:translateY(100%);transition:all 0.3s ease-in-out;opacity:0}.reveal span.active{transform:translateY(0);opacity:1}h1{color:#f3f3f3;margin:0;font-size:5rem}h2{font-size:4rem}h3{font-size:3rem}h4{font-size:2rem}img{transition:all 2s ease-out;transform:scale(1);opacity:1}img:not([src]){transition:all 2s ease-out;transform:scale(0.95);opacity:0}section,main,footer{}.follow-mouse{transition:transform 0.1s ease-out,background-size 0.2s ease-out}.hexagon{position:relative;display:flex;flex:1;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);margin:0 auto;padding-bottom:100%;transition:transform 0.1s ease-out;width:100%;cursor:pointer}@keyframes polygon{0%{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}100%{clip-path:polygon(50% 0%,100% 0%,100% 75%,100% 100%,0% 100%,0% 0%)}}.hexagon:hover{z-index:9;transform:scale(1.1)}.hexagon img{position:absolute;width:100%;height:100%;object-fit:cover;z-index:1}.hexagon .content{position:absolute;z-index:2;display:flex;width:100%;height:100%;background-color:rgba(0,0,0,0.5)}.hexagon .inner{position:absolute;z-index:2;display:flex;width:100%;height:100%;background-color:rgba(0,0,0,0.75);align-items:center;justify-content:center;text-align:center;font-size:1vw;backdrop-filter:grayscale(25%);transition:all 0.3s ease-out;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}.hexagon .inner:hover{background-color:rgba(0,0,0,0.4);backdrop-filter:grayscale(15%);text-shadow:rgba(0,0,0,0.5) 1px 1px}.hexagon .inner h3{font-size:2vw}@media (max-width:768px){.hexagon .inner h3{font-size:2rem}}@media (max-width:500px){.hexagon .inner h3{font-size:1.5rem}}@media (min-width:1600px){.hexagon .inner h3{font-size:2rem}}form.submitting button.submit{position:relative}form.submitting button[type="submit"]:after{content:'';position:absolute;width:1rem;height:1rem;border-radius:50px;border:3px solid rgba(0,0,0,0.25);border-top-color:rgba(255,255,255,0.75);animation:loading 1s linear infinite;right:1rem;top:1rem}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.contact .grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--spacing);width:100%}.contact label{margin-top:calc(var(--spacing) * 2);text-align:left}@media (max-width:768px){.contact label{margin-top:var(--spacing)}.contact .grid{grid-template-columns:1fr;grid-gap:0}}.contact .grid>div{display:flex;flex-direction:column;height:100%}.contact textarea{height:100%;scrollbar-width:tiny}
.swipe{width:100vw;min-height:100vh;height:100vh;overflow-y:auto;overflow-x:hidden;position:fixed;top:0;left:0;transform:translateX(-150vw);transition:transform 0.6s cubic-bezier(0.77,0,0.175,1);z-index:999;-webkit-backface-visibility:hidden;background-color:var(--blue);padding:var(--spacing)}.swipe:before{background-color:var(--green);content:'';width:100vw;height:100vh;display:block;position:absolute;top:0;left:0;z-index:-1;transform:translateX(50vw);transition:transform 0.6s cubic-bezier(0.77,0,0.175,1)}.swipe.active:before{transform:translateX(100vw)}.swipe.active{transform:translateX(0)}.swipe .close{color:#fff;cursor:pointer;position:absolute;top:1rem;right:var(--spacing);padding:0;border:none;background:none;font-size:var(--spacing)}.swipe .container p{max-width:60rem}@media (max-width:768px){.swipe h1{font-size:3rem}.swipe .close{right:var(--inner-spacing)}}
main#projects{display:grid;grid-template-columns:1fr 1fr 1fr;overflow:hidden;min-height:100vh;grid-gap:calc(var(--spacing) * 5)}section{width:100vw;max-width:100%}
#front{display:flex;align-items:start;justify-content:center;height:100vh;flex-direction:column;background:none;margin:0 var(--spacing)}#front h1{font-size:10rem}@media (max-width:560px){#front h1{font-size:4rem}#front h2.reveal{font-size:2rem;margin-bottom:0}}#front .reveal{margin:var(--spacing) 0}#front p{max-width:20rem}#front .button{background-color:var(--green);color:var(--white);display:block;padding:var(--spacing)}#services{background-color:var(--blue);background:var(--green);padding:calc(var(--spacing) * 2)}#services h2{margin-top:0;text-align:center}#services .grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:var(--spacing);max-width:1600px;margin:0 auto}#services .grid.middle{grid-template-columns:1fr 1fr;width:66%;max-width:1056px;margin:-5% auto}@media (min-width:1600px){#services .grid.middle{margin:-5rem auto}}@media (max-width:768px){#services .grid,#services .grid.middle{grid-template-columns:1fr;width:100%;margin:0}#services .grid + .grid{margin-top:var(--spacing)}}#build{padding:0.05rem var(--spacing) 0 var(--spacing);background:var(--white)}#build h2{font-size:7rem;margin-bottom:var(--spacing)}@media (max-width:768px){#build h2{font-size:5rem;margin-bottom:var(--spacing)}}#build a{display:inline-block;background-color:var(--black);color:var(--white);padding:var(--spacing);margin-bottom:calc( var(--spacing) * 2)}#ideas{background-color:var(--purple);padding:calc(var(--spacing) * 2)}#ideas a{border-top:var(--white) 1px solid;color:var(--white);border-bottom:none;background:none;display:grid;grid-template-columns:1fr calc(var(--spacing) * 3);position:relative;margin:0 auto;padding:var(--spacing);max-width:1200px;width:calc(100% - (var(--spacing) * 2));perspective:100px}#ideas a:hover{color:var(--white)}#ideas a:first-of-type{border-top:none}#ideas a:before{position:absolute;background-color:var(--black);width:100%;height:100%;top:0;left:0;content:'';z-index:0;box-shadow:rgba(0,0,0,0.25) 1.5rem 2.5rem 2.5rem;opacity:1;transition:all 0.2s ease-out}#ideas a:nth-child(1):hover:before{background-color:var(--blue)}#ideas a:nth-child(2):hover:before{background-color:var(--purple)}#ideas a:nth-child(3):hover:before{background-color:var(--green)}#ideas div{position:relative;z-index:1}#ideas a div:first-of-type{display:flex;flex-direction:column;justify-content:center}#ideas div h3:first-child{margin:0}#ideas div p:last-child{margin-bottom:0}#ideas div i{font-size:calc(var(--spacing) * 3)}@media (max-width:768px){#ideas{padding:calc(var(--spacing) * 2) 0}}@media (max-width:550px){#ideas a{grid-template-columns:1fr;text-align:center}#ideas a div:first-of-type{grid-row:2}#ideas div i{font-size:var(--spacing);margin-bottom:calc(var(--spacing) / 2)}}
form label{font-size:1.5rem;display:block;margin-top:calc(var(--spacing) * 2);margin-bottom:0.5rem;font-family:'Raleway',sans-serif}form input[name="email"]{display:none}form input,form textarea{font-family:'Raleway',sans-serif;width:100%;max-width:60rem;padding:0.5rem;background:none;border:none;border-bottom:rgba(0,0,0,0.25) 0.5rem solid;font-size:2.5rem;color:var(--green);transition:all 0.3s ease-out}form input:not(:placeholder-shown),form textarea:not(:placeholder-shown){border-bottom:var(--green) 0.5rem solid;color:var(--green)}form input:focus,form textarea:focus{border-bottom:var(--white) 0.5rem solid;color:var(--white);outline:none}form input::placeholder,form textarea::placeholder{color:rgba(0,0,0,0.05)}form button[type="submit"]{margin-top:calc(var(--spacing) * 2);margin-left:0.5rem;font-size:2rem;outline:rgba(0,0,0,0.25) 0.5rem solid;border:none;color:var(--white);text-align:center;padding:var(--spacing) calc(var(--spacing) * 2);font-family:'Raleway',sans-serif;background-size:1px 0;cursor:pointer}form .message:not(:empty){margin:calc(var(--spacing) * 2) 0 calc(var(--spacing) * 0.25) 0;background:var(--green);display:flex;justify-content:center;padding:0 var(--spacing)}form .message.error:not(:empty){background:var(--purple)}form.submitting button[type="submit"]:after{top:calc(50% - 0.5rem) !important}@media (max-width:768px){form label{margin-top:var(--spacing);font-size:1.5rem}form input,form textarea{font-size:2rem}form button[type="submit"]{margin-top:var(--spacing)}}
footer{padding:5rem;background-color:var(--white);color:var(--black);display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:calc(var(--spacing) * 2);font-size:0.75rem;position:relative;overflow:hidden}footer:before{content:'';display:block;width:100%;height:calc(var(--spacing) * 2);background-color:pink;position:absolute;top:0;left:50%;border-radius:100%;transform:translateX(-50%) translateY(-100%);box-shadow:rgba(0,0,0,0.5) 0 0 var(--spacing)}@media (max-width:768px){footer{grid-template-columns:1fr}}footer div{border-top:var(--blue) 1px solid;padding-top:calc(var(--spacing) / 2)}