@font-face {
  font-family: Red hat display;
  src: url('../fonts/red-hat-display-bold.woff2') format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Red hat display;
  src: url('../fonts/red-hat-display-bold.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Red hat display;
  src: url('../fonts/red-hat-display-bold.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Red hat display;
  src: url('../fonts/red-hat-display-bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Font Awesome Brands;
  src: url('../fonts/fa-brands-400.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Font Awesome;
  src: url('../fonts/fa-regular-400.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Font Awesome;
  src: url('../fonts/fa-solid-900.woff2') format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-Black.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-Extra-Light.otf') format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-SemiBold.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-UltraLight.otf') format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-BlackItalic.otf') format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-BoldItalic.otf') format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-ExtraLightItalic.otf') format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-LightItalic.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-MediumItalic.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-RegularItalic.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-SemiBoldItalic.otf') format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Sofia Pro;
  src: url('../fonts/sofiapro-UltraLightItalic.otf') format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

:root {
  --dark-grey: #272727;
  --orange-main: #ff6219;
  --light-grey: #f8f8f8;
  --white: white;
  --black: black;
  --turquoise-side: #00ffe6;
  --dark-turquoise: #00b3a1;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

.w-embed-youtubevideo {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/youtube-placeholder.2b05e7d68d.svg');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.w-embed-youtubevideo:empty {
  min-height: 75px;
  padding-bottom: 56.25%;
}

body {
  color: #fff;
  background-color: #0d0d0d;
  font-family: Red hat display, sans-serif;
  font-size: 1vw;
}

h1 {
  letter-spacing: 0;
  text-transform: lowercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 9em;
  font-weight: 700;
  line-height: .9;
}

h2 {
  letter-spacing: 0;
  text-transform: lowercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6em;
  font-weight: 700;
  line-height: .9;
}

h3 {
  letter-spacing: -.03em;
  -webkit-text-stroke-color: var(--dark-grey);
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4em;
  font-weight: 700;
  line-height: .9;
}

h4 {
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.5em;
  font-weight: 700;
  line-height: .9;
}

h5 {
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5em;
  font-weight: 700;
  line-height: .9;
}

h6 {
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 700;
  line-height: .9;
}

p {
  margin-bottom: 0;
  font-size: 1.25em;
  line-height: 1.6;
}

a {
  color: #fff;
  text-decoration: none;
}

ul, ol {
  margin-bottom: 0;
  padding-left: 20px;
}

img {
  max-width: 100%;
  display: inline-block;
}

strong {
  font-weight: bold;
}

blockquote {
  border-left: 5px #e2e2e2;
  margin-bottom: 0;
  padding: 0;
  font-size: 4em;
  font-weight: 300;
  line-height: 1;
}

figure {
  margin-bottom: 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

.wrapper {
  font-family: Sofia Pro, sans-serif;
}

.section {
  flex-direction: column;
  align-items: center;
  padding-top: 4.3em;
  padding-bottom: 7em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.section.story {
  background-color: var(--orange-main);
}

.section.footer {
  padding-top: 3em;
  padding-bottom: 3.5em;
}

.section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.section.white-section {
  background-color: var(--light-grey);
}

.section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.container {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
}

.container.footer {
  align-items: stretch;
}

.container.team-container {
  align-items: center;
}

.grid-quarters {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.column-xsmall {
  width: 100%;
  max-width: 290px;
}

.column-2xlarge {
  width: 100%;
  max-width: 1060px;
}

.divider {
  background-color: #31313199;
  width: 100%;
  height: 1px;
  line-height: 1.4px;
}

.grid {
  grid-column-gap: 0px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid.about {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid.blog, .grid.licenses {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  grid-template-columns: 1fr 1fr 1fr;
}

.padding-bottom-0 {
  padding-bottom: 0;
}

.padding-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.text-display-1 {
  color: var(--light-grey);
  letter-spacing: 0;
  text-transform: lowercase;
  margin-bottom: 40px;
  font-family: sofia-pro, sans-serif;
  font-size: 4em;
  line-height: 1;
}

.text-display-1.line-1 {
  text-align: center;
  letter-spacing: 0;
  text-transform: lowercase;
  font-size: 80px;
  font-weight: 600;
  line-height: 1.2;
  position: static;
}

.text-display-1.line-2 {
  font-family: Sofia Pro, sans-serif;
}

.text-display-1.black {
  color: var(--dark-grey);
  margin-bottom: -3px;
}

.text-display-1.black.contact {
  margin-top: -32px;
}

.text-display-1.leistungen {
  color: var(--dark-grey);
  transform-style: preserve-3d;
  transition: transform .4s;
}

.text-display-1.leistungen:hover {
  transform: translate3d(0, 40px, 64px)skew(2deg, -6deg);
}

.grid-thirds {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.button {
  background-color: var(--orange-main);
  text-transform: uppercase;
  border-radius: 200px;
  justify-content: center;
  align-items: center;
  margin-top: 3em;
  padding: 1.125em 3em;
  font-size: 14px;
  font-weight: 500;
}

.rich-text {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
}

.rich-text h1 {
  margin-bottom: 32px;
  font-size: 2.5em;
}

.rich-text h2 {
  margin-bottom: 32px;
  font-size: 2em;
}

.rich-text h3 {
  margin-bottom: 24px;
  font-size: 1.75em;
}

.rich-text h4 {
  margin-bottom: 24px;
  font-size: 1.5em;
}

.rich-text h5 {
  margin-bottom: 20px;
  font-size: 1.25em;
}

.rich-text h6 {
  margin-bottom: 20px;
  font-size: 1em;
}

.rich-text p {
  color: #999;
  margin-bottom: 32px;
  font-size: 1.125em;
  line-height: 1.5;
}

.rich-text li {
  margin-bottom: 12px;
}

.rich-text ul {
  color: #999;
  margin-bottom: 32px;
  padding-left: 20px;
}

.rich-text ol {
  color: #999;
  overflow: visible;
}

.rich-text figcaption {
  color: #999;
  text-transform: uppercase;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
}

.rich-text blockquote {
  margin-bottom: 32px;
  font-size: 2em;
}

.rich-text figure {
  margin-top: 56px;
  margin-bottom: 56px;
}

.style-guide-color {
  height: 150px;
  margin-bottom: 12px;
}

.style-guide-color.accent-01 {
  background-color: #d42121;
}

.style-guide-color.black-01 {
  background-color: #0d0d0d;
  border: 1px solid #1c1c1c;
}

.style-guide-color.black-02 {
  background-color: #121212;
}

.style-guide-color.black-03 {
  background-color: #1c1c1c;
}

.style-guide-color.grey-01 {
  background-color: #999;
}

.style-guide-color.white-01 {
  background-color: #fff;
}

.style-guide-color.grey-02 {
  background-color: #3d3d3d;
}

.nav-link {
  letter-spacing: -.01em;
  text-transform: lowercase;
  margin-left: 1.5em;
  font-family: sofia-pro, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: color .4s cubic-bezier(.23, 1, .32, 1);
}

.nav-link:hover {
  color: #999;
}

.nav-link.w--current {
  text-transform: lowercase;
}

.nav-link.cta {
  background-color: #0000;
}

.nav-link.cta:hover {
  color: var(--orange-main);
}

.nav-link.black {
  color: var(--dark-grey);
}

.nav-link.black:hover {
  color: #272727a1;
}

.text-display-2 {
  font-size: 6em;
}

.text-display-2.black-text {
  color: var(--dark-grey);
  letter-spacing: 0;
  text-transform: lowercase;
  order: 0;
  align-self: auto;
  font-size: 5em;
  line-height: 1;
}

.text-display-3 {
  text-align: left;
  font-size: 4em;
  text-decoration: underline;
}

.text-display-4 {
  text-transform: none;
  font-family: sofia-pro, sans-serif;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.1;
}

.project-title {
  margin-bottom: 9px;
  font-family: sofia-pro, sans-serif;
  font-size: 2.5rem;
  line-height: 1.2;
}

.text-display-6 {
  font-size: 2em;
}

.text-display-7 {
  text-transform: lowercase;
  font-size: 1.5em;
  font-weight: 700;
}

.text-body-1 {
  border: 1px none var(--light-grey);
  letter-spacing: 0;
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1.1;
}

.text-body-2 {
  clear: none;
  color: var(--dark-grey);
  letter-spacing: 0;
  margin-left: 62px;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.6;
}

.paragraph {
  letter-spacing: 0;
}

.text-micro-1 {
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.text-micro-1.spaced {
  letter-spacing: .7em;
}

.text-micro-2 {
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.text-micro-2.grey-01 {
  color: var(--white);
  text-transform: lowercase;
  font-size: 16px;
}

.nav-btn {
  display: none;
}

.logo-img {
  max-width: 100%;
  height: 40px;
}

.header-nav {
  flex-direction: row;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.logo-link {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.nav-btn-lottie {
  width: 32px;
  height: 32px;
}

.header {
  z-index: 99;
  background-color: #0000;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 4em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
  position: sticky;
  top: 0;
}

.header.black {
  background-color: var(--black);
}

.header.dark {
  background-color: #000;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-inner {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.reel-contain {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.reel-contain.home-hero {
  text-align: center;
  height: 42em;
}

.reel-contain.cta {
  text-align: center;
  height: 38em;
}

.reel-contain.blog {
  text-align: center;
  height: 42em;
  margin-top: 5em;
}

.reel-contain.slide-wrap {
  text-align: center;
  height: 42em;
}

.reel {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.reel.home-hero {
  background-image: linear-gradient(#0000004d, #0000004d);
  border-radius: 1.5rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
}

.reel.work {
  background-image: linear-gradient(#0000004d, #0000004d);
  border-radius: 1.5em;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
  position: absolute;
}

.reel.cta {
  background-image: linear-gradient(#0000004d, #0000004d);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
}

.reel.project-video {
  background-image: linear-gradient(#0000004d, #0000004d);
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
}

.reel-title {
  perspective: 2000px;
  margin-bottom: 2em;
}

.spacer-wrap {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.spacer-icon {
  background-color: #fff;
  border-radius: 50%;
  flex: none;
  width: 1em;
  height: 1em;
}

.spacer-icon.rec {
  background-color: var(--orange-main);
}

.spacer-line {
  background-color: #ffffff4d;
  flex: 1;
  height: 1px;
  margin-left: 1em;
  margin-right: 1em;
}

.col {
  width: 100%;
}

.col._11-20 {
  max-width: 55%;
}

.col._10-20 {
  grid-row-gap: 15px;
  flex-direction: column;
  flex: 0 auto;
  align-self: center;
  align-items: center;
  max-width: 50%;
  display: flex;
}

.col._6-20 {
  max-width: 30%;
}

.col._8-20 {
  max-width: 40%;
}

.col._3-20 {
  max-width: 15%;
}

.col._9-20 {
  max-width: 45%;
}

.col._5-20 {
  max-width: 25%;
}

.col._2-20 {
  max-width: 10%;
}

.col._12-20 {
  max-width: 60%;
}

.col._7-20 {
  max-width: 35%;
}

.col._1-20 {
  max-width: 5%;
}

.col._4-20 {
  max-width: 20%;
}

.col._13-20 {
  max-width: 65%;
}

.col._14-20 {
  max-width: 70%;
}

.col._15-20 {
  max-width: 75%;
}

.col._16-20 {
  max-width: 80%;
}

.col._17-20 {
  max-width: 85%;
}

.col._18-20 {
  max-width: 90%;
}

.col._19-20 {
  max-width: 95%;
}

.col._20-20 {
  max-width: 100%;
}

.style-guide-block {
  background-color: #999;
  height: 4em;
}

.o-grid {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.row {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding-left: 8em;
  padding-right: 8em;
  display: flex;
}

.row.company {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: -56px;
  padding-top: 0;
  padding-bottom: 0;
}

.row.slider-wrap {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
}

.row.slider-wrap:active {
  transform: rotate(0);
}

.row.story-content {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
}

.row.story-title {
  margin-bottom: 3.4em;
}

.row.story-title.lets-talk {
  grid-column-gap: 10px;
  grid-row-gap: 30px;
  flex-direction: column;
}

.row.work {
  grid-column-gap: 2em;
  grid-row-gap: 1.5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 5em;
  display: grid;
}

.row.hero-title, .row.template {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.row.project-headline {
  flex-flow: column;
  flex: 0 auto;
  align-self: flex-start;
  align-items: flex-start;
  width: auto;
}

.row.leistungen {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: wrap;
  margin-bottom: 30px;
}

.row.leistungen.reversed {
  margin-top: 30px;
  margin-bottom: 0;
}

.company-title {
  flex: 0 auto;
  align-items: center;
  margin-bottom: 2.5em;
  display: block;
}

.grey-01 {
  color: #999;
}

.company-text {
  width: 100%;
  max-width: 296px;
}

.about-card {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.about-card.content {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  border: 1px solid #1c1c1c;
  border-radius: 12px;
  justify-content: center;
  padding-top: 0%;
  padding-left: 2em;
  padding-right: 2em;
}

.about-card-title {
  margin-bottom: 1.5em;
}

.track {
  border: 1px solid #1c1c1c;
  border-radius: 1.5em;
  justify-content: flex-start;
  align-items: center;
  height: 6.25em;
  margin-top: 4rem;
  display: flex;
  overflow: hidden;
}

.track-holder {
  flex: none;
  justify-content: center;
  align-items: center;
  font-family: sofia-pro, sans-serif;
  display: flex;
}

.track-icon {
  background-color: var(--turquoise-side);
  border-radius: 50%;
  width: .75em;
  height: .75em;
  margin: 0 1.5em;
}

/* Remove extra margin from last icon in each track-holder */
.track-holder .track-icon:last-child {
  margin-right: 0;
}


.slider {
  border-radius: 1.5em;
  height: 42em;
  margin-top: 5em;
  position: relative;
}

.slide {
  overflow: hidden;
}

.story-text {
  object-fit: fill;
  flex: 0 auto;
  width: 100%;
  max-width: 500px;
}

.work-title {
  text-align: center;
  max-width: 47.75em;
  margin-left: auto;
  margin-right: auto;
}

.work-item {
  opacity: .85;
  border-radius: 1.5em;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  padding-left: 2.5em;
  transition: opacity .5s;
  position: relative;
  overflow: hidden;
}

.work-item:hover {
  opacity: 1;
}

.work-text {
  width: 100%;
  max-width: 26.1em;
  overflow: hidden;
}

.clients-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border: 1px solid #1c1c1c;
  border-radius: 1.5em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}

.clients-item {
  border-bottom: 1px solid #1c1c1c;
  border-right: 1px solid #1c1c1c;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 11.25em;
  display: flex;
}

.clients-item.last {
  border-bottom-style: none;
}

.blog-card {
  background-color: #1c1c1c;
  border-radius: 1.5em;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 25em;
  padding: 3.5em 2em 2em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.blog-card-bottom {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.blog-card-icon {
  width: 2em;
  transform: rotate(180deg);
}

.blog-card-top {
  z-index: 10;
  position: relative;
}

.blog-card-bg {
  z-index: 5;
  opacity: .7;
  perspective-origin: 100% 100%;
  transform-origin: 100% 100%;
  width: 12.5em;
  height: 12.5em;
  position: absolute;
  inset: auto 0% 0% auto;
}

.cta-title {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}

.social-wrap {
  display: flex;
}

.social-icon {
  border: 2px solid #ffffff4d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  margin-left: .375em;
  margin-right: .375em;
  transition: background-color .8s cubic-bezier(.23, 1, .32, 1);
  display: flex;
}

.social-icon:hover {
  background-color: #ffffff4d;
}

.logo-footer {
  text-align: left;
  flex: 0 auto;
  align-self: center;
  width: 20%;
  display: inline-block;
}

.footer-wrap {
  border: 1px solid #1c1c1c;
  border-radius: 1.5em;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 5em;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
}

.text-link {
  letter-spacing: .01em;
  text-transform: lowercase;
  font-family: sofia-pro, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  transition: color .4s cubic-bezier(.23, 1, .32, 1);
}

.text-link:hover {
  color: #999;
}

.text-link.white {
  color: var(--dark-grey);
}

.footer-links {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex: 0 auto;
  justify-content: center;
  align-self: center;
  display: flex;
}

.slider-left-arrow {
  width: 2.5em;
  height: 2.5em;
  margin-top: 45px;
  font-size: 1vw;
  inset: -8.1em 3.2em auto auto;
}

.slider-right-arrow {
  justify-content: center;
  align-items: center;
  width: 3.5em;
  height: 3.5em;
  margin-top: 45px;
  font-size: 1vw;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.slide-nav {
  display: none;
}

.slider-arrow-icon.right {
  opacity: 0;
  width: 1em;
  height: 1em;
  position: static;
  inset: auto 0% 0%;
}

.slider-arrow-icon.left {
  width: 2.5em;
  height: 2.5em;
}

.reel-title-mask {
  width: 100%;
  max-width: 56.25rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.template-text {
  max-width: 37.5em;
  margin-bottom: 5em;
}

.top-bar {
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  background-color: #d42121;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 400;
  display: flex;
}

.licenses-item {
  background-color: #1c1c1c;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 56.25em;
  padding: 32px;
  display: flex;
}

.licenses-text {
  margin-top: .7em;
}

.body {
  background-color: var(--black);
}

.text-span {
  color: var(--orange-main);
}

.heading {
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 26px;
  font-family: Sofia Pro, sans-serif;
  font-size: 3em;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
}

.text-span-2 {
  color: var(--orange-main);
  font-style: normal;
  font-weight: 600;
}

.text-span-3 {
  color: var(--turquoise-side);
  font-weight: 600;
}

.offering-card {
  background-color: var(--light-grey);
  border-radius: 1.5em;
}

.card {
  background-color: #fff;
  border: 1px solid #eff0f6;
  border-radius: 12px;
  box-shadow: 0 2px 7px #14142b0f;
}

.card.link-card {
  color: #6e7191;
  transform-style: preserve-3d;
  background-color: #0000;
  border-style: none;
  border-radius: 0;
  text-decoration: none;
  transition: transform .3s, color .3s;
}

.card.link-card:hover {
  transform: scale3d(.96, .96, 1.01);
}

.card.leon-card {
  grid-column-gap: 4rem;
  display: flex;
}

.card.content-center {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 24px;
  display: flex;
}

.card.content-center.team-v1 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.image-wrapper---br-top {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
  transform: translate(0);
}

.image.width-100 {
  min-width: 100%;
  max-height: none;
}

.link-text {
  color: var(--orange-main);
  font-family: sofia-pro, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  transition: color .3s;
  display: inline-block;
}

.mg-bottom-24px {
  color: var(--dark-grey);
  margin-bottom: 18px;
  font-family: sofia-pro, sans-serif;
}

.line-rounded-icon.link-icon-right {
  margin-left: 6px;
  display: inline-block;
}

.link-wrapper {
  color: #211f54;
  transition: margin .3s, opacity .3s;
  display: inline-block;
}

.link-wrapper:hover {
  opacity: .82;
  color: #4a3aff;
  margin-left: 11px;
}

.link-wrapper.color-primary {
  color: #4a3aff;
}

.link-wrapper.color-primary:hover {
  color: #211f54;
}

.link-wrapper.color-primary.text-bold {
  transition: margin .3s, opacity .3s;
}

.link-wrapper.color-primary.text-bold:hover {
  opacity: .84;
  margin-left: 11px;
}

.pd---content-inside-card {
  background-color: #fff;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  padding: 40px 28px 24px;
}

.heading-2 {
  color: var(--dark-grey);
  margin-bottom: 11px;
}

.heading-2.offer-card {
  text-transform: lowercase;
  font-family: sofia-pro, sans-serif;
}

.image-2 {
  color: var(--orange-main);
  background-color: #0000;
  margin-bottom: 3px;
  margin-left: 5px;
}

.text-block {
  color: var(--orange-main);
  text-align: right;
  flex-direction: row;
  flex: 0 auto;
  justify-content: flex-end;
  align-self: center;
  margin: 0;
  font-size: 2vw;
  font-style: italic;
  font-weight: 300;
  display: block;
}

.container-2 {
  justify-content: flex-end;
  align-self: auto;
  align-items: center;
  display: block;
}

.vide-wrap {
  grid-column-gap: 0px;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 40px;
  display: flex;
}

.image-3 {
  margin-top: -5px;
  margin-bottom: -30px;
}

.text-span-4 {
  font-style: normal;
}

.link-block {
  align-self: auto;
  height: 50px;
  display: block;
}

.image-4 {
  cursor: auto;
  width: 4em;
  margin-top: 0;
  transition: transform 5s, transform .4s;
}

.image-4:hover {
  transform: rotate(16deg)scale(1.1)translate(0, -2px);
}

.image-4:active {
  transform: rotate(330deg)rotate(16deg);
}

.heading-3 {
  letter-spacing: 0;
  text-transform: lowercase;
}

.heading-4 {
  letter-spacing: 0;
}

.heading-5 {
  letter-spacing: 0;
  text-transform: none;
}

.image-5 {
  object-fit: cover;
  border-radius: 1.5em;
  flex: 1;
  transition: box-shadow .3s;
  overflow: hidden;
  box-shadow: -1px 16px 30px -5px #0003;
}

.image-5:hover {
  box-shadow: 0 0 0 -3px #0003;
}

.image-5.leistungen {
  order: 1;
}

.image-5.leistungen.reversed {
  object-fit: cover;
  order: -1;
  overflow: hidden;
}

.cta-button-1 {
  background-color: var(--dark-grey);
  border-radius: 1.5em;
  flex: 0 auto;
  padding: 20px;
  font-size: 1.1vw;
  font-weight: 600;
  transition: color .3s, box-shadow .3s;
}

.cta-button-1:hover {
  color: #9afff5;
  box-shadow: 0 6px 10px 1px #00ffe663;
}

.cta-button-1:active {
  box-shadow: none;
}

.cta-button-1.button-v2 {
  border: 2px solid var(--light-grey);
  padding: 8px 13px;
  font-size: 1.2vw;
  font-weight: 300;
  line-height: 1.3em;
}

.cta-button-1.button-v2.leistungen-button {
  margin-top: 12px;
  padding: 16px 47px;
  font-family: sofia-pro, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
}

.project-block {
  border-radius: 1.5em;
  width: 100%;
  height: auto;
  position: relative;
}

.image-6 {
  opacity: 1;
  flex: 0 auto;
}

.section-2 {
  background-color: var(--light-grey);
}

.right-arrow {
  width: 0;
  height: 0;
}

.next-prev-block {
  justify-content: space-between;
  align-self: flex-start;
  align-items: flex-end;
  display: flex;
}

.form-top-content {
  flex: 0 auto;
  align-self: auto;
}

.slider-2 {
  background-color: #0000;
  justify-content: center;
  height: 400px;
}

.submit-btn {
  color: var(--turquoise-side);
  background-color: #0000;
  padding: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 30px;
}

.nextbutton-text {
  background-color: #0000;
  padding: 0;
  font-family: sofia-pro, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 30px;
}

.form-block-2 {
  width: 100%;
}

.form-step {
  flex-flow: column wrap;
  place-content: space-around center;
  align-items: stretch;
  height: auto;
  padding: 0% 30% 0% 10%;
  display: flex;
}

.form-step.radio {
  padding-left: 10%;
  padding-right: 10%;
}

.prev-link {
  color: #848c8e;
  margin-right: 20px;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.form-verification {
  align-self: stretch;
  align-items: center;
  height: 60px;
  display: flex;
}

.text-alert {
  color: #0cd9ff;
  font-size: 18px;
  font-weight: 600;
  display: none;
}

.form-close-btn {
  z-index: 100;
  background-image: url('../images/close-icon.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 34px;
  height: 34px;
  margin-top: 30px;
  margin-right: 10%;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
}

.radio-label {
  color: #fff;
  font-size: 24px;
  line-height: 24px;
}

.left-arrow-2 {
  width: 0;
  height: 0;
}

.text-area {
  color: #1e1f24;
  min-height: 200px;
  font-size: 18px;
  line-height: 22px;
}

.form-radio-container {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.contact-form-container {
  z-index: 11;
  object-fit: fill;
  background-color: #000;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  display: block;
  position: static;
  inset: 0;
}

.text-input {
  color: #848c8e;
  background-color: #0000;
  border: 1px #000;
  border-bottom: 2px solid #fff;
  width: 100%;
  height: 60px;
  padding-bottom: 10px;
  font-family: sofia-pro, sans-serif;
  font-size: 28px;
  line-height: 28px;
}

.input-label {
  color: #fff;
  margin-bottom: 30px;
  font-family: sofia-pro, sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 48px;
}

.radio-btn {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.slider-dot-nav {
  display: none;
}

.radio-button-field {
  align-items: center;
  margin-right: 50px;
  display: flex;
}

.section-3 {
  height: auto;
}

.slide-2 {
  padding-bottom: 0;
}

.slide-3, .slide-4, .slide-5, .slide-6, .slide-7, .mask {
  height: 400px;
}

.heading-6 {
  text-align: center;
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: var(--turquoise-side);
  margin-bottom: 9px;
  font-size: 4em;
  text-decoration: underline;
}

.div-block-2 {
  grid-column-gap: 0px;
  grid-row-gap: 50px;
  flex-direction: column;
  display: flex;
}

.div-block-2.contact {
  flex-direction: column;
  align-self: auto;
  align-items: center;
}

.error-message {
  background-color: #8f5f5f;
  margin-left: 0;
  margin-right: 0;
  padding-top: 60px;
  padding-bottom: 60px;
}

.text-block-2 {
  text-align: left;
  padding-left: 134px;
  font-size: 1.5em;
}

.success-message {
  background-color: #00b3a1;
  height: 300px;
}

.text-block-3 {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 114px;
  font-size: 1.5em;
  display: block;
}

.text-span-5 {
  color: var(--orange-main);
}

.grid-3-columns {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.empty-state {
  text-align: center;
  background-color: #fff;
  border: 1px solid #eff0f6;
  border-radius: 11px;
  padding: 26px 24px;
  box-shadow: 0 2px 12px #14142b14;
}

.team-grid {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  width: 100%;
  max-width: 1160px;
  margin: 60px auto 50px;
  display: grid;
}

.pd---content-inside-card-2 {
  padding: 23px 28px 48px;
}

.text-decoration-none {
  text-decoration: none;
}

.text-200 {
  line-height: 20px;
}

.text-200.medium {
  font-weight: 500;
}

.text-200.medium.mg-bottom-16px {
  color: #272727b8;
  margin-bottom: 14px;
  font-size: 1.2em;
}

.text-200.medium.mg-bottom-16px.leon {
  font-size: 1.5em;
}

.text-200.bold {
  font-weight: 700;
}

.social-icon-square {
  color: var(--dark-turquoise);
  background-color: #00b3a11c;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  text-decoration: none;
  transition: box-shadow .3s, background-color .3s;
  display: flex;
}

.social-icon-square:hover {
  color: var(--light-grey);
  background-color: #f1f1f1;
  box-shadow: 0 4px 8px #0003;
}

.social-icon-font {
  line-height: 21px;
}

.social-icon-font.filled-icons {
  color: var(--dark-turquoise);
  font-family: Font Awesome Brands, sans-serif;
  font-size: 1.6em;
  font-weight: 400;
}

.social-icon-font.filled-icons:hover {
  color: var(--dark-turquoise);
}

.social-icon-font.filled-icons.youtube-icon {
  font-size: 1.4em;
}

.heading-link {
  color: var(--dark-grey);
  cursor: auto;
  margin-bottom: 8px;
  padding-top: 0;
  font-size: 2em;
  transition: color .3s;
}

.heading-link:hover {
  color: var(--orange-main);
}

.heading-link.leon {
  font-size: 2.5em;
}

.avatar-image.link {
  filter: saturate(30%);
  transition: transform .3s;
}

.avatar-image.link:hover {
  transform: scale(1.1);
}

.mg-bottom-32px {
  color: #27272799;
  margin-bottom: 26px;
  font-size: 1em;
}

.mg-bottom-32px.leon {
  font-size: 1.2em;
}

.testimonial-v4-image-wrapper {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  overflow: hidden;
  transform: translate(0);
}

.social-media-grid-top {
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, 36px);
  justify-content: start;
  justify-items: start;
}

.social-media-grid-top.center {
  justify-content: center;
  justify-items: center;
}

.text-center {
  text-align: center;
}

.text-span-6 {
  font-weight: 300;
}

.text-block-4 {
  color: var(--dark-grey);
  margin-left: 62px;
  font-weight: 300;
}

.text-block-5 {
  color: var(--dark-grey);
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.3em;
  font-weight: 200;
  line-height: 1.3em;
}

.text-block-6 {
  color: var(--dark-grey);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.3em;
}

.div-block-4 {
  background-color: #00b3a117;
  border-radius: 1.5em;
  margin-bottom: 39px;
  margin-left: 125px;
  margin-right: 125px;
  padding: 22px 26px;
}

.div-block-4.white {
  background-color: var(--white);
}

.text-block-7 {
  color: var(--dark-grey);
  font-size: 1.8em;
  line-height: 1.3em;
}

.text-block-7.impressum {
  color: var(--light-grey);
  font-family: sofia-pro, sans-serif;
  font-size: 1.2em;
}

.text-span-7 {
  color: var(--dark-grey);
  padding-left: 4px;
  font-family: Font Awesome, sans-serif;
  font-weight: 900;
  position: static;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.cookie-modal_content-wrap {
  padding: 1.75rem 2rem;
}

.cookie-modal_content-wrap.is-small {
  padding: 1.5rem;
}

.cookie-modal_description {
  color: var(--dark-grey);
}

.cookie-modal_closebutton {
  z-index: 5;
  cursor: pointer;
  background-color: #f3f7f2;
  border-radius: .25rem;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 1.25rem 1.25rem -2.5rem auto;
  transition: background-color .2s cubic-bezier(.25, .46, .45, .94);
  display: flex;
  position: relative;
}

.cookie-modal_button {
  color: #fff;
  text-align: center;
  background-color: #515750;
  border-radius: .25rem;
  padding: .875em 1.5em 1rem;
  font-size: .9375rem;
  text-decoration: none;
  transition: color .2s cubic-bezier(.25, .46, .45, .94), background-color .2s cubic-bezier(.25, .46, .45, .94);
}

.cookie-modal_button:hover {
  background-color: #262926;
}

.cookie-modal_button.is-secondary {
  color: #515750;
  background-color: #0000;
  padding-left: 0;
  padding-right: 0;
  font-size: .875rem;
  font-weight: 700;
}

.cookie-modal_button.is-secondary:hover {
  text-decoration: underline;
}

.cookie-modal_component {
  background-color: #fff;
  border-radius: .25rem;
  flex-direction: column;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  font-size: .9375rem;
  line-height: 1.4;
  display: flex;
  position: relative;
  box-shadow: 0 4px 1rem #2629260d;
}

.screenreader-only {
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow: hidden;
}

.cookie-modal_styles {
  display: none;
}

.cookie-modal_closebutton_line {
  background-color: #515750;
  width: 1rem;
  height: 2px;
  position: absolute;
}

.cookie-modal_closebutton_line.is-right {
  transform: rotate(-45deg);
}

.cookie-modal_closebutton_line.is-left {
  transform: rotate(45deg);
}

.cookie-modal_title {
  margin-bottom: .1875em;
  font-size: 1.25rem;
  font-weight: 700;
}

.cookie-modal_title.is-small {
  color: var(--dark-grey);
  font-size: 1.1875rem;
}

.cookie-popup_component {
  z-index: 9500;
  max-width: 25rem;
  position: fixed;
  inset: auto 1.25rem 1.25rem auto;
}

.cookie-modal_button-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color: #f3f7f2;
  border-radius: 0 0 .25rem .25rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
}

.cookie-modal_button-wrap.is-small {
  justify-content: flex-start;
  padding: 1.5rem;
}

.cookie-modal_link {
  transition: color .15s cubic-bezier(.25, .46, .45, .94);
}

.image-7 {
  object-fit: cover;
  border-top-left-radius: 1.5em;
  border-bottom-left-radius: 1.5em;
}

.social-icon-square-2 {
  background-color: #f2f1ff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  text-decoration: none;
  transition: background-color .3s, color .3s;
  display: flex;
}

.social-icon-square-2:hover {
  color: #fff;
  background-color: #4a3aff;
}

.avatar-circle {
  border-radius: 50%;
  width: 100%;
  overflow: hidden;
  transform: translate(0);
}

.avatar-circle._06 {
  width: 160px;
  max-width: 160px;
  height: 160px;
  max-height: 160px;
}

.avatar-circle._06.mg-bottom-40px {
  margin-top: 17px;
  margin-bottom: 19px;
}

.heading-link-2 {
  transition: color .3s;
}

.heading-link-2:hover {
  color: #4a3aff;
}

.mg-top-16px {
  margin-top: 16px;
}

.body-2 {
  background-color: var(--light-grey);
}

.span-1 {
  color: #d60000;
}

.span-2 {
  color: #ccce00;
}

.span-3 {
  color: #07be00;
}

.span-4 {
  color: #0000cf;
}

.span-5 {
  color: #7900ce;
}

.text-span-13, .text-span-14 {
  font-weight: 700;
}

.div-block-5 {
  margin-left: 100px;
  margin-right: 100px;
}

.text-block-8 {
  font-size: 2vw;
}

.tab-link-tab-1 {
  padding-top: 3px;
  padding-bottom: 3px;
}

.tab-link-tab-1.w--current {
  padding: 14px 41px;
}

.tab-link-leistungen.w--current {
  padding: 15px 111px;
}

.tab-text {
  text-transform: lowercase;
  font-size: 2vw;
  font-weight: 700;
}

.tabs-menu-wrapper {
  background-color: var(--dark-grey);
  border-radius: 999em;
  align-items: center;
  padding: .7em .8em;
  display: flex;
}

.tabs-content-wrapper {
  margin-top: 2em;
  overflow: visible;
}

.tab-content-inner {
  justify-content: center;
  align-items: center;
  display: flex;
}

.tab-content-title {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  color: #fff;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 3em;
  font-weight: 500;
  line-height: 1;
  position: absolute;
}

.tab-content-image {
  opacity: .15;
  border-radius: 1.4em;
}

.tabs-nav-background {
  z-index: 0;
  background-color: #fff;
  border-radius: 999em;
  position: absolute;
  inset: 0%;
  box-shadow: 0 22px 2.5em #0006;
}

.tabs {
  max-width: 1100px;
}

.first-example-with-background {
  margin-left: 100px;
  margin-right: 100px;
}

.tabs-nav-text {
  z-index: 1;
  text-transform: lowercase;
  font-size: 2vw;
  font-weight: 700;
  position: relative;
}

.tabs-nav-item {
  color: #fff;
  text-align: center;
  background-color: #0000;
  border-radius: 999em;
  flex: 1;
  padding: 1em 2em;
  transition: all .3s;
  position: relative;
}

.tabs-nav-item:hover {
  background-color: #525252;
}

.tabs-nav-item.w--current {
  color: #000;
  background-color: #0000;
  font-weight: 500;
}

.div-block-6 {
  justify-content: center;
  align-items: center;
  margin-top: 46px;
  display: flex;
}

.text-span-15 {
  font-family: Font Awesome, sans-serif;
  font-weight: 400;
}

.text-span-16 {
  padding-right: 6px;
  font-family: Font Awesome, sans-serif;
  font-weight: 900;
}

.text-block-9 {
  color: var(--dark-grey);
}

.text-block-10 {
  color: var(--dark-grey);
  font-size: .6em;
  font-weight: 300;
  line-height: 1.5;
}

.text-block-10.anbieten {
  padding-left: 24px;
  font-size: .5em;
}

.text-block-10.bullet-points {
  flex-flow: row;
  flex: 0 auto;
  justify-content: center;
  align-self: auto;
  align-items: center;
  padding-left: 24px;
  display: block;
}

.text-span-17 {
  color: var(--orange-main);
  margin-right: 4px;
  font-family: Font Awesome, sans-serif;
  font-size: .3em;
  font-weight: 900;
  text-decoration: none;
}

.bold-text {
  flex: none;
}

.div-block-7 {
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  display: flex;
}

.text-block-11 {
  display: flex;
}

.home-hero-section {
  flex-direction: column;
  align-items: center;
  padding-top: 4em;
  padding-bottom: 4em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.home-hero-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.home-hero-section.story {
  background-color: var(--orange-main);
}

.home-hero-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.home-hero-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.home-hero-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.home-hero-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.home-hero-section.white-section {
  background-color: var(--light-grey);
}

.home-hero-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.home-hero-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.home-about-section {
  flex-direction: column;
  align-items: center;
  padding-top: 10em;
  padding-bottom: 10em;
  font-family: Sofia Pro, sans-serif;
  line-height: 1px;
  display: flex;
}

.home-about-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.home-about-section.story {
  background-color: var(--orange-main);
}

.home-about-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.home-about-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.home-about-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.home-about-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.home-about-section.white-section {
  background-color: var(--light-grey);
}

.home-about-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.home-about-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.home-about-section.case-study {
  background-color: var(--dark-grey);
  color: var(--dark-grey);
  object-fit: fill;
  padding-top: 4.9em;
  padding-bottom: 68.9em;
}

.home-vision-section {
  flex-direction: column;
  align-items: center;
  padding-top: 4.3em;
  padding-bottom: 7em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.home-vision-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.home-vision-section.story {
  background-color: var(--orange-main);
}

.home-vision-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.home-vision-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.home-vision-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.home-vision-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.home-vision-section.white-section {
  background-color: var(--light-grey);
}

.home-vision-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.home-vision-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.vison-button {
  background-color: var(--dark-grey);
  border-radius: 8em;
  flex: 0 auto;
  padding: 1.5rem 1.25rem;
  font-family: sofia-pro, sans-serif;
  font-size: 1.25em;
  font-weight: 600;
  transition: color .3s, box-shadow .3s;
}

.vison-button:hover {
  color: #9afff5;
  box-shadow: 0 6px 10px 1px #00ffe663;
}

.vison-button:active {
  box-shadow: none;
}

.vison-button.button-v2 {
  border: 2px solid var(--light-grey);
  padding: 8px 13px;
  font-size: 1.2vw;
  font-weight: 300;
  line-height: 1.3em;
}

.vison-button.button-v2.leistungen-button {
  margin-top: 12px;
  padding: 16px 47px;
  font-weight: 400;
}

.leon-image {
  border-radius: 1.5em;
  flex: 1;
  width: 100%;
  transition: box-shadow .3s;
  box-shadow: -1px 16px 30px -5px #0003;
}

.leon-image:hover {
  box-shadow: 0 0 0 -3px #0003;
}

.leon-image.leistungen {
  order: 1;
}

.leon-image.leistungen.reversed {
  object-fit: cover;
  order: -1;
  overflow: hidden;
}

.container-large {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
}

.container-large.footer {
  align-items: stretch;
}

.container-large.team-container {
  align-items: center;
}

.container-large.black {
  margin-top: 12px;
}

.container-medium {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
}

.container-medium.footer {
  align-items: stretch;
}

.container-medium.team-container {
  align-items: center;
}

.container-medium.black {
  margin-top: 12px;
}

.container-medium.case-study-1 {
  flex-wrap: wrap;
  width: 80%;
  margin-top: 74px;
}

.home-about-wrapper {
  text-align: center;
}

.home-about-title {
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 26px;
  font-family: sofia-pro, sans-serif;
  font-size: 3em;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
}

.home-video-section {
  background-color: var(--light-grey);
  flex-direction: column;
  align-items: center;
  padding-top: 6em;
  padding-bottom: 7em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.home-video-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.home-video-section.story {
  background-color: var(--orange-main);
}

.home-video-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.home-video-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.home-video-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.home-video-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.home-video-section.white-section {
  background-color: var(--light-grey);
}

.home-video-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.home-video-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.home-story-section {
  background-color: var(--orange-main);
  flex-direction: column;
  align-items: center;
  padding-top: 7em;
  padding-bottom: 7em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.home-story-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.home-story-section.story {
  background-color: var(--orange-main);
}

.home-story-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.home-story-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.home-story-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.home-story-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.home-story-section.white-section {
  background-color: var(--light-grey);
}

.home-story-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.home-story-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.section-header-wrapper.is__center {
  text-align: center;
}

/* Custom spacing for team section headline */
.home-team-section .section-header-wrapper.is__center {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.story-grid {
  grid-column-gap: 5rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 60px;
  display: grid;
}

.home-story-content {
  color: var(--light-grey);
  letter-spacing: 0;
  font-family: sofia-pro, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.5;
}

.button-story {
  background-color: var(--dark-grey);
  text-align: center;
  border-radius: 20em;
  flex: 0 auto;
  padding: 20px 40px;
  font-family: sofia-pro, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  transition: color .3s, box-shadow .3s;
}

.button-story:hover {
  color: #9afff5;
  box-shadow: 0 6px 10px 1px #00ffe663;
}

.button-story:active {
  box-shadow: none;
}

.button-story.button-v2 {
  border: 2px solid var(--light-grey);
  padding: 8px 13px;
  font-size: 1.2vw;
  font-weight: 300;
  line-height: 1.3em;
}

.button-story.button-v2.leistungen-button {
  margin-top: 12px;
  padding: 16px 47px;
  font-weight: 400;
}

.story-button-wrap {
  margin-top: 60px;
}

.home-projects-section {
  flex-direction: column;
  align-items: center;
  padding-top: 7em;
  padding-bottom: 7em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.home-projects-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.home-projects-section.story {
  background-color: var(--orange-main);
}

.home-projects-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.home-projects-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.home-projects-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.home-projects-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.home-projects-section.white-section {
  background-color: var(--light-grey);
}

.home-projects-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.home-projects-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.primary-title {
  color: var(--light-grey);
  letter-spacing: 0;
  text-transform: lowercase;
  font-family: sofia-pro, sans-serif;
  font-size: 3.5rem;
  line-height: 1.3;
}

.primary-title.line-1 {
  text-align: center;
  letter-spacing: 0;
  text-transform: lowercase;
  font-size: 80px;
  font-weight: 600;
  line-height: 1.2;
  position: static;
}

.primary-title.line-2 {
  font-family: Sofia Pro, sans-serif;
}

.primary-title.black {
  color: var(--dark-grey);
  margin-bottom: -3px;
  font-family: sofia-pro, sans-serif;
}

.primary-title.black.contact {
  margin-top: -32px;
}

.primary-title.leistungen {
  color: var(--dark-grey);
  transform-style: preserve-3d;
  transition: transform .4s;
}

.primary-title.leistungen:hover {
  transform: translate3d(0, 40px, 64px)skew(2deg, -6deg);
}

.home-slider-wrapper {
  margin-top: 60px;
}

.project-grid {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 60px;
  display: grid;
}

.home-brand-section {
  flex-direction: column;
  align-items: center;
  padding-top: 4.3em;
  padding-bottom: 7em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.home-brand-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.home-brand-section.story {
  background-color: var(--orange-main);
}

.home-brand-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.home-brand-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.home-brand-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.home-brand-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.home-brand-section.white-section {
  background-color: var(--light-grey);
}

.home-brand-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.home-brand-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.home-team-section {
  background-color: var(--light-grey);
  flex-direction: column;
  align-items: center;
  padding-top: 4.3em;
  padding-bottom: 0;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.home-team-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.home-team-section.story {
  background-color: var(--orange-main);
}

.home-team-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.home-team-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.home-team-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.home-team-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.home-team-section.white-section {
  background-color: var(--light-grey);
}

.home-team-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.home-team-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.team-image {
  object-fit: cover;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.team-leo-content-wrap {
  padding: 40px 28px;
}

.team-bottom-section {
  grid-row-gap: 3rem;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.team-bottom-section.company {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: -56px;
  padding-top: 0;
  padding-bottom: 0;
}

.team-bottom-section.slider-wrap {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
}

.team-bottom-section.slider-wrap:active {
  transform: rotate(0);
}

.team-bottom-section.story-content {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
}

.team-bottom-section.story-title {
  margin-bottom: 3.4em;
}

.team-bottom-section.story-title.lets-talk {
  grid-column-gap: 10px;
  grid-row-gap: 30px;
  flex-direction: column;
}

.team-bottom-section.work {
  grid-column-gap: 2em;
  grid-row-gap: 1.5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 5em;
  display: grid;
}

.team-bottom-section.hero-title, .team-bottom-section.template {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.team-bottom-section.project-headline {
  flex-flow: column;
  flex: 0 auto;
  align-self: flex-start;
  align-items: flex-start;
  width: auto;
}

.team-bottom-section.leistungen {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: wrap;
  margin-bottom: 30px;
}

.team-bottom-section.leistungen.reversed {
  margin-top: 30px;
  margin-bottom: 0;
}

.team-bottom-content {
  background-color: #00b3a117;
  border-radius: 12px;
  padding: 20px;
}

.team-bottom-content.white {
  background-color: var(--white);
}

.team-bottom-text-content {
  color: var(--dark-grey);
  font-family: sofia-pro, sans-serif;
  font-size: 1.3em;
  font-weight: 200;
  line-height: 1.3em;
}

.team-bottom-text {
  color: var(--dark-grey);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  font-family: sofia-pro, sans-serif;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.3em;
}

.team-bottom-block {
  background-color: var(--white);
  border-radius: 12px;
  padding: 20px;
}

.team-bottom-block.white {
  background-color: var(--white);
}

.cta-section-wrapper {
  background-color: var(--orange-main);
  text-align: center;
  border-radius: 16px;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  line-height: 1.3px;
}

.cta-text-content {
  margin-top: 10px;
  font-family: sofia-pro, sans-serif;
  font-size: 1.5rem;
  line-height: 1.3em;
}

.cta-text-content.impressum {
  color: var(--light-grey);
  font-size: 1.2em;
}

.section-cta {
  background-color: var(--light-grey);
  flex-direction: column;
  align-items: center;
  padding-top: 4em;
  padding-bottom: 8em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.section-cta.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.section-cta.story {
  background-color: var(--orange-main);
}

.section-cta.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.section-cta.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.section-cta.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.section-cta.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.section-cta.white-section {
  background-color: var(--light-grey);
}

.section-cta.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.section-cta.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.section-contact-form {
  flex-direction: column;
  align-items: center;
  padding-top: 4.3em;
  padding-bottom: 7em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.section-contact-form.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.section-contact-form.story {
  background-color: var(--orange-main);
}

.section-contact-form.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.section-contact-form.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.section-contact-form.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.section-contact-form.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.section-contact-form.white-section {
  background-color: var(--light-grey);
}

.section-contact-form.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.section-contact-form.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.contact-section-wrapper {
  margin-top: 60px;
}

.home-hero-title {
  color: var(--light-grey);
  text-align: center;
  letter-spacing: 0;
  text-transform: lowercase;
  margin-bottom: 40px;
  font-family: sofia-pro, sans-serif;
  font-size: 5rem;
  font-weight: 600;
  line-height: 1.2;
  position: static;
}

.small-card {
  background-color: #fff;
  border: 1px solid #eff0f6;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  display: flex;
  box-shadow: 0 0 20px #14142b0f;
}

.small-card.link-card {
  background-color: var(--light-grey);
  color: #6e7191;
  transform-style: preserve-3d;
  border-style: none;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .3s, color .3s;
}

.small-card.link-card:hover {
  transform: scale3d(.96, .96, 1.01);
}

.small-card.leon-card {
  grid-column-gap: 4rem;
  display: flex;
}

.small-card.content-center {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 24px;
  display: flex;
}

.small-card.content-center.team-v1 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.team-name {
  color: var(--dark-grey);
  cursor: auto;
  margin-bottom: 8px;
  padding-top: 0;
  font-family: sofia-pro, sans-serif;
  font-size: 2.5em;
  line-height: 1.3;
  transition: color .3s;
}

.team-name:hover {
  color: var(--orange-main);
}

.team-name.leon {
  font-size: 2.5em;
}

.team-designation {
  color: #27272799;
  font-family: sofia-pro, sans-serif;
  font-size: 1.5em;
  line-height: 1.4;
}

.team-designation.small {
  font-size: 1.25em;
}

.team-box-content {
  color: #27272799;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: sofia-pro, sans-serif;
}

.vid-content {
  color: var(--orange-main);
  text-align: right;
  flex-direction: row;
  flex: 0 auto;
  justify-content: flex-end;
  align-self: center;
  margin: 0;
  font-family: sofia-pro, sans-serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  display: block;
}

.about-anim-title {
  color: var(--dark-grey);
  letter-spacing: 0;
  text-transform: lowercase;
  transform-style: preserve-3d;
  margin-bottom: 40px;
  font-family: sofia-pro, sans-serif;
  font-size: 4em;
  line-height: 1;
  transition: transform .4s;
}

.about-anim-title:hover {
  transform: translate3d(0, 40px, 64px)skew(2deg, -6deg);
}

.about-leon-section {
  flex-direction: column;
  align-items: center;
  padding-top: 10em;
  padding-bottom: 10em;
  font-family: Sofia Pro, sans-serif;
  display: flex;
}

.about-leon-section.padding-bottom-0 {
  padding-top: 5.3em;
  padding-bottom: 0;
}

.about-leon-section.story {
  background-color: var(--orange-main);
}

.about-leon-section.footer {
  padding-top: 0;
  padding-bottom: 3.5em;
}

.about-leon-section.hero {
  padding-top: 4em;
  padding-bottom: 0;
}

.about-leon-section.colored-section {
  background-color: var(--light-grey);
  color: var(--light-grey);
}

.about-leon-section.firstsection {
  padding-top: 10em;
  padding-bottom: 10em;
}

.about-leon-section.white-section {
  background-color: var(--light-grey);
}

.about-leon-section.white-section.small-bottom {
  padding-bottom: 2.6em;
}

.about-leon-section.white-section.zero-buttom {
  padding-bottom: 1.1em;
}

.about-leon-row {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.about-leon-text-content {
  color: var(--dark-grey);
  text-align: left;
  font-family: sofia-pro, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
}

.about-leon-text-content.case-study {
  color: var(--light-grey);
}

.about-leon-image {
  object-fit: cover;
  border-radius: 24px;
  width: 100%;
}

.about-leon-row-grid {
  grid-column-gap: 16px;
  grid-row-gap: 6rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin-top: 100px;
  display: grid;
}

.about-tab-section {
  padding-top: 10em;
  padding-bottom: 2.3em;
}

.about-tab-section.case-study {
  padding-top: 5.9em;
}

.about-tab-wrapper {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.tab-menu {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-bottom: 1px #a5a5a5;
  grid-template-rows: auto;
  grid-template-columns: max-content max-content max-content;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: grid;
}

.services-tabs_image {
  object-fit: contain;
  border-radius: .5rem;
  width: 40rem;
  height: 26rem;
  margin-left: auto;
  margin-right: auto;
}

.margin-bottom {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.max-width-full {
  width: 100%;
  max-width: none;
}

.margin-top {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.button-is-webflow {
  color: #fff;
  text-align: center;
  background-color: #4353ff;
  border-radius: 10rem;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  font-weight: 600;
  transition: all .3s;
  display: inline-block;
}

.button-is-webflow:hover {
  color: #4353ff;
  background-color: #fff;
  box-shadow: inset 0 0 0 2px #4353ff;
}

.tab-body {
  color: #000;
  background-color: #fff;
  background-image: linear-gradient(#ffffffbf, #ffffffbf), url('../images/mymind-mI-bnIqbeZ0-unsplash.jpg');
  background-position: 0 0, 0 0;
  background-size: auto, cover;
  border-radius: 2rem 2rem 1.2rem 1.2rem;
}

.tabs-layout_component {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  border-top-right-radius: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr .8fr;
  grid-auto-columns: 1fr;
  align-items: center;
  padding: 2rem 1rem;
  display: grid;
}

.text-size-medium {
  font-size: 1.25rem;
}

.tab-component {
  background-image: linear-gradient(56deg, #4353ff, #151d53);
  border-radius: 2rem 2rem 1.25rem 1.25rem;
  box-shadow: 1px 1px 20px -4px #4253ff1a;
}

.tabs-layout_image-wrapper {
  border-radius: 1rem;
}

.tab-link {
  color: #fff;
  text-align: center;
  background-color: #0000;
  border-top: .125rem solid #0000;
  border-radius: 10rem;
  margin-bottom: 0;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: .75rem 2.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  transition: all .2s;
}

.tab-link:hover {
  background-color: #fff3;
}

.tab-link.w--current {
  color: #151d53;
  background-color: #f5f5f7;
  border-top: .125rem #4589ff;
  border-bottom: 2px #00c7c7;
  border-radius: 10rem;
}

.text-color-yellow {
  color: #fac710;
}

.tab-content-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 60px;
}

.tab-title {
  margin-bottom: 40px;
  font-family: sofia-pro, sans-serif;
  font-size: 3.5rem;
  line-height: 1.3;
}

.tab-large-text {
  font-family: sofia-pro, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.3;
}

.tab-list-wrapper {
  grid-row-gap: 1.5rem;
  flex-direction: column;
  margin-top: 40px;
  margin-left: 20px;
  display: flex;
}

.tab-list-item {
  grid-column-gap: 1rem;
  align-items: flex-start;
  display: flex;
}

.tab-icon {
  flex: none;
}

.list-icon {
  height: 16px;
}

.tab-list-text {
  font-size: 1.5rem;
}

.tab-italic {
  margin-top: 40px;
  font-family: sofia-pro, sans-serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
}

.tab-button-wrapper {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.image-8 {
  width: 100%;
  height: auto;
}

.case-study-hero-section {
  padding-top: 4em;
  padding-bottom: 4em;
  padding-right: 0;
}

.image-9 {
  border-radius: 24px;
  width: 100%;
}

.case-study-hero-text {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  color: var(--dark-grey);
  flex-direction: column;
  align-items: flex-start;
  margin-top: 45px;
  margin-bottom: 45px;
  padding-left: 90px;
  padding-right: 90px;
  display: flex;
}

.text-block-12 {
  font-family: sofia-pro, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
}

.text-span-18 {
  font-family: Font Awesome, sans-serif;
  font-size: .1vw;
  font-weight: 900;
}

.div-block-8 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 2fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-around;
  margin: 30px 65px;
  display: grid;
}

.text-block-13 {
  margin-bottom: 10px;
  font-family: sofia-pro, sans-serif;
  font-size: 1.125rem;
  line-height: 1.4;
}

.image-10 {
  border-radius: 24px;
  width: 100%;
}

.case-study-block {
  background-color: var(--white);
  border-radius: 24px;
  padding: 30px;
  font-family: sofia-pro, sans-serif;
}

.case-study-block-heading {
  color: var(--dark-grey);
  margin-bottom: 12px;
  font-size: 1rem;
}

.text-block-14 {
  color: var(--dark-grey);
  font-size: 1.125rem;
  line-height: 1.4;
}

.link-2 {
  color: var(--dark-grey);
  transition: color .4s;
}

.link-2:hover {
  color: #2727278c;
}

.iphone-shape {
  z-index: 1;
  width: 100%;
  position: relative;
}

.iphone14-screen {
  z-index: 0;
  object-fit: cover;
  border-radius: 3%;
  width: 90.2%;
  height: 95.8%;
  position: absolute;
  top: 2.2%;
  left: 5.1%;
  overflow: hidden;
}

.mockup-wrapper {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 81px;
  margin-right: 81px;
  display: flex;
}

.section-intro-mockups {
  border: 0px none var(--light-grey);
  background-color: var(--light-grey);
  background-image: linear-gradient(to bottom, transparent 13%, var(--dark-grey) 53%);
  position: relative;
}

.iphone-mockup {
  z-index: 1;
  width: 28%;
  position: relative;
  overflow: hidden;
}

.iphone-mockup.is-second {
  margin-top: 11%;
}

.container-w1 {
  width: 100%;
  max-width: 95em;
  margin-left: auto;
  margin-right: auto;
}

.iphone14-image {
  width: 100%;
}

.mockup-overlap {
  background-color: var(--dark-grey);
  height: 25em;
  position: absolute;
  inset: auto 0% 0%;
}

.heading-7 {
  color: var(--light-grey);
  font-family: sofia-pro, sans-serif;
}

.text-span-19 {
  font-weight: 700;
}

.grid-2 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.youtube {
  object-fit: fill;
  border-radius: 20px;
}

.video {
  object-fit: fill;
}

.background-video {
  padding-top: 0;
}

.text-block-15, .text-block-16, .text-block-17, .bold-text-2, .heading-8 {
  font-family: sofia-pro, sans-serif;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 4em;
  }

  h2 {
    font-size: 3.5em;
  }

  h3 {
    font-size: 3em;
  }

  h4 {
    font-size: 2.5em;
  }

  h5 {
    font-size: 2em;
  }

  h6 {
    font-size: 1.5em;
  }

  p {
    font-size: 1em;
  }

  blockquote {
    font-size: 2em;
  }

  .section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .container {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .grid-quarters {
    grid-column-gap: 24px;
  }

  .grid-quarters.style-guide {
    grid-template-columns: 1fr;
  }

  .grid.about {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .grid.blog {
    grid-template-columns: 1fr 1fr;
  }

  .text-display-1 {
    font-size: 4em;
  }

  .grid-thirds {
    grid-column-gap: 24px;
  }

  .nav-link {
    border-bottom: 1px solid #1c1c1c;
    width: 100%;
    margin-left: 0;
    padding: 1.25em 1.5em;
  }

  .text-display-2 {
    font-size: 3.5em;
  }

  .text-display-3 {
    font-size: 3em;
  }

  .text-display-4 {
    font-size: 2.5em;
  }

  .project-title {
    font-size: 2em;
  }

  .text-display-6 {
    font-size: 1.5em;
  }

  .text-display-7 {
    font-size: 1.25em;
  }

  .text-body-1 {
    font-size: 2em;
  }

  .nav-btn {
    cursor: pointer;
    display: flex;
  }

  .header-nav {
    z-index: -1;
    background-color: #0d0d0d;
    flex-direction: column;
    justify-content: center;
    height: auto;
    display: none;
    position: fixed;
    inset: 4em 0% auto;
  }

  .nav-btn-lottie {
    width: 1.5em;
    height: 1.5em;
  }

  .header {
    z-index: 2000;
    background-color: #0d0d0d;
    border-bottom: 1px solid #1c1c1c;
    height: 4em;
  }

  .reel-contain.home-hero {
    height: 0;
    padding-top: 56.25%;
  }

  .reel-contain.blog {
    height: 0;
    margin-top: 3em;
    padding-top: 56.25%;
  }

  .reel-contain.slide-wrap {
    height: 28em;
  }

  .row {
    padding-left: 0;
    padding-right: 0;
  }

  .row.story-title {
    margin-bottom: 3em;
  }

  .row.work {
    grid-template-columns: 1fr;
    margin-top: 3em;
  }

  .about-card.content {
    padding-top: 8em;
    padding-bottom: 8em;
  }

  .slider {
    height: 28em;
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .slider-mask {
    height: 28em;
  }

  .clients-wrap {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .blog-card-bg {
    width: 10em;
    height: 10em;
  }

  .logo-footer {
    width: 40%;
  }

  .footer-wrap {
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .footer-links {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .slider-left-arrow {
    width: 40px;
    height: 40px;
    inset: auto auto -56px 0%;
  }

  .slider-right-arrow {
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -501px;
    margin-left: 670px;
    position: fixed;
    inset: auto auto -56px 56px;
  }

  .slider-arrow-icon.right, .slider-arrow-icon.left {
    width: 40px;
    height: 40px;
  }

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

  .form-step {
    padding-top: 5%;
    padding-bottom: 15%;
    padding-right: 10%;
  }

  .form-step.radio {
    padding-top: 20%;
    padding-bottom: 20%;
  }

  .form-radio-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .text-input {
    width: 100%;
  }

  .radio-button-field {
    margin-bottom: 30px;
  }

  .grid-3-columns {
    grid-template-columns: 1fr 1fr;
  }

  .team-grid {
    grid-column-gap: 1.5rem;
    max-width: 80%;
  }

  .mg-bottom-32px {
    margin-bottom: 24px;
  }

  .avatar-circle._06 {
    width: 140px;
    max-width: 140px;
    height: 140px;
    max-height: 140px;
  }

  .home-hero-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .home-hero-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .home-about-section {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .home-about-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .home-about-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .home-vision-section {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .home-vision-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .home-vision-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .container-large, .container-medium {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .home-about-title {
    font-size: 2.5em;
  }

  .home-video-section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .home-video-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .home-video-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .home-story-section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .home-story-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .home-story-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-content-wrap {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .home-projects-section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .home-projects-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .home-projects-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .primary-title {
    font-size: 3.5em;
    line-height: 1.2;
  }

  .project-grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .home-brand-section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .home-brand-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .home-brand-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .home-team-section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .home-team-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .home-team-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .team-image {
    border-radius: 12px;
    width: 100%;
  }

  .team-bottom-section {
    max-width: 80%;
    padding-left: 0;
    padding-right: 0;
  }

  .team-bottom-section.story-title {
    margin-bottom: 3em;
  }

  .team-bottom-section.work {
    grid-template-columns: 1fr;
    margin-top: 3em;
  }

  .team-bottom-text-content, .team-bottom-text {
    text-align: center;
    font-size: 1.2em;
  }

  .cta-text-content {
    font-size: 1.3rem;
  }

  .section-cta {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .section-cta.padding-bottom-0 {
    padding-bottom: 0;
  }

  .section-cta.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .section-contact-form {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .section-contact-form.padding-bottom-0 {
    padding-bottom: 0;
  }

  .section-contact-form.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .home-hero-title {
    font-size: 3.5rem;
  }

  .small-card.leon-card {
    flex-direction: column;
  }

  .vid-content {
    font-size: 1.5rem;
  }

  .about-anim-title {
    font-size: 4em;
  }

  .about-leon-section {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .about-leon-section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .about-leon-section.padding-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .about-leon-row {
    grid-template-columns: 1fr;
  }

  .about-tab-section {
    padding-top: 8em;
    padding-bottom: 8em;
  }

  .tab-menu {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-wrap: wrap;
    grid-template-columns: 1fr;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .services-tabs_image {
    height: 18rem;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .tabs-layout_component {
    grid-column-gap: 3rem;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    min-height: auto;
  }

  .tab-link {
    width: 80%;
    margin-left: .25rem;
    margin-right: .25rem;
    padding: 1rem 1.5rem;
  }

  .tab-link.w--current {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .tabs-layout_content {
    text-align: center;
  }

  .tab-content-wrapper {
    padding: 60px 40px;
  }

  .tab-title {
    margin-bottom: 20px;
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .tab-large-text {
    font-size: 1.25rem;
  }

  .mockup-overlap {
    height: 34vw;
  }

  .grid-2 {
    justify-content: stretch;
  }
}

@media screen and (max-width: 767px) {
  .section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .container {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .grid.about {
    max-width: 90%;
  }

  .grid.blog {
    grid-template-columns: 1fr;
  }

  .text-display-1 {
    font-size: 3em;
  }

  .grid-thirds.style-guide {
    grid-template-columns: 1fr 1fr;
  }

  .nav-link {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .text-display-2 {
    font-size: 2.5em;
  }

  .text-display-3 {
    font-size: 2em;
  }

  .text-display-4 {
    font-size: 1.75em;
  }

  .project-title {
    font-size: 1.5em;
  }

  .text-display-6 {
    font-size: 1.25em;
  }

  .text-display-7 {
    font-size: 1.125em;
  }

  .reel-contain.home-hero {
    padding-top: 65.25%;
  }

  .reel-contain.slide-wrap {
    height: 20em;
  }

  .reel.home-hero {
    border-radius: 1rem;
  }

  .reel.work {
    padding-bottom: 1.25em;
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .col._10-20 {
    max-width: 100%;
  }

  .row.story-content {
    flex-direction: column;
  }

  .row.story-title {
    margin-bottom: 3em;
  }

  .slider {
    height: 20em;
    margin-top: 3em;
  }

  .slider-mask {
    height: 20em;
  }

  .story-text {
    max-width: 100%;
    margin-bottom: 1em;
  }

  .clients-wrap {
    grid-template-columns: 1fr 1fr;
  }

  .blog-card {
    padding-top: 2em;
  }

  .pd---content-inside-card {
    padding: 32px 24px 40px;
  }

  .form-step {
    padding-bottom: 5%;
  }

  .text-alert {
    font-size: 16px;
    line-height: 16px;
  }

  .radio-label {
    font-size: 20px;
    line-height: 20px;
  }

  .input-label {
    font-size: 36px;
    line-height: 36px;
  }

  .radio-button-field {
    margin-bottom: 20px;
  }

  .grid-3-columns {
    grid-template-columns: 1fr;
  }

  .team-grid {
    max-width: 90%;
  }

  .pd---content-inside-card-2 {
    padding: 32px 24px 40px;
  }

  .text-200 {
    font-size: 16px;
    line-height: 18px;
  }

  .mg-bottom-32px.leon {
    font-size: 1em;
  }

  .cookie-modal_content-wrap {
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .cookie-modal_closebutton {
    margin-right: 1.25rem;
  }

  .cookie-modal_button-wrap {
    padding: 1.5rem;
  }

  .avatar-circle._06 {
    width: 120px;
    max-width: 120px;
    height: 120px;
    max-height: 120px;
  }

  .home-hero-section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .home-about-section, .home-vision-section {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .vison-button {
    font-size: 1.125em;
  }

  .container-large, .container-medium {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .home-video-section, .home-story-section {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .home-story-content {
    color: #fff;
  }

  .home-projects-section {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .primary-title {
    font-size: 3em;
  }

  .project-grid {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .home-brand-section {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .home-team-section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .team-leo-content-wrap {
    padding: 32px 24px 40px;
  }

  .team-bottom-section {
    max-width: 90%;
  }

  .team-bottom-section.story-content {
    flex-direction: column;
  }

  .team-bottom-section.story-title {
    margin-bottom: 3em;
  }

  .section-cta {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .section-contact-form {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .home-hero-title {
    margin-bottom: 0;
    font-size: 2.5rem;
  }

  .team-name {
    font-size: 2em;
  }

  .vid-content {
    font-size: 1.125rem;
  }

  .about-anim-title {
    font-size: 3em;
  }

  .about-leon-section {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .about-leon-text-content {
    font-size: 1.125rem;
  }

  .about-tab-section {
    padding-top: 6em;
    padding-bottom: 6em;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .tabs-layout_component {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .tab-content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mockup-wrapper {
    grid-column-gap: 10%;
    grid-row-gap: 10%;
    justify-content: center;
  }

  .iphone-mockup {
    width: 40%;
  }

  .iphone-mockup.is-second {
    order: 1;
    width: 52%;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 2.25em;
  }

  h3 {
    font-size: 2em;
  }

  h4 {
    font-size: 1.75em;
  }

  h5 {
    font-size: 1.5em;
  }

  h6 {
    font-size: 1.25em;
  }

  .section {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }

  .grid-quarters {
    grid-template-columns: 1fr 1fr;
  }

  .grid.about {
    max-width: 101%;
  }

  .text-display-1 {
    font-size: 2.5em;
  }

  .grid-thirds, .grid-thirds.style-guide {
    grid-template-columns: 1fr;
  }

  .rich-text h1 {
    font-size: 2em;
  }

  .rich-text h2 {
    font-size: 1.75em;
  }

  .rich-text h3 {
    font-size: 1.5em;
  }

  .rich-text h4 {
    font-size: 1.25em;
  }

  .rich-text h5 {
    font-size: 1em;
  }

  .rich-text h6 {
    font-size: .75em;
  }

  .rich-text p, .rich-text ul {
    font-size: 1em;
  }

  .rich-text blockquote {
    font-size: 1.5em;
  }

  .text-display-2 {
    font-size: 2em;
  }

  .text-body-1 {
    font-size: 1.5em;
  }

  .text-micro-1.spaced {
    letter-spacing: 0;
  }

  .logo-link {
    border-top: 1px #c4c4c4;
  }

  .logo-link.w--current {
    border-top-style: none;
  }

  .header {
    padding: 0;
  }

  .reel-contain.home-hero {
    padding-top: 100%;
  }

  .reel-contain.cta {
    height: 28em;
  }

  .reel-contain.slide-wrap {
    height: 14em;
  }

  .reel.home-hero {
    padding-left: .125em;
    padding-right: .125em;
  }

  .reel.work {
    border-radius: 1em;
  }

  .reel.project-video {
    border-radius: 8px;
    padding-left: .125em;
    padding-right: .125em;
  }

  .col._11-20, .col._6-20, .col._8-20, .col._3-20, .col._9-20, .col._5-20, .col._2-20, .col._12-20, .col._7-20, .col._1-20, .col._4-20, .col._13-20, .col._14-20, .col._15-20, .col._16-20, .col._17-20, .col._18-20, .col._19-20 {
    max-width: 100%;
  }

  .about-card.content {
    padding: 6em 1.25em;
  }

  .slider, .slider-mask {
    height: 14em;
  }

  .work-item {
    border-radius: 1em;
  }

  .clients-item {
    height: 8em;
    padding-left: 20px;
    padding-right: 20px;
  }

  .blog-card {
    height: 20em;
    padding-bottom: 1.25em;
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .blog-card-bg {
    width: 8em;
    height: 8em;
  }

  .logo-footer {
    width: 60%;
  }

  .footer-wrap {
    margin-top: 2.5rem;
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .footer-links {
    grid-column-gap: 1em;
    grid-row-gap: 0em;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .reel-title-mask {
    padding-left: .4em;
    padding-right: .4em;
  }

  .top-bar {
    font-size: 14px;
    line-height: 1.2;
  }

  .licenses-item {
    padding: 24px;
  }

  .mg-bottom-24px {
    margin-bottom: 16px;
  }

  .vide-wrap {
    justify-content: space-between;
  }

  .input-label {
    margin-bottom: 40px;
  }

  .grid-3-columns {
    grid-template-columns: 1fr;
  }

  .team-grid {
    max-width: 100%;
  }

  .social-icon-square {
    border-radius: 6px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    font-size: 14px;
  }

  .avatar-image {
    width: 100%;
  }

  .social-media-grid-top, .social-media-grid-top.center, .social-media-grid-top.center {
    grid-template-columns: repeat(auto-fit, 30px);
  }

  .cookie-modal_content-wrap.is-small {
    padding-bottom: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .cookie-modal_closebutton {
    margin-top: 1rem;
    margin-right: 1rem;
  }

  .cookie-modal_button {
    flex: auto;
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .cookie-modal_component {
    max-width: 100%;
  }

  .cookie-popup_component {
    max-width: 100%;
    inset: auto 0% 0%;
  }

  .cookie-modal_button-wrap.is-small {
    justify-content: space-between;
    padding: 1.25rem;
  }

  .social-icon-square-2 {
    border-radius: 6px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    font-size: 14px;
  }

  .home-hero-section, .home-about-section, .home-vision-section {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }

  .vison-button {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1em;
  }

  .home-about-title {
    font-size: 2em;
  }

  .home-video-section, .home-story-section {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }

  .button-story {
    font-size: 1em;
  }

  .home-projects-section {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }

  .primary-title {
    font-size: 2.25em;
  }

  .home-brand-section, .home-team-section {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }

  .team-leo-content-wrap {
    padding-left: 15px;
    padding-right: 15px;
  }

  .team-bottom-section {
    max-width: 100%;
  }

  .team-bottom-text-content, .team-bottom-text {
    font-size: 1.1em;
  }

  .cta-section-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-cta, .section-contact-form {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }

  .home-hero-title {
    font-size: 2em;
  }

  .team-name {
    font-size: 1.75em;
  }

  .team-designation {
    font-size: 1.25em;
  }

  .team-designation.small {
    font-size: 1.125em;
  }

  .team-box-content {
    margin-top: 10px;
  }

  .vid-content {
    flex: none;
    font-size: 1rem;
  }

  .about-anim-title {
    font-size: 2.5em;
  }

  .about-leon-section {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }

  .about-leon-image {
    max-height: 450px;
  }

  .services-tabs_image {
    height: 14rem;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .tabs-layout_component {
    grid-template-columns: 1fr;
  }

  .tab-link {
    width: 100%;
  }

  .tab-title {
    font-size: 2rem;
  }

  .tab-large-text {
    font-size: 1.125rem;
  }

  .tab-list-wrapper {
    margin-top: 20px;
    margin-left: 10px;
  }
}

#w-node-e9b50993-8880-c1c1-9d5a-2d5cb08f22fe-28fccd63, #w-node-_9c4e3bfa-b8ef-d3cf-3f35-bb9bafa13ee1-28fccd63, #w-node-_7f90bf18-484e-6c77-b756-dff1f1e7149d-28fccd63 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-c5fb2864-ebab-b0f6-4547-3975dbce3caf-28fccd63 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_888395db-8d41-a1f6-b80f-45572101a09d-28fccd63 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-e563f917-836b-8641-2cd2-bb54f91cf8dc-28fccd63 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-_9361ed1b-582a-aff1-2754-888f7babfa8d-28fccd63, #w-node-b9739509-ef1b-754b-2363-a1f195154819-28fccd63, #w-node-a8eb45e8-d53d-b0ca-d561-cd1bade33ae1-28fccd63, #w-node-_9e297178-ea1c-fb84-698e-47812cf94f1e-28fccd63, #w-node-_39fdca48-8a8c-ff02-a7f5-82506b0e6bdc-28fccd63, #w-node-fd56ca6e-7934-c775-6b0e-193297c1c6d4-28fccd63, #w-node-_5063f33e-c9cd-a2e4-bd1a-2fca4e8aeb27-28fccd63, #w-node-a0473834-6e6f-282f-b70c-15cec276a27a-28fccd63, #w-node-_058d3a3f-af44-42f8-0f75-d1f87eeaee6f-28fccd63, #w-node-abe71499-7bc6-7eea-94ae-fe8339ebd757-28fccd63, #w-node-c6ef8996-ba6e-090a-c305-238357b84588-28fccd63, #w-node-c9eefad4-8ef0-7c6b-bcc5-5a6b970bcead-28fccd63 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a8cbb6c1-d7f5-5593-8261-7aa0b1eaf9b2-28fccd63 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_6ed0b872-a43b-3f09-5b08-9c107c57532a-28fccd68, #w-node-e9c1cd67-2e60-8e72-ad27-cb227a1c5b6b-28fccd68, #w-node-_993d8232-f449-8cca-26aa-0a55ae7b77dd-28fccd68, #w-node-d3280e10-6221-6c8a-ca61-eef1f553214b-28fccd68, #w-node-_55c97012-044b-0b6c-524b-45dc2ff5bdfb-28fccd68, #w-node-c31e9841-a24d-337c-dd3f-a0b44d897163-28fccd68 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6ce95a03-1098-6add-2fca-26e4623a0e0b-28fccd69, #w-node-_113298a9-5c0d-3088-4998-9d182b9af0ef-28fccd69 {
  grid-area: span 1 / span 3 / span 1 / span 3;
  justify-self: end;
}

#w-node-_555938e2-1530-5faa-0b3c-645b9d516057-28fccd69, #w-node-b6dcff6f-c454-effa-66ca-5cdd4ec33c05-28fccd69, #w-node-a4801e37-71dd-362e-d78b-54ca493cd522-28fccd69, #w-node-a029a75a-60a2-b997-f29d-22de39135e08-28fccd69, #w-node-f7227ae0-3604-c604-eb23-237187d9ef91-28fccd69 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b512093b-625b-ea32-8835-eecc1d55929b-28fccd69, #w-node-e5e32c2d-6788-b701-d7e1-d1a34bc061a5-28fccd69, #w-node-_38b93e66-eef6-f94d-8249-c878569e8db9-28fccd69 {
  grid-area: span 1 / span 3 / span 1 / span 3;
  justify-self: end;
}

#w-node-_0b276c34-595b-eab7-ce01-040b43f3da42-de698b12, #w-node-db61334d-9400-72e3-777d-11c7abac88e9-de698b12, #w-node-_010cd1d3-bd32-21e2-4d01-3a501b182a3d-de698b12, #w-node-_010cd1d3-bd32-21e2-4d01-3a501b182a30-de698b12, #w-node-_2675bb9d-dea3-92c4-638a-0c9003db921f-09d8e202, #w-node-f5c07980-42b2-b442-4fa2-da537eeabc15-09d8e202, #w-node-_0b276c34-595b-eab7-ce01-040b43f3da42-09d8e202, #w-node-db61334d-9400-72e3-777d-11c7abac88e9-09d8e202 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f0ac9013-b47c-db23-95b6-769ae81911cd-09d8e202 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_13613ecb-fcd8-ff51-feda-600ec9f1ac69-09d8e202, #w-node-_3cf32db0-40ed-437b-e4f9-f6808b369781-09d8e202 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 991px) {
  #w-node-c5fb2864-ebab-b0f6-4547-3975dbce3caf-28fccd63 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_2cd6b208-c68c-d5e2-406b-277ab3438079-28fccd63, #w-node-ae7d9fe0-e580-c72a-eb50-5ad6995990b9-28fccd63, #w-node-_41982f7b-fd04-d703-128d-1003d7b7b0b5-28fccd63 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-_6ce95a03-1098-6add-2fca-26e4623a0e0b-28fccd69, #w-node-_113298a9-5c0d-3088-4998-9d182b9af0ef-28fccd69, #w-node-b512093b-625b-ea32-8835-eecc1d55929b-28fccd69, #w-node-e5e32c2d-6788-b701-d7e1-d1a34bc061a5-28fccd69, #w-node-_38b93e66-eef6-f94d-8249-c878569e8db9-28fccd69 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: end;
  }

  #w-node-db61334d-9400-72e3-777d-11c7abac88e9-de698b12, #w-node-db61334d-9400-72e3-777d-11c7abac88e9-09d8e202 {
    grid-area: 1 / 1 / 3 / 2;
  }
}


@font-face {
  font-family: 'Red hat display';
  src: url('../fonts/red-hat-display-bold.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red hat display';
  src: url('../fonts/red-hat-display-bold.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red hat display';
  src: url('../fonts/red-hat-display-bold.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red hat display';
  src: url('../fonts/red-hat-display-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Font Awesome Brands';
  src: url('../fonts/fa-brands-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Font Awesome';
  src: url('../fonts/fa-regular-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Font Awesome';
  src: url('../fonts/fa-solid-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-Extra-Light.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-UltraLight.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-ExtraLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofiapro-UltraLightItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Social Media Wall Styles */
.social-wall-wrapper {
  width: 100%;
  max-width: 100%;
  margin-top: 3rem;
}

.social-wall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  align-items: start;
}

.social-wall-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.social-wall-column.right {
  margin-top: 3rem;
}

.social-card {
  background-color: var(--white);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
}

.social-card.visible:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.social-embed {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-embed iframe {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Video wrapper for responsive videos */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

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

/* LinkedIn specific styling */
.social-embed[data-platform="linkedin"] {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.social-embed[data-platform="linkedin"] iframe {
  width: 100%;
  height: 620px;
  border: none;
}

/* Tablet responsive adjustments */
@media screen and (max-width: 991px) {
  .social-embed[data-platform="linkedin"] iframe {
    height: 480px;
  }
}

/* Mobile responsive adjustments */
@media screen and (max-width: 767px) {
  .social-embed[data-platform="linkedin"] iframe {
    height: 560px;
  }
}

@media screen and (max-width: 640px) {
  .social-embed[data-platform="linkedin"] iframe {
    height: 550px;
  }
}

@media screen and (max-width: 479px) {
  .social-embed[data-platform="linkedin"] iframe {
    height: 500px;
  }
}

@media screen and (max-width: 400px) {
  .social-embed[data-platform="linkedin"] iframe {
    height: 450px;
  }
}



/* Twitter placeholder styling */
.twitter-tweet {
  margin: 0 auto;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: sofia-pro, sans-serif;
  color: var(--dark-grey);
  padding: 20px;
}

/* Hide default tweet text once loaded */
.twitter-tweet-rendered {
  min-height: auto;
  display: block;
  padding: 0;
}

/* Twitter container styling */
.twitter-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Force Twitter widget centering */
.twitter-container iframe {
  margin: 0 auto !important;
}

/* Animation styles */
.social-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.social-embed iframe {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Twitter embeds should be visible by default */
.twitter-container iframe,
.twitter-container .twitter-tweet {
  opacity: 1 !important;
}

/* Responsive Design */
@media screen and (max-width: 991px) {
  .social-wall-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5rem;
    /* Align items to stretch for consistent heights */
    align-items: stretch;
  }
  
  .social-wall-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .social-wall-column.right {
    margin-top: 0;
  }
  
  .social-card {
    padding: 15px;
    /* Ensure cards stretch to fill available space */
    display: flex;
    flex-direction: column;
  }
  
  .social-embed {
    flex: 1;
  }
}

@media screen and (max-width: 767px) {
  .social-wall-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  /* Remove column structure on mobile */
  .social-wall-column {
    display: contents;
  }
  
  .social-wall-column.right {
    margin-top: 0;
  }
  
  .social-wall-wrapper {
    margin-top: 2rem;
  }
  
  /* Use CSS order for alternating layout */
  .social-wall-column.left .social-card:nth-child(1) { order: 1; }
  .social-wall-column.right .social-card:nth-child(1) { order: 2; }
  .social-wall-column.left .social-card:nth-child(2) { order: 3; }
  .social-wall-column.right .social-card:nth-child(2) { order: 4; }
  .social-wall-column.left .social-card:nth-child(3) { order: 5; }
  .social-wall-column.right .social-card:nth-child(3) { order: 6; }
  .social-wall-column.left .social-card:nth-child(4) { order: 7; }
  .social-wall-column.right .social-card:nth-child(4) { order: 8; }
  .social-wall-column.left .social-card:nth-child(5) { order: 9; }
  .social-wall-column.right .social-card:nth-child(5) { order: 10; }
  .social-wall-column.left .social-card:nth-child(6) { order: 11; }
  .social-wall-column.right .social-card:nth-child(6) { order: 12; }
  
  /* Ensure cards are visible on mobile by default */
  .social-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  /* Limit Twitter embed height on mobile */
  .twitter-container iframe,
  .twitter-tweet iframe {
    max-height: 500px !important;
  }
}

/* Modern CTA Section Styles */
.modern-cta-wrapper {
  margin-top: 80px;
  padding-top: 60px;
  padding-bottom: 140px;
}

.modern-cta-container {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 4rem 3rem;
  text-align: center;
  max-width: 50rem;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 1.5rem;
  overflow: hidden;
}

.modern-cta-container > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .modern-cta-container {
    gap: 2rem;
  }
}

@media (min-width: 768px) {
  .modern-cta-container {
    padding: 6rem 2rem;
  }
}

/* Badge */
.modern-cta-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid #ff6900;
  padding: 0.5rem 1.25rem;
  font-family: sofia-pro, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s;
  color: #ff6900;
  background: rgba(255, 105, 0, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 100ms;
}

/* Title */
.modern-cta-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  color: #272727;
  font-family: sofia-pro, sans-serif;
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 200ms;
}

@media (min-width: 640px) {
  .modern-cta-title {
    font-size: 3rem;
  }
}

/* Description */
.modern-cta-description {
  color: #7D7D7D;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0;
  font-family: sofia-pro, sans-serif;
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 300ms;
}

/* Button */
.modern-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 0.5rem;
  font-family: sofia-pro, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s;
  background-color: #ff6900;
  color: white;
  padding: 1rem 2.5rem;
  text-decoration: none;
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 500ms;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(255, 105, 0, 0.3);
}

.modern-cta-button:hover {
  background-color: #ff7a1a;
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(255, 105, 0, 0.4);
}

.modern-cta-button:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* Glow Effect - Soft gradient background */
.modern-cta-glow {
  pointer-events: none;
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 400ms;
  background: radial-gradient(ellipse 600px 400px at center, 
    rgba(255, 236, 214, 0.6) 0%,
    rgba(255, 224, 189, 0.4) 20%,
    rgba(255, 213, 170, 0.25) 40%,
    rgba(255, 200, 150, 0.15) 60%,
    transparent 80%);
  z-index: 0;
}

/* Animations */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Fade top effect for the glow */
.fade-top-lg {
  mask-image: linear-gradient(to bottom, 
    transparent, 
    rgba(0, 0, 0, 1) 8rem
  );
  -webkit-mask-image: linear-gradient(to bottom, 
    transparent, 
    rgba(0, 0, 0, 1) 8rem
  );
}

/* Social CTA Button Styles */
.social-cta-button {
  display: inline-block;
  padding: 12px 28px;
  background-color: #333;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-family: 'Sofia Pro', Arial, sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 16px;
}

.social-cta-button:hover {
  background-color: #555;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Fix horizontal scroll issue with banner animation */
body {
  overflow-x: hidden;
}

/* Ensure track element doesn't exceed viewport width */
.track {
  max-width: 100vw;
  position: relative;
}

/* Setup track-holder for marquee animation */
.track-holder {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  padding-right: 2rem; /* Add spacing between repeating content */
}

/* Marquee animation keyframes */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Ensure smooth loop by duplicating content */
.track {
  display: flex;
  overflow: hidden;
}

/* Prevent parent containers from expanding */
.section, .container {
  max-width: 100%;
  overflow-x: hidden;
}