@charset "utf-8";
/* CSS Document */

@import url("https://use.typekit.net/bxl5esk.css");

@font-face {
    font-family: 'Diatype Pre';
    src: url('fonts/DiatypePre-Medium.eot');
    src: url('fonts/DiatypePre-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/DiatypePre-Medium.woff2') format('woff2'),
        url('fonts/DiatypePre-Medium.woff') format('woff'),
        url('fonts/DiatypePre-Medium.ttf') format('truetype'),
        url('fonts/DiatypePre-Medium.svg#DiatypePre-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root{
    --primary-color:#ED2024;
    --column-width:calc((100vw - 40px*13)/12);
}

.columns-guide{width:100%;position:fixed;height:100%;top:0;left:0;z-index:100;pointer-events:none;grid-template-rows:1fr}

*{outline:none;margin:0;padding:0;box-sizing:border-box;font-size:inherit;line-height:inherit;letter-spacing:.5px}
body{font-family:'Diatype Pre';font-weight:500;-webkit-font-smoothing:antialiased!important;font-smoothing:antialiased!important;overflow-x:hidden;position:relative;margin:0 auto;font-size:20px;line-height:24px;background-color:var(--primary-color);color:var(--primary-color)}
body.scroll-disabled{overflow:hidden!important;overflow-x:hidden;-webkit-overflow-scrolling:touch}

h1,h2,h3,h4,h5{font-weight:500;font-size:inherit}
p{font-size:inherit}
p a{display:inline;text-decoration:underline}
a{cursor:pointer;text-decoration:none;color:inherit;font-size:inherit;display:block}
li{list-style:none}
img{width:100%;display:block}
video{position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:1}
video.hovered{opacity:1}

.fs-l{font-size:50px;line-height:54px}
.fs-m{font-size:30px;line-height:34px}
.uppercase{text-transform:uppercase}
.underlined{text-decoration:underline}
.background-primary{background-color:var(--primary-color)}
.background-white{background-color:#FFF}
.color-primary{color:var(--primary-color)}
.color-black{color:#000}
.color-white{color:#FFF}
.display-table{display:table}
.display-block{display:block}
.display-inline{display:inline}
.ta-left{text-align:left}
.ta-right{text-align:right}
.ta-center{text-align:center}
.no-padding{padding:0!important}
.padding-top-10{padding-top:10px}
.padding-vertical-10{padding-top:10px!important;padding-bottom:10px!important}
.padding-vertical-20{padding-top:20px!important;padding-bottom:20px!important}
.padding-vertical-40{padding-top:40px!important;padding-bottom:40px!important}
.margin-top-20{margin-top:20px}
.margin-top-40{margin-top:40px}
.margin-top-80{margin-top:80px}
.margin-top-120{margin-top:120px}
.margin-top-200{margin-top:200px}
.margin-top-header{margin-top:134px}
.margin-bottom-40{margin-bottom:40px}
.margin-bottom-80{margin-bottom:80px}
.margin-bottom-120{margin-bottom:120px}
.margin-bottom-200{margin-bottom:200px}
.margin-right-40{margin-right:40px}
.margin-left-40{margin-left:40px}
.margin-centered{margin:0 auto}
.column-gap-40{column-gap:40px!important}
.row-gap-10{row-gap:10px!important}
.row-gap-40{row-gap:40px!important}
.row-gap-120{row-gap:120px!important}
.grid-gap-40{grid-gap:40px!important}
.border-top{border-top:2px solid}
.border-bottom{border-bottom:2px solid}
.height-svh{height:100svh}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.p-columns-2{columns:2}
.height-100{height:100%}
.btn-mute{position:absolute;z-index:12;bottom:40px;left:50%;transform:translateX(-50%)}
.btn-fullscreen{position:absolute;z-index:12;bottom:20px;left:50%;transform:translateX(-50%);display:none}

.hover-opacity:hover{cursor:pointer;opacity:.7}

.position-relative{position:relative}
.position-sticky{position:sticky}

.display-flex{display:flex}
.space-between{justify-content:space-between}
.centered{justify-content:center;align-items:center}
.align-bottom{margin-top:auto}
.flex-vertical{flex-direction:column}

.grid{display:grid;justify-content:center;width:100%;grid-template-columns:repeat(12, 1fr);padding:0 40px}
.grid.no-padding{padding-left:0;padding-right:0}
.grid > *{grid-column-end:span 12}
.fit-content{height:fit-content}
.align-center{align-content:center;align-items:center;justify-items:center}
.align-end{align-items:end}
.align-start{align-items:start}

.grid .c-1{grid-column-end:span 1}
.grid .c-1  > *{grid-column-end:span 1}
.grid .c-2{grid-column-end:span 2}
.grid .c-2  > *{grid-column-end:span 2}
.grid .c-3{grid-column-end:span 3}
.grid .c-3  > *{grid-column-end:span 3}
.grid .c-4{grid-column-end:span 4}
.grid .c-4  > *{grid-column-end:span 4}
.grid .c-5{grid-column-end:span 5}
.grid .c-5 > *{grid-column-end:span 5}
.grid .c-6{grid-column-end:span 6}
.grid .c-6 > *{grid-column-end:span 6}
.grid .c-7{grid-column-end:span 7}
.grid .c-7 > *{grid-column-end:span 7}
.grid .c-8{grid-column-end:span 8}
.grid .c-8 > *{grid-column-end:span 8}
.grid .c-9{grid-column-end:span 9}
.grid .c-9 > *{grid-column-end:span 9}
.grid .c-10{grid-column-end:span 10}
.grid .c-10 > *{grid-column-end:span 10}
.grid .c-11{grid-column-end:span 11}
.grid .c-11 > *{grid-column-end:span 11}
.grid .c-12{grid-column-end:span 12}
.grid .c-12 > *{grid-column-end:span 12}

.grid .p-1{grid-column-start:1}
.grid .p-2{grid-column-start:2}
.grid .p-3{grid-column-start:3}
.grid .p-4{grid-column-start:4}
.grid .p-5{grid-column-start:5}
.grid .p-6{grid-column-start:6}
.grid .p-7{grid-column-start:7}
.grid .p-7{grid-column-start:8}
.grid .p-7{grid-column-start:9}
.grid .p-7{grid-column-start:10}
.grid .p-7{grid-column-start:11}
.grid .p-7{grid-column-start:12}

.grid.columns-2{grid-template-columns:repeat(2, 1fr);padding:0}
.grid.columns-2 > *{grid-column-end:span 1}
.grid.columns-2 .c-2{grid-column-end:span 2}

.grid.columns-8{grid-template-columns:repeat(8, 1fr);padding:0}
.grid.columns-8 > *{grid-column-end:span 1}
.grid.columns-8 > .c-2{grid-column-end:span 2}
.grid.columns-8 > .c-6{grid-column-end:span 6}

.thumb{background-color:transparent;position:relative}
.aspect{opacity:0;visibility:hidden}
.lazy{opacity:0;visibility:hidden;transition:opacity .3s ease, transform .1s ease;transform:translateY(20px)}
.lazy.visible{opacity:1;visibility:visible;transform:translateY(0)}
.lazy.overlay:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:#00000020;pointer-events:none}
.lazy-img-wrapper{position:relative;overflow:hidden;background:var(--primary-color);transition:background .1s ease}
.lazy-img-wrapper .img{position:absolute;top:0;left:0;bottom:0;width:100%;opacity:0;transition:opacity .1s ease;background-position:center;background-size:cover;background-repeat:no-repeat;height:100%;object-fit:cover}
.lazy-img-wrapper iframe{position:absolute;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);opacity:0;transition:opacity .1s ease;object-fit:cover;z-index:1}
.lazy-img-wrapper.loaded{background-color:transparent}
.lazy-img-wrapper.loaded .img{opacity:1}
.lazy-img-wrapper.played iframe{opacity:1}

.video-wrapper{padding:0;width:100%;height:100%;overflow:hidden;position:relative;background-position:center;background-size:cover}
.video-wrapper.height-svh{height:100svh}
.video-wrapper .video-iframe{width:100%;height:100%}
.video-wrapper iframe{box-sizing:border-box;width:177.77777778vh;height:56.25vw;min-width:100%;min-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(1.01);opacity:0;transition:opacity 1s ease;transition-delay:1s;object-fit:cover}
.c-6 .video-wrapper iframe{width:calc(177.77777778vh / 2);height:calc(56.25vw / 2)}
.video-wrapper .aspect{opacity:0;visibility:hidden}
.video-wrapper.played iframe{opacity:1;pointer-events:none}
.video-wrapper .video-content{position:absolute;left:40px;bottom:40px;z-index:2;width:calc(100% - 80px)}
.projects li{position:relative}
.projects li .overlay{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;background:#00000030;opacity:0;pointer-events:none;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);-moz-backdrop-filter:blur(30px);-ms-backdrop-filter:blur(30px);transition:opacity .1s ease}
.projects li.blured .overlay{opacity:1}
.projects a{position:relative}
.projects a:hover .video-wrapper .video-content{color:var(--primary-color)}

.modal{background:#00000030;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);-moz-backdrop-filter:blur(40px);-ms-backdrop-filter:blur(40px);width:100vw;height:100vh;position:fixed;left:0;z-index:10;top:0;transition:opacity .2s ease;overflow:auto;opacity:0;visibility:hidden}
.modal-opened .modal{opacity:1;visibility:visible}
.modal .content{margin:40px 0;height:calc(100% - 160px);overflow:auto}

.banner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:102;opacity:0;pointer-events:none;transition:opacity .3s ease}
.banner-visible .banner{;opacity:1;pointer-events:all;transition:none}
.banner .content-wrapper{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--banner-rotation));width:33vw}
.banner .content-wrapper.square{width:30vw}
.banner .content-wrapper.portrait{width:26vw}
.banner .content-wrapper .btn-banner{position:absolute;top:0;right:0;padding:20px;z-index:1}
.banner .content-wrapper .content{width:100%;height:100%}
/*.banner .content-wrapper .content:not([href]){pointer-events:none}
.banner .content-wrapper .content .img{grid-column-start:1;grid-column-end:span 1;grid-row-start:1;grid-row-end:span 2;padding-bottom:20px}
.banner .content-wrapper .content .img img{max-width:100%;max-height:100%;width:auto}
.banner .content-wrapper .content .text{grid-column-start:1;grid-column-end:span 2;grid-row-start:3;align-content:flex-end;overflow:hidden}
.banner .content-wrapper .aspect{padding:33%}*/

.master-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-position:center;background-repeat:no-repeat;background-size:cover;z-index:-1}
.master-background .content-background{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}

.master-wrapper{width:100%;position:relative}

header.master{position:fixed;padding:40px;top:-20px;left:0;width:100%;z-index:100;animation:header .3s ease;animation-fill-mode:forwards}
@keyframes header{from{top:-20px}to{top:0px}}
.modal-opened header.master{display:none}
header.master .logotype{width:360px;transform:translateY(-5px)}
header.master nav.master ul{opacity:0;pointer-events:none;transform:translateX(20px);transition:all .3s ease}
.menu-opened header.master nav.master ul{opacity:1;pointer-events:all;transform:translateX(0)}
header.master nav.master .btn-menu{width:40px;height:40px;margin-top:-5px;transform:rotate(0);transition:transform .3s ease}
.menu-opened header.master nav.master .btn-menu{transform:rotate(45deg)}

main{width:100%;position:relative;padding:40px}

section{padding:0 40px}
section.no-padding{padding-left:0;padding-right:0}
section.full-height{height:100svh;margin-bottom:0}

.projects-nav{position:fixed;left:0;bottom:40px;z-index:1}
.project-info > *{position:fixed;bottom:40px;z-index:11}
.project-info > h1{left:40px}
.project-info > a{right:40px}

.index li.more{background:#00000030;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);-moz-backdrop-filter:blur(30px);-ms-backdrop-filter:blur(30px);transition:all .1s ease;position:relative;padding:20px 40px}
.index li a{background:#00000030;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);-moz-backdrop-filter:blur(30px);-ms-backdrop-filter:blur(30px);transition:all .1s ease;position:relative}
.index li a:hover{color:var(--primary-color);border-color:#FFF}
.page-index .index li a:hover{background:#00000000;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);-moz-backdrop-filter:blur(0);-ms-backdrop-filter:blur(0)}

footer.master{background-color:#FFF}

.page-home .lazy{transform:translateY(0px)}

.page-about header.master{position:absolute}
.page-index header.master{background:#00000030;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);-moz-backdrop-filter:blur(30px);-ms-backdrop-filter:blur(30px);position:static}
.page-news header.master{background:#00000030;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);-moz-backdrop-filter:blur(30px);-ms-backdrop-filter:blur(30px);position:static}
.page-news .index li a:hover .ellipsis{white-space:normal}

@media (max-aspect-ratio: 2/3) {
  .page-home .video-iframe.mobile iframe{width:56.25vh;height:177.77777778vw}
}

@media screen and (min-width: 1560px){
    body{font-size:26px;line-height:30px}
    .fs-l{font-size:64px;line-height:68px}
    .fs-m{font-size:40px;line-height:44px}

    .banner .content-wrapper{width:30vw}
    .banner .content-wrapper .content{grid-template-rows:1fr 1fr 120px}

    header.master .logotype{width:400px}
}

@media (max-width: 1340px){
    .fs-l{font-size:36px;line-height:40px}

    .banner .content-wrapper{width:40vw}

    header.master .logotype{width:240px}
    header.master nav.master .btn-menu{width:30px;height:30px}
}

@media (max-width: 1024px){
    body{font-size:14px;line-height:18px}
    .fs-l{font-size:24px;line-height:28px}
    .fs-m{font-size:18px;line-height:21px}

    .margin-top-200{margin-top:120px}
    .margin-top-120{margin-top:80px}
    .margin-top-30{margin-top:0}

    .banner .content-wrapper{width:50vw}
    .banner .content-wrapper .content{grid-template-rows:1fr 1fr 72px}

    header.master .logotype{width:160px;transform:translateY(-2px)}
    header.master nav.master .btn-menu{width:24px;height:24px}
}

@media (max-width: 780px){
    .padding-vertical-40{padding-top:20px!important;padding-bottom:20px!important}
    .margin-top-40{margin-top:20px}
    .margin-bottom-40{margin-bottom:20px}
    .margin-bottom-120{margin-bottom:60px}
    .margin-top-200{margin-top:0}
    .mobile-margin-top-20{margin-top:20px!important}
    .mobile-margin-top-40{margin-top:40px!important}
    .border-top{border-top:1px solid}
    .border-bottom{border-bottom:1px solid}
    .padding-vertical-20{padding-top:10px!important;padding-bottom:10px!important}

    .grid{grid-template-columns:repeat(1, 1fr);padding:0 20px}
    .grid > *{grid-column-end:span 1!important;grid-column-start:1!important}
    .grid.columns-2 .c-2{grid-column-end:span 2!important}
    .grid.columns-8{grid-template-columns:repeat(1, 1fr)}
    .grid.columns-8 > *{grid-column-end:span 1}
    .grid.columns-8 .c-2{grid-column-end:span 1}
    .grid.columns-8 .c-6{grid-column-end:span 1}
    .grid-gap-40{grid-gap:20px!important}
    .column-gap-40{column-gap:20px!important}
    .row-gap-40{row-gap:20px!important}

    .modal .content{margin:20px 0;height:calc(100% - 90px);display:flex;flex-direction:column;justify-content:flex-start}

    .banner .content-wrapper{width:60vw}

    .video-wrapper.height-svh{height:auto}
    .video-wrapper .video-content{left:20px;bottom:20px;width:calc(100% - 40px)}
    .c-6 .video-wrapper iframe{width:177.77777778vh;height:56.25vw}

    header.master{padding:20px}
    .menu-opened header.master{background:#00000030;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);-moz-backdrop-filter:blur(30px);-ms-backdrop-filter:blur(30px);padding-bottom:125px}
    header.master nav.master ul{position:fixed;flex-direction:column;top:60px;left:0;row-gap:5px;z-index:101;transform:translateX(0px);width:100%;padding:0 20px}

    .projects-nav{display:none}
    .project-info > *{bottom:20px}
    .project-info > h1{left:20px}
    .project-info > a{right:20px}
    .btn-mute{bottom:20px}

    .index li a{grid-template-columns:repeat(4, 1fr)}
    .index li a > *{grid-column-start:initial!important}
    .index li.more{padding:10px 20px}

    footer.master{padding:0 20px;row-gap:20px}
    footer.master .margin-top-40{margin-top:0}

    .page-work .height-svh{height:auto}

    .page-about .height-svh{height:auto}
    .page-about .staff > .grid{grid-template-columns:repeat(2, 1fr)!important}
    .page-about .staff > .grid > *{grid-column-end:span 2!important;grid-column-start:1!important}
    .page-about .staff > .grid > .c-3{grid-column-end:span 1!important;grid-column-start:auto!important}

    .page-index .index li a :nth-child(1){grid-column-end:span 1!important}
    .page-index .index li a :nth-child(2){grid-column-end:span 2!important}
    .page-index .index li a :nth-child(3){display:none}
    .page-index .index li a :nth-child(4){grid-column-end:span 1!important}

    .page-news .index li a :nth-child(1){grid-column-end:span 1!important}
    .page-news .index li a :nth-child(2){grid-column-end:span 1!important}
    .page-news .index li a :nth-child(3){grid-column-end:span 2!important}
}

@media (max-width: 540px){
    body{font-size:12px;line-height:16px}
    .fs-m{font-size:12px;line-height:16px}

    .row-gap-40{row-gap:20px!important}

    .banner .content-wrapper{width:80vw}
    .banner .content-wrapper .content{grid-template-rows:1fr 1fr 64px}

    .btn-mute{display:none}
    .btn-fullscreen{display:block}
}

@media (max-width: 360px){
    .banner .content-wrapper{width:90vw}
}