@charset "UTF-8";

@import url("reset.css?v2");
@import url("fonts.css");
@import url("swiper-bundle.min.css");

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

    --c0: #ffffff;
    --c1: #000000;
    --c2: #fb4d30;
    --c3: #ff6052;
    --c4: #f7f7f7;
    --c5: #e8e8e8;
    --c6: #e02424;
    --c7: #362c75;

    --c8: rgba(0, 0, 0, 0.4);
    --c9: rgba(0, 0, 0, 0.6);
    --c10: rgba(255, 255, 255, 0.5);

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

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

    --br0: 4rem;
    --br1: 10rem;

    --btn-max: 235rem;

    --f-xxs: max(12px, 14rem);
    --f-xs: max(14px, 16rem);
    --f-s: max(14px, 18rem);
    --f-d: max(14px, 20rem);
    --f-m: max(14px, 24rem);
    --f-b: max(14px, 36rem);
    --f-l: max(14px, 52rem);
    --f-xl: max(14px, 70rem);
    --f-xxl: max(14px, 100rem);

    --mw: 1920px;
}

@keyframes ticker {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

/* globals */

@media screen {
    html {
        font-size: 0.052vw;
        background-color: var(--c0);
    }

    .document {
        font-weight: 400;
        font-family: "PP Mori", sans-serif;
        font-size: var(--f-d);
        line-height: 1.3;
        color: var(--c1);
        background-color: var(--c0);
        letter-spacing: normal;
    }

    .popup-active {}

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

    .preloader {
        background-color: var(--c0);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        visibility: hidden;
        opacity: 0;
        transition: all 0.25s 1s;
        display: flex;
        color: var(--c1);
        will-change: transform;
        flex-direction: column;
        padding: 40rem var(--wr);
    }

    .preloader-bar {
        flex: none;
        width: 100%;
        height: var(--sl);
        background-color: var(--c1);
        line-height: 0;
        transition: transform 0.25s;
        transform: scaleX(0);
        transform-origin: left;
        will-change: transform;
    }

    .preloader-inner {
        margin: auto 0;
        text-align: center;
        padding: 80rem 0;
    }

    .preloader-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 1em;
        overflow: hidden;
        position: relative;
        font-size: var(--f-xxl);
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: -0.03em;
        font-weight: 700;
    }

    .preloader-word {
        will-change: transform;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        display: block;
        transition: transform 0s;
        transform: translateY(100%);
    }

    .preloader-footer {
        flex: none;
        text-align: center;
    }

    .preloader-title.init .preloader-word {
        transform: translateY(-100%);
        transition-duration: 0.25s;
    }

    .preloader-title.init .preloader-word.active {
        transform: translateY(0%);
        transition-duration: 0.25s;
    }

    .preloader-title.init .preloader-word.active ~ .preloader-word {
        transform: translateY(100%);
        transition-duration: 0s;
    }

    .loading,
    .loading-fade-out {
        pointer-events: none;
    }

    .loading .preloader,
    .loading-fade-out .preloader {
        transition-duration: 0s;
        opacity: 1;
        visibility: visible;
    }

    .loading-fade .preloader * {
        display: none;
    }

    .mask-appear {
        position: relative;
        display: inline-block;
    }

    .mask-appear-wrapper {
        display: block;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        z-index: 1;
    }

    .mask-appear-inner {
        display: block;
        transition: transform 1s 0s;
        will-change: transform;
    }

    .mask-appear.hidden .mask-appear-inner {
        transform: translateY(100%);
        transition: all 0s 0s;
    }

    .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%;
        user-select: none;
        cursor: pointer;
        align-items: center;
        height: max(45px, 55rem);
        background-clip: padding-box;
    }

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

    .button-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        position: relative;
        z-index: 2;
        min-width: 0;
        text-transform: capitalize;
        font-size: var(--f-d);
        padding-top: 0.15em;
    }

    .button__default {
        border-radius: var(--br0);
        padding: 0 30rem;
        border: var(--sl) solid var(--c2);
        background-size: 0% 100%;
        background-image: linear-gradient(var(--c2), var(--c2));
        background-position: left;
        background-repeat: no-repeat;
    }

    .button__default:not(:hover) {
        color: var(--c0);
        background-size: 100% 100%;
    }

    .button__secondary {
        border-radius: var(--br0);
        padding: 0 20rem;
        border: var(--sl) solid var(--c2);
        background-image: linear-gradient(var(--c2), var(--c2));
        background-position: left;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .button__secondary:not(:hover) {
        background-size: 0% 100%;
    }

    .button__wide {
        min-width: 360rem;
    }

    .button__wider {
        width: 100%;
    }

    .title {
        font-weight: 700;
        width: 100%;
    }

    .title__large {
        font-size: var(--f-xxl);
        line-height: 0.95;
        text-transform: uppercase;
        letter-spacing: -0.03em;
    }

    .title__default {
        font-size: var(--f-xl);
        line-height: 0.95;
        text-transform: uppercase;
        letter-spacing: -0.03em;
    }

    .title__medium {
        font-size: var(--f-l);
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .title__small {
        font-size: var(--f-b);
        line-height: 1.1;
    }

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

    .header {
        position: sticky;
        top: calc(-1 * var(--headroom-height));
        z-index: 10;
        display: flex;
        align-items: flex-start;
        margin-bottom: 100rem;
    }

    .header.init {
        transition: top 0.25s ease;
    }

    .header.active {
        top: 0;
    }

    .topbar {
        transition: background-color 0.25s;
        width: 100%;
        overflow: hidden;
    }

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

    .topbar-logo {
        position: relative;
        width: 100%;
        max-width: 185rem;
        background-image: url(../img/iwt-logo.svg);
        background-position: top left;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .topbar-logo img {
        visibility: hidden;
    }

    .topbar-nav {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .topbar-nav ul {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 50rem;
        font-size: var(--f-s);
    }

    .header.active .topbar {
        background-color: var(--c1);
    }

    .invert .header {
        height: 0;
        margin: 0;
    }

    .invert .header .topbar-logo img,
    .header.active .topbar-logo img {
        visibility: visible;
    }

    .invert .header .topbar-nav,
    .header.active .topbar-nav {
        color: var(--c0);
    }

    .main {
        margin-top: 0;
        flex: auto;
        display: flex;
        flex-direction: column;
    }

    .section {
        position: relative;
        z-index: 1;
        overflow: hidden;
        margin-bottom: 160rem;
    }

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

    .section[id] {
        padding-top: 20rem;
        margin-top: -20rem;
    }

    .footer {
        overflow: hidden;
        margin-top: 0;
        background-color: var(--c1);
        color: var(--c0);
        padding: 60rem 0 35rem;
    }

    .footer-grid {
        display: grid;
        grid-gap: 0 var(--gap);
    }

    .footer-delimiter {
        grid-column: 1/-1;
        margin: 80rem 0 10rem;
        background-color: currentColor;
        opacity: 0.2;
        height: var(--sl);
        line-height: 0;
    }

    .f1 {
        max-width: 240rem;
        display: flex;
    }

    .f2 {
        max-width: none;
    }

    .f2-1 .subtitle {
        font-size: var(--f-s);
        line-height: 1.4;
        margin-top: 10rem;
    }

    .f2-2 {
        margin-top: 10rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 20rem 15rem;
    }

    .f2-2-1 {
        margin-top: auto;
        border-bottom: var(--sl) solid var(--c10);
        padding: 0 0 10rem;
        font-size: var(--f-xxs);
        position: relative;
    }

    .f2-2-1 input {
        width: 100%;
        text-overflow: ellipsis;
    }

    .f2-2-2 {
        grid-column: 1/-1;
        order: 1;
    }

    .f2-2-2 .checkbox-label-text {
        text-decoration: underline;
    }

    .f2-2-3 .button {
        padding: 0 30rem;
    }

    .f3 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10rem;
        font-size: var(--f-s);
        align-items: center;
    }

    .f4 {
        display: grid;
        grid-auto-flow: column;
        margin-right: auto;
        align-items: center;
        grid-gap: 40rem;
        font-size: var(--f-xxs);
    }

    .f4 a {
        opacity: 0.5;
    }

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

    .f5-1 {
        font-size: var(--f-xxs);
        opacity: 0.5;
    }

    .footer-copyright {
        opacity: 0.5;
    }

    .f2 .success-msg {
        background-color: var(--c1);
    }

    .f2.success .f2-2-2,
    .f2.success .f2-2-3 {
        visibility: hidden;
    }

    .footer-author {
        margin-right: auto;
        display: flex;
        align-items: baseline;
        color: var(--c10);
    }

    .footer-author a {
        color: var(--c0);
        opacity: 0.5;
    }

    .dd-icon {
        width: 1em;
        height: 1em;
        margin: 0 0.3em;
        color: var(--c2);
        opacity: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dd-icon .icon {
        width: 100%;
    }

    .carousel-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60rem;
        height: 60rem;
        background-color: var(--c0);
        color: var(--c1);
        border-radius: 50%;
        z-index: 1;
        padding: 20rem;
        cursor: pointer;
    }

    .social {
        display: flex;
    }

    .social-item {
        width: max(28px, 34rem);
        height: max(28px, 34rem);
        padding: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        border: var(--sl) solid;
    }

    .social-item:not(:last-child) {
        margin-right: 10rem;
    }

    .tabs {
        overflow: hidden;
    }

    .tabs ul {
        display: flex;
        flex-wrap: wrap;
        margin: calc(var(--gap) / -2);
    }

    .tabs li {
        margin: calc(var(--gap) / 2);
        position: relative;
        height: max(35px, 40rem);
        white-space: nowrap;
        overflow: hidden;
        line-height: 1;
        display: flex;
        align-items: center;
        min-width: var(--btn-max);
        padding: 0.15em 35rem 0;
        border: var(--sl) solid var(--c2);
        border-radius: var(--br0);
        color: var(--c1);
        text-align: center;
        justify-content: center;
        letter-spacing: -0.04em;
        font-weight: 500;
    }

    .tabs li.current {
        background-color: var(--c2);
        color: var(--c0);
        /*pointer-events: none;*/
    }

    .unl {
        text-decoration: underline;
        text-transform: uppercase;
        font-size: var(--f-s);
    }

    .tag {
        font-size: var(--f-s);
        letter-spacing: -0.04em;
        white-space: nowrap;
        overflow: hidden;
        max-width: 100%;
        border-radius: 999rem;
        padding: 0.15em 0.8em 0;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: max(25px, 30rem);
    }

    .tag::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: currentColor;
        opacity: 0.1;
    }

    .tag__orange {
        color: var(--c2);
    }

    .tag__black {
        color: var(--c1);
    }

    .formbox {
        display: grid;
        grid-template-columns: auto;
        grid-gap: var(--gap);
    }

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

    .formbox-context {
        margin-top: 20rem;
        opacity: 0.6;
        font-size: var(--f-s);
    }

    .formbox-note {
        margin-top: 20rem;
        opacity: 0.4;
        font-size: var(--f-s);
        max-width: 450rem;
    }

    .textfield {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .textfield-label {
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 20rem;
        max-width: 565rem;
    }

    .textfield-input {
        padding: 20rem 30rem;
        resize: none;
        min-height: max(55px, 60rem);
        border-radius: var(--br0);
        background-color: var(--c0);
        color: var(--c1);
        text-overflow: ellipsis;
        width: 100%;
        box-shadow: inset 0 0 0 var(--sl) var(--c8);
        font-size: var(--f-xs);
        line-height: 1;
    }

    .checkbox-group {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .checkbox {
        overflow: hidden;
        position: relative;
    }

    .checkbox-control {
        width: 0;
        height: 0;
        position: absolute;
        right: 100%;
        opacity: 0;
    }

    .checkbox-label {
        display: flex;
        align-items: flex-start;
    }

    .checkbox-label-icon {
        width: max(20px, 24rem);
        height: max(20px, 24rem);
        border-radius: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-right: 10rem;
        padding: 3rem;
        border: max(2px, 3rem) solid;
    }

    .checkbox-label-icon::after {
        content: "";
        background-color: currentColor;
        width: 100%;
        height: 100%;
        will-change: transform;
        transition: transform 0.25s;
    }

    .checkbox-label-text {
        user-select: none;
        font-size: var(--f-xxs);
        line-height: 1.3;
        margin: auto 0;
    }

    .checkbox-control:not(:checked) ~ .checkbox-label-icon,
    .checkbox-control:not(:checked) ~ .checkbox-label-text {
        cursor: pointer;
    }

    .checkbox-control:not(:checked) ~ .checkbox-label-icon::after {
        transform: scale(0);
    }

    .textbox {
        font-size: var(--f-m);
        line-height: 1.4;
    }

    .textbox p,
    .textbox ul {
        margin: 20rem 0;
    }

    .textbox ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0.25em;
    }

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

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

    .textbox h2 {
        font-weight: 700;
        width: 100%;
        font-size: var(--f-l);
        line-height: 1.1;
        margin: 60rem 0 40rem;
    }

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

    .textbox h3 {
        font-weight: 700;
        width: 100%;
        font-size: var(--f-b);
        line-height: 1.1;
        margin: 20rem 0;
    }

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

    .textbox img {
        overflow: hidden;
        border-radius: var(--br1);
    }

    .textbox p:not(:first-child) img {
        margin-top: 60rem;
    }

    .textbox ol {
        margin: 20rem 0;
        counter-reset: num;
        list-style-type: none;
    }

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

    .textbox ol li:before {
        content: counter(num) ".";
        counter-increment: num;
        display: inline-block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 20px;
        color: #000;
        text-align: right;
    }

    .textbox h4 {
        font-weight: 700;
        width: 100%;
        font-size: var(--f-m);
        line-height: 1.1;
        margin: 20rem 0;
    }

    .author {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 110rem;
        min-height: 100rem;
        position: relative;
    }

    .author-image {
        position: absolute;
        overflow: hidden;
        border-radius: 50%;
        width: 100rem;
        height: 100rem;
        left: 0;
        top: 0;
    }

    .author-title {
        font-weight: 700;
        line-height: 1.2;
    }

    .author-subtitle {
        margin-top: 10rem;
        opacity: 0.4;
        font-size: var(--f-xs);
        text-transform: uppercase;
        line-height: 1.1;
    }

    .form-container {
        position: relative;
    }

    .success-msg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: opacity 0.15s;
        pointer-events: none;
        opacity: 0;
    }

    .form-container.success {
        pointer-events: none;
    }

    .form-container.success .success-msg {
        opacity: 1;
    }

    .calc-caption {
        margin-bottom: 20rem;
        font-size: var(--f-s);
    }

    .calc-content {
        background-color: var(--c0);
        color: var(--c1);
        border-radius: var(--br0);
        padding: 20rem 30rem;
    }

    .calc-content-value {
        color: var(--c2);
        font-size: var(--f-l);
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 30rem 0;
    }

    .calc-content-value:first-child {
        margin-top: 0;
    }

    .calc-content-value:last-child {
        margin-bottom: 0;
    }

    .calc-content-header,
    .calc-content-footer {
        opacity: 0.7;
        font-size: var(--f-xs);
    }

    .player-box {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: block;
        background-color: var(--c1);
        color: var(--c0);
    }

    .player-box-poster {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        opacity: 0.7;
    }

    .player-box-media {
        width: 100%;
        display: flex;
        position: relative;
        z-index: 1;
        visibility: hidden;
    }

    .player-box-media video {
        min-width: 100%;
        width: 100%;
    }

    .player-box-button {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150rem;
        height: 150rem;
        margin: -75rem 0 0 -75rem;
        z-index: 1;
        cursor: pointer;
    }

    .player-box.active .player-box-media {
        visibility: visible;
    }

    .quiz {
        background-color: var(--c0);
        border-radius: var(--br1);
        box-shadow: 0 0 0 10rem;
        padding: 50rem;
        display: grid;
        /*grid-template-columns: 1fr auto;*/
        grid-gap: 20rem 50rem;
        align-items: flex-start;
    }

    .quiz .carousel-buttons {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 10rem;
    }

    .quiz .carousel-button {
        width: max(30px, 40rem);
        height: max(30px, 40rem);
        padding: 12rem;
        background-color: var(--c4);
    }

    .quiz .carousel-pagination {
        grid-column: 1/-1;
    }

    .quiz .carousel-fraction {
        display: flex;
        font-size: var(--f-xs);
    }

    .quiz .carousel-fraction-total {
        opacity: 0.4;
    }

    .quiz .swiper {
        margin: calc(-1 * var(--sl));
        grid-column: 1/-1;
    }

    .quiz .swiper-slide {}

    .quiz .swiper-pagination-progressbar {
        height: max(2px, 2rem);
        position: relative;
        background-color: var(--c5);
    }

    .quiz .swiper-pagination-progressbar-fill {
        background-color: var(--c1);
    }

    .quiz .swiper-button-disabled,
    .quiz .disabled {
        pointer-events: none;
        opacity: 0.4;
    }

    .quiz-title {
        max-width: 730rem;
    }

    .quiz-form {
        margin: 20rem 0 0;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
        width: 100%;
        grid-column: 1/-1;
    }

    .quiz-option {
        cursor: pointer;
        overflow: hidden;
        position: relative;
        padding: var(--sl);
        font-size: var(--f-s);
    }

    .quiz-option-control {
        position: absolute;
        right: 100%;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .quiz-option-label {
        border: var(--sl) solid var(--c5);
        padding: 30rem 25rem;
        display: block;
        transition: border-color 0.15s;
    }

    .quiz-option-control:checked ~ .quiz-option-label {
        border-color: var(--c1);
    }

    .expand {
        border-bottom: var(--sl) solid var(--c5);
        padding-bottom: 25rem;
    }

    .expand-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 50rem;
        align-items: center;
        user-select: none;
        cursor: pointer;
    }

    .expand-header-title {
        font-weight: 700;
        line-height: 1.2;
    }

    .expand-header-icon {
        width: max(18px, 20rem);
        height: max(18px, 20rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .expand-content {
        height: 0;
        overflow: hidden;
        transition-property: height, padding;
        transition-duration: 0.5s;
        opacity: 0.6;
    }

    .expand.active .expand-header-icon {
        transform: scaleY(-1);
    }

    .expand.active .expand-content {
        padding-top: 20rem;
        height: auto;
    }

    .numlist ol {
        border-top: var(--sl) solid var(--c8);
        counter-reset: index;
    }

    .numlist ol li {
        padding: 20rem 0;
        border-bottom: var(--sl) solid var(--c8);
        display: flex;
        align-items: baseline;
    }

    .numlist ol li::before {
        content: counter(index, decimal-leading-zero);
        counter-increment: index;
        flex: none;
        margin-right: 20rem;
        font-size: var(--f-xxs);
        line-height: 1;
        overflow: hidden;
        width: 2.5em;
        height: 2.5em;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border-radius: 50%;
        background-color: var(--c1);
        color: var(--c0);
    }

    .marquee {
        white-space: nowrap;
        display: inline-flex;
        justify-content: flex-start;
    }

    .marquee-container {
        display: inline-flex;
        align-items: center;
    }

    .marquee-container img {
        height: 100%;
        width: auto;
        max-width: none;
    }

    .marquee-container::after {
        content: "";
        width: 30rem;
        height: 100%;
    }

    .runner-end,
    .runner-start {
        animation: 25s linear infinite ticker;
        display: flex;
        will-change: transform;
        transition: transform 0.01s;
    }
}

/* cards */

@media screen {
    .card {
        position: relative;
        overflow: hidden;
        display: flex;
        min-height: 100%;
        flex-direction: column;
        user-select: none;
        width: 100%;
    }

    .card-1 {
        box-shadow: inset 0 0 0 var(--sl) var(--c8);
        border-radius: var(--br1);
        padding: 40rem;
    }

    .card-1 .card-header {
        margin-bottom: 100rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 50rem;
    }

    .card-1 .card-media {
        width: 175rem;
        overflow: hidden;
        position: relative;
        border-radius: var(--br1);
        display: flex;
    }

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

    .card-1 .card-context {
        opacity: 0.4;
    }

    .card-1 .card-content {
        margin-top: auto;
        max-width: 75%;
    }

    .card-1 .card-title {
        font-size: var(--f-b);
        line-height: 1.1;
        font-weight: 700;
    }

    .card-1 .card-subtitle {
        margin-top: 20rem;
        opacity: 0.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-1 .card-action {
        margin-top: 20rem;
    }

    .card-2 .card-header {
        margin-bottom: 20rem;
        overflow: hidden;
        position: relative;
        border-radius: var(--br1);
        display: flex;
        max-height: 725rem;
    }

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

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

    .card-2 .card-content {
        padding-right: 50rem;
    }

    .card-2 .card-title {
        font-size: var(--f-b);
        line-height: 1.1;
        font-weight: 700;
    }

    .card-2 .card-subtitle {
        margin-top: 10rem;
        opacity: 0.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-2 .card-action {
        margin-top: 20rem;
        max-width: var(--btn-max);
    }

    .card-3 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .card-3 .card-header {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
    }

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

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

    .card-3 .card-content {
        grid-column: 3/4;
    }

    .card-3 .card-title {
        font-size: var(--f-l);
        line-height: 1.1;
        font-weight: 700;
    }

    .card-3 .card-subtitle {
        margin-top: 20rem;
    }

    .card-3 .card-action {
        margin-top: 30rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
    }

    .card-4 .card-header {
        margin-bottom: 20rem;
        overflow: hidden;
        position: relative;
        border-radius: var(--br1);
        padding: 125rem;
        background-color: var(--c4);
    }

    .card-4 .card-media {
        position: relative;
        width: 100%;
        display: flex;
    }

    .card-4 .card-media::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 120%;
    }

    .card-4 .card-content {
        padding-right: 100rem;
    }

    .card-4 .card-title {
        font-size: var(--f-b);
        line-height: 1.1;
        font-weight: 700;
    }

    .card-4 .card-subtitle {
        margin-top: 10rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-4 .card-action {
        margin-top: 20rem;
        max-width: var(--btn-max);
    }

    .card-5 {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .card-5 .card-header {
        order: 1;
        box-shadow: inset 0 0 0 var(--sl) var(--c8);
        border-radius: var(--br1);
        overflow: hidden;
        display: flex;
        position: relative;
        width: 100%;
        max-width: 300rem;
        min-height: 215rem;
        flex: none;
    }

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

    .card-5 .card-content {
        max-width: 460rem;
        margin-right: 50rem;
    }

    .card-5 .card-title {
        font-weight: 700;
        line-height: 1.2;
    }

    .card-5 .card-subtitle {
        margin-top: 10rem;
        opacity: 0.5;
        line-height: 1.4;
        font-size: var(--f-s);
    }

    .card-6 .card-header {
        margin-bottom: 20rem;
        overflow: hidden;
        position: relative;
        border-radius: var(--br1);
        display: flex;
    }

    .card-6 .card-header::before {
        content: "";
        flex: none;
        width: 0;
    }

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

    .card-6 .card-content {
        padding-right: 70rem;
    }

    .card-6 .card-title {
        font-size: var(--f-b);
        line-height: 1.1;
        font-weight: 700;
    }

    .card-6 .card-subtitle {
        margin-top: 20rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
	
	.card-6 .card-description {
		margin-top: 20rem;
	}

    .card-6 .card-action {
        margin-top: 40rem;
    }

    .card-7 {
        background-color: var(--c4);
        padding: 20rem;
    }

    .card-7::before {
        content: "";
        width: 60rem;
        height: 60rem;
        margin-bottom: 10rem;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.9988 15.5C21.2614 15.303 21.5603 15.1597 21.8783 15.0782C22.1964 14.9967 22.5273 14.9787 22.8523 15.0251C23.1773 15.0716 23.49 15.1815 23.7725 15.3488C24.055 15.5161 24.3018 15.7374 24.4988 16C24.6958 16.2626 24.8391 16.5615 24.9206 16.8795C25.0021 17.1976 25.0201 17.5285 24.9737 17.8536C24.9272 18.1786 24.8172 18.4912 24.65 18.7737C24.4827 19.0562 24.2614 19.303 23.9988 19.5C20.0888 22.4325 17.8488 25.285 16.5663 27.775C18.3272 27.3217 20.1856 27.4283 21.8832 28.0799C23.5808 28.7315 25.0331 29.8958 26.0385 31.4109C27.0438 32.926 27.5522 34.7167 27.4929 36.5341C27.4336 38.3515 26.8096 40.1052 25.7076 41.5516C24.6057 42.9979 23.0805 44.0651 21.344 44.6046C19.6076 45.1442 17.7462 45.1294 16.0186 44.5623C14.2909 43.9952 12.7829 42.9039 11.7041 41.4402C10.6252 39.9765 10.0292 38.2131 9.99879 36.395C9.682 33.3249 10.1179 30.2238 11.2688 27.36C12.7613 23.595 15.6788 19.49 20.9988 15.5ZM43.4988 15.5C43.7614 15.303 44.0603 15.1597 44.3783 15.0782C44.6964 14.9967 45.0273 14.9787 45.3523 15.0251C45.6773 15.0716 45.99 15.1815 46.2725 15.3488C46.555 15.5161 46.8018 15.7374 46.9988 16C47.1958 16.2626 47.3391 16.5615 47.4206 16.8795C47.5021 17.1976 47.5201 17.5285 47.4737 17.8536C47.4272 18.1786 47.3172 18.4912 47.15 18.7737C46.9827 19.0562 46.7614 19.303 46.4988 19.5C42.5888 22.4325 40.3488 25.285 39.0663 27.775C40.8272 27.3217 42.6856 27.4283 44.3832 28.0799C46.0807 28.7315 47.5331 29.8958 48.5385 31.4109C49.5438 32.926 50.0522 34.7167 49.9929 36.5341C49.9336 38.3515 49.3096 40.1052 48.2076 41.5516C47.1057 42.9979 45.5805 44.0651 43.844 44.6046C42.1076 45.1442 40.2462 45.1294 38.5186 44.5623C36.7909 43.9952 35.2829 42.9039 34.2041 41.4402C33.1252 39.9765 32.5292 38.2131 32.4988 36.395C32.182 33.3249 32.6179 30.2238 33.7688 27.36C35.2638 23.595 38.1788 19.49 43.4988 15.5Z' fill='black'%3E%3C/path%3E%3C/svg%3E%0A");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .card-7 .card-content {
        padding-right: 40rem;
        font-size: var(--f-s);
        flex: auto;
    }

    .card-7 .card-footer {
        margin-top: 100rem;
    }

    .card-8 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .card-8 .card-header {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
    }

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

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

    .card-8 .card-content {
        grid-column: 3/5;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0 var(--gap);
        display: grid;
    }

    .card-8 .card-title {
        font-size: var(--f-l);
        line-height: 1.1;
        font-weight: 700;
        grid-column: 1/-1;
        max-width: 620rem;
    }

    .card-8 .card-subtitle {
        margin-top: 20rem;
    }

    .card-8 .card-action {
        padding-top: 30rem;
        display: flex;
        grid-column: 1/-1;
        flex-wrap: wrap;
        margin: calc(var(--gap) / -2);
    }

    .card-8 .card-action .button {
        margin: calc(var(--gap) / 2);
    }

    .card-9 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .card-9 .card-header {
        position: relative;
        overflow: hidden;
        display: flex;
        border-radius: var(--br1);
        color: var(--c0);
        background-color: var(--c1);
    }

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

    .card-9 .card-header-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        width: max(20px, 25rem);
        height: max(20px, 25rem);
        position: relative;
        z-index: 1;
    }

    .card-9 .card-content {
        grid-column: 2/4;
    }

    .card-9 .card-title {
        font-weight: 700;
        line-height: 1.2;
    }

    .card-9 .card-footer {
        margin-left: auto;
        opacity: 0.4;
    }

    .card-10 {
        display: flex;
        border-radius: var(--br1);
        padding: 55rem 30rem;
        z-index: 1;
        flex-direction: row;
        background-color: var(--c1);
        color: var(--c0);
    }

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

    .card-10 .card-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .card-10 .card-header::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(rgba(0, 0, 0, 0), var(--c1));
    }

    .card-10 .card-content {
        max-width: 460rem;
        margin-top: 470rem;
    }

    .card-10 .card-title {
        font-size: var(--f-b);
        line-height: 1.1;
        font-weight: 700;
    }

    .card-10 .card-subtitle {
        margin-top: 20rem;
        font-size: var(--f-s);
    }




    .card-11 {
        box-shadow: inset 0 0 0 var(--sl) var(--c8);
        border-radius: var(--br1);
        padding: 40rem 0;
    }

    .card-11 .card-content {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-gap: 30rem var(--gap);
    }

    .card-11 .card-pretitle {
        padding-left: 40rem;
        grid-column: 1/-1;
    }

    .card-11 .card-title {
        padding-left: 40rem;
        grid-column: 1/5;
        font-size: var(--f-l);
        line-height: 1.1;
        font-weight: 700;
    }

    .card-11 .card-subtitle {
        padding-right: 40rem;
        grid-column: 6/-1;
        opacity: .4;
    }



}

/* sections */

@media screen {
    .s0 {
        background-color: var(--c1);
        color: var(--c0);
        margin-bottom: 130rem;
    }

    .s0:first-child {
        padding-top: var(--headroom-height);
    }

    .s0-1 {
        display: flex;
        align-items: flex-end;
        min-height: calc(var(--app-height) - var(--headroom-height));
        padding: 80rem 0;
    }

    .s0-2 {
        position: relative;
        z-index: 2;
    }

    .s0-2 .subtitle {
        margin-top: 20rem;
        max-width: 550rem;
        font-size: var(--f-m);
        line-height: 1.4;
    }

    .s0-2 .action {
        margin-top: 30rem;
    }

    .s0-2 .action-inner {
        display: inline-grid;
        grid-gap: 15rem;
        grid-template-columns: repeat(2, minmax(235rem, 1fr));
    }

    .s0-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s0-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
            radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    }

    .s1-1 {
        display: flex;
        flex-direction: column;
    }

    .s1-2 {
        margin-bottom: 40rem;
    }

    .s1-3 {
        margin-bottom: 20rem;
        border-bottom: var(--sl) solid var(--c8);
        padding-bottom: 40rem;
    }

    .s1-4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        width: 100%;
    }

    .s1-4-1 {
        display: flex;
    }

    .s1-5 {
        margin: 50rem auto 0;
    }

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

    .s2:last-child {
        margin: auto 0 0;
    }

    .s2-1 {
        display: flex;
        padding: 200rem 0;
        justify-content: center;
        align-items: center;
        min-height: 1000rem;
    }

    .s2-2 {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 610rem;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .s2-2-1 {
        text-align: center;
    }

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

    .s2-2-2 {
        margin-top: 20rem;
        width: 100%;
    }

    .s2-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s2-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--c1);
        opacity: 0.7;
    }

    .s2-4 {
        position: relative;
        z-index: 2;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .s2-4-1 {
        text-align: center;
    }

    .s2-4-2 {
        margin-top: 40rem;
    }

    .s3-1 {
        display: flex;
        flex-direction: column;
    }

    .s3-3 {
        margin-top: 50rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--gap);
        width: 100%;
    }

    .s4-1 {
        display: flex;
        flex-direction: column;
    }

    .s4-3 {
        margin-top: 50rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
        width: 100%;
        border-top: var(--sl) solid var(--c8);
    }

    .s4-3-1 {
        border-bottom: var(--sl) solid var(--c8);
        padding: var(--gap) 0;
    }

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

    .s5-2 {
        margin: auto 0;
        max-width: 600rem;
    }

    .s5-2-1 .subtitle {
        margin-top: 20rem;
    }

    .s5-2-2 {
        margin-top: 40rem;
    }

    .s5-3,
    .s5-5 {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
    }

    .s5-3::before,
    .s5-5::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 90%;
    }

    .s5-4 {
        margin: auto;
        max-width: 580rem;
    }

    .s5-4 .subtitle {
        font-weight: 700;
        margin-top: 20rem;
    }

    .s5-2 .success-msg {
        background-color: var(--c0);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .s5-2 .success-msg-text {
        margin-top: 20rem;
    }

    .s6-1 {
        display: flex;
        flex-direction: column;
    }

    .s6-2 .subtitle {
        margin-top: 20rem;
        max-width: 625rem;
        font-size: var(--f-m);
        line-height: 1.4;
    }

    .s6-3 {
        margin-top: 40rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--gap);
        width: 100%;
        padding-top: 20rem;
        border-top: var(--sl) solid var(--c8);
    }

    .s7-1 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s7-2 {
        grid-column: 1/4;
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
    }

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

    .s7-3 {
        grid-column: 5/9;
    }

    .s7-4 {
        margin-bottom: 20rem;
    }

    .s7-4 .tag {
        font-size: var(--f-xs);
    }

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

    .s7-5-1 {
        grid-column: 1/4;
    }

    .s7-5-1 .subtitle {
        margin-top: 20rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .s7-5-2 {
        margin-left: auto;
        opacity: 0.4;
        font-size: var(--f-s);
    }

    .s7-6 {
        margin-top: 30rem;
    }

    .s8-1 {
        overflow: hidden;
        position: relative;
        border-radius: var(--br1);
        display: flex;
    }

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

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

    .s8-3 {
        padding: 100rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.2);
        color: var(--c0);
        width: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
        cursor: pointer;
    }

    .s8-3-1 {
        user-select: none;
        width: 150rem;
        height: 150rem;
        display: inline-flex;
    }

    .s9-2 {
        max-width: 1205rem;
    }

    .s9-3 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        margin-top: 40rem;
        border-top: var(--sl) solid var(--c8);
        padding-top: 20rem;
        align-items: flex-start;
    }

    .s9-4 {
        grid-column: 1/4;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 40rem;
    }

    .s9-4-1 .subtitle {
        margin-top: 20rem;
        font-size: var(--f-m);
        line-height: 1.4;
        color: var(--c9);
    }

    .s9-4-1 .subtitle a {
        color: var(--c2);
    }

    .s9-5 {
        grid-column: 6/9;
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
        align-items: flex-start;
    }

    .s9-6 {
        grid-column: 5/9;
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
        align-items: flex-start;
    }

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

    .s10-1-1 {
        padding: var(--gap) 0;
        border-bottom: var(--sl) solid var(--c8);
    }

    .s11-1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 0 var(--gap);
        align-items: flex-start;
    }

    .s11-2 {
        padding-right: 100rem;
    }

    .s11-3 {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .s11-3-1 {
        margin-bottom: 20rem;
    }

    .s11-3-2 {
        opacity: 0.4;
        font-size: var(--f-m);
        letter-spacing: 1.4;
    }

    .s11-4 {
        position: relative;
        overflow: hidden;
        display: flex;
        margin-top: 40rem;
    }

    .s11-4:empty {
        border-top: var(--sl) solid var(--c8);
    }

    .s11-4:not(:empty)::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 45%;
    }

    .s11-5 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-right: 100rem;
        margin-top: 50rem;
    }

    .s11-5-1 {
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        width: 100rem;
        height: 100rem;
        margin-bottom: 20rem;
    }

    .s11-5-2 {
        line-height: 1.1;
        font-size: var(--f-m);
        font-weight: 700;
    }

    .s11-5-3 {
        margin-top: 10rem;
        font-size: var(--f-s);
        line-height: 1.4;
        opacity: 0.4;
    }

    .s11-5-4 {
        margin-top: 20rem;
    }

    .s11-6 {
        margin-top: 50rem;
    }

    .s12-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .s12-2 .title {
        max-width: 50%;
    }

    .s12-2 .subtitle {
        margin-top: 20rem;
        font-size: var(--f-m);
        line-height: 1.4;
        max-width: 925rem;
    }

    .s12-2 .action {
        margin-top: 30rem;
        min-width: var(--btn-max);
    }

    .s12-3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 130rem var(--gap);
        margin-top: 50rem;
    }

    .s12-3-2 {
        grid-column: 1/-1;
        position: relative;
    }

    .s12-3-2 .carousel-button {
        position: absolute;
        top: 50%;
        z-index: 2;
    }

    .s12-3-2 .carousel-button__prev {
        left: var(--gap);
        transform: translateY(-50%);
    }

    .s12-3-2 .carousel-button__next {
        right: calc(var(--gap) / 2);
        transform: translate(50%, -50%);
    }

    .s12-3-2 .swiper {
        width: 100%;
        overflow: visible;
        margin-left: 0;
    }

    .s12-3-2 .swiper-slide {
        padding-right: var(--gap);
        height: auto;
        display: flex;
    }

    .s13-2 {
        margin-bottom: 50rem;
    }

    .s13-2-1 {
        text-align: center;
        margin: 0 auto;
        max-width: 1000rem;
    }

    .s13-3 {
        margin: 0 var(--awr);
        position: relative;
        overflow: hidden;
        display: flex;
        background-color: var(--c1);
    }

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

    .s13-4 {
        padding: 60rem var(--wr);
        position: relative;
        z-index: 1;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        color: var(--c0);
        width: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        min-height: 100%;
    }

    .s13-5 {
        max-width: 900rem;
    }

    .s13-6 {
        margin-top: 20rem;
        max-width: 600rem;
    }

    .s13-7 {
        margin-top: 30rem;
        display: grid;
        grid-auto-flow: column;
        grid-gap: 15rem;
    }

    .s13-7-1 {
        min-width: var(--btn-max);
    }

    .s14-1 {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 0 50rem;
        align-items: flex-start;
    }

    .s14-3 {
        margin-top: 40rem;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        position: relative;
        order: 1;
        grid-column: 1/-1;
    }

    .s14-3-1 {
        grid-column: 1/7;
        margin-right: calc(-1 * var(--gap));
    }

    .s14-3-1 .carousel-button {
        position: absolute;
        top: 225rem;
        z-index: 2;
        backdrop-filter: blur(30px);
        background-color: rgba(255, 255, 255, 0.2);
        color: var(--c0);
    }

    .s14-3-1 .carousel-button__prev {
        left: var(--gap);
        transform: translateY(-50%);
    }

    .s14-3-1 .carousel-button__next {
        right: var(--gap);
        transform: translateY(-50%);
    }

    .s14-4 {
        min-width: var(--btn-max);
    }

    .s14-3-1 .swiper {
        width: 100%;
        overflow: visible;
        margin-left: 0;
    }

    .s14-3-1 .swiper-slide {
        padding-right: var(--gap);
        height: auto;
        display: flex;
    }

    .s15:last-child {
        margin: auto 0 60rem;
    }

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

    .s15-1-1::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 75%;
    }

    .s15-2 .swiper {
        overflow: visible;
    }

    .s15-2 .swiper-wrapper {
        transition-timing-function: linear !important;
    }

    .s15-2 .swiper-slide {
        margin: 0 var(--gap);
        display: flex;
        max-width: 200rem;
        justify-content: center;
        align-items: center;
    }

    .s15-1-1,
    .s15-2 .swiper-slide {
        aspect-ratio: 98/56;
    }

    .s16-1 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s16-2 {
        grid-column: 1/4;
        padding: 50rem 100rem;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
        border-radius: var(--br1);
        background-color: var(--c4);
        justify-content: center;
    }

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

    .s16-3 {
        grid-column: 5/9;
    }

    .s16-5 {
        margin-top: 30rem;
        max-width: 600rem;
    }

    .s16-5-1 {
        font-weight: 700;
        line-height: 1.1;
    }

    .s16-5-2 {
        margin-top: 20rem;
        font-size: var(--f-m);
        line-height: 1.4;
    }

    .s16-6 {
        margin-top: 40rem;
        max-width: 600rem;
    }

    .s16-6-1 {
        font-weight: 700;
        line-height: 1.1;
    }

    .s16-6-2 {
        margin-top: 20rem;
        font-size: var(--f-s);
        line-height: 1.4;
    }

    .s16-7 {
        margin-top: 60rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--gap);
        max-width: 680rem;
    }

    .s16-8 {
        margin-top: 40rem;
        max-width: 720rem;
    }

    .s404 {
        background-color: var(--c1);
        color: var(--c0);
        margin-bottom: 0;
        padding-top: var(--headroom-height);
    }

    .s404-1 {
        padding: 190rem 0;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        align-items: flex-end;
        min-height: calc(var(--app-height) - var(--headroom-height));
    }

    .s404-2 {
        grid-column: 2/5;
        max-width: 600rem;
    }

    .s404-2-1 .subtitle {
        margin-top: 20rem;
        font-size: var(--f-m);
        line-height: 1.4;
    }

    .s404-2-2 {
        margin-top: 30rem;
    }

    .s404-2-2 .formbox-footer {
        margin-top: var(--gap);
    }

    .s404-3 {
        grid-column: 6/9;
    }

    .s17-2 {
        text-align: center;
        margin-bottom: 50rem;
    }

    .s17-2 .subtitle {
        font-size: var(--f-m);
        margin-top: 20rem;
    }

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

    .s17-4 {
        grid-template-columns: 1fr auto;
        grid-gap: 50rem;
        align-items: baseline;
        padding-bottom: 20rem;
        border-bottom: var(--sl) solid var(--c8);
        grid-column: 1/-1;
        display: grid;
    }

    .s17-4-2 {
        opacity: 0.4;
    }

    .s17-5 {
        padding-right: 80rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s17-5-1 {
        border-bottom: var(--sl) solid var(--c8);
        padding-bottom: 20rem;
        cursor: pointer;
    }

    .s17-7 {}

    .s17-7:not(.active) {
        display: none;
    }

    .s18-2 {
        max-width: 1205rem;
    }

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

    .s18-3:not(:first-child) {
        margin-top: 40rem;
        border-top: var(--sl) solid var(--c8);
        padding-top: 20rem;
    }

    .s18-4 {
        padding-right: 200rem;
    }

    .s18-4-1:not(:first-child) {
        margin-top: 20rem;
    }

    .s18-4-1 .subtitle {
        margin-top: 20rem;
        font-size: var(--f-s);
    }

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

    .s18-4-2 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0.25em;
    }

    .s18-4-2 ul li {
        position: relative;
        padding-left: 1.5em;
    }

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

    .s18-4-2 .formbox-footer {
        margin-top: 20rem;
    }

    .s18-4-3 {
        margin-top: 40rem;
    }

    .s18-5 {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
        align-items: flex-start;
    }

    .s19:first-child {
        padding-top: var(--headroom-height);
        margin-top: calc(-1 * var(--headroom-height) - 100rem);
    }

    .s19 {
        background-color: var(--c4);
    }

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

    .s19-2 {
        margin: auto 0;
        max-width: 600rem;
    }

    .s19-2 .subtitle {
        margin-top: 20rem;
        opacity: 0.4;
        font-size: var(--f-m);
    }

    .s19-3 {
        border-radius: var(--br1);
        background-color: var(--c1);
        color: var(--c0);
        padding: 50rem;
        overflow: hidden;
    }

    .s19-3-2 {
        margin-top: 20rem;
    }

    .s19-3-3 {
        max-width: 600rem;
        font-size: var(--f-xs);
        opacity: 0.6;
        margin-top: 20rem;
    }

    .s20-1 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 160rem;
    }

    .s20-3 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s20-4 {
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .s20-4 .title {
        max-width: 1180rem;
    }

    .s20-4 .subtitle {
        font-size: var(--f-m);
        margin-top: 20rem;
        max-width: 680rem;
    }

    .s20-5 {
        margin-top: 60rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--gap);
        counter-reset: index;
    }

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

    .s20-6::before {
        content: counter(index, decimal-leading-zero) "/";
        counter-increment: index;
        font-size: var(--f-l);
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 0.1em;
        display: block;
    }

    .s20-6-1 {
        border-bottom: var(--sl) solid var(--c1);
        color: var(--c8);
        padding-bottom: 30rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
    }

    .s20-6-1::before,
    .s20-6-1::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: max(5px, 9rem);
        height: max(5px, 9rem);
        border-radius: 50%;
        background-color: var(--c1);
        margin-top: calc(var(--sl) / -2);
        transform: translateY(-50%);
    }

    .s20-6-1::after {
        left: auto;
        right: 0;
    }

    .s20-6-2 {
        margin-top: 20rem;
        padding: 30rem;
        font-size: var(--f-s);
        background-color: var(--c4);
        flex: auto;
    }

    .s20-6:not(:last-child) {
        margin-right: calc(-1 * var(--gap));
    }

    .s20-6:not(:last-child) .s20-6-1 {
        padding-right: var(--gap);
    }

    .s20-6:not(:last-child) .s20-6-2 {
        margin-right: var(--gap);
    }

    .s20-7 {
        grid-column: 1/4;
    }

    .s20-7-1 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1em;
    }

    .s20-7-1 ul li {
        padding-left: 30rem;
        position: relative;
        min-height: 15rem;
    }

    .s20-7-1 ul li::before {
        content: "";
        width: 15rem;
        height: 15rem;
        position: absolute;
        top: calc((1.3em - 15rem) / 2);
        left: 0;
        background-color: var(--c2);
    }

    .s20-7-2 {
        margin-bottom: 35rem;
    }

    .s20-7-2:first-child {
        padding-top: 40rem;
        border-top: var(--sl) solid var(--c5);
    }

    .s20-7-3 {
        margin-top: 50rem;
    }

    .s20-8 {
        grid-column: 5/9;
        border-radius: var(--br1);
        overflow: hidden;
        position: relative;
    }

    .s20-8-1 {
        display: flex;
        position: relative;
    }

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

    .s20-8-1::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: radial-gradient(rgba(0, 0, 0, 0), var(--c8));
    }

    .s21-1 {
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .s21-1 .title {
        max-width: 1250rem;
    }

    .s21-1 .subtitle {
        font-size: var(--f-m);
        margin-top: 20rem;
        max-width: 930rem;
    }

    .s21-2 {
        margin-top: 60rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
    }

    .s21-3 {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
    }

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

    .s21-4 {
        padding: 40rem;
        border-radius: var(--br1);
        background-color: var(--c1);
        color: var(--c0);
    }

    .s21-5 {
        padding-right: 150rem;
    }

    .s21-5-2 {
        margin-top: 40rem;
        font-size: var(--f-m);
    }

    .s21-5-2 .numlist ol {
        border-top-color: var(--c10);
    }

    .s21-5-2 .numlist ol li {
        border-bottom-color: var(--c10);
    }

    .s21-5-2 .numlist ol li::before {
        background-color: var(--c0);
        color: var(--c1);
    }

    .s21-5-3 {
        margin-top: 20rem;
        opacity: 0.6;
    }

    .s22:first-child {
        padding-top: var(--headroom-height);
        margin-top: calc(-1 * var(--headroom-height) - 100rem);
    }

    .s22 {
        background-color: var(--c4);
    }

    .s22-1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 60rem var(--gap);
        padding: 100rem 0 60rem;
    }

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

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

    .s23-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .s23-2 .title {
        max-width: 50%;
    }

    .s23-2 .subtitle {
        margin-top: 20rem;
        font-size: var(--f-m);
        line-height: 1.4;
        max-width: 925rem;
    }

    .s23-2 .action {
        margin-top: 30rem;
        min-width: var(--btn-max);
    }

    .s23-3 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        margin-top: 50rem;
    }

    .s23-3-1 {
        grid-column: 1/7;
    }

    .s23-3 .swiper {
        overflow: visible;
        margin-left: calc(-1 * var(--gap));
    }

    .s23-3 .swiper-slide {
        padding-left: var(--gap);
        height: auto;
    }

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

    .s24-1 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        padding: 100rem 0;
        width: 100%;
    }

    .s24-2 {
        grid-column: 5/-1;
        max-width: 780rem;
        padding-left: 80rem;
    }

    .s24-3 {
        position: relative;
        z-index: 2;
        max-width: 650rem;
    }

    .s24-4 {
        position: absolute;
        width: 100%;
        margin: 0;
        max-width: calc(var(--mw) - 2 * var(--wr));
        height: 100%;
        z-index: 1;
        left: 0;
        top: 0;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
    }

    .s24-4-1 {
        position: relative;
        grid-column: 1/6;
        margin-right: var(--awr);
    }

    .s24-4-1::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 50%,
                var(--c1)),
            radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
        z-index: 1;
    }

    .s24-5 {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 50rem;
        margin-top: 40rem;
    }

    .s24-6-1 {
        text-transform: uppercase;
    }

    .s24-6-2 {
        margin-top: 20rem;
        font-size: var(--f-s);
        opacity: 0.7;
        max-width: 280rem;
    }

    .s24-7 {
        display: flex;
        align-items: center;
    }

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

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

    .s25-2 {
        background-color: var(--c4);
        border-radius: var(--br1);
        overflow: hidden;
        padding: 100rem;
    }

    .s25-2-1 {
        position: relative;
        display: flex;
    }

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

    .s25-3 {
        padding-left: 80rem;
    }

    .s25-3-2 {
        margin-top: 40rem;
        max-width: 630rem;
        font-size: var(--f-m);
    }

    .s25-3-3 {
        margin-top: 60rem;
    }

    .s26 {
        background-color: var(--c1);
        color: var(--c0);
        margin-bottom: 130rem;
    }

    .s26:first-child {
        padding-top: var(--headroom-height);
    }

    .s26-1 {
        display: flex;
        min-height: calc(var(--app-height) - var(--headroom-height));
        padding: 80rem 0 0;
        align-items: flex-end;
    }

    .s26-2 {
        position: relative;
        z-index: 2;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 100rem var(--gap);
        width: 100%;
        display: grid;
    }

    .s26-2-1 {
        order: 1;
        grid-column: 1/-1;
    }

    .s26-2-1 .title {
        font-size: 235rem;
    }

    .s26-2-2 {
        grid-column: 1/3;
        padding-right: var(--wr);
    }

    .s26-2-2 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1em;
        font-size: var(--f-s);
    }

    .s26-2-2 ul li {
        padding-left: 30rem;
        position: relative;
        min-height: 15rem;
    }

    .s26-2-2 ul li::before {
        content: "";
        width: 15rem;
        height: 15rem;
        position: absolute;
        top: calc((1.3em - 15rem) / 2);
        left: 0;
        background-color: var(--c2);
    }

    .s26-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s26-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
            radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    }

    .s26-4 {
        position: absolute;
        width: calc(100% - 2 * var(--wr));
        margin: 0;
        max-width: calc(var(--mw) - 2 * var(--wr));
        height: 100%;
        z-index: 1;
        top: 0;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        pointer-events: none;
        left: 50%;
        transform: translateX(-50%);
    }

    .s26-4::before {
        content: "";
        grid-column: 1/3;
        margin-left: var(--awr);
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(35px);
    }

    .s27-1 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 160rem var(--gap);
    }

    .s27-2 {
        grid-column: 3/7;
        font-size: var(--f-m);
    }

    .s27-2-1 {
        position: relative;
        min-height: 100rem;
    }

    .s27-2-1::before {
        content: "";
        width: 100rem;
        height: 100rem;
        margin-right: var(--gap);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.9988 15.5C21.2614 15.303 21.5603 15.1597 21.8783 15.0782C22.1964 14.9967 22.5273 14.9787 22.8523 15.0251C23.1773 15.0716 23.49 15.1815 23.7725 15.3488C24.055 15.5161 24.3018 15.7374 24.4988 16C24.6958 16.2626 24.8391 16.5615 24.9206 16.8795C25.0021 17.1976 25.0201 17.5285 24.9737 17.8536C24.9272 18.1786 24.8172 18.4912 24.65 18.7737C24.4827 19.0562 24.2614 19.303 23.9988 19.5C20.0888 22.4325 17.8488 25.285 16.5663 27.775C18.3272 27.3217 20.1856 27.4283 21.8832 28.0799C23.5808 28.7315 25.0331 29.8958 26.0385 31.4109C27.0438 32.926 27.5522 34.7167 27.4929 36.5341C27.4336 38.3515 26.8096 40.1052 25.7076 41.5516C24.6057 42.9979 23.0805 44.0651 21.344 44.6046C19.6076 45.1442 17.7462 45.1294 16.0186 44.5623C14.2909 43.9952 12.7829 42.9039 11.7041 41.4402C10.6252 39.9765 10.0292 38.2131 9.99879 36.395C9.682 33.3249 10.1179 30.2238 11.2688 27.36C12.7613 23.595 15.6788 19.49 20.9988 15.5ZM43.4988 15.5C43.7614 15.303 44.0603 15.1597 44.3783 15.0782C44.6964 14.9967 45.0273 14.9787 45.3523 15.0251C45.6773 15.0716 45.99 15.1815 46.2725 15.3488C46.555 15.5161 46.8018 15.7374 46.9988 16C47.1958 16.2626 47.3391 16.5615 47.4206 16.8795C47.5021 17.1976 47.5201 17.5285 47.4737 17.8536C47.4272 18.1786 47.3172 18.4912 47.15 18.7737C46.9827 19.0562 46.7614 19.303 46.4988 19.5C42.5888 22.4325 40.3488 25.285 39.0663 27.775C40.8272 27.3217 42.6856 27.4283 44.3832 28.0799C46.0807 28.7315 47.5331 29.8958 48.5385 31.4109C49.5438 32.926 50.0522 34.7167 49.9929 36.5341C49.9336 38.3515 49.3096 40.1052 48.2076 41.5516C47.1057 42.9979 45.5805 44.0651 43.844 44.6046C42.1076 45.1442 40.2462 45.1294 38.5186 44.5623C36.7909 43.9952 35.2829 42.9039 34.2041 41.4402C33.1252 39.9765 32.5292 38.2131 32.4988 36.395C32.182 33.3249 32.6179 30.2238 33.7688 27.36C35.2638 23.595 38.1788 19.49 43.4988 15.5Z' fill='black'%3E%3C/path%3E%3C/svg%3E%0A");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: 100%;
        top: 0;
        transform: translateY(-20%);
    }

    .s27-2-2 {
        padding-right: calc((100% - 3 * var(--gap)) / 4 + var(--gap));
    }

    .s27-2-2:not(:first-child) {
        margin-top: 20rem;
    }

    .s27-2-3 {
        opacity: 0.6;
    }

    .s27-2-3:not(:first-child) {
        margin-top: 20rem;
    }

    .s27-3 {
        grid-column: 3/7;
    }

    .s27-3 .textbox h2 {
        margin: 60rem 0 40rem;
        text-transform: uppercase;
        font-size: var(--f-xl);
        line-height: 0.95;
        letter-spacing: -0.03em;
    }

    .s27-3 .textbox h2:first-child {
        margin-top: 0;
    }

    .s27-3 .textbox h3 {
        margin: 60rem 0 20rem;
    }

    .s27-3 .textbox h3:first-child {
        margin-top: 0;
    }

    .s27-4 {
        grid-column: 1/-1;
        background-color: var(--c1);
        color: var(--c0);
        border-radius: var(--br1);
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: var(--gap);
        padding: 120rem 0;
    }

    .s27-4-1 {
        grid-column: 2/8;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .s27-4-1::before {
        content: "";
        flex: none;
        width: 60rem;
        height: 60rem;
        background-color: var(--c2);
        border-radius: 50%;
        margin-right: 20rem;
        margin-top: -0.05em;
        font-size: var(--f-xl);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.3334 10L15.0001 28.3333L6.66675 20' stroke='white' stroke-width='3.33333' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 65%;
    }

    .s27-4-1 .title {
        width: auto;
    }

    .s27-4-2 {
        grid-column: 2/8;
        text-align: center;
        font-size: var(--f-m);
    }

    .s28-1 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        grid-gap: var(--gap);
    }

    .s28-2 {
        border-radius: var(--br1);
        overflow: hidden;
        display: flex;
    }

    .s28-3 {
        padding: 0 60rem;
    }

    .s28-3-2 {
        margin-top: 20rem;
        font-size: var(--f-s);
        max-width: 575rem;
    }

    .s29 {
        background-color: var(--c1);
        color: var(--c0);
        padding: 130rem 0;
    }

    .s29-1 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        grid-gap: var(--gap);
    }

    .s29-2 {
        padding: 0 60rem;
    }

    .s29-2-2 {
        margin-top: 20rem;
        font-size: var(--f-s);
        max-width: 575rem;
    }

    .s29-3 {
        display: flex;
        align-items: center;
        background-image: url(/wp-content/uploads/2025/09/ipad-container.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }

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

    .s29-3-1 {
        display: flex;
        align-items: center;
        justify-content: center;
        clip-path: inset(4% 4%);
    }

    .s30 {
        margin-bottom: 0;
        padding-bottom: 160rem;
    }

    .s30-1 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 80rem var(--gap);
        grid-template-rows: 1fr 1fr;
    }

    .s30-2 {
        grid-column: 3/7;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .s30-2-2 {
        margin-top: 20rem;
    }

    .s30-3 {
        grid-column: 2/8;
        position: relative;
        margin: 0 0 -160rem;
    }

    .s30-3::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(transparent, var(--c0));
    }

    .s30-3 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }


    .s31-2 {
        margin-bottom: 60rem;
    }

    .s31-3 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: var(--gap);
    }

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

    .s32-1 {
        position: relative;
        z-index: 2;
        padding: 210rem 0 180rem;
    }

    .s32-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .3;
    }


}

@media screen and (max-width: 1023.98px) {
    :root {
        --wr: 16rem;

        --gap: 30rem;

        --btn-max: 100%;

        --f-xxs: 14rem;
        --f-xs: 16rem;
        --f-s: 16rem;
        --f-d: 16rem;
        --f-m: 16rem;
        --f-b: 18rem;
        --f-l: 25rem;
        --f-xl: 32rem;
        --f-xxl: 40rem;

        --mw: 680rem;
    }

    html {
        font-size: 1px;
    }

    .desktop {
        display: none !important;
    }

    .preloader {
        padding: 20rem;
    }

    .button {
        height: 60rem;
        padding: 0 10rem;
    }

    .button__wide {
        min-width: 100%;
    }

    .title br {
        display: none;
    }

    .header {
        margin-bottom: 40rem;
    }

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

    .topbar-nav {
        margin-left: auto;
        width: 24rem;
        height: 24rem;
        padding: 2rem;
    }

    .footer {
        padding: 20rem 0;
    }

    .footer-delimiter {
        margin: 30rem 0;
    }

    .f1 {
        max-width: 140rem;
    }

    .f2 {
        margin-top: 40rem;
    }

    .f2-1 .title {
        font-size: var(--f-l);
    }

    .f2-2 {
        margin-top: 20rem;
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .f2-2-2 {
        margin-top: 20rem;
    }

    .f2-2-3 {
        margin-top: 30rem;
    }

    .f3 {
        margin-top: 30rem;
    }

    .f4 {
        order: 1;
        margin-top: 30rem;
        grid-auto-flow: row;
        grid-gap: 10rem;
    }

    .f5 {
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .f6 {
        margin-top: 30rem;
    }

    .carousel-button {
        display: none;
    }

    .author {
        min-height: 60rem;
        padding-left: 75rem;
    }

    .author-image {
        width: 60rem;
        height: 60rem;
    }

    .author-title {
        font-size: var(--f-b);
    }

    .formbox {
        grid-gap: 20rem;
    }

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

    .textfield-input {
        font-size: var(--f-d);
    }

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

    .tabs li {
        margin: 0;
        min-width: 0;
    }

    .section {
        margin-bottom: 80rem;
    }

    .textbox h2 {
        margin: 30rem 0 10rem;
    }

    .textbox p,
    .textbox ul,
    .textbox h3 {
        margin: 15rem 0;
    }

    .textbox p:not(:first-child) img {
        margin-top: 30rem;
    }

    .textbox p:not(:first-child) .button {
        margin-top: 10rem;
    }

    .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background-color: var(--c0);
        color: var(--c1);
        display: flex;
        transition-duration: 0.75s;
        will-change: transform;
        transition-property: transform, visibility;
    }

    .popup-inner {
        padding: 0 var(--wr) 30rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100%;
    }

    .popup-menu {
        flex: auto;
        margin: 60rem 0;
    }

    .popup-menu ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10rem;
        text-align: center;
        letter-spacing: -0.01em;
        line-height: 1.1;
        font-size: var(--f-xl);
        text-transform: uppercase;
        font-weight: 700;
    }

    .popup-menu ul li {
        transition: all 0.25s 0.75s;
    }

    .popup-menu ul li:nth-child(1) {
        transition-delay: 0.75s;
    }

    .popup-menu ul li:nth-child(2) {
        transition-delay: 0.8s;
    }

    .popup-menu ul li:nth-child(3) {
        transition-delay: 0.85s;
    }

    .popup-menu ul li:nth-child(4) {
        transition-delay: 0.9s;
    }

    .popup-menu ul li:nth-child(5) {
        transition-delay: 0.95s;
    }

    .popup-menu ul li:nth-child(6) {
        transition-delay: 1s;
    }

    .popup-menu ul li:nth-child(7) {
        transition-delay: 1.05s;
    }

    .popup-overlay {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: all 1s;
    }

    .popup:not(.active) {
        transform: translateY(-100%);
        visibility: hidden;
    }

    .popup:not(.active) .popup-menu ul li {
        opacity: 0;
        transform: translateY(20rem);
        transition-delay: 0s;
    }

    .popup.active ~ .popup-overlay {
        opacity: 1;
        visibility: visible;
    }

    .popup .topbar-logo {
        max-width: 155rem;
        margin: -10rem 0;
    }

    .player-box-button {
        width: 60rem;
        height: 60rem;
        margin: -30rem 0 0 -30rem;
    }

    .quiz {
        box-shadow: 0 0 0 4rem;
        padding: 20rem;
        grid-gap: 20rem;
    }

    .quiz-form {
        grid-gap: 15rem;
    }

    .quiz-title .title {
        font-size: var(--f-l);
    }

    .quiz-option-label {
        padding: 20rem;
    }

    .quiz .carousel-button {
        display: flex;
        width: 24rem;
        height: 24rem;
        padding: 6rem;
    }

    .expand {
        padding-bottom: 20rem;
    }

    .card .card-title {
        font-size: var(--f-l);
        line-height: 1.1;
        word-break: break-all;
    }

    .card-1:not(.card-1__alt) {
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    .card-1 .card-header {
        margin-bottom: 0;
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .card-1 .card-media {
        width: 100%;
        margin-bottom: 15rem;
    }

    .card-1 .card-context {
        margin-bottom: 10rem;
    }

    .card-1 .card-tags {
        margin-bottom: 30rem;
    }

    .card-1 .card-content {
        margin-top: 0;
        max-width: none;
    }

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

    .card-1.card-1__alt {
        padding: 20rem;
    }

    .card-2 .card-header {
        margin-bottom: 15rem;
    }

    .card-2 .card-content {
        padding: 0;
    }

    .card-2 .card-subtitle {
        opacity: 1;
    }

    .card-3 {
        display: flex;
        flex-direction: column;
        grid-gap: 0;
    }

    .card-3 .card-header {
        width: 100%;
        margin-bottom: 15rem;
    }

    .card-3 .card-header::before {
        padding-top: 100%;
    }

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

    .card-3 .card-action {
        margin-top: 20rem;
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .card-4 .card-header {
        padding: 50rem 70rem;
        margin-bottom: 15rem;
    }

    .card-4 .card-content {
        padding: 0;
    }

    .card-5 {
        flex-direction: column;
    }

    .card-5 .card-content {
        margin: 0;
    }

    .card-5 .card-header {
        order: -1;
        margin-bottom: 20rem;
        max-width: 60%;
        min-height: 0;
    }

    .card-6 .card-header {
        margin-bottom: 15rem;
    }

    .card-6 .card-header::before {
        padding-top: 100%;
    }

    .card-6 .card-content {
        padding: 0;
    }

    .card-6 .card-subtitle {
        margin-top: 10rem;
        -webkit-line-clamp: 3;
    }

    .card-6 .card-action {
        margin-top: 20rem;
    }

    .card-7::before {
        width: 40rem;
        height: 40rem;
    }

    .card-7 .card-content {
        padding: 0;
    }

    .card-7 .card-footer {
        margin-top: 30rem;
    }

    .card-8 {
        grid-template-columns: auto;
        grid-gap: 15rem;
    }

    .card-8 .card-content {
        grid-column: 1/-1;
        grid-template-columns: auto;
    }

    .card-8 .card-title {
        word-break: normal;
    }

    .card-8 .card-subtitle {
        margin-top: 10rem;
    }

    .card-8 .card-action {
        padding-top: 20rem;
        margin: 0;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .card-8 .card-action .button {
        margin: 0;
        width: 100%;
    }

    .card-9 {
        grid-template-columns: 1fr auto;
        grid-gap: 10rem 20rem;
    }

    .card-9 .card-header {
        grid-column: 1/-1;
    }

    .card-9 .card-content {
        grid-column: 1/2;
    }

    .card-9 .card-title {
        font-size: var(--f-b);
        word-break: normal;
    }

    .card-9 .card-footer {
        grid-column: 2/3;
    }

    .card-10 {
        padding: 0;
        background-color: transparent;
        color: var(--c1);
        border-radius: 0;
        flex-direction: column;
    }

    .card-10::before {
        display: none;
    }

    .card-10 .card-header {
        position: relative;
        display: flex;
        border-radius: var(--br1);
        overflow: hidden;
        border-radius: var(--br1);
    }

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

    .card-10 .card-content {
        margin-top: 15rem;
    }

    .card-10 .card-subtitle {
        margin-top: 10rem;
    }
    
    
    .card-11{padding: 20rem;}
    .card-11 .card-content{grid-template-columns: auto;grid-gap: 20rem;}
    .card-11 .card-pretitle,
    .card-11 .card-title,
    .card-11 .card-subtitle{grid-column: 1/-1;padding: 0;word-break: normal;}

    .s0-1 {
        padding: 40rem 0;
    }

    .s0-2 {
        width: 100%;
    }

    .s0-2 .action-inner {
        display: inline-grid;
        grid-gap: 15rem;
        grid-template-columns: auto;
        width: 100%;
    }

    .s1-2 {
        margin-bottom: 20rem;
    }

    .s1-2 + .s1-4 {
        padding-top: 10rem;
    }

    .s1-3 {
        margin-bottom: 20rem;
        padding-bottom: 30rem;
    }

    .s1-4 {
        grid-template-columns: auto;
    }

    .s1-5 {
        margin: 30rem 0 0;
    }

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

    .s2:last-child {
        margin-bottom: 80rem;
    }

    .s2-1 {
        padding: 0;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .s2-2 {
        align-items: flex-start;
    }

    .s2-2-1 {
        text-align: left;
    }

    .s2-3 {
        position: relative;
        order: -1;
        display: flex;
        background-color: var(--c1);
        margin: 0 var(--awr) 20rem;
        width: auto;
        height: auto;
    }

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

    .s2-3::after {
        opacity: 0.2;
    }

    .s2-4-1 {
        text-align: left;
    }

    .s2-4-2 {
        margin-top: 20rem;
        width: 100%;
    }

    .s3-3 {
        margin-top: 30rem;
        grid-template-columns: auto;
    }

    .s4-3 {
        margin-top: 30rem;
        border-top: none;
        grid-gap: var(--gap);
    }

    .s4-3-1 {
        padding: 0;
        border: none;
    }

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

    .s5-3 {
        order: -1;
        border-radius: 0;
        margin: 0 var(--awr) 20rem;
    }

    .s5-3::before {
        padding-top: 90%;
    }

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

    .s5-5 {
        margin-top: 30rem;
    }

    .s6-3 {
        margin-top: 30rem;
        grid-template-columns: auto;
    }

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

    .s7-2 {
        grid-column: auto;
        border-radius: 0;
        margin: 0 var(--awr);
    }

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

    .s7-5 {
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s7-5-1 {
        grid-column: auto;
    }

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

    .s7-5-2 {
        grid-column: auto;
        order: -1;
        margin-left: 0;
    }

    .s7-6 {
        margin-top: 20rem;
    }

    .s8-1::before {
        padding-top: 56.25%;
    }

    .s8-3 {
        padding: 50rem;
    }

    .s8-3-1,
    .s8-3-1 .icon {
        width: 60rem;
        height: 60rem;
    }

    .s9-3 {
        margin-top: 30rem;
        padding-top: 30rem;
        grid-template-columns: auto;
        grid-gap: var(--gap);
    }

    .s9-4 {
        grid-column: auto;
        grid-gap: 30rem;
    }

    .s9-4-1 .subtitle {
        margin-top: 10rem;
    }

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

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

    .s10-1-1 {
        padding-bottom: 0;
        border-bottom: none;
        border-top: var(--sl) solid var(--c8);
    }

    .s10-1-1:first-child {
        padding-top: 0;
        border-top: none;
    }

    .s10-1-2 ~ .s10-1-1 {
        display: none;
    }

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

    .s11-2 {
        padding: 0;
    }

    .s11-2 .title {
        font-size: var(--f-xxl);
    }

    .s11-3 {
        margin-top: 20rem;
        align-items: flex-start;
    }

    .s11-3-1 {
        margin-bottom: 15rem;
    }

    .s11-4:empty {
        margin: 20rem 0 0;
    }

    .s11-4:not(:empty) {
        margin: 30rem var(--awr) 0;
    }

    .s11-4::before {
        padding-top: 75%;
    }

    .s11-5 {
        margin: 30rem 0 0;
    }

    .s11-5-1 {
        margin-bottom: 10rem;
    }

    .s11-5-2 {
        font-size: var(--f-b);
    }

    .s11-6 {
        margin-top: 30rem;
    }

    .s12-2 {
        align-items: flex-start;
    }

    .s12-2 .title {
        max-width: none;
        text-align: left;
    }

    .s12-2 .subtitle {
        text-align: left;
    }

    .s12-3 {
        grid-template-columns: auto;
        margin-top: 30rem;
        grid-gap: var(--gap);
    }

    .s12-3-2 .swiper-wrapper {
        flex-direction: column;
    }

    .s12-3-2 .swiper-slide {
        padding: 0;
    }

    .s12-3-2 .swiper-slide:not(:first-child) {
        margin-top: var(--gap);
    }

    .s13-2 {
        margin-bottom: 30rem;
    }

    .s13-2-1 {
        text-align: left;
    }

    .s13-3 {
        flex-direction: column;
        background-color: var(--c0);
    }

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

    .s13-4 {
        background: none;
        color: var(--c1);
        padding: 0 var(--wr);
    }

    .s13-7 {
        width: 100%;
        grid-auto-flow: row;
        grid-gap: 20rem;
    }

    .s13-8 {
        position: relative;
        display: flex;
        order: -1;
        margin-bottom: 20rem;
        background-color: var(--c1);
    }

    .s13-8::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 65%;
    }

    .s13-3:first-child .s13-8 {
        order: 1;
        margin: 30rem 0 0;
    }

    .s13-3:first-child .s13-8::before {
        padding-top: 70%;
    }

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

    .s14-3 {
        grid-template-columns: auto;
        grid-gap: 0;
        margin-top: 30rem;
        overflow: hidden;
    }

    .s14-3-1 {
        margin: 0;
        grid-column: auto;
    }

    .s14-3-1 .swiper-wrapper {
        flex-direction: column;
    }

    .s14-3-1 .swiper-slide {
        padding: 0;
    }

    .s14-3-1 .swiper-slide:not(:first-child) {
        margin-top: var(--gap);
    }

    .s14-4 {
        order: 1;
        margin-top: 30rem;
    }

    .s15-1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--sl);
    }

    .s15-2 .swiper-slide {
        max-width: 115rem;
        padding: 0 var(--sl);
    }

    .s15-1-1 {
        margin: 15rem;
    }

    .s16-1 {
        grid-template-columns: auto;
        grid-gap: 30rem;
    }

    .s16-2 {
        grid-column: auto;
        order: -1;
        padding: 50rem 70rem;
    }

    .s16-2-1 {
        display: none;
    }

    .s16-3 {
        grid-column: auto;
        overflow: hidden;
    }

    .s16-5 {
        margin-top: 20rem;
    }

    .s16-5-1 {
        padding-right: 30rem;
        font-size: var(--f-b);
    }

    .s16-6 {
        margin-top: 20rem;
    }

    .s16-6-1 {
        padding-right: 30rem;
        font-size: var(--f-b);
    }

    .s16-6-2 {
        font-size: var(--f-d);
    }

    .s16-7 {
        margin-top: 30rem;
        grid-gap: 20rem 10rem;
        grid-template-columns: 1fr 1fr;
    }

    .s16-8 {
        margin-top: 30rem;
    }

    .s16-8 .formbox {
        grid-gap: var(--gap);
    }

    .s16-8 .formbox-footer {
        margin-top: var(--gap);
    }

    .s16-8 .checkbox-label-text {
        font-size: var(--f-d);
    }

    .s404 {
        margin: 0;
        padding-bottom: 80rem;
    }

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

    .s404-2 {
        grid-column: auto;
        padding-bottom: 30rem;
    }

    .s404-2-2 {
        margin-top: 20rem;
    }

    .s404-2-2 .formbox-footer {
        margin-top: 20rem;
    }

    .s404-3 {
        grid-column: auto;
        order: -1;
        padding: 40rem 0;
        max-width: 250rem;
        margin: 0 auto;
    }

    .s17-2 {
        text-align: left;
        margin-bottom: 30rem;
    }

    .s17-3 {
        grid-gap: 20rem;
    }

    .s17-5 {
        padding: 0;
        grid-column: 1/-1;
    }

    .s17-5-1 {
        padding: 0;
        border: none;
    }

    .s17-5-1 .card-title {
        pointer-events: none;
    }

    .s17-6 {
        display: none;
    }

    .s18-3 {
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s18-3:not(:first-child) {
        margin-top: 20rem;
        border: none;
        padding-top: 0;
    }

    .s18-3:first-child .title {
        text-transform: uppercase;
        font-size: var(--f-xxl);
        letter-spacing: -0.01em;
        line-height: 0.95;
    }

    .s18-4 {
        padding: 0;
    }

    .s18-4-1 .title {
        font-size: var(--f-l);
    }

    .s18-4-1 .image {
        border-radius: var(--br1);
        overflow: hidden;
    }

    .s18-4-1 .image:not(:first-child) {
        margin-top: 20rem;
    }

    .s18-4-3 {
        margin-top: 20rem;
    }

    .s18-5 {
        order: -1;
    }

    .s19 {
        background-color: transparent;
    }

    .s19:first-child {
        padding-top: 0;
        margin-top: 0;
    }

    .s19-1 {
        grid-template-columns: auto;
        grid-gap: 30rem;
        padding: 0;
    }

    .s19-2 .subtitle {
        opacity: 1;
    }

    .s19-3 {
        border-radius: 0;
        margin: 0 var(--awr);
        padding: 30rem var(--wr);
    }

    .s20-1 {
        grid-gap: 80rem;
    }

    .s20-3 {
        grid-template-columns: auto;
    }

    .s20-4 {
        text-align: left;
    }

    .s20-5 {
        margin-top: 30rem;
        grid-template-columns: auto;
        grid-gap: 30rem;
    }

    .s20-6::before {
        margin-bottom: 0.5em;
    }

    .s20-6:not(:last-child) {
        margin: 0;
    }

    .s20-6:not(:last-child) .s20-6-2 {
        margin-right: 0;
    }

    .s20-6-1 {
        padding-bottom: 15rem;
    }

    .s20-6-2 {
        margin-top: 10rem;
        padding: 20rem;
        min-height: 120rem;
    }

    .s20-7 {
        grid-column: 1/-1;
    }

    .s20-7-1 ul {
        grid-gap: 15rem;
    }

    .s20-7-1 ul li {
        padding-left: 25rem;
        min-height: 10rem;
        top: calc((1.3em - 10rem) / 2);
    }

    .s20-7-1 ul li::before {
        width: 10rem;
        height: 10rem;
    }

    .s20-7-2 {
        margin-bottom: 30rem;
    }

    .s20-7-2:first-child {
        padding: 0;
        border: none;
    }

    .s20-7-3 {
        margin-top: 40rem;
    }

    .s20-8 {
        grid-column: 1/-1;
    }

    .s21-1 {
        text-align: left;
    }

    .s21-2 {
        grid-template-columns: auto;
        margin-top: 20rem;
    }

    .s21-4 {
        border-radius: 0;
        margin: 0 var(--awr);
        padding: 30rem var(--wr);
    }

    .s21-5 {
        padding: 0;
    }

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

    .s21-5-2 {
        margin-top: 20rem;
    }

    .s21-5-3 {
        font-size: var(--f-b);
    }

    .s22-1 {
        grid-gap: 40rem 0;
        padding-bottom: 40rem;
    }

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

    .s22-3 {
        grid-column: 1/-1;
    }

    .s23-2 {
        text-align: left;
        align-items: flex-start;
    }

    .s23-2 .title {
        max-width: none;
    }

    .s23-2 .subtitle br {
        display: none;
    }

    .s23-3 {
        margin-top: 30rem;
        grid-template-columns: auto;
    }

    .s23-3 .swiper {
        margin: 0;
    }

    .s23-3 .swiper-wrapper {
        flex-direction: column;
    }

    .s23-3 .swiper-slide {
        padding: 0;
    }

    .s23-3 .swiper-slide:not(:first-child) {
        margin-top: var(--gap);
    }

    /*.s23-3 .swiper-slide:nth-child(n + 4){display: none;}*/
    .s23-4 {
        margin-top: 30rem;
    }

    .s24 {
        background-color: transparent;
        color: var(--c1);
    }

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

    .s24-2 {
        grid-column: 1/-1;
        padding: 0;
    }

    .s24-4 {
        position: relative;
        grid-template-columns: auto;
        max-width: none;
        width: auto;
        height: auto;
        margin: 30rem var(--awr) 0;
    }

    .s24-4-1 {
        grid-column: 1/-1;
        display: flex;
    }

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

    .s24-4-1::after {
        background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    }

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

    .s24-6-2 {
        margin-top: 15rem;
        max-width: none;
    }

    .s24-7::before {
        display: none;
    }

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

    .s25-2 {
        padding: 40rem;
        margin-top: 30rem;
    }

    .s25-3 {
        padding: 0;
        margin-top: 20rem;
    }

    .s25-3-2 {
        margin: 0;
    }

    .s25-3-3 {
        margin-top: 30rem;
        width: 100%;
    }

    .s25-3-3 .button {
        width: 100%;
    }

    .s26-1 {
        padding-bottom: 40rem;
    }

    .s26-2 {
        grid-gap: 40rem 0;
        grid-template-columns: auto;
    }

    .s26-2-1 .title {
        font-size: var(--f-xxl);
    }

    .s26-2-2 {
        padding: 0;
        grid-column: 1/-1;
    }

    .s26-2-2 ul {
        grid-gap: 15rem;
    }

    .s26-2-2 ul li {
        padding-left: 25rem;
        min-height: 10rem;
        top: calc((1.3em - 10rem) / 2);
    }

    .s26-2-2 ul li::before {
        width: 10rem;
        height: 10rem;
    }

    .s26-4 {
        display: none;
    }

    .s27-1 {
        grid-template-columns: auto;
        grid-gap: 80rem 0;
    }

    .s27-2 {
        grid-column: 1/-1;
    }

    .s27-2-1::before {
        width: 40rem;
        height: 40rem;
        margin: 0;
        position: relative;
        display: inline-flex;
        right: auto;
        transform: none;
    }

    .s27-2-2 {
        padding: 0;
    }

    .s27-2-3 {
        font-size: var(--f-b);
        font-weight: 700;
    }

    .s27-3 {
        grid-column: 1/-1;
    }

    .s27-3 .textbox h3 {
        margin: 30rem 0 10rem;
    }

    .s27-4 {
        grid-column: 1/-1;
        margin: 0 var(--awr);
        padding: 40rem var(--wr);
        grid-gap: 20rem 0;
        border-radius: 0;
    }

    .s27-4-1 {
        grid-column: 1/-1;
        justify-content: flex-start;
    }

    .s27-4-1::before {
        width: 24rem;
        height: 24rem;
        margin: 0 10rem 0 0;
    }

    .s27-4-2 {
        grid-column: 1/-1;
        text-align: left;
    }

    .s28-1 {
        grid-template-columns: auto;
        grid-gap: 30rem;
    }

    .s28-2 {
        margin: 0 20rem;
    }

    .s28-3 {
        order: -1;
        padding: 0;
    }

    .s29 {
        padding: 40rem 0;
    }

    .s29-1 {
        grid-template-columns: auto;
        grid-gap: 30rem;
    }

    .s29-2 {
        padding: 0;
    }

    .s29-2-2 {
        max-width: 325rem;
    }

    .s29-3 {
        background-image: url(/wp-content/uploads/2025/09/iphone-container.webp);
    }

    .s29-3-1 {
        clip-path: inset(0%);
        width: 51.5%;
        margin: auto;
        position: relative;
        z-index: -1;
    }

    .s30 {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .s30-1 {
        grid-template-columns: auto;
        grid-gap: 20rem 0;
        grid-template-rows: auto;
    }

    .s30-2 {
        grid-column: 1 / -1;
        align-items: flex-start;
        text-align: left;
    }

    .s30-2-2 {
        margin-top: 20rem;
    }

    .s30-3 {
        grid-column: 1 / -1;
        margin: 0;
        height: 100rem;
    }
    
    
    .s31-2{margin-bottom: 20rem;}
    
    .s32-1{padding: 40rem 0 30rem;max-width: 280rem;}
    
}

@media screen and (min-width: 1024px) {
    .mobile {
        display: none !important;
    }

    .topbar {
        position: relative;
        overflow: visible;
    }

    .topbar-cursor-area {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .header.static .topbar-cursor-area,
    .header.active .topbar-cursor-area {
        visibility: hidden;
    }

    .footer-grid {
        grid-template-columns: repeat(8, 1fr);
        align-items: flex-start;
    }

    .f1,
    .f4 {
        grid-column: 1/5;
    }

    .f2,
    .f5 {
        grid-column: 5/7;
    }

    .f3,
    .f6 {
        grid-column: 8/9;
        padding-left: 0;
    }

    .f4,
    .f5,
    .f6 {
        margin-top: auto;
        margin-bottom: auto;
    }

    .card-1 {
        min-height: 250rem;
    }

    .card-4 .card-title {
        /*display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;*/
        overflow: hidden;
    }

    .card-6 .card-header {
        height: 450rem;
    }

    .card-7 {
        min-height: 525rem;
    }

    .s10-1-1:nth-child(1),
    .s10-1-1:nth-child(2) {
        border-top: var(--sl) solid var(--c8);
    }

    .s11 {
        overflow: visible;
    }

    .s11-1 {
        grid-template-areas: "a2 a2 a2 a3""a4 a4 a4 a4""a5 a6 a6 .";
    }

    .s11-2 {
        grid-area: a2;
    }

    .s11-3 {
        grid-area: a3;
    }

    .s11-4 {
        grid-area: a4;
    }

    .s11-4:not(:empty) {
        min-height: 800rem;
        border-radius: var(--br1);
    }

    .s11-5 {
        grid-area: a5;
        position: sticky;
        top: 120rem;
        z-index: 1;
    }

    .s11-6 {
        grid-area: a6;
    }

    .s12-3-1 .card-6 .card-header {
        height: auto;
    }

    .s12-3-1 .card-6 .card-header::before {
        padding-top: 80%;
    }

    .s12-3-1 .card-6 .card-content {
        padding-right: calc((100% + var(--gap)) / 4 + var(--gap));
    }

    .s12-3-1 .card-6 .card-subtitle {
        margin-top: 10rem;
        font-size: var(--f-m);
        line-height: 1.4;
    }

    .s12-3-1 .card-6 .card-action {
        margin-top: 20rem;
        max-width: var(--btn-max);
    }
    
    
    .s12-3-4 .card-6 .card-subtitle{font-size: var(--f-m);}
	.s12-3-4 .card-6 .card-description{font-size: var(--f-m);}
    .s12-3-4 .card-6 .card-title{font-size: var(--f-l);}
    .s12-3-4 .card-6 .formbox-footer{margin-top: var(--gap);}

    .s13:last-child {
        margin-bottom: 0;
    }

    .s15-1 {
        display: flex;
        margin: 0 var(--awr);
    }

    .s15-1-1 {
        flex: 1;
        margin: 0 var(--gap);
    }

    .s16-8 .formbox-row:not(:first-child) .textfield-label {
        margin-top: 20rem;
    }

    .s16-2 {
        margin-right: -100rem;
    }

    .s16-2 .carousel-button {
        position: absolute;
        top: 50%;
        margin: 0 20rem;
        transform: translateY(-50%);
        z-index: 2;
    }

    .s16-2 .carousel-button__prev {
        left: 0;
    }

    .s16-2 .carousel-button__next {
        right: 0;
    }

    .s16-2-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.7);
        color: var(--c0);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 150rem;
        text-align: center;
        opacity: 0;
    }

    .s20-6:not(:last-child) .s20-6-1::after {
        display: none;
    }

    .s20-8 {
        order: 1;
    }

    .s12-3-2:hover .carousel-button:not(.swiper-button-disabled),
    .s14-3-1:hover .carousel-button:not(.swiper-button-disabled) {
        opacity: 1;
    }
    
    .s0-1__alt{min-height: 0;padding: 120rem 0 60rem;}
    .s0-1__alt .s0-3 img{object-position: top;}

    .s0-2__alt {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 1px;
    }
}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .button {
        transition: all 0.25s;
    }

    .button__secondary:hover {
        color: var(--c0);
    }

    .social-item,
    .unl,
    .tabs li,
    .card-5 .card-title {
        transition: color 0.15s;
    }

    .social-item:hover,
    .unl:hover,
    a:hover > .unl,
    .card-5:hover .card-title {
        color: var(--c2);
    }

    .quiz-option-label:hover {
        border-color: var(--c1);
    }

    .tabs li::before {
        content: "";
        transition: opacity 0.15s;
        background-color: var(--c2);
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .tabs li:hover::before {
        opacity: 0.1;
    }

    .topbar-nav a,
    .f3 a,
    .f4 a,
    .s9-4-1 .subtitle a {
        transition-property: background-size, opacity;
        transition-duration: 0.25s;
        background-size: 0 var(--sl);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
    }

    .topbar-nav .current {
        /*pointer-events: none;*/
    }

    .topbar-nav a:hover,
    .topbar-nav .current a,
    .f3 a:hover,
    .f4 a:hover,
    .s9-4-1 .subtitle a:hover {
        background-size: 100% var(--sl);
        background-position: left bottom;
        opacity: 1;
    }

    .card-1 {
        transition: box-shadow 0.15s;
    }

    .card-1:hover {
        box-shadow: inset 0 0 0 2rem var(--c1);
    }

    .card-2 .card-media,
    .card-3 .card-media,
    .card-4 .card-media,
    .card-6 .card-media {
        transition: transform 0.5s;
        will-change: transform;
    }

    .card-4:not(:hover) .card-media {
        transform: scale(0.95);
    }

    .card-2:hover .card-media,
    .card-3:hover .card-media,
    .card-6:hover .card-media {
        transform: scale(1.05);
    }
	
	.card-6:hover .card-media.no-hover {
		transform: none;
	}

    .s8-3-1 {
        transition: transform 0.5s;
        will-change: transform;
    }

    .s8-3:hover .s8-3-1 {
        transform: scale(1.05);
    }

    .s16-2-1 {
        transition: opacity 0.25s;
    }

    .s16-2-1:hover {
        opacity: 1;
    }
}

/*=====================================================================================================================*/

.s2 label {
    display: none;
}

.s2 .wpforms-field {
    margin: 20px 0 0 0;
}

.s2 .wpforms-submit-container {
    margin-top: 40rem;
}

.s5 label {
    display: none;
}

.s5 .wpforms-field {
    margin: 20px 0 0 0;
}

.s5 .wpforms-submit-container {
    margin-top: 40rem;
}

.wpforms-container label {
    display: none;
}

.wpforms-container .wpforms-field {
    margin: 20px 0 0 0;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"] {
    background-color: var(--c0) !important;
    padding: 20rem 30rem !important;
    resize: none;
    min-height: max(55px, 60rem) !important;
    border-radius: var(--br0) !important;
    background-color: var(--c0) !important;
    color: var(--c1) !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    box-shadow: inset 0 0 0 var(--sl) var(--c8) !important;
    font-size: var(--f-xs) !important;
    line-height: 1 !important;
    max-width: none !important;
    border: none !important;
}

.footer .wpforms-container input[type="text"],
.footer .wpforms-container input[type="email"] {
    background-color: rgba(0, 0, 0, 0) !important;
    padding: 10rem 0 !important;
    resize: none;
    min-height: 0 !important;
    border-radius: 0 !important;
    color: currentColor !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    box-shadow: none !important;
    font-size: var(--f-xxs) !important;
    line-height: 1 !important;
    max-width: none !important;
    border: none !important;
    border-bottom: var(--sl) solid var(--c10) !important;
}

.wpforms-container .wpforms-submit-container {
    margin-top: 40rem;
}

.textbox table,
.textbox table tr,
.textbox table td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border-collapse: collapse;
}

.textbox table th,
.textbox table td {
    padding: 5px;
    font-size: 0.9em;
    border: 1px solid #000;
    vertical-align: middle;
}

.textbox iframe {
    max-width: 100% !important;
}

.smush-detected-img {
    box-shadow: none !important;
}

div.wpforms-container-full {
    margin: 0 !important;
}

.wpforms-container button[type="submit"] {
    width: 100% !important;
    background: linear-gradient(var(--c2), var(--c2)) no-repeat rgba(0, 0, 0, 0) !important;
    background-size: 0% 100% !important;
    border-radius: var(--br0) !important;
    padding: 0.15em 30rem 0 !important;
    border: var(--sl) solid var(--c2) !important;
    background-position: left center;
    display: inline-flex !important;
    justify-content: center !important;
    max-width: 100%;
    user-select: none;
    cursor: pointer;
    align-items: center;
    height: max(45px, 55rem) !important;
    background-clip: padding-box !important;
    overflow: hidden;
    transition: all 0.25s;
    color: currentColor !important;
}

.wpforms-container button[type="submit"]:not(:hover) {
    color: var(--c0) !important;
    background-size: 100% 100% !important;
}

.textbox strong {
    font-weight: bold;
}

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

ul#wpforms-113244-field_8 .wpforms-selected input {
    background-color: #fb4d30 !important;
}

@media (min-width: 1024px) {
    .s15-1-1 {
        aspect-ratio: 50 / 29;
    }

    .s15-1-1 img {
        max-height: 90rem;
        object-fit: contain;
    }
}

/*New*/

@media (min-width: 1024px) {
    .player-box iframe {
        min-height: 400px;
    }
}

@media (max-width: 1024px) {
    .player-box iframe {
        min-height: 250px;
    }
}

.wpforms-form .orange__text.wpforms-field {
    background-color: #fff;
    border-radius: var(--br0);
    color: #000000;
    margin-top: 20rem;
    padding: 20rem !important;
}

.wpforms-form .orange__text.wpforms-field input {
    border: none !important;
    box-shadow: none !important;
    color: var(--c2) !important;
    padding: 0 !important;
    font-size: var(--f-l) !important;
    font-weight: 700;
}

.bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    min-height: max(40px, 50rem);
    padding: 16px;
    text-align: center;
    background: var(--c2);
}

.bar-text {
    font-size: max(14px, 18rem);
    line-height: 120%;
    color: var(--c0);
}

.bar-link {
    position: relative;
    font-size: max(14px, 16rem);
    line-height: 120%;
    color: var(--c0);
    text-decoration: underline;
}

.video-full {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.video-container--full {
    overflow: hidden;
    border-radius: var(--br1);
}

@media (min-width: 1024px) {
    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        border-radius: var(--br1);
    }

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 1024px) {
    .s17-5 .video-mobile {
        width: 100%;
    }

    .video-wrapper {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-radius: var(--br1);
    }

    .bar {
        flex-direction: column;
    }
}