@charset "UTF-8";

@layer reset {

    *,
    :after,
    :before {
        box-sizing: border-box
    }

    * {
        margin: 0;
        padding: 0
    }

    canvas,
    img,
    picture,
    svg,
    video {
        display: block;
        height: auto;
        max-inline-size: 100%
    }

    /* Fix Map Touch Interactions */
    #saudi-map-svg,
    #saudi-map-svg path {
        touch-action: pan-y;
        /* Allow vertical scroll, prevent zoom */
        -webkit-tap-highlight-color: transparent;
        /* Remove tap flash */
    }

    button,
    input,
    select,
    textarea {
        background-color: initial;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        word-spacing: inherit
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        overflow-wrap: break-word
    }

    ol,
    ul {
        list-style: none
    }

    a {
        color: inherit;
        text-decoration: none
    }
}

:root {
    --color-dark-green: #031c14;
    --color-cream: #ddefde;
    --color-bronze-orange: #dbc093;
    --color-cream-transparent-20: #ddefde33;
    --color-cream-transparent-50: #ddefde80;
    --color-cream-transparent-80: #ddefdecc;
    --color-dark-green-transparent-20: #031c1433;
    --color-dark-green-transparent-50: #031c1480;
    --color-dark-green-transparent-80: #031c14cc;
    --color-slaye: #779e91;
    --color-red: #e6070a;
    --color-body-background: var(--color-dark-green);
    --color-body-text: var(--color-cream);
    --color-primary: var(--color-dark-green);
    --color-secondary: var(--color-cream);
    --color-accent: var(--color-bronze-orange);
    --color-secondary-transparent-20: var(--color-cream-transparent-20);
    --color-secondary-transparent-50: var(--color-cream-transparent-50);
    --color-secondary-transparent-80: var(--color-cream-transparent-80);
    --color-primary-transparent-20: var(--color-dark-green-transparent-20);
    --color-primary-transparent-50: var(--color-dark-green-transparent-50);
    --color-primary-transparent-80: var(--color-dark-green-transparent-80);
    --color-tertiary: var(--color-slaye);
    --color-error: var(--color-red);
    --font-size-step--2: clamp(.64rem, .6169rem + .1026vw, .7035rem);
    --font-size-step--1: clamp(.8rem, .7499rem + .2226vw, .9377rem);
    --font-size-step-0: clamp(1rem, .9091rem + .404vw, 1.25rem);
    --font-size-step-1: clamp(1.25rem, 1.0986rem + .6727vw, 1.6663rem);
    --font-size-step-2: clamp(1.5625rem, 1.323rem + 1.0644vw, 2.2211rem);
    --font-size-step-3: clamp(1.9531rem, 1.5867rem + 1.6285vw, 2.9607rem);
    --font-size-step-4: clamp(2.4414rem, 1.894rem + 2.4327vw, 3.9467rem);
    --font-size-step-5: clamp(3.0518rem, 2.2484rem + 3.5703vw, 5.2609rem);
    --space-size-3xs: clamp(.25rem, .2273rem + .101vw, .3125rem);
    --space-size-2xs: clamp(.5rem, .4545rem + .202vw, .625rem);
    --space-size-xs: clamp(.75rem, .6818rem + .303vw, .9375rem);
    --space-size-s: clamp(1rem, .9091rem + .404vw, 1.25rem);
    --space-size-m: clamp(1.5rem, 1.3636rem + .6061vw, 1.875rem);
    --space-size-l: clamp(2rem, 1.8182rem + .8081vw, 2.5rem);
    --space-size-xl: clamp(3rem, 2.7273rem + 1.2121vw, 3.75rem);
    --space-size-2xl: clamp(4rem, 3.6364rem + 1.6162vw, 5rem);
    --space-size-3xl: clamp(6rem, 5.4545rem + 2.4242vw, 7.5rem);
    --space-size-4xl: clamp(8rem, 7.2727rem + 3.2323vw, 10rem);
    --space-size-5xl: clamp(12rem, 10.9091rem + 4.8485vw, 15rem);
    --space-size-3xs-2xs: clamp(.25rem, .1136rem + .6061vw, .625rem);
    --space-size-2xs-xs: clamp(.5rem, .3409rem + .7071vw, .9375rem);
    --space-size-xs-s: clamp(.75rem, .5682rem + .8081vw, 1.25rem);
    --space-size-s-m: clamp(1rem, .6818rem + 1.4141vw, 1.875rem);
    --space-size-m-l: clamp(1.5rem, 1.1364rem + 1.6162vw, 2.5rem);
    --space-size-l-xl: clamp(2rem, 1.3636rem + 2.8283vw, 3.75rem);
    --space-size-xl-2xl: clamp(3rem, 2.2727rem + 3.2323vw, 5rem);
    --space-size-2xl-3xl: clamp(4rem, 2.7273rem + 5.6566vw, 7.5rem);
    --space-size-3xl-4xl: clamp(6rem, 4.5455rem + 6.4646vw, 10rem);
    --space-size-4xl-5xl: clamp(8rem, 5.4545rem + 11.3131vw, 15rem);
    --space-size-s-l: clamp(1rem, .4545rem + 2.4242vw, 2.5rem);
    --grid-viewport: 1350px;
    --grid-whole: 1290px;
    --grid-gutter: var(--space-size-s-m);
    --grid-padding: var(--space-size-m);
    --font-family-body: "Lateef", system-ui, sans-serif;
    --font-family-heading: "Lateef", system-ui, sans-serif;
    --transition-timing-function-1: cubic-bezier(.33, 0, .11, 1);
    --transition-timing-function-2: cubic-bezier(1, 0, .47, .93);
    --transition-timing-function-3: cubic-bezier(.2, 2.5, .4, 1);
    --transition-timing-function-4: cubic-bezier(.1, .75, .25, 1);
    --transition-timing-function-5: cubic-bezier(.1, .25, .25, 1);
    --transition-default-duration: .5s;
    --transition-default-timing-function: var(--transition-timing-function-1)
}

html {
    background-color: var(--color-body-background);
    color: var(--color-body-text);
    font-family: var(--font-family-body), "Lateef", system-ui, sans-serif;
    line-height: 1.2;
    min-height: 100svh;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth
}

body {
    overflow-y: scroll
}

h1,
h2,
h3,
h4,
strong {
    font-weight: 500
}

.u-text-body-large {
    font-size: var(--font-size-step-1);
    font-weight: 500;
    line-height: 1.4
}

.u-text-body-medium {
    font-size: var(--font-size-step-0);
    line-height: 1.4
}

.u-text-body-small {
    font-size: var(--font-size-step--1);
    line-height: 1.5
}

.u-text-body-small-accent {
    font-size: var(--font-size-step--1);
    font-weight: 500;
    line-height: 1.4
}

.u-text-body-xsmall {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.5
}

.u-text-body-button {
    font-weight: 500
}

.u-text-body-button,
.u-text-body-menu-item {
    font-size: var(--font-size-step--1);
    line-height: 1.4
}

.u-text-headings-large {
    font-size: var(--font-size-step-4);
    line-height: 1.1
}

.u-text-headings-large,
.u-text-headings-medium {
    font-family: var(--font-family-heading);
    font-weight: 500
}

.u-text-headings-medium {
    font-size: var(--font-size-step-3);
    line-height: 1.05
}

.u-text-headings-small {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-step-2);
    font-weight: 500;
    line-height: 1.4
}

.payload-richtext,
.u-wysiwyg {
    font-size: var(--font-size-step-0);
    line-height: 1.4
}

.payload-richtext h2,
.payload-richtext h3,
.payload-richtext h4,
.u-wysiwyg h2,
.u-wysiwyg h3,
.u-wysiwyg h4 {
    font-size: var(--font-size-step-1);
    font-weight: 500;
    line-height: 1.4
}

.payload-richtext h2:not(:first-child),
.payload-richtext h3:not(:first-child),
.payload-richtext h4:not(:first-child),
.u-wysiwyg h2:not(:first-child),
.u-wysiwyg h3:not(:first-child),
.u-wysiwyg h4:not(:first-child) {
    margin-top: var(--space-size-s-m)
}

.payload-richtext ol,
.payload-richtext ul,
.u-wysiwyg ol,
.u-wysiwyg ul {
    list-style: inherit;
    list-style-type: "–  ";
    padding-left: 1em
}

.payload-richtext ol li+li,
.payload-richtext ul li+li,
.payload-richtext>*+*,
.u-wysiwyg ol li+li,
.u-wysiwyg ul li+li,
.u-wysiwyg>*+* {
    margin-top: var(--space-size-2xs-xs)
}

.u-wysiwyg--small {
    font-size: var(--font-size-step--1);
    line-height: 1.5
}

.u-wysiwyg--small ol,
.u-wysiwyg--small ol li+li,
.u-wysiwyg--small ul,
.u-wysiwyg--small ul li+li {
    margin-top: var(--space-size-3xs)
}

.u-wysiwyg--small>*+* {
    margin-top: var(--space-size-2xs-xs)
}

.u-bg-primary {
    background-color: var(--color-primary);
    color: var(--color-secondary)
}

.u-bg-secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary)
}

.u-bg-tertiary {
    background-color: var(--color-tertiary);
    color: var(--color-primary)
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity var(--transition-default-duration) var(--transition-timing-function-4)
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0
}

.crossfade-zoom-enter-active,
.crossfade-zoom-leave-active {
    transition: scale 2s var(--transition-default-timing-function)
}

.crossfade-zoom-enter-active {
    z-index: 9
}

.crossfade-zoom-enter-from {
    scale: 1.2
}

.crossfade-enter-active,
.crossfade-leave-active {
    transition: opacity var(--transition-default-duration) var(--transition-timing-function-4)
}

.crossfade-leave-active {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.crossfade-enter-from,
.crossfade-leave-to {
    opacity: 0
}

.crossfade-enter-to,
.crossfade-leave-from {
    opacity: 1
}

.page {
    overflow-x: clip;
    position: relative
}

.page__body {
    position: relative;
    z-index: 1
}

.page__sections {
    isolation: isolate
}

.page {
    overflow-x: clip;
    position: relative
}

.page__body {
    position: relative;
    z-index: 1
}

.page__sections {
    isolation: isolate
}

.page__sections>* {
    scroll-margin-top: -1px
}

.header {
    --header-enter-transition-duration: 1s;
    --header-enter-transition-timing-function: var(--transition-default-timing-function);
    --header-enter-progress-transition-duration: 2s;
    --header-enter-progress-transition-timing-function: var(--transition-default-timing-function);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-image: linear-gradient(180deg, #031c14 -43.3%, #031c1400);
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    transform: translateY(0);
    transition: color var(--transition-default-duration) var(--transition-default-timing-function), opacity var(--header-enter-transition-duration) var(--header-enter-transition-timing-function), transform var(--header-enter-transition-duration) var(--header-enter-transition-timing-function);
    width: 100%;
    z-index: 9
}

.header:not(.header--loaded) {
    opacity: 0;
    transform: translateY(-50px);
    transition: none
}

@media screen and (max-width:839px) {
    .header--navigation-open {
        color: var(--color-primary)
    }
}

.header-grid {
    align-items: center;
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: 1fr 1fr;
    justify-content: space-around;
    padding: var(--space-size-m-l) 0
}

@media screen and (min-width:840px) {
    .header-grid {
        grid-template-columns: repeat(12, 1fr)
    }
}

.header-grid__item {
    z-index: 10
}

.header-grid__item--logo {
    z-index: 11
}

@media screen and (min-width:840px) {
    .header-grid__item--logo {
        grid-column: 1/span 2;
        grid-row: 1
    }
}

.header-grid__item--main {
    position: relative
}

@media screen and (max-width:839px) {
    .header-grid__item--main {
        background-color: var(--color-tertiary);
        height: 100svh;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        transition: opacity var(--transition-default-duration) var(--transition-timing-function-4), visibility var(--transition-default-duration) var(--transition-timing-function-4);
        visibility: hidden;
        width: 100%
    }

    .header--navigation-open .header-grid__item--main {
        opacity: 1;
        visibility: visible
    }
}

@media screen and (min-width:840px) {
    .header-grid__item--main {
        grid-column: 1/span 12;
        grid-row: 1
    }
}

.header-grid__item--toggle {
    text-align: right
}

@media screen and (min-width:840px) {
    .header-grid__item--toggle {
        display: none
    }
}

.site-logo {
    height: auto;
    width: var(--space-size-2xl)
}

.header-navigation {
    display: grid;
    grid-auto-rows: min-content
}

@media screen and (max-width:839px) {
    .header-navigation {
        gap: var(--space-size-xl-2xl);
        height: 100svh;
        overflow: scroll;
        padding: var(--space-size-4xl) var(--grid-padding) var(--space-size-2xl);
        padding-left: calc(var(--grid-padding) + var(--space-size-l))
    }
}

@media screen and (min-width:840px) {
    .header-navigation {
        align-items: center;
        gap: var(--grid-gutter);
        grid-template-columns: repeat(12, 1fr)
    }

    .header-navigation__item--site {
        grid-column: 2/span 10;
        text-align: center
    }

    .header-navigation__item--locale {
        grid-column: 12/span 1;
        text-align: right
    }
}

.header-navigation__link {
    color: var(--color-secondary-transparent-80);
    display: inline-block;
    font-size: var(--font-size-step-3);
    font-weight: 500;
    line-height: 1.4;
    position: relative;
    transition: color var(--transition-default-duration) var(--transition-timing-function-4)
}

@media screen and (max-width:839px) {
    .header-navigation__link {
        color: var(--color-primary-transparent-50)
    }
}

@media screen and (min-width:840px) {
    .header-navigation__link {
        font-size: var(--font-size-step--1);
        font-weight: 400
    }
}

.header-navigation__link:hover,
.site-navigation__list-item--active .header-navigation__link {
    color: var(--color-secondary)
}

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

    .header-navigation__link:hover,
    .site-navigation__list-item--active .header-navigation__link {
        color: var(--color-primary)
    }
}

.site-navigation__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-m-l)
}

@media screen and (min-width:840px) {
    .site-navigation__list {
        align-items: center;
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-end;
        position: relative
    }

    .site-navigation__list:after {
        background-color: var(--color-secondary);
        bottom: 0;
        content: "";
        height: 1px;
        left: 0;
        pointer-events: none;
        position: absolute;
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform var(--header-enter-progress-transition-duration) var(--header-enter-progress-transition-timing-function);
        width: 100%
    }

    .header:not(.header--loaded) .site-navigation__list:after {
        transform: scaleX(1)
    }
}

.site-navigation__list-item {
    position: relative
}

@media screen and (min-width:840px) {
    .site-navigation__list-item {
        padding: var(--space-size-2xs) 0
    }
}

@media screen and (max-width:839px) {
    .site-navigation__link:before {
        background-color: currentcolor;
        border-radius: 50%;
        content: "";
        display: none;
        height: var(--space-size-2xs);
        left: calc(var(--space-size-m)*-1);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: var(--space-size-2xs)
    }

    .site-navigation__list-item--active .site-navigation__link:before {
        display: inline-block
    }

    .locale-navigation {
        display: flex;
        gap: var(--space-size-m-l)
    }

    .locale-navigation__available-locales {
        display: flex !important;
        gap: var(--space-size-m-l)
    }
}

@media screen and (min-width:840px) {
    .locale-navigation__available-locales {
        background-color: var(--color-secondary);
        border-radius: var(--space-size-3xs);
        color: var(--color-primary);
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
        top: calc(100% + var(--space-size-3xs))
    }
}

.locale-navigation__link {
    text-transform: uppercase
}

@media screen and (min-width:840px) {
    .locale-navigation__link {
        color: var(--color-primary);
        padding: var(--space-size-3xs) var(--space-size-xs);
        text-align: center;
        width: var(--space-size-xl)
    }

    .locale-navigation__current-locale .locale-navigation__link {
        cursor: pointer;
        padding-right: var(--space-size-s);
        position: relative
    }

    .locale-navigation__current-locale .locale-navigation__link:after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23ddefde' d='M9.5 13 5 8.654 5.677 8l.338.327L9.5 11.71l3.823-3.692.677.635z'/%3E%3C/svg%3E");
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: inline-block;
        height: var(--space-size-s);
        position: absolute;
        right: 0;
        transition: transform var(--transition-default-duration) var(--transition-timing-function-4);
        width: var(--space-size-s)
    }

    .locale-navigation--open .locale-navigation__current-locale .locale-navigation__link:after {
        transform: rotateX(180deg)
    }

    .locale-navigation__available-locales .locale-navigation__link {
        transition: background-color var(--transition-default-duration) var(--transition-timing-function-4)
    }

    .locale-navigation__available-locales .locale-navigation__link:hover {
        background-color: var(--color-primary-transparent-20);
        color: var(--color-primary)
    }
}

@keyframes grow-progress {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.progress {
    background-color: var(--color-secondary-transparent-20);
    bottom: 0;
    height: 1px;
    left: 0;
    position: absolute;
    width: calc(100% + var(--space-size-m-l))
}

.site-navigation__list-item:last-child .progress {
    width: 100%
}

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

.progress__fill {
    background-color: var(--color-secondary);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    width: 100%
}

@supports (animation-timeline:scroll()) {
    .progress__fill {
        animation-fill-mode: forwards;
        animation-name: grow-progress;
        animation-play-state: running;
        animation-range: cover 0 entry-crossing 100%;
        animation-timing-function: linear
    }
}

@supports not (animation-timeline:scroll()) {
    .site-navigation__list-item--active .progress__fill {
        transform: scaleX(1);
        width: calc(100% - var(--space-size-m-l))
    }

    .site-navigation__list-item:last-child .progress__fill {
        width: 100%
    }
}

.container {
    margin-inline: auto;
    width: min(var(--grid-whole), 100% - var(--grid-padding) * 2)
}

.container--size-full {
    width: 100%
}

.menu-toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    outline: none;
    padding: 0;
    vertical-align: top
}

.menu-toggle-button-icon {
    display: block
}

.menu-toggle-button-icon__close {
    opacity: 0
}

.menu-toggle-button--active .menu-toggle-button-icon__close {
    opacity: 1
}

.menu-toggle-button--active .menu-toggle-button-icon__open {
    opacity: 0
}

.hero {
    overflow: clip;
    position: sticky;
    top: 0
}

.hero__content {
    position: relative
}

@keyframes hero-bg-enter-left {
    0% {
        animation-timing-function: var(--transition-timing-function-2);
        scale: 1 1
    }

    50% {
        animation-timing-function: var(--transition-default-timing-function);
        scale: 0 1
    }

    to {
        scale: .5 1
    }
}

@keyframes hero-bg-enter-right {

    0%,
    50% {
        animation-timing-function: var(--transition-default-timing-function);
        opacity: .8;
        scale: 1 1
    }

    to {
        opacity: 1;
        scale: 0 1
    }
}

.hero__bg {
    background: linear-gradient(90deg, var(--color-primary) -25%, #031c1400 150%);
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

@media screen and (min-width:720px) {
    .hero__bg {
        background: linear-gradient(180deg, var(--color-primary) -15%, #031c1400 50%)
    }
}

.hero__bg:after,
.hero__bg:before {
    animation-delay: var(--bg-enter-delay, 2.5s);
    animation-duration: 3s;
    animation-fill-mode: forwards;
    background: var(--color-primary);
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

.hero__bg:before {
    animation-name: hero-bg-enter-left;
    background: var(--color-primary);
    transform-origin: center left
}

.hero__bg:after {
    animation-name: hero-bg-enter-right;
    opacity: .8;
    transform-origin: center right
}

.hero__image {
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
    z-index: -1
}

.hero-content-grid {
    display: grid;
    gap: var(--space-size-m-l) var(--grid-gutter);
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 100svh;
    padding: var(--space-size-3xl-4xl) 0 var(--space-size-l-xl)
}

@media screen and (min-width:720px) {
    .hero-content-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(4, auto)
    }
}

.hero-content-grid__item {
    grid-column: 1/-1;
    min-width: 0
}

@media screen and (min-width:720px) {
    .hero-content-grid__item {
        grid-column: 1/span 5;
        grid-row-end: span 2
    }
}

@media screen and (min-width:960px) {
    .hero-content-grid__item {
        grid-column: 1/span 4
    }
}

@media screen and (min-width:720px) {
    .hero-content-grid__item--header {
        grid-row-start: 1
    }
}

.hero-content-grid__item--body {
    place-self: center center
}

@media screen and (min-width:720px) {
    .hero-content-grid__item--body {
        grid-column: 4/span 6;
        grid-row: 1/span 4
    }
}

@media screen and (min-width:720px)and (not (min-height:1024px)) {
    .hero-content-grid__item--body {
        grid-column: 7/span 6
    }
}

@media screen and (min-width:960px) {
    .hero-content-grid__item--body {
        grid-column: 5/span 4
    }
}

.hero-content-grid__item--footer {
    align-self: flex-end
}

@media screen and (min-width:720px) {
    .hero-content-grid__item--footer {
        grid-row-start: 3
    }
}

.hero__body,
.hero__title {
    overflow-wrap: normal
}

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

    .hero__body,
    .hero__title {
        text-wrap-style: balance
    }
}

.hero__title {
    --stagger-delay: .2s;
    --stagger-delay-first: .6s;
    transition: opacity 3s var(--transition-timing-function-3);
    visibility: visible
}

.hero:not(.hero--loaded) .hero__title {
    opacity: 0;
    visibility: hidden
}

.hero__title .word {
    display: inline-block;
    opacity: 1;
    transition: opacity 3s var(--transition-timing-function-3);
    transition-delay: calc(sibling-index()*var(--stagger-delay) + var(--stagger-delay-first))
}

.hero__title .word:first-child {
    --stagger-delay-first: 0s
}

.hero:not(.hero--loaded) .hero__title .word {
    opacity: 0
}

@keyframes hero-video-preview-leave {
    to {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)
    }
}

.hero__video-preview {
    background: var(--color-primary);
    border-radius: var(--space-size-2xs);
    margin-inline: auto;
    max-width: 470px;
    overflow: clip
}

@media screen and (max-width:720px)and (not (min-height:1024px)) {
    .hero__video-preview {
        max-height: 40svh
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .hero__video-preview {
        animation: hero-video-preview-leave ease-in both;
        animation-range: 0 75svh;
        animation-timeline: --tl-section-about
    }
}

.hero__video-preview {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: opacity 1s var(--transition-default-timing-function), scale 1s var(--transition-default-timing-function), clip-path 1s var(--transition-default-timing-function)
}

.hero:not(.hero--loaded) .hero__video-preview {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0;
    scale: .5
}

.hero__video-preview .video-dialog__play-button {
    transition: opacity var(--transition-default-duration) var(--transition-default-timing-function), scale var(--transition-default-duration) var(--transition-default-timing-function)
}

.hero:not(.hero--loaded) .hero__video-preview .video-dialog__play-button {
    opacity: 0;
    scale: 0
}

.hero__body {
    transition: opacity 1s var(--transition-default-timing-function) var(--transition-default-duration)
}

.hero:not(.hero--loaded) .hero__body {
    opacity: 0
}

.hero__cta {
    display: inline-block;
    margin-top: var(--space-size-l-xl);
    transform-origin: center;
    transition: opacity var(--transition-default-duration) var(--transition-default-timing-function) var(--transition-default-duration), scale var(--transition-default-duration) var(--transition-default-timing-function) var(--transition-default-duration)
}

.hero:not(.hero--loaded) .hero__cta {
    opacity: 0;
    scale: 0
}

.image {
    opacity: 0;
    transition: opacity var(--transition-default-duration) var(--transition-default-timing-function)
}

.image--loaded {
    opacity: 1
}

.video-dialog {
    display: inline-block;
    position: relative
}

.video-dialog--type-cover {
    height: 100%;
    width: 100%
}

.video-dialog__preview {
    display: block
}

.video-dialog--type-cover .video-dialog__preview {
    height: 100%;
    object-fit: cover;
    object-position: top center;
    width: 100%
}

@media screen and (max-width:640px) {
    .video-dialog--type-cover .video-dialog__preview {
        aspect-ratio: 1/1
    }
}

.video-dialog__button {
    align-items: center;
    background: #0000;
    border: none;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.video-dialog__play-button {
    transform-origin: center center;
    transition: scale var(--transition-default-duration) var(--transition-timing-function-4)
}

.video-dialog__button:hover .video-dialog__play-button {
    scale: 1.1
}

.video-dialog__full {
    background-color: var(--color-secondary);
    display: block;
    max-height: 90svh;
    object-fit: contain;
    width: 100%
}

.icon-button {
    align-items: center;
    aspect-ratio: 1/1;
    background-color: var(--button-background-color, var(--color-secondary));
    border: none;
    border-radius: 50%;
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    font-family: inherit;
    font-size: 1em;
    font-weight: inherit;
    justify-content: center;
    margin: 0;
    padding: 0;
    text-align: center
}

.icon-button[disabled] {
    cursor: default;
    opacity: .4
}

.icon-button--type-secondary {
    --button-background-color: var(--color-primary);
    color: var(--color-secondary)
}

.icon-button__icon {
    height: clamp(2.375rem, 1.5833rem + 3.5185vw, 4.75rem);
    width: clamp(2.375rem, 1.5833rem + 3.5185vw, 4.75rem)
}

.icon-button--size-medium .icon-button__icon {
    height: var(--space-size-l-xl);
    width: var(--space-size-l-xl)
}

.icon-button--size-small .icon-button__icon {
    height: var(--space-size-m-l);
    width: var(--space-size-m-l)
}

.icon-button__icon svg {
    display: block;
    height: 100%;
    width: 100%
}

dialog {
    border: none;
    margin: auto;
    max-width: 1070px;
    opacity: 0;
    scale: .8;
    transition: opacity var(--transition-default-duration) var(--transition-timing-function-4), scale .25s var(--transition-timing-function-4), display var(--transition-default-duration) var(--transition-timing-function-4) allow-discrete, overlay var(--transition-default-duration) var(--transition-timing-function-4) allow-discrete;
    width: 100%
}

dialog::backdrop {
    background-color: color-mix(in srgb, var(--color-primary) 50%, #0000);
    opacity: 0;
    transition: opacity var(--transition-default-duration) var(--transition-timing-function-4), display var(--transition-default-duration) var(--transition-timing-function-4) allow-discrete, overlay var(--transition-default-duration) var(--transition-timing-function-4) allow-discrete
}

dialog[open] {
    opacity: 1;
    scale: 1
}

dialog[open]::backdrop {
    opacity: 1
}

@starting-style {
    dialog[open] {
        opacity: 0;
        scale: .8
    }

    dialog[open]::backdrop {
        opacity: 0
    }
}

.dialog {
    background-color: initial;
    max-height: 90svh
}

.dialog__body {
    margin: 0 var(--space-size-s);
    position: relative
}

.dialog__close-button {
    position: absolute;
    right: var(--space-size-s);
    top: var(--space-size-s);
    transform-origin: center center;
    transition: scale var(--transition-default-duration) var(--transition-timing-function-4);
    z-index: 1
}

.dialog__close-button:hover {
    scale: 1.1
}

.button {
    align-items: center;
    background-color: var(--button-background-color, var(--color-secondary));
    border: 1px solid var(--button-background-color);
    border-radius: var(--space-size-l);
    color: var(--color-primary, inherit);
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    font-family: inherit;
    font-size: 1em;
    font-weight: inherit;
    gap: var(--space-size-2xs);
    justify-content: center;
    margin: 0;
    padding: var(--space-size-s) var(--space-size-l);
    text-align: center
}

.button[disabled] {
    cursor: default;
    opacity: .4
}

.button {
    transition: scale var(--transition-default-duration) var(--transition-timing-function-4)
}

.button:hover {
    scale: 1.02
}

.button__icon svg {
    display: block;
    fill: currentcolor;
    height: var(--space-size-s);
    width: var(--space-size-s)
}

.button--type-primary {
    --button-background-color: var(--color-secondary);
    color: var(--color-primary)
}

.button--type-secondary {
    --button-background-color: var(--color-primary);
    color: var(--color-secondary)
}

.button--type-outline {
    --button-background-color: #0000;
    border: 1px solid;
    color: var(--color-primary)
}

.about-process {
    timeline-scope: --about-process-carousel-tl, --about-process-carousel-end-tl
}

@keyframes about-process-header-enter {
    0% {
        opacity: 0;
        transform: translateY(-100svh)
    }
}

@keyframes about-process-header-leave {
    to {
        opacity: 0
    }
}

.about-process__header {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100svh;
    overflow: clip;
    padding: var(--space-size-5xl) 0;
    text-align: center;
    text-wrap-style: balance;
    view-timeline-name: --about-process-header
}

@supports not ((animation-timeline:scroll()) and (animation-range:0% 100%)) {
    .about-process__header {
        min-height: 60svh
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-process__header {
        animation: about-process-header-leave ease-in forwards;
        animation-range: 0 50vh;
        animation-timeline: --about-process-carousel-tl;
        position: sticky;
        top: 0
    }

    .about-process__title {
        animation: about-process-header-enter linear forwards;
        animation-range: 0 100vh;
        animation-timeline: --about-process-header
    }
}

.about-process__title {
    --stagger-delay: .5s;
    transition: opacity 3s var(--transition-default-timing-function);
    visibility: visible
}

.about-process__title .about-process__header:not(.about-process__header--visible) {
    opacity: 0;
    visibility: hidden
}

.about-process__title .line {
    opacity: 1;
    transition: opacity 2.5s var(--transition-default-timing-function);
    transition-delay: calc(sibling-index()*var(--stagger-delay))
}

.about-process__header:not(.about-process__header--visible) .about-process__title .line {
    opacity: 0
}

.about-process__body {
    overflow-x: clip
}

@keyframes about-process-carousel-move {
    to {
        transform: translate(calc(-100% + 275vw))
    }
}

.about-process-carousel {
    height: 100vh;
    overflow-x: clip;
    position: sticky;
    top: 0;
    width: 100vw
}

.about-process-carousel__items {
    display: flex;
    height: 100vh
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-process-carousel__items {
        animation: about-process-carousel-move linear forwards;
        animation-range: contain 0 contain 100%;
        animation-timeline: --about-process-carousel-tl;
        margin-left: -50vw;
        width: 500vw;
        will-change: transform
    }
}

.about-process-carousel__item {
    align-items: center;
    display: flex;
    flex: 0 0 100vw;
    height: 100vh;
    justify-content: center;
    overflow: clip;
    position: relative;
    width: 100vw
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-process-carousel__item {
        margin-left: -25vw
    }
}

@supports not ((animation-timeline:scroll()) and (animation-range:0% 100%)) {
    .about-process-carousel__item {
        display: none
    }
}

@keyframes about-process-carousel-item-fade-in {
    to {
        opacity: 1
    }
}

@supports not ((animation-timeline:scroll()) and (animation-range:0% 100%)) {
    .about-process-carousel__item--main {
        display: flex
    }
}

.about-process-carousel__item--main:after {
    animation: about-process-carousel-item-fade-in ease-in-out forwards;
    animation-range: 0 50vh;
    animation-timeline: --about-process-carousel-end-tl;
    background-color: var(--color-primary-transparent-50);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

@keyframes about-process-carousel-item-zoom-in {
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: scale(1.1)
    }
}

.about-process-carousel__image {
    height: 100%;
    object-fit: cover;
    position: absolute;
    width: 100%
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-process-carousel__image {
        clip-path: polygon(0 10%, 100% 10%, 100% 90%, 0 90%);
        transform: scale(.725)
    }

    .about-process-carousel__item--main .about-process-carousel__image {
        animation: about-process-carousel-item-zoom-in linear forwards;
        animation-range: 0 50vh;
        animation-timeline: --about-process-carousel-end-tl
    }
}

@keyframes about-process-carousel-item-move-out {
    to {
        transform: translate(var(--move-out-x))
    }
}

.about-process-carousel__item--right {
    --move-out-x: 20vw
}

.about-process-carousel__item--left,
.about-process-carousel__item--right {
    animation: about-process-carousel-item-move-out linear forwards;
    animation-range: 0 50vh;
    animation-timeline: --about-process-carousel-end-tl
}

.about-process-carousel__item--left {
    --move-out-x: -20vw
}

.about-process-carousel__slogan-container {
    text-align: center;
    width: 100%
}

.about-process-carousel__slogan {
    margin-inline: auto;
    position: relative;
    text-align: center;
    z-index: 1;
    --stagger-delay: .2s;
    transition: opacity 3s var(--transition-default-timing-function);
    visibility: visible
}

.about-process-carousel__slogan .about-process-carousel:not(.about-process-carousel--stuck) {
    opacity: 0;
    visibility: hidden
}

.about-process-carousel__slogan .word {
    opacity: 1;
    transition: opacity 2.5s var(--transition-default-timing-function);
    transition-delay: calc(sibling-index()*var(--stagger-delay))
}

.about-process-carousel:not(.about-process-carousel--stuck) .about-process-carousel__slogan .word {
    opacity: 0
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-process-carousel-spacer {
        height: 400vh;
        margin-top: -100vh;
        view-timeline-axis: block;
        view-timeline-name: --about-process-carousel-tl
    }
}

.about-process-gallery {
    padding: var(--space-size-3xl) 0;
    position: relative
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-process-gallery {
        padding-bottom: 100svh;
        view-timeline-name: --about-process-carousel-end-tl
    }

    .about-process-gallery__spacer {
        height: 50vh
    }
}

.about-process-gallery-grid {
    display: grid;
    gap: var(--space-size-xl) var(--space-size-s-m);
    grid-template-columns: repeat(12, 1fr)
}

@media screen and (min-width:640px) {
    .about-process-gallery-grid {
        gap: var(--space-size-5xl) var(--grid-gutter)
    }
}

.about-process-gallery-grid__item {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 0
}

.about-process-gallery-grid__item:first-child {
    grid-column: 8/span 5;
    grid-row: 1;
    padding-bottom: var(--space-size-2xl)
}

.about-process-gallery-grid__item:nth-child(2) {
    align-self: flex-end;
    grid-column: 1/span 4;
    grid-row: 1
}

.about-process-gallery-grid__item:nth-child(3) {
    grid-column: 7/span 6;
    grid-row: 2;
    padding-bottom: var(--space-size-2xl)
}

.about-process-gallery-grid__item:nth-child(4) {
    align-self: flex-end;
    grid-column: 2/span 4;
    grid-row: 2
}

.about-process-gallery-grid__item:nth-child(5) {
    grid-column: 6/span 5;
    grid-row: 3
}

.about-process-gallery-grid__item:nth-child(6) {
    align-self: flex-start;
    grid-column: 9/span 4;
    grid-row: 4
}

.about-process-gallery-grid__item:nth-child(7) {
    grid-column: 1/span 5;
    grid-row: 4;
    padding-top: var(--space-size-2xl)
}

.about-process-gallery-grid__item:nth-child(8) {
    grid-column: 8/span 4;
    grid-row: 5;
    padding-bottom: var(--space-size-2xl)
}

.about-process-gallery-grid__item:nth-child(9) {
    align-self: flex-end;
    grid-column: 3/span 4;
    grid-row: 5
}

@media screen and (min-width:640px) {
    .about-process-gallery-grid__item:first-child {
        grid-column: 9/span 4
    }

    .about-process-gallery-grid__item:nth-child(2) {
        grid-column: 1/span 3
    }

    .about-process-gallery-grid__item:nth-child(3) {
        grid-column: 8/span 5
    }

    .about-process-gallery-grid__item:nth-child(4) {
        grid-column: 3/span 3
    }

    .about-process-gallery-grid__item:nth-child(5) {
        grid-column: 6/span 5
    }

    .about-process-gallery-grid__item:nth-child(6) {
        grid-column: 10/span 3
    }

    .about-process-gallery-grid__item:nth-child(7) {
        grid-column: 1/span 4
    }

    .about-process-gallery-grid__item:nth-child(8) {
        grid-column: 10/span 3
    }

    .about-process-gallery-grid__item:nth-child(9) {
        grid-column: 4/span 3
    }
}

@keyframes about-process-gallery-item-move {
    0% {
        transform: var(--start-transform, translateY(-20svh))
    }

    to {
        transform: var(--end-transform, translateY(20svh))
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-process-gallery-item {
        animation: about-process-gallery-item-move linear both;
        animation-timeline: --about-process-gallery-item-tl;
        view-timeline-name: --about-process-gallery-item-tl
    }
}

.about-process-gallery-item-container {
    overflow: clip
}

@keyframes about-process-gallery-image-move {
    0% {
        translate: 0 10%
    }

    to {
        translate: 0 -10%
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-process-gallery-item__image {
        scale: 1.1
    }

    @media screen and (min-width:960px) {
        .about-process-gallery-item__image {
            animation: about-process-gallery-image-move linear both;
            animation-timeline: --about-process-gallery-item-tl
        }
    }
}

@keyframes section-overlay {
    0% {
        clip-path: polygon(0 var(--overlay-mask-height), 100% var(--overlay-mask-height), 100% 100%, 0 100%)
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

.overlay-section {
    --overlay-mask-height: var(--space-size-4xl)
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .overlay-section {
        animation: section-overlay linear both;
        animation-range: 0 100svh;
        animation-timeline: view();
        clip-path: polygon(0 var(--overlay-mask-height), 100% var(--overlay-mask-height), 100% 100%, 0 100%);
        margin-top: calc(var(--overlay-mask-height)*-1);
        transform-origin: center
    }
}

.about-manifest {
    background-color: #e2e2e2;
    padding: var(--space-size-4xl) 0;
    position: relative;
    view-timeline-name: --about-manifest-tl
}

@keyframes foil-image-reveal {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        opacity: 1
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        opacity: .5
    }
}

@keyframes foil-image-reveal-reversed {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        opacity: .5
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        opacity: 1
    }
}

.about-manifest__bg,
.about-manifest__bg-layer {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.about-manifest__bg {
    background-color: #fff;
    overflow: hidden;
    z-index: 0
}

.about-manifest__bg-layer {
    object-fit: cover
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-manifest__bg-layer {
        animation: foil-image-reveal ease-in-out both;
        animation-range: cover 0 cover 100%;
        animation-timeline: --about-manifest-tl;
        transform-origin: center
    }
}

@supports not ((animation-timeline:scroll()) and (animation-range:0% 100%)) {
    .about-manifest__bg-layer:nth-child(2) {
        display: none
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .about-manifest__bg-layer:nth-child(2) {
        animation-name: foil-image-reveal-reversed;
        transform: rotateY(180deg) rotateX(180deg)
    }
}

.about-manifest-grid {
    display: grid;
    gap: var(--space-size-l-xl) var(--grid-gutter);
    grid-template-columns: 1fr;
    position: relative
}

@media screen and (min-width:720px) {
    .about-manifest-grid {
        grid-template-columns: repeat(12, 1fr)
    }

    .about-manifest-grid__item--aside {
        grid-column: 1/span 5
    }
}

@media screen and (min-width:960px) {
    .about-manifest-grid__item--aside {
        grid-column: 1/span 4
    }
}

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

    .about-manifest-grid__item--footer,
    .about-manifest-grid__item--main {
        grid-column: 7/span 6
    }
}

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

    .about-manifest-grid__item--footer,
    .about-manifest-grid__item--main {
        grid-column: 9/span 4
    }
}

.about-manifest-grid__item--footer {
    padding-left: var(--space-size-l)
}

.image-carousel {
    margin: 0 auto;
    max-width: 412px
}

.image-carousel__container {
    aspect-ratio: 412/512;
    overflow: clip;
    position: relative
}

.image-carousel__image {
    height: auto;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.image-carousel__controls {
    margin-top: var(--space-size-s)
}

.carousel-autoplay {
    align-items: center;
    display: flex;
    gap: var(--space-size-s)
}

.carousel-autoplay__button {
    background: none;
    background-color: var(--color-primary);
    border: none;
    border-radius: 50%;
    color: var(--color-secondary);
    cursor: pointer;
    height: var(--space-size-l);
    padding: 0;
    width: var(--space-size-l)
}

.carousel-autoplay__button svg {
    height: 100%;
    width: 100%
}

.carousel-autoplay__dots {
    align-items: center;
    background-color: var(--color-primary);
    border-radius: var(--space-size-xl);
    display: flex;
    gap: var(--space-size-2xs);
    padding: var(--space-size-s) var(--space-size-m)
}

@keyframes image-carousel-dot-fill {
    to {
        transform: translate(0)
    }
}

.carousel-autoplay__dot {
    background-color: var(--color-secondary-transparent-20);
    border: 0;
    border-radius: calc(var(--space-size-2xs)/2);
    cursor: pointer;
    flex: 0 0 var(--space-size-2xs);
    height: var(--space-size-2xs);
    margin: 0;
    opacity: 0;
    overflow: clip;
    padding: 0;
    position: relative;
    width: var(--space-size-2xs);
    --stagger-delay: .1s;
    transition: flex-basis var(--transition-default-duration) var(--transition-default-timing-function), opacity var(--transition-default-duration) var(--transition-timing-function-2) calc(sibling-index()*var(--stagger-delay))
}

.carousel-autoplay--visible .carousel-autoplay__dot {
    opacity: 1
}

.carousel-autoplay__dot:before {
    background-color: var(--color-secondary);
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translate(-100%);
    width: 100%
}

.carousel-autoplay__dot--active {
    flex: 0 0 var(--space-size-l);
    width: var(--space-size-l)
}

.carousel-autoplay:not(.carousel-autoplay--paused) .carousel-autoplay__dot--active:before {
    animation: image-carousel-dot-fill var(--autoplay-item-duration) linear forwards
}

.scroll-box {
    align-content: space-between;
    display: grid;
    gap: var(--space-size-xl) 0;
    grid-template-columns: 1fr;
    height: 100%;
    padding-left: var(--space-size-l);
    position: relative
}

.scroll-box__progress-bar {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0
}

@keyframes vertical-scroll-progress-bar-grow {
    to {
        transform: scaleY(1)
    }
}

.vertical-scroll-progress-bar {
    height: 100%;
    position: relative;
    view-timeline-name: --vertical-scroll-progress-bar-tl
}

.vertical-scroll-progress-bar:after,
.vertical-scroll-progress-bar:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px
}

.vertical-scroll-progress-bar:before {
    background-color: var(--color-primary-transparent-20)
}

.vertical-scroll-progress-bar:after {
    background-color: var(--color-primary)
}

@supports not ((animation-timeline:scroll()) and (animation-range:0% 100%)) {
    .vertical-scroll-progress-bar:after {
        height: var(--space-size-3xl)
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .vertical-scroll-progress-bar:after {
        animation: vertical-scroll-progress-bar-grow ease-in-out forwards;
        animation-timeline: --vertical-scroll-progress-bar-tl;
        height: 100%;
        transform: scaleY(0);
        transform-origin: top
    }
}

.vertical-scroll-progress-bar.vertical-scroll-progress-bar--theme-secondary:before {
    background-color: var(--color-secondary-transparent-20)
}

.vertical-scroll-progress-bar.vertical-scroll-progress-bar--theme-secondary:after {
    background-color: var(--color-secondary)
}

.wheel-block {
    overflow: clip;
    timeline-scope: --wheel-block-wheel-tl
}

.wheel-block__sticky-content {
    padding: var(--space-size-4xl) 0
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {
        .wheel-block__sticky-content {
            display: flex;
            flex-direction: column;
            height: 100svh;
            position: sticky;
            top: 0
        }
    }
}

.wheel-block__body {
    display: grid;
    gap: var(--space-size-2xl-3xl) var(--grid-gutter);
    grid-template-columns: 1fr;
    margin-top: var(--space-size-2xl-3xl)
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {
        .wheel-block__body {
            height: 40svh;
            margin-top: auto;
            position: relative
        }
    }
}

@media screen and (min-width:960px) {
    .wheel-block__body {
        grid-template-columns: repeat(12, 1fr)
    }
}

.wheel-block__body-inner {
    grid-column: 1/-1
}

@media screen and (min-width:960px) {
    .wheel-block__body-inner {
        grid-column: 4/-4
    }

    @supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
        @media screen and (min-width:960px)and (min-height:660px) {
            .wheel-block__body-inner {
                grid-column: 2/-2
            }
        }
    }
}

@keyframes wheel-block-wheel-rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(-1turn)
    }
}

@keyframes wheel-block-wheel-enter {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.wheel-block-wheel {
    display: grid;
    gap: var(--space-size-l);
    grid-template-columns: 1fr
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {
        .wheel-block-wheel {
            animation: wheel-block-wheel-enter ease-in both;
            animation-range: 0 50svh;
            animation-timeline: --wheel-block-wheel-tl;
            aspect-ratio: 1/1;
            display: block;
            position: relative
        }
    }
}

.wheel-block-wheel__svg {
    display: none
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {
        .wheel-block-wheel__svg {
            animation: wheel-block-wheel-rotate linear forwards;
            animation-range: cover 0 contain 100%;
            animation-timeline: --wheel-block-wheel-tl;
            display: block;
            height: auto;
            margin-left: -20%;
            max-width: 200%;
            rotate: var(--wheel-rotation-degrees-start, 60deg);
            width: 140%
        }
    }

    @media screen and (min-height:660px)and (min-width:960px) {
        .wheel-block-wheel__svg {
            margin-left: 0;
            width: 100%
        }
    }
}

.wheel-step__dot {
    fill: var(--color-accent);
    transform-box: content-box;
    transform-origin: center;
    transition: scale 1s var(--transition-default-timing-function)
}

.wheel-step--active .wheel-step__dot {
    scale: 1.5
}

.wheel-step__bubble {
    fill: #0000;
    stroke: var(--color-secondary-transparent-50);
    transition: fill 1s var(--transition-default-timing-function), stroke 1s var(--transition-default-timing-function)
}

.wheel-step--active .wheel-step__bubble {
    fill: var(--color-secondary);
    stroke: var(--color-secondary)
}

.wheel-step__text {
    fill: var(--color-secondary);
    font-size: 26.66px;
    font-weight: 500
}

.wheel-step--active .wheel-step__text {
    fill: var(--color-primary)
}

.wheel-step__line {
    scale: 1 0;
    stroke: var(--color-secondary);
    transform-box: content-box;
    transition: scale 2s var(--transition-default-timing-function)
}

.wheel-step--active .wheel-step__line {
    scale: 1 1
}

.wheel-block-wheel__item {
    counter-increment: experience-item-counter;
    text-align: center
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {
        .wheel-block-wheel__item {
            left: 50%;
            position: absolute;
            top: 20%;
            transform: translate(-50%);
            width: 80%
        }
    }

    @media screen and (min-height:660px)and (min-width:960px) {
        .wheel-block-wheel__item {
            width: 50%
        }
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {

        .wheel-block-wheel__item-description,
        .wheel-block-wheel__item-title {
            opacity: 0
        }

        .wheel-block-wheel__item--active .wheel-block-wheel__item-description,
        .wheel-block-wheel__item--active .wheel-block-wheel__item-title {
            opacity: 1;
            transition: opacity 2s var(--transition-default-timing-function)
        }
    }
}

.wheel-block-wheel__item-title {
    color: var(--color-accent)
}

.wheel-block-wheel__item-title:before {
    content: counter(experience-item-counter) ". "
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {
        .wheel-block-wheel__item-title:before {
            content: ""
        }
    }
}

.wheel-block-wheel__item-description {
    margin-top: var(--space-size-s)
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {
        .wheel-block-wheel__item--active .wheel-block-wheel__item-description {
            transition-delay: .5s
        }
    }
}

.wheel-block__triggers {
    display: none;
    pointer-events: none;
    view-timeline-name: --wheel-block-wheel-tl
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-height:660px) {
        .wheel-block__triggers {
            display: block
        }

        .wheel-block__trigger {
            height: 50svh
        }
    }
}

.section-title {
    text-wrap-style: balance
}

@media screen and (min-width:960px) {
    .section-title {
        max-width: 57.36%
    }
}

.about-apply-grid {
    display: grid;
    gap: 0 var(--grid-gutter);
    grid-template-columns: repeat(12, 1fr)
}

.about-apply-grid__item {
    grid-column: 1/-1
}

@media screen and (min-width:480px) {
    .about-apply-grid__item {
        grid-column: 3/span 8
    }
}

.about-apply-box {
    border-radius: var(--space-size-2xs);
    display: grid;
    gap: 0 var(--grid-gutter);
    grid-template-columns: 1fr;
    overflow: hidden
}

@media screen and (min-width:640px) {
    .about-apply-box {
        grid-template-columns: subgrid
    }

    .about-apply-box__aside {
        grid-column: 1/span 3
    }
}

.about-apply-box__body {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-size-m-l);
    padding: var(--space-size-l)
}

@media screen and (min-width:640px) {
    .about-apply-box__body {
        grid-column: 4/span 5;
        padding-left: 0
    }
}

.about-apply-box__cta-button {
    margin-top: auto
}

.reveal-block {
    position: relative;
    timeline-scope: --reveal-block-intro-tl, --reveal-block-main-tl
}

.reveal-block__content {
    position: sticky;
    top: 0
}

.reveal-block__header {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: var(--space-size-5xl) 0;
    text-align: center;
    text-wrap-style: balance
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .reveal-block__header {
        height: 100%;
        left: 0;
        min-height: 100svh;
        position: absolute;
        top: 0;
        width: 100%
    }
}

.reveal-block__title {
    display: inline-block;
    --stagger-delay: .2s;
    transition: opacity 3s var(--transition-default-timing-function);
    visibility: visible
}

.reveal-block__title .reveal-block__header:not(.reveal-block__header--visible) {
    opacity: 0;
    visibility: hidden
}

.reveal-block__title .word {
    opacity: 1;
    transition: opacity 2.5s var(--transition-default-timing-function);
    transition-delay: calc(sibling-index()*var(--stagger-delay))
}

.reveal-block__header:not(.reveal-block__header--visible) .reveal-block__title .word {
    opacity: 0
}

@keyframes reveal-block-bg-enter {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

.reveal-block__body {
    isolation: isolate
}

@supports not ((animation-timeline:scroll()) and (animation-range:0% 100%)) {
    .reveal-block__body {
        position: relative
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .reveal-block__body {
        animation: reveal-block-bg-enter ease-out forwards;
        animation-timeline: --reveal-block-intro-tl;
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)
    }
}

.reveal-block__bg {
    align-items: center;
    color: var(--color-tertiary);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    min-height: 100svh;
    position: absolute;
    text-align: center;
    text-wrap-style: balance;
    top: 0;
    width: 100%
}

.reveal-block__bg-illustration {
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    position: absolute;
    width: 100%
}

@keyframes reveal-block-title-exit {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@supports not ((animation-timeline:scroll()) and (animation-range:0% 100%)) {
    .reveal-block__title--bg {
        display: none
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .reveal-block__title--bg {
        animation: reveal-block-title-exit ease-in forwards;
        animation-timeline: --reveal-block-intro-tl
    }
}

.reveal-block__main-wrap {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100svh;
    padding: var(--space-size-3xl-4xl) 0;
    position: relative
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .reveal-block__main-wrap {
        opacity: 0;
        scale: .5;
        transition: scale 1s var(--transition-default-timing-function), opacity 1s var(--transition-default-timing-function)
    }

    .reveal-block__body--visible .reveal-block__main-wrap {
        opacity: 1;
        scale: 1
    }
}

@keyframes reveal-block-main-reveal {

    0%,
    40% {
        opacity: 1;
        scale: 1
    }

    to {
        opacity: 0;
        scale: .5
    }
}

.reveal-block__main {
    overflow: hidden
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .reveal-block__main {
        animation: var(--transition-default-timing-function) reveal-block-main-reveal both;
        animation-range: entry 80% exit 100%;
        animation-timeline: --reveal-block-main-tl
    }
}

@supports not ((animation-timeline:scroll()) and (animation-range:0% 100%)) {
    .reveal-block__timeline {
        display: none
    }
}

.reveal-block__timeline-item {
    height: 100svh;
    pointer-events: none
}

.reveal-block__timeline-item--intro {
    view-timeline-name: --reveal-block-intro-tl
}

.reveal-block__timeline-item--main {
    height: 120svh;
    view-timeline-name: --reveal-block-main-tl
}

.showcase-portfolio {
    padding: var(--space-size-4xl) 0 var(--space-size-2xl)
}

.showcase-portfolio-box__button {
    all: unset;
    cursor: pointer;
    display: block;
    height: 100%;
    width: 100%
}

.showcase-portfolio__header {
    max-width: 740px
}

.showcase-portfolio__body {
    padding-top: var(--space-size-2xl-3xl)
}

.showcase-portfolio-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, 1fr)
}

@media screen and (min-width:720px) {
    .showcase-portfolio-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.showcase-portfolio-grid__item {
    align-self: stretch;
    aspect-ratio: 428/284;
    grid-row: span 1;
    max-width: 100%;
    overflow: clip
}

.showcase-portfolio-grid__item:nth-child(10n+1) {
    aspect-ratio: 428/568;
    grid-row: span 2
}

@media screen and (max-width:719px) {
    .showcase-portfolio-grid__item:nth-child(10n+7) {
        aspect-ratio: 428/568;
        grid-row: span 2
    }
}

@media screen and (min-width:720px) {
    .showcase-portfolio-grid__item:nth-child(10n+8) {
        aspect-ratio: 428/568;
        grid-row: span 2
    }
}

.showcase-portfolio-box {
    position: relative
}

.showcase-portfolio-box__media,
.showcase-portfolio-box__media .media-item__asset {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.showcase-portfolio-box__tags {
    bottom: var(--space-size-2xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-size-2xs);
    left: var(--space-size-2xs);
    position: absolute
}

@media screen and (max-width:480px) {
    .showcase-portfolio-box__tags {
        display: none
    }
}

@media screen and not (max-width:720px) {
    .showcase-portfolio-box__tags {
        bottom: var(--space-size-s);
        left: var(--space-size-s)
    }
}

.showcase-portfolio-box__tag {
    display: inline-block;
    padding: var(--space-size-3xs) var(--space-size-s);
    text-transform: uppercase
}

.showcase-portfolio__actions {
    margin-top: var(--space-size-2xl);
    text-align: center
}

.media-item__asset--comparison {
    aspect-ratio: 680/450
}

.vci--container {
    overflow: visible
}

.services__header {
    padding: var(--space-size-3xl) 0
}

.services__body {
    padding-bottom: var(--space-size-4xl)
}

.services-card-grid {
    display: grid;
    gap: var(--space-size-xs);
    grid-template-columns: repeat(2, 1fr)
}

@media screen and (min-width:720px) {
    .services-card-grid {
        gap: var(--space-size-s);
        gap: var(--grid-gutter);
        grid-template-columns: repeat(4, 1fr)
    }
}

.services-card-grid__item {
    aspect-ratio: 300/410;
    min-width: 0
}

.services-card-grid__item:first-child {
    aspect-ratio: auto;
    grid-column: span 2;
    height: clamp(12.5rem, 10.4167rem + 9.2593vw, 18.75rem)
}

@media screen and (min-width:720px) {
    .services-card-grid__item:first-child {
        grid-column: span 4
    }
}

.service-card {
    cursor: pointer;
    opacity: 0;
    overflow: clip;
    position: relative;
    transition: translate 1s var(--transition-default-timing-function), opacity 1s var(--transition-default-timing-function);
    transition-delay: var(--delay, 0s);
    translate: 0 var(--space-size-m-l)
}

.services-card-grid--visible .service-card {
    opacity: 1;
    translate: 0 0
}

.service-card__image {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    transform: scale(1.2);
    transition: transform 1s var(--transition-default-timing-function) var(--delay, 0s), scale var(--transition-default-duration) var(--transition-default-timing-function);
    width: 100%
}

.services-card-grid--visible .service-card__image {
    transform: scale(1)
}

.service-card:hover .service-card__image {
    scale: 1.05
}

.service-card__nr {
    scale: 0;
    transition: scale 1s var(--transition-default-timing-function);
    transition-delay: var(--delay, 0s)
}

.services-card-grid--visible .service-card__nr {
    scale: 1
}

.service-card__title {
    overflow-wrap: normal
}

.service-card__content {
    background-color: var(--color-primary-transparent-50);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-size-s-m);
    position: relative;
    z-index: 1
}

.service-card__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.service-card__body {
    margin-top: auto
}

.service-card__link {
    transition: scale var(--transition-default-duration) var(--transition-default-timing-function), rotate var(--transition-default-duration) var(--transition-timing-function-4)
}

.service-card:hover .service-card__link {
    rotate: 45deg;
    scale: 1.1
}

.services-list-item-grid {
    display: grid;
    gap: 0 var(--space-size-m);
    grid-template-columns: 1fr;
    margin-top: calc(var(--space-size-2xl)*-1);
    padding-top: var(--space-size-3xl-4xl)
}

.services-list-item-grid__item {
    border-bottom: 1px solid var(--color-secondary-transparent-20)
}

.service-list-item {
    align-items: center;
    color: var(--color-secondary-transparent-80);
    cursor: pointer;
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: auto 1fr auto;
    opacity: 0;
    padding: var(--space-size-xs) 0;
    transition: translate 1s var(--transition-default-timing-function) var(--delay, 0s), opacity 1s var(--transition-default-timing-function) var(--delay, 0s), color var(--transition-default-duration) var(--transition-timing-function-4) 0s;
    translate: 0 var(--space-size-xl-2xl)
}

.service-list-item:hover {
    color: var(--color-secondary)
}

.services-list-item-grid--visible .service-list-item {
    opacity: 1;
    translate: 0 0
}

@media screen and (min-width:720px) {
    .service-list-item {
        grid-template-columns: repeat(3, 1fr)
    }
}

.service-list-item__action {
    text-align: right
}

.service-list-item__link {
    transition: rotate var(--transition-default-duration) var(--transition-default-timing-function)
}

.service-list-item:hover .service-list-item__link {
    rotate: 45deg
}

.team {
    background-color: #e2e2e2;
    padding: var(--space-size-4xl) 0
}

.team__body {
    padding-top: var(--space-size-2xl-3xl)
}

.team-info-grid {
    display: grid;
    gap: var(--space-size-2xl-3xl) var(--grid-gutter);
    grid-template-columns: 1fr
}

@media screen and (min-width:720px) {
    .team-info-grid {
        grid-template-columns: repeat(12, 1fr)
    }

    .team-info-grid__item--aside {
        grid-column: 1/span 5
    }
}

@media screen and (min-width:960px) {
    .team-info-grid__item--aside {
        grid-column: 1/span 4
    }
}

@media screen and (min-width:720px) {
    .team-info-grid__item--main {
        grid-column: 7/span 6
    }
}

@media screen and (min-width:960px) {
    .team-info-grid__item--main {
        grid-column: 9/span 4
    }
}

.team__aside-image-container {
    overflow: clip
}

.team__aside-image {
    scale: 1.2
}

.team__aside-image--visible {
    scale: 1;
    transition: scale 2s var(--transition-default-timing-function)
}

.team-members {
    margin-top: var(--space-size-4xl)
}

.team-members__tabs {
    align-items: center;
    display: flex;
    flex-direction: column
}

.team-member-grid {
    display: grid;
    gap: 0 var(--space-size-s-m);
    grid-template-columns: repeat(12, 1fr);
    margin-top: var(--space-size-s)
}

@media screen and (min-width:640px) {
    .team-member-grid {
        gap: 0 var(--grid-gutter);
        grid-template-columns: repeat(12, 1fr);
        margin-top: var(--space-size-xl)
    }
}

.team-member-grid__item {
    grid-column-end: span 6
}

.team-member-grid__item:nth-child(odd) {
    grid-column-start: 1;
    padding-top: var(--space-size-xl)
}

.team-member-grid__item:nth-child(2n) {
    grid-column-start: 7
}

@media screen and (min-width:720px) {
    .team-member-grid__item {
        grid-column-end: span 4
    }

    .team-member-grid__item:nth-child(odd) {
        grid-column-start: 2;
        padding-top: var(--space-size-2xl-3xl)
    }

    .team-member-grid__item:nth-child(2n) {
        grid-column-start: 7
    }
}

@media screen and (min-width:960px) {
    .team-member-grid__item {
        grid-column-end: span 3
    }

    .team-member-grid__item:nth-child(odd) {
        grid-column-start: 3
    }

    .team-member-grid__item:nth-child(2n) {
        grid-column-start: 8
    }
}

.team-member-grid__item--footer:nth-child(2n),
.team-member-grid__item--footer:nth-child(odd) {
    grid-column: 1/-1;
    padding-top: var(--space-size-xl)
}

@media screen and (min-width:960px) {
    .team-member-grid__item--footer {
        grid-column: 8/span 4 !important
    }

    .team-member-grid__item--footer:nth-child(odd) {
        padding-top: 0
    }

    .team-member-grid__item--footer:nth-child(2n) {
        padding-top: calc(var(--space-size-4xl) + var(--space-size-3xl))
    }
}

@keyframes team-member-move-item-move {
    0% {
        transform: var(--start-transform, translateY(0))
    }

    to {
        transform: var(--end-transform, translateY(0))
    }
}

.team-member {
    cursor: pointer
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    @media screen and (min-width:960px) {
        .team-member {
            animation: team-member-move-item-move linear both;
            animation-timeline: --team-member-move-item-tl;
            view-timeline-name: --team-member-move-item-tl
        }
    }
}

.team-member__header {
    margin-bottom: var(--space-size-s);
    overflow: clip;
    position: relative
}

@keyframes team-member-move-image-move {
    0% {
        translate: 0 10%
    }

    to {
        translate: 0 -10%
    }
}

.team-member__image {
    transition: transform var(--transition-default-duration) var(--transition-default-timing-function)
}

.team-member:hover .team-member__image {
    transform: scale(1.05)
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .team-member__image {
        scale: 1.1
    }

    @media screen and (min-width:960px) {
        .team-member__image {
            animation: team-member-move-image-move linear both;
            animation-timeline: --team-member-move-item-tl
        }
    }
}

.team-member__link {
    position: absolute;
    right: var(--space-size-2xs-xs);
    top: var(--space-size-2xs-xs);
    transition: scale var(--transition-default-duration) var(--transition-default-timing-function), rotate var(--transition-default-duration) var(--transition-timing-function-4)
}

.team-member:hover .team-member__link {
    rotate: 45deg;
    scale: 1.1
}

.team-member__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-2xs)
}

.team-member__role {
    text-transform: uppercase
}

.vacancy-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-xl);
    justify-content: space-between;
    padding: var(--space-size-l) var(--space-size-l) var(--space-size-xl) var(--space-size-l)
}

@media screen and (min-width:960px) {
    .vacancy-box {
        aspect-ratio: 1/1
    }
}

.tabs__labels {
    display: flex;
    gap: var(--space-size-l);
    overflow-x: auto
}

.tabs__label {
    border: none;
    color: var(--color-primary-transparent-80);
    cursor: pointer;
    display: inline-block;
    flex: 0 0 auto;
    padding: 0 0 var(--space-size-2xs) 0;
    position: relative;
    transition: color var(--transition-default-duration) var(--transition-timing-function-4)
}

.tabs__label:after {
    background-color: currentcolor;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-default-duration) var(--transition-timing-function-5);
    width: 100%
}

.tabs__label--active {
    color: var(--color-primary)
}

.tabs__label--active:after {
    transform: scaleX(1)
}

.tabs__content {
    padding-top: var(--space-size-xl)
}

.vacancies-button {
    align-items: center;
    border: none;
    cursor: pointer;
    display: inline-flex;
    gap: var(--space-size-m);
    padding: 0;
    text-align: left
}

.vacancies-button__link {
    transition: scale var(--transition-default-duration) var(--transition-default-timing-function), rotate var(--transition-default-duration) var(--transition-timing-function-4)
}

.vacancies-button:hover .vacancies-button__link {
    rotate: 45deg;
    scale: 1.1
}

.pricing {
    padding: var(--space-size-4xl) 0 var(--space-size-2xl)
}

.pricing__header {
    max-width: 740px
}

.pricing__body {
    padding-top: var(--space-size-2xl-3xl)
}

.pricing__notice {
    color: var(--color-primary-transparent-80);
    margin-top: var(--space-size-m)
}

.pricing__items {
    margin-top: var(--space-size-2xl)
}

.pricing-items {
    display: grid;
    gap: var(--space-size-2xl)
}

.pricing-item__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-s-m)
}

@media screen and (min-width:640px) {
    .pricing-item__header {
        align-items: center;
        flex-direction: row;
        gap: var(--space-size-l);
        justify-content: space-between
    }
}

.pricing-item__body {
    max-width: 1070px;
    padding-top: var(--space-size-xl)
}

@media screen and (min-width:640px) {
    .pricing-item__title {
        align-items: center;
        display: flex;
        gap: var(--space-size-xs-s)
    }

    .pricing-item__title:before {
        background-color: var(--color-accent);
        border-radius: 50%;
        content: "";
        display: inline-block;
        flex-shrink: 0;
        height: var(--space-size-xs-s);
        vertical-align: middle;
        width: var(--space-size-xs-s)
    }
}

.faq {
    padding: var(--space-size-4xl) 0 var(--space-size-2xl)
}

.faq__header {
    max-width: 740px
}

.faq__body {
    padding-top: var(--space-size-2xl-3xl)
}

.faq-categories {
    display: grid;
    gap: var(--space-size-xl-2xl)
}

.faq-item {
    border-bottom: 1px solid var(--color-primary-transparent-20);
    padding: var(--space-size-s-m) 0
}

.faq-category,
.faq-item {
    opacity: 0;
    transition: translate var(--transition-default-duration) var(--transition-default-timing-function), opacity var(--transition-default-duration) var(--transition-default-timing-function);
    transition-delay: var(--delay, 0s);
    translate: 0 var(--space-size-xl-2xl)
}

.faq-categories--visible .faq-category,
.faq-categories--visible .faq-item {
    opacity: 1;
    translate: 0 0
}

.details {
    --details-transition-duration: var(--transition-default-duration);
    --details-transition-timing-function: var(--transition-timing-function-4)
}

.details::details-content {
    interpolate-size: allow-keywords;
    height: 0;
    overflow: clip;
    transition: height var(--details-transition-duration) var(--details-transition-timing-function), content-visibility var(--details-transition-duration) allow-discrete
}

.details[open]::details-content {
    height: auto
}

.details__header {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-size-m);
    justify-content: space-between;
    overflow: clip
}

.details__header::marker {
    content: ""
}

.details--size-small .details__header {
    color: #031c14b3
}

.details__marker {
    flex-shrink: 0;
    width: var(--space-size-l)
}

.details--size-small .details__marker {
    scale: .75
}

.details[open]>.details__header .details__marker-line-plus {
    display: none
}

.details__body {
    padding-top: var(--space-size-m)
}

.contacts {
    overflow: clip;
    padding: var(--space-size-4xl) 0
}

.contacts__body {
    padding-top: var(--space-size-2xl-3xl)
}

.contacts__footer {
    margin-top: var(--space-size-2xl-3xl)
}

.contacts-info-grid {
    display: grid;
    gap: var(--space-size-2xl-3xl) var(--grid-gutter);
    grid-template-columns: 1fr
}

@media screen and (min-width:720px) {
    .contacts-info-grid {
        grid-template-columns: repeat(12, 1fr)
    }
}

.contacts-info-grid__item--aside {
    overflow: clip
}

@media screen and (min-width:720px) {
    .contacts-info-grid__item--aside {
        grid-column: 1/span 6
    }
}

@media screen and (min-width:960px) {
    .contacts-info-grid__item--aside {
        grid-column: 1/span 7
    }
}

@media screen and (min-width:720px) {
    .contacts-info-grid__item--main {
        grid-column: 7/span 6
    }
}

@media screen and (min-width:960px) {
    .contacts-info-grid__item--main {
        grid-column: 9/span 4
    }
}

.contacts__map {
    scale: 1.2;
    transition: scale 2s var(--transition-default-timing-function)
}

.contacts-info-grid--visible .contacts__map {
    scale: 1
}

.footer {
    overflow-x: clip;
    padding: var(--space-size-3xl) 0
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .footer {
        padding-top: 75vmin;
        view-timeline-name: --footer-tl
    }
}

.footer-grid {
    display: grid;
    gap: var(--space-size-2xl-3xl) var(--grid-gutter);
    grid-template-columns: 1fr
}

@media screen and (min-width:720px) {
    .footer-grid {
        grid-template-columns: repeat(12, 1fr)
    }

    .footer-grid__item--logo {
        grid-column: 1/span 5
    }
}

@media screen and (min-width:960px) {
    .footer-grid__item--logo {
        grid-column: 1/span 7
    }
}

@media screen and (min-width:720px) {
    .footer-grid__item--main {
        grid-column: 7/span 6
    }
}

@media screen and (min-width:960px) {
    .footer-grid__item--main {
        grid-column: 9/span 4
    }
}

@keyframes footer-logo-move {
    0% {
        scale: var(--footer-logo-initial-scale);
        translate: 0 -150vmin
    }

    75% {
        scale: var(--footer-logo-initial-scale)
    }

    to {
        scale: 1;
        translate: 0
    }
}

.footer__logo {
    position: sticky;
    top: var(--space-size-4xl);
    transform-origin: left center;
    --footer-logo-initial-scale: 1
}

@media screen and (min-width:720px) {
    .footer__logo {
        --footer-logo-initial-scale: 2.5
    }
}

@media screen and (min-width:960px) {
    .footer__logo {
        --footer-logo-initial-scale: 1.75
    }
}

@supports (animation-timeline:scroll()) and (animation-range:0% 100%) {
    .footer__logo {
        animation: footer-logo-move linear forwards;
        animation-range: 0 150vmin;
        animation-timeline: --footer-tl
    }
}

.footer-items {
    border-bottom: 1px solid var(--color-secondary-transparent-20);
    display: grid;
    gap: var(--space-size-xl);
    padding-bottom: var(--space-size-m)
}

.footer-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-m)
}

.footer-item__title {
    color: var(--color-secondary-transparent-50);
    text-transform: uppercase
}

.footer-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-xs)
}

.footer-contact-links {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-size-xs) 0
}

.footer-contact-link {
    border-bottom: 1px dashed var(--color-accent);
    display: inline-block;
    padding-bottom: var(--space-size-2xs)
}

.footer-additionals {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-size-m);
    justify-content: space-between
}

.footer-socials {
    display: flex;
    gap: var(--space-size-2xs)
}

.footer__copy {
    color: var(--color-secondary-transparent-50);
    padding-top: var(--space-size-m)
}

.modal {
    background-color: var(--color-tertiary);
    color: var(--color-primary);
    height: 100vh;
    left: 0;
    overflow-y: scroll;
    overscroll-behavior: contain;
    padding-bottom: var(--space-size-4xl);
    position: fixed;
    scrollbar-gutter: stable;
    top: 0;
    width: 100vw;
    z-index: 100
}

.modal--stuck {
    height: auto;
    position: absolute
}

.modal-grid {
    display: grid;
    gap: 0 var(--grid-gutter);
    grid-template-columns: repeat(12, 1fr)
}

.modal-grid__item {
    grid-column: 1/-1
}

@media screen and (min-width:960px) {
    .modal--size-large .modal-grid__item {
        grid-column: 2/-1
    }
}

@media screen and (min-width:720px) {
    .modal-grid__item--content {
        grid-column: 2/-2
    }
}

@media screen and (min-width:960px) {
    .modal-grid__item--content {
        grid-column: 4/-4
    }

    .modal--size-large .modal-grid__item--content {
        grid-column: 2/-2
    }
}

.modal__header {
    align-items: center;
    display: flex;
    gap: var(--grid-gutter);
    justify-content: space-between;
    padding: var(--space-size-l-xl) 0;
    position: sticky;
    top: 0;
    z-index: 1
}

.modal__title {
    align-items: center;
    display: inline-flex;
    gap: var(--space-size-s)
}

.modal__title:before {
    background-color: currentcolor;
    border-radius: 50%;
    content: "";
    display: block;
    flex-shrink: 0;
    height: var(--space-size-2xs);
    width: var(--space-size-2xs)
}

.modal__close-button {
    margin-left: auto;
    transition: scale var(--transition-default-duration) var(--transition-timing-function-4)
}

.modal__close-button:hover {
    scale: 1.1
}

.modal__content {
    display: grid;
    grid-template-columns: subgrid
}

.modal__content>* {
    grid-column: 1/-1
}

.modal-enter-active,
.modal-leave-active {
    transition: translate 1s var(--transition-timing-function-4), visibility 2s var(--transition-default-timing-function)
}

.modal-enter-from,
.modal-leave-to {
    translate: 100% 0
}

.modal-enter-active .u-modal-opacity-transition,
.modal-leave-active .u-modal-opacity-transition {
    transition: opacity 1s var(--transition-timing-function-2)
}

.modal-enter-from .u-modal-opacity-transition,
.modal-leave-to .u-modal-opacity-transition {
    opacity: 0
}

.modal-enter-active .u-modal-scale-transition,
.modal-leave-active .u-modal-scale-transition {
    transition: scale 2s var(--transition-default-timing-function)
}

.modal-enter-from .u-modal-scale-transition,
.modal-leave-to .u-modal-scale-transition {
    scale: 1.1
}

/* FORCE RESET: إصلاح الصور العالقة */
.about-process-gallery-item,
[style*="translateY"],
[data-aos],
.reveal-block {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
}

/* التأكد من أن الصور تأخذ أبعادها الطبيعية */
img {
    opacity: 1 !important;
    display: block !important;
}

/* --- KPI Lines Fix: Force Sharp Corners --- */
#kpiSvg path {
    stroke-linejoin: miter !important;
    /* يجبر الزاوية أن تكون قائمة 90 درجة */
    stroke-linecap: butt !important;
    /* يجعل نهاية الخط مسطحة */
    shape-rendering: crispEdges !important;
    /* يمنع المتصفح من تنعيم الحواف */
    fill: none !important;
    /* ضمان عدم وجود تعبئة */
}