:root { background: #35444d; color: #fff; --color-accent: #29c8be; }

@media (max-width: 640px) { :root { font-size: 1rem; } }

@media (max-width: 320px) { :root { font-size: 0.75rem; } }

body { font-family: Barlow, sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.75; letter-spacing: 0.03em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@media (max-width: 1400px) { body { font-size: 1.25rem; } }

@media (max-width: 640px) { body { font-size: 1rem; line-height: 1.5; } }

ul, blockquote { list-style: none; padding: 0; margin: 0; }

strong { font-weight: 600; }

hr { border: 0; height: 2px; background-color: #777; }

a { color: inherit; text-decoration: none; transition: all 0.2s ease; }

.link { color: #29c8be; }

.link:hover, .link:focus { text-decoration: underline; text-decoration-thickness: 0.05em; }

.link--triangle { font-weight: 500; }

.link--triangle::after { content: ""; display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: middle; background: url("../images/icon-triangle.svg") center right; position: relative; top: -1px; }

h1, .type-h1 { font-size: 4rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1; display: block; margin: 4.375rem 0 0; }

@media (max-width: 1400px) { h1, .type-h1 { font-size: 3.25rem; line-height: 1.167; margin-top: 3.125rem; } }

@media (max-width: 640px) { h1, .type-h1 { font-size: 2.25rem; margin-top: 1.5rem; } }

h2, .type-h2 { font-size: 2.625rem; font-weight: 400; letter-spacing: normal; line-height: 1.333; display: block; margin: 3.125rem 0 0; }

@media (max-width: 1400px) { h2, .type-h2 { font-size: 2.25rem; margin-top: 2.25rem; } }

@media (max-width: 640px) { h2, .type-h2 { font-size: 1.5rem; margin-top: 1rem; } }

h3, .type-h3 { font-size: inherit; font-weight: 500; letter-spacing: inherit; line-height: inherit; display: block; margin: 2.25rem 0 0; }

@media (max-width: 1400px) { h3, .type-h3 { margin-top: 1.5rem; } }

@media (max-width: 1400px) { h3, .type-h3 { margin-top: 1rem; } }

p, .type-text { font-size: inherit; font-weight: inherit; font-style: inherit; letter-spacing: inherit; line-height: inherit; display: block; margin: 1em 0; max-width: 40em; }

.type-text--large { font-size: 2.25rem; line-height: 1.167; }

@media (max-width: 1400px) { .type-text--large { font-size: 2rem; line-height: 1.333; } }

@media (max-width: 640px) { .type-text--large { font-size: 1rem; line-height: 1.5; } }

.type-text--small { font-size: 1.25rem; line-height: 1.5; }

.type-bulleted-list { list-style: disc; margin: 2.25rem 1em; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

:root { --section-radius: 12rem; --spacing-m: 2.25rem; --spacing-3xl: 18rem; --grid-gutter: 1.25rem; --grid-margin: 1rem; /* Column width based on the view port */ --grid-col-vw: calc(
    (100vw - var(--grid-margin) * 2 - var(--grid-gutter) * 11) / 12
  ); /* Column width based on the container */ --grid-col-rel: calc((100% - var(--grid-gutter) * 9) / 10); /* Use viewport-based grid by default and switch it to relative in the container */ --grid-col: var(--grid-col-vw); --grid-col-2: calc(
      (var(--grid-col) + var(--grid-gutter)) * 2 - var(--grid-gutter)
    ); --grid-col-3: calc(
      (var(--grid-col) + var(--grid-gutter)) * 3 - var(--grid-gutter)
    ); --grid-col-4: calc(
      (var(--grid-col) + var(--grid-gutter)) * 4 - var(--grid-gutter)
    ); --grid-col-5: calc(
      (var(--grid-col) + var(--grid-gutter)) * 5 - var(--grid-gutter)
    ); --grid-col-6: calc(
      (var(--grid-col) + var(--grid-gutter)) * 6 - var(--grid-gutter)
    ); --grid-col-7: calc(
      (var(--grid-col) + var(--grid-gutter)) * 7 - var(--grid-gutter)
    ); --grid-col-8: calc(
      (var(--grid-col) + var(--grid-gutter)) * 8 - var(--grid-gutter)
    ); --grid-col-9: calc(
      (var(--grid-col) + var(--grid-gutter)) * 9 - var(--grid-gutter)
    ); --grid-col-10: calc(
      (var(--grid-col) + var(--grid-gutter)) * 10 - var(--grid-gutter)
    ); }

@media (max-width: 1400px) { :root { --grid-gutter: 1rem; --section-radius: 8rem; } }

@media (max-width: 640px) { :root { --grid-gutter: 0.5rem; --section-radius: 3rem; } }

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

html { scroll-behavior: smooth; }

img { display: block; max-width: 100%; border-radius: 0.375rem; }

.logo { display: block; width: 18.75rem; }

@media (max-width: 1024px) { .logo { width: 12.5rem; } }

@media (max-width: 640px) { .logo { width: 6.25rem; } }

.site { /* See https://stackoverflow.com/questions/24193272/overflow-xhidden-on-mobile-device-not-working */ overflow-x: hidden; width: 100vw; }

.site__header { position: relative; z-index: 999; }

.site__main { min-height: calc(100vh - 33.5rem); }

.site__notification { background-color: #29c8be; color: #003c49; display: flex; justify-content: center; align-items: center; padding: 0.8rem; }

.site__notification .link { color: inherit; text-decoration: underline; }

.container { /* Switch to columns relative to the container instead of the viewport */ --grid-col: var(--grid-col-rel); padding: 0 calc(var(--grid-col-vw) + var(--grid-gutter) + var(--grid-margin)); margin: auto; max-width: 72rem; box-sizing: content-box; }

@media (max-width: 1024px) { .container { max-width: 45rem; padding: 0 4.375rem; --grid-col-2: 100%; --grid-col-3: 100%; --grid-col-4: 100%; --grid-col-5: 100%; --grid-col-6: 100%; --grid-col-7: 100%; --grid-col-8: 100%; --grid-col-9: 100%; --grid-col-10: 100%; } }

@media (max-width: 640px) { .container { max-width: 30rem; padding: 0 var(--grid-margin); } }

@media (min-width: 1600px) { .container { padding: 0; --grid-col: calc((72rem - var(--grid-gutter) * 9) / 10); --grid-col-2: calc(
        (var(--grid-col) + var(--grid-gutter)) * 2 - var(--grid-gutter)
      ); --grid-col-3: calc(
        (var(--grid-col) + var(--grid-gutter)) * 3 - var(--grid-gutter)
      ); --grid-col-4: calc(
        (var(--grid-col) + var(--grid-gutter)) * 4 - var(--grid-gutter)
      ); --grid-col-5: calc(
        (var(--grid-col) + var(--grid-gutter)) * 5 - var(--grid-gutter)
      ); --grid-col-6: calc(
        (var(--grid-col) + var(--grid-gutter)) * 6 - var(--grid-gutter)
      ); --grid-col-7: calc(
        (var(--grid-col) + var(--grid-gutter)) * 7 - var(--grid-gutter)
      ); --grid-col-8: calc(
        (var(--grid-col) + var(--grid-gutter)) * 8 - var(--grid-gutter)
      ); --grid-col-9: calc(
        (var(--grid-col) + var(--grid-gutter)) * 9 - var(--grid-gutter)
      ); --grid-col-10: calc(
        (var(--grid-col) + var(--grid-gutter)) * 10 - var(--grid-gutter)
      ); } }

.col-2 { width: var(--grid-col-2); flex: 0 0 auto; }

.col-3 { width: var(--grid-col-3); flex: 0 0 auto; }

.col-4 { width: var(--grid-col-4); flex: 0 0 auto; }

.col-5 { width: var(--grid-col-5); flex: 0 0 auto; }

.col-6 { width: var(--grid-col-6); flex: 0 0 auto; }

.col-7 { width: var(--grid-col-7); flex: 0 0 auto; }

.col-8 { width: var(--grid-col-8); flex: 0 0 auto; }

.col-9 { width: var(--grid-col-9); flex: 0 0 auto; }

.col-10 { width: var(--grid-col-10); flex: 0 0 auto; }

.media { display: flex; gap: var(--grid-gutter); }

.media--gap-m { gap: 2.25rem; }

.media--gap-3xl { gap: 18rem; }

.media__partner-logos { align-items: center; width: 8rem; }

@media (max-width: 1024px) { .media { flex-direction: column; gap: 2.25rem; } }

@media (max-width: 640px) { .media { gap: 1.5rem; } }

.media__image--video { overflow: hidden; border-radius: 0.375rem; align-self: flex-end; }

.media__image--bleed img { max-width: calc(100% + var(--grid-gutter) + var(--grid-col)); margin-left: calc(var(--grid-col) / -2); }

@media (max-width: 1400px) { .media__image--bleed img { margin-left: 0; } }

@media (max-width: 640px) { .media__image--bleed img { max-width: 100%; } }

.media__image--first { order: -1; }

.video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }

.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.nav { --menu-easing: cubic-bezier(0.8, -0.4, 0.2, 1.3); --menu-margin: 2rem; display: flex; justify-content: flex-end; align-items: center; padding-top: 3.125rem; font-size: 1.5rem; font-weight: 500; }

@media (max-width: 1400px) { .nav { font-size: 1.125rem; padding-top: 2.25rem; } }

@media (max-width: 640px) { .nav { --menu-margin: 0.5rem; font-size: 0.75rem; padding-top: var(--grid-margin); } }

.nav[hidden] { display: none; }

.nav ul { display: flex; margin: 0; }

.nav li { margin-left: 2.25rem; }

@media (max-width: 640px) { .nav li { margin-left: calc(1em + var(--grid-margin) / 2); margin-right: calc(var(--grid-margin) / -2); } }

.nav a { color: inherit; white-space: nowrap; }

.nav .logo { margin-right: auto; }

.nav--main { margin-bottom: 7rem; font-size: 1.5rem; }

.nav--main li { padding-left: 2.25rem; position: relative; }

@media (min-width: 1025px) { .nav--main li:first-child { display: none; } .nav--main li:nth-child(n+3)::before { content: ""; display: block; width: 1px; background: #777; position: absolute; top: 2px; bottom: 2px; left: 0; } }

@media (min-width: 1025px) { .nav--main a.active::after { content: ""; display: block; border-bottom: 2px solid currentColor; } }

@media (max-width: 1024px) { .nav--main { font-size: 1.75rem; font-weight: 400; padding: 1rem 0; margin-bottom: 0; } .nav--main::before, .nav--main ul::before { content: ""; position: absolute; left: 0; right: -999rem; height: 1px; bottom: 0; box-shadow: -2px 2px 2px #16181a; background: #35444d; } .nav--main ul { display: block; position: absolute; right: var(--menu-margin); top: 3.125rem; text-align: right; padding: 1rem 2rem 1rem 0.5rem; background: #35444d; transform: translateX(200%); } }

@media (max-width: 1024px) and (max-width: 640px) { .nav--main ul { padding-top: 0; } }

@media (max-width: 1024px) { .nav--main ul::before { top: 1.75rem; bottom: 0; height: auto; box-shadow: -2px 2px 2px #263137; } }

@media (max-width: 1024px) and (max-width: 640px) { .nav--main ul::before { top: 0.375rem; } }

.nav--bullets ul { margin: 0; }

.nav--bullets li { margin: 0; }

.nav--bullets a { display: block; width: 0.75em; height: 0.75em; border-radius: 50%; border: 0.16667em solid currentColor; opacity: 0.3; margin: 0.6875rem; }

.nav--bullets a:hover, .nav--bullets a:focus, .nav--bullets a.active { opacity: 1; background: currentColor; }

.nav--bullets-side { position: fixed; z-index: 999; left: calc(var(--grid-col) / 2); }

@media (max-width: 1024px) { .nav--bullets-side { display: none; } }

.nav--bullets-side ul { flex-direction: column; }

.nav--bullets-side a { transform: translateX(-50%); }

.menu-trigger { display: none; position: absolute; right: var(--menu-margin); width: 1.5rem; opacity: 0.5; }

.menu-trigger:hover, :target .menu-trigger { opacity: 1; }

.menu-trigger img { width: 100%; border-radius: 0; }

@media (max-width: 640px) { .menu-trigger img { width: auto; } }

@media (max-width: 1024px) { .menu-trigger--open { display: block; } }

@media (max-width: 1024px) { [data-menu="open"]:target .menu-trigger--open { display: none; } [data-menu="open"]:target .menu-trigger--close { display: block; } [data-menu="open"]:target .menu-dropdown { animation: slideLeft 0.6s var(--menu-easing) forwards; } }

@media (max-width: 1024px) { [data-menu="close"]:target .menu-trigger--open { display: block; } [data-menu="close"]:target .menu-trigger--close { display: none; } [data-menu="close"]:target .menu-dropdown { animation: slideRight 0.6s var(--menu-easing) forwards; } }

.button { display: inline-block; font-size: 1.125rem; font-weight: 600; letter-spacing: normal; line-height: 1; background: #29c8be; color: #16181a; text-decoration: none; border-radius: 50rem; padding: 1rem 1.5rem; border: 0; cursor: pointer; }

@media (max-width: 640px) { .button { font-size: 0.875rem; padding: 0.5rem 1rem; } }

.section { position: relative; padding: 5rem 0; border-radius: var(--section-radius); counter-increment: section; min-height: 20rem; /* Spacing between to H1 */ /* Alternate shades of background color */ /* Rounded corners */ }

@media (max-width: 640px) { .section { padding: 2.25rem 0; min-height: 10rem; } }

.section:first-of-type { padding-top: 0; margin-top: 4.375rem; }

@media (max-width: 1400px) { .section:first-of-type { margin-top: 3.125rem; } }

@media (max-width: 640px) { .section:first-of-type { margin-top: 1.5rem; } }

.section:nth-of-type(even) { background: #263137; }

.section:nth-of-type(2), .section:nth-of-type(6) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.section:nth-of-type(4) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.section--rounded-left.section { border-radius: 0; border-top-left-radius: var(--section-radius); border-bottom-left-radius: var(--section-radius); }

.section--rounded-right.section { border-radius: 0; border-top-right-radius: var(--section-radius); border-bottom-right-radius: var(--section-radius); }

.section__heading--numbered { display: inline-block; position: relative; }

@media (max-width: 640px) { .section__heading--numbered { margin-top: 2.5rem; } }

.section__heading--numbered::before { content: "0" counter(section); display: block; width: 5.75rem; text-align: right; position: absolute; top: -3rem; left: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: normal; color: #0C0C0C; }

@media (max-width: 1400px) { .section__heading--numbered::before { font-size: 2rem; } }

@media (max-width: 640px) { .section__heading--numbered::before { font-size: 1.125rem; width: 2.75rem; top: -2rem; } }

.section__heading--numbered::after { content: ""; position: absolute; top: -0.75rem; left: 0; width: 2.75rem; height: 1px; background: #0C0C0C; }

@media (max-width: 640px) { .section__heading--numbered::after { width: 1.25rem; top: -1rem; } }

.section__heading--numbered + p { margin-top: 2.25rem; }

@media (max-width: 1400px) { .section__heading--numbered + p { margin-top: 1.5rem; } }

@media (max-width: 640px) { .section__heading--numbered + p { margin-top: 1rem; } }

.section__heading--numbered-right { display: inline; }

.section__heading--numbered-right::before { left: auto; right: -0.25rem; top: auto; bottom: 0.25rem; transform: translateX(100%); }

.section__heading--numbered-right::after { left: auto; right: -0.75rem; top: auto; bottom: 0.75rem; transform: translateX(100%); }

@media (max-width: 640px) { .section__heading--numbered-right::before { bottom: 0.5rem; } .section__heading--numbered-right::after { right: -0.5rem; bottom: 0.5rem; } }

@media (min-width: 1401px) { .section__heading--numbered-right::before { bottom: 0.75rem; } .section__heading--numbered-right::after { bottom: 0.5rem; } }

@media (min-width: 1025px) { .section__heading--numbered-right-m { display: inline; } .section__heading--numbered-right-m::before { left: auto; right: -0.75rem; top: auto; bottom: 0.25rem; transform: translateX(100%); } .section__heading--numbered-right-m::after { left: auto; right: -0.75rem; top: auto; bottom: 0.75rem; transform: translateX(100%); } }

@media (min-width: 1401px) { .section__heading--numbered-right-m::before { bottom: 0.75rem; } .section__heading--numbered-right-m::after { bottom: 0.5rem; } }

.section__subheading { margin-top: 0; }

.section__cta { margin: 3.125rem 0 0; }

@media (max-width: 1400px) { .section__cta { margin-top: 2.25rem; } }

@media (max-width: 640px) { .section__cta { margin-top: 1rem; } }

.section__image img { margin: 3.5rem auto 0; }

@media (max-width: 1024px) { .section__image img { margin-top: 1.5rem; } }

.subsection { position: relative; }

.subsection + .subsection { margin-top: 3.125rem; }

@media (max-width: 640px) { .subsection + .subsection { margin-top: 1.5rem; } }

.subsection--icon { --subsection-icon-spacing: var(--grid-col-2); --subsection-icon-width: calc(var(--grid-col) * 1.2 + var(--grid-gutter)); }

.subsection--icon::before { display: block; content: ""; width: 100%; height: 10rem; margin-bottom: 1rem; background-repeat: no-repeat; background-size: contain; background-position: top left; }

@media (max-width: 1024px) { .subsection--icon::before { height: 7rem; } }

@media (max-width: 640px) { .subsection--icon::before { height: 3.125rem; } }

.subsection--icon-platform::before { background-image: url(../images/icon-platform.svg); }

.subsection--icon-grid::before { background-image: url(../images/icon-grid.svg); }

.subsection--icon-flow::before { background-image: url(../images/icon-flow.svg); }

.subsection--icon-team::before { background-image: url(../images/icon-team.svg); }

.subsection--icon-contact::before { background-image: url(../images/icon-plane.svg); }

@media (min-width: 1025px) { .subsection--icon-left { padding-left: var(--subsection-icon-spacing); } .subsection--icon-left::before { width: var(--subsection-icon-width); position: absolute; left: 0; top: 1rem; } }

@media (min-width: 1025px) { .subsection--icon-right { padding-right: var(--subsection-icon-spacing); } .subsection--icon-right::before { width: var(--subsection-icon-width); position: absolute; left: calc(var(--grid-col-9) + var(--grid-gutter)); top: 1rem; } }

@media (min-width: 1025px) { .subsection--icon-valign-middle::before { top: 0; bottom: 0; height: 100%; background-position: center; } }

.site__footer { background: #16181a; border-top-right-radius: var(--section-radius); padding: 0 var(--grid-margin) 3.125rem; }

@media (max-width: 640px) { .site__footer { padding-bottom: 1.5rem; } }

.site__footer__logo { margin: 5rem 0 0.5rem; }

@media (max-width: 1400px) { .site__footer__logo { max-width: 12.5rem; } }

@media (max-width: 1024px) { .site__footer__logo { margin-top: 2.25rem; } }

.site__footer__copyright { font-size: 0.875rem; margin: 0; max-width: none; }

@media (max-width: 1400px) { .site__footer__copyright { font-size: 0.75rem; } }

@media (max-width: 640px) { .site__footer__copyright { font-size: 0.625rem; max-width: 16rem; } }

.site__footer__social-icons { position: absolute; padding: 1rem 2rem; margin-right: 1em; right: 0; bottom: 0; }

@media (max-width: 1400px) { .site__footer__social-icons { padding: 1rem 0; } }

@media (max-width: 640px) { .site__footer__social-icons { padding: 0.5rem; } }

.site__footer__social-icons > * { display: inline-block; width: 2.5rem; margin: 0 0.2rem; }

@media (max-width: 640px) { .site__footer__social-icons > * { width: 1.2rem; } }

.hr { --hr-margin: -1rem; position: relative; }

.hr::after { content: ""; display: block; position: absolute; top: 0; height: var(--grid-gutter); border-radius: 3.75rem; left: var(--hr-margin); right: var(--hr-margin); background: #29c8be; width: calc(var(--grid-col-7) + var(--grid-margin) * 2); }

.hr--2::after { background: #f78376; width: calc(var(--grid-col-5) + var(--grid-margin) * 2); left: auto; }

.hr--3::after { background: #5659fa; width: calc(var(--grid-col-8) + var(--grid-margin) * 2); }

.hr--4::after { background: #29c8be; width: calc(var(--grid-col-9) + var(--grid-margin) * 2); left: auto; }

.hr--5::after { background: #f78376; width: var(--grid-col-8); left: 50%; transform: translateX(-50%); }

.hr--bottom::after { top: auto; bottom: 0; }

.hr--right::after { left: auto; right: var(--hr-margin); transform: none; }

.lego { position: relative; }

.lego::before { content: ""; display: block; position: absolute; top: 0; background-repeat: no-repeat; background-size: contain; width: 21rem; height: 21rem; }

@media (max-width: 1400px) { .lego::before { width: 15rem; height: 15rem; } }

@media (max-width: 640px) { .lego::before { width: 6.25rem; height: 6.25rem; } }

.lego--1::before { background-image: url(../images/lego-1.svg); transform: translateY(-60%); width: 14.625rem; height: 14.625rem; }

@media (max-width: 1024px) { .lego--1::before { transform: translateY(-75%); } }

@media (max-width: 640px) { .lego--1::before { width: 6.25rem; height: 6.25rem; } }

.lego--2::before { right: 0; background-image: url(../images/lego-2.svg); background-position: right; transform: translateY(-62%); }

.lego--3::before { left: 50%; background-image: url(../images/lego-3.svg); transform: translate3d(-50%, -34%, 0); }

.lego--4::before { background-image: url(../images/lego-4.svg); transform: translateY(-80%); }

.lego--5::before { right: 0; background-image: url(../images/lego-5.svg); background-position: right; transform: translateY(-42%); }

.lego--6::before { left: 0; background-image: url(../images/lego-6.svg); transform: translateY(-50%); }

@keyframes slideLeft { from { transform: translateX(200%); }
  to { transform: translateX(0%); } }

@keyframes slideRight { from { transform: translateX(0%); }
  to { transform: translateX(200%); } }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes fadeOut { from { opacity: 1; }
  to { opacity: 0; } }

.fade-in { animation: fadeIn .6s ease-out forwards; }

.fade-out { animation: fadeOut .6s ease-in forwards; }

/*# sourceMappingURL=main.css.map */