/*
  Theme Name: Brandstories
  Author: Egloo
  Author URI: https://egloo.it
  Version: 1.0.1
*/

:root {
    --header-height: 5.375rem;

    --c-white: #ffffff;

    --site-width: 86.25rem;
    --columns-gap: 1.875rem;

    --c-gray: #838383;
    --c-accent: #003c69;
    --c-light-gray: #f4f4f4;

    --ff-main: "sofia-pro", sans-serif;
    --ff-title: "Sofia Sans Condensed", sans-serif;
    --ff-title: "sofia-pro", sans-serif; /* overwrite because they asked */

    font-family: var(--ff-main), sans-serif;

    background: black;
    color: white;

    --c-pink: #ef7681;
}

@media only screen and (max-width: 768px) {
    :root {
        --header-height: 4.375rem;
        --columns-gap: 1.25rem;
    }
}

main:not(.no-padding) {
    padding-top: var(--header-height);
}

@media (max-width: 768px) {
    main:not(.no-padding) {
        padding-top: 4.375rem;
    }
}

.ff-main {
    font-family: var(--ff-main), sans-serif;
}

.ff-title {
    font-family: var(--ff-title), sans-serif;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a,
input,
textarea,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ff-title), serif;
}

ol,
ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

dialog[open] {
    border: none;
    background-color: transparent;
    border-radius: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    display: grid;
    place-items: center;
}

dialog.not-grid[open] {
    display: block;
}

img,
video,
iframe {
    display: block;
    width: 100%;
    height: auto;
}

button,
label,
input {
    cursor: pointer;
}

input[type="submit"],
button {
    border: none;
    background-color: transparent;
}

svg {
    line-height: 0;
}

.container {
    width: 100%;
    /*max-width: calc(var(--site-width) + 2 * var(--columns-gap));*/
    padding-left: var(--columns-gap);
    padding-right: var(--columns-gap);
    margin: auto;
}

.container.container-8 {
    --site-width: 53.25rem;
}

.container.container-10 {
    max-inline-size: calc(71.5625rem + (2 * var(--columns-gap)));
}

.full-page {
    height: 0;
    min-height: 100vh;
}

.ultra-title {
    font-family: var(--ff-title), serif;
    font-size: 11.25rem;
    line-height: 0.89;
    font-weight: 300;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .ultra-title {
        font-size: 5rem;
        line-height: 1;
    }
}

.highlight {
    font-weight: bold;
}

@media (hover: hover) {
    .invert-highlight-hover:hover {
        font-weight: bold !important;
    }

    .invert-highlight-hover:hover .highlight {
        font-weight: 300;
    }
}

.layers {
    display: grid;
}

.layers > .layer {
    grid-column: -1/1;
    grid-row: -1/1;
}

.layers > .layer.layer-bg {
    position: relative;
}

.layers > .layer.layer-bg > .img-wrapper.img-wrapper-ratio:only-child {
    block-size: 100%;
}

.layers > .layer.layer-bg::before,
.layers > .layer.layer-bg::after {
    content: "";
    pointer-events: none;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
}

.layers > .layer.layer-fg {
    position: relative;
    z-index: 1;
}

.img-wrapper.img-wrapper-ratio > picture,
.img-wrapper.img-wrapper-ratio {
    overflow: hidden;
    position: relative;
    block-size: 0;
}

.img-wrapper.img-wrapper-ratio > picture {
    block-size: 100%;
    display: block;
}

.img-wrapper.img-wrapper-ratio > video,
.img-wrapper.img-wrapper-ratio > picture > video,
.img-wrapper.img-wrapper-ratio > picture > img,
.img-wrapper.img-wrapper-ratio > img {
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    object-fit: cover;
    inset: 0;
}

.rich-text > *:not(:last-child) {
    margin-block-end: 1lh;
}

.rich-text strong {
    font-weight: 700;
}

.rich-text ul {
    list-style-type: disc;
}

.rich-text ol {
    list-style-type: decimal;
}

.rich-text ul,
.rich-text ol {
    padding-inline-start: 1rem;
}

.rich-text a {
    text-decoration: underline;
}

/* Header */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 0.75);
    z-index: 998;
    inline-size: 100%;
    block-size: var(--header-height);
}

header.eg-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    mix-blend-mode: difference;
}

header.eg-header .navbar {
    padding: 0.625rem 0;
}

header.eg-header .navbar .navbar-content {
    display: flex;
    align-items: center;
    mix-blend-mode: difference;
}

header.eg-header .navbar .navbar-content .header-logo-wrapper,
header.eg-header .navbar .navbar-content .language-switcher-wrapper {
    flex: 1;
}

header.eg-header .navbar .navbar-content .header-logo-image {
    min-width: 10rem;
    max-width: 13.375rem;
}

header.eg-header .navbar .navbar-content .menu-voices-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.875rem;
    text-transform: uppercase;
    font-size: 1.625rem;
    font-family: var(--ff-title), serif;
}

header.eg-header .navbar .navbar-content .menu-voices-list:not(.highlight) {
    font-weight: 300;
}

header.eg-header #menu-toggle {
    display: grid;
    place-items: center;
}

header.eg-header #menu-toggle[aria-expanded="false"] svg:last-child,
header.eg-header #menu-toggle[aria-expanded="true"] svg:first-child {
    display: none;
}

@media (min-width: 768px) {
    header.eg-header .mobile-part {
        display: none;
    }
}

#mobile-menu {
    position: fixed;
    inset: 0;
    background-color: black;
    z-index: 997;
    transition: translate 0.5s ease;
}

#mobile-menu[inert] {
    translate: 100%;
}

#mobile-menu .container {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    block-size: 100%;
}

#mobile-menu .main-menu {
    grid-row: 2;
}

#mobile-menu .main-menu ul {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    font-size: 2.5rem;
    line-height: 1.625rem;
    font-family: var(--ff-title);
    text-transform: uppercase;
}

#mobile-menu .bottom {
    grid-row: 3;
    padding-block-end: 1.25rem;
    margin-block-start: auto;
}

#mobile-menu .bottom .languages {
    padding-block-end: 1.25rem;
    border-block-end: 1px solid currentColor;
    margin-block-end: 1.25rem;
}

#mobile-menu .bottom .languages ul {
    display: flex;
    gap: var(--columns-gap);
    font-size: 1rem;
    line-height: 1.3;
    font-family: var(--ff-title);
    text-transform: uppercase;
}

#mobile-menu .bottom .languages ul li {
    flex-grow: 1;
}

#mobile-menu .bottom .languages ul a {
    display: block;
    padding-block: 0.4375rem;
    text-align: center;
    border-radius: 0.625rem;
    flex-grow: 1;
}

#mobile-menu .bottom .languages ul a[aria-current="true"] {
    background-color: rgb(255 255 255 / 0.1);
}

#mobile-menu .bottom .languages ul a[aria-current="false"] {
    border: 1px solid currentColor;
}

#mobile-menu .bottom .logo {
    display: flex;
    justify-content: center;
}

#mobile-menu .bottom .logo svg {
    max-inline-size: 12.9375rem;
}

@media (max-width: 768px) {
    header.eg-header .navbar .navbar-content {
        justify-content: space-between;
    }
    header.eg-header .navbar .menu-voices-wrapper {
        display: none;
    }
    header.eg-header .navbar .language-switcher-wrapper {
        display: none;
    }

    header.eg-header .header-logo-wrapper {
        max-inline-size: 10.4375rem;
    }
}

/* Hero big title */

section.hero.big-title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
    opacity: 0;
}

section.hero.big-title h1 {
    inline-size: fit-content;
    margin-inline: auto;
    overflow: hidden;
}

section.hero.big-title.scale-up h1 {
    animation: 3s scale-up cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (max-width: 768px) {
    section.hero.big-title {
        padding-block: 5rem;
    }
}

@keyframes scale-up {
    from {
        scale: 0;
    }
    to {
        scale: 1.3;
    }
}

/* Content grid */

section.content-grid {
    display: flex;
    flex-direction: column;
    gap: 6.25rem;
    margin-bottom: 6.5625rem;
}

section.content-grid .grid-row .row-contents {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--columns-gap);
}

section.content-grid .grid-row.align-right .row-contents {
    justify-content: end;
}

section.content-grid .grid-row .row-contents .grid-content {
    grid-column: span 12;
}

/*
section.content-grid .grid-row.align-right .row-contents .grid-content {
    justify-self: end;
}
*/

section.content-grid .grid-row .row-contents .grid-content.width-five {
    grid-column: span 5;
}

section.content-grid .grid-row .row-contents .grid-content.width-six {
    grid-column: span 6;
}

section.content-grid .grid-row .row-contents .grid-content.width-seven {
    grid-column: span 7;
}

section.content-grid .grid-row .row-contents .grid-content.width-ten {
    grid-column: span 10;
}

section.content-grid .grid-row .row-contents .grid-content .content-link {
    border-radius: 0.625rem;
    overflow: hidden;
    display: block;
}

section.content-grid .grid-row .row-contents .grid-content img {
    transition: scale 1s ease;
}

section.content-grid .grid-row .row-contents .grid-content :is(.title, .description) {
    transition: opacity 0.3s ease;
}

section.content-grid .grid-row .row-contents .grid-content.not-scrolled :is(.title, .description) {
    opacity: 0;
}

section.content-grid .grid-row .row-contents .grid-content:not(.not-scrolled) img {
    scale: 1.1;
}

section.content-grid .grid-row .row-contents .grid-content h2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 0.9375;
    margin-block-start: 1.875rem;
}

section.content-grid .grid-row .row-contents .grid-content .description {
    font-size: 1rem;
    line-height: 1.625;
    font-weight: 300;
    margin-block-start: 0.625rem;
    max-inline-size: 27.3125rem;
}

section.content-grid .grid-row .row-contents .grid-content:is(.width-ten, .width-twelve) .description {
    max-inline-size: 42.1875rem;
}

@media (max-width: 768px) {
    section.content-grid .grid-row .row-contents .grid-content:empty {
        display: none;
    }

    section.content-grid,
    section.content-grid .grid-row .row-contents {
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }

    section.content-grid .grid-row .row-contents .grid-content h2 {
        margin-block-start: 0.625rem;
        font-size: 1.5rem;
        line-height: 1.25;
    }

    section.content-grid {
        margin-block-end: 1.875rem;
    }
}

/* Hero img */

section.hero.img {
    min-height: 80vh;
    position: relative;
}

section.hero.img .bg,
section.hero.img .bg .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section.hero.img .bg .bg-img {
    object-fit: cover;
}

@media (max-width: 768px) {
    section.hero.img {
        min-height: unset;
        aspect-ratio: 16/9;
    }
}

/* Project intro */

section.project-intro {
    padding-top: 3.125rem;
}

section.project-intro,
section.project-intro .title-wrapper {
    margin-bottom: 3rem;
}

section.project-intro .project-title {
    font-size: 7.5rem;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
}

section.project-intro .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    grid-column-gap: var(--columns-gap);
    gap: 1.875rem;
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    section.project-intro {
        padding-block-start: 3rem;
    }
    section.project-intro .project-title {
        font-size: 3rem;
        line-height: 1;
    }
    section.project-intro .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
        font-size: 1rem;
        line-height: 1.25;
        font-weight: 500;
    }
}

/* Mixed content grid */

section.mixed-content-grid {
    display: flex;
    flex-direction: column;
    gap: 2.875rem;
    margin-bottom: 6.25rem;
}

section.mixed-content-grid .grid-row .row-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--columns-gap);
}

section.mixed-content-grid .grid-row .row-content.content-type-h_text {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.3125;
}

section.mixed-content-grid .grid-row .row-content.content-type-simple_text {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.3;
}

section.mixed-content-grid .grid-row .row-content.content-type-simple_text strong {
    font-weight: bold;
}

section.mixed-content-grid .grid-row .row-content.content-type-simple_text p:not(:last-child) {
    margin-bottom: 1.3em;
}

section.mixed-content-grid .grid-row .row-content.content-type-simple_text a {
    /* color: var(--c-pink); */
    font-weight: 600;
    text-decoration: underline;
}

section.mixed-content-grid .grid-row .row-content.content-type-video .content-video {
    position: relative;
    aspect-ratio: 16 / 9;
}

section.mixed-content-grid .grid-row .row-content.content-type-video .content-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    section.mixed-content-grid .grid-row .row-content {
        display: block;
    }

    section.mixed-content-grid .grid-row .row-content.content-type-h_text {
        font-size: 1.5rem;
        line-height: 1.25;
        font-weight: 500;
    }

    section.mixed-content-grid {
        gap: 1.875rem;
        margin-block-end: 3.125rem;
    }

    section.mixed-content-grid .grid-row .row-content.content-type-simple_text {
        font-size: 1rem;
        line-height: 1.375;
        font-weight: 300;
    }
}

/* Projects grid */

section.projects-grid {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
    background: white;
    color: black;
}

section.projects-grid .title-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin-bottom: 3.125rem;
    align-items: center;
}

section.projects-grid .title-wrapper button {
    inline-size: 3rem;
    block-size: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background-color: black;
}

section.projects-grid .title-wrapper button.swiper-next {
    justify-self: end;
}

section.projects-grid .swiper-prev {
    order: -1;
}

section.projects-grid .section-title {
    text-align: center;
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: bold;
}

section.projects-grid .project-item a {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

section.projects-grid .project-item .project-image {
    aspect-ratio: 440/248;
    position: relative;
}

section.projects-grid .project-item .project-image img {
    border-radius: 0.625rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.projects-grid .project-item .project-title {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    section.projects-grid {
        padding-block: 3.125rem 2.5rem;
    }

    section.projects-grid .title-wrapper {
        margin-block-end: 1.5rem;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1rem;
    }

    section.projects-grid .section-title {
        font-size: 3rem;
        line-height: 1;
        grid-column: span 2;
        order: -2;
    }

    section.projects-grid .title-wrapper button {
        inline-size: 2rem;
        block-size: 2rem;
    }

    section.projects-grid .title-wrapper button svg {
        scale: 0.75;
    }

    section.projects-grid .project-item a {
        gap: 0.625rem;
    }

    section.projects-grid .project-item .project-title {
        font-size: 1.5rem;
        line-height: 1.25;
    }
}

/* Full page video */

section.full-page-video {
    position: relative;
    height: 100vh;
}

section.full-page-video .video-embed-wrapper,
section.full-page-video .video-poster {
    position: relative;
    width: 100%;
    height: 100%;
}

section.full-page-video .video-embed-wrapper iframe,
section.full-page-video .video-poster img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section.full-page-video .video-poster img {
    object-fit: cover;
}

/* Fixed title - scrolling content */

section.fixed-title-scrolling-content {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
}

section.fixed-title-scrolling-content .columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--columns-gap);
}

section.fixed-title-scrolling-content .column.fixed-title {
    position: sticky;
    top: calc(var(--header-height) + 3.125rem);
    align-self: start;
}

section.fixed-title-scrolling-content .column.fixed-title .title-wrapper {
    transform-origin: top left;
    opacity: 0;
}

section.fixed-title-scrolling-content .column.fixed-title .subtitle-text {
    margin-block-start: 1em;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.3;
}

section.fixed-title-scrolling-content .column.fixed-title h1 {
    overflow: hidden;
}

section.fixed-title-scrolling-content .column.scrolling-content {
    display: flex;
    flex-direction: column;
    gap: 6.25rem;
}

section.fixed-title-scrolling-content .content-block {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

section.fixed-title-scrolling-content .content-block .medium-title {
    font-family: var(--ff-title), serif;
    font-size: 4rem;
    line-height: 1;
    font-weight: bold;
}

section.fixed-title-scrolling-content .content-block .block-text {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.3;
}

section.fixed-title-scrolling-content .content-block.final-link a {
    font-size: 1.75rem;
    line-height: 0.785714286;
    font-weight: 600;
    text-decoration: underline;
    /* color: var(--c-pink); */
}

@media (max-width: 768px) {
    section.fixed-title-scrolling-content {
        padding-top: 4.375rem;
    }

    section.fixed-title-scrolling-content .columns {
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }
    section.fixed-title-scrolling-content .column.fixed-title {
        text-align: center;
        margin-inline: auto;
        position: static;
    }
    section.fixed-title-scrolling-content .content-block {
        gap: 0.625rem;
    }
    section.fixed-title-scrolling-content .content-block .medium-title {
        font-size: 2rem;
        line-height: 1.3125;
    }
    section.fixed-title-scrolling-content .column.fixed-title .subtitle-text,
    section.fixed-title-scrolling-content .content-block .block-text {
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 300;
    }
    section.fixed-title-scrolling-content .column.scrolling-content {
        gap: 3.75rem;
    }

    section.fixed-title-scrolling-content .content-block.final-link a {
        font-size: 1.5rem;
        line-height: 0.916666667;
        font-weight: 600;
    }
}

/* Ultra title + text */

section.ultra-title-text {
    margin-top: 6.25rem;
    margin-bottom: 6.25rem;
}

section.ultra-title-text .container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

section.ultra-title-text .ultra-title {
    inline-size: fit-content;
    overflow: hidden;
    opacity: 0;
}

@keyframes font-up {
    to {
        font-size: 13vw;
    }
}

section.ultra-title-text .text-content {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.3;
}

section.ultra-title-text .text-content p:not(:last-child) {
    margin-bottom: 1.3em;
}

section.ultra-title-text .text-content a {
    font-weight: bold;
    text-decoration: underline;
}

@media (max-width: 768px) {
    section.ultra-title-text .ultra-title {
        font-size: 4.375rem;
        line-height: 1.142857143;
    }

    section.ultra-title-text .container {
        gap: 4.375rem;
    }

    section.ultra-title-text .text-content {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    section.ultra-title-text {
        margin-block: 4.375rem;
    }
}

/* Front page text sections */

section.front-page-text-sections {
    padding-block: 9.25rem;
    text-align: center;
}

section.front-page-text-sections .container {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.front-page-text-sections__item {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.front-page-text-sections__title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
	
	font-size: 45px;
}

.front-page-text-sections__text {
    font-size: 2.4375rem;
    font-weight: 500;
    line-height: 1.4;
	
	font-size: 36px;
}

.front-page-text-sections__text p:not(:last-child) {
    margin-bottom: 0.25em;
}

.front-page-text-sections__final-text {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.3;
    font-style: italic;
    width: fit-content;
    margin-inline: auto;
    padding-inline-start: 13em;
}

@media (max-width: 768px) {
    section.front-page-text-sections {
        padding-block: 4rem;
    }

    section.front-page-text-sections .container {
        gap: 2.5rem;
    }

    .front-page-text-sections__title {
        font-size: 1.875rem;
		
		font-size: 1.6rem;
    }

    .front-page-text-sections__text {
        font-size: 1.5rem;
		
		font-size: 1.3rem;
    }

    .front-page-text-sections__final-text {
        font-size: 1.25rem;
        padding-inline-start: 0;
        margin-inline-start: auto;
        margin-inline-end: 0;
    }
}

/* Text columns */

section.text-columns {
    margin-top: 6.25rem;
    margin-bottom: 6.25rem;
}

section.text-columns .text-columns-cols {
    display: grid;
    grid-template-columns: repeat(var(--number-of-columns), 1fr);
    grid-column-gap: var(--columns-gap);
}

section.text-columns .single-column {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.08;
}

section.text-columns .single-column strong {
    font-weight: bold;
}

section.text-columns .single-column p:not(:last-child) {
    margin-bottom: 0.625rem;
}

@media (max-width: 768px) {
    section.text-columns {
        margin-block: 4.375rem;
    }

    section.text-columns .text-columns-cols {
        gap: 4.375rem;
        display: flex;
        flex-direction: column;
    }

    section.text-columns .single-column p:last-child {
        font-size: 1.25rem;
        line-height: 1.3;
        font-weight: 300;
    }
}

/* Footer */

footer.eg-custom-footer {
    background: #222222;
}

footer.eg-custom-footer .main-footer {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
}

footer.eg-custom-footer .main-footer .footer-columns {
    display: grid;
    grid-template-columns: 4fr 3fr 3fr 2fr;
    grid-gap: var(--columns-gap), 3rem;
}

footer.eg-custom-footer .main-footer .footer-logo-image {
    max-width: 17.4375rem;
}

footer.eg-custom-footer .main-footer .menu-voices-list {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

footer.eg-custom-footer .main-footer .menu-voice {
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 300;
}

footer.eg-custom-footer .main-footer .footer-column.contacts {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

footer.eg-custom-footer .tii-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-inline-start: 4.375rem;
}

footer.eg-custom-footer .tii-wrapper .group-logo {
    max-width: 13.5rem;
}

footer.eg-custom-footer .social-block {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

footer.eg-custom-footer .social-link {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background-color: rgb(255 255 255 / 0.1);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

footer.eg-custom-footer .social-link img {
    width: 0.6875rem;
    height: 0.6875rem;
    object-fit: contain;
}

footer.eg-custom-footer .main-footer .footer-column.contacts .contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

footer.eg-custom-footer .main-footer .footer-column.contacts .contact-info-title {
    font-size: 2rem;
    font-weight: 300;
    text-transform: uppercase;
}

footer.eg-custom-footer .main-footer .footer-column.contacts .contact-info-link {
    font-size: 1.25rem;
    font-weight: 600;
}

footer.eg-custom-footer .main-footer .footer-column.badge {
    display: flex;
    justify-content: flex-end;
}

footer.eg-custom-footer .main-footer .footer-column.badge .badge-link img {
    max-width: 9.3rem;
}

footer.eg-custom-footer .bottom-footer-content {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    font-weight: 300;
}

footer.eg-custom-footer .bottom-footer-content .bottom-footer-text:first-child,
footer.eg-custom-footer .bottom-footer-content .bottom-footer-text:last-child {
    flex: 1;
}

footer.eg-custom-footer .bottom-footer-content .bottom-footer-text:last-child {
    text-align: right;
}

footer.eg-custom-footer .footer-partners {
    border-top: 0.5px solid currentColor;
    padding-block-start: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    align-items: center;
    margin-block-start: 2.5rem;
}

footer.eg-custom-footer .footer-partners .img-wrapper {
    max-inline-size: 8.5rem;
}

@media only screen and (min-width: 768px) {
    footer.eg-custom-footer .footer-partners {
        display: none;
    }
}

@media (max-width: 768px) {
    footer.eg-custom-footer .main-footer .footer-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "logo logo"
            "nav contacts"
            "badge badge";
    }

    footer.eg-custom-footer .main-footer {
        padding-block: 2.5rem;
    }

    footer.eg-custom-footer .main-footer .footer-columns .logo {
        grid-area: logo;
        max-inline-size: 10.375rem;
        margin-block-end: 1.875rem;
    }
    footer.eg-custom-footer .main-footer .footer-columns .nav {
        grid-area: nav;
    }
    footer.eg-custom-footer .main-footer .footer-columns .contacts {
        grid-area: contacts;
        display: flex;
        flex-direction: column-reverse;
        justify-content: start;
    }
    footer.eg-custom-footer .main-footer .footer-columns .badge {
        grid-area: badge;
        display: none;
    }

    footer.eg-custom-footer .main-footer .menu-voices-list {
        gap: 1rem;
    }

    footer.eg-custom-footer .main-footer .menu-voices-list li {
        font-size: 1.25rem;
    }

    footer.eg-custom-footer .main-footer .footer-columns .contacts .group-block {
        display: none;
    }

    footer.eg-custom-footer .main-footer .footer-column.contacts .contact-info-title {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    footer.eg-custom-footer .main-footer .footer-column.contacts .contact-info-link {
        font-size: 1rem;
        line-height: 1.3;
        font-weight: 400;
    }

    footer.eg-custom-footer .bottom-footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    footer.eg-custom-footer .tii-wrapper {
        margin-inline-start: 2.625rem;
    }
}

/* ======================================== */
/* CARDS GRID ELEMENT */
/* ======================================== */

article.card-grid-element .layers {
    aspect-ratio: 1/1;
}

article.card-grid-element .layer-bg::after {
    background-image: linear-gradient(transparent, black);
    opacity: 0.5;
}

article.card-grid-element .layer-fg {
    padding: 1.875rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

article.card-grid-element .text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-wrap: balance;
    max-inline-size: 16.375rem;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

@media only screen and (hover: hover) {
    article.card-grid-element:not(:hover) .text-wrapper {
        transform: translateY(1rem);
        opacity: 0;
    }
}

article.card-grid-element .card-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 0.9375;
    font-family: var(--ff-title);
    text-transform: uppercase;
}

article.card-grid-element .card-description {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.625;
}

article.card-grid-element .card-cta {
    border-radius: 0.625rem;
    width: fit-content;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.625;
    font-family: var(--ff-title);
    padding: 0.4375rem 1.1875rem;
    background-color: black;
    color: white;
    text-transform: uppercase;
}

/* ======================================== */
/* CARDS GRID */
/* ======================================== */

section.cards-grid .container {
    display: flex;
    flex-direction: column;
    gap: var(--columns-gap);
    margin-block-end: 6.25rem;
}

section.cards-grid [data-row-layout="mosaic"] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--columns-gap);
    grid-auto-flow: dense;
    grid-auto-rows: 1fr;
}

section.cards-grid [data-row-layout="mosaic"] .text {
    display: flex;
    flex-direction: column;
    gap: var(--columns-gap);
    justify-content: space-between;
    grid-column: 3/5;
}

section.cards-grid [data-row-layout="mosaic"] .text .title {
    text-wrap: balance;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.3125;
    font-family: var(--ff-main);
}

section.cards-grid [data-row-layout="mosaic"] .text .description {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 300;
}

section.cards-grid [data-row-layout="mosaic"] article.card-grid-element:is(:nth-child(2), :nth-child(5)) {
    grid-column: span 2;
    grid-row: span 2;
}

section.cards-grid [data-row-layout="mosaic"] article.card-grid-element:nth-child(5) {
    grid-column: 3/5;
    grid-row: 2/4;
}

section.cards-grid [data-row-layout="simple"] {
    display: flex;
    align-items: center;
    gap: var(--columns-gap);
}

section.cards-grid [data-row-layout="simple"] article.card-grid-element {
    flex-basis: 0;
    flex-grow: 1;
}

@media (max-width: 768px) {
    section.cards-grid .container {
        display: flex;
        flex-direction: column;
        margin-block-end: 4.375rem;
    }

    section.cards-grid [data-row-layout] {
        display: flex;
        flex-direction: column;
        gap: 1.875rem;
        align-items: stretch;
    }

    section.cards-grid [data-row-layout="mosaic"] .text {
        gap: 1.875rem;
    }

    section.cards-grid [data-row-layout="mosaic"] .text .title {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    section.cards-grid [data-row-layout="mosaic"] .text .description {
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 300;
        margin-block-end: 2.5rem;
    }
}

/* ======================================== */
/* CARD PERSON */
/* ======================================== */

.card-person .layers {
    border-radius: 0.625rem;
    overflow: hidden;
    block-size: 100%;
    position: relative;
}

.card-person .layer-fg {
    padding: 0.625rem;
    display: flex;
    align-items: start;
    justify-content: end;
}

.card-person .layer-fg .metadata {
    text-align: center;
    padding: 0.4375rem 1.25rem;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.625;
    font-family: var(--ff-title);
    border-radius: 0.625rem;
}

.card-person .layer-fg .metadata a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.card-person .layer-fg .metadata .name {
    font-weight: 700;
}

@media (max-width: 768px) {
    .card-person .layer-fg {
        justify-content: center;
    }
}

/* ======================================== */
/* WE ARE WRAPPER */
/* ======================================== */

body.page-template-we-are #main {
    padding-top: 11.5625rem;
}

.weare-wrapper {
    display: flex;
    flex-direction: column;
}

.weare-wrapper .top-part {
    order: -1;
}

.weare-wrapper .top-part .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--columns-gap);
    min-block-size: 55.25rem;
}

.weare-wrapper .top-part .container > * {
    display: flex;
    flex-direction: column;
    gap: var(--columns-gap);
    justify-content: end;
}

.weare-wrapper .top-part .container div:first-child .card-person {
    flex-grow: 1;
    margin-top: 26%;
}

.weare-wrapper .top-part .container div:last-child .card-person:last-child {
    min-block-size: 17.8125rem;
}

.weare-wrapper .top-part .container div:last-child .card-person:first-child {
    flex-grow: 1;
}

.weare-wrapper .bottom-part .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 17.8125rem 1fr;
    gap: var(--columns-gap);
    grid-template-areas:
        "card1 card2"
        "text card2";
    padding-bottom: 6.25rem;
}

.weare-wrapper .bottom-part .container .text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4.125rem;
}

.weare-wrapper .bottom-part .container .card-person:nth-child(3) {
    grid-area: card2;
}

.weare-wrapper .bottom-part .container .card-person:nth-child(3) .layers {
    min-block-size: 35.5625rem;
}

.weare-wrapper .bottom-part .text .title {
    font-family: var(--ff-main);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.3125;
}

.weare-wrapper .bottom-part .text .description {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .weare-wrapper .top-part {
        order: 0;
    }
    body.page-template-we-are #main {
        padding-top: var(--header-height);
    }
    .weare-wrapper .top-part .container {
        display: flex;
        flex-direction: column;
        gap: 1.875rem;
    }
    .weare-wrapper .top-part .container > div:first-child .card-person {
        margin-block-start: 0;
    }
    .weare-wrapper .top-part .container > div:first-child .card-person .layers {
        min-block-size: 29.0625rem;
    }
    .weare-wrapper .bottom-part .container .card-person:nth-child(3) .layers,
    .weare-wrapper .top-part .container > div:last-child .card-person:first-child .layers {
        min-block-size: 22.4375rem;
    }
    .weare-wrapper .top-part .container > div:last-child .card-person:last-child .layers {
        min-block-size: 11.25rem;
    }
    .weare-wrapper .bottom-part .container {
        display: flex;
        flex-direction: column;
    }
    .weare-wrapper .bottom-part .container .text {
        gap: 1.875rem;
    }
    .weare-wrapper .bottom-part .card-person:nth-child(2) .layers {
        min-block-size: 22.4375rem;
    }
    .weare-wrapper .bottom-part .card-person:nth-child(3) .layers {
        min-block-size: 11.25rem;
    }
    .weare-wrapper .bottom-part .container {
        padding-block-end: 5rem;
    }
}

/* ======================================== */
/* SINGLE PROJECT SIDE */
/* ======================================== */

section.single-project-side .main-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--columns-gap);
    padding-block-end: 6.25rem;
}

section.single-project-side .pre-text {
    font-size: 2rem;
    line-height: 1.3125;
    font-weight: 500;
    max-inline-size: max(65%, 56.875rem);
    margin-block-end: 3.125rem;
}

section.single-project-side .video-wrapper {
    max-inline-size: 34.9375rem;
    margin-inline: auto;
}

section.single-project-side .video-wrapper iframe {
    aspect-ratio: var(--aspect-ratio, 640/360);
    border-radius: 0.625rem;
}

section.single-project-side .text h2 {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 2rem;
    font-family: var(--ff-main);
    line-height: 1.3125;
    margin-block-end: 3.125rem;
}

section.single-project-side .text .rich-text {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 300;
}

section.single-project-side .text .rich-text:not(:last-child) {
    margin-block-end: 3.125rem;
}

section.single-project-side .text a {
    /* color: var(--c-pink); */
}

@media (max-width: 768px) {
    section.single-project-side .main-content {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
        padding-block-end: 3.125rem;
    }

    section.single-project-side .main-content .text {
        display: contents;
    }

    section.single-project-side .text .rich-text:not(:last-child),
    section.single-project-side .text h2 {
        margin-block-end: 0;
        order: -1;
    }

    section.single-project-side .text .rich-text {
        font-size: 1rem;
        line-height: 1.375;
        font-weight: 300;
    }

    section.single-project-side .pre-text {
        font-size: 1.5rem;
        line-height: 1.25;
        margin-block-end: 1.875rem;
        max-inline-size: none;
    }
}

/* ======================================== */
/* LOGOS MARQUEE */
/* ======================================== */

section.logos-marquee {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    margin-block-end: 7.5rem;
    overflow: hidden;
}

section.logos-marquee .marquee .marquee-section,
section.logos-marquee .marquee {
    display: flex;
    flex-shrink: 0;
}

section.logos-marquee .img-wrapper {
    inline-size: 12.8125rem;
    block-size: 5rem;
    margin-inline: var(--columns-gap);
    background-color: #0a0a0a;
    padding: 0.5rem;
}

section.logos-marquee .img-wrapper img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: contain;
}

section.logos-marquee .marquee .marquee-section {
    animation: marquee 20s linear infinite;
}

section.logos-marquee .marquee:nth-child(even) .marquee-section {
    animation-direction: reverse;
}

@keyframes marquee {
    from {
        translate: 0%;
    }
    to {
        translate: -100%;
    }
}

@media (max-width: 768px) {
    section.logos-marquee {
        margin-block-end: 4.375rem;
    }

    section.logos-marquee .img-wrapper {
        max-inline-size: 10.4375rem;
    }
}

/* ======================================== */
/* LANGUAGE SWITCHER WRAPPER */
/* ======================================== */

nav.language-switcher-wrapper {
    position: relative;
    display: flex;
    justify-content: end;
}

nav.language-switcher-wrapper button {
    background-color: rgb(255 255 255 / 0.1);
    padding-block: 0.4375rem;
    padding-inline: 0.825rem 0.6875rem;
    display: inline-flex;
    gap: 0.625rem;
    align-items: center;
    font-size: 1rem;
    line-height: 1.625;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--ff-title);
    border-radius: 0.625rem;
    transition: scale 0.1s ease;
}

nav.language-switcher-wrapper button:hover {
    scale: 1.05;
}

nav.language-switcher-wrapper button svg {
    transition: rotate 0.3s ease;
}

nav.language-switcher-wrapper button[aria-expanded="true"] svg {
    rotate: 180deg;
}

nav.language-switcher-wrapper button + div {
    position: absolute;
    border-radius: 0.625rem;
    padding: 0.2rem;
    background-color: rgb(255 255 255 / 0.1);
    inset-inline-end: 0;
    inset-block-start: 3em;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
    transform-origin: top right;
}

nav.language-switcher-wrapper button + div[inert] {
    opacity: 0;
    transform: scale(0.5);
}

nav.language-switcher-wrapper button + div a {
    display: inline-block;
    padding: 0.5em 1em;
    font-size: 0.875rem;
}

nav.language-switcher-wrapper button + div a:where(:hover, :focus-visible) {
    background-color: rgb(255 255 255 / 0.1);
    border-radius: 0.4rem;
}

.video-controls-wrapper {
    position: relative;
}

.video-controls-wrapper .video-btn {
    position: absolute;
    inset-block-end: 1rem;
    background: black;
    line-height: 1;
    aspect-ratio: 1/1;
    height: 3.5rem;
    border-radius: 50%;
    border: 1px solid currentColor;
}

.video-controls-wrapper .play-btn {
    inset-inline-start: 1rem;
}

.video-controls-wrapper .mute-btn {
    inset-inline-end: 1rem;
}