@charset "UTF-8";

@property --conic-start {
    syntax: '<percentage>';
    initial-value: 33%;
    inherits: false;
}

@property --conic-end {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

@keyframes rotate2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    /*0% {
		--conic-start: 0%;
		--conic-end: 0%;
	}
	20% {
		--conic-start: 0%;
		--conic-end: 40%;
	}
	40% {
		--conic-start: 0%;
		--conic-end: 60%;
	}
	60% {
		--conic-start: 33%;
		--conic-end: 80%;
	}
	80% {
		--conic-start: 66%;
		--conic-end: 100%;
	}
	100% {
		--conic-start: 100%;
		--conic-end: 100%;
	}*/
}

/* globals */

:root {

    --app-height: 100vh;
    --headroom-height: auto;


    --c0: #FFFFFF;
    --c1: #111111;
    --c2: #F0F0F0;
    --c3: #E1251B;
    --c4: #F4BFBB;
    --c5: #F04438;

    --c6: color-mix(in srgb, currentColor 90%, transparent);
    --c7: color-mix(in srgb, currentColor 80%, transparent);
    --c8: color-mix(in srgb, currentColor 70%, transparent);
    --c9: color-mix(in srgb, currentColor 60%, transparent);
    --c10: color-mix(in srgb, currentColor 50%, transparent);
    --c11: color-mix(in srgb, currentColor 40%, transparent);
    --c12: color-mix(in srgb, currentColor 30%, transparent);
    --c13: color-mix(in srgb, currentColor 20%, transparent);
    --c14: color-mix(in srgb, currentColor 10%, transparent);
    --c15: color-mix(in srgb, currentColor 3%, transparent);

    --wr: 40rem;
    --awr: calc(-1 * var(--wr));

    --gap: 40rem;
    --sl: max(1px, 1rem);

    --br1: 4rem;

    --btn: max(40px, 45rem);

    --altfont: 'Playfair Display', serif;

    --cols: repeat(4, minmax(0, 1fr));

    --f-s: max(14px, 16rem);
    --f-d: max(14px, 18rem);
    --f-m: max(14px, 22rem);
    --f-b: max(14px, 26rem);
    --f-l: max(14px, 28rem);
    --f-xl: max(14px, 60rem);
    --f-xxl: max(14px, 120rem);

    --mw: 1600px;


}


@media screen {

    html {
        font-size: 0.0625vw;
        background-color: var(--c2);
        scrollbar-gutter: stable;
    }

    .document {
        font-weight: 400;
        font-family: 'Figtree', sans-serif;
        font-size: var(--f-d);
        line-height: 1.4;
        color: var(--c1);
        background-color: var(--c2);
        letter-spacing: -.02em;
    }

    .popup-active {
    }

    .wrapper {
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--wr);
        max-width: var(--mw);
    }

    .cookie {
        position: fixed;
        z-index: 1500;
        left: max(24px, 40rem);
        bottom: max(24px, 40rem);
        width: max(720px, 880rem);
        padding: max(17px, 17rem) max(17px, 17rem) max(17px, 17rem) max(17px, 30rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--c2);
        border: var(--sl) solid var(--c1);
    }

    .cookie-text {
        max-width: max(420px, 420rem);
        font-weight: 350;
        font-size: max(16px, 16rem);
        line-height: 140%;
        letter-spacing: -0.03em;
    }

    .cookie .button {
        min-width: max(160px, 172rem);
        height: max(48px, 50rem);
    }

    .preloader {
        background-color: var(--c2);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        visibility: hidden;
        opacity: 0;
        transition: opacity .25s ease-in-out, visibility 0s linear .25s;
        display: flex;
        color: var(--c1);
        will-change: transform;
        overflow: hidden;
        min-height: 100vh;
    }

    .preloader-inner {
        margin-top: auto;
        font-style: italic;
        color: var(--c9);
        font-size: var(--f-b);
        width: 100%;
    }

    .preloader-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-gap: var(--gap);
        align-items: flex-end;
    }

    .preloader-left {
        padding: 40rem 0;
    }

    .preloader-right {
        padding: 40rem 0;
        text-align: right;
    }

    .preloader-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: var(--app-height);
        justify-content: flex-end;
    }

    .preloader-image {
        position: relative;
        display: flex;
        overflow: hidden;
        width: 75rem;
        height: 75rem;
        flex: none;
    }

    .preloader-line {
        width: var(--sl);
        height: calc(var(--loading, 0) * 1vh);
        flex: none;
        background-color: currentColor;
        transition: height .5s;
    }

    .loading {
        pointer-events: none;
        overflow: hidden;
    }

    .loading .preloader {
        transition: none;
        opacity: 1;
        visibility: visible;
    }

    .icon {
        display: flex;
        max-height: 100%;
        align-items: center;
        justify-content: center;
        line-height: 0;
        max-width: 100%;
        width: auto;
        height: auto;
    }

    .cover,
    .contain {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-position: center;
        pointer-events: none;
    }

    .cover {
        object-fit: cover;
    }

    .contain {
        object-fit: contain;
    }

    .fill::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .button {
        display: inline-flex;
        justify-content: center;
        max-width: 100%;
        cursor: pointer;
        align-items: center;
        z-index: 1;
        background-clip: padding-box;
    }

    .button:not(.fill) {
        overflow: hidden;
        position: relative;
    }

    .button-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        position: relative;
        z-index: 2;
        min-width: 0;
        padding: 0 .1em;
    }

    .button__secondary {
        height: var(--btn);
        border-radius: var(--br1);
        border: var(--sl) solid;
        padding: 0 40rem;
    }

    .button__secondary .button-text {
        font-family: var(--altfont);
        font-style: italic;
        letter-spacing: -.02em;
    }

    .button__default {
        height: var(--btn);
        border-radius: var(--br1);
        border: var(--sl) solid var(--c1);
        background-color: var(--c1);
        color: var(--c2);
        padding: 0 40rem;
    }

    .button__default .button-text {
        font-family: var(--altfont);
        font-style: italic;
        letter-spacing: -.02em;
    }

    .button__inl,
    .button__inl:not(.fill) {
        overflow: visible;
        position: relative;
    }

    .button__inl .button-text {
        font-family: var(--altfont);
        font-style: italic;
        letter-spacing: -.02em;
        line-height: 1.1;
        padding: 0;
        position: relative;
        padding-bottom: .5em;
    }

    .button__inl .button-text::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: var(--sl);
        background-color: currentColor;
        width: 100%;
        transform-origin: right;
    }

    .button__inl .button-text::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: var(--sl);
        background-color: currentColor;
        width: 0%;
        transform-origin: right;
    }

    .button__inl .button-icon {
        width: .75em;
        height: .75em;
        position: absolute;
        left: 100%;
        display: flex;
        align-items: center;
        top: 50%;
        margin-top: -.55em;
        justify-content: center;
        opacity: 0;
    }

    .button__wide {
        width: 100%;
    }

    .altfont,
    .title,
    .textbox h2,
    .textbox h3 {
        font-family: var(--altfont);
        letter-spacing: -.04em;
    }

    .textbox b {
        font-weight: 600;
    }

    .title {
        line-height: 1;
        font-weight: 400;
        width: 100%;
    }

    .textbox h2 {
        font-size: var(--f-xl);
    }

    .textbox h3,
    .title__medium {
        font-size: var(--f-l);
        letter-spacing: -.03em;
    }

    .title__default {
        color: var(--c3);
        font-size: var(--f-xl);
    }

    .title__large {
        color: var(--c3);
        font-size: var(--f-xxl);
        letter-spacing: -.06em;
        line-height: .95;
    }

    .container {
        display: flex;
        flex-direction: column;
        min-height: var(--app-height);
    }

    .header {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        border-bottom: var(--sl) solid var(--c12);
        background-color: var(--c2);
        transition: all .25s;
    }

    .topbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-gap: var(--gap);
        align-items: center;
        padding: 30rem 0;
    }

    .topbar-logo {
        max-width: 130rem;
        background-image: url(../img/na-logo-white.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .topbar-logo img {
        transition: opacity .25s;
    }

    .topbar-action {
        margin-left: auto;
    }

    .topbar-nav ul {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 65rem;
        align-items: center;
    }

    .topbar-nav li {
        display: flex;
        align-items: center;
    }

    .topbar-nav-icon {
        flex: none;
        width: .75em;
        height: .75em;
        margin-left: .5em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .topbar-nav li.active .topbar-nav-icon {
        transform: scaleY(-1);
    }

    .header.contrast.static {
        background-color: transparent;
        border-bottom-color: transparent;
        color: var(--c2);
    }

    .contrast.static .button__default {
        background-color: var(--c2);
        color: var(--c1);
        border-color: var(--c2);
    }

    .header.contrast.static .topbar-logo img {
        opacity: 0;
    }

    .breadcrumbs {
        margin: 15rem 0 100rem;
        overflow: hidden;
        font-size: var(--f-s);
    }

    .breadcrumbs ul {
        display: flex;
        flex-wrap: wrap;
        margin: -.25em;
    }

    .breadcrumbs li {
        margin: .25em;
        display: flex;
        align-items: baseline;
    }

    .breadcrumbs li:not(:last-child) {
    }

    .breadcrumbs li:not(:last-child)::after {
        content: "/";
        padding-left: .5em;
    }

    .breadcrumbs li:last-child {
        pointer-events: none;
        color: var(--c9);
    }

    .main {
        margin-top: 0;
        flex: auto;
        display: flex;
        flex-direction: column;
        overflow-x: clip;
        padding-top: max(80px, 106rem);
    }

    .pageheader {
        margin-bottom: 150rem;
        text-align: center;
    }

    .pageheader:has(.pageheader-caption:last-child) {
        margin-bottom: 75rem
    }

    .pageheader-inner {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 65rem var(--gap);
    }

    .pageheader-caption {
        grid-column: 1/-1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pageheader-caption-pretitle {
        margin-bottom: 25rem;
        color: var(--c9);
        font-family: var(--altfont);
        font-style: italic;
        font-size: var(--f-m);
    }

    .pageheader-caption-title {
    }

    .pageheader-main {
        grid-column: 2/4;
        display: flex;
        flex-direction: column;
    }

    .pageheader-main::before {
        content: "";
        flex: none;
        width: 100%;
        height: 15rem;
        background-image: url(../img/na-bird.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 55rem;
    }

    .pageheader-title:not(:first-child) {
        margin-top: 40rem;
    }

    .pageheader-subtitle {
        color: var(--c7);
    }

    .pageheader-subtitle:not(:first-child) {
        margin-top: 30rem;
    }

    .pageheader-action:not(:first-child) {
        margin-top: 30rem;
    }

    .pageheader-carousel {
        position: relative;
    }

    .pageheader-carousel-inner {
        position: relative;
        margin: 0 -25rem;
    }

    .pageheader-carousel-inner .swiper {
        overflow: visible;
    }

    .pageheader-carousel-card {
        position: relative;
        overflow: hidden;
        display: flex;
        margin: 0 25rem;
    }

    .pageheader-carousel-card::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 50%;
    }

    .pageheader-carousel-nav .carousel-button {
        height: 100%;
        position: absolute;
        width: 50rem;
        top: 0;
        padding: 21rem;
        z-index: 2;
    }

    .pageheader-carousel-nav .carousel-button__prev {
        right: 100%;
    }

    .pageheader-carousel-nav .carousel-button__next {
        left: 100%;
    }

    .pageheader-about {
        display: flex;
        flex-direction: column;
    }

    .pageheader-about .pageheader-main {
        max-width: max(800px, 986rem);
        margin: 0 auto;
    }

    .section {
        position: relative;
        margin-bottom: 200rem;
    }

    .section:last-child {
    }

    .section:only-child {
        flex: auto;
    }

    .section__contrast {
        color: var(--c0);
        background-color: var(--c1);
    }

    .section__contrast:last-child {
        margin-bottom: 40rem;
    }

    .section__contrast .button__default {
        background-color: var(--c0);
        color: var(--c1);
        border-color: var(--c0);
    }

    .section-header {
        display: flex;
        flex-direction: column;
    }

    .section-header:not(:last-child) {
        margin-bottom: 50rem;
    }

    .section-header.center {
        align-items: center;
        text-align: center;
    }

    .section-header-pretitle {
        margin-bottom: 10rem;
        color: var(--c9);
        font-family: var(--altfont);
        font-style: italic;
        font-size: var(--f-m);
    }

    .section-header-title {
    }

    .section-header-icon {
        flex: none;
        width: 100%;
        height: .75em;
        margin-top: 25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .section-header-subtitle {
        margin-top: 25rem;
        color: var(--c7);
    }

    .section-header-action {
        margin-top: 40rem;
    }

    .footer {
        overflow: hidden;
        margin-top: 0;
        border-top: var(--sl) solid var(--c13);
        border-bottom: var(--sl) solid var(--c13);
        padding: 65rem 0 25rem;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 60rem var(--gap);
        align-items: flex-start;
    }

    .f1-2 {
        margin-top: 20rem;
        font-size: var(--f-b);
        font-style: italic;
        color: var(--c9);
    }

    .f1-3 {
        margin-top: 40rem;
    }

    .f2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 60rem var(--gap);
    }

    .f2-2-1 {
        margin-bottom: 25rem;
    }

    .f2-2-2 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: .3em;
        color: var(--c9);
    }

    .f3 {
        max-width: 165rem;
    }

    .f4-1 {
        margin-bottom: 30rem;
    }

    .f4-2 {
        font-size: var(--f-s);
    }

    .f4-2 ul {
        display: flex;
        flex-wrap: wrap;
        margin: -15rem;
        color: var(--c9);
    }

    .f4-2 li {
        margin: 15rem;
    }

    .bottombar {
        padding: 25rem 0;
        font-size: var(--f-s);
    }

    .bottombar-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        grid-gap: var(--gap);
    }

    .bottombar-copyright {
        color: var(--c9);
    }

    .bottombar-links {
        grid-column: 2;
        justify-self: end;
        color: var(--c9);
        position: relative;
    }

    .bottombar-links ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8rem 30rem;

        @media (max-width: 576px) {
            flex-direction: column;
        }
    }

    .bottombar-links a {
        color: var(--c9);
        transition: background-size .25s, color .25s;
        background-size: 0 var(--sl);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        padding-bottom: .2em;
    }


    .textbox ul,
    .textbox ol {
        margin: 1em 0;
        display: grid;
        grid-template-columns: auto;
        counter-reset: index;
    }

    .textbox ol {
        counter-reset: index;
        grid-gap: .5em;
    }

    .textbox ul:first-child,
    .textbox ol:first-child {
        margin-top: 0;
    }

    .textbox ul:last-child,
    .textbox ol:last-child {
        margin-bottom: 0;
    }

    .textbox li {
        position: relative;
        padding-left: 1.5em;
    }

    .textbox ul li::before {
        content: "\2022";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        text-align: center;
    }

    .textbox ol li::before {
        content: counter(index) ".";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        text-align: center;
        counter-increment: index;
        font-weight: 700;
    }

    .textbox i {
        font-style: italic;
        font-family: var(--altfont);
    }

    .textbox a {
        text-decoration: underline;
    }

    .textbox img {
        margin: 40rem 0;
    }

    .textbox img:first-child {
        margin-top: 0;
    }

    .textbox img:last-child {
        margin-bottom: 0;
    }

    .textbox blockquote {
        margin: 30rem 0;
        padding-left: 20rem;
        border-left: var(--sl) solid var(--c3);
        font-style: italic;
        max-width: 580rem;
    }

    .textbox blockquote:first-child {
        margin-top: 0;
    }

    .textbox blockquote:last-child {
        margin-bottom: 0;
    }

    .textbox h2,
    .textbox h3 {
        margin: 60rem 0 20rem;
    }

    .textbox h2:first-child,
    .textbox h3:first-child {
        margin-top: 0;
    }

    .textbox-grey-variant {
        font-style: italic;
        font-family: var(--altfont);
        font-weight: 400;
        font-size: var(--f-m);
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    .pagination {
        display: inline-grid;
        grid-auto-flow: column;
        grid-gap: 20rem;
        align-items: baseline;
        font-style: italic;
    }

    .pagination-arrow.disabled {
        color: var(--c12);
        pointer-events: none;
    }

    .pagination-nav {
        overflow: hidden;
    }

    .pagination-nav ul {
        margin: -5rem;
        display: flex;
        flex-wrap: wrap;
    }

    .pagination-nav li {
        margin: 5rem;
    }

    .pagination-nav li:not(.current) {
        color: var(--c12);
    }

    .curtain {
        overflow: hidden;
        width: max(18px, 20rem);
        height: max(28px, 30rem);
        border: var(--sl) solid;
        border-radius: 999rem;
        position: relative;
        box-shadow: 0 0 0 2rem var(--c2), 0 0 0 calc(2rem + var(--sl)) currentColor;
        margin: calc(2rem + var(--sl));
    }

    .curtain-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: currentColor;
        border-radius: 5rem;
        will-change: transform;
        transition: transform .25s;
    }

    .curtain-inner::after {
        content: "";
        position: absolute;
        bottom: 15%;
        width: 40%;
        border-radius: 999rem;
        height: var(--sl);
        background-color: var(--c0);
        left: 30%;
    }

    .player {
        width: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: flex-end;
        color: var(--c0);
        z-index: 1;
    }

    .player::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 56.25%;
    }

    .player-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: var(--c1);
    }

    .player-placeholder::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(transparent, var(--c1));
        opacity: .8;
    }

    .player-footer {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: var(--gap);
        align-items: flex-end;
        padding: 30rem;
        width: 100%;
    }

    .player-caption-subtitle {
        margin-top: 20rem;
    }

    .player-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: max(36px, 40rem);
        height: max(36px, 40rem);
        border-radius: 50%;
        background-color: var(--c0);
        color: var(--c1);
        padding: 10rem;
        cursor: pointer;
        grid-column: 2/3;
    }

    .player .cover {
        will-change: transform;
        transition: transform .25s ease-in-out;
    }

    .carousel-button {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        width: max(10px, 15rem);
        height: max(20px, 30rem);
    }

    .carousel-pagination {
        top: 0;
        left: auto;
        bottom: auto !important;
        line-height: 0;
        position: relative;
        display: flex;
        justify-content: center;
        width: auto !important;
        margin: 0 10rem;
    }

    .carousel-pagination:first-child {
        margin-left: 0;
    }

    .carousel-pagination:last-child {
        margin-right: 0;
    }

    .swiper-pagination-bullet {
        width: max(8px, 8rem);
        height: max(8px, 8rem);
        border-radius: 999rem;
        margin: 0 3rem !important;
        transition: width .3s linear;
        background-color: currentColor;
        opacity: 1;
        position: relative;
    }

    .swiper-pagination-bullet::before {
        content: "";
        border-radius: inherit;
        min-width: max(8px, 8rem);
        height: 100%;
        position: absolute;
        opacity: 0;
        width: 0%;
        background-color: currentColor;
    }

    .swiper-pagination-bullet-active {
        background-color: var(--c14);
    }

    .swiper-pagination-bullet-active ~ .swiper-pagination-bullet {
        background-color: currentColor;
    }

    .carousel-pagination:not(.carousel-autoplay-init) .swiper-pagination-bullet-active {
        background-color: currentColor;
        opacity: 1;
    }

    .carousel-autoplay-init .swiper-pagination-bullet-active {
        width: 60rem;
    }

    .carousel-autoplay-init .swiper-pagination-bullet-active::before {
        opacity: 1;
        width: 100%;
        transition: width 5s linear;
    }

    .formbox {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 25rem 0;
    }

    .formbox-row {
        width: 100%;
        display: flex;
    }

    .formbox-cell {
        flex: 1;
    }

    .formbox-cell:not(:first-child) {
        margin-left: var(--gap);
    }

    .formbox-footer {
        margin-top: 40rem;
    }

    .formbox-footer-note {
        color: var(--c9);
        font-size: var(--f-s);
        max-width: 650rem;
    }

    .formbox-footer-note:not(:last-child) {
        margin-bottom: 25rem;
    }

    .textfield {
        position: relative;
        border-bottom: var(--sl) solid var(--c13);
    }

    .textfield:has(.icon) {
        .icon {
            position: absolute;
            right: 15rem;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            fill: transparent;
        }
    }

    .textfield-input {
        width: 100%;
        text-overflow: ellipsis;
        padding: 10rem 0;
        resize: vertical;
    }

    .textfield-input.wpcf7-textarea {
        min-height: 46rem;
        height: 46rem;
    }

    .s17-5,
    .wpcf7 {
        width: 100%;
    }

    .textfield-label {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        /*white-space: nowrap;*/
        color: var(--c9);
        pointer-events: none;
        padding: 10rem 0;
        user-select: none;
    }

    .wpcf7-form-control-wrap:has(input.wpcf7-validates-as-required) ~ .textfield-label::after {
        content: "*";
        color: var(--c3);
    }

    .wpcf7-form-control-wrap:has(> input:not(.cf7-calendar-input):not(:placeholder-shown)) ~ .textfield-label,
    .wpcf7-form-control-wrap:has(textarea:not(:placeholder-shown)) ~ .textfield-label,
    .wpcf7-form-control-wrap.has-value ~ .textfield-label {
        display: none;
    }

    .wpcf7-form-control-wrap:not(.has-value):has(> .cf7-calendar-input) ~ .textfield-label {
        display: block;
    }

    .selector {
    }

    .selector-holder {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        padding: 10rem 0;
        user-select: none;
        border-bottom: var(--sl) solid var(--c13);
    }

    .selector-holder-input {
        flex: auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    .cf7-theme-select .selector-holder-input::placeholder {
        color: transparent;
    }

    .selector-holder-placeholder {
        position: absolute;
        top: 50%;
        left: 0;
        right: calc(1em + 20rem);
        display: flex;
        min-width: 0;
        overflow: hidden;
        transform: translateY(-50%);
        color: var(--c9);
        pointer-events: none;
        white-space: nowrap;
    }

    .selector-holder-placeholder > span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .selector-holder-required {
        flex: none;
        color: #e1251b;
    }

    .selector-holder:has(.selector-holder-input:not(:placeholder-shown)) .selector-holder-placeholder {
        display: none;
    }

    .selector-holder-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1em;
        height: 1em;
        flex: none;
        margin-left: 20rem;
        margin-right: 15rem;
        color: var(--c3);
    }

    .selector-list {
        position: absolute;
        z-index: 99;
        background-color: var(--c2);
        width: 100%;
        color: var(--c1);
        max-height: 350px;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .selector-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .selector-scrollbar {
        position: fixed;
        z-index: 100;
        width: 8rem;
        display: none;
        pointer-events: auto;
    }

    .selector-scrollbar.active {
        display: block;
    }

    .selector-scrollbar-thumb {
        width: 100%;
        min-height: 24px;
        border-radius: 999px;
        background-color: var(--c1);
        cursor: grab;
        transition: transform .1s linear;
    }

    .selector-scrollbar-thumb:active {
        cursor: grabbing;
    }

    .selector-option {
        position: relative;
        padding: 15rem;
        background-color: var(--c0);
        color: var(--c9);
        cursor: pointer;
    }

    .selector-option-inner {
        padding: 0;
    }

    .selector-option-inner.active {
        pointer-events: none;
        color: var(--c3);
    }

    .selector.active .selector-holder-icon {
        transform: scaleY(-1);
    }

    .selector-list:not(.active) {
        display: none;
    }

    .calendar-wrapper {
        position: relative;
        width: 100%;
        z-index: 99;
    }

    .calendar-inner {
        position: absolute;
        top: 100%;
        display: flex;
        flex-direction: column;
        width: min(320rem, calc(100vw - 40rem));
        padding: 20rem;
        border: 1rem solid rgba(17, 17, 17, 0.10);
        background: #F0F0F0;
    }

    .calendar-inner:not(.active) {
        display: none;
    }

    .calendar-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10rem;
        margin-top: 20rem;
    }

    .calendar-buttons .disabled {
        opacity: .45;
        pointer-events: none;
    }

    .calendar {
        position: relative;
        font-family: var(--font);
        font-size: var(--f-s);
    }

    .calendar .date-picker-wrapper,
    .calendar .date-picker-wrapper.inline-wrapper {
        position: relative;
        z-index: auto;
        display: block;
        width: 100%;
        min-width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        box-sizing: border-box;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
    }

    .calendar .date-picker-wrapper .drp_top-bar {
        padding: 0;
    }

    .calendar .custom-top {
        display: none;
    }

    .calendar-navigation {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 30rem;
        margin-bottom: 20rem;
    }

    .calendar-filter {
        position: relative;
        width: 120rem;
        color: #111;
    }

    .calendar-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 34rem;
        padding: 0 0 8rem;
        border: 0;
        border-bottom: var(--sl) solid var(--c13);
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .calendar-filter-icon {
        width: 26rem;
        height: 7rem;
        flex: none;
        margin-left: 10rem;
        color: var(--c3);
        transition: transform .2s ease;
    }

    .calendar-filter.active .calendar-filter-icon {
        transform: scaleY(-1);
    }

    .calendar-filter-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 4;
        display: none;
        max-height: 140rem;
        margin: 0;
        overflow-y: auto;
        background: #F0F0F0;
        box-shadow: 0 8rem 16rem rgba(17, 17, 17, .08);
        list-style: none;
        scrollbar-width: thin;
    }

    .calendar-filter.active .calendar-filter-list {
        display: block;
    }

    .calendar-filter-option button {
        display: block;
        width: 100%;
        padding: 7rem 10rem;
        border: 0;
        background: transparent;
        color: var(--c9);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .calendar-filter-option.active button,
    .calendar-filter-option button:hover,
    .calendar-filter-option button:focus-visible {
        background: rgba(17, 17, 17, .035);
        color: #111;
    }

    .calendar .date-picker-wrapper .month-wrapper {
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .calendar .month-wrapper table,
    .calendar .month-wrapper table.month2 {
        width: 100%;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0 5rem;
        text-align: center;
        vertical-align: middle;
    }

    .calendar .month-wrapper td {
        width: 11.2857142857%;
    }

    .calendar .caption th {
        display: none;
    }

    .calendar .prev,
    .calendar .next {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1em;
        height: 1em;
        min-height: 30rem;
        cursor: pointer;
    }

    .calendar .icon-calendar {
        width: 24rem;
        height: 24rem;
    }

    .calendar .month-name::first-letter {
        text-transform: uppercase;
    }

    .calendar .week-name {
        height: auto;
        text-transform: uppercase;
    }

    .calendar .apply-btn,
    .calendar .date-picker-wrapper .footer,
    .calendar .date-picker-wrapper .selected-days {
        display: none;
    }

    .calendar .invalid {
        opacity: .35;
        pointer-events: none;
    }

    .calendar .lastMonth,
    .calendar .nextMonth {
        opacity: 0;
        pointer-events: none;
    }

    .calendar .date-picker-wrapper .month-wrapper table .day {
        position: relative;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 30rem;
        margin: 0;
        padding: 0;
        aspect-ratio: 1 / 1;
        color: inherit;
        font-size: inherit;
        cursor: pointer;
    }

    .calendar .day::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .calendar .day.checked {
        background: transparent;
        color: var(--c2);
    }

    .calendar .day.checked::before {
        background-color: var(--c3);
    }

    .calendar .day.real-today:not(.checked) {
        border: var(--sl) solid var(--c3);
        border-radius: 50%;
    }

    .calendar .day.first-date-selected,
    .calendar .day.last-date-selected {
        border-radius: 50%;
        background-color: var(--c3) !important;
        color: var(--c2) !important;
    }

    .calendar .day.first-date-selected::before {
        border-radius: 50% 0 0 50%;
    }

    .calendar .day.last-date-selected::before {
        border-radius: 0 50% 50% 0;
    }

    .calendar:not(:has(.last-date-selected)) .first-date-selected::before {
        border-radius: 50%;
    }

    .cf7-calendar-input {
        cursor: pointer;
    }

    .calendar-buttons .button {
        padding: 0;
        min-width: 100%;
    }

    .tabs {
        overflow: hidden;
        font-size: var(--f-b);
        font-family: var(--altfont);
    }

    .tabs ul {
        display: flex;
        flex-wrap: wrap;
        margin: -.25em;
        justify-content: center;
    }

    .tabs li {
        margin: .25em;
        display: flex;
        align-items: baseline;
    }

    .tabs li:not(:last-child)::after {
        content: "/";
        padding-left: .5em;
        color: var(--c12);
    }

    .tabs li.active {
        pointer-events: none;
    }

    .tabs li:not(.active) a {
        color: var(--c12);
    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: flex;
        align-items: center;
        color: var(--c2);
        pointer-events: none;
    }

    .modal:not(.active) {
        display: none;
    }

    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        background-color: var(--c1);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all .15s 0s;
    }

    .popup-inner {
        width: 100%;
        display: flex;
    }

    .popup-video {
        width: 100%;
        max-width: 640rem;
        position: relative;
        height: 480rem;
        margin: auto;
        pointer-events: all;
    }

    .popup-close {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 60rem;
        width: 35rem;
        height: 35rem;
        pointer-events: all;
    }

    .popup.active ~ .popup-overlay {
        opacity: .8;
        pointer-events: all;
        visibility: visible;
    }

    .yt-player-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        opacity: 1;
    }

    .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-height: var(--app-height);
        z-index: 99;
        background-color: var(--c2);
        overflow: auto;
        padding: var(--headroom-height) 0 0;
        transition: opacity .5s .5s, transform .5s 0s;
        will-change: transform;
        outline: 9999rem solid var(--c7);
        transform: translateY(-100%);
        opacity: 0;
        min-height: 80vh;
    }

    .menu.active {
        transition-delay: 0s, 0s;
        transform: translateY(0);
        opacity: 1;
    }

    .menu.menu-switching {
        transition: none;
    }

    .menu.menu-content-switching .popup-inner {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .35s ease, transform .35s ease;
    }

    .menu.menu-content-switching.menu-content-visible .popup-inner {
        opacity: 1;
        transform: translateY(0);
    }

    .menu.active ~ .popup-overlay {
        z-index: 10;
        opacity: 0;
    }

}

/* cards */

@media screen {

    .card {
        position: relative;
        overflow: hidden;
        display: flex;
        min-height: 100%;
        flex-direction: column;
    }

    .card-media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .card-1 .card-header {
        position: relative;
        overflow: hidden;
        margin-bottom: 10rem;
        display: flex;
    }

    .card-1 .card-header::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 60%;
    }

    .card-1 .card-content {
        flex: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .card-1 .card-title {
        color: var(--c3);
    }

    .card-1 .card-pretitle {
        margin-bottom: 20rem;
        color: var(--c9);
        font-size: var(--f-m);
        font-style: italic;
    }

    .card-1 .card-subtitle {
        margin: 15rem 0 10rem;
        color: var(--c7);
    }

    .card-1 .card-footer {
        margin-top: 20rem;
        flex: auto;
        display: flex;
        flex-direction: column;
    }

    .card-1 .card-action {
        padding-top: 20rem;
        border-top: var(--sl) solid var(--c13);
        margin-top: auto;
    }

    .card-2 {
        border: var(--sl) solid var(--c13);
        padding: 30rem 20rem;
    }

    .card-2 .card-content {
        flex: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .card-2 .card-title {
        color: var(--c3);
    }

    .card-2 .card-subtitle {
        font-size: var(--f-s);
        margin-top: 15rem;
        color: var(--c7);
    }

    .card-2 .card-footer {
        padding-top: 40rem;
        margin-top: auto;
    }

    .card-3 .card-header {
        position: relative;
        overflow: hidden;
        margin-bottom: 10rem;
        display: flex;
    }

    .card-3 .card-header::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 100%;
    }

    .card-3 .card-media img {
        object-position: top;
    }

    .card-3 .card-content {
        flex: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .card-3 .card-title {
        color: var(--c3);
    }

    .card-3 .card-pretitle {
        margin-bottom: 20rem;
        color: var(--c9);
        font-size: var(--f-m);
        font-style: italic;
    }

    .card-3 .card-subtitle {
        margin-top: 15rem;
        color: var(--c7);
    }

    .card-3 .card-footer {
        margin-top: 20rem;
        flex: auto;
        display: flex;
        flex-direction: column;
    }

    .card-3 .card-action {
        padding-top: 15rem;
        border-top: var(--sl) solid var(--c13);
        margin-top: auto;
    }


}

/* sections */

@media screen {

    .s1-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s1-2 {
        grid-column: 2/4;
        color: var(--c7);
    }

    .s1:not(:last-child) .s1-2 {
        border-bottom: var(--sl) solid var(--c12);
        padding-bottom: 20rem;
    }

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

    .s2-2 {
        max-width: 660rem;
        margin-bottom: 60rem;
        width: 100%;
    }

    .s2-3 {
        margin-top: auto;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s2-4 {
        padding-bottom: 25rem;
        border-bottom: var(--sl) solid var(--c13);
    }

    .s2-5 {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: var(--gap);
        align-items: flex-start;
        cursor: pointer;
    }

    .s2-5-1 {
        transition: color .5s;
    }

    .s2-5-2 {
        color: var(--c9);
        font-style: italic;
        transition: all .5s;
    }

    .s2-6 {
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin-left: var(--gap);
    }

    .s2-6-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: inset(0% 0 0 0);
        transition: clip-path .8s ease-in-out 0s;
        z-index: 2;
    }

    .s2-7 {
        max-width: 500rem;
        padding-top: 30rem;
        width: 100%;
        overflow: hidden;
        transition: all .5s;
        height: auto;
    }

    .s2-7-1 {
        color: var(--c7);
    }

    .s2-7-2 {
        margin-top: 20rem;
    }

    .s2-8 {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .s2-9 {
        flex: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .s3-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        opacity: .6;
        height: 100%;
    }

    .s3-3 {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
        padding: 200rem 0;
    }

    .s3-4 {
        grid-column: 2/4;
    }

    .s3-4 .title {
        color: inherit;
    }

    .s4-1 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 120rem 0;
    }

    .s4-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0 var(--gap);
    }

    .s4-3 {
        display: flex;
        grid-column: 1/2;
        position: relative;
    }

    .s4-3::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 100%;
    }

    .s4-4 {
        position: absolute;
        z-index: 1;
        top: 0;
        width: 100%;
        z-index: 1;
        padding-top: 100%;
    }

    .s4-4-1 {
        position: absolute;
        z-index: 1;
        overflow: hidden;
    }

    .s4-4-1 img {
        object-position: top;
    }

    .s4-4-1:nth-child(1) {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .s4-4-1 .player {
        height: 100%;
    }

    .s4-4-1 .player::before {
        display: none;
    }

    .video-link {
        position: relative;
        cursor: pointer;
    }

    .video-link::before {
        position: absolute;
        inset: 0;
        top: 40%;
        z-index: 10;
        content: '';
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    }

    .video-link-text {
        position: absolute;
        inset: 0;
        top: auto;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 max(8px, 30rem) max(8px, 23rem) max(8px, 20rem);
        gap: 10px;
        color: #fff;
        font-family: var(--altfont);
        font-size: max(24px, 32rem);
        line-height: 120%;
        letter-spacing: -0.03em;
    }

    .video-link-text .icon {
        flex: none;
        width: max(38px, 38rem);
        height: max(38px, 38rem);
    }

    .video-popup {
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: rgba(17, 17, 17, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.5s ease-in-out;
    }

    .video-popup.vis {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    body.lock {
        overflow: hidden;
    }

    .video-wrap {
        width: 40vw;
        min-width: max(640px, 640rem);
        aspect-ratio: 16/9;
    }

    .video-wrap iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .video-wrap video {
        display: block;
        max-width: none;
        width: 100%;
        height: 100%;
        border: 0;
        object-fit: cover;
    }

    .video-popup-close {
        position: absolute;
        top: max(20px, 44rem);
        right: max(20px, 44rem);
        z-index: 10;
        width: max(32px, 64rem);
        height: max(32px, 64rem);
        background: url(../img/close.svg) 50% 50% no-repeat;
        background-size: contain;
        opacity: 0.68;
        transition: all 0.5s ease-in-out;
    }

    .video-popup-close:hover {
        opacity: 1;
    }

    .s4-5 {
        margin-bottom: 20rem;
        padding-bottom: 20rem;
        position: relative;
    }

    .s4-5::after {
        content: "";
        position: absolute;
        top: 100%;
        height: var(--sl);
        background-color: currentColor;
        opacity: .2;
        right: -100vw;
        left: -100vw;
    }

    .s4-5-1 {
        max-width: 480rem;
    }

    .s4-5-2 {
        margin-bottom: 20rem;
        font-size: var(--f-m);
        font-style: italic;
        color: var(--c9);
    }

    .s4-6 {
        margin: auto 0;
    }

    .s4-7 {
        color: var(--c7);
        max-width: 580rem;

        em {
            color: rgba(17, 17, 17, 0.60);
            font-family: var(--altfont);
            font-size: clamp(18rem, 1.953125vw, 22rem);
            font-style: italic;
            font-weight: 400;
            line-height: 130%;
            letter-spacing: -0.44rem;
        }
    }

    .s4-8 {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: flex-end;
        padding: 30rem 0;
    }

    .s4-9 {
        padding-top: 40rem;
        display: flex;
        flex-wrap: wrap;
        margin: -10rem;
    }

    .s4-9-1 {
        padding: 10rem;
    }

    .s4-2__3 .s4-5 {
        text-align: center;
    }

    .s4-2__3 .s4-5-1 {
        max-width: none;
    }

    .s4-2__3 .s4-7 {
        text-align: center;
        margin: 0 auto;
    }

    .s4-2__3 .s4-9 {
        justify-content: center;
    }

    .s4-2__4 .s4-4 img {
        mix-blend-mode: multiply;
    }

    .s5-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s5-2 {
        display: flex;
        flex-direction: column;
    }

    .s5-2-1 {
        margin-bottom: 30rem;
    }

    .s5-2-2 {
    }

    .s5-2-3 {
        margin-top: 20rem;
        flex: auto;
    }

    .s5-2-4 {
        margin-top: 20rem;
        border-top: var(--sl) solid var(--c13);
        padding-top: 20rem;
        font-style: italic;
    }

    .s6-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 65rem var(--gap);
        padding: 120rem 0;
    }

    .s6-2 {
        margin-top: auto;
    }

    .s6-3 {
        order: -1;
        grid-row: 1/3;
        position: relative;
        overflow: hidden;
        display: flex;
        margin: -120rem 0;
    }

    .s6-3::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 100%;
    }

    .s6-4 {
        margin-bottom: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 40rem var(--gap);
    }

    .s6-5 {
        display: flex;
        align-items: center;
        padding: 20rem 0 20rem 10rem;
        border-top: var(--sl) solid var(--c12);
    }

    .s6-5-1 {
        flex: none;
        margin-right: 15rem;
        width: .8em;
        height: .8em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .s6-5-2 {
        font-family: var(--altfont);
        font-style: italic;
    }

    .s7-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 60rem var(--gap);
    }

    .s7-3 {
        margin-top: 80rem;
        display: flex;
        justify-content: center;
    }

    .s8-1 {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-gap: var(--gap);
    }

    .s8-2 {
        grid-column: 1/6;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .s8-3 {
        max-width: 680rem;
        text-align: center;
    }

    .s8-4 {
        position: absolute;
        top: -10%;
        left: -10%;
        width: 120%;
        height: 120%;
        z-index: -1;
    }

    .s8-4-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
    }

    .s8-4-2::after {
        position: absolute;
        inset: -200px;
        content: '';
        background: #f0f0f0;
        mask-image: conic-gradient(black 0deg, black 20deg, transparent 120deg, transparent 360deg);
        animation: rotate 8s infinite linear 1s;
    }

    .s8-5 {
        position: relative;
        z-index: 10;
        grid-column: 6/-1;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 65rem;
        padding: 100rem 70rem;
        text-align: center;
        border-left: var(--sl) solid var(--c13);
    }

    .s8-6-1 {
        font-size: var(--f-b);
        font-style: italic;
        margin-bottom: 25rem;
    }

    .s8-6-2 {
        color: var(--c7);
    }

    .s9-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 60rem var(--gap);
    }

    .s9-2 {
        grid-column: 2/4;
    }

    .s9-3 {
        margin-bottom: 30rem;
        color: var(--c9);
        font-style: italic;
        font-size: var(--f-m);
        text-align: center;
    }

    .s9-4 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s9-5 {
        border-bottom: var(--sl) solid var(--c12);
        padding: 15rem 0;
    }

    .s9-5:first-child {
        border-top: var(--sl) solid var(--c12);
    }

    .s9-6 {
        cursor: pointer;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: var(--gap);
        align-items: center;
    }

    .s9-7 {
        padding-top: 15rem;
        max-width: 650rem;
        width: 100%;
        color: var(--c7);
        overflow: hidden;
        transition: all .25s;
        height: auto;
    }

    .s9-5:not(.active) .s9-7 {
        opacity: 0;
        padding-top: 0;
        height: 0;
    }

    .s9-5.active .curtain-inner {
        transform: translateY(-60%);
    }

    .s10-1 {
        display: flex;
        width: 100%;
    }

    .s10-2 {
        flex: none;
        width: 100%;
        margin: 0 auto;
        max-width: 1020rem;
    }

    .s11-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s12-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s12-2 {
        grid-column-end: span 2;
    }

    .s12-3 {
        margin-bottom: 40rem;
    }

    .s13-2 .swiper {
        overflow: visible;
        margin: 0 var(--awr);
    }

    .s13-2 .swiper-slide {
        height: auto !important;
        display: flex;
    }

    .s13-3 {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-gap: var(--gap);
        align-items: center;
        margin-top: 30rem;
    }

    .s13-3-1:not(:first-child) {
        margin-left: auto;
    }

    .s13-4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        overflow: hidden;
        width: 100%;
        padding: 0 var(--wr);
    }

    .s13-5 {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
    }

    .s13-5 .player::before {
        padding-top: 75%;
    }

    .s13-6 {
        display: grid;
        align-items: center;
        text-align: center;
        grid-template-columns: auto;
        grid-gap: var(--sl) 0;
        grid-template-rows: 1fr 1fr;
    }

    .s13-6-1 {
        margin-top: auto;
        padding-bottom: 20rem;
    }

    .s13-6-2 {
        max-width: 760rem;
        position: relative;
        margin: 0 auto auto;
        padding-top: 20rem;
        font-size: var(--f-m);
        font-style: italic;
        color: var(--c9);
    }

    .s13-6-2::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100vw;
        right: -100vw;
        background-color: currentColor;
        opacity: .2;
        height: var(--sl);
    }

    .s13-6:only-child {
        grid-column: 1/-1;
    }

    .s13-6:only-child::before {
        content: "";
        position: absolute;
        right: 50%;
        top: 0;
        left: 0;
        bottom: 0;
        background-image: url(../img/quote.svg);
        z-index: -1;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin: 100rem;
    }

    .s14-1 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 100rem var(--gap);
    }

    .s14-2 {
        max-width: 650rem;
        margin: 0 auto;

        @media (min-width: 1025px) {
            position: sticky;
            top: calc(var(--headroom-height) + 20rem);
        }
    }

    .s14-3 {
        max-width: 650rem;
    }

    .s14-4 {
        grid-column: 2/3;
    }

    .s14-5 {
        padding: 0 50rem;
    }

    /*.s14-6 {*/
    /*    margin-top: 20rem;*/
    /*}*/

    .s14-7 {
        margin-bottom: 100rem;
    }

    .s14-7:last-child {
        margin-bottom: 0;
    }

    .s14-8:not(:last-child) {
        margin-bottom: 50rem;
    }

    .s14-8-1 {
        color: var(--c9);
        margin-bottom: 20rem;
        font-size: var(--f-m);
        font-style: italic;
    }

    .s14-8-2 {
        color: var(--c3);
    }

    .s14-9 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s14-10 {
        border-bottom: var(--sl) solid var(--c14);
        padding-bottom: 5rem;
        display: flex;
        align-items: center;
    }

    .s14-10-1 {
        position: relative;
        margin-right: 10rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: max(25px, 30rem);
        height: max(25px, 30rem);
    }

    .s14-10-2 {
        color: var(--c9);
        flex: auto;
    }

    .s14-10-3 {
        margin-left: var(--gap);
    }

    .s15-1 {
        margin-bottom: 60rem;
        position: relative;
    }

    .s15-1::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--sl);
        background-color: var(--c13);
    }

    .s15-1 ul {
        display: flex;
        justify-content: space-between;
    }

    .s15-1 li {
        padding: 0 30rem 20rem;
        position: relative;
        font-family: var(--altfont);
        font-size: var(--f-l);
        color: var(--c13);
        letter-spacing: -.03em;
        transition: color .5s;
    }

    .s15-1 li.active {
        color: var(--c3);
    }

    .s15-3 {
        display: flex;
        flex-direction: column;
        grid-gap: 10rem;
        padding: 0;
        overflow: hidden;
        transition: opacity 1s 0s, height 0s 2s;
        height: auto;
        pointer-events: none;
    }

    .s15-3:not(.active) {
        height: 0;
        opacity: 0;
    }

    .s15-3.active {
        transition: opacity 1s 0.2s, height 0s 1s;
    }

    .s15-4 {
        margin-top: 20rem;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s15-4-1 {
        grid-column: 1/4;
        font-size: var(--f-s);
        color: var(--c11);
    }

    .s15-5 {
        color: var(--c3);
    }

    .s15-6 {
        color: var(--c9);
        font-style: italic;
        font-size: var(--f-m);
    }

    .s15-7 {
        height: 60rem;
        margin-left: 10rem;
    }

    .s15-7 img {
        width: auto;
        max-width: none;
        height: 100%;
    }

    .s15-8 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--sl);
        background-color: var(--c13);

        &:before {
            width: 0;
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            bottom: 0;
            background-color: #e1251b;
            z-index: 2;
            transition: width .5s;
        }

    }

    .s15-8-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(var(--gw) * 1%);
        height: 100%;
        z-index: 1;
        background-color: var(--c3);
    }

    .s15-10 {
        position: relative;
        display: flex;
        max-width: 0;
        align-items: flex-end;
    }

    .s15-11 {
        flex-grow: 1;
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: var(--gap);
        align-items: baseline;
        white-space: nowrap;
        padding-bottom: 10rem;
    }

    .s15-1 .runner {
        position: absolute;
        bottom: 0;
        background-color: var(--c3);
        left: 0;
        width: 0;
        height: var(--sl);
        transition: all .5s;
    }

    .s15-3.active .s15-10 {
        max-width: var(--gw);

        @media screen and (max-width: 1023.98px) {
            max-width: 100%;
        }
    }

    .s16-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
    }

    .s16-2 {
        grid-column: 1/-1;
        text-align: center;
    }

    .s16-3 {
        grid-column: 2/4;
        margin-top: 40rem;
        background-color: var(--c2);
    }

    .s16-3 img {
        mix-blend-mode: multiply;
    }

    .s16-4 {
        grid-column: 2/4;
        margin-top: 40rem;
        text-align: center;
        color: var(--c7);
    }

    .s17-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0 var(--gap);
        align-items: center;
    }

    .s17-1.mode {
        display: flex;
        flex-direction: column;
        gap: 0 !important;
        max-width: 740rem;
        margin: 0 auto;
        align-items: flex-start;
    }

    .s17-2 {
        position: relative;
        overflow: hidden;
        display: flex;
        grid-row: 1/3;
    }

    .s17-2::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 100%;
    }

    .s17-4 {
        margin-bottom: 40rem;
        margin-top: auto;
    }

    .s17-5 {
        margin-bottom: auto;
    }

    .s18-3 {
        padding-bottom: 40rem;
        border-bottom: var(--sl) solid var(--c11);
    }

    .s18-3 .title {
        color: var(--c1);
    }

    .s18-4 {
        margin-top: 30rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 60rem;
    }

    .s18-5-1 .title {
        color: var(--c1);
    }

    .s18-5-1:not(:last-child) {
        margin-bottom: 25rem;
    }

    .s18-5-2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--gap);
    }

    .s18-5-2 ul {
        grid-column: 1/3;
    }

    .s18-5-2 li:not(:first-child) {
        margin-top: 10rem;
    }

    .s18-5-2 li > ul {
        margin-top: 10rem;
        padding-left: 24rem;
    }

    .s18-5-2 a {
        text-decoration: underline;
    }

    .s19 .wrapper {
        max-width: none;
    }

    .s19-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: .5;
    }

    .s19-1 video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .s19-2 {
        min-height: var(--app-height);
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 50rem 0;
        flex-direction: column;
    }

    .s19-3 {
        font-size: var(--f-xxl);
        text-transform: uppercase;
        line-height: 1;
        letter-spacing: -.06em;
        text-align: center;
    }

    .s19-3-1:last-child {
        display: block;
        position: relative;
    }

    .s19-3-1:last-child::after {
        content: "";
        position: absolute;
        top: .05em;
        left: -100vw;
        right: -100vw;
        height: var(--sl);
        background-color: currentColor;
        opacity: .2;
        z-index: -1;
    }

    .s19-4 {
        position: relative;
        flex: none;
        display: flex;
        align-items: center;
    }

    .s19-4-1,
    .s19-4-2 {
        font-style: italic;
        font-size: var(--f-b);
        position: absolute;
        white-space: nowrap;
    }

    .s19-4-1 {
        right: 100%;
    }

    .s19-4-2 {
        left: 100%;
    }

    .s19-4-3 {
        font-size: var(--f-xxl);
        text-transform: uppercase;
        line-height: 1;
        letter-spacing: -.06em;
        text-align: center;
        visibility: hidden;
        margin: 0 30rem;
    }

    .s19-5 {
        position: relative;
        margin: min(-80px, -106rem) var(--awr) 0;
        background-color: var(--c1);
        color: var(--c2);
        height: 100dvh;
    }

    .s19-6 {
        display: flex;
        align-items: flex-end;
        height: 0;
    }

    .s19-7 {
        flex: none;
        width: 100%;
        height: .75em;
        margin-top: 40rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .s20-1 {
        display: flex;
        border-left: var(--sl) solid var(--c13);
        counter-reset: index;
    }

    .s20-2 {
        flex: 1;
        transition: flex .45s ease-in-out;
        display: flex;
        overflow: hidden;
        border-right: var(--sl) solid var(--c13);
        position: relative;
    }

    .s20-2.active {
        flex: 2;
    }

    .s20-3 {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .s20-4 {
        flex: auto;
        padding: 0 20rem 25rem;
        transition: all .5s;
        clip-path: inset(0 0% 0 0);
    }

    .s20-4-1 {
        position: relative;
        overflow: hidden;
        display: flex;
    }

    .s20-4-1::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 50%;
    }

    .s20-4-2 {
        margin-top: 20rem;
    }

    .s20-4-3 {
        margin-top: 20rem;
        color: var(--c7);
    }

    .s20-5 {
        flex-direction: column;
        display: flex;
    }

    .s20-5::before {
        content: "/" counter(index, decimal-leading-zero);
        counter-increment: index;
        order: 1;
        color: var(--c9);
        margin-top: 15rem;
        font-style: italic;
    }

    .s20-5-1 {
        font-size: var(--f-m);
    }

    .s20-6 {
        display: flex;
        flex: none;
        height: 0;
        align-items: flex-end;
        cursor: pointer;
        transition: opacity .25s;
        transition-delay: 0.4s;
        padding: 0 20rem 25rem;
    }

    .s20-2.active {
        pointer-events: none;
    }

    .s20-2.active .s20-6 {
        opacity: 0;
        transition-delay: 0s;
    }

    .s20-2:not(.active) .s20-4 {
        pointer-events: none;
        user-select: none;
        clip-path: inset(0 100% 0 0);
    }

    .s21-1 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: var(--gap);
    }

    .s21-2 {
        display: flex;
        position: relative;
    }

    .s21-2:nth-child(n + 6) {
        display: none;
    }

    .s21-2::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 50%;
    }

    .s21-2-1 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 25rem;
    }

    .s21-2-1 img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        transition-duration: 0.7s;
        transition-property: opacity, transform;
        transition-timing-function: ease-in-out;
        will-change: opacity, transform;
    }

    .s21-2-1 .hid {
        transform: scale(0);
        opacity: 0;
    }

    .s21-2-1 .vis {
        transform: scale(1);
        opacity: 1;
    }

    .s22 .wrapper {
        margin: 0;
        max-width: none;
    }

    .s22-1 {
        position: relative;
        margin: 0 var(--awr);
        padding: 50rem var(--wr);
        display: flex;
        flex-direction: column;
        min-height: calc(var(--app-height) - var(--headroom-height));
    }

    .s22-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /*opacity: .6;*/
    }

    @media (min-width: 1025px) {

        .s22-2:before {
            position: absolute;
            content: '';
            inset: 0;
            z-index: 2;
            background: linear-gradient(0deg, rgba(15, 41, 60, 0.99) -2.01%, rgba(0, 0, 0, 0.00) 59.21%), linear-gradient(155deg, rgba(0, 0, 0, 0.49) 24.69%, rgba(0, 0, 0, 0.00) 70.89%);
        }

    }

    .s22-2 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s22-3 {
        display: flex;
        margin-top: auto;
    }

    .s22-4 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s22-5 {
        display: grid;
        grid-template-columns: var(--cols);
        min-height: 100%;
        align-items: flex-start;
    }

    .s22-6 {
        flex: none;
        margin: 80rem var(--awr) 0;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 60rem;
        align-items: flex-end;
        overflow: visible;
        position: relative;
        z-index: 1;
        padding: 0 var(--wr);
    }

    .s22 .swiper-wrapper,
    .s22 .swiper-slide {
        transition-timing-function: linear !important;
    }

    .s22-7 {
        grid-column: 1/3;
        display: flex;
        flex-direction: column;
    }

    .s22-7-1 {
        font-style: italic;
        font-size: var(--f-m);
        margin-bottom: 20rem;
        color: var(--c7);
    }

    .s22-7-2 .title {
        color: currentColor;
    }

    .s22-7-3 {
        margin-top: 30rem;
        max-width: 500rem;
    }

    .s22-7-4 {
        margin-top: 40rem;
    }

    .s22-7-4-mob {
        display: none;
        margin-top: 0;
    }

    .s22-8 {
        grid-column: 4/5;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 30rem;
    }

    .s22-9 {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: var(--gap);
    }

    .s22-9-1 {
        color: var(--c7);
    }

    .s22-9-2 {
        text-align: right;
    }

    .s22-10 {
        display: flex;
        justify-content: space-between;
        gap: 20rem;
        position: static;
        --progress: 0%;
    }

    .s22-10 .progress {
        position: absolute;
        top: calc(var(--f-m) * 1.35);
        left: 0;
        right: 0;
        height: 24rem;
        z-index: 2;
        pointer-events: none;
    }

    .s22-10 .progress::before,
    .s22-10 .progress::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        height: 1rem;
        border-radius: 999rem;
        transform: translateY(-50%);
    }

    .s22-10 .progress::before {
        right: 0;
        background-color: var(--c12);
    }

    .s22-10 .progress::after {
        width: var(--progress);
        background-color: var(--c0);
    }

    .s22-10 .progress__icon {
        position: absolute;
        top: 50%;
        left: var(--progress);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24rem;
        height: 24rem;
        color: var(--c0);
        transform: translate(-50%, -50%);
    }

    .s22-10 .progress__icon .icon {
        width: 24rem;
    }

    @media screen and (max-width: 1023.98px) {
        .progress {
            display: none;
        }
    }

    .s22-11 {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 15rem;
    }

    .s22-11 .carousel-button.swiper-button-disabled {
        cursor: not-allowed;
        opacity: .3;
    }

    .s22-12 {
        display: flex;
        flex-direction: column;
        flex: 1;
        /*padding: 0 20rem;*/
        position: relative;
    }


    .s22-12-1 {
        padding-bottom: 10rem;
        font-size: var(--f-m);
        font-style: italic;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        order: -1;
        transition: color .25s ease-in-out;
        padding-right: .3em;
    }

    .s22-12-2 {
        margin-top: 10rem;
        font-size: var(--f-s);
        transition: color .25s ease-in-out;
    }

    .s22-12-3 {
        overflow: hidden;
        position: relative;
        display: flex;
        width: 100%;
        margin-top: 20rem;
        transition: opacity .25s ease-in-out, transform .35s ease-in-out;
        will-change: transform;
    }

    .s22-12-3::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 30%;
    }

    .s22-12-3 img {
        object-position: left;
    }

    .s22-12:not(.active) {
        cursor: pointer;
    }

    .s22-12:not(.active) .s22-12-1,
    .s22-12:not(.active) .s22-12-2 {
        color: var(--c12);
    }

    .s22-12:not(.active) .s22-12-3 {
        opacity: .3;
    }

    .s22-12.active .s22-12-3 {
        transform: scale(1.15);
    }

    .s22-12:hover .s22-12-1, .s22-12:hover .s22-12-2 {
        color: var(--c0);
    }

    .s22-12:hover .s22-12-3 {
        opacity: 1;
    }

    .s23-1 {
        display: grid;
        grid-template-columns: repeat(11, minmax(0, 1fr));
        grid-gap: 20rem;
    }

    .s23-2 {
        position: relative;
        background-color: var(--c1);
        color: var(--c2);
        display: flex;
    }

    .s23-2-2 {
        padding: 20rem;
        font-size: var(--f-b);
        display: flex;
        align-items: flex-end;
        background-image: linear-gradient(transparent, var(--c1));
        width: 100%;
        user-select: none;
    }

    .s23-2-2::before {
        content: "";
        flex: none;
        width: 0;
    }

    .s23-2 img {
        will-change: transform;
        transition: transform .25s ease-in-out;
    }

    .s404-1 {
        padding-top: 100rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .s404-2 {
        display: flex;
        align-items: center;
        gap: max(4px, 10rem);
        padding: max(80px, 80rem) 0 0;
    }

    .s404-num {
        width: max(80px, 214rem);
        min-width: max(80px, 214rem);
    }

    .s404-radar {
        position: relative;
        width: max(160px, 419rem);
        min-width: max(160px, 419rem);
    }

    .s404-radar-img {
        width: 100%;
    }

    .s404-radar::after {
        position: absolute;
        inset: 12%;
        content: '';
        background: url(../img/404-radar.svg) 50% 50% no-repeat;
        background-size: contain;
        animation: rotate 8s infinite linear 1s;
    }

    .radar-dot {
        position: absolute;
        width: 6px;
        height: 6px;
        background-color: #E1251B;
        border-radius: 50%;
        box-shadow: 0 0 10px #E1251B, 0 0 20px #E1251B;
        animation: radar-glow 3s infinite ease-in-out;
    }

    .rd-1 {
        top: 20%;
        left: 48%;
    }

    .rd-2 {
        top: 54%;
        left: 35%;
        animation-delay: 0.5s;
    }

    .rd-3 {
        top: 80%;
        left: 53%;
        animation-delay: 1s;
    }

    .rd-4 {
        top: 47%;
        left: 76%;
        animation-delay: 1.1s;
    }

    .rd-5 {
        top: 30%;
        left: 60%;
        animation-delay: 1.9s;
    }

    @keyframes radar-glow {
        0%, 100% {
            opacity: 0;
            transform: scale(0.4);
        }
        15% {
            opacity: 1;
            transform: scale(1.2);
        }
        40% {
            opacity: 0.8;
            transform: scale(1);
        }
        70% {
            opacity: 0;
        }
    }


    .s404-3 {
        margin-top: 40rem;
        font-style: italic;
        color: var(--c9);
        font-size: var(--f-m);
    }

    .s404-4 {
        min-width: 250rem;
        margin-top: 40rem;
    }

    .s404-5 {
        font-size: 480rem;
        line-height: 1;
        color: var(--c3);
        font-family: var(--altfont);
    }

    .error-msg {
        display: none;
        padding: max(10px, 10rem) 0 0;
        margin: 0 0 min(-10px, -10rem);
        font-weight: 350;
        font-size: 16px;
        line-height: 140%;
        color: rgba(255, 0, 0, 0.8);
    }

    .error .error-msg {
        display: block;
    }

    .form-sent {
        position: relative;
    }

    .form-sent .form-main {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .form-result {
        display: none;
        position: absolute;
        inset: 0;
        top: min(-100px, -100rem);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: max(20px, 20rem);
        background-color: var(--c2);
    }

    .form-sent .form-result {
        display: flex;
    }

    .form-result-text {
        color: var(--c9);
    }

}

@media screen and (max-width: 1400px) {
    .footer-grid {
        grid-gap: 30rem var(--gap);
    }

    .f2 {
        grid-gap: 30rem var(--gap);
    }
}

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

    :root {

        --wr: 15rem;

        --gap: 40rem;

        --btn: 50rem;


        --cols: minmax(0, 1fr);

        --f-s: 14rem;
        --f-d: 16rem;
        --f-m: 18rem;
        --f-b: 20rem;
        --f-l: 24rem;
        --f-xl: 36rem;
        --f-xxl: 40rem;

        --mw: 680rem;


    }

    html {
        font-size: 1px;
    }

    .desktop {
        display: none !important;
    }

    .main {
        padding-top: 65px;
    }

    .preloader-inner { /*display: none;*/
    }

    .preloader-line {
        transition: height .8s;
    }

    .button__default,
    .button__secondary {
        min-width: 240rem;
    }

    .title br {
        display: none;
    }

    .topbar {
        grid-template-columns: 1fr auto;
        padding: 15rem 0;
    }

    .topbar-logo {
        max-width: 95rem;
    }

    .topbar-nav,
    .topbar-action {
        display: none;
    }

    .breadcrumbs {
        margin: 10rem 0 40rem;
    }

    .footer {
        padding: 45rem 0 35rem;
    }

    .footer-grid {
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .f1 {
        order: 1;
    }

    .f1-3 .button {
        width: 100%;

    }

    .f2 {
        order: 1;
        margin-top: 64rem;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 32rem 30rem;
    }

    .f3 {
        order: 2;
        margin-top: 32rem;
    }

    .f4 {
        order: 1;
        margin-top: 32rem;
    }

    .f4-1 {
        margin-bottom: 25rem;
    }

    .f4-2 ul {
        flex-direction: column;
        margin: -.3em;
    }

    .f4-2 li {
        margin: .3em;
    }

    .bottombar {
        padding: 15rem 0;
    }

    .bottombar-inner {
        grid-template-columns: auto;
        grid-gap: 15rem;
    }

    .bottombar-links {
        grid-column: auto;
        justify-self: start;
    }

    .bottombar-links ul {
        justify-content: flex-start;
        gap: 10rem 25rem;
    }

    .pageheader {
        margin-bottom: 85rem;
    }

    .pageheader:has(.pageheader-caption:last-child) {
        margin-bottom: 30rem;
    }

    .pageheader-inner {
        grid-gap: 30rem;
    }

    .pageheader-main {
        grid-column: auto;
    }

    .pageheader-main::before {
        margin-bottom: 30rem;
        height: 10rem;
    }

    .pageheader-caption-pretitle {
        margin-bottom: 10rem;
    }

    .pageheader-title:not(:first-child) {
        margin-top: 15rem;
    }

    .pageheader-subtitle:not(:first-child) {
        margin-top: 20rem;
    }

    .pageheader-carousel-inner {
        margin: 0;
        padding: 0 10rem;
    }

    .pageheader-carousel-card {
        margin: 0 5rem;
    }

    .formbox-row {
        flex-direction: column;
    }

    .formbox-cell:not(:first-child) {
        margin: 25rem 0 0;
    }

    .formbox-footer {
        margin-top: 15rem;
    }

    .formbox-footer-note:not(:last-child) {
        margin-bottom: 30rem;
    }

    .selector-option {
        padding: 10rem 12rem;
        font-family: var(--altfont);
        /*font-size: var(--f-l);*/
        line-height: 100%;
        letter-spacing: -0.03em;
    }

    .textbox img {
        margin: 20rem 0;
    }

    .textbox h2,
    .textbox h3 {
        margin: 40rem 0 10rem;
    }

    .player {
        flex-direction: column;
    }

    .player::before {
        display: none;
    }

    .player-placeholder {
        position: relative;
        display: flex;
        z-index: auto;
    }

    .player-placeholder::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 56.25%;
    }

    .player-footer {
        padding: 0;
        grid-template-columns: auto;
        grid-gap: 0;
        position: relative;
        z-index: 1;
    }

    .player-button {
        grid-column: auto;
        position: absolute;
        bottom: 100%;
        right: 0;
        margin: 10rem;
    }

    .player-caption {
        padding-top: 15rem;
        color: var(--c1);
    }

    .player-caption-subtitle {
        margin-top: 15rem;
    }

    .popup-video {
        display: flex;
        height: auto;
    }

    .popup-video::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 56.25%;
    }

    .pagination {
        width: 100%;
    }

    .pagination-arrow {
        display: none;
    }

    .pagination-nav ul {
        justify-content: center;
    }

    .carousel-button {
        width: 10rem;
        height: 20rem;
    }

    .section-header:not(:last-child) {
        margin-bottom: 20rem;
    }

    .card-1 .card-footer {
        margin-top: 10rem;
    }

    .card-1 .card-action {
        padding-top: 10rem;
    }

    .card-3 .card-footer {
        margin-top: 10rem;
    }

    .card-3 .card-action {
        padding-top: 10rem;
    }

    .section,
    .section__contrast:last-child {
        margin-bottom: 85rem;
    }

    .s1-2 {
        grid-column: auto;
    }

    .s2-1 {
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s2-2 {
        margin-bottom: 30rem;
        text-align: center;
    }

    .s2-3 {
        grid-gap: var(--gap);
    }

    .s2-4 {
        padding: 20rem 0 0;
        border-bottom: 0;
        border-top: var(--sl) solid var(--c13);
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .s2-5 {
        grid-template-columns: auto;
        margin-top: 20rem;
        grid-gap: 10rem;
    }

    .s2-6 {
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        padding-top: 100%;
        margin: 0;
        height: auto;
        order: -1;
    }

    .s2-7 {
        padding-top: 25rem;
    }

    .s2-7-2 {
        margin-top: 25rem;
    }

    .s3-3 {
        padding: 150rem 0;
    }

    .s3-4 {
        grid-column: auto;
    }

    .s4-1 {
        grid-gap: 85rem;
    }

    .s4-2 {
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s4-3 {
        grid-column: auto;
    }

    .s4-3::before {
        display: none;
    }

    .s4-4 {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        display: flex;
    }

    .video-link-text {
        padding: 0 8px 8px;
        font-size: 24px;
        line-height: 120%;
    }

    .video-wrap {
        width: 100%;
        min-width: 1px;
        max-width: 95vw;
    }

    .video-popup-close {
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
    }

    .s4-5 {
        padding-bottom: 0;
    }

    .s4-5::after {
        display: none;
    }

    .s4-5-2 {
        margin-bottom: 10rem;
    }

    .s4-6 {
        margin: 20rem 0 0;
    }

    .s4-8 {
        padding: 0;
    }

    .s4-9 {
        padding-top: 30rem;
    }

    .s4-9-1 {
        width: 100%;
    }

    .s4-9-1 .button:not(.button__inl) {
        width: 100%;
    }

    .s4-2:has(.s4-4-1:nth-child(2)) .s4-5 {
        text-align: center;
    }

    .s4-2__3 .s4-9-1 {
        display: flex;
        justify-content: center;
    }

    .s4-2__4 .s4-4 {
        padding-top: 75%;
    }

    .s5-2-1 {
        margin-bottom: 25rem;
    }

    .s5-2-3 {
        margin-top: 15rem;
    }

    .s5-2-4 {
        padding-top: 20rem;
        margin-top: 25rem;
    }

    .s6-1 {
        grid-template-columns: auto;
        grid-gap: 20rem;
        padding: 0;
    }

    .s6-2 {
        margin: 0;
    }

    .s6-3 {
        grid-row: auto;
        order: initial;
        margin: 0;
    }

    .s6-4 {
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s6-5 {
        padding: 10rem 0;
    }

    .s7-3 {
        margin-top: 40rem;
    }

    .s8-1 {
        grid-template-columns: auto;
        grid-gap: 25rem;
    }

    .s8-2 {
        grid-column: auto;
        align-items: stretch;
    }

    .s8-4 {
        position: relative;
        height: auto;
        top: auto;
        left: auto;
        display: flex;
        padding-top: 100%;
        width: auto;
        margin: -80px -50rem 0;
    }

    .s8-5 {
        grid-column: auto;
        border-left: none;
        padding: 25rem 0 0;
        grid-gap: var(--gap);
        border-top: var(--sl) solid var(--c13);
    }

    .s9-1 {
        grid-gap: 50rem;
    }

    .s9-2 {
        grid-column: auto;
    }

    .s9-3 {
        text-align: left;
    }

    .s9-5 {
        padding: 20rem 10rem;
    }

    .s9-7 {
        padding-right: 20rem;
    }

    .s11-1 {
        grid-gap: 10rem;
    }

    .s12-2 {
        grid-column: auto;
    }

    .s13-3 {
        margin-top: 40rem;
        padding-top: 20rem;
        border-top: var(--sl) solid var(--c13);
    }

    .s13-4 {
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s13-5:not(:last-child) {
        margin-bottom: 40rem;
    }

    .s13-6 {
        grid-template-rows: auto 1fr;
        margin-bottom: auto;
    }

    .s13-6:only-child::before {
        position: relative;
        right: auto;
        top: auto;
        left: auto;
        bottom: auto;
        display: flex;
        width: 100%;
        padding-top: 50%;
        margin: 0 0 -50rem;
    }

    .s13-6-1 {
        margin: 0;
        padding: 0;
    }

    .s13-6-2 {
        margin-top: 20rem;
        padding: 0;
    }

    .s13-6-2::before {
        display: none;
    }

    .s14-1 {
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s14-2 {
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .s14-3 {
        margin: 70rem 0 0;
    }

    .s14-4 {
        margin: 70rem 0 0;
        grid-column: auto;
    }

    .s14-5 {
        margin-top: 70rem;
        padding: 0;
    }

    .s14-6 {
        margin: 0;
        order: -1;
    }

    .s14-7 {
        margin-bottom: 70rem;
    }

    .s14-8:not(:last-child) {
        margin-bottom: 40rem;
    }

    .s15-1 {
        margin-bottom: 40rem;
    }

    .s15-1::before,
    .s15-1 .runner {
        display: none;
    }

    .s15-1 .selector-holder-input {
        font-family: var(--altfont);
        font-size: var(--f-l);
    }

    .s15-3 {
        grid-gap: var(--gap);
        pointer-events: all;
    }

    .s15-4 {
        margin-top: 40rem;
    }

    .s15-4-1 {
        grid-column: auto;
    }

    .s15-5 {
        grid-column: 1/-1;
        color: var(--c1);
    }

    .s15-6 {
        position: absolute;
        right: 0;
        bottom: 65px;
        min-height: 1rem;
        align-items: flex-end;
        justify-content: flex-end;
        padding-left: 20rem;
    }

    .s15-7 {
        margin: 0;
        position: relative;
        display: flex;
        height: auto;
        align-items: flex-end;
        width: 50%;
    }

    .s15-7 img {
        flex: none;
        margin-bottom: 20rem;
        max-width: 100%;
        height: auto;
    }

    .s15-8 {
        bottom: 45px;
    }

    .s15-9 {
        margin-left: auto;
        margin-top: 19px;
    }

    .s15-10 {
        flex-direction: column;
        align-items: flex-start;
    }

    .s15-11 {
        padding: 0;
        display: block;
        position: static;
        width: 100%;
        padding-bottom: 20rem;
    }

    .s16-2 {
        text-align: left;
    }

    .s16-3 {
        grid-column: auto;
        margin-top: 40rem;
    }

    .s16-4 {
        grid-column: auto;
        margin-top: 40rem;
        text-align: left;
    }

    .s17-1 {
        grid-template-columns: auto;
    }

    .s17-2 {
        grid-row: auto;
    }

    .s17-4 {
        margin: 0 0 20rem;
        order: -1;
        text-align: center;
    }

    .s17-5 {
        margin: 10rem 0 0;
    }

    .s18-3 {
        padding-bottom: 50rem;
    }

    .s18-4 {
        margin-top: 30rem;
        grid-gap: 40rem;
    }

    .s18-5-1:not(:last-child) {
        margin-bottom: 15rem;
    }

    .s18-5-2 {
        grid-template-columns: auto;
    }

    .s18-5-2 ul {
        grid-column: auto;
    }

    .s18-5-2 li:not(:first-child) {
        margin-top: 5rem;
    }

    .s19-4 {
        display: inline-block;
    }

    .s19-4-1,
    .s19-4-2 {
        position: relative;
        display: inline;
        right: auto;
        left: auto;
    }

    .s19-4-3 {
        display: none;
    }

    .s19-5 {
        position: relative;
        margin-top: -65px
    }

    .s19-6 {
        order: -1;
        height: auto;
        margin-bottom: 25rem;
    }

    .s19-7 {
        margin-top: 20rem;
        height: 10rem;
    }

    .s20-1 {
        flex-direction: column;
        border-left: none;
        border-bottom: var(--sl) solid var(--c13);
    }

    .s20-2,
    .s20-2.active {
        flex: none;
        pointer-events: all;
        border-right: none;
        border-top: var(--sl) solid var(--c13);
    }

    .s20-3 {
        width: 100%;
    }

    .s20-4 {
        padding: 0 0 40rem;
    }

    .s20-4-2 {
        display: none;
    }

    .s20-4-3 {
        margin-top: 15rem;
    }

    .s20-5 {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .s20-5::before {
        margin-top: 0;
        margin-right: 15rem;
        order: -1;
    }

    .s20-5-1 {
        font-size: var(--f-l);
    }

    .s20-5-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        flex: none;
        width: 15rem;
        height: 10rem;
    }

    .s20-6 {
        order: -1;
        height: auto;
        padding: 30rem 0;
        width: 100%;
    }

    .s20-2:not(.active) .s20-4 {
        display: none;
    }

    .s20-2.active .s20-5-2 {
        transform: scaleY(-1);
    }

    .s20-2.active .s20-6 {
        opacity: 1;
    }

    .s21-1 {
        grid-template-columns: 1fr 1fr;
        grid-gap: 25rem 10rem;
    }

    .s21-2-1 {
        margin: 0;
    }

    .s22-2,
    .s22-2 .swiper {
        position: initial;
        opacity: 1;
    }

    .s22-5 {
        display: flex;
        flex-direction: column;
    / / align-items: flex-end;
        justify-content: flex-end;
        grid-gap: 40rem;
        align-items: center;

    }

    .s22-6 {
        overflow: hidden;
        grid-template-columns: auto;
        grid-gap: 30rem;
        margin: 20rem var(--awr) 0;
    }

    .s22-1 {
        min-height: initial;
        padding-top: initial;
        background-color: #0E283E;
    }

    .s22-2 {
        position: relative !important;

        &:before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: var(--awr);
            right: var(--awr);
            content: '';
            display: flex;
            background: linear-gradient(0deg, rgb(14, 40, 62) 56%, rgba(14, 40, 62, 0.83) 65%, rgba(14, 40, 62, 0) 100%);
            z-index: 2;
            transform: translateY(80%);
        }
    }

    .s22-7-3 {
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .s22-2 .swiper {
        @media (max-width: 1024px) {
            height: 45vw;
            min-height: 400px;
            margin: 0 calc(var(--wr) * -1) -120px;
            width: calc(100% + var(--wr) * 2);
        }
    }

    .s22-7 {
        grid-column: auto;
    }

    .s22-7-4 .button {
        width: 100%;
    }

    .s22-8 {
        display: none !important;
    }

    .s22-7-4-mob {
        display: block;
    }

    .s22-8 {
        grid-column: auto;
        grid-gap: 15rem;
    }

    .s22-11 {
        align-items: center;
        max-width: 500rem;
        width: 100%;
        margin: 0 auto;
    }

    .s22-11-1:last-child {
        margin-left: auto;
    }

    .s22-12 {
        align-items: center;
        text-align: center;
    }

    .s22-12:not(.active) {
        display: none;
    }

    .s22-12-1 {
        padding-bottom: 0;
    }

    .s22-12-2 {
        display: none;
    }

    .s22-12-3 {
        margin: 0;
    }

    .s22-12-3:empty {
        display: none;
    }

    .s22-12-3::before {
        padding-top: 30rem;
    }

    .s22-12-3 img {
        object-position: center;
    }

    .s22-12:has(.s22-12-3:not(:empty)) .s22-12-1 {
        display: none;
    }

    .s22-12.active .s22-12-3 {
        transform: scale(1);
    }

    .s23-1 {
        grid-template-columns: auto;
        grid-gap: var(--gap);
    }

    .s23-2 {
        flex-direction: column;
        background-color: transparent;
        color: var(--c1);
    }

    .s23-2-2 {
        background-image: none;
        padding: 0;
        margin-top: 10rem;
    }


    .topbar-menu {
        display: flex;
        align-items: center;
        position: relative;
    }

    .topbar-menu-title {
        font-size: var(--f-m);
        font-style: italic;
        margin-right: 5rem;
    }

    .topbar-menu-inner {
        position: relative;
        height: 10rem;
        width: 20rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }

    .topbar-menu-inner::before,
    .topbar-menu-inner::after {
        content: "";
        left: 0;
        right: 0;
        height: 1.5rem;
        background-color: currentColor;
        position: absolute;
        margin: 0 3rem;
        transition: all .25s;
    }

    .topbar-menu-inner::before {
        margin-top: -5rem;
    }

    .topbar-menu-inner::after {
        margin-top: 5rem;
    }

    .topbar-menu.active .topbar-menu-inner::before {
        margin-top: 0;
        transform: rotate(45deg);
    }

    .topbar-menu.active .topbar-menu-inner::after {
        margin-top: 0;
        transform: rotate(-45deg);
    }

    .topbar-menu.active .topbar-menu-open,
    .topbar-menu:not(.active) .topbar-menu-close {
        display: none;
    }

    .modal .popup-close {
        margin: var(--wr);
        width: 24rem;
        height: 24rem;
    }

    .modal .popup-inner {
        padding: 100rem 0;
    }

    .menu {
        min-height: 0;
        transition: opacity .5s ease-in-out, transform .5s ease-in-out;
    }

    .menu.active {
        transition-delay: 0s, 0s;
    }

    .menu .popup-inner {
        width: 100%;
    }

    .menu .menu-grid {
        padding: 20rem 0;
        height: calc(var(--app-height) - var(--headroom-height));
        overflow: auto;
        width: 100%;
        flex-direction: column;
        display: flex;
    }

    .menu .menu-list {
        margin-bottom: auto;
    }

    .menu .menu-list > ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
        font-size: var(--f-l);
        line-height: 1;
    }

    .menu .menu-list > ul > li {
        padding-bottom: 20rem;
        border-bottom: var(--sl) solid var(--c14);
    }

    .menu .menu-list ul ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10rem;
        font-size: var(--f-d);
        padding-top: 20rem;
        line-height: normal;
    }

    .menu .menu-list li:not(.active) a {
        color: var(--c11);
    }

    .menu .menu-list li:not(.active) ul {
        display: none;
    }

    .menu .menu-footer {
        margin-top: 30rem;
        flex: none;
    }

    .menu-footer-caption {
        margin-bottom: 15rem;
    }

    .menu-footer-list {
        overflow: hidden;
    }

    .menu-footer-list ul {
        display: flex;
        flex-wrap: wrap;
        margin: -5rem;
        justify-content: space-between;
        color: var(--c9);
    }

    .menu-footer-list li {
        margin: 5rem;
    }

    .menu-footer-action {
        margin-top: 30rem;
    }

    .s8-6-1 {
        margin-bottom: 10px;
    }

    .header.contrast.static.open {
        background-color: var(--c2);
        border-bottom-color: var(--c12);
        color: var(--c1);
    }

    .header.contrast.static.open .button__default {
        background-color: var(--c1);
        color: var(--c2);
    }

    .header.contrast.static.open .topbar-logo img {
        opacity: 1;
    }

    .s404-2 {
        gap: max(4px, 6rem);
        padding: max(80px, 90rem) 0 0;
    }

    .s404-num {
        width: max(80px, 136rem);
        min-width: max(80px, 136rem);
    }

    .s404-radar {
        width: max(160px, 265rem);
        min-width: max(160px, 265rem);
    }

    .cookie {
        left: 15px;
        right: 15px;
        bottom: 15px;
        width: auto;
    }

    .form-result {
        top: 0;
        padding: 50px 0 0;
        justify-content: flex-start;
    }

    .form-result .title {
        font-size: 60px;
        line-height: 100%;
        letter-spacing: -0.03em;
    }

}

@media screen and (max-width: 767px) {
    .s404-2 {
        gap: 4px;
    }

    .s404-num {
        width: 80px;
        min-width: 80px;
    }

    .s404-radar {
        width: 160px;
        min-width: 160px;
    }

    .cookie {
        padding: 20px 17px;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .cookie-text {
        max-width: none;
    }

    .cookie .button {
        width: 100%;
    }
}

@media screen and (min-width: 1024px) {

    .mobile {
        display: none !important;
    }

    .popup-active .header.contrast.static {
        background-color: var(--c2);
        border-bottom-color: var(--c12);
        color: var(--c1);
    }

    .popup-active .header.contrast.static .button__default {
        background-color: var(--c1);
        color: var(--c2);
    }

    .popup-active .header.contrast.static .topbar-logo img {
        opacity: 1;
    }


    .s2-4.active .s2-5 {
        pointer-events: none;
    }

    .s2-4:not(.active) .s2-5-1 {
        color: var(--c13);
    }

    .s2-4:not(.active) .s2-5-2 {
        opacity: 0;
        visibility: hidden;
    }

    .s2-4:not(.active) .s2-6-1 {
        clip-path: inset(100% 0 0 0);
        transition-delay: .8s;
        z-index: 1;
    }

    .s2-4:not(.active) .s2-7 {
        opacity: 0;
        padding: 0;
        height: 0;
    }

    .s4-4-1:nth-child(1):not(:only-child) {
        width: 80%;
        height: 80%;
        top: 10%;
    }

    .s4-4-1:nth-child(2) {
        width: 60%;
        height: 40%;
        bottom: 60%;
    }

    .s4-4-1:nth-child(3) {
        width: 40%;
        height: 60%;
        top: 40%;
    }

    .s4-2__1 .s4-4 {
        left: 100%;
        margin-left: var(--gap);
    }

    .s4-2__1 .s4-4-1:nth-child(1):not(:only-child) {
        margin-left: -90rem;
        transform: translateX(50%);
    }

    .s4-2__1 .s4-4-1:nth-child(2) {
        left: 0%;
        margin-left: -90rem;
    }

    .s4-2__1 .s4-4-1:nth-child(3) {
        left: 0%;
        margin-left: -90rem;
        clip-path: inset(10rem 10rem 0 0);
    }

    .s4-2__2 .s4-3 {
        grid-column: 2/3;
    }

    .s4-2__2 .s4-4-1:nth-child(1):not(:only-child) {
        right: 0;
        margin-right: -90rem;
        left: auto;
        transform: translateX(-50%);
    }

    .s4-2__2 .s4-4-1:nth-child(2) {
        right: 0%;
        margin-right: -90rem;
    }

    .s4-2__2 .s4-4-1:nth-child(3) {
        right: 0%;
        margin-right: -90rem;
        clip-path: inset(10rem 0 0 10rem);
    }

    .s4-2__2 .s4-7 {
        max-width: none;
    }

    .s4-2__2 .s4-8 {
        margin-left: 100rem;
    }

    .s4-2__2 .s4-4 {
        right: 100%;
        margin-right: var(--gap);
    }

    .s4-2__3 .s4-4 {
        left: 100%;
        margin-left: var(--gap);
    }

    .s4-2__4 .s4-4 {
        left: 100%;
        margin-left: var(--gap);
    }

    .s4-2__4 .s4-4-1:nth-child(1):only-child {
        margin: 10%;
    }

    .s4-2__4 .s4-5::after {
        display: none;
    }

    .s4-2__4 .s4-7 {
        max-width: none;
    }

    .s4-2__4 .s4-8 {
        justify-content: center;
    }

    .s4-5 ~ .s4-6 {
        min-height: 50%;
        margin: 0;
    }

    .s7-2__1 {
        grid-column: 1/-1;
    }

    .s7-2__2 {
        grid-column-end: span 2;
    }

    .s7-2__1:not(:last-child) {
        padding-bottom: 60rem;
    }

    .s7-2__1 .card-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        overflow: visible;
    }

    .s7-2__1 .card-1 .card-header {
        margin: 0;
    }

    .s7-2__1 .card-1 .card-header::before {
        padding-top: 100%;
    }

    .s7-2__1 .card-1 .card-content {
        padding: 30rem 100rem;
        justify-content: flex-end;
    }

    .s7-2__1 .card-1 .card-subtitle {
        padding-top: 20rem;
        margin-top: 40rem;
        position: relative;
    }

    .s7-2__1 .card-1 .card-subtitle::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100vw;
        right: -100vw;
        height: var(--sl);
        background-color: currentColor;
        opacity: .2;
        z-index: -1;
    }

    .s7-2__1 .card-1 .card-footer {
        flex: none;
        margin-top: 40rem;
    }

    .s7-2__1 .card-1 .card-action {
        padding-top: 0;
        border-top: none;
    }

    .s15-9 {
        display: flex;
        position: absolute;
        left: 0;
        opacity: 0;
        user-select: none;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: all;

        & > a {
            width: 100%;
        }
    }

    .s23-2:nth-child(10n + 1) {
        grid-column-end: span 4;
    }

    .s23-2:nth-child(10n + 2) {
        grid-column-end: span 2;
    }

    .s23-2:nth-child(10n + 2) .s23-2-2::before {
        padding-top: 100%;
    }

    .s23-2:nth-child(10n + 3) {
        grid-column-end: span 2;
    }

    .s23-2:nth-child(10n + 4) {
        grid-column-end: span 3;
        grid-row-end: span 2;
    }

    .s23-2:nth-child(10n + 5) {
        grid-column-end: span 3;
        grid-row-end: span 2;
    }

    .s23-2:nth-child(10n + 6) {
        grid-column-end: span 2;
    }

    .s23-2:nth-child(10n + 6) .s23-2-2::before {
        padding-top: 120%;
    }

    .s23-2:nth-child(10n + 7) {
        grid-column-end: span 3;
    }

    .s23-2:nth-child(10n + 8) {
        grid-column-end: span 4;
    }

    .s23-2:nth-child(10n + 9) {
        grid-column-end: span 2;
    }

    .s23-2:nth-child(10n + 9) .s23-2-2::before {
        padding-top: 100%;
    }

    .s23-2:nth-child(10n + 10) {
        grid-column-end: span 2;
    }

    .s23-2-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
    }

    .s23-2-1 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-position: center;
        object-fit: cover;
    }

    .s23-2-2 {
        position: relative;
        z-index: 1;
    }

    .menu-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--gap);
        padding: 30rem 0;
        width: 100%;
    }

    .menu-list {
        padding-right: var(--gap);
        border-right: var(--sl) solid var(--c13);
    }

    .menu-list-caption {
        margin-bottom: 50rem;
        color: var(--c11);
        font-style: italic;
    }

    .menu-list ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
        font-size: var(--f-l);
        color: var(--c1);
    }

    .menu-list ul li {
        color: var(--c12);
        transition: color .15s;
        position: relative;
    }

    .menu-list ul ul {
        grid-gap: 10rem;
        padding: 10rem 0 10rem 30rem;
        font-size: var(--f-d);
    }

    .menu-list ul li:not(.active) ul {
        display: none;
    }

    .menu-images {
        grid-column: 2/4;
        display: grid;
    }

    .menu-image {
        grid-area: 1 / 1;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    .menu-image.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .menu-image-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 30rem var(--gap);
        padding-bottom: 20rem;
    }

    .menu-image-media {
        position: relative;
        overflow: hidden;
        width: 100%;
        display: flex;
        grid-column: 1/-1;
    }

    .menu-image-media::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 30%;
    }

    .menu-image-text {
        font-size: var(--f-s);
        color: var(--c7);
    }

    .menu-list:not(:has(.hovered)) ~ .menu-images .menu-image:first-child {
    }

    .menu-button.active,
    .menu-button.hovered,
    .menu-button.active ul li.active,
    .menu-button.active ul li:hover {
        color: var(--c1);
    }


}

@media screen and (min-width: 1600px) {


    html {
        font-size: 1px;
    }


}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {

    .button__default,
    .button__secondary {
        transition: all .25s;
    }

    .popup-active .contrast.static .button__default:hover,
    .button__default:hover {
        border-color: var(--c1);
        color: var(--c1);
        background-color: transparent;
    }

    .button__secondary:hover {
        border-color: var(--c0);
        color: var(--c0);
        background-color: var(--c1);
    }

    .contrast.static .button__default:hover,
    .section__contrast .button__default:hover {
        border-color: var(--c0);
        background-color: transparent;
        color: var(--c0);
    }

    .section__contrast .button__secondary:hover {
        border-color: var(--c0);
        color: var(--c1);
        background-color: var(--c0);
    }

    .button__inl .button-text::before {
        transition: transform .25s;
        will-change: transform;
    }

    .button__inl .button-text::after {
        transition: width .25s .15s;
        will-change: transform;
    }

    .button__inl .button-icon {
        transition: transform .25s, opacity .25s;
        will-change: transform;
    }

    .s7-2:not(.s7-2__1) .card:hover .button__inl .button-text::before,
    .button__inl:hover .button-text::before {
        transform: scaleX(0);
    }

    .s7-2:not(.s7-2__1) .card:hover .button__inl .button-text::after,
    .button__inl:hover .button-text::after {
        width: 100%;
    }

    .s7-2:not(.s7-2__1) .card:hover .button__inl .button-icon,
    .button__inl:hover .button-icon {
        opacity: 1;
        transform: translateX(50%);
    }

    .selector-option {
        transition: background-color .15s;
    }

    .selector-option:hover {
        background-color: var(--c2);
    }

    .card-media {
        will-change: transform;
        transition: transform .25s ease-in-out;
    }

    .card-1:hover .card-media,
    .card-3:hover .card-media {
        transform: scale(1.05);
    }

    .popup-close {
        transition: opacity .15s;
    }

    .popup-close:not(:hover) {
        opacity: .8;
    }

    .s2-4:not(.active) .s2-5-1:hover {
        color: var(--c1);
    }

    .s15-5 {
        transition: color .25s;
    }

    .s15-8-1 {
        transition: opacity .25s;
    }

    .s15-10 {
        transition: opacity .25s .15s, max-width 2s 0.2s;
    }

    .s15-1 li:hover {
        color: var(--c3);
    }

    .s15-3:hover .s15-10:not(:hover) {
        opacity: .2;
        transition-delay: 0s;
    }

    .s15-3:hover .s15-10:not(:hover) .s15-5 {
        color: var(--c1);
    }

    .s15-3:hover .s15-10:hover .s15-8 {
        &:before {
            width: 100%;
        }
    }

    .s15-3:hover .s15-10:not(:hover) .s15-8-1 {
        opacity: 0;
    }

    .s23-2-2 {
        transition: opacity .25s;
    }

    .s23-2:not(:hover) .s23-2-2 {
        opacity: 0;
    }

    .topbar-nav a,
    .pagination a,
    .breadcrumbs li a,
    .tabs li a,
    .f1-2 a,
    .f2-1 a,
    .f4-2 a {
        transition: background-size .25s, color .25s;
        background-size: 0 var(--sl);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        padding-bottom: .2em;
    }

    .topbar-nav a {
        background-position: right bottom 4px;
    }

    .topbar-nav a:hover,
    .pagination a:hover,
    .breadcrumbs li:not(:last-child) a:hover,
    .tabs li:not(.active) a:hover,
    .f1-2 a:hover,
    .f2-1 a:hover,
    .f4-2 a:hover {
        background-size: 100% var(--sl);
        background-position: left bottom;
        color: var(--c1);
    }

    .topbar-nav a:hover {
        background-position: left bottom 4px;
    }

    .contrast.static .topbar-nav a:hover {
        color: var(--c0);
    }

    .popup-active .contrast.static .topbar-nav a:hover {
        color: var(--c1);
    }


    .textbox a {
        transition: opacity .15s;
    }

    .textbox a:hover {
        opacity: .5;
    }

    .player:hover .cover,
    .s23-2:hover img {
        transform: scale(1.05);
    }

    .bottombar-links a:hover {
        background-size: 100% var(--sl);
        background-position: left bottom;
        color: var(--c1);
    }

}


a.card.card-3:hover,
a.s4-2.s4-2__3:hover {
    .button-text::before {
        transform: scaleX(0);
    }

    .button-text::after {
        width: 100%;
    }

    .button-icon {
        opacity: 1;
        transform: translateX(50%);
    }
}


.s22-2 .swiper {
    @media (max-width: 576px) {
        height: 85vw;
    }
}

@media (max-width: 576px) {
    .s22-7-3 {
        -webkit-line-clamp: 3;
    }
}

.wpcf7-response-output {
    display: none;
}

.wpcf7-form-control-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
}

.cf7-theme-select-wrap {
    display: block;
    width: 100%;
}

.wpcf7-not-valid-tip {
    top: 100%;
    position: absolute;
    font-weight: 350;
    font-size: 16px;
    line-height: 140%;
    color: rgba(255, 0, 0, 0.8);
    /*transform: translateY(60%);*/
}

.na-cc-empty {
    grid-column: 1/-1;
    text-align: center;
    font-size: var(--f-l);
    font-family: var(--altfont);
}

.napa-wrap:has(#napa-init-form) {
    max-width: 750rem;
    margin: 0 auto;
}

.na-corporate-careers {
    background-color: inherit !important;
}

.formbox-row:has([type="radio"]) {
    .textfield-label {
        position: initial !important;
        padding: 0;
        margin-bottom: 10rem;
        display: block;
    }
}

.wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 15rem 30rem;

    @media (max-width: 576px) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(85rem, 1fr));
    }
}

.wpcf7-list-item:has([type="radio"]) {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;

    label {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .wpcf7-list-item-label {
        display: flex;
        align-items: center;
        gap: 10rem;
        color: rgba(17, 17, 17, 0.60);
        cursor: pointer;
    }

    .wpcf7-list-item-label:before {
        width: 18rem;
        height: 18rem;
        border-radius: 18rem;
        border: 1px solid currentColor;
        display: flex;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23e1251b'/%3E%3C/svg%3E");
        background-position: center center;
        background-size: 0;
        background-repeat: no-repeat;
    }
}

.wpcf7-list-item:has([type="radio"]:checked) {
    .wpcf7-list-item-label {
        color: rgba(17, 17, 17, 1);
    }

    .wpcf7-list-item-label:before {
        background-size: 50%;
    }
}