:root {
    --main-size: max(.8rem + .19vw, 15px);
    --text-size: 1.625rem;
    --text-size: max(1rem + .577vw, 19px);
    --h2-size: 5.93759rem;
    --h2-size: clamp(40px, 1rem + 4.575vw, 120px);
    --project-title-size: calc(var(--text-size) * 2.3);
    --main-bg-color: #F0EFE8;
    --weak-color: #8D8B7C;
    --weak-border-color: #D2D1C8;
    --color: #F95743;
    --main-h-padding: 3.3vw;
    --main-gap: min(2.5vw, 3.5rem);
    --plyr-color-main: var(--color);
    --plyr-badge-background: black;
    --plyr-badge-text-color: white;
    --plyr-video-control-color: white;
    --plyr-video-control-color-hover: var(--main-bg-color);
    --plyr-audio-controls-background: var(--main-bg-color);
    --plyr-audio-control-color: black;
    --plyr-audio-control-color-hover: var(--main-bg-color);
    --plyr-audio-range-track-background: black;
    --plyr-control-radius: 50%;
}

@font-face {
    font-family: "Apfel Grotezk";
    src: url("fonts/ApfelGrotezk-Regular.woff2") format("woff2");
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
}

html.js body {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

html.no-click,
html.no-click .article-controls,
html.no-click .article-controls *,
html.no-click .article-controls-content h2 {
    pointer-events: none !important;
}


img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

#root,
#__next {
    isolation: isolate;
}

/*
  END Josh's Custom CSS Reset
*/

html {
    font-size: 1em;
}

body {
    font-family: "Apfel Grotezk", Helvetica, Arial, sans-serif;
    font-size: var(--main-size);
    line-height: 1.4;
    color: black;
    background-color: var(--main-bg-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-x: clip;
}

html.in-backend body {
    min-height: 0 !important;
}

.page-content {
    color: black;
    background: var(--main-bg-color);
    padding: 4rem var(--main-h-padding) 7rem;
    position: relative;
    z-index: 50;
}

[data-tpl="projects"] .page-content {
    background: linear-gradient(0deg, var(--main-bg-color) 0%, var(--main-bg-color) calc(100% - 15vw), #f0efe800 100%);
    min-height: 200vh;
}

[data-tpl="basic-page"] .page-content {
    margin-top: 10rem !important;
}

html.in-backend .page-content {
    margin-top: 0 !important;
}

.content-header {
    padding: 4rem var(--main-h-padding);
    height: min(100vh, 65vw);
    top: 0;
}

#main-content {
    flex-grow: 1;
}

#main-header {
    display: flex;
    justify-content: end;
    padding: 2rem var(--main-h-padding) 1.6rem;
    z-index: 100;
    top: 0;
    position: relative;
    background-color: var(--main-bg-color);
}

html:not(.content-scrolled) #main-header {
    background-color: transparent !important;
}

#main-footer {
    padding: 1.5em var(--main-h-padding);
    color: black;
    background-color: var(--main-bg-color);
    box-shadow: 0px 100vh 0 100vh var(--main-bg-color);
    position: relative;
    z-index: 50;
    display: flex;
    justify-content: space-between;
}

.footer-links,
.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.footer-links a {
    text-decoration: none;
}

@media (hover: hover) {
    .footer-links a:hover {
        color: var(--color)
    }

    .footer-links a.email-link:hover {
        text-decoration: underline;
    }
}

.content-header,
#main-header {
    position: fixed;
    width: 100%;
}

.content-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.content-header .headline {
    /*transition: translate .4s ease-out;*/
    will-change: opacity;
    transition: opacity .4s ease-out;
}

html.body-scrolled .content-header .headline {
    /*translate: -120vw 0;*/
    opacity: 0;
}

button {
    all: unset;
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
}

h1,
.h1,
h2,
.h2 {
    font-size: var(--h2-size);
    line-height: 0.969;
}

h3,
.h3,
.text,
.pg-text,
.pg-editor {
    font-size: var(--text-size);
    line-height: 1.269;
}

.project-title {
    font-size: var(--project-title-size);
    translate: 0 -.2em;
}

.text strong,
.credits strong {
    color: var(--weak-color);
    font-weight: inherit;
}

.grid-row.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-row.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-row.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-row.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-row.cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-row {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(1, 1fr);
}

.credits-row {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(4, 1fr);
}

.credits-row>*:nth-child(n+5) {
    border-top: 1px solid var(--weak-border-color);
    padding-top: 2em;
}

small,
.small {
    font-size: .7rem;
}

a {
    color: inherit;
}

header a {
    color: inherit;
    text-decoration: inherit;
    will-change: color;
    transition: color .25s ease;
}

nav a.active {
    color: var(--color);
}

[data-tpl="home"] #main-logo {
    pointer-events: none;
}

.text p {
    margin-bottom: 1em;
}

.logo svg * {
    fill: black;
    stroke: black;
    will-change: fill;
    will-change: stroke;
    transition: fill .25s ease, stroke .25s ease;
}

.thumb-img {
    width: 100%;
}

.lazyload,
.lazyloading {
    opacity: 0;
}

.lazyload {
    will-change: opacity;
}

.project-thumb:has(img.lazyload),
.project-thumb:has(img.lazyloading) {
    opacity: 0;
}

.project-thumb {
    will-change: opacity;
    transition: opacity .25s ease-in;
}

.project-thumb.lazyloaded {
    opacity: 1;
}

.project-thumb-image img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1.74444;
}

[data-tpl="directors"] .project-thumb-image img {
    aspect-ratio: 3.3;
}

.project-thumb-image {
    position: relative;
}

.project-thumb-image,
.director-thumb-image {
    margin-bottom: 1.25rem;
}

.project-thumb a,
.director-thumb a {
    color: inherit;
    text-decoration: inherit;
}

.director-thumb .thumb-video video {
    object-fit: cover;
    object-position: center;
    height: 100%;
}

.topnav {
    display: flex;
    justify-content: flex-end;
    gap: 2em;
}

.home-header {
    margin-bottom: 10rem;
}

.home-header .home-video {
    position: relative;
    display: block;
}

#home-anim {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#home-anim svg {
    object-fit: contain;
    max-width: 20%;
    object-position: center;
    fill: white;
}

#home-anim svg * {
    fill: white;
    stroke: white;
}

[data-tpl="about"] .page-content {
    margin-top: min(100vh, 65vw);
    background-color: var(--main-bg-color);
}

[data-tpl="home"] .page-content {
    margin-top: 18rem;
}

[data-tpl="contact"] .page-content {
    margin-top: 18rem;
    background-color: transparent;
}

[data-tpl="project"] .page-content {
    margin-top: 50vw;
    background-color: var(--main-bg-color);
    padding-bottom: 0;
}

[data-tpl="projects"] .page-content,
[data-tpl="sound"] .page-content {
    margin-top: min(100vh - 4rem, 65vw);
    padding-top: 0;
}

[data-tpl="sound"] .page-content {
    background-color: var(--main-bg-color);
}

[data-tpl="directors"] .page-content {
    margin-top: min(100vh - 4rem, 65vw);
    background-color: black;
    padding-top: 0;
}

[data-tpl="projects"] .content-header,
[data-tpl="sound"] .content-header,
[data-tpl="directors"] .content-header {
    height: min(100vh - 3rem, 65vw);
}

[data-tpl="about"] #main-header,
[data-tpl="contact"] #main-header,
html.content-scrolled[data-tpl="contact"] #main-header {
    color: black;
    background-color: var(--color);
}

[data-tpl="about"] .content-header {
    background-color: var(--color);
    color: white;
}

html.content-scrolled[data-tpl="about"] #main-header {
    background-color: var(--main-bg-color);
}

html.content-scrolled[data-tpl="about"] #main-header .active {
    color: var(--color);
}

[data-nav="white"]:not(.content-scrolled) #main-header {
    color: white;
}

[data-nav="white"]:not(.content-scrolled) #main-header .logo svg *,
[data-tpl="directors"] #main-header .logo svg * {
    fill: white;
    stroke: white;
}

[data-tpl="directors"] #main-footer svg * {
    stroke: white;
}

[data-tpl="contact"] .topnav a.active,
html.content-scrolled[data-tpl="contact"] .topnav a.active {
    color: white;
}

[data-tpl="project"][data-active-nav="not-color"]:not(.content-scrolled) .topnav a.active {
    color: white;
}

[data-tpl="project"][data-nav="white"][data-active-nav="not-color"]:not(.content-scrolled) .topnav a.active {
    color: black;
}

[data-tpl="contact"] #main-footer #subscribe-input {
    color: white;
}

@media (hover: hover) {

    .topnav a:hover {
        color: var(--color);
    }

    [data-tpl="project"][data-active-nav="not-color"] .topnav a:hover {
        color: white;
    }

    [data-tpl="project"][data-nav="white"][data-active-nav="not-color"]:not(.content-scrolled) .topnav a:hover {
        color: black;
    }

    .topnav:has(a:not(.active):hover) a.active {
        color: inherit !important;
    }

    [data-tpl="contact"] .topnav a:hover,
    html.content-scrolled[data-tpl="contact"] .topnav a:hover {
        color: white;
    }

    [data-tpl="contact"] #main-footer a:hover {
        color: white;
    }

    [data-tpl="contact"] #main-footer #subscribe-submit:hover {
        color: white;
    }
}

[data-tpl="contact"] #main-footer {
    background-color: var(--color);
}

[data-tpl="directors"] body,
[data-tpl="directors"] #main-footer,
[data-tpl="directors"] #main-header,
html.content-scrolled[data-tpl="directors"] #main-header {
    background-color: black;
    color: white;
}

[data-tpl="directors"] #main-header .logo svg *,
html.content-scrolled[data-tpl="directors"] #main-header .logo svg * {
    fill: var(--main-bg-color);
}

[data-tpl="directors"] #main-footer {
    box-shadow: 0px 100vh 0 100vh black;
}

[data-tpl="directors"] .page-content {
    color: white;
}

[data-tpl="directors"] .topnav a.active,
html.content-scrolled[data-tpl="directors"] .topnav a.active {
    color: var(--color);
}

@media (hover: hover) {

    [data-tpl="directors"] .topnav a:hover,
    html.content-scrolled[data-tpl="directors"] .topnav a:hover {
        color: var(--color);
    }
}

#main-header {
    will-change: top;
    transition: top .6s ease, background-color .6s ease;
}

html.scrolling-down #main-header {
    opacity: 0;
}

html.body-scrolled #main-header {
    opacity: 1;
}

html.body-scrolled.scrolling-down:not(.menu-open) #main-header {
    top: -5.5rem;
}

html.content-scrolled #main-header .logo svg * {
    fill: black;
}

[data-tpl="about"] .topnav a.active {
    color: white;
}

@media (hover: hover) {

    [data-tpl="about"] .topnav a:hover {
        color: white;
    }
}

.headline {
    max-width: 90%;
}

.projects-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--main-gap);
    grid-row-gap: 7rem;
    margin-bottom: 2rem;
}

.project-header {
    grid-column-gap: var(--main-gap);
}

.thumb-tags,
.about-list-title {
    color: var(--weak-color);
}

.pg-item.project-thumb {
    /* grid-column-start: auto; */
    grid-row-start: auto;
    padding: 0;
}

.director-collapse {
    overflow-y: hidden;
    will-change: opacity, max-height;
    transition: max-height .35s ease-in, opacity .35s ease-in;
}

.director-thumb:not(.showing) .director-collapse {
    max-height: 0 !important;
    opacity: 0;
}

.director-thumb {
    margin-bottom: 10rem;
    scroll-margin-top: 10rem;
}

.director-thumb-info {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 3fr;
    margin-top: 1.25rem;
    scroll-margin-top: 10rem;
}

.director-thumb-more-info {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 2fr;
}

.director-thumb-portrait {
    margin-top: 0.5rem;
}

.director-thumb-text {
    padding-right: 10%;
}

.director-thumb-links {
    margin-top: 2rem;
    gap: 1em;
    display: flex;
}

.director-thumb-links a {
    will-change: color;
    transition: color .25s ease;
}

@media (hover: hover) {
    .director-thumb-links a:hover {
        color: var(--weak-color);
    }
}

[data-tpl="about"] .page-content>section {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
}

[data-tpl="about"] .page-content>section>.span-width {
    grid-column: 1 / 3;
}

[data-tpl="about"] .page-content>section>.to-right {
    grid-column: 2 / 3;
}

[data-tpl="about"] .page-content>.basic-block:not(:first-child),
[data-tpl="about"] .page-content>.team-block:not(.with-image) {
    border-top: 1px solid;
    margin-top: 2rem;
    padding-top: 2rem;
}

.about-slogan .h2 {
    color: var(--color);
    width: 75%;
    margin-top: 5rem;
    grid-column: 1 / 3;
}

.awards-content .text {
    grid-column-start: 2;
}

.about-logos {
    background-color: white;
}

[data-tpl="about"] .page-content {
    padding: 0 0 7rem;
}

[data-tpl="about"] .page-content>section {
    padding: 3rem var(--main-h-padding);
}

[data-tpl="about"] .page-content>section:first-child {
    padding-top: 4rem;
}

[data-tpl="about"] .page-content>section.about-logos {
    padding-top: 6rem;
}

[data-tpl="about"] .page-content>section.about-awards {
    padding-top: 5rem;
}

[data-tpl="contact"] h2 {
    color: white;
    margin-bottom: 4rem;
}

[data-tpl="contact"] #main-content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: var(--main-gap);
    padding: 4rem var(--main-h-padding);
}

[data-tpl="contact"] .page-content {
    grid-column-start: 2;
    padding: 0;
}

.contact-columns .grid-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logos-area {
    padding: 4rem 0;
}

.awards-area {
    padding: 4rem 0;
}

.team-people {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: var(--main-gap);
    grid-row-gap: 6rem;
    margin-bottom: 8rem;
}

.team-photo {
    margin-bottom: 1rem;
}

.button-wrap {
    display: flex;
    align-items: center;
}

.button-arrow {
    display: inline-flex;
    text-decoration: none;
    gap: .75em;
    align-items: center;
    margin: 1em 0;
}

.button-arrow .svg-wrap,
.button-plus .svg-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.35em;
    height: 2.35em;
    border-radius: 50%;
    border: 1px solid var(--weak-border-color);
    will-change: border-color;
    transition: border-color .25s ease;
    position: relative;
    z-index: 1;
}

.button-arrow svg,
.button-plus svg {
    width: .8em;
    height: .8em;
    will-change: fill;
    transition: fill .25s ease;
}

.button-arrow svg :is(path, line),
.button-plus svg :is(path, line) {
    will-change: stroke;
    transition: stroke .25s ease;
    stroke-width: 1px;
}

.button-arrow.arrow-back svg {
    rotate: 180deg;
}

.button-arrow .button-text {
    pointer-events: none;
}

@media (hover: hover) {

    .button-arrow:not(.open):hover span,
    .button-plus:not(.open):hover span {
        border-color: var(--color);
    }

    .button-arrow:not(.open):hover svg :is(path, line),
    .button-plus:not(.open):hover svg :is(path, line) {
        stroke: var(--color);
    }

    .button-arrow.open span:hover,
    .button-plus.open span:hover {
        border-color: var(--color);
    }

    .button-arrow.open span:hover svg :is(path, line),
    .button-plus.open span:hover svg :is(path, line) {
        stroke: var(--color);
    }
}

.succcess-message {
    color: var(--color);
}

.projects-button {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    grid-column: 1 / -1;
}

.sounds-list .projects-button {
    margin-top: 3rem;
}

.projects-button-links {
    display: inline-block;
    vertical-align: middle;
}

.projects-button-links a {
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    max-width: 0;
    opacity: 0;
    will-change: opacity, translate;
    transition: all .3s ease-out, opacity .2s ease;
    pointer-events: none;
    translate: .35em 0;
    translate: -30em 0;
}

.button-wrap .button-text {
    display: inline-block;
    white-space: nowrap;
    will-change: max-width, translate;
    transition: all .6s ease-out, opacity .2s ease-out;
    max-width: 15em;
    pointer-events: none;
}

.projects-button .button-wrap {
    position: relative;
}

.projects-button.home-button .button-wrap:after {
    content: "";
    position: absolute;
    background: var(--main-bg-color);
    top: 0;
    bottom: 0;
    left: -40em;
    right: calc(100% - .5em);
    z-index: 0;
}

.projects-button .button-arrow {
    z-index: 1;
}

.projects-button .button-arrow .svg-wrap {
    background: var(--main-bg-color);
}

.projects-button-links {
    display: flex;
    gap: 0rem;
    will-change: gap;
    transition: all .6s ease-out;
}

.toggle-project-links .button-text {
    z-index: -1;
}

.toggle-project-links.open+.projects-button-links a {
    max-width: 15em;
    opacity: 1;
    translate: 0 0 !important;
    text-decoration: none;
    pointer-events: all;
    will-change: opacity, color, translate, max-width;
    transition: all .6s ease, opacity .6s ease-in .2s, color .25s ease;
}

.toggle-project-links.open+.projects-button-links {
    gap: 4rem;
}

.toggle-project-links.open .button-text {
    max-width: 0;
    opacity: 0;
}

.toggle-project-links svg {
    will-change: rotate;
    transition: rotate .25s ease;
}

.toggle-project-links.open svg {
    rotate: 180deg;
}

.toggle-project-links .svg-wrap {
    will-change: translate, border-color;
    transition: translate .6s cubic-bezier(0, -0.29, 0.66, 0.98), border-color .25s ease;
}

.toggle-project-links.open .svg-wrap {
    translate: -.75em 0;
    transition: translate .6s cubic-bezier(.54, -6, .35, -.9), border-color .25s ease;
}

@media (hover: hover) {
    .projects-button-links a:hover {
        color: var(--color);
    }
}

.subscribe-button {
    display: inline-flex;
    text-decoration: none;
    gap: .3em;
    align-items: center;
}

.subscribe-button svg {
    width: 1em;
    height: 1em;
    will-change: rotate;
    transition: all .25s ease;
}

.subscribe-button.open svg {
    rotate: 90deg;
}

.footer-subscribe {
    margin-right: 4rem;
    position: relative;
    white-space: nowrap;
}

.footer-subscribe,
.subscribe-form,
.subscribe-form form {
    display: inline-block;
}

.subscribe-button:not(.open)+.subscribe-form {
    opacity: 0;
    pointer-events: none;
    top: 0;
}

.subscribe-form {
    position: absolute;
    will-change: opacity, top;
    transition: top .5s ease, opacity .5s ease;
    left: -.5em;
    top: -1.5em;
}

.subscribe-form input {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: none;
    padding: 0;
    margin: 0;
    margin-right: .5em;
    height: auto;
    width: 100%;
    background-color: transparent;
    outline: none;
    color: var(--weak-color);
    width: fit-content;
    min-width: 5em;
    padding-left: .5em;
}

.subscribe-form input::placeholder {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.subscribe-form input:placeholder-shown+button {
    opacity: .2;
    pointer-events: none;
}

@media (hover: hover) {
    .subscribe-form button:hover {
        color: var(--color);
    }
}

.success-message {
    color: var(--color);
    padding-left: .5em;
}

@media screen and (max-width: 1600px) {
    [data-tpl="contact"] #main-content {
        grid-template-columns: 1fr 6fr;
    }
}

@media screen and (max-width: 1300px) {
    [data-tpl="contact"] #main-content {
        display: block;
    }
}

.project-thumb-image .thumb-video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events: 0;
}

.project-thumb-image .no-video {
    background-position: center;
    background-size: cover;
}

.project-thumb-image .no-video {
    background-position: center;
}

.project-thumb-image .thumb-video video {
    width: 100%;
}

.project-vimeo-player iframe {
    width: 100%;
}

.project-tumb-buttons {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    gap: 10%;
}

.hamburger {
    display: none;
}

@media (hover: hover) {
    .project-thumb-image .thumb-video {
        transition: all .5s ease;
    }

    .project-thumb-image:hover .thumb-video {
        translate: -1rem -1rem;
        opacity: 1;
    }

    .project-thumb-image .project-tumb-buttons {
        transition: all .5s ease;
        opacity: 0;
    }

    .project-thumb-image:hover .project-tumb-buttons {
        translate: -.5rem -.5rem;
        opacity: 1;
    }
}

.project-tumb-buttons a {
    color: white;
    white-space: nowrap;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, .8));
}

.quick-play,
.view-project {
    position: relative;
    display: inline-block;
}

.quick-play::before {
    content: "";
    display: inline-block;
    width: 2.35em;
    height: 2.35em;
    background-image: url('data:image/svg+xml,<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1138 8.99133L1.06292 16.9913L1.06292 0.991333L14.1138 8.99133Z" stroke="white" /></svg>');
    background-repeat: no-repeat;
    background-size: .7em;
    background-position: 56%;
    will-change: border-color, translate;
    transition: border-color .25s ease, translate .25s ease;
    position: absolute;
    border: 1px solid white;
    border-color: rgba(255, 255, 255, 0);
    border-radius: 50%;
    translate: -79% -22%;
}

@media (hover: hover) {
    .quick-play:hover::before {
        border-color: white;
        translate: -117% -22%;
    }
}

.view-project::after {
    content: "";
    display: inline-block;
    width: 2.35em;
    height: 2.35em;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='16' viewBox='0 0 20 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.607788' y1='7.95947' x2='17.9444' y2='7.95947' stroke='white'%3E%3C/line%3E%3Cpath d='M11.8944 0.47998L17.9297 7.97998L11.8944 15.48' stroke='white'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: .85em;
    background-position: center;
    will-change: opacity, translate;
    transition: opacity .25s ease, translate .25s ease;
    position: absolute;
    border: 1px solid white;
    opacity: 0;
    border-radius: 50%;
    translate: -22% -22%;
}

.director-thumb .view-project:after {
    rotate: 90deg;
}

.director-thumb.showing .view-project:after {
    rotate: -90deg;
}

.director-thumb.showing .view-project {
    position: relative;
}

.director-thumb .view-project span {
    will-change: opacity;
    transition: opacity .25s ease;
}

.director-thumb .view-project span:first-child {
    position: absolute;
}

.director-thumb.showing .view-project span:first-child,
.director-thumb:not(.showing) .view-project span:last-child {
    opacity: 0;
}

@media (hover: hover) {
    .view-project:hover::after {
        opacity: 1;
        translate: 20% -22%;
    }
}

.gbtn.gprev,
.gbtn.gnext {
    display: none;
}

.glightbox-clean .gclose {
    background-color: transparent !important;
    border: 1px solid white;
    border-radius: 50%;
    top: 1.2rem;
    right: var(--main-h-padding);
}

.glightbox-clean .gclose svg {
    width: .7rem;
}

.sounds-list {
    border-top: 1px solid black;
    --plyr-range-track-height: 1px;
    --plyr-range-thumb-height: 5px;
    --plyr-range-thumb-background: black;
    --plyr-range-thumb-shadow: none;
    --plyr-range-fill-background: black;
}

.sounds-list article {
    border-bottom: 1px solid black;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: calc(var(--text-size)* 14) auto 16.5rem;
    align-items: stretch;
    gap: 1rem;
    align-items: center;
    min-height: 9.2rem;
}

.sounds-list article h3 {
    line-height: 1.15;
    margin-bottom: .1rem;
}

.sound-thumb {
    display: grid;
    grid-template-columns: 5rem auto;
    gap: 1rem;
    align-items: center;
}

.sounds-list .plyr--audio .plyr__controls {
    background-color: transparent;
}

.sounds-list .plyr--audio .plyr__controls {
    background-color: transparent;
}

.sounds-list .plyr__controls__item.plyr__control {
    border: 1px solid var(--weak-border-color);
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sounds-list .plyr__controls__item.plyr__control svg,
.sounds-list .plyr__controls__item.plyr__control.plyr__control--pressed svg {
    transition: all .15s ease;
}

@media (hover: hover) {

    .sounds-list .plyr__controls__item.plyr__control:hover,
    .sounds-list .plyr__controls__item.plyr__control.plyr__control--pressed:hover {
        border-color: var(--color);
        background-color: transparent;
    }

    .sounds-list .plyr__controls__item.plyr__control:hover svg,
    .sounds-list .plyr__controls__item.plyr__control.plyr__control--pressed:hover svg {
        fill: var(--color);
    }
}

.sounds-list .plyr__controls__item.plyr__control.plyr__control--pressed {
    border-color: black;
    background-color: black;
}

.sound-links .plyr--audio .plyr__progress__buffer {
    height: 1px;
}

.sounds-list .plyr__controls__item.plyr__control svg {
    scale: .8;
}

.sounds-list .plyr__controls__item.plyr__control svg.icon--not-pressed {
    translate: 10% 0;
}

.sounds-list .plyr__controls__item.plyr__control svg.icon--pressed {
    fill: var(--main-bg-color);
}

@media (hover: hover) {
    .sounds-list .plyr__controls__item.plyr__control.plyr__control--pressed:hover {
        background-color: var(--color);
    }

    .sounds-list .plyr__controls__item.plyr__control.plyr__control--pressed:hover svg.icon--pressed {
        fill: white;
    }
}

.sounds-list .plyr__time {
    min-width: 3.6rem;
    margin-left: .8rem;
    text-align: left;
}

.sound-links {
    text-align: right;
}

.sound-links>* {
    text-decoration: none;
    border: 1px solid var(--weak-border-color);
    border-radius: 1.5rem;
    padding: .5rem 1rem;
    display: inline-block;
    margin-left: .5rem;
    will-change: border-color;
    transition: border-color .25s ease;
}

.sound-view-proj-button svg {
    display: inline-block;
    height: .8em;
}

.sound-view-proj-button svg :is(line, path) {
    stroke-width: 1px;
    will-change: stroke;
    transition: stroke .25s ease;
}

@media (hover: hover) {
    .sound-links a:hover {
        border-color: var(--color);
    }

    .sound-links a:hover svg :is(line, path) {
        stroke: var(--color);
    }
}

.sound-links span {
    color: var(--weak-color);
}

[data-tpl="home"] .pg-container .project-thumb.pg-item {
    padding: 4.5vw 0;
}

.parallax-obj,
.pg-image,
.pg-video,
.pg-editor,
.pg-text {
    translate: 0 var(--translateY);
    will-change: translate;
}

.pg-item.pg-main,
.pg-item.pg-group {
    column-gap: var(--main-gap);
    row-gap: var(--main-gap);
}

[data-tpl="home"] .pg-main {
    row-gap: 4.5vw;
    column-gap: 0;
}

html:not(.in-backend)[data-tpl="project"] .pg-main {
    margin-top: 11rem;
}

html.in-backend :is(.parallax-obj, .pg-image, .pg-video, .pg-editor, .pg-text) {
    translate: 0 0 !important;
}

html.in-backend .pg-item-selected .project-thumb.pg-item {
    background: rgba(0, 0, 255, .1);
}

html.in-backend .pg-item-selected:has(.pg-item-selected) .project-thumb.pg-item {
    background: none;
}

.project-main-image {
    height: 50vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    padding: 0
}

.project-main-image img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.project-header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 8rem;
}

.project-main-info {
    display: grid;
    grid-row-gap: 1rem;
}

.project-info {
    display: flex;
    align-items: flex-end;
}

.project-info .text p {
    margin: 0;
    padding: 0;
}

.project-main-text>p:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.credits {
    display: grid;
    grid-template-columns: 1fr 6fr;
    margin-top: 2rem;
    gap: 2em;
}

.pg .pg-item.pg-group {
    background-color: grey;
}

.pg .pg-item.project-block {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    box-sizing: border-box;
    position: relative;
    grid-column-start: 1;
    grid-column-end: span 12;
    background-color: white;
    gap: 2rem;
    margin: 5rem calc(0px - var(--main-h-padding));
    padding: 5rem var(--main-h-padding) 7rem;
    width: cal(100% - var(--main-h-padding) - var(--main-h-padding));
}

.pg .pg-item.pg-spacer {
    height: 8rem;
}

.pg .pg-item,
.pg .pg-item-added {
    grid-row-start: auto;
}

.pg .pg-editor {
    padding-bottom: 5rem;
}

.pg .pg-image img {
    object-fit: cover;
    min-height: 100%;
    object-position: center;
}

.pg-main .plyr,
.pg-group .plyr {
    overflow-wrap: initial;
    word-break: initial;
}

.pg .pg-item-added {
    grid-column-end: span 3;
    grid-row-start: auto;
}

.pg .plyr svg {
    width: var(--plyr-control-icon-size, 18px);
}

.plyr__control {
    transition: all .15s ease;
}

.plyr__control.plyr__control--overlaid {
    display: none !important;
}

.plyr__controls__item.plyr__control[data-plyr="play"] .icon--not-pressed {
    transition: scale .15s ease;
}

.plyr__controls__item.plyr__control[data-plyr="play"] .icon--not-pressed {
    translate: 5% 0;
}

@media (hover: hover) {
    .plyr__controls__item.plyr__control[data-plyr="play"]:hover .icon--not-pressed {
        scale: .9;
    }
}

.project-main-video {
    margin: 11rem 0;
}

.pg-item {
    z-index: 1;
}

.project-block {
    z-index: 0;
}

.director-image img {
    min-height: min(15rem, 60vw);
    object-fit: cover;
    object-position: center;
}

.project-buttons {
    display: flex;
    justify-content: space-between;
    padding: 11rem 0 2rem;
}

#main-logo {
    position: absolute;
    left: var(--main-h-padding);
    translate: -3.7rem -1rem;
    top: 0;
}

#main-logo-anim {
    display: block;
    height: 6.7rem;
    width: 12rem;
    position: relative;
}

#main-logo-tagline {
    display: block;
    position: relative;
    translate: 9.7rem -3.7rem;
}

#main-logo-tagline i {
    font-style: normal;
    display: block;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    will-change: opacity, translate;
    transition: translate .65s ease-out, opacity .5s ease;
    translate: 0 -1.25em;
    opacity: 0;
}

#main-logo-tagline i.showing {
    translate: 0 0;
    opacity: 1;
}

#main-logo-tagline i.hidden {
    translate: 0 1.25em;
}

.htmx-indicator {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 5000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.htmx-indicator svg {
    animation: 2s linear infinite svg-animation;
    max-width: 130px;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    will-change: opacity;
    transition: opacity 1s ease-in 1s !important;
}

@keyframes svg-animation {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg)
    }
}

.htmx-indicator circle {
    display: block;
    fill: transparent;
    stroke: black;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 280;
    stroke-width: 1px;
    transform-origin: 50% 50%;
}

.htmx-request .htmx-indicator circle,
.htmx-request.htmx-indicator circle {
    animation: 1.4s ease-in-out infinite both circle-animation;
}

[data-tpl="directors"] .htmx-indicator circle {
    stroke: white;
}

@keyframes circle-animation {

    0%,
    25% {
        stroke-dashoffset: 280;
        transform: rotate(0);
    }

    50%,
    75% {
        stroke-dashoffset: 75;
        transform: rotate(45deg);
    }

    100% {
        stroke-dashoffset: 280;
        transform: rotate(360deg);
    }
}

.logos-area {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2.2vw;
    align-items: center;
    justify-content: space-between;
}

.logos-area .partner-img {
    width: 80%;
    aspect-ratio: 4/3;
}

.logos-area .partner-img img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    max-width: 130px;
    margin: auto;
    display: block;
}

.logos-area .partner-img {
    width: 80%;
}

.awards-area {
    display: flex;
    gap: 2.2vw;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.awards-area .award-img {
    width: max(160px, 18%);
    aspect-ratio: 4/3;
}

.awards-area .award-img img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    max-width: 250px;
}

@media screen and (max-width: 1200px) {
    .credits {
        display: block;
    }

    .credits>p {
        display: none;
    }
}

@media screen and (max-width: 1000px) {

    #main-footer {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .footer-links {
        gap: 2rem;
    }

    .footer-subscribe {
        flex-grow: 1;
    }

    #main-footer,
    .footer-links,
    .footer-social-links {
        /* spreadsheet feedback
        align-items: center;
        justify-content: center;
        */
        gap: 1rem;
        width: 100%;
    }

    .footer-subscribe {
        flex-grow: 0;
        margin-right: 0;
    }

    #main-footer {
        /* spreadsheet feedback
        border-top: 1px solid;
        padding: 2.5rem 1rem;
        */
        will-change: padding;
        transition: padding .35s ease;
    }

    #main-footer:has(.subscribe-button.open) {
        padding: 3.5rem 1rem 1.5rem;
    }

    .subscribe-form {
        left: auto;
        right: 0;
        top: -2.25em;
    }

    .logos-area {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-width: 900px) {

    header {
        position: fixed;
    }

    html.menu-open {
        overflow: hidden;
    }

    #main-header {
        padding-top: 1rem;
        height: 4.2rem;
    }

    #main-logo {
        top: -0.5rem;
    }

    .hamburger {
        padding: 0;
        position: absolute;
        width: 2.5rem;
        height: 2.5rem;
        display: block;
        z-index: 1000;
        top: 1rem;
    }
    @media (hover: hover) {
        .hamburger.is-active:hover,
        .hamburger:hover {
            opacity: 1;
        }
    }

    .hamburger-box {
        width: 100%;
        height: 100%;
    }

    .hamburger-inner,
    .hamburger-inner:after,
    .hamburger-inner:before {
        width: 100%;
        height: 1px;
        opacity: 1 !important;
        border-radius: 0;
    }

    .hamburger.is-active .hamburger-inner,
    .hamburger.is-active:after,
    .hamburger.is-active:after {
        background-color: black;
    }

    [data-tpl="directors"] .hamburger:not(.is-active) .hamburger-inner,
    [data-tpl="directors"] .hamburger:not(.is-active) .hamburger-inner:after,
    [data-tpl="directors"] .hamburger:not(.is-active) .hamburger-inner:before {
        background-color: white !important;
    }

    .hamburger-inner:before {
        top: -.75rem;
    }

    .hamburger-inner:after {
        bottom: -.75rem;
    }

    .hamburger:not(.is-active)+.topnav {
        translate: 105vw 0;
        pointer-events: none;
        transition: translate .5s ease-in, outline .5s ease-in;
        outline: 200vw solid rgba(0, 0, 0, 0);
    }

    .hamburger--spin .hamburger-inner:before {
        will-change: opacity, top, background-color;
        transition: top .1s ease-in .25s, opacity .1s ease-in, background-color .1s ease;
    }

    .hamburger--spin.is-active .hamburger-inner:before {
        will-change: opacity, top, background-color;
        transition: top .1s ease-out, opacity .1s ease-out .12s, background-color .1s ease;
    }

    .topnav {
        translate: 0 0;
        will-change: translate, outline;
        transition: translate .5s ease-out, outline .5s ease-out;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100vh;
        z-index: 999;
        background-color: var(--color);
        display: flex;
        flex-direction: column;
        gap: .5em;
        justify-content: center;
        align-items: center;
        font-size: var(--h2-size);
        outline: 200vw solid rgba(0, 0, 0, 0.25);
        background-color: var(--main-bg-color);
        color: black !important;
    }

    .topnav a {
        text-align: center;
        color: black !important;
    }

    .topnav a.active {
        text-align: center;
        color: var(--color) !important;
    }

    @media (hover: hover) {

        .topnav a:hover {
            color: var(--color) !important;
        }

        .topnav:has(a:not(.active):hover) a.active {
            color: inherit !important;
        }
    }

    .projects-list {
        grid-template-columns: 1fr;
    }

    [data-tpl="about"] .page-content>section>* {
        grid-column: 1 / -1 !important;
    }

    .project-header {
        grid-template-columns: 1fr;
        margin-bottom: 5rem;
        grid-row-gap: 2rem;
    }

    .project-main-info {
        grid-row-gap: 1.25rem;
    }

    .team-people {
        grid-template-columns: 1fr 1fr;
    }

    .director-thumb-info {
        grid-template-columns: 1fr;
    }

    .content-header {
        position: relative;
        height: auto !important;
        padding-top: 30vh;
    }

    [data-tpl="project"] .content-header {
        padding-top: 0;
    }

    .project-main-image img {
        min-height: 17rem;
    }

    .page-content {
        margin-top: 0 !important;
    }

    [data-tpl="home"] .page-content {
        margin-top: 8rem !important;
    }

    .sounds-list article {
        display: block;
        padding: 1.9rem 1rem 1.4rem;
    }

    .sounds-list,
    .sounds-list article {
        border-color: #00000033;
    }

    .sounds-list article .sound-links {
        grid-column: 1 / span 2;
        grid-row-start: 2;
    }

    .sounds-list article .plyr__controls {
        flex-direction: row-reverse;
        padding: .7rem 0;
    }

    .sounds-list article .sound-links {
        text-align: left;
    }

    .sound-links>* {
        margin-left: 0;
        margin-right: .5rem;
        margin-bottom: .5rem;
    }

    [data-tpl="contact"] #main-content {
        padding-top: 30vh;
    }

    .home-button {
        margin-top: 2rem;
    }

    .home-button .toggle-project-links {
        transition: margin .25s ease;
    }

    .home-button .toggle-project-links.open {
        margin-left: -2.6rem;
    }

    .home-button .button-arrow {
        margin: 0;
    }

    .home-button .button-wrap {
        align-items: flex-start;
    }

    .home-button .projects-button-links {
        flex-direction: column;
        padding-top: .6rem;
    }

    .home-button .toggle-project-links+.projects-button-links {
        gap: .5rem;
    }

    .home-button .toggle-project-links+.projects-button-links a:nth-child(2) {
        margin-left: -10rem;
    }

    .home-button .toggle-project-links+.projects-button-links a:nth-child(3) {
        margin-left: -0rem;
    }

    .home-button .toggle-project-links.open+.projects-button-links a:nth-child(2),
    .home-button .toggle-project-links.open+.projects-button-links a:nth-child(3) {
        margin-left: 0;
    }


    .toggle-project-links.open .svg-wrap {
        translate: 0 0;
    }

}

@media screen and (max-width: 640px) {

    .grid-row {
        grid-template-columns: 1fr !important;
    }

    .credits-row {
        grid-template-columns: 1fr;
        gap: 0;
        /* spreadsheet feedback
        gap: 1.2rem;
        */
    }

    .credits-row>*:nth-child(n+2) {
        /* spreadsheet feedback
        border-top: 1px solid var(--weak-border-color);
        padding-top: 1.2rem;
        */
    }

    .team-people {
        grid-template-columns: 1fr;
    }

    .director-thumb-more-info {
        grid-template-columns: 1fr;
    }

    .logos-area {
        grid-template-columns: repeat(4, 1fr);
    }
    .about-slogan .h2 {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .logos-area {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 400px) {
    .logos-area {
        grid-template-columns: repeat(2, 1fr);
    }

    .logos-area .partner-img img {
        max-width: 120px;
    }
}

.plyr__video-wrapper {
    scale: 100.5%;
}

.plyr--video .plyr__controls {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

.project-video.pg-item {
    overflow: hidden;
}

button.plyr__control[data-plyr="settings"],
button.plyr__control[data-plyr="captions"] {
    display: none;
}

.content-header:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10rem;
    height: 10rem;
    background-color: inherit;
}

[data-tpl="about"],
[data-tpl="contact"],
[data-tpl="contact"] body {
    background-color: var(--color);
}

[data-tpl="directors"] {
    background-color: black;
}

html:not(.in-backend) .pg-item>*:not(.stay) {
    opacity: 0;
    translate: 0 10rem;
    transition: opacity .6s ease, translate .6s ease;
}


html:not(.in-backend) .pg-item[data-pos="4"]>*:not(.stay) {
    translate: 0 13rem;
}

html:not(.in-backend) .pg-item[data-pos="3"]>*:not(.stay) {
    translate: 0 16rem;
}

html:not(.in-backend) .pg-item[data-pos="2"]>*:not(.stay) {
    translate: 0 19rem;
}

html:not(.in-backend) .pg-item[data-pos="1"]>*:not(.stay) {
    translate: 0 22rem;
}

html:not(.in-backend) .pg-item.on-view>*:not(.stay) {
    opacity: 1;
    translate: 0 0;
}

@keyframes LoopReplace {
    0%{
        translate: 0 0%;
        opacity: 1;
    }
    42%{
        translate: 0 0%;
        opacity: 1;
    }
    50%{
        translate: 0 -100%;
        opacity: 0;
    }
    92%{
        translate: 0 100%;
        opacity: 0;
    }
    100%{
        translate: 0 0%;
        opacity: 1;
    }
}
@keyframes LoopReplace2 {
    0%{
        translate: 0 100%;
        opacity: 0;
    }
    42%{
        translate: 0 100%;
        opacity: 0;
    }
    50%{
        translate: 0 0%;
        opacity: 1;
    }
    92%{
        translate: 0 0%;
        opacity: 1;
    }
    100%{
        translate: 0 -100%;
        opacity: 0;
    }
}
html[data-page="27"] .page-content > *:first-child {
    pointer-events: none;
    position: absolute;
    top: 0;
    opacity: 1;
    translate: 0 0%;
    animation: LoopReplace forwards 5s infinite;
    animation-timing-function: ease;
}
html[data-root-parent="27"] .page-content > *:nth-child(2) {
    pointer-events: none;
    position: absolute;
    top: 0;
    opacity: 0;
    translate: 0 100%;
    animation: LoopReplace2 forwards 5s infinite;
    animation-timing-function: ease;
}