/* -+-----------------+--------------------------+---- */
/* +------------+------------+--------------+------+-- */
/* ----+--------------+------------*=@---------------- */
/* ---------------+---------------@@@@@-------+------- */
/* --------+----------------------*@@@%-----------+--- */
/* --+----------------+------------%%%%=-------------- */
/* ---------------------------=*%%::-+**=.**=--+------ */
/* ---------+----------------#@@@%-::::::::%%--------- */
/* ----+---------+-----------@@@@%==----::-%@%-------- */
/* -------------------------*@@@@#*+=-----=@@@-------- */
/* -+------+---------+------@@@-#%#+==---=--@@%----+-- */
/* -----+--------+---------@@@*-=%#*+=--==-*@@*------- */
/* -----------------------+@@=---##*==-===-@@%---+---- */
/* --+-----+- Ah shit, here we go again. -#@*--------- */
/* ----------------+------@@@----%%*++====+@--------+- */
/* ------+----------------@@@---%%#*+=++-+@=----+----- */

/* FONTS */

@font-face {
    font-family: 'Fengardo Neue';
    src: url('../fonts/public/FengardoNeue_Regular.woff2') format('woff2'),
        url('../fonts/public/FengardoNeue_Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

/* TOKENS */

:root {
    --black: hsl(0, 0%, 0%);
    --grey-900: hsl(0, 0%, 10%);
    --grey-800: hsl(0, 0%, 14%);
    --grey-700: hsl(0, 0%, 18%);
    --grey-600: hsl(0, 0%, 26%);
    --grey-500: hsl(0, 0%, 40%);
    --grey-400: hsl(0, 0%, 60%);
    --grey-300: hsl(0, 0%, 74%);
    --grey-200: hsl(0, 0%, 86%);
    --grey-100: hsl(0, 0%, 92%);
    --grey-50: hsl(0, 0%, 95%);
    --white: hsl(0, 0%, 100%);

    --yellow: #e3ff00;
    --orange: #ef4922;

    --beige: #E7D1B2;
    --cream: #f7f3ef;

    --sans-type: "Fengardo Neue", sans-serif;

    --text-xs: 1.4rem;
    --text-s: 1.8rem;
    --text-m: 2.4rem;
    --text-l: 3.6rem;

    --100vh: calc(100 * var(--vh));
    --sticky-offset: calc(var(--spacing-h) + var(--logo-bar-height, 0px));

    --spacing: 2rem;
    --spacing-v: var(--spacing);
    --spacing-h: calc(var(--spacing) * 2.5);
    --spacing-half: calc(var(--spacing) / 2);
    --spacing-quarter: calc(var(--spacing) / 4);
    --spacing-v-half: calc(var(--spacing-v) / 2);
    --spacing-v-double: calc(var(--spacing-v) * 2);
    --spacing-h-half: calc(var(--spacing-h) / 2);
    --stroke: 2px;

    --corner-radius: 1.5rem;
    --corner-radius-inner: calc(var(--corner-radius) - var(--spacing-v) / 3);
    --corner-radius-pill: calc(var(--corner-radius) / 2);
    --corner-radius-third: calc(var(--corner-radius) / 3);

    --outer-padding: var(--stroke);
    --outer-width: calc(100vw - var(--outer-padding) * 2);

    --scrollAnimDistance: 6rem;
    --scrollAnimDuration: .5s;
    --scrollAnimTriggerArea: -2rem;

    --noise-state: block;
    --noise-amount: .4;
    --noise-speed: 2s;
    --noise-filters: contrast(0);
    --noise-blend: screen;
}

.dark-theme {
    --theme-background: var(--grey-600);
    --theme-background-accent: red;

    --theme-text: var(--beige);
    --theme-text-accent: red;

    --theme-card-background: var(--black);
    --theme-card-background-accent: red;
    --theme-card-hover-background: red;
    --theme-card-hover-background-accent: red;
    --theme-card-hover-text-accent: red;

    --theme-thumbnail-background: red;
    --theme-thumbnail-text: red;

    --theme-fab-background: rgba(0, 0, 0, .75);
    --theme-fab-background-accent: var(--black);
    --theme-fab-text: var(--grey-400);
    --theme-fab-text-accent: var(--grey-100);
    --theme-fab-hover-text: var(--grey-100);
    --theme-fab-hover-text-accent: var(--grey-100);

    --theme-btn-background: red;
    --theme-btn-text: red;

    --theme-graphics: red;
    --theme-graphics-background: red;
    --theme-graphics-text: red;
    --theme-graphics-accent: red;

    --noise-amount: .15;
}

.light-theme {
    --theme-background: var(--grey-300);
    --theme-background-accent: red;

    --theme-text: var(--black);
    --theme-text-accent: red;

    --theme-card-background: var(--beige);
    --theme-card-background-accent: var(--grey-100);
    --theme-card-hover-background: var(--grey-100);
    --theme-card-hover-background-accent: var(--grey-200);
    --theme-card-hover-text-accent: var(--orange);

    --theme-thumbnail-background: var(--grey-50);
    --theme-thumbnail-text: var(--grey-500);

    --theme-fab-background: rgb(255, 255, 255, .9);
    --theme-fab-background-accent: var(--grey-100);
    --theme-fab-text: var(--grey-600);
    --theme-fab-text-accent: var(--grey-800);
    --theme-fab-hover-text: var(--orange);
    --theme-fab-hover-text-accent: var(--orange);

    --theme-btn-background: red;
    --theme-btn-text: red;

    --theme-graphics: red;
    --theme-graphics-background: red;
    --theme-graphics-text: red;
    --theme-graphics-accent: red;

    --noise-amount: .2;
    --noise-blend: plus-lighter;
}

/* BASE */

::-webkit-scrollbar {
    display: none;
}

::selection {
    background: var(--theme-text);
    color: var(--theme-card-background);
}

html,
body {
    font-family: var(--sans-type);
    font-size: var(--text-m);
    color: var(--theme-text);
    background-color: var(--theme-background);

    min-height: var(--100vh);
    min-width: 100vw;

    overflow: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;

    transition: all .3s ease 0s;
    transition-property: background-color, color;
}

html {
    font-size: .7rem;
}

@media screen and (max-width: 2200px) {
    html {
        font-size: calc(.7rem + (100vw - 1920px) / 400);
    }
}

@media screen and (max-width: 1920px) {
    html {
        font-size: calc(.65rem + (100vw - 1920px) / 400);
    }
}

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

    html {
        font-size: calc(.63rem + (100vw - 1760px) / 400);
    }
}

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

    html {
        font-size: calc(.55rem + (100vw - 1440px) / 400);
    }
}

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

    html {
        font-size: calc(.55rem + (100vw - 1280px) / 400);
    }
}

@media screen and (max-width: 1080px) {
    :root {
        --spacing: 1.5rem;
    }

    html {
        font-size: calc(.54rem + (100vw - 1080px) / 400);
    }
}

@media screen and (max-width: 900px) {
    html {
        font-size: calc(.475rem + (100vw - 900px) / 400);
    }
}

@media screen and (max-width: 700px) {
    :root {
        --spacing-h: calc(var(--spacing) * 1.5);
    }

    html {
        font-size: calc(.55rem + (100vw - 700px) / 400);
    }
}

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

    html {
        font-size: calc(.5rem + (100vw - 500px) / 400);
    }
}

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

    html {
        font-size: calc(.45rem + (100vw - 400px) / 400);
    }
}

/* MAIN LAYOUT */

.outer-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--outer-padding);
    padding: var(--outer-padding);
    width: 100%;
}

.scroll-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--stroke);

    border-radius: var(--corner-radius);

    --scroll-height: calc(var(--100vh) - var(--header-height) - var(--stroke) * 3);
    scroll-timeline: --page-scroll block;
    height: var(--scroll-height);
    overflow-y: auto;
}

.outer-wrapper:has(> .scroll-wrapper.horz) {
    height: var(--100vh);
}

.scroll-wrapper.horz {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
}

.scroll-wrapper.horz > main,
.scroll-wrapper.horz > main > section {
    flex: 1;
    min-height: 0;
}

main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--stroke);

    border-radius: var(--corner-radius);

    width: 100%;
}

main > section {
    background-color: var(--theme-background);
}

.column {
    background-color: var(--theme-card-background);

    padding: var(--spacing-v) var(--spacing-h);
    border-radius: var(--corner-radius);

    height: 100%;
    height: -webkit-fill-available;
}

hr {
    color: var(--theme-background);
    border-width: calc(var(--stroke) / 2);
    border-style: solid;

    margin: var(--spacing-h) 0;
}

.short-column hr,
.dynamic-column hr {
    margin: var(--spacing-v-half) 0;
    opacity: .34;
}

@media screen and (max-width: 900px), screen and (orientation: portrait) {
    .scroll-wrapper.horz {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .scroll-wrapper.horz > main,
    .scroll-wrapper.horz > main > section {
        flex: none;
        flex-direction: column;
    }
}

/* HEADER */

header {
    font-family: var(--sans-type);
    font-size: var(--text-m);

    background-color: var(--theme-card-background);
    color: var(--theme-text);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding: var(--spacing-v) var(--spacing-h);
    border-radius: var(--corner-radius);
}

header .logo-wrapper {
    display: flex;
    flex-direction: row;
    gap: .5ch;
}

header .logo-wrapper .logo {
    display: inline-block;
    line-height: 1;
}

/* NAVIGATION */

nav {}

nav .nav-item a h1 {
    display: inline;
    line-height: inherit;
}

.nav-menu-btn {
    display: none;
}

.theme-switch-wrapper .theme-switch {
    border: solid var(--stroke) var(--color);
    margin: 0;

    height: var(--height);
    width: var(--width);
    flex-shrink: 0;

    position: relative;

    transition: all .15s ease-out;
    cursor: pointer;
    z-index: 250;
    pointer-events: all;
}

.nav-menu-btn .menu-switch-wrapper {}

nav .nav-item-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-v) var(--spacing-h);

    padding: 0;
}

nav .nav-item {}

nav .nav-item a {
    user-select: none;
}

.nav-item.has-children {
    position: relative;
}

.nav-item.has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--spacing-quarter);
}

.submenu > .nav-item.has-children::after {
    top: 0;
    right: auto;
    bottom: 0;
    left: 100%;
    height: auto;
    width: var(--spacing-quarter);
}

.submenu > .nav-item.has-children:has(> .submenu.flip)::after {
    left: auto;
    right: 100%;
}

.nav-item .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--spacing-quarter);
    margin-top: var(--spacing-quarter);
    width: max-content;

    background: var(--theme-fab-background);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: var(--corner-radius);
    box-shadow: 0 0 1rem var(--theme-fab-background-accent);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.97);
    transform-origin: top left;
    transition: all .2s ease 0s;
    transition-property: opacity, transform, visibility;

    z-index: 251;
}

.nav-item .submenu.flip {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.nav-item .submenu .nav-item {
    padding: var(--spacing-quarter) var(--spacing-half);
}

.nav-item .submenu .submenu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: var(--spacing-quarter);
}

.nav-item .submenu .submenu.flip {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: var(--spacing-quarter);
}

.nav-item.has-children:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

@media (hover: hover) {
    .nav-item.has-children:hover > .submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scale(1);
    }
}

/* NAV LINK UNDERLINE ANIMATION */

nav.main-nav a,
header .logo-wrapper a:has(.logo),
.nav-menu-btn .menu-switch-wrapper {
    display: inline-block;
    position: relative;
    padding: 0 .15ch .1ch;
    margin: 0 -.15ch;
    
    cursor: pointer;
}

nav.main-nav a::after,
header .logo-wrapper a:has(.logo)::after,
.nav-menu-btn .menu-switch-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    background-color: var(--grey-100);
    height: .5px;
    width: 0;
    left: 50%;
    bottom: 0;
    transition: all 0.3s ease 0s;
    transition-property: width, left, background-color;
}

@media (hover: hover) {

    nav.main-nav a:hover,
    header .logo-wrapper a:has(.logo):hover,
    .nav-menu-btn:hover .menu-switch-wrapper {
        color: var(--theme-fab-hover-text);
    }

    nav.main-nav a:hover::after,
    header .logo-wrapper a:has(.logo):hover::after,
    .nav-menu-btn:hover .menu-switch-wrapper::after {
        width: 100%;
        left: 0;
        background-color: var(--theme-fab-hover-text);
    }
}

/* NAVIGATION (MOBILE) */

@media screen and (max-width: 700px) {
    header {
        flex-direction: column;
        gap: var(--spacing-v);
    }

    header .inner-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        width: 100%;
    }

    header .logo {}

    header .logo-wrapper {}

    header .logo-wrapper a {}

    header .nav-menu-btn {
        display: flex;
    }

    header nav {
        display: none;
    }

    header nav.active {
        display: flex;
        width: 100%;
    }

    header nav .nav-item-list {
        width: 100%;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
    }

    header nav .nav-item {
        opacity: 0;
        transition: opacity .25s ease-out;
    }

    header nav.active .nav-item.active {
        opacity: 1;
    }

    header nav .nav-item:has(.theme-switch-wrapper) {}

    header nav .theme-switch-wrapper {}

    header nav .theme-switch-wrapper .theme-switch,
    header .nav-menu-btn .menu-switch-wrapper {}
}

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

    nav .nav-item:has(.theme-switch-wrapper),
    .nav-menu-btn {}
}

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

    nav .nav-item:has(.theme-switch-wrapper),
    .nav-menu-btn {}
}

/* THEME SWITCH */

.theme-switch-wrapper {
    --height: 2.25rem;
    --width: calc(var(--height) * 2 - var(--margin) * 2);
    --margin: 0.2rem;
    --stroke: 1.5px;
    --inner: calc(var(--height) - var(--margin) * 2 - var(--stroke) * 2);
    --travel: calc(var(--width) - var(--stroke) * 2 - var(--inner) - var(--margin) * 2);
    --color: var(--theme-text);
    opacity: .85;
    display: flex;
}

.theme-switch-wrapper .theme-switch {
    appearance: none;

    border-radius: calc(var(--height) / 4);

    animation: swing 3s cubic-bezier(.36, .07, .19, .97) both infinite;
    animation-delay: .2s;
}

.theme-switch-wrapper .theme-switch::after {
    content: "";

    border: solid var(--stroke) var(--color);
    border-radius: 50%;

    height: var(--inner);
    width: var(--inner);

    top: var(--margin);
    left: var(--margin);

    position: absolute;

    transition: all 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
}

.theme-switch-wrapper .theme-switch:indeterminate::after {
    left: calc(var(--margin) + var(--travel) / 2);
}

.theme-switch-wrapper .theme-switch:checked:not(:indeterminate)::after {
    left: calc(var(--margin) + var(--travel));
}

@media (hover:hover) {
    .theme-switch-wrapper:hover {
        opacity: 1;
    }

    .theme-switch-wrapper:hover .theme-switch::after {
        background-color: var(--theme-fab-hover-text-accent);
        border-color: var(--theme-fab-hover-text-accent);
    }
}

/* COLUMN LAYOUT */

.column-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--stroke);

    width: 100%;
}

.column-layout > .section-column {
    width: 100%;
}

.column-layout .short-column,
.column-layout .dynamic-column {
    width: 45ch;
    flex-shrink: 0;
}

.column-layout .short-column:only-child {
    width: 100%;
}

.column-layout .column:has(> figure) {
    --card-padding-v: var(--spacing-h);
    --card-padding-h: var(--spacing-h);
    padding: var(--spacing-h);
}

.column-layout .column:has(> .infinite-gallery.vertical) {
    --card-padding-v: 0px;
    --card-padding-h: var(--spacing-h);
    padding: 0 var(--spacing-h);
}

.column-layout .column > figure img {
    border-radius: var(--corner-radius-inner);
    object-fit: cover;
}

.column-layout .column figure {
    display: flex;
    justify-content: center;
}

.column-layout .column > figure {
    position: sticky;
    top: var(--spacing-h);
}

figure.logo img {
    max-width: 50%;
    aspect-ratio: 1.1 / 1;
    object-fit: contain;
}

.column-layout .column.post-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: clip;
}

.column-layout .post-card > a,
.column-layout .post-card > .post-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.column-layout .post-card .post-meta {
    font-size: var(--text-m);

    padding: var(--spacing-v) var(--spacing-h-half);
}

.column-layout .post-card .meta-header,
.column-layout .post-card .meta-footer {
    font-size: var(--text-s);
}

.column-layout .post-card .meta-header {
    padding-bottom: calc(var(--spacing-v) - var(--figure-pad));

    display: flex;
    flex-direction: column;
    gap: var(--spacing-v-half);
}

.column-layout .post-card .meta-footer {
    padding-top: calc(var(--spacing-v) - var(--figure-pad));
}

.column-layout .post-card {
    --figure-pad: var(--spacing-v-half);
}

.column-layout .post-card figure {
    flex: 1;
    padding: var(--figure-pad);
    min-height: 0;
}

.column-layout .post-card figure .media {
    width: 100%;
}

.column-layout .post-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--corner-radius-inner);
}

.column-layout .dynamic-column {
    height: 100%;
}

.column-layout.gallery .post-card figure {
    box-sizing: content-box;
    flex: 1 1 0;
    align-self: center;
    aspect-ratio: var(--ar, 1);
}

.column-layout.gallery .post-card figure img {
    aspect-ratio: unset;
}

@media screen and (max-width: 1080px) {
    .column-layout.about-wrapper .short-column {
        width: 35vw;
    }
    
    .column-layout.case-study-section .short-column {
        width: 50%;
    }
    
    figure.logo img {
        max-width: 85%;
    }
}

@media screen and (max-width: 700px) {
    .column-layout {
        flex-direction: column;
    }

    .column-layout .short-column{
        width: 100% !important;
    }

    figure.logo img {
        max-width: 75%;
        aspect-ratio: 1.1 / 1;
    }
    
    .column-layout .post-card .post-meta{
        padding: calc(var(--spacing-v-double) - var(--stroke)) var(--spacing-h) var(--spacing-v-double);
    }
}

@media screen and (max-width: 900px), screen and (orientation: portrait) {
    .scroll-wrapper.horz > main > section .column {
        width: 100%;
        height: 60vh;
    }

    .scroll-wrapper.horz > main > section .dynamic-column.post-card,
    .scroll-wrapper.horz > main > section .post-details {
        height: auto;
    }

    .scroll-wrapper.horz .column-layout.gallery .post-card figure {
        flex: none;
        align-self: stretch;
    }
}

/* IMAGE OVERLAY */

.media {
    position: relative;
    overflow: hidden;
    border-radius: var(--media-radius, var(--corner-radius-inner));
}

.media > img,
.media > video {
    display: block;
}

.media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--grey-400);
    opacity: 0.075;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.info-photo .media {
    --media-radius: var(--corner-radius);
}

/* POST DETAILS */

.column-layout .post-details {
    font-feature-settings: 'case', 'tnum';
    display: flex;
    flex-direction: column;
    gap: var(--spacing-v-half);
    padding: var(--spacing-v) var(--spacing-h-half);
    overflow-y: auto;
}

.column-layout .post-details .post-meta,
.column-layout .post-details .post-meta .post-terms {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-v-half);
}

@media screen and (max-width: 700px){
    .column-layout .post-details {
        padding: var(--spacing-v-double) var(--spacing-h);
    }
}

/* PILL LINKS */

.column-layout .meta-item,
.column-layout p a,
footer .footer-contacts .footer-list .footer-item a {
    border: solid 1px var(--theme-text);
}

.column-layout .meta-item,
.column-layout p a {
    padding: .75ch 1.5ch .5ch;
    border-radius: var(--corner-radius-pill);
}

@media (hover:hover) {

    .column-layout .meta-item:has(a):hover,
    .column-layout p a:hover,
    footer .footer-contacts .footer-list .footer-item a:hover {
        background-color: var(--theme-text);
        color: var(--theme-card-background);
    }
}

.column-layout .meta-item {
    font-size: var(--text-s);
    font-feature-settings: 'case', 'tnum';
    display: inline-block;
}

/* COLUMN VARIANTS */

.column-layout .wide-column {
    flex: 1;
}

.column-layout .text-column {
    --card-padding-v: calc(var(--spacing-v) * 6);
    --card-padding-h: calc(var(--spacing-h) * 2);
    padding: var(--card-padding-v) var(--card-padding-h);
}

.column-layout .short-column.text-column {
    --card-padding-v: var(--spacing-v);
    --card-padding-h: calc(var(--spacing-h) / 2);
    padding: var(--card-padding-v) var(--card-padding-h);
}

/* COLUMN TYPOGRAPHY */

.column-layout h1,
.column-layout h2 {
    font-size: var(--text-l);
    font-feature-settings: 'case', 'tnum';
}

.column-layout p {
    line-height: 1.3;
}

.column-layout p.ql-align-center {
    text-align: center;
}

.column-layout p a {
    display: inline-block;

    font-size: .75em;
    transform: translateY(-.25ch);

    margin: .75ch 0 .5ch;
}

.column-layout .wide-column h2,
.column-layout .wide-column h3,
.column-layout .wide-column h4,
.column-layout .wide-column h5 {
    position: sticky;

    background-color: var(--theme-card-background);
    width: fit-content;

    font-feature-settings: 'tnum';
}

.column-layout .wide-column h2 {
    top: var(--sticky-offset);
    z-index: 4;
}

.column-layout .wide-column h3 {
    top: calc(var(--sticky-offset) + 2.5em);
    z-index: 3;
}

.column-layout .list-column .category > h2 {
    margin-bottom: 1lh;
}

.column-layout .list-column > hr {
    margin: calc(var(--spacing-h) + 1lh) 0;
}

.column-layout .list-column h4,
.column-layout .list-column h5 {
    font-weight: 900;

    padding-top: 1lh;
    padding-bottom: .25lh;
}

.column-layout .list-column h4 {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.column-layout .list-column h4,
.column-layout .list-column h5,
.column-layout .list-column p {
    padding-left: 22rem;
}

@media screen and (max-width: 900px) {
    .column-layout .text-column {
        --card-padding-v: var(--spacing-v-double);
        --card-padding-h: var(--spacing-h);
    }
    
    .column-layout .list-column h4,
    .column-layout .list-column h5,
    .column-layout .list-column p {
        padding-left: 20rem;
    }
}

@media screen and (max-width: 700px) {
    .column-layout .wide-column h2 {
        padding: 2.5rem 0 1.25rem;
        top: calc(var(--sticky-offset) + -2.5rem);

    }

    .column-layout .wide-column h3 {
        text-align: right;
        padding: 3.5rem 0 1.5rem;

        width: 100%;
        top: calc(var(--sticky-offset) + -2.5rem);

    }

    .column-layout .list-column h4,
    .column-layout .list-column h5,
    .column-layout .list-column p {
        padding-left: 0;
    }
}

/* HERO BANNER */

.hero-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    --banner-height: calc(var(--100vh) - var(--header-height) * 2.25);

    position: relative;
    overflow: clip;
}

.hero-wrapper .hero-heading {
    font-size: 12vw;
    text-align: center;

    display: flex;
    align-items: center;

    width: 100%;
    height: var(--banner-height);

    mix-blend-mode: exclusion;
    z-index: 2;
}

.hero-gallery {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-gallery .hero-image {
    --w: calc(var(--cloud-w, 14) * 1rem * var(--cloud-scale, 1.4));
    position: absolute;
    left: calc((100% - var(--w)) * var(--x, 0));
    top: calc((100% - var(--w) / var(--ar, 1)) * var(--y, 0));
    width: var(--w);
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--rot, 0deg));
    will-change: transform;

    opacity: 0;
    transition: opacity .8s ease-out .5s;
}

.hero-gallery.ready .hero-image {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-gallery .hero-image {
        transition: none;
    }
}

.hero-gallery .hero-image img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 700px) {
    .hero-wrapper .hero-heading {
        font-size: 16vw;
    }
}

/* INFINITE GALLERY */

.infinite-gallery {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-h);

    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infinite-gallery:active {
    cursor: grabbing;
}

.infinite-gallery::-webkit-scrollbar {
    display: none;
}

.infinite-gallery > * {
    flex: 0 0 auto;
}

.infinite-gallery.vertical {
    position: sticky;
    top: 0;
    flex-direction: column;
    gap: calc(var(--spacing-h) * 5);

    overflow: hidden;
    padding-top: var(--spacing-h);
    height: var(--scroll-height);
    cursor: default;
}

.infinite-gallery.vertical > * {
    transform: translateY(var(--gallery-y, 0px));
    will-change: transform;
}

@supports (animation-timeline: scroll()) {
    .infinite-gallery.vertical > * {
        animation: gallery-down linear both;
        animation-timeline: --page-scroll;
        animation-range: var(--gallery-start, 0px) var(--gallery-end, 100%);
        animation-iteration-count: var(--gallery-iterations, 1);
        will-change: transform;
    }
}

@keyframes gallery-down {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(var(--gallery-set-height, 0px));
    }
}

.infinite-gallery:not(.vertical) figure.logo img {
    height: 12rem;
    width: auto;
    aspect-ratio: 2.2 / 1;
    pointer-events: none;
}

/* PINNED COLUMNS */

.about-wrapper > .section-column.column {
    height: auto;
    align-self: stretch;

    padding-top: 0;
    padding-bottom: 0;

    display: flow-root;
    position: relative;
    isolation: isolate;
    overflow: clip;
    background-color: transparent;

    view-timeline: --column-exit block;
}

@supports (animation-timeline: view()) {
    .about-wrapper > .section-column.column {
        animation-name: corner-grow, corner-shrink;
        animation-timing-function: linear;
        animation-fill-mode: backwards, forwards;
        animation-timeline: --column-exit, --column-exit;
        animation-range:
            entry 0% entry calc(var(--corner-radius) * 2),
            exit calc(100% - var(--corner-radius) * 2) exit 100%;
    }

    .about-wrapper > .section-column.column::before {
        animation-name: corner-grow, corner-shrink, card-enter;
        animation-timing-function: linear;
        animation-fill-mode: backwards, forwards, backwards;
        animation-timeline: --column-exit, --column-exit, --column-exit;
        animation-range:
            entry 0% entry calc(var(--corner-radius) * 2),
            exit calc(100% - var(--corner-radius) * 2) exit 100%,
            entry 0% entry 100%;
    }
}

@keyframes corner-grow {
    from {
        border-radius: 0;
    }

    to {
        border-radius: var(--corner-radius);
    }
}

@keyframes corner-shrink {
    from {
        border-radius: var(--corner-radius);
    }

    to {
        border-radius: 0;
    }
}

@keyframes card-enter {
    from {
        transform: translateY(calc(var(--scroll-height) * -1));
    }

    to {
        transform: translateY(0);
    }
}

.about-wrapper > .section-column.column > :first-child {
    margin-top: var(--card-padding-v);
}

.about-wrapper > .section-column.column > :last-child {
    margin-bottom: var(--card-padding-v);
}

.about-wrapper > .section-column.column::before {
    content: "";
    display: block;

    position: sticky;
    top: 0;
    z-index: -1;

    height: var(--scroll-height);
    margin: 0 calc(var(--card-padding-h) * -1) calc(var(--scroll-height) * -1);

    background-color: var(--theme-card-background);
    border-radius: var(--corner-radius);
}

@media screen and (max-width: 700px) {
    .about-wrapper > .section-column.logo-column.column {
        position: sticky;
        top: 0;
        z-index: 3;

        padding: var(--spacing-v) 0;
        background-color: var(--theme-card-background);
        border-radius: var(--corner-radius);
        box-shadow: 0 var(--stroke) 0 var(--theme-background);

        view-timeline: none;
        animation: none;
    }

    .about-wrapper > .section-column.logo-column.column::before {
        display: none;
    }

    .about-wrapper > .section-column.logo-column.column > .infinite-gallery {
        margin: 0;
    }

    .about-wrapper > .section-column.logo-column + .section-column.column {
        --card-offset: calc(var(--logo-bar-height, 0px) + var(--stroke));
    }

    .about-wrapper > .section-column.logo-column + .section-column.column::before {
        top: var(--card-offset);
        animation-name: corner-grow, corner-shrink;
    }
}

/* CASE STUDY SECTIONS */

.case-study-section {
    --pad: var(--spacing-v-half);
}

.column-layout.case-study-section .section-column.text-column {
    padding-top: 0;
    padding-bottom: 0;
}

.column-layout.case-study-section .section-column.gallery-column {
    --card-padding-h: var(--pad);
    padding: var(--card-padding-h);
}

.case-study-section .case-track {
    display: flow-root;
}

.case-study-section .text-column .case-track {
    padding: var(--card-padding-v) 0;
}

.case-study-section .gallery-column .case-track {
    display: flex;
    flex-direction: column;
    gap: var(--pad);
}

.case-study-section .text-column .post-details {
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    margin-bottom: var(--spacing-v);
}

.column-layout .text-column iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.case-study-section .text-column h2 {
    margin-bottom: var(--spacing-v);
}

@media screen and (max-width: 700px) {
    .column-layout .text-column {
        --card-padding-v: var(--spacing-v-double);
        --card-padding-h: var(--spacing-h);
    }
    
    .column-layout.case-study-section .section-column.text-column{
        width: 100%;
    }
}

@media screen and (min-width: 701px) {
    .case-study-section .text-column h2 {
        --pad: var(--spacing-v-half);
        position: relative;
        z-index: 1;
        margin: calc(var(--pad) * -1) calc(var(--card-padding-h) * -1) calc(var(--spacing-v) - var(--pad));
        padding: var(--pad) var(--card-padding-h) calc(var(--pad) / 2);
        background-color: var(--theme-card-background);
        transform: translateY(max(0px, calc(var(--text-travel, 0px) * var(--case-progress, 0) - var(--h2-top, 0px))));
    }
}

.case-study-section .gallery-column figure {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-v-half);
}

.case-study-section .gallery-column figure img,
.case-study-section .gallery-column figure video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;

    border-radius: var(--corner-radius-inner);
}


.case-study-section {
    min-height: calc(var(--scroll-height) + var(--section-travel, 0px));
}

.column-layout.case-study-section > .section-column {
    position: sticky;
    top: 0;
    height: var(--scroll-height);
    overflow: hidden;
}

.column-layout.case-study-section:not( :has(.gallery-column)) > .section-column {
    height: auto;
}

.column-layout.case-study-section:not( :has(.gallery-column)) {
    min-height: 0;
}

.case-study-section .text-column .case-track {
    transform: translateY(calc(var(--text-travel, 0px) * var(--case-progress, 0) * -1));
}

.case-study-section .gallery-column .case-track {
    transform: translateY(calc(var(--gallery-travel, 0px) * var(--case-progress, 0) * -1));
}

@media screen and (max-width: 700px) {
    .case-study-section {
        flex-direction: column;
        min-height: auto;
    }

    .column-layout.case-study-section .section-column.text-column {
        --card-padding-v: var(--spacing-v-double);
        --card-padding-h: var(--spacing-h);
    }

    .column-layout.case-study-section > .section-column {
        position: static;
        top: auto;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .case-study-section .text-column .case-track,
    .case-study-section .gallery-column .case-track {
        transform: none;
    }
}

/* FOOTER */

footer {
    font-family: var(--sans-type);
    font-size: var(--text-s);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--stroke);

    width: 100%;
}

footer .column {
    height: 100%;
}

footer .footer-contacts {
    font-size: var(--text-m);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-h);
}

footer .footer-contacts .footer-heading {
    font-size: var(--text-l);
    text-align: center;
}

footer .footer-contacts .footer-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-v) var(--spacing-h);
}

footer .footer-contacts .footer-list .footer-item{
    display: flex;
}

footer .footer-contacts .footer-list .footer-item a {
    font-size: var(--text-m);
    padding: 1.25ch 3ch .9ch;
    border-radius: var(--corner-radius);
}

footer .footer-contacts .made-in {
    font-size: var(--text-s);
    margin-top: calc(var(--spacing-h) * 2);
}

footer .footer-colophon {
    display: flex;
    flex-direction: column;
}

footer .footer-colophon p a {
    padding: .5ch 1ch .25ch;
    border-radius: var(--corner-radius-pill);
    margin: .5ch 0 .25ch;
}

footer .short-column.footer-copyright {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-v);
    
    width: 50vw;
}

footer copyright {
    font-size: var(--text-xs);
    font-feature-settings: 'case', 'tnum';
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 700px) {
    footer .column {
        height: auto;
    }
}

@media screen and (max-width: 450px) {
    footer .footer-contacts .footer-list {
        flex-direction: column;
    }
}

.scroll-wrapper.horz > footer {
    display: none;
}

@media screen and (max-width: 900px), screen and (orientation: portrait) {
    .scroll-wrapper.horz > footer {
        display: flex;
        flex: none;
    }
}

/* MAINTENANCE */

#maintenance .logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;

    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#maintenance .message-wrapper {
    font-family: var(--sans-type);
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .075em;
    text-align: center;
    color: var(--theme-fab-text);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
}

#maintenance .message {}

#maintenance .action {}

/* COOKIE BANNER */

#cookie-banner {
    display: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: var(--spacing);

    width: max-content;

    position: fixed;
    right: var(--spacing);
    bottom: var(--spacing);

    font-family: var(--sans-type);
    font-feature-settings: 'case';
    font-size: var(--text-xs);
    letter-spacing: 0.075rem;
    text-align: end;
    color: var(--theme-text);

    background-color: var(--theme-background);
    padding: calc(var(--spacing-v) / 1.5) calc(var(--spacing-h) / 3);
    border-radius: var(--corner-radius-third);

    z-index: 9999;
}

#cookie-banner .button-array {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing);

    text-transform: uppercase;
    color: var(--theme-text);
}

#cookie-banner .button-array button {
    text-transform: uppercase;
}

@media screen and (max-width: 900px) {
    #cookie-banner {
        padding: calc(var(--spacing-v) / 1.5) calc(var(--spacing-h) / 2);
    }
}

/* SCROLL HINT */

.scroll-hint {
    font-family: var(--sans-type);
    font-feature-settings: 'case';
    font-size: var(--text-xs);
    letter-spacing: 0.075rem;
    text-transform: uppercase;
    text-align: center;

    color: var(--theme-text);

    background-color: var(--theme-background);
    padding: calc(var(--spacing-v) / 1.5) calc(var(--spacing-h) / 3);
    border-radius: var(--corner-radius-third);

    width: 16ch;

    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    bottom: var(--spacing);
    left: var(--spacing);
    animation: vertshake 1s cubic-bezier(.36, .07, .19, .97) both infinite;

    transition: all 0.3s ease 0s;
    transition-property: color, background-color, box-shadow;

    z-index: 9999;
}

.scroll-hint::after {
    content: '↓ Scroll ↓';
}

@media screen and (max-width: 700px) {
    .scroll-hint {
        --shake-x: 0px;
        right: unset;
        transform: translate(0, 0);
    }
}

@keyframes vertshake {

    10%,
    90% {
        transform: translate(var(--shake-x, 0), -1px);
    }

    20%,
    80% {
        transform: translate(var(--shake-x, 0), 1px);
    }

    30%,
    50%,
    70% {
        transform: translate(var(--shake-x, 0), -0.2rem);
    }

    40%,
    60% {
        transform: translate(var(--shake-x, 0), 0.2rem);
    }
}

/* ON SCROLL ANIM */

.scroll-anim {
    opacity: 0;
    transform: translateY(var(--scrollAnimDistance));

    transition: all var(--scrollAnimDuration) ease 0s;
    transition-property: opacity, transform, background-color;
}

.scroll-anim.show {
    opacity: 1;
    transform: translateY(0);
}

.scroll-anim.hide-up {
    transform: translateY(calc(var(--scrollAnimDistance) * -1));
    opacity: 0;

    transition: all var(--scrollAnimDuration) ease 0s;
    transition-property: opacity, transform, background-color;
}

/* BG NOISE */

.bg-grain {
    display: var(--noise-state);
}

.bg-grain::before {
    content: "";
    opacity: var(--noise-amount);
    filter: var(--noise-filters);
    mix-blend-mode: var(--noise-blend);
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 9999;
    position: fixed;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABWIAAAViAHE10CgAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4yLWMwMDAgNzkuMWI2NWE3OWI0LCAyMDIyLzA2LzEzLTIyOjAxOjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuNSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDgtMzFUMTI6Mjk6MTIrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDgtMzFUMTI6NDgrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA4LTMxVDEyOjQ4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4Zjg5ZjkxYS03MTFmLTRhMjQtOWNjMS1lZmQzMDUxYzU5M2EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OGY4OWY5MWEtNzExZi00YTI0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');
    pointer-events: none;
    animation: noise var(--noise-speed) steps(2) infinite;
}

@keyframes noise {
    0% {
        transform: translate3d(0, 9rem, 0);
    }

    10% {
        transform: translate3d(-1rem, -4rem, 0);
    }

    20% {
        transform: translate3d(-8rem, 2rem, 0);
    }

    30% {
        transform: translate3d(9rem, -9rem, 0);
    }

    40% {
        transform: translate3d(-2rem, 7rem, 0);
    }

    50% {
        transform: translate3d(-9rem, -4rem, 0);
    }

    60% {
        transform: translate3d(2rem, 6rem, 0);
    }

    70% {
        transform: translate3d(7rem, -8rem, 0);
    }

    80% {
        transform: translate3d(-9rem, 1rem, 0);
    }

    90% {
        transform: translate3d(6rem, -5rem, 0);
    }

    to {
        transform: translate3d(-7rem, 0, 0);
    }
}