@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 100;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 200;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 800;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
.preloader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1099;
}
.preloader .bg {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
backface-visibility: hidden;
will-change: transform;
}
.preloader .preload-svg {
position: relative;
transform: translate3d(49%, calc(50dvh - 58%), 0px);
overflow: hidden;
}
.t1_privacy, h1 {
font-size: 0.75rem;
line-height: 0.70rem;
letter-spacing: -0.02rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.text-block-privacy {
padding-top: 0rem;
}
.text-block-privacy .wrapper {
display: flex;
justify-content: space-between;
flex-direction: column;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
border-bottom: 1px solid #29282c;
}
.text-block-privacy .wrapper .text {}
.t2_privacy {
font-size: 0.22rem;
color: #ffffff;
line-height: 0.26rem;
letter-spacing: -0.004rem;
font-weight: 400;
font-family: "Inter", sans-serif;
}
.support-content {
max-width: 13.4rem;
margin-left: 0.44rem;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
}
.support-content .wrapper {
position: relative;
}
.support-content .wrapper .title {
position: absolute;
left: 0;
top: 0;
font-weight: 900;
}
.support-content .wrapper .single-support {
position: relative;
}
.support-content .wrapper .single-support .service-video {
width: 4.5rem;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 0.05rem;
opacity: 0;
transition: opacity 300ms ease-in;
position: absolute;
top: 50%;
right: 0%;
transform: translateY(-31%);
will-change: transform;
pointer-events: none;
}
.support-content .wrapper .single-support:nth-child(2) .service-video {
top: 0rem;
transform: translateY(-38.2%);
}
.support-content .wrapper .single-support:nth-child(3) .service-video {
top: 0rem;
transform: translateY(-52.9%);
}
.support-content .wrapper .single-support:nth-child(4) .service-video {
top: 0rem;
transform: translateY(-67.7%);
}
.support-content .wrapper .single-support .support-name {
padding-left: 0rem;
color: #9893a3;
transition: 0.3s ease-in-out;
pointer-events: none;
}
.support-content .wrapper .single-support:last-child .support-name {
position: relative;
width: -moz-fit-content;
width: fit-content;
}
.support-content .wrapper .single-support::before {
content: "";
position: absolute;
top: 20%;
left: 0;
width: 100%;
height: 80%;
pointer-events: all;
}
.support-content .wrapper .single-support:hover .support-name {
color: #ffffff;
}
.support-content .wrapper .single-support .support-name {
padding-left: 0rem;
color: #9893a3;
transition: 0.3s ease-in-out;
pointer-events: none;
}
.support-content .wrapper .single-support:hover .service-video {
opacity: 1;
}
@media screen and (max-width: 768px) {
.support-content .container {
padding-left: 0rem;
}
.support-content {
max-width: 3.5rem;
margin-left: 0.15rem;
padding-bottom: 0.2rem;
padding-top: 0.1rem;
padding-left: 0rem;
}
.support-content .wrapper {
position: static;
}
.support-content .wrapper .title {
position: static;
padding-bottom: 0.2rem;
}
.support-content .wrapper .single-support {
position: static;
max-width: 3.5rem;
}
.support-content .wrapper .single-support .service-video {
width: 3.5rem;
height: auto;
aspect-ratio: 4 / 3;
opacity: 0;
position: fixed;
transition: transform 300ms ease;
bottom: 0.16rem !important;
left: 0.16rem;
pointer-events: none;
visibility: hidden;
z-index: 9;
top: unset !important;
transform: none !important;
}
.support-content .wrapper .single-support .support-name {
padding-left: 0;
color: #9893a3;
transition: none;
}
.support-content .wrapper .single-support::before {
display: none;
}
.support-content .wrapper .single-support.active .support-name {
color: #ffffff;
}
.support-content .wrapper .single-support.active .service-video {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.support-content .wrapper .single-support:hover .support-name {
transform: none;
color: #9893a3;
}
.support-content .wrapper .single-support:hover .service-video {
opacity: 0;
}
}
.loader {
width: 100px;
height: 100px;
position: relative;
}
:root {
--size: 0px;
--gap: 0px;
--duration: 15s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}
* {
box-sizing: border-box;
}
.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}
.marquee-group {
flex-shrink: 0;
padding-top: 0rem;
display: flex;
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.marquee-group {
animation-play-state: paused;
}
.loader-svg [id^="exItSW3el7p"] {
animation: none !important;
}
}
@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}
/* Element styles */
.marquee .t8_marquee { margin-left: 15px; }
/**
* VARIABLES
**/
/**
* NORMALIZE & MIXINS
**/
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h4, p, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
.heart {
animation: heartbeat 1s infinite;
fill: #fa243d;
width: 0.60rem;
height: 0.60rem;
padding-top: 0.08rem;
margin-bottom: -0.07rem;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
10% {
transform: scale(1.05);
}
20% {
transform: scale(1.1);
}
}
.t5_large {
font-size: 0.27rem;
line-height: 0.32rem;
letter-spacing: -0.005rem;
font-weight: 600;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.t12, p {
font-family: "Inter", sans-serif;
font-size: 0.25rem;
font-weight: 600;
line-height: 0.28rem;
letter-spacing: -0.001rem;
}
.t10 {
font-family: "Inter", sans-serif;
font-size: 0.27rem;
line-height: 0.32rem;
letter-spacing: -0.004rem;
font-weight: 600;
color: #ffffff;
}
.t1_mouse {
font-family: "Inter", sans-serif;
font-size: 0.25rem;
font-weight: 600;
line-height: 0.28rem;
letter-spacing: -0.0018rem;
letter-spacing: -0.0018rem;
text-align: left;
margin-left: 0rem;
}
.t1_dropdown {
font-family: "Inter", sans-serif;
font-size: 0.25rem;
font-weight: 600;
line-height: 0.28rem;
letter-spacing: -0.0018rem;
letter-spacing: -0.0018rem;
text-align: left;
margin-left: 0rem;
color: #ffffff;
}
.t5_medium {
font-family: "Inter", sans-serif;
font-size: 0.22rem;
line-height: 0.26rem;
letter-spacing: -0.004rem;
font-weight: 400;
text-align: left;
margin-left: 0rem;
color: #9893a3;
}
.t2_center {
font-family: "Inter", sans-serif;
font-size: 0.22rem;
line-height: 0.24rem;
letter-spacing: -0.004rem;
font-weight: 400;
text-align: center;
margin-left: 0rem;
color: #9893a3;
}
.t5_small {
font-family: "Inter", sans-serif;
font-size: 0.17rem;
line-height: 0.26rem;
letter-spacing: -0.004rem;
font-weight: 500;
text-align: left;
margin-left: 0rem;
color: #9893a3;
}
.t2_large {
font-size: 1.45rem;
line-height: 1.4rem;
letter-spacing: -0.06rem;
font-weight: 600;
font-family: "Inter", sans-serif;
color: #ffffff;
margin-top: 0.1rem;
text-align: center;
}
.t2_large_second {
font-size: 1.45rem;
line-height: 1.4rem;
letter-spacing: -0.06rem;
font-weight: 600;
font-family: "Inter", sans-serif;
color: #ffffff;
margin-top: 0.1rem;
margin-left: 0.2rem;
text-align: center;
}
.t0, h1 {
font-size: 0.75rem;
line-height: 0.70rem;
letter-spacing: -0.02rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #9893a3;
}
.t1_privacy, h1 {
font-size: 0.75rem;
line-height: 0.70rem;
letter-spacing: -0.02rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.t6_large {
font-size: 0.65rem;
line-height: 0.65rem;
letter-spacing: -0.02rem;
font-weight: 300;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.t9 {
font-size: 0.50rem;
line-height: 0.50rem;
letter-spacing: -0.02rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.t9_none {
font-size: 0.50rem;
line-height: 0.50rem;
letter-spacing: -0.02rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #9893a3;
}
.t11 {
font-size: 0.65rem;
line-height: 0.65rem;
letter-spacing: -0.02rem;
font-weight: 300;
font-family: "Inter", sans-serif;
color: #9893a3;
}
.t8_marquee {
font-size: 0.50rem;
line-height: 0.58rem;
letter-spacing: -0.02rem;
font-weight: 500;
font-family: "Inter", sans-serif;
color: #ffffff;
}
h2 {
font-size: 0.22rem;
line-height: 0.26rem;
letter-spacing: -0.004rem;
font-weight: 400;
color: #ffffff;
font-family: "Inter", sans-serif;
text-shadow: 0 0 4px #000000;
}
.t7_info {
font-size: 0.27rem;
line-height: 0.32rem;
letter-spacing: -0.004rem;
font-weight: 400;
font-family: "Inter", sans-serif;
max-width: 9.5rem;
}
.t1, h4 {
font-size: 0.27rem;
line-height: 0.32rem;
letter-spacing: -0.004rem;
font-weight: 400;
font-family: "Inter", sans-serif;
}
.t3_headline {
font-size: 0.17rem;
line-height: 0.32rem;
letter-spacing: -0.004rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #9893a3;
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 1px;
text-decoration-color: #29282c;
}
.t4_headline {
font-size: 0.17rem;
line-height: 0.32rem;
letter-spacing: -0.004rem;
font-weight: 400;
padding-bottom: 0.4rem;
font-family: "Inter", sans-serif;
color: #9893a3;
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 1px;
text-decoration-color: #29282c;
}
.headline-icon {
width: 0.25rem;
height: 0.25rem;
margin-right: 17px;
}
.hero-title {
padding-top: 1.82rem;
padding-bottom: 0.6rem;
}
hero-title .title {
overflow: hidden;
padding-bottom: 0.082rem;
}
.hero-title .title .flip-anim {
display: inline-block;
position: relative;
color: transparent;
}
.hero-title .title .flip-anim .span-flip {
position: absolute;
width: -moz-max-content;
width: max-content;
top: 0;
left: 0;
color: #ffffff;
}
.hero-title .title .flip-anim .span-flip > div {
padding-bottom: 0.15rem;
margin-bottom: -0.15rem;
padding-right: 0.18rem;
font-weight: 600;
}
.hero-title .title .flip-anim .span-flip .split_chars:last-child::after {
position: absolute;
content: "";
background-size: cover;
width: 0.17rem;
height: 0.17rem;
display: block;
right: -0.18rem;
bottom: 0.06rem;
font-size: 0.17rem;
line-height: 1;
}
.image-slider .big-title, .big-title {
max-width: 8.83rem;
}
.image-slider .big-title.big-content-title, .big-title.big-content-title {
max-width: 7.69rem;
}
.image-slider .big-titles, .big-titles {
display: flex;
justify-content: space-between;
padding-right: 0.05rem;
padding-left: 0.05rem;
padding-bottom: 0.3rem;
padding-top: 0.4rem;
border-bottom: 1px solid #29282c;
border-top: 1px solid #29282c;
}
.image-slider .big-titles .column, .big-titles .column {
display: flex;
flex-direction: column;
}
.image-slider .big-titles .t2_large .split-lines, .big-titles .t2_large .split-lines {
padding-bottom: 0;
margin-bottom: 0;
padding-right: 0.2rem;
margin-right: -0.2rem;
}
.image-slider .container-slider, .container-slider {
cursor: grab;
width: 100%;
max-width: 13.4rem;
margin: auto;
}
.image-slider .title-arrows, .title-arrows {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-bottom: 0.5rem;
padding-top: 0.4rem;
}
.image-slider .splide .splide__track, .splide .splide__track {
overflow: visible;
padding-bottom: 0.4rem;
}
.image-slider .splide .splide__slide, .splide .splide__slide {
width: 4.27rem;
}
.image-slider .splide .splide__slide.work-last video, .splide .splide__slide.work-last video {
opacity: 1 !important;
}
.image-slider .splide .splide__slide.work-last .text-overlay, .splide .splide__slide.work-last {
position: absolute;
left: 0;
bottom: 0;
padding: 0.3rem;
z-index: 1;
color: #0c0c0c;
}
.image-slider .splide .splide__slide.work-last, .splide .splide__slide.work-last {
padding-top: 0.2rem;
}
.image-slider .splide .splide__slide .case-study, .splide .splide__slide .case-study {
display: block;
}
.image-slider .splide .splide__slide .case-study .img-video-wrapper, .splide .splide__slide .case-study .img-video-wrapper {
position: relative;
aspect-ratio: 4/4;
width: 100%;
border-radius: 0.05rem;
overflow: hidden;
}
.image-slider .splide .splide__slide .case-study .img-video-wrapper, .splide .splide__slide .case-study .img-video-wrapper {
aspect-ratio: 1/1;
}
.image-slider .splide .splide__slide .case-study .img-video-wrapper.cat-pill, .splide .splide__slide .case-study .img-video-wrapper.cat-pill {
position: absolute;
left: 0.15rem;
top: 0.15rem;
background: #0c0c0c;
padding: 0.05rem 0.06rem;
border-radius: 0.03rem;
color: #ffffff;
font-size: 0.12rem;
line-height: 0.1283rem;
font-weight: 600;
}
.image-slider .splide .splide__slide .case-study .img-video-wrapper .preview-video, .splide .splide__slide .case-study .img-video-wrapper .preview-video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease-in-out;
display: block;
}
.image-slider .splide .splide__slide .case-study .img-video-wrapper, .splide .splide__slide .case-study .img-video-wrapper {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
transition: opacity 0.3s ease-in-out;
}
.image-slider .splide .splide__slide .case-study.video-parent:hover, .splide .splide__slide .case-study.video-parent:hover {
opacity: 0;
}
.image-slider .splide .splide__slide .case-study:hover .preview-video, .splide .splide__slide .case-study:hover .preview-video {
opacity: 1;
}
.image-slider .splide .splide__slide .case-study .text, .splide .splide__slide .case-study .text {
padding-top: 0.2rem;
}
.image-slider .splide .splide__slide .case-study .text .work-name, .splide .splide__slide .case-study .text .work-name {
font-weight: 700;
}
.image-slider .splide .splide__slide .case-study .text .work-description, .splide .splide__slide .case-study .text .work-description {
margin-top: 0.01rem;
}
.image-slider .splide .splide__slide .case-study.last, .splide .splide__slide .case-study.last {
background: #ffffff;
border-radius: 0.05rem;
}
.image-slider .splide .splide__slide .case-study.last:hover .button-single .circle, .splide .splide__slide .case-study.last:hover .button-single .circle {
transform: scale(1.08);
}
.image-slider .splide .splide__slide .case-study.last:hover .button-single .circle .circle-overlay .splide .splide__slide .case-study.last:hover .button-single .circle .circle-overlay {
transform: scale(1);
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper, .splide .splide__slide .case-study.last .img-video-wrapper {
padding: 0.3rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper {
display: flex;
gap: 0.3rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video {
aspect-ratio: 4/4;
height: 2.4rem;
object-fit: cover;
border-radius: 0.05rem;
flex-shrink: 0;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview {
aspect-ratio: 4/4;
height: 2.4rem;
border-radius: 0.05rem;
flex-shrink: 0;
position: relative;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview .overlay-text, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview .overlay-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview img, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview img {
width: 100%;
height: 100%;
border-radius: 0.05rem;
object-fit: cover;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single, .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single {
color: #0c0c0c;
display: flex;
align-items: center;
justify-content: space-between;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle, .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform-origin: center;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .arrows, .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .arrows {
width: 0.16rem;
height: 0.16rem;
overflow: hidden;
display: flex;
position: relative;
z-index: 2;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .arrows svg, .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .arrows svg {
width: 100%;
height: 100%;
flex-shrink: 0;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg, .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg {
width: 0.16rem;
height: 0.16rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg path, .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg path {
fill: #0c0c0c;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .circle-overlay .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
transform: scale(0);
background: #F5F5F5;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
}
.image-slider .splide .splide__slide.big, .splide .splide__slide.big {
width: 6.55rem;
}
.image-slider .splide .splide__slide.big .case-study .img-video-wrapper, .splide .splide__slide.big .case-study .img-video-wrapper {
aspect-ratio: 4/4;
}
.splide__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.softskill-block {
padding-top: 0.4rem;
padding-bottom: 0.2rem;
}
.softskill-block .single-skill {
display: flex;
justify-content: space-between;
position: relative;
padding-top: 0.1rem;
padding-bottom: 0.2rem;
cursor: pointer;
}
.softskill-block .single-skill:last-child {}
.softskill-block .single-skill .info {
color: #9893a3;
transition: color 0.3s ease-in-out;
}
.softskill-block .single-skill:hover .info {
color: #ffffff;
}
.full-width-image-block {
padding-bottom: 0.4rem;
}
.full-width-image-block img {
width: 100%;
object-fit: cover;
border-radius: 0.05rem;
}
.simple-text-block-label {
padding-top: 0rem;
}
.simple-text-block-label .wrapper {
display: flex;
justify-content: space-between;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
border-bottom: 1px solid #29282c;
}
.simple-text-block-label .wrapper .text {
max-width: 11.83rem;
}
.two-column-content {
padding-bottom: 0.4rem;
}
.two-column-content-last {
padding-bottom: 0.4rem;
padding-top: 0.4rem;
}
.two-column-content .wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.two-column-content-last .wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.two-column-content .wrapper .column {
width: 6.55rem;
}
.two-column-content-last .wrapper .column {
width: 6.55rem;
}
.two-column-content .wrapper .column.no-margin-left .text-wrap {
margin-left: 20px;
max-width: 6.1rem;
margin-bottom: 0.65rem;
}
.two-column-content-last .wrapper .column.no-margin-left .text-wrap {
margin-left: 20px;
max-width: 6.1rem;
margin-bottom: 1.1rem;
}
.two-column-content .wrapper .column img, .two-column-content .wrapper .column video {
width: 100%;
object-fit: cover;
border-radius: 0.05rem;
height: auto;
}
.two-column-content-last .wrapper .column img, .two-column-content-last .wrapper .column video {
width: 100%;
object-fit: cover;
border-radius: 0.05rem;
height: auto;
}
.two-column-content .wrapper .column .text-wrap {
max-width: 5.41rem;
margin-left: auto;
}
.two-column-content-last .wrapper .column .text-wrap {
max-width: 5.41rem;
margin-left: auto;
}
.two-column-content .wrapper .column .text-wrap p {
max-width: 4.26rem;
padding-top: 0.6rem;
}
.two-column-content-last .wrapper .column .text-wrap p {
max-width: 4.26rem;
padding-top: 0.6rem;
}
.big-text {
max-width: 13.4rem;
margin-left: 0.44rem;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
border-bottom: 1px solid #29282c;
border-top: 1px solid #29282c;
}
.big-text-with-headline {
max-width: 13.4rem;
margin-left: 0.44rem;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
border-bottom: 1px solid #29282c;
border-top: 1px solid #29282c;
}
.scroll-down header {
transform: translateY(-100%);
}
.scroll-past-top header {
background: #0c0c0c;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
body:not(.scroll-past-top) header {
transform: translateY(0);
}
header {
padding-top: 0.31rem;
padding-bottom: 0.34rem;
background: #0c0c0c;
position: fixed;
width: 100%;
z-index: 999;
transition: 0.3s ease-in-out;
}
header .container {
display: flex;
justify-content: space-between;
}
header .container .nav-logo {
width: auto;
height: auto;
}
header .container .nav-logo img {
width: 100%;
opacity: 1;
height: auto;
}
header .container .hamburger {
display: none;
}
header .container .main-nav ul {
display: flex;
gap: 0.2rem;
}
header .container .main-nav ul .nav-item .main-nav-link {
position: relative;
}
header .container .main-nav ul .nav-item .main-nav-link span {
font-weight: 600;
letter-spacing: -0.004rem;
font-size: 0.13rem;
}
header .container .main-nav ul .nav-item .main-nav-link:hover span {
color: #ffffff;
}
header .container .main-nav ul .nav-item span {
color: #9893a3;
transition: color 0.3s ease-in-out;
}
header .container .main-nav ul .nav-item .main-nav-link svg {
height: 0.15rem;
position: relative;
top: 4px;
}
.dropdown-menu {
display: none;
opacity: 0;
width: 100%;
height: 100%;
background: #0c0c0c;
position: fixed;
inset: 0;
z-index: 998;
}
footer {
padding-top: 0rem;
padding-bottom: 0.6rem;
}
footer .add-nav ul {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #29282c;
border-top: 1px solid #29282c;
}
footer .add-nav ul .social-network a {
display: block;
padding: 0 0.3rem;
position: relative;
transition: 0.3s ease-in-out color;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
font-weight: 500;
font-size: 0.17rem;
letter-spacing: -0.004rem;
}
footer .add-nav ul .social-network:first-child a {
padding-left: 0;
}
footer .add-nav ul .social-network:first-child a img, footer .add-nav ul .social-network:first-child a video {
left: 0;
transform: translate(0%, 0.5rem);
}
footer .add-nav ul .social-network:last-child a {
padding-right: 0;
}
footer .add-nav ul .social-network:last-child a img, footer .add-nav ul .social-network:last-child a video {
left: unset;
right: 0;
transform: translate(0%, 0.5rem);
}
footer .lower-wrapper {
width: 100%;
margin-bottom: -0.2rem;
margin-top: 0.5rem;
}
footer .lower-wrapper img {
cursor: pointer;
width: 100%;
}
footer .lower-wrapper-privacy {
width: 100%;
margin-bottom: -0.2rem;
margin-top: 0.5rem;
}
footer .lower-wrapper-privacy img {
cursor: pointer;
width: 100%;
}
.mouse-frame {
pointer-events: none;
display: block;
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.mouse-frame .mouse-follower {
position: absolute;
transform: translate(-1rem, -1rem);
top: 0;
left: 0;
}
.mouse-frame .mouse-follower .mouse {
position: relative;
}
.mouse-frame .mouse-follower .mouse-video {
width: 1.6rem;
height: 1.6rem;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
background: #ffffff;
opacity: 0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #0c0c0c;
font-weight: 600;
}
.mouse-frame .mouse-follower .clicker, .mouse-frame .mouse-follower .copy-overlay {
padding: 0.11rem 0.2rem;
background: #ffffff;
width: -moz-max-content;
width: max-content;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -120%);
border-radius: 0.06rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out;
z-index: 99;
}
.mouse-frame .mouse-follower .clicker span, .mouse-frame .mouse-follower .copy-overlay span {
color: #0c0c0c;
}
.mouse-frame .mouse-follower .mouse-slider {
padding: 0.11rem 0.2rem;
background: #ffffff;
width: -moz-max-content;
width: max-content;
position: absolute;
transform: translate(0.2rem, -0.4rem);
border-radius: 0.06rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out;
z-index: 99;
}
.mouse-frame .mouse-follower .mouse-slider span {
color: #0c0c0c;
}
.mouse-frame.active .mouse-video {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1);
}
.mouse-frame.active-slider .mouse-slider {
opacity: 1;
visibility: visible;
font-weight: 500;
}
.mouse-frame.active-copy .clicker {
opacity: 1;
visibility: visible;
}
/**
* BODY & HTML
**/
body {
font-size: 0.2rem;
line-height: 0.24rem;
font-weight: 400;
overflow-x: hidden;
position: relative;
display: block;
color: #9893a3;
background: #0c0c0c;
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
}
html {
font-size: 6.944vw;
}
html.overflow-hidden {
overflow: hidden;
}
.container {
width: 100%;
max-width: 13.4rem;
margin: auto;
}
/**
* SWUP TRANSITION
**/
[data-fade-reveal] {
will-change: transform;
}
.pages {
position: relative;
display: grid;
width: 100%;
min-height: 100vh;
}
.page {
min-width: 0;
position: relative;
grid-row: 1;
grid-column: 1;
background: #0c0c0c;
z-index: 2;
}
.page + .page {
z-index: 1;
}
html.is-changing .transition-slide {
transition: transform 1s cubic-bezier(0.44, 0, 0.28, 0.99);
}
.transition-slide.is-next-container {
transform: translate3d(0, 100vh, 0);
}
/**
* STYLE FOR LENIS SMOOTH SCROLL
**/
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
.split-lines {
overflow: hidden;
padding-bottom: 0.15em;
margin-bottom: -0.15em;
}
[data-scrub-title-reveal] .split-lines div {
transform: translateY(100%);
}
/**
* GLOBAL CLASSES
**/
.relative {
position: relative;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.overflow-hidden {
overflow: hidden;
}
[data-line-reveal-flip], [video-reveal-anim], [data-fade-reveal] {
opacity: 0;
}
[data-line-reveal-flip].inited, [video-reveal-anim].inited, [data-fade-reveal].inited {
opacity: 1;
}
.splide__container {
box-sizing: border-box;
position: relative;
}
.splide__list {
backface-visibility: hidden;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block;
}
.splide__pagination {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
pointer-events: none;
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
display: none;
}
.splide__progress__bar {
width: 0;
}
.splide {
position: relative;
visibility: hidden;
}
.splide.is-initialized, .splide.is-rendered {
visibility: visible;
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative;
}
.splide__slide img {
vertical-align: bottom;
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid #999;
border-left-color: transparent;
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
}
.splide__sr {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline;
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0;
}
@keyframes splide-loading {
0% {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
opacity: 1;
z-index: 1;
}
.splide--rtl {
direction: rtl;
}
.splide__track--ttb > .splide__list {
display: block;
}
.splide__arrow {
align-items: center;
background: #ccc;
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
height: 2em;
justify-content: center;
opacity: 0.7;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2em;
z-index: 1;
}
.splide__arrow svg {
fill: #000;
height: 1.2em;
width: 1.2em;
}
.splide__arrow:hover:not(:disabled) {
opacity: 0.9;
}
.splide__arrow:disabled {
opacity: 0.3;
}
.splide__arrow:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__arrow--prev {
left: 1em;
}
.splide__arrow--prev svg {
transform: scaleX(-1);
}
.splide__arrow--next {
right: 1em;
}
.splide.is-focus-in .splide__arrow:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__pagination {
bottom: 0.5em;
left: 0;
padding: 0 1em;
position: absolute;
right: 0;
z-index: 1;
}
.splide__pagination__page {
background: #ccc;
border: 0;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 3px;
opacity: 0.7;
padding: 0;
position: relative;
transition: transform 0.2s linear;
width: 8px;
}
.splide__pagination__page.is-active {
background: #fff;
transform: scale(1.4);
z-index: 1;
}
.splide__pagination__page:hover {
cursor: pointer;
opacity: 0.9;
}
.splide__pagination__page:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide.is-focus-in .splide__pagination__page:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__progress__bar {
background: #ccc;
height: 3px;
}
.splide__slide {
-webkit-tap-highlight-color: #0c0c0c;
}
.splide__slide:focus {
outline: 0;
}
@supports (outline-offset: -3px) {
.splide__slide:focus-visible {
outline: 3px solid #0bf;
outline-offset: -3px;
}
}
@supports (outline-offset: -3px) {
.splide.is-focus-in .splide__slide:focus {
outline: 3px solid #0bf;
outline-offset: -3px;
}
}
.splide__toggle {
cursor: pointer;
}
.splide__toggle:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide.is-focus-in .splide__toggle:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__track--nav > .splide__list > .splide__slide {
border: 3px solid transparent;
cursor: pointer;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
border: 3px solid #000;
}
.splide__arrows--rtl .splide__arrow--prev {
left: auto;
right: 1em;
}
.splide__arrows--rtl .splide__arrow--prev svg {
transform: scaleX(1);
}
.splide__arrows--rtl .splide__arrow--next {
left: 1em;
right: auto;
}
.splide__arrows--rtl .splide__arrow--next svg {
transform: scaleX(-1);
}
.splide__arrows--ttb .splide__arrow {
left: 50%;
transform: translate(-50%);
}
.splide__arrows--ttb .splide__arrow--prev {
top: 1em;
}
.splide__arrows--ttb .splide__arrow--prev svg {
transform: rotate(-90deg);
}
.splide__arrows--ttb .splide__arrow--next {
bottom: 1em;
top: auto;
}
.splide__arrows--ttb .splide__arrow--next svg {
transform: rotate(90deg);
}
.splide__pagination--ttb {
bottom: 0;
display: flex;
flex-direction: column;
left: auto;
padding: 1em 0;
right: 0.5em;
top: 0;
}
@media screen and (hover: hover) {
footer .add-nav ul:hover .social-network a {
color: #3c3a40;
}
}
@media screen and (hover: hover) and (min-width: 768px) {
footer .add-nav ul .social-network a:hover {
color: #ffffff;
}
}
/*!********************************************************************************************************************************************************!*\
!*** @media screen and (max-width: 768px)
\********************************************************************************************************************************************************/
@media screen and (max-width: 768px) {
.mouse-frame.active-slider .mouse-slider {
visibility: hidden;
}
.mouse-frame {
display: none;
}
.preloader .preload-svg {
position: relative;
transform: translate3d(41%, calc(50dvh - 58%), 0px);
overflow: hidden;
}
.t1, h4 {
font-family: "Inter", sans-serif;
font-size: 0.19rem;
line-height: 0.24rem;
letter-spacing: -0.0032rem;
font-weight: 400;
}
.t1_dropdown {
font-family: "Inter", sans-serif;
font-size: 0.25rem;
font-weight: 600;
line-height: 0.28rem;
letter-spacing: -0.0018rem;
letter-spacing: -0.0018rem;
text-align: left;
margin-left: 0rem;
color: #ffffff;
}
.t5_small {
font-family: "Inter", sans-serif;
font-size: 0.13rem;
line-height: 0.22rem;
letter-spacing: -0.004rem;
font-weight: 500;
text-align: left;
margin-left: 0rem;
color: #9893a3;
}
.t2_center {
font-family: "Inter", sans-serif;
font-size: 0.16rem;
line-height: 0.20rem;
letter-spacing: -0.004rem;
font-weight: 400;
text-align: center;
margin-left: 0rem;
color: #9893a3;
}
.t5_medium {
font-size: 0.16rem;
line-height: 0.22rem;
letter-spacing: -0.004rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #9893a3;
}
.t2_large {
font-size: 0.66rem;
line-height: 0.75rem;
letter-spacing: -0.02rem;
margin-top: -0.0002rem;
margin-left: -0.01rem;
text-align: center;
font-weight: 600;
}
.t2_large_second {
font-size: 0.66rem;
line-height: 0.75rem;
letter-spacing: -0.02rem;
margin-top: -0.0002rem;
margin-left: -0.01rem;
text-align: center;
font-weight: 600;
margin-left: 0.1rem;
}
.t3_headline {
font-size: 0.13rem;
line-height: 0.22rem;
letter-spacing: -0.004rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #9893a3;
padding-top: 0.1rem;
padding-bottom: 0.05rem;
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 1px;
text-decoration-color: #29282c;
}
.t4_headline {
font-size: 0.13rem;
line-height: 0.22rem;
letter-spacing: -0.004rem;
font-weight: 400;
padding-bottom: 0.2rem;
font-family: "Inter", sans-serif;
color: #9893a3;
padding-top: 0.1rem;
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 1px;
text-decoration-color: #29282c;
}
.t5_large {
font-size: 0.19rem;
line-height: 0.22rem;
letter-spacing: -0.005rem;
font-weight: 600;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.t6_large {
font-size: 0.40rem;
line-height: 0.42rem;
letter-spacing: -0.008rem;
font-weight: 300;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.t9 {
font-size: 0.35rem;
line-height: 0.38rem;
letter-spacing: -0.008rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.t9_none {
font-size: 0.35rem;
line-height: 0.38rem;
letter-spacing: -0.008rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #9893a3;
}
.t11 {
font-size: 0.40rem;
line-height: 0.42rem;
letter-spacing: -0.008rem;
font-weight: 300;
font-family: "Inter", sans-serif;
color: #9893a3;
}
.t7_info {
font-family: "Inter", sans-serif;
font-size: 0.19rem;
line-height: 0.24rem;
letter-spacing: -0.0032rem;
font-weight: 400;
}
.t10 {
font-size: 0.19rem;
line-height: 0.20rem;
letter-spacing: -0.004rem;
font-weight: 600;
font-family: "Inter", sans-serif;
color: #ffffff;
}
html {
font-size: 25.641vw;
overflow-x: hidden;
}
header {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
header .container {
align-items: center;
}
header .container .nav-logo {
width: 300px;
}
header .container .hamburger {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
display: block;
position: relative;
top: -0.02rem;
cursor: pointer;
padding: 0.12rem;
margin: -0.12rem 0;
margin-right: -0.12rem;
}
header .container .hamburger .hamburger-wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
width: 0.25rem;
height: 0.09rem;
margin: auto 0;
}
header .container .hamburger span {
display: block;
height: 0.02rem;
width: 100%;
background-color: #ffffff;
transition: 0.2s ease-out transform;
}
header .container .hamburger.close span:first-child {
transform: rotateZ(45deg) translate(0.02rem, 0.03rem);
}
header .container .hamburger.close span:last-child {
transform: rotateZ(-45deg) translate(0.02rem, -0.03rem);
}
header .container .main-nav {
display: none;
}
.dropdown-menu .container {
height: 100%;
justify-content: space-between;
display: flex;
flex-direction: column;
}
.dropdown-menu .main-nav {
padding-top: 1.37rem;
padding-left: 0rem;
}
.dropdown-menu .main-nav .nav-item .main-nav-link span {
line-height: 0.60rem;
font-weight: 600;
letter-spacing: -0.004rem;
font-size: 0.60rem;
font-family: "Inter", sans-serif;
}
.dropdown-menu .main-nav .nav-item .main-nav-link-imprint span {
line-height: 0.42rem;
font-weight: 500;
letter-spacing: -0.008rem;
font-size: 0.40rem;
font-family: "Inter", sans-serif;
}
.dropdown-menu .lower-wrapper {
padding-bottom: 0.2rem;
padding-top: 0.2rem;
width: auto;
height: auto;
position: relative;
display: block;
}
.container {
padding-left: 0.149rem;
padding-right: 0.149rem;
}
.hero-title {
padding-top: 1.4rem;
padding-bottom: 0.2rem;
}
.hero-title .title .flip-anim {
min-width: 1.4rem;
}
.hero-title .title .flip-anim .span-flip .split_chars:last-child::after {
width: 0.1rem;
height: 0.1rem;
right: -0.12rem;
bottom: 0.05rem;
}
.hero-title .title .flip-anim .span-flip > div {
font-weight: 600;
}
.hero-title .title .t0 {
font-size: 0.60rem;
line-height: 0.55rem;
letter-spacing: -0.02rem;
font-weight: 350;
font-family: "Inter", sans-serif;
}
.two-column-content {
padding-bottom: 0rem;
}
.two-column-content .wrapper {
flex-direction: column;
}
.two-column-content .wrapper .column {
width: 100%;
}
.two-column-content .wrapper .column .text-wrap {
}
.two-column-content .wrapper .column .text-wrap p {
padding-top: 0.2rem;
}
.two-column-content .wrapper .column.first {
padding-bottom: 0.2rem;
padding-top: 0.2rem;
}
.two-column-content .wrapper .column.no-margin-left .text-wrap {
margin-left: 0px;
margin-bottom: 0.2rem;
}
.image-slider .splide .splide__slide .case-study .img-video-wrapper .preview-video, .splide .splide__slide .case-study .img-video-wrapper .preview-video {
opacity: 1;
}
.image-slider .title-arrows, .title-arrows {
padding-bottom: 0.2rem;
padding-top: 0.2rem;
}
.image-slider .splide .splide__slide .case-study .img-video-wrapper .preview-video, .splide .splide__slide .case-study .img-video-wrapper .preview-video {
opacity: 1;
}
.image-slider .splide .splide__slide.big, .splide .splide__slide.big {
width: 2.98rem;
}
.image-slider .title-arrows, .title-arrows {
padding-bottom: 0.2rem;
padding-top: 0.1rem;
}
.image-slider .splide .splide__slide, .splide .splide__slide {
width: 2.98rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper, .splide .splide__slide .case-study.last .img-video-wrapper {
padding: 0.15rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper {
gap: 0.15rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video {
height: 1.8rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview {
height: 1.8rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle, .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle {
width: 0.4rem;
height: 0.4rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg, .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg {
width: 0.18rem;
height: 0.18rem;
}
.image-slider .big-titles, .big-titles {
padding-bottom: 0.1rem;
padding-top: 0.2rem;
padding-right: 0.03rem;
padding-left: 0.03rem;
}
.image-slider .container-slider, .container-slider {
padding-left: 0.1489rem;
padding-right: 0.1489rem;
}
.image-slider .splide .splide__track, .splide .splide__track {
overflow: visible;
padding-bottom: 0.2rem;
}
.image-slider .splide .splide__slide, .splide .splide__slide {
width: 2.98rem;
}
.image-slider .splide .splide__slide .case-study .text, .splide .splide__slide .case-study .text {
padding-top: 0.1rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper, .splide .splide__slide .case-study.last .img-video-wrapper {
padding: 0.15rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper {
gap: 0.15rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video {
height: 1.8rem;
}
.image-slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview, .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview {
height: 1.8rem;
}
.big-text {
max-width: 3.5rem;
margin-left: 0.15rem;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
}
.big-text .container {
padding-left: 0rem;
padding-top: 0rem;
}
.big-text-with-headline {
max-width: 3.5rem;
margin-left: 0.15rem;
padding-bottom: 0.2rem;
padding-top: 0.1rem;
}
.big-text-with-headline .container {
padding-left: 0rem;
padding-top: 0rem;
padding-right: 0rem;
}
.simple-text-block-label {
padding-top: 0.1rem;
}
.simple-text-block-label .wrapper {
flex-direction: column;
padding-bottom: 0.2rem;
padding-top: 0rem;
border-bottom: 1px solid #29282c;
}
.simple-text-block-label .wrapper .label {
padding-bottom: 0rem;
}
.softskill-block {
padding-top: 0.1rem;
padding-bottom: 0rem;
}
.softskill-block .container {
padding-bottom: 0rem;
}
.softskill-block .single-skill {
display: block;
justify-content: space-between;
position: relative;
padding-top: 0rem;
padding-bottom: 0.2rem;
cursor: pointer;
}
.softskill-block .single-skill .label {
padding-bottom: 0.1rem;
}
.softskill-block .single-skill:last-child {}
.softskill-block .single-skill .info {
color: #9893a3;
transition: color 0.3s ease-in-out;
}
.softskill-block .single-skill:hover .info {
color: #ffffff;
}
.two-column-content-last {
padding-bottom: 0rem;
padding-top: 0rem;
}
.two-column-content-last .wrapper {
flex-direction: column;
}
.two-column-content-last .wrapper .column {
width: 100%;
}
.two-column-content-last .wrapper .column .text-wrap {
}
.two-column-content-last .wrapper .column .text-wrap p {
padding-top: 0.2rem;
}
.two-column-content-last .wrapper .column.first {
padding-bottom: 0.2rem;
padding-top: 0.2rem;
}
.two-column-content-last .wrapper .column.no-margin-left .text-wrap {
margin-left: 0px;
margin-bottom: 0.2rem;
}
footer .mobile_layout_shifter {
display: flex;
flex-direction: column-reverse;
padding-top: 0rem;
padding-bottom: 0rem;
}
footer {
padding-top: 0rem;
padding-bottom: 0rem;
}
footer .lower-wrapper {
padding-bottom: 0.1rem;
padding-top: 0.2rem;
border-top: 1px solid #29282c;
margin: 0rem;
}
footer .lower-wrapper-privacy {
padding-bottom: 0.1rem;
padding-top: 0.2rem;
margin: 0rem;
}
footer .add-nav {
display: none;
}
.heart {
fill: #fa243d;
width: 0.38rem;
height: 0.42rem;
padding-top: 0.11rem;
margin-bottom: -0.045rem;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
10% {
transform: scale(1.05);
}
20% {
transform: scale(1.1);
}
}
.headline-icon {
width: 0.18rem;
height: 0.18rem;
margin-right: 13px;
}
:root {
--size: 0px;
--gap: 0px;
--duration: 10s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}
.marquee-group {
flex-shrink: 0;
padding-top: 0rem;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}
.marquee .t8_marquee { margin-left: 10px; }
.t8_marquee {
font-size: 0.35rem;
line-height: 0.41rem;
letter-spacing: -0.008rem;
font-weight: 500;
font-family: "Inter", sans-serif;
color: #ffc3a6;
}
.full-width-image-block {
padding-bottom: 0.2rem;
}
.full-width-image-block img {
width: 100%;
object-fit: cover;
border-radius: 0.05rem;
aspect-ratio: 3 / 2;
}
.hero-title .title .t1_privacy {
font-size: 0.60rem;
line-height: 0.55rem;
letter-spacing: -0.02rem;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #ffffff;
}
.text-block-privacy {
padding-top: 0.1rem;
}
.text-block-privacy .wrapper {
flex-direction: column;
padding-bottom: 0.2rem;
padding-top: 0.1rem;
border-bottom: 1px solid #29282c;
}
.text-block-privacy .wrapper .label {
padding-bottom: 0rem;
}
.t2_privacy {
font-family: "Inter", sans-serif;
font-size: 0.16rem;
color: #ffffff;
line-height: 0.22rem;
letter-spacing: -0.0032rem;
font-weight: 400;
}
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}