:root {
    --color-primary: #000;
    --color-secondary: #fff;
    --color-accent: #ff0000;
    --color-background: #000;
    --color-text: #fff;
    --color-border: #ccc;
    --color-shadow: rgba(0, 0, 0, 0.5);
    --font-family: "aktiv-grotesk", sans-serif;
    --font-family-thin: "aktiv-grotesk-thin", sans-serif;
    --font-size: 11pt;
    --mobile-font-size: 11pt;
    --line-height: 1.5;
}

/* body */
html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
}

html {
    scrollbar-width: thin;
        scrollbar-color: rgb(39, 39, 39) #00000000;
}

body {
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.5rem;
    font-style: normal;
    color: var(--color-text);
    background-color: var(--color-primary);
    font-size: 16px;
}


/* reset */
div,
main,
header,
nav,
article,
section,
div {
    position: relative;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

a {
    color: var(--color-text);
    text-decoration: none;
}

body {
    display: grid;
    grid-template-columns: auto 1fr;
}

main {
    grid-template-columns: subgrid;

    section.hero {
        display: none;
    }
}
header {
   
}

/* header */
header {
    position: sticky;
    height: 100vh;
    top: 0px;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 38px;
    padding: 0 20px;
    pointer-events: none;
    z-index: 200000;

    &:before {
        position: fixed;
        content: ' ';
        display: block;
        background:  linear-gradient(#000000 0%,transparent);
        background-size: 30px;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .5s;
        z-index: 100;
    }       

    
    &:after {
        position: fixed;
        content: ' ';
        display: block;
        background:  linear-gradient(transparent, #000000 100%);
        background-size: 30px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .25s;
        z-index: 100;
    }      

        
    :has(ul.scroll_up) &:before,
    :has(ul.scroll_down) &:after {
        opacity: 1;
    }    
    
    #nav-mobile-trigger {
        display: none;
    }

    .logo-wrapper {
        pointer-events: auto;
        width: 165px;
        flex: 0 0 auto;

        .logo {
            pointer-events: auto;
            width: 100%;
            display: block;
            position: relative;

            img {
                width: 100%;
                height: auto;

                &:not(:first-child) {                    
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }
            
            }
        }

        >h1,
        >a.back {
            display: none;
        }

    }

    #nav-main {
        pointer-events: auto;
        user-select: none;

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-top: -25px;

            li {
                margin: 0;
                font-style: italic;

                a {
                    position: relative;
                    display: inline-flex;
                    height: 20px;
                    align-items: center;
                    font-size: 11pt;
                    letter-spacing: -1px;
                    font-weight: 900;
                    font-style: normal;
                    vertical-align: bottom;
                }
            }
        }

        ul:not(:hover) a.active,
        li a:hover {          
            &:before {
               position: absolute;
               content: '\2022';
               left: -16px;
               font-size: 22px;
            }
        }
    }

   
    #nav-directors {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        margin-left: -10px;
        margin-right: 32px;
        pointer-events: auto;
        width: 100%;    

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            padding-block: 30px;
            overflow-y: auto;
            overflow-x: visible;
            scrollbar-width: none;
            scrollbar-color: rgb(39, 39, 39) #00000000;            

            &:before {
                position: fixed;
                content: ' ';
                display: block;
                background:  url('../img/icon/arrow-up.svg') no-repeat top center;
                background-size: 30px;
                position: absolute;
                top: 10px;
                left: 0px;
                width: 100%;
                height: 50px;
                pointer-events: none;
                z-index: 1;
                opacity: 0;
                transition: opacity .5s;
                z-index: 101;
            }

             &:after {
                content: ' ';
                display: block;
                background:  url('../img/icon/arrow-down.svg') no-repeat bottom center;
                background-size: 30px;
                position: absolute;
                bottom: 10px;
                left: 0px;
                width: 100%;
                height: 50px;
                pointer-events: none;
                opacity: 0;
                transition: opacity .25s;
                 z-index: 1001
            }            

            &.scroll_up:before,
            &.scroll_down:after {
                opacity: 1;
            }

            li {
                margin: 0;

                a {
                    position: relative;
                    display: flex;
                    gap: 12px;
                    align-items: center;
                    font-weight: normal;
                    font-size: 11pt;
                    letter-spacing: 0px;
                    line-height: 17pt;
                    white-space: nowrap;
                    transition: color .2s;
                    
                    &:before {
                        content: '\2022';
                        font-size: 25px;
                    }

                }
            }

            &:not(:has(.active)) {
                li {
                    a {
                       &:before { 
                           visibility: hidden
                       }
                    }
                }
            }

            &:has(.active) {
                li {
                    a:not(.active) {
                        color: #2b2b2b;

                        &:hover {
                            color: var(--color-text);
                        }

                        &:before {
                           visibility: hidden
                        }
                    }
                }
            }
        } 

    }

    @media screen and (max-width: 1180px) {
        & {
            position: fixed;
            padding: 0px;
            width: 100%;
            height: 100dvh;
            gap: 0;

            .logo-wrapper {
                position: fixed;
                display: flex;
                flex-direction: row-reverse;
                gap: 10px;
                top: 0px;
                padding: 20px 20px 0px;
                width: 100%;
                max-width: none;
                background: #000000;
                z-index: 50000;

                .logo {
                    
                    width: 60px;
                    flex: 0 0 auto;
                    margin: 0;
                    padding: 0;
                    font-size: 0;
                    display: flex;

                    img {
                        width: 100%;
                        height: auto;
                    }
                }

                h1 {
                    display: block;
                    flex: 1 1 auto;
                    width: 100%;
                    text-align: center;
                    font-size: var(--font-size);
                    font-weight: 800;
                    margin: 0;
                    padding: 0;
                }

                a.back {
                    display: block;
                    flex: 0 0 auto;
                    font-size: 10pt;
                    color: var(--font-color);
                    font-family: var(--font-family-thin);
                    font-style: italic;
                }

                &::after {
                    position: absolute;
                    content: ' ';
                    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgb(0 0 0) 80%, rgb(0 0 0) 100%);
                    width: 100%;
                    height: 20px;
                    bottom: -20px;
                    left: 0px;
                    pointer-events: none;
                }

            }

            #nav-main {
                position: fixed;
                top: 0px;
                left: 0px;
                pointer-events: auto;
                text-align: center;               
                width: 100%;
                height: 100%;
                background: #000;
                z-index: 150000;
                display: flex;
                justify-content: center;
                align-items: center;
                opacity: 1;
                transition: opacity 0.25s;

                ul {
                    margin: 0;

                    li {
                        margin: 0;
                        margin-block: 12px;

                        a {
                            position: relative;
                            font-size: 11pt;
                            line-height: 11pt;
                            letter-spacing: -1px;
                            font-family: "aktiv-grotesk", sans-serif;
                            font-weight: 900;
                            font-style: normal;
                        }
                    }
                }
            }

            &:not(:has(#nav-mobile-trigger.open)) #nav-main {
                opacity: 0;
                pointer-events: none;
            }

            #nav-mobile-trigger {
                position: fixed;
                top: 50vh;
                transform: translateY(-50%);
                right: 15px;
                display: block;
                background: none;
                color: var(--color-text);
                border: 1px solid var(--color-text);
                border-radius: 20px;
                font-family: var(--font-family);                
                font-size: 8pt;
                line-height: 12px;
                box-sizing: border-box;
                padding: 10px 5px 6px 5px;
                transition: opacity .2s;
                cursor: pointer;
                pointer-events: auto;
                z-index: 200000;

                &:hover {
                    opacity: .5;
                }
            }

            #nav-directors {
                margin-left: 0px;
                margin: 0;
                top: 20px;
                height: calc(100% - 80px);
                padding-block: 0;
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                     
                
                ul {
                    padding-block: 0px;
                    scrollbar-width: thin;
                }
            }
        }
    }

}

/* home */
#home {   
    
    header {

        .logo-wrapper {
            
            .logo {          
                
                img {
                    opacity: 0;
                }

                img:nth-of-type(1) {                        
                    animation: .1s 0.1s homeIntroLogoImg;
                    animation-fill-mode: forwards;
                }

                img:nth-of-type(2) {                        
                    animation: .1s .225s homeIntroLogoImg;
                    animation-fill-mode: forwards;
                }

                img:nth-of-type(3) {                        
                    animation: .1s .45s homeIntroLogoImg;
                    animation-fill-mode: forwards;
                }
            }

        }

        #nav-main {                
            ul {
                opacity: 0;
                animation: .675s ease-out .75s homeIntroNavDesktop;
                animation-fill-mode: forwards;

                 a.active:before {
                    opacity: 0;
                    animation: .675s ease-out 1.35s homeIntroLogoImg;
                    animation-fill-mode: forwards;
                }
            }
        }

        #nav-directors {
            opacity: 0;
            animation: .6s ease-out 1.2s homeIntroNavDirectorsDesktop;
            animation-fill-mode: forwards;
        } 
    }    
     
}  

@keyframes homeIntroLogoImg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes homeIntroNavDesktop {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes homeIntroNavDirectorsDesktop {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}



@media screen and (max-width: 1180px) {
    #home {   
    
        header {
            position: fixed;
            display: flex;
            justify-content: center;
            padding: 0px;
            width: 100%;
            gap: 20px;
            height: 100dvh;          
            
    
            .logo-wrapper {
                position: relative !important;
                display: flex;
                flex-direction: row-reverse;
                gap: 10px;
                top: 0px;
                padding: 0;
                width: auto;
                z-index: 5000000;
                transform: translateX(100%);
                animation: .375s linear .8s 1 homeIntroLogoWrapperMobile;
                animation-fill-mode: forwards;
                
                .logo {                    
                    width: 60px;
                    flex: 0 0 auto;
                    margin: 0;
                    padding: 0;
                    font-size: 0;
                    display: flex;
                    margin-top: 7px;
                    
                    img {
                        width: 100%;
                        height: auto;
                    }
                }
    
            }
         
            #nav-main {
                position: relative !important;
                opacity: 1 !important;
                width: auto;
                text-align: left;
                pointer-events: auto !important;
                
                ul {
                    opacity: 0;
                    animation: 1s ease-out .975s homeIntroNavFadeInMobile;
                    animation-fill-mode: forwards;
                }
            }
    
            #nav-mobile-trigger {
                display: none;
            }
        }    

        #nav-directors {
             animation: none;
             display: none !important;

           
        }        

         #nav-main {
             ul:not(:hover) a.active {          
                &:before {
                  display: none !important;
                }
            }
         }
    }       
}

@keyframes homeIntroLogoWrapperMobile {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes homeIntroNavFadeInMobile {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* director background poster */
#nav-directors-bg-poster {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s;
    }

    img.fadein {
        opacity: 1;
    }

    @media screen and (max-width: 1180px) {
        & {
            display: none;
        }
    }
}

/* directors */
#directors {
    
    header {
        .logo-wrapper {
            h1 {
                text-align: left;
                text-transform: uppercase;
            }
        }
    }
}

/* director */
#director {

    @media screen and (max-width: 1180px) {
        #nav-directors {
            display: none;
        }
    }

    main {
        display: flex;
        flex-direction: row;
        padding-block: 20px;
        gap: 30px;       
        
 
        article {
            display: flex;
            flex-direction: column;
            gap: 50px;
            padding-right: 120px;
            padding-block: min(100px, 20%);

            section {
                display: flex;
                flex-direction: column;
                gap: 2px;

                .video {

                    a {
                        position: relative;
                        display: block;

                        img {
                            pointer-events: none;
                            display: block;
                            width: 100%;
                            height: auto;
                        }

                        iframe {
                            position: absolute;
                            background-color: #000;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border: none;
                        }

                    }
                }

                .label {
                    display: flex;
                    align-items: center;
                    gap: 5px;

                    h1 {
                        font-size: 11pt;
                        font-size: 11pt;
                        font-weight: 900;
                        letter-spacing: -1px;
                        margin: 0;
                        padding: 0;
                        text-transform: uppercase;
                    }

                    h2 {
                        font-size: 11pt;
                        font-size: 11pt;
                        font-weight: normal;
                        margin: 0;
                        padding: 0;
                    }
                }

            }
        }

        aside {
            position: fixed;
            height: 100vh;
            overflow: hidden;
            top: 0px;
            right: 0px;
            padding-right: 30px;
            width: 80px;
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            
            ul {
                list-style: none;
                margin: 0;
                padding: 0;

                li {
                    a {
                        position: relative;
                        display: flex;
                        align-items: center;
                        width: 100%;

                        img {
                            pointer-events: none;
                            display: block;
                            width: 100%;
                            height: auto;
                        }
                    }

                    a:not(.active) {
                        img {
                            filter: grayscale(1);
                        }
                    }

                    a.active {
                        &:after {
                            position: absolute;
                            content: '\2022';
                            right: -20px;
                            font-size: 30px;
                        }
                    }
                }
            }

        }

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

            & {
                padding: 65px 60px 20px 20px;

                article {
                    gap: 15px;
                    max-width: none;
                    padding-block: 0;
                    padding-inline: 0;

                    section {
                        display: flex;
                        flex-direction: column;
                        gap: 2px;

                        .label {
                            h1 {
                                font-size: var(--mobile-font-size);
                            }

                            h2 {
                                font-size: var(--mobile-font-size);
                            }
                        }

                    }
                }

                aside {
                    display: none;
                }

            }

        }

    }

}

/* long form listing */
#longform {

    header {
        .logo-wrapper {
            h1 {
                text-align: left;
                text-transform: uppercase;
            }
        }
    }

    main {
        display: flex;
        flex-direction: column;
        padding-block: 20px;
        padding-inline: 30px;
        gap: 30px;

        article {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            align-content: start;
            gap: 60px 60px;
            width: 100%;

            section {
                display: flex;
                flex-direction: column;
                justify-content: start;
                align-items: center;
                gap: 2px;

                a {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    width: 100%;

                    div:first-child {
                        
                        display: flex;
                        flex: 0 0 auto;
                        aspect-ratio: 27 / 40;                        
                        width: 100%;
                        
                        img {
                            display: block;
                            width: 100%;
                            object-fit: cover;                                                                              
                            height: 100%;
                        }
                    }

                    .label {
                        width: 100%;
                        flex: 0 0 auto;

                        h1 {
                            display: inline;
                            font-size: var(--font-size);
                            font-weight: normal;
                            margin: 0;
                            padding: 0;
                        }

                        h2 {
                            display: inline;
                            font-size: var(--font-size);
                            font-family: var(--font-family-thin);
                            font-weight: normal;
                            margin: 0;
                            padding: 0;
                        }
                    }
                }

            }
        }

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

            & {
                padding: 65px 60px 20px 20px;

                article {
                    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
                    gap: 30px;

                    section {
                        gap: 2px;


                        a {
                            gap: 5px;
                            width: 100%;
                            height: auto;
                            overflow: hidden;

                            div:first-child {
                                display: block;
                                width: 100%;
                                height: auto;  
                                
                                img {                       
                                    max-height: none; 
                                }
                            }
                        }

                    }
                }

            }

        }

    }
}


/* longform details */
#longform-details {

    header {
        .logo-wrapper {
            background: none;
            justify-content: space-between;

            h1 {
                text-align: left;
                text-transform: uppercase;
            }

            &:after {
                display: none;
            }
        }

    }    

    main {
        display: flex;
        flex-direction: column;
        gap: 0px;
        width: 100%; 
        display: grid;
        grid-template-columns: subgrid;         
        grid-template-rows: calc(50vh - 58px) 1fr;
        grid-column: 1 / 3;
        grid-row: 1;
        
        section.hero {
            display: flex;
            position: sticky;
            top: 0px;
            z-index: 1000;
            justify-content: center;
            align-items: center;
            top: 0px;
            left: 0px;
            
            cursor: pointer;
            user-select: none;
            grid-column: 1 / 3;

            &::after {
                position: absolute;
                content: ' ';
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 35%,  rgba(0, 0, 0, 1) 100%);
                width: 100%;
                height: 60%;
                bottom: 0px;
                left: 0px;
                pointer-events: none;
            }

             &::before {
                position: absolute;
                content: ' ';
                background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, 50%,  rgba(0, 0, 0, 1) 100%);
                width: 100%;
                height: 20px;
                bottom: -20px;
                left: 0px;
                pointer-events: none;
                 z-index: 1000;
            }


            img {
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                pointer-events: none;
            }

            .play {
                position: relative;
                display: block;
                width: 50px;
                height: 50px;
                opacity: 1;
                transition: opacity 0.2s;

                img {
                    pointer-events: none;
                    display: block;
                    width: 100%;
                    height: auto;
                }

                &:hover {
                    opacity: 0.8;
                }
            }

            .back {
                position: absolute;
                font-size: var(--font-size);
                font-weight: normal;
                font-style: italic;
                top: 40px;
                right: 40px;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        article {
            display: flex;
            gap: 50px;
            padding: 15px 30px 50px;   
            grid-column: 2;
            
            section.poster {
                width: 250px;
                min-width: 200px;

                img {
                    display: block;
                    width: 100%;
                    height: auto;
                     aspect-ratio: 27 / 40;      
                    object-fit: cover
                }
            }

            section.content {

                >h1 {
                    font-size: 36.6px;
                    line-height: 36.6px;
                    font-weight: bold;
                    margin: 0;
                    padding: 0;
                }

                >h2 {
                    font-size: var(--font-size);
                    font-weight: normal;
                    margin: 0;
                    padding: 0;

                    span {
                        display: inline-block;
                        width: 20px;
                        text-align: center;
                    }
                }

                .description {
                    margin-top: 40px;
                    width: calc(50% - 50px);

                    p {
                        font-size: var(--font-size);
                        font-weight: normal;
                        line-height: 14.4pt;
                    }
                }

                .columns {
                    display: flex;
                    gap: 50px;
                    margin-top: 40px;

                    h3 {
                        font-size: var(--font-size);
                        font-weight: 900;
                        margin: 0;
                        padding: 0;
                        margin-bottom: 10px;
                    }

                    h4 {
                        font-size: var(--font-size);
                        font-weight: 600;
                        line-break: 14.4pt;
                        margin: 0;
                        padding: 0;
                    }

                    p {
                        font-size: var(--font-size);
                        font-weight: normal;
                        line-height: 18.4pt;
                    }

                    h4+p {
                        margin-top: 0px;
                    }

                    ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                    }

                    a:hover {
                        text-decoration: underline;
                    }

                    .left {
                        flex: 1 1 auto;
                        width: 50%;
                    }

                    .right {
                        flex: 1 1 auto;
                        width: 50%;
                    }
                }

            }

        }

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

            & {
                margin-left: 0;

                section.hero {
                    height: calc(35vh);

                    .back {
                        display: none;
                    }
                }

                article {
                    display: block;
                    gap: 50px;
                    padding: 20px 20px 20px;

                    section.poster {
                        display: none;
                    }

                    section.content {
                        padding-right: 60px;

                        >h1 {
                            font-size: 44.6px;
                            line-height: 44.6px;
                        }

                        >h2 {
                            font-size: var(--mobile-font-size);

                            span {
                                width: 10px;
                            }
                        }

                        .description {
                            width: 100%;
                        }

                        .columns {
                            flex-direction: column;

                            p {
                                font-size: var(--mobile-font-size);
                                line-height: 16.4pt;
                            }

                            ul {
                                font-size: var(--mobile-font-size);
                            }

                            .left,
                            .right {
                                width: 100%;
                            }
                        }

                    }

                }


            }
        }
    }

     @media screen and (max-width: 1180px) {
        & {
            height: 100dvh;
        }
    }
}

/* contact */
#contact {
   

    header {
        .logo-wrapper {
            h1 {
                text-align: left;
                text-transform: uppercase;
            }
        }
    }

    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        width: 100%;
        overflow: auto;
        padding-block: 50px;
        padding-inline: 50px;

        article {

            .contacts {
                display: flex;
                flex-direction: column;
                gap: 40px;

                section.contact {

                    h1 {
                        font-size: var(--font-size);
                        font-weight: normal;
                        margin: 0;
                        padding: 0;
                        margin-bottom: 2px;
                    }

                    p {
                        font-size: var(--font-size);
                        font-weight: normal;
                        margin: 0;
                        padding: 0;
                        line-height: 14.4pt;

                        span.spacer {
                            display: inline-block;
                            width: 40px;
                            text-align: center;
                            font-size: 20px;
                        }

                        a.email {
                            display: inline-block;
                            width: 130px;
                        }

                        a:hover {
                            text-decoration: underline;
                        }
                    }

                }

            }

            .addresses {
                margin-top: 100px;
                display: flex;
                gap: 20px;
                white-space: nowrap;
                justify-content: space-between;
                max-width: 900px;

                address {
                    font-size: var(--font-size);
                    font-weight: normal;
                    font-style: normal;

                    h1 {
                        font-size: var(--font-size);
                        font-weight: normal;
                        margin: 0;
                        padding: 0;
                        margin-bottom: 5px;
                    }

                    p {
                        margin: 0;
                        padding: 0;
                        line-height: 14.4pt;

                        span {
                            display: inline-block;
                            width: 60px;
                            text-align: center;
                            font-size: 20px;
                        }

                        a:hover {
                            text-decoration: underline;
                        }

                    }
                }
            }

            .social {
                display: flex;
                gap: 50px;
                font-size: var(--font-size);
                font-weight: 600;
                font-style: italic;
                margin-top: 70px;

                a {
                    display: block;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            .green {
                margin-top: 50px;
                display: flex;
                gap: 20px;
                align-items: end;

                >a {
                    display: block;
                }

                p {
                    font-size: 11px;
                    line-height: 10pt;

                }

                p:last-child {
                    margin-bottom: 8px;
                }

            }

        }

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

            & {
                padding: 70px 20px 20px;

                article {
                    display: flex;
                    flex-direction: column;

                    .contacts {
                        gap: 30px;
                        order: 1;
                    }

                    .addresses {
                        order: 3;
                        margin-top: 60px;
                        flex-direction: column;
                        gap: 30px;
                        text-align: right;
                          white-space:  initial;

                        address {
                            p {
                                span {
                                    width: 30px;
                                }
                            }
                        }
                    }

                    .social {
                        order: 2;
                        gap: 20px;
                        flex-direction: column;
                    }

                    .green {
                        order: 4
                    }

                }
            }
        }

    }
}

/* video dialog */
dialog.video {
    background: none;
    border: none;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.80);
    }

    form {
        position: fixed;
        top: 20px;
        right: 20px;

        button {
            width: 45px;
            height: 45px;
            background: none;
            border: none;
            cursor: pointer;
            outline: none;
            transition: opacity 0.2s;

            &:hover {
                opacity: 0.4;
            }

            svg {
                width: 100%;
                height: 100%;
            }

        }
    }

    section {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        height: 80dvh;
        width: 100%;
        max-width: 1200px;
        max-height: 90dvh;

        iframe {
            position: relative;
            display: block;
            aspect-ratio: 16 / 9;
            width: auto;
            height: 100%;
            background: #000000;
        }

        @media screen and (min-height: 1180px) {
            iframe {
                width: 100%;
                height: auto;
            }
        }

        @media screen and (max-width: 1180px) {
            iframe {
                width: 100%;
                height: auto;
            }
        }

    }

}

/* view-transition */
@view-transition {
    navigation: auto;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

::view-transition-old(root) {
    animation: 0.25s ease-in both fade-out;
}

::view-transition-new(root) {
    animation: 0.25s ease-in both fade-in;
}

body {
    display: grid;
    grid-template-columns: auto 1fr;
}