.home-banner { width: 100%; margin: 0; padding: 0; background: #fff; box-sizing: border-box; } .home-banner-inner { width: 100%; max-width: 1780px; margin: 0 auto; line-height: 0; background: #fff; overflow: hidden; } .home-banner-media { display: block; width: 100%; max-width: 100%; height: auto; border: 0; outline: none; vertical-align: top; background: #fff; object-fit: cover; aspect-ratio: 5 / 3; max-height: 1068px; } @media all and (max-width: 767px) { .home-banner-inner { max-width: 100%; } .home-banner-media { aspect-ratio: 112 / 83; max-height: none; } } .home-banner.is-mobile .home-banner-media { aspect-ratio: 112 / 83; max-height: none; } .contact-information, .contact-information * { box-sizing: border-box; background:#7AABBD; } .contact-information { position: relative; width: 100%; margin: 0; padding: 220px 0 120px; } .contact-information-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 1320px; margin: 0 auto; } .contact-information-title { display: block; width: auto; max-width: 100%; height: auto; } .contact-information-split { display: flex; align-items: flex-start; align-self: stretch; gap: 24px; width: 100%; max-width: 1320px; } .contact-information-address { padding-top: 24px; } .contact-information-address, .contact-information-art { flex: 1 1 0; width: 50%; min-width: 0; } .contact-information-address, .contact-information-links a { margin: 0; color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 130%; text-decoration: none; transition: color 0.25s ease; } .contact-information-links a:hover { color: #F26322; } .contact-information-links { display: flex; gap: 8px; flex-direction: column; align-items: flex-start; } .contact-information-art { display: flex; justify-content: flex-start; align-items: flex-start; } .contact-information-art img { display: block; width: auto; max-width: 100%; height: auto; } .contact-information-bar { display: flex; align-items: flex-end; justify-content: space-between; align-self: stretch; gap: 24px; width: 100%; } .contact-information-social { display: flex; align-items: flex-end; gap: 15px; margin: 0; padding: 0; list-style: none; } .contact-information-social a { position: relative; display: block; width: 47px; height: 47px; line-height: 0; transition: transform 0.25s ease; } .contact-information-social a:hover, .contact-information-social a:focus { transform: translateY(-2px); } .contact-information-social a:hover .social-default, .contact-information-social a:focus .social-default { opacity: 0; } .contact-information-social a:hover .social-hover, .contact-information-social a:focus .social-hover { opacity: 1; } .contact-information-social img { display: block; width: 47px; height: 47px; } .contact-information-social .social-default, .contact-information-social .social-hover { position: absolute; top: 0; left: 0; } .contact-information-social .social-default { opacity: 1; } .contact-information-social .social-hover { opacity: 0; } .contact-information-title { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .contact-information-split, .contact-information-bar { opacity: 0; transition: opacity 0.9s ease; } .contact-information.is-inview .contact-information-title { opacity: 1; transform: none; } .contact-information.is-inview .contact-information-split { opacity: 1; transition-delay: 0.45s; } .contact-information.is-inview .contact-information-bar { opacity: 1; transition-delay: 0.95s; } @media all and (max-width: 1200px) { .contact-information { padding: 120px 16px 60px; } .contact-information-inner, .contact-information-split { max-width: 100%; } .contact-information-split, .contact-information-bar { flex-direction: column; align-items: flex-start; } .contact-information-address, .contact-information-art { flex-basis: auto; width: 100%; } .contact-information-art { justify-content: flex-end; } .contact-information-social a, .contact-information-social img { width: 47px; height: 47px; } } @media all and (max-width: 767px) { .contact-information-address, .contact-information-links a { color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; } .contact-information-art img { width: 233px; height: 160px; aspect-ratio: 150 / 103; } } .contact-map, .contact-map * { box-sizing: border-box; } .contact-map { width: 100%; margin: 0; padding: 120px 0; opacity: 0; transition: opacity 1s ease; } .contact-map.is-inview { opacity: 1; } .contact-map-inner { display: flex; width: 100%; max-width: 1320px; margin: 0 auto; } .contact-map-frame { display: block; width: 100%; height: 440px; flex: 1 0 0; aspect-ratio: 3 / 1; border: 0; } @media all and (max-width: 1200px) { .contact-map { padding: 60px 16px 20px; } .contact-map-inner { max-width: 100%; } .contact-map-frame { height: 240px; flex: 1 0 0; align-self: stretch; aspect-ratio: auto; } } @media (prefers-reduced-motion: reduce) { .contact-information-title, .contact-information-split, .contact-information-bar, .contact-map { opacity: 1; transform: none; transition: none; } } .about-banner, .about-banner * { box-sizing: border-box; } .about-banner { position: relative; width: 100%; margin: 0; padding: 220px 0 120px; background: #F26322; } .about-banner-inner { display: flex; flex-direction: column; align-items: stretch; gap: 300px; width: 100%; max-width: 1320px; margin: 0 auto; } .about-banner-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; width: 100%; } .about-banner-title { display: block; width: auto; max-width: 100%; height: auto; } .about-banner-desc { margin: 0; color: #1E2125; text-align: right; font-family: Prompt, sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 130%; } .about-banner-art { display: block; align-self: flex-end; width: 648px; height: 230px; max-width: 100%; } @media all and (max-width: 1200px) { .about-banner { padding: 120px 16px 60px; } .about-banner-inner { gap: 100px; max-width: 100%; } .about-banner-top { flex-direction: column; align-items: stretch; gap: 24px; } .about-banner-desc { font-size: 16px; } .about-banner-art { width: 171px; height: 60px; aspect-ratio: 57 / 20; } } .about-our-experts, .about-our-experts * { box-sizing: border-box; } .about-our-experts { display: flex; width: 100%; padding: 120px 0; flex-direction: column; justify-content: center; align-items: center; gap: 60px; } .about-our-experts-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; @media all and (max-width: 1200px) { gap: 16px; } } .about-our-experts-title { display: block; width: 872px; height: 356px; max-width: 100%; } .about-our-experts-lead, .about-our-experts-name, .about-our-experts-role { margin: 0; } .about-our-experts-lead-break { display: none; } .about-our-experts-lead { color: #1E2125; text-align: center; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } .about-our-experts-founders, .about-our-experts-operations { display: flex; align-items: flex-start; gap: 40px; } .about-our-experts-founders { width: 1096px; max-width: 100%; } .about-our-experts-operations { width: 872px; max-width: 100%; } .about-our-experts-members { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: flex-start; gap: 40px 60px; align-self: center; width: 100%; max-width: 1320px; margin-right: auto; margin-left: auto; } .about-our-experts-card { display: flex; flex-direction: column; align-items: center; align-self: stretch; min-width: 0; } .about-our-experts-founders .about-our-experts-card, .about-our-experts-operations .about-our-experts-card { flex: 1 1 0; } .about-our-experts-members .about-our-experts-card { flex: 0 0 calc((100% - 120px) / 3); width: calc((100% - 120px) / 3); } .about-our-experts-photo { display: block; width: 100%; height: auto; object-fit: cover; } .about-our-experts-founders .about-our-experts-photo { aspect-ratio: 247 / 294; } .about-our-experts-operations .about-our-experts-photo, .about-our-experts-members .about-our-experts-photo { aspect-ratio: 29 / 34; } .about-our-experts-body { display: flex; padding: 0 50px; flex-direction: column; align-items: flex-start; gap: 4px; align-self: stretch; } .about-our-experts-name { color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; } .about-our-experts-role { color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; } @media all and (max-width: 1200px) { .about-our-experts { padding: 60px 16px; gap: 40px; align-self: stretch; } .about-our-experts-title { width: 358px; height: 146px; aspect-ratio: 179 / 73; } .about-our-experts-lead { font-size: 20px; } .about-our-experts-lead-break { display: block; } .about-our-experts-lead-space { display: none; } .about-our-experts-operations { width: 100%; align-self: stretch; } .about-our-experts-members { gap: 16px 0; } .about-our-experts-members .about-our-experts-card { flex-basis: 50%; width: 50%; } .about-our-experts-name { font-size: 20px; } .about-our-experts-body { padding: 0 32px; } } @media all and (max-width: 1200px) and (min-width: 768px) { .about-our-experts-founders { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 40px; align-self: stretch; width: 100%; } .about-our-experts-founders .about-our-experts-card { flex: 1 1 0; width: calc((100% - 40px) / 2); max-width: calc((100% - 40px) / 2); } .about-our-experts-founders .about-our-experts-photo, .about-our-experts-operations .about-our-experts-photo, .about-our-experts-members .about-our-experts-photo { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; } } @media all and (max-width: 767px) { .about-our-experts-founders { flex-direction: column; align-items: flex-start; gap: 24px; align-self: stretch; width: 100%; } .about-our-experts-members .about-our-experts-photo { height: 210px; aspect-ratio: auto; object-fit: cover; } } .about-banner-top, .about-our-experts-head { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .about-banner-top.is-inview, .about-our-experts-head.is-inview { opacity: 1; transform: none; } .about-banner-art, .about-our-experts-card { opacity: 0; transition: opacity 0.9s ease; } .about-banner-art { transition: opacity 1.2s ease; } .about-banner-art.is-inview, .about-our-experts-card.is-inview { opacity: 1; } .about-banner-art.is-inview { transition-delay: 0.55s; } .about-our-experts-founders.is-inview .about-our-experts-card, .about-our-experts-operations.is-inview .about-our-experts-card { opacity: 1; } .about-our-experts-founders.is-inview .about-our-experts-card:nth-child(2), .about-our-experts-operations.is-inview .about-our-experts-card:nth-child(2) { transition-delay: 0.35s; } .about-our-experts-card { cursor: default; } .about-our-experts-card:hover .about-our-experts-photo { animation: about-expert-shake 0.4s ease; } @keyframes about-expert-shake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-1.5deg); } 40% { transform: rotate(1.5deg); } 60% { transform: rotate(-0.8deg); } 80% { transform: rotate(0.8deg); } } @media (prefers-reduced-motion: reduce) { .about-banner-top, .about-banner-art, .about-our-experts-head, .about-our-experts-card { opacity: 1; transform: none; transition: none; } .about-our-experts-card:hover .about-our-experts-photo { animation: none; } } .youtube-get-to-know-us, .youtube-get-to-know-us * { box-sizing: border-box; } .youtube-get-to-know-us { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 220px 0 120px; gap: 120px; background: #1E2125; } .youtube-get-to-know-us-head { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: 1320px; } .youtube-get-to-know-us-title { display: block; width: auto; max-width: calc(100% - 174px); height: auto; } .youtube-get-to-know-us-star { display: block; flex-shrink: 0; width: 150px; height: 142px; aspect-ratio: 75 / 71; object-fit: contain; } .youtube-get-to-know-us-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 60px; width: 100%; max-width: 1320px; } .youtube-get-to-know-us-card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; color: inherit; text-decoration: none; } .youtube-get-to-know-us-photo { display: block; width: 100%; height: 354px; flex-shrink: 0; align-self: stretch; aspect-ratio: 105 / 59; object-fit: cover; } .youtube-get-to-know-us-caption { margin: 0; color: #FFF; font-family: Prompt, sans-serif; font-size: 24px; font-style: normal; font-weight: 500; line-height: 130%; } @media all and (max-width: 1200px) { .youtube-get-to-know-us { padding: 120px 16px 60px; gap: 60px; } .youtube-get-to-know-us-caption { font-size: 20px; } .youtube-get-to-know-us-title { max-width: calc(100% - 56px); } .youtube-get-to-know-us-star { width: 40px; height: 38px; aspect-ratio: 20 / 19; } .youtube-get-to-know-us-grid { grid-template-rows: none; grid-auto-flow: row; gap: 24px; } .youtube-get-to-know-us-photo { height: auto; } } @media all and (max-width: 767px) { .youtube-get-to-know-us-caption { font-size: 16px; } .youtube-get-to-know-us-photo { height: auto; } .youtube-get-to-know-us-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 12px; } } .youtube-get-to-know-us-head { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .youtube-get-to-know-us-head.is-inview { opacity: 1; transform: none; } .youtube-get-to-know-us-card { opacity: 0; transition: opacity 0.9s ease; } .youtube-get-to-know-us-card.is-inview { opacity: 1; } @media (prefers-reduced-motion: reduce) { .youtube-get-to-know-us-head, .youtube-get-to-know-us-card { opacity: 1; transform: none; transition: none; } } .youtube-case-study, .youtube-case-study * { box-sizing: border-box; } .youtube-case-study { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 120px 0 80px 0; gap: 80px; background: #fff; } .youtube-case-study > .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0; } .youtube-case-study > .container:first-child { display: flex; justify-content: flex-start; } .youtube-case-study > .container + .container { display: flex; flex-direction: column; align-items: stretch; } .youtube-case-study > .container + .container > p { margin: 0; } .youtube-case-study-image + .youtube-case-study-image, .youtube-case-study > .container + .container > * + * { margin-top: 60px; } .youtube-case-study-title { display: block; width: 984px; height: 198px; max-width: 100%; object-fit: contain; opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .youtube-case-study-title.is-inview { opacity: 1; transform: none; } .youtube-case-study-link { display: block; width: 100%; line-height: 0; text-decoration: none; opacity: 0; transition: opacity 0.8s ease-out; } .youtube-case-study-link.is-inview { opacity: 1; } .youtube-case-study-image { display: block; width: 100%; height: auto; align-self: stretch; aspect-ratio: 55 / 31; object-fit: contain; } @media all and (min-width: 1352px) { .youtube-case-study-image { height: 744px; } } @media all and (max-width: 1200px) { .youtube-case-study { padding: 60px 16px 20px; gap: 40px; } .youtube-case-study-image + .youtube-case-study-image, .youtube-case-study > .container + .container > * + * { margin-top: 40px; } .youtube-case-study-title { width: 358px; height: 72px; } .youtube-case-study-image { height: auto; aspect-ratio: 55 / 31; } } @media (prefers-reduced-motion: reduce) { .youtube-case-study-title, .youtube-case-study-link { opacity: 1; transform: none; transition: none; } } .home-numbering, .home-numbering * { box-sizing: border-box; } .home-numbering { display: flex; justify-content: center; width: 100%; margin: 0; padding: 120px 0; background: #F26322; } .home-numbering-list { display: grid; grid-template-columns: max-content max-content; column-gap: 80px; row-gap: 0; align-items: flex-end; width: max-content; max-width: 100%; margin: 0 auto; } .home-numbering-item { display: contents; } .home-numbering-value, .home-numbering-label { margin: 0; color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-style: normal; } .home-numbering-value { justify-self: end; text-align: right; font-size: 140px; font-weight: 700; line-height: 100%; } .home-numbering-value-light { justify-self: end; text-align: right; font-size: 140px; font-weight: 400; line-height: 100%; margin-bottom: 0; } .home-numbering-label { justify-self: start; text-align: left; text-transform: uppercase; font-size: 48px; font-weight: 500; line-height: 110%; } @media all and (max-width: 1200px) { .home-numbering { justify-content: flex-start; padding: 60px 48px; } .home-numbering-list { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; margin: 0; } .home-numbering-value { font-size: 72px; margin-bottom: 0; } .home-numbering-value-light { font-size: 72px; margin-bottom: 0; } .home-numbering-label { font-size: 32px; } } @media all and (max-width: 767px) { .home-numbering { justify-content: center; padding: 60px 16px; } .home-numbering-list { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: fit-content; margin: 0; } .home-numbering-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .home-numbering-value { font-size: 64px; margin-bottom: 0; } .home-numbering-value-light { font-size: 64px; margin-bottom: 0; } .home-numbering-label { font-size: 24px; } } .home-strategic-design, .home-strategic-design * { box-sizing: border-box; } .home-strategic-design { width: 100%; margin: 0; padding: 120px 0 80px; background: #fff; } .home-strategic-design-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; width: 100%; max-width: 1320px; margin: 0 auto; } .home-strategic-design-title { display: block; flex: 0 0 auto; width: 590.04px; height: 322.527px; max-width: 100%; aspect-ratio: 590.04 / 322.527; } .home-strategic-design-desc { margin: 0; color: #1E2125; text-align: right; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } @media all and (min-width: 768px) and (max-width: 1199px) { .home-strategic-design { padding: 60px 48px 40px; } .home-strategic-design-title { width: 458.01px; height: 250.32px; } .home-strategic-design-desc { text-align: left; font-size: 24px; } } @media all and (max-width: 767px) { .home-strategic-design { padding: 60px 16px 40px; } .home-strategic-design-inner { flex-direction: column; align-items: flex-start; gap: 24px; } .home-strategic-design-title { width: 325.979px; height: 178.286px; } .home-strategic-design-desc { text-align: left; font-size: 20px; } } .home-strategic-design-inner { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .home-strategic-design-inner.is-inview { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .home-strategic-design-inner { opacity: 1; transform: none; transition: none; } } .home-discover-our, .home-discover-our * { box-sizing: border-box; } .home-discover-our { width: 100%; max-width: 100%; padding: 60px 0; overflow: hidden; background: #7AABBD; } .home-discover-our-track { display: flex; width: max-content; animation: home-discover-our-run 60s linear infinite; } .home-discover-our-text { margin: 0; padding-right: 80px; color: #1E2125; text-align: center; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 140px; font-style: normal; font-weight: 300; line-height: 100%; white-space: nowrap; } @keyframes home-discover-our-run { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media all and (max-width: 1200px) { .home-discover-our { padding: 40px 0; } .home-discover-our-text { font-size: 72px; } } @media all and (max-width: 767px) { .home-discover-our { padding: 40px 0; } .home-discover-our-text { font-size: 64px; } } @media (prefers-reduced-motion: reduce) { .home-discover-our-track { animation: none; width: 100%; justify-content: center; } .home-discover-our-text { white-space: normal; padding-right: 16px; padding-left: 16px; } .home-discover-our-text-clone { display: none; } } .btn-read-more { display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 250px; padding: 16px 32px; border: 3px solid #1E2125; background: transparent; color: #1E2125; text-align: center; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 130%; text-decoration: none; cursor: pointer; } .btn-read-more:hover, .btn-read-more:focus { background: #1E2125; color: #fff; text-decoration: none; } .btn-read-more.btn-read-more-light { border-color: #fff; background: transparent; color: #fff; } .btn-read-more.btn-read-more-light:hover, .btn-read-more.btn-read-more-light:focus { background: #fff; color: #1E2125; } @media all and (max-width: 767px) { .btn-read-more { min-width: 160px; padding: 12px 32px; border-width: 2px; font-size: 14px; } } .home-perfect-fit, .home-perfect-fit * { box-sizing: border-box; } .home-perfect-fit { width: 100%; margin: 0; padding: 120px 0; background: #7AABBD; } .home-perfect-fit-inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1320px; margin: 0 auto; } .home-perfect-fit-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; align-self: stretch; max-width: 1320px; margin-bottom: 80px; } .home-perfect-fit-title { display: block; width: 100%; max-width: 984px; height: auto; aspect-ratio: 984 / 260; } .home-perfect-fit-desc { margin: 0; color: #1E2125; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } .home-perfect-fit-cards { display: flex; align-items: stretch; gap: 40px; width: 100%; max-width: 1320px; } .home-perfect-fit-card { display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-end; gap: 24px; min-width: 0; padding: 32px; background: #fff; box-shadow: 0 0 0 0 #F26322; cursor: pointer; } .home-perfect-fit-card-title, .home-perfect-fit-card-desc { align-self: stretch; width: 100%; margin: 0; color: #1E2125; font-style: normal; line-height: 130%; transition: color 0.5s ease; } .home-perfect-fit-card-title { font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 32px; font-weight: 700; } .home-perfect-fit-card-desc { font-family: Prompt, sans-serif; font-size: 24px; font-weight: 400; } .home-perfect-fit-card.is-active { background: #1E2125; box-shadow: 18px 18px 0 0 #F26322; } .home-perfect-fit-card.is-active .home-perfect-fit-card-title, .home-perfect-fit-card.is-active .home-perfect-fit-card-desc { color: #fff; } .home-perfect-fit-more { align-self: center; margin-top: 80px; } @media all and (max-width: 1200px) { .home-perfect-fit { padding: 60px 16px; } .home-perfect-fit-head { align-items: center; margin-bottom: 40px; text-align: center; } .home-perfect-fit-title { max-width: 358px; aspect-ratio: 358 / 95; } .home-perfect-fit-desc { font-size: 20px; } .home-perfect-fit-cards { flex-direction: column; align-items: flex-start; align-self: stretch; gap: 40px; padding: 0 36px; } .home-perfect-fit-card { align-self: stretch; flex: none; width: 100%; gap: 8px; } .home-perfect-fit-card-title { font-size: 20px; } .home-perfect-fit-card-desc { font-size: 16px; } .home-perfect-fit-card.is-active { box-shadow: 12px 12px 0 0 #F26322; } .home-perfect-fit-more { margin-top: 40px; } } .home-perfect-fit-head { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .home-perfect-fit-head.is-inview { opacity: 1; transform: none; } .home-perfect-fit-card { opacity: 0; transition: opacity 0.8s ease-out, background-color 0.5s ease, box-shadow 0.5s ease; } .home-perfect-fit-card:nth-child(2) { transition: opacity 0.8s ease-out 0.28s, background-color 0.5s ease, box-shadow 0.5s ease; } .home-perfect-fit-card:nth-child(3) { transition: opacity 0.8s ease-out 0.56s, background-color 0.5s ease, box-shadow 0.5s ease; } .home-perfect-fit-card.is-inview { opacity: 1; } @media (prefers-reduced-motion: reduce) { .home-perfect-fit-head, .home-perfect-fit-card { opacity: 1; transform: none; transition: none; } } .home-consultation-workshop { background: #F26322; } .home-consultation-workshop-title { display: block; width: 100%; max-width: 984px; height: auto; aspect-ratio: 984 / 324; } .home-consultation-workshop .home-perfect-fit-card { box-shadow: 0 0 0 0 #7EC8E3; } .home-consultation-workshop .home-perfect-fit-card.is-active { box-shadow: 18px 18px 0 0 #7EC8E3; } .home-perfect-fit .home-perfect-fit-more p { margin: 0; color: inherit; font: inherit; } @media all and (max-width: 1200px) { .home-consultation-workshop-title { max-width: 358px; aspect-ratio: 358 / 118; } .home-consultation-workshop .home-perfect-fit-card.is-active { box-shadow: 12px 12px 0 0 #7EC8E3; } } .home-our-experts, .home-our-experts * { box-sizing: border-box; } .home-our-experts { display: flex; flex-direction: column; align-items: center; gap: 60px; width: 100%; margin: 0; padding: 120px 0; background: #fff; } .home-our-experts-head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; } .home-our-experts-title { display: block; width: 872px; height: 356px; max-width: 100%; } .home-our-experts-lead, .home-our-experts-name, .home-our-experts-role, .home-our-experts-desc { margin: 0; } .home-our-experts > .btn-read-more p { margin: 0; color: inherit; font: inherit; } .home-our-experts-lead-break { display: none; } .home-our-experts-lead { color: #1E2125; text-align: center; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } .home-our-experts-founders { display: flex; align-items: flex-start; gap: 60px; width: 1120px; max-width: 100%; } .home-our-experts-card { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; cursor: default; } .home-our-experts-photo { display: block; width: 100%; height: auto; aspect-ratio: 247 / 294; object-fit: cover; } .home-our-experts-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; align-self: stretch; padding: 0 48px; } .home-our-experts-name { color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; } .home-our-experts-role { color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 130%; } .home-our-experts-desc { color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 130%; } .home-our-experts-head { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .home-our-experts-head.is-inview { opacity: 1; transform: none; } .home-our-experts-card { opacity: 0; transition: opacity 0.9s ease; } .home-our-experts-founders.is-inview .home-our-experts-card { opacity: 1; } .home-our-experts-founders.is-inview .home-our-experts-card:nth-child(2) { transition-delay: 0.35s; } .home-our-experts-card:hover .home-our-experts-photo { animation: home-expert-shake 0.4s ease; } @keyframes home-expert-shake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-1.5deg); } 40% { transform: rotate(1.5deg); } 60% { transform: rotate(-0.8deg); } 80% { transform: rotate(0.8deg); } } @media all and (max-width: 1200px) { .home-our-experts-head { gap: 16px; } .home-our-experts-title { width: 358px; height: 146px; aspect-ratio: 179 / 73; } .home-our-experts-lead { font-size: 20px; } .home-our-experts-name { font-size: 20px; } .home-our-experts-role, .home-our-experts-desc { font-size: 16px; } } @media all and (max-width: 767px) { .home-our-experts { padding: 60px 16px; } .home-our-experts-lead-break { display: block; } .home-our-experts-lead-space { display: none; } .home-our-experts-founders { flex-direction: column; align-items: stretch; gap: 40px; width: 100%; } .home-our-experts-body { padding: 0 32px; } } @media (prefers-reduced-motion: reduce) { .home-our-experts-head, .home-our-experts-card { opacity: 1; transform: none; transition: none; } .home-our-experts-card:hover .home-our-experts-photo { animation: none; } } .home-video, .home-video * { box-sizing: border-box; } .home-video { position: relative; width: 100%; margin: 0; padding: 80px 0 0; overflow: hidden; background: #1E2125; } .home-video-inner { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 1320px; margin: 0 auto; } .home-video-bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 10px; padding-left: 400px; } .home-video-bubble { display: block; width: 238px; height: 151px; object-fit: contain; } .home-video-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; width: 100%; } .home-video-title { display: block; flex: 0 1 560px; width: 100%; max-width: 560px; height: auto; } .home-video-desc { margin: 0; color: #fff; text-align: right; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } .home-video-arrow-wrap { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; justify-content: center; padding-top: 80px; } .home-video-arrow { display: block; width: 242px; height: 56px; aspect-ratio: 121 / 28; object-fit: contain; } .home-video-stage { position: relative; align-self: center; width: 100%; max-width: 1095px; } .home-video-frame { display: block; position: relative; width: 100%; max-width: 1095px; aspect-ratio: 126 / 71; overflow: hidden; background: #c8c4be; } .home-video-poster-link { display: block; position: absolute; inset: 0; } .home-video-poster { display: block; width: 100%; height: 100%; object-fit: cover; } .home-video-embed { position: absolute; inset: 0; } .home-video-embed iframe { display: block; width: 100%; height: 100%; border: 0; } .home-video-frame:has(.home-video-embed) .home-video-poster-link { display: none; } .home-video-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; background: #ff0000; border-radius: 14px; transform: translate(-50%, -50%); } .home-video-play:before { content: ""; position: absolute; top: 50%; left: 54%; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; transform: translate(-50%, -50%); } .home-video-more { align-self: center; margin-top: 80px; } .home-video-more p { margin: 0; color: inherit; font: inherit; } .home-video-marks-wrap { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; align-self: stretch; width: 100%; max-width: 1320px; margin-top: 80px; } .home-video-marks { display: block; width: 191px; height: 131px; object-fit: contain; } @media all and (max-width: 1200px) { .home-video { padding: 40px 48px 0; } .home-video-bubble-wrap { padding-left: 300px; padding-bottom: 12px; } .home-video-bubble { width: 130px; height: 82px; } .home-video-head { flex-direction: column; align-items: flex-start; gap: 32px; } .home-video-title { flex-basis: auto; max-width: 358px; } .home-video-desc { text-align: left; } .home-video-stage, .home-video-frame { max-width: 658px; } .home-video-frame { aspect-ratio: 658 / 378; } .home-video-arrow-wrap { padding-top: 40px; } .home-video-arrow { width: 116px; height: 26px; aspect-ratio: 43 / 10; } .home-video-more { margin-top: 40px; } .home-video-marks-wrap { margin-top: 40px; } .home-video-marks { width: 117px; height: 80px; aspect-ratio: 117 / 80; } .home-video-play { width: 48px; height: 34px; border-radius: 10px; } } @media all and (max-width: 767px) { .home-video { padding: 40px 16px 0; } .home-video-bubble-wrap { padding-left: 200px; padding-bottom: 4px; } .home-video-bubble { width: 63px; height: 40px; } .home-video-head { flex-direction: column; align-items: flex-start; gap: 24px; } .home-video-title { flex-basis: auto; max-width: 265px; } .home-video-desc { text-align: left; font-size: 20px; } .home-video-stage, .home-video-frame { max-width: 359px; } .home-video-frame { aspect-ratio: 359 / 202; } .home-video-arrow-wrap { padding-top: 40px; } .home-video-arrow { width: 86px; height: 20px; aspect-ratio: 43 / 10; } .home-video-more { margin-top: 40px; } .home-video-marks-wrap { margin-top: 40px; } .home-video-marks { width: 117px; height: 80px; aspect-ratio: 117 / 80; } .home-video-play { width: 48px; height: 34px; border-radius: 10px; } } .home-video-bubble-wrap, .home-video-head, .home-video-arrow-wrap { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .home-video.is-inview .home-video-bubble-wrap, .home-video.is-inview .home-video-head, .home-video.is-inview .home-video-arrow-wrap { opacity: 1; transform: none; } .home-video.is-inview .home-video-head { transition-delay: 0.45s; } .home-video.is-inview .home-video-arrow-wrap { transition-delay: 0.9s; } .home-video-stage, .home-video-more, .home-video-marks-wrap { opacity: 0; transition: opacity 0.8s ease-out; } .home-video.is-inview .home-video-stage, .home-video.is-inview .home-video-more, .home-video.is-inview .home-video-marks-wrap { opacity: 1; } .home-video.is-inview .home-video-stage { transition-delay: 1.35s; } .home-video.is-inview .home-video-more { transition-delay: 2.2s; } .home-video.is-inview .home-video-marks-wrap { transition-delay: 2.4s; } @media (prefers-reduced-motion: reduce) { .home-video-bubble-wrap, .home-video-head, .home-video-arrow-wrap, .home-video-stage, .home-video-more, .home-video-marks-wrap { opacity: 1; transform: none; transition: none; } } .home-partner, .home-partner * { box-sizing: border-box; } .home-partner { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 120px 0; background: #fff; } .home-partner-title { width: 100%; max-width: 1320px; margin: 0 0 60px; color: #1E2125; text-align: center; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; } .home-partner-title-break { display: none; } .home-partner-grid { display: inline-grid; width: 100%; max-width: 1320px; align-self: stretch; row-gap: 16px; column-gap: 16px; grid-template-rows: repeat(8, fit-content(100%)); grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-flow: row; margin: 0 auto; } .home-partner-logo { display: block; width: 100%; height: auto; object-fit: contain; } @media all and (max-width: 1200px) { .home-partner { padding: 60px 16px 20px; } .home-partner-title { margin-bottom: 40px; font-size: 20px; } .home-partner-title-break { display: inline; } .home-partner-grid { row-gap: 8px; column-gap: 8px; grid-template-rows: repeat(16, fit-content(100%)); grid-template-columns: repeat(4, minmax(0, 1fr)); } } .home-partner-title { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .home-partner.is-inview .home-partner-title { opacity: 1; transform: none; } .home-partner-logo { opacity: 0; transition: opacity 0.7s ease-out, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo { opacity: 1; } .home-partner.is-inview .home-partner-logo:nth-child(n+9):nth-child(-n+16) { transition: opacity 0.7s ease-out 0.22s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+17):nth-child(-n+24) { transition: opacity 0.7s ease-out 0.44s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+25):nth-child(-n+32) { transition: opacity 0.7s ease-out 0.66s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+33):nth-child(-n+40) { transition: opacity 0.7s ease-out 0.88s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+41):nth-child(-n+48) { transition: opacity 0.7s ease-out 1.1s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+49):nth-child(-n+56) { transition: opacity 0.7s ease-out 1.32s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+57):nth-child(-n+64) { transition: opacity 0.7s ease-out 1.54s, transform 0.35s ease; } @media all and (max-width: 1200px) { .home-partner.is-inview .home-partner-logo:nth-child(n+5):nth-child(-n+8) { transition: opacity 0.7s ease-out 0.12s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+9):nth-child(-n+12) { transition: opacity 0.7s ease-out 0.24s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+13):nth-child(-n+16) { transition: opacity 0.7s ease-out 0.36s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+17):nth-child(-n+20) { transition: opacity 0.7s ease-out 0.48s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+21):nth-child(-n+24) { transition: opacity 0.7s ease-out 0.6s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+25):nth-child(-n+28) { transition: opacity 0.7s ease-out 0.72s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+29):nth-child(-n+32) { transition: opacity 0.7s ease-out 0.84s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+33):nth-child(-n+36) { transition: opacity 0.7s ease-out 0.96s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+37):nth-child(-n+40) { transition: opacity 0.7s ease-out 1.08s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+41):nth-child(-n+44) { transition: opacity 0.7s ease-out 1.2s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+45):nth-child(-n+48) { transition: opacity 0.7s ease-out 1.32s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+49):nth-child(-n+52) { transition: opacity 0.7s ease-out 1.44s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+53):nth-child(-n+56) { transition: opacity 0.7s ease-out 1.56s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+57):nth-child(-n+60) { transition: opacity 0.7s ease-out 1.68s, transform 0.35s ease; } .home-partner.is-inview .home-partner-logo:nth-child(n+61):nth-child(-n+64) { transition: opacity 0.7s ease-out 1.8s, transform 0.35s ease; } } .home-partner-logo:hover { animation: home-partner-shake 0.6s ease; } @keyframes home-partner-shake { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-1.2deg); } 60% { transform: rotate(1.2deg); } } @media (prefers-reduced-motion: reduce) { .home-partner-title, .home-partner-logo { opacity: 1; transform: none; transition: none; } .home-partner-logo:hover { animation: none; } } .home-our-brand-design, .home-our-brand-design * { box-sizing: border-box; } .home-our-brand-design { width: 100%; margin: 0; } .home-our-brand-design-intro, .home-our-brand-design-band, .home-our-brand-design-group-orange, .home-our-brand-design-more { opacity: 0; transition: opacity 0.8s ease-out; } .home-our-brand-design-intro.is-inview, .home-our-brand-design-band.is-inview, .home-our-brand-design-group-orange.is-inview, .home-our-brand-design-more.is-inview { opacity: 1; } .home-our-brand-design-intro { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 120px 0; background: #1E2125; } .home-our-brand-design-inner { width: 100%; max-width: 1320px; margin: 0 auto; } .home-our-brand-design-intro-inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1208px; gap: 40px; } .home-our-brand-design-title { display: block; width: 100%; max-width: 1208px; height: auto; aspect-ratio: 1208 / 388; object-fit: contain; } .home-our-brand-design-lead { width: 100%; margin: 0; color: #fff; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } .home-our-brand-design-group-orange { padding: 60px 0; background: #F26322; } .home-our-brand-design-band { padding: 60px 0; } .home-our-brand-design-band-discovery { padding-top: 120px; background: #D8D25C; } .home-our-brand-design-band-discovery .home-our-brand-design-line { top: -120px; } .home-our-brand-design-band-being { background: #D5C92B; } .home-our-brand-design-band-strategy { background: #7AABBD; } .home-our-brand-design-band-direction { background: #5FA1B2; } .home-our-brand-design-band .home-our-brand-design-item { margin-top: 0; } .home-our-brand-design-inner { position: relative; } .home-our-brand-design-line { position: absolute; top: -60px; bottom: -60px; left: 0; width: 6px; background: #1E2125; } .home-our-brand-design-kicker-wrap { position: relative; margin: 0 0 24px; } .home-our-brand-design-kicker { margin: 0; padding-left: 80px; color: #1E2125; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 500; line-height: 130%; } .home-our-brand-design-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; margin-top: 60px; padding-left: 80px; cursor: pointer; } .home-our-brand-design-kicker-wrap + .home-our-brand-design-item { margin-top: 0; } .home-our-brand-design-item.is-open { align-items: start; } .home-our-brand-design-name-mobile { display: none; } .home-our-brand-design-name { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 84px; font-style: normal; font-weight: 700; line-height: 120%; } .home-our-brand-design-desc { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-rows: 0fr; margin: 0; color: #1E2125; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; transition: grid-template-rows 0.45s ease, margin-top 0.45s ease; } .home-our-brand-design-desc > span { min-height: 0; overflow: hidden; } .home-our-brand-design-item.is-open .home-our-brand-design-desc { grid-template-rows: 1fr; margin-top: 24px; } .home-our-brand-design-plus { position: relative; display: block; grid-column: 2; grid-row: 1; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; transition: opacity 0.3s ease, width 0.35s ease; } .home-our-brand-design-plus svg { display: none; } .home-our-brand-design-plus:before, .home-our-brand-design-plus:after { content: ""; position: absolute; left: 50%; top: 50%; background: #1E2125; transform: translate(-50%, -50%); } .home-our-brand-design-plus:before { width: 44px; height: 6px; } .home-our-brand-design-plus:after { width: 6px; height: 44px; } .home-our-brand-design-item.is-open .home-our-brand-design-plus { width: 0; opacity: 0; pointer-events: none; } .home-our-brand-design-sun { display: none; position: absolute; top: 50%; left: 0; width: 106px; height: 102px; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; } .home-our-brand-design-group:has(.home-our-brand-design-item.is-open) .home-our-brand-design-sun { display: block; } .home-our-brand-design-more { display: flex; align-items: center; gap: 16px; width: 100%; padding: 40px 16px 40px max(80px, calc((100% - 1320px) / 2 + 80px)); background: #1E2125; color: #fff; text-decoration: none; pointer-events: none; } .home-our-brand-design-more-label { position: relative; margin: 0; color: #fff; text-align: center; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 130%; pointer-events: auto; cursor: pointer; } .home-our-brand-design-more-label:after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% + 16px + 52px); height: 1px; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform 0.35s ease; } .home-our-brand-design-more:hover .home-our-brand-design-more-label:after { transform: scaleX(1); } .home-our-brand-design-arrow { display: block; flex: 0 0 auto; width: 52px; height: 20px; } @media all and (max-width: 1200px) { .home-our-brand-design-intro { justify-content: center; align-items: flex-start; align-self: stretch; gap: 24px; padding: 60px 16px; } .home-our-brand-design-name { font-size: 40px; line-height: 120%; } .home-our-brand-design-intro-inner { gap: 24px; max-width: 100%; align-items: flex-start; } .home-our-brand-design-title { max-width: 586px; aspect-ratio: 586 / 189; } .home-our-brand-design-group-orange, .home-our-brand-design-band { padding: 32px 64px; } .home-our-brand-design-kicker-wrap { margin-bottom: 16px; } .home-our-brand-design-line, .home-our-brand-design-band-discovery .home-our-brand-design-line { top: -32px; bottom: -32px; width: 4px; } } @media all and (max-width: 767px) { .home-our-brand-design-intro { justify-content: center; align-items: center; align-self: stretch; gap: 24px; padding: 60px 16px; } .home-our-brand-design-intro-inner { gap: 24px; max-width: 358px; } .home-our-brand-design-title { max-width: 358px; aspect-ratio: 358 / 115; } .home-our-brand-design-lead { font-size: 20px; } .home-our-brand-design-group-orange, .home-our-brand-design-band { padding: 32px; } .home-our-brand-design-band-discovery { padding-top: 60px; } .home-our-brand-design-line { top: -32px; bottom: -32px; width: 3px; } .home-our-brand-design-band-discovery .home-our-brand-design-line { top: -60px; } .home-our-brand-design-kicker-wrap { margin-bottom: 16px; } .home-our-brand-design-kicker { padding-left: 24px; font-size: 20px; } .home-our-brand-design-item { column-gap: 16px; margin-top: 32px; padding-left: 24px; } .home-our-brand-design-item.is-open .home-our-brand-design-desc { margin-top: 16px; } .home-our-brand-design-name { font-size: 32px; line-height: 120%; } .home-our-brand-design-name-mobile { display: inline; } .home-our-brand-design-desc { font-size: 20px; } .home-our-brand-design-plus { flex-basis: 28px; width: 28px; height: 28px; } .home-our-brand-design-plus:before { width: 28px; height: 4px; } .home-our-brand-design-plus:after { width: 4px; height: 28px; } .home-our-brand-design-sun { width: 42px; height: 40px; } .home-our-brand-design-more { gap: 16px; padding: 40px 16px 40px 56px; } .home-our-brand-design-more-label { font-size: 14px; } .home-our-brand-design-more-label:after { width: calc(100% + 16px + 31px); } .home-our-brand-design-arrow { width: 31px; height: 12px; } } @media (prefers-reduced-motion: reduce) { .home-our-brand-design-intro, .home-our-brand-design-band, .home-our-brand-design-group-orange, .home-our-brand-design-more { opacity: 1; transition: none; } .home-our-brand-design-desc, .home-our-brand-design-plus { transition: none; } } .home-slider, .home-slider * { box-sizing: border-box; } .home-slider { width: 100%; margin: 0; padding: 80px 0; overflow: hidden; background: #fff; opacity: 0; transition: opacity 1.8s ease 0.15s; } .home-slider.is-inview { opacity: 1; } .home-slider.is-measuring .home-slider-viewport { visibility: hidden; } .home-slider-viewport { position: relative; width: 100%; overflow: hidden; } .home-slider-track { display: flex; align-items: flex-start; width: max-content; } .home-slider-slide { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; } .home-slider-media { display: block; width: 100%; aspect-ratio: 541 / 338; overflow: hidden; background: #1E2125; } .home-slider-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .home-slider-copy { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin-top: 64px; text-align: center; opacity: 1; transition: opacity 0.8s ease; } .home-slider.is-peek .home-slider-slide:not(.is-active) .home-slider-copy { opacity: 0; } .home-slider-title, .home-slider-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100%; margin: 0; color: #1E2125; text-align: center; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; } .home-slider-desc { font-weight: 400; } .home-slider-title a { color: inherit; text-decoration: none; } .home-slider-more { display: flex; justify-content: center; width: 100%; max-width: 1098px; margin: 60px auto 0; } .home-slider-more .btn-read-more p { margin: 0; color: inherit; font: inherit; } .home-slider-arrow { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; width: 50px; height: 100px; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; transform: translateY(-50%); transition: color 0.2s ease, transform 0.2s ease; cursor: pointer; } .home-slider-arrow svg { display: block; width: 100%; height: 100%; } .home-slider-arrow path { fill: currentColor; } .home-slider-arrow:hover, .home-slider-arrow:active { color: #F26423; transform: translateY(-50%) scale(1.08); } .home-slider-arrow-prev { left: 24px; } .home-slider-arrow-next { right: 24px; } .home-slider-arrow[hidden] { display: none; } @media all and (max-width: 767px) { .home-slider { padding: 40px 0 60px; } .home-slider-media { aspect-ratio: 195 / 122; } .home-slider-copy { margin-top: 40px; padding: 0 16px; } .home-slider-title, .home-slider-desc { font-size: 20px; } .home-slider-more { max-width: 100%; margin-top: 40px; } .home-slider-arrow { width: 24px; height: 48px; } .home-slider-arrow-prev { left: 8px; } .home-slider-arrow-next { right: 8px; } } @media (prefers-reduced-motion: reduce) { .home-slider { opacity: 1; transition: none; } .home-slider-track, .home-slider-copy { transition: none; } } .service-perfect-fit, .service-perfect-fit * { box-sizing: border-box; } .service-perfect-fit { position: relative; width: 100%; margin: 0; padding: 220px 16px 0; background: #fff; } .service-perfect-fit:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 708px; background: #7AABBD; } .service-perfect-fit-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1320px; margin: 0 auto; } .service-perfect-fit-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; align-self: stretch; width: 100%; margin-bottom: 80px; } .service-perfect-fit-title { display: block; width: 100%; max-width: 984px; height: auto; aspect-ratio: 984 / 260; } .service-perfect-fit-desc { margin: 0; color: #1E2125; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } .service-perfect-fit-cards { display: flex; align-items: stretch; gap: 40px; width: 100%; } .service-perfect-fit-card { display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-end; gap: 24px; min-width: 0; padding: 32px; background: #1E2125; box-shadow: 18px 18px 0 0 #F26322; cursor: default; } .service-perfect-fit-card-title, .service-perfect-fit-card-desc { align-self: stretch; width: 100%; margin: 0; color: #fff; font-style: normal; line-height: 130%; } .service-perfect-fit-card-title { font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 32px; font-weight: 700; } .service-perfect-fit-card-desc { font-family: Prompt, sans-serif; font-size: 24px; font-weight: 400; } .service-perfect-fit-head { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; } .service-perfect-fit-head.is-inview { opacity: 1; transform: none; } .service-perfect-fit-card { opacity: 0; transition: opacity 0.8s ease-out; } .service-perfect-fit-card:nth-child(2) { transition-delay: 0.28s; } .service-perfect-fit-card:nth-child(3) { transition-delay: 0.56s; } .service-perfect-fit-card.is-inview { opacity: 1; } @media all and (max-width: 1200px) { .service-perfect-fit { padding: 0 16px; } .service-perfect-fit:before { height: 0; } .service-perfect-fit-head { align-items: flex-start; width: calc(100% + 32px); margin: 0 -16px 0; padding: 120px 16px 100px; background: #7AABBD; text-align: left; transform: none; } .service-perfect-fit-title { max-width: 358px; aspect-ratio: 358 / 95; } .service-perfect-fit-desc { font-size: 20px; } .service-perfect-fit-cards { position: relative; z-index: 2; flex-direction: column; align-items: stretch; gap: 40px; margin-top: -60px; padding: 0 36px; } .service-perfect-fit-card { transition-delay: 1.15s; } .service-perfect-fit-card:nth-child(2) { transition-delay: 1.55s; } .service-perfect-fit-card:nth-child(3) { transition-delay: 1.95s; } .service-perfect-fit-card { flex: none; width: 100%; gap: 8px; box-shadow: 12px 12px 0 0 #F26322; } .service-perfect-fit-card-title { font-size: 20px; } .service-perfect-fit-card-desc { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .service-perfect-fit-head, .service-perfect-fit-card { opacity: 1; transform: none; transition: none; } } .service-brand-design-direction, .service-brand-design-direction * { box-sizing: border-box; } .service-brand-design-direction { width: 100%; padding: 120px 0 0; background: #fff; } .service-brand-design-direction-block { opacity: 0; transition: opacity 0.8s ease-out; } .service-brand-design-direction-block.is-inview { opacity: 1; } .service-brand-design-direction-block + .service-brand-design-direction-block { margin-top: 80px; } .service-brand-design-direction-title { width: 100%; margin: 0; color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 84px; font-style: normal; font-weight: 700; line-height: 120%; margin-bottom: -0.25em; margin-left: -0.07em; } .service-brand-design-direction-line { display: block; width: 100%; height: 6px; margin-top: 0; background: #1E2125; } .service-brand-design-direction-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 1320px; margin: 80px auto 0; padding: 0 16px; } .service-brand-design-direction-col + .service-brand-design-direction-col { padding-left: 60px; } .service-brand-design-direction-label { margin: 0 0 40px; color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; } .service-brand-design-direction-text { margin: 0; padding-left: 40px; color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 130%; } .service-brand-design-direction-text + .service-brand-design-direction-text { margin-top: 0; } .service-brand-design-direction-col-gap .service-brand-design-direction-text + .service-brand-design-direction-text { margin-top: 24px; } .service-brand-design-direction-text span { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 130%; } .service-brand-design-direction-sun { display: flex; justify-content: center; width: 100%; max-width: 1320px; margin: 80px auto 0; padding: 0 16px; } .service-brand-design-direction-sun-end { justify-content: flex-end; } .service-brand-design-direction-sun img { display: block; width: 64px; height: 64px; flex-shrink: 0; aspect-ratio: 1 / 1; } .service-brand-design-direction-marks { display: block; width: 160px; height: 54px; flex-shrink: 0; aspect-ratio: 80 / 27; margin: 80px auto 0; margin-left: max(16px, calc((100% - 1320px) / 2 + 16px)); object-fit: contain; } @media all and (max-width: 1200px) { .service-brand-design-direction { padding: 60px 0 0; } .service-brand-design-direction-block + .service-brand-design-direction-block { margin-top: 40px; } .service-brand-design-direction-title { font-size: 32px; margin-bottom: -0.28em; margin-left: -0.2rem; } .service-brand-design-direction-line { height: 3px; } .service-brand-design-direction-cols { gap: 24px; margin-top: 40px; } .service-brand-design-direction-col-gap .service-brand-design-direction-text + .service-brand-design-direction-text { margin-top: 12px; } .service-brand-design-direction-col + .service-brand-design-direction-col { padding-left: 0; } .service-brand-design-direction-label { margin-bottom: 8px; font-size: 20px; } .service-brand-design-direction-text { padding-left: 24px; font-size: 16px; } .service-brand-design-direction-text + .service-brand-design-direction-text { margin-top: 0; } .service-brand-design-direction-text span { font-size: 14px; } .service-brand-design-direction-sun { margin-top: 40px; } .service-brand-design-direction-sun img { width: 40px; height: 40px; } .service-brand-design-direction-marks { margin-top: 40px; margin-left: 16px; } } @media all and (max-width: 767px) { .service-brand-design-direction { padding: 60px 0 0; } .service-brand-design-direction-block + .service-brand-design-direction-block { margin-top: 40px; } .service-brand-design-direction-title { font-size: 32px; margin-bottom: -0.28em; margin-left: -0.2rem; } .service-brand-design-direction-line { height: 3px; } .service-brand-design-direction-cols { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; } .service-brand-design-direction-col-gap .service-brand-design-direction-text + .service-brand-design-direction-text { margin-top: 12px; } .service-brand-design-direction-col + .service-brand-design-direction-col { padding-left: 0; } .service-brand-design-direction-label { margin-bottom: 8px; font-size: 20px; } .service-brand-design-direction-text { padding-left: 24px; font-size: 16px; } .service-brand-design-direction-text + .service-brand-design-direction-text { margin-top: 0; } .service-brand-design-direction-text span { font-size: 14px; } .service-brand-design-direction-sun { margin-top: 40px; } .service-brand-design-direction-sun img { width: 40px; height: 40px; } .service-brand-design-direction-marks { margin-top: 40px; margin-left: 16px; } } @media (prefers-reduced-motion: reduce) { .service-brand-design-direction-block { opacity: 1; transition: none; } } .service-our-brand-design, .service-our-brand-design * { box-sizing: border-box; } .service-our-brand-design { width: 100%; margin: 0; } .service-our-brand-design-intro, .service-our-brand-design-band, .service-our-brand-design-group-orange { opacity: 0; transition: opacity 0.8s ease-out; } .service-our-brand-design-intro.is-inview, .service-our-brand-design-band.is-inview, .service-our-brand-design-group-orange.is-inview { opacity: 1; } .service-our-brand-design-intro { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 120px 0; background: #1E2125; } .service-our-brand-design-inner { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1320px; margin: 0 auto; } .service-our-brand-design-intro-inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1208px; gap: 40px; } .service-our-brand-design-title { display: block; width: 100%; max-width: 1208px; height: auto; aspect-ratio: 1208 / 388; object-fit: contain; } .service-our-brand-design-lead { width: 100%; margin: 0; color: #fff; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } .service-our-brand-design-group-orange { position: relative; padding: 60px 0; background: #F26322; } .service-our-brand-design-band { padding: 60px 0; } .service-our-brand-design-band-discovery { padding-top: 120px; background: #D8D25C; } .service-our-brand-design-band-discovery .service-our-brand-design-line { top: -121px; } .service-our-brand-design-band-being { position: relative; background: #D5C92B; } .service-our-brand-design-point { position: absolute; top: 0; right: max(0px, calc((100% - 1320px) / 2)); width: 75px; height: 30px; line-height: 0; pointer-events: none; z-index: 1; } .service-our-brand-design-point svg { display: block; width: 75px; height: 30px; } .service-our-brand-design-band-strategy { position: relative; background: #7AABBD; } .service-our-brand-design-band-direction { position: relative; background: #5FA1B2; } .service-our-brand-design-line { position: absolute; top: -61px; bottom: -61px; left: 0; width: 6px; background: #1E2125; } .service-our-brand-design-kicker-wrap { position: relative; margin: 0 0 24px; } .service-our-brand-design-kicker { margin: 0; padding-left: 80px; color: #1E2125; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 500; line-height: 130%; } .service-our-brand-design-item { margin-top: 60px; padding-left: 80px; cursor: default; } .service-our-brand-design-kicker-wrap + .service-our-brand-design-item, .service-our-brand-design-band-being .service-our-brand-design-item, .service-our-brand-design-band-direction .service-our-brand-design-item { margin-top: 0; } .service-our-brand-design-name-mobile { display: none; } .service-our-brand-design-name { margin: 0; color: #1E2125; font-family: "Zalando Sans Expanded", "Prompt", sans-serif; font-size: 84px; font-style: normal; font-weight: 700; line-height: 120%; } .service-our-brand-design-desc { margin: 24px 0 0; color: #1E2125; font-family: Prompt, sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; } .service-our-brand-design-sun { display: block; position: absolute; top: 50%; left: 0; width: 106px; height: 102px; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; } @media all and (max-width: 1200px) { .service-our-brand-design-intro { justify-content: center; align-items: flex-start; align-self: stretch; gap: 24px; padding: 60px 16px; } .service-our-brand-design-name { font-size: 40px; line-height: 120%; } .service-our-brand-design-intro-inner { gap: 24px; max-width: 100%; align-items: flex-start; } .service-our-brand-design-title { max-width: 586px; aspect-ratio: 586 / 189; } .service-our-brand-design-group-orange, .service-our-brand-design-band { padding: 32px 64px; } .service-our-brand-design-kicker-wrap { margin-bottom: 16px; } .service-our-brand-design-line, .service-our-brand-design-band-discovery .service-our-brand-design-line { top: -33px; bottom: -33px; width: 4px; } } @media all and (max-width: 767px) { .service-our-brand-design-intro { justify-content: center; align-items: center; align-self: stretch; gap: 24px; padding: 60px 16px; } .service-our-brand-design-intro-inner { gap: 24px; max-width: 358px; } .service-our-brand-design-title { max-width: 358px; aspect-ratio: 358 / 115; } .service-our-brand-design-lead { font-size: 20px; } .service-our-brand-design-group-orange, .service-our-brand-design-band { padding: 32px; } .service-our-brand-design-band-discovery { padding-top: 60px; } .service-our-brand-design-line { top: -33px; bottom: -33px; width: 3px; } .service-our-brand-design-band-discovery .service-our-brand-design-line { top: -61px; } .service-our-brand-design-kicker-wrap { margin-bottom: 16px; } .service-our-brand-design-kicker { padding-left: 24px; font-size: 20px; } .service-our-brand-design-item { margin-top: 32px; padding-left: 24px; } .service-our-brand-design-desc { margin-top: 16px; font-size: 20px; } .service-our-brand-design-name { font-size: 32px; line-height: 120%; } .service-our-brand-design-name-mobile { display: inline; } .service-our-brand-design-sun { width: 42px; height: 40px; } .service-our-brand-design-point, .service-our-brand-design-point svg { width: 50px; height: 20px; aspect-ratio: 5 / 2; margin-right: 6px; } } @media (prefers-reduced-motion: reduce) { .service-our-brand-design-intro, .service-our-brand-design-band, .service-our-brand-design-group-orange { opacity: 1; transition: none; } }