html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-slider-right:before {
  content: "";
}

.w-icon-slider-left:before {
  content: "";
}

.w-icon-nav-menu:before {
  content: "";
}

.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
  content: "";
}

.w-icon-file-upload-remove:before {
  content: "";
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

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

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-block {
  display: block;
}

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

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-hidden {
  display: none;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

.w-code-block {
  margin: unset;
}

pre.w-code-block code {
  all: inherit;
}

.w-optimization {
  display: contents;
}

.w-webflow-badge, .w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

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

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.w-embed:before, .w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe, .w-video object, .w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before, .w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload {
  margin-bottom: 10px;
  display: block;
}

.w-file-upload-input {
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}

.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: #333;
  display: inline-block;
}

.w-file-upload-error {
  margin-top: 10px;
  display: block;
}

.w-file-upload-default.w-hidden, .w-file-upload-uploading.w-hidden, .w-file-upload-error.w-hidden, .w-file-upload-success.w-hidden {
  display: none;
}

.w-file-upload-uploading-btn {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}

.w-file-upload-file {
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}

.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

.w-file-remove-link {
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}

.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}

.w-file-upload-error-msg {
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}

.w-file-upload-info {
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}

.w-file-upload-label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}

.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-row:after {
  clear: both;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-1 {
  width: 8.33333%;
}

.w-col-2 {
  width: 16.6667%;
}

.w-col-3 {
  width: 25%;
}

.w-col-4 {
  width: 33.3333%;
}

.w-col-5 {
  width: 41.6667%;
}

.w-col-6 {
  width: 50%;
}

.w-col-7 {
  width: 58.3333%;
}

.w-col-8 {
  width: 66.6667%;
}

.w-col-9 {
  width: 75%;
}

.w-col-10 {
  width: 83.3333%;
}

.w-col-11 {
  width: 91.6667%;
}

.w-col-12 {
  width: 100%;
}

.w-hidden-main {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }

  .w-hidden-main {
    display: inherit !important;
  }

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main, .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  .w-hidden-main, .w-hidden-medium, .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before, .w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before, .w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 100%;
}

.w-slider-nav.w-num > div {
  font-size: inherit;
  line-height: inherit;
  width: auto;
  height: auto;
  padding: .2em .5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^="w-icon-"], .w-slider-arrow-right [class^="w-icon-"], .w-slider-arrow-left [class*=" w-icon-"], .w-slider-arrow-right [class*=" w-icon-"] {
  position: absolute;
}

.w-slider-arrow-left:focus, .w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-icon-slider-left, .w-icon-slider-right {
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-dropdown-link {
  color: #222;
  padding: 10px 20px;
  display: block;
}

.w-dropdown-link.w--current {
  color: #0082f3;
}

.w-dropdown-link:focus {
  outline: 0;
}

@media screen and (max-width: 767px) {
  .w-nav-brand {
    padding-left: 10px;
  }
}

.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}

.w-lightbox-backdrop, .w-lightbox-container {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.w-lightbox-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-view {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.w-lightbox-view:before {
  content: "";
  height: 100vh;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}

.w-lightbox-frame, .w-lightbox-view:before {
  vertical-align: middle;
  display: inline-block;
}

.w-lightbox-figure {
  margin: 0;
  position: relative;
}

.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}

.w-lightbox-img {
  width: auto;
  max-width: none;
  height: auto;
}

.w-lightbox-image {
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}

.w-lightbox-caption {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-lightbox-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.w-lightbox-control {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}

.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}

.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}

.w-lightbox-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}

.w-lightbox-strip {
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}

.w-lightbox-item {
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}

.w-lightbox-active {
  opacity: .3;
}

.w-lightbox-thumbnail {
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}

.w-lightbox-thumbnail .w-lightbox-tall {
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.w-lightbox-thumbnail .w-lightbox-wide {
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}

.w-lightbox-spinner {
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.w-lightbox-spinner:after {
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.w-lightbox-hide {
  display: none;
}

.w-lightbox-noscroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }

  .w-lightbox-view, .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

  .w-lightbox-left, .w-lightbox-right {
    opacity: .5;
    display: block;
  }

  .w-lightbox-close {
    opacity: .8;
  }

  .w-lightbox-control:hover {
    opacity: 1;
  }
}

.w-lightbox-inactive, .w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before, .w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol, .w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after, .w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: .6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image, .w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div, .w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption, .w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe, .w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div, .w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before, .w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

.w--tab-active {
  display: block;
}

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible {
  display: none !important;
}

.wf-layout-layout {
  display: grid;
}

@font-face {
  font-family: Mulish;
  src: url("https://cdn.prod.website-files.com/67ffbeb3c6d67519154ab9f3/67ffc63d251317da86234e09_Mulish-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mulish;
  src: url("https://cdn.prod.website-files.com/67ffbeb3c6d67519154ab9f3/67ffc63d0e745f3170535f7d_Mulish-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mulish;
  src: url("https://cdn.prod.website-files.com/67ffbeb3c6d67519154ab9f3/67ffc63d9b7a6b40236d76b8_Mulish-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mulish;
  src: url("https://cdn.prod.website-files.com/67ffbeb3c6d67519154ab9f3/67ffc6427e278ebccf778544_Mulish-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --_tokenization---bg-main: var(--black);
  --_tokenization---text-white: var(--white);
  --white-4: #f4f5f90a;
  --_tokenization---text-gray: var(--gray);
  --_tokenization---accent-blue: var(--blue);
  --_tokenization---bg-white: var(--white);
  --_tokenization---text-blue: var(--blue);
  --_tokenization---text-black: var(--black);
  --white-8: #f4f5f914;
  --white-2: #f4f5f905;
  --gray: #8a8a8a;
  --transparent: transparent;
  --blue: #E86222;
  --black: #131414;
  --white: #f4f5f9;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url("../images/imported-from-webflow/custom-checkbox-checkmark.589d534424.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

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

.w-form-formrecaptcha {
  margin-bottom: 8px;
}

.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;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  background-color: var(--_tokenization---bg-main);
  color: var(--_tokenization---text-white);
  letter-spacing: -.02em;
  font-family: Mulish, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
}

h1 {
  letter-spacing: -.06em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.75rem;
  font-weight: 700;
  line-height: 6.375rem;
}

h2 {
  letter-spacing: -.06em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.5rem;
}

h3 {
  letter-spacing: -.06em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
}

h4 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

p {
  margin-bottom: 0;
}

ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

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

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

/* Apple-style frosted-glass sticky nav.
   IMPORTANT: backdrop-filter creates a containing block for fixed-positioned
   descendants. The floating-badge is (incorrectly) nested INSIDE .header in
   the original Webflow export, so putting backdrop-filter directly on
   .header pins the badge to the header's box instead of the viewport.
   Workaround: keep .header itself "plain" and move the blur + tint onto a
   ::before pseudo-element layered behind the content. Pseudo-elements
   don't make the host create a containing block for its real-DOM children,
   so the badge stays viewport-fixed. */
.header {
  z-index: 999;
  /* Match the page background EXACTLY so the nav reads as part of the
     surface when at the top of the page (no visible boundary). The blur
     pseudo below adds the depth on scroll. */
  background-color: var(--_tokenization---bg-main);
  /* Symmetric padding so the nav row is visually centered top-to-bottom. */
  padding-top: 1.375rem;
  padding-bottom: 1.375rem;
  position: sticky;
  top: 0;
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .header {
    /* Make the host transparent so the ::before's blur can show through.
       Background tint lives on the pseudo-element below. */
    background-color: transparent;
  }
  .header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Same dark tone as the page background, with a touch of alpha so
       the backdrop-filter blur of content scrolling beneath is faintly
       perceivable. Lower alpha = more blur-through, higher = more solid. */
    background-color: rgba(15, 15, 18, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
  /* Soft gradient fade BELOW the sticky nav so the bottom edge dissolves
     into the page instead of cutting hard. The strip lives outside the
     header's box so it doesn't affect layout or click targets. */
  .header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(
      to bottom,
      rgba(15, 15, 18, 0.55) 0%,
      rgba(15, 15, 18, 0.25) 45%,
      rgba(15, 15, 18, 0) 100%
    );
  }
}

/* Defensive pin for the floating winner badge — vertically centered on
   the right edge of the viewport so it doesn't collide with the cookie
   consent banner (bottom-right) or the a11y widget (bottom-left). */
.floating-badge {
  position: fixed !important;
  top: 50% !important;
  right: 0% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%);
}

/* Below 991px the nav reverts to in-flow scrolling so mobile drawers
   don't sit on top of content. Matches the neurakey CDN behavior that
   was previously only loaded by services/index.html. */
@media screen and (max-width: 991px) {
  /* On mobile, position:sticky breaks in real-world iOS Safari when any
     ancestor has a transform — and Lenis (loaded site-wide) applies its
     wrapper transforms even with smoothTouch:false on some versions.
     position:fixed sidesteps all of that: nav always pins to viewport
     edges regardless of ancestor transforms or overflow rules. Pair it
     with a body-level top padding so content doesn't slide under it. */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
  }
  /* Compensate for the removed in-flow space the header used to occupy.
     Header height is roughly 5.5rem on mobile (1.5rem top + nav row + 1.25rem bottom).
     5.5rem is enough breathing room so the page-top content isn't hidden. */
  body {
    padding-top: 5.5rem !important;
  }
}

.container {
  z-index: 4;
  width: 100%;
  max-width: 87rem;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
}

.container.position--static {
  position: static;
}

.header_content-wrap {
  height: 3.5rem;
  display: flex;
  position: relative;
}

.menu-wrap {
  z-index: 3;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.header_navigation-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color: var(--white-4);
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  padding: .25rem;
  display: flex;
}

.navlink {
  color: var(--_tokenization---text-gray);
  text-align: center;
  letter-spacing: -.04em;
  border: .0625rem solid #0000;
  border-radius: 100rem;
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.navlink:hover, .navlink.w--current {
  background-color: var(--white-4);
  color: var(--_tokenization---text-gray);
  border: .0625rem solid #ffffff0a;
}

.navlink.is--dd {
  grid-column-gap: .375rem;
  grid-row-gap: .375rem;
  color: currentColor;
  justify-content: flex-start;
  align-items: center;
  transition-property: border-color, background-color, opacity;
  transition-duration: .35s, .35s, .35s;
  transition-timing-function: ease, ease, ease;
  display: flex;
}

.navlink.is--dd.w--open:hover {
  color: var(--_tokenization---text-gray);
}

.navlink.is-dd {
  padding: 0;
  transition: border-color .35s, background-color .35s, opacity .35s;
}

.menu_divider-dot {
  aspect-ratio: 1;
  background-color: #f4f5f93d;
  border-radius: 100rem;
  width: .09375rem;
}

.header-logo {
  z-index: 5;
  width: 10.1875rem;
  display: flex;
  /* Vertically center the 44px logo image within the link's full-height
     absolutely-positioned box. Without this, flex defaults to stretch and
     the image anchors to the top, leaving dead space below — visible
     whenever the link's focus/active outline renders. */
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.header-logo:hover {
  color: var(--_tokenization---text-gray);
}

.header_button-wrap {
  z-index: 3;
  background-color: var(--white-4);
  border: .0625rem solid #ffffff0a;
  border-radius: 1.25rem;
  padding: .25rem;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.menu_inner-button {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--white-4);
  text-align: center;
  border: .0625rem solid #ffffff0a;
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  padding: .625rem 1rem;
  display: flex;
}

.button-arrow {
  flex: none;
  transition: transform .45s;
  display: flex;
}

.button-arrow.is--header {
  width: .875rem;
}

.button-arrow.is--main {
  width: 1.4375rem;
}

.button-arrow.is--main.form-arrow {
  width: 1.25rem;
}

.button-arrow.is--service {
  width: 1.125rem;
}

.button-arrow.is--form {
  width: .875rem;
  transform: rotate(45deg);
}

.button-arrow.is--form.is--reverse {
  transform: rotate(225deg);
}

.hero_content-wrap {
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 80vh;
  padding-top: 6.9375rem;
  padding-bottom: 11.0625rem;
  display: flex;
  position: relative;
}

.hero_text-button {
  z-index: 5;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 70rem;
  display: flex;
  position: relative;
}

.hero_text-button.is--social-hero {
  max-width: 72rem;
}

.button {
  background-color: var(--white-4);
  text-align: center;
  letter-spacing: -.04em;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  padding: .25rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.button.arrow-animation.is--form {
  padding: 0;
}

.button.is--form {
  letter-spacing: -.02em;
  font-size: .875rem;
}

.button.is--form.form--next {
  line-height: 1.25rem;
}

.button_inner-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  background-color: var(--_tokenization---accent-blue);
  border-radius: 1.25rem;
  justify-content: center;
  align-items: flex-start;
  padding: .875rem 1.5rem;
  display: flex;
}

.button_inner-wrap.is--white {
  background-color: var(--_tokenization---bg-white);
  color: var(--_tokenization---text-blue);
  justify-content: center;
  align-items: center;
}

.button_inner-wrap.is--white.is--form {
  border-radius: 1rem;
}

.button_inner-wrap.is--form {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  align-items: center;
  padding: .625rem 1rem;
}

.button_inner-wrap.is--form.form-back {
  background-color: #f4f5f90a;
  border: .0625rem solid #ffffff0a;
  border-radius: 1rem .5rem .5rem 1rem;
  transition: box-shadow .45s;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.button_inner-wrap.is--form.form-back:hover {
  box-shadow: inset 0 5px 12px #f4f5f933;
}

.button_inner-wrap.is--form.form-submit {
  border-radius: .5rem 1rem 1rem .5rem;
  transition: box-shadow .45s;
}

.button_inner-wrap.is--form.form-submit:hover {
  box-shadow: inset 0 5px 12px #fff6;
}

.hero_texts-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.upheader {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  color: var(--_tokenization---text-gray);
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  display: flex;
}

.upheader.text--white {
  color: var(--_tokenization---text-white);
}

.upheader_icon {
  color: var(--_tokenization---text-white);
  flex: none;
  width: .875rem;
  display: flex;
}

/* DEFENSIVE: ensure upheader_icon stays visible across all viewports.
   The img inside has no explicit width/height attributes; on mobile some
   combination of flex sizing + Webflow base img rules can render it at
   0px (effectively hidden). These rules guarantee the icon container is
   sized and the img fills it. Bumped to a slightly larger 1rem on mobile
   so the icon reads visually alongside the eyebrow text. */
.upheader_icon,
.upheader > .upheader_icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
}
.upheader_icon img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 991px) {
  .upheader_icon,
  .upheader > .upheader_icon {
    width: 1rem !important;
    min-width: 1rem !important;
  }
}

.upheader_icon.is--black {
  color: var(--_tokenization---text-black);
}

.h1-hero {
  flex-flow: column;
  display: flex;
}

.text-gradient {
  text-shadow: 0 0 6rem #E8622280, 0 0 2rem #E86222, 0 0 1rem #E86222;
  display: inline;
}

.hero_subheader {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75rem;
}

.hero_subheader.is--social {
  max-width: 53.75rem;
}

.subheader-white {
  color: var(--_tokenization---text-white);
  font-weight: 700;
}

.hero_bg-wrap {
  z-index: 2;
  pointer-events: none;
  width: 73.9971rem;
  max-height: 53rem;
  margin-left: -5%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.i-100 {
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* CTA gradient on the homepage's "Trusted for 30 Years" section.
   The wrap is position:absolute top:0 bottom:0 so it stretches the full
   height of the section, but the inner img inherits .i-100's height:auto
   and so renders at its 1218x612 natural aspect, leaving ~200px of bare
   section below it. Override the height for THIS wrap only so the
   gradient stretches to fill, preserving the rest of i-100's behavior. */
.cta_gradient-wrap > img.i-100 {
  height: 100%;
  object-fit: cover;
}

.i-100.is--mobile {
  display: none;
}

.i-100.is--mockup-1 {
  object-position: 0% 50%;
}

.i-100.is--blog {
  object-position: 50% 100%;
}

.hero-dots {
  z-index: 5;
  pointer-events: none;
  display: flex;
  position: absolute;
}

.hero-dots.is--1 {
  width: 17.875rem;
  bottom: -15.9rem;
}

.hero-dots.is--2 {
  width: 17.875rem;
  bottom: 0;
  left: 0;
}

.hero-dots.is--3 {
  width: 17.875rem;
  bottom: 5.6rem;
}

.hero-dots.is--4 {
  width: 17.875rem;
  bottom: 2.4rem;
  right: 0;
}

.hero-dots.is--4.blogs {
  z-index: 3;
  bottom: 35%;
  left: -3rem;
  right: auto;
}

.section-hero {
  overflow: visible;
}

.hero-role {
  z-index: 5;
  position: absolute;
}

.hero-role.is--web-des {
  top: 8.7rem;
  right: 13.5rem;
}

.hero-role.is--automati {
  right: -2.4rem;
}

.hero-role.is--branding {
  bottom: 10.1rem;
  right: 13.2rem;
}

.hero-role.is--social {
  top: 7rem;
  left: 14.9rem;
}

.hero-role.is--seo {
  left: -2rem;
}

.hero-role.is--content {
  bottom: 13.5rem;
  left: 9rem;
}

.hero-role.is--positionierung {
  bottom: 5rem;
  left: 27rem;
}

.hero-role.is--corporate-design {
  bottom: 13rem;
  right: 5rem;
}

.hero-role.is--tonalit-t {
  bottom: 7rem;
  right: 30rem;
}

.hero-role.is--zielgruppe {
  bottom: 12rem;
  right: 21rem;
}

.hero-role.is--werte {
  bottom: 4rem;
  left: 8rem;
}

.hero-role.is--corporate-design-copy {
  top: 0;
  right: 11rem;
}

.hero-role.is--marke {
  top: 15rem;
  left: 24rem;
}

.hero-role.is--marktanalyse {
  bottom: 21rem;
  left: 8rem;
}

.hero-role.is--logo {
  top: 9rem;
  right: 43rem;
}

.hero-role.is--website {
  top: 7rem;
  right: 30rem;
}

.hero-role.is--werbenzeigen {
  top: 2rem;
  right: 13rem;
}

.hero-role.is--ugc-ads {
  bottom: 11rem;
  left: 12rem;
}

.hero-role.is--video-ads {
  bottom: 40rem;
  left: 30rem;
}

.hero-role.is--animationen {
  bottom: 10rem;
  right: 30rem;
}

.hero-role.is--statische-ads {
  bottom: 40rem;
  right: 13.5rem;
}

.hero-role.is--analyse {
  top: 17rem;
  right: .4rem;
}

.hero-role.is--strategie {
  top: 5rem;
  right: 2.6rem;
}

.hero-role.is--ziele {
  bottom: 18rem;
  left: 0;
}

.hero-role.is--umsetzung {
  bottom: 13rem;
  left: 9rem;
}

.hero-role.is--optimierung {
  top: 5rem;
  bottom: auto;
  left: 4rem;
}

.hero-role-inner {
  background-color: var(--white-4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  padding: .125rem .5rem;
}

.hero-role-inner.is--right {
  border-top-left-radius: 0;
}

.hero-role-inner.is--right.is--down {
  border-top-left-radius: 100rem;
  border-bottom-left-radius: 0;
}

.hero-role-inner.is--blue {
  background-color: var(--_tokenization---accent-blue);
}

.hero-role-inner.is--blue.is--right {
  border-top-left-radius: 100px;
}

.hero-role-inner.is--left {
  border-top-right-radius: 0;
}

.hero-role-inner.is--left.is--blue {
  border-style: solid;
}

.hero-role-inner.is--left.is--down {
  border-top-right-radius: 100rem;
  border-bottom-right-radius: 0;
}

.hero-role-inner.is--left--oben {
  border-top-right-radius: 0;
}

.hero-role-inner.is--left--oben.is--blue {
  border-style: solid;
}

.hero-role-inner.is--left--oben.is--down {
  border-top-right-radius: 100rem;
  border-bottom-right-radius: 0;
}

.hero-role_arrow {
  color: var(--white-8);
  width: 1rem;
  height: 1.2rem;
  display: flex;
  position: absolute;
}

.hero-role_arrow.is--right-side {
  filter: drop-shadow(-1px -1px #ffffff0a);
  transform: translate(-1rem, -2.9rem);
}

.hero-role_arrow.is--right-side.is--down {
  transform-style: preserve-3d;
  transform: rotate(-105deg)translate3d(.2rem, -.9rem, 0);
}

.hero-role_arrow.is--blue {
  color: var(--_tokenization---accent-blue);
}

.hero-role_arrow.is--leftside {
  top: 0;
  right: 0;
  transform: translate(1rem, -1rem)rotate(75deg);
}

.hero-role_arrow.is--leftside.is--blue.is--down, .hero-role_arrow.is--leftside.is--down {
  transform: translate(.9rem, 1.9rem)rotate(175deg);
}

.partner-logos_block-wrap {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  text-align: center;
  flex-flow: column;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.partner-logos_wrap {
  background-image: linear-gradient(#ffffff0f, #fff0);
  border-radius: 1.5rem;
}

.partner-logos_inner-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: var(--_tokenization---bg-main);
  border-radius: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin: 1px;
  display: grid;
  position: relative;
}

.partner-logos_inner-wrap.is--mobile {
  display: none;
}

.partner-logo_wrap {
  border-right: .0625rem solid #ffffff0a;
  justify-content: center;
  align-items: center;
  height: 5.5rem;
  display: flex;
  position: relative;
}

.partner-logo_wrap.is--last {
  border-right-style: none;
}

.partner-logo_dot {
  z-index: 5;
  aspect-ratio: 1;
  background-color: #d9d9d9;
  border-radius: 100rem;
  width: .09375rem;
  position: absolute;
  inset: 0% 0% auto auto;
}

.partner-logo_dot.is--last {
  display: none;
}

.services_block-wrap {
  height: 600vh;
  padding-top: 6rem;
  padding-bottom: 75px;
  position: relative;
}

.services_content-wrap {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: sticky;
  top: 10rem;
}

.services_texts-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  flex: none;
  max-width: 32.3rem;
  display: flex;
  position: relative;
}

.h2-services {
  color: var(--_tokenization---text-white);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  flex-flow: column;
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.5rem;
  display: flex;
}

.services_content-scroll {
  z-index: 4;
  grid-column-gap: 2.75rem;
  grid-row-gap: 2.75rem;
  justify-content: flex-start;
  align-items: center;
  max-width: 38.75rem;
  padding-left: 2.5rem;
  display: flex;
  position: relative;
}

.services_window {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #1c1d1d;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex: none;
  width: 32.5rem;
  height: 38rem;
  padding: .05rem;
  position: absolute;
  overflow: hidden;
  box-shadow: inset 0 5px 12px #ffffff0f;
}

.services_window.is--1, .services_window.is--6 {
  display: block;
}

.service-window_content-wrap {
  z-index: 6;
  background-color: #1c1d1d;
  border-radius: 1.5rem;
  padding: 22.25rem 2.5rem 2.5rem;
  position: absolute;
  inset: .05rem;
  overflow: hidden;
}

.service-window_texts {
  z-index: 4;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: center;
  flex-flow: column;
  display: flex;
  position: relative;
}

.service-window_description {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  font-size: 1.125rem;
  font-weight: 500;
}

.button-text {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: var(--_tokenization---accent-blue);
  justify-content: center;
  align-items: center;
  display: flex;
}

.button-text.arrow-animation.is--card {
  margin-top: 1rem;
}

.service-window_image {
  position: absolute;
  top: 1.6875rem;
  left: .4375rem;
  right: 0;
}

.services_scrollbar {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.scrollbar-texts {
  color: var(--_tokenization---text-gray);
  text-align: center;
  letter-spacing: -.04em;
  height: 1.3rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  position: relative;
}

.scrollbar_wrap {
  background-color: var(--white-4);
  border-radius: 100rem;
  width: .25rem;
  height: 24.75rem;
  position: relative;
}

.scrollbar_active {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 100rem;
  height: 30%;
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
}

.service-text_dots-wrap {
  display: block;
  position: absolute;
  top: -8.9rem;
  right: 7.3rem;
}

.section-white {
  background-color: var(--_tokenization---bg-white);
  color: var(--_tokenization---text-black);
  border-radius: 3.5rem;
}

.section-white.becoming--blue {
  background-color: #E86222;
  color: var(--_tokenization---text-white);
}

.white-section_content-wrap {
  z-index: 10;
  max-width: 62.5rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 13.375rem;
  padding-bottom: 13.375rem;
  position: relative;
}

.h2--section-white {
  color: var(--_tokenization---text-black);
  text-align: center;
  letter-spacing: -.06em;
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  font-size: 7rem;
  font-weight: 700;
  line-height: 7.75rem;
}

.h2--section-white.that-became-blue {
  color: var(--_tokenization---text-white);
}

.t-color_blue {
  color: var(--_tokenization---text-blue);
}

.system_block-wrap {
  padding-top: 6.75rem;
  padding-bottom: 7.375rem;
  position: relative;
}

.system_texts-blocks {
  z-index: 5;
  grid-column-gap: 2.875rem;
  grid-row-gap: 2.875rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.system_texts-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 41.5rem;
  display: flex;
}

.h2--system {
  color: var(--_tokenization---text-white);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.5rem;
}

.system-subheading {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  font-weight: 500;
}

.system_blocks-wrap {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 36.5625rem;
  height: 32.1875rem;
  display: flex;
  position: relative;
}

.system-block {
  aspect-ratio: 1;
  background-color: var(--white-4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: .0625rem solid #ffffff0f;
  border-radius: 6.375rem;
  width: 21.5rem;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.system-block.is--1 {
  z-index: 2;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 5.4375rem;
  padding-left: 3.5rem;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.system-block.is--2 {
  z-index: 3;
  text-align: right;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 5.4375rem;
  padding-right: 3.4375rem;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.system-block.is--3 {
  z-index: 4;
  text-align: center;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 3.75rem;
  display: flex;
  position: absolute;
}

.system-block_text {
  max-width: 9rem;
}

.system-line {
  aspect-ratio: 1;
  pointer-events: none;
  width: 21.5rem;
  position: absolute;
}

.system-line.is--1 {
  z-index: 5;
  top: 0;
  left: 0;
}

.system-line.is--2 {
  z-index: 6;
  top: 0;
  right: 0;
}

.system-line.is--3 {
  z-index: 8;
}

.system-middle {
  z-index: 10;
  width: 13rem;
  position: absolute;
  bottom: 11.5rem;
}

.system-bg {
  z-index: 1;
  justify-content: center;
  align-items: flex-start;
  height: 59.875rem;
  display: flex;
  position: absolute;
  inset: 5rem 0 -43.9766px;
}

.block-dots-1 {
  z-index: 2;
  position: absolute;
  bottom: 1.5rem;
  left: -1.5rem;
}

.block-dots-2 {
  z-index: 2;
  position: absolute;
  bottom: 1.5rem;
  right: -1.5rem;
}

.compare_content-block {
  padding-top: 6.5rem;
  padding-bottom: 5.75rem;
}

.compare_content-wrap {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  max-width: 68.75rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.compare_titles-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 65.625rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.compare_vs-titles {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 13.5rem;
  padding-top: 2rem;
  display: flex;
  position: relative;
}

.compare_title-first {
  text-align: center;
  letter-spacing: -.04em;
  width: 25rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 4.5rem;
}

.compare_title-second {
  width: 23.625rem;
  display: flex;
}

.g-darker {
  color: var(--_tokenization---text-gray);
}

.vs-icon {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.vs_icon-wrap {
  width: 18.125rem;
  position: relative;
}

.vs_line-wrap {
  width: 5.875rem;
}

.vs-line {
  justify-content: center;
  align-items: center;
  padding-left: 1rem;
  display: flex;
  position: absolute;
  inset: 0%;
}

.compare_subheading {
  color: var(--_tokenization---text-gray);
  text-align: center;
  letter-spacing: -.04em;
}

.compare_tables-wrap {
  width: 100%;
  display: flex;
}

.compare-table_gray {
  background-color: var(--white-2);
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex: none;
  width: 60%;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.compare_table-blue {
  background-color: #192536;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex: none;
  width: 50%;
  position: relative;
  left: -10%;
  box-shadow: inset 0 5px 12px #E862221F;
}

.table-title {
  letter-spacing: -.06em;
  border-bottom: .0625rem solid #ffffff0a;
  height: 3rem;
  padding: .625rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.table-body {
  flex-flow: column;
  padding: 1rem 1.5rem;
  display: flex;
}

.compare-list {
  z-index: 3;
  grid-column-gap: 1.125rem;
  grid-row-gap: 1.125rem;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
  display: flex;
  position: relative;
}

.compare_list-item {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  letter-spacing: -.04em;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  display: flex;
  position: relative;
}

.list-icon {
  flex: none;
  width: 1.5rem;
  display: flex;
}

.list-icon.is--ready {
  filter: drop-shadow(0 0 5px #E86222);
}

.table-title_icon {
  width: 8rem;
  display: flex;
}

.compare_list-wrap {
  position: relative;
}

.compare_list-line {
  z-index: 1;
  background-color: var(--white-4);
  width: .0625rem;
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: .75rem;
}

.compare-line {
  background-color: var(--white-4);
  width: .0625rem;
  height: 1.45rem;
  position: absolute;
  top: 1.333rem;
  left: .75rem;
}

.compare-line.is--blue {
  background-color: #E862223D;
}

.compare_gradient {
  z-index: 0;
  width: 68%;
  height: 100%;
  position: absolute;
  right: 0;
}

.partner-icons_wrap {
  border-top: .0625rem solid #ffffff0a;
  border-bottom: .0625rem solid #ffffff0a;
  padding-top: 0;
  padding-bottom: 0;
}

.partner-icons_wrap.is--inner {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  border-top-style: none;
  border-bottom-style: none;
  flex-flow: column;
  display: flex;
  position: relative;
}

.partner-icons_line {
  display: flex;
}

.partner-icons_line.is--inner {
  border-top: .0625rem solid #ffffff0a;
}

.partner-icons_block {
  flex: none;
  display: flex;
}

.partner-icon {
  flex: none;
  width: 15rem;
  height: 5.5rem;
  position: relative;
}

.partner-icon_top-dot {
  aspect-ratio: 1;
  opacity: .64;
  background-color: #d9d9d9;
  width: .09375rem;
  position: absolute;
  inset: 0 0% auto auto;
}

.partner-icon_bottom-dot {
  aspect-ratio: 1;
  opacity: .64;
  background-color: #d9d9d9;
  width: .09375rem;
  position: absolute;
  inset: auto 0% 0 auto;
}

.results_block-wrap {
  height: 450vh;
}

.results_section-wrap {
  background-color: var(--_tokenization---bg-white);
  border-radius: 3.5rem;
  height: 100vh;
  padding-top: 7.5rem;
  padding-bottom: 4.6875rem;
  display: flex;
  position: sticky;
  top: 0;
}

.results_content-wrap {
  grid-column-gap: 2.375rem;
  grid-row-gap: 2.375rem;
  justify-content: space-between;
  align-items: center;
  max-width: 77.125rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.result_text-button {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 28.9375rem;
  display: flex;
}

.result_texts-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  color: var(--_tokenization---text-black);
  flex-flow: column;
  display: flex;
}

.h2--result {
  color: var(--_tokenization---text-black);
  letter-spacing: -.06em;
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  max-width: 21.75rem;
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.5rem;
}

.t--result-subheading {
  color: var(--_tokenization---text-gray);
  font-weight: 500;
  display: none;
}

.t--result-subheading.is--form {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 30.5625rem;
  display: flex;
}

.subheading-bold {
  color: var(--_tokenization---text-black);
  font-weight: 700;
}

.subheading-bold.is--white {
  color: var(--_tokenization---text-white);
}

.result_photos-progress-bar {
  grid-column-gap: 1.5625rem;
  grid-row-gap: 1.5625rem;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 45.75rem;
  display: flex;
  position: relative;
}

.result_phones-wrap {
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}

.result-phone_first {
  z-index: 3;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #7479801f;
  border: .0625rem solid #7479800a;
  border-radius: 3.4375rem;
  flex: none;
  width: 15.375rem;
  height: 31.6875rem;
  padding: .75rem;
  position: relative;
  bottom: -1rem;
  right: -2rem;
  transform: rotate(-7deg);
}

.result-phone_content-wrap {
  border-radius: 2.5625rem;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.result-phone_last {
  z-index: 3;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #7479801f;
  border: .0625rem solid #7479800a;
  border-radius: 3.4375rem;
  flex: none;
  width: 15.375rem;
  height: 31.6875rem;
  padding: .75rem;
  position: relative;
  bottom: -1rem;
  left: -2rem;
  transform: rotate(7deg);
}

.result-phone_middle {
  z-index: 5;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #7479801f;
  border: .0625rem solid #7479800a;
  border-radius: 3.4375rem;
  flex: none;
  width: 16.125rem;
  height: 33.3125rem;
  padding: .75rem;
  position: relative;
}

.result-first_content, .result-middle_content, .result-last_content {
  position: absolute;
  inset: 0%;
}

.result_progress-bar-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.progress-bar_number {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  width: 1rem;
  height: 1.2rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  position: relative;
}

.result_progress-bard {
  background-color: #7479800a;
  border-radius: 100rem;
  width: 24.75rem;
  height: .25rem;
  position: relative;
}

.result-progress_active {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 100rem;
  width: 20%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.cta_content-block {
  padding-top: 6.75rem;
  padding-bottom: 6.75rem;
}

.cta_content-wrap {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 3.5rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 38.25rem;
  padding-top: 6.625rem;
  padding-bottom: 6.625rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cta_content {
  z-index: 8;
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 47rem;
  display: flex;
  position: relative;
}

.cta_content.is--blog {
  max-width: 39.125rem;
}

.cta_texts-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.cta_titles-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0;
  display: flex;
}

.h2--logos {
  color: var(--_tokenization---text-gray);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#3b3e42, #696e74);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
}

.t--cta-text {
  color: #f4f5f9b8;
  letter-spacing: -.04em;
  max-width: 32.4375rem;
  font-weight: 500;
}

.t--cta-text.is--blog {
  max-width: none;
}

.cta_gradient-wrap {
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: hard-light;
  display: block;
  position: absolute;
  inset: 0%;
}

.cta_figure-wrap {
  z-index: 2;
  width: 145.063rem;
  position: absolute;
  bottom: -52rem;
  left: -40rem;
}

.cta_figure-wrap.for--bigger {
  width: 176rem;
  bottom: -69.5rem;
  left: -39.3rem;
}

.cta_figure-wrap.is--blog {
  bottom: -63.2rem;
}

.options_content-block {
  height: 53.0625rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  position: relative;
}

.option_texts-wrap {
  z-index: 5;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  max-width: 50rem;
  padding-left: 4.5rem;
  display: flex;
  position: relative;
}

.options_pictures-wrap {
  width: 110rem;
  position: absolute;
  inset: 6rem 0% 0% -13rem;
}

.option-picture {
  width: 100%;
}

.faq_content-block {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
  display: flex;
}

.faq_texts-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.t--faq-subheading {
  color: var(--_tokenization---text-gray);
  max-width: 27rem;
  font-weight: 500;
}

.accordions_content-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.accordions_content-wrap.dunkle-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

.accordions-row {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  display: flex;
}

.accordion {
  border: .25rem solid #eef0f5;
  border-radius: 1.25rem;
}

.accordion.is--blogs {
  border-color: var(--white-2);
  background-color: var(--white-2);
  margin-left: 0;
  margin-right: 0;
  display: block;
}

.accordion_heading {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  letter-spacing: -.04em;
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-start;
  padding: .75rem .75rem .75rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
  display: flex;
}

.accordion_heading.blogs {
  font-size: 1.25rem;
  line-height: 2rem;
}

.accordion_text-wrap {
  transition: height .3s;
  overflow: hidden;
}

.accordion_icon {
  aspect-ratio: 1;
  color: var(--_tokenization---text-blue);
  background-color: #61738d0a;
  border-radius: 100rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2rem;
  transition: color .3s;
  display: flex;
  position: relative;
}

.horizontal_faq-line {
  background-color: currentColor;
  border-radius: 1rem;
  width: .625rem;
  height: .09375rem;
}

.vertical_faq-icon {
  background-color: currentColor;
  border-radius: 1rem;
  width: .09375rem;
  height: .625rem;
  transition-property: transform;
  transition-duration: .3s;
  transition-timing-function: ease;
  position: absolute;
}

.accordion-text {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  max-width: 44rem;
  padding-bottom: .875rem;
  padding-left: 1.5rem;
}

.footer {
  padding-top: 2.5rem;
  padding-bottom: 9.375rem;
  position: sticky;
  bottom: 0;
  overflow: hidden;
}

.footer_navigation-wrap {
  display: flex;
  position: relative;
}

.footer_navigation-row {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  flex-flow: column;
  width: 16.875rem;
  display: flex;
}

.footer_navigation-row.is--contact {
  width: 20.4375rem;
}

.footer_navigation-row.is--social {
  width: 13.75rem;
}

.footer_navigation-title {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  letter-spacing: -.04em;
  justify-content: flex-start;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.navigation-dot {
  aspect-ratio: 1;
  background-color: var(--_tokenization---accent-blue);
  border-radius: .0625rem;
  flex: none;
  width: .375rem;
}

.footer_navigation-links {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.footer_navigation-link {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.footer_navigation-link:hover {
  color: var(--_tokenization---text-white);
}

.footer_navigation-link.is--contact {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1rem;
  display: flex;
}

.contact-icon {
  flex: none;
  width: 1.25rem;
  display: flex;
}

.footer_social-wrap {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--white-4);
  border: .0625rem solid #ffffff0a;
  border-radius: 6.25rem;
  justify-content: flex-start;
  align-items: center;
  padding: .25rem;
  display: flex;
}

.footer_social {
  aspect-ratio: 1;
  color: var(--_tokenization---text-gray);
  border: .0625rem solid #0000;
  border-radius: 100rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  display: flex;
}

.footer_social:hover {
  background-color: var(--white-8);
  color: var(--_tokenization---text-white);
  border-color: #ffffff0a;
}

.footer-social_icon {
  width: 1.25rem;
  display: flex;
}

.footer-social_divider-dot {
  background-color: #f4f5f93d;
  flex: none;
  width: .09375rem;
  height: .09375rem;
}

.footer_copyright-text {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  font-size: .875rem;
  line-height: 1.25rem;
  position: absolute;
  bottom: 2rem;
  right: 0;
  /* Right-align both the copyright line and the legal-links row below it. */
  text-align: right;
}

/* Privacy Policy + Terms of Use on a NEW LINE under the copyright.
   `display: flex` (not inline-flex) is required — inline-flex keeps the
   div inline with the copyright text. justify-content: flex-end mirrors
   the right-alignment of the copyright line so both lines stack flush to
   the right edge of the footer. */
.footer_legal-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  margin-top: .35rem;
  font-size: .8rem;
  opacity: .78;
  width: 100%;
}
.footer_legal-links a:hover {
  opacity: 1;
  color: var(--_tokenization---text-blue, #E86222);
}
.footer_legal-links > span[aria-hidden="true"] {
  opacity: .55;
}

.footer_vector {
  z-index: 2;
  margin-top: -8rem;
  position: absolute;
  left: 0;
  right: 0;
}

.services-text, .progress-text {
  position: absolute;
}

.section-big-image {
  margin-top: -5rem;
  padding-top: 10rem;
  padding-bottom: 5rem;
}

.service_windows-wrap {
  border-radius: 1.5rem;
  width: 32.5rem;
  height: 38rem;
  position: relative;
  overflow: hidden;
}

.scrollbar_numbers-wrap {
  color: var(--_tokenization---text-gray);
  text-align: center;
  letter-spacing: -.04em;
  height: 1.3rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  position: relative;
}

.dd-icon {
  width: .625rem;
  display: flex;
}

.header_dd-list {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  border-radius: 1rem;
  flex-flow: column;
  padding: .75rem;
  display: none;
}

.header_dd-list:hover {
  color: var(--gray);
}

.header_dd-list.w--open {
  background-color: var(--white-4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-image: linear-gradient(#00000080, #00000080);
  border: .0625rem solid #ffffff0a;
  min-width: 11.5rem;
  display: flex;
  top: 4.5rem;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.header_dd-list.w--open:hover {
  color: var(--gray);
}

.header_dd-link {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: #f4f5f9cc;
  justify-content: flex-start;
  align-items: center;
  padding: .375rem .5rem;
  display: flex;
}

.header_dd-link:hover {
  color: var(--_tokenization---text-white);
}

.header-dd_icon {
  flex: none;
  width: 1.25rem;
}

.service-dots {
  z-index: 1;
  max-width: 17rem;
  position: absolute;
  bottom: 0;
  left: 30rem;
}

.compare-dots {
  max-width: 18.75rem;
  position: absolute;
}

.compare-dots.is--1 {
  bottom: -4.9rem;
  left: 0;
}

.compare-dots.is--2 {
  right: 0;
}

.big-seciont_dots {
  max-width: 18.75rem;
  position: absolute;
  top: -3.2rem;
  left: -8.7rem;
}

.big-seciont_dots.is--1 {
  bottom: -4.9rem;
  left: 0;
}

.big-seciont_dots.is--2 {
  inset: auto 0 -5.4rem auto;
}

.cta-dots {
  max-width: 17rem;
  position: absolute;
  top: 10.6rem;
  right: 3.9rem;
}

.cta-dots.is--2 {
  max-width: 15rem;
  inset: auto auto 6.5rem 3rem;
}

.menu, .header_overlay {
  display: none;
}

.cases_content-block {
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.cases_content-track {
  padding-top: 3.75rem;
}

.cases_content-track.u-drag-scroll {
  border: .0625rem solid var(--white-4);
  background-color: var(--white-2);
  border-radius: 3.5rem;
}

.cases_content-wrap {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.h2--cases {
  letter-spacing: -.06em;
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  max-width: 21.75rem;
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.5rem;
}

.cases_text-button {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 33.4375rem;
  display: flex;
}

.cases_text-button.is--not-desktop {
  display: block;
}

.cases_text-button.is--social-inner {
  max-width: 43rem;
}

.cases_text-button.is--form {
  max-width: none;
  margin-bottom: 2.5rem;
}

.cases_texts-wrap {
  z-index: 11;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
  position: relative;
}

.cases_cards-wrap {
  grid-column-gap: 3.75rem;
  grid-row-gap: 3.75rem;
  display: flex;
}

.cases_cards-wrap.swiper-wrapper.is--case {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  overflow: visible;
}

.case-card {
  z-index: 4;
  border: .0625rem solid var(--white-4);
  background-color: #1d1e1e;
  border-radius: 1.5rem;
  flex: none;
  width: 35.5rem;
  height: 40rem;
  padding-top: .1rem;
  padding-left: .1rem;
  padding-right: .1rem;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.case_image-wrap {
  width: 100%;
  position: relative;
}

.case-image_gradient {
  z-index: 3;
  background-image: linear-gradient(#1d1e1e00, #1d1e1e8f);
  height: 5.125rem;
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.case-card_info-wrap {
  z-index: 5;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  border: .0625rem solid var(--white-4);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #1d1e1e;
  border-radius: 1.5rem;
  flex-flow: column;
  min-height: 21.5rem;
  padding: 1.5rem;
  display: flex;
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0%;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.case-card_titles-icon {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.case-card_titles-wrap {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  flex-flow: column;
  display: flex;
}

.t--case-card-category {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.02em;
  font-size: .875rem;
  line-height: 1.25rem;
}

.case-logo_circle-wrap {
  border: .0625rem solid var(--white-4);
  background-color: var(--white-2);
  border-radius: 100rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  padding: .55rem;
  display: flex;
}

.case_texts-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.case-card_text-block {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  display: flex;
}

.case-card_scrollbar {
  background-color: var(--white-4);
  border-radius: 100rem;
  flex: none;
  width: .125rem;
  position: relative;
}

.case-card_scroll-active {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 100rem;
  height: 30%;
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
}

.case-card_texts-wrap {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  display: flex;
}

.t---text-card_text {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.02em;
  font-size: .875rem;
  line-height: 1.25rem;
}

.case-card_tags-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.case-card_tag {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  border: .0625rem solid var(--white-4);
  background-color: var(--white-2);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: .5rem 1rem .5rem .75rem;
  display: flex;
}

.case-card_icon {
  aspect-ratio: 1;
  flex: none;
  width: 1.5rem;
}

.cases_content {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.case-logo_image-wrap {
  width: 3rem;
}

.case-logo_image-wrap.d--smaller {
  width: 2rem;
}

.reviews_content-wrap {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  flex-flow: column;
  padding-top: 7.5rem;
  padding-bottom: 5rem;
  display: flex;
}

.reviews_texts-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.reviews_subheading {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  max-width: 38.5rem;
  font-weight: 500;
}

.review_dots {
  max-width: 17rem;
  position: absolute;
  top: 2rem;
  left: -7rem;
}

.swiper.is--reviews {
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.swiper.is--case {
  overflow: visible;
}

.swiper.is--sea {
  z-index: 6;
  width: 100%;
  position: relative;
  overflow: visible;
}

.swiper.is--seo {
  width: 100%;
  overflow: visible;
}

.swiper.is--blogs {
  overflow: hidden;
}

.swiper-wrapper.is--reviews {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.swiper-wrapper.is--sea, .swiper-wrapper.is--seo, .swiper-wrapper.is--blogs {
  display: flex;
}

.swiper-slide.is--reviews {
  flex: none;
}

.swiper-slide.is--case {
  width: 39.25rem;
}

.swiper-slide.is--sea {
  border-radius: 1.5rem;
  flex: none;
  width: 26.1rem;
  /* Make the slide a flex column so the .sea-seo-card_wrapp inside can stretch
     to the same height across siblings (parent .swiper-wrapper.is--sea is
     display:flex with default align-items:stretch). */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: auto;
}
.swiper-slide.is--sea > .sea-seo-card_wrapp {
  flex: 1 1 auto;
}

.swiper-slide.is--seo {
  flex: none;
  width: 26.1rem;
}

.swiper-slide.is--blogs {
  flex: none;
  width: 29rem;
}

.review_content-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  letter-spacing: -.06em;
  flex-flow: column;
  max-width: 37.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  display: flex;
}

.reviewer_wrap {
  grid-column-gap: .875rem;
  grid-row-gap: .875rem;
  letter-spacing: -.02em;
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem;
  display: flex;
}

.reviewer_dot {
  aspect-ratio: 1;
  background-color: var(--_tokenization---accent-blue);
  border-radius: .0625rem;
  flex: none;
  width: .375rem;
}

.slider-blur {
  z-index: 4;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: #13141466;
  width: 80%;
  display: none;
  position: absolute;
  top: -2rem;
  bottom: -2rem;
  right: -20rem;
}

.review_slider-wrap {
  position: relative;
}

.review_slider-buttons {
  z-index: 6;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.slider-button {
  aspect-ratio: 1;
  border: .0625rem solid var(--_tokenization---text-white);
  border-radius: 1.5rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  display: flex;
}

.slider-button.is--disabled {
  opacity: .5;
}

.slider-arrow {
  width: 1.5rem;
  display: flex;
}

.review-slider_pagination {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.slider-pagination {
  background-color: var(--white-8);
  border-radius: 100rem;
  flex: none;
  width: .25rem;
  height: .25rem;
}

.slider-pagination.pagination--active {
  background-color: var(--_tokenization---accent-blue);
  width: 2rem;
}

.review-slide_fake {
  z-index: 3;
  filter: blur(6px);
  pointer-events: none;
  color: var(--_tokenization---text-gray);
  letter-spacing: -.02em;
  max-width: 24.6875rem;
  font-weight: 500;
  position: absolute;
  bottom: 0;
  right: 0;
}

.logos-h2--mobile {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
  display: flex;
}

.review_buttons-wrap {
  display: none;
}

.code-100 {
  width: 100%;
  height: 100%;
}

.social-hero_content-block {
  grid-column-gap: 6.4375rem;
  grid-row-gap: 6.4375rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 5.9375rem;
  padding-bottom: 4.25rem;
  display: flex;
  position: relative;
}

.social-hero_texts-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  display: flex;
}

.social-hero_texts-button {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.social_hero-icon {
  z-index: 5;
  /* Glassy circle background. backdrop-filter blurs whatever sits behind
     the icon, the semi-transparent white tint gives the glass surface,
     and the subtle hairline border defines the circle edge against the
     dark page. Container stays under 81px (4.5rem ≈ 72px at default font). */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100rem;
  width: 4.5rem;
  height: 4.5rem;
  position: absolute;
  /* Center the partner logo inside the circle. Logo is sized smaller than
     the container so the glass ring is visible around it. */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Sizes the partner logo inside the glassy circle. object-fit:contain
   preserves the logo's aspect ratio. 70% is the default and reads well
   for icons that fill their square canvas. */
.social_hero-icon > img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

/* Per-logo bumps. These partners' 512x512 source PNGs have meaningful
   internal whitespace, so the default 70% rendering reads as too small.
   Pushing them to 90% balances visual weight against the icons that
   already fill their canvas (Microsoft, SignalMine, Zetaris). */
.social_hero-icon > img[src*="awsIcon1"],
.social_hero-icon > img[src*="fortaliceIcon1"],
.social_hero-icon > img[src*="crowdStrikeIcon2"],
.social_hero-icon > img[src*="snowflakeIcon1"],
.social_hero-icon > img[src*="zaperaiIcon1"] {
  width: 90%;
  height: 90%;
}

/* Salesforce ships its cloud + wordmark with extra padding around the
   shape. Bump it past the circle bounds; object-fit:contain keeps
   proportions and the soft glass ring blends a few pixels of overflow. */
.social_hero-icon > img[src*="salesforceIcon1"] {
  width: 110%;
  height: 110%;
}

/* AWS + Zaperai both ship dark marks on transparent background that
   disappear against the dark hero. brightness(0) crushes every visible
   pixel to pure black, then invert(1) flips it to pure white. */
.social_hero-icon > img[src*="awsIcon1"],
.social_hero-icon > img[src*="zaperaiIcon1"] {
  filter: brightness(0) invert(1);
}

.social_hero-icon.is--tt {
  top: -2.3rem;
  right: 8rem;
}

.social_hero-icon.is--linked {
  bottom: .2rem;
  right: 3.7rem;
}

.social_hero-icon.is--pntrst {
  bottom: -1.5rem;
  left: 4.4rem;
}

/* ServiceNow — shifted UP so it no longer overlaps the word "federal"
   in the hero h1 (was top: 1.8rem; left: 6.9rem). */
.social_hero-icon.is--meta {
  top: -3rem;
  left: 6.9rem;
}

/* ===== 5 new partner-logo positions added below =====
   Each one orbits the hero text in a different quadrant so they don't
   overlap each other or the original four (tt/linked/pntrst/meta).
   All inherit the glassy circle styling + IX2 mouse-hover effect from
   the base .social_hero-icon class. */

/* Spread the new 5 icons across the wider hero area instead of clustering
   them against the title. Each rule explicitly resets all four
   inset properties first because these icons also carry a piggybacked
   IX2 trigger class (is--tt/linked/pntrst/meta) whose positioning would
   otherwise bleed through and pin the new icon to the wrong edge. */
.social_hero-icon.is--snowflake {
  top: -5rem;
  bottom: auto;
  left: auto;
  right: 22rem;
}

.social_hero-icon.is--crowdstrike {
  top: auto;
  bottom: 8rem;
  left: auto;
  right: -3rem;
}

/* fortalice + signalmine moved to the OUTER top corners.
   Previous mid-height placement was overlapping the subtitle text
   under the H1 ("Mission-critical software for HUD, SEC, ..."). Pushing
   them up to top:4rem and out past the container edge (right/left: -3rem)
   plants them above the title flanks where nothing else competes for
   space — and clear of the CTA band entirely. */
.social_hero-icon.is--fortalice {
  top: 4rem;
  bottom: auto;
  left: auto;
  right: -3rem;
}

.social_hero-icon.is--zetaris {
  top: auto;
  bottom: 8rem;
  left: -3rem;
  right: auto;
}

.social_hero-icon.is--signalmine {
  top: 4rem;
  bottom: auto;
  left: -3rem;
  right: auto;
}

/* MOBILE — defense-in-depth.
   The neurakey CSS already hides .social_hero-icon at <=991px, but my
   custom rules above (positions, size, filter) are defined at top level
   with no media query. Source order means the later mobile-hide rule
   still wins for `display`, but I'm restating it here scoped to the
   modifier classes so any future edit that re-orders the file cannot
   accidentally expose 9 floating circles on a phone where the hero
   layout has no room for them. */
@media (max-width: 991px) {
  .social_hero-icon,
  .social_hero-icon.is--tt,
  .social_hero-icon.is--linked,
  .social_hero-icon.is--pntrst,
  .social_hero-icon.is--meta,
  .social_hero-icon.is--snowflake,
  .social_hero-icon.is--crowdstrike,
  .social_hero-icon.is--fortalice,
  .social_hero-icon.is--zetaris,
  .social_hero-icon.is--signalmine {
    display: none;
  }
}

.social-hero_phones-wrap {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 56rem;
  height: 36.125rem;
  display: flex;
  position: relative;
}

.social-hero_mobile-mockup {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #7479801f;
  border: .0625rem solid #7479800a;
  border-radius: 3rem;
  width: 13.4375rem;
  height: 27.6875rem;
  padding: .5625rem;
  position: absolute;
}

.social-hero_mobile-mockup.is--1 {
  z-index: 2;
  top: 7.125rem;
  left: 2rem;
  transform: rotate(-15deg);
}

.social-hero_mobile-mockup.is--3 {
  z-index: 5;
}

.social-hero_mobile-mockup.is--2 {
  z-index: 2;
  top: 3.25rem;
  left: 11rem;
  transform: rotate(-5deg);
}

.social-hero_mobile-mockup.is--4 {
  z-index: 2;
  top: 3.25rem;
  right: 11rem;
  transform: rotate(5deg);
}

.social-hero_mobile-mockup.is--5 {
  top: 7.125rem;
  right: 2rem;
  transform: rotate(15deg);
}

.social-hero_mobile-mockup.is--1-copy {
  z-index: 2;
  top: 7.125rem;
  left: 2rem;
  transform: rotate(-15deg);
}

.social-hero_mobile-mockup.is--2-copy {
  z-index: 2;
  top: 3.25rem;
  left: 11rem;
  transform: rotate(-5deg);
}

.social-hero_mobile-mockup.is--4-copy {
  z-index: 2;
  top: 3.25rem;
  right: 11rem;
  transform: rotate(5deg);
}

.mobile-mockup_inner-wrap {
  background-color: #000;
  border-radius: 2.25rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(0);
}

.partner-icons_title-wrap {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.icons_gradient-left {
  z-index: 5;
  background-image: linear-gradient(90deg, #131414, #13141400);
  width: 17rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.icons_gradient-right {
  z-index: 5;
  background-image: linear-gradient(90deg, #13141400, #131414);
  width: 17rem;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.social-about_content-block {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  flex-flow: column;
  padding-top: 6.75rem;
  padding-bottom: 6.75rem;
  display: flex;
  position: relative;
}

.social-about_nets-cards {
  z-index: 6;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}

.social-card {
  z-index: 4;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex-flow: column;
  height: 21.75rem;
  padding: 3.75rem 1.8rem 3.75rem 2rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.h2--32 {
  color: var(--_tokenization---text-white);
  letter-spacing: -.04em;
  font-size: 2rem;
  line-height: 2rem;
}

.social-card_icon {
  z-index: 7;
  aspect-ratio: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #ffffff05;
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  display: flex;
  position: absolute;
  top: -2.25rem;
  left: 2rem;
}

/* The 4 orange SVG icons inside the "Federal IT, delivered differently"
   social-card_icon circles. These SVGs carry class="i-100" which would
   stretch them to 100% — override here so they render at 60% inside the
   glass circle while staying centered (parent uses flex centering). */
.social-card_icon > svg {
  width: 60%;
  height: 60%;
}

.process_content-block {
  grid-column-gap: 3.5rem;
  grid-row-gap: 3.5rem;
  flex-flow: column;
  padding-top: 6.75rem;
  padding-bottom: 6.75rem;
  display: flex;
}

.process--subheading {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  max-width: 43.375rem;
  font-weight: 500;
}

.process_content-wrap {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  background-color: #f4f5f905;
  border: .0625rem solid #ffffff0a;
  border-radius: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 2rem 3rem;
  display: grid;
}

.process_card-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  display: flex;
}

.process-card_number-line {
  grid-column-gap: 3.25rem;
  grid-row-gap: 3.25rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.process-card_texts-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  display: flex;
}

.process_number-wrap {
  aspect-ratio: 1;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 6rem;
  display: flex;
  position: relative;
}

.process-number {
  aspect-ratio: 1;
  text-align: center;
  letter-spacing: -.04em;
  background-color: #f4f5f905;
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
  display: flex;
}

.process-number_circles {
  pointer-events: none;
  color: #f4f5f929;
  display: flex;
  position: absolute;
  inset: 0%;
}

.process-card_line {
  background-color: #f4f5f90a;
  width: 100%;
  height: .0625rem;
  position: relative;
  overflow: hidden;
}

.process-line_gradient-line {
  background-image: linear-gradient(90deg, #E8622200, #E86222 54%, #E8622200);
  width: 5rem;
  height: 100%;
  position: relative;
  top: 0;
  bottom: 0;
  left: -7rem;
}

.social-card_wrapp-gradient {
  z-index: 0;
  border-radius: 1.5rem;
  padding: .05rem;
  position: relative;
  overflow: hidden;
}

.gradient-animation {
  z-index: 2;
  background-image: linear-gradient(90deg, #E8622200, #E86222 50%, #E8622200);
  width: 7rem;
  height: 160%;
  transform: rotate(0);
}

.gradient-animation.is---white {
  background-image: linear-gradient(90deg, #E8622200, #fff 50%, #E8622200);
}

.social-card_wrapp {
  position: relative;
}

/* RESPONSIVE: 'Federal IT, delivered differently' 4-card grid.
     - Tablet (768-991): 2 columns side-by-side, centered
     - Mobile (<768): 1 column, centered
   Plus: kill the shimmer/edge artifacts, dynamic height, force text
   inside the cards to fill the full content width. */

/* TABLET — 2 columns */
@media (max-width: 991px) and (min-width: 768px) {
  .social-about_nets-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin: 0 auto !important;
  }
}

/* MOBILE — 1 column, centered */
@media (max-width: 767px) {
  .social-about_nets-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
}

/* SHARED — both tablet and mobile */
@media (max-width: 991px) {
  /* Each wrap fills the column, flush layout */
  .social-card_wrapp {
    width: 100% !important;
    margin: 0 !important;
  }
  /* Kill the rotating orange shimmer + the wrap's tiny padding that
     was leaking light edges past the card on mobile */
  .social-card_wrapp .gradient-animation_wrap,
  .social-card_wrapp .gradient-animation {
    display: none !important;
  }
  .social-card_wrapp-gradient {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 1.5rem !important;
    width: 100% !important;
  }
  /* Card itself: dynamic height, clean single-layer look */
  .social-card_wrapp .social-card,
  .social-card,
  .social-card.is--last {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-sizing: border-box !important;
  }
  /* Let text inside the card flow as natural inline content.
     GSAP's SplitText wraps each word/char in inline-styled spans;
     trying to width:100% / display:block them breaks the wrapping
     and puts every word on its own line. Only the direct h3 and p
     get full-width — their inner spans inherit naturally. */
  .social-card > h3,
  .social-card > p {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.gradient-animation_wrap {
  z-index: 2;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.section-form_wrap {
  background-color: #f4f5f905;
  border: .0625rem solid #ffffff0a;
  border-bottom-style: none;
  border-top-left-radius: 3.5rem;
  border-top-right-radius: 3.5rem;
  padding-top: 5.5rem;
  padding-bottom: 8.5rem;
}

.form-wrap {
  flex: none;
  max-width: 34.6875rem;
  position: relative;
}

.form_content-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.form-dots {
  position: absolute;
  top: -2rem;
  right: -2.5rem;
}

.calc_blocks-wrap {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  display: flex;
}

.calc-block {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  display: flex;
}

.calc_title-input {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.input-range {
  pointer-events: none;
  color: var(--_tokenization---text-white);
  text-align: right;
  letter-spacing: -.02em;
  background-color: #0000;
  border: 1px #000;
  width: 1rem;
  height: auto;
  margin-bottom: 0;
  padding: 0;
  font-size: .875rem;
  font-weight: 700;
}

.input-range::placeholder {
  color: var(--_tokenization---text-white);
}

.input-range.empl-max {
  text-align: left;
  width: 1.5rem;
}

.input-range.budg-min {
  width: 3rem;
}

.input-range.budg-max {
  text-align: left;
  width: 3rem;
}

.range-inputs--wrap {
  letter-spacing: -.02em;
  justify-content: flex-start;
  align-items: center;
  font-size: .875rem;
  font-weight: 700;
  display: flex;
}

.t--inline {
  display: inline-flex;
}

.t--inline.is--dash {
  margin-left: .25rem;
  margin-right: .25rem;
}

.range-wrap {
  background-color: #f4f5f905;
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  width: 100%;
  height: .45rem;
  position: relative;
}

.range_line-active {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 100rem;
  width: 10%;
  position: absolute;
  inset: 0%;
}

.range-trigger {
  background-color: var(--_tokenization---bg-white);
  cursor: pointer;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  position: absolute;
  top: -.5rem;
}

.range-trigger_dot {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 100rem;
  width: .5rem;
  height: .5rem;
}

.range-trigger--min {
  background-color: var(--_tokenization---bg-white);
  cursor: pointer;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  position: absolute;
  top: -.5rem;
  left: 0;
}

.range-trigger--min.empl--trig-min {
  left: 0;
}

.range-trigger--max {
  background-color: var(--_tokenization---bg-white);
  cursor: pointer;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  position: absolute;
  top: -.5rem;
  right: 0;
}

.range-trigger--max.empl--trig-max {
  right: 0;
}

.budget_line-active {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 100rem;
  width: 10%;
  position: absolute;
  inset: 0%;
}

.form-inner_inputs-content {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.form-inner_inputs-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
/* When the "Other" inquiry checkbox is selected, the conditional text-input
   row appears as the 8th grid item. By default it squeezes into one 1fr
   column (next to the Other card). Span columns 2 through 3 so the input
   reads as a proper "give us more detail" field, not a clipped fragment. */
#inquiry-other-detail {
  grid-column: 2 / -1;
}

.t--form-label {
  letter-spacing: -.02em;
  font-size: .875rem;
  line-height: 1.25rem;
}

.form-inner_checkbox-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  letter-spacing: -.02em;
  cursor: pointer;
  background-color: #f4f5f905;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding: .875rem 0 .875rem .75rem;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25rem;
  display: flex;
  position: relative;
}

.form-inner_checkbox-itself {
  z-index: 2;
  border: .0625rem solid #ffffff0a;
  border-radius: .75rem;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  position: absolute;
  inset: 0%;
}

.form-inner_checkbox-itself.w--redirected-checked {
  border-color: var(--_tokenization---accent-blue);
  background-color: #0000;
  background-image: linear-gradient(#E862221F, #E862221F);
}

.form-inner_checkbox-itself.w--redirected-focus {
  box-shadow: 0 0 #0003;
}

.checkbox-icon {
  flex: none;
  width: 1.5rem;
}

.form-inner_buttons-progress {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.form-inner_text-buttons {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.form--steps {
  color: var(--_tokenization---text-gray);
}

.form-progress {
  background-color: #ffffff0a;
  width: 100%;
  height: .0625rem;
  position: relative;
}

.form-progress_active {
  background-color: var(--_tokenization---accent-blue);
  width: 50%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
}

.form---inputs-wrapper {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  display: flex;
}

.form---inputs-wrapper.form-wrap--second {
  display: none;
}

.form---inputs-wrapper.form-wrap--first {
  display: flex;
}

.form---inputs-wrapper.form-wrap--second-copy {
  display: none;
}

.form-second_inputs-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  width: 100%;
  display: flex;
}

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

.form_label-input {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  display: flex;
}

.label {
  letter-spacing: -.02em;
  margin-bottom: 0;
  font-size: .875rem;
  line-height: 1.25rem;
}

.input {
  color: var(--_tokenization---text-white);
  letter-spacing: -.02em;
  background-color: #f4f5f905;
  border: .0625px solid #ffffff0a;
  border-radius: 1rem;
  height: 3rem;
  margin-bottom: 0;
  padding-top: .875rem;
  padding-bottom: .875rem;
  padding-left: 1rem;
  font-size: 14px;
  line-height: 20px;
}

.input::placeholder {
  color: var(--_tokenization---text-gray);
}

.buttons--double {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--white-4);
  text-align: center;
  letter-spacing: -.02em;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.25rem;
  justify-content: flex-start;
  align-items: center;
  padding: .25rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25rem;
  display: none;
}

.buttons--double.is--form {
  letter-spacing: -.02em;
  font-size: .875rem;
}

.form-block__form-image {
  justify-content: space-between;
  display: flex;
  position: relative;
  /* No min-height floor — the section is its natural form height so there's
     no dead space between the form and the FAQ section below. The Lottie
     on the right uses sticky positioning with viewport-relative sizing so
     it stays prominent regardless of form length. */
}

.form-image_wrap {
  justify-content: flex-start;
  align-items: flex-start;
  /* Responsive width: 55% of container, clamped between 40rem (640px)
     and 50rem (800px). */
  width: clamp(40rem, 55%, 50rem);
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.form-image_image-wrapper {
  width: 100%;
  /* Matches form section height exactly — lottie fills the right side
     of the contact form regardless of which step is showing. */
  height: 100%;
  display: block;
  position: relative;
}

/* === Contact-page form spacing overrides ===
   Tightens vertical rhythm so the form reads more compact:
   - smaller gap between Step 2 intro paragraph and the input grid
   - tighter row gaps between input rows
   - tighter label-to-input gap
   - smaller, more compact opt-in checkbox label
   Scoped to #contact-form so other forms on the site aren't affected. */
#contact-form .form---inputs-wrapper { grid-row-gap: 1.5rem; }
#contact-form .form-second_inputs-wrap { grid-row-gap: 1rem; }
#contact-form .form_label-input { grid-row-gap: 0.4rem; }
#contact-form .input-check { font-size: 0.8125rem; line-height: 1.45; }
#contact-form .w-checkbox.checkbox { margin-top: 0.5rem !important; }
/* Tighten the subheading + the form-inner_inputs-content "What is your
   inquiry about?" header above the inquiry cards. */
#contact-form .t--result-subheading.is--form { margin-bottom: 0; }
#contact-form .form-inner_inputs-content { gap: 0.75rem; }
#contact-form .form-inner_inputs-content .t--form-label { margin-bottom: 0.5rem; }

/* === Contact-page Lottie sizing override ===
   Scoped to the contact section only (#Contact-form) so other pages that
   use .form-image_wrap / .form-wrap (air-quire, etc.) aren't affected.
   Bumps the lottie container from clamp(40rem, 55%, 50rem) to a wider
   range and shrinks the form column from max 34.6875rem to 30rem so the
   horizontal space can be redistributed in favor of the animation.
   Result on 1360px-usable containers: form 480px + lottie ~843px (was
   ~748px), about 13% bigger lottie. Form inputs still have ~240px per
   column in the firstname/lastname row, plenty for those fields. */
#Contact-form .form-image_wrap {
  width: clamp(46rem, 62%, 58rem);
  align-items: center;
}
#Contact-form .form-wrap {
  max-width: 30rem;
}
/* Visual centering nudge: the lottie's geometric center is at the form
   section's geometric center, but the form column's content weight
   (heading + paragraphs + inquiry cards) lives in the upper 60% of
   the column with whitespace below. Pulling the lottie's middle layer
   up by 3.5rem aligns the orbit logo with the form's visual center
   of gravity. Negative margin doesn't change the lottie's rendered
   size or break the form layout — only shifts where the SVG draws
   inside its container. */
#Contact-form .form-image_image-wrapper {
  margin-top: -3.5rem;
}

.form-image_gradient-top {
  z-index: 4;
  background-image: linear-gradient(#181919 5%, #18191900);
  height: 20rem;
  position: absolute;
  top: -10rem;
  left: 0;
  right: 0;
}

.form-image_gradient-bottom {
  z-index: 4;
  background-image: linear-gradient(#18191900, #181919 95%);
  height: 20rem;
  position: absolute;
  bottom: -10rem;
  left: 0;
  right: 0;
}

.social-dots--title {
  z-index: 5;
  pointer-events: none;
  width: 18rem;
  display: flex;
  position: absolute;
  right: 24rem;
}

.social-dots--title.is--1 {
  width: 17.875rem;
  bottom: -15.9rem;
}

.social-dots--title.is--2 {
  width: 17.875rem;
  bottom: 0;
  left: 0;
}

.social-dots--title.is--3 {
  width: 17.875rem;
  bottom: 5.6rem;
}

.social-dots--title.is--4 {
  width: 17.875rem;
  bottom: 2.4rem;
  right: 0;
}

.system-bg--line {
  z-index: 3;
  background-color: #f4f5f914;
  width: .0625rem;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}

.system-bg--line.is--1 {
  left: 15rem;
}

.system-bg--line.is--2 {
  left: 25rem;
}

.system-bg--line.is--3 {
  left: 35rem;
}

.system-bg--line.is--4 {
  left: 45rem;
}

.system-bg--line.is--6 {
  right: 45rem;
}

.system-bg--line.is--7 {
  right: 35rem;
}

.system-bg--line.is--8 {
  right: 25rem;
}

.system-bg--line.is--9 {
  right: 15rem;
}

.bg--gradient {
  z-index: 2;
  position: absolute;
  inset: 0%;
}

.lines--gradient {
  z-index: 4;
  background-image: radial-gradient(circle at 50% 100%, #13141400 71%, #131414);
  position: absolute;
  inset: 0%;
}

.gradient-line--active-blue {
  z-index: 3;
  background-image: linear-gradient(#E8622200, #E86222 50%, #E8622200);
  width: 100%;
  height: 15%;
  position: absolute;
  inset: 0;
}

.lines--gradient---bottom {
  z-index: 4;
  background-image: linear-gradient(2deg, #131414 7%, #13141400 29%);
  position: absolute;
  inset: 0%;
}

.tool-line_icon-wrap {
  z-index: 6;
  background-color: #181b1f;
  border-radius: 100rem;
  width: 4.5rem;
  height: 4.5rem;
  position: absolute;
  left: -2.1rem;
}

.tool-line_icon-wrap.is--wp {
  bottom: 16.2rem;
}

.tool-line_icon-wrap.is--figm {
  top: 22.9rem;
}

.tool-line_icon-wrap.is--wf {
  top: 15.6rem;
}

.tool-line_icon-wrap.is--shpf {
  bottom: 22.1rem;
}

/* Additional partner icons (v10) — positioned at varied heights on lines
   3, 4, 6, 7 plus secondary spots on 1 and 9 so the section feels populated. */
.tool-line_icon-wrap.is--adb  { top: 6rem; }      /* Line 1 — Adobe */
.tool-line_icon-wrap.is--orcl { top: 6rem; }      /* Line 2 — Oracle */
.tool-line_icon-wrap.is--gcp  { top: 30rem; }     /* Line 3 — Google Cloud */
.tool-line_icon-wrap.is--ibm  { top: 12rem; }     /* Line 4 — IBM */
.tool-line_icon-wrap.is--snwf { top: 10rem; }     /* Line 6 — Snowflake */
.tool-line_icon-wrap.is--gh   { top: 30rem; }     /* Line 7 — GitHub */

/* Soft fade-in for the new icons since they don't have Webflow animations. */
.tool-line_icon-wrap.is--adb,
.tool-line_icon-wrap.is--orcl,
.tool-line_icon-wrap.is--gcp,
.tool-line_icon-wrap.is--ibm,
.tool-line_icon-wrap.is--snwf,
.tool-line_icon-wrap.is--gh {
  opacity: 0;
  animation: fmIconFadeIn 0.9s ease 0.6s forwards;
}
@keyframes fmIconFadeIn {
  to { opacity: 1; }
}

.image {
  max-width: 17rem;
}

.i-100-sea-seo {
  text-align: center;
  object-fit: cover;
  width: 65%;
}

.i-100-sea-seo.is--mobile {
  display: none;
}

.i-100-sea-seo.is--mockup-1 {
  object-position: 0% 50%;
}

.social-card_icon-sea-seo {
    z-index: 7;
  aspect-ratio: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #ffffff05;
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  display: flex;
  position: absolute;
  top: -2.25rem;
  left: 2rem;
}

.sea-seo-card {
  z-index: 4;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  min-height: 21.75rem;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 26rem;
  min-height: 18.75rem;
  padding: 3.75rem 2rem;
  display: flex;
  position: relative;
  /* overflow: hidden removed — was clipping content that exceeded fixed height.
     With min-height, card grows to fit. Border-radius still works without it. */
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

/* Flex stretching so every .sea-seo-card in a row matches the tallest sibling's
   height. .crm-about_nets-cards is display:flex with align-items:stretch (default),
   but the inner card had a fixed height that blocked stretching. Now the chain
   passes height through. */
.sea-seo-card_wrapp {
  display: flex;
  flex-direction: column;
}
.sea-seo-card_wrapp > .social-card_wrapp-gradient {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.sea-seo-card_wrapp > .social-card_wrapp-gradient > .sea-seo-card {
  flex: 1 1 auto;
}

.sea-seo-content-block {
  grid-column-gap: 5.25rem;
  grid-row-gap: 5.25rem;
  flex-flow: column;
  padding-top: 6.75rem;
  padding-bottom: 6.75rem;
  display: flex;
  position: relative;
}

.sea-seo-card_wrapp {
  border-radius: 1.5rem;
  position: relative;
}

.sea-seo---process_content-wrap {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: #f4f5f905;
  border: .0625rem solid #ffffff0a;
  border-radius: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  max-width: 84rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  display: grid;
}

.sea-seo---process_card-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  display: flex;
}

.sea-seo-hero_content-block-copy {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 5.9375rem;
  display: flex;
  position: relative;
}

.heading.state {
  text-align: left;
}

.sea-seo---process-card_line {
  background-color: #f4f5f90a;
  width: 100%;
  height: .1rem;
  position: relative;
  overflow: hidden;
}

.sea-seo---i-100 {
  object-fit: cover;
  height: 100%;
}

.sea-seo---i-100.is--mobile {
  display: none;
}

.sea-seo---i-100.is--mockup-1 {
  object-position: 0% 50%;
}

.sea-seo---i-100.sea-seo---is--desktop {
  width: auto;
  height: 40rem;
}

.sea-seo---option-picture {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.sea-seo-options_content-block-copy {
  margin-top: -1rem;
  padding-top: 3rem;
  position: relative;
}

.sea-seo---section-big-image-copy {
  background-color: #0000;
  margin-top: -4rem;
  padding-top: 0;
  padding-bottom: 7rem;
}

.sea-seo---hero_texts-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.automatisierung---i-100 {
  object-fit: cover;
  height: 100%;
}

.automatisierung---i-100.is--mobile {
  display: none;
}

.automatisierung---i-100.is--mockup-1 {
  object-position: 0% 50%;
}

.automatisierung---i-100.sea-seo---is--desktop {
  width: auto;
  height: 40rem;
}

.automatisierung---i-100.automatisierung---is--desktop {
  width: 100%;
  margin-left: -5%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.automatisierung---section-big-image {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 7rem;
}

.automatisierung-options_content-block {
  margin-top: -1rem;
  padding-top: 3rem;
  position: relative;
}

.automatisierung---option-picture {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.automatisierung-content-block {
  grid-column-gap: 5.25rem;
  grid-row-gap: 5.25rem;
  flex-flow: column;
  padding-top: 6.75rem;
  padding-bottom: 6.75rem;
  display: flex;
  position: relative;
}

.automatisierung_text-button {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 33.4375rem;
  display: flex;
}

.automatisierung_text-button.is--not-desktop {
  display: none;
}

.automatisierung_text-button.is--social-inner {
  max-width: 46rem;
}

.automatisierung_text-button.is--form {
  max-width: none;
}

.text-span, .text-span-2 {
  color: var(--_tokenization---text-white);
}

.crm-about_nets-cards {
  z-index: 6;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
  position: relative;
}

.section-crm_wrap {
  background-color: #131414;
  padding-top: 9.875rem;
  padding-bottom: 9.875rem;
}

.crm-block_-image {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.form-wrap-copy {
  flex: none;
  max-width: 34.6875rem;
  position: relative;
}

.form-image_wrap-automatisierung {
  justify-content: flex-start;
  align-items: center;
  width: 38%;
  display: block;
}

.cases_texts-wrap-copy {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  max-width: 38rem;
  display: flex;
}

.automatisierung-image_image-wrapper {
  width: 100%;
  display: block;
  position: static;
}

.form-image_gradient-top-copy {
  z-index: 4;
  background-image: linear-gradient(#181919 5%, #18191900);
  height: 10rem;
  position: absolute;
  top: -6rem;
  left: 0;
  right: 0;
}

.form-image_gradient-bottom-copy {
  z-index: 4;
  background-image: linear-gradient(#18191900, #181919 95%);
  height: 10rem;
  position: absolute;
  bottom: -6rem;
  left: 0;
  right: 0;
}

.t--result-subheading-copy {
  color: var(--_tokenization---text-gray);
  max-width: 30.5rem;
  font-style: normal;
  font-weight: 500;
}

.t--result-subheading-copy.is--form {
  max-width: 30.5625rem;
}

.container-1-rem {
  z-index: 4;
  background-color: #131414;
  width: 100%;
  max-width: 87rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
}

.i-100-copy {
  object-fit: cover;
  width: 100%;
  position: static;
}

.section-crm_wrap-2 {
  background-color: #131414;
  border: .0625rem solid #ffffff0a;
  border-bottom-style: none;
  border-radius: 3.5rem;
  padding-top: 9.875rem;
  padding-bottom: 9.875rem;
}

.crm-block_-image-2 {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  height: auto;
  display: flex;
  position: relative;
}

.container-8_2 {
  z-index: 4;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 2rem;
  padding-right: 4rem;
  position: relative;
}

.form-image_gradient-top-copy-copy {
  z-index: 4;
  background-image: linear-gradient(#141414 5%, #18191900);
  height: 10rem;
  position: absolute;
  top: -6rem;
  left: 0;
  right: 0;
}

.form-image_gradient-bottom-copy-copy {
  z-index: 4;
  background-image: linear-gradient(#18191900, #131313);
  height: 10rem;
  position: absolute;
  bottom: -6rem;
  left: 0;
  right: 0;
}

.container-8_3 {
  z-index: 4;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 8rem;
  padding-right: 4rem;
  position: relative;
}

.crm-dots-container {
  z-index: 5;
  pointer-events: none;
  width: 17rem;
  display: flex;
  position: absolute;
  top: 10rem;
  bottom: auto;
  right: 35rem;
}

.crm-dots-container.is--1 {
  width: 17.875rem;
  bottom: -15.9rem;
}

.crm-dots-container.is--2 {
  width: 17.875rem;
  bottom: 0;
  left: 0;
}

.crm-dots-container.is--3 {
  width: 17.875rem;
  bottom: 5.6rem;
}

.crm-dots-container.is--4 {
  width: 17.875rem;
  bottom: 2.4rem;
  right: 0;
}

.crm-dots-container-2 {
  z-index: 5;
  pointer-events: none;
  width: 18rem;
  display: flex;
  position: absolute;
  bottom: 24rem;
  right: -1rem;
}

.crm-dots-container-2.is--1 {
  width: 17.875rem;
  bottom: -15.9rem;
}

.crm-dots-container-2.is--2 {
  width: 17.875rem;
  bottom: 0;
  left: 0;
}

.crm-dots-container-2.is--3 {
  width: 17.875rem;
  bottom: 5.6rem;
}

.crm-dots-container-2.is--4 {
  width: 17.875rem;
  bottom: 2.4rem;
  right: 0;
}

.text-span-3 {
  color: var(--_tokenization---text-white);
}

.container-copy.is--hero-copy {
  position: static;
}

.section-hero-copy {
  height: 100vh;
}

.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;
}

.h1-hero-copy {
  flex-flow: column;
  font-size: 12.75rem;
  line-height: 12.375rem;
  display: flex;
}

.text-span-4 {
  color: var(--_tokenization---text-white);
}

.text-gradient-copy {
  text-shadow: 0 0 6rem #4780d580, 0 0 2rem #4780d7, 0 0 1rem #3082ff;
  font-size: 12.75rem;
}

.h1-hero-404 {
  flex-flow: column;
  font-size: 10.75rem;
  line-height: 120%;
  display: flex;
}

.h1-hero-coming {
  flex-flow: column;
  font-size: 7.75rem;
  line-height: 120%;
  display: flex;
}

.inner_slider-arrows-wrap {
  z-index: 5;
  grid-column-gap: .875rem;
  grid-row-gap: .875rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: -2rem;
  display: flex;
  position: relative;
}

.inner--arrow {
  aspect-ratio: 1;
  border: .03125rem solid #f4f5f9;
  border-radius: 1rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  display: flex;
}

.inner--arrow.is--disabled {
  opacity: .4;
}

.inner--arrow.sl--blogs-prev, .inner--arrow.sl--blogs-next {
  z-index: 5;
  cursor: pointer;
  position: relative;
}

.arrow--icon-wrap {
  width: 1.5rem;
  display: flex;
}

.case-card_common-wrap {
  border-radius: 1.5rem;
  width: 35.55rem;
  padding: .03125rem;
  position: relative;
  overflow: hidden;
}

.section-blue--right-rect {
  z-index: 4;
  aspect-ratio: 1;
  background-color: #E86222;
  border-radius: 10rem;
  width: 40rem;
  padding: .0625rem;
  position: absolute;
  bottom: -6.5rem;
  right: -5.8rem;
  overflow: hidden;
}

.section-blue--right-rect.is--blog {
  border-radius: 10rem;
  width: 37rem;
  bottom: -15.7rem;
  right: -7.1rem;
}

.section-blue--right-rect.is--blog-copy {
  border-radius: 10rem;
  width: 37rem;
  top: 5rem;
  bottom: 0;
  right: -7.1rem;
}

.corner-rect--inner {
  z-index: 3;
  aspect-ratio: 1;
  background-color: var(--_tokenization---text-blue);
  opacity: .95;
  border-radius: 10rem;
  width: 40rem;
  position: absolute;
  inset: .0625rem;
  box-shadow: inset 0 4px 10px #f4f5f91a;
}

.section-blue--left--rect {
  z-index: 4;
  aspect-ratio: 1;
  background-color: #E86222;
  border-radius: 10rem;
  width: 35rem;
  padding: .0625rem;
  position: absolute;
  bottom: -11.4rem;
  left: -5.4rem;
  overflow: hidden;
}

.blog_hero-block {
  height: 40rem;
  padding-top: 2rem;
  padding-bottom: 3.75rem;
}

.blog-hero_blue-card {
  z-index: 2;
  background-color: var(--_tokenization---accent-blue);
  border-radius: 3.5rem;
  height: 26.8125rem;
  padding: 3.75rem;
  position: relative;
  overflow: hidden;
}

.blog-hero_marquee-wrap {
  /* Marquee article cards float IN FRONT of the orange blue-card on all
     viewports — original German-template design intent. z-index:10 keeps
     them above the blue card (z-index:2) so the floating effect always
     reads as cards-over-card, never card-covering-cards. */
  z-index: 10;
  display: block;
  position: absolute;
  bottom: 3.75rem;
  left: 0;
  right: 0;
}

.blog-marquee_animation-wrap {
  grid-column-gap: 3.125rem;
  grid-row-gap: 3.125rem;
  display: flex;
  width: max-content;
  animation: scrollMarquee 50s linear infinite;
  will-change: transform;
}

.blog-hero_marquee-wrap:hover .blog-marquee_animation-wrap,
.blog-marquee_animation-wrap:hover {
  animation-play-state: paused;
}

@keyframes scrollMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.blog-marquee_animation-line {
  grid-column-gap: 3.125rem;
  grid-row-gap: 3.125rem;
  flex: none;
  display: flex;
}

.blog-marquee_blog-card {
  z-index: 5;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: #131414;
  background-image: linear-gradient(#f4f5f905, #f4f5f905);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: background-color .4s;
  display: flex;
  position: relative;
}

.blog-marquee_blog-card:hover {
  background-color: #202121;
}

.blog-marquee_card-image {
  border-radius: 1rem;
  width: 23.625rem;
  height: 15.875rem;
  overflow: hidden;
}

.marquee-blog_card-info {
  grid-column-gap: 2.25rem;
  grid-row-gap: 2.25rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 23.625rem;
  display: flex;
}

.marquee-blog--category-texts {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.marquee-blog---category-date {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.t--blog-category {
  color: var(--_tokenization---text-blue);
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-top: 10px;
  font-weight: 700;
}

.t--blog-category.blog-category-filter {
  margin-top: 0;
}

.t--blog-category.filter-category-all {
  color: var(--_tokenization---bg-white);
  transition: color .3s;
}

.t--blog-category.filter-category-all.is-active {
  color: var(--_tokenization---text-blue);
  font-weight: 700;
}

.t--date {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.marquee-blog_card-texts {
  grid-column-gap: .875rem;
  grid-row-gap: .875rem;
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  max-height: 11rem;
  display: flex;
  overflow: clip;
}

.t--artikel-title {
  color: var(--_tokenization---text-white);
  letter-spacing: -.04em;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

/* Titles on the article-grid cards display in full — no clamp.
   Word-break protects against overflow on extremely long unbroken words. */
.t--artikel-title.article-filter--name {
  word-break: break-word;
}

.blog-card_full-wrap {
  border-radius: 1.5rem;
  padding: .03125rem;
  position: relative;
  overflow: hidden;
}

.blog_articles-block {
  grid-column-gap: 3.5rem;
  grid-row-gap: 3.5rem;
  flex-flow: column;
  padding-top: 0rem;
  padding-bottom: 5.625rem;
  display: flex;
}

.articles-form {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: #0000;
  flex-flow: column;
  display: flex;
}

.articles_filtration-wrap {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.articles-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 1.75rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.articles_-catevory-filter {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.category_radios-wrap {
  grid-column-gap: 1.125rem;
  grid-row-gap: 1.125rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.filter-radio__default {
  background-color: var(--white-4);
  white-space: nowrap;
  cursor: pointer;
  border: .0625rem solid #ffffff0a;
  border-radius: .75rem;
  margin-bottom: 0;
  padding: .5rem 1rem;
  position: relative;
  overflow: hidden;
}

.filter-radio_button {
  z-index: 2;
  border: 1px #000;
  border-radius: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  position: static;
  inset: 0%;
}

.filter-radio_button.w--redirected-checked {
  background-color: var(--_tokenization---accent-blue);
}

.filter-radio_text-wrap {
  z-index: 4;
  pointer-events: none;
  position: relative;
}

.filter_input-wrap {
  position: relative;
}

.filter-input {
  background-color: var(--white-4);
  color: var(--_tokenization---text-white);
  border: .0625rem solid #f4f5f91a;
  border-radius: 100rem;
  width: 24.625rem;
  height: 2.75rem;
  margin-bottom: 0;
  padding-top: .625rem;
  padding-bottom: .625rem;
  padding-left: 1.3125rem;
}

.filter-input:focus {
  border-color: #fff3;
}

.filter-input::placeholder {
  color: #f4f5f999;
}

.filter-input_loop-icon {
  pointer-events: none;
  width: 1.125rem;
  display: flex;
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translate(0, -50%);
}

.article-card {
  z-index: 4;
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.25rem;
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: clip;
  box-shadow: inset 0 4px 10px #f4f5f90f;
}

.article-card_image-wrap {
  z-index: 1;
  height: 16.25rem;
  position: relative;
}

.article-card_info-wrap {
  z-index: 2;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: var(--_tokenization---bg-main);
  background-image: linear-gradient(to bottom, var(--white-4), var(--white-4));
  box-shadow: inset 5px 5px 20px 0 var(--white-4);
  border: .03125rem solid #ffffff0a;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: -1rem;
  padding: 1.5rem;
  display: flex;
  position: relative;
}

.article-card_category-info {
  grid-column-gap: 1.2rem;
  grid-row-gap: 1.2rem;
  flex-flow: column;
  width: 100%;
  /* Was: height: 11.875rem; overflow: clip — that hard ceiling chopped the description
     whenever the title ran past 1-2 lines. Switch to min-height so short cards keep their
     baseline rhythm and long-title cards expand naturally. */
  min-height: 11.875rem;
  display: flex;
}

.article-card_desc-wrap {
  color: var(--_tokenization---text-gray);
  /* Reserve a stable vertical block so descriptions line up visually across cards
     regardless of how long the title is above. ~3 lines × 1.55 line-height ≈ 4.65rem. */
  min-height: 4.65rem;
  display: flex;
  align-items: flex-start;
}
.article-card_desc-wrap > p {
  margin: 0;
  width: 100%;
}

/* Scroll progress bar — a thin orange bar at the very top of the viewport
   that fills as the user scrolls. Created by JS, no markup needed in HTML.
   Targets blog post pages but works on any page that includes the script. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #E86222, #E86222);
  box-shadow: 0 0 8px rgba(243, 107, 37, 0.45);
  z-index: 9999;
  pointer-events: none;
  transition: width 80ms ease-out;
  will-change: width;
}

/* Clamp every article-card description to 3 lines with a visible "…",
   so titles of varying length don't push the description out of the card.
   Stronger specificity (.article-card_full chain) so this wins over inline
   paragraph rules from the Webflow template. The explicit max-height + line-height
   are a belt-and-suspenders backstop for browsers where -webkit-line-clamp drifts. */
.article-card_desc-wrap p,
.article-card_desc-wrap p.paragraph,
.article-card_full .article-card_desc-wrap p,
.article-card_full .article-card_desc-wrap p.paragraph {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.55;
  max-height: calc(1.55em * 3);
}

.article-card_category-title {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  display: flex;
}

.blog-cta_content-block {
  padding-top: 6.75rem;
  padding-bottom: 9.125rem;
}

.cta_form-wrap {
  background-color: #f4f5f924;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.25rem;
  width: 100%;
  max-width: 33.8125rem;
  padding: .25rem;
}

.cta-form_input-button {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.cta-input {
  color: var(--_tokenization---text-white);
  letter-spacing: -.02em;
  background-color: #f4f5f90a;
  border: .0625rem solid #f4f5f91a;
  border-radius: 1rem;
  height: 3rem;
  margin-bottom: 0;
  padding: .875rem 2.9375rem .875rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25rem;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.cta-input::placeholder {
  color: var(--_tokenization---text-white);
}

.article-card_full {
  border-radius: 1.25rem;
  padding: .03125rem;
  position: relative;
  overflow: hidden;
  /* Uniform card height across the whole grid — sized for the worst case
     (4-line title + 3-line description + Read More). Cards with shorter
     content get balanced via the flex push-to-bottom rules below. */
  min-height: 38rem;
  display: flex;
  flex-direction: column;
}

/* Make .article-card fill its full container so backgrounds + borders span
   the entire card_full min-height. */
.article-card_full > .article-card {
  flex: 1 1 auto;
  height: auto;
}

/* Make info-wrap stretch to absorb extra vertical space when title/description
   are short, then push the Read More link to the bottom of that space. */
.article-card_full .article-card_info-wrap {
  flex: 1 1 auto;
}
.article-card_full .article-card_info-wrap > a.button-text {
  margin-top: auto;
}

.success-message {
  background-color: #0000;
}

.text-span-5, .text-span-6 {
  color: var(--_tokenization---bg-white);
}

.filter-radio__all {
  background-color: var(--transparent);
  white-space: nowrap;
  cursor: pointer;
  border: .0625rem #ffffff0a;
  border-radius: .75rem;
  margin-bottom: 0;
  padding: .5rem 1rem;
  position: relative;
  overflow: hidden;
}

.container-0-rem {
  z-index: 4;
  width: 100%;
  max-width: 87rem;
  position: relative;
}

.container-0-rem.position--static {
  position: static;
}

.text-span-7, .text-span-8 {
  color: var(--_tokenization---text-white);
}

.h2--24-1-5 {
  color: #f4f5f9;
  letter-spacing: -.04em;
  font-size: 1.5rem;
  line-height: 2rem;
}

.process-card_texts-wrap-2 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: #747980;
  flex-flow: column;
  display: flex;
}

.process_content-wrap-copy {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  background-color: #f4f5f905;
  border: .0625rem solid #ffffff0a;
  border-radius: 2rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 2rem 3rem;
  display: grid;
}

.form-image_wrap-durch-automatisierung-copy {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.form-image_wrap-durch-automatisierung-copy-copy {
  justify-content: flex-start;
  align-items: center;
  width: 48%;
  display: flex;
}

.branding---section-big-image {
  background-color: #0000;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 2rem;
  padding-right: 4rem;
}

.branding_-options_content-block {
  margin-top: 0;
  padding-top: 2rem;
  position: relative;
}

.branding---option-picture {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.branding---i-100 {
  object-fit: cover;
  height: 100%;
}

.branding---i-100.is--mobile {
  display: none;
}

.branding---i-100.is--mockup-1 {
  object-position: 0% 50%;
}

.branding---i-100.sea-seo---is--desktop {
  width: auto;
  height: 40rem;
}

.branding---i-100.branding---is--desktop {
  width: auto;
  max-width: 78rem;
  height: 36rem;
}

.hero_content-wrap-copy {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 6.9375rem;
  padding-bottom: 11.0625rem;
  display: flex;
  position: relative;
}

.article-image-outline-wrap {
  aspect-ratio: 1;
  background-color: #252626;
  border: .03125rem solid #ffffff0a;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 3.25rem;
  display: flex;
}

.article-avatar-image-wrap {
  aspect-ratio: 1;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  display: flex;
}

.article-author-info-wrap {
  grid-column-gap: .1875rem;
  grid-row-gap: .1875rem;
  display: flex;
}

.article-author-avatar-info-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.div-block {
  grid-column-gap: .1875rem;
  grid-row-gap: .1875rem;
  display: flex;
}

.article-date-read-time-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.article-additional-ihfo-wrap {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 45.625rem;
  margin-top: 3.75rem;
  margin-bottom: 2.5rem;
  display: flex;
}

.intro-text-wrap {
  color: var(--_tokenization---text-gray);
  width: 100%;
  max-width: 45.625rem;
  font-family: Mulish, Arial, sans-serif;
  font-weight: 400;
}

.article-intro-text {
  color: var(--_tokenization---text-gray);
  width: 100%;
  max-width: 45.6rem;
}

.rich-text {
  color: var(--_tokenization---text-gray);
  width: 100%;
  max-width: 45.625rem;
  margin-bottom: 1.5rem;
}

.rich-text.smaller {
  max-width: 30.125rem;
}

.rich-text-keypoints {
  color: var(--_tokenization---text-gray);
  margin-top: .5rem;
}

.key-points-wrap {
  display: flex;
}

.keypoints-line {
  background-color: #E86222;
  border-radius: 4rem;
  width: .1875rem;
  margin-right: 1rem;
}

.rich-text strong {
  color: var(--_tokenization---text-white);
}

.article-section-title {
  width: 100%;
  max-width: 45.625rem;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

.rich-text-block {
  color: var(--_tokenization---text-gray);
}

.article-image-wrap {
  width: 14.375rem;
  height: 10rem;
}

.article-illustration-wrap {
  max-width: 14.375rem;
  max-height: 9.57563rem;
}

.article-comparation-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.article-subsection-title {
  margin-bottom: 1.5rem;
  font-family: Mulish, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5rem;
}

.article-example-wrap {
  z-index: 1;
  background-color: var(--_tokenization---accent-blue);
  border-radius: 1.5rem;
  width: 100%;
  max-width: 45.625rem;
  height: 10rem;
  padding-top: 1.125rem;
  padding-left: 1.5rem;
  position: relative;
  overflow: hidden;
}

.article-example-image-texture-wrap {
  z-index: 0;
  opacity: .46;
  display: block;
  position: absolute;
  inset: 0;
}

.article-example-heading {
  z-index: 2;
  font-family: Mulish, Arial, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 2.2rem;
  position: relative;
}

.article-example-desc {
  z-index: 2;
  margin-top: .5rem;
  position: relative;
}

.article-advantage-icon {
  aspect-ratio: 1;
  color: var(--_tokenization---text-blue);
  width: 1.5rem;
}

.article-icon-desc-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.article-comaraison-text {
  color: var(--_tokenization---text-gray);
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.article-comparaison-headimg-desc-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  display: flex;
}

.article-comparaison-heading {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
}

.article-comparaison-heading.sea {
  margin-top: 1.5rem;
}

.article-comparaison-subtitle {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.article-desc-wrap {
  margin-top: 1.5rem;
  margin-bottom: .25rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
}

.section {
  display: block;
}

.text-span-9 {
  color: var(--_tokenization---text-white);
}

.t--result-subheading-sea {
  color: var(--_tokenization---text-gray);
  max-width: 43rem;
  font-weight: 500;
}

.t--result-subheading-sea.is--form {
  max-width: 30.5625rem;
}

.hero_content-wrap-branding {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 6.9375rem;
  padding-bottom: 6.9375rem;
  display: flex;
  position: relative;
}

.text-span-10, .text-span-11 {
  color: var(--_tokenization---text-white);
}

.reviews_texts-wrap-content {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.text-span-12, .text-span-13 {
  color: var(--_tokenization---text-white);
}

.content-hero_content-block {
  grid-column-gap: 5.25rem;
  grid-row-gap: 5.25rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 5.9375rem;
  padding-bottom: 4.25rem;
  display: flex;
  position: relative;
}

.content-hero_tab-wrap {
  z-index: 2;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 56rem;
  height: 33rem;
  display: flex;
  position: relative;
}

.content-hero_tab-mockup {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #7479801f;
  border: .0625rem solid #7479800a;
  border-radius: 3rem;
  width: 56rem;
  height: 32rem;
  padding: .5625rem;
  position: absolute;
}

.content-hero_tab-mockup.is--1 {
  z-index: 2;
  top: 7.125rem;
  left: 2rem;
  transform: rotate(-15deg);
}

.content-hero_tab-mockup.is--3 {
  z-index: 5;
}

.content-hero_tab-mockup.is--2 {
  z-index: 2;
  top: 3.25rem;
  left: 11rem;
  transform: rotate(-5deg);
}

.content-hero_tab-mockup.is--4 {
  z-index: 2;
  top: 3.25rem;
  right: 11rem;
  transform: rotate(5deg);
}

.content-hero_tab-mockup.is--5 {
  top: 7.125rem;
  right: 2rem;
  transform: rotate(15deg);
}

.content-mockup_inner-wrap {
  background-color: #000;
  border-radius: 2.25rem;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(0);
}

.background-video {
  width: 100%;
  height: 100%;
  display: none;
}

.werbeanzeigen_content-block-copy {
  grid-column-gap: 3.5rem;
  grid-row-gap: 3.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 6.75rem;
  padding-bottom: 8.9375rem;
  display: flex;
}

.werbeanzeigen_phones-wrap {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 70rem;
  height: 36.125rem;
  display: flex;
}

.content-mobile-mockup {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #7479801f;
  border: .0625rem solid #7479800a;
  border-radius: 3rem;
  width: 14rem;
  height: 27.6875rem;
  padding: .5625rem;
  position: absolute;
}

.content-mobile-mockup.is--1 {
  z-index: 2;
  top: 7.125rem;
  left: 2rem;
  transform: rotate(-15deg);
}

.content-mobile-mockup.is--3 {
  z-index: 5;
}

.content-mobile-mockup.is--2 {
  z-index: 2;
  top: 3.25rem;
  left: 11rem;
  transform: rotate(-5deg);
}

.content-mobile-mockup.is--4 {
  z-index: 2;
  top: 3.25rem;
  right: 11rem;
  transform: rotate(5deg);
}

.content-mobile-mockup.is--5 {
  top: 7.125rem;
  right: 2rem;
  transform: rotate(15deg);
}

.content-mobile-mockup.is--1-copy {
  z-index: 2;
  position: relative;
  top: 3.25rem;
}

.content-mobile-mockup.is--2-copy {
  z-index: 2;
  position: relative;
  top: 7.125rem;
}

.content-mobile-mockup.is--4-copy {
  z-index: 2;
  position: relative;
  top: 3.25rem;
}

.content-mobile-mockup.is--5-copy {
  position: relative;
  top: 7.125rem;
}

.text-span-14, .text-span-15 {
  color: var(--_tokenization---text-white);
}

.i-80 {
  object-fit: cover;
  width: 80%;
  height: 80%;
}

.i-80.is--mobile {
  display: none;
}

.i-80.is--mockup-1 {
  object-position: 0% 50%;
}

.section-blue--right-rect-copy {
  z-index: 4;
  aspect-ratio: 1;
  background-color: #E86222;
  border-radius: 4rem;
  width: 33rem;
  padding: .0625rem;
  position: absolute;
  bottom: -6.5rem;
  right: -5.8rem;
  overflow: hidden;
}

.section-blue--right-rect-copy.is--blog {
  width: 37rem;
  bottom: -15.7rem;
  right: -7.1rem;
}

.cta_figure-wrap-bg {
  z-index: 2;
  width: 100%;
  position: absolute;
  bottom: -4rem;
  left: 0;
}

.cta_figure-wrap-bg.for--bigger {
  width: 176rem;
  bottom: -69.5rem;
  left: -39.3rem;
}

.cta_figure-wrap-bg.is--blog {
  bottom: -63.2rem;
}

.blog_gradient-wrap {
  z-index: 6;
  opacity: .75;
  pointer-events: none;
  mix-blend-mode: hard-light;
  position: absolute;
  inset: 0%;
  /* Force the wrap to fill the hero card edge-to-edge and the img
     inside to cover the full area. The default .i-100 utility sets
     height: auto which made the gradient stop mid-way down the hero
     card on tall mobile viewports. */
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.blog_gradient-wrap > img,
.blog_gradient-wrap .i-100 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsletter-wrap-bg {
  z-index: 2;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.newsletter-wrap-bg.for--bigger {
  width: 176rem;
  bottom: -69.5rem;
  left: -39.3rem;
}

.newsletter-wrap-bg.is--blog {
  bottom: -63.2rem;
}

.text-span-16, .text-span-17, .text-span-18 {
  color: var(--_tokenization---text-white);
}

.hero-role-inner-down {
  background-color: var(--white-4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  padding: .125rem .5rem;
}

.hero-role-inner-down.is--right {
  border-top-left-radius: 0;
}

.hero-role-inner-down.is--blue {
  background-color: var(--_tokenization---accent-blue);
}

.hero-role-inner-down.is--blue.is--right {
  border-top-left-radius: 100rem;
  border-bottom-left-radius: 0;
}

.hero-role-inner-down.is--left {
  border-top-right-radius: 0;
}

.hero-role-inner-down.is--left.is--blue {
  border-style: solid;
}

.hero-role-inner-down.is--left-down {
  border-top-right-radius: 100rem;
  border-bottom-right-radius: 0;
}

.hero-role-inner-down.is--left-down.is--blue {
  border-style: solid;
}

.h2--system-seo-mob {
  color: var(--_tokenization---text-white);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.5rem;
  display: none;
}

.h2--system-seo {
  color: var(--_tokenization---text-white);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.5rem;
}

.collection-list-wrapper-4 {
  flex-flow: wrap;
  max-width: 50rem;
  height: auto;
}

.paragraph {
  text-overflow: ellipsis;
}

.form-block {
  display: none;
}

.text-span-19, .text-span-20 {
  color: var(--_tokenization---text-white);
}

.karriere-about_nets-cards {
  z-index: 6;
  grid-column-gap: 1.5rem;
  grid-row-gap: 4rem;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
  position: relative;
}

.karriere-card_wrapp {
  position: relative;
}

.social-card-copy {
  z-index: 4;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex-flow: column;
  height: auto;
  padding: 3.75rem 1.8rem 3.75rem 2rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.h2--24-mitte {
  color: var(--_tokenization---text-white);
  text-align: center;
  letter-spacing: -.04em;
  font-size: 1.25rem;
  line-height: 2rem;
}

.karriere-card_icon {
  z-index: 7;
  aspect-ratio: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #ffffff05;
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  display: flex;
  position: absolute;
  top: -2.25rem;
  left: 40%;
  right: 40%;
}

.section-hero-blogs {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.blogs_hero-content-wrap {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 3.5rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 3.75rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.blogs_hero-content {
  z-index: 8;
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.blogs_hero-content.is--blog {
  max-width: 39.125rem;
}

.blogs_hero-texts-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blogs_hero-titles-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0;
  display: flex;
}

.h1-blogs {
  text-align: left;
  font-size: 3.5rem;
  line-height: 4rem;
}

.blogs_hero-figure-wrap-bg {
  z-index: 2;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: -60%;
  left: 0;
}

.blogs_hero-figure-wrap-bg.for--bigger {
  width: 176rem;
  bottom: -69.5rem;
  left: -39.3rem;
}

.blogs_hero-figure-wrap-bg.is--blog {
  bottom: -63.2rem;
}

.blogs_wrap {
  grid-column-gap: 3.75rem;
  grid-row-gap: 3.75rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  padding-bottom: 6.75rem;
  display: flex;
}

.blogs_left-content-wrap {
  flex-flow: column;
  flex: 1;
  min-width: 60%;
  display: flex;
}

.blogs_right-content-wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  flex: 1;
  /* height: 70rem removed — was capping sticky behavior so the right
     column stopped following the scroll near the conclusion. Auto height
     plus align-self lets the sticky element behave correctly through
     the full article body. */
  height: auto;
  align-self: flex-start;
  display: flex;
  position: sticky;
  /* Top offset must clear the sticky site header (.header), which is
     position: sticky + ~88px tall on desktop (1.375rem padding * 2 plus
     the logo row). Previously was 20px which put the "Key Takeaways"
     title under the header. Bumped to 110px so the sidebar top sits
     comfortably below the header with a small breathing gap. */
  top: 110px;
}

.blogs_top-content-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
  margin-bottom:50px;
}

.blogs_autor-info-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.blogs_autor-image {
  border-radius: 100rem;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  background: rgba(243, 107, 37, 0.12);
  padding: 10px;
}

.blogs_autor-text-wrap {
  grid-column-gap: .3rem;
  grid-row-gap: .3rem;
  display: flex;
}

.blogs_text-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  display: flex;
}

.blogs_time-wrap {
  grid-column-gap: .3rem;
  grid-row-gap: .3rem;
  display: flex;
}

.blogs_classic-text-rich {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: flex;
}

.blogs_classic-text-rich strong {
  color: var(--_tokenization---text-white);
}

.blogs_classic-text-rich.flex {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
}

.blogs_classic-text-rich h3 {
  color: var(--_tokenization---text-white);
  font-size: 1.5rem;
  line-height: 2rem;
}

.blogs_classic-text-rich blockquote {
  border-left-width: 3px;
  border-left-color: var(--_tokenization---accent-blue);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 1rem;
  line-height: 2rem;
}

.blogs_classic-text-rich em {
  border-left: 3px solid var(--_tokenization---accent-blue);
  padding-left: 1rem;
  font-style: normal;
}

.blogs_classic-text-rich h4 {
  color: var(--_tokenization---text-white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.h2-blogs {
  letter-spacing: -.02em;
  padding-top: 1rem;
  font-size: 2rem;
  line-height: 2.5rem;
  /*padding-left: 1rem;
  text-indent: -1.1em;*/
  padding-bottom:1rem
}

.h3-blogs {
  margin-bottom: -1rem;
  font-size: 1.5rem;
}

.dunkle-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  margin-top: 2rem;
  display: flex;
}

.accordion-blogs {
  border: .1rem solid var(--white-4);
  background-color: var(--white-2);
  border-radius: 1.25rem;
}

.blogs_faq-text {
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: flex;
}

.blogs_accent-text-rich {
  background-color: var(--_tokenization---accent-blue);
  color: var(--_tokenization---bg-white);
  border-radius: 1.5rem;
  flex-flow: column;
  margin-top: .5rem;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: flex;
}

.blogs_accent-text-rich h2 {
  font-size: 2rem;
}

.blogs_accent-text-rich h3 {
  font-size: 1.5rem;
}

.blogs_accent-text-rich ul {
  padding-left: 25px;
}

.blogs_menu-wrap {
  z-index: 4;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex-flow: column;
  padding: 1.5rem 2rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.h5-white {
  color: var(--_tokenization---text-white);
  font-size: 2rem;
  line-height: 2.5rem;
}

.blogs_menu {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  font-size: 1.25rem;
  line-height: 1.25rem;
  display: flex;
}

.subtitle-wrap {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  padding-left: 1.5rem;
  display: flex;
}

.blogs_baner-content-wrap {
  background-color: var(--_tokenization---accent-blue);
  border-radius: 1.5rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.blogs_link {
  direction: ltr;
  line-height: 1.75rem;
  list-style-type: decimal;
  transition: all .3s ease-in-out;
  display: flex;
}

.blogs_link:hover, .blogs_link._w--current {
  color: var(--_tokenization---text-white);
}

.blogs_link.padding {
  padding-left: 3rem;
}

.bold-text {
  color: var(--_tokenization---text-white);
}

.list {
  border-left: .25rem solid var(--_tokenization---accent-blue);
}

.blogs_image-block {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blogs_image-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 17rem;
  max-width: 20rem;
  height: 100%;
}

.blogs_advantage-text-rich {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  margin-top: -1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: flex;
}

.blogs_advantage-text-rich strong {
  color: var(--_tokenization---text-white);
}

.blogs_advantage-text-rich.flex {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: row;
}

.blogs_advantage-text-rich h4 {
  font-size: 1.125rem;
  font-weight: 700;
}

.blogs_disadvantages-text-rich {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  margin-top: -1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: flex;
}

.blogs_disadvantages-text-rich strong {
  color: var(--_tokenization---text-white);
}

.blogs_disadvantages-text-rich ul {
  flex-flow: column;
  display: flex;
}

.blogs_disadvantages-text-rich.flex {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: row;
}

.blogs_disadvantages-text-rich h4 {
  font-size: 1.125rem;
  font-weight: 700;
}

.blogs_phases-text-rich {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: flex;
}

.blogs_phases-text-rich strong {
  color: var(--_tokenization---text-white);
}

.blogs_phases-text-rich ul {
  border-left: .25rem solid var(--_tokenization---accent-blue);
  padding-left: 25px;
  list-style-type: none;
}

.blogs_phases-text-rich.flex {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: row;
}

.blogs_dots {
  z-index: 5;
  pointer-events: none;
  width: 18rem;
  display: flex;
  position: absolute;
  top: 0;
}

.blogs_dots.is--1 {
  width: 17.875rem;
  bottom: -15.9rem;
}

.blogs_dots.is--2 {
  width: 17.875rem;
  bottom: 0;
  left: 0;
}

.blogs_dots.is--3 {
  width: 17.875rem;
  top: auto;
  bottom: 20rem;
  left: 20rem;
}

.blogs_dots.is--4 {
  width: 17.875rem;
  bottom: 2.4rem;
  right: 0;
}

.section-w2 {
  background-color: var(--white-2);
  border-radius: 4rem;
}

.sea-seo-content-block-blogs {
  grid-column-gap: 5.25rem;
  grid-row-gap: 5.25rem;
  flex-flow: column;
  padding-top: 6.75rem;
  padding-bottom: 6.75rem;
  display: flex;
  position: relative;
}

.blogs_card-wrap {
  border-radius: 1.25rem;
  width: 27rem;
  padding: .03125rem;
  position: relative;
  overflow: hidden;
}

.collection-list {
  display: flex;
}

.vertical_faq-line {
  background-color: currentColor;
  border-radius: 1rem;
  width: .09375rem;
  height: .625rem;
  transition-property: transform;
  transition-duration: .3s;
  transition-timing-function: ease;
  position: absolute;
}

.swiper-blogs.is--reviews {
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.swiper-blogs.is--case {
  overflow: visible;
}

.swiper-blogs.is--sea {
  z-index: 6;
  width: 100%;
  position: relative;
  overflow: visible;
}

.swiper-blogs.is--seo {
  width: 100%;
  overflow: visible;
}

.swiper-blogs.is--blogs {
  overflow: hidden;
}

.swiper-blogs-wrapper {
  display: flex;
}

.swiper-blogs-wrapper.is--reviews {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.swiper-blogs-wrapper.is--sea, .swiper-blogs-wrapper.is--seo, .swiper-blogs-wrapper.is--blogs {
  display: flex;
}

.swiper-blogs-slide {
  flex: none;
  width: 29rem;
}

.swiper-blogs-slide.is--reviews {
  flex: none;
}

.swiper-blogs-slide.is--case {
  width: 39.25rem;
}

.swiper-blogs-slide.is--sea {
  border-radius: 1.5rem;
  flex: none;
  width: 26.1rem;
}

.swiper-blogs-slide.is--seo {
  flex: none;
  width: 26.1rem;
}

.swiper-blogs-slide.is--blogs {
  flex: none;
  width: 29rem;
}

.impressum_hero-block {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.impressum_gradient-wrap {
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: normal;
  border-radius: 5.5rem;
  position: absolute;
  inset: 0;
}

.impressum-hero_blue-card {
  z-index: 2;
  background-color: var(--_tokenization---accent-blue);
  border-radius: 3.5rem;
  height: 15.5rem;
  padding: 3.75rem;
  position: relative;
  overflow: hidden;
}

.section-rechtliches_wrap-copy {
  border: .0625rem solid #ffffff0a;
  border-bottom-style: none;
  padding-top: 0;
  padding-bottom: 11.875rem;
}

.rechtliches_texts-wrap {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  width: 45%;
  display: flex;
}

.rechtliches-block {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 2rem;
  display: flex;
  position: relative;
}

.rechtliches_texts-rechts-wrap {
  flex-flow: column;
  width: 100%;
  display: flex;
}

.italic-text {
  font-style: normal;
}

.link, .link-2, .link-3, .link-4 {
  color: var(--_tokenization---text-blue);
}

.t--result-subheading-1rem {
  color: var(--_tokenization---text-gray);
  max-width: 46rem;
  margin-bottom: 2rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 120%;
  overflow: hidden;
}

.t--result-subheading-1rem.is--form {
  max-width: 30.5625rem;
}

.heading-14 {
  font-size: 2.5rem;
  line-height: 120%;
}

.rechtliches-dots-container {
  z-index: 5;
  pointer-events: none;
  width: 18rem;
  display: flex;
  position: absolute;
  top: 6rem;
  left: 5rem;
}

.rechtliches-dots-container.is--1 {
  width: 17.875rem;
  bottom: -15.9rem;
}

.rechtliches-dots-container.is--2 {
  width: 17.875rem;
  bottom: 0;
  left: 0;
}

.rechtliches-dots-container.is--3 {
  width: 17.875rem;
  bottom: 5.6rem;
}

.rechtliches-dots-container.is--4 {
  width: 17.875rem;
  bottom: 2.4rem;
  right: 0;
}

.text-span-21 {
  text-overflow: ellipsis;
}

.list-2 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  margin-bottom: 1rem;
  padding-left: 32px;
  font-size: 1.125rem;
  line-height: 120%;
  display: flex;
}

.heading-15 {
  font-size: 1px;
}

.heading-16 {
  font-size: 1.5rem;
  line-height: 120%;
}

.text-span-22, .text-span-23, .text-span-24, .text-span-25 {
  color: var(--_tokenization---text-blue);
}

.h6 {
  margin-top: 1rem;
  margin-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 120%;
}

.text-span-26 {
  color: var(--_tokenization---text-blue);
}

.text-span-27 {
  color: var(--_tokenization---bg-white);
}

.container-copy {
  z-index: 4;
  width: 100%;
  max-width: 87rem;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
}

.container-copy.is--header {
  max-width: 96rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.container-copy.position--static {
  position: static;
}

.blogs_autor-name-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  display: flex;
}

.blogs_baner-content {
  z-index: 8;
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.blogs_baner-content.is--blog {
  max-width: 39.125rem;
}

.section-logos {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.h3-faq-blogs {
  font-size: 1.25rem;
  line-height: 2rem;
}

.blogs_accent-block {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--_tokenization---accent-blue);
  color: var(--_tokenization---bg-white);
  background-image: linear-gradient(#E86222 50%, #E86222 77%, #E86222);
  border-radius: 1.5rem;
  flex-flow: column;
  margin-top: .5rem;
  margin-bottom: 1.5rem;
  padding: .625rem 1.5rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: flex;
}

.blogs_accent-block h2 {
  /*padding-left: 2rem;*/
  font-size: 2rem;
}

.blogs_accent-block h3 {
  font-size: 1.5rem;
}

.blogs_accent-block ul {
  padding-left: 25px;
}

.blogs_conclusion-text-rich {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: flex;
}

.blogs_conclusion-text-rich strong {
  color: var(--_tokenization---text-white);
}

.blogs_conclusion-text-rich.flex {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: row;
}

.blogs_conclusion-text-rich h3 {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
}

.blogs_conclusion-text-rich blockquote {
  border-left-width: 3px;
  border-left-color: var(--_tokenization---accent-blue);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 1rem;
  line-height: 2rem;
}

.blogs_conclusion-text-rich em {
  border-left: 3px solid var(--_tokenization---accent-blue);
  padding-left: 1rem;
  font-style: normal;
}

.blogs_conclusion-text-rich h4 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
}

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

.karriere_title {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.paragraph-2 {
  font-size: 1rem;
  line-height: 1.5rem;
}

.karriere_tag {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 0;
  display: flex;
}

.h3-faq-karriere {
  font-size: 2rem;
  line-height: 2.25rem;
}

.paragraph-faq {
  font-size: 1rem;
}

.accordion_heading-copy {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  letter-spacing: -.04em;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: .75rem .75rem .75rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
  display: flex;
}

.accordion_heading-copy.blogs {
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 1.25rem;
  line-height: 2rem;
}

.accordion_heading_kariere {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  letter-spacing: -.04em;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: .75rem .75rem .75rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
  display: flex;
}

.accordion_heading_kariere.blogs {
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 1.25rem;
  line-height: 2rem;
}

.text-block-2, .svg-2 {
  color: var(--_tokenization---text-white);
}

.karriere_content-block {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  padding-top: 6.75rem;
  padding-bottom: 6.75rem;
  display: flex;
}

.accordion-text-copy, .stelle-text {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  letter-spacing: -.04em;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 44rem;
  padding-bottom: .875rem;
  padding-left: 1.5rem;
  display: flex;
}

.stellebeschreibung-liste {
  padding-top: 1.5rem;
}

.stelle-liste-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  flex-flow: column;
  display: flex;
}

.text-span-28 {
  color: var(--_tokenization---text-white);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-span-29 {
  color: var(--_tokenization---text-white);
}

.content-image_gradient-bottom {
  z-index: 4;
  background-image: linear-gradient(#18191900, #18191991 97%);
  height: 10rem;
  position: absolute;
  bottom: -10rem;
  left: 0;
  right: 0;
}

.content-image_gradient-top {
  z-index: 4;
  background-image: linear-gradient(#181919 5%, #18191900);
  height: 10rem;
  position: absolute;
  top: -12rem;
  left: 0;
  right: 0;
}

.content-image_image-wrapper {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 56rem;
  display: flex;
  position: relative;
}

.i-100-2 {
  object-fit: contain;
  max-width: 90%;
}

.i-100-2.is--mobile {
  display: none;
}

.i-100-2.is--mockup-1 {
  object-position: 0% 50%;
}

.i-100-2.is--blog {
  object-position: 50% 30%;
}

.form---inputs-wrapper-copy {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  display: flex;
}

.form---inputs-wrapper-copy.form-wrap--second {
  display: none;
}

.form---inputs-wrapper-copy.form-wrap--first, .form---inputs-wrapper-copy.form-wrap--second-copy {
  display: flex;
}

.buttons--double-copy {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--white-4);
  text-align: center;
  letter-spacing: -.02em;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.25rem;
  justify-content: flex-start;
  align-items: center;
  padding: .25rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25rem;
  display: block;
}

.buttons--double-copy.is--form {
  letter-spacing: -.02em;
  font-size: .875rem;
}

.button_inner-wrap-copy {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  background-color: var(--_tokenization---accent-blue);
  border-radius: 1.25rem;
  justify-content: center;
  align-items: flex-start;
  padding: .875rem 1.5rem;
  display: flex;
}

.button_inner-wrap-copy.is--white {
  background-color: var(--_tokenization---bg-white);
  color: var(--_tokenization---text-blue);
  justify-content: center;
  align-items: center;
}

.button_inner-wrap-copy.is--white.is--form {
  border-radius: 1rem;
}

.button_inner-wrap-copy.is--form {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  align-items: center;
  padding: .625rem 1rem;
}

.button_inner-wrap-copy.is--form.form-back {
  background-color: #f4f5f90a;
  border: .0625rem solid #ffffff0a;
  border-radius: 1rem .5rem .5rem 1rem;
  transition: box-shadow .45s;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.button_inner-wrap-copy.is--form.form-back:hover {
  box-shadow: inset 0 5px 12px #f4f5f933;
}

.button_inner-wrap-copy.is--form.form-submit {
  border-radius: 1rem;
  transition: box-shadow .45s;
}

.button_inner-wrap-copy.is--form.form-submit:hover {
  box-shadow: inset 0 5px 12px #fff6;
}

.code-embed-2 {
  display: none;
}

.i-100_60 {
  object-fit: cover;
  width: 60%;
  height: 60%;
}

.i-100_60.is--mobile {
  display: none;
}

.i-100_60.is--mockup-1 {
  object-position: 0% 50%;
}

.i-100_60.is--blog {
  object-position: 50% 30%;
}

.section-2 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: none;
}

.ber_uns_nets-cards {
  z-index: 6;
  grid-column-gap: 3.5rem;
  grid-row-gap: 3.5rem;
  flex-flow: row;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}

.ber_uns-card {
  z-index: 4;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex-flow: column;
  /* Was justify-content: center (vertically centered the text inside the
     card, leaving big empty space top and bottom whenever content was
     short). Changed to flex-start so text packs at top below the icon
     badge and the card just sizes to its content. */
  justify-content: flex-start;
  align-items: stretch;
  /* Equal left/right padding so heading and body extend symmetrically.
     2rem top is enough to clear the icon badge that sits at top:-2.25rem. */
  padding: 3.5rem 2rem 2rem 2rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.div-block-4 {
  grid-column-gap: 3.75rem;
  grid-row-gap: 3.75rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.team-card_info-wrap {
  z-index: 5;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border: .0625rem solid var(--white-4);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: var(--_tokenization---text-gray);
  background-color: #1d1e1e;
  border-radius: 1.5rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .1px;
  padding: 1.5rem;
  display: flex;
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0%;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.team-card {
  z-index: 4;
  border: .0625rem solid var(--white-4);
  background-color: #1d1e1e;
  border-radius: 1.5rem;
  flex: none;
  padding-top: .1rem;
  padding-left: .1rem;
  padding-right: .1rem;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.ber_uns_nets-cards-copy {
  z-index: 6;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: stretch;
  place-items: stretch stretch;
  display: grid;
  position: relative;
}

.team_common-wrap {
  border-radius: 1.5rem;
  width: auto;
  padding: .03125rem;
  position: relative;
  overflow: hidden;
}

.case-card_common-wrap-copy {
  border-radius: 1.5rem;
  width: 35.55rem;
  padding: .03125rem;
  position: relative;
  overflow: hidden;
}

.team_card_tag {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  border: .0625rem solid var(--white-4);
  background-color: var(--white-2);
  border-radius: .75rem;
  justify-content: flex-start;
  align-items: center;
  padding: .5rem 1rem .5rem .75rem;
  display: flex;
}

.i-100-copy {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.i-100-copy.is--mobile {
  display: none;
}

.i-100-copy.is--mockup-1 {
  object-position: 0% 50%;
}

.i-100-copy.is--blog {
  object-position: 50% 30%;
}

.i-100-team {
  background-image: radial-gradient(circle farthest-corner at 50% 50%, var(--blue), #7479801a 84%);
  object-fit: cover;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.i-100-team.is--mobile {
  display: none;
}

.i-100-team.is--mockup-1 {
  object-position: 0% 50%;
}

.i-100-team.is--blog {
  object-position: 50% 30%;
}

.cases_text-button-copy {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 33.4375rem;
  display: flex;
}

.cases_text-button-copy.is--not-desktop {
  display: block;
}

.cases_text-button-copy.is--social-inner {
  max-width: 48rem;
}

.cases_text-button-copy.is--form {
  max-width: none;
}

.paragraph-3 {
  color: var(--_tokenization---text-white);
}

.input-check {
  color: var(--_tokenization---text-gray);
  letter-spacing: -.02em;
  font-size: 1rem;
  line-height: 18px;
}

.input-check::placeholder {
  color: var(--_tokenization---text-gray);
}

.checkbox {
  margin-top: -1rem;
  margin-bottom: 0;
}

.link-6 {
  color: #b3bcc7;
}

.home-image_gradient-top {
  z-index: 4;
  /*background-image: linear-gradient(#181919 5%, #18191900);*/
  height: 20rem;
  position: absolute;
  top: -7rem;
  left: 0;
  right: 0;
}

.hero-heading-center {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4ebf3;
  padding: 80px 30px;
  position: relative;
}

.container-2 {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.centered-heading {
  text-align: center;
  margin-bottom: 16px;
}

.centered-heading.margin-bottom-32px {
  margin-bottom: 32px;
}

.hero-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.hero-split {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 46%;
  display: flex;
}

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

.button-primary {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #1a1b1f;
  padding: 12px 25px;
  font-size: 12px;
  line-height: 20px;
  transition: all .2s;
}

.button-primary:hover {
  color: #fff;
  background-color: #32343a;
}

.button-primary:active {
  background-color: #43464d;
}

.shadow-two {
  box-shadow: 0 4px 24px #96a3b514;
}

.case-card_tag-copy {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  align-items: center;
  width: auto;
  padding-left: .75rem;
  padding-right: 1rem;
  display: flex;
}

.floating-badge {
  z-index: 9999;
  transition: transform .3s ease-out;
  position: fixed;
  /* Vertically centered on right edge — see overriding rule near line 2322 */
  top: 50%;
  right: 0%;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
}

.floating-badge:hover {
  /* Preserve the centering translateY when scaling on hover */
  transform: translateY(-50%) scale(1.08);
}

.german-web-aw {
  width: 6.5rem;
}

.berating---i-100-copy {
  object-fit: cover;
  height: 100%;
}

.berating---i-100-copy.is--mobile {
  display: none;
}

.berating---i-100-copy.is--mockup-1 {
  object-position: 0% 50%;
}

.berating---i-100-copy.sea-seo---is--desktop {
  width: auto;
  height: 36.7rem;
}

.beratung--section-big-image-copy-copy {
  background-color: #0000;
  margin-top: -3rem;
  padding-top: 0;
  padding-bottom: 0;
}

.beratung---i-100 {
  object-fit: cover;
  height: 100%;
}

.beratung---i-100.is--mobile {
  display: none;
}

.beratung---i-100.is--mockup-1 {
  object-position: 0% 50%;
}

.beratung---i-100.sea-seo---is--desktop {
  width: auto;
  height: 40rem;
}

.beratung---i-100.branding---is--desktop, .beratung---i-100.beratung--is--desktop {
  width: auto;
  max-width: 78rem;
  height: 36rem;
}

.i-100-team-h {
  background-image: radial-gradient(circle farthest-corner at 50% 50%, var(--blue), #7479801a 84%);
  object-fit: cover;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.i-100-team-h.is--mobile {
  display: none;
}

.i-100-team-h.is--mockup-1 {
  object-position: 0% 50%;
}

.i-100-team-h.is--blog {
  object-position: 50% 30%;
}

.team-card_info-wrap-copy {
  z-index: 5;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 1.5rem 2rem;
  display: flex;
  position: absolute;
  inset: 0%;
}

.heading-17 {
  font-size: 5rem;
  font-weight: 700;
  line-height: 6rem;
}

.logo-card {
  z-index: 4;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  justify-content: center;
  align-items: center;
  max-height: 9.875rem;
  padding: 1.375rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.logo-cards {
  grid-column-gap: 1.375rem;
  grid-row-gap: 1.375rem;
  flex-flow: wrap;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: space-between;
  align-items: stretch;
  max-width: 34.75rem;
  display: none;
}

.image-3 {
  width: auto;
}

.i-logo {
  width: auto;
  height: 100%;
}

.logo-card-1 {
  z-index: 4;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  justify-content: center;
  align-items: center;
  width: 54%;
  height: 9.875rem;
  padding: 1.375rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.logo-card-2 {
  z-index: 4;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  justify-content: center;
  align-items: center;
  width: 42%;
  height: 9.875rem;
  padding: 1.375rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.logo-card-3 {
  z-index: 4;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  justify-content: center;
  align-items: center;
  width: 64%;
  height: 9.875rem;
  padding: 1.375rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

.logo-card-copy {
  z-index: 4;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  justify-content: center;
  align-items: center;
  width: 32%;
  max-height: 9.875rem;
  padding: 1.375rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}



.beruns-image_wrap {
  justify-content: space-between;
  align-items: center;
  width: 50%;
  display: flex;
  position: absolute;
  right: 0;
}

.beruns_image-wrapper {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 40rem;
  display: flex;
  position: relative;
}

.collection-list-2 {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  margin-right: -20px;
  display: flex;
}

.collection-item {
  padding-left: 0;
  padding-right: 0;
}

.text-gradient-copy {
  text-shadow: 0 0 6rem #4780d580, 0 0 2rem #4780d7, 0 0 1rem #3082ff;
  font-size: 5.75rem;
  display: block;
}

.success-message-2 {
  background-color: var(--transparent);
  height: 40rem;
}

.text-restour {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 33.4375rem;
  display: flex;
}

.text-restour.is--not-desktop {
  display: block;
}

.text-restour.is--social-inner {
  max-width: 54.7rem;
}

.text-restour.is--form {
  max-width: none;
}

.reviews_texts-wrap-restaurants {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.i-40 {
  object-fit: cover;
  width: 40%;
  height: 40%;
}

.i-40.is--mobile {
  display: none;
}

.i-40.is--mockup-1 {
  object-position: 0% 50%;
}

.social-card_icon-boarder {
  z-index: 7;
  aspect-ratio: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #ffffff05;
  border: 2px solid #ffffff0a;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  display: flex;
  position: absolute;
  top: -2.25rem;
  left: 2rem;
}

.h2--28 {
  color: var(--_tokenization---text-white);
  letter-spacing: -.04em;
  font-size: 1.75rem;
  line-height: 2rem;
}

.blogs_autor-image-copy {
  border-radius: 100rem;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
}

.social-card_icon-copy {
  z-index: 7;
  aspect-ratio: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #ffffff05;
  border: .0625rem solid #ffffff0a;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  display: flex;
}

@media screen and (max-width: 991px) {
  .header {
    position: relative;
  }

  .container.is--header {
    position: static;
  }

  .header_content-wrap {
    justify-content: space-between;
    align-items: center;
    height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    position: static;
  }

  .menu-wrap {
    grid-column-gap: 10rem;
    grid-row-gap: 10rem;
    flex-flow: column;
    display: none;
    inset: 100% 0 auto;
    overflow: hidden;
  }

  .header_navigation-wrap {
    background-color: #0000;
    border-style: none;
    flex-flow: column;
    width: 100%;
  }

  .navlink {
    width: 100%;
    font-size: 2rem;
    line-height: 120%;
  }

  .navlink.w--current {
    box-shadow: inset 0 5px 12px #f4f5f90f;
  }

  .navlink.is--dd {
    justify-content: center;
    align-items: center;
  }

  .header-logo, .header_button-wrap.arrow-animation {
    position: relative;
    inset: auto;
  }

  .hero_bg-wrap {
    width: 64rem;
  }

  .hero-dots.is--1 {
    z-index: 3;
    bottom: -13rem;
  }

  .hero-dots.is--4 {
    bottom: 0;
  }

  .section-hero {
    overflow: clip;
  }

  .hero-role.is--web-des {
    top: 6.4rem;
    right: .8rem;
  }

  .hero-role.is--branding {
    bottom: 9rem;
    right: 8.2rem;
  }

  .hero-role.is--social {
    left: 4.6rem;
  }

  .hero-role.is--seo {
    left: -1.3rem;
  }

  .hero-role.is--content {
    left: 2.9rem;
  }

  .hero-role.is--positionierung {
    bottom: 1rem;
    left: 11rem;
  }

  .hero-role.is--corporate-design {
    bottom: 10rem;
    right: -1rem;
  }

  .hero-role.is--tonalit-t {
    bottom: 5rem;
    right: 16rem;
  }

  .hero-role.is--zielgruppe {
    bottom: 9rem;
    right: 10rem;
  }

  .hero-role.is--werte {
    bottom: 0;
    left: 0;
  }

  .hero-role.is--corporate-design-copy {
    top: 6.4rem;
    right: .8rem;
  }

  .hero-role.is--marke {
    top: 9rem;
    left: 11rem;
  }

  .hero-role.is--marktanalyse {
    bottom: 16rem;
    left: -1.3rem;
  }

  .hero-role.is--logo {
    top: 5rem;
    right: 23rem;
  }

  .hero-role.is--website {
    top: 4rem;
    right: 13rem;
  }

  .hero-role.is--werbenzeigen {
    top: 0;
    right: 3rem;
  }

  .hero-role.is--ugc-ads {
    bottom: 10rem;
    left: 2rem;
  }

  .hero-role.is--video-ads {
    bottom: 35rem;
    left: 16rem;
  }

  .hero-role.is--animationen {
    bottom: 9rem;
    right: 14rem;
  }

  .hero-role.is--statische-ads {
    bottom: 36rem;
    right: 2rem;
  }

  .hero-role.is--analyse {
    top: 13rem;
    right: 0;
  }

  .hero-role.is--strategie {
    top: 3.5rem;
    right: 3rem;
  }

  .hero-role.is--ziele {
    bottom: 10.5rem;
    left: 0;
  }

  .hero-role.is--umsetzung {
    bottom: 14.5rem;
    left: -1.3rem;
  }

  .hero-role.is--optimierung {
    top: 4rem;
    bottom: auto;
    left: 3rem;
  }

  .hero-role_arrow.is--leftside {
    border-radius: 0 20px;
  }

  .services_content-wrap {
    flex-flow: column;
  }

  .h2--section-white {
    font-size: 5rem;
    line-height: 120%;
  }

  .results_content-wrap {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
    justify-content: flex-start;
  }

  .t--result-subheading.is--form {
    max-width: 32.5625rem;
  }

  .h2--logos {
    background-image: linear-gradient(#3b3e42, #696e74 40%);
  }

  .accordion_heading {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
  }

  .accordion-text {
    padding-right: 1rem;
  }

  .footer {
    position: relative;
    bottom: auto;
  }

  .header_dd-list.w--open {
    justify-content: flex-start;
    align-items: center;
    left: 0;
    right: 0;
  }

  .menu {
    z-index: 5;
    aspect-ratio: 1;
    background-color: var(--white-4);
    border: .0625rem solid #ffffff0a;
    border-radius: 1.25rem;
    width: 3rem;
    padding: .25rem;
    display: flex;
    position: relative;
  }

  .menu_inner {
    aspect-ratio: 1;
    background-color: var(--white-4);
    border: 1px solid #ffffff0a;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    padding: 0;
    display: flex;
    position: relative;
  }

  .menu-line {
    background-color: var(--_tokenization---text-white);
    width: 1.125rem;
    height: .0625rem;
    padding: 0;
    position: absolute;
  }

  .menu-line.is--upper {
    width: 75%;
    left: 0;
  }

  .menu-line.is--bottom {
    width: 75%;
    right: 0;
  }

  .menu-line.is--middle {
    left: 0;
    right: 0;
  }

  .menu_lines-wrap {
    justify-content: center;
    align-items: center;
    width: 1.125rem;
    height: .75rem;
    padding: 0;
    display: flex;
    position: relative;
  }

  .header_overlay {
    z-index: 3;
    background-color: var(--_tokenization---bg-main);
    position: fixed;
    inset: 0%;
  }

  .cases_content-block, .cases_content-track {
    height: auto;
  }

  .cases_content-wrap {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .cases_text-button.is--desktop {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    margin-top: 4rem;
    display: flex;
  }

  .cases_text-button.is--not-desktop {
    margin-bottom: 4rem;
    display: flex;
  }

  .cases_texts-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .case-card {
    width: auto;
  }

  .case-card_titles-icon {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .cases_content {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .review_dots {
    left: 14rem;
  }

  .swiper.is--reviews {
    width: 100%;
    overflow: visible;
  }

  .swiper.is--case {
    width: 80%;
    overflow: hidden;
  }

  .swiper-wrapper.is--reviews {
    overflow: visible;
  }

  .swiper-slide.is--reviews {
    width: 100%;
  }

  .swiper-slide.is--case {
    flex: none;
    width: 100%;
  }

  .review_content-wrap {
    max-width: none;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .review_slider-buttons {
    margin-top: 2rem;
    position: relative;
    top: auto;
    right: auto;
  }

  .slider-button {
    aspect-ratio: auto;
    border-radius: .75rem;
    width: 50%;
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .slider-button.review-btn---prev {
    border-radius: 100rem;
  }

  .slider-button.review-btn---next, .slider-button.case-btn--next, .slider-button.case-btn--prev {
    border-radius: 1000rem;
  }

  .review-slider_pagination {
    display: none;
  }

  .review-slide_fake {
    bottom: 4.9rem;
    right: -7.2rem;
  }

  .review-slider_wrapper {
    width: 60%;
  }

  .logos-h2--mobile {
    text-align: center;
    margin-bottom: 2rem;
    display: block;
  }

  .review_buttons-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    width: 78%;
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: flex;
  }

  .social_hero-icon {
    display: none;
  }

  .social-hero_mobile-mockup.is--1 {
    left: 1rem;
  }

  .social-hero_mobile-mockup.is--2 {
    top: 3rem;
    left: 7rem;
  }

  .social-hero_mobile-mockup.is--4 {
    top: 3rem;
    right: 7rem;
  }

  .social-hero_mobile-mockup.is--5 {
    right: -1rem;
  }

  .social-hero_mobile-mockup.is--1-copy {
    left: 1rem;
  }

  .social-hero_mobile-mockup.is--2-copy {
    top: 3rem;
    left: 7rem;
  }

  .social-hero_mobile-mockup.is--4-copy {
    top: 3rem;
    right: 7rem;
  }

  .social-about_nets-cards {
    grid-row-gap: 3.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .social-card, .social-card.is--last {
    height: 18rem;
  }

  .process_content-wrap {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }

  .section-form_wrap {
    padding-bottom: 5.5rem;
  }

  .form-wrap {
    max-width: 45rem;
    padding-bottom: 2px;
  }

  .form-block__form-image {
    flex-flow: column;
    /* Clear the desktop 71rem floor — on mobile/tablet the layout stacks
       vertically, so the form column + image-wrap each contribute their
       own intrinsic height. */
    min-height: auto;
  }

  .form-image_wrap {
    justify-content: center;
    align-items: center;
    width: 70%;
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
  }

  .form-image_image-wrapper {
    height: 33rem;
    margin-top: 4rem;
  }

  .form-image_gradient-top {
    height: 10rem;
    top: 0;
  }

  .form-image_gradient-bottom {
    height: 12rem;
    bottom: 0;
  }

  .social-dots--title {
    right: 6.1rem;
  }

  .social-dots--title.is--1 {
    z-index: 3;
    bottom: -13rem;
  }

  .system-bg--line.is--1 {
    left: 5.9rem;
  }

  .system-bg--line.is--2 {
    left: 15.6rem;
  }

  .system-bg--line.is--3, .system-bg--line.is--4, .system-bg--line.is--5, .system-bg--line.is--6, .system-bg--line.is--7 {
    display: none;
  }

  .system-bg--line.is--8 {
    right: 14.7rem;
  }

  .system-bg--line.is--9 {
    right: 5.8rem;
  }

  .image {
    width: 50%;
  }

  .image-2 {
    max-width: 17rem;
  }

  .sea-seo-card, .sea-seo-card.is--last {
    min-height: 18rem;
  }

  .sea-seo-card {
    min-height: 18.75rem;
    padding-top: 2.75rem;
  }

  .sea-seo---process_content-wrap {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .sea-seo---i-100.sea-seo---is--desktop {
    height: auto;
    max-height: 28rem;
  }

  .sea-seo---section-big-image-copy {
    padding-bottom: 5rem;
  }

  .automatisierung---i-100.automatisierung---is--desktop {
    height: auto;
  }

  .automatisierung---section-big-image {
    padding-bottom: 3rem;
  }

  .automatisierung-content-block {
    padding-top: 5.75rem;
    padding-bottom: 5.75rem;
  }

  .automatisierung_text-button.is--desktop {
    display: none;
  }

  .automatisierung_text-button.is--not-desktop {
    margin-bottom: 4rem;
    display: flex;
  }

  .crm-about_nets-cards {
    grid-row-gap: 3.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .section-crm_wrap {
    padding-top: 5.75rem;
    padding-bottom: 5.75rem;
  }

  .crm-block_-image {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: row;
    height: auto;
  }

  .form-wrap-copy {
    max-width: none;
  }

  .form-image_wrap-automatisierung {
    justify-content: center;
    align-items: center;
    width: 45%;
    max-width: none;
  }

  .cases_texts-wrap-copy {
    width: 50%;
    max-width: none;
  }

  .form-image_gradient-top-copy {
    width: 200%;
    top: 0;
  }

  .form-image_gradient-bottom-copy {
    bottom: 0;
  }

  .container-1-rem {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .container-1-rem.is--header {
    position: static;
  }

  .section-crm_wrap-2 {
    padding-top: 5.75rem;
    padding-bottom: 5.75rem;
  }

  .crm-block_-image-2 {
    flex-flow: row;
  }

  .container-8_2 {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .container-8_2.is--header {
    position: static;
  }

  .form-image_gradient-top-copy-copy {
    top: 0;
  }

  .form-image_gradient-bottom-copy-copy {
    bottom: 0;
  }

  .container-8_3 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .container-8_3.is--header {
    position: static;
  }

  .heading-2, .heading-3, .heading-4, .heading-5 {
    font-size: 3rem;
    line-height: 3.5rem;
  }

  .crm-dots-container {
    right: 12rem;
  }

  .crm-dots-container.is--1 {
    z-index: 3;
    bottom: -13rem;
  }

  .crm-dots-container-2 {
    right: 6.1rem;
  }

  .crm-dots-container-2.is--1 {
    z-index: 3;
    bottom: -13rem;
  }

  .container-copy.is--header {
    position: static;
  }

  .section-hero-copy {
    overflow: clip;
  }

  .case-card_common-wrap {
    width: auto;
  }

  .section-blue--right-rect.is--blog {
    display: none;
  }

  .section-blue--right-rect.is--blog-copy {
    display: block;
  }

  .section-blue--left--rect {
    display: none;
  }

  .blog-hero_marquee-wrap {
    bottom: 2.25rem;
  }

  .articles-form {
    flex-flow: row;
  }

  .articles_filtration-wrap {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
  }

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

  .articles_-catevory-filter {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .filter-input {
    width: 22rem;
  }

  .container-0-rem.is--header {
    position: static;
  }

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

  .form-image_wrap-durch-automatisierung-copy, .form-image_wrap-durch-automatisierung-copy-copy {
    justify-content: center;
    align-items: center;
    width: 45%;
    max-width: none;
  }

  .branding_-options_content-block {
    max-width: 50rem;
  }

  .branding---i-100.branding---is--desktop {
    width: auto;
    height: 28rem;
  }

  .content-hero_tab-wrap {
    max-width: 50rem;
    height: 28.5rem;
  }

  .content-hero_tab-mockup {
    width: 100%;
    height: 100%;
  }

  .content-hero_tab-mockup.is--1 {
    left: 1rem;
  }

  .content-hero_tab-mockup.is--2 {
    top: 3rem;
    left: 7rem;
  }

  .content-hero_tab-mockup.is--4 {
    top: 3rem;
    right: 7rem;
  }

  .content-hero_tab-mockup.is--5 {
    right: -1rem;
  }

  .werbeanzeigen_content-block-copy {
    padding-bottom: 5.75rem;
  }

  .werbeanzeigen_phones-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    max-width: 50rem;
    height: 31rem;
  }

  .content-mobile-mockup {
    height: 24rem;
  }

  .content-mobile-mockup.is--1 {
    left: 1rem;
  }

  .content-mobile-mockup.is--2 {
    top: 3rem;
    left: 7rem;
  }

  .content-mobile-mockup.is--4 {
    top: 3rem;
    right: 7rem;
  }

  .content-mobile-mockup.is--5 {
    right: -1rem;
  }

  .content-mobile-mockup.is--1-copy {
    top: 0;
  }

  .content-mobile-mockup.is--2-copy {
    top: 3rem;
  }

  .content-mobile-mockup.is--4-copy {
    top: 0;
  }

  .content-mobile-mockup.is--5-copy {
    top: 3rem;
  }

  .section-blue--right-rect-copy.is--blog {
    display: none;
  }

  .cta_figure-wrap-bg {
    bottom: 0;
  }

  .newsletter-wrap-bg {
    bottom: 0;
  }

  .karriere-about_nets-cards {
    grid-row-gap: 3.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .social-card-copy.is--last {
    height: 18rem;
  }

  .blogs_hero-figure-wrap-bg {
    bottom: 0;
  }

  .blogs_wrap {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .blogs_left-content-wrap {
    min-width: 60%;
  }

  .blogs_right-content-wrap {
    height: 72rem;
  }

  .blogs_text-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: row;
  }

  .blogs_accent-text-rich h2 {
    line-height: 2.5rem;
  }

  .blogs_menu-wrap {
    padding: 1.5rem 1rem;
  }

  .blogs_menu-wrap.is--last {
    height: 18rem;
  }

  .blogs_image-block {
    flex-flow: column;
  }

  .blogs_dots.is--1 {
    z-index: 3;
    bottom: -13rem;
  }

  .swiper-blogs.is--reviews {
    width: 100%;
    overflow: visible;
  }

  .swiper-blogs.is--case {
    width: 80%;
    overflow: hidden;
  }

  .swiper-blogs-wrapper.is--reviews {
    overflow: visible;
  }

  .swiper-blogs-slide.is--reviews {
    width: 100%;
  }

  .swiper-blogs-slide.is--case {
    flex: none;
    width: 100%;
  }

  .impressum_hero-block {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .section-rechtliches_wrap-copy {
    padding-top: 0;
    padding-bottom: 5.75rem;
  }

  .rechtliches_texts-wrap {
    width: 40%;
  }

  .rechtliches-block {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: row;
    height: auto;
    margin-top: 0;
  }

  .rechtliches_texts-rechts-wrap {
    width: 100%;
    max-width: none;
  }

  .rechtliches-dots-container {
    right: 6.1rem;
  }

  .rechtliches-dots-container.is--1 {
    z-index: 3;
    bottom: -13rem;
  }

  .container-copy.is--header {
    padding-left: 0;
    padding-right: 0;
    position: static;
  }

  .blogs_accent-block h2 {
    line-height: 2.5rem;
  }

  .accordion-text-copy, .stelle-text {
    padding-right: 1rem;
  }

  .content-image_gradient-bottom {
    height: 12rem;
    bottom: 0;
  }

  .content-image_gradient-top {
    height: 10rem;
    top: 0;
  }

  .content-image_image-wrapper {
    height: 33rem;
    margin-top: 4rem;
  }

  .ber_uns_nets-cards {
    grid-row-gap: 3.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .ber_uns-card, .ber_uns-card.is--last {
    height: 18rem;
  }

  .team-card {
    width: auto;
  }

  .ber_uns_nets-cards-copy {
    grid-row-gap: 3.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .team_common-wrap, .case-card_common-wrap-copy {
    width: auto;
  }

  .cases_text-button-copy.is--desktop {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    margin-top: 4rem;
    display: flex;
  }

  .cases_text-button-copy.is--not-desktop {
    margin-bottom: 4rem;
    display: flex;
  }

  .input-check {
    max-width: 36rem;
  }

  .home-image_gradient-top {
    height: 10rem;
    top: 0;
  }

  .container-2 {
    max-width: 728px;
  }

  .hero-wrapper {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: -40px;
  }

  .hero-split {
    max-width: 100%;
    margin-bottom: 40px;
  }

  .berating---i-100-copy.sea-seo---is--desktop {
    height: auto;
    max-height: 28rem;
  }

  .beratung--section-big-image-copy-copy {
    padding-bottom: 5rem;
  }

  .beratung---i-100.branding---is--desktop, .beratung---i-100.beratung--is--desktop {
    width: auto;
    height: 28rem;
  }

  .logo-card, .logo-card.is--last {
    height: 18rem;
  }

  .logo-cards {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    width: 48%;
  }

  .logo-card-1 {
    height: 8rem;
  }

  .logo-card-1.is--last {
    height: 18rem;
  }

  .logo-card-2 {
    height: 8rem;
  }

  .logo-card-2.is--last {
    height: 18rem;
  }

  .logo-card-3 {
    height: 8rem;
  }

  .logo-card-3.is--last {
    height: 18rem;
  }

  .logo-card-copy {
    height: 8rem;
  }

  .logo-card-copy.is--last {
    height: 18rem;
  }

  .beruns-image_wrap {
    justify-content: center;
    align-items: center;
    width: 70%;
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
  }

  .beruns_image-wrapper {
    height: 33rem;
    margin-top: 4rem;
  }

  .text-restour.is--desktop {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    margin-top: 4rem;
    display: flex;
  }

  .text-restour.is--not-desktop {
    margin-bottom: 4rem;
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding-bottom: 2px;
  }

  .h1-hero {
    font-size: 3.5rem;
    line-height: 130%;
  }

  .hero_bg-wrap {
    width: auto;
    max-height: 42rem;
  }

  .i-100.is--desktop {
    display: none;
  }

  .i-100.is--mobile {
    display: inline-flex;
  }

  .hero-dots.is--2 {
    left: -136px;
  }

  .hero-role.is--web-des {
    top: 2.2rem;
  }

  .hero-role.is--automati {
    right: -5.6rem;
  }

  .hero-role.is--branding {
    bottom: 5.4rem;
  }

  .hero-role.is--social {
    top: 6rem;
    left: -.3rem;
  }

  .hero-role.is--seo {
    left: -3.2rem;
  }

  .hero-role.is--content {
    bottom: 15.6rem;
    left: -1.4rem;
  }

  .hero-role.is--positionierung {
    bottom: -1rem;
    left: 8rem;
  }

  .hero-role.is--corporate-design {
    bottom: 6rem;
  }

  .hero-role.is--tonalit-t {
    bottom: 2rem;
    right: 15rem;
  }

  .hero-role.is--zielgruppe {
    bottom: 3rem;
    right: 8rem;
  }

  .hero-role.is--werte {
    bottom: -.5rem;
  }

  .hero-role.is--corporate-design-copy {
    top: 2.2rem;
  }

  .hero-role.is--marke {
    top: 7rem;
    left: 10rem;
  }

  .hero-role.is--marktanalyse {
    bottom: 12rem;
    left: 0;
  }

  .hero-role.is--logo {
    top: 4.2rem;
    right: 18rem;
  }

  .hero-role.is--website {
    top: 2rem;
    right: 11rem;
  }

  .hero-role.is--ugc-ads {
    bottom: 2rem;
    left: 5rem;
  }

  .hero-role.is--video-ads {
    top: 19rem;
    bottom: auto;
    left: 3rem;
  }

  .hero-role.is--animationen {
    bottom: 0;
    right: 4rem;
  }

  .hero-role.is--statische-ads {
    top: 21rem;
    bottom: auto;
  }

  .hero-role.is--analyse {
    top: 9rem;
  }

  .hero-role.is--ziele {
    bottom: 10rem;
    left: 0;
  }

  .hero-role.is--umsetzung {
    bottom: 6.6rem;
    left: 5.9rem;
  }

  .hero-role.is--optimierung {
    top: 1.5rem;
    bottom: auto;
    left: 5rem;
  }

  .partner-logos_wrap {
    background-image: none;
    border-radius: 0;
  }

  .partner-logos_inner-wrap {
    flex: none;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .partner-logos_inner-wrap.is--mobile {
    display: flex;
  }

  .partner-logo_wrap {
    min-width: 10rem;
  }

  .partner-logo_dot.is--last {
    display: block;
  }

  .services_block-wrap {
    height: auto;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .services_content-wrap {
    justify-content: flex-start;
    position: relative;
    top: auto;
  }

  .h2-services {
    font-size: 2.5rem;
    line-height: 120%;
  }

  .services_content-scroll {
    padding-left: 0;
  }

  .services_window {
    position: relative;
  }

  .service-window_content-wrap {
    position: relative;
    inset: auto;
  }

  .services_scrollbar {
    display: none;
  }

  .h2--section-white {
    font-size: 3.5rem;
  }

  .h2--system {
    font-size: 2.5rem;
    line-height: 120%;
  }

  .compare_title-first {
    width: 15rem;
    font-size: 2rem;
    line-height: 120%;
  }

  .compare_title-second {
    width: 14rem;
  }

  .vs_icon-wrap {
    width: 11rem;
  }

  .compare_tables-wrap {
    flex-flow: column;
  }

  .compare-table_gray {
    width: 100%;
    padding-bottom: 3rem;
  }

  .compare_table-blue {
    width: 100%;
    top: -3rem;
    left: auto;
  }

  .results_content-wrap {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .result-phone_first {
    width: 11rem;
    height: 23rem;
  }

  .result-phone_last {
    width: 11rem;
    height: 24rem;
  }

  .result-phone_middle {
    width: 12rem;
    height: 25rem;
  }

  .cta_content-block {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .h2--logos {
    text-align: center;
    background-image: linear-gradient(349deg, #3b3e42, #696e74 0%);
    max-width: 80%;
  }

  .options_pictures-wrap {
    /* Take the wrap out of absolute positioning entirely on mobile.
       Default (line 4010) sets width:110rem; position:absolute;
       inset:6rem 0% 0% -13rem — that hangs the bento off the left edge
       by 13rem and 110rem wide, which makes it overflow viewport-left
       on small screens. Forcing static positioning here puts the wrap
       in normal flow inside its container, sized by parent width. */
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    inset: auto !important;
    transform: none !important;
    margin: 1.5rem 0 0 !important;
  }

  .footer {
    padding-bottom: 2.975rem;
  }

  .footer_navigation-wrap {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-flow: column;
  }

  .footer_copyright-text {
    position: relative;
    bottom: auto;
  }

  .footer_vector {
    margin-top: 0;
  }

  .section-big-image {
    margin-top: 0;
    padding-top: 0;
  }

  .service_windows-wrap {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
    height: auto;
    display: flex;
  }

  .partner-logos_wrapper {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .cases_content, .swiper-wrapper.is--reviews, .swiper-slide.is--reviews {
    width: 100%;
  }

  .review_content-wrap {
    max-width: none;
  }

  .review_slider-buttons {
    margin-top: 2.625rem;
  }

  .slider-button.review-btn---prev, .slider-button.review-btn---next {
    border-radius: 100rem;
  }

  .review-slide_fake {
    bottom: 5.7rem;
    right: -15.5rem;
  }

  .review_buttons-wrap {
    width: 78%;
    margin-bottom: 2rem;
  }

  .social-hero_mobile-mockup.is--1 {
    top: 6rem;
    left: -1rem;
  }

  .social-hero_mobile-mockup.is--2 {
    top: 3rem;
    left: 3rem;
  }

  .social-hero_mobile-mockup.is--4 {
    right: 3rem;
  }

  .social-hero_mobile-mockup.is--5 {
    top: 6rem;
  }

  .social-hero_mobile-mockup.is--1-copy {
    top: 6rem;
    left: -1rem;
  }

  .social-hero_mobile-mockup.is--2-copy {
    top: 3rem;
    left: 3rem;
  }

  .social-hero_mobile-mockup.is--4-copy {
    right: 3rem;
  }

  .social-about_content-block {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .social-card {
    height: 21rem;
    overflow: scroll;
  }

  .social-card.is--last {
    height: 21rem;
  }

  .process_content-block {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .process_content-wrap {
    flex-flow: column;
  }

  .form-wrap {
    max-width: 36rem;
  }

  .form-image_wrap {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 20rem;
  }

  .form-image_image-wrapper {
    height: 33rem;
  }

  .form-image_gradient-top {
    height: 14rem;
    top: -2rem;
  }

  .form-image_gradient-bottom {
    bottom: -8rem;
  }

  .social-dots--title.is--2 {
    left: -136px;
  }

  .i-100-sea-seo.is--desktop {
    display: none;
  }

  .i-100-sea-seo.is--mobile {
    display: inline-flex;
  }

  .sea-seo-card {
    width: 100%;
    min-height: 16rem;
  }

  .sea-seo-content-block {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .sea-seo-hero_content-block-copy {
    padding-top: 4rem;
  }

  .sea-seo---i-100.is--desktop {
    display: none;
  }

  .sea-seo---i-100.is--mobile {
    display: inline-flex;
  }

  .sea-seo---i-100.sea-seo---is--desktop {
    display: none;
  }

  .sea-seo---options_pictures-wrap-copy {
    width: auto;
    left: 0;
    right: 0;
  }

  .automatisierung---i-100.is--desktop {
    display: none;
  }

  .automatisierung---i-100.is--mobile {
    display: inline-flex;
  }

  .automatisierung---i-100.sea-seo---is--desktop, .automatisierung---i-100.automatisierung---is--desktop {
    display: none;
  }

  .automatisierung---options_pictures-wrap {
    width: auto;
    left: 0;
    right: 0;
  }

  .automatisierung---option-picture {
    justify-content: center;
    align-items: center;
    width: 120%;
    margin-left: -10%;
  }

  .automatisierung-content-block {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .crm-about_nets-cards {
    flex-flow: column;
  }

  .section-crm_wrap {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .crm-block_-image {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .form-image_wrap-automatisierung {
    order: 1;
    width: 60%;
    position: relative;
  }

  .cases_texts-wrap-copy {
    justify-content: space-between;
    align-items: flex-start;
    width: auto;
    max-width: none;
    position: static;
  }

  .container-1-rem {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section-crm_wrap-2 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .crm-block_-image-2 {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-flow: column;
  }

  .container-8_2, .container-8_3 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .crm-dots-container {
    justify-content: space-between;
    align-items: center;
    width: 12rem;
    height: 12rem;
    bottom: 26rem;
    right: 1rem;
  }

  .crm-dots-container.is--2, .crm-dots-container-2.is--2 {
    left: -136px;
  }

  .h1-hero-copy {
    font-size: 3.5rem;
    line-height: 130%;
  }

  .h1-hero-404, .h1-hero-coming {
    font-size: 5.5rem;
    line-height: 130%;
  }

  .section-blue--right-rect {
    bottom: -27.2rem;
    right: -19.9rem;
  }

  .section-blue--right-rect.is--blog-copy {
    right: -18rem;
  }

  .blog_articles-block {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 4rem;
  }

  .form-image_wrap-durch-automatisierung-copy, .form-image_wrap-durch-automatisierung-copy-copy {
    width: 70%;
    position: relative;
  }

  .branding_-options_content-block {
    max-width: 44rem;
  }

  .branding--options_pictures-wrap {
    width: 100%;
    left: 0;
    right: 0;
  }

  .branding---i-100.is--desktop {
    display: none;
  }

  .branding---i-100.is--mobile {
    display: inline-flex;
  }

  .branding---i-100.sea-seo---is--desktop {
    display: none;
  }

  .branding---i-100.branding---is--desktop {
    width: 110%;
    height: 19rem;
    display: block;
  }

  .content-hero_tab-wrap {
    height: 21.75rem;
  }

  .content-hero_tab-mockup.is--1 {
    top: 6rem;
    left: -1rem;
  }

  .content-hero_tab-mockup.is--2 {
    top: 3rem;
    left: 3rem;
  }

  .content-hero_tab-mockup.is--4 {
    right: 3rem;
  }

  .content-hero_tab-mockup.is--5 {
    top: 6rem;
  }

  .werbeanzeigen_content-block-copy {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .werbeanzeigen_phones-wrap {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: center;
    max-width: 31rem;
    height: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: grid;
  }

  .content-mobile-mockup {
    width: 14rem;
    height: 28rem;
  }

  .content-mobile-mockup.is--1 {
    top: 6rem;
    left: -1rem;
  }

  .content-mobile-mockup.is--2 {
    top: 3rem;
    left: 3rem;
  }

  .content-mobile-mockup.is--4 {
    right: 3rem;
  }

  .content-mobile-mockup.is--5 {
    top: 6rem;
  }

  .content-mobile-mockup.is--2-copy, .content-mobile-mockup.is--5-copy {
    top: 2.5rem;
  }

  .i-80.is--desktop {
    display: none;
  }

  .i-80.is--mobile {
    display: inline-flex;
  }

  .section-blue--right-rect-copy {
    bottom: -27.2rem;
    right: -19.9rem;
  }

  .cta_figure-wrap-bg {
    bottom: 0;
  }

  .h2--system-seo-mob, .h2--system-seo {
    font-size: 2.5rem;
    line-height: 120%;
  }

  .social-card-copy {
    justify-content: flex-start;
    align-items: center;
    height: 14rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    overflow: scroll;
  }

  .social-card-copy.is--last {
    height: 21rem;
  }

  .blogs_hero-figure-wrap-bg {
    bottom: 0;
  }

  .blogs_wrap {
    flex-flow: column;
  }

  .blogs_right-content-wrap {
    flex: none;
    order: -1;
    height: 100%;
    position: static;
  }

  .blogs_menu-wrap.is--last {
    height: 21rem;
  }

  .blogs_dots.is--2 {
    left: -136px;
  }

  .sea-seo-content-block-blogs {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .swiper-blogs-wrapper.is--reviews, .swiper-blogs-slide.is--reviews {
    width: 100%;
  }

  .impressum-hero_blue-card {
    padding-left: 2.75rem;
  }

  .section-rechtliches_wrap-copy {
    padding-top: 0;
    padding-bottom: 4rem;
  }

  .rechtliches_texts-wrap {
    justify-content: space-between;
    align-items: flex-start;
    width: auto;
    max-width: none;
    position: static;
  }

  .rechtliches-block {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .rechtliches_texts-rechts-wrap {
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    position: static;
  }

  .t--result-subheading-1rem {
    margin-bottom: 1rem;
  }

  .rechtliches-dots-container.is--2 {
    left: -136px;
  }

  .container-copy {
    padding-bottom: 2px;
  }

  .karriere_content-block {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .content-image_gradient-bottom {
    height: 6rem;
    bottom: -8rem;
  }

  .content-image_gradient-top {
    height: 6rem;
    top: -2rem;
  }

  .content-image_image-wrapper {
    justify-content: space-between;
    align-items: center;
    width: auto;
    height: auto;
  }

  .i-100-2 {
    max-width: 80%;
  }

  .i-100-2.is--desktop {
    display: none;
  }

  .i-100-2.is--mobile {
    display: inline-flex;
  }

  .i-100_60 {
    width: 65%;
    height: 65%;
  }

  .i-100_60.is--desktop {
    display: none;
  }

  .i-100_60.is--mobile {
    display: inline-flex;
  }

  .ber_uns-card {
    height: 21rem;
    overflow: scroll;
  }

  .ber_uns-card.is--last {
    height: 21rem;
  }

  .i-100-copy.is--desktop {
    display: none;
  }

  .i-100-copy.is--mobile {
    display: inline-flex;
  }

  .i-100-team.is--desktop {
    display: none;
  }

  .i-100-team.is--mobile {
    display: inline-flex;
  }

  .home-image_gradient-top {
    height: 14rem;
    top: -2rem;
  }

  .hero-heading-center {
    padding: 60px 15px;
  }

  .berating---i-100-copy.is--desktop {
    display: none;
  }

  .berating---i-100-copy.is--mobile {
    display: inline-flex;
  }

  .berating---i-100-copy.sea-seo---is--desktop, .beratung---i-100.is--desktop {
    display: none;
  }

  .beratung---i-100.is--mobile {
    display: inline-flex;
  }

  .beratung---i-100.sea-seo---is--desktop {
    display: none;
  }

  .beratung---i-100.branding---is--desktop, .beratung---i-100.beratung--is--desktop {
    width: 80%;
    height: 19rem;
    display: block;
  }

  .i-100-team-h.is--desktop {
    display: none;
  }

  .i-100-team-h.is--mobile {
    display: inline-flex;
  }

  .logo-card {
    height: 21rem;
    overflow: scroll;
  }

  .logo-card.is--last {
    height: 21rem;
  }

  .logo-cards {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .logo-card-1 {
    width: 52%;
    height: 7.25rem;
    padding: 1rem;
    overflow: scroll;
  }

  .logo-card-1.is--last {
    height: 21rem;
  }

  .logo-card-2 {
    height: 7.25rem;
    padding: 1rem;
    overflow: scroll;
  }

  .logo-card-2.is--last {
    height: 21rem;
  }

  .logo-card-3 {
    width: 59%;
    height: 7.25rem;
    padding: 1rem;
    overflow: scroll;
  }

  .logo-card-3.is--last {
    height: 21rem;
  }

  .logo-card-copy {
    height: 7.25rem;
    padding: 1rem;
    overflow: scroll;
  }

  .logo-card-copy.is--last {
    height: 21rem;
  }

  .beruns-image_wrap {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 20rem;
  }

  .beruns_image-wrapper {
    justify-content: space-between;
    align-items: center;
    width: auto;
    height: auto;
  }

  .i-40.is--desktop {
    display: none;
  }

  .i-40.is--mobile {
    display: inline-flex;
  }
}

@media screen and (max-width: 479px) {
  h2 {
    font-size: 3rem;
    line-height: 120%;
  }

  h3 {
    letter-spacing: -.04em;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .container.is--hero, .container.is--hero-copy {
    padding-left: 0;
    padding-right: 0;
  }

  .menu-wrap {
    z-index: 4;
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    display: none;
  }

  .navlink.is--dd {
    height: 100%;
  }

  .navlink.is--dd.w--open {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: #ffffff0a;
  }

  .navlink.is-dd {
    z-index: 4;
  }

  .header_button-wrap.arrow-animation {
    width: 95%;
  }

  .hero_content-wrap {
    padding-top: 6rem;
  }

  .hero_texts-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero_texts-wrap.is--inner {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .h1-hero {
    font-size: 3.25rem;
    line-height: 110%;
  }

  .text-gradient {
    line-height: 110%;
  }

  .hero_subheader.is--social {
    margin-top: .5rem;
  }

  .hero_bg-wrap {
    width: 33rem;
    height: 25rem;
    max-height: none;
    top: 15%;
    left: -30%;
  }

  .i-100.is--mobile {
    height: 100%;
  }

  .hero-role {
    display: none;
  }

  .hero-role.is--web-des {
    display: block;
    top: 15rem;
    right: -3rem;
  }

  .hero-role.is--automati {
    display: none;
    right: -2.5rem;
  }

  .hero-role.is--branding {
    display: block;
    bottom: 5.5rem;
    right: 4rem;
  }

  .hero-role.is--social {
    display: block;
    top: 1rem;
    left: 4rem;
  }

  .hero-role.is--seo {
    display: block;
    top: 18rem;
    left: .2rem;
  }

  .hero-role.is--content {
    display: flex;
    bottom: 3rem;
    left: 1.3rem;
  }

  .hero-role.is--positionierung {
    display: flex;
    bottom: 1rem;
    left: 2rem;
  }

  .hero-role.is--corporate-design {
    display: block;
    bottom: 7rem;
    right: -3rem;
  }

  .hero-role.is--tonalit-t {
    display: block;
    bottom: 4rem;
    right: 3rem;
  }

  .hero-role.is--zielgruppe {
    display: block;
    bottom: 10rem;
    right: -3rem;
  }

  .hero-role.is--werte {
    display: block;
    bottom: -2rem;
    left: auto;
    right: 2rem;
  }

  .hero-role.is--corporate-design-copy {
    display: block;
    top: 10.3rem;
    right: -3.4rem;
  }

  .hero-role.is--marke {
    display: flex;
    top: 7rem;
    left: 6rem;
  }

  .hero-role.is--marktanalyse {
    display: block;
    bottom: 11rem;
    left: -.6rem;
  }

  .hero-role.is--logo {
    display: block;
    top: 5rem;
    left: 1rem;
    right: auto;
  }

  .hero-role.is--website {
    display: block;
    right: 6rem;
  }

  .hero-role.is--werbenzeigen {
    display: block;
    right: 0;
  }

  .hero-role.is--ugc-ads {
    display: flex;
    bottom: 26rem;
    left: 2rem;
  }

  .hero-role.is--video-ads {
    display: block;
    top: auto;
    bottom: 49rem;
    left: 17rem;
  }

  .hero-role.is--animationen {
    display: block;
    bottom: 1rem;
    left: 5rem;
    right: auto;
  }

  .hero-role.is--statische-ads {
    display: block;
    top: auto;
    bottom: 23rem;
    right: 0;
  }

  .hero-role.is--analyse {
    display: block;
    top: 7rem;
    right: -2rem;
  }

  .hero-role.is--strategie {
    display: block;
    top: -1rem;
    right: 0;
  }

  .hero-role.is--ziele {
    display: block;
    bottom: 11rem;
    left: -.6rem;
  }

  .hero-role.is--umsetzung {
    display: block;
    bottom: 14.5rem;
    left: -.6rem;
  }

  .hero-role.is--optimierung {
    display: block;
    top: -1rem;
    bottom: auto;
    left: -.6rem;
  }

  .hero-role-inner {
    font-size: .875rem;
  }

  .hero-role-inner.is--left, .hero-role-inner.is--left--oben {
    border-top-right-radius: 100rem;
    border-bottom-right-radius: 0;
  }

  .hero-role-inner.is--left--oben.is--blue {
    border-top-right-radius: 0;
    border-bottom-right-radius: 100rem;
  }

  .partner-logo_wrap {
    background-color: var(--_tokenization---bg-main);
  }

  .services_block-wrap {
    padding-top: 0;
  }

  .services_content-wrap {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    top: 1.5rem;
  }

  .services_texts-wrap {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    padding-bottom: 1rem;
  }

  .services_content-scroll {
    width: 100%;
    max-width: none;
    padding-left: 0;
  }

  .services_window {
    width: 100%;
    height: 100%;
  }

  .service-window_content-wrap {
    padding-top: 17rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .service-window_texts {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .service-window_description {
    font-size: 1rem;
    line-height: 130%;
  }

  .services_scrollbar {
    display: none;
  }

  .section-white.becoming--blue {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .white-section_content-wrap {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .h2--section-white.that-became-blue {
    font-size: 3.25rem;
    line-height: 115%;
  }

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

  .system_texts-blocks {
    grid-column-gap: 8rem;
    grid-row-gap: 8rem;
  }

  .h2--system {
    width: 100%;
    line-height: 115%;
    display: block;
  }

  .system_blocks-wrap {
    width: 100%;
    height: 77vw;
  }

  .system-block {
    border-radius: 16vw;
    width: 60%;
    font-size: 4vw;
  }

  .system-block.is--1 {
    padding-top: 2rem;
    padding-left: 2rem;
  }

  .system-block.is--2 {
    padding-top: 2rem;
    padding-right: 2rem;
  }

  .system-block.is--3 {
    padding-bottom: 6vw;
  }

  .system-line.is--1, .system-line.is--2 {
    width: 56vw;
  }

  .system-line.is--3 {
    width: 60%;
  }

  .system-middle {
    width: 20vw;
    height: 39vw;
    bottom: 21.9vw;
  }

  .system-bg {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    inset: 21.9rem -2.4rem 0 -3.5rem;
  }

  .compare_content-block {
    padding-top: 3rem;
    padding-bottom: 0;
  }

  .compare_title-first {
    flex: none;
    width: 10rem;
    font-size: 1.8rem;
  }

  .compare_title-second {
    flex: none;
    width: 10rem;
  }

  .vs-line {
    padding-left: .6rem;
  }

  .compare_table-blue {
    margin-bottom: -3rem;
  }

  .results_content-wrap, .result_text-button {
    width: 100%;
    max-width: none;
  }

  .cta_content-wrap {
    padding: 3.5rem .75rem;
  }

  .h2--logos {
    background-image: linear-gradient(#3b3e42, #696e74 46%);
    max-width: 100%;
  }

  .options_content-block {
    height: 50rem;
  }

  .option_texts-wrap {
    z-index: 5;
    padding-left: 0;
  }

  .options_pictures-wrap {
    /* Inherits the position:static + width:100% override from the
       ≤767px block above. Keep it static at narrow widths too. */
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    inset: auto !important;
    transform: none !important;
  }

  .option-picture {
    width: 110%;
    height: 100%;
    margin-left: -5%;
    padding-top: 10rem;
  }

  .accordions_content-wrap {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .footer_navigation-wrap {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }

  .section-big-image {
    padding-top: 2rem;
  }

  .service_windows-wrap {
    width: 100%;
  }

  .dd-icon {
    pointer-events: none;
    flex: none;
    width: 1.5rem;
  }

  .header_dd-list.w--open {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .header_dd-link {
    font-size: 1.125rem;
    line-height: 120%;
  }

  .compare-dots.is--1 {
    bottom: -33.4rem;
  }

  .text-block {
    pointer-events: none;
  }

  .cases_content-block {
    background-color: #0000;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .cases_content-track {
    padding-top: 0;
  }

  .cases_content-wrap {
    width: 100%;
    height: auto;
  }

  .h2--cases {
    font-size: 2.5rem;
    line-height: 120%;
  }

  .cases_text-button {
    width: 100%;
    max-width: none;
  }

  .cases_text-button.is--desktop {
    margin-top: 0;
    padding-top: 2rem;
    display: flex;
  }

  .cases_text-button.is--not-desktop {
    padding-top: 3rem;
  }

  .cases_texts-wrap {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .case-card {
    aspect-ratio: 569 / 710;
    width: 100%;
    height: 30rem;
  }

  .case-card_info-wrap {
    height: auto;
    min-height: 16.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .case_texts-wrap {
    display: flex;
  }

  .case-card_tags-wrap {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
  }

  .case-card_tag {
    justify-content: center;
    align-items: flex-start;
    font-size: .8rem;
  }

  .reviews_texts-wrap, .swiper.is--case, .swiper-slide.is--sea, .swiper-slide.is--seo {
    width: 100%;
  }

  .swiper-slide.is--blogs {
    width: 20rem;
  }

  .reviewer_wrap {
    font-size: .875rem;
    line-height: 1.25rem;
  }

  .review_slider-buttons {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    justify-content: space-between;
  }

  .slider-button {
    border-radius: 100rem;
    width: 48%;
  }

  .review-slide_fake {
    filter: blur(4px);
    max-width: 13rem;
    font-size: .75rem;
    line-height: 130%;
    bottom: 6.2rem;
    right: -7.9rem;
  }

  .review-slider_wrapper {
    width: 75%;
  }

  .review_buttons-wrap {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 3rem;
  }

  .case-title {
    font-size: 1.33rem;
  }

  .social-hero_content-block {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    padding-top: 3rem;
  }

  .social-hero_mobile-mockup.is--1 {
    top: 6.5rem;
    left: -12rem;
  }

  .social-hero_mobile-mockup.is--2 {
    top: 2.5rem;
    left: -5rem;
  }

  .social-hero_mobile-mockup.is--4 {
    top: 2.5rem;
    right: -5rem;
  }

  .social-hero_mobile-mockup.is--5 {
    top: 6.5rem;
    right: -12rem;
  }

  .social-hero_mobile-mockup.is--1-copy {
    top: 6.5rem;
    left: -12rem;
  }

  .social-hero_mobile-mockup.is--2-copy {
    top: 2.5rem;
    left: -5rem;
  }

  .social-hero_mobile-mockup.is--4-copy {
    top: 2.5rem;
    right: -5rem;
  }

  .partner-icons_title-wrap {
    z-index: 6;
    text-align: center;
    position: relative;
  }

  .icons_gradient-left {
    background-image: linear-gradient(90deg, #13131380, #13141400);
    left: -1rem;
  }

  .icons_gradient-right {
    background-image: linear-gradient(90deg, #13141400 54%, #131414);
    right: -1rem;
  }

  .social-about_content-block {
    grid-column-gap: 4.5rem;
    grid-row-gap: 4.5rem;
    padding-top: 3.75rem;
  }

  .social-about_nets-cards {
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .social-card {
    height: auto;
    padding-bottom: 3.5rem;
  }

  .social-card.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .h2--32 {
    width: 100%;
    font-size: 1.5rem;
  }

  .process_content-block {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

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

  .process-card_number-line {
    justify-content: center;
    align-items: center;
  }

  .process-card_texts-wrap {
    text-align: center;
  }

  .process-card_line {
    display: none;
  }

  .section-form_wrap {
    padding-top: 3rem;
  }

  .form-inner_inputs-wrap {
    flex-flow: wrap;
    display: flex;
  }

  .form-inner_buttons-progress {
    margin-top: -1rem;
  }

  .form-block__form-image {
    grid-column-gap: 6rem;
    grid-row-gap: 6rem;
  }

  .form-image_wrap {
    display: flex;
  }

  .form-image_gradient-top {
    background-image: linear-gradient(#181919e6, #18191900);
    height: 12rem;
    top: 0;
  }

  .social-dots--title {
    width: 13rem;
    right: -5.2rem;
  }

  .system-bg--line.is--1 {
    left: 7.7rem;
  }

  .system-bg--line.is--2 {
    bottom: -1px;
    left: 12.7rem;
  }

  .system-bg--line.is--8 {
    right: 11.9rem;
  }

  .system-bg--line.is--9 {
    right: 5.3rem;
  }

  .tool-line_icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    left: -1.2rem;
  }

  .tool-line_icon-wrap.is--wp {
    top: 5rem;
    bottom: auto;
  }

  .tool-line_icon-wrap.is--figm {
    top: 2.1rem;
  }

  .tool-line_icon-wrap.is--wf {
    top: 3.7rem;
  }

  .i-100-sea-seo {
    width: 60%;
  }

  .sea-seo-card {
    height: auto;
    padding-bottom: 3.5rem;
  }

  .sea-seo-card.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .sea-seo-card {
    flex-flow: column;
    width: 100%;
  }

  .sea-seo-content-block {
    grid-column-gap: 4.5rem;
    grid-row-gap: 4.5rem;
  }

  .sea-seo---process_content-wrap {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .sea-seo-hero_content-block-copy {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    padding-top: 3rem;
  }

  .sea-seo---process-card_line, .sea-seo---i-100.sea-seo---is--desktop {
    display: none;
  }

  .sea-seo---option-picture {
    width: 120%;
    height: 100%;
    margin-left: -10%;
  }

  .sea-seo---options_pictures-wrap-copy {
    width: auto;
    left: 0;
    right: 0;
  }

  .sea-seo---section-big-image-copy {
    padding-top: 2rem;
  }

  .sea-seo---hero_texts-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sea-seo---hero_texts-wrap.is--inner {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    padding-left: 0;
    padding-right: 0;
  }

  .automatisierung-options_content-block {
    margin-top: 0;
    padding-top: 0;
  }

  .automatisierung---options_pictures-wrap {
    width: auto;
    left: 0;
    right: 0;
  }

  .automatisierung---option-picture {
    width: 130%;
    height: 24rem;
    margin-left: -15%;
  }

  .automatisierung-content-block {
    grid-column-gap: 4.5rem;
    grid-row-gap: 4.5rem;
  }

  .automatisierung_text-button {
    width: 100%;
    max-width: none;
  }

  .automatisierung_text-button.is--not-desktop {
    padding-top: 3rem;
  }

  .crm-about_nets-cards {
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .section-crm_wrap {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  .crm-block_-image {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .form-image_wrap-automatisierung {
    width: 90%;
  }

  .form-image_gradient-top-copy {
    background-image: linear-gradient(#181919e6, #18191900);
  }

  .container-1-rem {
    padding-right: 1rem;
  }

  .container-1-rem.is--hero {
    padding-left: 0;
    padding-right: 0;
  }

  .i-100-copy {
    width: 100%;
    max-height: none;
  }

  .section-crm_wrap-2 {
    padding-top: 3rem;
  }

  .container-8_2.is--hero {
    padding-left: 0;
    padding-right: 0;
  }

  .form-image_gradient-top-copy-copy {
    background-image: linear-gradient(#181919e6, #18191900);
  }

  .container-8_3.is--hero {
    padding-left: 0;
    padding-right: 0;
  }

  .crm-dots-container, .crm-dots-container-2 {
    width: 13rem;
    right: -5.2rem;
  }

  .collection-list-wrapper {
    display: none;
  }

  .container-copy.is--hero, .container-copy.is--hero-copy {
    padding-left: 0;
    padding-right: 0;
  }

  .section-hero-copy {
    height: 75vh;
  }

  .h1-hero-copy {
    font-size: 7.5rem;
    line-height: 120%;
  }

  .text-gradient-copy {
    font-size: 8.75rem;
    line-height: 70%;
  }

  .h1-hero-404 {
    font-size: 8.5rem;
    line-height: 70%;
  }

  .h1-hero-coming {
    font-size: 5.5rem;
    line-height: 120%;
  }

  .case-card_common-wrap {
    width: auto;
  }

  .section-blue--right-rect {
    width: 32rem;
    bottom: -12rem;
    right: -16rem;
  }

  .section-blue--right-rect.is--blog-copy {
    top: 3rem;
    right: -24rem;
  }

  .section-blue--left--rect {
    width: 22rem;
  }

  .blog_hero-block {
    height: 52.5rem;
  }

  .blog-hero_blue-card {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .blog-marquee_animation-wrap, .blog-marquee_animation-line {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .blog-marquee_blog-card {
    flex-flow: column;
  }

  .blog-marquee_card-image {
    width: 17rem;
    height: 11rem;
  }

  .marquee-blog_card-info {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    width: 15rem;
  }

  .marquee-blog---category-date {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .articles_filtration-wrap {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
    width: 100%;
  }

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

  .blog-cta_content-block {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .container-0-rem.is--hero, .container-0-rem.is--hero-copy {
    padding-left: 0;
    padding-right: 0;
  }

  .h2--24-1-5 {
    text-align: left;
    width: 100%;
  }

  .process-card_texts-wrap-2 {
    text-align: center;
  }

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

  .form-image_wrap-durch-automatisierung-copy {
    width: 85%;
  }

  .form-image_wrap-durch-automatisierung-copy-copy {
    width: 95%;
  }

  .branding---section-big-image {
    padding-top: 2rem;
    padding-right: 2rem;
  }

  .branding_-options_content-block {
    height: auto;
  }

  .branding--options_pictures-wrap {
    width: auto;
    height: auto;
    left: 0;
    right: 0;
  }

  .branding---option-picture {
    width: 130%;
    margin-left: -15%;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .branding---i-100.branding---is--desktop {
    width: 140%;
    height: 16rem;
    transform: rotate(-20deg);
  }

  .hero_content-wrap-copy {
    padding-top: 6rem;
  }

  .hero_content-wrap-branding {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  .reviews_texts-wrap-content {
    width: 100%;
  }

  .content-hero_content-block {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    padding-top: 3rem;
  }

  .content-hero_tab-wrap {
    height: 30rem;
  }

  .content-hero_tab-mockup {
    width: 18rem;
    min-height: 30rem;
  }

  .content-hero_tab-mockup.is--1 {
    top: 6.5rem;
    left: -12rem;
  }

  .content-hero_tab-mockup.is--2 {
    top: 2.5rem;
    left: -5rem;
  }

  .content-hero_tab-mockup.is--4 {
    top: 2.5rem;
    right: -5rem;
  }

  .content-hero_tab-mockup.is--5 {
    top: 6.5rem;
    right: -12rem;
  }

  .content-mockup_inner-wrap {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .werbeanzeigen_content-block-copy {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .werbeanzeigen_phones-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .content-mobile-mockup {
    width: 11rem;
    height: 22rem;
  }

  .content-mobile-mockup.is--1 {
    top: 6.5rem;
    left: -12rem;
  }

  .content-mobile-mockup.is--2 {
    top: 2.5rem;
    left: -5rem;
  }

  .content-mobile-mockup.is--4 {
    top: 2.5rem;
    right: -5rem;
  }

  .content-mobile-mockup.is--5 {
    top: 6.5rem;
    right: -12rem;
  }

  .content-mobile-mockup.is--2-copy, .content-mobile-mockup.is--4-copy {
    top: 2.5rem;
  }

  .content-mobile-mockup.is--5-copy {
    top: 5rem;
  }

  .hero-role-inner-down {
    font-size: .875rem;
  }

  .span, .heading-6 {
    line-height: 110%;
  }

  .heading-7 {
    font-size: 2.5rem;
    line-height: 115%;
  }

  .heading-8 {
    line-height: 115%;
  }

  .heading-9 {
    font-size: 2.5rem;
    line-height: 115%;
  }

  .collection-list-wrapper-2 {
    display: none;
  }

  .h2--system-seo-mob {
    width: 100%;
    line-height: 115%;
    display: block;
  }

  .heading-10 {
    font-size: 2.5rem;
  }

  .h2--system-seo {
    width: 100%;
    line-height: 115%;
    display: none;
  }

  .heading-11 {
    font-size: 2.5rem;
  }

  .collection-list-wrapper-3 {
    display: none;
  }

  .heading-12 {
    font-size: 2.125rem;
  }

  .form-block {
    width: 100%;
  }

  .karriere-about_nets-cards {
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .social-card-copy {
    height: auto;
    padding-bottom: 2.25rem;
  }

  .social-card-copy.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .h2--24-mitte {
    width: 100%;
  }

  .section-hero-blogs {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .blogs_hero-content-wrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .h1-blogs {
    font-size: 2.5rem;
  }

  .blogs_top-content-wrap {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .blogs_autor-text-wrap, .blogs_text-wrap {
    grid-column-gap: .2rem;
    grid-row-gap: .2rem;
    flex-flow: column;
  }

  .dunkle-wrap {
    margin-top: 1rem;
  }

  .blogs_accent-text-rich {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .blogs_menu-wrap {
    height: auto;
    padding-bottom: 3.5rem;
  }

  .blogs_menu-wrap.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .blogs_baner-content-wrap {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .blogs_dots {
    width: 13rem;
    right: -5.2rem;
  }

  .sea-seo-content-block-blogs {
    grid-column-gap: 4.5rem;
    grid-row-gap: 4.5rem;
  }

  .blogs_card-wrap {
    width: 19.5rem;
  }

  .swiper-blogs.is--case {
    width: 100%;
  }

  .swiper-blogs-slide {
    width: 20rem;
  }

  .swiper-blogs-slide.is--sea, .swiper-blogs-slide.is--seo {
    width: 100%;
  }

  .swiper-blogs-slide.is--blogs {
    width: 20rem;
  }

  .impressum_hero-block {
    padding-top: 0;
    padding-bottom: 1.75rem;
  }

  .impressum_gradient-wrap {
    bottom: -1rem;
  }

  .impressum-hero_blue-card {
    border-radius: 2rem;
    height: auto;
    padding: 2rem 1rem 3rem;
  }

  .rechtliches-block {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .rechtliches_texts-rechts-wrap {
    width: 100%;
  }

  .t--result-subheading-1rem {
    font-size: 1rem;
  }

  .rechtliches-dots-container {
    width: 13rem;
    right: -5.2rem;
  }

  .list-2 {
    font-size: 1rem;
  }

  .h6 {
    font-size: 1.125rem;
  }

  .container-copy.is--header, .container-copy.is--hero, .container-copy.is--hero-copy {
    padding-left: 0;
    padding-right: 0;
  }

  .blogs_autor-name-wrap {
    grid-column-gap: .3rem;
    grid-row-gap: .3rem;
    display: flex;
  }

  .bold-text-3 {
    font-size: 2rem;
  }

  .bold-text-4 {
    font-size: 1.25rem;
    line-height: 120%;
  }

  .link-5 {
    color: var(--_tokenization---text-blue);
  }

  .blogs_accent-block {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .karriere_content-block {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .stellebeschreibung-liste {
    padding-top: 1rem;
  }

  .stelle-liste-wrap {
    text-align: center;
  }

  .content-image_gradient-bottom {
    bottom: -2rem;
  }

  .content-image_gradient-top {
    background-image: linear-gradient(#181919e6, #18191900);
    height: 4rem;
    top: -1rem;
  }

  .content-image_image-wrapper {
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
  }

  .i-100-2 {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .i-100-2.is--mobile {
    height: 100%;
  }

  .code-embed {
    display: none;
  }

  .code-embed-2 {
    display: block;
  }

  .collection-list-wrapper-5 {
    display: none;
  }

  .i-100_60.is--mobile {
    height: 100%;
  }

  .ber_uns_nets-cards {
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .ber_uns-card {
    height: auto;
    padding-bottom: 3.5rem;
  }

  .ber_uns-card.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .team-card_info-wrap {
    height: auto;
    min-height: 16.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .team-card {
    aspect-ratio: 569 / 710;
    width: 100%;
    height: 29rem;
  }

  .ber_uns_nets-cards-copy {
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .team_common-wrap, .case-card_common-wrap-copy {
    width: auto;
  }

  .team_card_tag {
    font-size: .8rem;
  }

  .i-100-copy.is--mobile, .i-100-team.is--mobile {
    height: 100%;
  }

  .cases_text-button-copy {
    width: 100%;
    max-width: none;
  }

  .cases_text-button-copy.is--desktop {
    padding-top: 2rem;
    display: block;
  }

  .cases_text-button-copy.is--not-desktop {
    padding-top: 3rem;
  }

  .aufgaben_liste {
    text-align: left;
    padding-left: 20px;
  }

  .paragraph-4 {
    text-align: left;
  }

  .home-image_gradient-top {
    background-image: linear-gradient(#181919e6, #18191900);
    height: 12rem;
    top: 7rem;
  }

  .container-2 {
    max-width: none;
  }

  .centered-heading {
    margin-bottom: 24px;
  }

  .case-card_tag-copy {
    justify-content: center;
    align-items: flex-start;
    font-size: .8rem;
  }

  .floating-badge {
    transition-duration: .35s;
    /* Stay vertically centered on right on mobile too */
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .floating-badge:hover {
    transform: translateY(-50%) scale(1.2);
  }

  .german-web-aw {
    width: 5rem;
  }

  .berating---i-100-copy.sea-seo---is--desktop {
    display: none;
  }

  .beratung--section-big-image-copy-copy {
    padding-top: 2rem;
  }

  .beratung---i-100.branding---is--desktop {
    width: 140%;
    height: 16rem;
    transform: rotate(-20deg);
  }

  .beratung---i-100.beratung--is--desktop {
    width: 100%;
    max-width: 26rem;
    height: auto;
    margin-top: -7rem;
  }

  .i-100-team-h.is--mobile {
    height: 100%;
  }

  .team-card_info-wrap-copy {
    height: auto;
    min-height: 16.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .logo-card {
    height: auto;
    padding-bottom: 1.375rem;
  }

  .logo-card.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .logo-cards {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    display: flex;
  }

  .logo-card-1 {
    width: 53%;
    height: 6rem;
  }

  .logo-card-1.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .logo-card-2 {
    width: 40%;
    height: 6rem;
  }

  .logo-card-2.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .logo-card-3 {
    height: auto;
  }

  .logo-card-3.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .logo-card-copy {
    height: 6rem;
  }

  .logo-card-copy.is--last {
    height: auto;
    padding-bottom: 2rem;
  }

  .beruns-image_wrap {
    display: flex;
  }

  .beruns_image-wrapper {
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
  }

  .text-gradient-copy {
    line-height: 110%;
  }

  .text-restour {
    width: 100%;
    max-width: none;
  }

  .text-restour.is--desktop {
    margin-top: 0;
    padding-top: 2rem;
    display: flex;
  }

  .text-restour.is--not-desktop {
    padding-top: 3rem;
  }

  .reviews_texts-wrap-restaurants {
    width: 100%;
  }

  .h2--28 {
    width: 100%;
    font-size: 1.5rem;
  }
}

#w-node-_9832358b-76a7-17dd-cc45-1fb0697f20bb-787faa10 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

.logo{
    height:44px;
}
.about-pyramid .sea-seo-card {
    height: 16.75rem;
}

/* ============================================================
   Pyramid Systems Brand Typography
   Primary (display/headlines): Funnel Display
   Secondary (body/UI):         Poppins
   Loaded via Google Fonts <link> in <head> of every page
   ============================================================ */

body, .body {
    font-family: 'Poppins', 'Mulish', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
[class*="h1-hero"],
[class*="heading-"],
[class*="h2--"] {
    font-family: 'Funnel Display', 'Poppins', Arial, sans-serif;
    letter-spacing: -0.01em;
    /* Modern wrap algorithm: balances words across lines and prevents
       single-word orphans (e.g., "is" or "Our" stranded above a span).
       Falls back gracefully in older browsers — they just wrap as today. */
    text-wrap: balance;
}

/* Subheading paragraphs sit directly under the balanced headings —
   apply text-wrap: pretty so the last line never ends in an orphan word
   even though we don't need full balance on body copy. */
.t--result-subheading,
.t--result-subheading-sea,
.t--result-subheading-copy,
.hero_subheader {
    text-wrap: pretty;
}

/* Buttons and nav stay on Poppins (same as body) — display font would
   look too heavy at small UI sizes */
.navlink, .button, .button-text, .menu_inner-button,
.header_dd-link, .footer_navigation-link {
    font-family: 'Poppins', 'Mulish', Arial, sans-serif;
}


/* Orphaned class from a legacy shared stylesheet that was never
   loaded into the site. Restoring so pasted modules using .h2--24 (e.g.,
   the SEA carousel on the partners page) render with correct sizing. */
.h2--24 {
    color: var(--_tokenization---text-white);
    letter-spacing: -.04em;
    font-size: 1.5rem;
    line-height: 2rem;
}

@media screen and (max-width: 991px) {
    .h2--24 {
        width: 100%;
        font-size: 1.5rem;
    }
}


/* Ported from the legacy shared stylesheet — only
   class actually referenced by HTML on this site. */
.paragraph-7 {
    text-align: center;
    font-size: 1.25rem;
}

/* Inline body images in blog posts (figures inserted between sections) */
.blogs_inline-figure {
    margin: 2rem 0;
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.blogs_inline-figure img {
    display: block;
    width: 100%;
    height: auto;
    /*max-height: 32rem;*/
    object-fit: cover;
}
@media screen and (max-width: 767px) {
    .blogs_inline-figure {
        margin: 1.5rem 0;
        border-radius: 0.75rem;
    }
    .blogs_inline-figure img {
        max-height: 22rem;
    }
}

/* === Blog category filter — partner-logos pattern === */
.blog-filter-section {
    padding: 0 0 2.5rem 0;
}
/* Tighten the partner-logos block when reused as filter (less vertical padding) */
.blog-filter_block-wrap.partner-logos_block-wrap {
    padding-top: 2rem;
    padding-bottom: 2rem;
    grid-row-gap: 1.75rem;
}
/* Filter cells: keep grid structure, just change cursor + interaction */
.blog-filter_cell {
    cursor: pointer;
}
.blog-filter-link {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    padding: 0.5rem 1rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-align: center;
    transition: color 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
    position: relative;
}
.blog-filter-link:hover {
    color: #ffffff;
}
/* Active state mirrors the main nav's .navlink.w--current — same subtle
   white-4 background tint and ghost border, no heavy gradient. */
.blog-filter-link.is--active {
    background-color: var(--white-4);
    color: var(--_tokenization---text-white);
    border: 0.0625rem solid #ffffff0a;
    font-weight: 600;
}
/* Round the active highlight in the first + last cells so it follows the
   outer container's rounded edges. */
.blog-filter_cell:first-child .blog-filter-link.is--active {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 0rem;
}
.blog-filter_cell.is--last .blog-filter-link.is--active {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 0rem;
}

/* === Fade-in on viewport entry === */
.blog-filter_logos-wrap {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.blog-filter_logos-wrap.is--in-view {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger each cell's fade-in once the parent enters viewport */
.blog-filter_logos-wrap .blog-filter_cell {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.blog-filter_logos-wrap.is--in-view .blog-filter_cell {
    opacity: 1;
    transform: translateY(0);
}
.blog-filter_logos-wrap.is--in-view .blog-filter_cell:nth-child(1) { transition-delay: 0.05s; }
.blog-filter_logos-wrap.is--in-view .blog-filter_cell:nth-child(2) { transition-delay: 0.11s; }
.blog-filter_logos-wrap.is--in-view .blog-filter_cell:nth-child(3) { transition-delay: 0.17s; }
.blog-filter_logos-wrap.is--in-view .blog-filter_cell:nth-child(4) { transition-delay: 0.23s; }
.blog-filter_logos-wrap.is--in-view .blog-filter_cell:nth-child(5) { transition-delay: 0.29s; }
.blog-filter_logos-wrap.is--in-view .blog-filter_cell:nth-child(6) { transition-delay: 0.35s; }

/* 6-column variant of the filter grid (override the inherited 5-col from .partner-logos_inner-wrap) */
.blog-filter_inner-wrap--6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* UserWay widget removed and replaced with Pyramid Systems' own accessibility
   widget — see /css/pyramid-a11y.css and /js/pyramid-a11y.js. */

/* === Card filter animation === */
.articles-wrap .w-dyn-item {
    transition: opacity 0.32s ease, transform 0.32s ease;
    opacity: 1;
    transform: scale(1);
}
.articles-wrap .w-dyn-item.is--filtered-out {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
}
.articles-wrap .w-dyn-item.is--filtered-out[data-filter-state="hidden"] {
    display: none;
}

/* Mobile: switch the grid to a 1-col vertical list (mirror partner-logos mobile behavior) */
@media screen and (max-width: 991px) {
    .blog-filter_inner-wrap {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    .blog-filter-link {
        font-size: 0.875rem;
    }
}
@media screen and (max-width: 767px) {
    .blog-filter-section { padding: 0 0 2rem 0; }
    .blog-filter_block-wrap.partner-logos_block-wrap {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    /* Hide desktop grid, show mobile stack */
    .blog-filter_logos-wrap .blog-filter_inner-wrap:not(.is--mobile) {
        display: none;
    }
    .blog-filter_logos-wrap .blog-filter_inner-wrap.is--mobile {
        display: grid;
        grid-template-columns: 1fr;
    }
    .blog-filter_logos-wrap .blog-filter_inner-wrap.is--mobile .blog-filter_cell {
        border-right: none;
        border-bottom: 0.0625rem solid #ffffff0a;
        height: 4rem;
    }
    .blog-filter_logos-wrap .blog-filter_inner-wrap.is--mobile .blog-filter_cell.is--last {
        border-bottom: none;
    }
}

/* ===========================================================
   SHINY BUTTON SWEEP — promoted from services/index.html
   inline styles so the same effect runs on EVERY page that
   uses .button_inner-wrap / .menu_inner-button.
   =========================================================== */
.button_inner-wrap, .menu_inner-button {
    position: relative !important;
    overflow: hidden !important;
}
.button_inner-wrap::before, .menu_inner-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    animation: shiny-sweep 3s ease-in-out infinite;
}
.button_inner-wrap::before {
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.2) 45%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.2) 55%, rgba(255,255,255,0) 70%, transparent 100%);
}
.button_inner-wrap.is--white::before {
    background: linear-gradient(120deg, transparent 0%, rgba(59,130,246,0) 30%, rgba(59,130,246,0.08) 45%, rgba(59,130,246,0.12) 50%, rgba(59,130,246,0.08) 55%, rgba(59,130,246,0) 70%, transparent 100%);
}
.menu_inner-button::before {
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0) 70%, transparent 100%);
}
@keyframes shiny-sweep {
    0%   { left: -100%; }
    50%  { left: 100%; }
    100% { left: 100%; }
}

/* ===========================================================
   Read More button on case-cards (services/index.html Mission
   Success section). The case-card is fixed at height:40rem with
   overflow:hidden on the wrapper, so the button has to be compact
   enough to fit within the existing info-wrap area.
   =========================================================== */
.case-card_read-more {
  margin-top: auto;
  align-self: flex-start;
  padding: 0;
  font-size: 0.875rem;
}
.case-card_read-more .button_inner-wrap {
  padding: 0.55rem 1.05rem;
  gap: 0.45rem;
  grid-column-gap: 0.45rem;
  grid-row-gap: 0.45rem;
  align-items: center;
  font-size: 0.875rem;
}
.case-card_read-more .button-arrow {
  width: 0.95rem;
}
.case-card_read-more .button-arrow svg {
  width: 100%;
  height: auto;
}

/* Make sure the case-card_info-wrap doesn't grow past the card boundary
   (40rem card height minus image area). Capped + scroll-safe so the
   button always sits flush with the bottom. */
.case-card_info-wrap {
  /* Override the min-height; we want it to use the available space, not
     enforce a minimum that pushes the button out of view. */
  flex: 1 1 auto;
}

/* ===========================================================
   Case-card click fix.
   .gradient-animation_wrap is absolutely positioned with
   inset:0% and z-index:2 — it covers the entire card and was
   eating every pointer event, including the Read case study
   button. Making it pointer-transparent lets the gradient
   still animate but lets the clicks fall through to the
   actual button/link underneath. The inner .gradient-animation
   element is purely decorative so it gets the same treatment.
   =========================================================== */
.gradient-animation_wrap,
.gradient-animation {
  pointer-events: none;
}
/* Make sure the Read case study button is clickable above the
   gradient layer (defensive — z-index already wins from above). */
.case-card_read-more {
  position: relative;
  z-index: 5;
}


/* ============================================================
   CASE STUDIES — site-wide mobile fix.
   This section uses .cases_content-block on every page that
   shows the case studies carousel (homepage, services, about,
   careers, blog, news, case-studies hub, etc.). On mobile the
   desktop sticky+100vh layout collapses the slides; this rule
   set restores normal flow + sane card sizing so the slides
   are visible. Also centers the intro block (eyebrow, title,
   body, CTA button) for consistent mobile alignment.
   ============================================================ */
@media (max-width: 991px) {
  /* Section flows normally instead of sticking with 100vh */
  .cases_content-block {
    height: auto !important;
    position: static !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 2rem 0 !important;
  }
  .cases_content-wrap,
  .cases_content {
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Case cards on desktop are 35.5rem wide — way too wide for mobile.
     Cap them so the swiper actually shows the slide. */
  .cases_content-block .case-card,
  .cases_content-block .swiper-slide.is--case {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .cases_content-block .swiper.is--case,
  .cases_content-block .cases_cards-wrap {
    width: 100% !important;
    overflow: hidden !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Text inside each case card stays left-aligned, regardless of any
     centering applied to the wrapping containers. Card BOXES centered;
     text INSIDE them stays natural left-alignment. */
  .cases_content-block .case-card,
  .cases_content-block .case-card *,
  .cases_content-block .case-card_info-wrap,
  .cases_content-block .case-card_titles-wrap,
  .cases_content-block .case-card_text-block,
  .cases_content-block .case-card_texts-wrap,
  .cases_content-block .case-card .t--case-card-category,
  .cases_content-block .case-card .case-title,
  .cases_content-block .case-card h3,
  .cases_content-block .case-card h4,
  .cases_content-block .case-card p {
    text-align: left !important;
  }
  /* Intro block (eyebrow + title + body + CTA) — center everything
     for visual consistency on mobile. Scoped to .cases_content-block
     so it doesn't leak into the contact form section which also uses
     .cases_text-button with .is--form modifier. */
  .cases_content-block .cases_text-button,
  .cases_content-block .cases_text-button.is--desktop {
    align-self: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Title and body text inside the intro */
  .cases_content-block .cases_text-button > h2,
  .cases_content-block .cases_text-button > p,
  .cases_content-block .cases_text-button > .cases_texts-wrap,
  .cases_content-block .cases_text-button .cases_texts-wrap > h2,
  .cases_content-block .cases_text-button .cases_texts-wrap > p {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* The "Proven Results" eyebrow row — icon + label as a tight unit,
     centered as a group, label stays its natural width (NOT stretched
     to 100% which creates a big gap between icon and text). */
  .cases_content-block .cases_text-button .upheader {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  .cases_content-block .cases_text-button .upheader > p {
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }
  /* CTA button centered */
  .cases_content-block .cases_text-button .button,
  .cases_content-block .cases_text-button > a {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   CASE-CARD TAG ICONS — ensure inline SVG icons inside
   .case-card_icon fill the 1.5rem container and inherit the
   tag's text color so the icon and label read as one unit.
   ============================================================ */
.case-card_icon svg {
    width: 100%;
    height: 100%;
    display: block;
    color: currentColor;
}
.case-card_tag {
    /* Make the icon + text read as a tight horizontal unit */
    color: var(--_tokenization---text-white, #fff);
}

/* ============================================================
   === PYRAMID MOBILE MENU OVERLAY — BEGIN ===
   ============================================================
   Drives the full-screen mobile overlay menu injected by
   js/pyramid-mobile-menu.js. All rules ONLY apply at viewport
   ≤991px (matches the existing mobile breakpoint). Desktop is
   completely unaffected.

   ROLLBACK: delete from this comment to "=== PYRAMID MOBILE MENU
   OVERLAY — END ===" below, save, done. No other files affected.
   ============================================================ */
.pm-overlay { display: none; }
@media (max-width: 991px) {
    .pm-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 998; /* below .header (999) so logo stays on top */
        pointer-events: none;
        background: #f4f4f4;
        -webkit-clip-path: circle(0% at calc(100% - 42px) 42px);
        clip-path: circle(0% at calc(100% - 42px) 42px);
        transition: clip-path 0.7s cubic-bezier(0.85, 0, 0.15, 1),
                    -webkit-clip-path 0.7s cubic-bezier(0.85, 0, 0.15, 1);
    }
    body.pm-menu-open .pm-overlay {
        pointer-events: auto;
        -webkit-clip-path: circle(160% at calc(100% - 42px) 42px);
        clip-path: circle(160% at calc(100% - 42px) 42px);
    }
    /* Hamburger -> X morph on the existing .header .menu button. */
    body.pm-menu-open .header .menu .menu_lines-wrap { position: relative !important; }
    body.pm-menu-open .header .menu .menu-line {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        transition: transform 0.4s cubic-bezier(0.7,0,0.3,1) !important,
                    opacity 0.25s ease !important,
                    width 0.4s cubic-bezier(0.7,0,0.3,1) !important;
    }
    body.pm-menu-open .header .menu .menu-line.is--upper { transform: translateY(-50%) rotate(45deg) !important; width: 100% !important; }
    body.pm-menu-open .header .menu .menu-line.is--middle { opacity: 0 !important; transform: translateY(-50%) scaleX(0) !important; }
    body.pm-menu-open .header .menu .menu-line.is--bottom { transform: translateY(-50%) rotate(-45deg) !important; width: 100% !important; }
    /* Hide floating elements (a11y FAB, "Awardable on Tradewinds" badge)
       while menu is open — their hard-coded z-indexes would otherwise
       poke through the overlay. */
    body.pm-menu-open #pyramid-a11y-widget,
    body.pm-menu-open .floating-badge {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease;
    }
    .pm-overlay-inner {
        position: absolute;
        inset: 0;
        padding: 132px 28px 36px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        color: #0E0E12;
        font-family: 'Poppins', 'Mulish', Arial, sans-serif;
    }
    .pm-overlay-eyebrow {
        color: rgba(14, 14, 18, 0.45);
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        margin-bottom: 30px;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.35s ease 0.25s, transform 0.45s cubic-bezier(0.2,0.8,0.2,1) 0.25s;
    }
    body.pm-menu-open .pm-overlay-eyebrow { opacity: 1; transform: translateY(0); }
    .pm-overlay-items {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .pm-overlay-items > li {
        opacity: 0;
        transform: translateX(-30px);
        transition: opacity 0.5s cubic-bezier(0.2,0.8,0.2,1),
                    transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
    }
    body.pm-menu-open .pm-overlay-items > li { opacity: 1; transform: translateX(0); }
    body.pm-menu-open .pm-overlay-items > li:nth-child(1) { transition-delay: 0.28s; }
    body.pm-menu-open .pm-overlay-items > li:nth-child(2) { transition-delay: 0.34s; }
    body.pm-menu-open .pm-overlay-items > li:nth-child(3) { transition-delay: 0.40s; }
    body.pm-menu-open .pm-overlay-items > li:nth-child(4) { transition-delay: 0.46s; }
    body.pm-menu-open .pm-overlay-items > li:nth-child(5) { transition-delay: 0.52s; }
    body.pm-menu-open .pm-overlay-items > li:nth-child(6) { transition-delay: 0.58s; }
    .pm-overlay-items button.row {
        background: transparent;
        border: 0;
        width: 100%;
        text-align: left;
        font: inherit;
        margin: 0;
        -webkit-appearance: none;
        appearance: none;
    }
    .pm-overlay-items > li > .row {
        display: flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
        padding: 12px 0;
        border-bottom: 1px solid rgba(14, 14, 18, 0.08);
        color: #0E0E12;
        cursor: pointer;
        position: relative;
    }
    .pm-overlay-items > li > .row .num {
        font-size: 11px;
        font-weight: 600;
        color: #E86222;
        letter-spacing: 0.08em;
        width: 26px;
        flex-shrink: 0;
        opacity: 0;
        transform: translateX(-12px);
        transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
    }
    .pm-overlay-items > li > .row .label {
        font-family: 'Funnel Display', 'Poppins', Arial, sans-serif;
        font-size: clamp(22px, 6vw, 32px);
        line-height: 1.0;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #0E0E12;
        transform: translateX(-28px);
        transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), color 0.25s ease;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .pm-overlay-items > li > .row .label .pm-label-icon {
        width: 2rem;
        height: 2rem;
        object-fit: contain;
        flex-shrink: 0;
    }
    .pm-overlay-items > li > .row .pm-arrow {
        margin-left: auto;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(14, 14, 18, 0.55);
        transition: color 0.25s ease, transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
    }
    .pm-overlay-items > li > .row:hover .pm-arrow,
    .pm-overlay-items > li > .row:active .pm-arrow {
        color: #E86222;
        transform: translate(4px, -4px);
    }
    /* +/- accordion icon for dropdown parents (mirrors FAQ pattern). */
    .pm-overlay-items > li > .row .pm-accordion-icon {
        margin-left: auto;
        aspect-ratio: 1;
        width: 2rem;
        flex-shrink: 0;
        border-radius: 100rem;
        background-color: rgba(14, 14, 18, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: #0E0E12;
        transition: background-color 0.25s ease, color 0.25s ease;
    }
    .pm-overlay-items > li > .row .pm-accordion-icon .pm-h-line {
        background-color: currentColor;
        border-radius: 1rem;
        width: 0.625rem;
        height: 0.09375rem;
    }
    .pm-overlay-items > li > .row .pm-accordion-icon .pm-v-line {
        background-color: currentColor;
        border-radius: 1rem;
        width: 0.09375rem;
        height: 0.625rem;
        position: absolute;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .pm-overlay-items > li.is-expanded > .row .pm-accordion-icon {
        background-color: rgba(232, 98, 34, 0.12);
        color: #E86222;
    }
    .pm-overlay-items > li.is-expanded > .row .pm-accordion-icon .pm-v-line {
        opacity: 0;
        transform: rotate(90deg);
    }
    /* Hover / press: number fades in, label slides right, color shift. */
    .pm-overlay-items > li > .row:hover .num,
    .pm-overlay-items > li > .row:focus-within .num,
    .pm-overlay-items > li.is-expanded > .row .num,
    .pm-overlay-items > li > .row:active .num {
        opacity: 1;
        transform: translateX(0);
    }
    .pm-overlay-items > li > .row:hover .label,
    .pm-overlay-items > li > .row:focus-within .label,
    .pm-overlay-items > li.is-expanded > .row .label,
    .pm-overlay-items > li > .row:active .label {
        transform: translateX(8px);
        color: #E86222;
    }
    /* Dropdown sub-items. */
    .pm-overlay-items .sub {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .pm-overlay-items li.is-expanded .sub { max-height: 480px; }
    .pm-overlay-items .sub li {
        opacity: 0;
        transform: translateX(-12px);
        transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
    }
    .pm-overlay-items li.is-expanded .sub li { opacity: 1; transform: translateX(0); }
    .pm-overlay-items li.is-expanded .sub li:nth-child(1) { transition-delay: 0.08s; }
    .pm-overlay-items li.is-expanded .sub li:nth-child(2) { transition-delay: 0.12s; }
    .pm-overlay-items li.is-expanded .sub li:nth-child(3) { transition-delay: 0.16s; }
    .pm-overlay-items li.is-expanded .sub li:nth-child(4) { transition-delay: 0.20s; }
    .pm-overlay-items li.is-expanded .sub li:nth-child(5) { transition-delay: 0.24s; }
    .pm-overlay-items li.is-expanded .sub li:nth-child(6) { transition-delay: 0.28s; }
    .pm-overlay-items li.is-expanded .sub li:nth-child(7) { transition-delay: 0.32s; }
    .pm-overlay-items li.is-expanded .sub li:nth-child(8) { transition-delay: 0.36s; }
    .pm-overlay-items .sub a {
        display: block;
        padding: 9px 0 9px 40px;
        color: rgba(14, 14, 18, 0.7);
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        border-bottom: 1px solid rgba(14, 14, 18, 0.05);
        transition: color 0.25s ease, padding-left 0.3s ease;
    }
    .pm-overlay-items .sub a:hover,
    .pm-overlay-items .sub a:active {
        color: #E86222;
        padding-left: 48px;
    }
    /* Footer block. */
    .pm-overlay-footer {
        margin-top: auto;
        padding-top: 30px;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.45s ease 0.7s, transform 0.55s cubic-bezier(0.2,0.8,0.2,1) 0.7s;
    }
    body.pm-menu-open .pm-overlay-footer { opacity: 1; transform: translateY(0); }
    .pm-overlay-footer .row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 18px;
    }
    .pm-overlay-footer .row-label {
        color: rgba(14, 14, 18, 0.45);
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }
    .pm-overlay-footer a {
        color: #0E0E12;
        text-decoration: none;
        font-size: 15px;
        display: block;
        line-height: 1.45;
    }
    .pm-overlay-footer .addr {
        color: #0E0E12;
        font-size: 15px;
        line-height: 1.45;
        display: block;
    }
    .pm-overlay-footer .meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding-top: 14px;
        border-top: 1px solid rgba(14, 14, 18, 0.1);
        font-size: 11px;
        color: rgba(14, 14, 18, 0.5);
    }
    .pm-overlay-footer .legal-links {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .pm-overlay-footer .legal-links a {
        display: inline;
        font-size: 11px;
        color: rgba(14, 14, 18, 0.55);
    }
    .pm-overlay-footer .legal-links .sep {
        color: rgba(14, 14, 18, 0.3);
        font-size: 11px;
    }
}
/* ============================================================
   === PYRAMID MOBILE MENU OVERLAY — END ===
   ============================================================ */


/* ============================================================
   === MOBILE FIXES (services gradient containment + footer 2-col) — BEGIN ===
   ============================================================
   Two scoped mobile-only fixes:

   1. The rotating "animated border" gradient on each .services_window
      card (powered by .gradient-animation_wrap + .gradient-animation)
      was bleeding outside its rounded card boundary on small viewports.
      Force overflow: hidden + border-radius on .services_window so the
      gradient stays clipped to a thin perimeter glow.

   2. The footer navigation columns were stacking as one tall column on
      mobile, leaving the right side of the viewport unused. Switch to a
      2-column grid in the tablet/large-mobile range, keep single-column
      below 480px where the screen is too narrow for two columns of
      links to read comfortably.

   ROLLBACK: delete from this comment to "=== MOBILE FIXES — END ===" below.
   ============================================================ */
@media (max-width: 991px) {
    /* HIDE the rotating orange gradient on mobile service cards.
       On desktop the .gradient-animation runs a 10s 360deg rotation
       and you see a thin perimeter glow through the card's 0.05rem
       inner gap. On mobile the gradient was bleeding visibly as a
       solid orange smear at the bottom of each card (because the
       smaller card height makes the 160%-tall gradient element fill
       too much of the card's visible area).

       The card's own static border (.0625rem solid #ffffff0a from
       the default rule) stays visible. That is what the user wants:
       a clean thin border, no animated bleed.

       Do NOT add `position: relative` or any other position override
       here. Earlier attempts to do so broke the card stacking inside
       .service_windows-wrap which relies on the default absolute
       positioning. */
    .services_window {
        overflow: hidden !important;
        border-radius: 1.5rem !important;
    }
    .services_window .gradient-animation_wrap,
    .services_window .gradient-animation {
        display: none !important;
    }
}
/* Footer 2-column on tablet + large mobile. */
@media (max-width: 991px) and (min-width: 480px) {
    .footer_navigation-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 2rem !important;
        row-gap: 2.5rem !important;
        flex-flow: initial;
        width: 100%;
    }
    .footer_navigation-row,
    .footer_navigation-row.is--contact,
    .footer_navigation-row.is--social {
        width: 100% !important;
    }
}
/* ============================================================
   === MOBILE FIXES — END ===
   ============================================================ */

/* 3-column founder grid: Jeff (left) — principle cards (middle, wider) — Sherry (right).
   Switching display from flex to grid lets us set explicit column widths so the
   founder portraits don't dominate the principle stack and vice versa. */
.ber_uns_marvin {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: start;
  display: grid;
}
/* Sticky founders on desktop only. As the user scrolls through the (now
   longer with 4+ cards) principle stack, both founders stay in view in
   the side columns. Reinforces "this is what they built together"
   visually while the user reads the values. top: 6rem clears the sticky
   header. */
@media (min-width: 992px) {
    .ber_uns_marvin .team_common-wrap {
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}
@media (max-width: 1200px) {
    .ber_uns_marvin { grid-template-columns: 1fr 1.3fr 1fr; grid-column-gap: 1.75rem; }
}
@media (max-width: 991px) {
    /* Two-column layout: founders side-by-side on top, principle stack below.
       Keeps both founders in view together without cramping. */
    .ber_uns_marvin { grid-template-columns: 1fr 1fr; }
    .ber_uns_marvin .ber_uns_nets-cards { grid-column: 1 / -1; order: 3; }
    .ber_uns_marvin .team_common-wrap:nth-child(1) { order: 1; }
    .ber_uns_marvin .team_common-wrap:last-child { order: 2; }
}
@media (max-width: 640px) {
    /* Phone: keep both founders side-by-side at the TOP (so they read as
       co-founders together), with the principle cards stacked full-width
       below. Same intent as the 991px breakpoint, just tighter gaps for
       narrow viewports. */
    .ber_uns_marvin {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 1rem;
        grid-row-gap: 1.5rem;
    }
    .ber_uns_marvin .ber_uns_nets-cards {
        grid-column: 1 / -1;
        order: 3;
    }
    .ber_uns_marvin .team_common-wrap:nth-child(1) { order: 1; }
    .ber_uns_marvin .team_common-wrap:last-child { order: 2; }
}
@media (max-width: 480px) {
    /* Very narrow phones (iPhone SE, etc.): two founder portraits side-by-side
       become too cramped to read clearly. Stack them vertically — Jeff,
       Sherry, then the principle cards underneath. */
    .ber_uns_marvin {
        grid-template-columns: 1fr;
        grid-row-gap: 1.25rem;
    }
    .ber_uns_marvin .team_common-wrap:nth-child(1) { order: 1; }
    .ber_uns_marvin .team_common-wrap:last-child { order: 2; }
    .ber_uns_marvin .ber_uns_nets-cards { order: 3; }
}
.ber_uns_nets-cards {
  z-index: 6;
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: 1fr;
  /* Was place-items: center start which left the cards' content sized to
     intrinsic width, leaving empty space on the RIGHT of each card.
     Stretch makes each card fill the column width edge-to-edge. */
  place-items: stretch;
  /* Defensive: any card inside should also stretch. */
  width: 100%;
  display: grid;
  position: relative;
}
.ber_uns_nets-cards > .social-card_wrapp {
  width: 100%;
}
.social-card_wrapp {
  position: relative;
}
.id-social_icon {
  width: 1.5rem;
  display: flex;
}
.ber_uns-img {
  z-index: 4;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_tokenization---text-gray);
  background-color: #181919;
  background-image: url("../images/imported-from-webflow/691f3a394610d88007d08f46_Frame_26.png");
  background-position: 50%;
  background-size: cover;
  border: .0625rem solid #ffffff0a;
  border-radius: 1.5rem;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: relative;
  box-shadow: inset 0 5px 12px #f4f5f90f;
}

/* ============================================================
   === MORE MOBILE FIXES (about page hero, VS logo, card whitespace) — BEGIN ===
   ============================================================
   Three issues caught in mobile review:

   1. The Pyramid logo in the "Your Contractor VS Pyramid Systems"
      comparison section had max-width: 280px. On a 375px phone with
      section padding that gets clipped on the right. Scope a class
      so we can dial it responsively.

   2. The DNA hero image (.branding---option-picture inside
      .branding---section-big-image) had width: 130% / margin-left: -15%
      at the ≤479px breakpoint. That pushes the image PAST the viewport
      edges and creates the "left-aligned, not edge-to-edge" appearance
      the user sees — actually it's overflow, not alignment. Cap to 100%
      width with zero negative margin so it fills cleanly inside the
      container instead of escaping.

   3. Belt-and-suspenders card width: target .ber_uns_nets-cards
      descendants directly with width: 100% and force the cards to
      auto-size to their content height (justify-self: stretch already
      in place but reinforce against any other rule).

   ROLLBACK: delete from this comment block to "=== MORE MOBILE FIXES — END ===".
   ============================================================ */

/* Compare-section Pyramid logo. The parent .compare_title-second is a
   flex container with a small fixed width (10rem on phones, 14rem on
   tablets) and default align-items: stretch. Without explicit overrides
   the img would stretch vertically to match the "Your Contractor" 2-line
   text-row height, which mangles the logo's 4.11:1 aspect ratio.

   Hardening: use `width: 100%` (fills the parent flex slot up to
   max-width), `height: auto` (lets aspect drive the height), `flex: none`
   (don't shrink below intrinsic), `align-self: center` (don't stretch
   to row height), and `object-fit: contain` as a final guarantee that
   the bitmap inside the bounding box keeps its aspect even if the box
   itself ends up dimensioned wrong.

   All four set with !important because the parent flex container's
   align-items: stretch combined with the cascade has been causing
   recurring squish bugs across browsers. */
.compare-pyramid-logo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 180px;
    max-height: 50px;
    object-fit: contain !important;
    flex: none !important;
    align-self: center !important;
    margin: -20px auto 0;
}
@media (min-width: 480px) { .compare-pyramid-logo { max-width: 220px; max-height: 55px; } }
@media (min-width: 768px) { .compare-pyramid-logo { max-width: 280px; max-height: 70px; } }
@media (min-width: 992px) { .compare-pyramid-logo { max-width: 320px; max-height: 80px; } }
@media (min-width: 1200px) { .compare-pyramid-logo { max-width: 360px; max-height: 90px; } }

/* DNA hero image on the about-us page: true full-bleed on mobile.
   The image lives inside a Webflow .container (max-width 87rem) which
   on mobile is viewport minus side padding. To make the DNA helix go
   actually edge-to-edge of the SCREEN, use the full-bleed escape pattern:
   width: 100vw + margin-left: calc(-50vw + 50%) which shifts the element
   to start at the left edge of the viewport regardless of how narrow
   its container is. Scoped to .hero_content-wrap-branding ancestor so
   other pages that reuse these classes are untouched. */
@media (max-width: 991px) {
    .hero_content-wrap-branding .branding---option-picture {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .hero_content-wrap-branding .branding---i-100.branding---is--desktop {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        display: block;
    }
    .hero_content-wrap-branding .branding---section-big-image {
        padding-right: 0 !important;
        padding-left: 0 !important;
        overflow: hidden;
    }
    .hero_content-wrap-branding .branding--options_pictures-wrap {
        width: 100vw !important;
        max-width: none !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        position: relative !important;
    }
}

/* Founder principle cards — belt-and-suspenders against any width
   constraint that would leave the right edge with whitespace. */
.ber_uns_nets-cards .social-card_wrapp,
.ber_uns_nets-cards .social-card_wrapp-gradient,
.ber_uns_nets-cards .ber_uns-card {
    width: 100% !important;
    box-sizing: border-box;
}
.ber_uns_nets-cards .ber_uns-card {
    justify-content: flex-start !important;
    /* Let the card height float to content. Defensive against any other
       rule forcing a fixed or stretched height. */
    height: auto !important;
    min-height: 0 !important;
}

/* ============================================================
   === MORE MOBILE FIXES — END ===
   ============================================================ */


/* ============================================================
   === JOB-POSTINGS PAGE (careers/job-postings.html) — BEGIN ===
   Wraps the iCIMS iframe in a pure-white card so the seam
   between section-white (#f4f5f9) and the iframe's white body
   disappears. Width-capped at 1100px so the listings don't
   stretch uncomfortably wide on large desktops.
   Scoped to .jobs-board_card so nothing else is affected.
   ============================================================ */
.jobs-board_card {
    background-color: #ffffff;
    width:100%;
  max-width:900px;
    margin: 0 auto;
    border-radius: 1.5rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    padding: 0;
    overflow: hidden;
}
.jobs-board_card iframe {
    width: 100%;
    border: none;
    margin: 0;
    display: block;
    background-color: #ffffff;
}
@media (max-width: 991px) {
    .jobs-board_card {
        max-width: 100%;
        border-radius: 1rem;
    }
}
@media (max-width: 479px) {
    .jobs-board_card {
        border-radius: 0.75rem;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    }
}
/* ============================================================
   === JOB-POSTINGS PAGE — END ===
   ============================================================ */


/* ============================================================
   === JOB-POSTINGS CRO BLOCKS (trust + process + fallback) ===
   Scoped under .jp-* prefix so nothing else on the site is
   affected. Three new sections between hero and listings,
   plus a fallback CTA after the iframe.
   ============================================================ */

/* --- Trust strip: 4 scannable proof points ----------------- */
.jp-trust_strip {
    padding: 4rem 0 2rem;
}
.jp-trust_grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.jp-trust_item {
    padding: 1.75rem 1.5rem;
    border-radius: 1rem;
    background-color: rgba(244, 245, 249, 0.04);
    border: 1px solid rgba(244, 245, 249, 0.08);
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.jp-trust_item:hover {
    border-color: rgba(232, 98, 34, 0.4);
    background-color: rgba(244, 245, 249, 0.06);
}
.jp-trust_number {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: #E86222;
    margin-bottom: 0.75rem;
    letter-spacing: -0.04em;
}
.jp-trust_label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--white);
    opacity: 0.85;
    margin: 0;
}
@media (max-width: 991px) {
    .jp-trust_grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .jp-trust_number { font-size: 2.4rem; }
}
@media (max-width: 479px) {
    .jp-trust_strip { padding: 3rem 0 1.5rem; }
    .jp-trust_grid { grid-template-columns: 1fr; }
    .jp-trust_item { padding: 1.25rem 1.25rem; }
    .jp-trust_number { font-size: 2.2rem; }
}

/* --- Hiring process: 4-step timeline ----------------------- */
.jp-process_section {
    padding: 4rem 0 5rem;
}
.jp-process_header {
    max-width: 720px;
    margin: 0 auto 3rem;
    text-align: center;
}
.jp-process_header .upheader {
    justify-content: center;
    margin-bottom: 1rem;
}
.jp-process_h2 {
    margin-bottom: 1rem;
}
.jp-process_sub {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--white);
    opacity: 0.78;
    max-width: 560px;
    margin: 0 auto;
}
.jp-process_steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    counter-reset: jp-step;
}
.jp-process_step {
    padding: 2rem 1.75rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(244, 245, 249, 0.06) 0%, rgba(244, 245, 249, 0.02) 100%);
    border: 1px solid rgba(244, 245, 249, 0.08);
    position: relative;
}
.jp-process_num {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #E86222;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.jp-process_step-title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--white);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}
.jp-process_step-body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--white);
    opacity: 0.78;
    margin: 0;
}
@media (max-width: 991px) {
    .jp-process_steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
    .jp-process_section { padding: 3rem 0 3.5rem; }
    .jp-process_steps { grid-template-columns: 1fr; gap: 1rem; }
    .jp-process_step { padding: 1.5rem 1.25rem; }
}

/* --- Fallback CTA: "Don't see your role?" ------------------ */
.jp-fallback_section {
    padding: 3rem 0 5rem;
}
.jp-fallback_card {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 2.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(232, 98, 34, 0.08) 0%, rgba(88, 149, 242, 0.04) 100%);
    border: 1px solid rgba(232, 98, 34, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.jp-fallback_text {
    flex: 1 1 auto;
    min-width: 0;
}
.jp-fallback_h2 {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--white);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}
.jp-fallback_body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--white);
    opacity: 0.85;
    margin: 0;
    max-width: 620px;
}
.jp-fallback_cta {
    flex: 0 0 auto;
}
@media (max-width: 767px) {
    .jp-fallback_card {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 1.5rem;
    }
    .jp-fallback_h2 { font-size: 1.5rem; }
}
@media (max-width: 479px) {
    .jp-fallback_section { padding: 2rem 0 3rem; }
    .jp-fallback_card { padding: 1.5rem 1.25rem; }
}
/* ============================================================
   === JOB-POSTINGS CRO BLOCKS — END ===
   ============================================================ */


/* ============================================================
   === KARRIERE CARD GRID — WHITESPACE + MOBILE FULL-WIDTH ===
   Used on careers/index.html for the "Why people stay" benefits
   grid and the "What we look for" personas grid. Also applied
   anywhere else .karriere-about_nets-cards renders.

   ROOT CAUSE OF THE PERSISTENT WHITESPACE BUG:
   The default rule at line ~8020 sets align-items: center on
   the grid container. With grid-template-rows: auto auto, each
   row sizes to the tallest card in the row. align-items:center
   then vertically centers shorter cards inside that row,
   leaving a band of dark background above the icon and below
   the card body. The user reads this as "white space" because
   the dark page background shows through where the card should
   have filled.

   This is the same root cause that hit .ber_uns_nets-cards on
   the about page. The previous fix was tactical to that one
   class. We now apply the same align/stretch pattern to the
   karriere grid so the cards become equal-height rows.

   FIX (≥768px):
     1. align-items: stretch on the grid container
     2. .karriere-card_wrapp: flex column, height 100%
     3. .social-card_wrapp-gradient inside: flex column, h 100%
     4. .social-card-copy inside: flex 1, h 100%, content top-aligned
   so the card BODY (the dark panel) stretches to row height
   instead of the shorter card leaving a phantom row gap.

   MOBILE FULL-WIDTH (≤767px):
     Switch to a single column from 767px down. The existing
     1-col rule only kicks in at ≤479px, leaving 480-767px
     phones with cramped 2-col layout. Also kills the rotating
     orange shimmer on mobile to prevent edge bleed.
   ============================================================ */

/* Desktop + tablet: equal-height rows */
@media (min-width: 768px) {
    .karriere-about_nets-cards {
        align-items: stretch !important;
    }
    .karriere-card_wrapp {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .karriere-card_wrapp > .social-card_wrapp-gradient {
        height: 100%;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    .karriere-card_wrapp .social-card-copy {
        height: 100% !important;
        flex: 1 1 auto;
        justify-content: flex-start !important;
    }
}

/* Mobile: full-width single column, no shimmer, no edge bleed */
@media (max-width: 767px) {
    .karriere-about_nets-cards {
        grid-template-columns: 1fr !important;
        flex-flow: column !important;
        gap: 3rem !important;
        align-items: stretch !important;
    }
    .karriere-card_wrapp {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .karriere-card_wrapp .social-card_wrapp-gradient {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border-radius: 1.5rem !important;
    }
    .karriere-card_wrapp .social-card-copy {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    /* Kill the orange rotating shimmer on mobile. It originates
       from a 7rem-wide, 160%-tall element absolutely positioned
       inside the card and can leak past the rounded edges on
       narrow viewports, which reads as glow-spill / extra space. */
    .karriere-card_wrapp .gradient-animation_wrap,
    .karriere-card_wrapp .gradient-animation {
        display: none !important;
    }

    /* THE ACTUAL WHITESPACE BUG: line 11789 of this stylesheet (inside
       @media max-width: 767px) sets .social-card-copy { height: 14rem;
       overflow: scroll; } UNSCOPED. That bare rule was meant for some
       other Webflow component (probably a swipeable card on a different
       page), but because it's not class-scoped it hits these benefit/
       persona cards too. The consequences:
         1. height: 14rem forces a fixed height. When card text is
            shorter than 14rem, there's a band of empty space at the
            bottom INSIDE the dark card body.
         2. overflow: scroll forces both axis scrollbars to render
            permanently. On iOS/webkit, those scrollbar tracks paint
            as thin WHITE bands at the bottom and right edges of the
            card. That is the "whitespace" the user has been seeing
            in every screenshot. It is not a margin/gap or animation;
            it is a literal browser-rendered scrollbar track.
       Override scoped to karriere cards: auto height, no overflow. */
    .karriere-card_wrapp .social-card-copy,
    .karriere-card_wrapp .social-card-copy.is--last {
        height: auto !important;
        overflow: visible !important;
    }
}
/* ============================================================
   === KARRIERE CARD GRID — END ===
   ============================================================ */


/* ============================================================
   === FOOTER LEGAL LINKS — MOBILE STACK ===
   On desktop, Privacy Policy · Terms of Use · Cookie Preferences
   sit on one row, right-aligned below the copyright. On any
   mobile/tablet viewport the row is too narrow to fit three
   links + middots cleanly: each link wraps mid-word ("Terms of\n
   Use", "Cookie\nPreferences") and the row looks broken.

   Fix: at ≤991px (the site-wide mobile threshold used elsewhere)
   stack the three links vertically, right-aligned, and hide the
   middot separators (which are pure noise when stacked).
   ============================================================ */
@media (max-width: 991px) {
    .footer_legal-links {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0.4rem !important;
        text-align: right !important;
    }
    .footer_legal-links > span[aria-hidden="true"] {
        display: none !important;
    }
}
/* ============================================================
   === FOOTER LEGAL LINKS — END ===
   ============================================================ */


/* ============================================================
   === HOMEPAGE FAQ — FULL-WIDTH ACCORDION ON MOBILE ===
   The homepage FAQ .accordions_content-wrap defaults to a
   2-column flex layout (line 4047 of this stylesheet) and the
   existing single-column override only fires at ≤479px (line
   12524). On 480-991px viewports the accordions still try to
   sit side-by-side, which looks cramped and forces tiny text.
   Bump the single-column rule to ≤991px so phones and small
   tablets get full-width accordions.
   ============================================================ */
@media (max-width: 991px) {
    .accordions_content-wrap {
        flex-flow: column !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .accordions-row {
        width: 100% !important;
    }
}
/* ============================================================
   === HOMEPAGE FAQ — END ===
   ============================================================ */


/* ============================================================
   === INSIGHTS PAGES: TOPIC FILTER PILLS ===
   Used on blog, case-studies, and news index pages. Replaces
   the prior 6-cell .partner-logos_inner-wrap tab-strip layout
   which broke on mobile (too many columns to fit). Pattern is
   based on the glossary-test.html (neurakey) reference: a flex
   wrap container of rounded pills, each with a label and a
   count badge. Wraps naturally at any viewport width.

   The buttons keep their existing .blog-filter-link class so the
   pre-existing filter JS (querySelector('.blog-filter-link') +
   data-filter attribute) keeps working without modification.
   The pill styling is scoped under .pyramid-filter-pills so it
   only overrides .blog-filter-link inside that container.
   ============================================================ */
.pyramid-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    /* Left-align and span the full container width, matching the neurakey
       glossary original. The parent .w-container caps the outer width;
       inside that we fill horizontally and wrap naturally. */
    justify-content: flex-start;
    align-items: center;
    padding: 1.25rem 0 0.5rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Override the prior .blog-filter-link styles inside the pill container.
   Higher specificity (.pyramid-filter-pills .blog-filter-link) + reset
   the tab-strip look back to a self-contained pill button. */
.pyramid-filter-pills .blog-filter-link,
.pyramid-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    height: auto;
    padding: 0.5rem 0.85rem 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(244, 245, 249, 0.04);
    border: 1px solid rgba(244, 245, 249, 0.10);
    color: rgba(244, 245, 249, 0.88);
    font-family: 'Poppins', 'Mulish', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pyramid-filter-pills .blog-filter-link:hover,
.pyramid-filter-pill:hover {
    background: rgba(244, 245, 249, 0.08);
    border-color: rgba(232, 98, 34, 0.45);
    color: #ffffff;
}
.pyramid-filter-pills .blog-filter-link.is--active,
.pyramid-filter-pill.is--active {
    background: #E86222;
    border-color: #E86222;
    color: #ffffff;
    font-weight: 600;
}
/* Disable the first/last cell border-radius hacks from the old tab
   strip rule, which would otherwise apply when active inside a cell. */
.pyramid-filter-pills .blog-filter_cell:first-child .blog-filter-link.is--active,
.pyramid-filter-pills .blog-filter_cell.is--last .blog-filter-link.is--active {
    border-top-left-radius: 999px !important;
    border-top-right-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
}

/* Count badge */
.pyramid-filter-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(244, 245, 249, 0.14);
    color: rgba(244, 245, 249, 0.92);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}
.pyramid-filter-pills .blog-filter-link.is--active .pyramid-filter-pill-count,
.pyramid-filter-pill.is--active .pyramid-filter-pill-count {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* Mobile breakpoint tightening */
@media (max-width: 767px) {
    .pyramid-filter-pills {
        gap: 0.45rem;
        padding: 1rem 0 0.5rem;
    }
    .pyramid-filter-pills .blog-filter-link,
    .pyramid-filter-pill {
        padding: 0.4rem 0.7rem 0.4rem 0.95rem;
        font-size: 0.82rem;
    }
    .pyramid-filter-pill-count {
        min-width: 1.35rem;
        height: 1.35rem;
        font-size: 0.68rem;
    }
}
/* ============================================================
   === INSIGHTS TOPIC FILTER PILLS — END ===
   ============================================================ */


/* ============================================================
   === INSIGHTS ARTICLE GRID — SINGLE COLUMN ON PHONES ===
   .articles-wrap defaults to 3-col, drops to 2-col at ≤991px
   (line 10667), and 1-col only at ≤479px (line 13131). That
   leaves 480-767px phones stuck on a cramped 2-col view.
   Bump to 1-col at ≤767px so full phones get full-width cards.
   ============================================================ */
@media (max-width: 767px) {
    .articles-wrap {
        grid-template-columns: 1fr !important;
    }
}
/* ============================================================
   === INSIGHTS ARTICLE GRID — END ===
   ============================================================ */


/* ============================================================
   === INSIGHTS RELATED-POSTS SLIDER (at bottom of detail pages) ===
   The carousel at the bottom of each blog/case-study/news article
   uses .swiper-blogs / .swiper-blogs-wrapper / .swiper-blogs-slide
   class names but is NOT actually initialized with Swiper.js. The
   wrapper is a flex row; slides are fixed-width children that
   overflow.

   Until now there were no click handlers on the prev/next arrows
   either — they just sat there inert. We added click handlers
   in each detail page's <script> that call scrollBy() on the
   wrapper, so the wrapper now needs `overflow-x: auto` to be
   actually scrollable. Hide the native scrollbar so the visual
   stays clean.

   Scoped via `.swiper-blogs.w-dyn-list > .swiper-blogs-wrapper`
   so other usages of .swiper-blogs-wrapper (.is--reviews, .is--sea,
   etc., which use their own behaviors) are not affected.
   ============================================================ */
.swiper-blogs.w-dyn-list > .swiper-blogs-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge / IE */
    scroll-behavior: smooth;
    /* Optional: snap scrolling makes the arrows feel native. */
    scroll-snap-type: x proximity;
}
.swiper-blogs.w-dyn-list > .swiper-blogs-wrapper::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari */
}
.swiper-blogs.w-dyn-list > .swiper-blogs-wrapper > .swiper-blogs-slide {
    scroll-snap-align: start;
}
/* ============================================================
   === INSIGHTS RELATED-POSTS SLIDER — END ===
   ============================================================ */


/* ============================================================
   === INSIGHTS SEARCH BAR (above pill filter) ===
   Pairs with the .pyramid-filter-pills above the article grid.
   Visual language matches the pills: rounded, dark glass
   background, subtle border, brand-orange focus state.
   Search icon sits inside the input via absolute positioning.
   ============================================================ */
.pyramid-search-bar {
    position: relative;
    /* Full container width — matches the neurakey original where the
       search input spans the whole .w-container row. The Webflow
       .container.w-container ancestor handles outer max-width. */
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.75rem;
    padding: 0;
}
.pyramid-search-input {
    width: 100%;
    height: 3rem;
    padding: 0.5rem 1.25rem 0.5rem 3rem;
    border-radius: 999px;
    background: rgba(244, 245, 249, 0.04);
    border: 1px solid rgba(244, 245, 249, 0.12);
    color: var(--white);
    font-family: 'Poppins', 'Mulish', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.3;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.pyramid-search-input::placeholder {
    color: rgba(244, 245, 249, 0.5);
    font-weight: 400;
}
.pyramid-search-input:hover {
    background: rgba(244, 245, 249, 0.06);
    border-color: rgba(244, 245, 249, 0.18);
}
.pyramid-search-input:focus {
    outline: none;
    background: rgba(244, 245, 249, 0.08);
    border-color: rgba(232, 98, 34, 0.6);
}
.pyramid-search-icon {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    color: rgba(244, 245, 249, 0.5);
    pointer-events: none;
    transition: color 0.2s ease;
}
.pyramid-search-input:focus + .pyramid-search-icon,
.pyramid-search-bar:focus-within .pyramid-search-icon {
    color: rgba(232, 98, 34, 0.95);
}
/* Empty state under the grid when search + category combo returns
   nothing. Toggled by the JS via class on .articles-wrap parent. */
.pyramid-empty-state {
    display: none;
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(244, 245, 249, 0.7);
    font-family: 'Poppins', 'Mulish', sans-serif;
    font-size: 1rem;
}
.pyramid-empty-state.is--visible {
    display: block;
}
.pyramid-empty-state strong {
    color: var(--white);
    font-weight: 600;
}
@media (max-width: 767px) {
    .pyramid-search-input { height: 2.6rem; font-size: 0.9rem; padding-left: 2.6rem; }
    .pyramid-search-icon { left: 1rem; }
}
/* ============================================================
   === INSIGHTS SEARCH BAR — END ===
   ============================================================ */


/* ============================================================
   === INSIGHTS FILTER BLOCK (clean wrapper) ===
   Replaces the .partner-logos_block-wrap + .partner-logos_wrap +
   .partner-logos_wrapper nest that was previously wrapping the
   "Browse by Topic" h2, search bar, and pill row. That nest came
   from the unrelated "partner logos" component and carried two
   styling artifacts the user didn't want:
     1. max-width: 75rem on the outer wrap, which left visible
        side-margins inside the .container.w-container parent.
     2. background: linear-gradient(#ffffff0f, #fff0) on the
        middle wrap, which read as a subtle white glow rectangle
        behind the filter UI.
   This block is flat: spans the full container row, no
   background. Just a vertical flex stack of h2 → search → pills
   with consistent gaps.
   ============================================================ */
.pyramid-filter-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 2.5rem 0 1rem;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
.pyramid-filter-block > .h2--logos {
    text-align: left;
    margin: 0 0 0.5rem;
}
@media (max-width: 767px) {
    .pyramid-filter-block {
        padding: 1.75rem 0 0.5rem;
        gap: 0.75rem;
    }
}
/* ============================================================
   === INSIGHTS FILTER BLOCK — END ===
   ============================================================ */


/* ============================================================
   === INSIGHTS "SUBSCRIBE TO PYRAMID INSIGHTS" CTA — MOBILE PADDING ===
   The orange .cta_content-wrap card only has a horizontal padding
   override at ≤479px (.75rem), and on 480-991px viewports the
   default (no horizontal padding) leaves the H2 hugging the rounded
   edge of the card. Combined with the large H2 font-size, the title
   visibly clips on the right side of the card.

   Fix: give the wrap a proper horizontal padding floor at all mobile
   widths, and scale the H2 + description down a notch on narrow
   phones so the text reflows inside the new padded box. word-break
   guarantees long words don't blow past the right edge if the user's
   device is unusually narrow.
   ============================================================ */
@media (max-width: 991px) {
    .blog-cta_content-block .cta_content-wrap {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    .blog-cta_content-block .cta_titles-wrap h2 {
        font-size: 2.5rem;
        line-height: 1.1;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}
@media (max-width: 479px) {
    .blog-cta_content-block .cta_content-wrap {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .blog-cta_content-block .cta_titles-wrap h2 {
        font-size: 2rem;
    }
}
/* ============================================================
   === INSIGHTS SUBSCRIBE CTA — END ===
   ============================================================ */


/* ============================================================
   === CASE-CARD SWIPER FIX (homepage + services + partners) ===
   Bug: on mobile (≤991px), swiping to slide 2/3/4/5 of the
   "Proven results" / case-studies carousel showed an EMPTY
   black panel instead of the next case card.

   Root cause: an earlier mobile fix at line ~14173 set
       .cases_content-block .cases_cards-wrap {
           width: 100% !important;
           overflow: hidden !important;
       }
   The class `.cases_cards-wrap` is the SAME element as the
   Swiper.js `swiper-wrapper`. In Swiper, that wrapper is the
   element that gets CSS-transformed (translateX) to show the
   next slide. It must be free to extend beyond viewport width
   horizontally so that slides 2-N actually live somewhere the
   transform can reveal them.

   With width:100% the wrapper was forced to viewport width
   while it contained 5 slides each at width:100%. Combined
   with overflow:hidden, slides 2-5 were rendered but clipped
   out of view by the wrapper's own bounding box. Swiper's
   translateX still moved the wrapper, but there was nothing
   visible inside it past slide 1.

   Fix: override the wrapper back to Swiper defaults on mobile.
   The OUTER `.swiper.is--case` container keeps overflow:hidden
   and width:100% (those are correct for the container; that's
   how Swiper clips the viewport-visible area). Only the inner
   wrapper is restored.
   ============================================================ */
@media (max-width: 991px) {
    .cases_content-block .cases_cards-wrap {
        /* The wrapper must NOT clip its slides. Only the parent
           .swiper container should clip; the wrapper is what gets
           transformed to reveal off-screen slides. Slides inside
           live past the wrapper's nominal width (via flex-shrink:0
           that Swiper applies) and are revealed by translateX. */
        overflow: visible !important;
        /* Centering margins on the wrapper visually shift Swiper's
           transform origin and can cause partial-slide reveals. Drop
           them; the container handles centering already. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* Leave width:100% from the inherited rule. That matches
           Swiper's default and lets slides flex-overflow normally. */
    }
}
/* ============================================================
   === CASE-CARD SWIPER FIX — END ===
   ============================================================ */


/* ============================================================
   === ABOUT-PAGE PRINCIPLES CARDS — WHITESPACE FIX ===
   Same root cause as the karriere cards fix above: line 11928
   of this stylesheet sets `.ber_uns-card { height: 21rem;
   overflow: scroll; }` UNSCOPED at ≤767px. The 479px rule at
   line 13576 then resets height:auto but does NOT reset the
   overflow, so scroll persists all the way down and mobile
   webkit paints scrollbar tracks as thin white bands at the
   bottom/right of every "Mission before metrics / Built to
   outlast contracts / Same senior engineers / Compliance
   posture" card. That's the white space the user has been
   seeing on the about page founder section.

   Companion cards on the same page (Our People / Our Clients /
   Our Community) use a different inner class (.sea-seo-card)
   that doesn't get hit by that bare overflow:scroll rule,
   which is why those cards render clean.

   Fix: scope an override to .ber_uns_nets-cards .ber_uns-card
   only, restoring auto height + visible overflow. Other uses
   of .ber_uns-card elsewhere on the site (if any) are left
   untouched.
   ============================================================ */
@media (max-width: 991px) {
    .ber_uns_nets-cards .ber_uns-card,
    .ber_uns_nets-cards .ber_uns-card.is--last {
        height: auto !important;
        overflow: visible !important;
    }
}
/* ============================================================
   === ABOUT-PAGE PRINCIPLES CARDS — END ===
   ============================================================ */

/* Dark variant for .button_inner-wrap — applied where a brand-orange filled
   button would be too loud. Translucent on dark backgrounds, transparent
   border, same shape as the default. Used on case-study cards on the homepage,
   services index, services subpages, and partners page to match the design
   language without a saturated orange fill. Adding this rule SITE-WIDE means
   any page that uses .button_inner-wrap.is--white-dark renders consistently. */
.button_inner-wrap.is--white-dark {
    background-color: rgba(244, 245, 249, 0.08);
    color: var(--_tokenization---text-white);
    border: 1px solid rgba(244, 245, 249, 0.10);
}
.button_inner-wrap.is--white-dark .button-arrow {
    color: var(--_tokenization---text-white);
}