:root {

  --sx-paper: #f7f4ed;

  --sx-white: #ffffff;

  --sx-ink: #14151a;

  --sx-muted: #656773;

  --sx-line: #d9d6ce;

  --sx-blue: #4057ff;

  --sx-orange: #ff6747;

  --sx-cyan: #a8e4ff;

  --sx-lime: #e6ff7b;

  --sx-violet: #d8c8ff;

  --sx-mint: #c5edd9;

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  background: var(--sx-paper);

  color: var(--sx-ink);

  font-family: Arial, Helvetica, sans-serif;

  overflow-x: hidden;

}

body.sx-nav-open {

  overflow: hidden;

}

a {

  color: inherit;

}

img {

  max-width: 100%;

  display: block;

}

button,

input,

textarea {

  font: inherit;

}

::selection {

  background: var(--sx-blue);

  color: #fff;

}

::-moz-selection {

  background: var(--sx-blue);

  color: #fff;

}

.sx-skip {

  position: fixed;

  left: 16px;

  top: -80px;

  background: #111;

  color: #fff;

  padding: 12px 18px;

  z-index: 99999;

  text-decoration: none;

  border-radius: 0;

  transition: top 0.2s ease;

}

.sx-skip:focus {

  top: 12px;

}

.container {

  max-width: 1320px;

}

.sx-section {

  padding: 50px 0;

  position: relative;

}

.sx-eyebrow,

.sx-kicker {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  font-size: 12px;

  line-height: 1.2;

  font-weight: 800;

  letter-spacing: 1.6px;

  text-transform: uppercase;

}

.sx-eyebrow:before,

.sx-kicker:before {

  content: "";

  width: 30px;

  height: 2px;

  background: currentColor;

  display: block;

}

.sx-section-head {

  margin-bottom: 34px;

}

.sx-section-head h2,

.sx-section-head h3 {

  font-size: 52px;

  line-height: 0.98;

  letter-spacing: -2.4px;

  margin: 0;

  max-width: 980px;

}

.sx-lead {

  font-size: 17px;

  line-height: 1.7;

  color: var(--sx-muted);

  max-width: 780px;

  margin: 16px 0 0;

}

.reveal-rise {

  opacity: 0;

  transform: translateY(30px);

  transition:

    opacity 0.7s ease,

    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);

}

.reveal-rise.is-visible {

  opacity: 1;

  transform: translateY(0);

}



/* HEADER */

.headerTop {

  position: sticky;

  top: 10px;

  z-index: 900;

  margin: 10px 12px 0;

}

.headerTop .navbar {

  min-height: 72px;

  padding: 0;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid rgba(20, 21, 26, 0.14);

  box-shadow: 0 12px 42px rgba(20, 21, 26, 0.08);

  backdrop-filter: blur(16px);

  position: relative;

}

.headerTop .container-fluid {

  padding: 0 18px 0 0;

}

.headerTop .navbar-brand {

  padding: 0;

  margin-right: 22px;

  align-self: stretch;

  display: flex;

  align-items: stretch;

}

.headerTop .brand-plate {

  display: flex;

  align-items: center;

  min-width: 248px;

  padding: 0 26px;

  background: var(--sx-ink);

  position: relative;

  overflow: hidden;

}

.headerTop .brand-plate:after {

  content: "";

  position: absolute;

  right: -38px;

  top: -30px;

  width: 88px;

  height: 140px;

  background: var(--sx-blue);

  transform: rotate(15deg);

}

.headerTop .brand-plate img {

  position: relative;

  z-index: 2;

  width: 190px;

  height: auto;

}

.headerTop .navbar-collapse {

  justify-content: flex-end;

}

.headerTop .has-mega {

  position: static;

}

.headerTop .real-menu {

  align-items: center;

  gap: 2px;

  margin-left: auto;

}

.headerTop .real-menu > .nav-item > .nav-link {

  font-size: 13px;

  font-weight: 800;

  padding: 25px 11px;

  color: var(--sx-ink);

  position: relative;

  text-transform: uppercase;

  letter-spacing: 0.4px;

}

.headerTop .real-menu > .nav-item > .nav-link:after {

  border: 0 !important;

}

.headerTop .real-menu > .nav-item > .nav-link:before {

  content: "";

  position: absolute;

  left: 11px;

  right: 11px;

  bottom: 17px;

  height: 2px;

  background: var(--sx-blue);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.25s ease;

}

.headerTop .real-menu > .nav-item > .nav-link:hover:before,

.headerTop .real-menu > .nav-item > .nav-link.active:before {

  transform: scaleX(1);

}

.headerTop .mm-caret {

  font-size: 10px;

  margin-left: 4px;

  transition: transform 0.2s ease;

}

.headerTop .dropdown.show > .nav-link .mm-caret,

.headerTop .dropdown-toggle.show .mm-caret {

  transform: rotate(180deg);

}

.headerTop .dropdown-menu {

  border: 1px solid var(--sx-line);

  border-radius: 0;

  box-shadow: 0 25px 70px rgba(20, 21, 26, 0.16);

  padding: 16px;

  background: #fff;

}

.headerTop .mega-menu {

  left: 0;

  right: 0;

  top: 100%;

  width: auto;

  margin-top: 0;

  max-height: 650px;

  overflow-y: auto;

  overscroll-behavior: contain;

}

.headerTop .mega-menu-column {

  padding: 16px 16px 12px;

  height: 100%;

  border-left: 2px solid #efeee9;

}

.headerTop .mm-col:nth-child(2) .mega-menu-column,

.headerTop .mm-col:nth-child(5) .mega-menu-column {

  border-left-color: var(--sx-blue);

}

.headerTop .mega-menu-title {

  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 10px;

}

.headerTop .mm-icon {

  width: 32px;

  height: 32px;

  border: 1px solid var(--sx-ink);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: var(--sx-paper);

  flex: 0 0 32px;

}

.headerTop .mega-menu-title > .nav-link {

  font-size: 13px;

  font-weight: 900;

  padding: 0;

  color: var(--sx-ink);

}

.headerTop .mega-menu ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

.headerTop .mega-menu li .nav-link,

.headerTop .mm-simple .nav-link {

  font-size: 12px;

  line-height: 1.4;

  padding: 6px 0;

  color: #5b5d65;

  transition:

    color 0.2s ease,

    transform 0.2s ease;

}

.headerTop .mega-menu li .nav-link:hover,

.headerTop .mm-simple .nav-link:hover {

  color: var(--sx-blue);

  transform: translateX(4px);

}

.headerTop .mm-simple {

  min-width: 320px;

  padding: 12px 18px;

}

.headerTop .navbar-toggler {

  border: 1px solid var(--sx-ink);

  border-radius: 0;

  width: 44px;

  height: 44px;

  padding: 0;

  font-size: 22px;

  color: var(--sx-ink);

  box-shadow: none !important;

}

.headerTop .mitem {

  display: none;

}

@media (max-width: 1199.98px) {

  .headerTop .real-menu > .nav-item > .nav-link {

    padding-left: 8px;

    padding-right: 8px;

    font-size: 12px;

  }

  .headerTop .brand-plate {

    min-width: 218px;

    padding-left: 20px;

  }

  .headerTop .brand-plate img {

    width: 172px;

  }

}

@media (max-width: 991.98px) {

  .headerTop {

    top: 6px;

    margin: 6px 8px 0;

    z-index: 9990;

  }

  .headerTop .navbar {

    min-height: 64px;

    backdrop-filter: none;

  }

  .headerTop .container-fluid {

    padding-right: 12px;

  }

  .headerTop .brand-plate {

    min-width: 190px;

    padding: 0 18px;

  }

  .headerTop .brand-plate img {

    width: 158px;

  }

  .headerTop .navbar-collapse {

    position: fixed;

    left: 8px;

    right: 8px;

    top: 76px;

    bottom: auto;

    height: calc(100% - 84px) !important;

    max-height: none;

    background: #fff;

    border: 1px solid var(--sx-line);

    padding: 62px 16px 24px;

    overflow-x: hidden;

    overflow-y: auto !important;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    box-shadow: 0 28px 80px rgba(20, 21, 26, 0.22);

    z-index: 9995;

  
  min-height: 0;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #9a9ca5 transparent;
}

  .headerTop .navbar-collapse.collapsing {

    display: block;

    height: auto !important;

    transition: none !important;

    overflow-x: hidden;

    overflow-y: auto;

  }

  .headerTop .navbar-collapse.collapse:not(.show) {

    display: none;

  }

  .headerTop .navbar-collapse.show {

    display: block;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    touch-action: pan-y;

  }

  .headerTop .navbar-collapse > .d-flex {

    min-height: min-content;

  }

  .headerTop .navbar-collapse::-webkit-scrollbar {

    width: 5px;

  }

  .headerTop .navbar-collapse::-webkit-scrollbar-thumb {

    background: #9a9ca5;

    border-radius: 10px;

  }

  .headerTop .navbar-collapse::-webkit-scrollbar-track {

    background: transparent;

  }

  .headerTop .mitem {

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    right: 14px;

    top: 12px;

    z-index: 6;

    background: #fff;

  }

  .headerTop .d-flex.w-100 {

    display: block !important;

  }

  .headerTop .real-menu {

    align-items: stretch;

    gap: 0;

    width: 100%;

    margin: 0;

  }

  .headerTop .real-menu > .nav-item {

    width: 100%;

  }

  .headerTop .real-menu > .nav-item > .nav-link {

    display: flex;

    align-items: center;

    /* justify-content: space-between; */

    width: 100%;

    padding: 14px 4px;

    border-bottom: 1px solid #eceae4;

    font-size: 14px;

  }

  .headerTop .real-menu > .nav-item > .nav-link:before {

    display: none;

  }

  .headerTop .dropdown-menu,

  .headerTop .mega-menu {

    position: static !important;

    inset: auto !important;

    transform: none !important;

    max-height: none;

    width: 100%;

    min-width: 0;

    box-shadow: none;

    border: 0;

    border-left: 2px solid var(--sx-blue);

    margin: 4px 0 12px !important;

    padding: 8px 10px;

    background: #f8f7f3;

  }

  .headerTop .mega-menu .container-fluid {

    padding: 0;

  }

  .headerTop .mega-menu .mm-row {

    margin: 0;

  }

  .headerTop .mega-menu .mm-col {

    width: 100%;

    max-width: 100%;

    flex: 0 0 100%;

    padding-left: 0;

    padding-right: 0;

  }

  .headerTop .mega-menu-column {

    border-left: 0;

    border-bottom: 1px solid #e4e1d8;

    padding: 12px 4px;

  }

  .headerTop .mega-menu li .nav-link,

  .headerTop .mm-simple .nav-link {

    padding: 8px 0;

    font-size: 13px;

  }

  .headerTop .mm-simple {

    min-width: 0;

  }

  .headerTop .mega-menu.show {

    max-height: 520px;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    overscroll-behavior-y: contain;

    -webkit-overflow-scrolling: touch;

    touch-action: pan-y;

    scrollbar-width: thin;

    scrollbar-color: #9a9ca5 transparent;

  }

  .headerTop .mega-menu.show::-webkit-scrollbar {

    width: 5px;

  }

  .headerTop .mega-menu.show::-webkit-scrollbar-thumb {

    background: #9a9ca5;

    border-radius: 10px;

  }

  .headerTop .mega-menu.show::-webkit-scrollbar-track {

    background: transparent;

  }

  .headerTop .dropdown.show > .nav-link .mm-caret,

  .headerTop .dropdown-toggle.show .mm-caret {

    transform: rotate(180deg);

  }

}

@media (max-width: 575.98px) {

  .headerTop .brand-plate {

    min-width: 160px;

    padding: 0 14px;

  }

  .headerTop .brand-plate img {

    width: 138px;

  }

  .headerTop .navbar-toggler {

    width: 40px;

    height: 40px;

  }

  .headerTop .mega-menu.show {

    max-height: 500px;

  }

}



/* HERO */

.sx-hero {

  position: relative;

  padding: 72px 0 54px;

  min-height: 760px;

  overflow: hidden;

  background: linear-gradient(180deg, #fff 0%, var(--sx-paper) 100%);

}

.sx-hero__field {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

}

.sx-plane {

  position: absolute;

  display: block;

  transform-origin: center;

  transition: transform 0.2s linear;

}

.sx-plane--1 {

  width: 420px;

  height: 480px;

  background: var(--sx-cyan);

  right: -110px;

  top: 70px;

  transform: rotate(17deg);

}

.sx-plane--2 {

  width: 260px;

  height: 560px;

  background: var(--sx-violet);

  left: -115px;

  top: 170px;

  transform: rotate(-12deg);

}

.sx-plane--3 {

  width: 160px;

  height: 160px;

  background: var(--sx-orange);

  right: 28%;

  top: 125px;

  transform: rotate(45deg);

}

.sx-plane--4 {

  width: 210px;

  height: 70px;

  background: var(--sx-lime);

  left: 42%;

  top: 310px;

  transform: rotate(-9deg);

}

.sx-kicker {

  color: var(--sx-blue);

  margin-bottom: 18px;

}

.sx-hero__title {

  margin: 0;

  font-weight: 900;

  font-size: 112px;

  line-height: 0.76;

  letter-spacing: -7px;

  position: relative;

  z-index: 2;

}

.sx-hero__title span {

  display: block;

  transform: translateY(58px);

  opacity: 0;

  animation: sxHeroLine 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;

}

.sx-hero__title span:nth-child(2) {

  margin-left: 12%;

  animation-delay: 0.12s;

}

.sx-hero__title span:nth-child(3) {

  color: transparent;

  -webkit-text-stroke: 2px var(--sx-ink);

  animation-delay: 0.24s;

}

@keyframes sxHeroLine {

  to {

    transform: translateY(0);

    opacity: 1;

  }

}

.sx-hero__brief {

  background: #fff;

  padding: 28px;

  border-top: 5px solid var(--sx-blue);

  box-shadow: 0 24px 65px rgba(20, 21, 26, 0.12);

  position: relative;

  z-index: 3;

}

.sx-hero__brief p {

  font-size: 14px;

  line-height: 1.75;

  color: #4e5059;

  margin: 0 0 14px;

}

.sx-magnetic {

  display: flex;

  align-items: center;

  justify-content: space-between;

  text-decoration: none;

  background: var(--sx-ink);

  color: #fff;

  padding: 15px 17px;

  margin-top: 20px;

  font-size: 13px;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.7px;

  transition:

    background 0.25s ease,

    color 0.25s ease,

    transform 0.15s ease;

}

.sx-magnetic:hover {

  background: var(--sx-lime);

  color: var(--sx-ink);

}

.sx-hero__stage {

  height: 230px;

  margin-top: 58px;

  position: relative;

  border-top: 1px solid rgba(20, 21, 26, 0.22);

  border-bottom: 1px solid rgba(20, 21, 26, 0.22);

}

.sx-stage-window {

  position: absolute;

  padding: 18px 20px;

  border: 1px solid var(--sx-ink);

  background: #fff;

  min-width: 220px;

  box-shadow: 8px 8px 0 rgba(20, 21, 26, 0.12);

  transition: transform 0.2s linear;

}

.sx-stage-window span {

  display: block;

  font-size: 11px;

  font-weight: 900;

  color: var(--sx-blue);

  margin-bottom: 18px;

}

.sx-stage-window strong {

  display: block;

  font-size: 26px;

  line-height: 1;

  margin-bottom: 6px;

}

.sx-stage-window small {

  font-size: 12px;

  color: var(--sx-muted);

}

.sx-stage-window--a {

  left: 5%;

  top: 42px;

  transform: rotate(-3deg);

}

.sx-stage-window--b {

  left: 39%;

  top: 78px;

  transform: rotate(2deg);

  background: var(--sx-lime);

}

.sx-stage-window--c {

  right: 6%;

  top: 28px;

  transform: rotate(4deg);

  background: var(--sx-cyan);

}

.sx-stage-line {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 1px;

  background: #d5d1c7;

  z-index: 0;

}

.sx-stage-line span {

  display: block;

  width: 70px;

  height: 3px;

  background: var(--sx-orange);

  position: absolute;

  left: 0;

  top: -1px;

  animation: sxRail 7s linear infinite;

}

@keyframes sxRail {

  0% {

    left: 0;

  }

  100% {

    left: calc(100% - 70px);

  }

}

@media (max-width: 1199.98px) {

  .sx-hero__title {

    font-size: 88px;

    letter-spacing: -5px;

  }

}

@media (max-width: 991.98px) {

  .sx-hero {

    padding-top: 48px;

    min-height: 0;

  }

  .sx-hero__title {

    font-size: 72px;

    line-height: 0.82;

    letter-spacing: -4px;

  }

  .sx-hero__title span:nth-child(2) {

    margin-left: 0;

  }

  .sx-hero__brief {

    margin-top: 18px;

  }

  .sx-hero__stage {

    height: 330px;

    margin-top: 38px;

  }

  .sx-stage-window--a {

    left: 4%;

    top: 36px;

  }

  .sx-stage-window--b {

    left: auto;

    right: 4%;

    top: 118px;

  }

  .sx-stage-window--c {

    left: 12%;

    right: auto;

    top: 214px;

  }

  .sx-plane--3 {

    right: 12%;

    top: 80px;

  }

}

@media (max-width: 575.98px) {

  .sx-hero {

    padding: 34px 0 20px;

  }

  .sx-hero__title {

    font-size: 48px;

    letter-spacing: -2.5px;

  }

  .sx-hero__title span:nth-child(3) {

    -webkit-text-stroke: 1px var(--sx-ink);

  }

  .sx-hero__brief {

    padding: 20px;

  }

  .sx-hero__stage {

    height: 370px;

  }

  .sx-stage-window {

    min-width: 0;

    width: 82%;

    padding: 15px 16px;

  }

  .sx-stage-window--a {

    left: 2%;

    top: 30px;

  }

  .sx-stage-window--b {

    right: 2%;

    top: 140px;

  }

  .sx-stage-window--c {

    left: 7%;

    top: 252px;

  }

  .sx-plane--1 {

    width: 250px;

    height: 320px;

  }

  .sx-plane--2 {

    width: 180px;

    height: 380px;

  }

  .sx-plane--4 {

    left: 45%;

    top: 250px;

  }

}



/* SERVICES */

.sx-services {

  background: #fbfaf6;

}

.sx-blades {

  border-top: 1px solid var(--sx-ink);

}

.sx-blade {

  border-bottom: 1px solid var(--sx-ink);

  background: transparent;

  transition: background 0.35s ease;

}

.sx-blade__toggle {

  width: 100%;

  border: 0;

  background: transparent;

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 18px 8px;

  text-align: left;

  color: var(--sx-ink);

  cursor: pointer;

}

.sx-blade__toggle .bi:not(.bi-plus-lg) {

  width: 46px;

  height: 46px;

  border: 1px solid var(--sx-ink);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  flex: 0 0 46px;

  background: #fff;

  transition:

    transform 0.35s ease,

    background 0.35s ease;

}

.sx-blade__num {

  font-size: 12px;

  font-weight: 900;

  width: 36px;

  color: #777;

}

.sx-blade__toggle strong {

  font-size: 30px;

  line-height: 1;

  letter-spacing: -1px;

  flex: 1;

}

.sx-blade__plus {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-left: 1px solid var(--sx-line);

}

.sx-blade__plus i {

  transition: transform 0.35s ease;

}

.sx-blade__body {

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition:

    max-height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),

    opacity 0.35s ease,

    padding 0.55s ease;

  padding: 0 70px 0 110px;

}

.sx-blade__body p {

  font-size: 18px;

  line-height: 1.65;

  margin: 0;

  color: #3f4148;

}

.sx-blade__note {

  display: block;

  border-left: 3px solid var(--sx-orange);

  padding-left: 14px;

  font-size: 13px;

  line-height: 1.6;

  font-weight: 800;

}

.sx-blade.is-active {

  background: var(--sx-white);

}

.sx-blade.is-active .sx-blade__body {

  max-height: 320px;

  opacity: 1;

  padding-top: 5px;

  padding-bottom: 25px;

}

.sx-blade.is-active .sx-blade__plus i {

  transform: rotate(45deg);

}

.sx-blade.is-active .sx-blade__toggle .bi:not(.bi-plus-lg) {

  background: var(--sx-blue);

  color: #fff;

  transform: rotate(-5deg);

}

.sx-blade:hover:not(.is-active) {

  background: #f1eee7;

}

@media (max-width: 767.98px) {

  .sx-blade__toggle {

    gap: 10px;

    padding: 14px 2px;

  }

  .sx-blade__toggle strong {

    font-size: 20px;

  }

  .sx-blade__toggle .bi:not(.bi-plus-lg) {

    width: 38px;

    height: 38px;

    flex-basis: 38px;

    font-size: 16px;

  }

  .sx-blade__num {

    width: 28px;

  }

  .sx-blade__body {

    padding-left: 48px;

    padding-right: 8px;

  }

  .sx-blade.is-active .sx-blade__body {

    max-height: 520px;

  }

  .sx-blade__body p {

    font-size: 15px;

  }

}



/* WHY */

.sx-why {

  background: var(--sx-paper);

  overflow: visible;

}

.sx-sticky-copy {

  position: sticky;

  top: 120px;

  padding-right: 20px;

}

.sx-sticky-copy h2 {

  font-size: 56px;

  line-height: 0.94;

  letter-spacing: -2.6px;

  margin: 16px 0 24px;

}

.sx-big-quote {

  font-size: 18px;

  line-height: 1.55;

  border-left: 5px solid var(--sx-blue);

  padding-left: 18px;

  max-width: 340px;

}

.sx-prooflines {

  border-top: 1px solid var(--sx-ink);

}

.sx-proofline {

  display: flex;

  gap: 24px;

  padding: 28px 0;

  border-bottom: 1px solid var(--sx-ink);

  position: relative;

  overflow: hidden;

}

.sx-proofline:after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 5px;

  background: var(--sx-orange);

  transition: width 0.45s ease;

}

.sx-proofline:hover:after {

  width: 100%;

}

.sx-proofline > span {

  font-size: 12px;

  font-weight: 900;

  color: var(--sx-blue);

  padding-top: 5px;

  flex: 0 0 35px;

}

.sx-proofline h3 {

  font-size: 25px;

  line-height: 1.1;

  margin: 0 0 10px;

  letter-spacing: -0.8px;

}

.sx-proofline p {

  font-size: 14px;

  line-height: 1.7;

  color: #595b64;

  margin: 0;

  max-width: 760px;

}

.sx-compare-wrap {

  max-width: 1320px;

  margin: 55px auto 0;

  background: #fff;

  border: 1px solid var(--sx-ink);

}

.sx-compare-intro {

  height: 100%;

  padding: 32px;

  background: var(--sx-blue);

  color: #fff;

}

.sx-compare-intro > span {

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 1.4px;

  font-weight: 900;

}

.sx-compare-intro h3 {

  font-size: 38px;

  line-height: 0.98;

  letter-spacing: -1.7px;

  margin: 70px 0 20px;

}

.sx-compare-intro p {

  font-size: 13px;

  line-height: 1.7;

  margin: 0;

  color: rgba(255, 255, 255, 0.82);

}

.sx-compare-table {

  margin: 0;

  font-size: 13px;

  min-width: 760px;

}

.sx-compare-table > :not(caption) > * > * {

  padding: 17px 18px;

  border-color: #ddd9cf;

  background: transparent;

}

.sx-compare-table thead th {

  background: #eeeae2;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.sx-compare-table tbody th {

  font-weight: 900;

  width: 190px;

}

.sx-compare-table tbody td:nth-child(2) {

  background: #f2f4ff;

  font-weight: 800;

  color: #2639c9;

}

.sx-working {

  margin-top: 55px;

}

.sx-working-item {

  border-top: 5px solid var(--sx-ink);

  padding: 18px 0 0;

  min-height: 185px;

  position: relative;

}

.sx-working-item > span {

  font-size: 11px;

  color: var(--sx-blue);

  font-weight: 900;

}

.sx-working-item h3 {

  font-size: 24px;

  line-height: 1.05;

  margin: 28px 0 9px;

}

.sx-working-item p {

  font-size: 13px;

  line-height: 1.65;

  color: #5d6068;

  margin: 0;

}

@media (max-width: 991.98px) {

  .sx-sticky-copy {

    position: relative;

    top: auto;

    padding-right: 0;

    margin-bottom: 10px;

  }

  .sx-sticky-copy h2 {

    font-size: 46px;

  }

  .sx-compare-intro h3 {

    margin-top: 34px;

  }

}

@media (max-width: 575.98px) {

  .sx-sticky-copy h2 {

    font-size: 38px;

    letter-spacing: -1.5px;

  }

  .sx-proofline {

    gap: 10px;

    padding: 22px 0;

  }

  .sx-proofline h3 {

    font-size: 21px;

  }

  .sx-compare-wrap {

    margin-top: 34px;

  }

  .sx-compare-intro {

    padding: 22px;

  }

  .sx-compare-intro h3 {

    font-size: 31px;

  }

}



/* PORTFOLIO */

.sx-portfolio {

  background: #ece8df;

  overflow: hidden;

}

.sx-swiper-nav {

  display: flex;

  gap: 8px;

  justify-content: flex-end;

}

.sx-swiper-nav button {

  width: 46px;

  height: 46px;

  border: 1px solid var(--sx-ink);

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:

    background 0.2s ease,

    color 0.2s ease;

}

.sx-swiper-nav button:hover {

  background: var(--sx-ink);

  color: #fff;

}

.sx-project-swiper {

  padding: 10px 0 15px;

  overflow: visible;

}

.sx-project-swiper .swiper-slide {

  width: 520px;

  transition: opacity 0.3s ease;

}

.sx-project-swiper .swiper-slide:not(.swiper-slide-active) {

  opacity: 0.55;

}

.sx-project {

  margin: 0;

  background: #fff;

  border: 1px solid var(--sx-ink);

  padding: 10px;

  box-shadow: 18px 18px 0 rgba(20, 21, 26, 0.08);

}

.sx-project__frame {

  height: 370px;

  overflow: hidden;

  background: #ddd;

}

.sx-project__frame img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);

}

.sx-project:hover .sx-project__frame img {

  transform: scale(1.045);

}

.sx-project figcaption {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px 4px 5px;

}

.sx-project figcaption > span {

  font-size: 10px;

  letter-spacing: 1px;

  font-weight: 900;

  color: var(--sx-blue);

}

.sx-project figcaption > strong {

  font-size: 19px;

  flex: 1;

}

.sx-project figcaption > a {

  font-size: 11px;

  font-weight: 900;

  text-decoration: none;

  text-transform: uppercase;

}

@media (max-width: 767.98px) {

  .sx-project-swiper .swiper-slide {

    width: 82%;

  }

  .sx-project__frame {

    height: 280px;

  }

  .sx-project figcaption {

    flex-wrap: wrap;

  }

}



/* INDUSTRIES */

.sx-industries {

  background: #fbfaf6;

}

.sx-industry-list {

  align-content: flex-start;

}

.sx-industry-btn {

  width: 100%;

  min-height: 90px;

  border: 1px solid #d8d4ca;

  background: transparent;

  text-align: left;

  padding: 14px;

  display: flex;

  align-items: center;

  gap: 10px;

  position: relative;

  overflow: hidden;

  transition:

    border-color 0.25s ease,

    background 0.25s ease,

    transform 0.25s ease;

}

.sx-industry-btn:before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 4px;

  background: var(--sx-blue);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.3s ease;

}

.sx-industry-btn span {

  font-size: 10px;

  font-weight: 900;

  color: #83858d;

  align-self: flex-start;

}

.sx-industry-btn > i {

  font-size: 22px;

  width: 32px;

}

.sx-industry-btn strong {

  font-size: 14px;

  line-height: 1.2;

}

.sx-industry-btn:hover,

.sx-industry-btn.is-active {

  background: #fff;

  border-color: var(--sx-ink);

  transform: translateY(-2px);

}

.sx-industry-btn.is-active:before {

  transform: scaleX(1);

}

.sx-industry-stage {

  height: 100%;

  min-height: 470px;

  background: var(--sx-blue);

  color: #fff;

  padding: 40px;

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

}

.sx-industry-stage:after {

  content: "";

  position: absolute;

  width: 290px;

  height: 290px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  right: -70px;

  top: -80px;

  transform: rotate(34deg);

  transition: transform 0.6s ease;

}

.sx-industry-stage.is-changing:after {

  transform: rotate(80deg) scale(0.8);

}

.sx-industry-stage__num {

  position: absolute;

  left: 30px;

  top: 24px;

  font-size: 100px;

  line-height: 1;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.1);

}

.sx-industry-stage > i {

  font-size: 52px;

  margin-bottom: 30px;

  position: relative;

  z-index: 2;

}

.sx-industry-stage h3 {

  font-size: 56px;

  line-height: 0.93;

  letter-spacing: -2.7px;

  margin: 0 0 18px;

  position: relative;

  z-index: 2;

  max-width: 650px;

}

.sx-industry-stage p {

  font-size: 15px;

  line-height: 1.7;

  max-width: 650px;

  color: rgba(255, 255, 255, 0.82);

  position: relative;

  z-index: 2;

}

.sx-industry-stage small {

  font-size: 11px;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  border-top: 1px solid rgba(255, 255, 255, 0.35);

  padding-top: 16px;

  margin-top: 24px;

  position: relative;

  z-index: 2;

}

@media (max-width: 991.98px) {

  .sx-industry-stage {

    min-height: 430px;

    margin-top: 10px;

  }

  .sx-industry-stage h3 {

    font-size: 44px;

  }

}

@media (max-width: 575.98px) {

  .sx-industry-stage {

    min-height: 380px;

    padding: 26px;

  }

  .sx-industry-stage__num {

    font-size: 74px;

  }

  .sx-industry-stage h3 {

    font-size: 36px;

  }

  .sx-industry-btn {

    min-height: 86px;

  }

}



/* PROCESS */

.sx-process {

  background: #edf5f8;

  overflow: visible;

}

.sx-process-sticky-col {

  align-self: stretch;

  min-height: 100%;

}

.sx-process-stage {

  position: sticky;

  top: 125px;

  height: 520px;

  perspective: 1200px;

}

.sx-process-sheet {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  height: 430px;

  background: var(--sheet);

  border: 1px solid var(--sx-ink);

  padding: 28px;

  display: flex;

  flex-direction: column;

  transform-origin: center bottom;

  transform: translateY(70px) scale(0.88) rotateX(-8deg);

  opacity: 0;

  transition:

    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),

    opacity 0.35s ease;

  box-shadow: 16px 16px 0 rgba(20, 21, 26, 0.08);

}

.sx-process-sheet:nth-child(2) {

  top: 12px;

}

.sx-process-sheet:nth-child(3) {

  top: 24px;

}

.sx-process-sheet:nth-child(4) {

  top: 36px;

}

.sx-process-sheet:nth-child(5) {

  top: 48px;

}

.sx-process-sheet:nth-child(6) {

  top: 60px;

}

.sx-process-sheet.is-active {

  opacity: 1;

  transform: translateY(0) scale(1) rotateX(0);

  z-index: 8;

}

.sx-process-sheet.is-past {

  opacity: 0.72;

  transform: translateY(-16px) scale(0.96) rotateX(3deg);

}

.sx-process-sheet > span {

  font-size: 12px;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 1px;

}

.sx-process-sheet > strong {

  font-size: 52px;

  line-height: 0.92;

  letter-spacing: -2.3px;

  margin-top: auto;

  max-width: 440px;

}

.sx-process-sheet > em {

  font-style: normal;

  font-size: 13px;

  font-weight: 900;

  margin-top: 16px;

}

.sx-process-sheet > i {

  position: absolute;

  right: 28px;

  top: 28px;

  font-size: 30px;

}

.sx-process-triggers {

  padding-bottom: 80px;

}

.sx-process-trigger {

  min-height: 390px;

  padding: 70px 0 55px;

  border-top: 1px solid rgba(20, 21, 26, 0.35);

}

.sx-process-trigger > span {

  font-size: 11px;

  letter-spacing: 1px;

  text-transform: uppercase;

  font-weight: 900;

  color: var(--sx-blue);

}

.sx-process-trigger h3 {

  font-size: 44px;

  line-height: 1;

  letter-spacing: -1.8px;

  margin: 22px 0 18px;

}

.sx-process-trigger p {

  font-size: 16px;

  line-height: 1.7;

  color: #51545c;

  max-width: 690px;

}

.sx-process-trigger small {

  display: block;

  font-size: 13px;

  font-weight: 900;

  border-left: 4px solid var(--sx-orange);

  padding-left: 14px;

  margin-top: 20px;

}

@media (max-width: 991.98px) {

  .sx-process-sticky-col {

    align-self: auto;

    min-height: 0;

  }

  .sx-process-stage {

    position: relative;

    top: auto;

    height: auto;

    perspective: none;

    margin-bottom: 30px;

  }

  .sx-process-sheet {

    display: none;

    position: relative;

    height: auto;

    min-height: 260px;

    top: auto !important;

    transform: none !important;

    opacity: 1;

  }

  .sx-process-sheet.is-active {

    display: flex;

  }

  .sx-process-trigger {

    min-height: 0;

    padding: 34px 0;

  }

  .sx-process-trigger h3 {

    font-size: 35px;

  }

}



/* PRICING */

.sx-pricing {

  background: #fff;

}

.sx-costlab {

  border: 1px solid var(--sx-ink);

}

.sx-costlab__modes {

  height: 100%;

  background: var(--sx-ink);

  padding: 0;

}

.sx-costlab__modes button {

  width: 100%;

  min-height: 132px;

  border: 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.17);

  background: transparent;

  color: #fff;

  text-align: left;

  padding: 20px 22px;

  display: flex;

  flex-direction: column;

  position: relative;

  transition:

    background 0.25s ease,

    color 0.25s ease;

}

.sx-costlab__modes button:last-child {

  border-bottom: 0;

}

.sx-costlab__modes button span {

  font-size: 10px;

  font-weight: 900;

  color: #8f929b;

}

.sx-costlab__modes button strong {

  font-size: 27px;

  margin-top: auto;

}

.sx-costlab__modes button small {

  font-size: 11px;

  color: #aeb0b7;

  margin-top: 5px;

}

.sx-costlab__modes button.is-active {

  background: var(--sx-lime);

  color: var(--sx-ink);

}

.sx-costlab__modes button.is-active span,

.sx-costlab__modes button.is-active small {

  color: #4c5224;

}

.sx-costlab__output {

  padding: 34px 38px;

  min-height: 396px;

  display: flex;

  flex-direction: column;

}

.sx-costlab__label {

  font-size: 11px;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: var(--sx-blue);

}

.sx-costlab__output > strong {

  font-size: 68px;

  line-height: 1;

  letter-spacing: -3px;

  margin: 35px 0 12px;

}

.sx-costlab__output > p {

  font-size: 15px;

  line-height: 1.65;

  color: #5a5c64;

  max-width: 670px;

}

.sx-costlab__bar {

  height: 7px;

  background: #eceae5;

  margin: 24px 0;

  overflow: hidden;

}

.sx-costlab__bar span {

  display: block;

  height: 100%;

  width: 34%;

  background: var(--sx-blue);

  transition:

    width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),

    background 0.3s ease;

}

.sx-cost-facts {

  margin-top: auto;

  border-top: 1px solid var(--sx-line);

  padding-top: 18px;

}

.sx-cost-facts span {

  display: block;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.7px;

  color: #777;

}

.sx-cost-facts strong {

  display: block;

  font-size: 14px;

  margin-top: 6px;

}

.sx-cost-note {

  font-size: 11px !important;

  margin: 18px 0 0 !important;

  color: #777 !important;

}

@media (max-width: 767.98px) {

  .sx-costlab__output {

    padding: 26px 20px;

  }

  .sx-costlab__output > strong {

    font-size: 46px;

    letter-spacing: -2px;

  }

  .sx-costlab__modes button {

    min-height: 108px;

  }

}

/* ================================
   TEAM STUDIO
================================ */

.sx-team-studio {
  background: #f1efe8;
  color: var(--sx-ink);
  overflow: hidden;
}

.sx-team-studio__head {
  margin-bottom: 34px;
}

.sx-team-studio__head h2 {
  margin: 0;
  max-width: 850px;
  font-size: 58px;
  line-height: 0.94;
  letter-spacing: -3px;
}


/* COUNTER */

.sx-team-studio__count {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 7px;
}

.sx-team-studio__count > span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #7d7c77;
  margin-right: 4px;
}

.sx-team-studio__count strong {
  font-size: 64px;
  line-height: 0.8;
  letter-spacing: -4px;
  color: var(--sx-blue);
}

.sx-team-studio__count small {
  font-size: 12px;
  font-weight: 900;
  color: #888780;
}


/* MAIN SHELL */

.sx-team-studio__shell {
  border-top: 1px solid var(--sx-ink);
  border-bottom: 1px solid var(--sx-ink);
  background: #fff;
}


/* LEFT NAV */

.sx-team-studio__nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sx-ink);
}

.sx-team-studio__tab {
  flex: 1 1 0;
  min-height: 145px;

  border: 0;
  border-bottom: 1px solid #d9d6ce;

  background: #f8f6f0;

  padding: 22px 20px;

  display: flex;
  align-items: center;
  gap: 17px;

  position: relative;
  text-align: left;
  color: var(--sx-ink);

  overflow: hidden;

  transition:
    background 0.35s ease,
    padding 0.35s ease;
}

.sx-team-studio__tab:last-child {
  border-bottom: 0;
}

.sx-team-studio__tab:before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 0;

  background: var(--sx-blue);

  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sx-team-studio__tab:after {
  content: "";

  position: absolute;

  right: -45px;
  top: -45px;

  width: 100px;
  height: 100px;

  border: 1px solid rgba(20, 21, 26, 0.12);

  transform: rotate(45deg);

  transition:
    right 0.45s ease,
    top 0.45s ease;
}

.sx-team-studio__tab:hover:after,
.sx-team-studio__tab.is-active:after {
  right: -22px;
  top: -22px;
}

.sx-team-studio__tab:hover,
.sx-team-studio__tab.is-active {
  background: #fff;
  padding-left: 28px;
}

.sx-team-studio__tab.is-active:before {
  width: 6px;
}


/* TAB NUMBER */

.sx-team-studio__tab-num {
  flex: 0 0 30px;

  font-size: 11px;
  font-weight: 900;

  color: #92918b;

  position: relative;
  z-index: 2;
}

.sx-team-studio__tab.is-active .sx-team-studio__tab-num {
  color: var(--sx-blue);
}


/* TAB COPY */

.sx-team-studio__tab-copy {
  flex: 1 1 auto;
  min-width: 0;

  position: relative;
  z-index: 2;
}

.sx-team-studio__tab-copy strong {
  display: block;

  font-size: 21px;
  line-height: 1;

  letter-spacing: -0.7px;
}

.sx-team-studio__tab-copy small {
  display: block;

  margin-top: 8px;

  font-size: 11px;
  line-height: 1.5;

  color: #77766f;
}


/* TAB ICON */

.sx-team-studio__tab-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border: 1px solid #bab7ad;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;

  position: relative;
  z-index: 2;

  font-size: 17px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.35s ease;
}

.sx-team-studio__tab:hover .sx-team-studio__tab-icon {
  transform: rotate(-7deg);
}

.sx-team-studio__tab.is-active .sx-team-studio__tab-icon {
  background: var(--sx-ink);
  color: #fff;
  border-color: var(--sx-ink);
}


/* RIGHT VISUAL */

.sx-team-studio__visual {
  position: relative;

  min-height: 580px;

  padding: 34px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #e9f0ff 0%,
      #f7f4ed 58%,
      #f5efdf 100%
    );
}


/* DECORATIVE PLANES */

.sx-team-studio__accent {
  position: absolute;
  pointer-events: none;
}

.sx-team-studio__accent.accent-one {
  width: 190px;
  height: 190px;

  background: var(--sx-lime);

  right: -85px;
  top: -65px;

  transform: rotate(28deg);
}

.sx-team-studio__accent.accent-two {
  width: 80px;
  height: 230px;

  background: var(--sx-orange);

  left: 25px;
  bottom: -135px;

  transform: rotate(-24deg);
}


/* PICTURE STAGE */

.sx-team-studio__picture-stage {
  position: relative;

  height: 500px;

  max-width: 780px;

  margin-left: auto;

  z-index: 3;
}


/* PANELS */

.sx-team-studio__panel {
  position: absolute;
  inset: 0;

  margin: 0;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(45px)
    rotate(2deg);

  clip-path: inset(14% 0 0 18%);

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
    clip-path 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sx-team-studio__panel.is-active {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    rotate(0);

  clip-path: inset(0);

  z-index: 3;
}


/* IMAGE AREA */

.sx-team-studio__image {
  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 68%;

  overflow: hidden;

  background: #dedbd2;

  border: 1px solid var(--sx-ink);

  box-shadow:
    18px 18px 0 rgba(20, 21, 26, 0.08);
}

.sx-team-studio__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;

  filter:
    saturate(0.85)
    contrast(1.03);

  transform: scale(1.05);

  transition:
    transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sx-team-studio__panel.is-active .sx-team-studio__image img {
  transform: scale(1);
}


/* INFO CARD */

.sx-team-studio__panel figcaption {
  position: absolute;

  right: 0;
  bottom: 46px;

  width: 45%;

  padding: 27px;

  background: #fff;

  border: 1px solid var(--sx-ink);

  box-shadow:
    12px 12px 0 var(--sx-blue);

  z-index: 5;

  transform: translateX(40px);

  opacity: 0;

  transition:
    transform 0.65s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.45s 0.12s ease;
}

.sx-team-studio__panel.is-active figcaption {
  transform: translateX(0);
  opacity: 1;
}

.sx-team-studio__panel figcaption > span {
  display: block;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1.4px;

  color: var(--sx-blue);

  margin-bottom: 42px;
}

.sx-team-studio__panel figcaption h3 {
  margin: 0;

  font-size: 40px;
  line-height: 0.94;

  letter-spacing: -2px;

  max-width: 340px;
}

.sx-team-studio__panel figcaption p {
  margin: 13px 0 0;

  font-size: 12px;
  line-height: 1.5;

  color: #6e6c66;
}


/* CORNER ICON */

.sx-team-studio__corner {
  position: absolute;

  right: 16px;
  top: 16px;

  width: 40px;
  height: 40px;

  border: 1px solid var(--sx-ink);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;

  background: var(--sx-lime);
}


/* PROGRESS */

.sx-team-studio__progress {
  position: absolute;

  left: 34px;
  right: 34px;
  bottom: 20px;

  height: 3px;

  background: rgba(20, 21, 26, 0.15);

  z-index: 8;

  overflow: hidden;
}

.sx-team-studio__progress span {
  display: block;

  width: 25%;
  height: 100%;

  background: var(--sx-blue);

  transform: translateX(0);

  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* META */

.sx-team-studio__meta {
  position: absolute;

  left: 34px;
  top: 22px;

  display: flex;
  gap: 18px;

  z-index: 7;
}

.sx-team-studio__meta span {
  font-size: 9px;
  font-weight: 900;

  letter-spacing: 1.1px;

  color: rgba(20, 21, 26, 0.55);
}


/* ACCESSIBILITY */

.sx-team-studio__tab:focus-visible {
  outline: 2px solid var(--sx-blue);
  outline-offset: -3px;
}


/* ================================
   TEAM TABLET
================================ */

@media (max-width: 991.98px) {

  .sx-team-studio__head h2 {
    font-size: 46px;
    letter-spacing: -2px;
  }

  .sx-team-studio__count {
    justify-content: flex-start;
  }

  .sx-team-studio__nav {
    border-right: 0;
    border-bottom: 1px solid var(--sx-ink);
  }

  .sx-team-studio__tab {
    min-height: 105px;
    flex: none;
  }

  .sx-team-studio__visual {
    min-height: 560px;
  }

  .sx-team-studio__picture-stage {
    height: 480px;
  }

}


/* ================================
   TEAM MOBILE
================================ */

@media (max-width: 575.98px) {

  .sx-team-studio__head h2 {
    font-size: 36px;
    letter-spacing: -1.5px;
  }

  .sx-team-studio__count strong {
    font-size: 48px;
  }

  .sx-team-studio__tab {
    min-height: 88px;
    padding: 15px 12px;
    gap: 10px;
  }

  .sx-team-studio__tab:hover,
  .sx-team-studio__tab.is-active {
    padding-left: 18px;
  }

  .sx-team-studio__tab-copy strong {
    font-size: 17px;
  }

  .sx-team-studio__tab-copy small {
    font-size: 10px;
  }

  .sx-team-studio__tab-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    font-size: 15px;
  }


  .sx-team-studio__visual {
    min-height: 540px;
    padding: 18px;
  }

  .sx-team-studio__picture-stage {
    height: 480px;
  }


  .sx-team-studio__image {
    width: 100%;
    height: 340px;
    bottom: auto;

    box-shadow:
      9px 9px 0 rgba(20, 21, 26, 0.08);
  }


  .sx-team-studio__panel figcaption {
    left: 20px;
    right: 0;

    bottom: 16px;

    width: auto;

    padding: 21px;

    box-shadow:
      7px 7px 0 var(--sx-blue);
  }

  .sx-team-studio__panel figcaption > span {
    margin-bottom: 24px;
  }

  .sx-team-studio__panel figcaption h3 {
    font-size: 30px;
    letter-spacing: -1.4px;
  }


  .sx-team-studio__meta {
    display: none;
  }

  .sx-team-studio__progress {
    left: 18px;
    right: 18px;
    bottom: 7px;
  }


  .sx-team-studio__accent.accent-one {
    width: 130px;
    height: 130px;
  }

}

/* REVIEWS */

.sx-reviews {

  background: #fff;

  overflow: hidden;

}

.sx-review-marquee {

  border-top: 1px solid var(--sx-ink);

  border-bottom: 1px solid var(--sx-ink);

  padding: 14px 0;

  margin-bottom: 50px;

  overflow: hidden;

  white-space: nowrap;

  background: var(--sx-cyan);

}

.sx-review-marquee > div {

  display: inline-flex;

  gap: 70px;

  animation: sxMarquee 20s linear infinite;

}

.sx-review-marquee span {

  font-size: 34px;

  font-weight: 900;

  letter-spacing: -1px;

}

@keyframes sxMarquee {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(-50%);

  }

}

.sx-review-links {

  border-top: 1px solid var(--sx-ink);

  border-left: 1px solid var(--sx-ink);

}

.sx-review-links a {

  min-height: 210px;

  border-right: 1px solid var(--sx-ink);

  border-bottom: 1px solid var(--sx-ink);

  text-decoration: none;

  padding: 20px;

  display: flex;

  flex-direction: column;

  transition:

    background 0.3s ease,

    color 0.3s ease;

}

.sx-review-links a > span {

  font-size: 10px;

  font-weight: 900;

  color: #777;

}

.sx-review-links a > strong {

  font-size: 31px;

  margin-top: auto;

  letter-spacing: -1px;

}

.sx-review-links a > i {

  font-size: 24px;

  align-self: flex-end;

  margin-top: -25px;

  transition: transform 0.25s ease;

}

.sx-review-links a:hover {

  background: var(--sx-blue);

  color: #fff;

}

.sx-review-links a:hover > i {

  transform: translate(4px, -4px);

}

.sx-review-links a:hover > span {

  color: #fff;

}



/* FAQ */

.sx-faq {

  background: var(--sx-paper);

}

.sx-faq-intro {

  position: sticky;

  top: 125px;

}

.sx-faq-intro h2 {

  font-size: 54px;

  line-height: 0.95;

  letter-spacing: -2.5px;

  margin: 18px 0;

}

.sx-faq-intro p {

  font-size: 14px;

  line-height: 1.7;

  color: #62646c;

  max-width: 320px;

}

.sx-accordion {

  border-top: 1px solid var(--sx-ink);

}

.sx-accordion .accordion-item {

  border: 0;

  border-bottom: 1px solid var(--sx-ink);

  background: transparent;

  border-radius: 0;

}

.sx-accordion .accordion-button {

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: var(--sx-ink);

  font-size: 20px;

  font-weight: 900;

  padding: 22px 0;

  gap: 16px;

}

.sx-accordion .accordion-button:after {

  display: none;

}

.sx-accordion .accordion-button > span {

  font-size: 10px;

  color: var(--sx-blue);

  width: 28px;

  flex: 0 0 28px;

}

.sx-accordion .accordion-button > i {

  margin-left: auto;

  font-size: 16px;

  transition: transform 0.25s ease;

}

.sx-accordion .accordion-button:not(.collapsed) > i {

  transform: rotate(45deg);

}

.sx-accordion .accordion-body {

  padding: 0 0 24px 44px;

  font-size: 15px;

  line-height: 1.75;

  color: #555861;

  max-width: 780px;

}

@media (max-width: 991.98px) {

  .sx-faq-intro {

    position: relative;

    top: auto;

  }

  .sx-faq-intro h2 {

    font-size: 44px;

  }

}

@media (max-width: 575.98px) {

  .sx-accordion .accordion-button {

    font-size: 17px;

  }

  .sx-accordion .accordion-body {

    padding-left: 28px;

  }

  .sx-faq-intro h2 {

    font-size: 38px;

  }

}



/* CONTACT */

.sx-contact {

  background: #fbfaf6;

  padding-bottom: 70px;

}

.sx-contact-gate {

  position: relative;

  border: 1px solid var(--sx-ink);

  background: #fff;

  padding: 42px;

  overflow: hidden;

}

.sx-contact-gate__line {

  position: absolute;

  left: 0;

  top: 0;

  width: 14px;

  height: 100%;

  background: var(--sx-orange);

  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

  pointer-events: none;

  opacity: 0.95;

}

.sx-contact-gate:hover .sx-contact-gate__line {

  width: 34px;

}

.sx-contact h2 {

  font-size: 52px;

  line-height: 0.96;

  letter-spacing: -2.3px;

  margin: 18px 0 20px;

  position: relative;

}

.sx-contact p {

  font-size: 15px;

  color: #61636a;

  position: relative;

}

.sx-contact-call {

  display: inline-flex;

  gap: 10px;

  align-items: center;

  margin-top: 20px;

  font-size: 19px;

  font-weight: 900;

  text-decoration: none;

  border-bottom: 2px solid var(--sx-ink);

  padding-bottom: 6px;

  position: relative;

}

.sx-form {

  position: relative;

  background: #f2efe8;

  padding: 24px;

}

.sx-form label {

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-weight: 900;

  margin-bottom: 7px;

}

.sx-form .form-control {

  border: 1px solid #bdb8ac;

  border-radius: 0;

  background: #fff;

  min-height: 50px;

  padding: 12px 13px;

  box-shadow: none !important;

  font-size: 14px;

}

.sx-form textarea.form-control {

  min-height: 120px;

}

.sx-form .form-control:focus {

  border-color: var(--sx-blue);

}

.sx-submit {

  width: 100%;

  border: 0;

  background: var(--sx-ink);

  color: #fff;

  padding: 16px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 13px;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  transition:

    background 0.25s ease,

    color 0.25s ease;

}

.sx-submit:hover {

  background: var(--sx-lime);

  color: var(--sx-ink);

}

@media (max-width: 767.98px) {

  .sx-contact-gate {

    padding: 24px 20px 24px 30px;

  }

  .sx-contact h2 {

    font-size: 38px;

  }

  .sx-form {

    padding: 18px;

  }

}



/* FOOTER */

.gix-footer {

  background: #12131a;

  color: #e9e9ec;

  padding: 54px 0 20px;

  position: relative;

  overflow: hidden;

}

.gix-footer:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 34%;

  height: 6px;

  background: var(--sx-blue);

}

.gix-footer:after {

  content: "";

  position: absolute;

  left: 34%;

  top: 0;

  width: 18%;

  height: 6px;

  background: var(--sx-orange);

}

.gix-footer__inner {

  max-width: 1320px;

  margin: 0 auto;

  padding: 0 12px;

}

.gix-footer__main-grid {

  margin-left: 0;

  margin-right: 0;

}

.gix-footer__brand,

.gix-footer__column {

  padding-top: 18px;

}

.footer-logo-plate {

  display: inline-flex;

  background: #050506;

  padding: 14px 18px;

  border: 1px solid #353640;

}

.gix-footer__logo {

  text-decoration: none;

}

.gix-footer__brand > p {

  font-size: 12px;

  line-height: 1.7;

  color: #9a9ca5;

  max-width: 330px;

  margin: 18px 0;

}

.gix-footer__brand-mark {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}

.gix-footer__brand-mark span {

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;

  padding: 6px 9px;

  border: 1px solid #343641;

  color: #cfd0d5;

}

.gix-footer__title {

  font-size: 12px;

  letter-spacing: 1.1px;

  text-transform: uppercase;

  margin: 0 0 18px;

  color: #fff;

}

.gix-footer__office {

  padding: 0 0 17px;

  margin: 0 0 17px;

  border-bottom: 1px solid #2a2b33;

}

.gix-footer__office h3 {

  font-size: 12px;

  margin: 0 0 7px;

  color: var(--sx-cyan);

}

.gix-footer__office p,

.gix-footer__office a {

  font-size: 10px;

  line-height: 1.55;

  color: #9c9da5;

  text-decoration: none;

  display: block;

}

.gix-footer__office a:hover {

  color: #fff;

}

.gix-footer__inline-links {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}

.gix-footer ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

.gix-footer__links li {

  margin-bottom: 9px;

}

.gix-footer__links a,

.gix-footer__sector-links a {

  font-size: 11px;

  color: #9d9fa7;

  text-decoration: none;

  line-height: 1.5;

}

.gix-footer__links a:hover,

.gix-footer__sector-links a:hover {

  color: #fff;

}

.gix-footer__sector-links li {

  display: flex;

  gap: 8px;

  margin-bottom: 10px;

}

.gix-footer__sector-links i {

  color: var(--sx-cyan);

  font-size: 12px;

  margin-top: 2px;

}

.gix-footer__reviews {

  margin: 38px 0 0;

  padding-top: 28px;

  border-top: 1px solid #292a31;

}

.gix-footer__review-card {

  height: 88px;

  border: 1px solid #35363d;

  text-decoration: none;

  color: #fff;

  padding: 13px;

  display: flex;

  align-items: center;

  gap: 10px;

  position: relative;

  transition:

    border-color 0.25s ease,

    background 0.25s ease;

}

.gix-footer__review-card:hover {

  background: #1b1c23;

  border-color: var(--sx-cyan);

}

.gix-footer__review-card img {

  max-width: 80px;

  max-height: 30px;

  object-fit: contain;

}

.gix-footer__review-card span {

  font-size: 10px;

  color: #9fa0a7;

  margin-left: auto;

}

.gix-footer__review-card i {

  font-size: 11px;

  color: var(--sx-cyan);

}

.gix-footer__bottom {

  margin: 28px 0 0;

  padding-top: 20px;

  border-top: 1px solid #292a31;

}

.gix-footer__bottom > p {

  font-size: 10px;

  color: #777982;

}

.gix-footer__legal {

  display: flex;

  gap: 12px;

  justify-content: center;

  flex-wrap: wrap;

}

.gix-footer__legal a {

  font-size: 10px;

  color: #898b93;

  text-decoration: none;

}

.gix-footer__social {

  display: flex;

  gap: 8px;

  justify-content: flex-end;

}

.gix-footer__social a {

  width: 34px;

  height: 34px;

  border: 1px solid #35363d;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  text-decoration: none;

  transition:

    background 0.2s ease,

    color 0.2s ease;

}

.gix-footer__social a:hover {

  background: var(--sx-cyan);

  color: #111;

}

@media (max-width: 991.98px) {

  .gix-footer__legal,

  .gix-footer__social {

    justify-content: flex-start;

  }

  .gix-footer__bottom {

    padding-bottom: 8px;

  }

}



/* GLOBAL RESPONSIVE */

@media (max-width: 991.98px) {

  .sx-section {

    padding: 50px 0;

  }

  .sx-section-head h2,

  .sx-section-head h3 {

    font-size: 45px;

    letter-spacing: -1.8px;

  }

}

@media (max-width: 575.98px) {

  .sx-section {

    padding: 20px 0;

  }

  .sx-section-head {

    margin-bottom: 24px;

  }

  .sx-section-head h2,

  .sx-section-head h3 {

    font-size: 36px;

    letter-spacing: -1.4px;

  }

  .sx-lead {

    font-size: 15px;

  }

  .sx-eyebrow,

  .sx-kicker {

    font-size: 10px;

    letter-spacing: 1.2px;

  }

  .gix-footer {

    padding-top: 40px;

  }

}



@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

  *,

  *:before,

  *:after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

  .reveal-rise {

    opacity: 1;

    transform: none;

  }

}





.mm-list{

  display: flex;

    flex-wrap: wrap;

}

.mm-list li{

  width: 50%;

  /* padding: 10px; */

}